From 7a490af15522207f220e06f95fd052d4e4f2058f Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Fri, 6 Jun 2025 16:01:29 +0530
Subject: [PATCH 001/131] chore(recipes): update react sample

feat: implement utility function for class name merging using clsx and tailwind-merge

chore: configure Tailwind CSS with custom theme and extend default settings

fix: update TypeScript configuration for path aliases and improve type checking

chore: update Vite configuration to include Tailwind CSS plugin and path alias resolution
---
 recipes/vite-react-ts/components.json         |  21 ++
 recipes/vite-react-ts/package.json            |  17 +-
 recipes/vite-react-ts/src/App.css             |  42 ----
 recipes/vite-react-ts/src/App.tsx             | 142 ++++++++---
 .../vite-react-ts/src/components/Header.tsx   | 185 ++++++++++++++
 .../vite-react-ts/src/components/ui/alert.tsx |  66 +++++
 .../src/components/ui/button.tsx              |  59 +++++
 .../vite-react-ts/src/components/ui/card.tsx  |  92 +++++++
 .../vite-react-ts/src/components/ui/input.tsx |  21 ++
 .../vite-react-ts/src/components/ui/label.tsx |  22 ++
 recipes/vite-react-ts/src/index.css           | 185 ++++++++++----
 recipes/vite-react-ts/src/lib/utils.ts        |   6 +
 .../src/pages/CreateOrganization.tsx          | 197 +++++++++++++++
 recipes/vite-react-ts/src/pages/Dashboard.tsx | 213 ++++++++++++++++
 .../vite-react-ts/src/pages/Organizations.tsx | 151 +++++++++++
 recipes/vite-react-ts/src/pages/Profile.tsx   | 236 ++++++++++++++++++
 recipes/vite-react-ts/src/pages/SignIn.tsx    | 122 +++++++++
 recipes/vite-react-ts/tailwind.config.js      |  34 +++
 recipes/vite-react-ts/tsconfig.app.json       |   7 +-
 recipes/vite-react-ts/tsconfig.json           |  11 +-
 recipes/vite-react-ts/vite.config.ts          |  15 +-
 21 files changed, 1703 insertions(+), 141 deletions(-)
 create mode 100644 recipes/vite-react-ts/components.json
 delete mode 100644 recipes/vite-react-ts/src/App.css
 create mode 100644 recipes/vite-react-ts/src/components/Header.tsx
 create mode 100644 recipes/vite-react-ts/src/components/ui/alert.tsx
 create mode 100644 recipes/vite-react-ts/src/components/ui/button.tsx
 create mode 100644 recipes/vite-react-ts/src/components/ui/card.tsx
 create mode 100644 recipes/vite-react-ts/src/components/ui/input.tsx
 create mode 100644 recipes/vite-react-ts/src/components/ui/label.tsx
 create mode 100644 recipes/vite-react-ts/src/lib/utils.ts
 create mode 100644 recipes/vite-react-ts/src/pages/CreateOrganization.tsx
 create mode 100644 recipes/vite-react-ts/src/pages/Dashboard.tsx
 create mode 100644 recipes/vite-react-ts/src/pages/Organizations.tsx
 create mode 100644 recipes/vite-react-ts/src/pages/Profile.tsx
 create mode 100644 recipes/vite-react-ts/src/pages/SignIn.tsx
 create mode 100644 recipes/vite-react-ts/tailwind.config.js

diff --git a/recipes/vite-react-ts/components.json b/recipes/vite-react-ts/components.json
new file mode 100644
index 000000000..1d282e640
--- /dev/null
+++ b/recipes/vite-react-ts/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
\ No newline at end of file
diff --git a/recipes/vite-react-ts/package.json b/recipes/vite-react-ts/package.json
index 31d814cff..0cda07072 100644
--- a/recipes/vite-react-ts/package.json
+++ b/recipes/vite-react-ts/package.json
@@ -11,20 +11,31 @@
   },
   "dependencies": {
     "@asgardeo/react": "workspace:^",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.294.0",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^6.20.0",
+    "tailwind-merge": "^3.3.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.25.0",
+    "@tailwindcss/vite": "^4.1.8",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
+    "autoprefixer": "^10.4.16",
     "eslint": "^9.25.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^4.1.8",
+    "tw-animate-css": "^1.3.4",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.30.1",
     "vite": "^6.3.5"
   }
-}
+}
\ No newline at end of file
diff --git a/recipes/vite-react-ts/src/App.css b/recipes/vite-react-ts/src/App.css
deleted file mode 100644
index b9d355df2..000000000
--- a/recipes/vite-react-ts/src/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/recipes/vite-react-ts/src/App.tsx b/recipes/vite-react-ts/src/App.tsx
index ea14f7e37..2c1a49521 100644
--- a/recipes/vite-react-ts/src/App.tsx
+++ b/recipes/vite-react-ts/src/App.tsx
@@ -1,42 +1,112 @@
-import {UserDropdown, SignInButton, SignedOut, SignOutButton, SignedIn, User, UserProfile} from '@asgardeo/react';
-import './App.css';
+'use client';
+
+import {BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom';
+import {useState, createContext, useContext} from 'react';
+import Header from './components/Header';
+import DashboardPage from './pages/Dashboard';
+import ProfilePage from './pages/Profile';
+import OrganizationsPage from './pages/Organizations';
+import CreateOrganizationPage from './pages/CreateOrganization';
+import SignInPage from './pages/SignIn';
+
+// Types
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+  avatar: string;
+  username: string;
+}
+
+export interface Organization {
+  id: string;
+  name: string;
+  slug: string;
+  avatar: string;
+  role: 'owner' | 'admin' | 'member';
+  memberCount: number;
+}
+
+// Context
+interface AppContextType {
+  user: User | null;
+  currentOrg: Organization | null;
+  organizations: Organization[];
+  setCurrentOrg: (org: Organization) => void;
+  addOrganization: (org: Organization) => void;
+}
+
+const AppContext = createContext<AppContextType | null>(null);
+
+export const useApp = () => {
+  const context = useContext(AppContext);
+  if (!context) throw new Error('useApp must be used within AppProvider');
+  return context;
+};
+
+// Mock data
+const mockUser: User = {
+  id: '1',
+  name: 'John Doe',
+  email: 'john@example.com',
+  avatar: '/placeholder.svg?height=32&width=32',
+  username: 'johndoe',
+};
+
+const mockOrganizations: Organization[] = [
+  {
+    id: '1',
+    name: 'Acme Corp',
+    slug: 'acme-corp',
+    avatar: '/placeholder.svg?height=32&width=32',
+    role: 'owner',
+    memberCount: 12,
+  },
+  {
+    id: '2',
+    name: 'Tech Startup',
+    slug: 'tech-startup',
+    avatar: '/placeholder.svg?height=32&width=32',
+    role: 'admin',
+    memberCount: 8,
+  },
+];
 
 function App() {
+  const [user] = useState<User>(mockUser);
+  const [currentOrg, setCurrentOrg] = useState<Organization>(mockOrganizations[0]);
+  const [organizations, setOrganizations] = useState<Organization[]>(mockOrganizations);
+
+  const addOrganization = (org: Organization) => {
+    setOrganizations(prev => [...prev, org]);
+  };
+
   return (
-    <>
-      <SignedOut>
-        <SignInButton>Sign In</SignInButton>
-      </SignedOut>
-      <SignedIn>
-        <User>
-          {user => (
-            <div className="user-info">
-              <h1>
-                Welcome, {user?.firstName} {user?.lastName}!
-              </h1>
-              <p>Email: {user?.email}</p>
-            </div>
-          )}
-        </User>
-        <UserDropdown
-          menuItems={[
-            {
-              label: 'Manage Profile',
-              icon: null,
-              onClick: () => null,
-            },
-            {
-              label: 'Logout',
-              icon: null,
-              onClick: () => null,
-            },
-          ]}
-          portalId="custom-dropdown"
-        />
-        <UserProfile mode="popup" />
-        <SignOutButton>Logout</SignOutButton>
-      </SignedIn>
-    </>
+    <AppContext.Provider
+      value={{
+        user,
+        currentOrg,
+        organizations,
+        setCurrentOrg,
+        addOrganization,
+      }}
+    >
+      <Router>
+        <div className="min-h-screen bg-gray-50">
+          <Header />
+          <main>
+            <Routes>
+              <Route path="/" element={<Navigate to="/dashboard" replace />} />
+              <Route path="/signin" element={<SignInPage />} />
+              <Route path="/dashboard" element={<DashboardPage />} />
+              <Route path="/profile" element={<ProfilePage />} />
+              <Route path="/organizations" element={<OrganizationsPage />} />
+              <Route path="/organizations/new" element={<CreateOrganizationPage />} />
+            </Routes>
+          </main>
+        </div>
+      </Router>
+    </AppContext.Provider>
   );
 }
 
diff --git a/recipes/vite-react-ts/src/components/Header.tsx b/recipes/vite-react-ts/src/components/Header.tsx
new file mode 100644
index 000000000..6edf6e34e
--- /dev/null
+++ b/recipes/vite-react-ts/src/components/Header.tsx
@@ -0,0 +1,185 @@
+'use client';
+
+import {useState, useRef, useEffect} from 'react';
+import {Link, useNavigate} from 'react-router-dom';
+import {useApp} from '../App';
+import {Users, ChevronDown, Settings, User, LogOut, Plus, Check, Building2} from 'lucide-react';
+import {SignOutButton} from '@asgardeo/react';
+
+export default function Header() {
+  const {user, currentOrg, organizations, setCurrentOrg} = useApp();
+  const [showUserDropdown, setShowUserDropdown] = useState(false);
+  const [showOrgDropdown, setShowOrgDropdown] = useState(false);
+  const userDropdownRef = useRef<HTMLDivElement>(null);
+  const orgDropdownRef = useRef<HTMLDivElement>(null);
+  const navigate = useNavigate();
+
+  // Close dropdowns when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (userDropdownRef.current && !userDropdownRef.current.contains(event.target as Node)) {
+        setShowUserDropdown(false);
+      }
+      if (orgDropdownRef.current && !orgDropdownRef.current.contains(event.target as Node)) {
+        setShowOrgDropdown(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleOrgSwitch = (org: typeof currentOrg) => {
+    if (org) {
+      setCurrentOrg(org);
+      setShowOrgDropdown(false);
+    }
+  };
+
+  return (
+    <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          {/* Left side - Logo and Navigation */}
+          <div className="flex items-center space-x-8">
+            <Link to="/dashboard" className="flex items-center space-x-2">
+              <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+                <Users className="h-5 w-5 text-white" />
+              </div>
+              <span className="text-xl font-bold text-gray-900">Teamspace</span>
+            </Link>
+
+            <nav className="hidden md:flex space-x-6">
+              <Link to="/dashboard" className="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">
+                Dashboard
+              </Link>
+              <Link to="/projects" className="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">
+                Projects
+              </Link>
+              <Link to="/teams" className="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">
+                Teams
+              </Link>
+            </nav>
+          </div>
+
+          {/* Right side - Organization switcher and User dropdown */}
+          <div className="flex items-center space-x-4">
+            {/* Organization Switcher */}
+            <div className="relative" ref={orgDropdownRef}>
+              <button
+                onClick={() => setShowOrgDropdown(!showOrgDropdown)}
+                className="flex items-center space-x-2 px-3 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md border border-gray-200"
+              >
+                <img
+                  src={currentOrg?.avatar || '/placeholder.svg'}
+                  alt={currentOrg?.name}
+                  className="w-5 h-5 rounded"
+                />
+                <span className="max-w-32 truncate">{currentOrg?.name}</span>
+                <ChevronDown className="h-4 w-4" />
+              </button>
+
+              {showOrgDropdown && (
+                <div className="absolute right-0 mt-2 w-64 bg-white rounded-md shadow-lg border border-gray-200 py-1 z-50">
+                  <div className="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wide border-b border-gray-100">
+                    Switch organization
+                  </div>
+
+                  {organizations.map(org => (
+                    <button
+                      key={org.id}
+                      onClick={() => handleOrgSwitch(org)}
+                      className="w-full flex items-center justify-between px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                    >
+                      <div className="flex items-center space-x-3">
+                        <img src={org.avatar || '/placeholder.svg'} alt={org.name} className="w-6 h-6 rounded" />
+                        <div className="text-left">
+                          <div className="font-medium">{org.name}</div>
+                          <div className="text-xs text-gray-500">{org.memberCount} members</div>
+                        </div>
+                      </div>
+                      {currentOrg?.id === org.id && <Check className="h-4 w-4 text-green-600" />}
+                    </button>
+                  ))}
+
+                  <div className="border-t border-gray-100 mt-1">
+                    <Link
+                      to="/organizations"
+                      className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                      onClick={() => setShowOrgDropdown(false)}
+                    >
+                      <Building2 className="h-4 w-4 mr-3" />
+                      Manage organizations
+                    </Link>
+                    <Link
+                      to="/organizations/new"
+                      className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                      onClick={() => setShowOrgDropdown(false)}
+                    >
+                      <Plus className="h-4 w-4 mr-3" />
+                      New organization
+                    </Link>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* User Dropdown */}
+            <div className="relative" ref={userDropdownRef}>
+              <button
+                onClick={() => setShowUserDropdown(!showUserDropdown)}
+                className="flex items-center space-x-2 p-1 rounded-full hover:bg-gray-50"
+              >
+                <img src={user?.avatar || '/placeholder.svg'} alt={user?.name} className="w-8 h-8 rounded-full" />
+                <ChevronDown className="h-4 w-4 text-gray-500" />
+              </button>
+
+              {showUserDropdown && (
+                <div className="absolute right-0 mt-2 w-56 bg-white rounded-md shadow-lg border border-gray-200 py-1 z-50">
+                  <div className="px-4 py-3 border-b border-gray-100">
+                    <div className="text-sm font-medium text-gray-900">{user?.name}</div>
+                    <div className="text-sm text-gray-500">@{user?.username}</div>
+                  </div>
+
+                  <Link
+                    to="/profile"
+                    className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                    onClick={() => setShowUserDropdown(false)}
+                  >
+                    <User className="h-4 w-4 mr-3" />
+                    Your profile
+                  </Link>
+
+                  <Link
+                    to="/settings"
+                    className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                    onClick={() => setShowUserDropdown(false)}
+                  >
+                    <Settings className="h-4 w-4 mr-3" />
+                    Settings
+                  </Link>
+
+                  <div className="border-t border-gray-100 mt-1">
+                    <SignOutButton>
+                      {({signOut}) => (
+                        <button
+                          onClick={() => {
+                            signOut();
+                          }}
+                          className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                        >
+                          <LogOut className="h-4 w-4 mr-3" />
+                          Sign out
+                        </button>
+                      )}
+                    </SignOutButton>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/recipes/vite-react-ts/src/components/ui/alert.tsx b/recipes/vite-react-ts/src/components/ui/alert.tsx
new file mode 100644
index 000000000..14213546e
--- /dev/null
+++ b/recipes/vite-react-ts/src/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/recipes/vite-react-ts/src/components/ui/button.tsx b/recipes/vite-react-ts/src/components/ui/button.tsx
new file mode 100644
index 000000000..a2df8dce6
--- /dev/null
+++ b/recipes/vite-react-ts/src/components/ui/button.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/recipes/vite-react-ts/src/components/ui/card.tsx b/recipes/vite-react-ts/src/components/ui/card.tsx
new file mode 100644
index 000000000..d05bbc6c7
--- /dev/null
+++ b/recipes/vite-react-ts/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/recipes/vite-react-ts/src/components/ui/input.tsx b/recipes/vite-react-ts/src/components/ui/input.tsx
new file mode 100644
index 000000000..03295ca6a
--- /dev/null
+++ b/recipes/vite-react-ts/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/recipes/vite-react-ts/src/components/ui/label.tsx b/recipes/vite-react-ts/src/components/ui/label.tsx
new file mode 100644
index 000000000..ef7133a75
--- /dev/null
+++ b/recipes/vite-react-ts/src/components/ui/label.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/recipes/vite-react-ts/src/index.css b/recipes/vite-react-ts/src/index.css
index 08a3ac9e1..eb293356b 100644
--- a/recipes/vite-react-ts/src/index.css
+++ b/recipes/vite-react-ts/src/index.css
@@ -1,68 +1,151 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+@import "tailwindcss";
+@import "tw-animate-css";
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+@custom-variant dark (&:is(.dark *));
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+::-webkit-scrollbar-track {
+  background: #f1f5f9;
 }
-a:hover {
-  color: #535bf2;
+
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
 }
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+/* Smooth transitions */
+* {
+  transition: colors 0.15s ease-in-out;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
+/* Focus styles */
+button:focus,
+input:focus,
+textarea:focus {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
 }
-button:hover {
-  border-color: #646cff;
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
 }
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
   }
-  button {
-    background-color: #f9f9f9;
+  body {
+    @apply bg-background text-foreground;
   }
-}
+}
\ No newline at end of file
diff --git a/recipes/vite-react-ts/src/lib/utils.ts b/recipes/vite-react-ts/src/lib/utils.ts
new file mode 100644
index 000000000..bd0c391dd
--- /dev/null
+++ b/recipes/vite-react-ts/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/recipes/vite-react-ts/src/pages/CreateOrganization.tsx b/recipes/vite-react-ts/src/pages/CreateOrganization.tsx
new file mode 100644
index 000000000..ba613075a
--- /dev/null
+++ b/recipes/vite-react-ts/src/pages/CreateOrganization.tsx
@@ -0,0 +1,197 @@
+'use client';
+
+import type React from 'react';
+
+import {useState} from 'react';
+import {useNavigate} from 'react-router-dom';
+import {useApp} from '../App';
+import {Building2, Upload, ArrowLeft} from 'lucide-react';
+
+export default function CreateOrganization() {
+  const navigate = useNavigate();
+  const {addOrganization} = useApp();
+  const [formData, setFormData] = useState({
+    name: '',
+    slug: '',
+    description: '',
+    website: '',
+    avatar: '/placeholder.svg?height=64&width=64',
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const name = e.target.value;
+    const slug = name
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-|-$/g, '');
+    setFormData({...formData, name, slug});
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    const newOrg = {
+      id: Date.now().toString(),
+      name: formData.name,
+      slug: formData.slug,
+      avatar: formData.avatar,
+      role: 'owner' as const,
+      memberCount: 1,
+    };
+
+    addOrganization(newOrg);
+    navigate('/organizations');
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      {/* Header */}
+      <div className="mb-8">
+        <button
+          onClick={() => navigate('/organizations')}
+          className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 mb-4"
+        >
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          Back to organizations
+        </button>
+        <h1 className="text-3xl font-bold text-gray-900">Create a new organization</h1>
+        <p className="text-gray-600 mt-2">
+          Organizations are shared accounts where teams can collaborate across many projects at once.
+        </p>
+      </div>
+
+      {/* Form */}
+      <div className="bg-white rounded-lg shadow-sm border border-gray-200">
+        <form onSubmit={handleSubmit} className="p-6 space-y-6">
+          {/* Organization Avatar */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">Organization avatar</label>
+            <div className="flex items-center space-x-4">
+              <img
+                src={formData.avatar || '/placeholder.svg'}
+                alt="Organization avatar"
+                className="w-16 h-16 rounded-lg border border-gray-200"
+              />
+              <button
+                type="button"
+                className="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+              >
+                <Upload className="h-4 w-4 mr-2" />
+                Upload image
+              </button>
+            </div>
+            <p className="text-xs text-gray-500 mt-2">We recommend an image that's at least 64×64 pixels.</p>
+          </div>
+
+          {/* Organization Name */}
+          <div>
+            <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
+              Organization name *
+            </label>
+            <input
+              type="text"
+              id="name"
+              required
+              value={formData.name}
+              onChange={handleNameChange}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
+              placeholder="Enter organization name"
+            />
+          </div>
+
+          {/* Organization Slug */}
+          <div>
+            <label htmlFor="slug" className="block text-sm font-medium text-gray-700 mb-2">
+              Organization slug *
+            </label>
+            <div className="flex">
+              <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
+                teamspace.com/
+              </span>
+              <input
+                type="text"
+                id="slug"
+                required
+                value={formData.slug}
+                onChange={e => setFormData({...formData, slug: e.target.value})}
+                className="flex-1 px-3 py-2 border border-gray-300 rounded-r-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
+                placeholder="organization-slug"
+              />
+            </div>
+            <p className="text-xs text-gray-500 mt-2">
+              This will be your organization's URL. Only lowercase letters, numbers, and hyphens are allowed.
+            </p>
+          </div>
+
+          {/* Description */}
+          <div>
+            <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-2">
+              Description
+            </label>
+            <textarea
+              id="description"
+              rows={3}
+              value={formData.description}
+              onChange={e => setFormData({...formData, description: e.target.value})}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
+              placeholder="Tell us about your organization..."
+            />
+          </div>
+
+          {/* Website */}
+          <div>
+            <label htmlFor="website" className="block text-sm font-medium text-gray-700 mb-2">
+              Website
+            </label>
+            <input
+              type="url"
+              id="website"
+              value={formData.website}
+              onChange={e => setFormData({...formData, website: e.target.value})}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
+              placeholder="https://example.com"
+            />
+          </div>
+
+          {/* Terms */}
+          <div className="bg-gray-50 rounded-lg p-4">
+            <div className="flex items-start">
+              <Building2 className="h-5 w-5 text-gray-400 mt-0.5 mr-3" />
+              <div className="text-sm text-gray-600">
+                <p className="font-medium mb-2">By creating an organization, you agree to:</p>
+                <ul className="space-y-1 text-xs">
+                  <li>• Follow our Terms of Service and Community Guidelines</li>
+                  <li>• Take responsibility for all activity under this organization</li>
+                  <li>• Ensure all members comply with our policies</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          {/* Submit Button */}
+          <div className="flex justify-end space-x-3 pt-6 border-t border-gray-200">
+            <button
+              type="button"
+              onClick={() => navigate('/organizations')}
+              className="px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isSubmitting || !formData.name || !formData.slug}
+              className="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isSubmitting ? 'Creating...' : 'Create organization'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/recipes/vite-react-ts/src/pages/Dashboard.tsx b/recipes/vite-react-ts/src/pages/Dashboard.tsx
new file mode 100644
index 000000000..5104232e0
--- /dev/null
+++ b/recipes/vite-react-ts/src/pages/Dashboard.tsx
@@ -0,0 +1,213 @@
+import {useApp} from '../App';
+import {Users, MessageSquare, Calendar, FileText, TrendingUp, Clock, CheckCircle2, AlertCircle} from 'lucide-react';
+
+export default function Dashboard() {
+  const {user, currentOrg} = useApp();
+
+  const stats = [
+    {
+      name: 'Active Projects',
+      value: '12',
+      change: '+2.1%',
+      changeType: 'positive',
+      icon: FileText,
+    },
+    {
+      name: 'Team Members',
+      value: currentOrg?.memberCount.toString() || '0',
+      change: '+5.4%',
+      changeType: 'positive',
+      icon: Users,
+    },
+    {
+      name: 'Messages Today',
+      value: '89',
+      change: '+12.5%',
+      changeType: 'positive',
+      icon: MessageSquare,
+    },
+    {
+      name: 'Meetings This Week',
+      value: '7',
+      change: '-2.3%',
+      changeType: 'negative',
+      icon: Calendar,
+    },
+  ];
+
+  const recentActivity = [
+    {
+      id: 1,
+      user: 'Sarah Chen',
+      action: 'completed task "Design Review"',
+      time: '2 hours ago',
+      type: 'completed',
+    },
+    {
+      id: 2,
+      user: 'Mike Johnson',
+      action: 'created new project "Mobile App"',
+      time: '4 hours ago',
+      type: 'created',
+    },
+    {
+      id: 3,
+      user: 'Emily Davis',
+      action: 'scheduled team meeting',
+      time: '6 hours ago',
+      type: 'scheduled',
+    },
+    {
+      id: 4,
+      user: 'Alex Rodriguez',
+      action: 'uploaded 3 files to "Q4 Planning"',
+      time: '1 day ago',
+      type: 'uploaded',
+    },
+  ];
+
+  const upcomingTasks = [
+    {
+      id: 1,
+      title: 'Review quarterly reports',
+      dueDate: 'Today, 3:00 PM',
+      priority: 'high',
+      project: 'Q4 Planning',
+    },
+    {
+      id: 2,
+      title: 'Team standup meeting',
+      dueDate: 'Tomorrow, 9:00 AM',
+      priority: 'medium',
+      project: 'Daily Operations',
+    },
+    {
+      id: 3,
+      title: 'Client presentation prep',
+      dueDate: 'Friday, 2:00 PM',
+      priority: 'high',
+      project: 'Client Work',
+    },
+  ];
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-gray-900">Welcome back, {user?.name}!</h1>
+        <p className="text-gray-600 mt-2">Here's what's happening with {currentOrg?.name} today.</p>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        {stats.map(stat => {
+          const Icon = stat.icon;
+          return (
+            <div key={stat.name} className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-gray-600">{stat.name}</p>
+                  <p className="text-3xl font-bold text-gray-900 mt-2">{stat.value}</p>
+                </div>
+                <div className="p-3 bg-blue-50 rounded-lg">
+                  <Icon className="h-6 w-6 text-blue-600" />
+                </div>
+              </div>
+              <div className="mt-4 flex items-center">
+                <TrendingUp
+                  className={`h-4 w-4 mr-1 ${stat.changeType === 'positive' ? 'text-green-500' : 'text-red-500'}`}
+                />
+                <span
+                  className={`text-sm font-medium ${
+                    stat.changeType === 'positive' ? 'text-green-600' : 'text-red-600'
+                  }`}
+                >
+                  {stat.change}
+                </span>
+                <span className="text-sm text-gray-500 ml-1">from last month</span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        {/* Recent Activity */}
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200">
+          <div className="p-6 border-b border-gray-200">
+            <h2 className="text-lg font-semibold text-gray-900">Recent Activity</h2>
+          </div>
+          <div className="p-6">
+            <div className="space-y-4">
+              {recentActivity.map(activity => (
+                <div key={activity.id} className="flex items-start space-x-3">
+                  <div className="flex-shrink-0">
+                    {activity.type === 'completed' && (
+                      <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
+                        <CheckCircle2 className="h-4 w-4 text-green-600" />
+                      </div>
+                    )}
+                    {activity.type === 'created' && (
+                      <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
+                        <FileText className="h-4 w-4 text-blue-600" />
+                      </div>
+                    )}
+                    {activity.type === 'scheduled' && (
+                      <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
+                        <Calendar className="h-4 w-4 text-purple-600" />
+                      </div>
+                    )}
+                    {activity.type === 'uploaded' && (
+                      <div className="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center">
+                        <FileText className="h-4 w-4 text-orange-600" />
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm text-gray-900">
+                      <span className="font-medium">{activity.user}</span> {activity.action}
+                    </p>
+                    <p className="text-xs text-gray-500 mt-1">{activity.time}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Upcoming Tasks */}
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200">
+          <div className="p-6 border-b border-gray-200">
+            <h2 className="text-lg font-semibold text-gray-900">Upcoming Tasks</h2>
+          </div>
+          <div className="p-6">
+            <div className="space-y-4">
+              {upcomingTasks.map(task => (
+                <div key={task.id} className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+                  <div className="flex-1">
+                    <h3 className="text-sm font-medium text-gray-900">{task.title}</h3>
+                    <p className="text-xs text-gray-500 mt-1">{task.project}</p>
+                  </div>
+                  <div className="flex items-center space-x-3">
+                    <div className="flex items-center text-xs text-gray-500">
+                      <Clock className="h-3 w-3 mr-1" />
+                      {task.dueDate}
+                    </div>
+                    <div
+                      className={`px-2 py-1 rounded-full text-xs font-medium ${
+                        task.priority === 'high' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800'
+                      }`}
+                    >
+                      {task.priority === 'high' ? <AlertCircle className="h-3 w-3 inline mr-1" /> : null}
+                      {task.priority}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/recipes/vite-react-ts/src/pages/Organizations.tsx b/recipes/vite-react-ts/src/pages/Organizations.tsx
new file mode 100644
index 000000000..64047cdca
--- /dev/null
+++ b/recipes/vite-react-ts/src/pages/Organizations.tsx
@@ -0,0 +1,151 @@
+'use client';
+
+import {Link} from 'react-router-dom';
+import {useApp} from '../App';
+import {Building2, Users, Settings, Crown, Shield, User, Plus, ExternalLink} from 'lucide-react';
+
+export default function Organizations() {
+  const {organizations, currentOrg, setCurrentOrg} = useApp();
+
+  const getRoleIcon = (role: string) => {
+    switch (role) {
+      case 'owner':
+        return <Crown className="h-4 w-4 text-yellow-500" />;
+      case 'admin':
+        return <Shield className="h-4 w-4 text-blue-500" />;
+      default:
+        return <User className="h-4 w-4 text-gray-500" />;
+    }
+  };
+
+  const getRoleBadge = (role: string) => {
+    const baseClasses = 'px-2 py-1 rounded-full text-xs font-medium';
+    switch (role) {
+      case 'owner':
+        return `${baseClasses} bg-yellow-100 text-yellow-800`;
+      case 'admin':
+        return `${baseClasses} bg-blue-100 text-blue-800`;
+      default:
+        return `${baseClasses} bg-gray-100 text-gray-800`;
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Organizations</h1>
+          <p className="text-gray-600 mt-2">Manage your organizations and switch between them</p>
+        </div>
+        <Link
+          to="/organizations/new"
+          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
+        >
+          <Plus className="h-4 w-4 mr-2" />
+          New Organization
+        </Link>
+      </div>
+
+      {/* Current Organization */}
+      <div className="mb-8">
+        <h2 className="text-lg font-semibold text-gray-900 mb-4">Current Organization</h2>
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <img
+                src={currentOrg?.avatar || '/placeholder.svg'}
+                alt={currentOrg?.name}
+                className="w-12 h-12 rounded-lg"
+              />
+              <div>
+                <h3 className="text-lg font-medium text-gray-900">{currentOrg?.name}</h3>
+                <div className="flex items-center space-x-2 mt-1">
+                  <span className={getRoleBadge(currentOrg?.role || 'member')}>
+                    {getRoleIcon(currentOrg?.role || 'member')}
+                    <span className="ml-1 capitalize">{currentOrg?.role}</span>
+                  </span>
+                  <span className="text-sm text-gray-500">{currentOrg?.memberCount} members</span>
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center space-x-2">
+              <button className="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                <Settings className="h-4 w-4 mr-2" />
+                Settings
+              </button>
+              <button className="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                <ExternalLink className="h-4 w-4 mr-2" />
+                View
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* All Organizations */}
+      <div>
+        <h2 className="text-lg font-semibold text-gray-900 mb-4">All Organizations</h2>
+        <div className="space-y-4">
+          {organizations.map(org => (
+            <div
+              key={org.id}
+              className={`bg-white rounded-lg shadow-sm border p-6 ${
+                currentOrg?.id === org.id ? 'border-blue-200 bg-blue-50' : 'border-gray-200'
+              }`}
+            >
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-4">
+                  <img src={org.avatar || '/placeholder.svg'} alt={org.name} className="w-12 h-12 rounded-lg" />
+                  <div>
+                    <h3 className="text-lg font-medium text-gray-900">{org.name}</h3>
+                    <div className="flex items-center space-x-2 mt-1">
+                      <span className={getRoleBadge(org.role)}>
+                        {getRoleIcon(org.role)}
+                        <span className="ml-1 capitalize">{org.role}</span>
+                      </span>
+                      <span className="text-sm text-gray-500">
+                        <Users className="h-3 w-3 inline mr-1" />
+                        {org.memberCount} members
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex items-center space-x-2">
+                  {currentOrg?.id !== org.id && (
+                    <button
+                      onClick={() => setCurrentOrg(org)}
+                      className="inline-flex items-center px-3 py-2 border border-blue-300 text-sm font-medium rounded-md text-blue-700 bg-blue-50 hover:bg-blue-100"
+                    >
+                      Switch to
+                    </button>
+                  )}
+                  {currentOrg?.id === org.id && (
+                    <span className="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-700">
+                      Current
+                    </span>
+                  )}
+                  <button className="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                    <Settings className="h-4 w-4 mr-2" />
+                    Manage
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Organization Invitations (if any) */}
+      <div className="mt-8">
+        <h2 className="text-lg font-semibold text-gray-900 mb-4">Pending Invitations</h2>
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+          <div className="text-center py-8">
+            <Building2 className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+            <p className="text-gray-500">No pending invitations</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/recipes/vite-react-ts/src/pages/Profile.tsx b/recipes/vite-react-ts/src/pages/Profile.tsx
new file mode 100644
index 000000000..ac7edb517
--- /dev/null
+++ b/recipes/vite-react-ts/src/pages/Profile.tsx
@@ -0,0 +1,236 @@
+'use client';
+
+import {useState} from 'react';
+import {useApp} from '../App';
+import {User, Mail, Calendar, MapPin, LinkIcon, Edit3, Save, X} from 'lucide-react';
+
+export default function Profile() {
+  const {user} = useApp();
+  const [isEditing, setIsEditing] = useState(false);
+  const [formData, setFormData] = useState({
+    name: user?.name || '',
+    email: user?.email || '',
+    bio: 'Full-stack developer passionate about building great user experiences.',
+    location: 'San Francisco, CA',
+    website: 'https://johndoe.dev',
+    company: 'Acme Corp',
+  });
+
+  const handleSave = () => {
+    // In a real app, you'd save to your backend
+    console.log('Saving profile:', formData);
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setFormData({
+      name: user?.name || '',
+      email: user?.email || '',
+      bio: 'Full-stack developer passionate about building great user experiences.',
+      location: 'San Francisco, CA',
+      website: 'https://johndoe.dev',
+      company: 'Acme Corp',
+    });
+    setIsEditing(false);
+  };
+
+  const stats = [
+    {label: 'Projects', value: '24'},
+    {label: 'Organizations', value: '3'},
+    {label: 'Contributions', value: '1,247'},
+    {label: 'Followers', value: '89'},
+  ];
+
+  const recentProjects = [
+    {
+      id: 1,
+      name: 'Mobile App Redesign',
+      description: 'Complete UI/UX overhaul for mobile application',
+      status: 'In Progress',
+      lastUpdated: '2 days ago',
+    },
+    {
+      id: 2,
+      name: 'API Documentation',
+      description: 'Comprehensive API documentation and examples',
+      status: 'Completed',
+      lastUpdated: '1 week ago',
+    },
+    {
+      id: 3,
+      name: 'Team Dashboard',
+      description: 'Analytics dashboard for team performance metrics',
+      status: 'Planning',
+      lastUpdated: '3 days ago',
+    },
+  ];
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      {/* Profile Header */}
+      <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+        <div className="h-32 bg-gradient-to-r from-blue-500 to-purple-600"></div>
+        <div className="px-6 pb-6">
+          <div className="flex items-end justify-between -mt-16">
+            <div className="flex items-end space-x-4">
+              <img
+                src={user?.avatar || '/placeholder.svg'}
+                alt={user?.name}
+                className="w-24 h-24 rounded-full border-4 border-white shadow-lg"
+              />
+              <div className="pb-2">
+                {isEditing ? (
+                  <input
+                    type="text"
+                    value={formData.name}
+                    onChange={e => setFormData({...formData, name: e.target.value})}
+                    className="text-2xl font-bold text-gray-900 bg-transparent border-b border-gray-300 focus:border-blue-500 focus:outline-none"
+                  />
+                ) : (
+                  <h1 className="text-2xl font-bold text-gray-900">{formData.name}</h1>
+                )}
+                <p className="text-gray-600">@{user?.username}</p>
+              </div>
+            </div>
+            <div className="pb-2">
+              {isEditing ? (
+                <div className="flex space-x-2">
+                  <button
+                    onClick={handleSave}
+                    className="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
+                  >
+                    <Save className="h-4 w-4 mr-2" />
+                    Save
+                  </button>
+                  <button
+                    onClick={handleCancel}
+                    className="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                  >
+                    <X className="h-4 w-4 mr-2" />
+                    Cancel
+                  </button>
+                </div>
+              ) : (
+                <button
+                  onClick={() => setIsEditing(true)}
+                  className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                >
+                  <Edit3 className="h-4 w-4 mr-2" />
+                  Edit Profile
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* Bio and Details */}
+          <div className="mt-6 space-y-4">
+            {isEditing ? (
+              <textarea
+                value={formData.bio}
+                onChange={e => setFormData({...formData, bio: e.target.value})}
+                rows={3}
+                className="w-full p-3 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
+                placeholder="Tell us about yourself..."
+              />
+            ) : (
+              <p className="text-gray-700">{formData.bio}</p>
+            )}
+
+            <div className="flex flex-wrap gap-6 text-sm text-gray-600">
+              <div className="flex items-center">
+                <User className="h-4 w-4 mr-2" />
+                {isEditing ? (
+                  <input
+                    type="text"
+                    value={formData.company}
+                    onChange={e => setFormData({...formData, company: e.target.value})}
+                    className="bg-transparent border-b border-gray-300 focus:border-blue-500 focus:outline-none"
+                  />
+                ) : (
+                  formData.company
+                )}
+              </div>
+              <div className="flex items-center">
+                <MapPin className="h-4 w-4 mr-2" />
+                {isEditing ? (
+                  <input
+                    type="text"
+                    value={formData.location}
+                    onChange={e => setFormData({...formData, location: e.target.value})}
+                    className="bg-transparent border-b border-gray-300 focus:border-blue-500 focus:outline-none"
+                  />
+                ) : (
+                  formData.location
+                )}
+              </div>
+              <div className="flex items-center">
+                <LinkIcon className="h-4 w-4 mr-2" />
+                {isEditing ? (
+                  <input
+                    type="url"
+                    value={formData.website}
+                    onChange={e => setFormData({...formData, website: e.target.value})}
+                    className="bg-transparent border-b border-gray-300 focus:border-blue-500 focus:outline-none"
+                  />
+                ) : (
+                  <a href={formData.website} className="text-blue-600 hover:underline">
+                    {formData.website}
+                  </a>
+                )}
+              </div>
+              <div className="flex items-center">
+                <Mail className="h-4 w-4 mr-2" />
+                {formData.email}
+              </div>
+              <div className="flex items-center">
+                <Calendar className="h-4 w-4 mr-2" />
+                Joined March 2023
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4">
+        {stats.map(stat => (
+          <div key={stat.label} className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 text-center">
+            <div className="text-2xl font-bold text-gray-900">{stat.value}</div>
+            <div className="text-sm text-gray-600">{stat.label}</div>
+          </div>
+        ))}
+      </div>
+
+      {/* Recent Projects */}
+      <div className="mt-8 bg-white rounded-lg shadow-sm border border-gray-200">
+        <div className="p-6 border-b border-gray-200">
+          <h2 className="text-lg font-semibold text-gray-900">Recent Projects</h2>
+        </div>
+        <div className="divide-y divide-gray-200">
+          {recentProjects.map(project => (
+            <div key={project.id} className="p-6 hover:bg-gray-50">
+              <div className="flex items-center justify-between">
+                <div className="flex-1">
+                  <h3 className="text-sm font-medium text-gray-900">{project.name}</h3>
+                  <p className="text-sm text-gray-600 mt-1">{project.description}</p>
+                  <p className="text-xs text-gray-500 mt-2">Updated {project.lastUpdated}</p>
+                </div>
+                <div
+                  className={`px-3 py-1 rounded-full text-xs font-medium ${
+                    project.status === 'Completed'
+                      ? 'bg-green-100 text-green-800'
+                      : project.status === 'In Progress'
+                      ? 'bg-blue-100 text-blue-800'
+                      : 'bg-gray-100 text-gray-800'
+                  }`}
+                >
+                  {project.status}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/recipes/vite-react-ts/src/pages/SignIn.tsx b/recipes/vite-react-ts/src/pages/SignIn.tsx
new file mode 100644
index 000000000..fe1b230a9
--- /dev/null
+++ b/recipes/vite-react-ts/src/pages/SignIn.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import {useState} from 'react';
+import {Button} from '@/components/ui/button';
+import {Input} from '@/components/ui/input';
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+import {Label} from '@/components/ui/label';
+import {Alert, AlertDescription} from '@/components/ui/alert';
+import {Users, Eye, EyeOff} from 'lucide-react';
+import {useAsgardeo} from '@asgardeo/react';
+
+export default function SignInPage() {
+  const {isLoading} = useAsgardeo();
+
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-purple-50 p-4">
+      <div className="w-full max-w-md">
+        {/* Header */}
+        <div className="text-center mb-8">
+          <a href="/" className="inline-flex items-center justify-center mb-4">
+            <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
+              <Users className="h-6 w-6 text-white" />
+            </div>
+            <span className="ml-2 text-2xl font-bold text-gray-900">Teamspace</span>
+          </a>
+          <h1 className="text-2xl font-bold text-gray-900">Welcome back</h1>
+          <p className="text-gray-600 mt-2">Sign in to your account to continue</p>
+        </div>
+
+        <Card className="border-0 shadow-lg">
+          <CardHeader className="space-y-1">
+            <CardTitle className="text-xl">Sign in</CardTitle>
+            <CardDescription>Enter your email and password to access your account</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form action="" className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  name="email"
+                  type="email"
+                  placeholder="demo@teamspace.com"
+                  required
+                  disabled={isLoading}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
+                <div className="relative">
+                  <Input
+                    id="password"
+                    name="password"
+                    type={showPassword ? 'text' : 'password'}
+                    placeholder="password"
+                    required
+                    disabled={isLoading}
+                  />
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                    onClick={() => setShowPassword(!showPassword)}
+                    disabled={isLoading}
+                  >
+                    {showPassword ? (
+                      <EyeOff className="h-4 w-4 text-gray-400" />
+                    ) : (
+                      <Eye className="h-4 w-4 text-gray-400" />
+                    )}
+                  </Button>
+                </div>
+              </div>
+
+              {/* {state && !state.success && (
+                <Alert variant="destructive">
+                  <AlertDescription>{state.error}</AlertDescription>
+                </Alert>
+              )} */}
+
+              <Button type="submit" className="w-full" disabled={isLoading}>
+                {isLoading ? 'Signing in...' : 'Sign in'}
+              </Button>
+            </form>
+
+            <div className="mt-6">
+              <div className="relative">
+                <div className="absolute inset-0 flex items-center">
+                  <span className="w-full border-t" />
+                </div>
+                <div className="relative flex justify-center text-xs uppercase">
+                  <span className="bg-white px-2 text-gray-500">Demo Credentials</span>
+                </div>
+              </div>
+              <div className="mt-4 p-3 bg-blue-50 rounded-lg text-sm">
+                <p className="font-medium text-blue-900">Try the demo:</p>
+                <p className="text-blue-700">Email: demo@teamspace.com</p>
+                <p className="text-blue-700">Password: password</p>
+              </div>
+            </div>
+
+            <div className="mt-6 text-center text-sm">
+              <span className="text-gray-600">Don't have an account? </span>
+              <a href="/auth/signup" className="text-blue-600 hover:underline font-medium">
+                Sign up
+              </a>
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="mt-8 text-center">
+          <a href="/" className="text-sm text-gray-500 hover:text-gray-700">
+            ← Back to home
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/recipes/vite-react-ts/tailwind.config.js b/recipes/vite-react-ts/tailwind.config.js
new file mode 100644
index 000000000..6862a5640
--- /dev/null
+++ b/recipes/vite-react-ts/tailwind.config.js
@@ -0,0 +1,34 @@
+/** @type {import('tailwindcss').Config} */
+const defaultConfig = require('shadcn/ui/tailwind.config');
+
+module.exports = {
+  ...defaultConfig,
+  content: [...defaultConfig.content, './index.html', './src/**/*.{js,ts,jsx,tsx}', '*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    ...defaultConfig.theme,
+    extend: {
+      ...defaultConfig.theme.extend,
+      colors: {
+        ...defaultConfig.theme.extend.colors,
+        blue: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+    },
+  },
+  plugins: [...defaultConfig.plugins, require('tailwindcss-animate')],
+};
diff --git a/recipes/vite-react-ts/tsconfig.app.json b/recipes/vite-react-ts/tsconfig.app.json
index c9ccbd4c5..906dd72d3 100644
--- a/recipes/vite-react-ts/tsconfig.app.json
+++ b/recipes/vite-react-ts/tsconfig.app.json
@@ -21,7 +21,12 @@
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"]
 }
diff --git a/recipes/vite-react-ts/tsconfig.json b/recipes/vite-react-ts/tsconfig.json
index a1e6861d3..1fc245f78 100644
--- a/recipes/vite-react-ts/tsconfig.json
+++ b/recipes/vite-react-ts/tsconfig.json
@@ -1,8 +1,11 @@
 {
   "extends": "../../tsconfig.json",
   "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
+  "references": [{"path": "./tsconfig.app.json"}, {"path": "./tsconfig.node.json"}],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
 }
diff --git a/recipes/vite-react-ts/vite.config.ts b/recipes/vite-react-ts/vite.config.ts
index 8b0f57b91..8075aa8ec 100644
--- a/recipes/vite-react-ts/vite.config.ts
+++ b/recipes/vite-react-ts/vite.config.ts
@@ -1,7 +1,14 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import path from 'path';
+import {defineConfig} from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+  plugins: [tailwindcss(), react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});

From addc211d1accdce9cd3883fce5e24faf8d95b19b Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Fri, 6 Jun 2025 16:01:50 +0530
Subject: [PATCH 002/131] fix: set fallback to null in BaseUserDropdown and
 BaseUserProfile components

---
 .../components/presentation/UserDropdown/BaseUserDropdown.tsx   | 2 +-
 .../src/components/presentation/UserProfile/BaseUserProfile.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
index 299f37d7f..dd84f80dd 100644
--- a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
+++ b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
@@ -163,7 +163,7 @@ export interface BaseUserDropdownProps {
  * This component serves as the base for framework-specific implementations.
  */
 export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
-  fallback = <div>Please sign in</div>,
+  fallback = null,
   className = '',
   user,
   portalId = 'asgardeo-user-dropdown',
diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index 8732ba5ce..eb3e97c12 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -71,7 +71,7 @@ export interface BaseUserProfileProps {
 }
 
 const BaseUserProfile: FC<BaseUserProfileProps> = ({
-  fallback = <div>Please sign in to view your profile</div>,
+  fallback = null,
   className = '',
   cardLayout = true,
   user,

From 37b5b644bbb138a73fa2633fb1535ec57cc84082 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Fri, 6 Jun 2025 16:16:46 +0530
Subject: [PATCH 003/131] chore(javascript): reorganize OIDC-related imports
 and add new OIDC discovery interfaces

---
 packages/javascript/src/__legacy__/client.ts         | 12 +++---------
 .../src/__legacy__/core/authentication-core.ts       |  6 +++---
 .../javascript/src/__legacy__/data/data-layer.ts     |  2 +-
 .../src/__legacy__/helpers/authentication-helper.ts  |  2 +-
 .../src/__legacy__/models/client-config.ts           |  2 +-
 packages/javascript/src/index.ts                     |  2 +-
 .../src/models/{ => oidc}/oidc-discovery.ts          |  0
 .../src/models/{ => oidc}/oidc-endpoints.ts          |  0
 packages/javascript/src/models/store.ts              |  2 +-
 9 files changed, 11 insertions(+), 17 deletions(-)
 rename packages/javascript/src/models/{ => oidc}/oidc-discovery.ts (100%)
 rename packages/javascript/src/models/{ => oidc}/oidc-endpoints.ts (100%)

diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 044b85e7c..21e6ce26a 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -18,23 +18,17 @@
 
 import {AuthenticationCore} from './core';
 import {DataLayer} from './data';
-import {
-  AuthClientConfig,
-  BasicUserInfo,
-  CustomGrantConfig,
-  FetchResponse,
-  GetAuthURLConfig,
-} from './models';
+import {AuthClientConfig, BasicUserInfo, CustomGrantConfig, FetchResponse, GetAuthURLConfig} from './models';
 import {Crypto} from '../models/crypto';
 import {TokenResponse} from '../models/token';
 import {IdTokenPayload} from '../models/id-token';
-import {OIDCEndpoints} from '../models/oidc-endpoints';
+import {OIDCEndpoints} from '../models/oidc/oidc-endpoints';
 import {Store} from '../models/store';
 import {ResponseMode} from '../models/oauth-response';
 import ScopeConstants from '../constants/ScopeConstants';
 import OIDCDiscoveryConstants from '../constants/OIDCDiscoveryConstants';
 import OIDCRequestConstants from '../constants/OIDCRequestConstants';
-import { IsomorphicCrypto } from '../IsomorphicCrypto';
+import {IsomorphicCrypto} from '../IsomorphicCrypto';
 
 /**
  * Default configurations.
diff --git a/packages/javascript/src/__legacy__/core/authentication-core.ts b/packages/javascript/src/__legacy__/core/authentication-core.ts
index ec74a2c5b..0f81d3967 100644
--- a/packages/javascript/src/__legacy__/core/authentication-core.ts
+++ b/packages/javascript/src/__legacy__/core/authentication-core.ts
@@ -35,13 +35,13 @@ import {TokenResponse} from '../../models/token';
 import {Crypto} from '../../models/crypto';
 import {IdTokenPayload} from '../../models/id-token';
 import {TemporaryStore} from '../../models/store';
-import {OIDCEndpoints} from '../../models/oidc-endpoints';
+import {OIDCEndpoints} from '../../models/oidc/oidc-endpoints';
 import generatePkceStorageKey from '../../utils/generatePkceStorageKey';
 import ScopeConstants from '../../constants/ScopeConstants';
 import OIDCDiscoveryConstants from '../../constants/OIDCDiscoveryConstants';
 import OIDCRequestConstants from '../../constants/OIDCRequestConstants';
-import {OIDCDiscoveryApiResponse} from '../../models/oidc-discovery';
-import { IsomorphicCrypto } from '../../IsomorphicCrypto';
+import {OIDCDiscoveryApiResponse} from '../../models/oidc/oidc-discovery';
+import {IsomorphicCrypto} from '../../IsomorphicCrypto';
 
 export class AuthenticationCore<T> {
   private _dataLayer: DataLayer<T>;
diff --git a/packages/javascript/src/__legacy__/data/data-layer.ts b/packages/javascript/src/__legacy__/data/data-layer.ts
index c7729255f..f07f18fed 100644
--- a/packages/javascript/src/__legacy__/data/data-layer.ts
+++ b/packages/javascript/src/__legacy__/data/data-layer.ts
@@ -20,7 +20,7 @@ import {Stores} from '../../models/store';
 import {Store} from '../../models/store';
 import {AuthClientConfig, SessionData} from '../models';
 import {TemporaryStore, TemporaryStoreValue} from '../../models/store';
-import {OIDCDiscoveryApiResponse} from '../../models/oidc-discovery';
+import {OIDCDiscoveryApiResponse} from '../../models/oidc/oidc-discovery';
 
 type PartialData<T> = Partial<AuthClientConfig<T> | OIDCDiscoveryApiResponse | SessionData | TemporaryStore>;
 
diff --git a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
index 30e0e8b94..b7e6febb8 100644
--- a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
@@ -29,7 +29,7 @@ import extractUserClaimsFromIdToken from '../../utils/extractUserClaimsFromIdTok
 import ScopeConstants from '../../constants/ScopeConstants';
 import OIDCDiscoveryConstants from '../../constants/OIDCDiscoveryConstants';
 import TokenExchangeConstants from '../../constants/TokenExchangeConstants';
-import {OIDCDiscoveryEndpointsApiResponse, OIDCDiscoveryApiResponse} from '../../models/oidc-discovery';
+import {OIDCDiscoveryEndpointsApiResponse, OIDCDiscoveryApiResponse} from '../../models/oidc/oidc-discovery';
 
 export class AuthenticationHelper<T> {
   private _dataLayer: DataLayer<T>;
diff --git a/packages/javascript/src/__legacy__/models/client-config.ts b/packages/javascript/src/__legacy__/models/client-config.ts
index c8478e33d..15a01c64b 100644
--- a/packages/javascript/src/__legacy__/models/client-config.ts
+++ b/packages/javascript/src/__legacy__/models/client-config.ts
@@ -17,7 +17,7 @@
  */
 
 import {ResponseMode} from '../../models/oauth-response';
-import {OIDCEndpoints} from '../../models/oidc-endpoints';
+import {OIDCEndpoints} from '../../models/oidc/oidc-endpoints';
 
 export interface DefaultAuthClientConfig {
   signInRedirectURL: string;
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 7a3ec267a..52ff230a4 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -37,7 +37,7 @@ export {BaseConfig, Config, Preferences, ThemePreferences} from './models/config
 export {TokenResponse} from './models/token';
 export {Crypto, JWKInterface} from './models/crypto';
 export {IdTokenPayload} from './models/id-token';
-export {OIDCEndpoints} from './models/oidc-endpoints';
+export {OIDCEndpoints} from './models/oidc/oidc-endpoints';
 export {Store} from './models/store';
 export {User} from './models/user';
 export {Schema, SchemaAttribute, WellKnownSchemaIds} from './models/scim2-schema';
diff --git a/packages/javascript/src/models/oidc-discovery.ts b/packages/javascript/src/models/oidc/oidc-discovery.ts
similarity index 100%
rename from packages/javascript/src/models/oidc-discovery.ts
rename to packages/javascript/src/models/oidc/oidc-discovery.ts
diff --git a/packages/javascript/src/models/oidc-endpoints.ts b/packages/javascript/src/models/oidc/oidc-endpoints.ts
similarity index 100%
rename from packages/javascript/src/models/oidc-endpoints.ts
rename to packages/javascript/src/models/oidc/oidc-endpoints.ts
diff --git a/packages/javascript/src/models/store.ts b/packages/javascript/src/models/store.ts
index 986b83767..046adba61 100644
--- a/packages/javascript/src/models/store.ts
+++ b/packages/javascript/src/models/store.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {OIDCEndpoints} from './oidc-endpoints';
+import {OIDCEndpoints} from './oidc/oidc-endpoints';
 
 /**
  * Interface representing a key-value storage mechanism.

From 92c684e3999243fbb7312dc65f9118ecd9a03f55 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Fri, 6 Jun 2025 16:24:32 +0530
Subject: [PATCH 004/131] chore: replace ResponseMode enum with string literals
 and introduce OAuthResponseMode type

---
 packages/__legacy__/core/src/api/sign-out.ts  |  4 ++--
 packages/__legacy__/core/src/auth-client.ts   |  6 +++---
 .../__legacy__/clients/main-thread-client.ts  |  3 +--
 .../__legacy__/clients/web-worker-client.ts   |  3 +--
 packages/javascript/src/__legacy__/client.ts  |  3 +--
 .../src/__legacy__/models/client-config.ts    |  4 ++--
 packages/javascript/src/index.ts              |  2 +-
 .../src/models/{ => oauth}/oauth-response.ts  | 20 +------------------
 8 files changed, 12 insertions(+), 33 deletions(-)
 rename packages/javascript/src/models/{ => oauth}/oauth-response.ts (64%)

diff --git a/packages/__legacy__/core/src/api/sign-out.ts b/packages/__legacy__/core/src/api/sign-out.ts
index ad6416a00..69f775f87 100644
--- a/packages/__legacy__/core/src/api/sign-out.ts
+++ b/packages/__legacy__/core/src/api/sign-out.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {AuthClient, ResponseMode} from '../auth-client';
+import {AuthClient} from '../auth-client';
 import AsgardeoUIException from '../exception';
 import {UIAuthClient} from '../models/auth-config';
 
@@ -51,7 +51,7 @@ const signOut = async (): Promise<void> => {
   try {
     formBody.append('id_token_hint', await authClient.getIDToken());
     formBody.append('client_id', (await authClient.getDataLayer().getConfigData()).clientID);
-    formBody.append('response_mode', ResponseMode.Direct);
+    formBody.append('response_mode', 'direct');
   } catch (error) {
     throw new AsgardeoUIException('JS_UI_CORE-SIGNOUT-SO-IV', 'Failed to build the body of the signout request.');
   }
diff --git a/packages/__legacy__/core/src/auth-client.ts b/packages/__legacy__/core/src/auth-client.ts
index 51e67bcad..255ae4b7f 100644
--- a/packages/__legacy__/core/src/auth-client.ts
+++ b/packages/__legacy__/core/src/auth-client.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {AsgardeoAuthClient, Store, Crypto, ResponseMode} from '@asgardeo/auth-js';
+import {AsgardeoAuthClient, Store, Crypto} from '@asgardeo/auth-js';
 import {UIAuthClient, UIAuthConfig} from './models/auth-config';
 import {BrandingPreferenceTypes} from './models/branding-api-response';
 
@@ -50,7 +50,7 @@ export class AuthClient {
         enableConsoleBranding: authClientConfig?.enableConsoleBranding ?? true,
         enableConsoleTextBranding: authClientConfig?.enableConsoleTextBranding ?? true,
         name: authClientConfig?.name ?? DEFAULT_NAME,
-        responseMode: ResponseMode.Direct,
+        responseMode: 'direct',
         type: authClientConfig?.type ?? BrandingPreferenceTypes.Org,
       };
 
@@ -63,4 +63,4 @@ export class AuthClient {
 }
 
 /* Interfaces, classes and enums required from the auth-js package */
-export {Crypto, JWKInterface, Store, AsgardeoAuthClient, TokenResponse, ResponseMode} from '@asgardeo/auth-js';
+export {Crypto, JWKInterface, Store, AsgardeoAuthClient, TokenResponse} from '@asgardeo/auth-js';
diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index 639ac72a6..6d5a1749a 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -26,7 +26,6 @@ import {
   FetchResponse,
   GetAuthURLConfig,
   OIDCEndpoints,
-  ResponseMode,
   OIDCRequestConstants,
   SessionData,
   Store,
@@ -199,7 +198,7 @@ export const MainThreadClient = async (
         params: Record<string, unknown>;
       } = {params: {}};
 
-      if (config?.responseMode === ResponseMode.FormPost && authorizationCode) {
+      if (config?.responseMode === 'form_post' && authorizationCode) {
         resolvedAuthorizationCode = authorizationCode;
         resolvedSessionState = sessionState ?? '';
         resolvedState = state ?? '';
diff --git a/packages/browser/src/__legacy__/clients/web-worker-client.ts b/packages/browser/src/__legacy__/clients/web-worker-client.ts
index 9a4ab4939..3548272bf 100755
--- a/packages/browser/src/__legacy__/clients/web-worker-client.ts
+++ b/packages/browser/src/__legacy__/clients/web-worker-client.ts
@@ -27,7 +27,6 @@ import {
   FetchResponse,
   GetAuthURLConfig,
   OIDCEndpoints,
-  ResponseMode,
   OIDCRequestConstants,
   Store,
   extractPkceStorageKeyFromState,
@@ -570,7 +569,7 @@ export const WebWorkerClient = async (
       let resolvedSessionState: string;
       let resolvedState: string;
 
-      if (config?.responseMode === ResponseMode.FormPost && authorizationCode) {
+      if (config?.responseMode === 'form_post' && authorizationCode) {
         resolvedAuthorizationCode = authorizationCode;
         resolvedSessionState = sessionState ?? '';
         resolvedState = state ?? '';
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 21e6ce26a..4477de571 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -24,7 +24,6 @@ import {TokenResponse} from '../models/token';
 import {IdTokenPayload} from '../models/id-token';
 import {OIDCEndpoints} from '../models/oidc/oidc-endpoints';
 import {Store} from '../models/store';
-import {ResponseMode} from '../models/oauth-response';
 import ScopeConstants from '../constants/ScopeConstants';
 import OIDCDiscoveryConstants from '../constants/OIDCDiscoveryConstants';
 import OIDCRequestConstants from '../constants/OIDCRequestConstants';
@@ -36,7 +35,7 @@ import {IsomorphicCrypto} from '../IsomorphicCrypto';
 const DefaultConfig: Partial<AuthClientConfig<unknown>> = {
   clockTolerance: 300,
   enablePKCE: true,
-  responseMode: ResponseMode.Query,
+  responseMode: 'query',
   scope: [ScopeConstants.OPENID],
   sendCookiesInRequests: true,
   validateIDToken: true,
diff --git a/packages/javascript/src/__legacy__/models/client-config.ts b/packages/javascript/src/__legacy__/models/client-config.ts
index 15a01c64b..570bce6d9 100644
--- a/packages/javascript/src/__legacy__/models/client-config.ts
+++ b/packages/javascript/src/__legacy__/models/client-config.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {ResponseMode} from '../../models/oauth-response';
+import {OAuthResponseMode} from '../../models/oauth/oauth-response';
 import {OIDCEndpoints} from '../../models/oidc/oidc-endpoints';
 
 export interface DefaultAuthClientConfig {
@@ -27,7 +27,7 @@ export interface DefaultAuthClientConfig {
   clientSecret?: string;
   enablePKCE?: boolean;
   prompt?: string;
-  responseMode?: ResponseMode;
+  responseMode?: OAuthResponseMode;
   scope?: string[];
   validateIDToken?: boolean;
   validateIDTokenIssuer?: boolean;
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 52ff230a4..fe56b2544 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -18,7 +18,7 @@
 
 export * from './__legacy__/client';
 export * from './__legacy__/models';
-export * from './models/oauth-response';
+export * from './models/oauth/oauth-response';
 export * from './IsomorphicCrypto';
 export * from './__legacy__/exception';
 export * from './__legacy__/data';
diff --git a/packages/javascript/src/models/oauth-response.ts b/packages/javascript/src/models/oauth/oauth-response.ts
similarity index 64%
rename from packages/javascript/src/models/oauth-response.ts
rename to packages/javascript/src/models/oauth/oauth-response.ts
index 593e5c985..4d7269c76 100644
--- a/packages/javascript/src/models/oauth-response.ts
+++ b/packages/javascript/src/models/oauth/oauth-response.ts
@@ -16,22 +16,4 @@
  * under the License.
  */
 
-/**
- * Enum representing different OAuth response modes.
- */
-export enum ResponseMode {
-  /**
-   * Response is returned as POST parameters in an HTML form.
-   */
-  FormPost = 'form_post',
-
-  /**
-   * Response is returned as query parameters in the URL.
-   */
-  Query = 'query',
-
-  /**
-   * Response is returned directly to the client.
-   */
-  Direct = 'direct',
-}
+export type OAuthResponseMode = 'form_post' | 'query' | 'direct';

From 91578488656d9bcc8d515604ddd150205fbb290d Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Fri, 6 Jun 2025 16:28:03 +0530
Subject: [PATCH 005/131] chore(javascript): reorganize OIDC-related imports
 and migrate to new auth structure

---
 packages/javascript/src/__legacy__/client.ts                  | 2 +-
 .../javascript/src/__legacy__/core/authentication-core.ts     | 4 ++--
 packages/javascript/src/__legacy__/data/data-layer.ts         | 2 +-
 .../src/__legacy__/helpers/authentication-helper.ts           | 2 +-
 packages/javascript/src/__legacy__/models/client-config.ts    | 4 ++--
 packages/javascript/src/index.ts                              | 4 ++--
 .../javascript/src/models/{oauth => auth}/oauth-response.ts   | 0
 .../javascript/src/models/{oidc => auth}/oidc-discovery.ts    | 0
 .../javascript/src/models/{oidc => auth}/oidc-endpoints.ts    | 0
 packages/javascript/src/models/store.ts                       | 2 +-
 10 files changed, 10 insertions(+), 10 deletions(-)
 rename packages/javascript/src/models/{oauth => auth}/oauth-response.ts (100%)
 rename packages/javascript/src/models/{oidc => auth}/oidc-discovery.ts (100%)
 rename packages/javascript/src/models/{oidc => auth}/oidc-endpoints.ts (100%)

diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 4477de571..e2d13c565 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -22,7 +22,7 @@ import {AuthClientConfig, BasicUserInfo, CustomGrantConfig, FetchResponse, GetAu
 import {Crypto} from '../models/crypto';
 import {TokenResponse} from '../models/token';
 import {IdTokenPayload} from '../models/id-token';
-import {OIDCEndpoints} from '../models/oidc/oidc-endpoints';
+import {OIDCEndpoints} from '../models/auth/oidc-endpoints';
 import {Store} from '../models/store';
 import ScopeConstants from '../constants/ScopeConstants';
 import OIDCDiscoveryConstants from '../constants/OIDCDiscoveryConstants';
diff --git a/packages/javascript/src/__legacy__/core/authentication-core.ts b/packages/javascript/src/__legacy__/core/authentication-core.ts
index 0f81d3967..db70c10c2 100644
--- a/packages/javascript/src/__legacy__/core/authentication-core.ts
+++ b/packages/javascript/src/__legacy__/core/authentication-core.ts
@@ -35,12 +35,12 @@ import {TokenResponse} from '../../models/token';
 import {Crypto} from '../../models/crypto';
 import {IdTokenPayload} from '../../models/id-token';
 import {TemporaryStore} from '../../models/store';
-import {OIDCEndpoints} from '../../models/oidc/oidc-endpoints';
+import {OIDCEndpoints} from '../../models/auth/oidc-endpoints';
 import generatePkceStorageKey from '../../utils/generatePkceStorageKey';
 import ScopeConstants from '../../constants/ScopeConstants';
 import OIDCDiscoveryConstants from '../../constants/OIDCDiscoveryConstants';
 import OIDCRequestConstants from '../../constants/OIDCRequestConstants';
-import {OIDCDiscoveryApiResponse} from '../../models/oidc/oidc-discovery';
+import {OIDCDiscoveryApiResponse} from '../../models/auth/oidc-discovery';
 import {IsomorphicCrypto} from '../../IsomorphicCrypto';
 
 export class AuthenticationCore<T> {
diff --git a/packages/javascript/src/__legacy__/data/data-layer.ts b/packages/javascript/src/__legacy__/data/data-layer.ts
index f07f18fed..7b38d9b1a 100644
--- a/packages/javascript/src/__legacy__/data/data-layer.ts
+++ b/packages/javascript/src/__legacy__/data/data-layer.ts
@@ -20,7 +20,7 @@ import {Stores} from '../../models/store';
 import {Store} from '../../models/store';
 import {AuthClientConfig, SessionData} from '../models';
 import {TemporaryStore, TemporaryStoreValue} from '../../models/store';
-import {OIDCDiscoveryApiResponse} from '../../models/oidc/oidc-discovery';
+import {OIDCDiscoveryApiResponse} from '../../models/auth/oidc-discovery';
 
 type PartialData<T> = Partial<AuthClientConfig<T> | OIDCDiscoveryApiResponse | SessionData | TemporaryStore>;
 
diff --git a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
index b7e6febb8..218fe4281 100644
--- a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
@@ -29,7 +29,7 @@ import extractUserClaimsFromIdToken from '../../utils/extractUserClaimsFromIdTok
 import ScopeConstants from '../../constants/ScopeConstants';
 import OIDCDiscoveryConstants from '../../constants/OIDCDiscoveryConstants';
 import TokenExchangeConstants from '../../constants/TokenExchangeConstants';
-import {OIDCDiscoveryEndpointsApiResponse, OIDCDiscoveryApiResponse} from '../../models/oidc/oidc-discovery';
+import {OIDCDiscoveryEndpointsApiResponse, OIDCDiscoveryApiResponse} from '../../models/auth/oidc-discovery';
 
 export class AuthenticationHelper<T> {
   private _dataLayer: DataLayer<T>;
diff --git a/packages/javascript/src/__legacy__/models/client-config.ts b/packages/javascript/src/__legacy__/models/client-config.ts
index 570bce6d9..65930c10a 100644
--- a/packages/javascript/src/__legacy__/models/client-config.ts
+++ b/packages/javascript/src/__legacy__/models/client-config.ts
@@ -16,8 +16,8 @@
  * under the License.
  */
 
-import {OAuthResponseMode} from '../../models/oauth/oauth-response';
-import {OIDCEndpoints} from '../../models/oidc/oidc-endpoints';
+import {OAuthResponseMode} from '../../models/auth/oauth-response';
+import {OIDCEndpoints} from '../../models/auth/oidc-endpoints';
 
 export interface DefaultAuthClientConfig {
   signInRedirectURL: string;
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index fe56b2544..54d0a2db4 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -18,7 +18,7 @@
 
 export * from './__legacy__/client';
 export * from './__legacy__/models';
-export * from './models/oauth/oauth-response';
+export * from './models/auth/oauth-response';
 export * from './IsomorphicCrypto';
 export * from './__legacy__/exception';
 export * from './__legacy__/data';
@@ -37,7 +37,7 @@ export {BaseConfig, Config, Preferences, ThemePreferences} from './models/config
 export {TokenResponse} from './models/token';
 export {Crypto, JWKInterface} from './models/crypto';
 export {IdTokenPayload} from './models/id-token';
-export {OIDCEndpoints} from './models/oidc/oidc-endpoints';
+export {OIDCEndpoints} from './models/auth/oidc-endpoints';
 export {Store} from './models/store';
 export {User} from './models/user';
 export {Schema, SchemaAttribute, WellKnownSchemaIds} from './models/scim2-schema';
diff --git a/packages/javascript/src/models/oauth/oauth-response.ts b/packages/javascript/src/models/auth/oauth-response.ts
similarity index 100%
rename from packages/javascript/src/models/oauth/oauth-response.ts
rename to packages/javascript/src/models/auth/oauth-response.ts
diff --git a/packages/javascript/src/models/oidc/oidc-discovery.ts b/packages/javascript/src/models/auth/oidc-discovery.ts
similarity index 100%
rename from packages/javascript/src/models/oidc/oidc-discovery.ts
rename to packages/javascript/src/models/auth/oidc-discovery.ts
diff --git a/packages/javascript/src/models/oidc/oidc-endpoints.ts b/packages/javascript/src/models/auth/oidc-endpoints.ts
similarity index 100%
rename from packages/javascript/src/models/oidc/oidc-endpoints.ts
rename to packages/javascript/src/models/auth/oidc-endpoints.ts
diff --git a/packages/javascript/src/models/store.ts b/packages/javascript/src/models/store.ts
index 046adba61..3ce5338bb 100644
--- a/packages/javascript/src/models/store.ts
+++ b/packages/javascript/src/models/store.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {OIDCEndpoints} from './oidc/oidc-endpoints';
+import {OIDCEndpoints} from './auth/oidc-endpoints';
 
 /**
  * Interface representing a key-value storage mechanism.

From 999a3a46fb97d78c609437d7122b7136a6a20ea2 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Fri, 6 Jun 2025 16:33:19 +0530
Subject: [PATCH 006/131] chore(javascript): reorganize OIDC-related imports
 and migrate to new auth structure

---
 packages/javascript/src/IsomorphicCrypto.ts   |  2 +-
 packages/javascript/src/__legacy__/client.ts  |  5 +-
 .../__legacy__/core/authentication-core.ts    |  7 +--
 .../src/__legacy__/data/data-layer.ts         |  2 +-
 .../helpers/authentication-helper.ts          |  4 +-
 .../src/__legacy__/models/client-config.ts    |  4 +-
 .../{oidc => }/__tests__/getUserInfo.test.ts  |  4 +-
 .../src/api/{oidc => }/getUserInfo.ts         |  6 +-
 packages/javascript/src/index.ts              |  9 ++-
 packages/javascript/src/models/id-token.ts    | 62 -------------------
 .../src/models/{auth => }/oauth-response.ts   |  0
 .../src/models/{auth => }/oidc-discovery.ts   |  0
 .../src/models/{auth => }/oidc-endpoints.ts   |  0
 packages/javascript/src/models/store.ts       |  2 +-
 packages/javascript/src/models/token.ts       | 45 ++++++++++++++
 .../extractTenantDomainFromIdTokenPayload.ts  |  2 +-
 .../src/utils/extractUserClaimsFromIdToken.ts |  6 +-
 17 files changed, 70 insertions(+), 90 deletions(-)
 rename packages/javascript/src/api/{oidc => }/__tests__/getUserInfo.test.ts (97%)
 rename packages/javascript/src/api/{oidc => }/getUserInfo.ts (93%)
 delete mode 100644 packages/javascript/src/models/id-token.ts
 rename packages/javascript/src/models/{auth => }/oauth-response.ts (100%)
 rename packages/javascript/src/models/{auth => }/oidc-discovery.ts (100%)
 rename packages/javascript/src/models/{auth => }/oidc-endpoints.ts (100%)

diff --git a/packages/javascript/src/IsomorphicCrypto.ts b/packages/javascript/src/IsomorphicCrypto.ts
index 6cab9808e..eb47aeeea 100644
--- a/packages/javascript/src/IsomorphicCrypto.ts
+++ b/packages/javascript/src/IsomorphicCrypto.ts
@@ -18,7 +18,7 @@
 
 import {AsgardeoAuthException} from './__legacy__/exception';
 import {Crypto, JWKInterface} from './models/crypto';
-import {IdTokenPayload} from './models/id-token';
+import {IdTokenPayload} from './models/token';
 import TokenConstants from './constants/TokenConstants';
 
 export class IsomorphicCrypto<T = any> {
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index e2d13c565..19ccc5c34 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -20,9 +20,8 @@ import {AuthenticationCore} from './core';
 import {DataLayer} from './data';
 import {AuthClientConfig, BasicUserInfo, CustomGrantConfig, FetchResponse, GetAuthURLConfig} from './models';
 import {Crypto} from '../models/crypto';
-import {TokenResponse} from '../models/token';
-import {IdTokenPayload} from '../models/id-token';
-import {OIDCEndpoints} from '../models/auth/oidc-endpoints';
+import {TokenResponse, IdTokenPayload} from '../models/token';
+import {OIDCEndpoints} from '../models/oidc-endpoints';
 import {Store} from '../models/store';
 import ScopeConstants from '../constants/ScopeConstants';
 import OIDCDiscoveryConstants from '../constants/OIDCDiscoveryConstants';
diff --git a/packages/javascript/src/__legacy__/core/authentication-core.ts b/packages/javascript/src/__legacy__/core/authentication-core.ts
index db70c10c2..8d047a7d4 100644
--- a/packages/javascript/src/__legacy__/core/authentication-core.ts
+++ b/packages/javascript/src/__legacy__/core/authentication-core.ts
@@ -31,16 +31,15 @@ import {
   SessionData,
   StrictAuthClientConfig,
 } from '../models';
-import {TokenResponse} from '../../models/token';
+import {TokenResponse, IdTokenPayload} from '../../models/token';
 import {Crypto} from '../../models/crypto';
-import {IdTokenPayload} from '../../models/id-token';
 import {TemporaryStore} from '../../models/store';
-import {OIDCEndpoints} from '../../models/auth/oidc-endpoints';
+import {OIDCEndpoints} from '../../models/oidc-endpoints';
 import generatePkceStorageKey from '../../utils/generatePkceStorageKey';
 import ScopeConstants from '../../constants/ScopeConstants';
 import OIDCDiscoveryConstants from '../../constants/OIDCDiscoveryConstants';
 import OIDCRequestConstants from '../../constants/OIDCRequestConstants';
-import {OIDCDiscoveryApiResponse} from '../../models/auth/oidc-discovery';
+import {OIDCDiscoveryApiResponse} from '../../models/oidc-discovery';
 import {IsomorphicCrypto} from '../../IsomorphicCrypto';
 
 export class AuthenticationCore<T> {
diff --git a/packages/javascript/src/__legacy__/data/data-layer.ts b/packages/javascript/src/__legacy__/data/data-layer.ts
index 7b38d9b1a..c7729255f 100644
--- a/packages/javascript/src/__legacy__/data/data-layer.ts
+++ b/packages/javascript/src/__legacy__/data/data-layer.ts
@@ -20,7 +20,7 @@ import {Stores} from '../../models/store';
 import {Store} from '../../models/store';
 import {AuthClientConfig, SessionData} from '../models';
 import {TemporaryStore, TemporaryStoreValue} from '../../models/store';
-import {OIDCDiscoveryApiResponse} from '../../models/auth/oidc-discovery';
+import {OIDCDiscoveryApiResponse} from '../../models/oidc-discovery';
 
 type PartialData<T> = Partial<AuthClientConfig<T> | OIDCDiscoveryApiResponse | SessionData | TemporaryStore>;
 
diff --git a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
index 218fe4281..04ae908e2 100644
--- a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
@@ -22,14 +22,14 @@ import {AsgardeoAuthException} from '../exception';
 import {AuthClientConfig, AuthenticatedUserInfo, SessionData, StrictAuthClientConfig} from '../models';
 import {JWKInterface} from '../../models/crypto';
 import {TokenResponse, AccessTokenApiResponse} from '../../models/token';
-import {IdTokenPayload} from '../../models/id-token';
+import {IdTokenPayload} from '../../models/token';
 import PKCEConstants from '../../constants/PKCEConstants';
 import extractTenantDomainFromIdTokenPayload from '../../utils/extractTenantDomainFromIdTokenPayload';
 import extractUserClaimsFromIdToken from '../../utils/extractUserClaimsFromIdToken';
 import ScopeConstants from '../../constants/ScopeConstants';
 import OIDCDiscoveryConstants from '../../constants/OIDCDiscoveryConstants';
 import TokenExchangeConstants from '../../constants/TokenExchangeConstants';
-import {OIDCDiscoveryEndpointsApiResponse, OIDCDiscoveryApiResponse} from '../../models/auth/oidc-discovery';
+import {OIDCDiscoveryEndpointsApiResponse, OIDCDiscoveryApiResponse} from '../../models/oidc-discovery';
 
 export class AuthenticationHelper<T> {
   private _dataLayer: DataLayer<T>;
diff --git a/packages/javascript/src/__legacy__/models/client-config.ts b/packages/javascript/src/__legacy__/models/client-config.ts
index 65930c10a..4456d8352 100644
--- a/packages/javascript/src/__legacy__/models/client-config.ts
+++ b/packages/javascript/src/__legacy__/models/client-config.ts
@@ -16,8 +16,8 @@
  * under the License.
  */
 
-import {OAuthResponseMode} from '../../models/auth/oauth-response';
-import {OIDCEndpoints} from '../../models/auth/oidc-endpoints';
+import {OAuthResponseMode} from '../../models/oauth-response';
+import {OIDCEndpoints} from '../../models/oidc-endpoints';
 
 export interface DefaultAuthClientConfig {
   signInRedirectURL: string;
diff --git a/packages/javascript/src/api/oidc/__tests__/getUserInfo.test.ts b/packages/javascript/src/api/__tests__/getUserInfo.test.ts
similarity index 97%
rename from packages/javascript/src/api/oidc/__tests__/getUserInfo.test.ts
rename to packages/javascript/src/api/__tests__/getUserInfo.test.ts
index 6ffa0ce08..de167261d 100644
--- a/packages/javascript/src/api/oidc/__tests__/getUserInfo.test.ts
+++ b/packages/javascript/src/api/__tests__/getUserInfo.test.ts
@@ -18,8 +18,8 @@
 
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import getUserInfo from '../getUserInfo';
-import {User} from '../../../models/user';
-import AsgardeoAPIError from '../../../errors/AsgardeoAPIError';
+import {User} from '../../models/user';
+import AsgardeoAPIError from '../../errors/AsgardeoAPIError';
 
 describe('getUserInfo', (): void => {
   beforeEach((): void => {
diff --git a/packages/javascript/src/api/oidc/getUserInfo.ts b/packages/javascript/src/api/getUserInfo.ts
similarity index 93%
rename from packages/javascript/src/api/oidc/getUserInfo.ts
rename to packages/javascript/src/api/getUserInfo.ts
index 9d759fe6f..37c719137 100644
--- a/packages/javascript/src/api/oidc/getUserInfo.ts
+++ b/packages/javascript/src/api/getUserInfo.ts
@@ -16,8 +16,8 @@
  * under the License.
  */
 
-import {User} from '../../models/user';
-import AsgardeoAPIError from '../../errors/AsgardeoAPIError';
+import {User} from '../models/user';
+import AsgardeoAPIError from '../errors/AsgardeoAPIError';
 
 /**
  * Retrieves the user information from the specified OIDC userinfo endpoint.
@@ -70,7 +70,7 @@ const getUserInfo = async ({url, ...requestConfig}: Partial<Request>): Promise<U
     );
   }
 
-  return await response.json() as User;
+  return (await response.json()) as User;
 };
 
 export default getUserInfo;
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 54d0a2db4..aa0faeafa 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -18,12 +18,12 @@
 
 export * from './__legacy__/client';
 export * from './__legacy__/models';
-export * from './models/auth/oauth-response';
+export * from './models/oauth-response';
 export * from './IsomorphicCrypto';
 export * from './__legacy__/exception';
 export * from './__legacy__/data';
 
-export {default as getUserInfo} from './api/oidc/getUserInfo';
+export {default as getUserInfo} from './api/getUserInfo';
 
 export {default as TokenConstants} from './constants/TokenConstants';
 export {default as OIDCRequestConstants} from './constants/OIDCRequestConstants';
@@ -34,10 +34,9 @@ export {default as AsgardeoRuntimeError} from './errors/AsgardeoRuntimeError';
 
 export {AsgardeoClient, SignInOptions, SignOutOptions} from './models/client';
 export {BaseConfig, Config, Preferences, ThemePreferences} from './models/config';
-export {TokenResponse} from './models/token';
+export {TokenResponse, IdTokenPayload} from './models/token';
 export {Crypto, JWKInterface} from './models/crypto';
-export {IdTokenPayload} from './models/id-token';
-export {OIDCEndpoints} from './models/auth/oidc-endpoints';
+export {OIDCEndpoints} from './models/oidc-endpoints';
 export {Store} from './models/store';
 export {User} from './models/user';
 export {Schema, SchemaAttribute, WellKnownSchemaIds} from './models/scim2-schema';
diff --git a/packages/javascript/src/models/id-token.ts b/packages/javascript/src/models/id-token.ts
deleted file mode 100644
index 5953b0286..000000000
--- a/packages/javascript/src/models/id-token.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Copyright (c) 2020, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-/**
- * Interface for the standard (required) claims of an ID Token payload.
- */
-export interface IdTokenPayloadStandardClaims {
-  /**
-   * The audience for which this token is intended.
-   */
-  aud: string | string[];
-
-  /**
-   * The unique identifier of the user to whom the ID token belongs.
-   */
-  sub: string;
-
-  /**
-   * The issuer identifier for the issuer of the response.
-   */
-  iss: string;
-
-  /**
-   * The email of the user.
-   */
-  email?: string;
-
-  /**
-   * The username the user prefers to be called.
-   */
-  preferred_username?: string;
-
-  /**
-   * The tenant domain of the user.
-   */
-  tenant_domain?: string;
-}
-
-/**
- * Interface for ID Token payload including custom claims.
- */
-export interface IdTokenPayload extends IdTokenPayloadStandardClaims {
-  /**
-   * Other custom claims.
-   */
-  [claim: string]: any;
-}
diff --git a/packages/javascript/src/models/auth/oauth-response.ts b/packages/javascript/src/models/oauth-response.ts
similarity index 100%
rename from packages/javascript/src/models/auth/oauth-response.ts
rename to packages/javascript/src/models/oauth-response.ts
diff --git a/packages/javascript/src/models/auth/oidc-discovery.ts b/packages/javascript/src/models/oidc-discovery.ts
similarity index 100%
rename from packages/javascript/src/models/auth/oidc-discovery.ts
rename to packages/javascript/src/models/oidc-discovery.ts
diff --git a/packages/javascript/src/models/auth/oidc-endpoints.ts b/packages/javascript/src/models/oidc-endpoints.ts
similarity index 100%
rename from packages/javascript/src/models/auth/oidc-endpoints.ts
rename to packages/javascript/src/models/oidc-endpoints.ts
diff --git a/packages/javascript/src/models/store.ts b/packages/javascript/src/models/store.ts
index 3ce5338bb..986b83767 100644
--- a/packages/javascript/src/models/store.ts
+++ b/packages/javascript/src/models/store.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {OIDCEndpoints} from './auth/oidc-endpoints';
+import {OIDCEndpoints} from './oidc-endpoints';
 
 /**
  * Interface representing a key-value storage mechanism.
diff --git a/packages/javascript/src/models/token.ts b/packages/javascript/src/models/token.ts
index 10ffc0b54..009069551 100644
--- a/packages/javascript/src/models/token.ts
+++ b/packages/javascript/src/models/token.ts
@@ -133,3 +133,48 @@ export interface AccessTokenApiResponse {
    */
   token_type: string;
 }
+
+/**
+ * Interface for the standard (required) claims of an ID Token payload.
+ */
+export interface IdTokenPayloadStandardClaims {
+  /**
+   * The audience for which this token is intended.
+   */
+  aud: string | string[];
+
+  /**
+   * The unique identifier of the user to whom the ID token belongs.
+   */
+  sub: string;
+
+  /**
+   * The issuer identifier for the issuer of the response.
+   */
+  iss: string;
+
+  /**
+   * The email of the user.
+   */
+  email?: string;
+
+  /**
+   * The username the user prefers to be called.
+   */
+  preferred_username?: string;
+
+  /**
+   * The tenant domain of the user.
+   */
+  tenant_domain?: string;
+}
+
+/**
+ * Interface for ID Token payload including custom claims.
+ */
+export interface IdTokenPayload extends IdTokenPayloadStandardClaims {
+  /**
+   * Other custom claims.
+   */
+  [claim: string]: any;
+}
diff --git a/packages/javascript/src/utils/extractTenantDomainFromIdTokenPayload.ts b/packages/javascript/src/utils/extractTenantDomainFromIdTokenPayload.ts
index e2018d3e5..accc4f3ff 100644
--- a/packages/javascript/src/utils/extractTenantDomainFromIdTokenPayload.ts
+++ b/packages/javascript/src/utils/extractTenantDomainFromIdTokenPayload.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {IdTokenPayload} from '../models/id-token';
+import {IdTokenPayload} from '../models/token';
 
 /**
  * Extracts the tenant domain from the ID token payload.
diff --git a/packages/javascript/src/utils/extractUserClaimsFromIdToken.ts b/packages/javascript/src/utils/extractUserClaimsFromIdToken.ts
index 998941b93..5927f051a 100644
--- a/packages/javascript/src/utils/extractUserClaimsFromIdToken.ts
+++ b/packages/javascript/src/utils/extractUserClaimsFromIdToken.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {IdTokenPayload} from '../models/id-token';
+import {IdTokenPayload} from '../models/token';
 
 /**
  * Removes standard protocol-specific claims from the ID token payload
@@ -24,7 +24,7 @@ import {IdTokenPayload} from '../models/id-token';
  *
  * @param payload The raw ID token payload.
  * @returns A cleaned-up, camelCased object containing only user-specific claims.
- * 
+ *
  * @example
  * ````typescript
  * const idTokenPayload = {
@@ -34,7 +34,7 @@ import {IdTokenPayload} from '../models/id-token';
  *   iat: 1712345670,
  *   email: 'user@example.com'
  *  };
- * 
+ *
  * const userClaims = extractUserClaimsFromIdToken(idTokenPayload);
  * // // userClaims will be:
  * // {

From 9d9dd7c285c5781a2e3941ab20ca2903c594d447 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Sat, 7 Jun 2025 14:52:49 +0530
Subject: [PATCH 007/131] chore: replace GetAuthURLConfig with
 ExtendedAuthorizeRequestUrlParams across multiple files

---
 .../__legacy__/clients/main-thread-client.ts  |  9 ++++----
 .../__legacy__/clients/web-worker-client.ts   | 23 +++++++++++--------
 .../helpers/authentication-helper.ts          |  6 ++---
 .../helpers/session-management-helper.ts      |  6 ++---
 .../models/session-management-helper.ts       |  4 ++--
 .../browser/src/__legacy__/models/sign-in.ts  |  4 ++--
 .../src/__legacy__/models/web-worker.ts       |  4 ++--
 .../src/__legacy__/worker/worker-core.ts      |  4 ++--
 packages/javascript/src/__legacy__/client.ts  | 14 +++++++----
 .../__legacy__/core/authentication-core.ts    |  8 +++----
 .../javascript/src/__legacy__/models/index.ts |  1 -
 packages/javascript/src/index.ts              |  5 ++++
 .../oauth-request.ts}                         | 11 +++++----
 13 files changed, 56 insertions(+), 43 deletions(-)
 rename packages/javascript/src/{__legacy__/models/authorization-url.ts => models/oauth-request.ts} (68%)

diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index 6d5a1749a..714f81765 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -24,7 +24,7 @@ import {
   DataLayer,
   IdTokenPayload,
   FetchResponse,
-  GetAuthURLConfig,
+  ExtendedAuthorizeRequestUrlParams,
   OIDCEndpoints,
   OIDCRequestConstants,
   SessionData,
@@ -151,14 +151,15 @@ export const MainThreadClient = async (
   };
 
   const checkSession = async (): Promise<void> => {
-    const oidcEndpoints: OIDCEndpoints = await _authenticationClient.getOIDCServiceEndpoints() as OIDCEndpoints;
+    const oidcEndpoints: OIDCEndpoints = (await _authenticationClient.getOIDCServiceEndpoints()) as OIDCEndpoints;
     const config = await _dataLayer.getConfigData();
 
     _authenticationHelper.initializeSessionManger(
       config,
       oidcEndpoints,
       async () => (await _authenticationClient.getBasicUserInfo()).sessionState,
-      async (params?: GetAuthURLConfig): Promise<string> => _authenticationClient.getAuthorizationURL(params),
+      async (params?: ExtendedAuthorizeRequestUrlParams): Promise<string> =>
+        _authenticationClient.getAuthorizationURL(params),
       _sessionManagementHelper,
     );
   };
@@ -178,7 +179,7 @@ export const MainThreadClient = async (
   };
 
   const signIn = async (
-    signInConfig?: GetAuthURLConfig,
+    signInConfig?: ExtendedAuthorizeRequestUrlParams,
     authorizationCode?: string,
     sessionState?: string,
     state?: string,
diff --git a/packages/browser/src/__legacy__/clients/web-worker-client.ts b/packages/browser/src/__legacy__/clients/web-worker-client.ts
index 3548272bf..ff229f00d 100755
--- a/packages/browser/src/__legacy__/clients/web-worker-client.ts
+++ b/packages/browser/src/__legacy__/clients/web-worker-client.ts
@@ -25,7 +25,7 @@ import {
   CustomGrantConfig,
   IdTokenPayload,
   FetchResponse,
-  GetAuthURLConfig,
+  ExtendedAuthorizeRequestUrlParams,
   OIDCEndpoints,
   OIDCRequestConstants,
   Store,
@@ -386,14 +386,15 @@ export const WebWorkerClient = async (
       config,
       oidcEndpoints,
       async () => (await getBasicUserInfo()).sessionState,
-      async (params?: GetAuthURLConfig): Promise<string> => (await getAuthorizationURL(params)).authorizationURL,
+      async (params?: ExtendedAuthorizeRequestUrlParams): Promise<string> =>
+        (await getAuthorizationURL(params)).authorizationURL,
       _sessionManagementHelper,
     );
   };
 
   const constructSilentSignInUrl = async (additionalParams: Record<string, string | boolean> = {}): Promise<string> => {
     const config: AuthClientConfig<WebWorkerClientConfig> = await getConfigData();
-    const message: Message<GetAuthURLConfig> = {
+    const message: Message<ExtendedAuthorizeRequestUrlParams> = {
       data: {
         prompt: 'none',
         state: SILENT_SIGN_IN_STATE,
@@ -402,7 +403,9 @@ export const WebWorkerClient = async (
       type: GET_AUTH_URL,
     };
 
-    const response: AuthorizationResponse = await communicate<GetAuthURLConfig, AuthorizationResponse>(message);
+    const response: AuthorizationResponse = await communicate<ExtendedAuthorizeRequestUrlParams, AuthorizationResponse>(
+      message,
+    );
 
     const pkceKey: string = extractPkceStorageKeyFromState(
       new URL(response.authorizationURL).searchParams.get(OIDCRequestConstants.Params.STATE) ?? '',
@@ -443,18 +446,18 @@ export const WebWorkerClient = async (
   /**
    * Generates an authorization URL.
    *
-   * @param {GetAuthURLConfig} params Authorization URL params.
+   * @param {ExtendedAuthorizeRequestUrlParams} params Authorization URL params.
    * @returns {Promise<string>} Authorization URL.
    */
-  const getAuthorizationURL = async (params?: GetAuthURLConfig): Promise<AuthorizationResponse> => {
+  const getAuthorizationURL = async (params?: ExtendedAuthorizeRequestUrlParams): Promise<AuthorizationResponse> => {
     const config: AuthClientConfig<WebWorkerClientConfig> = await getConfigData();
 
-    const message: Message<GetAuthURLConfig> = {
+    const message: Message<ExtendedAuthorizeRequestUrlParams> = {
       data: params,
       type: GET_AUTH_URL,
     };
 
-    return communicate<GetAuthURLConfig, AuthorizationResponse>(message).then(
+    return communicate<ExtendedAuthorizeRequestUrlParams, AuthorizationResponse>(message).then(
       async (response: AuthorizationResponse) => {
         if (response.pkce && config.enablePKCE) {
           const pkceKey: string = extractPkceStorageKeyFromState(
@@ -538,7 +541,7 @@ export const WebWorkerClient = async (
 
       return getBasicUserInfo();
     }
-    
+
     return Promise.resolve(undefined);
   };
 
@@ -548,7 +551,7 @@ export const WebWorkerClient = async (
    * @returns {Promise<UserInfo>} A promise that resolves when authentication is successful.
    */
   const signIn = async (
-    params?: GetAuthURLConfig,
+    params?: ExtendedAuthorizeRequestUrlParams,
     authorizationCode?: string,
     sessionState?: string,
     state?: string,
diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
index cb9f83e0d..203e4d9ce 100644
--- a/packages/browser/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -26,7 +26,7 @@ import {
   DataLayer,
   IdTokenPayload,
   FetchResponse,
-  GetAuthURLConfig,
+  ExtendedAuthorizeRequestUrlParams,
   OIDCEndpoints,
   TokenResponse,
   extractPkceStorageKeyFromState,
@@ -86,7 +86,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     config: AuthClientConfig<T>,
     oidcEndpoints: OIDCEndpoints,
     getSessionState: () => Promise<string>,
-    getAuthzURL: (params?: GetAuthURLConfig) => Promise<string>,
+    getAuthzURL: (params?: ExtendedAuthorizeRequestUrlParams) => Promise<string>,
     sessionManagementHelper: SessionManagementHelperInterface,
   ): void {
     sessionManagementHelper.initialize(
@@ -635,7 +635,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
         return basicUserInfo;
       }
     }
-    
+
     return Promise.resolve(undefined);
   }
 
diff --git a/packages/browser/src/__legacy__/helpers/session-management-helper.ts b/packages/browser/src/__legacy__/helpers/session-management-helper.ts
index e6c70b85c..09dedd4c1 100644
--- a/packages/browser/src/__legacy__/helpers/session-management-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/session-management-helper.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {AsgardeoAuthClient, GetAuthURLConfig, OIDCRequestConstants} from '@asgardeo/javascript';
+import {AsgardeoAuthClient, ExtendedAuthorizeRequestUrlParams, OIDCRequestConstants} from '@asgardeo/javascript';
 import {
   CHECK_SESSION_SIGNED_IN,
   CHECK_SESSION_SIGNED_OUT,
@@ -45,7 +45,7 @@ export const SessionManagementHelper = (() => {
   let _checkSessionIntervalTimeout: number;
   let _storage: Storage;
   let _setSessionState: (sessionState: string) => void;
-  let _getAuthorizationURL: (params?: GetAuthURLConfig) => Promise<string>;
+  let _getAuthorizationURL: (params?: ExtendedAuthorizeRequestUrlParams) => Promise<string>;
 
   const initialize = (
     clientID: string,
@@ -54,7 +54,7 @@ export const SessionManagementHelper = (() => {
     interval: number,
     sessionRefreshInterval: number,
     redirectURL: string,
-    getAuthorizationURL: (params?: GetAuthURLConfig) => Promise<string>,
+    getAuthorizationURL: (params?: ExtendedAuthorizeRequestUrlParams) => Promise<string>,
   ): void => {
     _clientID = clientID;
     _checkSessionEndpoint = checkSessionEndpoint;
diff --git a/packages/browser/src/__legacy__/models/session-management-helper.ts b/packages/browser/src/__legacy__/models/session-management-helper.ts
index 795f830a5..eff2f3d72 100644
--- a/packages/browser/src/__legacy__/models/session-management-helper.ts
+++ b/packages/browser/src/__legacy__/models/session-management-helper.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {GetAuthURLConfig} from '@asgardeo/javascript';
+import {ExtendedAuthorizeRequestUrlParams} from '@asgardeo/javascript';
 
 export interface SessionManagementHelperInterface {
   initialize(
@@ -26,7 +26,7 @@ export interface SessionManagementHelperInterface {
     interval: number,
     sessionRefreshInterval: number,
     redirectURL: string,
-    getAuthorizationURL: (params?: GetAuthURLConfig) => Promise<string>,
+    getAuthorizationURL: (params?: ExtendedAuthorizeRequestUrlParams) => Promise<string>,
   ): void;
   receivePromptNoneResponse(setSessionState?: (sessionState: string | null) => Promise<void>): Promise<boolean>;
   reset();
diff --git a/packages/browser/src/__legacy__/models/sign-in.ts b/packages/browser/src/__legacy__/models/sign-in.ts
index 0ce815a57..f8fcd0945 100644
--- a/packages/browser/src/__legacy__/models/sign-in.ts
+++ b/packages/browser/src/__legacy__/models/sign-in.ts
@@ -16,6 +16,6 @@
  * under the License.
  */
 
-import {GetAuthURLConfig} from '@asgardeo/javascript';
+import {ExtendedAuthorizeRequestUrlParams} from '@asgardeo/javascript';
 
-export type SignInConfig = GetAuthURLConfig & {callOnlyOnRedirect?: boolean};
+export type SignInConfig = ExtendedAuthorizeRequestUrlParams & {callOnlyOnRedirect?: boolean};
diff --git a/packages/browser/src/__legacy__/models/web-worker.ts b/packages/browser/src/__legacy__/models/web-worker.ts
index f46ed5fed..5cdeb0780 100755
--- a/packages/browser/src/__legacy__/models/web-worker.ts
+++ b/packages/browser/src/__legacy__/models/web-worker.ts
@@ -18,7 +18,7 @@
 
 import {
   AuthClientConfig,
-  AuthorizationURLParams,
+  AuthorizeRequestUrlParams,
   BasicUserInfo,
   IsomorphicCrypto,
   CustomGrantConfig,
@@ -45,7 +45,7 @@ export interface WebWorkerCoreInterface {
   httpRequestAll(configs: HttpRequestConfig[]): Promise<HttpResponse[] | undefined>;
   enableHttpHandler(): void;
   disableHttpHandler(): void;
-  getAuthorizationURL(params?: AuthorizationURLParams, signInRedirectURL?: string): Promise<AuthorizationResponse>;
+  getAuthorizationURL(params?: AuthorizeRequestUrlParams, signInRedirectURL?: string): Promise<AuthorizationResponse>;
   requestAccessToken(
     authorizationCode?: string,
     sessionState?: string,
diff --git a/packages/browser/src/__legacy__/worker/worker-core.ts b/packages/browser/src/__legacy__/worker/worker-core.ts
index 38b672971..079b8d52d 100755
--- a/packages/browser/src/__legacy__/worker/worker-core.ts
+++ b/packages/browser/src/__legacy__/worker/worker-core.ts
@@ -19,7 +19,7 @@
 import {
   AsgardeoAuthClient,
   AuthClientConfig,
-  AuthorizationURLParams,
+  AuthorizeRequestUrlParams,
   BasicUserInfo,
   IsomorphicCrypto,
   CustomGrantConfig,
@@ -99,7 +99,7 @@ export const WebWorkerCore = async (
     _authenticationHelper.disableHttpHandler(_httpClient);
   };
 
-  const getAuthorizationURL = async (params?: AuthorizationURLParams): Promise<AuthorizationResponse> => {
+  const getAuthorizationURL = async (params?: AuthorizeRequestUrlParams): Promise<AuthorizationResponse> => {
     return _authenticationClient
       .getAuthorizationURL(params)
       .then(async (url: string) => {
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 19ccc5c34..647745a78 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -18,7 +18,8 @@
 
 import {AuthenticationCore} from './core';
 import {DataLayer} from './data';
-import {AuthClientConfig, BasicUserInfo, CustomGrantConfig, FetchResponse, GetAuthURLConfig} from './models';
+import {AuthClientConfig, BasicUserInfo, CustomGrantConfig, FetchResponse} from './models';
+import {ExtendedAuthorizeRequestUrlParams} from '../models/oauth-request';
 import {Crypto} from '../models/crypto';
 import {TokenResponse, IdTokenPayload} from '../models/token';
 import {OIDCEndpoints} from '../models/oidc-endpoints';
@@ -181,8 +182,11 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public async getAuthorizationURLParams(config?: GetAuthURLConfig, userID?: string): Promise<Map<string, string>> {
-    const authRequestConfig: GetAuthURLConfig = {...config};
+  public async getAuthorizationURLParams(
+    config?: ExtendedAuthorizeRequestUrlParams,
+    userID?: string,
+  ): Promise<Map<string, string>> {
+    const authRequestConfig: ExtendedAuthorizeRequestUrlParams = {...config};
 
     delete authRequestConfig?.forceInit;
 
@@ -222,8 +226,8 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public async getAuthorizationURL(config?: GetAuthURLConfig, userID?: string): Promise<string> {
-    const authRequestConfig: GetAuthURLConfig = {...config};
+  public async getAuthorizationURL(config?: ExtendedAuthorizeRequestUrlParams, userID?: string): Promise<string> {
+    const authRequestConfig: ExtendedAuthorizeRequestUrlParams = {...config};
 
     delete authRequestConfig?.forceInit;
 
diff --git a/packages/javascript/src/__legacy__/core/authentication-core.ts b/packages/javascript/src/__legacy__/core/authentication-core.ts
index 8d047a7d4..921aa993d 100644
--- a/packages/javascript/src/__legacy__/core/authentication-core.ts
+++ b/packages/javascript/src/__legacy__/core/authentication-core.ts
@@ -23,7 +23,6 @@ import {AuthenticationHelper} from '../helpers';
 import {
   AuthClientConfig,
   AuthenticatedUserInfo,
-  AuthorizationURLParams,
   BasicUserInfo,
   CustomGrantConfig,
   FetchRequestConfig,
@@ -31,6 +30,7 @@ import {
   SessionData,
   StrictAuthClientConfig,
 } from '../models';
+import {AuthorizeRequestUrlParams} from '../../models/oauth-request';
 import {TokenResponse, IdTokenPayload} from '../../models/token';
 import {Crypto} from '../../models/crypto';
 import {TemporaryStore} from '../../models/store';
@@ -60,7 +60,7 @@ export class AuthenticationCore<T> {
   }
 
   public async getAuthorizationURLParams(
-    config?: AuthorizationURLParams,
+    config?: AuthorizeRequestUrlParams,
     userID?: string,
   ): Promise<Map<string, string>> {
     const configData: StrictAuthClientConfig = await this._config();
@@ -102,7 +102,7 @@ export class AuthenticationCore<T> {
       authorizeRequestParams.set('prompt', configData.prompt);
     }
 
-    const customParams: AuthorizationURLParams | undefined = config;
+    const customParams: AuthorizeRequestUrlParams | undefined = config;
 
     if (customParams) {
       for (const [key, value] of Object.entries(customParams)) {
@@ -123,7 +123,7 @@ export class AuthenticationCore<T> {
     return authorizeRequestParams;
   }
 
-  public async getAuthorizationURL(config?: AuthorizationURLParams, userID?: string): Promise<string> {
+  public async getAuthorizationURL(config?: AuthorizeRequestUrlParams, userID?: string): Promise<string> {
     const authorizeEndpoint: string = (await this._dataLayer.getOIDCProviderMetaDataParameter(
       OIDCDiscoveryConstants.Storage.StorageKeys.Endpoints.AUTHORIZATION as keyof OIDCDiscoveryApiResponse,
     )) as string;
diff --git a/packages/javascript/src/__legacy__/models/index.ts b/packages/javascript/src/__legacy__/models/index.ts
index 90b310ab3..2733c1370 100644
--- a/packages/javascript/src/__legacy__/models/index.ts
+++ b/packages/javascript/src/__legacy__/models/index.ts
@@ -19,6 +19,5 @@
 export * from './client-config';
 export * from './data';
 export * from './custom-grant';
-export * from './authorization-url';
 export * from './user';
 export * from './fetch';
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index aa0faeafa..94d0464b3 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -36,6 +36,11 @@ export {AsgardeoClient, SignInOptions, SignOutOptions} from './models/client';
 export {BaseConfig, Config, Preferences, ThemePreferences} from './models/config';
 export {TokenResponse, IdTokenPayload} from './models/token';
 export {Crypto, JWKInterface} from './models/crypto';
+export {
+  AuthorizeRequestUrlParams,
+  KnownExtendedAuthorizeRequestUrlParams,
+  ExtendedAuthorizeRequestUrlParams,
+} from './models/oauth-request';
 export {OIDCEndpoints} from './models/oidc-endpoints';
 export {Store} from './models/store';
 export {User} from './models/user';
diff --git a/packages/javascript/src/__legacy__/models/authorization-url.ts b/packages/javascript/src/models/oauth-request.ts
similarity index 68%
rename from packages/javascript/src/__legacy__/models/authorization-url.ts
rename to packages/javascript/src/models/oauth-request.ts
index 46287f51b..a5ca4f50d 100644
--- a/packages/javascript/src/__legacy__/models/authorization-url.ts
+++ b/packages/javascript/src/models/oauth-request.ts
@@ -16,11 +16,12 @@
  * under the License.
  */
 
-export type AuthorizationURLParams = Omit<GetAuthURLConfig, "forceInit">;
+export type AuthorizeRequestUrlParams = Omit<ExtendedAuthorizeRequestUrlParams, 'forceInit'>;
 
-export interface StrictGetAuthURLConfig {
-    fidp?: string;
-    forceInit?: boolean;
+export interface KnownExtendedAuthorizeRequestUrlParams {
+  fidp?: string;
+  forceInit?: boolean;
 }
 
-export type GetAuthURLConfig = StrictGetAuthURLConfig & Record<string, string | boolean>;
+export type ExtendedAuthorizeRequestUrlParams = KnownExtendedAuthorizeRequestUrlParams &
+  Record<string, string | boolean>;

From 0f18fb803afbb756cb0ef976d6c8799c1ae43e81 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Sun, 8 Jun 2025 17:01:57 +0530
Subject: [PATCH 008/131] chore(javascript): refactor authorization URL
 parameter handling and introduce utility function

---
 packages/__legacy__/core/src/api/authorize.ts |   4 +-
 packages/javascript/src/__legacy__/client.ts  |  44 ------
 .../__legacy__/core/authentication-core.ts    |  92 ++++--------
 .../javascript/src/constants/PKCEConstants.ts |   1 +
 .../src/utils/getAuthorizeRequestUrlParams.ts | 140 ++++++++++++++++++
 5 files changed, 171 insertions(+), 110 deletions(-)
 create mode 100644 packages/javascript/src/utils/getAuthorizeRequestUrlParams.ts

diff --git a/packages/__legacy__/core/src/api/authorize.ts b/packages/__legacy__/core/src/api/authorize.ts
index 69b677837..cf11c5586 100644
--- a/packages/__legacy__/core/src/api/authorize.ts
+++ b/packages/__legacy__/core/src/api/authorize.ts
@@ -32,7 +32,9 @@ const authorize = async (): Promise<AuthApiResponse> => {
 
   try {
     const authInstace: UIAuthClient = AuthClient.getInstance();
-    const params: Map<string, string> = await authInstace.getAuthorizationURLParams();
+    // FIXME: We should be able to get the URL itself.
+    // const params: Map<string, string> = await authInstace.getAuthorizationURLParams();
+    const params: Map<string, string> = new Map();
 
     const formBody: URLSearchParams = new URLSearchParams();
 
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 647745a78..43ee26f5d 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -159,50 +159,6 @@ export class AsgardeoAuthClient<T> {
     return AsgardeoAuthClient._instanceID;
   }
 
-  /**
-   * This is an async method that returns a Promise that resolves with the authorization URL parameters.
-   *
-   * @param config - (Optional) A config object to force initialization and pass
-   * custom path parameters such as the `fidp` parameter.
-   * @param userID - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
-   * scenarios where each user should be uniquely identified.
-   *
-   * @returns - A promise that resolves with the authorization URL parameters.
-   *
-   * @example
-   * ```
-   * auth.getAuthorizationURLParams().then((params)=>{
-   *  // console.log(params);
-   * }).catch((error)=>{
-   *  // console.error(error);
-   * });
-   * ```
-   *
-   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getAuthorizationURLParams}
-   *
-   * @preserve
-   */
-  public async getAuthorizationURLParams(
-    config?: ExtendedAuthorizeRequestUrlParams,
-    userID?: string,
-  ): Promise<Map<string, string>> {
-    const authRequestConfig: ExtendedAuthorizeRequestUrlParams = {...config};
-
-    delete authRequestConfig?.forceInit;
-
-    if (
-      await this._dataLayer.getTemporaryDataParameter(
-        OIDCDiscoveryConstants.Storage.StorageKeys.OPENID_PROVIDER_CONFIG_INITIATED,
-      )
-    ) {
-      return this._authenticationCore.getAuthorizationURLParams(authRequestConfig, userID);
-    }
-
-    return this._authenticationCore.getOIDCProviderMetaData(config?.forceInit as boolean).then(() => {
-      return this._authenticationCore.getAuthorizationURLParams(authRequestConfig, userID);
-    });
-  }
-
   /**
    * This is an async method that returns a Promise that resolves with the authorization URL.
    *
diff --git a/packages/javascript/src/__legacy__/core/authentication-core.ts b/packages/javascript/src/__legacy__/core/authentication-core.ts
index 921aa993d..4f988ab8a 100644
--- a/packages/javascript/src/__legacy__/core/authentication-core.ts
+++ b/packages/javascript/src/__legacy__/core/authentication-core.ts
@@ -41,6 +41,8 @@ import OIDCDiscoveryConstants from '../../constants/OIDCDiscoveryConstants';
 import OIDCRequestConstants from '../../constants/OIDCRequestConstants';
 import {OIDCDiscoveryApiResponse} from '../../models/oidc-discovery';
 import {IsomorphicCrypto} from '../../IsomorphicCrypto';
+import getAuthorizeRequestUrlParams from '../../utils/getAuthorizeRequestUrlParams';
+import PKCEConstants from '../../constants/PKCEConstants';
 
 export class AuthenticationCore<T> {
   private _dataLayer: DataLayer<T>;
@@ -59,70 +61,6 @@ export class AuthenticationCore<T> {
     this._oidcProviderMetaData = async () => await this._dataLayer.getOIDCProviderMetaData();
   }
 
-  public async getAuthorizationURLParams(
-    config?: AuthorizeRequestUrlParams,
-    userID?: string,
-  ): Promise<Map<string, string>> {
-    const configData: StrictAuthClientConfig = await this._config();
-
-    const authorizeRequestParams: Map<string, string> = new Map<string, string>();
-
-    authorizeRequestParams.set('response_type', 'code');
-    authorizeRequestParams.set('client_id', configData.clientID);
-
-    let scope: string = ScopeConstants.OPENID;
-
-    if (configData.scope && configData.scope.length > 0) {
-      if (!configData.scope.includes(ScopeConstants.OPENID)) {
-        configData.scope.push(ScopeConstants.OPENID);
-      }
-      scope = configData.scope.join(' ');
-    }
-
-    authorizeRequestParams.set('scope', scope);
-    authorizeRequestParams.set('redirect_uri', configData.signInRedirectURL);
-
-    if (configData.responseMode) {
-      authorizeRequestParams.set('response_mode', configData.responseMode);
-    }
-
-    const tempStore: TemporaryStore = await this._dataLayer.getTemporaryData(userID);
-    const pkceKey: string = await generatePkceStorageKey(tempStore);
-
-    if (configData.enablePKCE) {
-      const codeVerifier: string = this._cryptoHelper?.getCodeVerifier();
-      const codeChallenge: string = this._cryptoHelper?.getCodeChallenge(codeVerifier);
-
-      await this._dataLayer.setTemporaryDataParameter(pkceKey, codeVerifier, userID);
-      authorizeRequestParams.set('code_challenge_method', 'S256');
-      authorizeRequestParams.set('code_challenge', codeChallenge);
-    }
-
-    if (configData.prompt) {
-      authorizeRequestParams.set('prompt', configData.prompt);
-    }
-
-    const customParams: AuthorizeRequestUrlParams | undefined = config;
-
-    if (customParams) {
-      for (const [key, value] of Object.entries(customParams)) {
-        if (key != '' && value != '' && key !== OIDCRequestConstants.Params.STATE) {
-          authorizeRequestParams.set(key, value.toString());
-        }
-      }
-    }
-
-    authorizeRequestParams.set(
-      OIDCRequestConstants.Params.STATE,
-      generateStateParamForRequestCorrelation(
-        pkceKey,
-        customParams ? customParams[OIDCRequestConstants.Params.STATE]?.toString() : '',
-      ),
-    );
-
-    return authorizeRequestParams;
-  }
-
   public async getAuthorizationURL(config?: AuthorizeRequestUrlParams, userID?: string): Promise<string> {
     const authorizeEndpoint: string = (await this._dataLayer.getOIDCProviderMetaDataParameter(
       OIDCDiscoveryConstants.Storage.StorageKeys.Endpoints.AUTHORIZATION as keyof OIDCDiscoveryApiResponse,
@@ -138,8 +76,32 @@ export class AuthenticationCore<T> {
     }
 
     const authorizeRequest: URL = new URL(authorizeEndpoint);
+    const configData: StrictAuthClientConfig = await this._config();
+    const tempStore: TemporaryStore = await this._dataLayer.getTemporaryData(userID);
+    const pkceKey: string = await generatePkceStorageKey(tempStore);
+
+    let codeVerifier: string | undefined;
+    let codeChallenge: string | undefined;
 
-    const authorizeRequestParams: Map<string, string> = await this.getAuthorizationURLParams(config, userID);
+    if (configData.enablePKCE) {
+      codeVerifier = this._cryptoHelper?.getCodeVerifier();
+      codeChallenge = this._cryptoHelper?.getCodeChallenge(codeVerifier);
+      await this._dataLayer.setTemporaryDataParameter(pkceKey, codeVerifier, userID);
+    }
+
+    const authorizeRequestParams: Map<string, string> = getAuthorizeRequestUrlParams(
+      {
+        redirectUri: configData.signInRedirectURL,
+        clientId: configData.clientID,
+        scope: configData.scope as unknown as any,
+        responseMode: configData.responseMode,
+        codeChallengeMethod: PKCEConstants.DEFAULT_CODE_CHALLENGE_METHOD,
+        codeChallenge,
+        prompt: configData.prompt,
+      },
+      {key: pkceKey},
+      config,
+    );
 
     for (const [key, value] of authorizeRequestParams.entries()) {
       authorizeRequest.searchParams.append(key, value);
diff --git a/packages/javascript/src/constants/PKCEConstants.ts b/packages/javascript/src/constants/PKCEConstants.ts
index a70e8adc3..7191c33e0 100644
--- a/packages/javascript/src/constants/PKCEConstants.ts
+++ b/packages/javascript/src/constants/PKCEConstants.ts
@@ -34,6 +34,7 @@
  * ```
  */
 const PKCEConstants = {
+  DEFAULT_CODE_CHALLENGE_METHOD: 'S256',
   /**
    * Storage-related constants for managing PKCE state
    */
diff --git a/packages/javascript/src/utils/getAuthorizeRequestUrlParams.ts b/packages/javascript/src/utils/getAuthorizeRequestUrlParams.ts
new file mode 100644
index 000000000..b5359f767
--- /dev/null
+++ b/packages/javascript/src/utils/getAuthorizeRequestUrlParams.ts
@@ -0,0 +1,140 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import ScopeConstants from '../constants/ScopeConstants';
+import OIDCRequestConstants from '../constants/OIDCRequestConstants';
+import generateStateParamForRequestCorrelation from './generateStateParamForRequestCorrelation';
+import {ExtendedAuthorizeRequestUrlParams} from '../models/oauth-request';
+import AsgardeoRuntimeError from '../errors/AsgardeoRuntimeError';
+
+/**
+ * Generates a map of authorization request URL parameters for OIDC authorization requests.
+ *
+ * This utility ensures the `openid` scope is always included, handles both string and array forms of the `scope` parameter,
+ * and supports PKCE and custom parameters. Throws if a code challenge is provided without a code challenge method.
+ *
+ * @param options - The main options for the authorization request, including redirectUri, clientId, scope, responseMode, codeChallenge, codeChallengeMethod, and prompt.
+ * @param pkceOptions - PKCE options, including the PKCE key for state correlation.
+ * @param customParams - Optional custom parameters to include in the request (excluding the `state` param, which is handled separately).
+ * @returns A Map of key-value pairs representing the authorization request URL parameters.
+ *
+ * @throws {AsgardeoRuntimeError} If a code challenge is provided without a code challenge method.
+ *
+ * @example
+ * const params = getAuthorizeRequestUrlParams({
+ *   options: {
+ *     redirectUri: 'https://app/callback',
+ *     clientId: 'client123',
+ *     scope: ['openid', 'profile'],
+ *     responseMode: 'query',
+ *     codeChallenge: 'abc',
+ *     codeChallengeMethod: 'S256',
+ *     prompt: 'login'
+ *   },
+ *   pkceOptions: { key: 'pkce_code_verifier_1' },
+ *   customParams: { foo: 'bar' }
+ * });
+ * // Returns a Map with all required OIDC params, PKCE, and custom params.
+ */
+const getAuthorizeRequestUrlParams = (
+  options: {
+    redirectUri: string;
+    clientId: string;
+    scope?: string | string[];
+    responseMode?: string;
+    codeChallenge?: string;
+    codeChallengeMethod?: string;
+    prompt?: string;
+  } & ExtendedAuthorizeRequestUrlParams,
+  pkceOptions: {key: string},
+  customParams: Record<string, string | number | boolean>,
+): Map<string, string> => {
+  const {redirectUri, clientId, scope, responseMode, codeChallenge, codeChallengeMethod, prompt} = options;
+  const authorizeRequestParams: Map<string, string> = new Map<string, string>();
+
+  authorizeRequestParams.set('response_type', 'code');
+  authorizeRequestParams.set('client_id', clientId as string);
+
+  let resolvedScopes: string = ScopeConstants.OPENID;
+
+  if (scope) {
+    if (Array.isArray(scope)) {
+      if (!scope.includes(ScopeConstants.OPENID)) {
+        scope.push(ScopeConstants.OPENID);
+      }
+
+      resolvedScopes = scope.join(' ');
+    } else if (typeof scope === 'string') {
+      const scopesArray = scope.split(' ').filter(Boolean);
+
+      if (!scopesArray.includes(ScopeConstants.OPENID)) {
+        scopesArray.push(ScopeConstants.OPENID);
+      }
+
+      resolvedScopes = scopesArray.join(' ');
+    }
+  }
+
+  authorizeRequestParams.set('scope', resolvedScopes);
+  authorizeRequestParams.set('redirect_uri', redirectUri as string);
+
+  if (responseMode) {
+    authorizeRequestParams.set('response_mode', responseMode as string);
+  }
+
+  const pkceKey: string = pkceOptions?.key;
+
+  if (codeChallenge) {
+    authorizeRequestParams.set('code_challenge', codeChallenge as string);
+
+    if (codeChallengeMethod) {
+      authorizeRequestParams.set('code_challenge_method', codeChallengeMethod as string);
+    } else {
+      throw new AsgardeoRuntimeError(
+        'Code challenge method is required when code challenge is provided.',
+        'getAuthorizeRequestUrlParams-ValidationError-001',
+        'javascript',
+        'When PKCE is enabled, the code challenge method must be provided along with the code challenge.',
+      );
+    }
+  }
+
+  if (prompt) {
+    authorizeRequestParams.set('prompt', prompt as string);
+  }
+
+  if (customParams) {
+    for (const [key, value] of Object.entries(customParams)) {
+      if (key !== '' && value !== '' && key !== OIDCRequestConstants.Params.STATE) {
+        authorizeRequestParams.set(key, value.toString());
+      }
+    }
+  }
+
+  authorizeRequestParams.set(
+    OIDCRequestConstants.Params.STATE,
+    generateStateParamForRequestCorrelation(
+      pkceKey,
+      customParams ? customParams[OIDCRequestConstants.Params.STATE]?.toString() : '',
+    ),
+  );
+
+  return authorizeRequestParams;
+};
+
+export default getAuthorizeRequestUrlParams;

From 353bacb3a76c4e800ca3fba06cd8f3d5c5bab836 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Sun, 8 Jun 2025 21:19:54 +0530
Subject: [PATCH 009/131] chore(javascript): add unit tests for
 getAuthorizeRequestUrlParams function

---
 .../getAuthorizeRequestUrlParams.test.ts      | 179 ++++++++++++++++++
 1 file changed, 179 insertions(+)
 create mode 100644 packages/javascript/src/utils/__tests__/getAuthorizeRequestUrlParams.test.ts

diff --git a/packages/javascript/src/utils/__tests__/getAuthorizeRequestUrlParams.test.ts b/packages/javascript/src/utils/__tests__/getAuthorizeRequestUrlParams.test.ts
new file mode 100644
index 000000000..e51a995af
--- /dev/null
+++ b/packages/javascript/src/utils/__tests__/getAuthorizeRequestUrlParams.test.ts
@@ -0,0 +1,179 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {describe, it, expect, vi} from 'vitest';
+import getAuthorizeRequestUrlParams from '../getAuthorizeRequestUrlParams';
+import OIDCRequestConstants from '../../constants/OIDCRequestConstants';
+import ScopeConstants from '../../constants/ScopeConstants';
+import AsgardeoRuntimeError from '../../errors/AsgardeoRuntimeError';
+
+vi.mock(
+  '../generateStateParamForRequestCorrelation',
+  (): {
+    default: (pkceKey: string, state?: string) => string;
+  } => ({
+    default: (pkceKey: string, state: string) => `${state || ''}_request_${pkceKey.split('_').pop()}`,
+  }),
+);
+
+describe('getAuthorizeRequestUrlParams', (): void => {
+  const pkceKey: string = 'pkce_code_verifier_1';
+
+  it('should include openid in scope (array)', (): void => {
+    const params: Map<string, string> = getAuthorizeRequestUrlParams(
+      {
+        redirectUri: 'https://app/callback',
+        clientId: 'client123',
+        scope: 'profile', // pass as string, not array
+      },
+      {key: pkceKey},
+      {},
+    );
+
+    expect(params.get('scope')).toContain('openid');
+    expect(params.get('client_id')).toBe('client123');
+    expect(params.get('redirect_uri')).toBe('https://app/callback');
+  });
+
+  it('should include openid in scope (string)', (): void => {
+    const params: Map<string, string> = getAuthorizeRequestUrlParams(
+      {
+        redirectUri: 'https://app/callback',
+        clientId: 'client123',
+        scope: 'profile',
+      },
+      {key: pkceKey},
+      {},
+    );
+
+    expect(params.get('scope')).toContain('openid');
+  });
+
+  it('should not duplicate openid in scope', (): void => {
+    const params: Map<string, string> = getAuthorizeRequestUrlParams(
+      {
+        redirectUri: 'https://app/callback',
+        clientId: 'client123',
+        scope: 'openid profile',
+      },
+      {key: pkceKey},
+      {},
+    );
+    const scopes: string[] | undefined = params.get('scope')?.split(' ');
+
+    expect(scopes?.filter((s: string): boolean => s === 'openid').length).toBe(1);
+  });
+
+  it('should set response_mode if provided', (): void => {
+    const params: Map<string, string> = getAuthorizeRequestUrlParams(
+      {
+        redirectUri: 'https://app/callback',
+        clientId: 'client123',
+        responseMode: 'fragment',
+      },
+      {key: pkceKey},
+      {},
+    );
+
+    expect(params.get('response_mode')).toBe('fragment');
+  });
+
+  it('should set code_challenge and code_challenge_method if provided', (): void => {
+    const params: Map<string, string> = getAuthorizeRequestUrlParams(
+      {
+        redirectUri: 'https://app/callback',
+        clientId: 'client123',
+        codeChallenge: 'abc',
+        codeChallengeMethod: 'S256',
+      },
+      {key: pkceKey},
+      {},
+    );
+
+    expect(params.get('code_challenge')).toBe('abc');
+    expect(params.get('code_challenge_method')).toBe('S256');
+  });
+
+  it('should throw if code_challenge is provided without code_challenge_method', (): void => {
+    expect((): void => {
+      const params: Map<string, string> = getAuthorizeRequestUrlParams(
+        {
+          redirectUri: 'https://app/callback',
+          clientId: 'client123',
+          codeChallenge: 'abc',
+        },
+        {key: pkceKey},
+        {},
+      );
+    }).toThrow(AsgardeoRuntimeError);
+  });
+
+  it('should set prompt if provided', (): void => {
+    const params: Map<string, string> = getAuthorizeRequestUrlParams(
+      {
+        redirectUri: 'https://app/callback',
+        clientId: 'client123',
+        prompt: 'login',
+      },
+      {key: pkceKey},
+      {},
+    );
+
+    expect(params.get('prompt')).toBe('login');
+  });
+
+  it('should add custom params except state', (): void => {
+    const params: Map<string, string> = getAuthorizeRequestUrlParams(
+      {
+        redirectUri: 'https://app/callback',
+        clientId: 'client123',
+      },
+      {key: pkceKey},
+      {foo: 'bar', [OIDCRequestConstants.Params.STATE]: 'shouldNotAppear'},
+    );
+
+    expect(params.get('foo')).toBe('bar');
+    expect(params.get(OIDCRequestConstants.Params.STATE)).not.toBe('shouldNotAppear');
+  });
+
+  it('should generate state param using pkceKey and custom state', (): void => {
+    const params: Map<string, string> = getAuthorizeRequestUrlParams(
+      {
+        redirectUri: 'https://app/callback',
+        clientId: 'client123',
+      },
+      {key: pkceKey},
+      {[OIDCRequestConstants.Params.STATE]: 'customState'},
+    );
+
+    expect(params.get(OIDCRequestConstants.Params.STATE)).toBe('customState_request_1');
+  });
+
+  it('should default to openid scope if none provided', (): void => {
+    const params: Map<string, string> = getAuthorizeRequestUrlParams(
+      {
+        redirectUri: 'https://app/callback',
+        clientId: 'client123',
+      },
+      {key: pkceKey},
+      {},
+    );
+
+    expect(params.get('scope')).toBe(ScopeConstants.OPENID);
+  });
+});

From 33944ea956b1355ed1787ef97cae64ab66aef84c Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Sun, 8 Jun 2025 21:20:48 +0530
Subject: [PATCH 010/131] chore(recipes): add sign-in button to header
 component for user authentication

---
 recipes/vite-react-ts/src/components/Header.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/recipes/vite-react-ts/src/components/Header.tsx b/recipes/vite-react-ts/src/components/Header.tsx
index 6edf6e34e..fc34f9bd3 100644
--- a/recipes/vite-react-ts/src/components/Header.tsx
+++ b/recipes/vite-react-ts/src/components/Header.tsx
@@ -4,7 +4,8 @@ import {useState, useRef, useEffect} from 'react';
 import {Link, useNavigate} from 'react-router-dom';
 import {useApp} from '../App';
 import {Users, ChevronDown, Settings, User, LogOut, Plus, Check, Building2} from 'lucide-react';
-import {SignOutButton} from '@asgardeo/react';
+import {SignedOut, SignInButton, SignOutButton} from '@asgardeo/react';
+import {Button} from './ui/button';
 
 export default function Header() {
   const {user, currentOrg, organizations, setCurrentOrg} = useApp();
@@ -64,6 +65,16 @@ export default function Header() {
 
           {/* Right side - Organization switcher and User dropdown */}
           <div className="flex items-center space-x-4">
+            <SignedOut>
+              <SignInButton>
+                {({signIn, isLoading}) => (
+                  <Button onClick={signIn} disabled={isLoading}>
+                    {isLoading ? 'Signing in...' : 'Sign In'}
+                  </Button>
+                )}
+              </SignInButton>
+            </SignedOut>
+
             {/* Organization Switcher */}
             <div className="relative" ref={orgDropdownRef}>
               <button

From e9c19dbd411eac3cb1e3378f727458d412c443f9 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Mon, 9 Jun 2025 00:30:19 +0530
Subject: [PATCH 011/131] chore(javascript): refactor storage handling to use
 BrowserStorage enum across multiple files

---
 packages/browser/src/__legacy__/client.ts     | 22 +++++++++----------
 .../__legacy__/clients/main-thread-client.ts  | 20 ++++++++---------
 .../__legacy__/clients/web-worker-client.ts   | 16 +++++++-------
 .../helpers/authentication-helper.ts          | 12 +++++-----
 .../helpers/session-management-helper.ts      | 10 ++++-----
 .../src/__legacy__/models/client-config.ts    | 10 ++++-----
 .../browser/src/__legacy__/models/storage.ts  | 10 ++++-----
 .../src/__legacy__/stores/local-store.ts      |  4 ++--
 .../src/__legacy__/stores/memory-store.ts     |  4 ++--
 .../src/__legacy__/stores/session-store.ts    |  4 ++--
 .../src/__legacy__/worker/worker-core.ts      |  4 ++--
 packages/javascript/src/__legacy__/client.ts  |  4 ++--
 .../src/__legacy__/data/data-layer.ts         |  6 ++---
 packages/javascript/src/index.ts              |  2 +-
 packages/javascript/src/models/store.ts       |  2 +-
 packages/node/src/__legacy__/client.ts        |  8 +++----
 .../src/__legacy__/core/authentication.ts     |  6 ++---
 .../__legacy__/stores/memory-cache-store.ts   |  4 ++--
 18 files changed, 74 insertions(+), 74 deletions(-)

diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
index 17a878d90..5f524d87b 100755
--- a/packages/browser/src/__legacy__/client.ts
+++ b/packages/browser/src/__legacy__/client.ts
@@ -45,7 +45,7 @@ import {
   WebWorkerClientConfig,
   WebWorkerClientInterface,
 } from './models';
-import {Storage} from './models/storage';
+import {BrowserStorage} from './models/storage';
 import {SPAUtils} from './utils';
 
 /**
@@ -58,7 +58,7 @@ const DefaultConfig: Partial<AuthClientConfig<Config>> = {
   enableOIDCSessionManagement: false,
   periodicTokenRefresh: false,
   sessionRefreshInterval: 300,
-  storage: Storage.SessionStorage,
+  storage: BrowserStorage.SessionStorage,
 };
 
 /**
@@ -70,7 +70,7 @@ const DefaultConfig: Partial<AuthClientConfig<Config>> = {
 export class AsgardeoSPAClient {
   protected static _instances: Map<number, AsgardeoSPAClient> = new Map<number, AsgardeoSPAClient>();
   protected _client: WebWorkerClientInterface | MainThreadClientInterface | undefined;
-  protected _storage: Storage | undefined;
+  protected _storage: BrowserStorage | undefined;
   protected _authHelper: typeof AuthenticationHelper = AuthenticationHelper;
   protected _worker: new () => Worker = WorkerFile;
   protected _initialized: boolean = false;
@@ -235,7 +235,7 @@ export class AsgardeoSPAClient {
     authHelper?: typeof AuthenticationHelper,
     workerFile?: new () => Worker,
   ): Promise<boolean> {
-    this._storage = (config.storage as Storage) ?? Storage.SessionStorage;
+    this._storage = (config.storage as BrowserStorage) ?? BrowserStorage.SessionStorage;
     this._initialized = false;
     this._startedInitialize = true;
 
@@ -244,7 +244,7 @@ export class AsgardeoSPAClient {
 
     const _config = await this._client?.getConfigData();
 
-    if (!(this._storage === Storage.WebWorker)) {
+    if (!(this._storage === BrowserStorage.WebWorker)) {
       const mainThreadClientConfig = config as AuthClientConfig<MainThreadClientConfig>;
       const defaultConfig = {...DefaultConfig} as Partial<AuthClientConfig<MainThreadClientConfig>>;
       const mergedConfig: AuthClientConfig<MainThreadClientConfig> = {
@@ -710,7 +710,7 @@ export class AsgardeoSPAClient {
    */
   public getHttpClient(): HttpClientInstance {
     if (this._client) {
-      if (this._storage !== Storage.WebWorker) {
+      if (this._storage !== BrowserStorage.WebWorker) {
         const mainThreadClient = this._client as MainThreadClientInterface;
         return mainThreadClient.getHttpClient();
       }
@@ -829,7 +829,7 @@ export class AsgardeoSPAClient {
   public async getAccessToken(): Promise<string> {
     await this._validateMethod();
 
-    if (this._storage && [(Storage.WebWorker, Storage.BrowserMemory)].includes(this._storage)) {
+    if (this._storage && [(BrowserStorage.WebWorker, BrowserStorage.BrowserMemory)].includes(this._storage)) {
       return Promise.reject(
         new AsgardeoAuthException(
           'SPA-AUTH_CLIENT-GAT-IV01',
@@ -868,7 +868,7 @@ export class AsgardeoSPAClient {
   public async getIDPAccessToken(): Promise<string> {
     await this._validateMethod();
 
-    if (this._storage && [(Storage.WebWorker, Storage.BrowserMemory)].includes(this._storage)) {
+    if (this._storage && [(BrowserStorage.WebWorker, BrowserStorage.BrowserMemory)].includes(this._storage)) {
       return Promise.reject(
         new AsgardeoAuthException(
           'SPA-AUTH_CLIENT-GIAT-IV01',
@@ -907,7 +907,7 @@ export class AsgardeoSPAClient {
   public async getDataLayer(): Promise<DataLayer<MainThreadClientConfig>> {
     await this._validateMethod();
 
-    if (this._storage && [(Storage.WebWorker, Storage.BrowserMemory)].includes(this._storage)) {
+    if (this._storage && [(BrowserStorage.WebWorker, BrowserStorage.BrowserMemory)].includes(this._storage)) {
       return Promise.reject(
         new AsgardeoAuthException(
           'SPA-AUTH_CLIENT-GDL-IV01',
@@ -1001,7 +1001,7 @@ export class AsgardeoSPAClient {
   public async isSessionActive(): Promise<boolean | undefined> {
     await this._isInitialized();
 
-    if (this._storage && [(Storage.WebWorker, Storage.BrowserMemory)].includes(this._storage)) {
+    if (this._storage && [(BrowserStorage.WebWorker, BrowserStorage.BrowserMemory)].includes(this._storage)) {
       return Promise.reject(
         new AsgardeoAuthException(
           'SPA-AUTH_CLIENT-ISA-IV01',
@@ -1158,7 +1158,7 @@ export class AsgardeoSPAClient {
    */
   public async updateConfig(config: Partial<AuthClientConfig<Config>>): Promise<void> {
     await this._isInitialized();
-    if (this._storage === Storage.WebWorker) {
+    if (this._storage === BrowserStorage.WebWorker) {
       const client = this._client as WebWorkerClientInterface;
       await client.updateConfig(config as Partial<AuthClientConfig<WebWorkerClientConfig>>);
     } else {
diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index 714f81765..7e746aec3 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -28,7 +28,7 @@ import {
   OIDCEndpoints,
   OIDCRequestConstants,
   SessionData,
-  Store,
+  Storage,
   extractPkceStorageKeyFromState,
 } from '@asgardeo/javascript';
 import {SILENT_SIGN_IN_STATE, TOKEN_REQUEST_CONFIG_KEY} from '../constants';
@@ -36,18 +36,18 @@ import {AuthenticationHelper, SPAHelper, SessionManagementHelper} from '../helpe
 import {HttpClient, HttpClientInstance} from '../http-client';
 import {HttpError, HttpRequestConfig, HttpResponse, MainThreadClientConfig, MainThreadClientInterface} from '../models';
 import {SPACustomGrantConfig} from '../models/request-custom-grant';
-import {Storage} from '../models/storage';
+import {BrowserStorage} from '../models/storage';
 import {LocalStore, MemoryStore, SessionStore} from '../stores';
 import {SPAUtils} from '../utils';
 import {SPACryptoUtils} from '../utils/crypto-utils';
 
-const initiateStore = (store: Storage | undefined): Store => {
+const initiateStore = (store: BrowserStorage | undefined): Storage => {
   switch (store) {
-    case Storage.LocalStorage:
+    case BrowserStorage.LocalStorage:
       return new LocalStore();
-    case Storage.SessionStorage:
+    case BrowserStorage.SessionStorage:
       return new SessionStore();
-    case Storage.BrowserMemory:
+    case BrowserStorage.BrowserMemory:
       return new MemoryStore();
     default:
       return new SessionStore();
@@ -62,7 +62,7 @@ export const MainThreadClient = async (
     spaHelper: SPAHelper<MainThreadClientConfig>,
   ) => AuthenticationHelper<MainThreadClientConfig>,
 ): Promise<MainThreadClientInterface> => {
-  const _store: Store = initiateStore(config.storage as Storage);
+  const _store: Storage = initiateStore(config.storage as BrowserStorage);
   const _cryptoUtils: SPACryptoUtils = new SPACryptoUtils();
   const _authenticationClient = new AsgardeoAuthClient<MainThreadClientConfig>();
   await _authenticationClient.initialize(config, _store, _cryptoUtils, instanceID);
@@ -73,7 +73,7 @@ export const MainThreadClient = async (
     async () => {
       return _authenticationClient.getSignOutURL();
     },
-    (config.storage as Storage) ?? Storage.SessionStorage,
+    (config.storage as BrowserStorage) ?? BrowserStorage.SessionStorage,
     (sessionState: string) =>
       _dataLayer.setSessionDataParameter(
         OIDCRequestConstants.Params.SESSION_STATE as keyof SessionData,
@@ -228,7 +228,7 @@ export const MainThreadClient = async (
       }
 
       return _authenticationClient.getAuthorizationURL(signInConfig).then(async (url: string) => {
-        if (config.storage === Storage.BrowserMemory && config.enablePKCE) {
+        if (config.storage === BrowserStorage.BrowserMemory && config.enablePKCE) {
           const pkceKey: string = extractPkceStorageKeyFromState(resolvedState);
 
           SPAUtils.setPKCE(pkceKey, (await _authenticationClient.getPKCECode(resolvedState)) as string);
@@ -337,7 +337,7 @@ export const MainThreadClient = async (
     urlObject.searchParams.set('response_mode', 'query');
     const url: string = urlObject.toString();
 
-    if (config.storage === Storage.BrowserMemory && config.enablePKCE) {
+    if (config.storage === BrowserStorage.BrowserMemory && config.enablePKCE) {
       const state = urlObject.searchParams.get(OIDCRequestConstants.Params.STATE);
 
       SPAUtils.setPKCE(
diff --git a/packages/browser/src/__legacy__/clients/web-worker-client.ts b/packages/browser/src/__legacy__/clients/web-worker-client.ts
index ff229f00d..030f630e2 100755
--- a/packages/browser/src/__legacy__/clients/web-worker-client.ts
+++ b/packages/browser/src/__legacy__/clients/web-worker-client.ts
@@ -28,7 +28,7 @@ import {
   ExtendedAuthorizeRequestUrlParams,
   OIDCEndpoints,
   OIDCRequestConstants,
-  Store,
+  Storage,
   extractPkceStorageKeyFromState,
 } from '@asgardeo/javascript';
 import {
@@ -74,18 +74,18 @@ import {
   WebWorkerClientInterface,
 } from '../models';
 import {SPACustomGrantConfig} from '../models/request-custom-grant';
-import {Storage} from '../models/storage';
+import {BrowserStorage} from '../models/storage';
 import {LocalStore, MemoryStore, SessionStore} from '../stores';
 import {SPAUtils} from '../utils';
 import {SPACryptoUtils} from '../utils/crypto-utils';
 
-const initiateStore = (store: Storage | undefined): Store => {
+const initiateStore = (store: BrowserStorage | undefined): Storage => {
   switch (store) {
-    case Storage.LocalStorage:
+    case BrowserStorage.LocalStorage:
       return new LocalStore();
-    case Storage.SessionStorage:
+    case BrowserStorage.SessionStorage:
       return new SessionStore();
-    case Storage.BrowserMemory:
+    case BrowserStorage.BrowserMemory:
       return new MemoryStore();
     default:
       return new SessionStore();
@@ -112,7 +112,7 @@ export const WebWorkerClient = async (
   let _isHttpHandlerEnabled: boolean = true;
   let _getSignOutURLFromSessionStorage: boolean = false;
 
-  const _store: Store = initiateStore(config.storage as Storage);
+  const _store: Storage = initiateStore(config.storage as BrowserStorage);
   const _cryptoUtils: SPACryptoUtils = new SPACryptoUtils();
   const _authenticationClient = new AsgardeoAuthClient<WebWorkerClientConfig>();
   await _authenticationClient.initialize(config, _store, _cryptoUtils, instanceID);
@@ -132,7 +132,7 @@ export const WebWorkerClient = async (
         return SPAUtils.getSignOutURL(config.clientID, instanceID);
       }
     },
-    config.storage as Storage,
+    config.storage as BrowserStorage,
     (sessionState: string) => setSessionState(sessionState),
   );
 
diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
index 203e4d9ce..ce4db69c5 100644
--- a/packages/browser/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -56,7 +56,7 @@ import {
   WebWorkerClientConfig,
 } from '../models';
 import {SPACustomGrantConfig} from '../models/request-custom-grant';
-import {Storage} from '../models/storage';
+import {BrowserStorage} from '../models/storage';
 import {SPAUtils} from '../utils';
 
 export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerClientConfig> {
@@ -456,11 +456,11 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
   ): Promise<BasicUserInfo> {
     const config = await this._dataLayer.getConfigData();
 
-    if (config.storage === Storage.BrowserMemory && config.enablePKCE && sessionState) {
+    if (config.storage === BrowserStorage.BrowserMemory && config.enablePKCE && sessionState) {
       const pkce = SPAUtils.getPKCE(extractPkceStorageKeyFromState(sessionState));
 
       await this._authenticationClient.setPKCECode(extractPkceStorageKeyFromState(sessionState), pkce);
-    } else if (config.storage === Storage.WebWorker && pkce) {
+    } else if (config.storage === BrowserStorage.WebWorker && pkce) {
       await this._authenticationClient.setPKCECode(pkce, state ?? '');
     }
 
@@ -472,7 +472,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
           /* if (config.storage === Storage.BrowserMemory) {
                         SPAUtils.setSignOutURL(await _authenticationClient.getSignOutURL());
                     } */
-          if (config.storage !== Storage.WebWorker) {
+          if (config.storage !== BrowserStorage.WebWorker) {
             SPAUtils.setSignOutURL(await this._authenticationClient.getSignOutURL(), config.clientID, this._instanceID);
 
             if (this._spaHelper) {
@@ -601,7 +601,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
       });
     }
 
-    if (config.storage !== Storage.WebWorker) {
+    if (config.storage !== BrowserStorage.WebWorker) {
       if (await this._authenticationClient.isAuthenticated()) {
         this._spaHelper.clearRefreshTokenTimeout();
         this._spaHelper.refreshAccessTokenAutomatically(this);
@@ -628,7 +628,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
       throw new AsgardeoAuthException('SPA-AUTH_HELPER-SI-SE01', error, errorDescription ?? '');
     }
 
-    if (config.storage === Storage.WebWorker && tryRetrievingUserInfo) {
+    if (config.storage === BrowserStorage.WebWorker && tryRetrievingUserInfo) {
       const basicUserInfo = await tryRetrievingUserInfo();
 
       if (basicUserInfo) {
diff --git a/packages/browser/src/__legacy__/helpers/session-management-helper.ts b/packages/browser/src/__legacy__/helpers/session-management-helper.ts
index 09dedd4c1..c2c1a292a 100644
--- a/packages/browser/src/__legacy__/helpers/session-management-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/session-management-helper.ts
@@ -30,7 +30,7 @@ import {
   STATE_QUERY,
 } from '../constants';
 import {AuthorizationInfo, Message, SessionManagementHelperInterface} from '../models';
-import {Storage} from '../models/storage';
+import {BrowserStorage} from '../models/storage';
 import {SPAUtils} from '../utils';
 
 export const SessionManagementHelper = (() => {
@@ -43,7 +43,7 @@ export const SessionManagementHelper = (() => {
   let _signOut: () => Promise<string>;
   let _sessionRefreshIntervalTimeout: number;
   let _checkSessionIntervalTimeout: number;
-  let _storage: Storage;
+  let _storage: BrowserStorage;
   let _setSessionState: (sessionState: string) => void;
   let _getAuthorizationURL: (params?: ExtendedAuthorizeRequestUrlParams) => Promise<string>;
 
@@ -148,7 +148,7 @@ export const SessionManagementHelper = (() => {
         }
       };
 
-      if (_storage === Storage.BrowserMemory || _storage === Storage.WebWorker) {
+      if (_storage === BrowserStorage.BrowserMemory || _storage === BrowserStorage.WebWorker) {
         window?.addEventListener('message', receiveMessageListener);
       }
 
@@ -203,7 +203,7 @@ export const SessionManagementHelper = (() => {
 
         const newSessionState = new URL(window.location.href).searchParams.get('session_state');
 
-        if (_storage === Storage.LocalStorage || _storage === Storage.SessionStorage) {
+        if (_storage === BrowserStorage.LocalStorage || _storage === BrowserStorage.SessionStorage) {
           setSessionState && (await setSessionState(newSessionState));
         } else {
           const message: Message<string> = {
@@ -257,7 +257,7 @@ export const SessionManagementHelper = (() => {
 
   return async (
     signOut: () => Promise<string>,
-    storage: Storage,
+    storage: BrowserStorage,
     setSessionState: (sessionState: string) => void,
   ): Promise<SessionManagementHelperInterface> => {
     let rpIFrame = document.createElement('iframe');
diff --git a/packages/browser/src/__legacy__/models/client-config.ts b/packages/browser/src/__legacy__/models/client-config.ts
index c9930e8e0..e807e7a7c 100644
--- a/packages/browser/src/__legacy__/models/client-config.ts
+++ b/packages/browser/src/__legacy__/models/client-config.ts
@@ -17,7 +17,7 @@
  */
 
 import {AuthClientConfig} from '@asgardeo/javascript';
-import {Storage} from './storage';
+import {BrowserStorage} from './storage';
 
 export interface SPAConfig {
   /**
@@ -42,9 +42,9 @@ export interface MainThreadClientConfig extends SPAConfig {
    * The storage type to be used for storing the session information.
    */
   storage?:
-    | Storage.SessionStorage
-    | Storage.LocalStorage
-    | Storage.BrowserMemory
+    | BrowserStorage.SessionStorage
+    | BrowserStorage.LocalStorage
+    | BrowserStorage.BrowserMemory
     | 'sessionStorage'
     | 'localStorage'
     | 'browserMemory';
@@ -54,7 +54,7 @@ export interface WebWorkerClientConfig extends SPAConfig {
   /**
    * The storage type to be used for storing the session information.
    */
-  storage: Storage.WebWorker | 'webWorker';
+  storage: BrowserStorage.WebWorker | 'webWorker';
   /**
    * Specifies in seconds how long a request to the web worker should wait before being timed.
    */
diff --git a/packages/browser/src/__legacy__/models/storage.ts b/packages/browser/src/__legacy__/models/storage.ts
index ef4150c5f..5f68ae89f 100644
--- a/packages/browser/src/__legacy__/models/storage.ts
+++ b/packages/browser/src/__legacy__/models/storage.ts
@@ -19,21 +19,21 @@
 /**
  * Enum for the different storage types.
  */
-export enum Storage {
+export enum BrowserStorage {
   /**
    * Stores the session information in the local storage
    */
-  LocalStorage = "localStorage",
+  LocalStorage = 'localStorage',
   /**
    * Store the session information in the session storage.
    */
-  SessionStorage = "sessionStorage",
+  SessionStorage = 'sessionStorage',
   /**
    * Store the session information in the web worker.
    */
-  WebWorker = "webWorker",
+  WebWorker = 'webWorker',
   /**
    * Store the session information in the browser memory.
    */
-  BrowserMemory = "browserMemory"
+  BrowserMemory = 'browserMemory',
 }
diff --git a/packages/browser/src/__legacy__/stores/local-store.ts b/packages/browser/src/__legacy__/stores/local-store.ts
index 0a0d0e6f4..38c80fb70 100644
--- a/packages/browser/src/__legacy__/stores/local-store.ts
+++ b/packages/browser/src/__legacy__/stores/local-store.ts
@@ -15,9 +15,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {Store} from '@asgardeo/javascript';
+import {Storage} from '@asgardeo/javascript';
 
-export class LocalStore implements Store {
+export class LocalStore implements Storage {
   public async setData(key: string, value: string): Promise<void> {
     localStorage.setItem(key, value);
   }
diff --git a/packages/browser/src/__legacy__/stores/memory-store.ts b/packages/browser/src/__legacy__/stores/memory-store.ts
index f1362eca0..9122e175f 100644
--- a/packages/browser/src/__legacy__/stores/memory-store.ts
+++ b/packages/browser/src/__legacy__/stores/memory-store.ts
@@ -15,9 +15,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {Store} from '@asgardeo/javascript';
+import {Storage} from '@asgardeo/javascript';
 
-export class MemoryStore implements Store {
+export class MemoryStore implements Storage {
   private _data: Map<string, string>;
 
   public constructor() {
diff --git a/packages/browser/src/__legacy__/stores/session-store.ts b/packages/browser/src/__legacy__/stores/session-store.ts
index b963ec38c..67e18e0ff 100644
--- a/packages/browser/src/__legacy__/stores/session-store.ts
+++ b/packages/browser/src/__legacy__/stores/session-store.ts
@@ -15,9 +15,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {Store} from '@asgardeo/javascript';
+import {Storage} from '@asgardeo/javascript';
 
-export class SessionStore implements Store {
+export class SessionStore implements Storage {
   public async setData(key: string, value: string): Promise<void> {
     sessionStorage.setItem(key, value);
   }
diff --git a/packages/browser/src/__legacy__/worker/worker-core.ts b/packages/browser/src/__legacy__/worker/worker-core.ts
index 079b8d52d..6fdc5ef9c 100755
--- a/packages/browser/src/__legacy__/worker/worker-core.ts
+++ b/packages/browser/src/__legacy__/worker/worker-core.ts
@@ -28,7 +28,7 @@ import {
   OIDCEndpoints,
   OIDCRequestConstants,
   SessionData,
-  Store,
+  Storage,
 } from '@asgardeo/javascript';
 import {AuthenticationHelper, SPAHelper} from '../helpers';
 import {HttpClient, HttpClientInstance} from '../http-client';
@@ -49,7 +49,7 @@ export const WebWorkerCore = async (
     spaHelper: SPAHelper<WebWorkerClientConfig>,
   ) => AuthenticationHelper<WebWorkerClientConfig>,
 ): Promise<WebWorkerCoreInterface> => {
-  const _store: Store = new MemoryStore();
+  const _store: Storage = new MemoryStore();
   const _cryptoUtils: SPACryptoUtils = new SPACryptoUtils();
   const _authenticationClient = new AsgardeoAuthClient<WebWorkerClientConfig>();
   await _authenticationClient.initialize(config, _store, _cryptoUtils);
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 43ee26f5d..4d38f9c77 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -23,7 +23,7 @@ import {ExtendedAuthorizeRequestUrlParams} from '../models/oauth-request';
 import {Crypto} from '../models/crypto';
 import {TokenResponse, IdTokenPayload} from '../models/token';
 import {OIDCEndpoints} from '../models/oidc-endpoints';
-import {Store} from '../models/store';
+import {Storage} from '../models/store';
 import ScopeConstants from '../constants/ScopeConstants';
 import OIDCDiscoveryConstants from '../constants/OIDCDiscoveryConstants';
 import OIDCRequestConstants from '../constants/OIDCRequestConstants';
@@ -90,7 +90,7 @@ export class AsgardeoAuthClient<T> {
    */
   public async initialize(
     config: AuthClientConfig<T>,
-    store: Store,
+    store: Storage,
     cryptoUtils: Crypto,
     instanceID?: number,
   ): Promise<void> {
diff --git a/packages/javascript/src/__legacy__/data/data-layer.ts b/packages/javascript/src/__legacy__/data/data-layer.ts
index c7729255f..6b314ced2 100644
--- a/packages/javascript/src/__legacy__/data/data-layer.ts
+++ b/packages/javascript/src/__legacy__/data/data-layer.ts
@@ -17,7 +17,7 @@
  */
 
 import {Stores} from '../../models/store';
-import {Store} from '../../models/store';
+import {Storage} from '../../models/store';
 import {AuthClientConfig, SessionData} from '../models';
 import {TemporaryStore, TemporaryStoreValue} from '../../models/store';
 import {OIDCDiscoveryApiResponse} from '../../models/oidc-discovery';
@@ -28,8 +28,8 @@ export const ASGARDEO_SESSION_ACTIVE: string = 'asgardeo-session-active';
 
 export class DataLayer<T> {
   protected _id: string;
-  protected _store: Store;
-  public constructor(instanceID: string, store: Store) {
+  protected _store: Storage;
+  public constructor(instanceID: string, store: Storage) {
     this._id = instanceID;
     this._store = store;
   }
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 94d0464b3..91e385226 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -42,7 +42,7 @@ export {
   ExtendedAuthorizeRequestUrlParams,
 } from './models/oauth-request';
 export {OIDCEndpoints} from './models/oidc-endpoints';
-export {Store} from './models/store';
+export {Storage} from './models/store';
 export {User} from './models/user';
 export {Schema, SchemaAttribute, WellKnownSchemaIds} from './models/scim2-schema';
 export {RecursivePartial} from './models/utility-types';
diff --git a/packages/javascript/src/models/store.ts b/packages/javascript/src/models/store.ts
index 986b83767..23882ad8c 100644
--- a/packages/javascript/src/models/store.ts
+++ b/packages/javascript/src/models/store.ts
@@ -23,7 +23,7 @@ import {OIDCEndpoints} from './oidc-endpoints';
  * Implementations can include various storage backends like browser storage,
  * memory cache, or distributed caches like Redis or Memcached.
  */
-export interface Store {
+export interface Storage {
   /**
    * Stores a value with the specified key.
    *
diff --git a/packages/node/src/__legacy__/client.ts b/packages/node/src/__legacy__/client.ts
index 11733cc7f..083871983 100644
--- a/packages/node/src/__legacy__/client.ts
+++ b/packages/node/src/__legacy__/client.ts
@@ -24,7 +24,7 @@ import {
   IdTokenPayload,
   FetchResponse,
   OIDCEndpoints,
-  Store,
+  Storage,
   TokenResponse,
 } from '@asgardeo/javascript';
 import {AsgardeoNodeCore} from './core';
@@ -43,11 +43,11 @@ export class AsgardeoNodeClient<T> {
     * This is the constructor method that returns an instance of the `AsgardeoNodeClient` class.
     *
     * @param {AuthClientConfig<T>} config - The configuration object.
-    * @param {Store} store - The store object.
+    * @param {Storage} store - The store object.
     *
     * @example
     * ```
-    * const _store: Store = new DataStore();
+    * const _store: Storage = new DataStore();
     * const _config = {
            signInRedirectURL: "http://localhost:3000/sign-in",
            signOutRedirectURL: "http://localhost:3000/dashboard",
@@ -62,7 +62,7 @@ export class AsgardeoNodeClient<T> {
     */
   constructor() {}
 
-  public async initialize(config: AuthClientConfig<T>, store?: Store): Promise<boolean> {
+  public async initialize(config: AuthClientConfig<T>, store?: Storage): Promise<boolean> {
     this._authCore = new AsgardeoNodeCore(config, store);
 
     return Promise.resolve(true);
diff --git a/packages/node/src/__legacy__/core/authentication.ts b/packages/node/src/__legacy__/core/authentication.ts
index fe5cf0e47..06da3eeb2 100644
--- a/packages/node/src/__legacy__/core/authentication.ts
+++ b/packages/node/src/__legacy__/core/authentication.ts
@@ -28,7 +28,7 @@ import {
   FetchResponse,
   OIDCEndpoints,
   SessionData,
-  Store,
+  Storage,
   TokenResponse,
 } from '@asgardeo/javascript';
 import {AuthURLCallback} from '../models';
@@ -39,10 +39,10 @@ import {NodeCryptoUtils} from '../utils/crypto-utils';
 export class AsgardeoNodeCore<T> {
   private _auth: AsgardeoAuthClient<T>;
   private _cryptoUtils: Crypto;
-  private _store: Store;
+  private _store: Storage;
   private _dataLayer: DataLayer<T>;
 
-  constructor(config: AuthClientConfig<T>, store?: Store) {
+  constructor(config: AuthClientConfig<T>, store?: Storage) {
     //Initialize the default memory cache store if an external store is not passed.
     if (!store) {
       this._store = new MemoryCacheStore();
diff --git a/packages/node/src/__legacy__/stores/memory-cache-store.ts b/packages/node/src/__legacy__/stores/memory-cache-store.ts
index eec15371e..295653a78 100644
--- a/packages/node/src/__legacy__/stores/memory-cache-store.ts
+++ b/packages/node/src/__legacy__/stores/memory-cache-store.ts
@@ -16,10 +16,10 @@
  * under the License.
  */
 
-import {Store} from '@asgardeo/javascript';
+import {Storage} from '@asgardeo/javascript';
 import cache from 'memory-cache';
 
-export class MemoryCacheStore implements Store {
+export class MemoryCacheStore implements Storage {
   public async setData(key: string, value: string): Promise<void> {
     cache.put(key, value);
   }

From 42f50e9537a03a05de07f048039864666c967be2 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Mon, 9 Jun 2025 11:04:59 +0530
Subject: [PATCH 012/131] chore(react): enforce required signIn and signOut
 props in button interfaces

---
 .../components/actions/SignInButton/BaseSignInButton.tsx    | 6 +++---
 .../src/components/actions/SignInButton/SignInButton.tsx    | 4 ++--
 .../components/actions/SignOutButton/BaseSignOutButton.tsx  | 6 +++---
 .../src/components/actions/SignOutButton/SignOutButton.tsx  | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/actions/SignInButton/BaseSignInButton.tsx b/packages/react/src/components/actions/SignInButton/BaseSignInButton.tsx
index c13decb08..6e89ab3c4 100644
--- a/packages/react/src/components/actions/SignInButton/BaseSignInButton.tsx
+++ b/packages/react/src/components/actions/SignInButton/BaseSignInButton.tsx
@@ -35,7 +35,7 @@ export interface CommonBaseSignInButtonProps {
   /**
    * Function to initiate the sign-in process
    */
-  signIn?: () => Promise<void>;
+  signIn: () => Promise<void>;
   /**
    * Loading state during sign-in process
    */
@@ -51,7 +51,7 @@ export type BaseSignInButtonRenderProps = CommonBaseSignInButtonProps;
  * Props interface of {@link BaseSignInButton}
  */
 export interface BaseSignInButtonProps
-  extends CommonBaseSignInButtonProps,
+  extends Partial<CommonBaseSignInButtonProps>,
     Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   /**
    * Render prop function that receives sign-in props, or traditional ReactNode children
@@ -65,7 +65,7 @@ export interface BaseSignInButtonProps
  * @example Using render props
  * ```tsx
  * <BaseSignInButton>
- *   {({ signIn, isLoading }) => (
+ *   {({signIn, isLoading}) => (
  *     <button onClick={signIn} disabled={isLoading}>
  *       {isLoading ? 'Signing in...' : 'Sign In'}
  *     </button>
diff --git a/packages/react/src/components/actions/SignInButton/SignInButton.tsx b/packages/react/src/components/actions/SignInButton/SignInButton.tsx
index cec168072..0053790e3 100644
--- a/packages/react/src/components/actions/SignInButton/SignInButton.tsx
+++ b/packages/react/src/components/actions/SignInButton/SignInButton.tsx
@@ -33,8 +33,8 @@ export type SignInButtonProps = BaseSignInButtonProps;
  * @example Using render props
  * ```tsx
  * <SignInButton>
- *   {({ handleSignIn, isLoading }) => (
- *     <button onClick={handleSignIn} disabled={isLoading}>
+ *   {({signIn, isLoading}) => (
+ *     <button onClick={signIn} disabled={isLoading}>
  *       {isLoading ? 'Signing in...' : 'Sign In'}
  *     </button>
  *   )}
diff --git a/packages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsx b/packages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsx
index 5e59b0f3b..957033b77 100644
--- a/packages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsx
+++ b/packages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsx
@@ -35,7 +35,7 @@ export interface CommonBaseSignOutButtonProps {
   /**
    * Function to initiate the sign-out process
    */
-  signOut?: () => Promise<void>;
+  signOut: () => Promise<void>;
   /**
    * Loading state during sign-out process
    */
@@ -51,7 +51,7 @@ export type BaseSignOutButtonRenderProps = CommonBaseSignOutButtonProps;
  * Props interface of {@link BaseSignOutButton}
  */
 export interface BaseSignOutButtonProps
-  extends CommonBaseSignOutButtonProps,
+  extends Partial<CommonBaseSignOutButtonProps>,
     Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   /**
    * Render prop function that receives sign-out props, or traditional ReactNode children
@@ -65,7 +65,7 @@ export interface BaseSignOutButtonProps
  * @example Using render props
  * ```tsx
  * <BaseSignOutButton>
- *   {({ signOut, isLoading }) => (
+ *   {({signOut, isLoading}) => (
  *     <button onClick={signOut} disabled={isLoading}>
  *       {isLoading ? 'Signing out...' : 'Sign Out'}
  *     </button>
diff --git a/packages/react/src/components/actions/SignOutButton/SignOutButton.tsx b/packages/react/src/components/actions/SignOutButton/SignOutButton.tsx
index d9f476e1b..262aba9df 100644
--- a/packages/react/src/components/actions/SignOutButton/SignOutButton.tsx
+++ b/packages/react/src/components/actions/SignOutButton/SignOutButton.tsx
@@ -31,7 +31,7 @@ export type SignOutButtonProps = BaseSignOutButtonProps;
  * @example Using render props pattern
  * ```tsx
  * <SignOutButton>
- *   {({ signOut, isLoading }) => (
+ *   {({signOut, isLoading}) => (
  *     <button onClick={signOut} disabled={isLoading}>
  *       {isLoading ? 'Signing out...' : 'Sign Out'}
  *     </button>

From f0e6f098ceae9a5b9e37f24523380af7dfb9eb4c Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Mon, 9 Jun 2025 11:06:19 +0530
Subject: [PATCH 013/131] chore(recipes): fix lint issues

---
 recipes/vite-react-ts/src/components/Header.tsx | 3 +--
 recipes/vite-react-ts/src/pages/SignIn.tsx      | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/recipes/vite-react-ts/src/components/Header.tsx b/recipes/vite-react-ts/src/components/Header.tsx
index fc34f9bd3..c81f815f9 100644
--- a/recipes/vite-react-ts/src/components/Header.tsx
+++ b/recipes/vite-react-ts/src/components/Header.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import {useState, useRef, useEffect} from 'react';
-import {Link, useNavigate} from 'react-router-dom';
+import {Link} from 'react-router-dom';
 import {useApp} from '../App';
 import {Users, ChevronDown, Settings, User, LogOut, Plus, Check, Building2} from 'lucide-react';
 import {SignedOut, SignInButton, SignOutButton} from '@asgardeo/react';
@@ -13,7 +13,6 @@ export default function Header() {
   const [showOrgDropdown, setShowOrgDropdown] = useState(false);
   const userDropdownRef = useRef<HTMLDivElement>(null);
   const orgDropdownRef = useRef<HTMLDivElement>(null);
-  const navigate = useNavigate();
 
   // Close dropdowns when clicking outside
   useEffect(() => {
diff --git a/recipes/vite-react-ts/src/pages/SignIn.tsx b/recipes/vite-react-ts/src/pages/SignIn.tsx
index fe1b230a9..be00f1acd 100644
--- a/recipes/vite-react-ts/src/pages/SignIn.tsx
+++ b/recipes/vite-react-ts/src/pages/SignIn.tsx
@@ -5,7 +5,6 @@ import {Button} from '@/components/ui/button';
 import {Input} from '@/components/ui/input';
 import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
 import {Label} from '@/components/ui/label';
-import {Alert, AlertDescription} from '@/components/ui/alert';
 import {Users, Eye, EyeOff} from 'lucide-react';
 import {useAsgardeo} from '@asgardeo/react';
 

From c56bb3c1af10c4a1807b417ba587556acbcf7edc Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Mon, 9 Jun 2025 11:07:35 +0530
Subject: [PATCH 014/131] chore(javascript): rename `DataLayer` to
 `StorageManager`

---
 packages/browser/src/__legacy__/client.ts     |   4 +-
 .../__legacy__/clients/main-thread-client.ts  |   4 +-
 .../helpers/authentication-helper.ts          |  26 +-
 .../src/__legacy__/helpers/spa-helper.ts      |  17 +-
 .../browser/src/__legacy__/models/client.ts   |   4 +-
 .../data/data-layer.ts => StorageManager.ts}  |  14 +-
 packages/javascript/src/__legacy__/client.ts  |  26 +-
 .../__legacy__/core/authentication-core.ts    |  66 +-
 .../javascript/src/__legacy__/data/index.ts   |  19 -
 .../helpers/authentication-helper.ts          |  24 +-
 packages/javascript/src/index.ts              |   3 +-
 packages/node/src/__legacy__/client.ts        |   4 +-
 .../src/__legacy__/core/authentication.ts     |  18 +-
 packages/nuxt/package.json                    |   2 +-
 .../runtime/composables/asgardeo/useAuth.ts   |   4 +-
 packages/nuxt/src/runtime/server/handler.ts   |   4 +-
 packages/nuxt/src/runtime/types.ts            |   4 +-
 pnpm-lock.yaml                                | 740 +++++++++++++-----
 18 files changed, 676 insertions(+), 307 deletions(-)
 rename packages/javascript/src/{__legacy__/data/data-layer.ts => StorageManager.ts} (96%)
 delete mode 100644 packages/javascript/src/__legacy__/data/index.ts

diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
index 5f524d87b..409ecbd39 100755
--- a/packages/browser/src/__legacy__/client.ts
+++ b/packages/browser/src/__legacy__/client.ts
@@ -23,7 +23,7 @@ import {
   BasicUserInfo,
   IsomorphicCrypto,
   CustomGrantConfig,
-  DataLayer,
+  StorageManager,
   IdTokenPayload,
   FetchResponse,
   OIDCEndpoints,
@@ -904,7 +904,7 @@ export class AsgardeoSPAClient {
    *
    * @preserve
    */
-  public async getDataLayer(): Promise<DataLayer<MainThreadClientConfig>> {
+  public async getDataLayer(): Promise<StorageManager<MainThreadClientConfig>> {
     await this._validateMethod();
 
     if (this._storage && [(BrowserStorage.WebWorker, BrowserStorage.BrowserMemory)].includes(this._storage)) {
diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index 7e746aec3..32abb2045 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -21,7 +21,7 @@ import {
   AuthClientConfig,
   BasicUserInfo,
   IsomorphicCrypto,
-  DataLayer,
+  StorageManager,
   IdTokenPayload,
   FetchResponse,
   ExtendedAuthorizeRequestUrlParams,
@@ -393,7 +393,7 @@ export const MainThreadClient = async (
     return _authenticationHelper.getAccessToken();
   };
 
-  const getDataLayer = async (): Promise<DataLayer<MainThreadClientConfig>> => {
+  const getDataLayer = async (): Promise<StorageManager<MainThreadClientConfig>> => {
     return _authenticationHelper.getDataLayer();
   };
 
diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
index ce4db69c5..2fac47b7b 100644
--- a/packages/browser/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -23,7 +23,7 @@ import {
   BasicUserInfo,
   IsomorphicCrypto,
   CustomGrantConfig,
-  DataLayer,
+  StorageManager,
   IdTokenPayload,
   FetchResponse,
   ExtendedAuthorizeRequestUrlParams,
@@ -61,14 +61,14 @@ import {SPAUtils} from '../utils';
 
 export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerClientConfig> {
   protected _authenticationClient: AsgardeoAuthClient<T>;
-  protected _dataLayer: DataLayer<T>;
+  protected _storageManager: StorageManager<T>;
   protected _spaHelper: SPAHelper<T>;
   protected _instanceID: number;
   protected _isTokenRefreshing: boolean;
 
   public constructor(authClient: AsgardeoAuthClient<T>, spaHelper: SPAHelper<T>) {
     this._authenticationClient = authClient;
-    this._dataLayer = this._authenticationClient.getDataLayer();
+    this._storageManager = this._authenticationClient.getDataLayer();
     this._spaHelper = spaHelper;
     this._instanceID = this._authenticationClient.getInstanceID();
     this._isTokenRefreshing = false;
@@ -112,7 +112,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
       useDefaultEndpoint = false;
 
       for (const baseUrl of [
-        ...((await this._dataLayer.getConfigData())?.resourceServerURLs ?? []),
+        ...((await this._storageManager.getConfigData())?.resourceServerURLs ?? []),
         (config as any).baseUrl,
       ]) {
         if (baseUrl && config.tokenEndpoint?.startsWith(baseUrl)) {
@@ -122,7 +122,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
       }
     }
     if (config.shouldReplayAfterRefresh) {
-      this._dataLayer.setTemporaryDataParameter(CUSTOM_GRANT_CONFIG, JSON.stringify(config));
+      this._storageManager.setTemporaryDataParameter(CUSTOM_GRANT_CONFIG, JSON.stringify(config));
     }
     if (useDefaultEndpoint || matches) {
       return this._authenticationClient
@@ -157,7 +157,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
   }
 
   public async getCustomGrantConfigData(): Promise<AuthClientConfig<CustomGrantConfig> | null> {
-    const configString = await this._dataLayer.getTemporaryDataParameter(CUSTOM_GRANT_CONFIG);
+    const configString = await this._storageManager.getTemporaryDataParameter(CUSTOM_GRANT_CONFIG);
 
     if (configString) {
       return JSON.parse(configString as string);
@@ -225,7 +225,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     enableRetrievingSignOutURLFromSession?: (config: SPACustomGrantConfig) => void,
   ): Promise<HttpResponse> {
     let matches = false;
-    const config = await this._dataLayer.getConfigData();
+    const config = await this._storageManager.getConfigData();
 
     for (const baseUrl of [...((await config?.resourceServerURLs) ?? []), (config as any).baseUrl]) {
       if (baseUrl && requestConfig?.url?.startsWith(baseUrl)) {
@@ -336,7 +336,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     httpFinishCallback?: () => void,
   ): Promise<HttpResponse[] | undefined> {
     let matches = true;
-    const config = await this._dataLayer.getConfigData();
+    const config = await this._storageManager.getConfigData();
 
     for (const requestConfig of requestConfigs) {
       let urlMatches = false;
@@ -454,7 +454,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
       params: Record<string, unknown>;
     },
   ): Promise<BasicUserInfo> {
-    const config = await this._dataLayer.getConfigData();
+    const config = await this._storageManager.getConfigData();
 
     if (config.storage === BrowserStorage.BrowserMemory && config.enablePKCE && sessionState) {
       const pkce = SPAUtils.getPKCE(extractPkceStorageKeyFromState(sessionState));
@@ -587,7 +587,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     checkSession: () => Promise<void>,
     tryRetrievingUserInfo?: () => Promise<BasicUserInfo | undefined>,
   ): Promise<BasicUserInfo | undefined> {
-    const config = await this._dataLayer.getConfigData();
+    const config = await this._storageManager.getConfigData();
 
     if (await shouldStopAuthn()) {
       return Promise.resolve({
@@ -685,11 +685,11 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
   }
 
   public async getIDPAccessToken(): Promise<string> {
-    return (await this._dataLayer.getSessionData())?.access_token;
+    return (await this._storageManager.getSessionData())?.access_token;
   }
 
-  public getDataLayer(): DataLayer<T> {
-    return this._dataLayer;
+  public getDataLayer(): StorageManager<T> {
+    return this._storageManager;
   }
 
   public async isAuthenticated(): Promise<boolean> {
diff --git a/packages/browser/src/__legacy__/helpers/spa-helper.ts b/packages/browser/src/__legacy__/helpers/spa-helper.ts
index 33cc0ac1e..8a5b61c8b 100644
--- a/packages/browser/src/__legacy__/helpers/spa-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/spa-helper.ts
@@ -16,29 +16,30 @@
  * under the License.
  */
 
-import {AsgardeoAuthClient, DataLayer, TokenConstants} from '@asgardeo/javascript';
+import {AsgardeoAuthClient, StorageManager, TokenConstants} from '@asgardeo/javascript';
 
 import {AuthenticationHelper} from '../helpers/authentication-helper';
 import {MainThreadClientConfig, WebWorkerClientConfig} from '../models/client-config';
 
 export class SPAHelper<T extends MainThreadClientConfig | WebWorkerClientConfig> {
   private _authenticationClient: AsgardeoAuthClient<T>;
-  private _dataLayer: DataLayer<T>;
+  private _storageManager: StorageManager<T>;
+
   public constructor(authClient: AsgardeoAuthClient<T>) {
     this._authenticationClient = authClient;
-    this._dataLayer = this._authenticationClient.getDataLayer();
+    this._storageManager = this._authenticationClient.getDataLayer();
   }
 
   public async refreshAccessTokenAutomatically(
     authenticationHelper: AuthenticationHelper<MainThreadClientConfig | WebWorkerClientConfig>,
   ): Promise<void> {
-    const shouldRefreshAutomatically: boolean = (await this._dataLayer.getConfigData())?.periodicTokenRefresh ?? false;
+    const shouldRefreshAutomatically: boolean = (await this._storageManager.getConfigData())?.periodicTokenRefresh ?? false;
 
     if (!shouldRefreshAutomatically) {
       return;
     }
 
-    const sessionData = await this._dataLayer.getSessionData();
+    const sessionData = await this._storageManager.getSessionData();
     if (sessionData.refresh_token) {
       // Refresh 10 seconds before the expiry time
       const expiryTime = parseInt(sessionData.expires_in);
@@ -48,7 +49,7 @@ export class SPAHelper<T extends MainThreadClientConfig | WebWorkerClientConfig>
         await authenticationHelper.refreshAccessToken();
       }, time * 1000);
 
-      await this._dataLayer.setTemporaryDataParameter(
+      await this._storageManager.setTemporaryDataParameter(
         TokenConstants.Storage.StorageKeys.REFRESH_TOKEN_TIMER,
         JSON.stringify(timer),
       );
@@ -56,9 +57,9 @@ export class SPAHelper<T extends MainThreadClientConfig | WebWorkerClientConfig>
   }
 
   public async getRefreshTimeoutTimer(): Promise<number> {
-    if (await this._dataLayer.getTemporaryDataParameter(TokenConstants.Storage.StorageKeys.REFRESH_TOKEN_TIMER)) {
+    if (await this._storageManager.getTemporaryDataParameter(TokenConstants.Storage.StorageKeys.REFRESH_TOKEN_TIMER)) {
       return JSON.parse(
-        (await this._dataLayer.getTemporaryDataParameter(
+        (await this._storageManager.getTemporaryDataParameter(
           TokenConstants.Storage.StorageKeys.REFRESH_TOKEN_TIMER,
         )) as string,
       );
diff --git a/packages/browser/src/__legacy__/models/client.ts b/packages/browser/src/__legacy__/models/client.ts
index 286ac78be..5f9d2bea7 100755
--- a/packages/browser/src/__legacy__/models/client.ts
+++ b/packages/browser/src/__legacy__/models/client.ts
@@ -21,7 +21,7 @@ import {
   BasicUserInfo,
   IsomorphicCrypto,
   CustomGrantConfig,
-  DataLayer,
+  StorageManager,
   IdTokenPayload,
   FetchResponse,
   OIDCEndpoints,
@@ -66,7 +66,7 @@ export interface MainThreadClientInterface {
   getIDToken(): Promise<string>;
   getOIDCServiceEndpoints(): Promise<OIDCEndpoints>;
   getAccessToken(): Promise<string>;
-  getDataLayer(): Promise<DataLayer<MainThreadClientConfig>>;
+  getDataLayer(): Promise<StorageManager<MainThreadClientConfig>>;
   isAuthenticated(): Promise<boolean>;
   updateConfig(config: Partial<AuthClientConfig<MainThreadClientConfig>>): Promise<void>;
   trySignInSilently(
diff --git a/packages/javascript/src/__legacy__/data/data-layer.ts b/packages/javascript/src/StorageManager.ts
similarity index 96%
rename from packages/javascript/src/__legacy__/data/data-layer.ts
rename to packages/javascript/src/StorageManager.ts
index 6b314ced2..e7a52f566 100644
--- a/packages/javascript/src/__legacy__/data/data-layer.ts
+++ b/packages/javascript/src/StorageManager.ts
@@ -16,17 +16,17 @@
  * under the License.
  */
 
-import {Stores} from '../../models/store';
-import {Storage} from '../../models/store';
-import {AuthClientConfig, SessionData} from '../models';
-import {TemporaryStore, TemporaryStoreValue} from '../../models/store';
-import {OIDCDiscoveryApiResponse} from '../../models/oidc-discovery';
+import {Stores} from './models/store';
+import {Storage} from './models/store';
+import {AuthClientConfig, SessionData} from './__legacy__/models';
+import {TemporaryStore, TemporaryStoreValue} from './models/store';
+import {OIDCDiscoveryApiResponse} from './models/oidc-discovery';
 
 type PartialData<T> = Partial<AuthClientConfig<T> | OIDCDiscoveryApiResponse | SessionData | TemporaryStore>;
 
 export const ASGARDEO_SESSION_ACTIVE: string = 'asgardeo-session-active';
 
-export class DataLayer<T> {
+class StorageManager<T> {
   protected _id: string;
   protected _store: Storage;
   public constructor(instanceID: string, store: Storage) {
@@ -227,3 +227,5 @@ export class DataLayer<T> {
     await this.removeValue(this._resolveKey(Stores.SessionData, userID), key);
   }
 }
+
+export default StorageManager;
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 4d38f9c77..8c3c7b898 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -17,7 +17,7 @@
  */
 
 import {AuthenticationCore} from './core';
-import {DataLayer} from './data';
+import StorageManager from '../StorageManager';
 import {AuthClientConfig, BasicUserInfo, CustomGrantConfig, FetchResponse} from './models';
 import {ExtendedAuthorizeRequestUrlParams} from '../models/oauth-request';
 import {Crypto} from '../models/crypto';
@@ -46,7 +46,7 @@ const DefaultConfig: Partial<AuthClientConfig<unknown>> = {
  * This class provides the necessary methods needed to implement authentication.
  */
 export class AsgardeoAuthClient<T> {
-  private _dataLayer!: DataLayer<T>;
+  private _storageManager!: StorageManager<T>;
   private _authenticationCore!: AuthenticationCore<T>;
 
   private static _instanceID: number;
@@ -107,15 +107,15 @@ export class AsgardeoAuthClient<T> {
     }
 
     if (!clientId) {
-      this._dataLayer = new DataLayer<T>(`instance_${AsgardeoAuthClient._instanceID}`, store);
+      this._storageManager = new StorageManager<T>(`instance_${AsgardeoAuthClient._instanceID}`, store);
     } else {
-      this._dataLayer = new DataLayer<T>(`instance_${AsgardeoAuthClient._instanceID}-${clientId}`, store);
+      this._storageManager = new StorageManager<T>(`instance_${AsgardeoAuthClient._instanceID}-${clientId}`, store);
     }
 
-    this._authenticationCore = new AuthenticationCore(this._dataLayer, cryptoUtils);
-    AsgardeoAuthClient._authenticationCore = new AuthenticationCore(this._dataLayer, cryptoUtils);
+    this._authenticationCore = new AuthenticationCore(this._storageManager, cryptoUtils);
+    AsgardeoAuthClient._authenticationCore = new AuthenticationCore(this._storageManager, cryptoUtils);
 
-    await this._dataLayer.setConfigData({
+    await this._storageManager.setConfigData({
       ...DefaultConfig,
       ...config,
       scope: [
@@ -126,9 +126,9 @@ export class AsgardeoAuthClient<T> {
   }
 
   /**
-   * This method returns the `DataLayer` object that allows you to access authentication data.
+   * This method returns the `StorageManager` object that allows you to access authentication data.
    *
-   * @returns - The `DataLayer` object.
+   * @returns - The `StorageManager` object.
    *
    * @example
    * ```
@@ -139,8 +139,8 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public getDataLayer(): DataLayer<T> {
-    return this._dataLayer;
+  public getDataLayer(): StorageManager<T> {
+    return this._storageManager;
   }
 
   /**
@@ -188,7 +188,7 @@ export class AsgardeoAuthClient<T> {
     delete authRequestConfig?.forceInit;
 
     if (
-      await this._dataLayer.getTemporaryDataParameter(
+      await this._storageManager.getTemporaryDataParameter(
         OIDCDiscoveryConstants.Storage.StorageKeys.OPENID_PROVIDER_CONFIG_INITIATED,
       )
     ) {
@@ -235,7 +235,7 @@ export class AsgardeoAuthClient<T> {
     },
   ): Promise<TokenResponse> {
     if (
-      await this._dataLayer.getTemporaryDataParameter(
+      await this._storageManager.getTemporaryDataParameter(
         OIDCDiscoveryConstants.Storage.StorageKeys.OPENID_PROVIDER_CONFIG_INITIATED,
       )
     ) {
diff --git a/packages/javascript/src/__legacy__/core/authentication-core.ts b/packages/javascript/src/__legacy__/core/authentication-core.ts
index 4f988ab8a..54fa48a83 100644
--- a/packages/javascript/src/__legacy__/core/authentication-core.ts
+++ b/packages/javascript/src/__legacy__/core/authentication-core.ts
@@ -17,7 +17,7 @@
  */
 import extractPkceStorageKeyFromState from '../../utils/extractPkceStorageKeyFromState';
 import generateStateParamForRequestCorrelation from '../../utils/generateStateParamForRequestCorrelation';
-import {DataLayer} from '../data';
+import StorageManager from '../../StorageManager';
 import {AsgardeoAuthException} from '../exception';
 import {AuthenticationHelper} from '../helpers';
 import {
@@ -45,24 +45,24 @@ import getAuthorizeRequestUrlParams from '../../utils/getAuthorizeRequestUrlPara
 import PKCEConstants from '../../constants/PKCEConstants';
 
 export class AuthenticationCore<T> {
-  private _dataLayer: DataLayer<T>;
+  private _storageManager: StorageManager<T>;
   private _config: () => Promise<AuthClientConfig>;
   private _oidcProviderMetaData: () => Promise<OIDCDiscoveryApiResponse>;
   private _authenticationHelper: AuthenticationHelper<T>;
   private _cryptoUtils: Crypto;
   private _cryptoHelper: IsomorphicCrypto;
 
-  public constructor(dataLayer: DataLayer<T>, cryptoUtils: Crypto) {
+  public constructor(storageManager: StorageManager<T>, cryptoUtils: Crypto) {
     this._cryptoUtils = cryptoUtils;
     this._cryptoHelper = new IsomorphicCrypto(cryptoUtils);
-    this._authenticationHelper = new AuthenticationHelper(dataLayer, this._cryptoHelper);
-    this._dataLayer = dataLayer;
-    this._config = async () => await this._dataLayer.getConfigData();
-    this._oidcProviderMetaData = async () => await this._dataLayer.getOIDCProviderMetaData();
+    this._authenticationHelper = new AuthenticationHelper(storageManager, this._cryptoHelper);
+    this._storageManager = storageManager;
+    this._config = async () => await this._storageManager.getConfigData();
+    this._oidcProviderMetaData = async () => await this._storageManager.getOIDCProviderMetaData();
   }
 
   public async getAuthorizationURL(config?: AuthorizeRequestUrlParams, userID?: string): Promise<string> {
-    const authorizeEndpoint: string = (await this._dataLayer.getOIDCProviderMetaDataParameter(
+    const authorizeEndpoint: string = (await this._storageManager.getOIDCProviderMetaDataParameter(
       OIDCDiscoveryConstants.Storage.StorageKeys.Endpoints.AUTHORIZATION as keyof OIDCDiscoveryApiResponse,
     )) as string;
 
@@ -77,7 +77,7 @@ export class AuthenticationCore<T> {
 
     const authorizeRequest: URL = new URL(authorizeEndpoint);
     const configData: StrictAuthClientConfig = await this._config();
-    const tempStore: TemporaryStore = await this._dataLayer.getTemporaryData(userID);
+    const tempStore: TemporaryStore = await this._storageManager.getTemporaryData(userID);
     const pkceKey: string = await generatePkceStorageKey(tempStore);
 
     let codeVerifier: string | undefined;
@@ -86,7 +86,7 @@ export class AuthenticationCore<T> {
     if (configData.enablePKCE) {
       codeVerifier = this._cryptoHelper?.getCodeVerifier();
       codeChallenge = this._cryptoHelper?.getCodeChallenge(codeVerifier);
-      await this._dataLayer.setTemporaryDataParameter(pkceKey, codeVerifier, userID);
+      await this._storageManager.setTemporaryDataParameter(pkceKey, codeVerifier, userID);
     }
 
     const authorizeRequestParams: Map<string, string> = getAuthorizeRequestUrlParams(
@@ -132,7 +132,7 @@ export class AuthenticationCore<T> {
     }
 
     sessionState &&
-      (await this._dataLayer.setSessionDataParameter(
+      (await this._storageManager.setSessionDataParameter(
         OIDCRequestConstants.Params.SESSION_STATE as keyof SessionData,
         sessionState,
         userID,
@@ -162,10 +162,10 @@ export class AuthenticationCore<T> {
     if (configData.enablePKCE) {
       body.set(
         'code_verifier',
-        `${await this._dataLayer.getTemporaryDataParameter(extractPkceStorageKeyFromState(state), userID)}`,
+        `${await this._storageManager.getTemporaryDataParameter(extractPkceStorageKeyFromState(state), userID)}`,
       );
 
-      await this._dataLayer.removeTemporaryDataParameter(extractPkceStorageKeyFromState(state), userID);
+      await this._storageManager.removeTemporaryDataParameter(extractPkceStorageKeyFromState(state), userID);
     }
 
     let tokenResponse: Response;
@@ -202,7 +202,7 @@ export class AuthenticationCore<T> {
   public async refreshAccessToken(userID?: string): Promise<TokenResponse> {
     const tokenEndpoint: string | undefined = (await this._oidcProviderMetaData()).token_endpoint;
     const configData: StrictAuthClientConfig = await this._config();
-    const sessionData: SessionData = await this._dataLayer.getSessionData(userID);
+    const sessionData: SessionData = await this._storageManager.getSessionData(userID);
 
     if (!sessionData.refresh_token) {
       throw new AsgardeoAuthException(
@@ -279,7 +279,7 @@ export class AuthenticationCore<T> {
     const body: string[] = [];
 
     body.push(`client_id=${configData.clientID}`);
-    body.push(`token=${(await this._dataLayer.getSessionData(userID)).access_token}`);
+    body.push(`token=${(await this._storageManager.getSessionData(userID)).access_token}`);
     body.push('token_type_hint=access_token');
 
     if (configData.clientSecret && configData.clientSecret.trim().length > 0) {
@@ -362,7 +362,7 @@ export class AuthenticationCore<T> {
     if (customGrantParams.attachToken) {
       requestHeaders = {
         ...requestHeaders,
-        Authorization: `Bearer ${(await this._dataLayer.getSessionData(userID)).access_token}`,
+        Authorization: `Bearer ${(await this._storageManager.getSessionData(userID)).access_token}`,
       };
     }
 
@@ -401,7 +401,7 @@ export class AuthenticationCore<T> {
   }
 
   public async getBasicUserInfo(userID?: string): Promise<BasicUserInfo> {
-    const sessionData: SessionData = await this._dataLayer.getSessionData(userID);
+    const sessionData: SessionData = await this._storageManager.getSessionData(userID);
     const authenticatedUser: AuthenticatedUserInfo = this._authenticationHelper.getAuthenticatedUserInfo(
       sessionData?.id_token,
     );
@@ -423,7 +423,7 @@ export class AuthenticationCore<T> {
   }
 
   public async getDecodedIDToken(userID?: string): Promise<IdTokenPayload> {
-    const idToken: string = (await this._dataLayer.getSessionData(userID)).id_token;
+    const idToken: string = (await this._storageManager.getSessionData(userID)).id_token;
     const payload: IdTokenPayload = this._cryptoHelper.decodeIDToken(idToken);
 
     return payload;
@@ -434,7 +434,7 @@ export class AuthenticationCore<T> {
   }
 
   public async getIDToken(userID?: string): Promise<string> {
-    return (await this._dataLayer.getSessionData(userID)).id_token;
+    return (await this._storageManager.getSessionData(userID)).id_token;
   }
 
   public async getOIDCProviderMetaData(forceInit: boolean): Promise<void> {
@@ -442,7 +442,7 @@ export class AuthenticationCore<T> {
 
     if (
       !forceInit &&
-      (await this._dataLayer.getTemporaryDataParameter(
+      (await this._storageManager.getTemporaryDataParameter(
         OIDCDiscoveryConstants.Storage.StorageKeys.OPENID_PROVIDER_CONFIG_INITIATED,
       ))
     ) {
@@ -467,10 +467,10 @@ export class AuthenticationCore<T> {
         );
       }
 
-      await this._dataLayer.setOIDCProviderMetaData(
+      await this._storageManager.setOIDCProviderMetaData(
         await this._authenticationHelper.resolveEndpoints(await response.json()),
       );
-      await this._dataLayer.setTemporaryDataParameter(
+      await this._storageManager.setTemporaryDataParameter(
         OIDCDiscoveryConstants.Storage.StorageKeys.OPENID_PROVIDER_CONFIG_INITIATED,
         true,
       );
@@ -478,7 +478,7 @@ export class AuthenticationCore<T> {
       return Promise.resolve();
     } else if ((configData as any).baseUrl) {
       try {
-        await this._dataLayer.setOIDCProviderMetaData(await this._authenticationHelper.resolveEndpointsByBaseURL());
+        await this._storageManager.setOIDCProviderMetaData(await this._authenticationHelper.resolveEndpointsByBaseURL());
       } catch (error: any) {
         throw new AsgardeoAuthException(
           'JS-AUTH_CORE-GOPMD-IV02',
@@ -486,16 +486,16 @@ export class AuthenticationCore<T> {
           error ?? 'Resolving endpoints by base url failed.',
         );
       }
-      await this._dataLayer.setTemporaryDataParameter(
+      await this._storageManager.setTemporaryDataParameter(
         OIDCDiscoveryConstants.Storage.StorageKeys.OPENID_PROVIDER_CONFIG_INITIATED,
         true,
       );
 
       return Promise.resolve();
     } else {
-      await this._dataLayer.setOIDCProviderMetaData(await this._authenticationHelper.resolveEndpointsExplicitly());
+      await this._storageManager.setOIDCProviderMetaData(await this._authenticationHelper.resolveEndpointsExplicitly());
 
-      await this._dataLayer.setTemporaryDataParameter(
+      await this._storageManager.setTemporaryDataParameter(
         OIDCDiscoveryConstants.Storage.StorageKeys.OPENID_PROVIDER_CONFIG_INITIATED,
         true,
       );
@@ -550,7 +550,7 @@ export class AuthenticationCore<T> {
     queryParams.set('post_logout_redirect_uri', callbackURL);
 
     if (configData.sendIdTokenInLogoutRequest) {
-      const idToken: string = (await this._dataLayer.getSessionData(userID))?.id_token;
+      const idToken: string = (await this._storageManager.getSessionData(userID))?.id_token;
 
       if (!idToken || idToken.trim().length === 0) {
         throw new AsgardeoAuthException(
@@ -574,7 +574,7 @@ export class AuthenticationCore<T> {
   }
 
   public async getAccessToken(userID?: string): Promise<string> {
-    return (await this._dataLayer.getSessionData(userID))?.access_token;
+    return (await this._storageManager.getSessionData(userID))?.access_token;
   }
 
   /**
@@ -584,7 +584,7 @@ export class AuthenticationCore<T> {
    * @returns Created at timestamp of the token response in milliseconds.
    */
   public async getCreatedAt(userID?: string): Promise<number> {
-    return (await this._dataLayer.getSessionData(userID))?.created_at;
+    return (await this._storageManager.getSessionData(userID))?.created_at;
   }
 
   /**
@@ -594,7 +594,7 @@ export class AuthenticationCore<T> {
    * @returns Expires in timestamp of the token response in seconds.
    */
   public async getExpiresIn(userID?: string): Promise<string> {
-    return (await this._dataLayer.getSessionData(userID))?.expires_in;
+    return (await this._storageManager.getSessionData(userID))?.expires_in;
   }
 
   public async isAuthenticated(userID?: string): Promise<boolean> {
@@ -622,15 +622,15 @@ export class AuthenticationCore<T> {
   }
 
   public async getPKCECode(state: string, userID?: string): Promise<string> {
-    return (await this._dataLayer.getTemporaryDataParameter(extractPkceStorageKeyFromState(state), userID)) as string;
+    return (await this._storageManager.getTemporaryDataParameter(extractPkceStorageKeyFromState(state), userID)) as string;
   }
 
   public async setPKCECode(pkce: string, state: string, userID?: string): Promise<void> {
-    return await this._dataLayer.setTemporaryDataParameter(extractPkceStorageKeyFromState(state), pkce, userID);
+    return await this._storageManager.setTemporaryDataParameter(extractPkceStorageKeyFromState(state), pkce, userID);
   }
 
   public async updateConfig(config: Partial<AuthClientConfig<T>>): Promise<void> {
-    await this._dataLayer.setConfigData(config);
+    await this._storageManager.setConfigData(config);
     await this.getOIDCProviderMetaData(true);
   }
 }
diff --git a/packages/javascript/src/__legacy__/data/index.ts b/packages/javascript/src/__legacy__/data/index.ts
deleted file mode 100644
index a91c45dc9..000000000
--- a/packages/javascript/src/__legacy__/data/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2020, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-export * from "./data-layer";
diff --git a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
index 04ae908e2..b74ea662b 100644
--- a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
@@ -17,7 +17,7 @@
  */
 
 import {IsomorphicCrypto} from '../../IsomorphicCrypto';
-import {DataLayer} from '../data';
+import StorageManager from '../../StorageManager';
 import {AsgardeoAuthException} from '../exception';
 import {AuthClientConfig, AuthenticatedUserInfo, SessionData, StrictAuthClientConfig} from '../models';
 import {JWKInterface} from '../../models/crypto';
@@ -32,15 +32,15 @@ import TokenExchangeConstants from '../../constants/TokenExchangeConstants';
 import {OIDCDiscoveryEndpointsApiResponse, OIDCDiscoveryApiResponse} from '../../models/oidc-discovery';
 
 export class AuthenticationHelper<T> {
-  private _dataLayer: DataLayer<T>;
+  private _storageManager: StorageManager<T>;
   private _config: () => Promise<AuthClientConfig>;
   private _oidcProviderMetaData: () => Promise<OIDCDiscoveryApiResponse>;
   private _cryptoHelper: IsomorphicCrypto;
 
-  public constructor(dataLayer: DataLayer<T>, cryptoHelper: IsomorphicCrypto) {
-    this._dataLayer = dataLayer;
-    this._config = async () => await this._dataLayer.getConfigData();
-    this._oidcProviderMetaData = async () => await this._dataLayer.getOIDCProviderMetaData();
+  public constructor(storageManager: StorageManager<T>, cryptoHelper: IsomorphicCrypto) {
+    this._storageManager = storageManager;
+    this._config = async () => await this._storageManager.getConfigData();
+    this._oidcProviderMetaData = async () => await this._storageManager.getOIDCProviderMetaData();
     this._cryptoHelper = cryptoHelper;
   }
 
@@ -150,7 +150,7 @@ export class AuthenticationHelper<T> {
   }
 
   public async validateIdToken(idToken: string): Promise<boolean> {
-    const jwksEndpoint: string | undefined = (await this._dataLayer.getOIDCProviderMetaData()).jwks_uri;
+    const jwksEndpoint: string | undefined = (await this._storageManager.getOIDCProviderMetaData()).jwks_uri;
     const configData: StrictAuthClientConfig = await this._config();
 
     if (!jwksEndpoint || jwksEndpoint.trim().length === 0) {
@@ -224,7 +224,7 @@ export class AuthenticationHelper<T> {
   public async replaceCustomGrantTemplateTags(text: string, userID?: string): Promise<string> {
     let scope: string = ScopeConstants.OPENID;
     const configData: StrictAuthClientConfig = await this._config();
-    const sessionData: SessionData = await this._dataLayer.getSessionData(userID);
+    const sessionData: SessionData = await this._storageManager.getSessionData(userID);
 
     if (configData.scope && configData.scope.length > 0) {
       if (!configData.scope.includes(ScopeConstants.OPENID)) {
@@ -245,8 +245,8 @@ export class AuthenticationHelper<T> {
   }
 
   public async clearUserSessionData(userID?: string): Promise<void> {
-    await this._dataLayer.removeTemporaryData(userID);
-    await this._dataLayer.removeSessionData(userID);
+    await this._storageManager.removeTemporaryData(userID);
+    await this._storageManager.removeSessionData(userID);
   }
 
   public async handleTokenResponse(response: Response, userID?: string): Promise<TokenResponse> {
@@ -267,7 +267,7 @@ export class AuthenticationHelper<T> {
 
     if (shouldValidateIdToken) {
       return this.validateIdToken(parsedResponse.id_token).then(async () => {
-        await this._dataLayer.setSessionData(parsedResponse, userID);
+        await this._storageManager.setSessionData(parsedResponse, userID);
 
         const tokenResponse: TokenResponse = {
           accessToken: parsedResponse.access_token,
@@ -292,7 +292,7 @@ export class AuthenticationHelper<T> {
         tokenType: parsedResponse.token_type,
       };
 
-      await this._dataLayer.setSessionData(parsedResponse, userID);
+      await this._storageManager.setSessionData(parsedResponse, userID);
 
       return Promise.resolve(tokenResponse);
     }
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 91e385226..2c44df7f3 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -21,7 +21,6 @@ export * from './__legacy__/models';
 export * from './models/oauth-response';
 export * from './IsomorphicCrypto';
 export * from './__legacy__/exception';
-export * from './__legacy__/data';
 
 export {default as getUserInfo} from './api/getUserInfo';
 
@@ -55,3 +54,5 @@ export {ThemeColors, ThemeConfig, Theme, ThemeMode} from './theme/types';
 export {default as extractUserClaimsFromIdToken} from './utils/extractUserClaimsFromIdToken';
 export {default as extractPkceStorageKeyFromState} from './utils/extractPkceStorageKeyFromState';
 export {default as removeTrailingSlash} from './utils/removeTrailingSlash';
+
+export {default as StorageManager} from './StorageManager';
diff --git a/packages/node/src/__legacy__/client.ts b/packages/node/src/__legacy__/client.ts
index 083871983..040e7d7b3 100644
--- a/packages/node/src/__legacy__/client.ts
+++ b/packages/node/src/__legacy__/client.ts
@@ -20,7 +20,7 @@ import {
   AuthClientConfig,
   BasicUserInfo,
   CustomGrantConfig,
-  DataLayer,
+  StorageManager,
   IdTokenPayload,
   FetchResponse,
   OIDCEndpoints,
@@ -411,7 +411,7 @@ export class AsgardeoNodeClient<T> {
     return AsgardeoNodeClient.didSignOutFail(signOutRedirectURL);
   }
 
-  public async getDataLayer(): Promise<DataLayer<T>> {
+  public async getDataLayer(): Promise<StorageManager<T>> {
     return this._authCore.getDataLayer();
   }
 }
diff --git a/packages/node/src/__legacy__/core/authentication.ts b/packages/node/src/__legacy__/core/authentication.ts
index 06da3eeb2..de07e0d80 100644
--- a/packages/node/src/__legacy__/core/authentication.ts
+++ b/packages/node/src/__legacy__/core/authentication.ts
@@ -23,7 +23,7 @@ import {
   BasicUserInfo,
   Crypto,
   CustomGrantConfig,
-  DataLayer,
+  StorageManager,
   IdTokenPayload,
   FetchResponse,
   OIDCEndpoints,
@@ -40,7 +40,7 @@ export class AsgardeoNodeCore<T> {
   private _auth: AsgardeoAuthClient<T>;
   private _cryptoUtils: Crypto;
   private _store: Storage;
-  private _dataLayer: DataLayer<T>;
+  private _storageManager: StorageManager<T>;
 
   constructor(config: AuthClientConfig<T>, store?: Storage) {
     //Initialize the default memory cache store if an external store is not passed.
@@ -52,7 +52,7 @@ export class AsgardeoNodeCore<T> {
     this._cryptoUtils = new NodeCryptoUtils();
     this._auth = new AsgardeoAuthClient();
     this._auth.initialize(config, this._store, this._cryptoUtils);
-    this._dataLayer = this._auth.getDataLayer();
+    this._storageManager = this._auth.getDataLayer();
     Logger.debug('Initialized AsgardeoAuthClient successfully');
   }
 
@@ -75,7 +75,7 @@ export class AsgardeoNodeCore<T> {
     }
 
     if (await this.isAuthenticated(userID)) {
-      const sessionData: SessionData = await this._dataLayer.getSessionData(userID);
+      const sessionData: SessionData = await this._storageManager.getSessionData(userID);
 
       return Promise.resolve({
         accessToken: sessionData.access_token,
@@ -178,7 +178,7 @@ export class AsgardeoNodeCore<T> {
         return Promise.resolve(false);
       }
 
-      if (await SessionUtils.validateSession(await this._dataLayer.getSessionData(userId))) {
+      if (await SessionUtils.validateSession(await this._storageManager.getSessionData(userId))) {
         return Promise.resolve(true);
       }
 
@@ -188,8 +188,8 @@ export class AsgardeoNodeCore<T> {
         return Promise.resolve(true);
       }
 
-      this._dataLayer.removeSessionData(userId);
-      this._dataLayer.getTemporaryData(userId);
+      this._storageManager.removeSessionData(userId);
+      this._storageManager.getTemporaryData(userId);
       return Promise.resolve(false);
     } catch (error) {
       return Promise.reject(error);
@@ -248,7 +248,7 @@ export class AsgardeoNodeCore<T> {
     return AsgardeoNodeCore.isSignOutSuccessful(signOutRedirectURL);
   }
 
-  public getDataLayer(): DataLayer<T> {
-    return this._dataLayer;
+  public getDataLayer(): StorageManager<T> {
+    return this._storageManager;
   }
 }
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index a4bb27560..65d912b68 100644
--- a/packages/nuxt/package.json
+++ b/packages/nuxt/package.json
@@ -55,7 +55,7 @@
     "typecheck": "nuxt prepare && vue-tsc --noEmit"
   },
   "dependencies": {
-    "@asgardeo/auth-node": "^0.1.3",
+    "@asgardeo/node": "workspace:^",
     "@nuxt/kit": "^3.16.2",
     "defu": "^6.1.4"
   },
diff --git a/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts b/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
index c1b8a910f..dbdfa7b7e 100644
--- a/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
+++ b/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import type {BasicUserInfo, DataLayer, IdTokenPayload, OIDCEndpoints} from '@asgardeo/auth-node';
+import type {BasicUserInfo, StorageManager, IdTokenPayload, OIDCEndpoints} from '@asgardeo/node';
 import type {AuthInterface} from '../../types';
 import {navigateTo} from '#imports';
 
@@ -214,7 +214,7 @@ export const useAuth = (): AuthInterface => {
     }
   };
 
-  const getDataLayer = async (): Promise<DataLayer<any> | null> => {
+  const getDataLayer = async (): Promise<StorageManager<any> | null> => {
     try {
       const response: Response = await fetch('/api/auth/get-data-layer', {
         method: 'GET',
diff --git a/packages/nuxt/src/runtime/server/handler.ts b/packages/nuxt/src/runtime/server/handler.ts
index 9853fd101..2d7bd2327 100644
--- a/packages/nuxt/src/runtime/server/handler.ts
+++ b/packages/nuxt/src/runtime/server/handler.ts
@@ -17,7 +17,7 @@
  */
 
 import {randomUUID} from 'node:crypto';
-import {AsgardeoNodeClient, type AuthClientConfig, type DataLayer, type TokenResponse} from '@asgardeo/auth-node';
+import {AsgardeoNodeClient, type AuthClientConfig, type StorageManager, type TokenResponse} from '@asgardeo/node';
 import type {CookieSerializeOptions} from 'cookie-es';
 import {defineEventHandler, sendRedirect, setCookie, deleteCookie, getQuery, getCookie, createError, H3Event} from 'h3';
 import {getAsgardeoSdkInstance} from './services/asgardeo/index';
@@ -273,7 +273,7 @@ export const AsgardeoAuthHandler = (config: AuthClientConfig, options?: Asgardeo
       }
     } else if (action === 'get-data-layer' && method === 'GET') {
       try {
-        const dataLayer: DataLayer<any> = await authClient.getDataLayer();
+        const dataLayer: StorageManager<any> = await authClient.getDataLayer();
         return dataLayer;
       } catch (error: any) {
         throw createError({
diff --git a/packages/nuxt/src/runtime/types.ts b/packages/nuxt/src/runtime/types.ts
index e34ac84e6..40ec8c977 100644
--- a/packages/nuxt/src/runtime/types.ts
+++ b/packages/nuxt/src/runtime/types.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import type {BasicUserInfo, DataLayer, IdTokenPayload, OIDCEndpoints} from '@asgardeo/auth-node';
+import type {BasicUserInfo, StorageManager, IdTokenPayload, OIDCEndpoints} from '@asgardeo/node';
 
 export interface ModuleOptions {
   /**
@@ -60,7 +60,7 @@ export interface ModuleOptions {
 export interface AuthInterface {
   getAccessToken: () => Promise<string | null>;
   getBasicUserInfo: () => Promise<BasicUserInfo | null>;
-  getDataLayer: () => Promise<DataLayer<any> | null>;
+  getDataLayer: () => Promise<StorageManager<any> | null>;
   getDecodedIDToken: () => Promise<IdTokenPayload | null>;
   getIdToken: () => Promise<string | null>;
   getOIDCServiceEndpoints: () => Promise<OIDCEndpoints | null>;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4cfa42beb..e05416efc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,7 +49,7 @@ importers:
     devDependencies:
       vitepress:
         specifier: ^1.2.2
-        version: 1.6.3(@algolia/client-search@5.25.0)(@types/node@22.15.29)(axios@1.9.0)(fuse.js@7.1.0)(jwt-decode@4.0.0)(postcss@8.5.3)(sass@1.89.0)(search-insights@2.17.3)(terser@5.39.2)(typescript@5.8.3)
+        version: 1.6.3(@algolia/client-search@5.25.0)(@types/node@22.15.29)(axios@1.9.0)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.1)(postcss@8.5.3)(sass@1.89.0)(search-insights@2.17.3)(terser@5.39.2)(typescript@5.8.3)
 
   packages/browser:
     dependencies:
@@ -101,7 +101,7 @@ importers:
         version: 22.15.18
       '@vitest/browser':
         specifier: ^3.1.3
-        version: 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
+        version: 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
       '@wso2/eslint-plugin':
         specifier: 'catalog:'
         version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
@@ -131,7 +131,7 @@ importers:
         version: 5.7.3
       vitest:
         specifier: ^3.1.3
-        version: 3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+        version: 3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
   packages/javascript:
     dependencies:
@@ -165,7 +165,7 @@ importers:
         version: 5.7.3
       vitest:
         specifier: ^3.1.3
-        version: 3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+        version: 3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
   packages/nextjs:
     dependencies:
@@ -217,7 +217,7 @@ importers:
         version: 5.7.3
       vitest:
         specifier: ^3.1.3
-        version: 3.1.3(@types/node@22.15.29)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+        version: 3.1.3(@types/node@22.15.29)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
   packages/node:
     dependencies:
@@ -275,13 +275,13 @@ importers:
         version: 5.7.3
       vitest:
         specifier: ^3.1.3
-        version: 3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+        version: 3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
   packages/nuxt:
     dependencies:
-      '@asgardeo/auth-node':
-        specifier: ^0.1.3
-        version: 0.1.3
+      '@asgardeo/node':
+        specifier: workspace:^
+        version: link:../node
       '@nuxt/kit':
         specifier: ^3.16.2
         version: 3.17.4(magicast@0.3.5)
@@ -291,7 +291,7 @@ importers:
     devDependencies:
       '@nuxt/devtools':
         specifier: ^2.4.0
-        version: 2.4.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
+        version: 2.4.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
       '@nuxt/eslint-config':
         specifier: ^1.3.0
         version: 1.4.1(@vue/compiler-sfc@3.5.14)(eslint@8.57.0)(typescript@5.8.3)
@@ -303,7 +303,7 @@ importers:
         version: 3.17.4
       '@nuxt/test-utils':
         specifier: ^3.17.2
-        version: 3.19.0(@types/node@22.15.29)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
+        version: 3.19.0(@types/node@22.15.29)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
       '@types/node':
         specifier: latest
         version: 22.15.29
@@ -318,13 +318,13 @@ importers:
         version: 8.57.0
       nuxt:
         specifier: ^3.16.2
-        version: 3.17.4(@parcel/watcher@2.5.1)(@types/node@22.15.29)(db0@0.3.2)(eslint@8.57.0)(ioredis@5.6.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))(yaml@2.8.0)
+        version: 3.17.4(@parcel/watcher@2.5.1)(@types/node@22.15.29)(db0@0.3.2)(eslint@8.57.0)(ioredis@5.6.1)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))(yaml@2.8.0)
       typescript:
         specifier: ~5.8.3
         version: 5.8.3
       vitest:
         specifier: ^3.1.1
-        version: 3.1.3(@types/node@22.15.29)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+        version: 3.1.3(@types/node@22.15.29)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vue-tsc:
         specifier: ^2.2.8
         version: 2.2.10(typescript@5.8.3)
@@ -361,7 +361,7 @@ importers:
         version: 19.1.5
       '@vitest/browser':
         specifier: ^3.1.3
-        version: 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
+        version: 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
       '@wso2/eslint-plugin':
         specifier: 'catalog:'
         version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
@@ -391,7 +391,7 @@ importers:
         version: 5.7.3
       vitest:
         specifier: ^3.1.3
-        version: 3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+        version: 3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vitest-browser-react:
         specifier: ^0.1.1
         version: 0.1.1(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(@vitest/browser@3.1.3)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(vitest@3.1.3)
@@ -406,7 +406,7 @@ importers:
         version: 0.1.3
       '@vitejs/plugin-vue':
         specifier: ^5.0.0
-        version: 5.2.4(vite@6.3.5(@types/node@20.17.50)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.1.6))
+        version: 5.2.4(vite@6.3.5(@types/node@20.17.50)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.1.6))
       base64url:
         specifier: ^3.0.1
         version: 3.0.1
@@ -446,10 +446,10 @@ importers:
         version: 20.17.50
       '@vitest/coverage-v8':
         specifier: 3.0.8
-        version: 3.0.8(vitest@3.1.3(@types/node@20.17.50)(jiti@2.4.2)(jsdom@26.1.0)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+        version: 3.0.8(vitest@3.1.3(@types/node@20.17.50)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       '@vitest/web-worker':
         specifier: ^3.0.8
-        version: 3.1.4(vitest@3.1.3(@types/node@20.17.50)(jiti@2.4.2)(jsdom@26.1.0)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+        version: 3.1.4(vitest@3.1.3(@types/node@20.17.50)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       '@vue/eslint-config-prettier':
         specifier: ^8.0.0
         version: 8.0.0(eslint@8.57.0)(prettier@3.5.3)
@@ -500,7 +500,7 @@ importers:
         version: 5.1.6
       vitest:
         specifier: ^3.0.8
-        version: 3.1.3(@types/node@20.17.50)(jiti@2.4.2)(jsdom@26.1.0)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+        version: 3.1.3(@types/node@20.17.50)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vue-tsc:
         specifier: ^2.2.2
         version: 2.2.10(typescript@5.1.6)
@@ -547,16 +547,37 @@ importers:
       '@asgardeo/react':
         specifier: workspace:^
         version: link:../../packages/react
+      '@radix-ui/react-label':
+        specifier: ^2.1.7
+        version: 2.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.3
+        version: 1.2.3(@types/react@19.1.5)(react@19.1.0)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      lucide-react:
+        specifier: ^0.294.0
+        version: 0.294.0(react@19.1.0)
       react:
         specifier: ^19.1.0
         version: 19.1.0
       react-dom:
         specifier: ^19.1.0
         version: 19.1.0(react@19.1.0)
+      react-router-dom:
+        specifier: ^6.20.0
+        version: 6.30.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      tailwind-merge:
+        specifier: ^3.3.0
+        version: 3.3.0
     devDependencies:
-      '@eslint/js':
-        specifier: ^9.25.0
-        version: 9.27.0
+      '@tailwindcss/vite':
+        specifier: ^4.1.8
+        version: 4.1.8(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       '@types/react':
         specifier: ^19.1.2
         version: 19.1.5
@@ -565,7 +586,10 @@ importers:
         version: 19.1.5(@types/react@19.1.5)
       '@vitejs/plugin-react':
         specifier: ^4.4.1
-        version: 4.5.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+        version: 4.5.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      autoprefixer:
+        specifier: ^10.4.16
+        version: 10.4.21(postcss@8.5.3)
       eslint:
         specifier: ^9.25.0
         version: 9.28.0(jiti@2.4.2)
@@ -578,6 +602,15 @@ importers:
       globals:
         specifier: ^16.0.0
         version: 16.1.0
+      postcss:
+        specifier: ^8.4.31
+        version: 8.5.3
+      tailwindcss:
+        specifier: ^4.1.8
+        version: 4.1.8
+      tw-animate-css:
+        specifier: ^1.3.4
+        version: 1.3.4
       typescript:
         specifier: ~5.8.3
         version: 5.8.3
@@ -586,7 +619,7 @@ importers:
         version: 8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
       vite:
         specifier: ^6.3.5
-        version: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+        version: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
 packages:
 
@@ -672,15 +705,9 @@ packages:
   '@asamuzakjp/css-color@3.1.7':
     resolution: {integrity: sha512-Ok5fYhtwdyJQmU1PpEv6Si7Y+A4cYb8yNM9oiIJC9TzXPMuN9fvdonKJqcnz9TbFqV6bQ8z0giRq0iaOpGZV2g==}
 
-  '@asgardeo/auth-js@2.0.15':
-    resolution: {integrity: sha512-ciMLhrm/M//CvyMpCvaoA82S3tKvB529L+MwKKBbRZFe+d0HRPuDfruDhclWl7i07XO1+AVp9Dy1MdUDkhzR4Q==}
-
   '@asgardeo/auth-js@5.1.2':
     resolution: {integrity: sha512-fGfUorhUwUSXC/sETTlRbXJ0kMwcLKvVXCieePnxg2AVeiy1lFdRqZt1zsnr4/rd0jd/woYBE96rOAS5fVGFPw==}
 
-  '@asgardeo/auth-node@0.1.3':
-    resolution: {integrity: sha512-92mruI26puw7Cm3CgeVCBgUZ5FduAzEb/Pf7UMDsKJOQX5N0OjKzRoblYSDvGaFxs2gbU9BvqIp+UpPHoTboIQ==}
-
   '@asgardeo/auth-spa@3.2.0':
     resolution: {integrity: sha512-ptNeWyccApqpMVi9t1RYI95d0/jCS1Zs7qh9uU2c9FbTIquv2xMbJZhUCmU9Ana3IC+ouS53amxcUGZSVrh58g==}
 
@@ -2044,6 +2071,54 @@ packages:
     resolution: {integrity: sha512-aQypoot0HPSJa6gDPEPTntc1GT6QINrSbgRlRhadGW2WaYqUK3tK4Bw9SBMZXhmxd3GeAlZjVcODHgiu+THY7A==}
     engines: {node: '>=18'}
 
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-label@2.1.7':
+    resolution: {integrity: sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@remix-run/router@1.23.0':
+    resolution: {integrity: sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==}
+    engines: {node: '>=14.0.0'}
+
   '@rolldown/pluginutils@1.0.0-beta.9':
     resolution: {integrity: sha512-e9MeMtVWo186sgvFFJOPGy7/d2j2mZhLJIdVW0C/xDluuOvymEATqz6zKsP0ZmXGzQtqlyjz5sC1sYQUoJG98w==}
 
@@ -2319,6 +2394,96 @@ packages:
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
+  '@tailwindcss/node@4.1.8':
+    resolution: {integrity: sha512-OWwBsbC9BFAJelmnNcrKuf+bka2ZxCE2A4Ft53Tkg4uoiE67r/PMEYwCsourC26E+kmxfwE0hVzMdxqeW+xu7Q==}
+
+  '@tailwindcss/oxide-android-arm64@4.1.8':
+    resolution: {integrity: sha512-Fbz7qni62uKYceWYvUjRqhGfZKwhZDQhlrJKGtnZfuNtHFqa8wmr+Wn74CTWERiW2hn3mN5gTpOoxWKk0jRxjg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.8':
+    resolution: {integrity: sha512-RdRvedGsT0vwVVDztvyXhKpsU2ark/BjgG0huo4+2BluxdXo8NDgzl77qh0T1nUxmM11eXwR8jA39ibvSTbi7A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.1.8':
+    resolution: {integrity: sha512-t6PgxjEMLp5Ovf7uMb2OFmb3kqzVTPPakWpBIFzppk4JE4ix0yEtbtSjPbU8+PZETpaYMtXvss2Sdkx8Vs4XRw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.8':
+    resolution: {integrity: sha512-g8C8eGEyhHTqwPStSwZNSrOlyx0bhK/V/+zX0Y+n7DoRUzyS8eMbVshVOLJTDDC+Qn9IJnilYbIKzpB9n4aBsg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.8':
+    resolution: {integrity: sha512-Jmzr3FA4S2tHhaC6yCjac3rGf7hG9R6Gf2z9i9JFcuyy0u79HfQsh/thifbYTF2ic82KJovKKkIB6Z9TdNhCXQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.8':
+    resolution: {integrity: sha512-qq7jXtO1+UEtCmCeBBIRDrPFIVI4ilEQ97qgBGdwXAARrUqSn/L9fUrkb1XP/mvVtoVeR2bt/0L77xx53bPZ/Q==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.8':
+    resolution: {integrity: sha512-O6b8QesPbJCRshsNApsOIpzKt3ztG35gfX9tEf4arD7mwNinsoCKxkj8TgEE0YRjmjtO3r9FlJnT/ENd9EVefQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.8':
+    resolution: {integrity: sha512-32iEXX/pXwikshNOGnERAFwFSfiltmijMIAbUhnNyjFr3tmWmMJWQKU2vNcFX0DACSXJ3ZWcSkzNbaKTdngH6g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.8':
+    resolution: {integrity: sha512-s+VSSD+TfZeMEsCaFaHTaY5YNj3Dri8rST09gMvYQKwPphacRG7wbuQ5ZJMIJXN/puxPcg/nU+ucvWguPpvBDg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.8':
+    resolution: {integrity: sha512-CXBPVFkpDjM67sS1psWohZ6g/2/cd+cq56vPxK4JeawelxwK4YECgl9Y9TjkE2qfF+9/s1tHHJqrC4SS6cVvSg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.8':
+    resolution: {integrity: sha512-7GmYk1n28teDHUjPlIx4Z6Z4hHEgvP5ZW2QS9ygnDAdI/myh3HTHjDqtSqgu1BpRoI4OiLx+fThAyA1JePoENA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.8':
+    resolution: {integrity: sha512-fou+U20j+Jl0EHwK92spoWISON2OBnCazIc038Xj2TdweYV33ZRkS9nwqiUi2d/Wba5xg5UoHfvynnb/UB49cQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.1.8':
+    resolution: {integrity: sha512-d7qvv9PsM5N3VNKhwVUhpK6r4h9wtLkJ6lz9ZY9aeZgrUWk1Z8VPyqyDT9MZlem7GTGseRQHkeB1j3tC7W1P+A==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/vite@4.1.8':
+    resolution: {integrity: sha512-CQ+I8yxNV5/6uGaJjiuymgw0kEQiNKRinYbZXPdx1fk5WgiyReG0VaUx/Xq6aVNSUNJFzxm6o8FNKS5aMaim5A==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6
+
   '@testing-library/dom@10.4.0':
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
@@ -3532,6 +3697,9 @@ packages:
   citty@0.1.6:
     resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
   clean-regexp@1.0.0:
     resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
     engines: {node: '>=4'}
@@ -3726,9 +3894,6 @@ packages:
     resolution: {integrity: sha512-onMB0OkDjkXunhdW9htFjEhqrD54+M94i6ackoUkjHKbRnXdyEyKRelp4nJ1kAz32+s27jP1FsebpJCVl0BsvA==}
     engines: {node: '>=18.0'}
 
-  cross-fetch@3.2.0:
-    resolution: {integrity: sha512-Q+xVJLoGOeIMXZmbUK4HYk+69cQH6LudR0Vu/pRm2YlU/hDV9CiS0gKUMaWY5f2NeUH9C1nV3bsTlCo0FsTV1Q==}
-
   cross-fetch@4.1.0:
     resolution: {integrity: sha512-uKm5PU+MHTootlWEY+mZ4vvXoCn4fLQxT9dSc1sXVMSFkINTJVN8cAQROpwcKm8bJ/c7rgZVIBWzH5T78sNZZw==}
 
@@ -4895,10 +5060,6 @@ packages:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
 
-  get-random-values@1.2.2:
-    resolution: {integrity: sha512-lMyPjQyl0cNNdDf2oR+IQ/fM3itDvpoHy45Ymo2r0L1EjazeSl13SfbKZs7KtZ/3MDCeueiaJiuOEfKqRTsSgA==}
-    engines: {node: 10 || 12 || >=14}
-
   get-random-values@3.0.0:
     resolution: {integrity: sha512-mNznaBdYcpz7UAdnOtDGcLdNwAa79mXl5htEyyZ51YaeAWNf2g4x/2yCVBdNNTbi35wX0Stc2PJXM7G6rcONOA==}
     engines: {node: 18 || >=20}
@@ -5650,6 +5811,70 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lightningcss-darwin-arm64@1.30.1:
+    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.1:
+    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.1:
+    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    resolution: {integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.30.1:
+    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    resolution: {integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.30.1:
+    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
@@ -5747,6 +5972,11 @@ packages:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
 
+  lucide-react@0.294.0:
+    resolution: {integrity: sha512-V7o0/VECSGbLHn3/1O67FUgBwWB+hmzshrgDVRJQhMh8uj5D3HBuIvhuAmQTtlupILSplwIZg5FTc4tTKMA2SA==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0
+
   luxon@3.6.1:
     resolution: {integrity: sha512-tJLxrKJhO2ukZ5z0gyjY1zPh3Rh88Ej9P7jNrZiHMUXHae1yvI2imgOZtL1TO8TW6biMMKfTtAOoEJANgtWBMQ==}
     engines: {node: '>=12'}
@@ -7017,6 +7247,19 @@ packages:
     resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
     engines: {node: '>=0.10.0'}
 
+  react-router-dom@6.30.1:
+    resolution: {integrity: sha512-llKsgOkZdbPU1Eg3zK8lCn+sjD9wMRZZPuzmdWWX5SUs8OFkN5HnFVC0u5KMeMaC9aoancFI/KoLuKPqN+hxHw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
+  react-router@6.30.1:
+    resolution: {integrity: sha512-X1m21aEmxGXqENEPG3T6u0Th7g0aS4ZmoNynhbs+Cn+q+QGTLt+d5IQ2bHAXKzKcxGJjxACpVbnYQSCRcfxHlQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      react: '>=16.8'
+
   react@19.1.0:
     resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
     engines: {node: '>=0.10.0'}
@@ -7270,18 +7513,10 @@ packages:
   search-insights@2.17.3:
     resolution: {integrity: sha512-RQPdCYTa8A68uM2jwxoY842xDhvx3E5LFL1LxvxCNMev4o5mLuokczhzjAgGwUZBAmOKZknArSxLKmXtIi2AxQ==}
 
-  secure-random-bytes@3.0.1:
-    resolution: {integrity: sha512-ssbk1VShojCe2rgqdz0ULu6ikrJDNuUfsUaqpSTid2n7xUiRFlatfvSLNN8BVqOdfliJptsoqu5NXbOZWpme4A==}
-    engines: {node: 12 || 14 || >=16}
-
   secure-random-bytes@5.0.1:
     resolution: {integrity: sha512-48nvkahmdyoRbHW/x1HTGIk+i2/84MHFBB+rZ50cg1y/p2RjKG+fhTMQKZx4QD6T6/o2M2WHLPkncqQpjMMsUw==}
     engines: {node: 18 || >=20}
 
-  secure-random-octet@2.0.0:
-    resolution: {integrity: sha512-6LuHtdATut7HD0KRehBOTdpRvGoGBTd9eL3ZtA68bpOCP2xOK6ywDncxmqEa4dRXz4skCc42Q/SxPwcwZpZ8kQ==}
-    engines: {node: 12 || 14 || >=16}
-
   secure-random-octet@4.0.1:
     resolution: {integrity: sha512-KEeg9wGi/96Q8Edp97gt5Z5dYCcvG7vPKdKFq6rPLCHtaaHwZKbhbC+gY74O7OjX8Fnels49wqc8IgkNhBJZfw==}
     engines: {node: 18 || >=20}
@@ -7680,6 +7915,12 @@ packages:
     resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
     engines: {node: '>=10.0.0'}
 
+  tailwind-merge@3.3.0:
+    resolution: {integrity: sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ==}
+
+  tailwindcss@4.1.8:
+    resolution: {integrity: sha512-kjeW8gjdxasbmFKpVGrGd5T4i40mV5J2Rasw48QARfYeQ8YS9x02ON9SFWax3Qf616rt4Cp3nVNIj6Hd1mP3og==}
+
   tapable@2.2.2:
     resolution: {integrity: sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==}
     engines: {node: '>=6'}
@@ -7841,6 +8082,9 @@ packages:
     peerDependencies:
       typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
 
+  tw-animate-css@1.3.4:
+    resolution: {integrity: sha512-dd1Ht6/YQHcNbq0znIT6dG8uhO7Ce+VIIhZUhjsryXsMPJQz3bZg7Q2eNzLwipb25bRZslGb2myio5mScd1TFg==}
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -8100,10 +8344,6 @@ packages:
     resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
     hasBin: true
 
-  uuid@8.3.2:
-    resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
-    hasBin: true
-
   v8-compile-cache@2.4.0:
     resolution: {integrity: sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==}
 
@@ -8682,23 +8922,8 @@ snapshots:
       lru-cache: 10.4.3
     optional: true
 
-  '@asgardeo/auth-js@2.0.15': {}
-
   '@asgardeo/auth-js@5.1.2': {}
 
-  '@asgardeo/auth-node@0.1.3':
-    dependencies:
-      '@asgardeo/auth-js': 2.0.15
-      base64url: 3.0.1
-      cross-fetch: 3.2.0
-      fast-sha256: 1.3.0
-      jose: 4.15.9
-      memory-cache: 0.2.0
-      secure-random-bytes: 3.0.1
-      uuid: 8.3.2
-    transitivePeerDependencies:
-      - encoding
-
   '@asgardeo/auth-spa@3.2.0':
     dependencies:
       '@asgardeo/auth-js': 5.1.2
@@ -9786,12 +10011,12 @@ snapshots:
 
   '@nuxt/devalue@2.0.2': {}
 
-  '@nuxt/devtools-kit@2.4.1(magicast@0.3.5)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
+  '@nuxt/devtools-kit@2.4.1(magicast@0.3.5)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       '@nuxt/kit': 3.17.4(magicast@0.3.5)
       '@nuxt/schema': 3.17.4
       execa: 8.0.1
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
     transitivePeerDependencies:
       - magicast
 
@@ -9806,12 +10031,12 @@ snapshots:
       prompts: 2.4.2
       semver: 7.7.2
 
-  '@nuxt/devtools@2.4.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
+  '@nuxt/devtools@2.4.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
     dependencies:
-      '@nuxt/devtools-kit': 2.4.1(magicast@0.3.5)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      '@nuxt/devtools-kit': 2.4.1(magicast@0.3.5)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       '@nuxt/devtools-wizard': 2.4.1
       '@nuxt/kit': 3.17.4(magicast@0.3.5)
-      '@vue/devtools-core': 7.7.6(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
+      '@vue/devtools-core': 7.7.6(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
       '@vue/devtools-kit': 7.7.6
       birpc: 2.3.0
       consola: 3.4.2
@@ -9836,9 +10061,9 @@ snapshots:
       sirv: 3.0.1
       structured-clone-es: 1.0.0
       tinyglobby: 0.2.13
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-plugin-inspect: 11.1.0(@nuxt/kit@3.17.4(magicast@0.3.5))(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
-      vite-plugin-vue-tracer: 0.1.3(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-plugin-inspect: 11.1.0(@nuxt/kit@3.17.4(magicast@0.3.5))(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      vite-plugin-vue-tracer: 0.1.3(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
       which: 5.0.0
       ws: 8.18.2
     transitivePeerDependencies:
@@ -9959,7 +10184,7 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/test-utils@3.19.0(@types/node@22.15.29)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)':
+  '@nuxt/test-utils@3.19.0(@types/node@22.15.29)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)':
     dependencies:
       '@nuxt/kit': 3.17.4(magicast@0.3.5)
       '@nuxt/schema': 3.17.4
@@ -9984,14 +10209,14 @@ snapshots:
       tinyexec: 1.0.1
       ufo: 1.6.1
       unplugin: 2.3.4
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vitest-environment-nuxt: 1.0.1(@types/node@22.15.29)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vitest-environment-nuxt: 1.0.1(@types/node@22.15.29)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
       vue: 3.5.14(typescript@5.8.3)
     optionalDependencies:
       '@vue/test-utils': 2.4.6
       jsdom: 26.1.0
       playwright-core: 1.52.0
-      vitest: 3.1.3(@types/node@22.15.29)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vitest: 3.1.3(@types/node@22.15.29)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -10007,12 +10232,12 @@ snapshots:
       - typescript
       - yaml
 
-  '@nuxt/vite-builder@3.17.4(@types/node@22.15.29)(eslint@8.57.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3))(yaml@2.8.0)':
+  '@nuxt/vite-builder@3.17.4(@types/node@22.15.29)(eslint@8.57.0)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3))(yaml@2.8.0)':
     dependencies:
       '@nuxt/kit': 3.17.4(magicast@0.3.5)
       '@rollup/plugin-replace': 6.0.2(rollup@4.40.2)
-      '@vitejs/plugin-vue': 5.2.4(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
-      '@vitejs/plugin-vue-jsx': 4.2.0(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
+      '@vitejs/plugin-vue': 5.2.4(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
+      '@vitejs/plugin-vue-jsx': 4.2.0(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
       autoprefixer: 10.4.21(postcss@8.5.3)
       consola: 3.4.2
       cssnano: 7.0.7(postcss@8.5.3)
@@ -10038,9 +10263,9 @@ snapshots:
       ufo: 1.6.1
       unenv: 2.0.0-rc.17
       unplugin: 2.3.4
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-node: 3.1.4(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-plugin-checker: 0.9.3(eslint@8.57.0)(optionator@0.9.4)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-node: 3.1.4(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-plugin-checker: 0.9.3(eslint@8.57.0)(optionator@0.9.4)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))
       vue: 3.5.14(typescript@5.8.3)
       vue-bundle-renderer: 2.1.1
     transitivePeerDependencies:
@@ -10230,6 +10455,39 @@ snapshots:
 
   '@poppinss/exception@1.2.1': {}
 
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.5)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.5
+
+  '@radix-ui/react-label@2.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.5
+      '@types/react-dom': 19.1.5(@types/react@19.1.5)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.5)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.5
+      '@types/react-dom': 19.1.5(@types/react@19.1.5)
+
+  '@radix-ui/react-slot@1.2.3(@types/react@19.1.5)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.5
+
+  '@remix-run/router@1.23.0': {}
+
   '@rolldown/pluginutils@1.0.0-beta.9': {}
 
   '@rollup/plugin-alias@5.1.1(rollup@4.40.2)':
@@ -10467,6 +10725,77 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@tailwindcss/node@4.1.8':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      enhanced-resolve: 5.18.1
+      jiti: 2.4.2
+      lightningcss: 1.30.1
+      magic-string: 0.30.17
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.8
+
+  '@tailwindcss/oxide-android-arm64@4.1.8':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.8':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.1.8':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.8':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.8':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.8':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.8':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.8':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.8':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.8':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.8':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.8':
+    optional: true
+
+  '@tailwindcss/oxide@4.1.8':
+    dependencies:
+      detect-libc: 2.0.4
+      tar: 7.4.3
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.8
+      '@tailwindcss/oxide-darwin-arm64': 4.1.8
+      '@tailwindcss/oxide-darwin-x64': 4.1.8
+      '@tailwindcss/oxide-freebsd-x64': 4.1.8
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.8
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.8
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.8
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.8
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.8
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.8
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.8
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.8
+
+  '@tailwindcss/vite@4.1.8(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
+    dependencies:
+      '@tailwindcss/node': 4.1.8
+      '@tailwindcss/oxide': 4.1.8
+      tailwindcss: 4.1.8
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+
   '@testing-library/dom@10.4.0':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -11187,7 +11516,7 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vitejs/plugin-react@4.5.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
+  '@vitejs/plugin-react@4.5.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       '@babel/core': 7.27.1
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.27.1)
@@ -11195,46 +11524,46 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.9
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@4.2.0(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
+  '@vitejs/plugin-vue-jsx@4.2.0(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
     dependencies:
       '@babel/core': 7.27.1
       '@babel/plugin-transform-typescript': 7.27.1(@babel/core@7.27.1)
       '@rolldown/pluginutils': 1.0.0-beta.9
       '@vue/babel-plugin-jsx': 1.4.0(@babel/core@7.27.1)
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vue: 3.5.14(typescript@5.8.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.2.4(vite@5.4.19(@types/node@22.15.29)(sass@1.89.0)(terser@5.39.2))(vue@3.5.14(typescript@5.8.3))':
+  '@vitejs/plugin-vue@5.2.4(vite@5.4.19(@types/node@22.15.29)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2))(vue@3.5.14(typescript@5.8.3))':
     dependencies:
-      vite: 5.4.19(@types/node@22.15.29)(sass@1.89.0)(terser@5.39.2)
+      vite: 5.4.19(@types/node@22.15.29)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)
       vue: 3.5.14(typescript@5.8.3)
 
-  '@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@20.17.50)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.1.6))':
+  '@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@20.17.50)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.1.6))':
     dependencies:
-      vite: 6.3.5(@types/node@20.17.50)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@20.17.50)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vue: 3.5.14(typescript@5.1.6)
 
-  '@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
+  '@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
     dependencies:
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vue: 3.5.14(typescript@5.8.3)
 
-  '@vitest/browser@3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)':
+  '@vitest/browser@3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)':
     dependencies:
       '@testing-library/dom': 10.4.0
       '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.0)
-      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       '@vitest/utils': 3.1.3
       magic-string: 0.30.17
       sirv: 3.0.1
       tinyrainbow: 2.0.0
-      vitest: 3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vitest: 3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       ws: 8.18.2
     optionalDependencies:
       playwright: 1.52.0
@@ -11244,16 +11573,16 @@ snapshots:
       - utf-8-validate
       - vite
 
-  '@vitest/browser@3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)':
+  '@vitest/browser@3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)':
     dependencies:
       '@testing-library/dom': 10.4.0
       '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.0)
-      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       '@vitest/utils': 3.1.3
       magic-string: 0.30.17
       sirv: 3.0.1
       tinyrainbow: 2.0.0
-      vitest: 3.1.3(@types/node@22.15.29)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vitest: 3.1.3(@types/node@22.15.29)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       ws: 8.18.2
     optionalDependencies:
       playwright: 1.52.0
@@ -11264,7 +11593,7 @@ snapshots:
       - vite
     optional: true
 
-  '@vitest/coverage-v8@3.0.8(vitest@3.1.3(@types/node@20.17.50)(jiti@2.4.2)(jsdom@26.1.0)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
+  '@vitest/coverage-v8@3.0.8(vitest@3.1.3(@types/node@20.17.50)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@bcoe/v8-coverage': 1.0.2
@@ -11278,7 +11607,7 @@ snapshots:
       std-env: 3.9.0
       test-exclude: 7.0.1
       tinyrainbow: 2.0.0
-      vitest: 3.1.3(@types/node@20.17.50)(jiti@2.4.2)(jsdom@26.1.0)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vitest: 3.1.3(@types/node@20.17.50)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -11289,29 +11618,29 @@ snapshots:
       chai: 5.2.0
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.1.3(vite@6.3.5(@types/node@20.17.50)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
+  '@vitest/mocker@3.1.3(vite@6.3.5(@types/node@20.17.50)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       '@vitest/spy': 3.1.3
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 6.3.5(@types/node@20.17.50)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@20.17.50)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
-  '@vitest/mocker@3.1.3(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
+  '@vitest/mocker@3.1.3(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       '@vitest/spy': 3.1.3
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 6.3.5(@types/node@22.15.18)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
-  '@vitest/mocker@3.1.3(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
+  '@vitest/mocker@3.1.3(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       '@vitest/spy': 3.1.3
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
   '@vitest/pretty-format@3.1.3':
     dependencies:
@@ -11338,10 +11667,10 @@ snapshots:
       loupe: 3.1.3
       tinyrainbow: 2.0.0
 
-  '@vitest/web-worker@3.1.4(vitest@3.1.3(@types/node@20.17.50)(jiti@2.4.2)(jsdom@26.1.0)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
+  '@vitest/web-worker@3.1.4(vitest@3.1.3(@types/node@20.17.50)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       debug: 4.4.1
-      vitest: 3.1.3(@types/node@20.17.50)(jiti@2.4.2)(jsdom@26.1.0)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vitest: 3.1.3(@types/node@20.17.50)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -11438,14 +11767,14 @@ snapshots:
     dependencies:
       '@vue/devtools-kit': 7.7.6
 
-  '@vue/devtools-core@7.7.6(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
+  '@vue/devtools-core@7.7.6(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
     dependencies:
       '@vue/devtools-kit': 7.7.6
       '@vue/devtools-shared': 7.7.6
       mitt: 3.0.1
       nanoid: 5.1.5
       pathe: 2.0.3
-      vite-hot-client: 2.0.4(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      vite-hot-client: 2.0.4(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       vue: 3.5.14(typescript@5.8.3)
     transitivePeerDependencies:
       - vite
@@ -12192,6 +12521,10 @@ snapshots:
     dependencies:
       consola: 3.4.2
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
   clean-regexp@1.0.0:
     dependencies:
       escape-string-regexp: 1.0.5
@@ -12381,12 +12714,6 @@ snapshots:
 
   croner@9.0.0: {}
 
-  cross-fetch@3.2.0:
-    dependencies:
-      node-fetch: 2.7.0
-    transitivePeerDependencies:
-      - encoding
-
   cross-fetch@4.1.0:
     dependencies:
       node-fetch: 2.7.0
@@ -14047,10 +14374,6 @@ snapshots:
       dunder-proto: 1.0.1
       es-object-atoms: 1.1.1
 
-  get-random-values@1.2.2:
-    dependencies:
-      global: 4.4.0
-
   get-random-values@3.0.0:
     dependencies:
       global: 4.4.0
@@ -14820,6 +15143,51 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lightningcss-darwin-arm64@1.30.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.30.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.30.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    optional: true
+
+  lightningcss@1.30.1:
+    dependencies:
+      detect-libc: 2.0.4
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.30.1
+      lightningcss-darwin-x64: 1.30.1
+      lightningcss-freebsd-x64: 1.30.1
+      lightningcss-linux-arm-gnueabihf: 1.30.1
+      lightningcss-linux-arm64-gnu: 1.30.1
+      lightningcss-linux-arm64-musl: 1.30.1
+      lightningcss-linux-x64-gnu: 1.30.1
+      lightningcss-linux-x64-musl: 1.30.1
+      lightningcss-win32-arm64-msvc: 1.30.1
+      lightningcss-win32-x64-msvc: 1.30.1
+
   lilconfig@2.1.0: {}
 
   lilconfig@3.1.3: {}
@@ -14921,6 +15289,10 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
+  lucide-react@0.294.0(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+
   luxon@3.6.1: {}
 
   lz-string@1.5.0: {}
@@ -15393,15 +15765,15 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  nuxt@3.17.4(@parcel/watcher@2.5.1)(@types/node@22.15.29)(db0@0.3.2)(eslint@8.57.0)(ioredis@5.6.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))(yaml@2.8.0):
+  nuxt@3.17.4(@parcel/watcher@2.5.1)(@types/node@22.15.29)(db0@0.3.2)(eslint@8.57.0)(ioredis@5.6.1)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))(yaml@2.8.0):
     dependencies:
       '@nuxt/cli': 3.25.1(magicast@0.3.5)
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 2.4.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
+      '@nuxt/devtools': 2.4.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
       '@nuxt/kit': 3.17.4(magicast@0.3.5)
       '@nuxt/schema': 3.17.4
       '@nuxt/telemetry': 2.6.6(magicast@0.3.5)
-      '@nuxt/vite-builder': 3.17.4(@types/node@22.15.29)(eslint@8.57.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3))(yaml@2.8.0)
+      '@nuxt/vite-builder': 3.17.4(@types/node@22.15.29)(eslint@8.57.0)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3))(yaml@2.8.0)
       '@unhead/vue': 2.0.10(vue@3.5.14(typescript@5.8.3))
       '@vue/shared': 3.5.14
       c12: 3.0.4(magicast@0.3.5)
@@ -16406,6 +16778,18 @@ snapshots:
 
   react-refresh@0.17.0: {}
 
+  react-router-dom@6.30.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      '@remix-run/router': 1.23.0
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-router: 6.30.1(react@19.1.0)
+
+  react-router@6.30.1(react@19.1.0):
+    dependencies:
+      '@remix-run/router': 1.23.0
+      react: 19.1.0
+
   react@19.1.0: {}
 
   read-package-up@11.0.0:
@@ -16727,18 +17111,10 @@ snapshots:
 
   search-insights@2.17.3: {}
 
-  secure-random-bytes@3.0.1:
-    dependencies:
-      secure-random-octet: 2.0.0
-
   secure-random-bytes@5.0.1:
     dependencies:
       secure-random-octet: 4.0.1
 
-  secure-random-octet@2.0.0:
-    dependencies:
-      get-random-values: 1.2.2
-
   secure-random-octet@4.0.1:
     dependencies:
       get-random-values: 3.0.0
@@ -17260,6 +17636,10 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
+  tailwind-merge@3.3.0: {}
+
+  tailwindcss@4.1.8: {}
+
   tapable@2.2.2: {}
 
   tar-stream@2.2.0:
@@ -17416,6 +17796,8 @@ snapshots:
       tslib: 1.14.1
       typescript: 5.7.3
 
+  tw-animate-css@1.3.4: {}
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
@@ -17720,8 +18102,6 @@ snapshots:
 
   uuid@11.1.0: {}
 
-  uuid@8.3.2: {}
-
   v8-compile-cache@2.4.0: {}
 
   validate-npm-package-license@3.0.4:
@@ -17739,23 +18119,23 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite-dev-rpc@1.0.7(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
+  vite-dev-rpc@1.0.7(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
     dependencies:
       birpc: 2.3.0
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-hot-client: 2.0.4(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-hot-client: 2.0.4(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
 
-  vite-hot-client@2.0.4(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
+  vite-hot-client@2.0.4(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
     dependencies:
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
-  vite-node@3.1.3(@types/node@20.17.50)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
+  vite-node@3.1.3(@types/node@20.17.50)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.1
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 6.3.5(@types/node@20.17.50)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@20.17.50)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -17770,13 +18150,13 @@ snapshots:
       - tsx
       - yaml
 
-  vite-node@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
+  vite-node@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.1
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 6.3.5(@types/node@22.15.18)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -17791,13 +18171,13 @@ snapshots:
       - tsx
       - yaml
 
-  vite-node@3.1.3(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
+  vite-node@3.1.3(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.1
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -17812,13 +18192,13 @@ snapshots:
       - tsx
       - yaml
 
-  vite-node@3.1.4(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
+  vite-node@3.1.4(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.1
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -17833,7 +18213,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-checker@0.9.3(eslint@8.57.0)(optionator@0.9.4)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3)):
+  vite-plugin-checker@0.9.3(eslint@8.57.0)(optionator@0.9.4)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3)):
     dependencies:
       '@babel/code-frame': 7.27.1
       chokidar: 4.0.3
@@ -17843,7 +18223,7 @@ snapshots:
       strip-ansi: 7.1.0
       tiny-invariant: 1.3.3
       tinyglobby: 0.2.13
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vscode-uri: 3.1.0
     optionalDependencies:
       eslint: 8.57.0
@@ -17851,7 +18231,7 @@ snapshots:
       typescript: 5.8.3
       vue-tsc: 2.2.10(typescript@5.8.3)
 
-  vite-plugin-inspect@11.1.0(@nuxt/kit@3.17.4(magicast@0.3.5))(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
+  vite-plugin-inspect@11.1.0(@nuxt/kit@3.17.4(magicast@0.3.5))(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
     dependencies:
       ansis: 3.17.0
       debug: 4.4.1
@@ -17861,24 +18241,24 @@ snapshots:
       perfect-debounce: 1.0.0
       sirv: 3.0.1
       unplugin-utils: 0.2.4
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-dev-rpc: 1.0.7(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-dev-rpc: 1.0.7(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
     optionalDependencies:
       '@nuxt/kit': 3.17.4(magicast@0.3.5)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vue-tracer@0.1.3(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3)):
+  vite-plugin-vue-tracer@0.1.3(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3)):
     dependencies:
       estree-walker: 3.0.3
       exsolve: 1.0.5
       magic-string: 0.30.17
       pathe: 2.0.3
       source-map-js: 1.2.1
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vue: 3.5.14(typescript@5.8.3)
 
-  vite@5.4.19(@types/node@22.15.29)(sass@1.89.0)(terser@5.39.2):
+  vite@5.4.19(@types/node@22.15.29)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.3
@@ -17886,10 +18266,11 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.15.29
       fsevents: 2.3.3
+      lightningcss: 1.30.1
       sass: 1.89.0
       terser: 5.39.2
 
-  vite@6.3.5(@types/node@20.17.50)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
+  vite@6.3.5(@types/node@20.17.50)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
     dependencies:
       esbuild: 0.25.4
       fdir: 6.4.4(picomatch@4.0.2)
@@ -17901,11 +18282,12 @@ snapshots:
       '@types/node': 20.17.50
       fsevents: 2.3.3
       jiti: 2.4.2
+      lightningcss: 1.30.1
       sass: 1.89.0
       terser: 5.39.2
       yaml: 2.8.0
 
-  vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
+  vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
     dependencies:
       esbuild: 0.25.4
       fdir: 6.4.4(picomatch@4.0.2)
@@ -17917,11 +18299,12 @@ snapshots:
       '@types/node': 22.15.18
       fsevents: 2.3.3
       jiti: 2.4.2
+      lightningcss: 1.30.1
       sass: 1.89.0
       terser: 5.39.2
       yaml: 2.8.0
 
-  vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
+  vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
     dependencies:
       esbuild: 0.25.4
       fdir: 6.4.4(picomatch@4.0.2)
@@ -17933,11 +18316,12 @@ snapshots:
       '@types/node': 22.15.29
       fsevents: 2.3.3
       jiti: 2.4.2
+      lightningcss: 1.30.1
       sass: 1.89.0
       terser: 5.39.2
       yaml: 2.8.0
 
-  vitepress@1.6.3(@algolia/client-search@5.25.0)(@types/node@22.15.29)(axios@1.9.0)(fuse.js@7.1.0)(jwt-decode@4.0.0)(postcss@8.5.3)(sass@1.89.0)(search-insights@2.17.3)(terser@5.39.2)(typescript@5.8.3):
+  vitepress@1.6.3(@algolia/client-search@5.25.0)(@types/node@22.15.29)(axios@1.9.0)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.1)(postcss@8.5.3)(sass@1.89.0)(search-insights@2.17.3)(terser@5.39.2)(typescript@5.8.3):
     dependencies:
       '@docsearch/css': 3.8.2
       '@docsearch/js': 3.8.2(@algolia/client-search@5.25.0)(search-insights@2.17.3)
@@ -17946,7 +18330,7 @@ snapshots:
       '@shikijs/transformers': 2.5.0
       '@shikijs/types': 2.5.0
       '@types/markdown-it': 14.1.2
-      '@vitejs/plugin-vue': 5.2.4(vite@5.4.19(@types/node@22.15.29)(sass@1.89.0)(terser@5.39.2))(vue@3.5.14(typescript@5.8.3))
+      '@vitejs/plugin-vue': 5.2.4(vite@5.4.19(@types/node@22.15.29)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2))(vue@3.5.14(typescript@5.8.3))
       '@vue/devtools-api': 7.7.6
       '@vue/shared': 3.5.14
       '@vueuse/core': 12.8.2(typescript@5.8.3)
@@ -17955,7 +18339,7 @@ snapshots:
       mark.js: 8.11.1
       minisearch: 7.1.2
       shiki: 2.5.0
-      vite: 5.4.19(@types/node@22.15.29)(sass@1.89.0)(terser@5.39.2)
+      vite: 5.4.19(@types/node@22.15.29)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)
       vue: 3.5.14(typescript@5.8.3)
     optionalDependencies:
       postcss: 8.5.3
@@ -17988,17 +18372,17 @@ snapshots:
 
   vitest-browser-react@0.1.1(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(@vitest/browser@3.1.3)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(vitest@3.1.3):
     dependencies:
-      '@vitest/browser': 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
+      '@vitest/browser': 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      vitest: 3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vitest: 3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
     optionalDependencies:
       '@types/react': 19.1.5
       '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
-  vitest-environment-nuxt@1.0.1(@types/node@22.15.29)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0):
+  vitest-environment-nuxt@1.0.1(@types/node@22.15.29)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0):
     dependencies:
-      '@nuxt/test-utils': 3.19.0(@types/node@22.15.29)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
+      '@nuxt/test-utils': 3.19.0(@types/node@22.15.29)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
     transitivePeerDependencies:
       - '@cucumber/cucumber'
       - '@jest/globals'
@@ -18024,10 +18408,10 @@ snapshots:
       - vitest
       - yaml
 
-  vitest@3.1.3(@types/node@20.17.50)(jiti@2.4.2)(jsdom@26.1.0)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
+  vitest@3.1.3(@types/node@20.17.50)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
     dependencies:
       '@vitest/expect': 3.1.3
-      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@20.17.50)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@20.17.50)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       '@vitest/pretty-format': 3.1.3
       '@vitest/runner': 3.1.3
       '@vitest/snapshot': 3.1.3
@@ -18044,8 +18428,8 @@ snapshots:
       tinyglobby: 0.2.13
       tinypool: 1.0.2
       tinyrainbow: 2.0.0
-      vite: 6.3.5(@types/node@20.17.50)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-node: 3.1.3(@types/node@20.17.50)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@20.17.50)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-node: 3.1.3(@types/node@20.17.50)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 20.17.50
@@ -18064,10 +18448,10 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
+  vitest@3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
     dependencies:
       '@vitest/expect': 3.1.3
-      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       '@vitest/pretty-format': 3.1.3
       '@vitest/runner': 3.1.3
       '@vitest/snapshot': 3.1.3
@@ -18084,12 +18468,12 @@ snapshots:
       tinyglobby: 0.2.13
       tinypool: 1.0.2
       tinyrainbow: 2.0.0
-      vite: 6.3.5(@types/node@22.15.18)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-node: 3.1.3(@types/node@22.15.18)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-node: 3.1.3(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.15.18
-      '@vitest/browser': 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
+      '@vitest/browser': 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
       jsdom: 26.1.0
     transitivePeerDependencies:
       - jiti
@@ -18105,10 +18489,10 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@3.1.3(@types/node@22.15.29)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
+  vitest@3.1.3(@types/node@22.15.29)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
     dependencies:
       '@vitest/expect': 3.1.3
-      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       '@vitest/pretty-format': 3.1.3
       '@vitest/runner': 3.1.3
       '@vitest/snapshot': 3.1.3
@@ -18125,12 +18509,12 @@ snapshots:
       tinyglobby: 0.2.13
       tinypool: 1.0.2
       tinyrainbow: 2.0.0
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-node: 3.1.3(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-node: 3.1.3(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.15.29
-      '@vitest/browser': 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
+      '@vitest/browser': 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
       jsdom: 26.1.0
     transitivePeerDependencies:
       - jiti

From b540f6adf9cc288311ffab2283275fc67fcef400 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Mon, 9 Jun 2025 13:18:11 +0530
Subject: [PATCH 015/131] chore(recipes): update default route to redirect to
 dashboard page

---
 recipes/vite-react-ts/src/App.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/recipes/vite-react-ts/src/App.tsx b/recipes/vite-react-ts/src/App.tsx
index 2c1a49521..e5edf7c94 100644
--- a/recipes/vite-react-ts/src/App.tsx
+++ b/recipes/vite-react-ts/src/App.tsx
@@ -96,9 +96,8 @@ function App() {
           <Header />
           <main>
             <Routes>
-              <Route path="/" element={<Navigate to="/dashboard" replace />} />
               <Route path="/signin" element={<SignInPage />} />
-              <Route path="/dashboard" element={<DashboardPage />} />
+              <Route path="/" element={<DashboardPage />} />
               <Route path="/profile" element={<ProfilePage />} />
               <Route path="/organizations" element={<OrganizationsPage />} />
               <Route path="/organizations/new" element={<CreateOrganizationPage />} />

From 30fde43e6da2f492d7769e83208fef0d74c1805a Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Mon, 9 Jun 2025 13:29:45 +0530
Subject: [PATCH 016/131] chore: refactor code to replace `getDataLayer` with
 `getStorageManager` across multiple files

---
 packages/__legacy__/core/src/api/authenticate.ts          | 2 +-
 packages/__legacy__/core/src/api/authorize.ts             | 2 +-
 .../core/src/api/get-branding-preference-text.ts          | 2 +-
 .../__legacy__/core/src/api/get-branding-preference.ts    | 2 +-
 .../__legacy__/core/src/api/get-profile-information.ts    | 2 +-
 packages/__legacy__/core/src/api/sign-out.ts              | 2 +-
 packages/__legacy__/core/src/branding/get-branding.ts     | 2 +-
 packages/__legacy__/core/src/i18n/get-localization.ts     | 2 +-
 .../__legacy__/react/src/components/SignIn/SignIn.tsx     | 2 +-
 packages/browser/src/__legacy__/client.ts                 | 6 +++---
 .../browser/src/__legacy__/clients/main-thread-client.ts  | 8 ++++----
 .../src/__legacy__/helpers/authentication-helper.ts       | 4 ++--
 packages/browser/src/__legacy__/helpers/spa-helper.ts     | 5 +++--
 packages/browser/src/__legacy__/models/client.ts          | 2 +-
 packages/browser/src/__legacy__/worker/worker-core.ts     | 2 +-
 packages/javascript/src/__legacy__/client.ts              | 6 +++---
 packages/node/src/__legacy__/client.ts                    | 4 ++--
 packages/node/src/__legacy__/core/authentication.ts       | 4 ++--
 packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts | 4 ++--
 packages/nuxt/src/runtime/server/handler.ts               | 2 +-
 packages/nuxt/src/runtime/types.ts                        | 2 +-
 21 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/packages/__legacy__/core/src/api/authenticate.ts b/packages/__legacy__/core/src/api/authenticate.ts
index 7d6f0c2c0..1fc25e6b8 100644
--- a/packages/__legacy__/core/src/api/authenticate.ts
+++ b/packages/__legacy__/core/src/api/authenticate.ts
@@ -44,7 +44,7 @@ const authenticate = async (props: AuthenticateProps): Promise<AuthApiResponse>
     };
 
     /* Getting baseURL from authClient's data layer */
-    const {baseUrl} = await AuthClient.getInstance().getDataLayer().getConfigData();
+    const {baseUrl} = await AuthClient.getInstance().getStorageManager().getConfigData();
 
     authnRequest = new Request(`${baseUrl}/oauth2/authn`, requestOptions);
   } catch (error) {
diff --git a/packages/__legacy__/core/src/api/authorize.ts b/packages/__legacy__/core/src/api/authorize.ts
index cf11c5586..15de71d8d 100644
--- a/packages/__legacy__/core/src/api/authorize.ts
+++ b/packages/__legacy__/core/src/api/authorize.ts
@@ -43,7 +43,7 @@ const authorize = async (): Promise<AuthApiResponse> => {
     });
 
     /* Save the state temporarily in the data layer, this needs to be passed when token is requested */
-    await authInstace.getDataLayer().setTemporaryDataParameter('state', params.get('state'));
+    await authInstace.getStorageManager().setTemporaryDataParameter('state', params.get('state'));
 
     const headers: Headers = new Headers();
     headers.append('Accept', 'application/json');
diff --git a/packages/__legacy__/core/src/api/get-branding-preference-text.ts b/packages/__legacy__/core/src/api/get-branding-preference-text.ts
index ef5031df7..87bd3fb26 100644
--- a/packages/__legacy__/core/src/api/get-branding-preference-text.ts
+++ b/packages/__legacy__/core/src/api/get-branding-preference-text.ts
@@ -50,7 +50,7 @@ const getBrandingPreferenceText = async (
   params.append('screen', screen);
   params.append('type', type);
 
-  const {baseUrl} = await AuthClient.getInstance().getDataLayer().getConfigData();
+  const {baseUrl} = await AuthClient.getInstance().getStorageManager().getConfigData();
   const textUrl: string = `${baseUrl}/api/server/v1/branding-preference/text/resolve`;
   const urlWithParams: string = `${textUrl}?${params.toString()}`;
   let response: Response;
diff --git a/packages/__legacy__/core/src/api/get-branding-preference.ts b/packages/__legacy__/core/src/api/get-branding-preference.ts
index 4167ffaf8..64c63f082 100644
--- a/packages/__legacy__/core/src/api/get-branding-preference.ts
+++ b/packages/__legacy__/core/src/api/get-branding-preference.ts
@@ -31,7 +31,7 @@ const getBrandingPreference = async (): Promise<BrandingPreferenceAPIResponse> =
     baseUrl,
     type = BrandingPreferenceTypes.Org,
     name = 'WSO2',
-  } = await AuthClient.getInstance().getDataLayer().getConfigData();
+  } = await AuthClient.getInstance().getStorageManager().getConfigData();
   const brandingUrl: string = `${baseUrl}/api/server/v1/branding-preference?type=${type}&name=${name}`;
   let response: Response;
 
diff --git a/packages/__legacy__/core/src/api/get-profile-information.ts b/packages/__legacy__/core/src/api/get-profile-information.ts
index 3ec8e906d..7b5faed0e 100644
--- a/packages/__legacy__/core/src/api/get-profile-information.ts
+++ b/packages/__legacy__/core/src/api/get-profile-information.ts
@@ -35,7 +35,7 @@ const getProfileInformation = async (): Promise<MeAPIResponse> => {
   let response: Response;
 
   try {
-    baseUrl = (await AuthClient.getInstance().getDataLayer().getConfigData()).baseUrl;
+    baseUrl = (await AuthClient.getInstance().getStorageManager().getConfigData()).baseUrl;
     accessToken = await AuthClient.getInstance().getAccessToken();
   } catch (error) {
     throw new AsgardeoUIException(
diff --git a/packages/__legacy__/core/src/api/sign-out.ts b/packages/__legacy__/core/src/api/sign-out.ts
index 69f775f87..7b31f1e6c 100644
--- a/packages/__legacy__/core/src/api/sign-out.ts
+++ b/packages/__legacy__/core/src/api/sign-out.ts
@@ -50,7 +50,7 @@ const signOut = async (): Promise<void> => {
 
   try {
     formBody.append('id_token_hint', await authClient.getIDToken());
-    formBody.append('client_id', (await authClient.getDataLayer().getConfigData()).clientID);
+    formBody.append('client_id', (await authClient.getStorageManager().getConfigData()).clientID);
     formBody.append('response_mode', 'direct');
   } catch (error) {
     throw new AsgardeoUIException('JS_UI_CORE-SIGNOUT-SO-IV', 'Failed to build the body of the signout request.');
diff --git a/packages/__legacy__/core/src/branding/get-branding.ts b/packages/__legacy__/core/src/branding/get-branding.ts
index 5fd57ac85..0320b520f 100644
--- a/packages/__legacy__/core/src/branding/get-branding.ts
+++ b/packages/__legacy__/core/src/branding/get-branding.ts
@@ -42,7 +42,7 @@ const getBranding = async (props: GetBrandingProps): Promise<Branding> => {
     let brandingFromConsole: BrandingPreferenceAPIResponse;
 
     try {
-      const {enableConsoleBranding} = await AuthClient.getInstance().getDataLayer().getConfigData();
+      const {enableConsoleBranding} = await AuthClient.getInstance().getStorageManager().getConfigData();
 
       if (enableConsoleBranding) {
         brandingFromConsole = await getBrandingPreference();
diff --git a/packages/__legacy__/core/src/i18n/get-localization.ts b/packages/__legacy__/core/src/i18n/get-localization.ts
index 400eacff5..b0f453d94 100644
--- a/packages/__legacy__/core/src/i18n/get-localization.ts
+++ b/packages/__legacy__/core/src/i18n/get-localization.ts
@@ -38,7 +38,7 @@ const getLocalization = async (props: GetLocalizationProps): Promise<TextObject>
 
   let textFromConsoleBranding: BrandingPreferenceTextAPIResponse;
 
-  const configData: AuthClientConfig<UIAuthConfig> = await AuthClient.getInstance().getDataLayer().getConfigData();
+  const configData: AuthClientConfig<UIAuthConfig> = await AuthClient.getInstance().getStorageManager().getConfigData();
 
   try {
     if (configData.enableConsoleTextBranding) {
diff --git a/packages/__legacy__/react/src/components/SignIn/SignIn.tsx b/packages/__legacy__/react/src/components/SignIn/SignIn.tsx
index 518b1b252..173c40e27 100644
--- a/packages/__legacy__/react/src/components/SignIn/SignIn.tsx
+++ b/packages/__legacy__/react/src/components/SignIn/SignIn.tsx
@@ -182,7 +182,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
       authContext?.setAuthResponse(resp);
 
       const authInstance: UIAuthClient = AuthClient.getInstance();
-      const state: string = (await authInstance.getDataLayer().getTemporaryDataParameter('state')).toString();
+      const state: string = (await authInstance.getStorageManager().getTemporaryDataParameter('state')).toString();
 
       await authInstance.requestAccessToken(resp.authData.code, resp.authData.session_state, state);
 
diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
index 409ecbd39..0282bbd85 100755
--- a/packages/browser/src/__legacy__/client.ts
+++ b/packages/browser/src/__legacy__/client.ts
@@ -891,7 +891,7 @@ export class AsgardeoSPAClient {
    *
    * @example
    * ```
-   *   auth.getDataLayer().then((dataLayer) => {
+   *   auth.getStorageManager().then((dataLayer) => {
    *       // console.log(dataLayer);
    *   }).catch((error) => {
    *       // console.error(error);
@@ -904,7 +904,7 @@ export class AsgardeoSPAClient {
    *
    * @preserve
    */
-  public async getDataLayer(): Promise<StorageManager<MainThreadClientConfig>> {
+  public async getStorageManager(): Promise<StorageManager<MainThreadClientConfig>> {
     await this._validateMethod();
 
     if (this._storage && [(BrowserStorage.WebWorker, BrowserStorage.BrowserMemory)].includes(this._storage)) {
@@ -918,7 +918,7 @@ export class AsgardeoSPAClient {
     }
     const mainThreadClient = this._client as MainThreadClientInterface;
 
-    return mainThreadClient.getDataLayer();
+    return mainThreadClient.getStorageManager();
   }
 
   /**
diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index 32abb2045..79e737957 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -68,7 +68,7 @@ export const MainThreadClient = async (
   await _authenticationClient.initialize(config, _store, _cryptoUtils, instanceID);
 
   const _spaHelper = new SPAHelper<MainThreadClientConfig>(_authenticationClient);
-  const _dataLayer = _authenticationClient.getDataLayer();
+  const _dataLayer = _authenticationClient.getStorageManager();
   const _sessionManagementHelper = await SessionManagementHelper(
     async () => {
       return _authenticationClient.getSignOutURL();
@@ -393,8 +393,8 @@ export const MainThreadClient = async (
     return _authenticationHelper.getAccessToken();
   };
 
-  const getDataLayer = async (): Promise<StorageManager<MainThreadClientConfig>> => {
-    return _authenticationHelper.getDataLayer();
+  const getStorageManager = async (): Promise<StorageManager<MainThreadClientConfig>> => {
+    return _authenticationHelper.getStorageManager();
   };
 
   const getConfigData = async (): Promise<AuthClientConfig<MainThreadClientConfig>> => {
@@ -438,7 +438,7 @@ export const MainThreadClient = async (
     getBasicUserInfo,
     getConfigData,
     getCryptoHelper,
-    getDataLayer,
+    getStorageManager,
     getDecodedIDToken,
     getHttpClient,
     getIDToken,
diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
index 2fac47b7b..cbd78d147 100644
--- a/packages/browser/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -68,7 +68,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
 
   public constructor(authClient: AsgardeoAuthClient<T>, spaHelper: SPAHelper<T>) {
     this._authenticationClient = authClient;
-    this._storageManager = this._authenticationClient.getDataLayer();
+    this._storageManager = this._authenticationClient.getStorageManager();
     this._spaHelper = spaHelper;
     this._instanceID = this._authenticationClient.getInstanceID();
     this._isTokenRefreshing = false;
@@ -688,7 +688,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     return (await this._storageManager.getSessionData())?.access_token;
   }
 
-  public getDataLayer(): StorageManager<T> {
+  public getStorageManager(): StorageManager<T> {
     return this._storageManager;
   }
 
diff --git a/packages/browser/src/__legacy__/helpers/spa-helper.ts b/packages/browser/src/__legacy__/helpers/spa-helper.ts
index 8a5b61c8b..ab5085c6d 100644
--- a/packages/browser/src/__legacy__/helpers/spa-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/spa-helper.ts
@@ -27,13 +27,14 @@ export class SPAHelper<T extends MainThreadClientConfig | WebWorkerClientConfig>
 
   public constructor(authClient: AsgardeoAuthClient<T>) {
     this._authenticationClient = authClient;
-    this._storageManager = this._authenticationClient.getDataLayer();
+    this._storageManager = this._authenticationClient.getStorageManager();
   }
 
   public async refreshAccessTokenAutomatically(
     authenticationHelper: AuthenticationHelper<MainThreadClientConfig | WebWorkerClientConfig>,
   ): Promise<void> {
-    const shouldRefreshAutomatically: boolean = (await this._storageManager.getConfigData())?.periodicTokenRefresh ?? false;
+    const shouldRefreshAutomatically: boolean =
+      (await this._storageManager.getConfigData())?.periodicTokenRefresh ?? false;
 
     if (!shouldRefreshAutomatically) {
       return;
diff --git a/packages/browser/src/__legacy__/models/client.ts b/packages/browser/src/__legacy__/models/client.ts
index 5f9d2bea7..627ee398c 100755
--- a/packages/browser/src/__legacy__/models/client.ts
+++ b/packages/browser/src/__legacy__/models/client.ts
@@ -66,7 +66,7 @@ export interface MainThreadClientInterface {
   getIDToken(): Promise<string>;
   getOIDCServiceEndpoints(): Promise<OIDCEndpoints>;
   getAccessToken(): Promise<string>;
-  getDataLayer(): Promise<StorageManager<MainThreadClientConfig>>;
+  getStorageManager(): Promise<StorageManager<MainThreadClientConfig>>;
   isAuthenticated(): Promise<boolean>;
   updateConfig(config: Partial<AuthClientConfig<MainThreadClientConfig>>): Promise<void>;
   trySignInSilently(
diff --git a/packages/browser/src/__legacy__/worker/worker-core.ts b/packages/browser/src/__legacy__/worker/worker-core.ts
index 6fdc5ef9c..89935efe3 100755
--- a/packages/browser/src/__legacy__/worker/worker-core.ts
+++ b/packages/browser/src/__legacy__/worker/worker-core.ts
@@ -61,7 +61,7 @@ export const WebWorkerCore = async (
     _spaHelper,
   );
 
-  const _dataLayer = _authenticationClient.getDataLayer();
+  const _dataLayer = _authenticationClient.getStorageManager();
 
   const _httpClient: HttpClientInstance = HttpClient.getInstance();
 
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 8c3c7b898..9e8dffa36 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -132,14 +132,14 @@ export class AsgardeoAuthClient<T> {
    *
    * @example
    * ```
-   * const data = auth.getDataLayer();
+   * const data = auth.getStorageManager();
    * ```
    *
-   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getDataLayer}
+   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getStorageManager}
    *
    * @preserve
    */
-  public getDataLayer(): StorageManager<T> {
+  public getStorageManager(): StorageManager<T> {
     return this._storageManager;
   }
 
diff --git a/packages/node/src/__legacy__/client.ts b/packages/node/src/__legacy__/client.ts
index 040e7d7b3..9e1cf80cb 100644
--- a/packages/node/src/__legacy__/client.ts
+++ b/packages/node/src/__legacy__/client.ts
@@ -411,7 +411,7 @@ export class AsgardeoNodeClient<T> {
     return AsgardeoNodeClient.didSignOutFail(signOutRedirectURL);
   }
 
-  public async getDataLayer(): Promise<StorageManager<T>> {
-    return this._authCore.getDataLayer();
+  public async getStorageManager(): Promise<StorageManager<T>> {
+    return this._authCore.getStorageManager();
   }
 }
diff --git a/packages/node/src/__legacy__/core/authentication.ts b/packages/node/src/__legacy__/core/authentication.ts
index de07e0d80..71dfa2377 100644
--- a/packages/node/src/__legacy__/core/authentication.ts
+++ b/packages/node/src/__legacy__/core/authentication.ts
@@ -52,7 +52,7 @@ export class AsgardeoNodeCore<T> {
     this._cryptoUtils = new NodeCryptoUtils();
     this._auth = new AsgardeoAuthClient();
     this._auth.initialize(config, this._store, this._cryptoUtils);
-    this._storageManager = this._auth.getDataLayer();
+    this._storageManager = this._auth.getStorageManager();
     Logger.debug('Initialized AsgardeoAuthClient successfully');
   }
 
@@ -248,7 +248,7 @@ export class AsgardeoNodeCore<T> {
     return AsgardeoNodeCore.isSignOutSuccessful(signOutRedirectURL);
   }
 
-  public getDataLayer(): StorageManager<T> {
+  public getStorageManager(): StorageManager<T> {
     return this._storageManager;
   }
 }
diff --git a/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts b/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
index dbdfa7b7e..29e0521b7 100644
--- a/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
+++ b/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
@@ -214,7 +214,7 @@ export const useAuth = (): AuthInterface => {
     }
   };
 
-  const getDataLayer = async (): Promise<StorageManager<any> | null> => {
+  const getStorageManager = async (): Promise<StorageManager<any> | null> => {
     try {
       const response: Response = await fetch('/api/auth/get-data-layer', {
         method: 'GET',
@@ -232,7 +232,7 @@ export const useAuth = (): AuthInterface => {
   return {
     getAccessToken,
     getBasicUserInfo,
-    getDataLayer,
+    getStorageManager,
     getDecodedIDToken,
     getIdToken,
     getOIDCServiceEndpoints,
diff --git a/packages/nuxt/src/runtime/server/handler.ts b/packages/nuxt/src/runtime/server/handler.ts
index 2d7bd2327..8fa645bf3 100644
--- a/packages/nuxt/src/runtime/server/handler.ts
+++ b/packages/nuxt/src/runtime/server/handler.ts
@@ -273,7 +273,7 @@ export const AsgardeoAuthHandler = (config: AuthClientConfig, options?: Asgardeo
       }
     } else if (action === 'get-data-layer' && method === 'GET') {
       try {
-        const dataLayer: StorageManager<any> = await authClient.getDataLayer();
+        const dataLayer: StorageManager<any> = await authClient.getStorageManager();
         return dataLayer;
       } catch (error: any) {
         throw createError({
diff --git a/packages/nuxt/src/runtime/types.ts b/packages/nuxt/src/runtime/types.ts
index 40ec8c977..7f1334eb4 100644
--- a/packages/nuxt/src/runtime/types.ts
+++ b/packages/nuxt/src/runtime/types.ts
@@ -60,7 +60,7 @@ export interface ModuleOptions {
 export interface AuthInterface {
   getAccessToken: () => Promise<string | null>;
   getBasicUserInfo: () => Promise<BasicUserInfo | null>;
-  getDataLayer: () => Promise<StorageManager<any> | null>;
+  getStorageManager: () => Promise<StorageManager<any> | null>;
   getDecodedIDToken: () => Promise<IdTokenPayload | null>;
   getIdToken: () => Promise<string | null>;
   getOIDCServiceEndpoints: () => Promise<OIDCEndpoints | null>;

From 265de1fb38c26d1cc96399808979ac07be16e1f4 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Mon, 9 Jun 2025 13:32:06 +0530
Subject: [PATCH 017/131] chore: refactor imports to use new SessionData model
 and remove legacy data import

---
 packages/javascript/src/StorageManager.ts                      | 3 ++-
 packages/javascript/src/__legacy__/core/authentication-core.ts | 2 +-
 .../javascript/src/__legacy__/helpers/authentication-helper.ts | 3 ++-
 packages/javascript/src/__legacy__/models/index.ts             | 1 -
 .../src/{__legacy__/models/data.ts => models/session.ts}       | 0
 5 files changed, 5 insertions(+), 4 deletions(-)
 rename packages/javascript/src/{__legacy__/models/data.ts => models/session.ts} (100%)

diff --git a/packages/javascript/src/StorageManager.ts b/packages/javascript/src/StorageManager.ts
index e7a52f566..fe9ab05db 100644
--- a/packages/javascript/src/StorageManager.ts
+++ b/packages/javascript/src/StorageManager.ts
@@ -18,7 +18,8 @@
 
 import {Stores} from './models/store';
 import {Storage} from './models/store';
-import {AuthClientConfig, SessionData} from './__legacy__/models';
+import {AuthClientConfig} from './__legacy__/models';
+import {SessionData} from './models/session';
 import {TemporaryStore, TemporaryStoreValue} from './models/store';
 import {OIDCDiscoveryApiResponse} from './models/oidc-discovery';
 
diff --git a/packages/javascript/src/__legacy__/core/authentication-core.ts b/packages/javascript/src/__legacy__/core/authentication-core.ts
index 54fa48a83..305bbc7de 100644
--- a/packages/javascript/src/__legacy__/core/authentication-core.ts
+++ b/packages/javascript/src/__legacy__/core/authentication-core.ts
@@ -27,9 +27,9 @@ import {
   CustomGrantConfig,
   FetchRequestConfig,
   FetchResponse,
-  SessionData,
   StrictAuthClientConfig,
 } from '../models';
+import {SessionData} from '../../models/session';
 import {AuthorizeRequestUrlParams} from '../../models/oauth-request';
 import {TokenResponse, IdTokenPayload} from '../../models/token';
 import {Crypto} from '../../models/crypto';
diff --git a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
index b74ea662b..5646afe70 100644
--- a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
@@ -19,7 +19,8 @@
 import {IsomorphicCrypto} from '../../IsomorphicCrypto';
 import StorageManager from '../../StorageManager';
 import {AsgardeoAuthException} from '../exception';
-import {AuthClientConfig, AuthenticatedUserInfo, SessionData, StrictAuthClientConfig} from '../models';
+import {AuthClientConfig, AuthenticatedUserInfo, StrictAuthClientConfig} from '../models';
+import {SessionData} from '../../models/session';
 import {JWKInterface} from '../../models/crypto';
 import {TokenResponse, AccessTokenApiResponse} from '../../models/token';
 import {IdTokenPayload} from '../../models/token';
diff --git a/packages/javascript/src/__legacy__/models/index.ts b/packages/javascript/src/__legacy__/models/index.ts
index 2733c1370..d14934120 100644
--- a/packages/javascript/src/__legacy__/models/index.ts
+++ b/packages/javascript/src/__legacy__/models/index.ts
@@ -17,7 +17,6 @@
  */
 
 export * from './client-config';
-export * from './data';
 export * from './custom-grant';
 export * from './user';
 export * from './fetch';
diff --git a/packages/javascript/src/__legacy__/models/data.ts b/packages/javascript/src/models/session.ts
similarity index 100%
rename from packages/javascript/src/__legacy__/models/data.ts
rename to packages/javascript/src/models/session.ts

From eaebb070e922743da3b67744e4ed8d0b952d5acf Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Mon, 9 Jun 2025 14:35:07 +0530
Subject: [PATCH 018/131] chore(javascript): remove legacy authentication core
 and index files

- Deleted the `authentication-core.ts` file which contained the core authentication logic.
- Removed the `index.ts` file that exported the authentication core.
- Updated the main index file to include `SessionData` from the models.
---
 packages/javascript/src/__legacy__/client.ts  | 610 +++++++++++++++--
 .../__legacy__/core/authentication-core.ts    | 636 ------------------
 .../javascript/src/__legacy__/core/index.ts   |  19 -
 packages/javascript/src/index.ts              |   1 +
 4 files changed, 569 insertions(+), 697 deletions(-)
 delete mode 100644 packages/javascript/src/__legacy__/core/authentication-core.ts
 delete mode 100644 packages/javascript/src/__legacy__/core/index.ts

diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 9e8dffa36..474b0fa78 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -16,9 +16,16 @@
  * under the License.
  */
 
-import {AuthenticationCore} from './core';
 import StorageManager from '../StorageManager';
-import {AuthClientConfig, BasicUserInfo, CustomGrantConfig, FetchResponse} from './models';
+import {
+  AuthClientConfig,
+  AuthenticatedUserInfo,
+  BasicUserInfo,
+  CustomGrantConfig,
+  FetchRequestConfig,
+  FetchResponse,
+  StrictAuthClientConfig,
+} from './models';
 import {ExtendedAuthorizeRequestUrlParams} from '../models/oauth-request';
 import {Crypto} from '../models/crypto';
 import {TokenResponse, IdTokenPayload} from '../models/token';
@@ -28,6 +35,17 @@ import ScopeConstants from '../constants/ScopeConstants';
 import OIDCDiscoveryConstants from '../constants/OIDCDiscoveryConstants';
 import OIDCRequestConstants from '../constants/OIDCRequestConstants';
 import {IsomorphicCrypto} from '../IsomorphicCrypto';
+import extractPkceStorageKeyFromState from '../utils/extractPkceStorageKeyFromState';
+import generateStateParamForRequestCorrelation from '../utils/generateStateParamForRequestCorrelation';
+import {AsgardeoAuthException} from './exception';
+import {AuthenticationHelper} from './helpers';
+import {SessionData} from '../models/session';
+import {AuthorizeRequestUrlParams} from '../models/oauth-request';
+import {TemporaryStore} from '../models/store';
+import generatePkceStorageKey from '../utils/generatePkceStorageKey';
+import {OIDCDiscoveryApiResponse} from '../models/oidc-discovery';
+import getAuthorizeRequestUrlParams from '../utils/getAuthorizeRequestUrlParams';
+import PKCEConstants from '../constants/PKCEConstants';
 
 /**
  * Default configurations.
@@ -47,10 +65,17 @@ const DefaultConfig: Partial<AuthClientConfig<unknown>> = {
  */
 export class AsgardeoAuthClient<T> {
   private _storageManager!: StorageManager<T>;
-  private _authenticationCore!: AuthenticationCore<T>;
+  private _config: () => Promise<AuthClientConfig>;
+  private _oidcProviderMetaData: () => Promise<OIDCDiscoveryApiResponse>;
+  private _authenticationHelper: AuthenticationHelper<T>;
+  private _cryptoUtils: Crypto;
+  private _cryptoHelper: IsomorphicCrypto;
 
   private static _instanceID: number;
-  static _authenticationCore: any;
+
+  // FIXME: Validate this.
+  // Ref: https://github.com/asgardeo/asgardeo-auth-js-core/pull/205
+  static _authenticationHelper: any;
 
   /**
    * This is the constructor method that returns an instance of the .
@@ -112,8 +137,15 @@ export class AsgardeoAuthClient<T> {
       this._storageManager = new StorageManager<T>(`instance_${AsgardeoAuthClient._instanceID}-${clientId}`, store);
     }
 
-    this._authenticationCore = new AuthenticationCore(this._storageManager, cryptoUtils);
-    AsgardeoAuthClient._authenticationCore = new AuthenticationCore(this._storageManager, cryptoUtils);
+    this._cryptoUtils = cryptoUtils;
+    this._cryptoHelper = new IsomorphicCrypto(cryptoUtils);
+    this._authenticationHelper = new AuthenticationHelper(this._storageManager, this._cryptoHelper);
+    this._config = async () => await this._storageManager.getConfigData();
+    this._oidcProviderMetaData = async () => await this._storageManager.getOIDCProviderMetaData();
+
+    // FIXME: Validate this.
+    // Ref: https://github.com/asgardeo/asgardeo-auth-js-core/pull/205
+    AsgardeoAuthClient._authenticationHelper = this._authenticationHelper;
 
     await this._storageManager.setConfigData({
       ...DefaultConfig,
@@ -187,16 +219,65 @@ export class AsgardeoAuthClient<T> {
 
     delete authRequestConfig?.forceInit;
 
+    const __TODO__ = async () => {
+      const authorizeEndpoint: string = (await this._storageManager.getOIDCProviderMetaDataParameter(
+        OIDCDiscoveryConstants.Storage.StorageKeys.Endpoints.AUTHORIZATION as keyof OIDCDiscoveryApiResponse,
+      )) as string;
+
+      if (!authorizeEndpoint || authorizeEndpoint.trim().length === 0) {
+        throw new AsgardeoAuthException(
+          'JS-AUTH_CORE-GAU-NF01',
+          'No authorization endpoint found.',
+          'No authorization endpoint was found in the OIDC provider meta data from the well-known endpoint ' +
+            'or the authorization endpoint passed to the SDK is empty.',
+        );
+      }
+
+      const authorizeRequest: URL = new URL(authorizeEndpoint);
+      const configData: StrictAuthClientConfig = await this._config();
+      const tempStore: TemporaryStore = await this._storageManager.getTemporaryData(userID);
+      const pkceKey: string = await generatePkceStorageKey(tempStore);
+
+      let codeVerifier: string | undefined;
+      let codeChallenge: string | undefined;
+
+      if (configData.enablePKCE) {
+        codeVerifier = this._cryptoHelper?.getCodeVerifier();
+        codeChallenge = this._cryptoHelper?.getCodeChallenge(codeVerifier);
+        await this._storageManager.setTemporaryDataParameter(pkceKey, codeVerifier, userID);
+      }
+
+      const authorizeRequestParams: Map<string, string> = getAuthorizeRequestUrlParams(
+        {
+          redirectUri: configData.signInRedirectURL,
+          clientId: configData.clientID,
+          scope: configData.scope as unknown as any,
+          responseMode: configData.responseMode,
+          codeChallengeMethod: PKCEConstants.DEFAULT_CODE_CHALLENGE_METHOD,
+          codeChallenge,
+          prompt: configData.prompt,
+        },
+        {key: pkceKey},
+        authRequestConfig,
+      );
+
+      for (const [key, value] of authorizeRequestParams.entries()) {
+        authorizeRequest.searchParams.append(key, value);
+      }
+
+      return authorizeRequest.toString();
+    };
+
     if (
       await this._storageManager.getTemporaryDataParameter(
         OIDCDiscoveryConstants.Storage.StorageKeys.OPENID_PROVIDER_CONFIG_INITIATED,
       )
     ) {
-      return this._authenticationCore.getAuthorizationURL(authRequestConfig, userID);
+      return __TODO__();
     }
 
-    return this._authenticationCore.getOIDCProviderMetaData(config?.forceInit as boolean).then(() => {
-      return this._authenticationCore.getAuthorizationURL(authRequestConfig, userID);
+    return this.getOIDCProviderMetaData(config?.forceInit as boolean).then(() => {
+      return __TODO__();
     });
   }
 
@@ -234,31 +315,169 @@ export class AsgardeoAuthClient<T> {
       params: Record<string, unknown>;
     },
   ): Promise<TokenResponse> {
+    const __TODO__ = async () => {
+      const tokenEndpoint: string | undefined = (await this._oidcProviderMetaData()).token_endpoint;
+      const configData: StrictAuthClientConfig = await this._config();
+
+      if (!tokenEndpoint || tokenEndpoint.trim().length === 0) {
+        throw new AsgardeoAuthException(
+          'JS-AUTH_CORE-RAT1-NF01',
+          'Token endpoint not found.',
+          'No token endpoint was found in the OIDC provider meta data returned by the well-known endpoint ' +
+            'or the token endpoint passed to the SDK is empty.',
+        );
+      }
+
+      sessionState &&
+        (await this._storageManager.setSessionDataParameter(
+          OIDCRequestConstants.Params.SESSION_STATE as keyof SessionData,
+          sessionState,
+          userID,
+        ));
+
+      const body: URLSearchParams = new URLSearchParams();
+
+      body.set('client_id', configData.clientID);
+
+      if (configData.clientSecret && configData.clientSecret.trim().length > 0) {
+        body.set('client_secret', configData.clientSecret);
+      }
+
+      const code: string = authorizationCode;
+
+      body.set('code', code);
+
+      body.set('grant_type', 'authorization_code');
+      body.set('redirect_uri', configData.signInRedirectURL);
+
+      if (tokenRequestConfig?.params) {
+        Object.entries(tokenRequestConfig.params).forEach(([key, value]: [key: string, value: unknown]) => {
+          body.append(key, value as string);
+        });
+      }
+
+      if (configData.enablePKCE) {
+        body.set(
+          'code_verifier',
+          `${await this._storageManager.getTemporaryDataParameter(extractPkceStorageKeyFromState(state), userID)}`,
+        );
+
+        await this._storageManager.removeTemporaryDataParameter(extractPkceStorageKeyFromState(state), userID);
+      }
+
+      let tokenResponse: Response;
+
+      try {
+        tokenResponse = await fetch(tokenEndpoint, {
+          body: body,
+          credentials: configData.sendCookiesInRequests ? 'include' : 'same-origin',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/x-www-form-urlencoded',
+          },
+          method: 'POST',
+        });
+      } catch (error: any) {
+        throw new AsgardeoAuthException(
+          'JS-AUTH_CORE-RAT1-NE02',
+          'Requesting access token failed',
+          error ?? 'The request to get the access token from the server failed.',
+        );
+      }
+
+      if (!tokenResponse.ok) {
+        throw new AsgardeoAuthException(
+          'JS-AUTH_CORE-RAT1-HE03',
+          `Requesting access token failed with ${tokenResponse.statusText}`,
+          (await tokenResponse.json()) as string,
+        );
+      }
+
+      return await this._authenticationHelper.handleTokenResponse(tokenResponse, userID);
+    };
+
     if (
       await this._storageManager.getTemporaryDataParameter(
         OIDCDiscoveryConstants.Storage.StorageKeys.OPENID_PROVIDER_CONFIG_INITIATED,
       )
     ) {
-      return this._authenticationCore.requestAccessToken(
-        authorizationCode,
-        sessionState,
-        state,
-        userID,
-        tokenRequestConfig,
-      );
+      return __TODO__();
     }
 
-    return this._authenticationCore.getOIDCProviderMetaData(false).then(() => {
-      return this._authenticationCore.requestAccessToken(
-        authorizationCode,
-        sessionState,
-        state,
-        userID,
-        tokenRequestConfig,
-      );
+    return this.getOIDCProviderMetaData(false).then(() => {
+      return __TODO__();
     });
   }
 
+  public async getOIDCProviderMetaData(forceInit: boolean): Promise<void> {
+    const configData: StrictAuthClientConfig = await this._config();
+
+    if (
+      !forceInit &&
+      (await this._storageManager.getTemporaryDataParameter(
+        OIDCDiscoveryConstants.Storage.StorageKeys.OPENID_PROVIDER_CONFIG_INITIATED,
+      ))
+    ) {
+      return Promise.resolve();
+    }
+
+    const wellKnownEndpoint: string = (configData as any).wellKnownEndpoint;
+
+    if (wellKnownEndpoint) {
+      let response: Response;
+
+      try {
+        response = await fetch(wellKnownEndpoint);
+        if (response.status !== 200 || !response.ok) {
+          throw new Error();
+        }
+      } catch {
+        throw new AsgardeoAuthException(
+          'JS-AUTH_CORE-GOPMD-HE01',
+          'Invalid well-known response',
+          'The well known endpoint response has been failed with an error.',
+        );
+      }
+
+      await this._storageManager.setOIDCProviderMetaData(
+        await this._authenticationHelper.resolveEndpoints(await response.json()),
+      );
+      await this._storageManager.setTemporaryDataParameter(
+        OIDCDiscoveryConstants.Storage.StorageKeys.OPENID_PROVIDER_CONFIG_INITIATED,
+        true,
+      );
+
+      return Promise.resolve();
+    } else if ((configData as any).baseUrl) {
+      try {
+        await this._storageManager.setOIDCProviderMetaData(
+          await this._authenticationHelper.resolveEndpointsByBaseURL(),
+        );
+      } catch (error: any) {
+        throw new AsgardeoAuthException(
+          'JS-AUTH_CORE-GOPMD-IV02',
+          'Resolving endpoints failed.',
+          error ?? 'Resolving endpoints by base url failed.',
+        );
+      }
+      await this._storageManager.setTemporaryDataParameter(
+        OIDCDiscoveryConstants.Storage.StorageKeys.OPENID_PROVIDER_CONFIG_INITIATED,
+        true,
+      );
+
+      return Promise.resolve();
+    } else {
+      await this._storageManager.setOIDCProviderMetaData(await this._authenticationHelper.resolveEndpointsExplicitly());
+
+      await this._storageManager.setTemporaryDataParameter(
+        OIDCDiscoveryConstants.Storage.StorageKeys.OPENID_PROVIDER_CONFIG_INITIATED,
+        true,
+      );
+
+      return Promise.resolve();
+    }
+  }
+
   /**
    * This method returns the sign-out URL.
    *
@@ -279,7 +498,50 @@ export class AsgardeoAuthClient<T> {
    * @preserve
    */
   public async getSignOutURL(userID?: string): Promise<string> {
-    return this._authenticationCore.getSignOutURL(userID);
+    const logoutEndpoint: string | undefined = (await this._oidcProviderMetaData())?.end_session_endpoint;
+    const configData: StrictAuthClientConfig = await this._config();
+
+    if (!logoutEndpoint || logoutEndpoint.trim().length === 0) {
+      throw new AsgardeoAuthException(
+        'JS-AUTH_CORE-GSOU-NF01',
+        'Sign-out endpoint not found.',
+        'No sign-out endpoint was found in the OIDC provider meta data returned by the well-known endpoint ' +
+          'or the sign-out endpoint passed to the SDK is empty.',
+      );
+    }
+
+    const callbackURL: string = configData?.signOutRedirectURL ?? configData?.signInRedirectURL;
+
+    if (!callbackURL || callbackURL.trim().length === 0) {
+      throw new AsgardeoAuthException(
+        'JS-AUTH_CORE-GSOU-NF03',
+        'No sign-out redirect URL found.',
+        'The sign-out redirect URL cannot be found or the URL passed to the SDK is empty. ' +
+          'No sign-in redirect URL has been found either. ',
+      );
+    }
+    const queryParams: URLSearchParams = new URLSearchParams();
+
+    queryParams.set('post_logout_redirect_uri', callbackURL);
+
+    if (configData.sendIdTokenInLogoutRequest) {
+      const idToken: string = (await this._storageManager.getSessionData(userID))?.id_token;
+
+      if (!idToken || idToken.trim().length === 0) {
+        throw new AsgardeoAuthException(
+          'JS-AUTH_CORE-GSOU-NF02',
+          'ID token not found.',
+          'No ID token could be found. Either the session information is lost or you have not signed in.',
+        );
+      }
+      queryParams.set('id_token_hint', idToken);
+    } else {
+      queryParams.set('client_id', configData.clientID);
+    }
+
+    queryParams.set('state', OIDCRequestConstants.Params.SIGN_OUT_SUCCESS);
+
+    return `${logoutEndpoint}?${queryParams.toString()}`;
   }
 
   /**
@@ -297,7 +559,20 @@ export class AsgardeoAuthClient<T> {
    * @preserve
    */
   public async getOIDCServiceEndpoints(): Promise<Partial<OIDCEndpoints>> {
-    return this._authenticationCore.getOIDCServiceEndpoints();
+    const oidcProviderMetaData: OIDCDiscoveryApiResponse = await this._oidcProviderMetaData();
+
+    return {
+      authorizationEndpoint: oidcProviderMetaData.authorization_endpoint ?? '',
+      checkSessionIframe: oidcProviderMetaData.check_session_iframe ?? '',
+      endSessionEndpoint: oidcProviderMetaData.end_session_endpoint ?? '',
+      introspectionEndpoint: oidcProviderMetaData.introspection_endpoint ?? '',
+      issuer: oidcProviderMetaData.issuer ?? '',
+      jwksUri: oidcProviderMetaData.jwks_uri ?? '',
+      registrationEndpoint: oidcProviderMetaData.registration_endpoint ?? '',
+      revocationEndpoint: oidcProviderMetaData.revocation_endpoint ?? '',
+      tokenEndpoint: oidcProviderMetaData.token_endpoint ?? '',
+      userinfoEndpoint: oidcProviderMetaData.userinfo_endpoint ?? '',
+    };
   }
 
   /**
@@ -318,7 +593,10 @@ export class AsgardeoAuthClient<T> {
    * @preserve
    */
   public async getDecodedIDToken(userID?: string): Promise<IdTokenPayload> {
-    return this._authenticationCore.getDecodedIDToken(userID);
+    const idToken: string = (await this._storageManager.getSessionData(userID)).id_token;
+    const payload: IdTokenPayload = this._cryptoHelper.decodeIDToken(idToken);
+
+    return payload;
   }
 
   /**
@@ -339,7 +617,7 @@ export class AsgardeoAuthClient<T> {
    * @preserve
    */
   public async getIDToken(userID?: string): Promise<string> {
-    return this._authenticationCore.getIDToken(userID);
+    return (await this._storageManager.getSessionData(userID)).id_token;
   }
 
   /**
@@ -360,7 +638,25 @@ export class AsgardeoAuthClient<T> {
    * @preserve
    */
   public async getBasicUserInfo(userID?: string): Promise<BasicUserInfo> {
-    return this._authenticationCore.getBasicUserInfo(userID);
+    const sessionData: SessionData = await this._storageManager.getSessionData(userID);
+    const authenticatedUser: AuthenticatedUserInfo = this._authenticationHelper.getAuthenticatedUserInfo(
+      sessionData?.id_token,
+    );
+
+    let basicUserInfo: BasicUserInfo = {
+      allowedScopes: sessionData.scope,
+      sessionState: sessionData.session_state,
+    };
+
+    Object.keys(authenticatedUser).forEach((key: string) => {
+      if (authenticatedUser[key] === undefined || authenticatedUser[key] === '' || authenticatedUser[key] === null) {
+        delete authenticatedUser[key];
+      }
+    });
+
+    basicUserInfo = {...basicUserInfo, ...authenticatedUser};
+
+    return basicUserInfo;
   }
 
   /**
@@ -378,7 +674,7 @@ export class AsgardeoAuthClient<T> {
    * @preserve
    */
   public async getCryptoHelper(): Promise<IsomorphicCrypto> {
-    return this._authenticationCore.getCryptoHelper();
+    return this._cryptoHelper;
   }
 
   /**
@@ -404,8 +700,60 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public revokeAccessToken(userID?: string): Promise<FetchResponse> {
-    return this._authenticationCore.revokeAccessToken(userID);
+  public async revokeAccessToken(userID?: string): Promise<FetchResponse> {
+    const revokeTokenEndpoint: string | undefined = (await this._oidcProviderMetaData()).revocation_endpoint;
+    const configData: StrictAuthClientConfig = await this._config();
+
+    if (!revokeTokenEndpoint || revokeTokenEndpoint.trim().length === 0) {
+      throw new AsgardeoAuthException(
+        'JS-AUTH_CORE-RAT3-NF01',
+        'No revoke access token endpoint found.',
+        'No revoke access token endpoint was found in the OIDC provider meta data returned by ' +
+          'the well-known endpoint or the revoke access token endpoint passed to the SDK is empty.',
+      );
+    }
+
+    const body: string[] = [];
+
+    body.push(`client_id=${configData.clientID}`);
+    body.push(`token=${(await this._storageManager.getSessionData(userID)).access_token}`);
+    body.push('token_type_hint=access_token');
+
+    if (configData.clientSecret && configData.clientSecret.trim().length > 0) {
+      body.push(`client_secret=${configData.clientSecret}`);
+    }
+
+    let response: Response;
+
+    try {
+      response = await fetch(revokeTokenEndpoint, {
+        body: body.join('&'),
+        credentials: configData.sendCookiesInRequests ? 'include' : 'same-origin',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        method: 'POST',
+      });
+    } catch (error: any) {
+      throw new AsgardeoAuthException(
+        'JS-AUTH_CORE-RAT3-NE02',
+        'The request to revoke access token failed.',
+        error ?? 'The request sent to revoke the access token failed.',
+      );
+    }
+
+    if (response.status !== 200 || !response.ok) {
+      throw new AsgardeoAuthException(
+        'JS-AUTH_CORE-RAT3-HE03',
+        `Invalid response status received for revoke access token request (${response.statusText}).`,
+        (await response.json()) as string,
+      );
+    }
+
+    this._authenticationHelper.clearUserSessionData(userID);
+
+    return Promise.resolve(response);
   }
 
   /**
@@ -430,8 +778,68 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public refreshAccessToken(userID?: string): Promise<TokenResponse> {
-    return this._authenticationCore.refreshAccessToken(userID);
+  public async refreshAccessToken(userID?: string): Promise<TokenResponse> {
+    const tokenEndpoint: string | undefined = (await this._oidcProviderMetaData()).token_endpoint;
+    const configData: StrictAuthClientConfig = await this._config();
+    const sessionData: SessionData = await this._storageManager.getSessionData(userID);
+
+    if (!sessionData.refresh_token) {
+      throw new AsgardeoAuthException(
+        'JS-AUTH_CORE-RAT2-NF01',
+        'No refresh token found.',
+        "There was no refresh token found. Asgardeo doesn't return a " +
+          'refresh token if the refresh token grant is not enabled.',
+      );
+    }
+
+    if (!tokenEndpoint || tokenEndpoint.trim().length === 0) {
+      throw new AsgardeoAuthException(
+        'JS-AUTH_CORE-RAT2-NF02',
+        'No refresh token endpoint found.',
+        'No refresh token endpoint was in the OIDC provider meta data returned by the well-known ' +
+          'endpoint or the refresh token endpoint passed to the SDK is empty.',
+      );
+    }
+
+    const body: string[] = [];
+
+    body.push(`client_id=${configData.clientID}`);
+    body.push(`refresh_token=${sessionData.refresh_token}`);
+    body.push('grant_type=refresh_token');
+
+    if (configData.clientSecret && configData.clientSecret.trim().length > 0) {
+      body.push(`client_secret=${configData.clientSecret}`);
+    }
+
+    let tokenResponse: Response;
+
+    try {
+      tokenResponse = await fetch(tokenEndpoint, {
+        body: body.join('&'),
+        credentials: configData.sendCookiesInRequests ? 'include' : 'same-origin',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        method: 'POST',
+      });
+    } catch (error: any) {
+      throw new AsgardeoAuthException(
+        'JS-AUTH_CORE-RAT2-NR03',
+        'Refresh access token request failed.',
+        error ?? 'The request to refresh the access token failed.',
+      );
+    }
+
+    if (!tokenResponse.ok) {
+      throw new AsgardeoAuthException(
+        'JS-AUTH_CORE-RAT2-HE04',
+        `Refreshing access token failed with ${tokenResponse.statusText}`,
+        (await tokenResponse.json()) as string,
+      );
+    }
+
+    return this._authenticationHelper.handleTokenResponse(tokenResponse, userID);
   }
 
   /**
@@ -452,7 +860,27 @@ export class AsgardeoAuthClient<T> {
    * @preserve
    */
   public async getAccessToken(userID?: string): Promise<string> {
-    return this._authenticationCore.getAccessToken(userID);
+    return (await this._storageManager.getSessionData(userID))?.access_token;
+  }
+
+  /**
+   * The created timestamp of the token response in milliseconds.
+   *
+   * @param userID - User ID
+   * @returns Created at timestamp of the token response in milliseconds.
+   */
+  public async getCreatedAt(userID?: string): Promise<number> {
+    return (await this._storageManager.getSessionData(userID))?.created_at;
+  }
+
+  /**
+   * The expires timestamp of the token response in seconds.
+   *
+   * @param userID - User ID
+   * @returns Expires in timestamp of the token response in seconds.
+   */
+  public async getExpiresIn(userID?: string): Promise<string> {
+    return (await this._storageManager.getSessionData(userID))?.expires_in;
   }
 
   /**
@@ -493,8 +921,82 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public requestCustomGrant(config: CustomGrantConfig, userID?: string): Promise<TokenResponse | FetchResponse> {
-    return this._authenticationCore.requestCustomGrant(config, userID);
+  public async requestCustomGrant(config: CustomGrantConfig, userID?: string): Promise<TokenResponse | FetchResponse> {
+    const oidcProviderMetadata: OIDCDiscoveryApiResponse = await this._oidcProviderMetaData();
+    const configData: StrictAuthClientConfig = await this._config();
+
+    let tokenEndpoint: string | undefined;
+
+    if (config.tokenEndpoint && config.tokenEndpoint.trim().length !== 0) {
+      tokenEndpoint = config.tokenEndpoint;
+    } else {
+      tokenEndpoint = oidcProviderMetadata.token_endpoint;
+    }
+
+    if (!tokenEndpoint || tokenEndpoint.trim().length === 0) {
+      throw new AsgardeoAuthException(
+        'JS-AUTH_CORE-RCG-NF01',
+        'Token endpoint not found.',
+        'No token endpoint was found in the OIDC provider meta data returned by the well-known endpoint ' +
+          'or the token endpoint passed to the SDK is empty.',
+      );
+    }
+
+    const data: string[] = await Promise.all(
+      Object.entries(config.data).map(async ([key, value]: [key: string, value: any]) => {
+        const newValue: string = await this._authenticationHelper.replaceCustomGrantTemplateTags(
+          value as string,
+          userID,
+        );
+
+        return `${key}=${newValue}`;
+      }),
+    );
+
+    let requestHeaders: Record<string, any> = {
+      Accept: 'application/json',
+      'Content-Type': 'application/x-www-form-urlencoded',
+    };
+
+    if (config.attachToken) {
+      requestHeaders = {
+        ...requestHeaders,
+        Authorization: `Bearer ${(await this._storageManager.getSessionData(userID)).access_token}`,
+      };
+    }
+
+    const requestConfig: FetchRequestConfig = {
+      body: data.join('&'),
+      credentials: configData.sendCookiesInRequests ? 'include' : 'same-origin',
+      headers: new Headers(requestHeaders),
+      method: 'POST',
+    };
+
+    let response: Response;
+
+    try {
+      response = await fetch(tokenEndpoint, requestConfig);
+    } catch (error: any) {
+      throw new AsgardeoAuthException(
+        'JS-AUTH_CORE-RCG-NE02',
+        'The custom grant request failed.',
+        error ?? 'The request sent to get the custom grant failed.',
+      );
+    }
+
+    if (response.status !== 200 || !response.ok) {
+      throw new AsgardeoAuthException(
+        'JS-AUTH_CORE-RCG-HE03',
+        `Invalid response status received for the custom grant request. (${response.statusText})`,
+        (await response.json()) as string,
+      );
+    }
+
+    if (config.returnsSession) {
+      return this._authenticationHelper.handleTokenResponse(response, userID);
+    } else {
+      return Promise.resolve((await response.json()) as TokenResponse | FetchResponse);
+    }
   }
 
   /**
@@ -515,7 +1017,27 @@ export class AsgardeoAuthClient<T> {
    * @preserve
    */
   public async isAuthenticated(userID?: string): Promise<boolean> {
-    return this._authenticationCore.isAuthenticated(userID);
+    const isAccessTokenAvailable: boolean = Boolean(await this.getAccessToken(userID));
+
+    // Check if the access token is expired.
+    const createdAt: number = await this.getCreatedAt(userID);
+
+    // Get the expires in value.
+    const expiresInString: string = await this.getExpiresIn(userID);
+
+    // If the expires in value is not available, the token is invalid and the user is not authenticated.
+    if (!expiresInString) {
+      return false;
+    }
+
+    // Convert to milliseconds.
+    const expiresIn: number = parseInt(expiresInString) * 1000;
+    const currentTime: number = new Date().getTime();
+    const isAccessTokenValid: boolean = createdAt + expiresIn > currentTime;
+
+    const isAuthenticated: boolean = isAccessTokenAvailable && isAccessTokenValid;
+
+    return isAuthenticated;
   }
 
   /**
@@ -537,7 +1059,10 @@ export class AsgardeoAuthClient<T> {
    * @preserve
    */
   public async getPKCECode(state: string, userID?: string): Promise<string> {
-    return this._authenticationCore.getPKCECode(state, userID);
+    return (await this._storageManager.getTemporaryDataParameter(
+      extractPkceStorageKeyFromState(state),
+      userID,
+    )) as string;
   }
 
   /**
@@ -558,7 +1083,7 @@ export class AsgardeoAuthClient<T> {
    * @preserve
    */
   public async setPKCECode(pkce: string, state: string, userID?: string): Promise<void> {
-    await this._authenticationCore.setPKCECode(pkce, state, userID);
+    return await this._storageManager.setTemporaryDataParameter(extractPkceStorageKeyFromState(state), pkce, userID);
   }
 
   /**
@@ -625,10 +1150,11 @@ export class AsgardeoAuthClient<T> {
    * @preserve
    */
   public async updateConfig(config: Partial<AuthClientConfig<T>>): Promise<void> {
-    await this._authenticationCore.updateConfig(config);
+    await this._storageManager.setConfigData(config);
+    await this.getOIDCProviderMetaData(true);
   }
 
   public static async clearUserSessionData(userID?: string): Promise<void> {
-    await this._authenticationCore.clearUserSessionData(userID);
+    await this._authenticationHelper.clearUserSessionData(userID);
   }
 }
diff --git a/packages/javascript/src/__legacy__/core/authentication-core.ts b/packages/javascript/src/__legacy__/core/authentication-core.ts
deleted file mode 100644
index 305bbc7de..000000000
--- a/packages/javascript/src/__legacy__/core/authentication-core.ts
+++ /dev/null
@@ -1,636 +0,0 @@
-/**
- * Copyright (c) 2020, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import extractPkceStorageKeyFromState from '../../utils/extractPkceStorageKeyFromState';
-import generateStateParamForRequestCorrelation from '../../utils/generateStateParamForRequestCorrelation';
-import StorageManager from '../../StorageManager';
-import {AsgardeoAuthException} from '../exception';
-import {AuthenticationHelper} from '../helpers';
-import {
-  AuthClientConfig,
-  AuthenticatedUserInfo,
-  BasicUserInfo,
-  CustomGrantConfig,
-  FetchRequestConfig,
-  FetchResponse,
-  StrictAuthClientConfig,
-} from '../models';
-import {SessionData} from '../../models/session';
-import {AuthorizeRequestUrlParams} from '../../models/oauth-request';
-import {TokenResponse, IdTokenPayload} from '../../models/token';
-import {Crypto} from '../../models/crypto';
-import {TemporaryStore} from '../../models/store';
-import {OIDCEndpoints} from '../../models/oidc-endpoints';
-import generatePkceStorageKey from '../../utils/generatePkceStorageKey';
-import ScopeConstants from '../../constants/ScopeConstants';
-import OIDCDiscoveryConstants from '../../constants/OIDCDiscoveryConstants';
-import OIDCRequestConstants from '../../constants/OIDCRequestConstants';
-import {OIDCDiscoveryApiResponse} from '../../models/oidc-discovery';
-import {IsomorphicCrypto} from '../../IsomorphicCrypto';
-import getAuthorizeRequestUrlParams from '../../utils/getAuthorizeRequestUrlParams';
-import PKCEConstants from '../../constants/PKCEConstants';
-
-export class AuthenticationCore<T> {
-  private _storageManager: StorageManager<T>;
-  private _config: () => Promise<AuthClientConfig>;
-  private _oidcProviderMetaData: () => Promise<OIDCDiscoveryApiResponse>;
-  private _authenticationHelper: AuthenticationHelper<T>;
-  private _cryptoUtils: Crypto;
-  private _cryptoHelper: IsomorphicCrypto;
-
-  public constructor(storageManager: StorageManager<T>, cryptoUtils: Crypto) {
-    this._cryptoUtils = cryptoUtils;
-    this._cryptoHelper = new IsomorphicCrypto(cryptoUtils);
-    this._authenticationHelper = new AuthenticationHelper(storageManager, this._cryptoHelper);
-    this._storageManager = storageManager;
-    this._config = async () => await this._storageManager.getConfigData();
-    this._oidcProviderMetaData = async () => await this._storageManager.getOIDCProviderMetaData();
-  }
-
-  public async getAuthorizationURL(config?: AuthorizeRequestUrlParams, userID?: string): Promise<string> {
-    const authorizeEndpoint: string = (await this._storageManager.getOIDCProviderMetaDataParameter(
-      OIDCDiscoveryConstants.Storage.StorageKeys.Endpoints.AUTHORIZATION as keyof OIDCDiscoveryApiResponse,
-    )) as string;
-
-    if (!authorizeEndpoint || authorizeEndpoint.trim().length === 0) {
-      throw new AsgardeoAuthException(
-        'JS-AUTH_CORE-GAU-NF01',
-        'No authorization endpoint found.',
-        'No authorization endpoint was found in the OIDC provider meta data from the well-known endpoint ' +
-          'or the authorization endpoint passed to the SDK is empty.',
-      );
-    }
-
-    const authorizeRequest: URL = new URL(authorizeEndpoint);
-    const configData: StrictAuthClientConfig = await this._config();
-    const tempStore: TemporaryStore = await this._storageManager.getTemporaryData(userID);
-    const pkceKey: string = await generatePkceStorageKey(tempStore);
-
-    let codeVerifier: string | undefined;
-    let codeChallenge: string | undefined;
-
-    if (configData.enablePKCE) {
-      codeVerifier = this._cryptoHelper?.getCodeVerifier();
-      codeChallenge = this._cryptoHelper?.getCodeChallenge(codeVerifier);
-      await this._storageManager.setTemporaryDataParameter(pkceKey, codeVerifier, userID);
-    }
-
-    const authorizeRequestParams: Map<string, string> = getAuthorizeRequestUrlParams(
-      {
-        redirectUri: configData.signInRedirectURL,
-        clientId: configData.clientID,
-        scope: configData.scope as unknown as any,
-        responseMode: configData.responseMode,
-        codeChallengeMethod: PKCEConstants.DEFAULT_CODE_CHALLENGE_METHOD,
-        codeChallenge,
-        prompt: configData.prompt,
-      },
-      {key: pkceKey},
-      config,
-    );
-
-    for (const [key, value] of authorizeRequestParams.entries()) {
-      authorizeRequest.searchParams.append(key, value);
-    }
-
-    return authorizeRequest.toString();
-  }
-
-  public async requestAccessToken(
-    authorizationCode: string,
-    sessionState: string,
-    state: string,
-    userID?: string,
-    tokenRequestConfig?: {
-      params: Record<string, unknown>;
-    },
-  ): Promise<TokenResponse> {
-    const tokenEndpoint: string | undefined = (await this._oidcProviderMetaData()).token_endpoint;
-    const configData: StrictAuthClientConfig = await this._config();
-
-    if (!tokenEndpoint || tokenEndpoint.trim().length === 0) {
-      throw new AsgardeoAuthException(
-        'JS-AUTH_CORE-RAT1-NF01',
-        'Token endpoint not found.',
-        'No token endpoint was found in the OIDC provider meta data returned by the well-known endpoint ' +
-          'or the token endpoint passed to the SDK is empty.',
-      );
-    }
-
-    sessionState &&
-      (await this._storageManager.setSessionDataParameter(
-        OIDCRequestConstants.Params.SESSION_STATE as keyof SessionData,
-        sessionState,
-        userID,
-      ));
-
-    const body: URLSearchParams = new URLSearchParams();
-
-    body.set('client_id', configData.clientID);
-
-    if (configData.clientSecret && configData.clientSecret.trim().length > 0) {
-      body.set('client_secret', configData.clientSecret);
-    }
-
-    const code: string = authorizationCode;
-
-    body.set('code', code);
-
-    body.set('grant_type', 'authorization_code');
-    body.set('redirect_uri', configData.signInRedirectURL);
-
-    if (tokenRequestConfig?.params) {
-      Object.entries(tokenRequestConfig.params).forEach(([key, value]: [key: string, value: unknown]) => {
-        body.append(key, value as string);
-      });
-    }
-
-    if (configData.enablePKCE) {
-      body.set(
-        'code_verifier',
-        `${await this._storageManager.getTemporaryDataParameter(extractPkceStorageKeyFromState(state), userID)}`,
-      );
-
-      await this._storageManager.removeTemporaryDataParameter(extractPkceStorageKeyFromState(state), userID);
-    }
-
-    let tokenResponse: Response;
-
-    try {
-      tokenResponse = await fetch(tokenEndpoint, {
-        body: body,
-        credentials: configData.sendCookiesInRequests ? 'include' : 'same-origin',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        method: 'POST',
-      });
-    } catch (error: any) {
-      throw new AsgardeoAuthException(
-        'JS-AUTH_CORE-RAT1-NE02',
-        'Requesting access token failed',
-        error ?? 'The request to get the access token from the server failed.',
-      );
-    }
-
-    if (!tokenResponse.ok) {
-      throw new AsgardeoAuthException(
-        'JS-AUTH_CORE-RAT1-HE03',
-        `Requesting access token failed with ${tokenResponse.statusText}`,
-        (await tokenResponse.json()) as string,
-      );
-    }
-
-    return await this._authenticationHelper.handleTokenResponse(tokenResponse, userID);
-  }
-
-  public async refreshAccessToken(userID?: string): Promise<TokenResponse> {
-    const tokenEndpoint: string | undefined = (await this._oidcProviderMetaData()).token_endpoint;
-    const configData: StrictAuthClientConfig = await this._config();
-    const sessionData: SessionData = await this._storageManager.getSessionData(userID);
-
-    if (!sessionData.refresh_token) {
-      throw new AsgardeoAuthException(
-        'JS-AUTH_CORE-RAT2-NF01',
-        'No refresh token found.',
-        "There was no refresh token found. Asgardeo doesn't return a " +
-          'refresh token if the refresh token grant is not enabled.',
-      );
-    }
-
-    if (!tokenEndpoint || tokenEndpoint.trim().length === 0) {
-      throw new AsgardeoAuthException(
-        'JS-AUTH_CORE-RAT2-NF02',
-        'No refresh token endpoint found.',
-        'No refresh token endpoint was in the OIDC provider meta data returned by the well-known ' +
-          'endpoint or the refresh token endpoint passed to the SDK is empty.',
-      );
-    }
-
-    const body: string[] = [];
-
-    body.push(`client_id=${configData.clientID}`);
-    body.push(`refresh_token=${sessionData.refresh_token}`);
-    body.push('grant_type=refresh_token');
-
-    if (configData.clientSecret && configData.clientSecret.trim().length > 0) {
-      body.push(`client_secret=${configData.clientSecret}`);
-    }
-
-    let tokenResponse: Response;
-
-    try {
-      tokenResponse = await fetch(tokenEndpoint, {
-        body: body.join('&'),
-        credentials: configData.sendCookiesInRequests ? 'include' : 'same-origin',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        method: 'POST',
-      });
-    } catch (error: any) {
-      throw new AsgardeoAuthException(
-        'JS-AUTH_CORE-RAT2-NR03',
-        'Refresh access token request failed.',
-        error ?? 'The request to refresh the access token failed.',
-      );
-    }
-
-    if (!tokenResponse.ok) {
-      throw new AsgardeoAuthException(
-        'JS-AUTH_CORE-RAT2-HE04',
-        `Refreshing access token failed with ${tokenResponse.statusText}`,
-        (await tokenResponse.json()) as string,
-      );
-    }
-
-    return this._authenticationHelper.handleTokenResponse(tokenResponse, userID);
-  }
-
-  public async revokeAccessToken(userID?: string): Promise<FetchResponse> {
-    const revokeTokenEndpoint: string | undefined = (await this._oidcProviderMetaData()).revocation_endpoint;
-    const configData: StrictAuthClientConfig = await this._config();
-
-    if (!revokeTokenEndpoint || revokeTokenEndpoint.trim().length === 0) {
-      throw new AsgardeoAuthException(
-        'JS-AUTH_CORE-RAT3-NF01',
-        'No revoke access token endpoint found.',
-        'No revoke access token endpoint was found in the OIDC provider meta data returned by ' +
-          'the well-known endpoint or the revoke access token endpoint passed to the SDK is empty.',
-      );
-    }
-
-    const body: string[] = [];
-
-    body.push(`client_id=${configData.clientID}`);
-    body.push(`token=${(await this._storageManager.getSessionData(userID)).access_token}`);
-    body.push('token_type_hint=access_token');
-
-    if (configData.clientSecret && configData.clientSecret.trim().length > 0) {
-      body.push(`client_secret=${configData.clientSecret}`);
-    }
-
-    let response: Response;
-
-    try {
-      response = await fetch(revokeTokenEndpoint, {
-        body: body.join('&'),
-        credentials: configData.sendCookiesInRequests ? 'include' : 'same-origin',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        method: 'POST',
-      });
-    } catch (error: any) {
-      throw new AsgardeoAuthException(
-        'JS-AUTH_CORE-RAT3-NE02',
-        'The request to revoke access token failed.',
-        error ?? 'The request sent to revoke the access token failed.',
-      );
-    }
-
-    if (response.status !== 200 || !response.ok) {
-      throw new AsgardeoAuthException(
-        'JS-AUTH_CORE-RAT3-HE03',
-        `Invalid response status received for revoke access token request (${response.statusText}).`,
-        (await response.json()) as string,
-      );
-    }
-
-    this._authenticationHelper.clearUserSessionData(userID);
-
-    return Promise.resolve(response);
-  }
-
-  public async requestCustomGrant(
-    customGrantParams: CustomGrantConfig,
-    userID?: string,
-  ): Promise<TokenResponse | FetchResponse> {
-    const oidcProviderMetadata: OIDCDiscoveryApiResponse = await this._oidcProviderMetaData();
-    const configData: StrictAuthClientConfig = await this._config();
-
-    let tokenEndpoint: string | undefined;
-
-    if (customGrantParams.tokenEndpoint && customGrantParams.tokenEndpoint.trim().length !== 0) {
-      tokenEndpoint = customGrantParams.tokenEndpoint;
-    } else {
-      tokenEndpoint = oidcProviderMetadata.token_endpoint;
-    }
-
-    if (!tokenEndpoint || tokenEndpoint.trim().length === 0) {
-      throw new AsgardeoAuthException(
-        'JS-AUTH_CORE-RCG-NF01',
-        'Token endpoint not found.',
-        'No token endpoint was found in the OIDC provider meta data returned by the well-known endpoint ' +
-          'or the token endpoint passed to the SDK is empty.',
-      );
-    }
-
-    const data: string[] = await Promise.all(
-      Object.entries(customGrantParams.data).map(async ([key, value]: [key: string, value: any]) => {
-        const newValue: string = await this._authenticationHelper.replaceCustomGrantTemplateTags(
-          value as string,
-          userID,
-        );
-
-        return `${key}=${newValue}`;
-      }),
-    );
-
-    let requestHeaders: Record<string, any> = {
-      Accept: 'application/json',
-      'Content-Type': 'application/x-www-form-urlencoded',
-    };
-
-    if (customGrantParams.attachToken) {
-      requestHeaders = {
-        ...requestHeaders,
-        Authorization: `Bearer ${(await this._storageManager.getSessionData(userID)).access_token}`,
-      };
-    }
-
-    const requestConfig: FetchRequestConfig = {
-      body: data.join('&'),
-      credentials: configData.sendCookiesInRequests ? 'include' : 'same-origin',
-      headers: new Headers(requestHeaders),
-      method: 'POST',
-    };
-
-    let response: Response;
-
-    try {
-      response = await fetch(tokenEndpoint, requestConfig);
-    } catch (error: any) {
-      throw new AsgardeoAuthException(
-        'JS-AUTH_CORE-RCG-NE02',
-        'The custom grant request failed.',
-        error ?? 'The request sent to get the custom grant failed.',
-      );
-    }
-
-    if (response.status !== 200 || !response.ok) {
-      throw new AsgardeoAuthException(
-        'JS-AUTH_CORE-RCG-HE03',
-        `Invalid response status received for the custom grant request. (${response.statusText})`,
-        (await response.json()) as string,
-      );
-    }
-
-    if (customGrantParams.returnsSession) {
-      return this._authenticationHelper.handleTokenResponse(response, userID);
-    } else {
-      return Promise.resolve((await response.json()) as TokenResponse | FetchResponse);
-    }
-  }
-
-  public async getBasicUserInfo(userID?: string): Promise<BasicUserInfo> {
-    const sessionData: SessionData = await this._storageManager.getSessionData(userID);
-    const authenticatedUser: AuthenticatedUserInfo = this._authenticationHelper.getAuthenticatedUserInfo(
-      sessionData?.id_token,
-    );
-
-    let basicUserInfo: BasicUserInfo = {
-      allowedScopes: sessionData.scope,
-      sessionState: sessionData.session_state,
-    };
-
-    Object.keys(authenticatedUser).forEach((key: string) => {
-      if (authenticatedUser[key] === undefined || authenticatedUser[key] === '' || authenticatedUser[key] === null) {
-        delete authenticatedUser[key];
-      }
-    });
-
-    basicUserInfo = {...basicUserInfo, ...authenticatedUser};
-
-    return basicUserInfo;
-  }
-
-  public async getDecodedIDToken(userID?: string): Promise<IdTokenPayload> {
-    const idToken: string = (await this._storageManager.getSessionData(userID)).id_token;
-    const payload: IdTokenPayload = this._cryptoHelper.decodeIDToken(idToken);
-
-    return payload;
-  }
-
-  public async getCryptoHelper(): Promise<IsomorphicCrypto> {
-    return this._cryptoHelper;
-  }
-
-  public async getIDToken(userID?: string): Promise<string> {
-    return (await this._storageManager.getSessionData(userID)).id_token;
-  }
-
-  public async getOIDCProviderMetaData(forceInit: boolean): Promise<void> {
-    const configData: StrictAuthClientConfig = await this._config();
-
-    if (
-      !forceInit &&
-      (await this._storageManager.getTemporaryDataParameter(
-        OIDCDiscoveryConstants.Storage.StorageKeys.OPENID_PROVIDER_CONFIG_INITIATED,
-      ))
-    ) {
-      return Promise.resolve();
-    }
-
-    const wellKnownEndpoint: string = (configData as any).wellKnownEndpoint;
-
-    if (wellKnownEndpoint) {
-      let response: Response;
-
-      try {
-        response = await fetch(wellKnownEndpoint);
-        if (response.status !== 200 || !response.ok) {
-          throw new Error();
-        }
-      } catch {
-        throw new AsgardeoAuthException(
-          'JS-AUTH_CORE-GOPMD-HE01',
-          'Invalid well-known response',
-          'The well known endpoint response has been failed with an error.',
-        );
-      }
-
-      await this._storageManager.setOIDCProviderMetaData(
-        await this._authenticationHelper.resolveEndpoints(await response.json()),
-      );
-      await this._storageManager.setTemporaryDataParameter(
-        OIDCDiscoveryConstants.Storage.StorageKeys.OPENID_PROVIDER_CONFIG_INITIATED,
-        true,
-      );
-
-      return Promise.resolve();
-    } else if ((configData as any).baseUrl) {
-      try {
-        await this._storageManager.setOIDCProviderMetaData(await this._authenticationHelper.resolveEndpointsByBaseURL());
-      } catch (error: any) {
-        throw new AsgardeoAuthException(
-          'JS-AUTH_CORE-GOPMD-IV02',
-          'Resolving endpoints failed.',
-          error ?? 'Resolving endpoints by base url failed.',
-        );
-      }
-      await this._storageManager.setTemporaryDataParameter(
-        OIDCDiscoveryConstants.Storage.StorageKeys.OPENID_PROVIDER_CONFIG_INITIATED,
-        true,
-      );
-
-      return Promise.resolve();
-    } else {
-      await this._storageManager.setOIDCProviderMetaData(await this._authenticationHelper.resolveEndpointsExplicitly());
-
-      await this._storageManager.setTemporaryDataParameter(
-        OIDCDiscoveryConstants.Storage.StorageKeys.OPENID_PROVIDER_CONFIG_INITIATED,
-        true,
-      );
-
-      return Promise.resolve();
-    }
-  }
-
-  // TODO: Remove `Partial<OIDCEndpoints>` once the refactoring is done.
-  public async getOIDCServiceEndpoints(): Promise<Partial<OIDCEndpoints>> {
-    const oidcProviderMetaData: OIDCDiscoveryApiResponse = await this._oidcProviderMetaData();
-
-    return {
-      authorizationEndpoint: oidcProviderMetaData.authorization_endpoint ?? '',
-      checkSessionIframe: oidcProviderMetaData.check_session_iframe ?? '',
-      endSessionEndpoint: oidcProviderMetaData.end_session_endpoint ?? '',
-      introspectionEndpoint: oidcProviderMetaData.introspection_endpoint ?? '',
-      issuer: oidcProviderMetaData.issuer ?? '',
-      jwksUri: oidcProviderMetaData.jwks_uri ?? '',
-      registrationEndpoint: oidcProviderMetaData.registration_endpoint ?? '',
-      revocationEndpoint: oidcProviderMetaData.revocation_endpoint ?? '',
-      tokenEndpoint: oidcProviderMetaData.token_endpoint ?? '',
-      userinfoEndpoint: oidcProviderMetaData.userinfo_endpoint ?? '',
-    };
-  }
-
-  public async getSignOutURL(userID?: string): Promise<string> {
-    const logoutEndpoint: string | undefined = (await this._oidcProviderMetaData())?.end_session_endpoint;
-    const configData: StrictAuthClientConfig = await this._config();
-
-    if (!logoutEndpoint || logoutEndpoint.trim().length === 0) {
-      throw new AsgardeoAuthException(
-        'JS-AUTH_CORE-GSOU-NF01',
-        'Sign-out endpoint not found.',
-        'No sign-out endpoint was found in the OIDC provider meta data returned by the well-known endpoint ' +
-          'or the sign-out endpoint passed to the SDK is empty.',
-      );
-    }
-
-    const callbackURL: string = configData?.signOutRedirectURL ?? configData?.signInRedirectURL;
-
-    if (!callbackURL || callbackURL.trim().length === 0) {
-      throw new AsgardeoAuthException(
-        'JS-AUTH_CORE-GSOU-NF03',
-        'No sign-out redirect URL found.',
-        'The sign-out redirect URL cannot be found or the URL passed to the SDK is empty. ' +
-          'No sign-in redirect URL has been found either. ',
-      );
-    }
-    const queryParams: URLSearchParams = new URLSearchParams();
-
-    queryParams.set('post_logout_redirect_uri', callbackURL);
-
-    if (configData.sendIdTokenInLogoutRequest) {
-      const idToken: string = (await this._storageManager.getSessionData(userID))?.id_token;
-
-      if (!idToken || idToken.trim().length === 0) {
-        throw new AsgardeoAuthException(
-          'JS-AUTH_CORE-GSOU-NF02',
-          'ID token not found.',
-          'No ID token could be found. Either the session information is lost or you have not signed in.',
-        );
-      }
-      queryParams.set('id_token_hint', idToken);
-    } else {
-      queryParams.set('client_id', configData.clientID);
-    }
-
-    queryParams.set('state', OIDCRequestConstants.Params.SIGN_OUT_SUCCESS);
-
-    return `${logoutEndpoint}?${queryParams.toString()}`;
-  }
-
-  public async clearUserSessionData(userID?: string): Promise<void> {
-    await this._authenticationHelper.clearUserSessionData(userID);
-  }
-
-  public async getAccessToken(userID?: string): Promise<string> {
-    return (await this._storageManager.getSessionData(userID))?.access_token;
-  }
-
-  /**
-   * The created timestamp of the token response in milliseconds.
-   *
-   * @param userID - User ID
-   * @returns Created at timestamp of the token response in milliseconds.
-   */
-  public async getCreatedAt(userID?: string): Promise<number> {
-    return (await this._storageManager.getSessionData(userID))?.created_at;
-  }
-
-  /**
-   * The expires timestamp of the token response in seconds.
-   *
-   * @param userID - User ID
-   * @returns Expires in timestamp of the token response in seconds.
-   */
-  public async getExpiresIn(userID?: string): Promise<string> {
-    return (await this._storageManager.getSessionData(userID))?.expires_in;
-  }
-
-  public async isAuthenticated(userID?: string): Promise<boolean> {
-    const isAccessTokenAvailable: boolean = Boolean(await this.getAccessToken(userID));
-
-    // Check if the access token is expired.
-    const createdAt: number = await this.getCreatedAt(userID);
-
-    // Get the expires in value.
-    const expiresInString: string = await this.getExpiresIn(userID);
-
-    // If the expires in value is not available, the token is invalid and the user is not authenticated.
-    if (!expiresInString) {
-      return false;
-    }
-
-    // Convert to milliseconds.
-    const expiresIn: number = parseInt(expiresInString) * 1000;
-    const currentTime: number = new Date().getTime();
-    const isAccessTokenValid: boolean = createdAt + expiresIn > currentTime;
-
-    const isAuthenticated: boolean = isAccessTokenAvailable && isAccessTokenValid;
-
-    return isAuthenticated;
-  }
-
-  public async getPKCECode(state: string, userID?: string): Promise<string> {
-    return (await this._storageManager.getTemporaryDataParameter(extractPkceStorageKeyFromState(state), userID)) as string;
-  }
-
-  public async setPKCECode(pkce: string, state: string, userID?: string): Promise<void> {
-    return await this._storageManager.setTemporaryDataParameter(extractPkceStorageKeyFromState(state), pkce, userID);
-  }
-
-  public async updateConfig(config: Partial<AuthClientConfig<T>>): Promise<void> {
-    await this._storageManager.setConfigData(config);
-    await this.getOIDCProviderMetaData(true);
-  }
-}
diff --git a/packages/javascript/src/__legacy__/core/index.ts b/packages/javascript/src/__legacy__/core/index.ts
deleted file mode 100644
index 886294844..000000000
--- a/packages/javascript/src/__legacy__/core/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2020, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-export * from "./authentication-core";
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 2c44df7f3..59561df36 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -43,6 +43,7 @@ export {
 export {OIDCEndpoints} from './models/oidc-endpoints';
 export {Storage} from './models/store';
 export {User} from './models/user';
+export {SessionData} from './models/session';
 export {Schema, SchemaAttribute, WellKnownSchemaIds} from './models/scim2-schema';
 export {RecursivePartial} from './models/utility-types';
 

From bf52459c328626bc7de401aa08a4ec26788e5564 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Mon, 9 Jun 2025 14:35:13 +0530
Subject: [PATCH 019/131] chore: remove unused import of Navigate from
 react-router-dom

---
 recipes/vite-react-ts/src/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/recipes/vite-react-ts/src/App.tsx b/recipes/vite-react-ts/src/App.tsx
index e5edf7c94..333870708 100644
--- a/recipes/vite-react-ts/src/App.tsx
+++ b/recipes/vite-react-ts/src/App.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import {BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom';
+import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
 import {useState, createContext, useContext} from 'react';
 import Header from './components/Header';
 import DashboardPage from './pages/Dashboard';

From efabcb79b11ccee154da98360079ee6328e8724f Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Mon, 9 Jun 2025 14:55:12 +0530
Subject: [PATCH 020/131] chore(javascript): refactor exception handling by
 moving AsgardeoAuthException to errors directory and updating imports

---
 packages/javascript/src/IsomorphicCrypto.ts   |  2 +-
 packages/javascript/src/__legacy__/client.ts  |  2 +-
 .../src/__legacy__/exception/index.ts         | 19 -------------------
 .../helpers/authentication-helper.ts          |  2 +-
 .../exception => errors}/exception.ts         |  3 +++
 packages/javascript/src/index.ts              |  5 +++--
 6 files changed, 9 insertions(+), 24 deletions(-)
 delete mode 100644 packages/javascript/src/__legacy__/exception/index.ts
 rename packages/javascript/src/{__legacy__/exception => errors}/exception.ts (90%)

diff --git a/packages/javascript/src/IsomorphicCrypto.ts b/packages/javascript/src/IsomorphicCrypto.ts
index eb47aeeea..c56bfb0c0 100644
--- a/packages/javascript/src/IsomorphicCrypto.ts
+++ b/packages/javascript/src/IsomorphicCrypto.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {AsgardeoAuthException} from './__legacy__/exception';
+import {AsgardeoAuthException} from './errors/exception';
 import {Crypto, JWKInterface} from './models/crypto';
 import {IdTokenPayload} from './models/token';
 import TokenConstants from './constants/TokenConstants';
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 474b0fa78..f0367f7ed 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -37,7 +37,7 @@ import OIDCRequestConstants from '../constants/OIDCRequestConstants';
 import {IsomorphicCrypto} from '../IsomorphicCrypto';
 import extractPkceStorageKeyFromState from '../utils/extractPkceStorageKeyFromState';
 import generateStateParamForRequestCorrelation from '../utils/generateStateParamForRequestCorrelation';
-import {AsgardeoAuthException} from './exception';
+import {AsgardeoAuthException} from '../errors/exception';
 import {AuthenticationHelper} from './helpers';
 import {SessionData} from '../models/session';
 import {AuthorizeRequestUrlParams} from '../models/oauth-request';
diff --git a/packages/javascript/src/__legacy__/exception/index.ts b/packages/javascript/src/__legacy__/exception/index.ts
deleted file mode 100644
index 39dafe583..000000000
--- a/packages/javascript/src/__legacy__/exception/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2020, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-export * from "./exception";
diff --git a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
index 5646afe70..8c5d29fc9 100644
--- a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
@@ -18,7 +18,7 @@
 
 import {IsomorphicCrypto} from '../../IsomorphicCrypto';
 import StorageManager from '../../StorageManager';
-import {AsgardeoAuthException} from '../exception';
+import {AsgardeoAuthException} from '../../errors/exception';
 import {AuthClientConfig, AuthenticatedUserInfo, StrictAuthClientConfig} from '../models';
 import {SessionData} from '../../models/session';
 import {JWKInterface} from '../../models/crypto';
diff --git a/packages/javascript/src/__legacy__/exception/exception.ts b/packages/javascript/src/errors/exception.ts
similarity index 90%
rename from packages/javascript/src/__legacy__/exception/exception.ts
rename to packages/javascript/src/errors/exception.ts
index ffb372499..191287ac9 100644
--- a/packages/javascript/src/__legacy__/exception/exception.ts
+++ b/packages/javascript/src/errors/exception.ts
@@ -16,6 +16,9 @@
  * under the License.
  */
 
+/**
+ * @deprecated Use `AsgardeoRuntimeError` for runtime errors and `AsgardeoAPIError` for API errors.
+ */
 export class AsgardeoAuthException {
     public name: string;
     public code: string | undefined;
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 59561df36..188565a24 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -18,9 +18,8 @@
 
 export * from './__legacy__/client';
 export * from './__legacy__/models';
-export * from './models/oauth-response';
+
 export * from './IsomorphicCrypto';
-export * from './__legacy__/exception';
 
 export {default as getUserInfo} from './api/getUserInfo';
 
@@ -30,11 +29,13 @@ export {default as OIDCRequestConstants} from './constants/OIDCRequestConstants'
 export {default as AsgardeoError} from './errors/AsgardeoError';
 export {default as AsgardeoAPIError} from './errors/AsgardeoAPIError';
 export {default as AsgardeoRuntimeError} from './errors/AsgardeoRuntimeError';
+export {AsgardeoAuthException} from './errors/exception';
 
 export {AsgardeoClient, SignInOptions, SignOutOptions} from './models/client';
 export {BaseConfig, Config, Preferences, ThemePreferences} from './models/config';
 export {TokenResponse, IdTokenPayload} from './models/token';
 export {Crypto, JWKInterface} from './models/crypto';
+export {OAuthResponseMode} from './models/oauth-response';
 export {
   AuthorizeRequestUrlParams,
   KnownExtendedAuthorizeRequestUrlParams,

From 56c0ed8e42fec889f38031d913b4e4f60cdf3280 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Mon, 9 Jun 2025 15:16:29 +0530
Subject: [PATCH 021/131] chore(javascript): add authorize function and related
 interfaces for OAuth2 authorization

---
 .../src/api/__tests__/authorize.test.ts       | 376 ++++++++++++++++++
 packages/javascript/src/api/authorize.ts      | 225 +++++++++++
 packages/javascript/src/index.ts              |   1 +
 3 files changed, 602 insertions(+)
 create mode 100644 packages/javascript/src/api/__tests__/authorize.test.ts
 create mode 100644 packages/javascript/src/api/authorize.ts

diff --git a/packages/javascript/src/api/__tests__/authorize.test.ts b/packages/javascript/src/api/__tests__/authorize.test.ts
new file mode 100644
index 000000000..10836448e
--- /dev/null
+++ b/packages/javascript/src/api/__tests__/authorize.test.ts
@@ -0,0 +1,376 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import authorize, {AuthorizationRequest, AuthorizationResponse} from '../authorize';
+import AsgardeoAPIError from '../../errors/AsgardeoAPIError';
+
+describe('authorize', (): void => {
+  beforeEach((): void => {
+    vi.resetAllMocks();
+  });
+
+  it('should make POST request with form data by default', async (): void => {
+    const mockAuthResponse: AuthorizationResponse = {
+      code: 'auth-code-123',
+      state: 'random-state-value',
+      session_state: 'session-123',
+    };
+
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve(mockAuthResponse),
+    });
+
+    const url: string = 'https://localhost:9443/oauth2/authorize/';
+    const payload: AuthorizationRequest = {
+      client_id: 'test-client-id',
+      response_type: 'code',
+      redirect_uri: 'https://your-app.com/callback',
+      state: 'random-state-value',
+      scope: 'openid profile email',
+      response_mode: 'direct',
+    };
+
+    const result: AuthorizationResponse = await authorize({url, payload});
+
+    expect(fetch).toHaveBeenCalledWith(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        Accept: 'application/json',
+      },
+      body: 'client_id=test-client-id&response_type=code&redirect_uri=https%3A%2F%2Fyour-app.com%2Fcallback&state=random-state-value&scope=openid+profile+email&response_mode=direct',
+    });
+
+    expect(result).toEqual(mockAuthResponse);
+  });
+
+  it('should make GET request with URL parameters when method is GET', async (): void => {
+    const mockAuthResponse: AuthorizationResponse = {
+      code: 'auth-code-123',
+      state: 'random-state-value',
+    };
+
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve(mockAuthResponse),
+    });
+
+    const url: string = 'https://localhost:9443/oauth2/authorize/';
+    const payload: AuthorizationRequest = {
+      client_id: 'test-client-id',
+      response_type: 'code',
+      redirect_uri: 'https://your-app.com/callback',
+      state: 'random-state-value',
+      scope: 'openid profile email',
+    };
+
+    const result: AuthorizationResponse = await authorize({
+      url,
+      payload,
+      method: 'GET',
+    });
+
+    const expectedUrl = 'https://localhost:9443/oauth2/authorize/?client_id=test-client-id&response_type=code&redirect_uri=https%3A%2F%2Fyour-app.com%2Fcallback&state=random-state-value&scope=openid+profile+email';
+
+    expect(fetch).toHaveBeenCalledWith(expectedUrl, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+      },
+    });
+
+    expect(result).toEqual(mockAuthResponse);
+  });
+
+  it('should handle PKCE parameters correctly', async (): void => {
+    const mockAuthResponse: AuthorizationResponse = {
+      code: 'auth-code-123',
+      state: 'random-state-value',
+    };
+
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve(mockAuthResponse),
+    });
+
+    const url: string = 'https://localhost:9443/oauth2/authorize/';
+    const payload: AuthorizationRequest = {
+      client_id: 'test-client-id',
+      response_type: 'code',
+      redirect_uri: 'https://your-app.com/callback',
+      state: 'random-state-value',
+      scope: 'openid profile email',
+      code_challenge: 'your-pkce-challenge',
+      code_challenge_method: 'S256',
+      nonce: 'test-nonce',
+    };
+
+    await authorize({url, payload});
+
+    expect(fetch).toHaveBeenCalledWith(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        Accept: 'application/json',
+      },
+      body: 'client_id=test-client-id&response_type=code&redirect_uri=https%3A%2F%2Fyour-app.com%2Fcallback&state=random-state-value&scope=openid+profile+email&code_challenge=your-pkce-challenge&code_challenge_method=S256&nonce=test-nonce',
+    });
+  });
+
+  it('should filter out undefined and null values from payload', async (): void => {
+    const mockAuthResponse: AuthorizationResponse = {
+      code: 'auth-code-123',
+    };
+
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve(mockAuthResponse),
+    });
+
+    const url: string = 'https://localhost:9443/oauth2/authorize/';
+    const payload: AuthorizationRequest = {
+      client_id: 'test-client-id',
+      response_type: 'code',
+      redirect_uri: undefined,
+      state: null,
+      scope: 'openid profile email',
+      nonce: '', // Empty string should be included
+    };
+
+    await authorize({url, payload});
+
+    expect(fetch).toHaveBeenCalledWith(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        Accept: 'application/json',
+      },
+      body: 'client_id=test-client-id&response_type=code&scope=openid+profile+email&nonce=',
+    });
+  });
+
+  it('should merge custom headers with default headers', async (): void => {
+    const mockAuthResponse: AuthorizationResponse = {
+      code: 'auth-code-123',
+    };
+
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve(mockAuthResponse),
+    });
+
+    const url: string = 'https://localhost:9443/oauth2/authorize/';
+    const payload: AuthorizationRequest = {
+      client_id: 'test-client-id',
+      response_type: 'code',
+    };
+
+    await authorize({
+      url,
+      payload,
+      headers: {
+        'Authorization': 'Bearer token',
+        'Custom-Header': 'custom-value',
+      },
+    });
+
+    expect(fetch).toHaveBeenCalledWith(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        Accept: 'application/json',
+        'Authorization': 'Bearer token',
+        'Custom-Header': 'custom-value',
+      },
+      body: 'client_id=test-client-id&response_type=code',
+    });
+  });
+
+  it('should handle authorization error response', async (): void => {
+    const mockErrorResponse: AuthorizationResponse = {
+      error: 'invalid_request',
+      error_description: 'The request is missing a required parameter',
+      state: 'random-state-value',
+    };
+
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve(mockErrorResponse),
+    });
+
+    const url: string = 'https://localhost:9443/oauth2/authorize/';
+    const payload: AuthorizationRequest = {
+      client_id: 'test-client-id',
+      response_type: 'code',
+    };
+
+    const result: AuthorizationResponse = await authorize({url, payload});
+
+    expect(result).toEqual(mockErrorResponse);
+  });
+
+  it('should throw AsgardeoAPIError on HTTP error response', async (): void => {
+    const errorText: string = 'Unauthorized';
+
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: false,
+      text: () => Promise.resolve(errorText),
+      status: 401,
+      statusText: 'Unauthorized',
+    });
+
+    const url: string = 'https://localhost:9443/oauth2/authorize/';
+    const payload: AuthorizationRequest = {
+      client_id: 'test-client-id',
+      response_type: 'code',
+    };
+
+    await expect(authorize({url, payload})).rejects.toThrow(AsgardeoAPIError);
+
+    const error: AsgardeoAPIError = await authorize({url, payload}).catch(e => e);
+
+    expect(error.message).toContain('Authorization request failed: Unauthorized');
+    expect(error.code).toBe('authorize-ResponseError-001');
+    expect(error.statusCode).toBe(401);
+    expect(error.statusText).toBe('Unauthorized');
+  });
+
+  it('should throw AsgardeoAPIError for invalid URL', async (): void => {
+    const invalidUrl: string = 'not-a-valid-url';
+    const payload: AuthorizationRequest = {
+      client_id: 'test-client-id',
+      response_type: 'code',
+    };
+
+    await expect(authorize({url: invalidUrl, payload})).rejects.toThrow(AsgardeoAPIError);
+
+    const error: AsgardeoAPIError = await authorize({url: invalidUrl, payload}).catch(e => e);
+
+    expect(error.message).toBe(
+      '🛡️ Asgardeo - @asgardeo/javascript: Invalid endpoint URL provided\n\n(code="authorize-ValidationError-001")\n',
+    );
+    expect(error.code).toBe('authorize-ValidationError-001');
+    expect(error.statusCode).toBe(400);
+    expect(error.statusText).toBe('Invalid Request');
+  });
+
+  it('should throw AsgardeoAPIError for empty string URL', async (): void => {
+    const payload: AuthorizationRequest = {
+      client_id: 'test-client-id',
+      response_type: 'code',
+    };
+
+    await expect(authorize({url: '', payload})).rejects.toThrow(AsgardeoAPIError);
+
+    const error: AsgardeoAPIError = await authorize({url: '', payload}).catch(e => e);
+
+    expect(error.message).toBe(
+      '🛡️ Asgardeo - @asgardeo/javascript: Invalid endpoint URL provided\n\n(code="authorize-ValidationError-001")\n',
+    );
+    expect(error.code).toBe('authorize-ValidationError-001');
+  });
+
+  it('should throw AsgardeoAPIError for missing payload', async (): void => {
+    const url: string = 'https://localhost:9443/oauth2/authorize/';
+
+    await expect(authorize({url, payload: undefined as any})).rejects.toThrow(AsgardeoAPIError);
+
+    const error: AsgardeoAPIError = await authorize({url, payload: undefined as any}).catch(e => e);
+
+    expect(error.message).toBe(
+      '🛡️ Asgardeo - @asgardeo/javascript: Authorization payload is required\n\n(code="authorize-ValidationError-002")\n',
+    );
+    expect(error.code).toBe('authorize-ValidationError-002');
+    expect(error.statusCode).toBe(400);
+    expect(error.statusText).toBe('Invalid Request');
+  });
+
+  it('should throw AsgardeoAPIError for null payload', async (): void => {
+    const url: string = 'https://localhost:9443/oauth2/authorize/';
+
+    await expect(authorize({url, payload: null as any})).rejects.toThrow(AsgardeoAPIError);
+
+    const error: AsgardeoAPIError = await authorize({url, payload: null as any}).catch(e => e);
+
+    expect(error.message).toBe(
+      '🛡️ Asgardeo - @asgardeo/javascript: Authorization payload is required\n\n(code="authorize-ValidationError-002")\n',
+    );
+    expect(error.code).toBe('authorize-ValidationError-002');
+  });
+
+  it('should handle numeric values in payload correctly', async (): void => {
+    const mockAuthResponse: AuthorizationResponse = {
+      code: 'auth-code-123',
+    };
+
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve(mockAuthResponse),
+    });
+
+    const url: string = 'https://localhost:9443/oauth2/authorize/';
+    const payload: AuthorizationRequest = {
+      client_id: 'test-client-id',
+      response_type: 'code',
+      max_age: 3600, // Numeric value
+    };
+
+    await authorize({url, payload});
+
+    expect(fetch).toHaveBeenCalledWith(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        Accept: 'application/json',
+      },
+      body: 'client_id=test-client-id&response_type=code&max_age=3600',
+    });
+  });
+
+  it('should handle additional custom parameters in payload', async (): void => {
+    const mockAuthResponse: AuthorizationResponse = {
+      code: 'auth-code-123',
+    };
+
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve(mockAuthResponse),
+    });
+
+    const url: string = 'https://localhost:9443/oauth2/authorize/';
+    const payload: AuthorizationRequest = {
+      client_id: 'test-client-id',
+      response_type: 'code',
+      custom_param: 'custom-value',
+      another_param: 'another-value',
+    };
+
+    await authorize({url, payload});
+
+    expect(fetch).toHaveBeenCalledWith(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        Accept: 'application/json',
+      },
+      body: 'client_id=test-client-id&response_type=code&custom_param=custom-value&another_param=another-value',
+    });
+  });
+});
diff --git a/packages/javascript/src/api/authorize.ts b/packages/javascript/src/api/authorize.ts
new file mode 100644
index 000000000..21d1b4bf6
--- /dev/null
+++ b/packages/javascript/src/api/authorize.ts
@@ -0,0 +1,225 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import AsgardeoAPIError from '../errors/AsgardeoAPIError';
+
+/**
+ * Represents the authorization request payload that can be sent to the authorization endpoint.
+ */
+export interface AuthorizationRequest {
+  /**
+   * The response type (e.g., 'code', 'token', 'id_token').
+   */
+  response_type?: string;
+  /**
+   * The client identifier.
+   */
+  client_id?: string;
+  /**
+   * The redirection URI after authorization.
+   */
+  redirect_uri?: string;
+  /**
+   * The scope of the access request.
+   */
+  scope?: string;
+  /**
+   * An unguessable random string to prevent CSRF attacks.
+   */
+  state?: string;
+  /**
+   * String value used to associate a Client session with an ID Token.
+   */
+  nonce?: string;
+  /**
+   * How the authorization response should be returned.
+   */
+  response_mode?: string;
+  /**
+   * Space delimited, case sensitive list of ASCII string values.
+   */
+  prompt?: string;
+  /**
+   * The allowable elapsed time in seconds since the last time the End-User was actively authenticated.
+   */
+  max_age?: number;
+  /**
+   * PKCE code challenge.
+   */
+  code_challenge?: string;
+  /**
+   * PKCE code challenge method.
+   */
+  code_challenge_method?: string;
+  /**
+   * Additional authorization parameters.
+   */
+  [key: string]: any;
+}
+
+/**
+ * Represents the authorization response from the authorization endpoint.
+ */
+export interface AuthorizationResponse {
+  /**
+   * The authorization code.
+   */
+  code?: string;
+  /**
+   * The state parameter.
+   */
+  state?: string;
+  /**
+   * Session state.
+   */
+  session_state?: string;
+  /**
+   * The error code if authorization failed.
+   */
+  error?: string;
+  /**
+   * Human-readable error description.
+   */
+  error_description?: string;
+  /**
+   * Additional response parameters.
+   */
+  [key: string]: any;
+}
+
+/**
+ * Request configuration for the authorize function.
+ */
+export interface AuthorizeRequestConfig extends Partial<Request> {
+  /**
+   * The authorization endpoint URL.
+   */
+  url: string;
+  /**
+   * The authorization request payload.
+   */
+  payload: AuthorizationRequest;
+}
+
+/**
+ * Sends an authorization request to the specified OAuth2/OIDC authorization endpoint.
+ *
+ * @param requestConfig - Request configuration object containing URL and payload.
+ * @returns A promise that resolves with the authorization response.
+ * @throws AsgardeoAPIError when the request fails or URL is invalid.
+ *
+ * @example
+ * ```typescript
+ * try {
+ *   const authResponse = await authorize({
+ *     url: "https://api.asgardeo.io/t/<ORGANIZATION>/oauth2/authorize",
+ *     payload: {
+ *       response_type: "code",
+ *       client_id: "your-client-id",
+ *       redirect_uri: "https://your-app.com/callback",
+ *       scope: "openid profile email",
+ *       state: "random-state-value",
+ *       code_challenge: "your-pkce-challenge",
+ *       code_challenge_method: "S256"
+ *     }
+ *   });
+ *   console.log(authResponse);
+ * } catch (error) {
+ *   if (error instanceof AsgardeoAPIError) {
+ *     console.error('Authorization failed:', error.message);
+ *   }
+ * }
+ * ```
+ */
+const authorize = async ({url, payload, ...requestConfig}: AuthorizeRequestConfig): Promise<AuthorizationResponse> => {
+  try {
+    new URL(url);
+  } catch (error) {
+    throw new AsgardeoAPIError(
+      'Invalid endpoint URL provided',
+      'authorize-ValidationError-001',
+      'javascript',
+      400,
+      'Invalid Request',
+    );
+  }
+
+  if (!payload) {
+    throw new AsgardeoAPIError(
+      'Authorization payload is required',
+      'authorize-ValidationError-002',
+      'javascript',
+      400,
+      'Invalid Request',
+    );
+  }
+
+  // Convert payload to URL search params for GET request or form data for POST
+  const searchParams = new URLSearchParams();
+  Object.entries(payload).forEach(([key, value]) => {
+    if (value !== undefined && value !== null) {
+      searchParams.append(key, String(value));
+    }
+  });
+
+  let response: Response;
+  const method = requestConfig.method || 'POST';
+
+  if (method.toUpperCase() === 'GET') {
+    // For GET requests, append parameters to URL
+    const urlWithParams = `${url}?${searchParams.toString()}`;
+    const {headers: customHeaders, ...otherConfig} = requestConfig;
+    response = await fetch(urlWithParams, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+        ...customHeaders,
+      },
+      ...otherConfig,
+    });
+  } else {
+    // For POST requests, send as form data
+    const {headers: customHeaders, ...otherConfig} = requestConfig;
+    response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        Accept: 'application/json',
+        ...customHeaders,
+      },
+      body: searchParams.toString(),
+      ...otherConfig,
+    });
+  }
+
+  if (!response.ok) {
+    const errorText = await response.text();
+
+    throw new AsgardeoAPIError(
+      `Authorization request failed: ${errorText}`,
+      'authorize-ResponseError-001',
+      'javascript',
+      response.status,
+      response.statusText,
+    );
+  }
+
+  return (await response.json()) as AuthorizationResponse;
+};
+
+export default authorize;
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 188565a24..1b6ef4149 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -21,6 +21,7 @@ export * from './__legacy__/models';
 
 export * from './IsomorphicCrypto';
 
+export {default as authorize} from './api/authorize';
 export {default as getUserInfo} from './api/getUserInfo';
 
 export {default as TokenConstants} from './constants/TokenConstants';

From bbba8413b47cb6c63f923f92da8f93386bdd94b6 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Mon, 9 Jun 2025 17:07:06 +0530
Subject: [PATCH 022/131] chore(javascript): implement Asgardeo client
 interface with new methods and refactor user information retrieval

---
 .../src/AsgardeoJavaScriptClient.ts           | 60 ++++++++++++
 packages/javascript/src/__legacy__/client.ts  | 24 +----
 packages/javascript/src/models/client.ts      | 92 ++++++++++++++++---
 packages/javascript/src/models/user.ts        |  2 +
 4 files changed, 145 insertions(+), 33 deletions(-)

diff --git a/packages/javascript/src/AsgardeoJavaScriptClient.ts b/packages/javascript/src/AsgardeoJavaScriptClient.ts
index d13433016..4730533e0 100644
--- a/packages/javascript/src/AsgardeoJavaScriptClient.ts
+++ b/packages/javascript/src/AsgardeoJavaScriptClient.ts
@@ -19,6 +19,12 @@
 import {AsgardeoClient, SignInOptions, SignOutOptions} from './models/client';
 import {User} from './models/user';
 import {Config} from './models/config';
+import { CustomGrantConfig } from './__legacy__/models';
+import { Crypto } from './models/crypto';
+import { ExtendedAuthorizeRequestUrlParams } from './models/oauth-request';
+import { OIDCEndpoints } from './models/oidc-endpoints';
+import { TokenResponse } from './models/token';
+import StorageManager from './StorageManager';
 
 /**
  * Base class for implementing Asgardeo clients.
@@ -27,6 +33,60 @@ import {Config} from './models/config';
  * @typeParam T - Configuration type that extends Config.
  */
 abstract class AsgardeoJavaScriptClient<T = Config> implements AsgardeoClient<T> {
+  getStorageManager(): StorageManager<T> {
+    throw new Error('Method not implemented.');
+  }
+  getInstanceId(): number {
+    throw new Error('Method not implemented.');
+  }
+  getSignInUrl(requestConfig: ExtendedAuthorizeRequestUrlParams, userId: string): Promise<string> {
+    throw new Error('Method not implemented.');
+  }
+  getSignOutUrl(userId: string): Promise<string> {
+    throw new Error('Method not implemented.');
+  }
+  loadOpenIDProviderConfiguration(force: boolean): Promise<void> {
+    throw new Error('Method not implemented.');
+  }
+  getOpenIDProviderEndpoints(): Promise<Partial<OIDCEndpoints>> {
+    throw new Error('Method not implemented.');
+  }
+  requestAccessToken(authorizationCode: string, sessionState: string, state: string, userId?: string, requestConfig?: { params: Record<string, unknown>; }): Promise<TokenResponse> {
+    throw new Error('Method not implemented.');
+  }
+  getIdToken(userId: string, raw: boolean): Promise<string> {
+    throw new Error('Method not implemented.');
+  }
+  getCrypto(): Crypto {
+    throw new Error('Method not implemented.');
+  }
+  revokeAccessToken(userId?: string): Promise<any> {
+    throw new Error('Method not implemented.');
+  }
+  refreshAccessToken(userId?: string): Promise<TokenResponse> {
+    throw new Error('Method not implemented.');
+  }
+  getAccessToken(userId?: string): Promise<string> {
+    throw new Error('Method not implemented.');
+  }
+  exchangeToken(requestConfig: CustomGrantConfig, userId?: string): Promise<TokenResponse> {
+    throw new Error('Method not implemented.');
+  }
+  getPKCECode(state: string, userId?: string): Promise<string> {
+    throw new Error('Method not implemented.');
+  }
+  setPKCECode(code: string, state: string, userId?: string): Promise<void> {
+    throw new Error('Method not implemented.');
+  }
+  isSignOutSuccessful(afterSignOutUrl: string): boolean {
+    throw new Error('Method not implemented.');
+  }
+  reInitialize(config: T): Promise<void> {
+    throw new Error('Method not implemented.');
+  }
+  clearSession(userId?: string): Promise<void> {
+    throw new Error('Method not implemented.');
+  }
   /**
    * Initializes the authentication client with provided configuration.
    *
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index f0367f7ed..75f19caa2 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -863,26 +863,6 @@ export class AsgardeoAuthClient<T> {
     return (await this._storageManager.getSessionData(userID))?.access_token;
   }
 
-  /**
-   * The created timestamp of the token response in milliseconds.
-   *
-   * @param userID - User ID
-   * @returns Created at timestamp of the token response in milliseconds.
-   */
-  public async getCreatedAt(userID?: string): Promise<number> {
-    return (await this._storageManager.getSessionData(userID))?.created_at;
-  }
-
-  /**
-   * The expires timestamp of the token response in seconds.
-   *
-   * @param userID - User ID
-   * @returns Expires in timestamp of the token response in seconds.
-   */
-  public async getExpiresIn(userID?: string): Promise<string> {
-    return (await this._storageManager.getSessionData(userID))?.expires_in;
-  }
-
   /**
    * This method sends a custom-grant request and returns a Promise that resolves with the response
    * depending on the config passed.
@@ -1020,10 +1000,10 @@ export class AsgardeoAuthClient<T> {
     const isAccessTokenAvailable: boolean = Boolean(await this.getAccessToken(userID));
 
     // Check if the access token is expired.
-    const createdAt: number = await this.getCreatedAt(userID);
+    const createdAt: number = (await this._storageManager.getSessionData(userID))?.created_at;
 
     // Get the expires in value.
-    const expiresInString: string = await this.getExpiresIn(userID);
+    const expiresInString: string = (await this._storageManager.getSessionData(userID))?.expires_in;
 
     // If the expires in value is not available, the token is invalid and the user is not authenticated.
     if (!expiresInString) {
diff --git a/packages/javascript/src/models/client.ts b/packages/javascript/src/models/client.ts
index 3f06fc087..2e345e0fe 100644
--- a/packages/javascript/src/models/client.ts
+++ b/packages/javascript/src/models/client.ts
@@ -16,13 +16,19 @@
  * under the License.
  */
 
-import {User} from './user';
+import { CustomGrantConfig } from '../__legacy__/models/custom-grant';
+import StorageManager from '../StorageManager';
+import {Crypto} from './crypto';
+import {ExtendedAuthorizeRequestUrlParams} from './oauth-request';
+import {OIDCEndpoints} from './oidc-endpoints';
+import {IdTokenPayload, TokenResponse} from './token';
+import {User, UserInfoResolvingStrategy} from './user';
 
 export type SignInOptions = Record<string, unknown>;
 export type SignOutOptions = Record<string, unknown>;
 
 /**
- * Interface defining the core functionality for Asgardeo authentication clients.
+ * Interface defining the core functionality for Asgardeo clients.
  *
  * @example
  * ```typescript
@@ -33,19 +39,83 @@ export type SignOutOptions = Record<string, unknown>;
  */
 export interface AsgardeoClient<T> {
   /**
-   * Gets user information from the session.
+   * Initializes the Asgardeo client with provided configuration.
    *
-   * @returns User object containing user details.
+   * @param config - SDK instance configuration options.
+   * @param storage - Storage interface for managing session data.
+   * @param crypto - Crypto interface for handling cryptographic operations.
+   * @param instanceId - Unique identifier for the client instance.
+   * @returns Promise resolving to boolean indicating success.
    */
-  getUser(): Promise<User>;
+  initialize(config: T, storage: Storage, crypto: Crypto, instanceId: number): Promise<boolean>;
 
   /**
-   * Initializes the authentication client with provided configuration.
-   *
-   * @param config - SDK Client instance configuration options.
-   * @returns Promise resolving to boolean indicating success.
+   * Gets user information based on the specified strategy.
+   * The strategy can be 'SCIM' | 'ID_TOKEN' | 'USER_INFO'.
+   *   - 'SCIM' will fetch user information from the SCIM endpoint.
+   *   - 'ID_TOKEN' will extract user information from the ID token.
+   *   - 'USER_INFO' will fetch user information from the UserInfo endpoint.
+   * If a userId is provided, it will fetch the user information for that specific user in multi-user scenarios.
+   * @param strategy - The strategy to use for fetching user information.
+   * @param userId - Optional user ID to fetch specific user information.
+   *                If not provided, it will fetch the currently signed-in user.
+   * @returns Promise resolving to a User object containing user details.
+   */
+  getUser(strategy: UserInfoResolvingStrategy, userId?: string): Promise<User>;
+
+  /**
+   * Gets the storage manager instance.
+   * @returns StorageManager instance for managing session data.
    */
-  initialize(config: T): Promise<boolean>;
+  getStorageManager(): StorageManager<T>;
+
+  /**
+   * Gets the client instance Id.
+   * This is useful for identifying different instances of the client, especially in scenarios where multiple clients are used.
+   * @return Unique identifier for the client instance.
+   */
+  getInstanceId(): number;
+
+  getSignInUrl(requestConfig: ExtendedAuthorizeRequestUrlParams, userId: string): Promise<string>;
+
+  getSignOutUrl(userId: string): Promise<string>;
+
+  loadOpenIDProviderConfiguration(force: boolean): Promise<void>;
+
+  getOpenIDProviderEndpoints(): Promise<Partial<OIDCEndpoints>>;
+
+  requestAccessToken(
+    authorizationCode: string,
+    sessionState: string,
+    state: string,
+    userId?: string,
+    requestConfig?: {
+      params: Record<string, unknown>;
+    },
+  ): Promise<TokenResponse>;
+
+  getIdToken(userId: string, raw: boolean): Promise<string>;
+
+  getCrypto(): Crypto;
+
+  // TODO: Properly define the return type for revokeAccessToken.
+  revokeAccessToken(userId?: string): Promise<any>;
+
+  refreshAccessToken(userId?: string): Promise<TokenResponse>;
+
+  getAccessToken(userId?: string): Promise<string>;
+
+  exchangeToken(requestConfig: CustomGrantConfig, userId?: string): Promise<TokenResponse>;
+  
+  getPKCECode(state: string, userId?: string): Promise<string>;
+  
+  setPKCECode(code: string, state: string, userId?: string): Promise<void>;
+  
+  isSignOutSuccessful(afterSignOutUrl: string): boolean;
+  
+  reInitialize(config: T): Promise<void>;
+  
+  clearSession(userId?: string): Promise<void>;
 
   /**
    * Checks if the client is currently loading.
@@ -61,7 +131,7 @@ export interface AsgardeoClient<T> {
    *
    * @returns Boolean indicating sign-in status.
    */
-  isSignedIn(): Promise<boolean>;
+  isSignedIn(userId?: string): Promise<boolean>;
 
   /**
    * Initiates the sign-in process for the user.
diff --git a/packages/javascript/src/models/user.ts b/packages/javascript/src/models/user.ts
index ee1f0222c..bfa6f502d 100644
--- a/packages/javascript/src/models/user.ts
+++ b/packages/javascript/src/models/user.ts
@@ -115,3 +115,5 @@ export interface User {
 }
 
 export default User;
+
+export type UserInfoResolvingStrategy = 'SCIM' | 'ID_TOKEN' | 'USER_INFO';

From 0e2d7dd15f95c8b0808b70f4b619a0e79d6a6b31 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Mon, 9 Jun 2025 17:18:40 +0530
Subject: [PATCH 023/131] chore: standardize `clientID` to `clientId` across
 documentation and codebase

---
 docs/src/react/components/asgardeo-provider.md |  2 +-
 docs/src/react/introduction.md                 |  2 +-
 packages/__legacy__/core/src/api/sign-out.ts   |  2 +-
 .../__legacy__/react/src/utils/crypto-utils.ts |  4 ++--
 packages/browser/README.md                     |  2 +-
 packages/browser/src/__legacy__/client.ts      |  4 ++--
 .../__legacy__/clients/main-thread-client.ts   |  2 +-
 .../__legacy__/clients/web-worker-client.ts    |  6 +++---
 .../helpers/authentication-helper.ts           |  4 ++--
 .../helpers/session-management-helper.ts       |  4 ++--
 .../models/session-management-helper.ts        |  2 +-
 .../src/__legacy__/utils/crypto-utils.ts       |  4 ++--
 .../browser/src/__legacy__/utils/spa-utils.ts  |  8 ++++----
 packages/javascript/README.md                  |  2 +-
 packages/javascript/src/IsomorphicCrypto.ts    |  6 +++---
 packages/javascript/src/__legacy__/client.ts   | 18 +++++++++---------
 .../helpers/authentication-helper.ts           |  4 ++--
 .../src/__legacy__/models/client-config.ts     |  2 +-
 .../src/constants/TokenExchangeConstants.ts    |  2 +-
 packages/javascript/src/models/crypto.ts       |  8 ++++----
 packages/nextjs/src/AsgardeoNextClient.ts      |  8 ++++----
 packages/node/README.md                        |  2 +-
 packages/node/src/__legacy__/client.ts         |  4 ++--
 .../node/src/__legacy__/utils/crypto-utils.ts  |  4 ++--
 packages/nuxt/src/module.ts                    | 10 +++++-----
 packages/nuxt/src/runtime/types.ts             |  2 +-
 packages/react/src/AsgardeoReactClient.ts      |  2 +-
 packages/vue/README.md                         |  2 +-
 packages/vue/src/tests/AsgardeoPlugin.test.ts  |  4 ++--
 packages/vue/src/tests/auth-api.test.ts        |  4 ++--
 packages/vue/src/tests/mocks/mocks.ts          |  2 +-
 recipes/__legacy__/react-vite/src/main.tsx     |  2 +-
 recipes/nuxt-vite/server/api/auth/[...].ts     | 14 +++++++-------
 recipes/vue-vite/README.md                     |  2 +-
 recipes/vue-vite/src/main.ts                   |  2 +-
 35 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/docs/src/react/components/asgardeo-provider.md b/docs/src/react/components/asgardeo-provider.md
index 40c4dd88a..6b7b674ed 100644
--- a/docs/src/react/components/asgardeo-provider.md
+++ b/docs/src/react/components/asgardeo-provider.md
@@ -40,7 +40,7 @@ import { AsgardeoProvider } from "@asgardeo/react";
 
   - `signInRedirectURL`: The URL where users should be redirected after they sign in. This should be a page in your application.
 
-  - `clientID`: The ID of your application. You get this when you register your application with Asgardeo.
+  - `clientId`: The ID of your application. You get this when you register your application with Asgardeo.
 
   - `scope`: The scope of the access request. This is a list of scopes separated by spaces. Scopes allow your application to request access only to the resources it needs, and also allow users to control how much access they grant to your application.
 
diff --git a/docs/src/react/introduction.md b/docs/src/react/introduction.md
index 777754665..03b64685d 100644
--- a/docs/src/react/introduction.md
+++ b/docs/src/react/introduction.md
@@ -71,7 +71,7 @@ Then, wrap your application with the `AsgardeoProvider` and pass the basic confi
 <AsgardeoProvider
     config={{
       baseUrl: "https://api.asgardeo.io/t/org_name",
-      clientID: "gqtroUbA1Qsulqr*****",
+      clientId: "gqtroUbA1Qsulqr*****",
       scope: ["openid", "internal_login", "profile"],
       signInRedirectURL: "https://domain_name:8080",
     }}>
diff --git a/packages/__legacy__/core/src/api/sign-out.ts b/packages/__legacy__/core/src/api/sign-out.ts
index 7b31f1e6c..1d71f6f80 100644
--- a/packages/__legacy__/core/src/api/sign-out.ts
+++ b/packages/__legacy__/core/src/api/sign-out.ts
@@ -50,7 +50,7 @@ const signOut = async (): Promise<void> => {
 
   try {
     formBody.append('id_token_hint', await authClient.getIDToken());
-    formBody.append('client_id', (await authClient.getStorageManager().getConfigData()).clientID);
+    formBody.append('client_id', (await authClient.getStorageManager().getConfigData()).clientId);
     formBody.append('response_mode', 'direct');
   } catch (error) {
     throw new AsgardeoUIException('JS_UI_CORE-SIGNOUT-SO-IV', 'Failed to build the body of the signout request.');
diff --git a/packages/__legacy__/react/src/utils/crypto-utils.ts b/packages/__legacy__/react/src/utils/crypto-utils.ts
index 566756560..b351a9e37 100644
--- a/packages/__legacy__/react/src/utils/crypto-utils.ts
+++ b/packages/__legacy__/react/src/utils/crypto-utils.ts
@@ -70,7 +70,7 @@ export default class SPACryptoUtils implements Crypto<Buffer | string> {
     idToken: string,
     jwk: Partial<JWKInterface>,
     algorithms: string[],
-    clientID: string,
+    clientId: string,
     issuer: string,
     subject: string,
     clockTolerance?: number,
@@ -78,7 +78,7 @@ export default class SPACryptoUtils implements Crypto<Buffer | string> {
   ): Promise<boolean> {
     const jwtVerifyOptions: JwtVerifyOptions = {
       algorithms,
-      audience: clientID,
+      audience: clientId,
       clockTolerance,
       issuer,
       subject,
diff --git a/packages/browser/README.md b/packages/browser/README.md
index 5f334aeb0..d0d2b9ae5 100644
--- a/packages/browser/README.md
+++ b/packages/browser/README.md
@@ -29,7 +29,7 @@ import { AsgardeoAuthClient } from "@asgardeo/browser";
 // Initialize the auth client
 const authClient = new AsgardeoAuthClient({
     signInRedirectURL: "https://localhost:3000",
-    clientID: "<your_client_id>",
+    clientId: "<your_client_id>",
     baseUrl: "https://api.asgardeo.io/t/<org_name>"
 });
 
diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
index 0282bbd85..f001c7c79 100755
--- a/packages/browser/src/__legacy__/client.ts
+++ b/packages/browser/src/__legacy__/client.ts
@@ -218,7 +218,7 @@ export class AsgardeoSPAClient {
    * ```
    * auth.initialize({
    *     signInRedirectURL: "http://localhost:3000/sign-in",
-   *     clientID: "client ID",
+   *     clientId: "client ID",
    *     baseUrl: "https://api.asgardeo.io"
    * });
    * ```
@@ -1145,7 +1145,7 @@ export class AsgardeoSPAClient {
    * ```
    * const config = {
    *     signInRedirectURL: "http://localhost:3000/sign-in",
-   *     clientID: "client ID",
+   *     clientId: "client ID",
    *     baseUrl: "https://api.asgardeo.io"
    * }
    * const auth.updateConfig(config);
diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index 79e737957..279197c5e 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -259,7 +259,7 @@ export const MainThreadClient = async (
     if ((await _authenticationClient.isAuthenticated()) && !_getSignOutURLFromSessionStorage) {
       location.href = await _authenticationClient.getSignOutURL();
     } else {
-      location.href = SPAUtils.getSignOutURL(config.clientID, instanceID);
+      location.href = SPAUtils.getSignOutURL(config.clientId, instanceID);
     }
 
     _spaHelper.clearRefreshTokenTimeout();
diff --git a/packages/browser/src/__legacy__/clients/web-worker-client.ts b/packages/browser/src/__legacy__/clients/web-worker-client.ts
index 030f630e2..65f94ff83 100755
--- a/packages/browser/src/__legacy__/clients/web-worker-client.ts
+++ b/packages/browser/src/__legacy__/clients/web-worker-client.ts
@@ -129,7 +129,7 @@ export const WebWorkerClient = async (
 
         return signOutURL;
       } catch {
-        return SPAUtils.getSignOutURL(config.clientID, instanceID);
+        return SPAUtils.getSignOutURL(config.clientId, instanceID);
       }
     },
     config.storage as BrowserStorage,
@@ -504,7 +504,7 @@ export const WebWorkerClient = async (
 
         return communicate<null, string>(message)
           .then((url: string) => {
-            SPAUtils.setSignOutURL(url, config.clientID, instanceID);
+            SPAUtils.setSignOutURL(url, config.clientId, instanceID);
 
             // Enable OIDC Sessions Management only if it is set to true in the config.
             if (config.enableOIDCSessionManagement) {
@@ -636,7 +636,7 @@ export const WebWorkerClient = async (
             return reject(error);
           });
       } else {
-        window.location.href = SPAUtils.getSignOutURL(config.clientID, instanceID);
+        window.location.href = SPAUtils.getSignOutURL(config.clientId, instanceID);
 
         return SPAUtils.waitTillPageRedirect().then(() => {
           return Promise.resolve(true);
diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
index cbd78d147..2e3fdebf2 100644
--- a/packages/browser/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -90,7 +90,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     sessionManagementHelper: SessionManagementHelperInterface,
   ): void {
     sessionManagementHelper.initialize(
-      config.clientID,
+      config.clientId,
       oidcEndpoints.checkSessionIframe ?? '',
       getSessionState,
       config.checkSessionInterval ?? 3,
@@ -473,7 +473,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
                         SPAUtils.setSignOutURL(await _authenticationClient.getSignOutURL());
                     } */
           if (config.storage !== BrowserStorage.WebWorker) {
-            SPAUtils.setSignOutURL(await this._authenticationClient.getSignOutURL(), config.clientID, this._instanceID);
+            SPAUtils.setSignOutURL(await this._authenticationClient.getSignOutURL(), config.clientId, this._instanceID);
 
             if (this._spaHelper) {
               this._spaHelper.clearRefreshTokenTimeout();
diff --git a/packages/browser/src/__legacy__/helpers/session-management-helper.ts b/packages/browser/src/__legacy__/helpers/session-management-helper.ts
index c2c1a292a..efedc1896 100644
--- a/packages/browser/src/__legacy__/helpers/session-management-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/session-management-helper.ts
@@ -48,7 +48,7 @@ export const SessionManagementHelper = (() => {
   let _getAuthorizationURL: (params?: ExtendedAuthorizeRequestUrlParams) => Promise<string>;
 
   const initialize = (
-    clientID: string,
+    clientId: string,
     checkSessionEndpoint: string,
     getSessionState: () => Promise<string>,
     interval: number,
@@ -56,7 +56,7 @@ export const SessionManagementHelper = (() => {
     redirectURL: string,
     getAuthorizationURL: (params?: ExtendedAuthorizeRequestUrlParams) => Promise<string>,
   ): void => {
-    _clientID = clientID;
+    _clientID = clientId;
     _checkSessionEndpoint = checkSessionEndpoint;
     _sessionState = getSessionState;
     _interval = interval;
diff --git a/packages/browser/src/__legacy__/models/session-management-helper.ts b/packages/browser/src/__legacy__/models/session-management-helper.ts
index eff2f3d72..72be72baf 100644
--- a/packages/browser/src/__legacy__/models/session-management-helper.ts
+++ b/packages/browser/src/__legacy__/models/session-management-helper.ts
@@ -20,7 +20,7 @@ import {ExtendedAuthorizeRequestUrlParams} from '@asgardeo/javascript';
 
 export interface SessionManagementHelperInterface {
   initialize(
-    clientID: string,
+    clientId: string,
     checkSessionEndpoint: string,
     getSessionState: () => Promise<string>,
     interval: number,
diff --git a/packages/browser/src/__legacy__/utils/crypto-utils.ts b/packages/browser/src/__legacy__/utils/crypto-utils.ts
index 3958ab0f2..1d3792712 100644
--- a/packages/browser/src/__legacy__/utils/crypto-utils.ts
+++ b/packages/browser/src/__legacy__/utils/crypto-utils.ts
@@ -49,7 +49,7 @@ export class SPACryptoUtils implements Crypto<Buffer | string> {
     idToken: string,
     jwk: Partial<JWKInterface>,
     algorithms: string[],
-    clientID: string,
+    clientId: string,
     issuer: string,
     subject: string,
     clockTolerance?: number,
@@ -57,7 +57,7 @@ export class SPACryptoUtils implements Crypto<Buffer | string> {
   ): Promise<boolean> {
     const jwtVerifyOptions = {
       algorithms: algorithms,
-      audience: clientID,
+      audience: clientId,
       clockTolerance: clockTolerance,
       subject: subject,
     };
diff --git a/packages/browser/src/__legacy__/utils/spa-utils.ts b/packages/browser/src/__legacy__/utils/spa-utils.ts
index f20583d42..1810bd11f 100644
--- a/packages/browser/src/__legacy__/utils/spa-utils.ts
+++ b/packages/browser/src/__legacy__/utils/spa-utils.ts
@@ -45,17 +45,17 @@ export class SPAUtils {
     sessionStorage.setItem(pkceKey, pkce);
   }
 
-  public static setSignOutURL(url: string, clientID: string, instanceID: number): void {
+  public static setSignOutURL(url: string, clientId: string, instanceID: number): void {
     sessionStorage.setItem(
-      `${OIDCRequestConstants.SignOut.Storage.StorageKeys.SIGN_OUT_URL}-instance_${instanceID}-${clientID}`,
+      `${OIDCRequestConstants.SignOut.Storage.StorageKeys.SIGN_OUT_URL}-instance_${instanceID}-${clientId}`,
       url,
     );
   }
 
-  public static getSignOutURL(clientID: string, instanceID: number): string {
+  public static getSignOutURL(clientId: string, instanceID: number): string {
     return (
       sessionStorage.getItem(
-        `${OIDCRequestConstants.SignOut.Storage.StorageKeys.SIGN_OUT_URL}-instance_${instanceID}-${clientID}`,
+        `${OIDCRequestConstants.SignOut.Storage.StorageKeys.SIGN_OUT_URL}-instance_${instanceID}-${clientId}`,
       ) ?? ''
     );
   }
diff --git a/packages/javascript/README.md b/packages/javascript/README.md
index 5236fad90..0848e8dc3 100644
--- a/packages/javascript/README.md
+++ b/packages/javascript/README.md
@@ -29,7 +29,7 @@ import { AsgardeoAuth } from "@asgardeo/javascript";
 // Initialize the auth instance
 const auth = new AsgardeoAuth({
     signInRedirectURL: "https://localhost:3000",
-    clientID: "<your_client_id>",
+    clientId: "<your_client_id>",
     baseUrl: "https://api.asgardeo.io/t/<org_name>"
 });
 
diff --git a/packages/javascript/src/IsomorphicCrypto.ts b/packages/javascript/src/IsomorphicCrypto.ts
index c56bfb0c0..835158df2 100644
--- a/packages/javascript/src/IsomorphicCrypto.ts
+++ b/packages/javascript/src/IsomorphicCrypto.ts
@@ -83,7 +83,7 @@ export class IsomorphicCrypto<T = any> {
    *
    * @param idToken - id_token received from the IdP.
    * @param jwk - public key used for signing.
-   * @param clientID - app identification.
+   * @param clientId - app identification.
    * @param issuer - id_token issuer.
    * @param username - Username.
    * @param clockTolerance - Allowed leeway for id_tokens (in seconds).
@@ -95,7 +95,7 @@ export class IsomorphicCrypto<T = any> {
   public isValidIdToken(
     idToken: string,
     jwk: JWKInterface,
-    clientID: string,
+    clientId: string,
     issuer: string,
     username: string,
     clockTolerance: number | undefined,
@@ -106,7 +106,7 @@ export class IsomorphicCrypto<T = any> {
         idToken,
         jwk,
         TokenConstants.SignatureValidation.SUPPORTED_ALGORITHMS as unknown as string[],
-        clientID,
+        clientId,
         issuer,
         username,
         clockTolerance,
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 75f19caa2..59d9e75e9 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -103,7 +103,7 @@ export class AsgardeoAuthClient<T> {
    * @example
    * const config = \{
    *     signInRedirectURL: "http://localhost:3000/sign-in",
-   *     clientID: "client ID",
+   *     clientId: "client ID",
    *     baseUrl: "https://localhost:9443"
    * \}
    *
@@ -119,7 +119,7 @@ export class AsgardeoAuthClient<T> {
     cryptoUtils: Crypto,
     instanceID?: number,
   ): Promise<void> {
-    const clientId: string = config.clientID;
+    const clientId: string = config.clientId;
 
     if (!AsgardeoAuthClient._instanceID) {
       AsgardeoAuthClient._instanceID = 0;
@@ -250,7 +250,7 @@ export class AsgardeoAuthClient<T> {
       const authorizeRequestParams: Map<string, string> = getAuthorizeRequestUrlParams(
         {
           redirectUri: configData.signInRedirectURL,
-          clientId: configData.clientID,
+          clientId: configData.clientId,
           scope: configData.scope as unknown as any,
           responseMode: configData.responseMode,
           codeChallengeMethod: PKCEConstants.DEFAULT_CODE_CHALLENGE_METHOD,
@@ -337,7 +337,7 @@ export class AsgardeoAuthClient<T> {
 
       const body: URLSearchParams = new URLSearchParams();
 
-      body.set('client_id', configData.clientID);
+      body.set('client_id', configData.clientId);
 
       if (configData.clientSecret && configData.clientSecret.trim().length > 0) {
         body.set('client_secret', configData.clientSecret);
@@ -536,7 +536,7 @@ export class AsgardeoAuthClient<T> {
       }
       queryParams.set('id_token_hint', idToken);
     } else {
-      queryParams.set('client_id', configData.clientID);
+      queryParams.set('client_id', configData.clientId);
     }
 
     queryParams.set('state', OIDCRequestConstants.Params.SIGN_OUT_SUCCESS);
@@ -715,7 +715,7 @@ export class AsgardeoAuthClient<T> {
 
     const body: string[] = [];
 
-    body.push(`client_id=${configData.clientID}`);
+    body.push(`client_id=${configData.clientId}`);
     body.push(`token=${(await this._storageManager.getSessionData(userID)).access_token}`);
     body.push('token_type_hint=access_token');
 
@@ -803,7 +803,7 @@ export class AsgardeoAuthClient<T> {
 
     const body: string[] = [];
 
-    body.push(`client_id=${configData.clientID}`);
+    body.push(`client_id=${configData.clientId}`);
     body.push(`refresh_token=${sessionData.refresh_token}`);
     body.push('grant_type=refresh_token');
 
@@ -879,7 +879,7 @@ export class AsgardeoAuthClient<T> {
    * const config = {
    *   attachToken: false,
    *   data: {
-   *       client_id: "{{clientID}}",
+   *       client_id: "{{clientId}}",
    *       grant_type: "account_switch",
    *       scope: "{{scope}}",
    *       token: "{{token}}",
@@ -1119,7 +1119,7 @@ export class AsgardeoAuthClient<T> {
    * ```
    * const config = {
    *     signInRedirectURL: "http://localhost:3000/sign-in",
-   *     clientID: "client ID",
+   *     clientId: "client ID",
    *     baseUrl: "https://localhost:9443"
    * }
    *
diff --git a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
index 8c5d29fc9..85947823c 100644
--- a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
@@ -196,7 +196,7 @@ export class AuthenticationHelper<T> {
     return this._cryptoHelper.isValidIdToken(
       idToken,
       jwk,
-      (await this._config()).clientID,
+      (await this._config()).clientId,
       issuer ?? '',
       this._cryptoHelper.decodeIDToken(idToken).sub,
       (await this._config()).clockTolerance,
@@ -241,7 +241,7 @@ export class AuthenticationHelper<T> {
         this.getAuthenticatedUserInfo(sessionData.id_token).username,
       )
       .replace(TokenExchangeConstants.Placeholders.SCOPE, scope)
-      .replace(TokenExchangeConstants.Placeholders.CLIENT_ID, configData.clientID)
+      .replace(TokenExchangeConstants.Placeholders.CLIENT_ID, configData.clientId)
       .replace(TokenExchangeConstants.Placeholders.CLIENT_SECRET, configData.clientSecret ?? '');
   }
 
diff --git a/packages/javascript/src/__legacy__/models/client-config.ts b/packages/javascript/src/__legacy__/models/client-config.ts
index 4456d8352..e958b4881 100644
--- a/packages/javascript/src/__legacy__/models/client-config.ts
+++ b/packages/javascript/src/__legacy__/models/client-config.ts
@@ -23,7 +23,7 @@ export interface DefaultAuthClientConfig {
   signInRedirectURL: string;
   signOutRedirectURL?: string;
   clientHost?: string;
-  clientID: string;
+  clientId: string;
   clientSecret?: string;
   enablePKCE?: boolean;
   prompt?: string;
diff --git a/packages/javascript/src/constants/TokenExchangeConstants.ts b/packages/javascript/src/constants/TokenExchangeConstants.ts
index a8822564e..efb731cfe 100644
--- a/packages/javascript/src/constants/TokenExchangeConstants.ts
+++ b/packages/javascript/src/constants/TokenExchangeConstants.ts
@@ -61,7 +61,7 @@ const TokenExchangeConstants = {
      * Placeholder for client ID in token exchange operations.
      * Required for client authentication.
      */
-    CLIENT_ID: '{{clientID}}',
+    CLIENT_ID: '{{clientId}}',
 
     /**
      * Placeholder for client secret in token exchange operations.
diff --git a/packages/javascript/src/models/crypto.ts b/packages/javascript/src/models/crypto.ts
index 85c435570..036f4d650 100644
--- a/packages/javascript/src/models/crypto.ts
+++ b/packages/javascript/src/models/crypto.ts
@@ -32,14 +32,14 @@ export interface JWKInterface {
  * Cryptographic utility interface for OIDC operations.
  * Provides methods for encoding, decoding, hashing, and JWT verification
  * used in OAuth2/OIDC flows.
- * 
+ *
  * @remarks
  * This interface abstracts cryptographic operations needed for:
  * - PKCE challenge/verifier generation
  * - JWT token validation
  * - Base64URL encoding/decoding
  * - Secure random number generation
- * 
+ *
  * @example
  * ```typescript
  * class MyCrypto implements Crypto<Uint8Array> {
@@ -93,7 +93,7 @@ export interface Crypto<T = any> {
    * @param idToken - ID Token to be verified.
    * @param jwk - JWK to be used for verification.
    * @param algorithms - Algorithms to be used for verification.
-   * @param clientID - Client ID to be used for verification.
+   * @param clientId - Client ID to be used for verification.
    * @param issuer - Issuer to be used for verification.
    * @param subject - Subject to be used for verification.
    * @param clockTolerance - Clock tolerance to be used for verification.
@@ -106,7 +106,7 @@ export interface Crypto<T = any> {
     idToken: string,
     jwk: JWKInterface,
     algorithms: string[],
-    clientID: string,
+    clientId: string,
     issuer: string,
     subject: string,
     clockTolerance?: number,
diff --git a/packages/nextjs/src/AsgardeoNextClient.ts b/packages/nextjs/src/AsgardeoNextClient.ts
index 491268a2e..ec9fb2cfc 100644
--- a/packages/nextjs/src/AsgardeoNextClient.ts
+++ b/packages/nextjs/src/AsgardeoNextClient.ts
@@ -58,7 +58,7 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
 
     return this.asgardeo.initialize({
       baseUrl,
-      clientID: clientId,
+      clientId: clientId,
       clientSecret,
       signInRedirectURL: afterSignInUrl,
     } as any);
@@ -127,11 +127,11 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
         {},
         undefined,
         (redirectUrl: string) => {
-          return response = NextResponse.redirect(redirectUrl, 302);
+          return (response = NextResponse.redirect(redirectUrl, 302));
         },
         searchParams.get('code') as string,
-        searchParams.get('session_state')as string,
-        searchParams.get('state')as string,
+        searchParams.get('session_state') as string,
+        searchParams.get('state') as string,
       );
 
       // If we already redirected via the callback, return that
diff --git a/packages/node/README.md b/packages/node/README.md
index 500d505e9..0836b19c4 100644
--- a/packages/node/README.md
+++ b/packages/node/README.md
@@ -28,7 +28,7 @@ import { AsgardeoNodeClient } from "@asgardeo/node";
 
 // Initialize the client
 const authClient = new AsgardeoNodeClient({
-    clientID: "<your_client_id>",
+    clientId: "<your_client_id>",
     clientSecret: "<your_client_secret>",
     baseUrl: "https://api.asgardeo.io/t/<org_name>",
     callbackURL: "http://localhost:3000/callback"
diff --git a/packages/node/src/__legacy__/client.ts b/packages/node/src/__legacy__/client.ts
index 9e1cf80cb..35e3f0914 100644
--- a/packages/node/src/__legacy__/client.ts
+++ b/packages/node/src/__legacy__/client.ts
@@ -51,7 +51,7 @@ export class AsgardeoNodeClient<T> {
     * const _config = {
            signInRedirectURL: "http://localhost:3000/sign-in",
            signOutRedirectURL: "http://localhost:3000/dashboard",
-           clientID: "client ID",
+           clientId: "client ID",
            serverOrigin: "https://api.asgardeo.io/t/<org_name>"
        };
     * const auth = new AsgardeoNodeClient(_config,_store);
@@ -276,7 +276,7 @@ export class AsgardeoNodeClient<T> {
      * const config = {
      *      attachToken: false,
      *      data: {
-     *          client_id: "{{clientID}}",
+     *          client_id: "{{clientId}}",
      *          grant_type: "account_switch",
      *          scope: "{{scope}}",
      *          token: "{{token}}",
diff --git a/packages/node/src/__legacy__/utils/crypto-utils.ts b/packages/node/src/__legacy__/utils/crypto-utils.ts
index fef425ada..7a7fccfb5 100644
--- a/packages/node/src/__legacy__/utils/crypto-utils.ts
+++ b/packages/node/src/__legacy__/utils/crypto-utils.ts
@@ -51,7 +51,7 @@ export class NodeCryptoUtils implements Crypto<Buffer | string> {
     idToken: string,
     jwk: Partial<JWKInterface>,
     algorithms: string[],
-    clientID: string,
+    clientId: string,
     issuer: string,
     subject: string,
     clockTolerance?: number,
@@ -60,7 +60,7 @@ export class NodeCryptoUtils implements Crypto<Buffer | string> {
     return jose
       .jwtVerify(idToken, key, {
         algorithms: algorithms,
-        audience: clientID,
+        audience: clientId,
         clockTolerance: clockTolerance,
         issuer: issuer,
         subject: subject,
diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts
index 88185247f..9aa1d522a 100644
--- a/packages/nuxt/src/module.ts
+++ b/packages/nuxt/src/module.ts
@@ -29,7 +29,7 @@ export type {BasicUserInfo};
 export default defineNuxtModule<ModuleOptions>({
   defaults: {
     baseUrl: process.env.ASGARDEO_BASE_URL || '',
-    clientID: process.env.ASGARDEO_CLIENT_ID || '',
+    clientId: process.env.ASGARDEO_CLIENT_ID || '',
     clientSecret: process.env.ASGARDEO_CLIENT_SECRET || '',
     scope: ['openid', 'profile'],
     signInRedirectURL: process.env.ASGARDEO_SIGN_IN_REDIRECT_URL || '',
@@ -45,7 +45,7 @@ export default defineNuxtModule<ModuleOptions>({
       nuxt.options.runtimeConfig.asgardeoAuth,
       nuxt.options.runtimeConfig.public.asgardeoAuth,
       {
-        clientID: process.env.ASGARDEO_CLIENT_ID,
+        clientId: process.env.ASGARDEO_CLIENT_ID,
         clientSecret: process.env.ASGARDEO_CLIENT_SECRET,
         enablePKCE: true,
         scope: ['openid', 'profile'],
@@ -57,12 +57,12 @@ export default defineNuxtModule<ModuleOptions>({
 
     // eslint-disable-next-line no-param-reassign
     nuxt.options.runtimeConfig.public.asgardeoAuth = defu(nuxt.options.runtimeConfig.public.asgardeoAuth, {
-      clientID: options.clientID,
+      clientId: options.clientId,
     });
 
     // eslint-disable-next-line no-param-reassign
     nuxt.options.runtimeConfig.asgardeoAuth = defu(nuxt.options.runtimeConfig.asgardeoAuth, {
-      clientID: options.clientID,
+      clientId: options.clientId,
       clientSecret: options.clientSecret,
       scope: options.scope,
       serverOrigin: options.baseUrl,
@@ -102,7 +102,7 @@ export default defineNuxtModule<ModuleOptions>({
 
 declare module '@nuxt/schema' {
   interface PublicRuntimeConfig {
-    asgardeoAuth: Pick<ModuleOptions, 'clientID' | 'baseUrl' | 'signInRedirectURL' | 'signOutRedirectURL' | 'scope'>;
+    asgardeoAuth: Pick<ModuleOptions, 'clientId' | 'baseUrl' | 'signInRedirectURL' | 'signOutRedirectURL' | 'scope'>;
   }
 
   interface RuntimeConfig {
diff --git a/packages/nuxt/src/runtime/types.ts b/packages/nuxt/src/runtime/types.ts
index 7f1334eb4..1082bc855 100644
--- a/packages/nuxt/src/runtime/types.ts
+++ b/packages/nuxt/src/runtime/types.ts
@@ -30,7 +30,7 @@ export interface ModuleOptions {
    * Asgardeo Application Client ID.
    * @default process.env.ASGARDEO_CLIENT_ID
    */
-  clientID: string;
+  clientId: string;
 
   /**
    * Asgardeo Application Client Secret. (Server-side only)
diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index 951271b72..822ee070f 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -49,7 +49,7 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
 
     return this.asgardeo.init({
       baseUrl: config.baseUrl,
-      clientID: config.clientId,
+      clientId: config.clientId,
       signInRedirectURL: config.afterSignInUrl,
       scope: [...scopes, 'internal_login'],
     });
diff --git a/packages/vue/README.md b/packages/vue/README.md
index 52b520283..0ef94efed 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -34,7 +34,7 @@ const app = createApp(App)
 app.use(AsgardeoAuth, {
   signInRedirectURL: "http://localhost:3000",
   signOutRedirectURL: "http://localhost:3000",
-  clientID: "<your-client-id>",
+  clientId: "<your-client-id>",
   baseUrl: "https://api.asgardeo.io/t/<org-name>",
   scope: ["openid", "profile"]
 })
diff --git a/packages/vue/src/tests/AsgardeoPlugin.test.ts b/packages/vue/src/tests/AsgardeoPlugin.test.ts
index be94a1ae3..c4fdf3627 100644
--- a/packages/vue/src/tests/AsgardeoPlugin.test.ts
+++ b/packages/vue/src/tests/AsgardeoPlugin.test.ts
@@ -70,7 +70,7 @@ describe('asgardeoPlugin', () => {
     expect(mockAuthAPI.init).toHaveBeenCalledWith(
       expect.objectContaining({
         baseUrl: 'https://api.asgardeo.io/t/mock-tenant',
-        clientID: 'mock-client-id',
+        clientId: 'mock-client-id',
         disableAutoSignIn: true,
         disableTrySignInSilently: true,
         signInRedirectURL: 'http://localhost:5173/',
@@ -176,7 +176,7 @@ describe('asgardeoPlugin', () => {
   it('should update config and sync state', async () => {
     const authContext: AuthContextInterface = app._context.provides[ASGARDEO_INJECTION_KEY];
 
-    const newConfig: Partial<AuthClientConfig<Config>> = {clientID: 'new-client-id'};
+    const newConfig: Partial<AuthClientConfig<Config>> = {clientId: 'new-client-id'};
 
     const updatedState: AuthStateInterface = {
       ...mockState,
diff --git a/packages/vue/src/tests/auth-api.test.ts b/packages/vue/src/tests/auth-api.test.ts
index cb2cb4a40..0d0fae259 100644
--- a/packages/vue/src/tests/auth-api.test.ts
+++ b/packages/vue/src/tests/auth-api.test.ts
@@ -70,7 +70,7 @@ describe('AuthAPI', () => {
     it('should call initialize on the client with the provided config', async () => {
       const config: AuthVueConfig = {
         baseUrl: 'https://api.asgardeo.io/t/mock-tenant',
-        clientID: 'mock-client-id',
+        clientId: 'mock-client-id',
         signInRedirectURL: 'http://localhost:5173/',
         signOutRedirectURL: 'http://localhost:5173/',
       };
@@ -419,7 +419,7 @@ describe('AuthAPI', () => {
 
   describe('updateConfig', () => {
     it('should call updateConfig on the client', async () => {
-      const config: Partial<AuthClientConfig<Config>> = {clientID: 'new-client-id'};
+      const config: Partial<AuthClientConfig<Config>> = {clientId: 'new-client-id'};
       await authApi.updateConfig(config);
       expect(mockClient.updateConfig).toHaveBeenCalledWith(config);
     });
diff --git a/packages/vue/src/tests/mocks/mocks.ts b/packages/vue/src/tests/mocks/mocks.ts
index 345e76991..f319e37f8 100644
--- a/packages/vue/src/tests/mocks/mocks.ts
+++ b/packages/vue/src/tests/mocks/mocks.ts
@@ -200,7 +200,7 @@ export const asgardeoAuthSPAMock: any = {
 
 export const mockConfig: AuthVueConfig = {
   baseUrl: 'https://api.asgardeo.io/t/mock-tenant',
-  clientID: 'mock-client-id',
+  clientId: 'mock-client-id',
   signInRedirectURL: 'http://localhost:5173/',
   signOutRedirectURL: 'http://localhost:5173/',
 };
diff --git a/recipes/__legacy__/react-vite/src/main.tsx b/recipes/__legacy__/react-vite/src/main.tsx
index f5924b3f2..4969d4dd7 100644
--- a/recipes/__legacy__/react-vite/src/main.tsx
+++ b/recipes/__legacy__/react-vite/src/main.tsx
@@ -6,7 +6,7 @@ const envVariables = import.meta.env;
 
 const config: UIAuthConfig = {
   baseUrl: envVariables.VITE_BASE_URL,
-  clientID: envVariables.VITE_CLIENT_ID,
+  clientId: envVariables.VITE_CLIENT_ID,
   scope: envVariables.VITE_SCOPE?.split(","),
   signInRedirectURL: envVariables.VITE_SIGN_IN_REDIRECT_URL,
 };
diff --git a/recipes/nuxt-vite/server/api/auth/[...].ts b/recipes/nuxt-vite/server/api/auth/[...].ts
index e1cd84558..8a90adb11 100644
--- a/recipes/nuxt-vite/server/api/auth/[...].ts
+++ b/recipes/nuxt-vite/server/api/auth/[...].ts
@@ -1,10 +1,10 @@
 const config = {
-    baseUrl: process.env.ASGARDEO_BASE_URL as string,
-    clientID: process.env.ASGARDEO_CLIENT_ID as string,
-    clientSecret: process.env.ASGARDEO_CLIENT_SECRET as string,
-    signInRedirectURL: process.env.ASGARDEO_SIGN_IN_REDIRECT_URL as string,
-    signOutRedirectURL: process.env.ASGARDEO_SIGN_OUT_REDIRECT_URL as string,
-    scope: process.env.ASGARDEO_SCOPE?.split(",").map(scope => scope.trim()) as string[]
-}
+  baseUrl: process.env.ASGARDEO_BASE_URL as string,
+  clientId: process.env.ASGARDEO_CLIENT_ID as string,
+  clientSecret: process.env.ASGARDEO_CLIENT_SECRET as string,
+  signInRedirectURL: process.env.ASGARDEO_SIGN_IN_REDIRECT_URL as string,
+  signOutRedirectURL: process.env.ASGARDEO_SIGN_OUT_REDIRECT_URL as string,
+  scope: process.env.ASGARDEO_SCOPE?.split(',').map(scope => scope.trim()) as string[],
+};
 
 export default AsgardeoAuthHandler(config);
diff --git a/recipes/vue-vite/README.md b/recipes/vue-vite/README.md
index fcc6eb759..a8758474b 100644
--- a/recipes/vue-vite/README.md
+++ b/recipes/vue-vite/README.md
@@ -34,7 +34,7 @@ app.use(router);
 app.use(asgardeoPlugin, {
   signInRedirectURL: "http://localhost:5173/",
   signOutRedirectURL: "http://localhost:5173/",
-  clientID: "<ADD_CLIENT_ID_HERE>",
+  clientId: "<ADD_CLIENT_ID_HERE>",
   baseUrl: "https://api.asgardeo.io/t/<org_name>",
 });
 
diff --git a/recipes/vue-vite/src/main.ts b/recipes/vue-vite/src/main.ts
index 063a802b2..9ca39e7ec 100644
--- a/recipes/vue-vite/src/main.ts
+++ b/recipes/vue-vite/src/main.ts
@@ -27,7 +27,7 @@ const app: VueApp = createApp(App)
 
 const config: AuthVueConfig = {
   baseUrl: import.meta.env.VITE_ASGARDEO_BASE_URL,
-  clientID: import.meta.env.VITE_ASGARDEO_CLIENT_ID,
+  clientId: import.meta.env.VITE_ASGARDEO_CLIENT_ID,
   scope: ['openid', 'profile', 'email'],
   signInRedirectURL: import.meta.env.VITE_ASGARDEO_SIGN_IN_REDIRECT_URL,
   signOutRedirectURL: import.meta.env.VITE_ASGARDEO_SIGN_OUT_REDIRECT_URL,

From 9b6d458e7a0b3efe96c5f1dc14dec3d380290b5f Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Mon, 9 Jun 2025 17:21:51 +0530
Subject: [PATCH 024/131] chore: rename `signInRedirectURL` to `afterSignInUrl`
 across codebase for consistency

---
 docs/src/react/components/asgardeo-provider.md   |  2 +-
 docs/src/react/introduction.md                   |  2 +-
 .../react/src/components/SignIn/SignIn.tsx       |  2 +-
 .../react/src/providers/AsgardeoProvider.tsx     |  4 ++--
 packages/browser/README.md                       |  2 +-
 packages/browser/src/__legacy__/client.ts        |  4 ++--
 .../__legacy__/helpers/authentication-helper.ts  |  2 +-
 packages/browser/src/__legacy__/models/client.ts |  4 ++--
 .../browser/src/__legacy__/models/web-worker.ts  |  2 +-
 packages/javascript/README.md                    |  2 +-
 packages/javascript/src/__legacy__/client.ts     | 10 +++++-----
 .../src/__legacy__/models/client-config.ts       |  2 +-
 packages/nextjs/src/AsgardeoNextClient.ts        |  2 +-
 packages/node/src/__legacy__/client.ts           |  2 +-
 packages/nuxt/src/module.ts                      |  8 ++++----
 packages/nuxt/src/runtime/types.ts               |  2 +-
 packages/react/src/AsgardeoReactClient.ts        |  2 +-
 packages/vue/README.md                           |  2 +-
 packages/vue/src/plugins/AsgardeoPlugin.ts       |  2 +-
 packages/vue/src/tests/AsgardeoPlugin.test.ts    |  2 +-
 packages/vue/src/tests/auth-api.test.ts          |  2 +-
 packages/vue/src/tests/mocks/mocks.ts            |  2 +-
 recipes/__legacy__/react-vite/src/main.tsx       | 16 ++++++++--------
 recipes/nuxt-vite/server/api/auth/[...].ts       |  2 +-
 recipes/vue-vite/README.md                       |  4 ++--
 recipes/vue-vite/src/main.ts                     |  2 +-
 26 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/docs/src/react/components/asgardeo-provider.md b/docs/src/react/components/asgardeo-provider.md
index 6b7b674ed..c21ecf8d5 100644
--- a/docs/src/react/components/asgardeo-provider.md
+++ b/docs/src/react/components/asgardeo-provider.md
@@ -38,7 +38,7 @@ import { AsgardeoProvider } from "@asgardeo/react";
 
   - `baseURL`: The base URL of asgardeo.
 
-  - `signInRedirectURL`: The URL where users should be redirected after they sign in. This should be a page in your application.
+  - `afterSignInUrl`: The URL where users should be redirected after they sign in. This should be a page in your application.
 
   - `clientId`: The ID of your application. You get this when you register your application with Asgardeo.
 
diff --git a/docs/src/react/introduction.md b/docs/src/react/introduction.md
index 03b64685d..d6c98377d 100644
--- a/docs/src/react/introduction.md
+++ b/docs/src/react/introduction.md
@@ -73,7 +73,7 @@ Then, wrap your application with the `AsgardeoProvider` and pass the basic confi
       baseUrl: "https://api.asgardeo.io/t/org_name",
       clientId: "gqtroUbA1Qsulqr*****",
       scope: ["openid", "internal_login", "profile"],
-      signInRedirectURL: "https://domain_name:8080",
+      afterSignInUrl: "https://domain_name:8080",
     }}>
     <App />
 </AsgardeoProvider>
diff --git a/packages/__legacy__/react/src/components/SignIn/SignIn.tsx b/packages/__legacy__/react/src/components/SignIn/SignIn.tsx
index 173c40e27..28fe83927 100644
--- a/packages/__legacy__/react/src/components/SignIn/SignIn.tsx
+++ b/packages/__legacy__/react/src/components/SignIn/SignIn.tsx
@@ -159,7 +159,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
           /**
            * Check the origin of the message to ensure it's from the popup window
            */
-          if (event.origin !== config.signInRedirectURL) return;
+          if (event.origin !== config.afterSignInUrl) return;
 
           const {code, state} = event.data;
 
diff --git a/packages/__legacy__/react/src/providers/AsgardeoProvider.tsx b/packages/__legacy__/react/src/providers/AsgardeoProvider.tsx
index 0400cee9a..7d21c417c 100644
--- a/packages/__legacy__/react/src/providers/AsgardeoProvider.tsx
+++ b/packages/__legacy__/react/src/providers/AsgardeoProvider.tsx
@@ -124,10 +124,10 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = (
       /**
        * Send the 'code' and 'state' to the parent window and close the current window (popup)
        */
-      window.opener.postMessage({code, state}, config.signInRedirectURL);
+      window.opener.postMessage({code, state}, config.afterSignInUrl);
       window.close();
     }
-  }, [config.signInRedirectURL, setAuthentication]);
+  }, [config.afterSignInUrl, setAuthentication]);
 
   const value: AuthContext = useMemo(
     () => ({
diff --git a/packages/browser/README.md b/packages/browser/README.md
index d0d2b9ae5..1033f4ed3 100644
--- a/packages/browser/README.md
+++ b/packages/browser/README.md
@@ -28,7 +28,7 @@ import { AsgardeoAuthClient } from "@asgardeo/browser";
 
 // Initialize the auth client
 const authClient = new AsgardeoAuthClient({
-    signInRedirectURL: "https://localhost:3000",
+    afterSignInUrl: "https://localhost:3000",
     clientId: "<your_client_id>",
     baseUrl: "https://api.asgardeo.io/t/<org_name>"
 });
diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
index f001c7c79..91140c944 100755
--- a/packages/browser/src/__legacy__/client.ts
+++ b/packages/browser/src/__legacy__/client.ts
@@ -217,7 +217,7 @@ export class AsgardeoSPAClient {
    * @example
    * ```
    * auth.initialize({
-   *     signInRedirectURL: "http://localhost:3000/sign-in",
+   *     afterSignInUrl: "http://localhost:3000/sign-in",
    *     clientId: "client ID",
    *     baseUrl: "https://api.asgardeo.io"
    * });
@@ -1144,7 +1144,7 @@ export class AsgardeoSPAClient {
    * @example
    * ```
    * const config = {
-   *     signInRedirectURL: "http://localhost:3000/sign-in",
+   *     afterSignInUrl: "http://localhost:3000/sign-in",
    *     clientId: "client ID",
    *     baseUrl: "https://api.asgardeo.io"
    * }
diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
index 2e3fdebf2..ae9f4a926 100644
--- a/packages/browser/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -95,7 +95,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
       getSessionState,
       config.checkSessionInterval ?? 3,
       config.sessionRefreshInterval ?? 300,
-      config.signInRedirectURL,
+      config.afterSignInUrl,
       getAuthzURL,
     );
   }
diff --git a/packages/browser/src/__legacy__/models/client.ts b/packages/browser/src/__legacy__/models/client.ts
index 627ee398c..2d3c45432 100755
--- a/packages/browser/src/__legacy__/models/client.ts
+++ b/packages/browser/src/__legacy__/models/client.ts
@@ -50,7 +50,7 @@ export interface MainThreadClientInterface {
     config?: SignInConfig,
     authorizationCode?: string,
     sessionState?: string,
-    signInRedirectURL?: string,
+    afterSignInUrl?: string,
     tokenRequestConfig?: {
       params: Record<string, unknown>;
     },
@@ -87,7 +87,7 @@ export interface WebWorkerClientInterface {
     params?: SignInConfig,
     authorizationCode?: string,
     sessionState?: string,
-    signInRedirectURL?: string,
+    afterSignInUrl?: string,
     tokenRequestConfig?: {
       params: Record<string, unknown>;
     },
diff --git a/packages/browser/src/__legacy__/models/web-worker.ts b/packages/browser/src/__legacy__/models/web-worker.ts
index 5cdeb0780..4b4b92bba 100755
--- a/packages/browser/src/__legacy__/models/web-worker.ts
+++ b/packages/browser/src/__legacy__/models/web-worker.ts
@@ -45,7 +45,7 @@ export interface WebWorkerCoreInterface {
   httpRequestAll(configs: HttpRequestConfig[]): Promise<HttpResponse[] | undefined>;
   enableHttpHandler(): void;
   disableHttpHandler(): void;
-  getAuthorizationURL(params?: AuthorizeRequestUrlParams, signInRedirectURL?: string): Promise<AuthorizationResponse>;
+  getAuthorizationURL(params?: AuthorizeRequestUrlParams, afterSignInUrl?: string): Promise<AuthorizationResponse>;
   requestAccessToken(
     authorizationCode?: string,
     sessionState?: string,
diff --git a/packages/javascript/README.md b/packages/javascript/README.md
index 0848e8dc3..b59d5f1c1 100644
--- a/packages/javascript/README.md
+++ b/packages/javascript/README.md
@@ -28,7 +28,7 @@ import { AsgardeoAuth } from "@asgardeo/javascript";
 
 // Initialize the auth instance
 const auth = new AsgardeoAuth({
-    signInRedirectURL: "https://localhost:3000",
+    afterSignInUrl: "https://localhost:3000",
     clientId: "<your_client_id>",
     baseUrl: "https://api.asgardeo.io/t/<org_name>"
 });
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 59d9e75e9..4a1d0a97e 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -102,7 +102,7 @@ export class AsgardeoAuthClient<T> {
    *
    * @example
    * const config = \{
-   *     signInRedirectURL: "http://localhost:3000/sign-in",
+   *     afterSignInUrl: "http://localhost:3000/sign-in",
    *     clientId: "client ID",
    *     baseUrl: "https://localhost:9443"
    * \}
@@ -249,7 +249,7 @@ export class AsgardeoAuthClient<T> {
 
       const authorizeRequestParams: Map<string, string> = getAuthorizeRequestUrlParams(
         {
-          redirectUri: configData.signInRedirectURL,
+          redirectUri: configData.afterSignInUrl,
           clientId: configData.clientId,
           scope: configData.scope as unknown as any,
           responseMode: configData.responseMode,
@@ -348,7 +348,7 @@ export class AsgardeoAuthClient<T> {
       body.set('code', code);
 
       body.set('grant_type', 'authorization_code');
-      body.set('redirect_uri', configData.signInRedirectURL);
+      body.set('redirect_uri', configData.afterSignInUrl);
 
       if (tokenRequestConfig?.params) {
         Object.entries(tokenRequestConfig.params).forEach(([key, value]: [key: string, value: unknown]) => {
@@ -510,7 +510,7 @@ export class AsgardeoAuthClient<T> {
       );
     }
 
-    const callbackURL: string = configData?.signOutRedirectURL ?? configData?.signInRedirectURL;
+    const callbackURL: string = configData?.signOutRedirectURL ?? configData?.afterSignInUrl;
 
     if (!callbackURL || callbackURL.trim().length === 0) {
       throw new AsgardeoAuthException(
@@ -1118,7 +1118,7 @@ export class AsgardeoAuthClient<T> {
    * @example
    * ```
    * const config = {
-   *     signInRedirectURL: "http://localhost:3000/sign-in",
+   *     afterSignInUrl: "http://localhost:3000/sign-in",
    *     clientId: "client ID",
    *     baseUrl: "https://localhost:9443"
    * }
diff --git a/packages/javascript/src/__legacy__/models/client-config.ts b/packages/javascript/src/__legacy__/models/client-config.ts
index e958b4881..7df88200d 100644
--- a/packages/javascript/src/__legacy__/models/client-config.ts
+++ b/packages/javascript/src/__legacy__/models/client-config.ts
@@ -20,7 +20,7 @@ import {OAuthResponseMode} from '../../models/oauth-response';
 import {OIDCEndpoints} from '../../models/oidc-endpoints';
 
 export interface DefaultAuthClientConfig {
-  signInRedirectURL: string;
+  afterSignInUrl: string;
   signOutRedirectURL?: string;
   clientHost?: string;
   clientId: string;
diff --git a/packages/nextjs/src/AsgardeoNextClient.ts b/packages/nextjs/src/AsgardeoNextClient.ts
index ec9fb2cfc..fa6bec383 100644
--- a/packages/nextjs/src/AsgardeoNextClient.ts
+++ b/packages/nextjs/src/AsgardeoNextClient.ts
@@ -60,7 +60,7 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
       baseUrl,
       clientId: clientId,
       clientSecret,
-      signInRedirectURL: afterSignInUrl,
+      afterSignInUrl: afterSignInUrl,
     } as any);
   }
 
diff --git a/packages/node/src/__legacy__/client.ts b/packages/node/src/__legacy__/client.ts
index 35e3f0914..189c96d2d 100644
--- a/packages/node/src/__legacy__/client.ts
+++ b/packages/node/src/__legacy__/client.ts
@@ -49,7 +49,7 @@ export class AsgardeoNodeClient<T> {
     * ```
     * const _store: Storage = new DataStore();
     * const _config = {
-           signInRedirectURL: "http://localhost:3000/sign-in",
+           afterSignInUrl: "http://localhost:3000/sign-in",
            signOutRedirectURL: "http://localhost:3000/dashboard",
            clientId: "client ID",
            serverOrigin: "https://api.asgardeo.io/t/<org_name>"
diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts
index 9aa1d522a..5048b85f8 100644
--- a/packages/nuxt/src/module.ts
+++ b/packages/nuxt/src/module.ts
@@ -32,7 +32,7 @@ export default defineNuxtModule<ModuleOptions>({
     clientId: process.env.ASGARDEO_CLIENT_ID || '',
     clientSecret: process.env.ASGARDEO_CLIENT_SECRET || '',
     scope: ['openid', 'profile'],
-    signInRedirectURL: process.env.ASGARDEO_SIGN_IN_REDIRECT_URL || '',
+    afterSignInUrl: process.env.ASGARDEO_SIGN_IN_REDIRECT_URL || '',
     signOutRedirectURL: process.env.ASGARDEO_SIGN_OUT_REDIRECT_URL || '',
   },
   meta: {
@@ -50,7 +50,7 @@ export default defineNuxtModule<ModuleOptions>({
         enablePKCE: true,
         scope: ['openid', 'profile'],
         serverOrigin: process.env.ASGARDEO_BASE_URL,
-        signInRedirectURL: process.env.ASGARDEO_SIGN_IN_REDIRECT_URL || '',
+        afterSignInUrl: process.env.ASGARDEO_SIGN_IN_REDIRECT_URL || '',
         signOutRedirectURL: process.env.ASGARDEO_SIGN_OUT_REDIRECT_URL || '',
       },
     ) as ModuleOptions;
@@ -66,7 +66,7 @@ export default defineNuxtModule<ModuleOptions>({
       clientSecret: options.clientSecret,
       scope: options.scope,
       serverOrigin: options.baseUrl,
-      signInRedirectURL: options.signInRedirectURL,
+      afterSignInUrl: options.afterSignInUrl,
       signOutRedirectURL: options.signOutRedirectURL,
     });
 
@@ -102,7 +102,7 @@ export default defineNuxtModule<ModuleOptions>({
 
 declare module '@nuxt/schema' {
   interface PublicRuntimeConfig {
-    asgardeoAuth: Pick<ModuleOptions, 'clientId' | 'baseUrl' | 'signInRedirectURL' | 'signOutRedirectURL' | 'scope'>;
+    asgardeoAuth: Pick<ModuleOptions, 'clientId' | 'baseUrl' | 'afterSignInUrl' | 'signOutRedirectURL' | 'scope'>;
   }
 
   interface RuntimeConfig {
diff --git a/packages/nuxt/src/runtime/types.ts b/packages/nuxt/src/runtime/types.ts
index 1082bc855..0ed7b1997 100644
--- a/packages/nuxt/src/runtime/types.ts
+++ b/packages/nuxt/src/runtime/types.ts
@@ -49,7 +49,7 @@ export interface ModuleOptions {
    * Must match the URI configured in your Asgardeo app.
    * @default process.env.ASGARDEO_SIGN_IN_REDIRECT_URL
    */
-  signInRedirectURL: string;
+  afterSignInUrl: string;
   /**
    * The absolute URI to redirect to after sign-out completes.
    * @default process.env.ASGARDEO_SIGN_OUT_REDIRECT_URL
diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index 822ee070f..a464899d9 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -50,7 +50,7 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
     return this.asgardeo.init({
       baseUrl: config.baseUrl,
       clientId: config.clientId,
-      signInRedirectURL: config.afterSignInUrl,
+      afterSignInUrl: config.afterSignInUrl,
       scope: [...scopes, 'internal_login'],
     });
   }
diff --git a/packages/vue/README.md b/packages/vue/README.md
index 0ef94efed..95b7ca136 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -32,7 +32,7 @@ import { AsgardeoAuth } from '@asgardeo/vue'
 const app = createApp(App)
 
 app.use(AsgardeoAuth, {
-  signInRedirectURL: "http://localhost:3000",
+  afterSignInUrl: "http://localhost:3000",
   signOutRedirectURL: "http://localhost:3000",
   clientId: "<your-client-id>",
   baseUrl: "https://api.asgardeo.io/t/<org-name>",
diff --git a/packages/vue/src/plugins/AsgardeoPlugin.ts b/packages/vue/src/plugins/AsgardeoPlugin.ts
index 7c7ed9e00..0458b9be2 100644
--- a/packages/vue/src/plugins/AsgardeoPlugin.ts
+++ b/packages/vue/src/plugins/AsgardeoPlugin.ts
@@ -116,7 +116,7 @@ export const asgardeoPlugin: Plugin = {
 
             if (
               (SPAUtils.hasAuthSearchParamsInURL() &&
-                new URL(url.origin + url.pathname).toString() === new URL(config?.signInRedirectURL).toString()) ||
+                new URL(url.origin + url.pathname).toString() === new URL(config?.afterSignInUrl).toString()) ||
               authParams?.authorizationCode ||
               url.searchParams.get('error')
             ) {
diff --git a/packages/vue/src/tests/AsgardeoPlugin.test.ts b/packages/vue/src/tests/AsgardeoPlugin.test.ts
index c4fdf3627..56da8b2da 100644
--- a/packages/vue/src/tests/AsgardeoPlugin.test.ts
+++ b/packages/vue/src/tests/AsgardeoPlugin.test.ts
@@ -73,7 +73,7 @@ describe('asgardeoPlugin', () => {
         clientId: 'mock-client-id',
         disableAutoSignIn: true,
         disableTrySignInSilently: true,
-        signInRedirectURL: 'http://localhost:5173/',
+        afterSignInUrl: 'http://localhost:5173/',
         signOutRedirectURL: 'http://localhost:5173/',
       }),
     );
diff --git a/packages/vue/src/tests/auth-api.test.ts b/packages/vue/src/tests/auth-api.test.ts
index 0d0fae259..5bdf2f04f 100644
--- a/packages/vue/src/tests/auth-api.test.ts
+++ b/packages/vue/src/tests/auth-api.test.ts
@@ -71,7 +71,7 @@ describe('AuthAPI', () => {
       const config: AuthVueConfig = {
         baseUrl: 'https://api.asgardeo.io/t/mock-tenant',
         clientId: 'mock-client-id',
-        signInRedirectURL: 'http://localhost:5173/',
+        afterSignInUrl: 'http://localhost:5173/',
         signOutRedirectURL: 'http://localhost:5173/',
       };
 
diff --git a/packages/vue/src/tests/mocks/mocks.ts b/packages/vue/src/tests/mocks/mocks.ts
index f319e37f8..152731ca0 100644
--- a/packages/vue/src/tests/mocks/mocks.ts
+++ b/packages/vue/src/tests/mocks/mocks.ts
@@ -201,6 +201,6 @@ export const asgardeoAuthSPAMock: any = {
 export const mockConfig: AuthVueConfig = {
   baseUrl: 'https://api.asgardeo.io/t/mock-tenant',
   clientId: 'mock-client-id',
-  signInRedirectURL: 'http://localhost:5173/',
+  afterSignInUrl: 'http://localhost:5173/',
   signOutRedirectURL: 'http://localhost:5173/',
 };
diff --git a/recipes/__legacy__/react-vite/src/main.tsx b/recipes/__legacy__/react-vite/src/main.tsx
index 4969d4dd7..d95552061 100644
--- a/recipes/__legacy__/react-vite/src/main.tsx
+++ b/recipes/__legacy__/react-vite/src/main.tsx
@@ -1,25 +1,25 @@
-import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
-import { AsgardeoProvider, UIAuthConfig } from "@asgardeo/react";
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import {AsgardeoProvider, UIAuthConfig} from '@asgardeo/react';
 
 const envVariables = import.meta.env;
 
 const config: UIAuthConfig = {
   baseUrl: envVariables.VITE_BASE_URL,
   clientId: envVariables.VITE_CLIENT_ID,
-  scope: envVariables.VITE_SCOPE?.split(","),
-  signInRedirectURL: envVariables.VITE_SIGN_IN_REDIRECT_URL,
+  scope: envVariables.VITE_SCOPE?.split(','),
+  afterSignInUrl: envVariables.VITE_SIGN_IN_REDIRECT_URL,
 };
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <AsgardeoProvider
     config={config}
     branding={{
       preference: {
-        theme: { LIGHT: { colors: { primary: { main: "#111111" } } } },
+        theme: {LIGHT: {colors: {primary: {main: '#111111'}}}},
       },
     }}
   >
     <App />
-  </AsgardeoProvider>
+  </AsgardeoProvider>,
 );
diff --git a/recipes/nuxt-vite/server/api/auth/[...].ts b/recipes/nuxt-vite/server/api/auth/[...].ts
index 8a90adb11..89eef024a 100644
--- a/recipes/nuxt-vite/server/api/auth/[...].ts
+++ b/recipes/nuxt-vite/server/api/auth/[...].ts
@@ -2,7 +2,7 @@ const config = {
   baseUrl: process.env.ASGARDEO_BASE_URL as string,
   clientId: process.env.ASGARDEO_CLIENT_ID as string,
   clientSecret: process.env.ASGARDEO_CLIENT_SECRET as string,
-  signInRedirectURL: process.env.ASGARDEO_SIGN_IN_REDIRECT_URL as string,
+  afterSignInUrl: process.env.ASGARDEO_SIGN_IN_REDIRECT_URL as string,
   signOutRedirectURL: process.env.ASGARDEO_SIGN_OUT_REDIRECT_URL as string,
   scope: process.env.ASGARDEO_SCOPE?.split(',').map(scope => scope.trim()) as string[],
 };
diff --git a/recipes/vue-vite/README.md b/recipes/vue-vite/README.md
index a8758474b..f2fff6b17 100644
--- a/recipes/vue-vite/README.md
+++ b/recipes/vue-vite/README.md
@@ -32,7 +32,7 @@ const app = createApp(App);
 
 app.use(router);
 app.use(asgardeoPlugin, {
-  signInRedirectURL: "http://localhost:5173/",
+  afterSignInUrl: "http://localhost:5173/",
   signOutRedirectURL: "http://localhost:5173/",
   clientId: "<ADD_CLIENT_ID_HERE>",
   baseUrl: "https://api.asgardeo.io/t/<org_name>",
@@ -63,7 +63,7 @@ By default, the Vite development server runs on port `5173`. In case you wish to
    })
    ```
 
-2. Update the `signInRedirectURL` & `signOutRedirectURL` in `main.ts` to match your new port.
+2. Update the `afterSignInUrl` & `signOutRedirectURL` in `main.ts` to match your new port.
 
 3. Go to the Asgardeo Console and navigate to the protocol tab of your application:
    - Update the Authorized Redirect URL.
diff --git a/recipes/vue-vite/src/main.ts b/recipes/vue-vite/src/main.ts
index 9ca39e7ec..34e2c25fe 100644
--- a/recipes/vue-vite/src/main.ts
+++ b/recipes/vue-vite/src/main.ts
@@ -29,7 +29,7 @@ const config: AuthVueConfig = {
   baseUrl: import.meta.env.VITE_ASGARDEO_BASE_URL,
   clientId: import.meta.env.VITE_ASGARDEO_CLIENT_ID,
   scope: ['openid', 'profile', 'email'],
-  signInRedirectURL: import.meta.env.VITE_ASGARDEO_SIGN_IN_REDIRECT_URL,
+  afterSignInUrl: import.meta.env.VITE_ASGARDEO_SIGN_IN_REDIRECT_URL,
   signOutRedirectURL: import.meta.env.VITE_ASGARDEO_SIGN_OUT_REDIRECT_URL,
 }
 

From 8f9f3b8bb1e838ff7b9ed1788f2666ed7c22a675 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Mon, 9 Jun 2025 17:52:53 +0530
Subject: [PATCH 025/131] chore(express): init express package

---
 README.md                                     |   1 +
 packages/express/.editorconfig                |   1 +
 packages/express/.eslintignore                |   4 +
 packages/express/.eslintrc.cjs                |  38 ++
 packages/express/.gitignore                   | 130 ++++
 packages/express/.prettierignore              |   4 +
 packages/express/README.md                    |  72 +++
 packages/express/esbuild.config.mjs           |  44 ++
 packages/express/package.json                 |  65 ++
 packages/express/prettier.config.cjs          |  19 +
 packages/express/src/AsgardeoExpressClient.ts |  30 +
 packages/express/src/__legacy__/client.ts     | 237 ++++++++
 .../__legacy__/constants/default-options.ts   |  28 +
 .../express/src/__legacy__/constants/index.ts |  20 +
 .../src/__legacy__/constants/logger-config.ts |  28 +
 .../__legacy__/middleware/authentication.ts   | 101 ++++
 .../src/__legacy__/middleware/index.ts        |  20 +
 .../__legacy__/middleware/protect-route.ts    |  52 ++
 .../src/__legacy__/models/client-config.ts    |  36 ++
 .../express/src/__legacy__/models/data.ts     |  21 +
 .../express/src/__legacy__/models/index.ts    |  21 +
 .../src/__legacy__/models/protect-route.ts    |  21 +
 .../src/__legacy__/utils/express-utils.ts     |  16 +
 packages/express/src/index.ts                 |  22 +
 packages/express/src/models/config.ts         |  31 +
 packages/express/tsconfig.eslint.json         |  11 +
 packages/express/tsconfig.json                |  34 ++
 packages/express/tsconfig.lib.json            |  20 +
 packages/express/tsconfig.spec.json           |  17 +
 packages/express/vitest.config.ts             |  23 +
 pnpm-lock.yaml                                | 564 +++++++++++-------
 31 files changed, 1515 insertions(+), 216 deletions(-)
 create mode 100644 packages/express/.editorconfig
 create mode 100644 packages/express/.eslintignore
 create mode 100644 packages/express/.eslintrc.cjs
 create mode 100644 packages/express/.gitignore
 create mode 100644 packages/express/.prettierignore
 create mode 100644 packages/express/README.md
 create mode 100644 packages/express/esbuild.config.mjs
 create mode 100644 packages/express/package.json
 create mode 100644 packages/express/prettier.config.cjs
 create mode 100644 packages/express/src/AsgardeoExpressClient.ts
 create mode 100644 packages/express/src/__legacy__/client.ts
 create mode 100644 packages/express/src/__legacy__/constants/default-options.ts
 create mode 100644 packages/express/src/__legacy__/constants/index.ts
 create mode 100644 packages/express/src/__legacy__/constants/logger-config.ts
 create mode 100644 packages/express/src/__legacy__/middleware/authentication.ts
 create mode 100644 packages/express/src/__legacy__/middleware/index.ts
 create mode 100644 packages/express/src/__legacy__/middleware/protect-route.ts
 create mode 100644 packages/express/src/__legacy__/models/client-config.ts
 create mode 100644 packages/express/src/__legacy__/models/data.ts
 create mode 100644 packages/express/src/__legacy__/models/index.ts
 create mode 100644 packages/express/src/__legacy__/models/protect-route.ts
 create mode 100644 packages/express/src/__legacy__/utils/express-utils.ts
 create mode 100644 packages/express/src/index.ts
 create mode 100644 packages/express/src/models/config.ts
 create mode 100644 packages/express/tsconfig.eslint.json
 create mode 100644 packages/express/tsconfig.json
 create mode 100644 packages/express/tsconfig.lib.json
 create mode 100644 packages/express/tsconfig.spec.json
 create mode 100644 packages/express/vitest.config.ts

diff --git a/README.md b/README.md
index ed4c90e16..6a142f477 100644
--- a/README.md
+++ b/README.md
@@ -34,6 +34,7 @@ This repository contains the source code of JavaScript SDKs that can be used to
 | [![@asgardeo/browser](https://img.shields.io/npm/v/@asgardeo/browser?color=%234B32C3&label=%40asgardeo%2Fbrowser&logo=firefox)](./packages/browser/) | Browser-based JavaScript SDK |
 | [![@asgardeo/nextjs](https://img.shields.io/npm/v/@asgardeo/nextjs?color=%23000000&label=%40asgardeo%2Fnext&logo=next.js)](./packages/next/) | Next.js SDK for building applications with Asgardeo |
 | [![@asgardeo/node](https://img.shields.io/npm/v/@asgardeo/node?color=%23339933&label=%40asgardeo%2Fnode&logo=node.js)](./packages/node/) | Node.js SDK for server-side integration |
+| [![@asgardeo/express](https://img.shields.io/npm/v/@asgardeo/express?color=%23339933&label=%40asgardeo%2Fexpress&logo=express)](./packages/express/) | Express.js SDK for server-side integration |
 | [![@asgardeo/nuxt](https://img.shields.io/npm/v/@asgardeo/nuxt?color=%2300DC82&label=%40asgardeo%2Fnuxt&logo=nuxt)](./packages/nuxt/) | Nuxt.js SDK for building applications with Asgardeo |
 | [![@asgardeo/react](https://img.shields.io/npm/v/@asgardeo/react?color=%2361DAFB&label=%40asgardeo%2Freact&logo=react)](./packages/react/) | React SDK for building applications with Asgardeo |
 | [![@asgardeo/vue](https://img.shields.io/npm/v/@asgardeo/vue?color=%234FC08D&label=%40asgardeo%2Fvue&logo=vue.js)](./packages/vue/) | Vue.js SDK for building applications with Asgardeo |
diff --git a/packages/express/.editorconfig b/packages/express/.editorconfig
new file mode 100644
index 000000000..1b3ce07de
--- /dev/null
+++ b/packages/express/.editorconfig
@@ -0,0 +1 @@
+../../.editorconfig
\ No newline at end of file
diff --git a/packages/express/.eslintignore b/packages/express/.eslintignore
new file mode 100644
index 000000000..177586b6b
--- /dev/null
+++ b/packages/express/.eslintignore
@@ -0,0 +1,4 @@
+/dist
+/build
+/node_modules
+/coverage
\ No newline at end of file
diff --git a/packages/express/.eslintrc.cjs b/packages/express/.eslintrc.cjs
new file mode 100644
index 000000000..2676ca816
--- /dev/null
+++ b/packages/express/.eslintrc.cjs
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const path = require('path');
+
+module.exports = {
+  env: {
+    es6: true,
+    node: true,
+  },
+  extends: [
+    'plugin:@wso2/typescript',
+    'plugin:@wso2/strict',
+    'plugin:@wso2/internal',
+    'plugin:@wso2/jest',
+    'plugin:@wso2/prettier',
+  ],
+  parserOptions: {
+    ecmaVersion: 2018,
+    project: [path.resolve(__dirname, 'tsconfig.eslint.json')],
+  },
+  plugins: ['@wso2'],
+};
diff --git a/packages/express/.gitignore b/packages/express/.gitignore
new file mode 100644
index 000000000..c6bba5913
--- /dev/null
+++ b/packages/express/.gitignore
@@ -0,0 +1,130 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
diff --git a/packages/express/.prettierignore b/packages/express/.prettierignore
new file mode 100644
index 000000000..99b0b518a
--- /dev/null
+++ b/packages/express/.prettierignore
@@ -0,0 +1,4 @@
+/dist
+/build
+/node_modules
+/coverage
diff --git a/packages/express/README.md b/packages/express/README.md
new file mode 100644
index 000000000..285013902
--- /dev/null
+++ b/packages/express/README.md
@@ -0,0 +1,72 @@
+<p align="center" style="color: #343a40">
+  <h1 align="center">@asgardeo/express</h1>
+</p>
+<p align="center" style="font-size: 1.2rem;">Express.js SDK for Asgardeo</p>
+<div align="center">
+  <img alt="npm (scoped)" src="https://img.shields.io/npm/v/@asgardeo/express">
+  <img alt="npm" src="https://img.shields.io/npm/dw/@asgardeo/express">
+  <a href="./LICENSE"><img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" alt="License"></a>
+</div>
+
+## Installation
+
+```bash
+# Using npm
+npm install @asgardeo/express
+
+# or using pnpm
+pnpm add @asgardeo/express
+
+# or using yarn
+yarn add @asgardeo/express
+```
+
+## Quick Start
+
+```javascript
+import { AsgardeoExpressClient } from "@asgardeo/express";
+
+// Initialize the client
+const authClient = new AsgardeoExpressClient({
+    clientId: "<your_client_id>",
+    clientSecret: "<your_client_secret>",
+    baseUrl: "https://api.asgardeo.io/t/<org_name>",
+    callbackURL: "http://localhost:3000/callback"
+});
+
+// Example Express.js integration
+import express from "express";
+const app = express();
+
+// Login endpoint
+app.get("/login", (req, res) => {
+    const authUrl = authClient.getAuthorizationURL();
+    res.redirect(authUrl);
+});
+
+// Callback handler
+app.get("/callback", async (req, res) => {
+    try {
+        const { code } = req.query;
+        const tokens = await authClient.exchangeAuthorizationCode(code);
+        // Store tokens and redirect to home page
+        res.redirect("/");
+    } catch (error) {
+        res.status(500).send("Authentication failed");
+    }
+});
+
+// Get user info
+app.get("/userinfo", async (req, res) => {
+    try {
+        const userInfo = await authClient.getUserInfo();
+        res.json(userInfo);
+    } catch (error) {
+        res.status(401).send("Unauthorized");
+    }
+});
+```
+
+## License
+
+Apache-2.0
diff --git a/packages/express/esbuild.config.mjs b/packages/express/esbuild.config.mjs
new file mode 100644
index 000000000..75bd11607
--- /dev/null
+++ b/packages/express/esbuild.config.mjs
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {readFileSync} from 'fs';
+import * as esbuild from 'esbuild';
+
+const pkg = JSON.parse(readFileSync('./package.json', 'utf8'));
+
+const commonOptions = {
+  bundle: true,
+  entryPoints: ['src/index.ts'],
+  external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
+  platform: 'node',
+  target: ['es2020'],
+};
+
+await esbuild.build({
+  ...commonOptions,
+  format: 'esm',
+  outfile: 'dist/index.js',
+  sourcemap: true,
+});
+
+await esbuild.build({
+  ...commonOptions,
+  format: 'cjs',
+  outfile: 'dist/cjs/index.js',
+  sourcemap: true,
+});
diff --git a/packages/express/package.json b/packages/express/package.json
new file mode 100644
index 000000000..d0d655a5c
--- /dev/null
+++ b/packages/express/package.json
@@ -0,0 +1,65 @@
+{
+  "name": "@asgardeo/express",
+  "version": "0.0.0",
+  "description": "Express.js implementation of Asgardeo JavaScript SDK.",
+  "keywords": [
+    "asgardeo",
+    "express.js",
+    "server"
+  ],
+  "homepage": "https://github.com/asgardeo/javascript/tree/main/packages/express#readme",
+  "bugs": {
+    "url": "https://github.com/asgardeo/javascript/issues"
+  },
+  "author": "WSO2",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "commonjs": "dist/cjs/index.js",
+  "exports": {
+    "import": "./dist/index.js",
+    "require": "./dist/cjs/index.js"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/asgardeo/javascript",
+    "directory": "packages/express"
+  },
+  "scripts": {
+    "build": "pnpm clean && node esbuild.config.mjs && tsc -p tsconfig.lib.json --emitDeclarationOnly --outDir dist",
+    "clean": "rimraf dist",
+    "fix:lint": "eslint . --ext .js,.jsx,.ts,.tsx,.cjs,.mjs",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.cjs,.mjs",
+    "test": "vitest",
+    "typecheck": "tsc -p tsconfig.lib.json"
+  },
+  "devDependencies": {
+    "@types/node": "^22.15.3",
+    "@wso2/eslint-plugin": "catalog:",
+    "@wso2/prettier-config": "catalog:",
+    "esbuild": "^0.25.4",
+    "eslint": "8.57.0",
+    "express": "^5.1.0",
+    "prettier": "^2.6.2",
+    "rimraf": "^6.0.1",
+    "typescript": "~5.7.2",
+    "vitest": "^3.1.3"
+  },
+  "dependencies": {
+    "@asgardeo/node": "workspace:^",
+    "uuid": "^11.1.0"
+  },
+  "peerDependencies": {
+    "express": ">=4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/express/prettier.config.cjs b/packages/express/prettier.config.cjs
new file mode 100644
index 000000000..929b9b15f
--- /dev/null
+++ b/packages/express/prettier.config.cjs
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+module.exports = require('@wso2/prettier-config');
diff --git a/packages/express/src/AsgardeoExpressClient.ts b/packages/express/src/AsgardeoExpressClient.ts
new file mode 100644
index 000000000..93fb6a601
--- /dev/null
+++ b/packages/express/src/AsgardeoExpressClient.ts
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {AsgardeoNodeClient, SignOutOptions} from '@asgardeo/node';
+import {AsgardeoExpressConfig} from './models/config';
+
+/**
+ * Base class for implementing Asgardeo in Express.js based applications.
+ * This class provides the core functionality for managing user authentication and sessions.
+ *
+ * @typeParam T - Configuration type that extends AsgardeoExpressConfig.
+ */
+abstract class AsgardeoExpressClient<T = AsgardeoExpressConfig> extends AsgardeoNodeClient<T> {}
+
+export default AsgardeoExpressClient;
diff --git a/packages/express/src/__legacy__/client.ts b/packages/express/src/__legacy__/client.ts
new file mode 100644
index 000000000..71dbf4b25
--- /dev/null
+++ b/packages/express/src/__legacy__/client.ts
@@ -0,0 +1,237 @@
+/**
+ * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  AsgardeoNodeClient,
+  AuthClientConfig,
+  AuthURLCallback,
+  TokenResponse,
+  Storage,
+  BasicUserInfo,
+  OIDCEndpoints,
+  DecodedIDTokenPayload,
+  CustomGrantConfig,
+  FetchResponse,
+  AsgardeoAuthException,
+  Logger,
+} from '@asgardeo/node';
+import {CookieConfig, DEFAULT_LOGIN_PATH, DEFAULT_LOGOUT_PATH} from './constants';
+import {ExpressClientConfig, UnauthenticatedCallback} from './models';
+import express from 'express';
+import {v4 as uuidv4} from 'uuid';
+import {asgardeoExpressAuth, protectRoute} from './middleware';
+import {ExpressUtils} from './utils/express-utils';
+
+export class AsgardeoExpressClient {
+  private _authClient: AsgardeoNodeClient<AuthClientConfig>;
+  private _storage?: Storage;
+  private static _clientConfig: ExpressClientConfig;
+
+  private static _instance: AsgardeoExpressClient;
+
+  private constructor(config: ExpressClientConfig, storage?: Storage) {
+    //Set the client config
+    AsgardeoExpressClient._clientConfig = {...config};
+
+    //Add the signInRedirectURL and signOutRedirectURL
+    //Add custom paths if the user has already declared any or else use the defaults
+    const nodeClientConfig: AuthClientConfig = {
+      ...config,
+      signInRedirectURL: config.appURL + (config.loginPath || DEFAULT_LOGIN_PATH),
+      signOutRedirectURL: config.appURL + (config.logoutPath || DEFAULT_LOGOUT_PATH),
+    };
+
+    //Initialize the user provided storage if there is any
+    if (storage) {
+      Logger.debug('Initializing user provided storage');
+      this._storage = storage;
+    }
+
+    //Initialize the Auth Client
+    this._authClient = new AsgardeoNodeClient(nodeClientConfig, this._storage);
+  }
+
+  public static getInstance(config: ExpressClientConfig, storage?: Storage): AsgardeoExpressClient;
+  public static getInstance(): AsgardeoExpressClient;
+  public static getInstance(config?: ExpressClientConfig, storage?: Storage): AsgardeoExpressClient {
+    //Create a new instance if its not instantiated already
+    if (!AsgardeoExpressClient._instance && config) {
+      AsgardeoExpressClient._instance = new AsgardeoExpressClient(config, storage);
+      Logger.debug('Initialized AsgardeoExpressClient successfully');
+    }
+
+    if (!AsgardeoExpressClient._instance && !config) {
+      throw Error(
+        new AsgardeoAuthException(
+          'EXPRESS-CLIENT-GI1-NF01',
+          'User configuration  is not found',
+          'User config has not been passed to initialize AsgardeoExpressClient',
+        ).toString(),
+      );
+    }
+
+    return AsgardeoExpressClient._instance;
+  }
+
+  public async signIn(
+    req: express.Request,
+    res: express.Response,
+    next: express.nextFunction,
+    signInConfig?: Record<string, string | boolean>,
+  ): Promise<TokenResponse> {
+    if (ExpressUtils.hasErrorInURL(req.originalUrl)) {
+      return Promise.reject(
+        new AsgardeoAuthException(
+          'EXPRESS-CLIENT-SI-IV01',
+          'Invalid login request URL',
+          'Login request contains an error query parameter in the URL',
+        ),
+      );
+    }
+
+    //Check if the user has a valid user ID and if not create one
+    let userID = req.cookies.ASGARDEO_SESSION_ID;
+    if (!userID) {
+      userID = uuidv4();
+    }
+
+    //Handle signIn() callback
+    const authRedirectCallback = (url: string) => {
+      if (url) {
+        //DEBUG
+        Logger.debug('Redirecting to: ' + url);
+        res.cookie('ASGARDEO_SESSION_ID', userID, {
+          maxAge: AsgardeoExpressClient._clientConfig.cookieConfig?.maxAge
+            ? AsgardeoExpressClient._clientConfig.cookieConfig.maxAge
+            : CookieConfig.defaultMaxAge,
+          httpOnly: AsgardeoExpressClient._clientConfig.cookieConfig?.httpOnly ?? CookieConfig.defaultHttpOnly,
+          sameSite: AsgardeoExpressClient._clientConfig.cookieConfig?.sameSite ?? CookieConfig.defaultSameSite,
+          secure: AsgardeoExpressClient._clientConfig.cookieConfig?.secure ?? CookieConfig.defaultSecure,
+        });
+        res.redirect(url);
+
+        next && typeof next === 'function' && next();
+      }
+    };
+
+    const authResponse: TokenResponse = await this._authClient.signIn(
+      authRedirectCallback,
+      userID,
+      req.query.code,
+      req.query.session_state,
+      req.query.state,
+      signInConfig,
+    );
+
+    if (authResponse.accessToken || authResponse.idToken) {
+      return authResponse;
+    } else {
+      return {
+        accessToken: '',
+        createdAt: 0,
+        expiresIn: '',
+        idToken: '',
+        refreshToken: '',
+        scope: '',
+        tokenType: '',
+      };
+    }
+  }
+
+  public async signOut(userId: string): Promise<string> {
+    return this._authClient.signOut(userId);
+  }
+
+  public async isAuthenticated(userId: string): Promise<boolean> {
+    return this._authClient.isAuthenticated(userId);
+  }
+
+  public async getIDToken(userId: string): Promise<string> {
+    return this._authClient.getIDToken(userId);
+  }
+
+  public async getBasicUserInfo(userId: string): Promise<BasicUserInfo> {
+    return this._authClient.getBasicUserInfo(userId);
+  }
+
+  public async getOIDCServiceEndpoints(): Promise<OIDCEndpoints> {
+    return this._authClient.getOIDCServiceEndpoints();
+  }
+
+  public async getDecodedIDToken(userId?: string): Promise<DecodedIDTokenPayload> {
+    return this._authClient.getDecodedIDToken(userId);
+  }
+
+  public async getAccessToken(userId?: string): Promise<string> {
+    return this._authClient.getAccessToken(userId);
+  }
+
+  public async requestCustomGrant(config: CustomGrantConfig, userId?: string): Promise<TokenResponse | FetchResponse> {
+    return this._authClient.requestCustomGrant(config, userId);
+  }
+
+  public async updateConfig(config: Partial<AuthClientConfig>): Promise<void> {
+    return this._authClient.updateConfig(config);
+  }
+
+  public async revokeAccessToken(userId?: string): Promise<FetchResponse> {
+    return this._authClient.revokeAccessToken(userId);
+  }
+
+  public static didSignOutFail(signOutRedirectURL: string): boolean {
+    return AsgardeoNodeClient.didSignOutFail(signOutRedirectURL);
+  }
+
+  public static isSignOutSuccessful(signOutRedirectURL: string): boolean {
+    return AsgardeoNodeClient.isSignOutSuccessful(signOutRedirectURL);
+  }
+
+  public static protectRoute(
+    callback: UnauthenticatedCallback,
+  ): (req: express.Request, res: express.Response, next: express.nextFunction) => Promise<void> {
+    if (!this._instance) {
+      throw new AsgardeoAuthException(
+        'EXPRESS-CLIENT-PR-NF01',
+        'AsgardeoExpressClient is not instantiated',
+        'Create an instance of AsgardeoExpressClient before using calling this method.',
+      );
+    }
+
+    return protectRoute(this._instance, callback);
+  }
+
+  public static asgardeoExpressAuth(
+    onSignIn: (response: TokenResponse) => void,
+    onSignOut: () => void,
+    onError: (exception: AsgardeoAuthException) => void,
+  ): any {
+    if (!this._instance) {
+      throw new AsgardeoAuthException(
+        'EXPRESS-CLIENT-AEA-NF01',
+        'AsgardeoExpressClient is not instantiated',
+        'Create an instance of AsgardeoExpressClient before using calling this method.',
+      );
+    }
+
+    return asgardeoExpressAuth(this._instance, AsgardeoExpressClient._clientConfig, onSignIn, onSignOut, onError);
+  }
+
+  public async getStorageManager() {
+    return this._authClient.getStorageManager();
+  }
+}
diff --git a/packages/express/src/__legacy__/constants/default-options.ts b/packages/express/src/__legacy__/constants/default-options.ts
new file mode 100644
index 000000000..799cb25b7
--- /dev/null
+++ b/packages/express/src/__legacy__/constants/default-options.ts
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export enum CookieConfig {
+    defaultMaxAge = 90000,
+    defaultHttpOnly = 'true',
+    defaultSameSite = 'lax',
+    defaultSecure = 'false'
+}
+
+export const DEFAULT_LOGIN_PATH = "/login";
+
+export const DEFAULT_LOGOUT_PATH = "/logout";
diff --git a/packages/express/src/__legacy__/constants/index.ts b/packages/express/src/__legacy__/constants/index.ts
new file mode 100644
index 000000000..565d702c6
--- /dev/null
+++ b/packages/express/src/__legacy__/constants/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from "./default-options";
+export * from "./logger-config";
diff --git a/packages/express/src/__legacy__/constants/logger-config.ts b/packages/express/src/__legacy__/constants/logger-config.ts
new file mode 100644
index 000000000..62f6ad262
--- /dev/null
+++ b/packages/express/src/__legacy__/constants/logger-config.ts
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export const LOGGER_CONFIG = {
+    bgGreen: "\x1b[42m",
+    bgRed: "\x1b[41m",
+    bgYellow: "\x1b[43m",
+    fgBlack: "\x1b[30m",
+    fgGreen: "\x1b[32m",
+    fgRed: "\x1b[31m",
+    fgYellow: "\x1b[33m",
+    reset: "\x1b[0m"
+}
diff --git a/packages/express/src/__legacy__/middleware/authentication.ts b/packages/express/src/__legacy__/middleware/authentication.ts
new file mode 100644
index 000000000..cc4b7be88
--- /dev/null
+++ b/packages/express/src/__legacy__/middleware/authentication.ts
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { AsgardeoAuthException, Storage, TokenResponse, Logger } from "@asgardeo/node";
+import express from "express";
+import { AsgardeoExpressClient } from "../client";
+import { DEFAULT_LOGIN_PATH, DEFAULT_LOGOUT_PATH } from "../constants";
+import { ExpressClientConfig } from "../models";
+
+export const asgardeoExpressAuth = (
+    asgardeoExpressClient: AsgardeoExpressClient,
+    config: ExpressClientConfig,
+    onSignIn: (res: express.Response, tokenResponse: TokenResponse) => void,
+    onSignOut: (res: express.Response) => void,
+    onError: (res: express.Response, exception: AsgardeoAuthException) => void
+): any => {
+    //Create the router
+    const router = new express.Router();
+
+    //Patch AuthClient to the request and the response
+    router.use(async (req: express.Request, res: express.Response, next: express.nextFunction): Promise<void> => {
+        req.asgardeoAuth = asgardeoExpressClient;
+        res.asgardeoAuth = asgardeoExpressClient;
+        next();
+    });
+
+    //Patch in '/login' route
+    router.get(
+        config.loginPath || DEFAULT_LOGIN_PATH,
+        async (req: express.Request, res: express.Response, next: express.nextFunction): Promise<void> => {
+            try {
+                const response: TokenResponse = await asgardeoExpressClient.signIn(req, res, next, config.signInConfig);
+                if (response.accessToken || response.idToken) {
+                    onSignIn(res, response);
+                }
+            } catch (e: any) {
+                Logger.error(e.message);
+                onError(res, e);
+            }
+        }
+    );
+
+    //Patch in '/logout' route
+    router.get(
+        config.logoutPath || DEFAULT_LOGOUT_PATH,
+        async (req: express.Request, res: express.Response, next: express.nextFunction): Promise<void> => {
+            //Check if it is a logout success response
+            if (req.query.state === "sign_out_success") {
+                onSignOut(res);
+
+                return;
+            }
+
+            //Check if the cookie exists
+            if (req.cookies.ASGARDEO_SESSION_ID === undefined) {
+                onError(
+                    res,
+                    new AsgardeoAuthException(
+                        "EXPRESS-AUTH_MW-LOGOUT-NF01",
+                        "No cookie found in the request",
+                        "No cookie was sent with the request. The user may not have signed in yet."
+                    )
+                );
+
+                return;
+            } else {
+                //Get the signout URL
+                try {
+                    const signOutURL = await req.asgardeoAuth.signOut(req.cookies.ASGARDEO_SESSION_ID);
+                    if (signOutURL) {
+                        res.cookie("ASGARDEO_SESSION_ID", null, { maxAge: 0 });
+                        res.redirect(signOutURL);
+
+                        return;
+                    }
+                } catch (e: any) {
+                    onError(res, e);
+
+                    return;
+                }
+            }
+        }
+    );
+
+    return router;
+};
diff --git a/packages/express/src/__legacy__/middleware/index.ts b/packages/express/src/__legacy__/middleware/index.ts
new file mode 100644
index 000000000..d86cb6bc2
--- /dev/null
+++ b/packages/express/src/__legacy__/middleware/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from "./protect-route";
+export * from "./authentication";
diff --git a/packages/express/src/__legacy__/middleware/protect-route.ts b/packages/express/src/__legacy__/middleware/protect-route.ts
new file mode 100644
index 000000000..a4746606c
--- /dev/null
+++ b/packages/express/src/__legacy__/middleware/protect-route.ts
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import express from "express";
+import { AsgardeoExpressClient } from "../client";
+import { UnauthenticatedCallback } from "../models";
+import { Logger } from "@asgardeo/node";
+
+export const protectRoute = (
+    asgardeoExpressClient: AsgardeoExpressClient,
+    callback: UnauthenticatedCallback
+): ((req: express.Request, res: express.Response, next: express.nextFunction) => Promise<void>) => {
+    return async (req: express.Request, res: express.Response, next: express.nextFunction): Promise<void> => {
+        if (req.cookies.ASGARDEO_SESSION_ID === undefined) {
+            Logger.error("No session ID found in the request cookies");
+
+            if (callback(res, "Unauthenticated")) {
+                return;
+            }
+
+            return next();
+        } else {
+            //validate the cookie
+            const isCookieValid = await asgardeoExpressClient.isAuthenticated(req.cookies.ASGARDEO_SESSION_ID);
+            if (isCookieValid) {
+                return next();
+            } else {
+                Logger.error("Invalid session ID found in the request cookies");
+                if (callback(res, "Invalid session cookie")) {
+                    return;
+                }
+
+                return next();
+            }
+        }
+    };
+};
diff --git a/packages/express/src/__legacy__/models/client-config.ts b/packages/express/src/__legacy__/models/client-config.ts
new file mode 100644
index 000000000..30b7a0161
--- /dev/null
+++ b/packages/express/src/__legacy__/models/client-config.ts
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { AuthClientConfig } from '@asgardeo/node';
+
+export interface StrictExpressClientConfig {
+    appURL: string,
+    cookieConfig?: {
+        maxAge?: number,
+        httpOnly?: boolean,
+        sameSite?: string;
+        secure?: boolean;
+    },
+    globalAuth?: boolean,
+    loginPath?: string,
+    logoutPath?: string;
+    signInConfig?: Record<string, string | boolean>;
+}
+
+export type ExpressClientConfig = Exclude<AuthClientConfig, "signInRedirectURL" | "signOutRedirectURL"> &
+    StrictExpressClientConfig;
diff --git a/packages/express/src/__legacy__/models/data.ts b/packages/express/src/__legacy__/models/data.ts
new file mode 100644
index 000000000..8b071cec8
--- /dev/null
+++ b/packages/express/src/__legacy__/models/data.ts
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export interface AuthURL {
+    url: string
+}
diff --git a/packages/express/src/__legacy__/models/index.ts b/packages/express/src/__legacy__/models/index.ts
new file mode 100644
index 000000000..ba80e6572
--- /dev/null
+++ b/packages/express/src/__legacy__/models/index.ts
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './data';
+export * from "./client-config";
+export * from "./protect-route";
diff --git a/packages/express/src/__legacy__/models/protect-route.ts b/packages/express/src/__legacy__/models/protect-route.ts
new file mode 100644
index 000000000..789c6031f
--- /dev/null
+++ b/packages/express/src/__legacy__/models/protect-route.ts
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import express from "express";
+
+export type UnauthenticatedCallback = (res: express.Response, error: string) => boolean;
diff --git a/packages/express/src/__legacy__/utils/express-utils.ts b/packages/express/src/__legacy__/utils/express-utils.ts
new file mode 100644
index 000000000..a129d9de2
--- /dev/null
+++ b/packages/express/src/__legacy__/utils/express-utils.ts
@@ -0,0 +1,16 @@
+export class ExpressUtils {
+
+    private static readonly AUTH_CODE_REGEXP: RegExp = /[?&]error=[^&]+/;
+
+    /**
+     * Util function to check if the URL contains an error.
+     *
+     * @param url - URL to be checked.
+     *
+     * @returns {boolean} - True if the URL contains an error.
+     */
+    public static hasErrorInURL(url: string): boolean {
+
+        return this.AUTH_CODE_REGEXP.test(url);
+    }
+}
diff --git a/packages/express/src/index.ts b/packages/express/src/index.ts
new file mode 100644
index 000000000..b1b4b03fe
--- /dev/null
+++ b/packages/express/src/index.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from "./__legacy__/models";
+export * from "./__legacy__/client";
+
+export * from '@asgardeo/node';
diff --git a/packages/express/src/models/config.ts b/packages/express/src/models/config.ts
new file mode 100644
index 000000000..33b0e1549
--- /dev/null
+++ b/packages/express/src/models/config.ts
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {AsgardeoNodeConfig} from '@asgardeo/node';
+
+/**
+ * Configuration type for the Asgardeo Express.js SDK.
+ * Extends the base Config type from @asgardeo/node with Express.js specific settings.
+ *
+ * @remarks
+ * This type is used to configure the Express.js SDK with settings like:
+ * - Server endpoints
+ * - Authentication parameters
+ * - Session management options
+ */
+export type AsgardeoExpressConfig = AsgardeoNodeConfig;
diff --git a/packages/express/tsconfig.eslint.json b/packages/express/tsconfig.eslint.json
new file mode 100644
index 000000000..23fadc266
--- /dev/null
+++ b/packages/express/tsconfig.eslint.json
@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "**/.*.js",
+    "**/.*.cjs",
+    "**/.*.ts",
+    "**/*.js",
+    "**/*.cjs",
+    "**/*.ts",
+  ]
+}
diff --git a/packages/express/tsconfig.json b/packages/express/tsconfig.json
new file mode 100644
index 000000000..848c27067
--- /dev/null
+++ b/packages/express/tsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "lib": ["ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "sourceMap": true,
+    "target": "ESNext",
+    "forceConsistentCasingInFileNames": true,
+    "strict": false,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "exclude": ["node_modules", "tmp", "dist"],
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
diff --git a/packages/express/tsconfig.lib.json b/packages/express/tsconfig.lib.json
new file mode 100644
index 000000000..b2c9c1aef
--- /dev/null
+++ b/packages/express/tsconfig.lib.json
@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "outDir": "dist",
+    "declarationDir": "dist",
+    "types": ["node"]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.ts", "types/**/*.d.ts"]
+}
diff --git a/packages/express/tsconfig.spec.json b/packages/express/tsconfig.spec.json
new file mode 100644
index 000000000..46a76e285
--- /dev/null
+++ b/packages/express/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "test-configs",
+    "jest.config.js",
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.d.ts"
+  ]
+}
diff --git a/packages/express/vitest.config.ts b/packages/express/vitest.config.ts
new file mode 100644
index 000000000..29a917d10
--- /dev/null
+++ b/packages/express/vitest.config.ts
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {defineConfig} from 'vitest/config';
+
+export default defineConfig({
+  test: {},
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e05416efc..b8e2afb73 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,7 +49,7 @@ importers:
     devDependencies:
       vitepress:
         specifier: ^1.2.2
-        version: 1.6.3(@algolia/client-search@5.25.0)(@types/node@22.15.29)(axios@1.9.0)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.1)(postcss@8.5.3)(sass@1.89.0)(search-insights@2.17.3)(terser@5.39.2)(typescript@5.8.3)
+        version: 1.6.3(@algolia/client-search@5.25.0)(@types/node@22.15.30)(axios@1.9.0)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.1)(postcss@8.5.3)(sass@1.89.0)(search-insights@2.17.3)(terser@5.39.2)(typescript@5.8.3)
 
   packages/browser:
     dependencies:
@@ -98,10 +98,10 @@ importers:
         version: 10.4.0
       '@types/node':
         specifier: ^22.15.3
-        version: 22.15.18
+        version: 22.15.30
       '@vitest/browser':
         specifier: ^3.1.3
-        version: 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
+        version: 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
       '@wso2/eslint-plugin':
         specifier: 'catalog:'
         version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
@@ -131,7 +131,47 @@ importers:
         version: 5.7.3
       vitest:
         specifier: ^3.1.3
-        version: 3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+        version: 3.1.3(@types/node@22.15.30)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+
+  packages/express:
+    dependencies:
+      '@asgardeo/node':
+        specifier: workspace:^
+        version: link:../node
+      uuid:
+        specifier: ^11.1.0
+        version: 11.1.0
+    devDependencies:
+      '@types/node':
+        specifier: ^22.15.3
+        version: 22.15.30
+      '@wso2/eslint-plugin':
+        specifier: 'catalog:'
+        version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
+      '@wso2/prettier-config':
+        specifier: 'catalog:'
+        version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@2.8.8)(typescript@5.7.3)
+      esbuild:
+        specifier: ^0.25.4
+        version: 0.25.4
+      eslint:
+        specifier: 8.57.0
+        version: 8.57.0
+      express:
+        specifier: ^5.1.0
+        version: 5.1.0
+      prettier:
+        specifier: ^2.6.2
+        version: 2.8.8
+      rimraf:
+        specifier: ^6.0.1
+        version: 6.0.1
+      typescript:
+        specifier: ~5.7.2
+        version: 5.7.3
+      vitest:
+        specifier: ^3.1.3
+        version: 3.1.3(@types/node@22.15.30)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
   packages/javascript:
     dependencies:
@@ -141,7 +181,7 @@ importers:
     devDependencies:
       '@types/node':
         specifier: ^22.15.3
-        version: 22.15.18
+        version: 22.15.30
       '@wso2/eslint-plugin':
         specifier: 'catalog:'
         version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
@@ -165,7 +205,7 @@ importers:
         version: 5.7.3
       vitest:
         specifier: ^3.1.3
-        version: 3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+        version: 3.1.3(@types/node@22.15.30)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
   packages/nextjs:
     dependencies:
@@ -184,7 +224,7 @@ importers:
     devDependencies:
       '@types/node':
         specifier: ^22.15.3
-        version: 22.15.29
+        version: 22.15.30
       '@wso2/eslint-plugin':
         specifier: 'catalog:'
         version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
@@ -217,7 +257,7 @@ importers:
         version: 5.7.3
       vitest:
         specifier: ^3.1.3
-        version: 3.1.3(@types/node@22.15.29)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+        version: 3.1.3(@types/node@22.15.30)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
   packages/node:
     dependencies:
@@ -251,7 +291,7 @@ importers:
     devDependencies:
       '@types/node':
         specifier: ^22.15.3
-        version: 22.15.18
+        version: 22.15.30
       '@wso2/eslint-plugin':
         specifier: 'catalog:'
         version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
@@ -275,7 +315,7 @@ importers:
         version: 5.7.3
       vitest:
         specifier: ^3.1.3
-        version: 3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+        version: 3.1.3(@types/node@22.15.30)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
   packages/nuxt:
     dependencies:
@@ -291,7 +331,7 @@ importers:
     devDependencies:
       '@nuxt/devtools':
         specifier: ^2.4.0
-        version: 2.4.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
+        version: 2.4.1(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
       '@nuxt/eslint-config':
         specifier: ^1.3.0
         version: 1.4.1(@vue/compiler-sfc@3.5.14)(eslint@8.57.0)(typescript@5.8.3)
@@ -303,10 +343,10 @@ importers:
         version: 3.17.4
       '@nuxt/test-utils':
         specifier: ^3.17.2
-        version: 3.19.0(@types/node@22.15.29)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
+        version: 3.19.0(@types/node@22.15.30)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
       '@types/node':
         specifier: latest
-        version: 22.15.29
+        version: 22.15.30
       changelogen:
         specifier: ^0.6.1
         version: 0.6.1(magicast@0.3.5)
@@ -318,13 +358,13 @@ importers:
         version: 8.57.0
       nuxt:
         specifier: ^3.16.2
-        version: 3.17.4(@parcel/watcher@2.5.1)(@types/node@22.15.29)(db0@0.3.2)(eslint@8.57.0)(ioredis@5.6.1)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))(yaml@2.8.0)
+        version: 3.17.4(@parcel/watcher@2.5.1)(@types/node@22.15.30)(db0@0.3.2)(eslint@8.57.0)(ioredis@5.6.1)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))(yaml@2.8.0)
       typescript:
         specifier: ~5.8.3
         version: 5.8.3
       vitest:
         specifier: ^3.1.1
-        version: 3.1.3(@types/node@22.15.29)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+        version: 3.1.3(@types/node@22.15.30)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vue-tsc:
         specifier: ^2.2.8
         version: 2.2.10(typescript@5.8.3)
@@ -355,13 +395,13 @@ importers:
         version: 10.4.0
       '@types/node':
         specifier: ^22.15.3
-        version: 22.15.18
+        version: 22.15.30
       '@types/react':
         specifier: ^19.1.4
         version: 19.1.5
       '@vitest/browser':
         specifier: ^3.1.3
-        version: 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
+        version: 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
       '@wso2/eslint-plugin':
         specifier: 'catalog:'
         version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
@@ -391,7 +431,7 @@ importers:
         version: 5.7.3
       vitest:
         specifier: ^3.1.3
-        version: 3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+        version: 3.1.3(@types/node@22.15.30)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vitest-browser-react:
         specifier: ^0.1.1
         version: 0.1.1(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(@vitest/browser@3.1.3)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(vitest@3.1.3)
@@ -577,7 +617,7 @@ importers:
     devDependencies:
       '@tailwindcss/vite':
         specifier: ^4.1.8
-        version: 4.1.8(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+        version: 4.1.8(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       '@types/react':
         specifier: ^19.1.2
         version: 19.1.5
@@ -586,7 +626,7 @@ importers:
         version: 19.1.5(@types/react@19.1.5)
       '@vitejs/plugin-react':
         specifier: ^4.4.1
-        version: 4.5.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+        version: 4.5.1(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       autoprefixer:
         specifier: ^10.4.16
         version: 10.4.21(postcss@8.5.3)
@@ -619,7 +659,7 @@ importers:
         version: 8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
       vite:
         specifier: ^6.3.5
-        version: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+        version: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
 packages:
 
@@ -2553,11 +2593,8 @@ packages:
   '@types/node@20.17.50':
     resolution: {integrity: sha512-Mxiq0ULv/zo1OzOhwPqOA13I81CV/W3nvd3ChtQZRT5Cwz3cr0FKo/wMSsbTqL3EXpaBAEQhva2B8ByRkOIh9A==}
 
-  '@types/node@22.15.18':
-    resolution: {integrity: sha512-v1DKRfUdyW+jJhZNEI1PYy29S2YRxMV5AOO/x/SjKmW0acCIOqmbj6Haf9eHAhsPmrhlHSxEhv/1WszcLWV4cg==}
-
-  '@types/node@22.15.29':
-    resolution: {integrity: sha512-LNdjOkUDlU1RZb8e1kOIUpN1qQUlzGkEtbVNo53vbrwDg5om6oduhm4SiUaPW5ASTXhAiP0jInWG8Qx9fVlOeQ==}
+  '@types/node@22.15.30':
+    resolution: {integrity: sha512-6Q7lr06bEHdlfplU6YRbgG1SFBdlsfNC4/lX+SkhiTs0cpJkOElmWls8PxDFv4yY/xKb8Y6SO0OmSX4wgqTZbA==}
 
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
@@ -3294,6 +3331,10 @@ packages:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
     engines: {node: '>=6.5'}
 
+  accepts@2.0.0:
+    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
+    engines: {node: '>= 0.6'}
+
   acorn-import-attributes@1.9.5:
     resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
     peerDependencies:
@@ -3528,6 +3569,10 @@ packages:
   bn.js@5.2.2:
     resolution: {integrity: sha512-v2YAxEmKaBLahNwE1mjp4WON6huMNeuDvagFZW+ASCuA/ku0bXR9hSMw0XpiqMoA3+rmnyck/tPRSFQkoC9Cuw==}
 
+  body-parser@2.2.0:
+    resolution: {integrity: sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==}
+    engines: {node: '>=18'}
+
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
@@ -3601,6 +3646,10 @@ packages:
     resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
     engines: {node: '>=10.16.0'}
 
+  bytes@3.1.2:
+    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+    engines: {node: '>= 0.8'}
+
   c12@3.0.4:
     resolution: {integrity: sha512-t5FaZTYbbCtvxuZq9xxIruYydrAGsJ+8UdP0pZzMiK2xl/gNiSOy0OxhLzHUEEb0m1QXYqfzfvyIFEmz/g9lqg==}
     peerDependencies:
@@ -3822,6 +3871,14 @@ packages:
     resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
+  content-disposition@1.0.0:
+    resolution: {integrity: sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg==}
+    engines: {node: '>= 0.6'}
+
+  content-type@1.0.5:
+    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
+    engines: {node: '>= 0.6'}
+
   convert-gitmoji@0.1.5:
     resolution: {integrity: sha512-4wqOafJdk2tqZC++cjcbGcaJ13BZ3kwldf06PTiAQRAB76Z1KJwZNL1SaRZMi2w1FM9RYTgZ6QErS8NUl/GBmQ==}
 
@@ -3834,6 +3891,14 @@ packages:
   cookie-es@2.0.0:
     resolution: {integrity: sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg==}
 
+  cookie-signature@1.2.2:
+    resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
+    engines: {node: '>=6.6.0'}
+
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
+
   cookie@1.0.2:
     resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
     engines: {node: '>=18'}
@@ -4814,6 +4879,10 @@ packages:
     resolution: {integrity: sha512-/kP8CAwxzLVEeFrMm4kMmy4CCDlpipyA7MYLVrdJIkV0fYF0UaigQHRsxHiuY/GEea+bh4KSv3TIlgr+2UL6bw==}
     engines: {node: '>=12.0.0'}
 
+  express@5.1.0:
+    resolution: {integrity: sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==}
+    engines: {node: '>= 18'}
+
   exsolve@1.0.5:
     resolution: {integrity: sha512-pz5dvkYYKQ1AHVrgOzBKWeP4u4FRb3a6DNK2ucr0OoNwYIU4QWsJ+NM36LLzORT+z845MzKHHhpXiUF5nvQoJg==}
 
@@ -4920,6 +4989,10 @@ packages:
     resolution: {integrity: sha512-xdMtCAODmPloU9qtmPcdBV9Kd27NtMse+4ayThxqIHUES5Z2S6bGpap5PpdmNM56ub7y3i1eyr+vJJIIgWGKmA==}
     engines: {node: '>=18'}
 
+  finalhandler@2.1.0:
+    resolution: {integrity: sha512-/t88Ty3d5JWQbWYgaOGCCYfXRwV1+be02WqYYlL6h0lEiUAMPM8o8qKGO01YIkOHzka2up08wvgYD0mDiI+q3Q==}
+    engines: {node: '>= 0.8'}
+
   find-up-simple@1.0.1:
     resolution: {integrity: sha512-afd4O7zpqHeRyg4PfDQsXmlDe2PfdHtJt6Akt8jOWaApLOZk5JXs6VMR29lz03pRe9mpykrRCYIYxaJYcfpncQ==}
     engines: {node: '>=18'}
@@ -4985,6 +5058,10 @@ packages:
     resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
     engines: {node: '>=12.20.0'}
 
+  forwarded@0.2.0:
+    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
+    engines: {node: '>= 0.6'}
+
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
@@ -5376,6 +5453,10 @@ packages:
     resolution: {integrity: sha512-UxC0Yv1Y4WRJiGQxQkP0hfdL0/5/6YvdfOOClRgJ0qppSarkhneSa6UvkMkms0AkdGimSH3Ikqm+6mkMmX7vGA==}
     engines: {node: '>=12.22.0'}
 
+  ipaddr.js@1.9.1:
+    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
+    engines: {node: '>= 0.10'}
+
   iron-webcrypto@1.2.1:
     resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
 
@@ -5509,6 +5590,9 @@ packages:
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
+  is-promise@4.0.0:
+    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
+
   is-reference@1.2.1:
     resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
 
@@ -6035,6 +6119,10 @@ packages:
   mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
+  media-typer@1.1.0:
+    resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
+    engines: {node: '>= 0.8'}
+
   memory-cache@0.2.0:
     resolution: {integrity: sha512-OcjA+jzjOYzKmKS6IQVALHLVz+rNTMPoJvCztFaZxwG14wtAW7VRZjwTQu06vKCYOxh4jVnik7ya0SXTB0W+xA==}
 
@@ -6042,6 +6130,10 @@ packages:
     resolution: {integrity: sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==}
     engines: {node: '>=10'}
 
+  merge-descriptors@2.0.0:
+    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
+    engines: {node: '>=18'}
+
   merge-options@3.0.4:
     resolution: {integrity: sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==}
     engines: {node: '>=10'}
@@ -6249,6 +6341,10 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  negotiator@1.0.0:
+    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
+    engines: {node: '>= 0.6'}
+
   netlify@13.3.5:
     resolution: {integrity: sha512-Nc3loyVASW59W+8fLDZT1lncpG7llffyZ2o0UQLx/Fr20i7P8oP+lE7+TEcFvXj9IUWU6LjB9P3BH+iFGyp+mg==}
     engines: {node: ^14.16.0 || >=16.0.0}
@@ -6655,6 +6751,10 @@ packages:
     resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
     engines: {node: 20 || >=22}
 
+  path-to-regexp@8.2.0:
+    resolution: {integrity: sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==}
+    engines: {node: '>=16'}
+
   path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -7179,6 +7279,10 @@ packages:
   protocols@2.0.2:
     resolution: {integrity: sha512-hHVTzba3wboROl0/aWRRG9dMytgH6ow//STBZh43l/wQgmMhYhOFi0EHWAPtoCz9IAUymsyP0TSBHkhgMEGNnQ==}
 
+  proxy-addr@2.0.7:
+    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
+    engines: {node: '>= 0.10'}
+
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
@@ -7226,6 +7330,10 @@ packages:
     resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
     engines: {node: '>= 0.6'}
 
+  raw-body@3.0.0:
+    resolution: {integrity: sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==}
+    engines: {node: '>= 0.8'}
+
   rc9@2.1.2:
     resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
 
@@ -7456,6 +7564,10 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  router@2.2.0:
+    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
+    engines: {node: '>= 18'}
+
   rrweb-cssom@0.8.0:
     resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
 
@@ -8109,6 +8221,10 @@ packages:
     resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
     engines: {node: '>=16'}
 
+  type-is@2.0.1:
+    resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==}
+    engines: {node: '>= 0.6'}
+
   type-level-regexp@0.1.17:
     resolution: {integrity: sha512-wTk4DH3cxwk196uGLK/E9pE45aLfeKJacKmcEgEOA/q5dnPGNxXt0cfYdFxb57L+sEpf1oJH4Dnx/pnRcku9jg==}
 
@@ -8226,6 +8342,10 @@ packages:
     resolution: {integrity: sha512-6bc58dPYhCMHHuwxldQxO3RRNZ4eCogZ/st++0+fcC1nr0jiGUtAdBJ2qzmLQWSxbtz42pWt4QQMiZ9HvZf5cg==}
     engines: {node: '>=0.10.0'}
 
+  unpipe@1.0.0:
+    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+    engines: {node: '>= 0.8'}
+
   unplugin-utils@0.2.4:
     resolution: {integrity: sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA==}
     engines: {node: '>=18.12.0'}
@@ -8350,6 +8470,10 @@ packages:
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
+  vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+
   vfile-message@4.0.2:
     resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
 
@@ -9396,7 +9520,7 @@ snapshots:
   '@es-joy/jsdoccomment@0.50.2':
     dependencies:
       '@types/estree': 1.0.7
-      '@typescript-eslint/types': 8.32.1
+      '@typescript-eslint/types': 8.33.1
       comment-parser: 1.4.1
       esquery: 1.6.0
       jsdoc-type-pratt-parser: 4.1.0
@@ -10011,12 +10135,12 @@ snapshots:
 
   '@nuxt/devalue@2.0.2': {}
 
-  '@nuxt/devtools-kit@2.4.1(magicast@0.3.5)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
+  '@nuxt/devtools-kit@2.4.1(magicast@0.3.5)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       '@nuxt/kit': 3.17.4(magicast@0.3.5)
       '@nuxt/schema': 3.17.4
       execa: 8.0.1
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
     transitivePeerDependencies:
       - magicast
 
@@ -10031,12 +10155,12 @@ snapshots:
       prompts: 2.4.2
       semver: 7.7.2
 
-  '@nuxt/devtools@2.4.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
+  '@nuxt/devtools@2.4.1(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
     dependencies:
-      '@nuxt/devtools-kit': 2.4.1(magicast@0.3.5)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      '@nuxt/devtools-kit': 2.4.1(magicast@0.3.5)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       '@nuxt/devtools-wizard': 2.4.1
       '@nuxt/kit': 3.17.4(magicast@0.3.5)
-      '@vue/devtools-core': 7.7.6(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
+      '@vue/devtools-core': 7.7.6(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
       '@vue/devtools-kit': 7.7.6
       birpc: 2.3.0
       consola: 3.4.2
@@ -10061,9 +10185,9 @@ snapshots:
       sirv: 3.0.1
       structured-clone-es: 1.0.0
       tinyglobby: 0.2.13
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-plugin-inspect: 11.1.0(@nuxt/kit@3.17.4(magicast@0.3.5))(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
-      vite-plugin-vue-tracer: 0.1.3(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
+      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-plugin-inspect: 11.1.0(@nuxt/kit@3.17.4(magicast@0.3.5))(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      vite-plugin-vue-tracer: 0.1.3(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
       which: 5.0.0
       ws: 8.18.2
     transitivePeerDependencies:
@@ -10184,7 +10308,7 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/test-utils@3.19.0(@types/node@22.15.29)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)':
+  '@nuxt/test-utils@3.19.0(@types/node@22.15.30)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)':
     dependencies:
       '@nuxt/kit': 3.17.4(magicast@0.3.5)
       '@nuxt/schema': 3.17.4
@@ -10209,14 +10333,14 @@ snapshots:
       tinyexec: 1.0.1
       ufo: 1.6.1
       unplugin: 2.3.4
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vitest-environment-nuxt: 1.0.1(@types/node@22.15.29)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vitest-environment-nuxt: 1.0.1(@types/node@22.15.30)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
       vue: 3.5.14(typescript@5.8.3)
     optionalDependencies:
       '@vue/test-utils': 2.4.6
       jsdom: 26.1.0
       playwright-core: 1.52.0
-      vitest: 3.1.3(@types/node@22.15.29)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vitest: 3.1.3(@types/node@22.15.30)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -10232,12 +10356,12 @@ snapshots:
       - typescript
       - yaml
 
-  '@nuxt/vite-builder@3.17.4(@types/node@22.15.29)(eslint@8.57.0)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3))(yaml@2.8.0)':
+  '@nuxt/vite-builder@3.17.4(@types/node@22.15.30)(eslint@8.57.0)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3))(yaml@2.8.0)':
     dependencies:
       '@nuxt/kit': 3.17.4(magicast@0.3.5)
       '@rollup/plugin-replace': 6.0.2(rollup@4.40.2)
-      '@vitejs/plugin-vue': 5.2.4(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
-      '@vitejs/plugin-vue-jsx': 4.2.0(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
+      '@vitejs/plugin-vue': 5.2.4(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
+      '@vitejs/plugin-vue-jsx': 4.2.0(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
       autoprefixer: 10.4.21(postcss@8.5.3)
       consola: 3.4.2
       cssnano: 7.0.7(postcss@8.5.3)
@@ -10263,9 +10387,9 @@ snapshots:
       ufo: 1.6.1
       unenv: 2.0.0-rc.17
       unplugin: 2.3.4
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-node: 3.1.4(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-plugin-checker: 0.9.3(eslint@8.57.0)(optionator@0.9.4)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))
+      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-node: 3.1.4(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-plugin-checker: 0.9.3(eslint@8.57.0)(optionator@0.9.4)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))
       vue: 3.5.14(typescript@5.8.3)
       vue-bundle-renderer: 2.1.1
     transitivePeerDependencies:
@@ -10789,12 +10913,12 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.1.8
       '@tailwindcss/oxide-win32-x64-msvc': 4.1.8
 
-  '@tailwindcss/vite@4.1.8(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
+  '@tailwindcss/vite@4.1.8(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       '@tailwindcss/node': 4.1.8
       '@tailwindcss/oxide': 4.1.8
       tailwindcss: 4.1.8
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
   '@testing-library/dom@10.4.0':
     dependencies:
@@ -10877,11 +11001,7 @@ snapshots:
     dependencies:
       undici-types: 6.19.8
 
-  '@types/node@22.15.18':
-    dependencies:
-      undici-types: 6.21.0
-
-  '@types/node@22.15.29':
+  '@types/node@22.15.30':
     dependencies:
       undici-types: 6.21.0
 
@@ -10913,7 +11033,7 @@ snapshots:
 
   '@types/yauzl@2.10.3':
     dependencies:
-      '@types/node': 22.15.29
+      '@types/node': 22.15.30
     optional: true
 
   '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6)':
@@ -11516,7 +11636,7 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vitejs/plugin-react@4.5.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
+  '@vitejs/plugin-react@4.5.1(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       '@babel/core': 7.27.1
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.27.1)
@@ -11524,24 +11644,24 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.9
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@4.2.0(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
+  '@vitejs/plugin-vue-jsx@4.2.0(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
     dependencies:
       '@babel/core': 7.27.1
       '@babel/plugin-transform-typescript': 7.27.1(@babel/core@7.27.1)
       '@rolldown/pluginutils': 1.0.0-beta.9
       '@vue/babel-plugin-jsx': 1.4.0(@babel/core@7.27.1)
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vue: 3.5.14(typescript@5.8.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.2.4(vite@5.4.19(@types/node@22.15.29)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2))(vue@3.5.14(typescript@5.8.3))':
+  '@vitejs/plugin-vue@5.2.4(vite@5.4.19(@types/node@22.15.30)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2))(vue@3.5.14(typescript@5.8.3))':
     dependencies:
-      vite: 5.4.19(@types/node@22.15.29)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)
+      vite: 5.4.19(@types/node@22.15.30)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)
       vue: 3.5.14(typescript@5.8.3)
 
   '@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@20.17.50)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.1.6))':
@@ -11549,21 +11669,21 @@ snapshots:
       vite: 6.3.5(@types/node@20.17.50)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vue: 3.5.14(typescript@5.1.6)
 
-  '@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
+  '@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
     dependencies:
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vue: 3.5.14(typescript@5.8.3)
 
-  '@vitest/browser@3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)':
+  '@vitest/browser@3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)':
     dependencies:
       '@testing-library/dom': 10.4.0
       '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.0)
-      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       '@vitest/utils': 3.1.3
       magic-string: 0.30.17
       sirv: 3.0.1
       tinyrainbow: 2.0.0
-      vitest: 3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vitest: 3.1.3(@types/node@22.15.30)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       ws: 8.18.2
     optionalDependencies:
       playwright: 1.52.0
@@ -11573,26 +11693,6 @@ snapshots:
       - utf-8-validate
       - vite
 
-  '@vitest/browser@3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)':
-    dependencies:
-      '@testing-library/dom': 10.4.0
-      '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.0)
-      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
-      '@vitest/utils': 3.1.3
-      magic-string: 0.30.17
-      sirv: 3.0.1
-      tinyrainbow: 2.0.0
-      vitest: 3.1.3(@types/node@22.15.29)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      ws: 8.18.2
-    optionalDependencies:
-      playwright: 1.52.0
-    transitivePeerDependencies:
-      - bufferutil
-      - msw
-      - utf-8-validate
-      - vite
-    optional: true
-
   '@vitest/coverage-v8@3.0.8(vitest@3.1.3(@types/node@20.17.50)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -11626,21 +11726,13 @@ snapshots:
     optionalDependencies:
       vite: 6.3.5(@types/node@20.17.50)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
-  '@vitest/mocker@3.1.3(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
-    dependencies:
-      '@vitest/spy': 3.1.3
-      estree-walker: 3.0.3
-      magic-string: 0.30.17
-    optionalDependencies:
-      vite: 6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-
-  '@vitest/mocker@3.1.3(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
+  '@vitest/mocker@3.1.3(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       '@vitest/spy': 3.1.3
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
   '@vitest/pretty-format@3.1.3':
     dependencies:
@@ -11767,14 +11859,14 @@ snapshots:
     dependencies:
       '@vue/devtools-kit': 7.7.6
 
-  '@vue/devtools-core@7.7.6(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
+  '@vue/devtools-core@7.7.6(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
     dependencies:
       '@vue/devtools-kit': 7.7.6
       '@vue/devtools-shared': 7.7.6
       mitt: 3.0.1
       nanoid: 5.1.5
       pathe: 2.0.3
-      vite-hot-client: 2.0.4(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      vite-hot-client: 2.0.4(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       vue: 3.5.14(typescript@5.8.3)
     transitivePeerDependencies:
       - vite
@@ -12042,6 +12134,11 @@ snapshots:
     dependencies:
       event-target-shim: 5.0.1
 
+  accepts@2.0.0:
+    dependencies:
+      mime-types: 3.0.1
+      negotiator: 1.0.0
+
   acorn-import-attributes@1.9.5(acorn@8.14.1):
     dependencies:
       acorn: 8.14.1
@@ -12309,6 +12406,20 @@ snapshots:
 
   bn.js@5.2.2: {}
 
+  body-parser@2.2.0:
+    dependencies:
+      bytes: 3.1.2
+      content-type: 1.0.5
+      debug: 4.4.1
+      http-errors: 2.0.0
+      iconv-lite: 0.6.3
+      on-finished: 2.4.1
+      qs: 6.14.0
+      raw-body: 3.0.0
+      type-is: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
   boolbase@1.0.0: {}
 
   brace-expansion@1.1.11:
@@ -12404,6 +12515,8 @@ snapshots:
     dependencies:
       streamsearch: 1.1.0
 
+  bytes@3.1.2: {}
+
   c12@3.0.4(magicast@0.3.5):
     dependencies:
       chokidar: 4.0.3
@@ -12635,6 +12748,12 @@ snapshots:
 
   consola@3.4.2: {}
 
+  content-disposition@1.0.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  content-type@1.0.5: {}
+
   convert-gitmoji@0.1.5: {}
 
   convert-source-map@2.0.0: {}
@@ -12643,6 +12762,10 @@ snapshots:
 
   cookie-es@2.0.0: {}
 
+  cookie-signature@1.2.2: {}
+
+  cookie@0.7.2: {}
+
   cookie@1.0.2: {}
 
   copy-anything@3.0.5:
@@ -13044,7 +13167,7 @@ snapshots:
 
   detective-typescript@14.0.0(typescript@5.8.3):
     dependencies:
-      '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.8.3)
+      '@typescript-eslint/typescript-estree': 8.33.1(typescript@5.8.3)
       ast-module-types: 6.0.1
       node-source-walk: 7.0.1
       typescript: 5.8.3
@@ -13582,7 +13705,7 @@ snapshots:
       eslint-import-resolver-node: 0.3.9
       get-tsconfig: 4.10.1
       is-glob: 4.0.3
-      minimatch: 9.0.5
+      minimatch: 10.0.1
       semver: 7.7.2
       stable-hash: 0.0.5
       tslib: 2.8.1
@@ -13600,7 +13723,7 @@ snapshots:
       eslint-import-resolver-node: 0.3.9
       get-tsconfig: 4.10.1
       is-glob: 4.0.3
-      minimatch: 9.0.5
+      minimatch: 10.0.1
       semver: 7.7.2
       stable-hash: 0.0.5
       tslib: 2.8.1
@@ -14123,6 +14246,38 @@ snapshots:
 
   expect-type@1.2.1: {}
 
+  express@5.1.0:
+    dependencies:
+      accepts: 2.0.0
+      body-parser: 2.2.0
+      content-disposition: 1.0.0
+      content-type: 1.0.5
+      cookie: 0.7.2
+      cookie-signature: 1.2.2
+      debug: 4.4.1
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 2.1.0
+      fresh: 2.0.0
+      http-errors: 2.0.0
+      merge-descriptors: 2.0.0
+      mime-types: 3.0.1
+      on-finished: 2.4.1
+      once: 1.4.0
+      parseurl: 1.3.3
+      proxy-addr: 2.0.7
+      qs: 6.14.0
+      range-parser: 1.2.1
+      router: 2.2.0
+      send: 1.2.0
+      serve-static: 2.2.0
+      statuses: 2.0.1
+      type-is: 2.0.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
   exsolve@1.0.5: {}
 
   extendable-error@0.1.7: {}
@@ -14227,6 +14382,17 @@ snapshots:
 
   filter-obj@6.1.0: {}
 
+  finalhandler@2.1.0:
+    dependencies:
+      debug: 4.4.1
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
   find-up-simple@1.0.1: {}
 
   find-up@4.1.0:
@@ -14294,6 +14460,8 @@ snapshots:
     dependencies:
       fetch-blob: 3.2.0
 
+  forwarded@0.2.0: {}
+
   fraction.js@4.3.7: {}
 
   fresh@2.0.0: {}
@@ -14665,7 +14833,6 @@ snapshots:
   iconv-lite@0.6.3:
     dependencies:
       safer-buffer: 2.1.2
-    optional: true
 
   icss-utils@5.1.0(postcss@8.5.3):
     dependencies:
@@ -14737,6 +14904,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  ipaddr.js@1.9.1: {}
+
   iron-webcrypto@1.2.1: {}
 
   is-array-buffer@3.0.5:
@@ -14853,6 +15022,8 @@ snapshots:
   is-potential-custom-element-name@1.0.1:
     optional: true
 
+  is-promise@4.0.0: {}
+
   is-reference@1.2.1:
     dependencies:
       '@types/estree': 1.0.7
@@ -15359,6 +15530,8 @@ snapshots:
 
   mdn-data@2.0.30: {}
 
+  media-typer@1.1.0: {}
+
   memory-cache@0.2.0: {}
 
   meow@9.0.0:
@@ -15376,6 +15549,8 @@ snapshots:
       type-fest: 0.18.1
       yargs-parser: 20.2.9
 
+  merge-descriptors@2.0.0: {}
+
   merge-options@3.0.4:
     dependencies:
       is-plain-obj: 2.1.0
@@ -15545,6 +15720,8 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
+  negotiator@1.0.0: {}
+
   netlify@13.3.5:
     dependencies:
       '@netlify/open-api': 2.37.0
@@ -15765,15 +15942,15 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  nuxt@3.17.4(@parcel/watcher@2.5.1)(@types/node@22.15.29)(db0@0.3.2)(eslint@8.57.0)(ioredis@5.6.1)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))(yaml@2.8.0):
+  nuxt@3.17.4(@parcel/watcher@2.5.1)(@types/node@22.15.30)(db0@0.3.2)(eslint@8.57.0)(ioredis@5.6.1)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))(yaml@2.8.0):
     dependencies:
       '@nuxt/cli': 3.25.1(magicast@0.3.5)
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 2.4.1(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
+      '@nuxt/devtools': 2.4.1(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
       '@nuxt/kit': 3.17.4(magicast@0.3.5)
       '@nuxt/schema': 3.17.4
       '@nuxt/telemetry': 2.6.6(magicast@0.3.5)
-      '@nuxt/vite-builder': 3.17.4(@types/node@22.15.29)(eslint@8.57.0)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3))(yaml@2.8.0)
+      '@nuxt/vite-builder': 3.17.4(@types/node@22.15.30)(eslint@8.57.0)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3))(yaml@2.8.0)
       '@unhead/vue': 2.0.10(vue@3.5.14(typescript@5.8.3))
       '@vue/shared': 3.5.14
       c12: 3.0.4(magicast@0.3.5)
@@ -15831,7 +16008,7 @@ snapshots:
       vue-router: 4.5.1(vue@3.5.14(typescript@5.8.3))
     optionalDependencies:
       '@parcel/watcher': 2.5.1
-      '@types/node': 22.15.29
+      '@types/node': 22.15.30
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -16223,6 +16400,8 @@ snapshots:
       lru-cache: 11.1.0
       minipass: 7.1.2
 
+  path-to-regexp@8.2.0: {}
+
   path-type@4.0.0: {}
 
   path-type@6.0.0: {}
@@ -16710,6 +16889,11 @@ snapshots:
 
   protocols@2.0.2: {}
 
+  proxy-addr@2.0.7:
+    dependencies:
+      forwarded: 0.2.0
+      ipaddr.js: 1.9.1
+
   proxy-from-env@1.1.0: {}
 
   public-encrypt@4.0.3:
@@ -16760,6 +16944,13 @@ snapshots:
 
   range-parser@1.2.1: {}
 
+  raw-body@3.0.0:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.0
+      iconv-lite: 0.6.3
+      unpipe: 1.0.0
+
   rc9@2.1.2:
     dependencies:
       defu: 6.1.4
@@ -17050,6 +17241,16 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.40.2
       fsevents: 2.3.3
 
+  router@2.2.0:
+    dependencies:
+      debug: 4.4.1
+      depd: 2.0.0
+      is-promise: 4.0.0
+      parseurl: 1.3.3
+      path-to-regexp: 8.2.0
+    transitivePeerDependencies:
+      - supports-color
+
   rrweb-cssom@0.8.0:
     optional: true
 
@@ -17812,6 +18013,12 @@ snapshots:
 
   type-fest@4.41.0: {}
 
+  type-is@2.0.1:
+    dependencies:
+      content-type: 1.0.5
+      media-typer: 1.1.0
+      mime-types: 3.0.1
+
   type-level-regexp@0.1.17: {}
 
   typed-array-buffer@1.0.3:
@@ -17985,6 +18192,8 @@ snapshots:
     dependencies:
       normalize-path: 2.1.1
 
+  unpipe@1.0.0: {}
+
   unplugin-utils@0.2.4:
     dependencies:
       pathe: 2.0.3
@@ -18109,6 +18318,8 @@ snapshots:
       spdx-correct: 3.2.0
       spdx-expression-parse: 3.0.1
 
+  vary@1.1.2: {}
+
   vfile-message@4.0.2:
     dependencies:
       '@types/unist': 3.0.3
@@ -18119,15 +18330,15 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite-dev-rpc@1.0.7(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
+  vite-dev-rpc@1.0.7(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
     dependencies:
       birpc: 2.3.0
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-hot-client: 2.0.4(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-hot-client: 2.0.4(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
 
-  vite-hot-client@2.0.4(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
+  vite-hot-client@2.0.4(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
     dependencies:
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
   vite-node@3.1.3(@types/node@20.17.50)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
     dependencies:
@@ -18150,13 +18361,13 @@ snapshots:
       - tsx
       - yaml
 
-  vite-node@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
+  vite-node@3.1.3(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.1
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -18171,13 +18382,13 @@ snapshots:
       - tsx
       - yaml
 
-  vite-node@3.1.3(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
+  vite-node@3.1.4(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.1
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -18192,28 +18403,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite-node@3.1.4(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
-    dependencies:
-      cac: 6.7.14
-      debug: 4.4.1
-      es-module-lexer: 1.7.0
-      pathe: 2.0.3
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-    transitivePeerDependencies:
-      - '@types/node'
-      - jiti
-      - less
-      - lightningcss
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - tsx
-      - yaml
-
-  vite-plugin-checker@0.9.3(eslint@8.57.0)(optionator@0.9.4)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3)):
+  vite-plugin-checker@0.9.3(eslint@8.57.0)(optionator@0.9.4)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3)):
     dependencies:
       '@babel/code-frame': 7.27.1
       chokidar: 4.0.3
@@ -18223,7 +18413,7 @@ snapshots:
       strip-ansi: 7.1.0
       tiny-invariant: 1.3.3
       tinyglobby: 0.2.13
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vscode-uri: 3.1.0
     optionalDependencies:
       eslint: 8.57.0
@@ -18231,7 +18421,7 @@ snapshots:
       typescript: 5.8.3
       vue-tsc: 2.2.10(typescript@5.8.3)
 
-  vite-plugin-inspect@11.1.0(@nuxt/kit@3.17.4(magicast@0.3.5))(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
+  vite-plugin-inspect@11.1.0(@nuxt/kit@3.17.4(magicast@0.3.5))(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
     dependencies:
       ansis: 3.17.0
       debug: 4.4.1
@@ -18241,30 +18431,30 @@ snapshots:
       perfect-debounce: 1.0.0
       sirv: 3.0.1
       unplugin-utils: 0.2.4
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-dev-rpc: 1.0.7(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-dev-rpc: 1.0.7(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
     optionalDependencies:
       '@nuxt/kit': 3.17.4(magicast@0.3.5)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vue-tracer@0.1.3(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3)):
+  vite-plugin-vue-tracer@0.1.3(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3)):
     dependencies:
       estree-walker: 3.0.3
       exsolve: 1.0.5
       magic-string: 0.30.17
       pathe: 2.0.3
       source-map-js: 1.2.1
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vue: 3.5.14(typescript@5.8.3)
 
-  vite@5.4.19(@types/node@22.15.29)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2):
+  vite@5.4.19(@types/node@22.15.30)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.3
       rollup: 4.40.2
     optionalDependencies:
-      '@types/node': 22.15.29
+      '@types/node': 22.15.30
       fsevents: 2.3.3
       lightningcss: 1.30.1
       sass: 1.89.0
@@ -18287,24 +18477,7 @@ snapshots:
       terser: 5.39.2
       yaml: 2.8.0
 
-  vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
-    dependencies:
-      esbuild: 0.25.4
-      fdir: 6.4.4(picomatch@4.0.2)
-      picomatch: 4.0.2
-      postcss: 8.5.3
-      rollup: 4.40.2
-      tinyglobby: 0.2.13
-    optionalDependencies:
-      '@types/node': 22.15.18
-      fsevents: 2.3.3
-      jiti: 2.4.2
-      lightningcss: 1.30.1
-      sass: 1.89.0
-      terser: 5.39.2
-      yaml: 2.8.0
-
-  vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
+  vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
     dependencies:
       esbuild: 0.25.4
       fdir: 6.4.4(picomatch@4.0.2)
@@ -18313,7 +18486,7 @@ snapshots:
       rollup: 4.40.2
       tinyglobby: 0.2.13
     optionalDependencies:
-      '@types/node': 22.15.29
+      '@types/node': 22.15.30
       fsevents: 2.3.3
       jiti: 2.4.2
       lightningcss: 1.30.1
@@ -18321,7 +18494,7 @@ snapshots:
       terser: 5.39.2
       yaml: 2.8.0
 
-  vitepress@1.6.3(@algolia/client-search@5.25.0)(@types/node@22.15.29)(axios@1.9.0)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.1)(postcss@8.5.3)(sass@1.89.0)(search-insights@2.17.3)(terser@5.39.2)(typescript@5.8.3):
+  vitepress@1.6.3(@algolia/client-search@5.25.0)(@types/node@22.15.30)(axios@1.9.0)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.1)(postcss@8.5.3)(sass@1.89.0)(search-insights@2.17.3)(terser@5.39.2)(typescript@5.8.3):
     dependencies:
       '@docsearch/css': 3.8.2
       '@docsearch/js': 3.8.2(@algolia/client-search@5.25.0)(search-insights@2.17.3)
@@ -18330,7 +18503,7 @@ snapshots:
       '@shikijs/transformers': 2.5.0
       '@shikijs/types': 2.5.0
       '@types/markdown-it': 14.1.2
-      '@vitejs/plugin-vue': 5.2.4(vite@5.4.19(@types/node@22.15.29)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2))(vue@3.5.14(typescript@5.8.3))
+      '@vitejs/plugin-vue': 5.2.4(vite@5.4.19(@types/node@22.15.30)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2))(vue@3.5.14(typescript@5.8.3))
       '@vue/devtools-api': 7.7.6
       '@vue/shared': 3.5.14
       '@vueuse/core': 12.8.2(typescript@5.8.3)
@@ -18339,7 +18512,7 @@ snapshots:
       mark.js: 8.11.1
       minisearch: 7.1.2
       shiki: 2.5.0
-      vite: 5.4.19(@types/node@22.15.29)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)
+      vite: 5.4.19(@types/node@22.15.30)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)
       vue: 3.5.14(typescript@5.8.3)
     optionalDependencies:
       postcss: 8.5.3
@@ -18372,17 +18545,17 @@ snapshots:
 
   vitest-browser-react@0.1.1(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(@vitest/browser@3.1.3)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(vitest@3.1.3):
     dependencies:
-      '@vitest/browser': 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
+      '@vitest/browser': 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      vitest: 3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vitest: 3.1.3(@types/node@22.15.30)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
     optionalDependencies:
       '@types/react': 19.1.5
       '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
-  vitest-environment-nuxt@1.0.1(@types/node@22.15.29)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0):
+  vitest-environment-nuxt@1.0.1(@types/node@22.15.30)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0):
     dependencies:
-      '@nuxt/test-utils': 3.19.0(@types/node@22.15.29)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
+      '@nuxt/test-utils': 3.19.0(@types/node@22.15.30)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
     transitivePeerDependencies:
       - '@cucumber/cucumber'
       - '@jest/globals'
@@ -18448,51 +18621,10 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@3.1.3(@types/node@22.15.18)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
-    dependencies:
-      '@vitest/expect': 3.1.3
-      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
-      '@vitest/pretty-format': 3.1.3
-      '@vitest/runner': 3.1.3
-      '@vitest/snapshot': 3.1.3
-      '@vitest/spy': 3.1.3
-      '@vitest/utils': 3.1.3
-      chai: 5.2.0
-      debug: 4.4.1
-      expect-type: 1.2.1
-      magic-string: 0.30.17
-      pathe: 2.0.3
-      std-env: 3.9.0
-      tinybench: 2.9.0
-      tinyexec: 0.3.2
-      tinyglobby: 0.2.13
-      tinypool: 1.0.2
-      tinyrainbow: 2.0.0
-      vite: 6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-node: 3.1.3(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      why-is-node-running: 2.3.0
-    optionalDependencies:
-      '@types/node': 22.15.18
-      '@vitest/browser': 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
-      jsdom: 26.1.0
-    transitivePeerDependencies:
-      - jiti
-      - less
-      - lightningcss
-      - msw
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - tsx
-      - yaml
-
-  vitest@3.1.3(@types/node@22.15.29)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
+  vitest@3.1.3(@types/node@22.15.30)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
     dependencies:
       '@vitest/expect': 3.1.3
-      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       '@vitest/pretty-format': 3.1.3
       '@vitest/runner': 3.1.3
       '@vitest/snapshot': 3.1.3
@@ -18509,12 +18641,12 @@ snapshots:
       tinyglobby: 0.2.13
       tinypool: 1.0.2
       tinyrainbow: 2.0.0
-      vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-node: 3.1.3(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-node: 3.1.3(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 22.15.29
-      '@vitest/browser': 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
+      '@types/node': 22.15.30
+      '@vitest/browser': 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
       jsdom: 26.1.0
     transitivePeerDependencies:
       - jiti

From 88af88199cec748ccf5a2ed366427b287c9c6c6c Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Mon, 9 Jun 2025 17:54:56 +0530
Subject: [PATCH 026/131] Revert "chore(javascript): implement Asgardeo client
 interface with new methods and refactor user information retrieval"

This reverts commit bbba8413b47cb6c63f923f92da8f93386bdd94b6.
---
 .../src/AsgardeoJavaScriptClient.ts           | 60 ------------
 packages/javascript/src/__legacy__/client.ts  | 24 ++++-
 packages/javascript/src/models/client.ts      | 92 +++----------------
 packages/javascript/src/models/user.ts        |  2 -
 4 files changed, 33 insertions(+), 145 deletions(-)

diff --git a/packages/javascript/src/AsgardeoJavaScriptClient.ts b/packages/javascript/src/AsgardeoJavaScriptClient.ts
index 4730533e0..d13433016 100644
--- a/packages/javascript/src/AsgardeoJavaScriptClient.ts
+++ b/packages/javascript/src/AsgardeoJavaScriptClient.ts
@@ -19,12 +19,6 @@
 import {AsgardeoClient, SignInOptions, SignOutOptions} from './models/client';
 import {User} from './models/user';
 import {Config} from './models/config';
-import { CustomGrantConfig } from './__legacy__/models';
-import { Crypto } from './models/crypto';
-import { ExtendedAuthorizeRequestUrlParams } from './models/oauth-request';
-import { OIDCEndpoints } from './models/oidc-endpoints';
-import { TokenResponse } from './models/token';
-import StorageManager from './StorageManager';
 
 /**
  * Base class for implementing Asgardeo clients.
@@ -33,60 +27,6 @@ import StorageManager from './StorageManager';
  * @typeParam T - Configuration type that extends Config.
  */
 abstract class AsgardeoJavaScriptClient<T = Config> implements AsgardeoClient<T> {
-  getStorageManager(): StorageManager<T> {
-    throw new Error('Method not implemented.');
-  }
-  getInstanceId(): number {
-    throw new Error('Method not implemented.');
-  }
-  getSignInUrl(requestConfig: ExtendedAuthorizeRequestUrlParams, userId: string): Promise<string> {
-    throw new Error('Method not implemented.');
-  }
-  getSignOutUrl(userId: string): Promise<string> {
-    throw new Error('Method not implemented.');
-  }
-  loadOpenIDProviderConfiguration(force: boolean): Promise<void> {
-    throw new Error('Method not implemented.');
-  }
-  getOpenIDProviderEndpoints(): Promise<Partial<OIDCEndpoints>> {
-    throw new Error('Method not implemented.');
-  }
-  requestAccessToken(authorizationCode: string, sessionState: string, state: string, userId?: string, requestConfig?: { params: Record<string, unknown>; }): Promise<TokenResponse> {
-    throw new Error('Method not implemented.');
-  }
-  getIdToken(userId: string, raw: boolean): Promise<string> {
-    throw new Error('Method not implemented.');
-  }
-  getCrypto(): Crypto {
-    throw new Error('Method not implemented.');
-  }
-  revokeAccessToken(userId?: string): Promise<any> {
-    throw new Error('Method not implemented.');
-  }
-  refreshAccessToken(userId?: string): Promise<TokenResponse> {
-    throw new Error('Method not implemented.');
-  }
-  getAccessToken(userId?: string): Promise<string> {
-    throw new Error('Method not implemented.');
-  }
-  exchangeToken(requestConfig: CustomGrantConfig, userId?: string): Promise<TokenResponse> {
-    throw new Error('Method not implemented.');
-  }
-  getPKCECode(state: string, userId?: string): Promise<string> {
-    throw new Error('Method not implemented.');
-  }
-  setPKCECode(code: string, state: string, userId?: string): Promise<void> {
-    throw new Error('Method not implemented.');
-  }
-  isSignOutSuccessful(afterSignOutUrl: string): boolean {
-    throw new Error('Method not implemented.');
-  }
-  reInitialize(config: T): Promise<void> {
-    throw new Error('Method not implemented.');
-  }
-  clearSession(userId?: string): Promise<void> {
-    throw new Error('Method not implemented.');
-  }
   /**
    * Initializes the authentication client with provided configuration.
    *
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 4a1d0a97e..41dcd7b91 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -863,6 +863,26 @@ export class AsgardeoAuthClient<T> {
     return (await this._storageManager.getSessionData(userID))?.access_token;
   }
 
+  /**
+   * The created timestamp of the token response in milliseconds.
+   *
+   * @param userID - User ID
+   * @returns Created at timestamp of the token response in milliseconds.
+   */
+  public async getCreatedAt(userID?: string): Promise<number> {
+    return (await this._storageManager.getSessionData(userID))?.created_at;
+  }
+
+  /**
+   * The expires timestamp of the token response in seconds.
+   *
+   * @param userID - User ID
+   * @returns Expires in timestamp of the token response in seconds.
+   */
+  public async getExpiresIn(userID?: string): Promise<string> {
+    return (await this._storageManager.getSessionData(userID))?.expires_in;
+  }
+
   /**
    * This method sends a custom-grant request and returns a Promise that resolves with the response
    * depending on the config passed.
@@ -1000,10 +1020,10 @@ export class AsgardeoAuthClient<T> {
     const isAccessTokenAvailable: boolean = Boolean(await this.getAccessToken(userID));
 
     // Check if the access token is expired.
-    const createdAt: number = (await this._storageManager.getSessionData(userID))?.created_at;
+    const createdAt: number = await this.getCreatedAt(userID);
 
     // Get the expires in value.
-    const expiresInString: string = (await this._storageManager.getSessionData(userID))?.expires_in;
+    const expiresInString: string = await this.getExpiresIn(userID);
 
     // If the expires in value is not available, the token is invalid and the user is not authenticated.
     if (!expiresInString) {
diff --git a/packages/javascript/src/models/client.ts b/packages/javascript/src/models/client.ts
index 2e345e0fe..3f06fc087 100644
--- a/packages/javascript/src/models/client.ts
+++ b/packages/javascript/src/models/client.ts
@@ -16,19 +16,13 @@
  * under the License.
  */
 
-import { CustomGrantConfig } from '../__legacy__/models/custom-grant';
-import StorageManager from '../StorageManager';
-import {Crypto} from './crypto';
-import {ExtendedAuthorizeRequestUrlParams} from './oauth-request';
-import {OIDCEndpoints} from './oidc-endpoints';
-import {IdTokenPayload, TokenResponse} from './token';
-import {User, UserInfoResolvingStrategy} from './user';
+import {User} from './user';
 
 export type SignInOptions = Record<string, unknown>;
 export type SignOutOptions = Record<string, unknown>;
 
 /**
- * Interface defining the core functionality for Asgardeo clients.
+ * Interface defining the core functionality for Asgardeo authentication clients.
  *
  * @example
  * ```typescript
@@ -39,83 +33,19 @@ export type SignOutOptions = Record<string, unknown>;
  */
 export interface AsgardeoClient<T> {
   /**
-   * Initializes the Asgardeo client with provided configuration.
+   * Gets user information from the session.
    *
-   * @param config - SDK instance configuration options.
-   * @param storage - Storage interface for managing session data.
-   * @param crypto - Crypto interface for handling cryptographic operations.
-   * @param instanceId - Unique identifier for the client instance.
-   * @returns Promise resolving to boolean indicating success.
-   */
-  initialize(config: T, storage: Storage, crypto: Crypto, instanceId: number): Promise<boolean>;
-
-  /**
-   * Gets user information based on the specified strategy.
-   * The strategy can be 'SCIM' | 'ID_TOKEN' | 'USER_INFO'.
-   *   - 'SCIM' will fetch user information from the SCIM endpoint.
-   *   - 'ID_TOKEN' will extract user information from the ID token.
-   *   - 'USER_INFO' will fetch user information from the UserInfo endpoint.
-   * If a userId is provided, it will fetch the user information for that specific user in multi-user scenarios.
-   * @param strategy - The strategy to use for fetching user information.
-   * @param userId - Optional user ID to fetch specific user information.
-   *                If not provided, it will fetch the currently signed-in user.
-   * @returns Promise resolving to a User object containing user details.
-   */
-  getUser(strategy: UserInfoResolvingStrategy, userId?: string): Promise<User>;
-
-  /**
-   * Gets the storage manager instance.
-   * @returns StorageManager instance for managing session data.
+   * @returns User object containing user details.
    */
-  getStorageManager(): StorageManager<T>;
+  getUser(): Promise<User>;
 
   /**
-   * Gets the client instance Id.
-   * This is useful for identifying different instances of the client, especially in scenarios where multiple clients are used.
-   * @return Unique identifier for the client instance.
+   * Initializes the authentication client with provided configuration.
+   *
+   * @param config - SDK Client instance configuration options.
+   * @returns Promise resolving to boolean indicating success.
    */
-  getInstanceId(): number;
-
-  getSignInUrl(requestConfig: ExtendedAuthorizeRequestUrlParams, userId: string): Promise<string>;
-
-  getSignOutUrl(userId: string): Promise<string>;
-
-  loadOpenIDProviderConfiguration(force: boolean): Promise<void>;
-
-  getOpenIDProviderEndpoints(): Promise<Partial<OIDCEndpoints>>;
-
-  requestAccessToken(
-    authorizationCode: string,
-    sessionState: string,
-    state: string,
-    userId?: string,
-    requestConfig?: {
-      params: Record<string, unknown>;
-    },
-  ): Promise<TokenResponse>;
-
-  getIdToken(userId: string, raw: boolean): Promise<string>;
-
-  getCrypto(): Crypto;
-
-  // TODO: Properly define the return type for revokeAccessToken.
-  revokeAccessToken(userId?: string): Promise<any>;
-
-  refreshAccessToken(userId?: string): Promise<TokenResponse>;
-
-  getAccessToken(userId?: string): Promise<string>;
-
-  exchangeToken(requestConfig: CustomGrantConfig, userId?: string): Promise<TokenResponse>;
-  
-  getPKCECode(state: string, userId?: string): Promise<string>;
-  
-  setPKCECode(code: string, state: string, userId?: string): Promise<void>;
-  
-  isSignOutSuccessful(afterSignOutUrl: string): boolean;
-  
-  reInitialize(config: T): Promise<void>;
-  
-  clearSession(userId?: string): Promise<void>;
+  initialize(config: T): Promise<boolean>;
 
   /**
    * Checks if the client is currently loading.
@@ -131,7 +61,7 @@ export interface AsgardeoClient<T> {
    *
    * @returns Boolean indicating sign-in status.
    */
-  isSignedIn(userId?: string): Promise<boolean>;
+  isSignedIn(): Promise<boolean>;
 
   /**
    * Initiates the sign-in process for the user.
diff --git a/packages/javascript/src/models/user.ts b/packages/javascript/src/models/user.ts
index bfa6f502d..ee1f0222c 100644
--- a/packages/javascript/src/models/user.ts
+++ b/packages/javascript/src/models/user.ts
@@ -115,5 +115,3 @@ export interface User {
 }
 
 export default User;
-
-export type UserInfoResolvingStrategy = 'SCIM' | 'ID_TOKEN' | 'USER_INFO';

From e79fc3a9f886a9f2183815d62cb2873998ecae84 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Mon, 9 Jun 2025 18:02:31 +0530
Subject: [PATCH 027/131] chore(express): update Asgardeo client to use
 LegacyAsgardeoNodeClient and refactor related configurations

---
 packages/express/src/AsgardeoExpressClient.ts |  4 +--
 packages/express/src/__legacy__/client.ts     | 19 +++++++------
 .../src/__legacy__/models/client-config.ts    | 28 +++++++++----------
 3 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/packages/express/src/AsgardeoExpressClient.ts b/packages/express/src/AsgardeoExpressClient.ts
index 93fb6a601..61b0c9c71 100644
--- a/packages/express/src/AsgardeoExpressClient.ts
+++ b/packages/express/src/AsgardeoExpressClient.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {AsgardeoNodeClient, SignOutOptions} from '@asgardeo/node';
+import {LegacyAsgardeoNodeClient, SignOutOptions} from '@asgardeo/node';
 import {AsgardeoExpressConfig} from './models/config';
 
 /**
@@ -25,6 +25,6 @@ import {AsgardeoExpressConfig} from './models/config';
  *
  * @typeParam T - Configuration type that extends AsgardeoExpressConfig.
  */
-abstract class AsgardeoExpressClient<T = AsgardeoExpressConfig> extends AsgardeoNodeClient<T> {}
+abstract class AsgardeoExpressClient<T = AsgardeoExpressConfig> extends LegacyAsgardeoNodeClient<T> {}
 
 export default AsgardeoExpressClient;
diff --git a/packages/express/src/__legacy__/client.ts b/packages/express/src/__legacy__/client.ts
index 71dbf4b25..51db78607 100644
--- a/packages/express/src/__legacy__/client.ts
+++ b/packages/express/src/__legacy__/client.ts
@@ -17,14 +17,14 @@
  */
 
 import {
-  AsgardeoNodeClient,
+  LegacyAsgardeoNodeClient,
   AuthClientConfig,
   AuthURLCallback,
   TokenResponse,
   Storage,
   BasicUserInfo,
   OIDCEndpoints,
-  DecodedIDTokenPayload,
+  IdTokenPayload,
   CustomGrantConfig,
   FetchResponse,
   AsgardeoAuthException,
@@ -38,7 +38,7 @@ import {asgardeoExpressAuth, protectRoute} from './middleware';
 import {ExpressUtils} from './utils/express-utils';
 
 export class AsgardeoExpressClient {
-  private _authClient: AsgardeoNodeClient<AuthClientConfig>;
+  private _authClient: LegacyAsgardeoNodeClient<AuthClientConfig>;
   private _storage?: Storage;
   private static _clientConfig: ExpressClientConfig;
 
@@ -48,11 +48,11 @@ export class AsgardeoExpressClient {
     //Set the client config
     AsgardeoExpressClient._clientConfig = {...config};
 
-    //Add the signInRedirectURL and signOutRedirectURL
+    //Add the afterSignInUrl and signOutRedirectURL
     //Add custom paths if the user has already declared any or else use the defaults
     const nodeClientConfig: AuthClientConfig = {
       ...config,
-      signInRedirectURL: config.appURL + (config.loginPath || DEFAULT_LOGIN_PATH),
+      afterSignInUrl: config.appURL + (config.loginPath || DEFAULT_LOGIN_PATH),
       signOutRedirectURL: config.appURL + (config.logoutPath || DEFAULT_LOGOUT_PATH),
     };
 
@@ -63,7 +63,8 @@ export class AsgardeoExpressClient {
     }
 
     //Initialize the Auth Client
-    this._authClient = new AsgardeoNodeClient(nodeClientConfig, this._storage);
+    this._authClient = new LegacyAsgardeoNodeClient();
+    this._authClient.initialize(nodeClientConfig, this._storage);
   }
 
   public static getInstance(config: ExpressClientConfig, storage?: Storage): AsgardeoExpressClient;
@@ -173,7 +174,7 @@ export class AsgardeoExpressClient {
     return this._authClient.getOIDCServiceEndpoints();
   }
 
-  public async getDecodedIDToken(userId?: string): Promise<DecodedIDTokenPayload> {
+  public async getDecodedIDToken(userId?: string): Promise<IdTokenPayload> {
     return this._authClient.getDecodedIDToken(userId);
   }
 
@@ -194,11 +195,11 @@ export class AsgardeoExpressClient {
   }
 
   public static didSignOutFail(signOutRedirectURL: string): boolean {
-    return AsgardeoNodeClient.didSignOutFail(signOutRedirectURL);
+    return LegacyAsgardeoNodeClient.didSignOutFail(signOutRedirectURL);
   }
 
   public static isSignOutSuccessful(signOutRedirectURL: string): boolean {
-    return AsgardeoNodeClient.isSignOutSuccessful(signOutRedirectURL);
+    return LegacyAsgardeoNodeClient.isSignOutSuccessful(signOutRedirectURL);
   }
 
   public static protectRoute(
diff --git a/packages/express/src/__legacy__/models/client-config.ts b/packages/express/src/__legacy__/models/client-config.ts
index 30b7a0161..9e1feee94 100644
--- a/packages/express/src/__legacy__/models/client-config.ts
+++ b/packages/express/src/__legacy__/models/client-config.ts
@@ -16,21 +16,21 @@
  * under the License.
  */
 
-import { AuthClientConfig } from '@asgardeo/node';
+import {AuthClientConfig} from '@asgardeo/node';
 
 export interface StrictExpressClientConfig {
-    appURL: string,
-    cookieConfig?: {
-        maxAge?: number,
-        httpOnly?: boolean,
-        sameSite?: string;
-        secure?: boolean;
-    },
-    globalAuth?: boolean,
-    loginPath?: string,
-    logoutPath?: string;
-    signInConfig?: Record<string, string | boolean>;
+  appURL: string;
+  cookieConfig?: {
+    maxAge?: number;
+    httpOnly?: boolean;
+    sameSite?: string;
+    secure?: boolean;
+  };
+  globalAuth?: boolean;
+  loginPath?: string;
+  logoutPath?: string;
+  signInConfig?: Record<string, string | boolean>;
 }
 
-export type ExpressClientConfig = Exclude<AuthClientConfig, "signInRedirectURL" | "signOutRedirectURL"> &
-    StrictExpressClientConfig;
+export type ExpressClientConfig = Exclude<AuthClientConfig, 'afterSignInUrl' | 'signOutRedirectURL'> &
+  StrictExpressClientConfig;

From cf2b1e2b1191f1c55ef963135d612d07269c3e4b Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Mon, 9 Jun 2025 18:07:13 +0530
Subject: [PATCH 028/131] chore: rename `signOutRedirectURL` to
 `afterSignOutUrl` for consistency across codebase

---
 packages/browser/src/__legacy__/models/client.ts |  4 ++--
 .../browser/src/__legacy__/models/web-worker.ts  |  4 ++--
 packages/express/src/__legacy__/client.ts        | 12 ++++++------
 .../src/__legacy__/models/client-config.ts       |  2 +-
 packages/javascript/src/__legacy__/client.ts     | 14 +++++++-------
 .../src/__legacy__/models/client-config.ts       |  2 +-
 packages/node/src/__legacy__/client.ts           | 16 ++++++++--------
 .../node/src/__legacy__/core/authentication.ts   |  8 ++++----
 packages/nuxt/src/module.ts                      |  8 ++++----
 packages/nuxt/src/runtime/types.ts               |  2 +-
 packages/vue/README.md                           |  2 +-
 packages/vue/src/tests/AsgardeoPlugin.test.ts    |  2 +-
 packages/vue/src/tests/auth-api.test.ts          |  2 +-
 packages/vue/src/tests/mocks/mocks.ts            |  2 +-
 recipes/nuxt-vite/server/api/auth/[...].ts       |  2 +-
 recipes/vue-vite/README.md                       |  4 ++--
 recipes/vue-vite/src/main.ts                     |  2 +-
 17 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/packages/browser/src/__legacy__/models/client.ts b/packages/browser/src/__legacy__/models/client.ts
index 2d3c45432..b61d688b7 100755
--- a/packages/browser/src/__legacy__/models/client.ts
+++ b/packages/browser/src/__legacy__/models/client.ts
@@ -55,7 +55,7 @@ export interface MainThreadClientInterface {
       params: Record<string, unknown>;
     },
   ): Promise<BasicUserInfo>;
-  signOut(signOutRedirectURL?: string): Promise<boolean>;
+  signOut(afterSignOutUrl?: string): Promise<boolean>;
   requestCustomGrant(config: CustomGrantConfig): Promise<BasicUserInfo | FetchResponse>;
   refreshAccessToken(): Promise<BasicUserInfo>;
   revokeAccessToken(): Promise<boolean>;
@@ -92,7 +92,7 @@ export interface WebWorkerClientInterface {
       params: Record<string, unknown>;
     },
   ): Promise<BasicUserInfo>;
-  signOut(signOutRedirectURL?: string): Promise<boolean>;
+  signOut(afterSignOutUrl?: string): Promise<boolean>;
   revokeAccessToken(): Promise<boolean>;
   getOIDCServiceEndpoints(): Promise<OIDCEndpoints>;
   getBasicUserInfo(): Promise<BasicUserInfo>;
diff --git a/packages/browser/src/__legacy__/models/web-worker.ts b/packages/browser/src/__legacy__/models/web-worker.ts
index 4b4b92bba..70e6eb5a9 100755
--- a/packages/browser/src/__legacy__/models/web-worker.ts
+++ b/packages/browser/src/__legacy__/models/web-worker.ts
@@ -52,8 +52,8 @@ export interface WebWorkerCoreInterface {
     pkce?: string,
     state?: string,
   ): Promise<BasicUserInfo>;
-  signOut(signOutRedirectURL?: string): Promise<string>;
-  getSignOutURL(signOutRedirectURL?: string): Promise<string>;
+  signOut(afterSignOutUrl?: string): Promise<string>;
+  getSignOutURL(afterSignOutUrl?: string): Promise<string>;
   requestCustomGrant(config: CustomGrantConfig): Promise<BasicUserInfo | FetchResponse>;
   refreshAccessToken(): Promise<BasicUserInfo>;
   revokeAccessToken(): Promise<boolean>;
diff --git a/packages/express/src/__legacy__/client.ts b/packages/express/src/__legacy__/client.ts
index 51db78607..f2ce5fc67 100644
--- a/packages/express/src/__legacy__/client.ts
+++ b/packages/express/src/__legacy__/client.ts
@@ -48,12 +48,12 @@ export class AsgardeoExpressClient {
     //Set the client config
     AsgardeoExpressClient._clientConfig = {...config};
 
-    //Add the afterSignInUrl and signOutRedirectURL
+    //Add the afterSignInUrl and afterSignOutUrl
     //Add custom paths if the user has already declared any or else use the defaults
     const nodeClientConfig: AuthClientConfig = {
       ...config,
       afterSignInUrl: config.appURL + (config.loginPath || DEFAULT_LOGIN_PATH),
-      signOutRedirectURL: config.appURL + (config.logoutPath || DEFAULT_LOGOUT_PATH),
+      afterSignOutUrl: config.appURL + (config.logoutPath || DEFAULT_LOGOUT_PATH),
     };
 
     //Initialize the user provided storage if there is any
@@ -194,12 +194,12 @@ export class AsgardeoExpressClient {
     return this._authClient.revokeAccessToken(userId);
   }
 
-  public static didSignOutFail(signOutRedirectURL: string): boolean {
-    return LegacyAsgardeoNodeClient.didSignOutFail(signOutRedirectURL);
+  public static didSignOutFail(afterSignOutUrl: string): boolean {
+    return LegacyAsgardeoNodeClient.didSignOutFail(afterSignOutUrl);
   }
 
-  public static isSignOutSuccessful(signOutRedirectURL: string): boolean {
-    return LegacyAsgardeoNodeClient.isSignOutSuccessful(signOutRedirectURL);
+  public static isSignOutSuccessful(afterSignOutUrl: string): boolean {
+    return LegacyAsgardeoNodeClient.isSignOutSuccessful(afterSignOutUrl);
   }
 
   public static protectRoute(
diff --git a/packages/express/src/__legacy__/models/client-config.ts b/packages/express/src/__legacy__/models/client-config.ts
index 9e1feee94..053512c06 100644
--- a/packages/express/src/__legacy__/models/client-config.ts
+++ b/packages/express/src/__legacy__/models/client-config.ts
@@ -32,5 +32,5 @@ export interface StrictExpressClientConfig {
   signInConfig?: Record<string, string | boolean>;
 }
 
-export type ExpressClientConfig = Exclude<AuthClientConfig, 'afterSignInUrl' | 'signOutRedirectURL'> &
+export type ExpressClientConfig = Exclude<AuthClientConfig, 'afterSignInUrl' | 'afterSignOutUrl'> &
   StrictExpressClientConfig;
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 41dcd7b91..5ff823253 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -510,7 +510,7 @@ export class AsgardeoAuthClient<T> {
       );
     }
 
-    const callbackURL: string = configData?.signOutRedirectURL ?? configData?.afterSignInUrl;
+    const callbackURL: string = configData?.afterSignOutUrl ?? configData?.afterSignInUrl;
 
     if (!callbackURL || callbackURL.trim().length === 0) {
       throw new AsgardeoAuthException(
@@ -1091,7 +1091,7 @@ export class AsgardeoAuthClient<T> {
    *
    * @param signOutRedirectUrl - The URL to which the user has been redirected to after signing-out.
    *
-   * **The server appends path parameters to the `signOutRedirectURL` and these path parameters
+   * **The server appends path parameters to the `afterSignOutUrl` and these path parameters
    *  are required for this method to function.**
    *
    * @returns - `true` if successful, `false` otherwise.
@@ -1100,8 +1100,8 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public static isSignOutSuccessful(signOutRedirectURL: string): boolean {
-    const url: URL = new URL(signOutRedirectURL);
+  public static isSignOutSuccessful(afterSignOutUrl: string): boolean {
+    const url: URL = new URL(afterSignOutUrl);
     const stateParam: string | null = url.searchParams.get(OIDCRequestConstants.Params.STATE);
     const error: boolean = Boolean(url.searchParams.get('error'));
 
@@ -1113,7 +1113,7 @@ export class AsgardeoAuthClient<T> {
    *
    * @param signOutRedirectUrl - The URL to which the user has been redirected to after signing-out.
    *
-   * **The server appends path parameters to the `signOutRedirectURL` and these path parameters
+   * **The server appends path parameters to the `afterSignOutUrl` and these path parameters
    *  are required for this method to function.**
    *
    * @returns - `true` if successful, `false` otherwise.
@@ -1122,8 +1122,8 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public static didSignOutFail(signOutRedirectURL: string): boolean {
-    const url: URL = new URL(signOutRedirectURL);
+  public static didSignOutFail(afterSignOutUrl: string): boolean {
+    const url: URL = new URL(afterSignOutUrl);
     const stateParam: string | null = url.searchParams.get(OIDCRequestConstants.Params.STATE);
     const error: boolean = Boolean(url.searchParams.get('error'));
 
diff --git a/packages/javascript/src/__legacy__/models/client-config.ts b/packages/javascript/src/__legacy__/models/client-config.ts
index 7df88200d..a6538c398 100644
--- a/packages/javascript/src/__legacy__/models/client-config.ts
+++ b/packages/javascript/src/__legacy__/models/client-config.ts
@@ -21,7 +21,7 @@ import {OIDCEndpoints} from '../../models/oidc-endpoints';
 
 export interface DefaultAuthClientConfig {
   afterSignInUrl: string;
-  signOutRedirectURL?: string;
+  afterSignOutUrl?: string;
   clientHost?: string;
   clientId: string;
   clientSecret?: string;
diff --git a/packages/node/src/__legacy__/client.ts b/packages/node/src/__legacy__/client.ts
index 189c96d2d..cd4ef15ce 100644
--- a/packages/node/src/__legacy__/client.ts
+++ b/packages/node/src/__legacy__/client.ts
@@ -50,7 +50,7 @@ export class AsgardeoNodeClient<T> {
     * const _store: Storage = new DataStore();
     * const _config = {
            afterSignInUrl: "http://localhost:3000/sign-in",
-           signOutRedirectURL: "http://localhost:3000/dashboard",
+           afterSignOutUrl: "http://localhost:3000/dashboard",
            clientId: "client ID",
            serverOrigin: "https://api.asgardeo.io/t/<org_name>"
        };
@@ -313,7 +313,7 @@ export class AsgardeoNodeClient<T> {
    * @example
    * ```
    * const updateConfig = await auth.updateConfig({
-   *       signOutRedirectURL: "http://localhost:3000/sign-out"
+   *       afterSignOutUrl: "http://localhost:3000/sign-out"
    *   });
    * ```
    *
@@ -371,7 +371,7 @@ export class AsgardeoNodeClient<T> {
 
   /**
    * This method returns if the user has been successfully signed out or not.
-   * @param {string} signOutRedirectURL - The URL to which the user is redirected to
+   * @param {string} afterSignOutUrl - The URL to which the user is redirected to
    * after signing out from the server.
    *
    * @return {boolean} - A boolean value indicating if the user has been signed out or not.
@@ -386,13 +386,13 @@ export class AsgardeoNodeClient<T> {
    * @memberof AsgardeoNodeClient
    *
    */
-  public static isSignOutSuccessful(signOutRedirectURL: string): boolean {
-    return AsgardeoNodeClient.isSignOutSuccessful(signOutRedirectURL);
+  public static isSignOutSuccessful(afterSignOutUrl: string): boolean {
+    return AsgardeoNodeClient.isSignOutSuccessful(afterSignOutUrl);
   }
 
   /**
    * This method returns if sign-out failed or not
-   * @param {string} signOutRedirectURL - The URL to which the user is redirected to
+   * @param {string} afterSignOutUrl - The URL to which the user is redirected to
    * after signing out from the server.
    *
    * @return {boolean} - A boolean value indicating if sign-out failed or not.
@@ -407,8 +407,8 @@ export class AsgardeoNodeClient<T> {
    * @memberof AsgardeoNodeClient
    *
    */
-  public static didSignOutFail(signOutRedirectURL: string): boolean {
-    return AsgardeoNodeClient.didSignOutFail(signOutRedirectURL);
+  public static didSignOutFail(afterSignOutUrl: string): boolean {
+    return AsgardeoNodeClient.didSignOutFail(afterSignOutUrl);
   }
 
   public async getStorageManager(): Promise<StorageManager<T>> {
diff --git a/packages/node/src/__legacy__/core/authentication.ts b/packages/node/src/__legacy__/core/authentication.ts
index 71dfa2377..d59b8ade4 100644
--- a/packages/node/src/__legacy__/core/authentication.ts
+++ b/packages/node/src/__legacy__/core/authentication.ts
@@ -240,12 +240,12 @@ export class AsgardeoNodeCore<T> {
     return this._auth.revokeAccessToken(userId);
   }
 
-  public static didSignOutFail(signOutRedirectURL: string): boolean {
-    return AsgardeoNodeCore.didSignOutFail(signOutRedirectURL);
+  public static didSignOutFail(afterSignOutUrl: string): boolean {
+    return AsgardeoNodeCore.didSignOutFail(afterSignOutUrl);
   }
 
-  public static isSignOutSuccessful(signOutRedirectURL: string): boolean {
-    return AsgardeoNodeCore.isSignOutSuccessful(signOutRedirectURL);
+  public static isSignOutSuccessful(afterSignOutUrl: string): boolean {
+    return AsgardeoNodeCore.isSignOutSuccessful(afterSignOutUrl);
   }
 
   public getStorageManager(): StorageManager<T> {
diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts
index 5048b85f8..0c6b71215 100644
--- a/packages/nuxt/src/module.ts
+++ b/packages/nuxt/src/module.ts
@@ -33,7 +33,7 @@ export default defineNuxtModule<ModuleOptions>({
     clientSecret: process.env.ASGARDEO_CLIENT_SECRET || '',
     scope: ['openid', 'profile'],
     afterSignInUrl: process.env.ASGARDEO_SIGN_IN_REDIRECT_URL || '',
-    signOutRedirectURL: process.env.ASGARDEO_SIGN_OUT_REDIRECT_URL || '',
+    afterSignOutUrl: process.env.ASGARDEO_SIGN_OUT_REDIRECT_URL || '',
   },
   meta: {
     configKey: 'asgardeoAuth',
@@ -51,7 +51,7 @@ export default defineNuxtModule<ModuleOptions>({
         scope: ['openid', 'profile'],
         serverOrigin: process.env.ASGARDEO_BASE_URL,
         afterSignInUrl: process.env.ASGARDEO_SIGN_IN_REDIRECT_URL || '',
-        signOutRedirectURL: process.env.ASGARDEO_SIGN_OUT_REDIRECT_URL || '',
+        afterSignOutUrl: process.env.ASGARDEO_SIGN_OUT_REDIRECT_URL || '',
       },
     ) as ModuleOptions;
 
@@ -67,7 +67,7 @@ export default defineNuxtModule<ModuleOptions>({
       scope: options.scope,
       serverOrigin: options.baseUrl,
       afterSignInUrl: options.afterSignInUrl,
-      signOutRedirectURL: options.signOutRedirectURL,
+      afterSignOutUrl: options.afterSignOutUrl,
     });
 
     const {resolve} = createResolver(import.meta.url);
@@ -102,7 +102,7 @@ export default defineNuxtModule<ModuleOptions>({
 
 declare module '@nuxt/schema' {
   interface PublicRuntimeConfig {
-    asgardeoAuth: Pick<ModuleOptions, 'clientId' | 'baseUrl' | 'afterSignInUrl' | 'signOutRedirectURL' | 'scope'>;
+    asgardeoAuth: Pick<ModuleOptions, 'clientId' | 'baseUrl' | 'afterSignInUrl' | 'afterSignOutUrl' | 'scope'>;
   }
 
   interface RuntimeConfig {
diff --git a/packages/nuxt/src/runtime/types.ts b/packages/nuxt/src/runtime/types.ts
index 0ed7b1997..32d299516 100644
--- a/packages/nuxt/src/runtime/types.ts
+++ b/packages/nuxt/src/runtime/types.ts
@@ -54,7 +54,7 @@ export interface ModuleOptions {
    * The absolute URI to redirect to after sign-out completes.
    * @default process.env.ASGARDEO_SIGN_OUT_REDIRECT_URL
    */
-  signOutRedirectURL: string;
+  afterSignOutUrl: string;
 }
 
 export interface AuthInterface {
diff --git a/packages/vue/README.md b/packages/vue/README.md
index 95b7ca136..832daac1d 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -33,7 +33,7 @@ const app = createApp(App)
 
 app.use(AsgardeoAuth, {
   afterSignInUrl: "http://localhost:3000",
-  signOutRedirectURL: "http://localhost:3000",
+  afterSignOutUrl: "http://localhost:3000",
   clientId: "<your-client-id>",
   baseUrl: "https://api.asgardeo.io/t/<org-name>",
   scope: ["openid", "profile"]
diff --git a/packages/vue/src/tests/AsgardeoPlugin.test.ts b/packages/vue/src/tests/AsgardeoPlugin.test.ts
index 56da8b2da..7b75465a1 100644
--- a/packages/vue/src/tests/AsgardeoPlugin.test.ts
+++ b/packages/vue/src/tests/AsgardeoPlugin.test.ts
@@ -74,7 +74,7 @@ describe('asgardeoPlugin', () => {
         disableAutoSignIn: true,
         disableTrySignInSilently: true,
         afterSignInUrl: 'http://localhost:5173/',
-        signOutRedirectURL: 'http://localhost:5173/',
+        afterSignOutUrl: 'http://localhost:5173/',
       }),
     );
   });
diff --git a/packages/vue/src/tests/auth-api.test.ts b/packages/vue/src/tests/auth-api.test.ts
index 5bdf2f04f..6dd83d628 100644
--- a/packages/vue/src/tests/auth-api.test.ts
+++ b/packages/vue/src/tests/auth-api.test.ts
@@ -72,7 +72,7 @@ describe('AuthAPI', () => {
         baseUrl: 'https://api.asgardeo.io/t/mock-tenant',
         clientId: 'mock-client-id',
         afterSignInUrl: 'http://localhost:5173/',
-        signOutRedirectURL: 'http://localhost:5173/',
+        afterSignOutUrl: 'http://localhost:5173/',
       };
 
       await authApi.init(config);
diff --git a/packages/vue/src/tests/mocks/mocks.ts b/packages/vue/src/tests/mocks/mocks.ts
index 152731ca0..5ccf737ad 100644
--- a/packages/vue/src/tests/mocks/mocks.ts
+++ b/packages/vue/src/tests/mocks/mocks.ts
@@ -202,5 +202,5 @@ export const mockConfig: AuthVueConfig = {
   baseUrl: 'https://api.asgardeo.io/t/mock-tenant',
   clientId: 'mock-client-id',
   afterSignInUrl: 'http://localhost:5173/',
-  signOutRedirectURL: 'http://localhost:5173/',
+  afterSignOutUrl: 'http://localhost:5173/',
 };
diff --git a/recipes/nuxt-vite/server/api/auth/[...].ts b/recipes/nuxt-vite/server/api/auth/[...].ts
index 89eef024a..a8ac429bb 100644
--- a/recipes/nuxt-vite/server/api/auth/[...].ts
+++ b/recipes/nuxt-vite/server/api/auth/[...].ts
@@ -3,7 +3,7 @@ const config = {
   clientId: process.env.ASGARDEO_CLIENT_ID as string,
   clientSecret: process.env.ASGARDEO_CLIENT_SECRET as string,
   afterSignInUrl: process.env.ASGARDEO_SIGN_IN_REDIRECT_URL as string,
-  signOutRedirectURL: process.env.ASGARDEO_SIGN_OUT_REDIRECT_URL as string,
+  afterSignOutUrl: process.env.ASGARDEO_SIGN_OUT_REDIRECT_URL as string,
   scope: process.env.ASGARDEO_SCOPE?.split(',').map(scope => scope.trim()) as string[],
 };
 
diff --git a/recipes/vue-vite/README.md b/recipes/vue-vite/README.md
index f2fff6b17..390fa1367 100644
--- a/recipes/vue-vite/README.md
+++ b/recipes/vue-vite/README.md
@@ -33,7 +33,7 @@ const app = createApp(App);
 app.use(router);
 app.use(asgardeoPlugin, {
   afterSignInUrl: "http://localhost:5173/",
-  signOutRedirectURL: "http://localhost:5173/",
+  afterSignOutUrl: "http://localhost:5173/",
   clientId: "<ADD_CLIENT_ID_HERE>",
   baseUrl: "https://api.asgardeo.io/t/<org_name>",
 });
@@ -63,7 +63,7 @@ By default, the Vite development server runs on port `5173`. In case you wish to
    })
    ```
 
-2. Update the `afterSignInUrl` & `signOutRedirectURL` in `main.ts` to match your new port.
+2. Update the `afterSignInUrl` & `afterSignOutUrl` in `main.ts` to match your new port.
 
 3. Go to the Asgardeo Console and navigate to the protocol tab of your application:
    - Update the Authorized Redirect URL.
diff --git a/recipes/vue-vite/src/main.ts b/recipes/vue-vite/src/main.ts
index 34e2c25fe..3e5e82f29 100644
--- a/recipes/vue-vite/src/main.ts
+++ b/recipes/vue-vite/src/main.ts
@@ -30,7 +30,7 @@ const config: AuthVueConfig = {
   clientId: import.meta.env.VITE_ASGARDEO_CLIENT_ID,
   scope: ['openid', 'profile', 'email'],
   afterSignInUrl: import.meta.env.VITE_ASGARDEO_SIGN_IN_REDIRECT_URL,
-  signOutRedirectURL: import.meta.env.VITE_ASGARDEO_SIGN_OUT_REDIRECT_URL,
+  afterSignOutUrl: import.meta.env.VITE_ASGARDEO_SIGN_OUT_REDIRECT_URL,
 }
 
 app.use(router)

From 80ae2e73322fbaf5a008980aa2919efe4f591d9f Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Mon, 9 Jun 2025 18:10:25 +0530
Subject: [PATCH 029/131] chore: standardize variable name from `userID` to
 `userId` across multiple files for consistency

---
 packages/express/src/__legacy__/client.ts     |  10 +-
 packages/javascript/src/StorageManager.ts     |  60 ++++-----
 packages/javascript/src/__legacy__/client.ts  | 114 +++++++++---------
 .../helpers/authentication-helper.ts          |  16 +--
 packages/node/src/__legacy__/client.ts        |   2 +-
 .../src/__legacy__/core/authentication.ts     |  12 +-
 6 files changed, 107 insertions(+), 107 deletions(-)

diff --git a/packages/express/src/__legacy__/client.ts b/packages/express/src/__legacy__/client.ts
index f2ce5fc67..cd95aea86 100644
--- a/packages/express/src/__legacy__/client.ts
+++ b/packages/express/src/__legacy__/client.ts
@@ -106,9 +106,9 @@ export class AsgardeoExpressClient {
     }
 
     //Check if the user has a valid user ID and if not create one
-    let userID = req.cookies.ASGARDEO_SESSION_ID;
-    if (!userID) {
-      userID = uuidv4();
+    let userId = req.cookies.ASGARDEO_SESSION_ID;
+    if (!userId) {
+      userId = uuidv4();
     }
 
     //Handle signIn() callback
@@ -116,7 +116,7 @@ export class AsgardeoExpressClient {
       if (url) {
         //DEBUG
         Logger.debug('Redirecting to: ' + url);
-        res.cookie('ASGARDEO_SESSION_ID', userID, {
+        res.cookie('ASGARDEO_SESSION_ID', userId, {
           maxAge: AsgardeoExpressClient._clientConfig.cookieConfig?.maxAge
             ? AsgardeoExpressClient._clientConfig.cookieConfig.maxAge
             : CookieConfig.defaultMaxAge,
@@ -132,7 +132,7 @@ export class AsgardeoExpressClient {
 
     const authResponse: TokenResponse = await this._authClient.signIn(
       authRedirectCallback,
-      userID,
+      userId,
       req.query.code,
       req.query.session_state,
       req.query.state,
diff --git a/packages/javascript/src/StorageManager.ts b/packages/javascript/src/StorageManager.ts
index fe9ab05db..a16b22739 100644
--- a/packages/javascript/src/StorageManager.ts
+++ b/packages/javascript/src/StorageManager.ts
@@ -75,8 +75,8 @@ class StorageManager<T> {
     await this._store.setData(key, dataToBeSavedJSON);
   }
 
-  protected _resolveKey(store: Stores | string, userID?: string): string {
-    return userID ? `${store}-${this._id}-${userID}` : `${store}-${this._id}`;
+  protected _resolveKey(store: Stores | string, userId?: string): string {
+    return userId ? `${store}-${this._id}-${userId}` : `${store}-${this._id}`;
   }
 
   protected isLocalStorageAvailable(): boolean {
@@ -100,16 +100,16 @@ class StorageManager<T> {
     this.setDataInBulk(this._resolveKey(Stores.OIDCProviderMetaData), oidcProviderMetaData);
   }
 
-  public async setTemporaryData(temporaryData: Partial<TemporaryStore>, userID?: string): Promise<void> {
-    this.setDataInBulk(this._resolveKey(Stores.TemporaryData, userID), temporaryData);
+  public async setTemporaryData(temporaryData: Partial<TemporaryStore>, userId?: string): Promise<void> {
+    this.setDataInBulk(this._resolveKey(Stores.TemporaryData, userId), temporaryData);
   }
 
-  public async setSessionData(sessionData: Partial<SessionData>, userID?: string): Promise<void> {
-    this.setDataInBulk(this._resolveKey(Stores.SessionData, userID), sessionData);
+  public async setSessionData(sessionData: Partial<SessionData>, userId?: string): Promise<void> {
+    this.setDataInBulk(this._resolveKey(Stores.SessionData, userId), sessionData);
   }
 
-  public async setCustomData<K>(key: string, customData: Partial<K>, userID?: string): Promise<void> {
-    this.setDataInBulk(this._resolveKey(key, userID), customData);
+  public async setCustomData<K>(key: string, customData: Partial<K>, userId?: string): Promise<void> {
+    this.setDataInBulk(this._resolveKey(key, userId), customData);
   }
 
   public async getConfigData(): Promise<AuthClientConfig<T>> {
@@ -120,16 +120,16 @@ class StorageManager<T> {
     return JSON.parse((await this._store.getData(this._resolveKey(Stores.OIDCProviderMetaData))) ?? null);
   }
 
-  public async getTemporaryData(userID?: string): Promise<TemporaryStore> {
-    return JSON.parse((await this._store.getData(this._resolveKey(Stores.TemporaryData, userID))) ?? null);
+  public async getTemporaryData(userId?: string): Promise<TemporaryStore> {
+    return JSON.parse((await this._store.getData(this._resolveKey(Stores.TemporaryData, userId))) ?? null);
   }
 
-  public async getSessionData(userID?: string): Promise<SessionData> {
-    return JSON.parse((await this._store.getData(this._resolveKey(Stores.SessionData, userID))) ?? null);
+  public async getSessionData(userId?: string): Promise<SessionData> {
+    return JSON.parse((await this._store.getData(this._resolveKey(Stores.SessionData, userId))) ?? null);
   }
 
-  public async getCustomData<K>(key: string, userID?: string): Promise<K> {
-    return JSON.parse((await this._store.getData(this._resolveKey(key, userID))) ?? null);
+  public async getCustomData<K>(key: string, userId?: string): Promise<K> {
+    return JSON.parse((await this._store.getData(this._resolveKey(key, userId))) ?? null);
   }
 
   public setSessionStatus(status: string): void {
@@ -153,12 +153,12 @@ class StorageManager<T> {
     await this._store.removeData(this._resolveKey(Stores.OIDCProviderMetaData));
   }
 
-  public async removeTemporaryData(userID?: string): Promise<void> {
-    await this._store.removeData(this._resolveKey(Stores.TemporaryData, userID));
+  public async removeTemporaryData(userId?: string): Promise<void> {
+    await this._store.removeData(this._resolveKey(Stores.TemporaryData, userId));
   }
 
-  public async removeSessionData(userID?: string): Promise<void> {
-    await this._store.removeData(this._resolveKey(Stores.SessionData, userID));
+  public async removeSessionData(userId?: string): Promise<void> {
+    await this._store.removeData(this._resolveKey(Stores.SessionData, userId));
   }
 
   public async getConfigDataParameter(key: keyof AuthClientConfig<T>): Promise<TemporaryStoreValue> {
@@ -173,14 +173,14 @@ class StorageManager<T> {
     return data && JSON.parse(data)[key];
   }
 
-  public async getTemporaryDataParameter(key: keyof TemporaryStore, userID?: string): Promise<TemporaryStoreValue> {
-    const data: string = await this._store.getData(this._resolveKey(Stores.TemporaryData, userID));
+  public async getTemporaryDataParameter(key: keyof TemporaryStore, userId?: string): Promise<TemporaryStoreValue> {
+    const data: string = await this._store.getData(this._resolveKey(Stores.TemporaryData, userId));
 
     return data && JSON.parse(data)[key];
   }
 
-  public async getSessionDataParameter(key: keyof SessionData, userID?: string): Promise<TemporaryStoreValue> {
-    const data: string = await this._store.getData(this._resolveKey(Stores.SessionData, userID));
+  public async getSessionDataParameter(key: keyof SessionData, userId?: string): Promise<TemporaryStoreValue> {
+    const data: string = await this._store.getData(this._resolveKey(Stores.SessionData, userId));
 
     return data && JSON.parse(data)[key];
   }
@@ -199,17 +199,17 @@ class StorageManager<T> {
   public async setTemporaryDataParameter(
     key: keyof TemporaryStore,
     value: TemporaryStoreValue,
-    userID?: string,
+    userId?: string,
   ): Promise<void> {
-    await this.setValue(this._resolveKey(Stores.TemporaryData, userID), key, value);
+    await this.setValue(this._resolveKey(Stores.TemporaryData, userId), key, value);
   }
 
   public async setSessionDataParameter(
     key: keyof SessionData,
     value: TemporaryStoreValue,
-    userID?: string,
+    userId?: string,
   ): Promise<void> {
-    await this.setValue(this._resolveKey(Stores.SessionData, userID), key, value);
+    await this.setValue(this._resolveKey(Stores.SessionData, userId), key, value);
   }
 
   public async removeConfigDataParameter(key: keyof AuthClientConfig<T>): Promise<void> {
@@ -220,12 +220,12 @@ class StorageManager<T> {
     await this.removeValue(this._resolveKey(Stores.OIDCProviderMetaData), key);
   }
 
-  public async removeTemporaryDataParameter(key: keyof TemporaryStore, userID?: string): Promise<void> {
-    await this.removeValue(this._resolveKey(Stores.TemporaryData, userID), key);
+  public async removeTemporaryDataParameter(key: keyof TemporaryStore, userId?: string): Promise<void> {
+    await this.removeValue(this._resolveKey(Stores.TemporaryData, userId), key);
   }
 
-  public async removeSessionDataParameter(key: keyof SessionData, userID?: string): Promise<void> {
-    await this.removeValue(this._resolveKey(Stores.SessionData, userID), key);
+  public async removeSessionDataParameter(key: keyof SessionData, userId?: string): Promise<void> {
+    await this.removeValue(this._resolveKey(Stores.SessionData, userId), key);
   }
 }
 
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 5ff823253..bac583003 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -196,7 +196,7 @@ export class AsgardeoAuthClient<T> {
    *
    * @param config - (Optional) A config object to force initialization and pass
    * custom path parameters such as the fidp parameter.
-   * @param userID - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
+   * @param userId - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
    * scenarios where each user should be uniquely identified.
    *
    * @returns - A promise that resolves with the authorization URL.
@@ -214,7 +214,7 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public async getAuthorizationURL(config?: ExtendedAuthorizeRequestUrlParams, userID?: string): Promise<string> {
+  public async getAuthorizationURL(config?: ExtendedAuthorizeRequestUrlParams, userId?: string): Promise<string> {
     const authRequestConfig: ExtendedAuthorizeRequestUrlParams = {...config};
 
     delete authRequestConfig?.forceInit;
@@ -235,7 +235,7 @@ export class AsgardeoAuthClient<T> {
 
       const authorizeRequest: URL = new URL(authorizeEndpoint);
       const configData: StrictAuthClientConfig = await this._config();
-      const tempStore: TemporaryStore = await this._storageManager.getTemporaryData(userID);
+      const tempStore: TemporaryStore = await this._storageManager.getTemporaryData(userId);
       const pkceKey: string = await generatePkceStorageKey(tempStore);
 
       let codeVerifier: string | undefined;
@@ -244,7 +244,7 @@ export class AsgardeoAuthClient<T> {
       if (configData.enablePKCE) {
         codeVerifier = this._cryptoHelper?.getCodeVerifier();
         codeChallenge = this._cryptoHelper?.getCodeChallenge(codeVerifier);
-        await this._storageManager.setTemporaryDataParameter(pkceKey, codeVerifier, userID);
+        await this._storageManager.setTemporaryDataParameter(pkceKey, codeVerifier, userId);
       }
 
       const authorizeRequestParams: Map<string, string> = getAuthorizeRequestUrlParams(
@@ -287,7 +287,7 @@ export class AsgardeoAuthClient<T> {
    *
    * @param authorizationCode - The authorization code.
    * @param sessionState - The session state.
-   * @param userID - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
+   * @param userId - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
    * scenarios where each user should be uniquely identified.
    *
    * @returns - A Promise that resolves with the token response.
@@ -310,7 +310,7 @@ export class AsgardeoAuthClient<T> {
     authorizationCode: string,
     sessionState: string,
     state: string,
-    userID?: string,
+    userId?: string,
     tokenRequestConfig?: {
       params: Record<string, unknown>;
     },
@@ -332,7 +332,7 @@ export class AsgardeoAuthClient<T> {
         (await this._storageManager.setSessionDataParameter(
           OIDCRequestConstants.Params.SESSION_STATE as keyof SessionData,
           sessionState,
-          userID,
+          userId,
         ));
 
       const body: URLSearchParams = new URLSearchParams();
@@ -359,10 +359,10 @@ export class AsgardeoAuthClient<T> {
       if (configData.enablePKCE) {
         body.set(
           'code_verifier',
-          `${await this._storageManager.getTemporaryDataParameter(extractPkceStorageKeyFromState(state), userID)}`,
+          `${await this._storageManager.getTemporaryDataParameter(extractPkceStorageKeyFromState(state), userId)}`,
         );
 
-        await this._storageManager.removeTemporaryDataParameter(extractPkceStorageKeyFromState(state), userID);
+        await this._storageManager.removeTemporaryDataParameter(extractPkceStorageKeyFromState(state), userId);
       }
 
       let tokenResponse: Response;
@@ -393,7 +393,7 @@ export class AsgardeoAuthClient<T> {
         );
       }
 
-      return await this._authenticationHelper.handleTokenResponse(tokenResponse, userID);
+      return await this._authenticationHelper.handleTokenResponse(tokenResponse, userId);
     };
 
     if (
@@ -481,7 +481,7 @@ export class AsgardeoAuthClient<T> {
   /**
    * This method returns the sign-out URL.
    *
-   * @param userID - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
+   * @param userId - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
    * scenarios where each user should be uniquely identified.
    *
    * **This doesn't clear the authentication data.**
@@ -497,7 +497,7 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public async getSignOutURL(userID?: string): Promise<string> {
+  public async getSignOutURL(userId?: string): Promise<string> {
     const logoutEndpoint: string | undefined = (await this._oidcProviderMetaData())?.end_session_endpoint;
     const configData: StrictAuthClientConfig = await this._config();
 
@@ -525,7 +525,7 @@ export class AsgardeoAuthClient<T> {
     queryParams.set('post_logout_redirect_uri', callbackURL);
 
     if (configData.sendIdTokenInLogoutRequest) {
-      const idToken: string = (await this._storageManager.getSessionData(userID))?.id_token;
+      const idToken: string = (await this._storageManager.getSessionData(userId))?.id_token;
 
       if (!idToken || idToken.trim().length === 0) {
         throw new AsgardeoAuthException(
@@ -578,7 +578,7 @@ export class AsgardeoAuthClient<T> {
   /**
    * This method decodes the payload of the ID token and returns it.
    *
-   * @param userID - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
+   * @param userId - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
    * scenarios where each user should be uniquely identified.
    *
    * @returns - A Promise that resolves with the decoded ID token payload.
@@ -592,8 +592,8 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public async getDecodedIDToken(userID?: string): Promise<IdTokenPayload> {
-    const idToken: string = (await this._storageManager.getSessionData(userID)).id_token;
+  public async getDecodedIDToken(userId?: string): Promise<IdTokenPayload> {
+    const idToken: string = (await this._storageManager.getSessionData(userId)).id_token;
     const payload: IdTokenPayload = this._cryptoHelper.decodeIDToken(idToken);
 
     return payload;
@@ -602,7 +602,7 @@ export class AsgardeoAuthClient<T> {
   /**
    * This method returns the ID token.
    *
-   * @param userID - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
+   * @param userId - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
    * scenarios where each user should be uniquely identified.
    *
    * @returns - A Promise that resolves with the ID token.
@@ -616,14 +616,14 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public async getIDToken(userID?: string): Promise<string> {
-    return (await this._storageManager.getSessionData(userID)).id_token;
+  public async getIDToken(userId?: string): Promise<string> {
+    return (await this._storageManager.getSessionData(userId)).id_token;
   }
 
   /**
    * This method returns the basic user information obtained from the ID token.
    *
-   * @param userID - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
+   * @param userId - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
    * scenarios where each user should be uniquely identified.
    *
    * @returns - A Promise that resolves with an object containing the basic user information.
@@ -637,8 +637,8 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public async getBasicUserInfo(userID?: string): Promise<BasicUserInfo> {
-    const sessionData: SessionData = await this._storageManager.getSessionData(userID);
+  public async getBasicUserInfo(userId?: string): Promise<BasicUserInfo> {
+    const sessionData: SessionData = await this._storageManager.getSessionData(userId);
     const authenticatedUser: AuthenticatedUserInfo = this._authenticationHelper.getAuthenticatedUserInfo(
       sessionData?.id_token,
     );
@@ -680,7 +680,7 @@ export class AsgardeoAuthClient<T> {
   /**
    * This method revokes the access token.
    *
-   * @param userID - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
+   * @param userId - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
    * scenarios where each user should be uniquely identified.
    *
    * **This method also clears the authentication data.**
@@ -700,7 +700,7 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public async revokeAccessToken(userID?: string): Promise<FetchResponse> {
+  public async revokeAccessToken(userId?: string): Promise<FetchResponse> {
     const revokeTokenEndpoint: string | undefined = (await this._oidcProviderMetaData()).revocation_endpoint;
     const configData: StrictAuthClientConfig = await this._config();
 
@@ -716,7 +716,7 @@ export class AsgardeoAuthClient<T> {
     const body: string[] = [];
 
     body.push(`client_id=${configData.clientId}`);
-    body.push(`token=${(await this._storageManager.getSessionData(userID)).access_token}`);
+    body.push(`token=${(await this._storageManager.getSessionData(userId)).access_token}`);
     body.push('token_type_hint=access_token');
 
     if (configData.clientSecret && configData.clientSecret.trim().length > 0) {
@@ -751,7 +751,7 @@ export class AsgardeoAuthClient<T> {
       );
     }
 
-    this._authenticationHelper.clearUserSessionData(userID);
+    this._authenticationHelper.clearUserSessionData(userId);
 
     return Promise.resolve(response);
   }
@@ -760,7 +760,7 @@ export class AsgardeoAuthClient<T> {
    * This method refreshes the access token and returns a Promise that resolves with the new access
    * token and other relevant data.
    *
-   * @param userID - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
+   * @param userId - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
    * scenarios where each user should be uniquely identified.
    *
    * @returns - A Promise that resolves with the token response.
@@ -778,10 +778,10 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public async refreshAccessToken(userID?: string): Promise<TokenResponse> {
+  public async refreshAccessToken(userId?: string): Promise<TokenResponse> {
     const tokenEndpoint: string | undefined = (await this._oidcProviderMetaData()).token_endpoint;
     const configData: StrictAuthClientConfig = await this._config();
-    const sessionData: SessionData = await this._storageManager.getSessionData(userID);
+    const sessionData: SessionData = await this._storageManager.getSessionData(userId);
 
     if (!sessionData.refresh_token) {
       throw new AsgardeoAuthException(
@@ -839,13 +839,13 @@ export class AsgardeoAuthClient<T> {
       );
     }
 
-    return this._authenticationHelper.handleTokenResponse(tokenResponse, userID);
+    return this._authenticationHelper.handleTokenResponse(tokenResponse, userId);
   }
 
   /**
    * This method returns the access token.
    *
-   * @param userID - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
+   * @param userId - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
    * scenarios where each user should be uniquely identified.
    *
    * @returns - A Promise that resolves with the access token.
@@ -859,28 +859,28 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public async getAccessToken(userID?: string): Promise<string> {
-    return (await this._storageManager.getSessionData(userID))?.access_token;
+  public async getAccessToken(userId?: string): Promise<string> {
+    return (await this._storageManager.getSessionData(userId))?.access_token;
   }
 
   /**
    * The created timestamp of the token response in milliseconds.
    *
-   * @param userID - User ID
+   * @param userId - User ID
    * @returns Created at timestamp of the token response in milliseconds.
    */
-  public async getCreatedAt(userID?: string): Promise<number> {
-    return (await this._storageManager.getSessionData(userID))?.created_at;
+  public async getCreatedAt(userId?: string): Promise<number> {
+    return (await this._storageManager.getSessionData(userId))?.created_at;
   }
 
   /**
    * The expires timestamp of the token response in seconds.
    *
-   * @param userID - User ID
+   * @param userId - User ID
    * @returns Expires in timestamp of the token response in seconds.
    */
-  public async getExpiresIn(userID?: string): Promise<string> {
-    return (await this._storageManager.getSessionData(userID))?.expires_in;
+  public async getExpiresIn(userId?: string): Promise<string> {
+    return (await this._storageManager.getSessionData(userId))?.expires_in;
   }
 
   /**
@@ -888,7 +888,7 @@ export class AsgardeoAuthClient<T> {
    * depending on the config passed.
    *
    * @param config - A config object containing the custom grant configurations.
-   * @param userID - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
+   * @param userId - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
    * scenarios where each user should be uniquely identified.
    *
    * @returns - A Promise that resolves with the response depending
@@ -921,7 +921,7 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public async requestCustomGrant(config: CustomGrantConfig, userID?: string): Promise<TokenResponse | FetchResponse> {
+  public async requestCustomGrant(config: CustomGrantConfig, userId?: string): Promise<TokenResponse | FetchResponse> {
     const oidcProviderMetadata: OIDCDiscoveryApiResponse = await this._oidcProviderMetaData();
     const configData: StrictAuthClientConfig = await this._config();
 
@@ -946,7 +946,7 @@ export class AsgardeoAuthClient<T> {
       Object.entries(config.data).map(async ([key, value]: [key: string, value: any]) => {
         const newValue: string = await this._authenticationHelper.replaceCustomGrantTemplateTags(
           value as string,
-          userID,
+          userId,
         );
 
         return `${key}=${newValue}`;
@@ -961,7 +961,7 @@ export class AsgardeoAuthClient<T> {
     if (config.attachToken) {
       requestHeaders = {
         ...requestHeaders,
-        Authorization: `Bearer ${(await this._storageManager.getSessionData(userID)).access_token}`,
+        Authorization: `Bearer ${(await this._storageManager.getSessionData(userId)).access_token}`,
       };
     }
 
@@ -993,7 +993,7 @@ export class AsgardeoAuthClient<T> {
     }
 
     if (config.returnsSession) {
-      return this._authenticationHelper.handleTokenResponse(response, userID);
+      return this._authenticationHelper.handleTokenResponse(response, userId);
     } else {
       return Promise.resolve((await response.json()) as TokenResponse | FetchResponse);
     }
@@ -1002,7 +1002,7 @@ export class AsgardeoAuthClient<T> {
   /**
    * This method returns if the user is authenticated or not.
    *
-   * @param userID - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
+   * @param userId - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
    * scenarios where each user should be uniquely identified.
    *
    * @returns - A Promise that resolves with `true` if the user is authenticated, `false` otherwise.
@@ -1016,14 +1016,14 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public async isAuthenticated(userID?: string): Promise<boolean> {
-    const isAccessTokenAvailable: boolean = Boolean(await this.getAccessToken(userID));
+  public async isAuthenticated(userId?: string): Promise<boolean> {
+    const isAccessTokenAvailable: boolean = Boolean(await this.getAccessToken(userId));
 
     // Check if the access token is expired.
-    const createdAt: number = await this.getCreatedAt(userID);
+    const createdAt: number = await this.getCreatedAt(userId);
 
     // Get the expires in value.
-    const expiresInString: string = await this.getExpiresIn(userID);
+    const expiresInString: string = await this.getExpiresIn(userId);
 
     // If the expires in value is not available, the token is invalid and the user is not authenticated.
     if (!expiresInString) {
@@ -1043,7 +1043,7 @@ export class AsgardeoAuthClient<T> {
   /**
    * This method returns the PKCE code generated during the generation of the authentication URL.
    *
-   * @param userID - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
+   * @param userId - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
    * scenarios where each user should be uniquely identified.
    * @param state - The state parameter that was passed in the authentication URL.
    *
@@ -1058,10 +1058,10 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public async getPKCECode(state: string, userID?: string): Promise<string> {
+  public async getPKCECode(state: string, userId?: string): Promise<string> {
     return (await this._storageManager.getTemporaryDataParameter(
       extractPkceStorageKeyFromState(state),
-      userID,
+      userId,
     )) as string;
   }
 
@@ -1070,7 +1070,7 @@ export class AsgardeoAuthClient<T> {
    *
    * @param pkce - The PKCE code.
    * @param state - The state parameter that was passed in the authentication URL.
-   * @param userID - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
+   * @param userId - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
    * scenarios where each user should be uniquely identified.
    *
    * @example
@@ -1082,8 +1082,8 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public async setPKCECode(pkce: string, state: string, userID?: string): Promise<void> {
-    return await this._storageManager.setTemporaryDataParameter(extractPkceStorageKeyFromState(state), pkce, userID);
+  public async setPKCECode(pkce: string, state: string, userId?: string): Promise<void> {
+    return await this._storageManager.setTemporaryDataParameter(extractPkceStorageKeyFromState(state), pkce, userId);
   }
 
   /**
@@ -1154,7 +1154,7 @@ export class AsgardeoAuthClient<T> {
     await this.getOIDCProviderMetaData(true);
   }
 
-  public static async clearUserSessionData(userID?: string): Promise<void> {
-    await this._authenticationHelper.clearUserSessionData(userID);
+  public static async clearUserSessionData(userId?: string): Promise<void> {
+    await this._authenticationHelper.clearUserSessionData(userId);
   }
 }
diff --git a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
index 85947823c..b1cbed611 100644
--- a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
@@ -222,10 +222,10 @@ export class AuthenticationHelper<T> {
     };
   }
 
-  public async replaceCustomGrantTemplateTags(text: string, userID?: string): Promise<string> {
+  public async replaceCustomGrantTemplateTags(text: string, userId?: string): Promise<string> {
     let scope: string = ScopeConstants.OPENID;
     const configData: StrictAuthClientConfig = await this._config();
-    const sessionData: SessionData = await this._storageManager.getSessionData(userID);
+    const sessionData: SessionData = await this._storageManager.getSessionData(userId);
 
     if (configData.scope && configData.scope.length > 0) {
       if (!configData.scope.includes(ScopeConstants.OPENID)) {
@@ -245,12 +245,12 @@ export class AuthenticationHelper<T> {
       .replace(TokenExchangeConstants.Placeholders.CLIENT_SECRET, configData.clientSecret ?? '');
   }
 
-  public async clearUserSessionData(userID?: string): Promise<void> {
-    await this._storageManager.removeTemporaryData(userID);
-    await this._storageManager.removeSessionData(userID);
+  public async clearUserSessionData(userId?: string): Promise<void> {
+    await this._storageManager.removeTemporaryData(userId);
+    await this._storageManager.removeSessionData(userId);
   }
 
-  public async handleTokenResponse(response: Response, userID?: string): Promise<TokenResponse> {
+  public async handleTokenResponse(response: Response, userId?: string): Promise<TokenResponse> {
     if (response.status !== 200 || !response.ok) {
       throw new AsgardeoAuthException(
         'JS-AUTH_HELPER-HTR-NE01',
@@ -268,7 +268,7 @@ export class AuthenticationHelper<T> {
 
     if (shouldValidateIdToken) {
       return this.validateIdToken(parsedResponse.id_token).then(async () => {
-        await this._storageManager.setSessionData(parsedResponse, userID);
+        await this._storageManager.setSessionData(parsedResponse, userId);
 
         const tokenResponse: TokenResponse = {
           accessToken: parsedResponse.access_token,
@@ -293,7 +293,7 @@ export class AuthenticationHelper<T> {
         tokenType: parsedResponse.token_type,
       };
 
-      await this._storageManager.setSessionData(parsedResponse, userID);
+      await this._storageManager.setSessionData(parsedResponse, userId);
 
       return Promise.resolve(tokenResponse);
     }
diff --git a/packages/node/src/__legacy__/client.ts b/packages/node/src/__legacy__/client.ts
index cd4ef15ce..7c7fd6f76 100644
--- a/packages/node/src/__legacy__/client.ts
+++ b/packages/node/src/__legacy__/client.ts
@@ -73,7 +73,7 @@ export class AsgardeoNodeClient<T> {
    * authorization URL to authorize the user.
    * @param {string} authorizationCode - The authorization code obtained from Asgardeo after a user signs in.
    * @param {String} sessionState - The session state obtained from Asgardeo after a user signs in.
-   * @param {string} userID - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
+   * @param {string} userId - (Optional) A unique ID of the user to be authenticated. This is useful in multi-user
    * scenarios where each user should be uniquely identified.
    * @param {string} state - The state parameter in the redirect URL.
    *
diff --git a/packages/node/src/__legacy__/core/authentication.ts b/packages/node/src/__legacy__/core/authentication.ts
index d59b8ade4..918336e69 100644
--- a/packages/node/src/__legacy__/core/authentication.ts
+++ b/packages/node/src/__legacy__/core/authentication.ts
@@ -58,13 +58,13 @@ export class AsgardeoNodeCore<T> {
 
   public async signIn(
     authURLCallback: AuthURLCallback,
-    userID: string,
+    userId: string,
     authorizationCode?: string,
     sessionState?: string,
     state?: string,
     signInConfig?: Record<string, string | boolean>,
   ): Promise<TokenResponse> {
-    if (!userID) {
+    if (!userId) {
       return Promise.reject(
         new AsgardeoAuthException(
           'NODE-AUTH_CORE-SI-NF01',
@@ -74,8 +74,8 @@ export class AsgardeoNodeCore<T> {
       );
     }
 
-    if (await this.isAuthenticated(userID)) {
-      const sessionData: SessionData = await this._storageManager.getSessionData(userID);
+    if (await this.isAuthenticated(userId)) {
+      const sessionData: SessionData = await this._storageManager.getSessionData(userId);
 
       return Promise.resolve({
         accessToken: sessionData.access_token,
@@ -100,7 +100,7 @@ export class AsgardeoNodeCore<T> {
           ),
         );
       }
-      const authURL = await this.getAuthURL(userID, signInConfig);
+      const authURL = await this.getAuthURL(userId, signInConfig);
       authURLCallback(authURL);
 
       return Promise.resolve({
@@ -115,7 +115,7 @@ export class AsgardeoNodeCore<T> {
       });
     }
 
-    return this.requestAccessToken(authorizationCode, sessionState ?? '', userID, state);
+    return this.requestAccessToken(authorizationCode, sessionState ?? '', userId, state);
   }
 
   public async getAuthURL(userId: string, signInConfig?: Record<string, string | boolean>): Promise<string> {

From aaa873ec36ac88c4671c35a15ae32100d9fa30f7 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Tue, 10 Jun 2025 14:05:16 +0530
Subject: [PATCH 030/131] chore: standardize method name from `getInstanceID`
 to `getInstanceId` for consistency

---
 .../browser/src/__legacy__/helpers/authentication-helper.ts   | 2 +-
 packages/javascript/src/__legacy__/client.ts                  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
index ae9f4a926..b07875118 100644
--- a/packages/browser/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -70,7 +70,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     this._authenticationClient = authClient;
     this._storageManager = this._authenticationClient.getStorageManager();
     this._spaHelper = spaHelper;
-    this._instanceID = this._authenticationClient.getInstanceID();
+    this._instanceID = this._authenticationClient.getInstanceId();
     this._isTokenRefreshing = false;
   }
 
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index bac583003..97378d3c0 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -182,12 +182,12 @@ export class AsgardeoAuthClient<T> {
    *
    * @example
    * ```
-   * const instanceId = auth.getInstanceID();
+   * const instanceId = auth.getInstanceId();
    * ```
    *
    * @preserve
    */
-  public getInstanceID(): number {
+  public getInstanceId(): number {
     return AsgardeoAuthClient._instanceID;
   }
 

From e975f692a045e5ee30137c13ffb91b3c985bb66c Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Tue, 10 Jun 2025 14:57:21 +0530
Subject: [PATCH 031/131] chore: rename `getAuthorizationURL` to `getSignInUrl`
 for consistency across the codebase

---
 .../src/__legacy__/clients/main-thread-client.ts       |  6 +++---
 .../src/__legacy__/clients/web-worker-client.ts        |  6 +++---
 .../__legacy__/helpers/session-management-helper.ts    |  8 ++++----
 .../src/__legacy__/models/session-management-helper.ts |  2 +-
 packages/browser/src/__legacy__/models/web-worker.ts   |  2 +-
 packages/browser/src/__legacy__/worker/worker-core.ts  |  6 +++---
 .../browser/src/__legacy__/worker/worker-receiver.ts   |  2 +-
 packages/express/README.md                             |  2 +-
 packages/javascript/src/__legacy__/client.ts           | 10 +++++-----
 packages/node/README.md                                |  2 +-
 packages/node/src/__legacy__/core/authentication.ts    |  2 +-
 11 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index 279197c5e..c1efadf94 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -159,7 +159,7 @@ export const MainThreadClient = async (
       oidcEndpoints,
       async () => (await _authenticationClient.getBasicUserInfo()).sessionState,
       async (params?: ExtendedAuthorizeRequestUrlParams): Promise<string> =>
-        _authenticationClient.getAuthorizationURL(params),
+        _authenticationClient.getSignInUrl(params),
       _sessionManagementHelper,
     );
   };
@@ -227,7 +227,7 @@ export const MainThreadClient = async (
         );
       }
 
-      return _authenticationClient.getAuthorizationURL(signInConfig).then(async (url: string) => {
+      return _authenticationClient.getSignInUrl(signInConfig).then(async (url: string) => {
         if (config.storage === BrowserStorage.BrowserMemory && config.enablePKCE) {
           const pkceKey: string = extractPkceStorageKeyFromState(resolvedState);
 
@@ -326,7 +326,7 @@ export const MainThreadClient = async (
 
   const constructSilentSignInUrl = async (additionalParams: Record<string, string | boolean> = {}): Promise<string> => {
     const config = await _dataLayer.getConfigData();
-    const urlString: string = await _authenticationClient.getAuthorizationURL({
+    const urlString: string = await _authenticationClient.getSignInUrl({
       prompt: 'none',
       state: SILENT_SIGN_IN_STATE,
       ...additionalParams,
diff --git a/packages/browser/src/__legacy__/clients/web-worker-client.ts b/packages/browser/src/__legacy__/clients/web-worker-client.ts
index 65f94ff83..70c29f050 100755
--- a/packages/browser/src/__legacy__/clients/web-worker-client.ts
+++ b/packages/browser/src/__legacy__/clients/web-worker-client.ts
@@ -387,7 +387,7 @@ export const WebWorkerClient = async (
       oidcEndpoints,
       async () => (await getBasicUserInfo()).sessionState,
       async (params?: ExtendedAuthorizeRequestUrlParams): Promise<string> =>
-        (await getAuthorizationURL(params)).authorizationURL,
+        (await getSignInUrl(params)).authorizationURL,
       _sessionManagementHelper,
     );
   };
@@ -449,7 +449,7 @@ export const WebWorkerClient = async (
    * @param {ExtendedAuthorizeRequestUrlParams} params Authorization URL params.
    * @returns {Promise<string>} Authorization URL.
    */
-  const getAuthorizationURL = async (params?: ExtendedAuthorizeRequestUrlParams): Promise<AuthorizationResponse> => {
+  const getSignInUrl = async (params?: ExtendedAuthorizeRequestUrlParams): Promise<AuthorizationResponse> => {
     const config: AuthClientConfig<WebWorkerClientConfig> = await getConfigData();
 
     const message: Message<ExtendedAuthorizeRequestUrlParams> = {
@@ -590,7 +590,7 @@ export const WebWorkerClient = async (
         return requestAccessToken(resolvedAuthorizationCode, resolvedSessionState, resolvedState, tokenRequestConfig);
       }
 
-      return getAuthorizationURL(params)
+      return getSignInUrl(params)
         .then(async (response: AuthorizationResponse) => {
           location.href = response.authorizationURL;
 
diff --git a/packages/browser/src/__legacy__/helpers/session-management-helper.ts b/packages/browser/src/__legacy__/helpers/session-management-helper.ts
index efedc1896..0caec2a0a 100644
--- a/packages/browser/src/__legacy__/helpers/session-management-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/session-management-helper.ts
@@ -45,7 +45,7 @@ export const SessionManagementHelper = (() => {
   let _checkSessionIntervalTimeout: number;
   let _storage: BrowserStorage;
   let _setSessionState: (sessionState: string) => void;
-  let _getAuthorizationURL: (params?: ExtendedAuthorizeRequestUrlParams) => Promise<string>;
+  let _getSignInUrl: (params?: ExtendedAuthorizeRequestUrlParams) => Promise<string>;
 
   const initialize = (
     clientId: string,
@@ -54,7 +54,7 @@ export const SessionManagementHelper = (() => {
     interval: number,
     sessionRefreshInterval: number,
     redirectURL: string,
-    getAuthorizationURL: (params?: ExtendedAuthorizeRequestUrlParams) => Promise<string>,
+    getSignInUrl: (params?: ExtendedAuthorizeRequestUrlParams) => Promise<string>,
   ): void => {
     _clientID = clientId;
     _checkSessionEndpoint = checkSessionEndpoint;
@@ -62,7 +62,7 @@ export const SessionManagementHelper = (() => {
     _interval = interval;
     _redirectURL = redirectURL;
     _sessionRefreshInterval = sessionRefreshInterval;
-    _getAuthorizationURL = getAuthorizationURL;
+    _getSignInUrl = getSignInUrl;
 
     if (_interval > -1) {
       initiateCheckSession();
@@ -152,7 +152,7 @@ export const SessionManagementHelper = (() => {
         window?.addEventListener('message', receiveMessageListener);
       }
 
-      const promptNoneURL: string = await _getAuthorizationURL({
+      const promptNoneURL: string = await _getSignInUrl({
         prompt: 'none',
         response_mode: 'query',
         state: STATE,
diff --git a/packages/browser/src/__legacy__/models/session-management-helper.ts b/packages/browser/src/__legacy__/models/session-management-helper.ts
index 72be72baf..e5706bb91 100644
--- a/packages/browser/src/__legacy__/models/session-management-helper.ts
+++ b/packages/browser/src/__legacy__/models/session-management-helper.ts
@@ -26,7 +26,7 @@ export interface SessionManagementHelperInterface {
     interval: number,
     sessionRefreshInterval: number,
     redirectURL: string,
-    getAuthorizationURL: (params?: ExtendedAuthorizeRequestUrlParams) => Promise<string>,
+    getSignInUrl: (params?: ExtendedAuthorizeRequestUrlParams) => Promise<string>,
   ): void;
   receivePromptNoneResponse(setSessionState?: (sessionState: string | null) => Promise<void>): Promise<boolean>;
   reset();
diff --git a/packages/browser/src/__legacy__/models/web-worker.ts b/packages/browser/src/__legacy__/models/web-worker.ts
index 70e6eb5a9..3df1f3656 100755
--- a/packages/browser/src/__legacy__/models/web-worker.ts
+++ b/packages/browser/src/__legacy__/models/web-worker.ts
@@ -45,7 +45,7 @@ export interface WebWorkerCoreInterface {
   httpRequestAll(configs: HttpRequestConfig[]): Promise<HttpResponse[] | undefined>;
   enableHttpHandler(): void;
   disableHttpHandler(): void;
-  getAuthorizationURL(params?: AuthorizeRequestUrlParams, afterSignInUrl?: string): Promise<AuthorizationResponse>;
+  getSignInUrl(params?: AuthorizeRequestUrlParams, afterSignInUrl?: string): Promise<AuthorizationResponse>;
   requestAccessToken(
     authorizationCode?: string,
     sessionState?: string,
diff --git a/packages/browser/src/__legacy__/worker/worker-core.ts b/packages/browser/src/__legacy__/worker/worker-core.ts
index 89935efe3..014d5eb4b 100755
--- a/packages/browser/src/__legacy__/worker/worker-core.ts
+++ b/packages/browser/src/__legacy__/worker/worker-core.ts
@@ -99,9 +99,9 @@ export const WebWorkerCore = async (
     _authenticationHelper.disableHttpHandler(_httpClient);
   };
 
-  const getAuthorizationURL = async (params?: AuthorizeRequestUrlParams): Promise<AuthorizationResponse> => {
+  const getSignInUrl = async (params?: AuthorizeRequestUrlParams): Promise<AuthorizationResponse> => {
     return _authenticationClient
-      .getAuthorizationURL(params)
+      .getSignInUrl(params)
       .then(async (url: string) => {
         const urlObject: URL = new URL(url);
         const state: string = urlObject.searchParams.get(OIDCRequestConstants.Params.STATE) ?? '';
@@ -217,7 +217,7 @@ export const WebWorkerCore = async (
     disableHttpHandler,
     enableHttpHandler,
     getAccessToken,
-    getAuthorizationURL,
+    getSignInUrl,
     getBasicUserInfo,
     getConfigData,
     getCryptoHelper,
diff --git a/packages/browser/src/__legacy__/worker/worker-receiver.ts b/packages/browser/src/__legacy__/worker/worker-receiver.ts
index 094b52c9f..a1294fb9e 100644
--- a/packages/browser/src/__legacy__/worker/worker-receiver.ts
+++ b/packages/browser/src/__legacy__/worker/worker-receiver.ts
@@ -97,7 +97,7 @@ export const workerReceiver = (
         break;
       case GET_AUTH_URL:
         webWorker
-          .getAuthorizationURL(data?.data)
+          .getSignInUrl(data?.data)
           .then((response: AuthorizationResponse) => {
             port.postMessage(MessageUtils.generateSuccessMessage(response));
           })
diff --git a/packages/express/README.md b/packages/express/README.md
index 285013902..04f1fb776 100644
--- a/packages/express/README.md
+++ b/packages/express/README.md
@@ -40,7 +40,7 @@ const app = express();
 
 // Login endpoint
 app.get("/login", (req, res) => {
-    const authUrl = authClient.getAuthorizationURL();
+    const authUrl = authClient.getSignInUrl();
     res.redirect(authUrl);
 });
 
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 97378d3c0..09ee1d58f 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -203,19 +203,19 @@ export class AsgardeoAuthClient<T> {
    *
    * @example
    * ```
-   * auth.getAuthorizationURL().then((url)=>{
+   * auth.getSignInUrl().then((url)=>{
    *  // console.log(url);
    * }).catch((error)=>{
    *  // console.error(error);
    * });
    * ```
    *
-   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getAuthorizationURL}
+   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getSignInUrl}
    *
    * @preserve
    */
-  public async getAuthorizationURL(config?: ExtendedAuthorizeRequestUrlParams, userId?: string): Promise<string> {
-    const authRequestConfig: ExtendedAuthorizeRequestUrlParams = {...config};
+  public async getSignInUrl(requestConfig?: ExtendedAuthorizeRequestUrlParams, userId?: string): Promise<string> {
+    const authRequestConfig: ExtendedAuthorizeRequestUrlParams = {...requestConfig};
 
     delete authRequestConfig?.forceInit;
 
@@ -276,7 +276,7 @@ export class AsgardeoAuthClient<T> {
       return __TODO__();
     }
 
-    return this.getOIDCProviderMetaData(config?.forceInit as boolean).then(() => {
+    return this.getOIDCProviderMetaData(requestConfig?.forceInit as boolean).then(() => {
       return __TODO__();
     });
   }
diff --git a/packages/node/README.md b/packages/node/README.md
index 0836b19c4..9e1dc1c1d 100644
--- a/packages/node/README.md
+++ b/packages/node/README.md
@@ -40,7 +40,7 @@ const app = express();
 
 // Login endpoint
 app.get("/login", (req, res) => {
-    const authUrl = authClient.getAuthorizationURL();
+    const authUrl = authClient.getSignInUrl();
     res.redirect(authUrl);
 });
 
diff --git a/packages/node/src/__legacy__/core/authentication.ts b/packages/node/src/__legacy__/core/authentication.ts
index 918336e69..939b85890 100644
--- a/packages/node/src/__legacy__/core/authentication.ts
+++ b/packages/node/src/__legacy__/core/authentication.ts
@@ -119,7 +119,7 @@ export class AsgardeoNodeCore<T> {
   }
 
   public async getAuthURL(userId: string, signInConfig?: Record<string, string | boolean>): Promise<string> {
-    const authURL = await this._auth.getAuthorizationURL(signInConfig, userId);
+    const authURL = await this._auth.getSignInUrl(signInConfig, userId);
 
     if (authURL) {
       return Promise.resolve(authURL.toString());

From ec728e147186e9c555eb6bbbf57d617e405871d4 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Tue, 10 Jun 2025 15:01:35 +0530
Subject: [PATCH 032/131] chore: standardize method name from `getSignOutURL`
 to `getSignOutUrl` for consistency across the codebase

---
 .../browser/src/__legacy__/clients/main-thread-client.ts | 9 ++++-----
 .../browser/src/__legacy__/clients/web-worker-client.ts  | 4 ++--
 .../src/__legacy__/helpers/authentication-helper.ts      | 4 ++--
 packages/browser/src/__legacy__/models/web-worker.ts     | 2 +-
 packages/browser/src/__legacy__/utils/spa-utils.ts       | 2 +-
 packages/browser/src/__legacy__/worker/worker-core.ts    | 8 ++++----
 .../browser/src/__legacy__/worker/worker-receiver.ts     | 2 +-
 packages/javascript/src/__legacy__/client.ts             | 6 +++---
 packages/node/src/__legacy__/core/authentication.ts      | 2 +-
 9 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index c1efadf94..d9c29256e 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -71,7 +71,7 @@ export const MainThreadClient = async (
   const _dataLayer = _authenticationClient.getStorageManager();
   const _sessionManagementHelper = await SessionManagementHelper(
     async () => {
-      return _authenticationClient.getSignOutURL();
+      return _authenticationClient.getSignOutUrl();
     },
     (config.storage as BrowserStorage) ?? BrowserStorage.SessionStorage,
     (sessionState: string) =>
@@ -158,8 +158,7 @@ export const MainThreadClient = async (
       config,
       oidcEndpoints,
       async () => (await _authenticationClient.getBasicUserInfo()).sessionState,
-      async (params?: ExtendedAuthorizeRequestUrlParams): Promise<string> =>
-        _authenticationClient.getSignInUrl(params),
+      async (params?: ExtendedAuthorizeRequestUrlParams): Promise<string> => _authenticationClient.getSignInUrl(params),
       _sessionManagementHelper,
     );
   };
@@ -257,9 +256,9 @@ export const MainThreadClient = async (
 
   const signOut = async (): Promise<boolean> => {
     if ((await _authenticationClient.isAuthenticated()) && !_getSignOutURLFromSessionStorage) {
-      location.href = await _authenticationClient.getSignOutURL();
+      location.href = await _authenticationClient.getSignOutUrl();
     } else {
-      location.href = SPAUtils.getSignOutURL(config.clientId, instanceID);
+      location.href = SPAUtils.getSignOutUrl(config.clientId, instanceID);
     }
 
     _spaHelper.clearRefreshTokenTimeout();
diff --git a/packages/browser/src/__legacy__/clients/web-worker-client.ts b/packages/browser/src/__legacy__/clients/web-worker-client.ts
index 70c29f050..e611e7c6c 100755
--- a/packages/browser/src/__legacy__/clients/web-worker-client.ts
+++ b/packages/browser/src/__legacy__/clients/web-worker-client.ts
@@ -129,7 +129,7 @@ export const WebWorkerClient = async (
 
         return signOutURL;
       } catch {
-        return SPAUtils.getSignOutURL(config.clientId, instanceID);
+        return SPAUtils.getSignOutUrl(config.clientId, instanceID);
       }
     },
     config.storage as BrowserStorage,
@@ -636,7 +636,7 @@ export const WebWorkerClient = async (
             return reject(error);
           });
       } else {
-        window.location.href = SPAUtils.getSignOutURL(config.clientId, instanceID);
+        window.location.href = SPAUtils.getSignOutUrl(config.clientId, instanceID);
 
         return SPAUtils.waitTillPageRedirect().then(() => {
           return Promise.resolve(true);
diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
index b07875118..2a57fdaa6 100644
--- a/packages/browser/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -470,10 +470,10 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
         .then(async () => {
           // Disable this temporarily
           /* if (config.storage === Storage.BrowserMemory) {
-                        SPAUtils.setSignOutURL(await _authenticationClient.getSignOutURL());
+                        SPAUtils.setSignOutURL(await _authenticationClient.getSignOutUrl());
                     } */
           if (config.storage !== BrowserStorage.WebWorker) {
-            SPAUtils.setSignOutURL(await this._authenticationClient.getSignOutURL(), config.clientId, this._instanceID);
+            SPAUtils.setSignOutURL(await this._authenticationClient.getSignOutUrl(), config.clientId, this._instanceID);
 
             if (this._spaHelper) {
               this._spaHelper.clearRefreshTokenTimeout();
diff --git a/packages/browser/src/__legacy__/models/web-worker.ts b/packages/browser/src/__legacy__/models/web-worker.ts
index 3df1f3656..8ac55cbb4 100755
--- a/packages/browser/src/__legacy__/models/web-worker.ts
+++ b/packages/browser/src/__legacy__/models/web-worker.ts
@@ -53,7 +53,7 @@ export interface WebWorkerCoreInterface {
     state?: string,
   ): Promise<BasicUserInfo>;
   signOut(afterSignOutUrl?: string): Promise<string>;
-  getSignOutURL(afterSignOutUrl?: string): Promise<string>;
+  getSignOutUrl(afterSignOutUrl?: string): Promise<string>;
   requestCustomGrant(config: CustomGrantConfig): Promise<BasicUserInfo | FetchResponse>;
   refreshAccessToken(): Promise<BasicUserInfo>;
   revokeAccessToken(): Promise<boolean>;
diff --git a/packages/browser/src/__legacy__/utils/spa-utils.ts b/packages/browser/src/__legacy__/utils/spa-utils.ts
index 1810bd11f..d345cc891 100644
--- a/packages/browser/src/__legacy__/utils/spa-utils.ts
+++ b/packages/browser/src/__legacy__/utils/spa-utils.ts
@@ -52,7 +52,7 @@ export class SPAUtils {
     );
   }
 
-  public static getSignOutURL(clientId: string, instanceID: number): string {
+  public static getSignOutUrl(clientId: string, instanceID: number): string {
     return (
       sessionStorage.getItem(
         `${OIDCRequestConstants.SignOut.Storage.StorageKeys.SIGN_OUT_URL}-instance_${instanceID}-${clientId}`,
diff --git a/packages/browser/src/__legacy__/worker/worker-core.ts b/packages/browser/src/__legacy__/worker/worker-core.ts
index 014d5eb4b..a30e2fde9 100755
--- a/packages/browser/src/__legacy__/worker/worker-core.ts
+++ b/packages/browser/src/__legacy__/worker/worker-core.ts
@@ -131,11 +131,11 @@ export const WebWorkerCore = async (
   const signOut = async (): Promise<string> => {
     _spaHelper.clearRefreshTokenTimeout();
 
-    return await _authenticationClient.getSignOutURL();
+    return await _authenticationClient.getSignOutUrl();
   };
 
-  const getSignOutURL = async (): Promise<string> => {
-    return await _authenticationClient.getSignOutURL();
+  const getSignOutUrl = async (): Promise<string> => {
+    return await _authenticationClient.getSignOutUrl();
   };
 
   const requestCustomGrant = async (config: CustomGrantConfig): Promise<BasicUserInfo | FetchResponse> => {
@@ -225,7 +225,7 @@ export const WebWorkerCore = async (
     getDecodedIDToken,
     getIDToken,
     getOIDCServiceEndpoints,
-    getSignOutURL,
+    getSignOutUrl,
     httpRequest,
     httpRequestAll,
     isAuthenticated,
diff --git a/packages/browser/src/__legacy__/worker/worker-receiver.ts b/packages/browser/src/__legacy__/worker/worker-receiver.ts
index a1294fb9e..e86864819 100644
--- a/packages/browser/src/__legacy__/worker/worker-receiver.ts
+++ b/packages/browser/src/__legacy__/worker/worker-receiver.ts
@@ -241,7 +241,7 @@ export const workerReceiver = (
         break;
       case GET_SIGN_OUT_URL:
         try {
-          port.postMessage(MessageUtils.generateSuccessMessage(await webWorker.getSignOutURL()));
+          port.postMessage(MessageUtils.generateSuccessMessage(await webWorker.getSignOutUrl()));
         } catch (error) {
           port.postMessage(MessageUtils.generateFailureMessage(error));
         }
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 09ee1d58f..c3735798c 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -490,14 +490,14 @@ export class AsgardeoAuthClient<T> {
    *
    * @example
    * ```
-   * const signOutUrl = await auth.getSignOutURL();
+   * const signOutUrl = await auth.getSignOutUrl();
    * ```
    *
-   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getSignOutURL}
+   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getSignOutUrl}
    *
    * @preserve
    */
-  public async getSignOutURL(userId?: string): Promise<string> {
+  public async getSignOutUrl(userId?: string): Promise<string> {
     const logoutEndpoint: string | undefined = (await this._oidcProviderMetaData())?.end_session_endpoint;
     const configData: StrictAuthClientConfig = await this._config();
 
diff --git a/packages/node/src/__legacy__/core/authentication.ts b/packages/node/src/__legacy__/core/authentication.ts
index 939b85890..ba0e67f27 100644
--- a/packages/node/src/__legacy__/core/authentication.ts
+++ b/packages/node/src/__legacy__/core/authentication.ts
@@ -197,7 +197,7 @@ export class AsgardeoNodeCore<T> {
   }
 
   public async signOut(userId: string): Promise<string> {
-    const signOutURL = await this._auth.getSignOutURL(userId);
+    const signOutURL = await this._auth.getSignOutUrl(userId);
 
     if (!signOutURL) {
       return Promise.reject(

From 0b74eca0c0255fddfccec4cb02413515cec2848f Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Tue, 10 Jun 2025 15:05:25 +0530
Subject: [PATCH 033/131] chore: rename method `getOIDCProviderMetaData` to
 `loadOpenIDProviderConfiguration` for consistency across the codebase

---
 packages/javascript/src/StorageManager.ts              |  2 +-
 packages/javascript/src/__legacy__/client.ts           | 10 +++++-----
 .../src/__legacy__/helpers/authentication-helper.ts    |  4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/javascript/src/StorageManager.ts b/packages/javascript/src/StorageManager.ts
index a16b22739..50f8df885 100644
--- a/packages/javascript/src/StorageManager.ts
+++ b/packages/javascript/src/StorageManager.ts
@@ -116,7 +116,7 @@ class StorageManager<T> {
     return JSON.parse((await this._store.getData(this._resolveKey(Stores.ConfigData))) ?? null);
   }
 
-  public async getOIDCProviderMetaData(): Promise<OIDCDiscoveryApiResponse> {
+  public async loadOpenIDProviderConfiguration(): Promise<OIDCDiscoveryApiResponse> {
     return JSON.parse((await this._store.getData(this._resolveKey(Stores.OIDCProviderMetaData))) ?? null);
   }
 
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index c3735798c..99e3bf23d 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -141,7 +141,7 @@ export class AsgardeoAuthClient<T> {
     this._cryptoHelper = new IsomorphicCrypto(cryptoUtils);
     this._authenticationHelper = new AuthenticationHelper(this._storageManager, this._cryptoHelper);
     this._config = async () => await this._storageManager.getConfigData();
-    this._oidcProviderMetaData = async () => await this._storageManager.getOIDCProviderMetaData();
+    this._oidcProviderMetaData = async () => await this._storageManager.loadOpenIDProviderConfiguration();
 
     // FIXME: Validate this.
     // Ref: https://github.com/asgardeo/asgardeo-auth-js-core/pull/205
@@ -276,7 +276,7 @@ export class AsgardeoAuthClient<T> {
       return __TODO__();
     }
 
-    return this.getOIDCProviderMetaData(requestConfig?.forceInit as boolean).then(() => {
+    return this.loadOpenIDProviderConfiguration(requestConfig?.forceInit as boolean).then(() => {
       return __TODO__();
     });
   }
@@ -404,12 +404,12 @@ export class AsgardeoAuthClient<T> {
       return __TODO__();
     }
 
-    return this.getOIDCProviderMetaData(false).then(() => {
+    return this.loadOpenIDProviderConfiguration(false).then(() => {
       return __TODO__();
     });
   }
 
-  public async getOIDCProviderMetaData(forceInit: boolean): Promise<void> {
+  public async loadOpenIDProviderConfiguration(forceInit: boolean): Promise<void> {
     const configData: StrictAuthClientConfig = await this._config();
 
     if (
@@ -1151,7 +1151,7 @@ export class AsgardeoAuthClient<T> {
    */
   public async updateConfig(config: Partial<AuthClientConfig<T>>): Promise<void> {
     await this._storageManager.setConfigData(config);
-    await this.getOIDCProviderMetaData(true);
+    await this.loadOpenIDProviderConfiguration(true);
   }
 
   public static async clearUserSessionData(userId?: string): Promise<void> {
diff --git a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
index b1cbed611..a24009ae7 100644
--- a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
@@ -41,7 +41,7 @@ export class AuthenticationHelper<T> {
   public constructor(storageManager: StorageManager<T>, cryptoHelper: IsomorphicCrypto) {
     this._storageManager = storageManager;
     this._config = async () => await this._storageManager.getConfigData();
-    this._oidcProviderMetaData = async () => await this._storageManager.getOIDCProviderMetaData();
+    this._oidcProviderMetaData = async () => await this._storageManager.loadOpenIDProviderConfiguration();
     this._cryptoHelper = cryptoHelper;
   }
 
@@ -151,7 +151,7 @@ export class AuthenticationHelper<T> {
   }
 
   public async validateIdToken(idToken: string): Promise<boolean> {
-    const jwksEndpoint: string | undefined = (await this._storageManager.getOIDCProviderMetaData()).jwks_uri;
+    const jwksEndpoint: string | undefined = (await this._storageManager.loadOpenIDProviderConfiguration()).jwks_uri;
     const configData: StrictAuthClientConfig = await this._config();
 
     if (!jwksEndpoint || jwksEndpoint.trim().length === 0) {

From 35f234610c0a9c78dfc0ff9c969121eb743746f9 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Tue, 10 Jun 2025 15:10:55 +0530
Subject: [PATCH 034/131] chore: rename `getOIDCServiceEndpoints` to
 `getOpenIDProviderEndpoints` for consistency across the codebase

---
 packages/__legacy__/core/src/api/authorize.ts             | 2 +-
 packages/__legacy__/core/src/api/sign-out.ts              | 2 +-
 packages/browser/src/__legacy__/client.ts                 | 4 ++--
 .../browser/src/__legacy__/clients/main-thread-client.ts  | 8 ++++----
 .../browser/src/__legacy__/clients/web-worker-client.ts   | 6 +++---
 .../src/__legacy__/helpers/authentication-helper.ts       | 4 ++--
 packages/browser/src/__legacy__/models/client.ts          | 4 ++--
 packages/browser/src/__legacy__/models/web-worker.ts      | 2 +-
 packages/browser/src/__legacy__/worker/worker-core.ts     | 6 +++---
 packages/browser/src/__legacy__/worker/worker-receiver.ts | 2 +-
 packages/express/src/__legacy__/client.ts                 | 4 ++--
 packages/javascript/src/__legacy__/client.ts              | 6 +++---
 packages/node/src/__legacy__/client.ts                    | 8 ++++----
 packages/node/src/__legacy__/core/authentication.ts       | 4 ++--
 packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts | 4 ++--
 packages/nuxt/src/runtime/server/handler.ts               | 2 +-
 packages/nuxt/src/runtime/types.ts                        | 2 +-
 packages/react/src/__temp__/api.ts                        | 4 ++--
 packages/react/src/__temp__/models.ts                     | 2 +-
 packages/vue/src/auth-api.ts                              | 4 ++--
 packages/vue/src/plugins/AsgardeoPlugin.ts                | 2 +-
 packages/vue/src/tests/auth-api.test.ts                   | 8 ++++----
 packages/vue/src/tests/mocks/mocks.ts                     | 6 +++---
 packages/vue/src/tests/useAsgardeo.test.ts                | 2 +-
 packages/vue/src/types.ts                                 | 2 +-
 25 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/packages/__legacy__/core/src/api/authorize.ts b/packages/__legacy__/core/src/api/authorize.ts
index 15de71d8d..777a21135 100644
--- a/packages/__legacy__/core/src/api/authorize.ts
+++ b/packages/__legacy__/core/src/api/authorize.ts
@@ -55,7 +55,7 @@ const authorize = async (): Promise<AuthApiResponse> => {
       method: 'POST',
     };
 
-    authzURL = (await authInstace.getOIDCServiceEndpoints()).authorizationEndpoint;
+    authzURL = (await authInstace.getOpenIDProviderEndpoints()).authorizationEndpoint;
   } catch (error) {
     throw new AsgardeoUIException('JS_UI_CORE-AUTHZ-A-NF', 'Authorization request building failed', error.stack);
   }
diff --git a/packages/__legacy__/core/src/api/sign-out.ts b/packages/__legacy__/core/src/api/sign-out.ts
index 1d71f6f80..5247e7114 100644
--- a/packages/__legacy__/core/src/api/sign-out.ts
+++ b/packages/__legacy__/core/src/api/sign-out.ts
@@ -63,7 +63,7 @@ const signOut = async (): Promise<void> => {
   };
 
   try {
-    const {endSessionEndpoint} = await authClient.getOIDCServiceEndpoints();
+    const {endSessionEndpoint} = await authClient.getOpenIDProviderEndpoints();
     signOutUrl = endSessionEndpoint;
   } catch (error) {
     throw new AsgardeoUIException('JS_UI_CORE-SIGNOUT-SO-NF', 'Failed to retrieve the sign out endpoint.');
diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
index 91140c944..7898c9ee7 100755
--- a/packages/browser/src/__legacy__/client.ts
+++ b/packages/browser/src/__legacy__/client.ts
@@ -693,10 +693,10 @@ export class AsgardeoSPAClient {
    *
    * @preserve
    */
-  public async getOIDCServiceEndpoints(): Promise<OIDCEndpoints | undefined> {
+  public async getOpenIDProviderEndpoints(): Promise<OIDCEndpoints | undefined> {
     await this._isInitialized();
 
-    return this._client?.getOIDCServiceEndpoints();
+    return this._client?.getOpenIDProviderEndpoints();
   }
 
   /**
diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index d9c29256e..6c6a6f0da 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -151,7 +151,7 @@ export const MainThreadClient = async (
   };
 
   const checkSession = async (): Promise<void> => {
-    const oidcEndpoints: OIDCEndpoints = (await _authenticationClient.getOIDCServiceEndpoints()) as OIDCEndpoints;
+    const oidcEndpoints: OIDCEndpoints = (await _authenticationClient.getOpenIDProviderEndpoints()) as OIDCEndpoints;
     const config = await _dataLayer.getConfigData();
 
     _authenticationHelper.initializeSessionManger(
@@ -384,8 +384,8 @@ export const MainThreadClient = async (
     return _authenticationHelper.getIDToken();
   };
 
-  const getOIDCServiceEndpoints = async (): Promise<OIDCEndpoints> => {
-    return _authenticationHelper.getOIDCServiceEndpoints();
+  const getOpenIDProviderEndpoints = async (): Promise<OIDCEndpoints> => {
+    return _authenticationHelper.getOpenIDProviderEndpoints();
   };
 
   const getAccessToken = async (): Promise<string> => {
@@ -441,7 +441,7 @@ export const MainThreadClient = async (
     getDecodedIDToken,
     getHttpClient,
     getIDToken,
-    getOIDCServiceEndpoints,
+    getOpenIDProviderEndpoints,
     httpRequest,
     httpRequestAll,
     isAuthenticated,
diff --git a/packages/browser/src/__legacy__/clients/web-worker-client.ts b/packages/browser/src/__legacy__/clients/web-worker-client.ts
index e611e7c6c..16d76c6c6 100755
--- a/packages/browser/src/__legacy__/clients/web-worker-client.ts
+++ b/packages/browser/src/__legacy__/clients/web-worker-client.ts
@@ -379,7 +379,7 @@ export const WebWorkerClient = async (
   };
 
   const checkSession = async (): Promise<void> => {
-    const oidcEndpoints: OIDCEndpoints = await getOIDCServiceEndpoints();
+    const oidcEndpoints: OIDCEndpoints = await getOpenIDProviderEndpoints();
     const config: AuthClientConfig<WebWorkerClientConfig> = await getConfigData();
 
     _authenticationHelper.initializeSessionManger(
@@ -665,7 +665,7 @@ export const WebWorkerClient = async (
       });
   };
 
-  const getOIDCServiceEndpoints = (): Promise<OIDCEndpoints> => {
+  const getOpenIDProviderEndpoints = (): Promise<OIDCEndpoints> => {
     const message: Message<null> = {
       type: GET_OIDC_SERVICE_ENDPOINTS,
     };
@@ -846,7 +846,7 @@ export const WebWorkerClient = async (
     getDecodedIDPIDToken,
     getDecodedIDToken,
     getIDToken,
-    getOIDCServiceEndpoints,
+    getOpenIDProviderEndpoints,
     httpRequest,
     httpRequestAll,
     initialize,
diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
index 2a57fdaa6..6be61abe4 100644
--- a/packages/browser/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -676,8 +676,8 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     return this._authenticationClient.getIDToken();
   }
 
-  public async getOIDCServiceEndpoints(): Promise<OIDCEndpoints> {
-    return this._authenticationClient.getOIDCServiceEndpoints() as any;
+  public async getOpenIDProviderEndpoints(): Promise<OIDCEndpoints> {
+    return this._authenticationClient.getOpenIDProviderEndpoints() as any;
   }
 
   public async getAccessToken(): Promise<string> {
diff --git a/packages/browser/src/__legacy__/models/client.ts b/packages/browser/src/__legacy__/models/client.ts
index b61d688b7..09501cb1e 100755
--- a/packages/browser/src/__legacy__/models/client.ts
+++ b/packages/browser/src/__legacy__/models/client.ts
@@ -64,7 +64,7 @@ export interface MainThreadClientInterface {
   getCryptoHelper(): Promise<IsomorphicCrypto>;
   getConfigData(): Promise<AuthClientConfig<MainThreadClientConfig>>;
   getIDToken(): Promise<string>;
-  getOIDCServiceEndpoints(): Promise<OIDCEndpoints>;
+  getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   getAccessToken(): Promise<string>;
   getStorageManager(): Promise<StorageManager<MainThreadClientConfig>>;
   isAuthenticated(): Promise<boolean>;
@@ -94,7 +94,7 @@ export interface WebWorkerClientInterface {
   ): Promise<BasicUserInfo>;
   signOut(afterSignOutUrl?: string): Promise<boolean>;
   revokeAccessToken(): Promise<boolean>;
-  getOIDCServiceEndpoints(): Promise<OIDCEndpoints>;
+  getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   getBasicUserInfo(): Promise<BasicUserInfo>;
   getConfigData(): Promise<AuthClientConfig<WebWorkerClientConfig>>;
   getDecodedIDToken(): Promise<IdTokenPayload>;
diff --git a/packages/browser/src/__legacy__/models/web-worker.ts b/packages/browser/src/__legacy__/models/web-worker.ts
index 8ac55cbb4..b1407c3a1 100755
--- a/packages/browser/src/__legacy__/models/web-worker.ts
+++ b/packages/browser/src/__legacy__/models/web-worker.ts
@@ -62,7 +62,7 @@ export interface WebWorkerCoreInterface {
   getDecodedIDPIDToken(): Promise<IdTokenPayload>;
   getCryptoHelper(): Promise<IsomorphicCrypto>;
   getIDToken(): Promise<string>;
-  getOIDCServiceEndpoints(): Promise<OIDCEndpoints>;
+  getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   getAccessToken(): Promise<string>;
   isAuthenticated(): Promise<boolean>;
   startAutoRefreshToken(): Promise<void>;
diff --git a/packages/browser/src/__legacy__/worker/worker-core.ts b/packages/browser/src/__legacy__/worker/worker-core.ts
index a30e2fde9..7c59e5551 100755
--- a/packages/browser/src/__legacy__/worker/worker-core.ts
+++ b/packages/browser/src/__legacy__/worker/worker-core.ts
@@ -182,8 +182,8 @@ export const WebWorkerCore = async (
   const getIDToken = async (): Promise<string> => {
     return _authenticationHelper.getIDToken();
   };
-  const getOIDCServiceEndpoints = async (): Promise<OIDCEndpoints> => {
-    return _authenticationHelper.getOIDCServiceEndpoints();
+  const getOpenIDProviderEndpoints = async (): Promise<OIDCEndpoints> => {
+    return _authenticationHelper.getOpenIDProviderEndpoints();
   };
 
   const getAccessToken = (): Promise<string> => {
@@ -224,7 +224,7 @@ export const WebWorkerCore = async (
     getDecodedIDPIDToken,
     getDecodedIDToken,
     getIDToken,
-    getOIDCServiceEndpoints,
+    getOpenIDProviderEndpoints,
     getSignOutUrl,
     httpRequest,
     httpRequestAll,
diff --git a/packages/browser/src/__legacy__/worker/worker-receiver.ts b/packages/browser/src/__legacy__/worker/worker-receiver.ts
index e86864819..98027453c 100644
--- a/packages/browser/src/__legacy__/worker/worker-receiver.ts
+++ b/packages/browser/src/__legacy__/worker/worker-receiver.ts
@@ -183,7 +183,7 @@ export const workerReceiver = (
         break;
       case GET_OIDC_SERVICE_ENDPOINTS:
         try {
-          port.postMessage(MessageUtils.generateSuccessMessage(await webWorker.getOIDCServiceEndpoints()));
+          port.postMessage(MessageUtils.generateSuccessMessage(await webWorker.getOpenIDProviderEndpoints()));
         } catch (error) {
           port.postMessage(MessageUtils.generateFailureMessage(error));
         }
diff --git a/packages/express/src/__legacy__/client.ts b/packages/express/src/__legacy__/client.ts
index cd95aea86..5cc24e615 100644
--- a/packages/express/src/__legacy__/client.ts
+++ b/packages/express/src/__legacy__/client.ts
@@ -170,8 +170,8 @@ export class AsgardeoExpressClient {
     return this._authClient.getBasicUserInfo(userId);
   }
 
-  public async getOIDCServiceEndpoints(): Promise<OIDCEndpoints> {
-    return this._authClient.getOIDCServiceEndpoints();
+  public async getOpenIDProviderEndpoints(): Promise<OIDCEndpoints> {
+    return this._authClient.getOpenIDProviderEndpoints();
   }
 
   public async getDecodedIDToken(userId?: string): Promise<IdTokenPayload> {
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 99e3bf23d..4306ede4a 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -551,14 +551,14 @@ export class AsgardeoAuthClient<T> {
    *
    * @example
    * ```
-   * const endpoints = await auth.getOIDCServiceEndpoints();
+   * const endpoints = await auth.getOpenIDProviderEndpoints();
    * ```
    *
-   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getOIDCServiceEndpoints}
+   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getOpenIDProviderEndpoints}
    *
    * @preserve
    */
-  public async getOIDCServiceEndpoints(): Promise<Partial<OIDCEndpoints>> {
+  public async getOpenIDProviderEndpoints(): Promise<Partial<OIDCEndpoints>> {
     const oidcProviderMetaData: OIDCDiscoveryApiResponse = await this._oidcProviderMetaData();
 
     return {
diff --git a/packages/node/src/__legacy__/client.ts b/packages/node/src/__legacy__/client.ts
index 7c7fd6f76..3b630d4c6 100644
--- a/packages/node/src/__legacy__/client.ts
+++ b/packages/node/src/__legacy__/client.ts
@@ -203,16 +203,16 @@ export class AsgardeoNodeClient<T> {
    *
    * @example
    * ```
-   * const oidcEndpoints = await auth.getOIDCServiceEndpoints();
+   * const oidcEndpoints = await auth.getOpenIDProviderEndpoints();
    * ```
    *
-   * @link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getOIDCServiceEndpoints
+   * @link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getOpenIDProviderEndpoints
    *
    * @memberof AsgardeoNodeClient
    *
    */
-  public async getOIDCServiceEndpoints(): Promise<OIDCEndpoints> {
-    return this._authCore.getOIDCServiceEndpoints();
+  public async getOpenIDProviderEndpoints(): Promise<OIDCEndpoints> {
+    return this._authCore.getOpenIDProviderEndpoints();
   }
 
   /**
diff --git a/packages/node/src/__legacy__/core/authentication.ts b/packages/node/src/__legacy__/core/authentication.ts
index ba0e67f27..43c18a02e 100644
--- a/packages/node/src/__legacy__/core/authentication.ts
+++ b/packages/node/src/__legacy__/core/authentication.ts
@@ -216,8 +216,8 @@ export class AsgardeoNodeCore<T> {
     return this._auth.getBasicUserInfo(userId);
   }
 
-  public async getOIDCServiceEndpoints(): Promise<OIDCEndpoints> {
-    return this._auth.getOIDCServiceEndpoints() as Promise<OIDCEndpoints>;
+  public async getOpenIDProviderEndpoints(): Promise<OIDCEndpoints> {
+    return this._auth.getOpenIDProviderEndpoints() as Promise<OIDCEndpoints>;
   }
 
   public async getDecodedIDToken(userId?: string): Promise<IdTokenPayload> {
diff --git a/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts b/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
index 29e0521b7..8292e1c7b 100644
--- a/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
+++ b/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
@@ -197,7 +197,7 @@ export const useAuth = (): AuthInterface => {
    * OIDC endpoints object if available, or null if an error occurs or
    * the data is not found.
    */
-  const getOIDCServiceEndpoints = async (): Promise<OIDCEndpoints | null> => {
+  const getOpenIDProviderEndpoints = async (): Promise<OIDCEndpoints | null> => {
     try {
       const response: Response = await fetch('/api/auth/get-oidc-endpoints', {
         method: 'GET',
@@ -235,7 +235,7 @@ export const useAuth = (): AuthInterface => {
     getStorageManager,
     getDecodedIDToken,
     getIdToken,
-    getOIDCServiceEndpoints,
+    getOpenIDProviderEndpoints,
     isAuthenticated,
     revokeAccessToken,
     signIn,
diff --git a/packages/nuxt/src/runtime/server/handler.ts b/packages/nuxt/src/runtime/server/handler.ts
index 8fa645bf3..9fcffd3f1 100644
--- a/packages/nuxt/src/runtime/server/handler.ts
+++ b/packages/nuxt/src/runtime/server/handler.ts
@@ -238,7 +238,7 @@ export const AsgardeoAuthHandler = (config: AuthClientConfig, options?: Asgardeo
       }
     } else if (action === 'get-oidc-endpoints' && method === 'GET') {
       try {
-        return await authClient.getOIDCServiceEndpoints();
+        return await authClient.getOpenIDProviderEndpoints();
       } catch {
         throw createError({
           statusCode: 500,
diff --git a/packages/nuxt/src/runtime/types.ts b/packages/nuxt/src/runtime/types.ts
index 32d299516..26aefcf0a 100644
--- a/packages/nuxt/src/runtime/types.ts
+++ b/packages/nuxt/src/runtime/types.ts
@@ -63,7 +63,7 @@ export interface AuthInterface {
   getStorageManager: () => Promise<StorageManager<any> | null>;
   getDecodedIDToken: () => Promise<IdTokenPayload | null>;
   getIdToken: () => Promise<string | null>;
-  getOIDCServiceEndpoints: () => Promise<OIDCEndpoints | null>;
+  getOpenIDProviderEndpoints: () => Promise<OIDCEndpoints | null>;
   isAuthenticated: () => Promise<boolean>;
   revokeAccessToken: () => Promise<void>;
   signIn: (callbackUrl?: string) => Promise<void>;
diff --git a/packages/react/src/__temp__/api.ts b/packages/react/src/__temp__/api.ts
index dd46c12d8..b36776a1b 100644
--- a/packages/react/src/__temp__/api.ts
+++ b/packages/react/src/__temp__/api.ts
@@ -280,8 +280,8 @@ class AuthAPI {
    *
    * @return {Promise<ServiceResourcesType} - A Promise that resolves with an object containing the service endpoints.
    */
-  public async getOIDCServiceEndpoints(): Promise<OIDCEndpoints> {
-    return this._client.getOIDCServiceEndpoints();
+  public async getOpenIDProviderEndpoints(): Promise<OIDCEndpoints> {
+    return this._client.getOpenIDProviderEndpoints();
   }
 
   /**
diff --git a/packages/react/src/__temp__/models.ts b/packages/react/src/__temp__/models.ts
index f6d1edae7..c8c5dbe4c 100644
--- a/packages/react/src/__temp__/models.ts
+++ b/packages/react/src/__temp__/models.ts
@@ -105,7 +105,7 @@ export interface AuthContextInterface {
     callback?: (response: BasicUserInfo | FetchResponse<any>) => void,
   ): void;
   revokeAccessToken(): Promise<boolean>;
-  getOIDCServiceEndpoints(): Promise<OIDCEndpoints>;
+  getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   getHttpClient(): Promise<HttpClientInstance>;
   getDecodedIDPIDToken(): Promise<IdTokenPayload>;
   getDecodedIDToken(): Promise<IdTokenPayload>;
diff --git a/packages/vue/src/auth-api.ts b/packages/vue/src/auth-api.ts
index d4a2f1a55..5c4c7d7e9 100644
--- a/packages/vue/src/auth-api.ts
+++ b/packages/vue/src/auth-api.ts
@@ -228,8 +228,8 @@ class AuthAPI {
    *
    * @return {Promise<ServiceResourcesType>} - A Promise that resolves with an object containing the service endpoints.
    */
-  public async getOIDCServiceEndpoints(): Promise<OIDCEndpoints> {
-    return this._client.getOIDCServiceEndpoints();
+  public async getOpenIDProviderEndpoints(): Promise<OIDCEndpoints> {
+    return this._client.getOpenIDProviderEndpoints();
   }
 
   /**
diff --git a/packages/vue/src/plugins/AsgardeoPlugin.ts b/packages/vue/src/plugins/AsgardeoPlugin.ts
index 0458b9be2..c9bc4c782 100644
--- a/packages/vue/src/plugins/AsgardeoPlugin.ts
+++ b/packages/vue/src/plugins/AsgardeoPlugin.ts
@@ -162,7 +162,7 @@ export const asgardeoPlugin: Plugin = {
       getDecodedIDToken: (): Promise<IdTokenPayload> => AuthClient.getDecodedIDToken(),
       getHttpClient: (): Promise<HttpClientInstance> => AuthClient.getHttpClient(),
       getIDToken: (): Promise<string> => AuthClient.getIDToken(),
-      getOIDCServiceEndpoints: (): Promise<OIDCEndpoints> => AuthClient.getOIDCServiceEndpoints(),
+      getOpenIDProviderEndpoints: (): Promise<OIDCEndpoints> => AuthClient.getOpenIDProviderEndpoints(),
       httpRequest: (config: HttpRequestConfig): Promise<HttpResponse<any>> => AuthClient.httpRequest(config),
       httpRequestAll: (configs: HttpRequestConfig[]): Promise<HttpResponse<any>[]> =>
         AuthClient.httpRequestAll(configs),
diff --git a/packages/vue/src/tests/auth-api.test.ts b/packages/vue/src/tests/auth-api.test.ts
index 6dd83d628..c4b1b71a1 100644
--- a/packages/vue/src/tests/auth-api.test.ts
+++ b/packages/vue/src/tests/auth-api.test.ts
@@ -333,10 +333,10 @@ describe('AuthAPI', () => {
     });
   });
 
-  describe('getOIDCServiceEndpoints', () => {
-    it('should call getOIDCServiceEndpoints on the client', async () => {
-      await authApi.getOIDCServiceEndpoints();
-      expect(mockClient.getOIDCServiceEndpoints).toHaveBeenCalled();
+  describe('getOpenIDProviderEndpoints', () => {
+    it('should call getOpenIDProviderEndpoints on the client', async () => {
+      await authApi.getOpenIDProviderEndpoints();
+      expect(mockClient.getOpenIDProviderEndpoints).toHaveBeenCalled();
     });
   });
 
diff --git a/packages/vue/src/tests/mocks/mocks.ts b/packages/vue/src/tests/mocks/mocks.ts
index 5ccf737ad..7acfcdedc 100644
--- a/packages/vue/src/tests/mocks/mocks.ts
+++ b/packages/vue/src/tests/mocks/mocks.ts
@@ -49,7 +49,7 @@ export type MockAuthAPI = {
   getDecodedIDToken: Mock;
   getHttpClient: Mock;
   getIDToken: Mock;
-  getOIDCServiceEndpoints: Mock;
+  getOpenIDProviderEndpoints: Mock;
   getState: Mock;
   httpRequest: Mock;
   httpRequestAll: Mock;
@@ -81,7 +81,7 @@ export const mockAuthAPI: MockAuthAPI = {
   getDecodedIDToken: vi.fn().mockResolvedValue({aud: 'client-id', iss: 'https://test.com', sub: 'user-id-123'}),
   getHttpClient: vi.fn().mockResolvedValue({}),
   getIDToken: vi.fn().mockResolvedValue('mock-id-token'),
-  getOIDCServiceEndpoints: vi.fn().mockResolvedValue({}),
+  getOpenIDProviderEndpoints: vi.fn().mockResolvedValue({}),
   getState: vi.fn().mockReturnValue(mockState),
   httpRequest: vi.fn().mockResolvedValue({data: {}, status: 200}),
   httpRequestAll: vi.fn().mockResolvedValue([{data: {}, status: 200}]),
@@ -130,7 +130,7 @@ export const mockAsgardeoSPAClient: Partial<AsgardeoSPAClient> = {
   getHttpClient: vi.fn().mockResolvedValue({}),
   getIDPAccessToken: vi.fn().mockResolvedValue('mock-idp-access-token'),
   getIDToken: vi.fn().mockResolvedValue('mock-id-token'),
-  getOIDCServiceEndpoints: vi.fn().mockResolvedValue({}),
+  getOpenIDProviderEndpoints: vi.fn().mockResolvedValue({}),
   httpRequest: vi.fn().mockResolvedValue({data: {}, status: 200}),
   httpRequestAll: vi.fn().mockResolvedValue([{data: {}, status: 200}]),
   initialize: vi.fn().mockResolvedValue(true),
diff --git a/packages/vue/src/tests/useAsgardeo.test.ts b/packages/vue/src/tests/useAsgardeo.test.ts
index aa2cae9d6..4a8233c27 100644
--- a/packages/vue/src/tests/useAsgardeo.test.ts
+++ b/packages/vue/src/tests/useAsgardeo.test.ts
@@ -43,7 +43,7 @@ describe('useAsgardeo', () => {
     getDecodedIDToken: vi.fn().mockResolvedValue({} as IdTokenPayload),
     getHttpClient: vi.fn().mockResolvedValue({} as HttpClientInstance),
     getIDToken: vi.fn().mockResolvedValue('id_token'),
-    getOIDCServiceEndpoints: vi.fn().mockResolvedValue({} as OIDCEndpoints),
+    getOpenIDProviderEndpoints: vi.fn().mockResolvedValue({} as OIDCEndpoints),
     httpRequest: vi.fn().mockResolvedValue({} as HttpResponse<any>),
     httpRequestAll: vi.fn().mockResolvedValue([{} as HttpResponse<any>]),
     isAuthenticated: vi.fn().mockResolvedValue(true),
diff --git a/packages/vue/src/types.ts b/packages/vue/src/types.ts
index 1e52871c0..b2a401194 100644
--- a/packages/vue/src/types.ts
+++ b/packages/vue/src/types.ts
@@ -99,7 +99,7 @@ export interface AuthContextInterface {
   getDecodedIDToken(): Promise<IdTokenPayload>;
   getHttpClient(): Promise<HttpClientInstance>;
   getIDToken(): Promise<string>;
-  getOIDCServiceEndpoints(): Promise<OIDCEndpoints>;
+  getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   httpRequest(config: HttpRequestConfig): Promise<HttpResponse<any>>;
   httpRequestAll(configs: HttpRequestConfig[]): Promise<HttpResponse<any>[]>;
   isAuthenticated(): Promise<boolean>;

From 2c79228f2aafa914e985a7729c9debc73d59be21 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Tue, 10 Jun 2025 15:12:02 +0530
Subject: [PATCH 035/131] chore: remove unused methods `getCreatedAt` and
 `getExpiresIn` for code cleanup

---
 packages/javascript/src/__legacy__/client.ts | 24 ++------------------
 1 file changed, 2 insertions(+), 22 deletions(-)

diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 4306ede4a..d50808426 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -863,26 +863,6 @@ export class AsgardeoAuthClient<T> {
     return (await this._storageManager.getSessionData(userId))?.access_token;
   }
 
-  /**
-   * The created timestamp of the token response in milliseconds.
-   *
-   * @param userId - User ID
-   * @returns Created at timestamp of the token response in milliseconds.
-   */
-  public async getCreatedAt(userId?: string): Promise<number> {
-    return (await this._storageManager.getSessionData(userId))?.created_at;
-  }
-
-  /**
-   * The expires timestamp of the token response in seconds.
-   *
-   * @param userId - User ID
-   * @returns Expires in timestamp of the token response in seconds.
-   */
-  public async getExpiresIn(userId?: string): Promise<string> {
-    return (await this._storageManager.getSessionData(userId))?.expires_in;
-  }
-
   /**
    * This method sends a custom-grant request and returns a Promise that resolves with the response
    * depending on the config passed.
@@ -1020,10 +1000,10 @@ export class AsgardeoAuthClient<T> {
     const isAccessTokenAvailable: boolean = Boolean(await this.getAccessToken(userId));
 
     // Check if the access token is expired.
-    const createdAt: number = await this.getCreatedAt(userId);
+    const createdAt: number = (await this._storageManager.getSessionData(userId))?.created_at;
 
     // Get the expires in value.
-    const expiresInString: string = await this.getExpiresIn(userId);
+    const expiresInString: string = (await this._storageManager.getSessionData(userId))?.expires_in;
 
     // If the expires in value is not available, the token is invalid and the user is not authenticated.
     if (!expiresInString) {

From bf85f7ec1ad216866053ff0ac00935055c6a7907 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Tue, 10 Jun 2025 15:23:33 +0530
Subject: [PATCH 036/131] chore: rename method `getCryptoHelper` to `getCrypto`
 for consistency across the codebase

---
 packages/browser/src/__legacy__/client.ts                 | 8 ++++----
 .../browser/src/__legacy__/clients/main-thread-client.ts  | 6 +++---
 .../browser/src/__legacy__/clients/web-worker-client.ts   | 4 ++--
 .../src/__legacy__/helpers/authentication-helper.ts       | 4 ++--
 packages/browser/src/__legacy__/models/client.ts          | 4 ++--
 packages/browser/src/__legacy__/models/web-worker.ts      | 2 +-
 packages/browser/src/__legacy__/worker/worker-core.ts     | 6 +++---
 packages/browser/src/__legacy__/worker/worker-receiver.ts | 2 +-
 packages/javascript/src/__legacy__/client.ts              | 4 ++--
 9 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
index 7898c9ee7..f1772209c 100755
--- a/packages/browser/src/__legacy__/client.ts
+++ b/packages/browser/src/__legacy__/client.ts
@@ -764,22 +764,22 @@ export class AsgardeoSPAClient {
    *
    * @example
    * ```
-   * auth.getCryptoHelper().then((response)=>{
+   * auth.getCrypto().then((response)=>{
    *     // console.log(response);
    * }).catch((error)=>{
    *     // console.error(error);
    * });
    * ```
-   * @link https://github.com/asgardeo/asgardeo-auth-spa-sdk/tree/master#getCryptoHelper
+   * @link https://github.com/asgardeo/asgardeo-auth-spa-sdk/tree/master#getCrypto
    *
    * @memberof AsgardeoSPAClient
    *
    * @preserve
    */
-  public async getCryptoHelper(): Promise<IsomorphicCrypto | undefined> {
+  public async getCrypto(): Promise<IsomorphicCrypto | undefined> {
     await this._validateMethod();
 
-    return this._client?.getCryptoHelper();
+    return this._client?.getCrypto();
   }
 
   /**
diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index 6c6a6f0da..46a75e0a7 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -376,8 +376,8 @@ export const MainThreadClient = async (
     return _authenticationHelper.getDecodedIDToken();
   };
 
-  const getCryptoHelper = async (): Promise<IsomorphicCrypto> => {
-    return _authenticationHelper.getCryptoHelper();
+  const getCrypto = async (): Promise<IsomorphicCrypto> => {
+    return _authenticationHelper.getCrypto();
   };
 
   const getIDToken = async (): Promise<string> => {
@@ -436,7 +436,7 @@ export const MainThreadClient = async (
     getAccessToken,
     getBasicUserInfo,
     getConfigData,
-    getCryptoHelper,
+    getCrypto,
     getStorageManager,
     getDecodedIDToken,
     getHttpClient,
diff --git a/packages/browser/src/__legacy__/clients/web-worker-client.ts b/packages/browser/src/__legacy__/clients/web-worker-client.ts
index 16d76c6c6..86604722e 100755
--- a/packages/browser/src/__legacy__/clients/web-worker-client.ts
+++ b/packages/browser/src/__legacy__/clients/web-worker-client.ts
@@ -735,7 +735,7 @@ export const WebWorkerClient = async (
       });
   };
 
-  const getCryptoHelper = (): Promise<IsomorphicCrypto> => {
+  const getCrypto = (): Promise<IsomorphicCrypto> => {
     const message: Message<null> = {
       type: GET_CRYPTO_HELPER,
     };
@@ -842,7 +842,7 @@ export const WebWorkerClient = async (
     enableHttpHandler,
     getBasicUserInfo,
     getConfigData,
-    getCryptoHelper,
+    getCrypto,
     getDecodedIDPIDToken,
     getDecodedIDToken,
     getIDToken,
diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
index 6be61abe4..afbb51a8a 100644
--- a/packages/browser/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -668,8 +668,8 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     return this._authenticationClient.getDecodedIDToken();
   }
 
-  public async getCryptoHelper(): Promise<IsomorphicCrypto> {
-    return this._authenticationClient.getCryptoHelper();
+  public async getCrypto(): Promise<IsomorphicCrypto> {
+    return this._authenticationClient.getCrypto();
   }
 
   public async getIDToken(): Promise<string> {
diff --git a/packages/browser/src/__legacy__/models/client.ts b/packages/browser/src/__legacy__/models/client.ts
index 09501cb1e..4825302b8 100755
--- a/packages/browser/src/__legacy__/models/client.ts
+++ b/packages/browser/src/__legacy__/models/client.ts
@@ -61,7 +61,7 @@ export interface MainThreadClientInterface {
   revokeAccessToken(): Promise<boolean>;
   getBasicUserInfo(): Promise<BasicUserInfo>;
   getDecodedIDToken(): Promise<IdTokenPayload>;
-  getCryptoHelper(): Promise<IsomorphicCrypto>;
+  getCrypto(): Promise<IsomorphicCrypto>;
   getConfigData(): Promise<AuthClientConfig<MainThreadClientConfig>>;
   getIDToken(): Promise<string>;
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
@@ -99,7 +99,7 @@ export interface WebWorkerClientInterface {
   getConfigData(): Promise<AuthClientConfig<WebWorkerClientConfig>>;
   getDecodedIDToken(): Promise<IdTokenPayload>;
   getDecodedIDPIDToken(): Promise<IdTokenPayload>;
-  getCryptoHelper(): Promise<IsomorphicCrypto>;
+  getCrypto(): Promise<IsomorphicCrypto>;
   getIDToken(): Promise<string>;
   isAuthenticated(): Promise<boolean>;
   setHttpRequestSuccessCallback(callback: (response: HttpResponse) => void): void;
diff --git a/packages/browser/src/__legacy__/models/web-worker.ts b/packages/browser/src/__legacy__/models/web-worker.ts
index b1407c3a1..c88b90625 100755
--- a/packages/browser/src/__legacy__/models/web-worker.ts
+++ b/packages/browser/src/__legacy__/models/web-worker.ts
@@ -60,7 +60,7 @@ export interface WebWorkerCoreInterface {
   getBasicUserInfo(): Promise<BasicUserInfo>;
   getDecodedIDToken(): Promise<IdTokenPayload>;
   getDecodedIDPIDToken(): Promise<IdTokenPayload>;
-  getCryptoHelper(): Promise<IsomorphicCrypto>;
+  getCrypto(): Promise<IsomorphicCrypto>;
   getIDToken(): Promise<string>;
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   getAccessToken(): Promise<string>;
diff --git a/packages/browser/src/__legacy__/worker/worker-core.ts b/packages/browser/src/__legacy__/worker/worker-core.ts
index 7c59e5551..fa747bed0 100755
--- a/packages/browser/src/__legacy__/worker/worker-core.ts
+++ b/packages/browser/src/__legacy__/worker/worker-core.ts
@@ -171,8 +171,8 @@ export const WebWorkerCore = async (
     return _authenticationHelper.getDecodedIDToken();
   };
 
-  const getCryptoHelper = async (): Promise<IsomorphicCrypto> => {
-    return _authenticationHelper.getCryptoHelper();
+  const getCrypto = async (): Promise<IsomorphicCrypto> => {
+    return _authenticationHelper.getCrypto();
   };
 
   const getDecodedIDPIDToken = async (): Promise<IdTokenPayload> => {
@@ -220,7 +220,7 @@ export const WebWorkerCore = async (
     getSignInUrl,
     getBasicUserInfo,
     getConfigData,
-    getCryptoHelper,
+    getCrypto,
     getDecodedIDPIDToken,
     getDecodedIDToken,
     getIDToken,
diff --git a/packages/browser/src/__legacy__/worker/worker-receiver.ts b/packages/browser/src/__legacy__/worker/worker-receiver.ts
index 98027453c..2f523d8f8 100644
--- a/packages/browser/src/__legacy__/worker/worker-receiver.ts
+++ b/packages/browser/src/__legacy__/worker/worker-receiver.ts
@@ -207,7 +207,7 @@ export const workerReceiver = (
         break;
       case GET_CRYPTO_HELPER:
         try {
-          port.postMessage(MessageUtils.generateSuccessMessage(await webWorker.getCryptoHelper()));
+          port.postMessage(MessageUtils.generateSuccessMessage(await webWorker.getCrypto()));
         } catch (error) {
           port.postMessage(MessageUtils.generateFailureMessage(error));
         }
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index d50808426..45d736895 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -669,11 +669,11 @@ export class AsgardeoAuthClient<T> {
    * const cryptoHelper = await auth.IsomorphicCrypto();
    * ```
    *
-   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getCryptoHelper}
+   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getCrypto}
    *
    * @preserve
    */
-  public async getCryptoHelper(): Promise<IsomorphicCrypto> {
+  public async getCrypto(): Promise<IsomorphicCrypto> {
     return this._cryptoHelper;
   }
 

From 2e9b11fe08d5a9046c381a80943220ddc0a5c83d Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Tue, 10 Jun 2025 15:25:39 +0530
Subject: [PATCH 037/131] chore: rename method `requestCustomGrant` to
 `exchangeToken` for consistency across the codebase

---
 packages/browser/src/__legacy__/client.ts     |  4 ++--
 .../__legacy__/clients/main-thread-client.ts  |  6 ++---
 .../__legacy__/clients/web-worker-client.ts   |  4 ++--
 .../helpers/authentication-helper.ts          |  6 ++---
 .../browser/src/__legacy__/models/client.ts   |  4 ++--
 .../src/__legacy__/models/web-worker.ts       |  2 +-
 .../src/__legacy__/worker/worker-core.ts      |  6 ++---
 .../src/__legacy__/worker/worker-receiver.ts  |  2 +-
 packages/express/src/__legacy__/client.ts     |  4 ++--
 packages/javascript/src/__legacy__/client.ts  |  6 ++---
 packages/node/src/__legacy__/client.ts        |  8 +++----
 .../src/__legacy__/core/authentication.ts     |  4 ++--
 packages/react/src/__temp__/api.ts            |  4 ++--
 packages/react/src/__temp__/models.ts         |  5 +----
 packages/vue/src/auth-api.ts                  |  4 ++--
 packages/vue/src/plugins/AsgardeoPlugin.ts    |  4 ++--
 packages/vue/src/tests/AsgardeoPlugin.test.ts |  6 ++---
 packages/vue/src/tests/auth-api.test.ts       | 22 +++++++++----------
 packages/vue/src/tests/mocks/mocks.ts         |  6 ++---
 packages/vue/src/tests/useAsgardeo.test.ts    |  2 +-
 packages/vue/src/types.ts                     |  5 +----
 21 files changed, 54 insertions(+), 60 deletions(-)

diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
index f1772209c..e701d6c1a 100755
--- a/packages/browser/src/__legacy__/client.ts
+++ b/packages/browser/src/__legacy__/client.ts
@@ -619,7 +619,7 @@ export class AsgardeoSPAClient {
    *
    * @preserve
    */
-  public async requestCustomGrant(config: CustomGrantConfig): Promise<FetchResponse<any> | BasicUserInfo | undefined> {
+  public async exchangeToken(config: CustomGrantConfig): Promise<FetchResponse<any> | BasicUserInfo | undefined> {
     if (config.signInRequired) {
       await this._validateMethod();
     } else {
@@ -636,7 +636,7 @@ export class AsgardeoSPAClient {
       );
     }
 
-    const customGrantResponse = await this._client?.requestCustomGrant(config);
+    const customGrantResponse = await this._client?.exchangeToken(config);
 
     const customGrantCallback = this._onCustomGrant.get(config.id);
     customGrantCallback && customGrantCallback(this._onCustomGrant?.get(config.id));
diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index 46a75e0a7..9f82f2c49 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -279,8 +279,8 @@ export const MainThreadClient = async (
     }
   };
 
-  const requestCustomGrant = async (config: SPACustomGrantConfig): Promise<BasicUserInfo | FetchResponse> => {
-    return await _authenticationHelper.requestCustomGrant(config, enableRetrievingSignOutURLFromSession);
+  const exchangeToken = async (config: SPACustomGrantConfig): Promise<BasicUserInfo | FetchResponse> => {
+    return await _authenticationHelper.exchangeToken(config, enableRetrievingSignOutURLFromSession);
   };
 
   const refreshAccessToken = async (): Promise<BasicUserInfo> => {
@@ -447,7 +447,7 @@ export const MainThreadClient = async (
     isAuthenticated,
     isSessionActive,
     refreshAccessToken,
-    requestCustomGrant,
+    exchangeToken,
     revokeAccessToken,
     setHttpRequestErrorCallback,
     setHttpRequestFinishCallback,
diff --git a/packages/browser/src/__legacy__/clients/web-worker-client.ts b/packages/browser/src/__legacy__/clients/web-worker-client.ts
index 86604722e..0550287f3 100755
--- a/packages/browser/src/__legacy__/clients/web-worker-client.ts
+++ b/packages/browser/src/__legacy__/clients/web-worker-client.ts
@@ -188,7 +188,7 @@ export const WebWorkerClient = async (
    * @returns {Promise<HttpResponse|boolean>} A promise that resolves with a boolean value or the request
    * response if the the `returnResponse` attribute in the `requestParams` object is set to `true`.
    */
-  const requestCustomGrant = (requestParams: SPACustomGrantConfig): Promise<FetchResponse | BasicUserInfo> => {
+  const exchangeToken = (requestParams: SPACustomGrantConfig): Promise<FetchResponse | BasicUserInfo> => {
     const message: Message<CustomGrantConfig> = {
       data: requestParams,
       type: REQUEST_CUSTOM_GRANT,
@@ -852,7 +852,7 @@ export const WebWorkerClient = async (
     initialize,
     isAuthenticated,
     refreshAccessToken,
-    requestCustomGrant,
+    exchangeToken,
     revokeAccessToken,
     setHttpRequestErrorCallback,
     setHttpRequestFinishCallback,
diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
index afbb51a8a..fbfbe723d 100644
--- a/packages/browser/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -100,7 +100,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     );
   }
 
-  public async requestCustomGrant(
+  public async exchangeToken(
     config: SPACustomGrantConfig,
     enableRetrievingSignOutURLFromSession?: (config: SPACustomGrantConfig) => void,
   ): Promise<BasicUserInfo | FetchResponse> {
@@ -126,7 +126,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     }
     if (useDefaultEndpoint || matches) {
       return this._authenticationClient
-        .requestCustomGrant(config)
+        .exchangeToken(config)
         .then(async (response: FetchResponse | TokenResponse) => {
           if (enableRetrievingSignOutURLFromSession && typeof enableRetrievingSignOutURLFromSession === 'function') {
             enableRetrievingSignOutURLFromSession(config);
@@ -173,7 +173,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
       await this._authenticationClient.refreshAccessToken();
       const customGrantConfig = await this.getCustomGrantConfigData();
       if (customGrantConfig) {
-        await this.requestCustomGrant(customGrantConfig, enableRetrievingSignOutURLFromSession);
+        await this.exchangeToken(customGrantConfig, enableRetrievingSignOutURLFromSession);
       }
       this._spaHelper.refreshAccessTokenAutomatically(this);
 
diff --git a/packages/browser/src/__legacy__/models/client.ts b/packages/browser/src/__legacy__/models/client.ts
index 4825302b8..dfec8e53b 100755
--- a/packages/browser/src/__legacy__/models/client.ts
+++ b/packages/browser/src/__legacy__/models/client.ts
@@ -56,7 +56,7 @@ export interface MainThreadClientInterface {
     },
   ): Promise<BasicUserInfo>;
   signOut(afterSignOutUrl?: string): Promise<boolean>;
-  requestCustomGrant(config: CustomGrantConfig): Promise<BasicUserInfo | FetchResponse>;
+  exchangeToken(config: CustomGrantConfig): Promise<BasicUserInfo | FetchResponse>;
   refreshAccessToken(): Promise<BasicUserInfo>;
   revokeAccessToken(): Promise<boolean>;
   getBasicUserInfo(): Promise<BasicUserInfo>;
@@ -77,7 +77,7 @@ export interface MainThreadClientInterface {
 }
 
 export interface WebWorkerClientInterface {
-  requestCustomGrant(requestParams: CustomGrantConfig): Promise<FetchResponse | BasicUserInfo>;
+  exchangeToken(requestParams: CustomGrantConfig): Promise<FetchResponse | BasicUserInfo>;
   httpRequest<T = any>(config: HttpRequestConfig): Promise<HttpResponse<T>>;
   httpRequestAll<T = any>(configs: HttpRequestConfig[]): Promise<HttpResponse<T>[]>;
   enableHttpHandler(): Promise<boolean>;
diff --git a/packages/browser/src/__legacy__/models/web-worker.ts b/packages/browser/src/__legacy__/models/web-worker.ts
index c88b90625..56dc1c688 100755
--- a/packages/browser/src/__legacy__/models/web-worker.ts
+++ b/packages/browser/src/__legacy__/models/web-worker.ts
@@ -54,7 +54,7 @@ export interface WebWorkerCoreInterface {
   ): Promise<BasicUserInfo>;
   signOut(afterSignOutUrl?: string): Promise<string>;
   getSignOutUrl(afterSignOutUrl?: string): Promise<string>;
-  requestCustomGrant(config: CustomGrantConfig): Promise<BasicUserInfo | FetchResponse>;
+  exchangeToken(config: CustomGrantConfig): Promise<BasicUserInfo | FetchResponse>;
   refreshAccessToken(): Promise<BasicUserInfo>;
   revokeAccessToken(): Promise<boolean>;
   getBasicUserInfo(): Promise<BasicUserInfo>;
diff --git a/packages/browser/src/__legacy__/worker/worker-core.ts b/packages/browser/src/__legacy__/worker/worker-core.ts
index fa747bed0..05cd1475e 100755
--- a/packages/browser/src/__legacy__/worker/worker-core.ts
+++ b/packages/browser/src/__legacy__/worker/worker-core.ts
@@ -138,8 +138,8 @@ export const WebWorkerCore = async (
     return await _authenticationClient.getSignOutUrl();
   };
 
-  const requestCustomGrant = async (config: CustomGrantConfig): Promise<BasicUserInfo | FetchResponse> => {
-    return await _authenticationHelper.requestCustomGrant(config);
+  const exchangeToken = async (config: CustomGrantConfig): Promise<BasicUserInfo | FetchResponse> => {
+    return await _authenticationHelper.exchangeToken(config);
   };
 
   const refreshAccessToken = async (): Promise<BasicUserInfo> => {
@@ -231,7 +231,7 @@ export const WebWorkerCore = async (
     isAuthenticated,
     refreshAccessToken,
     requestAccessToken,
-    requestCustomGrant,
+    exchangeToken,
     revokeAccessToken,
     setHttpRequestFinishCallback,
     setHttpRequestStartCallback,
diff --git a/packages/browser/src/__legacy__/worker/worker-receiver.ts b/packages/browser/src/__legacy__/worker/worker-receiver.ts
index 2f523d8f8..8ea9354c6 100644
--- a/packages/browser/src/__legacy__/worker/worker-receiver.ts
+++ b/packages/browser/src/__legacy__/worker/worker-receiver.ts
@@ -162,7 +162,7 @@ export const workerReceiver = (
         break;
       case REQUEST_CUSTOM_GRANT:
         webWorker
-          .requestCustomGrant(data.data)
+          .exchangeToken(data.data)
           .then(response => {
             port.postMessage(MessageUtils.generateSuccessMessage(response));
           })
diff --git a/packages/express/src/__legacy__/client.ts b/packages/express/src/__legacy__/client.ts
index 5cc24e615..b1cff49d9 100644
--- a/packages/express/src/__legacy__/client.ts
+++ b/packages/express/src/__legacy__/client.ts
@@ -182,8 +182,8 @@ export class AsgardeoExpressClient {
     return this._authClient.getAccessToken(userId);
   }
 
-  public async requestCustomGrant(config: CustomGrantConfig, userId?: string): Promise<TokenResponse | FetchResponse> {
-    return this._authClient.requestCustomGrant(config, userId);
+  public async exchangeToken(config: CustomGrantConfig, userId?: string): Promise<TokenResponse | FetchResponse> {
+    return this._authClient.exchangeToken(config, userId);
   }
 
   public async updateConfig(config: Partial<AuthClientConfig>): Promise<void> {
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 45d736895..a1e7e80e3 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -890,18 +890,18 @@ export class AsgardeoAuthClient<T> {
    *   signInRequired: true
    * }
    *
-   * auth.requestCustomGrant(config).then((response)=>{
+   * auth.exchangeToken(config).then((response)=>{
    *  // console.log(response);
    * }).catch((error)=>{
    *  // console.error(error);
    * });
    * ```
    *
-   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#requestCustomGrant}
+   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#exchangeToken}
    *
    * @preserve
    */
-  public async requestCustomGrant(config: CustomGrantConfig, userId?: string): Promise<TokenResponse | FetchResponse> {
+  public async exchangeToken(config: CustomGrantConfig, userId?: string): Promise<TokenResponse | FetchResponse> {
     const oidcProviderMetadata: OIDCDiscoveryApiResponse = await this._oidcProviderMetaData();
     const configData: StrictAuthClientConfig = await this._config();
 
diff --git a/packages/node/src/__legacy__/client.ts b/packages/node/src/__legacy__/client.ts
index 3b630d4c6..019124dcc 100644
--- a/packages/node/src/__legacy__/client.ts
+++ b/packages/node/src/__legacy__/client.ts
@@ -287,20 +287,20 @@ export class AsgardeoNodeClient<T> {
      *      signInRequired: true
      * }
 
-     * auth.requestCustomGrant(config).then((response)=>{
+     * auth.exchangeToken(config).then((response)=>{
      *     console.log(response);
      * }).catch((error)=>{
      *     console.error(error);
      * });
      * ```
      *
-     * @link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#requestCustomGrant
+     * @link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#exchangeToken
      *
      * @memberof AsgardeoNodeClient
      *
      */
-  public async requestCustomGrant(config: CustomGrantConfig, userId?: string): Promise<TokenResponse | FetchResponse> {
-    return this._authCore.requestCustomGrant(config, userId);
+  public async exchangeToken(config: CustomGrantConfig, userId?: string): Promise<TokenResponse | FetchResponse> {
+    return this._authCore.exchangeToken(config, userId);
   }
 
   /**
diff --git a/packages/node/src/__legacy__/core/authentication.ts b/packages/node/src/__legacy__/core/authentication.ts
index 43c18a02e..37a838891 100644
--- a/packages/node/src/__legacy__/core/authentication.ts
+++ b/packages/node/src/__legacy__/core/authentication.ts
@@ -228,8 +228,8 @@ export class AsgardeoNodeCore<T> {
     return this._auth.getAccessToken(userId);
   }
 
-  public async requestCustomGrant(config: CustomGrantConfig, userId?: string): Promise<TokenResponse | FetchResponse> {
-    return this._auth.requestCustomGrant(config, userId);
+  public async exchangeToken(config: CustomGrantConfig, userId?: string): Promise<TokenResponse | FetchResponse> {
+    return this._auth.exchangeToken(config, userId);
   }
 
   public async updateConfig(config: Partial<AuthClientConfig<T>>): Promise<void> {
diff --git a/packages/react/src/__temp__/api.ts b/packages/react/src/__temp__/api.ts
index b36776a1b..801aa856b 100644
--- a/packages/react/src/__temp__/api.ts
+++ b/packages/react/src/__temp__/api.ts
@@ -225,13 +225,13 @@ class AuthAPI {
    * @return {Promise<FetchResponse<any> | SignInResponse>} - A Promise that resolves with
    * the value returned by the custom grant request.
    */
-  public requestCustomGrant(
+  public exchangeToken(
     config: SPACustomGrantConfig,
     callback: (response: BasicUserInfo | FetchResponse<any>) => void,
     dispatch: (state: AuthStateInterface) => void,
   ): Promise<BasicUserInfo | FetchResponse<any>> {
     return this._client
-      .requestCustomGrant(config)
+      .exchangeToken(config)
       .then((response: BasicUserInfo | FetchResponse<any>) => {
         if (!response) {
           return null; // FIXME: Validate this. Temp fix for: error TS7030: Not all code paths return a value.
diff --git a/packages/react/src/__temp__/models.ts b/packages/react/src/__temp__/models.ts
index c8c5dbe4c..02fcbddc2 100644
--- a/packages/react/src/__temp__/models.ts
+++ b/packages/react/src/__temp__/models.ts
@@ -100,10 +100,7 @@ export interface AuthContextInterface {
   getBasicUserInfo(): Promise<BasicUserInfo>;
   httpRequest(config: HttpRequestConfig): Promise<HttpResponse<any>>;
   httpRequestAll(configs: HttpRequestConfig[]): Promise<HttpResponse<any>[]>;
-  requestCustomGrant(
-    config: CustomGrantConfig,
-    callback?: (response: BasicUserInfo | FetchResponse<any>) => void,
-  ): void;
+  exchangeToken(config: CustomGrantConfig, callback?: (response: BasicUserInfo | FetchResponse<any>) => void): void;
   revokeAccessToken(): Promise<boolean>;
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   getHttpClient(): Promise<HttpClientInstance>;
diff --git a/packages/vue/src/auth-api.ts b/packages/vue/src/auth-api.ts
index 5c4c7d7e9..9d13e5430 100644
--- a/packages/vue/src/auth-api.ts
+++ b/packages/vue/src/auth-api.ts
@@ -181,12 +181,12 @@ class AuthAPI {
    * @return {Promise<FetchResponse<any> | SignInResponse>} a promise that resolves with
    * the value returned by the custom grant request.
    */
-  public requestCustomGrant(
+  public exchangeToken(
     config: SPACustomGrantConfig,
     callback?: (response: BasicUserInfo | FetchResponse<any>) => void,
   ): Promise<BasicUserInfo | FetchResponse<any>> {
     return this._client
-      .requestCustomGrant(config)
+      .exchangeToken(config)
       .then((response: BasicUserInfo | FetchResponse<any>) => {
         if (!response) {
           return response;
diff --git a/packages/vue/src/plugins/AsgardeoPlugin.ts b/packages/vue/src/plugins/AsgardeoPlugin.ts
index c9bc4c782..49b53b157 100644
--- a/packages/vue/src/plugins/AsgardeoPlugin.ts
+++ b/packages/vue/src/plugins/AsgardeoPlugin.ts
@@ -175,12 +175,12 @@ export const asgardeoPlugin: Plugin = {
         }
       },
       refreshAccessToken: (): Promise<BasicUserInfo> => AuthClient.refreshAccessToken(),
-      requestCustomGrant: async (
+      exchangeToken: async (
         config: CustomGrantConfig,
         callback?: (response: BasicUserInfo | FetchResponse<any>) => void,
       ): Promise<BasicUserInfo | FetchResponse<any>> => {
         try {
-          const response: BasicUserInfo | FetchResponse<any> = await AuthClient.requestCustomGrant(config);
+          const response: BasicUserInfo | FetchResponse<any> = await AuthClient.exchangeToken(config);
           callback?.(response);
           return response;
         } catch (err) {
diff --git a/packages/vue/src/tests/AsgardeoPlugin.test.ts b/packages/vue/src/tests/AsgardeoPlugin.test.ts
index 7b75465a1..e41f5034b 100644
--- a/packages/vue/src/tests/AsgardeoPlugin.test.ts
+++ b/packages/vue/src/tests/AsgardeoPlugin.test.ts
@@ -253,11 +253,11 @@ describe('asgardeoPlugin', () => {
       sessionState: 'test',
     };
 
-    mockAuthAPI.requestCustomGrant.mockResolvedValueOnce(customGrantResponse);
+    mockAuthAPI.exchangeToken.mockResolvedValueOnce(customGrantResponse);
 
-    authContext.requestCustomGrant(customGrantConfig);
+    authContext.exchangeToken(customGrantConfig);
 
-    expect(mockAuthAPI.requestCustomGrant).toHaveBeenCalledWith(customGrantConfig);
+    expect(mockAuthAPI.exchangeToken).toHaveBeenCalledWith(customGrantConfig);
   });
 
   it('should properly register event handlers with the on method', async () => {
diff --git a/packages/vue/src/tests/auth-api.test.ts b/packages/vue/src/tests/auth-api.test.ts
index c4b1b71a1..ae3e8850a 100644
--- a/packages/vue/src/tests/auth-api.test.ts
+++ b/packages/vue/src/tests/auth-api.test.ts
@@ -221,8 +221,8 @@ describe('AuthAPI', () => {
     });
   });
 
-  describe('requestCustomGrant', () => {
-    it('should call requestCustomGrant on the client', async () => {
+  describe('exchangeToken', () => {
+    it('should call exchangeToken on the client', async () => {
       const config: SPACustomGrantConfig = {
         attachToken: false,
         data: {key: 'value'},
@@ -232,9 +232,9 @@ describe('AuthAPI', () => {
       };
       const callback: Mock = vi.fn();
 
-      const result: BasicUserInfo | FetchResponse<any> = await authApi.requestCustomGrant(config, callback);
+      const result: BasicUserInfo | FetchResponse<any> = await authApi.exchangeToken(config, callback);
 
-      expect(mockClient.requestCustomGrant).toHaveBeenCalledWith(config);
+      expect(mockClient.exchangeToken).toHaveBeenCalledWith(config);
       expect(callback).toHaveBeenCalledWith(result);
 
       // Check state updates for returnsSession = true
@@ -256,7 +256,7 @@ describe('AuthAPI', () => {
         signInRequired: true,
       };
 
-      await authApi.requestCustomGrant(config);
+      await authApi.exchangeToken(config);
 
       // State should not be updated for session properties
       expect(authApi.getState().username).toBe('');
@@ -264,7 +264,7 @@ describe('AuthAPI', () => {
     });
 
     it('should handle null response', async () => {
-      mockClient.requestCustomGrant.mockResolvedValueOnce(null);
+      mockClient.exchangeToken.mockResolvedValueOnce(null);
       const config: SPACustomGrantConfig = {
         attachToken: false,
         data: {key: 'value'},
@@ -273,7 +273,7 @@ describe('AuthAPI', () => {
         signInRequired: true,
       };
 
-      const result: BasicUserInfo | FetchResponse<any> = await authApi.requestCustomGrant(config);
+      const result: BasicUserInfo | FetchResponse<any> = await authApi.exchangeToken(config);
       expect(result).toBeNull();
     });
 
@@ -284,7 +284,7 @@ describe('AuthAPI', () => {
         'Custom grant failed',
       );
 
-      mockClient.requestCustomGrant.mockRejectedValueOnce(error);
+      mockClient.exchangeToken.mockRejectedValueOnce(error);
 
       const config: SPACustomGrantConfig = {
         attachToken: false,
@@ -294,7 +294,7 @@ describe('AuthAPI', () => {
         signInRequired: true,
       };
 
-      await expect(authApi.requestCustomGrant(config)).rejects.toThrow('Custom grant failed');
+      await expect(authApi.exchangeToken(config)).rejects.toThrow('Custom grant failed');
     });
   });
 
@@ -490,7 +490,7 @@ describe('AuthAPI', () => {
         'Custom grant failed',
       );
 
-      mockClient.requestCustomGrant.mockRejectedValueOnce(error);
+      mockClient.exchangeToken.mockRejectedValueOnce(error);
 
       const config: SPACustomGrantConfig = {
         attachToken: false,
@@ -500,7 +500,7 @@ describe('AuthAPI', () => {
         signInRequired: true,
       };
 
-      await expect(authApi.requestCustomGrant(config)).rejects.toThrow('Custom grant failed');
+      await expect(authApi.exchangeToken(config)).rejects.toThrow('Custom grant failed');
     });
   });
 });
diff --git a/packages/vue/src/tests/mocks/mocks.ts b/packages/vue/src/tests/mocks/mocks.ts
index 7acfcdedc..7247bf24b 100644
--- a/packages/vue/src/tests/mocks/mocks.ts
+++ b/packages/vue/src/tests/mocks/mocks.ts
@@ -58,7 +58,7 @@ export type MockAuthAPI = {
   isSessionActive: Mock;
   on: Mock;
   refreshAccessToken: Mock;
-  requestCustomGrant: Mock;
+  exchangeToken: Mock;
   revokeAccessToken: Mock;
   signIn: Mock;
   signOut: Mock;
@@ -94,7 +94,7 @@ export const mockAuthAPI: MockAuthAPI = {
     email: 'test@example.com',
     username: 'testUser',
   }),
-  requestCustomGrant: vi.fn().mockResolvedValue({
+  exchangeToken: vi.fn().mockResolvedValue({
     displayName: 'Test User',
     email: 'test@example.com',
     username: 'testUser',
@@ -142,7 +142,7 @@ export const mockAsgardeoSPAClient: Partial<AsgardeoSPAClient> = {
     email: 'test@example.com',
     username: 'testUser',
   }),
-  requestCustomGrant: vi.fn().mockResolvedValue({
+  exchangeToken: vi.fn().mockResolvedValue({
     displayName: 'Test User',
     email: 'test@example.com',
     username: 'testUser',
diff --git a/packages/vue/src/tests/useAsgardeo.test.ts b/packages/vue/src/tests/useAsgardeo.test.ts
index 4a8233c27..0ac52bde2 100644
--- a/packages/vue/src/tests/useAsgardeo.test.ts
+++ b/packages/vue/src/tests/useAsgardeo.test.ts
@@ -49,7 +49,7 @@ describe('useAsgardeo', () => {
     isAuthenticated: vi.fn().mockResolvedValue(true),
     on: vi.fn(),
     refreshAccessToken: vi.fn().mockResolvedValue({} as BasicUserInfo),
-    requestCustomGrant: vi.fn(),
+    exchangeToken: vi.fn(),
     revokeAccessToken: vi.fn().mockResolvedValue(true),
     signIn: vi.fn().mockResolvedValue({} as BasicUserInfo),
     signOut: vi.fn().mockResolvedValue(true),
diff --git a/packages/vue/src/types.ts b/packages/vue/src/types.ts
index b2a401194..ed2b102a1 100644
--- a/packages/vue/src/types.ts
+++ b/packages/vue/src/types.ts
@@ -107,10 +107,7 @@ export interface AuthContextInterface {
   on(hook: Exclude<Hooks, Hooks.CustomGrant>, callback: (response?: any) => void): void;
   on(hook: Hooks, callback: (response?: any) => void, id?: string): void;
   refreshAccessToken(): Promise<BasicUserInfo>;
-  requestCustomGrant(
-    config: CustomGrantConfig,
-    callback?: (response: BasicUserInfo | FetchResponse<any>) => void,
-  ): void;
+  exchangeToken(config: CustomGrantConfig, callback?: (response: BasicUserInfo | FetchResponse<any>) => void): void;
   revokeAccessToken(): Promise<boolean>;
   signIn: (
     config?: SignInConfig,

From 0a137c60f493ef66b4bc80af9a7f948bd7464bd8 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Tue, 10 Jun 2025 15:33:45 +0530
Subject: [PATCH 038/131] chore: rename authentication methods from
 `isAuthenticated` to `isSignedIn` across the codebase

- Updated method names in AsgardeoSPAClient, MainThreadClient, WebWorkerClient, AuthenticationHelper, and other related files.
- Adjusted corresponding interface definitions in models and helper files.
- Modified usage in middleware, plugins, and tests to reflect the new method names.
- Ensured consistency in documentation and examples throughout the codebase.
---
 docs/src/react/hooks/use-authentication.md    |  8 +--
 .../react/src/components/SignIn/SignIn.tsx    |  6 +--
 .../src/components/SignedIn/SignedIn.tsx      |  4 +-
 .../src/components/SignedOut/SignedOut.tsx    |  4 +-
 .../react/src/hooks/use-authentication.ts     |  6 +--
 .../react/src/models/auth-context.ts          |  2 +-
 .../react/src/models/use-authentication.ts    |  2 +-
 .../react/src/providers/AsgardeoProvider.tsx  |  8 +--
 packages/browser/src/__legacy__/client.ts     |  6 +--
 .../__legacy__/clients/main-thread-client.ts  |  8 +--
 .../__legacy__/clients/web-worker-client.ts   |  6 +--
 .../helpers/authentication-helper.ts          |  6 +--
 .../browser/src/__legacy__/models/client.ts   |  4 +-
 .../src/__legacy__/models/web-worker.ts       |  2 +-
 .../src/__legacy__/worker/worker-core.ts      |  6 +--
 .../src/__legacy__/worker/worker-receiver.ts  |  2 +-
 packages/express/src/__legacy__/client.ts     |  4 +-
 .../__legacy__/middleware/protect-route.ts    | 54 +++++++++----------
 packages/javascript/src/__legacy__/client.ts  | 10 ++--
 packages/javascript/src/models/client.ts      |  2 +-
 packages/nextjs/src/AsgardeoNextClient.ts     |  6 +--
 packages/node/src/__legacy__/client.ts        |  8 +--
 .../src/__legacy__/core/authentication.ts     |  8 +--
 .../runtime/composables/asgardeo/useAuth.ts   |  6 +--
 packages/nuxt/src/runtime/server/handler.ts   |  4 +-
 packages/nuxt/src/runtime/types.ts            |  2 +-
 packages/react/src/__temp__/api.ts            | 22 ++++----
 packages/react/src/__temp__/models.ts         |  4 +-
 packages/vue/README.md                        |  4 +-
 packages/vue/src/auth-api.ts                  | 16 +++---
 packages/vue/src/plugins/AsgardeoPlugin.ts    | 12 ++---
 packages/vue/src/tests/AsgardeoPlugin.test.ts | 12 ++---
 packages/vue/src/tests/auth-api.test.ts       | 32 +++++------
 packages/vue/src/tests/mocks/mocks.ts         | 10 ++--
 packages/vue/src/tests/useAsgardeo.test.ts    |  4 +-
 packages/vue/src/types.ts                     |  4 +-
 recipes/nuxt-vite/pages/index.vue             |  4 +-
 recipes/nuxt-vite/pages/login.vue             |  4 +-
 recipes/vue-vite/README.md                    |  4 +-
 .../vue-vite/src/components/AuthLayout.vue    |  4 +-
 recipes/vue-vite/src/router/index.ts          |  4 +-
 recipes/vue-vite/src/views/LandingView.vue    |  2 +-
 42 files changed, 161 insertions(+), 165 deletions(-)

diff --git a/docs/src/react/hooks/use-authentication.md b/docs/src/react/hooks/use-authentication.md
index 9b28b64c6..1d13626c1 100644
--- a/docs/src/react/hooks/use-authentication.md
+++ b/docs/src/react/hooks/use-authentication.md
@@ -31,7 +31,7 @@ import { useAuthentication } from "@asgardeo/react";
 Then, you can use it in your component:
 
 ```ts
-const { user, isAuthenticated, accessToken, signOut } = useAuthentication();
+const { user, isSignedIn, accessToken, signOut } = useAuthentication();
 ```
 
 ## Return Value
@@ -40,7 +40,7 @@ The `useAuthentication` hook returns an object with the following properties:
 
 - `user`: The current user. This is an object that contains information about the user.
 
-- `isAuthenticated`: A boolean that indicates whether the user is authenticated.
+- `isSignedIn`: A boolean that indicates whether the user is authenticated.
 
 - `accessToken`: The access token for the authenticated user.
 
@@ -49,9 +49,9 @@ The `useAuthentication` hook returns an object with the following properties:
 Here's an example of how to use these values:
 
 ```ts
-const { user, isAuthenticated, signOut } = useAuthentication();
+const { user, isSignedIn, signOut } = useAuthentication();
 
-if (isAuthenticated) {
+if (isSignedIn) {
   console.log(`User ${user.username} is authenticated.`);
 } else {
   console.log("User is not authenticated.");
diff --git a/packages/__legacy__/react/src/components/SignIn/SignIn.tsx b/packages/__legacy__/react/src/components/SignIn/SignIn.tsx
index 28fe83927..9500ccaf0 100644
--- a/packages/__legacy__/react/src/components/SignIn/SignIn.tsx
+++ b/packages/__legacy__/react/src/components/SignIn/SignIn.tsx
@@ -78,7 +78,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
   const [showSelfSignUp, setShowSelfSignUp] = useState<boolean>(showSignUp);
   const [componentBranding, setComponentBranding] = useState<Branding>();
 
-  const {isAuthenticated} = useAuthentication();
+  const {isSignedIn} = useAuthentication();
   const {config} = useConfig();
 
   const authContext: AuthContext | undefined = useContext(AsgardeoContext);
@@ -368,7 +368,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
         {showLogo && !(isLoading || authContext?.isComponentLoading) && (
           <UISignIn.Image className="asgardeo-sign-in-logo" src={imgUrl} />
         )}
-        {authContext?.authResponse?.flowStatus !== FlowStatus.SuccessCompleted && !isAuthenticated && (
+        {authContext?.authResponse?.flowStatus !== FlowStatus.SuccessCompleted && !isSignedIn && (
           <>
             {renderSignIn()}
 
@@ -397,7 +397,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
             )}
           </>
         )}
-        {(authContext?.authResponse?.flowStatus === FlowStatus.SuccessCompleted || isAuthenticated) && (
+        {(authContext?.authResponse?.flowStatus === FlowStatus.SuccessCompleted || isSignedIn) && (
           <div style={{backgroundColor: 'white', padding: '1rem'}}>Successfully Authenticated</div>
         )}
       </UISignIn>
diff --git a/packages/__legacy__/react/src/components/SignedIn/SignedIn.tsx b/packages/__legacy__/react/src/components/SignedIn/SignedIn.tsx
index 8f719714f..58dabe2a8 100644
--- a/packages/__legacy__/react/src/components/SignedIn/SignedIn.tsx
+++ b/packages/__legacy__/react/src/components/SignedIn/SignedIn.tsx
@@ -30,9 +30,9 @@ import SignedProps from '../../models/signed-props';
  */
 const SignedIn: FC<PropsWithChildren<SignedProps>> = (props: PropsWithChildren<SignedProps>) => {
   const {fallback = null, children} = props;
-  const {isAuthenticated} = useAuthentication();
+  const {isSignedIn} = useAuthentication();
 
-  return isAuthenticated ? children : fallback;
+  return isSignedIn ? children : fallback;
 };
 
 export default SignedIn;
diff --git a/packages/__legacy__/react/src/components/SignedOut/SignedOut.tsx b/packages/__legacy__/react/src/components/SignedOut/SignedOut.tsx
index b6aa0c273..1e5825a4b 100644
--- a/packages/__legacy__/react/src/components/SignedOut/SignedOut.tsx
+++ b/packages/__legacy__/react/src/components/SignedOut/SignedOut.tsx
@@ -30,9 +30,9 @@ import SignedProps from '../../models/signed-props';
  */
 const SignedOut: FC<PropsWithChildren<SignedProps>> = (props: PropsWithChildren<SignedProps>) => {
   const {fallback = null, children} = props;
-  const {isAuthenticated} = useAuthentication();
+  const {isSignedIn} = useAuthentication();
 
-  return !isAuthenticated ? children : fallback;
+  return !isSignedIn ? children : fallback;
 };
 
 export default SignedOut;
diff --git a/packages/__legacy__/react/src/hooks/use-authentication.ts b/packages/__legacy__/react/src/hooks/use-authentication.ts
index 43802cfa5..08e753957 100644
--- a/packages/__legacy__/react/src/hooks/use-authentication.ts
+++ b/packages/__legacy__/react/src/hooks/use-authentication.ts
@@ -26,13 +26,13 @@ import UseAuthentication from '../models/use-authentication';
  * `useAuthentication` is a custom hook that provides access to the authentication context.
  * It returns an object containing the current user, the authentication status, the access token, and a sign out function.
  *
- * @returns {UseAuthentication} An object containing the current user (`user`), the authentication status (`isAuthenticated`),
+ * @returns {UseAuthentication} An object containing the current user (`user`), the authentication status (`isSignedIn`),
  * the access token (`accessToken`), and a sign out function (`signOut`).
  */
 const useAuthentication = (): UseAuthentication => {
   const contextValue: AuthContext = useContext(AsgardeoContext);
 
-  const {accessToken, authResponse, isAuthenticated, isGlobalLoading, setUsername, user, username} = contextValue;
+  const {accessToken, authResponse, isSignedIn, isGlobalLoading, setUsername, user, username} = contextValue;
 
   const signOut: () => void = () => {
     signOutApiCall().then(() => {
@@ -46,7 +46,7 @@ const useAuthentication = (): UseAuthentication => {
   return {
     accessToken,
     authResponse,
-    isAuthenticated,
+    isSignedIn,
     isGlobalLoading,
     setUsername,
     signOut,
diff --git a/packages/__legacy__/react/src/models/auth-context.ts b/packages/__legacy__/react/src/models/auth-context.ts
index 8bebb9662..4a1e1f932 100644
--- a/packages/__legacy__/react/src/models/auth-context.ts
+++ b/packages/__legacy__/react/src/models/auth-context.ts
@@ -23,7 +23,7 @@ interface AuthContext {
   authResponse: AuthApiResponse;
   config: UIAuthConfig;
   isAuthLoading: boolean;
-  isAuthenticated: boolean | undefined;
+  isSignedIn: boolean | undefined;
   isBrandingLoading: boolean;
   isComponentLoading: boolean;
   isGlobalLoading: boolean;
diff --git a/packages/__legacy__/react/src/models/use-authentication.ts b/packages/__legacy__/react/src/models/use-authentication.ts
index ac52bd891..d48692d88 100644
--- a/packages/__legacy__/react/src/models/use-authentication.ts
+++ b/packages/__legacy__/react/src/models/use-authentication.ts
@@ -21,7 +21,7 @@ import {AuthApiResponse, MeAPIResponse} from '@asgardeo/js';
 interface UseAuthentication {
   accessToken: string;
   authResponse: AuthApiResponse;
-  isAuthenticated: Promise<boolean> | boolean;
+  isSignedIn: Promise<boolean> | boolean;
   isGlobalLoading: boolean;
   setUsername: (username: string) => void;
   signOut: () => void;
diff --git a/packages/__legacy__/react/src/providers/AsgardeoProvider.tsx b/packages/__legacy__/react/src/providers/AsgardeoProvider.tsx
index 7d21c417c..971dcc98b 100644
--- a/packages/__legacy__/react/src/providers/AsgardeoProvider.tsx
+++ b/packages/__legacy__/react/src/providers/AsgardeoProvider.tsx
@@ -53,7 +53,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = (
   const {children, config, store, branding} = props;
 
   const [accessToken, setAccessToken] = useState<string>('');
-  const [isAuthenticated, setIsAuthenticated] = useState<boolean>();
+  const [isSignedIn, setIsAuthenticated] = useState<boolean>();
   const [user, setUser] = useState<MeAPIResponse>();
   const [isBrandingLoading, setIsBrandingLoading] = useState<boolean>(true);
   const [isTextLoading, setIsTextLoading] = useState<boolean>(true);
@@ -89,7 +89,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = (
    * Sets the authentication status and access token.
    */
   const setAuthentication: () => void = useCallback((): void => {
-    authClient.isAuthenticated().then((isAuth: boolean) => {
+    authClient.isSignedIn().then((isAuth: boolean) => {
       setIsAuthenticated(isAuth);
 
       if (isAuth) {
@@ -135,7 +135,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = (
       authResponse,
       config,
       isAuthLoading,
-      isAuthenticated,
+      isSignedIn,
       isBrandingLoading,
       isComponentLoading,
       isGlobalLoading: isAuthLoading || isBrandingLoading || isComponentLoading || isTextLoading,
@@ -158,7 +158,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = (
       authResponse,
       config,
       isAuthLoading,
-      isAuthenticated,
+      isSignedIn,
       isBrandingLoading,
       isComponentLoading,
       isTextLoading,
diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
index e701d6c1a..3b7341e0b 100755
--- a/packages/browser/src/__legacy__/client.ts
+++ b/packages/browser/src/__legacy__/client.ts
@@ -158,7 +158,7 @@ export class AsgardeoSPAClient {
       );
     }
 
-    if (validateAuthentication && !(await this.isAuthenticated())) {
+    if (validateAuthentication && !(await this.isSignedIn())) {
       return Promise.reject(
         new AsgardeoAuthException(
           'SPA-AUTH_CLIENT-VM-IV02',
@@ -983,10 +983,10 @@ export class AsgardeoSPAClient {
    *
    * @preserve
    */
-  public async isAuthenticated(): Promise<boolean | undefined> {
+  public async isSignedIn(): Promise<boolean | undefined> {
     await this._isInitialized();
 
-    return this._client?.isAuthenticated();
+    return this._client?.isSignedIn();
   }
 
   /**
diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index 9f82f2c49..7a7497d37 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -255,7 +255,7 @@ export const MainThreadClient = async (
   };
 
   const signOut = async (): Promise<boolean> => {
-    if ((await _authenticationClient.isAuthenticated()) && !_getSignOutURLFromSessionStorage) {
+    if ((await _authenticationClient.isSignedIn()) && !_getSignOutURLFromSessionStorage) {
       location.href = await _authenticationClient.getSignOutUrl();
     } else {
       location.href = SPAUtils.getSignOutUrl(config.clientId, instanceID);
@@ -400,8 +400,8 @@ export const MainThreadClient = async (
     return await _dataLayer.getConfigData();
   };
 
-  const isAuthenticated = async (): Promise<boolean> => {
-    return _authenticationHelper.isAuthenticated();
+  const isSignedIn = async (): Promise<boolean> => {
+    return _authenticationHelper.isSignedIn();
   };
 
   const isSessionActive = async (): Promise<boolean> => {
@@ -444,7 +444,7 @@ export const MainThreadClient = async (
     getOpenIDProviderEndpoints,
     httpRequest,
     httpRequestAll,
-    isAuthenticated,
+    isSignedIn,
     isSessionActive,
     refreshAccessToken,
     exchangeToken,
diff --git a/packages/browser/src/__legacy__/clients/web-worker-client.ts b/packages/browser/src/__legacy__/clients/web-worker-client.ts
index 0550287f3..4a01e7b36 100755
--- a/packages/browser/src/__legacy__/clients/web-worker-client.ts
+++ b/packages/browser/src/__legacy__/clients/web-worker-client.ts
@@ -531,7 +531,7 @@ export const WebWorkerClient = async (
   };
 
   const tryRetrievingUserInfo = async (): Promise<BasicUserInfo | undefined> => {
-    if (await isAuthenticated()) {
+    if (await isSignedIn()) {
       await startAutoRefreshToken();
 
       // Enable OIDC Sessions Management only if it is set to true in the config.
@@ -763,7 +763,7 @@ export const WebWorkerClient = async (
       });
   };
 
-  const isAuthenticated = (): Promise<boolean> => {
+  const isSignedIn = (): Promise<boolean> => {
     const message: Message<null> = {
       type: IS_AUTHENTICATED,
     };
@@ -850,7 +850,7 @@ export const WebWorkerClient = async (
     httpRequest,
     httpRequestAll,
     initialize,
-    isAuthenticated,
+    isSignedIn,
     refreshAccessToken,
     exchangeToken,
     revokeAccessToken,
diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
index fbfbe723d..a83306196 100644
--- a/packages/browser/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -602,7 +602,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     }
 
     if (config.storage !== BrowserStorage.WebWorker) {
-      if (await this._authenticationClient.isAuthenticated()) {
+      if (await this._authenticationClient.isSignedIn()) {
         this._spaHelper.clearRefreshTokenTimeout();
         this._spaHelper.refreshAccessTokenAutomatically(this);
 
@@ -692,7 +692,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     return this._storageManager;
   }
 
-  public async isAuthenticated(): Promise<boolean> {
-    return this._authenticationClient.isAuthenticated();
+  public async isSignedIn(): Promise<boolean> {
+    return this._authenticationClient.isSignedIn();
   }
 }
diff --git a/packages/browser/src/__legacy__/models/client.ts b/packages/browser/src/__legacy__/models/client.ts
index dfec8e53b..60ea9e5f2 100755
--- a/packages/browser/src/__legacy__/models/client.ts
+++ b/packages/browser/src/__legacy__/models/client.ts
@@ -67,7 +67,7 @@ export interface MainThreadClientInterface {
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   getAccessToken(): Promise<string>;
   getStorageManager(): Promise<StorageManager<MainThreadClientConfig>>;
-  isAuthenticated(): Promise<boolean>;
+  isSignedIn(): Promise<boolean>;
   updateConfig(config: Partial<AuthClientConfig<MainThreadClientConfig>>): Promise<void>;
   trySignInSilently(
     additionalParams?: Record<string, string | boolean>,
@@ -101,7 +101,7 @@ export interface WebWorkerClientInterface {
   getDecodedIDPIDToken(): Promise<IdTokenPayload>;
   getCrypto(): Promise<IsomorphicCrypto>;
   getIDToken(): Promise<string>;
-  isAuthenticated(): Promise<boolean>;
+  isSignedIn(): Promise<boolean>;
   setHttpRequestSuccessCallback(callback: (response: HttpResponse) => void): void;
   setHttpRequestErrorCallback(callback: (response: HttpError) => void | Promise<void>): void;
   setHttpRequestStartCallback(callback: () => void): void;
diff --git a/packages/browser/src/__legacy__/models/web-worker.ts b/packages/browser/src/__legacy__/models/web-worker.ts
index 56dc1c688..5466b6641 100755
--- a/packages/browser/src/__legacy__/models/web-worker.ts
+++ b/packages/browser/src/__legacy__/models/web-worker.ts
@@ -64,7 +64,7 @@ export interface WebWorkerCoreInterface {
   getIDToken(): Promise<string>;
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   getAccessToken(): Promise<string>;
-  isAuthenticated(): Promise<boolean>;
+  isSignedIn(): Promise<boolean>;
   startAutoRefreshToken(): Promise<void>;
   setSessionState(sessionState: string): Promise<void>;
   updateConfig(config: Partial<AuthClientConfig<WebWorkerClientConfig>>): Promise<void>;
diff --git a/packages/browser/src/__legacy__/worker/worker-core.ts b/packages/browser/src/__legacy__/worker/worker-core.ts
index 05cd1475e..552dadf5d 100755
--- a/packages/browser/src/__legacy__/worker/worker-core.ts
+++ b/packages/browser/src/__legacy__/worker/worker-core.ts
@@ -190,8 +190,8 @@ export const WebWorkerCore = async (
     return _authenticationHelper.getAccessToken();
   };
 
-  const isAuthenticated = (): Promise<boolean> => {
-    return _authenticationHelper.isAuthenticated();
+  const isSignedIn = (): Promise<boolean> => {
+    return _authenticationHelper.isSignedIn();
   };
 
   const setSessionState = async (sessionState: string): Promise<void> => {
@@ -228,7 +228,7 @@ export const WebWorkerCore = async (
     getSignOutUrl,
     httpRequest,
     httpRequestAll,
-    isAuthenticated,
+    isSignedIn,
     refreshAccessToken,
     requestAccessToken,
     exchangeToken,
diff --git a/packages/browser/src/__legacy__/worker/worker-receiver.ts b/packages/browser/src/__legacy__/worker/worker-receiver.ts
index 8ea9354c6..278f700d9 100644
--- a/packages/browser/src/__legacy__/worker/worker-receiver.ts
+++ b/packages/browser/src/__legacy__/worker/worker-receiver.ts
@@ -233,7 +233,7 @@ export const workerReceiver = (
         break;
       case IS_AUTHENTICATED:
         try {
-          port.postMessage(MessageUtils.generateSuccessMessage(await webWorker.isAuthenticated()));
+          port.postMessage(MessageUtils.generateSuccessMessage(await webWorker.isSignedIn()));
         } catch (error) {
           port.postMessage(MessageUtils.generateFailureMessage(error));
         }
diff --git a/packages/express/src/__legacy__/client.ts b/packages/express/src/__legacy__/client.ts
index b1cff49d9..379eb9135 100644
--- a/packages/express/src/__legacy__/client.ts
+++ b/packages/express/src/__legacy__/client.ts
@@ -158,8 +158,8 @@ export class AsgardeoExpressClient {
     return this._authClient.signOut(userId);
   }
 
-  public async isAuthenticated(userId: string): Promise<boolean> {
-    return this._authClient.isAuthenticated(userId);
+  public async isSignedIn(userId: string): Promise<boolean> {
+    return this._authClient.isSignedIn(userId);
   }
 
   public async getIDToken(userId: string): Promise<string> {
diff --git a/packages/express/src/__legacy__/middleware/protect-route.ts b/packages/express/src/__legacy__/middleware/protect-route.ts
index a4746606c..545e0d598 100644
--- a/packages/express/src/__legacy__/middleware/protect-route.ts
+++ b/packages/express/src/__legacy__/middleware/protect-route.ts
@@ -16,37 +16,37 @@
  * under the License.
  */
 
-import express from "express";
-import { AsgardeoExpressClient } from "../client";
-import { UnauthenticatedCallback } from "../models";
-import { Logger } from "@asgardeo/node";
+import express from 'express';
+import {AsgardeoExpressClient} from '../client';
+import {UnauthenticatedCallback} from '../models';
+import {Logger} from '@asgardeo/node';
 
 export const protectRoute = (
-    asgardeoExpressClient: AsgardeoExpressClient,
-    callback: UnauthenticatedCallback
+  asgardeoExpressClient: AsgardeoExpressClient,
+  callback: UnauthenticatedCallback,
 ): ((req: express.Request, res: express.Response, next: express.nextFunction) => Promise<void>) => {
-    return async (req: express.Request, res: express.Response, next: express.nextFunction): Promise<void> => {
-        if (req.cookies.ASGARDEO_SESSION_ID === undefined) {
-            Logger.error("No session ID found in the request cookies");
+  return async (req: express.Request, res: express.Response, next: express.nextFunction): Promise<void> => {
+    if (req.cookies.ASGARDEO_SESSION_ID === undefined) {
+      Logger.error('No session ID found in the request cookies');
 
-            if (callback(res, "Unauthenticated")) {
-                return;
-            }
+      if (callback(res, 'Unauthenticated')) {
+        return;
+      }
 
-            return next();
-        } else {
-            //validate the cookie
-            const isCookieValid = await asgardeoExpressClient.isAuthenticated(req.cookies.ASGARDEO_SESSION_ID);
-            if (isCookieValid) {
-                return next();
-            } else {
-                Logger.error("Invalid session ID found in the request cookies");
-                if (callback(res, "Invalid session cookie")) {
-                    return;
-                }
-
-                return next();
-            }
+      return next();
+    } else {
+      //validate the cookie
+      const isCookieValid = await asgardeoExpressClient.isSignedIn(req.cookies.ASGARDEO_SESSION_ID);
+      if (isCookieValid) {
+        return next();
+      } else {
+        Logger.error('Invalid session ID found in the request cookies');
+        if (callback(res, 'Invalid session cookie')) {
+          return;
         }
-    };
+
+        return next();
+      }
+    }
+  };
 };
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index a1e7e80e3..f1edcc70d 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -989,14 +989,14 @@ export class AsgardeoAuthClient<T> {
    *
    * @example
    * ```
-   * await auth.isAuthenticated();
+   * await auth.isSignedIn();
    * ```
    *
-   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#isAuthenticated}
+   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#isSignedIn}
    *
    * @preserve
    */
-  public async isAuthenticated(userId?: string): Promise<boolean> {
+  public async isSignedIn(userId?: string): Promise<boolean> {
     const isAccessTokenAvailable: boolean = Boolean(await this.getAccessToken(userId));
 
     // Check if the access token is expired.
@@ -1015,9 +1015,9 @@ export class AsgardeoAuthClient<T> {
     const currentTime: number = new Date().getTime();
     const isAccessTokenValid: boolean = createdAt + expiresIn > currentTime;
 
-    const isAuthenticated: boolean = isAccessTokenAvailable && isAccessTokenValid;
+    const isSignedIn: boolean = isAccessTokenAvailable && isAccessTokenValid;
 
-    return isAuthenticated;
+    return isSignedIn;
   }
 
   /**
diff --git a/packages/javascript/src/models/client.ts b/packages/javascript/src/models/client.ts
index 3f06fc087..7aa0d2b2c 100644
--- a/packages/javascript/src/models/client.ts
+++ b/packages/javascript/src/models/client.ts
@@ -57,7 +57,7 @@ export interface AsgardeoClient<T> {
 
   /**
    * Checks if a user is signed in.
-   * FIXME: This should be integrated with the existing isAuthenticated method which returns a Promise.
+   * FIXME: This should be integrated with the existing isSignedIn method which returns a Promise.
    *
    * @returns Boolean indicating sign-in status.
    */
diff --git a/packages/nextjs/src/AsgardeoNextClient.ts b/packages/nextjs/src/AsgardeoNextClient.ts
index fa6bec383..3a753d292 100644
--- a/packages/nextjs/src/AsgardeoNextClient.ts
+++ b/packages/nextjs/src/AsgardeoNextClient.ts
@@ -73,7 +73,7 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
   }
 
   override isSignedIn(sessionId?: string): Promise<boolean> {
-    return this.asgardeo.isAuthenticated(sessionId as string);
+    return this.asgardeo.isSignedIn(sessionId as string);
   }
 
   override async signIn(
@@ -153,9 +153,9 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
 
     if (method === 'GET' && sanitizedPathname === InternalAuthAPIRoutesConfig.session) {
       try {
-        const isAuthenticated: boolean = await this.isSignedIn();
+        const isSignedIn: boolean = await this.isSignedIn();
 
-        return NextResponse.json({isSignedIn: isAuthenticated});
+        return NextResponse.json({isSignedIn: isSignedIn});
       } catch (error) {
         return NextResponse.json({error: 'Failed to check session'}, {status: 500});
       }
diff --git a/packages/node/src/__legacy__/client.ts b/packages/node/src/__legacy__/client.ts
index 019124dcc..e1ee2b3b7 100644
--- a/packages/node/src/__legacy__/client.ts
+++ b/packages/node/src/__legacy__/client.ts
@@ -141,16 +141,16 @@ export class AsgardeoNodeClient<T> {
    *
    * @example
    * ```
-   * const isAuth = await authClient.isAuthenticated("a2a2972c-51cd-5e9d-a9ae-058fae9f7927");
+   * const isAuth = await authClient.isSignedIn("a2a2972c-51cd-5e9d-a9ae-058fae9f7927");
    * ```
    *
-   * @link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#isAuthenticated
+   * @link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#isSignedIn
    *
    * @memberof AsgardeoNodeClient
    *
    */
-  public async isAuthenticated(userId: string): Promise<boolean> {
-    return this._authCore.isAuthenticated(userId);
+  public async isSignedIn(userId: string): Promise<boolean> {
+    return this._authCore.isSignedIn(userId);
   }
 
   /**
diff --git a/packages/node/src/__legacy__/core/authentication.ts b/packages/node/src/__legacy__/core/authentication.ts
index 37a838891..56b3e4e9c 100644
--- a/packages/node/src/__legacy__/core/authentication.ts
+++ b/packages/node/src/__legacy__/core/authentication.ts
@@ -74,7 +74,7 @@ export class AsgardeoNodeCore<T> {
       );
     }
 
-    if (await this.isAuthenticated(userId)) {
+    if (await this.isSignedIn(userId)) {
       const sessionData: SessionData = await this._storageManager.getSessionData(userId);
 
       return Promise.resolve({
@@ -144,7 +144,7 @@ export class AsgardeoNodeCore<T> {
   }
 
   public async getIDToken(userId: string): Promise<string> {
-    const is_logged_in = await this.isAuthenticated(userId);
+    const is_logged_in = await this.isSignedIn(userId);
     if (!is_logged_in) {
       return Promise.reject(
         new AsgardeoAuthException(
@@ -172,9 +172,9 @@ export class AsgardeoNodeCore<T> {
     return this._auth.refreshAccessToken(userId);
   }
 
-  public async isAuthenticated(userId: string): Promise<boolean> {
+  public async isSignedIn(userId: string): Promise<boolean> {
     try {
-      if (!(await this._auth.isAuthenticated(userId))) {
+      if (!(await this._auth.isSignedIn(userId))) {
         return Promise.resolve(false);
       }
 
diff --git a/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts b/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
index 8292e1c7b..ac87760b8 100644
--- a/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
+++ b/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
@@ -139,9 +139,9 @@ export const useAuth = (): AuthInterface => {
    *
    * @returns {Promise<boolean>} - A promise that resolves to `true` if authenticated, otherwise `false`.
    */
-  const isAuthenticated = async (): Promise<boolean> => {
+  const isSignedIn = async (): Promise<boolean> => {
     try {
-      const response: Response = await fetch('/api/auth/isAuthenticated', {
+      const response: Response = await fetch('/api/auth/isSignedIn', {
         credentials: 'include',
         method: 'GET',
       });
@@ -236,7 +236,7 @@ export const useAuth = (): AuthInterface => {
     getDecodedIDToken,
     getIdToken,
     getOpenIDProviderEndpoints,
-    isAuthenticated,
+    isSignedIn,
     revokeAccessToken,
     signIn,
     signOut,
diff --git a/packages/nuxt/src/runtime/server/handler.ts b/packages/nuxt/src/runtime/server/handler.ts
index 9fcffd3f1..47d426807 100644
--- a/packages/nuxt/src/runtime/server/handler.ts
+++ b/packages/nuxt/src/runtime/server/handler.ts
@@ -157,12 +157,12 @@ export const AsgardeoAuthHandler = (config: AuthClientConfig, options?: Asgardeo
           statusMessage: 'Failed to retrieve user information.',
         });
       }
-    } else if (action === 'isAuthenticated' && method === 'GET') {
+    } else if (action === 'isSignedIn' && method === 'GET') {
       const sessionId: string | undefined = getCookie(event, sessionIdCookieName);
       if (!sessionId) return false;
 
       try {
-        return await authClient.isAuthenticated(sessionId);
+        return await authClient.isSignedIn(sessionId);
       } catch {
         return false;
       }
diff --git a/packages/nuxt/src/runtime/types.ts b/packages/nuxt/src/runtime/types.ts
index 26aefcf0a..4e1b59c66 100644
--- a/packages/nuxt/src/runtime/types.ts
+++ b/packages/nuxt/src/runtime/types.ts
@@ -64,7 +64,7 @@ export interface AuthInterface {
   getDecodedIDToken: () => Promise<IdTokenPayload | null>;
   getIdToken: () => Promise<string | null>;
   getOpenIDProviderEndpoints: () => Promise<OIDCEndpoints | null>;
-  isAuthenticated: () => Promise<boolean>;
+  isSignedIn: () => Promise<boolean>;
   revokeAccessToken: () => Promise<void>;
   signIn: (callbackUrl?: string) => Promise<void>;
   signOut: () => Promise<void>;
diff --git a/packages/react/src/__temp__/api.ts b/packages/react/src/__temp__/api.ts
index 801aa856b..186a27295 100644
--- a/packages/react/src/__temp__/api.ts
+++ b/packages/react/src/__temp__/api.ts
@@ -59,10 +59,6 @@ class AuthAPI {
     return this._isLoading;
   }
 
-  public isSignedIn(): Promise<boolean> {
-    return this.isAuthenticated();
-  }
-
   public isLoading(): boolean {
     return this._getIsLoading();
   }
@@ -120,12 +116,12 @@ class AuthAPI {
           return null; // FIXME: Validate this. Temp fix for: error TS7030: Not all code paths return a value.
         }
 
-        if (await this._client.isAuthenticated()) {
+        if (await this._client.isSignedIn()) {
           const stateToUpdate = {
             allowedScopes: response.allowedScopes,
             displayName: response.displayName,
             email: response.email,
-            isAuthenticated: true,
+            isSignedIn: true,
             isLoading: false,
             isSigningOut: false,
             sub: response.sub,
@@ -241,11 +237,11 @@ class AuthAPI {
           this.updateState({
             ...this.getState(),
             ...(response as BasicUserInfo),
-            isAuthenticated: true,
+            isSignedIn: true,
             isLoading: false,
           });
 
-          dispatch({...(response as BasicUserInfo), isAuthenticated: true, isLoading: false});
+          dispatch({...(response as BasicUserInfo), isSignedIn: true, isLoading: false});
         }
 
         callback && callback(response);
@@ -360,8 +356,8 @@ class AuthAPI {
    *
    * @return {Promise<boolean>} - A Promise that resolves with `true` if teh user is authenticated.
    */
-  public async isAuthenticated(): Promise<boolean> {
-    return this._client.isAuthenticated();
+  public async isSignedIn(): Promise<boolean> {
+    return this._client.isSignedIn();
   }
 
   /**
@@ -448,13 +444,13 @@ class AuthAPI {
           return false;
         }
 
-        if (await this._client.isAuthenticated()) {
+        if (await this._client.isSignedIn()) {
           const basicUserInfo = response as BasicUserInfo;
           const stateToUpdate = {
             allowedScopes: basicUserInfo.allowedScopes,
             displayName: basicUserInfo.displayName,
             email: basicUserInfo.email,
-            isAuthenticated: true,
+            isSignedIn: true,
             isLoading: false,
             isSigningOut: false,
             sub: basicUserInfo.sub,
@@ -478,7 +474,7 @@ AuthAPI.DEFAULT_STATE = {
   allowedScopes: '',
   displayName: '',
   email: '',
-  isAuthenticated: false,
+  isSignedIn: false,
   isLoading: true,
   sub: '',
   username: '',
diff --git a/packages/react/src/__temp__/models.ts b/packages/react/src/__temp__/models.ts
index 02fcbddc2..0ab718b44 100644
--- a/packages/react/src/__temp__/models.ts
+++ b/packages/react/src/__temp__/models.ts
@@ -70,7 +70,7 @@ export interface AuthStateInterface {
   /**
    * Specifies if the user is authenticated or not.
    */
-  isAuthenticated: boolean;
+  isSignedIn: boolean;
   /**
    * Are the Auth requests loading.
    */
@@ -109,7 +109,7 @@ export interface AuthContextInterface {
   getIDToken(): Promise<string>;
   getAccessToken(): Promise<string>;
   refreshAccessToken(): Promise<BasicUserInfo>;
-  isAuthenticated(): Promise<boolean>;
+  isSignedIn(): Promise<boolean>;
   enableHttpHandler(): Promise<boolean>;
   disableHttpHandler(): Promise<boolean>;
   updateConfig(config: Partial<AuthClientConfig<Config>>): Promise<void>;
diff --git a/packages/vue/README.md b/packages/vue/README.md
index 832daac1d..fad5b6d0a 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -47,7 +47,7 @@ app.mount('#app')
 ```vue
 <template>
   <div>
-    <div v-if="auth.isAuthenticated">
+    <div v-if="auth.isSignedIn">
       <p>Welcome, {{ auth.user?.username }}</p>
       <button @click="auth.signOut">Sign Out</button>
     </div>
@@ -65,7 +65,7 @@ const auth = useAsgardeo()
 ## Composables
 
 - `useAsgardeo()`: Main composable that provides:
-  - `isAuthenticated`: Boolean indicating authentication status
+  - `isSignedIn`: Boolean indicating authentication status
   - `user`: Current user information
   - `signIn()`: Function to initiate sign in
   - `signOut()`: Function to sign out
diff --git a/packages/vue/src/auth-api.ts b/packages/vue/src/auth-api.ts
index 9d13e5430..45ffa0732 100644
--- a/packages/vue/src/auth-api.ts
+++ b/packages/vue/src/auth-api.ts
@@ -87,12 +87,12 @@ class AuthAPI {
         if (!response) {
           return response;
         }
-        if (await this._client.isAuthenticated()) {
+        if (await this._client.isSignedIn()) {
           Object.assign(this._authState, {
             allowedScopes: response.allowedScopes,
             displayName: response.displayName,
             email: response.email,
-            isAuthenticated: true,
+            isSignedIn: true,
             isLoading: false,
             isSigningOut: false,
             sub: response.sub,
@@ -196,7 +196,7 @@ class AuthAPI {
           Object.assign(this._authState, {
             ...this._authState,
             ...(response as BasicUserInfo),
-            isAuthenticated: true,
+            isSignedIn: true,
             isLoading: false,
           });
         }
@@ -310,8 +310,8 @@ class AuthAPI {
    *
    * @return {Promise<boolean>} - A Promise that resolves with `true` if the user is authenticated.
    */
-  public async isAuthenticated(): Promise<boolean> {
-    return this._client.isAuthenticated();
+  public async isSignedIn(): Promise<boolean> {
+    return this._client.isSignedIn();
   }
 
   /**
@@ -396,13 +396,13 @@ class AuthAPI {
           return false;
         }
 
-        if (await this._client.isAuthenticated()) {
+        if (await this._client.isSignedIn()) {
           const basicUserInfo: BasicUserInfo = response as BasicUserInfo;
           Object.assign(this._authState, {
             allowedScopes: basicUserInfo.allowedScopes,
             displayName: basicUserInfo.displayName,
             email: basicUserInfo.email,
-            isAuthenticated: true,
+            isSignedIn: true,
             isLoading: false,
             sub: basicUserInfo.sub,
             username: basicUserInfo.username,
@@ -418,7 +418,7 @@ AuthAPI.DEFAULT_STATE = {
   allowedScopes: '',
   displayName: '',
   email: '',
-  isAuthenticated: false,
+  isSignedIn: false,
   isLoading: true,
   sub: '',
   username: '',
diff --git a/packages/vue/src/plugins/AsgardeoPlugin.ts b/packages/vue/src/plugins/AsgardeoPlugin.ts
index 49b53b157..16671821e 100644
--- a/packages/vue/src/plugins/AsgardeoPlugin.ts
+++ b/packages/vue/src/plugins/AsgardeoPlugin.ts
@@ -81,9 +81,9 @@ export const asgardeoPlugin: Plugin = {
 
     const checkIsAuthenticated = async (): Promise<void> =>
       withStateSync(async () => {
-        const isAuthenticatedState: boolean = await AuthClient.isAuthenticated();
+        const isAuthenticatedState: boolean = await AuthClient.isSignedIn();
         if (!isAuthenticatedState) {
-          AuthClient.updateState({...state, isAuthenticated: false, isLoading: false});
+          AuthClient.updateState({...state, isSignedIn: false, isLoading: false});
           return;
         }
         const response: BasicUserInfo = await AuthClient.getBasicUserInfo();
@@ -92,12 +92,12 @@ export const asgardeoPlugin: Plugin = {
               allowedScopes: response.allowedScopes,
               displayName: response.displayName,
               email: response.email,
-              isAuthenticated: true,
+              isSignedIn: true,
               isLoading: false,
               sub: response.sub,
               username: response.username,
             }
-          : {...state, isAuthenticated: isAuthenticatedState, isLoading: false};
+          : {...state, isSignedIn: isAuthenticatedState, isLoading: false};
         AuthClient.updateState(stateToUpdate);
       });
 
@@ -137,7 +137,7 @@ export const asgardeoPlugin: Plugin = {
 
           await checkIsAuthenticated();
 
-          if (state.isAuthenticated) {
+          if (state.isSignedIn) {
             return;
           }
 
@@ -166,7 +166,7 @@ export const asgardeoPlugin: Plugin = {
       httpRequest: (config: HttpRequestConfig): Promise<HttpResponse<any>> => AuthClient.httpRequest(config),
       httpRequestAll: (configs: HttpRequestConfig[]): Promise<HttpResponse<any>[]> =>
         AuthClient.httpRequestAll(configs),
-      isAuthenticated: (): Promise<boolean> => AuthClient.isAuthenticated(),
+      isSignedIn: (): Promise<boolean> => AuthClient.isSignedIn(),
       on: (hook: Hooks, callback: (response?: any) => void, id?: string): void => {
         if (hook === Hooks.CustomGrant && id) {
           AuthClient.on(hook, callback, id);
diff --git a/packages/vue/src/tests/AsgardeoPlugin.test.ts b/packages/vue/src/tests/AsgardeoPlugin.test.ts
index e41f5034b..2b2dc19ff 100644
--- a/packages/vue/src/tests/AsgardeoPlugin.test.ts
+++ b/packages/vue/src/tests/AsgardeoPlugin.test.ts
@@ -49,7 +49,7 @@ describe('asgardeoPlugin', () => {
       allowedScopes: '',
       displayName: '',
       email: '',
-      isAuthenticated: false,
+      isSignedIn: false,
       isLoading: true,
       sub: '',
       username: '',
@@ -63,7 +63,7 @@ describe('asgardeoPlugin', () => {
   it('should provide the authentication context', () => {
     const authContext: AuthContextInterface = app._context.provides[ASGARDEO_INJECTION_KEY];
     expect(authContext).toBeDefined();
-    expect(authContext.state.isAuthenticated).toBe(false);
+    expect(authContext.state.isSignedIn).toBe(false);
   });
 
   it('should call AuthAPI init on install', async () => {
@@ -85,7 +85,7 @@ describe('asgardeoPlugin', () => {
       allowedScopes: 'openid profile',
       displayName: 'Test User',
       email: 'test@example.com',
-      isAuthenticated: true,
+      isSignedIn: true,
       isLoading: false,
       sub: 'user-id-123',
       username: 'testUser',
@@ -107,7 +107,7 @@ describe('asgardeoPlugin', () => {
       allowedScopes: '',
       displayName: '',
       email: '',
-      isAuthenticated: false,
+      isSignedIn: false,
       isLoading: false,
       sub: '',
       username: '',
@@ -161,7 +161,7 @@ describe('asgardeoPlugin', () => {
 
     const silentSignInState: AuthStateInterface = {
       ...mockState,
-      isAuthenticated: true,
+      isSignedIn: true,
       username: 'testUser',
     };
 
@@ -199,7 +199,7 @@ describe('asgardeoPlugin', () => {
 
     const refreshedState: AuthStateInterface = {
       ...mockState,
-      isAuthenticated: true,
+      isSignedIn: true,
       username: 'testUser',
     };
     mockAuthAPI.getState.mockReturnValueOnce(refreshedState);
diff --git a/packages/vue/src/tests/auth-api.test.ts b/packages/vue/src/tests/auth-api.test.ts
index ae3e8850a..77ee4568e 100644
--- a/packages/vue/src/tests/auth-api.test.ts
+++ b/packages/vue/src/tests/auth-api.test.ts
@@ -52,7 +52,7 @@ describe('AuthAPI', () => {
         allowedScopes: '',
         displayName: '',
         email: '',
-        isAuthenticated: false,
+        isSignedIn: false,
         isLoading: true,
         sub: '',
         username: '',
@@ -101,14 +101,14 @@ describe('AuthAPI', () => {
 
       expect(mockClient.signIn).toHaveBeenCalledWith(config, authCode, sessionState, authState, tokenConfig);
 
-      expect(mockClient.isAuthenticated).toHaveBeenCalled();
+      expect(mockClient.isSignedIn).toHaveBeenCalled();
       expect(callback).toHaveBeenCalledWith(response);
 
       expect(authApi.getState()).toMatchObject({
         allowedScopes: 'openid profile',
         displayName: 'Test User',
         email: 'test@example.com',
-        isAuthenticated: true,
+        isSignedIn: true,
         isLoading: false,
         isSigningOut: false,
         sub: 'user-id-123',
@@ -128,16 +128,16 @@ describe('AuthAPI', () => {
       const result: BasicUserInfo = await authApi.signIn();
       expect(result).toBeNull();
 
-      expect(authApi.getState().isAuthenticated).toBe(false);
+      expect(authApi.getState().isSignedIn).toBe(false);
     });
 
     it('should handle unauthenticated scenarios', async () => {
-      mockClient.isAuthenticated.mockResolvedValueOnce(false);
+      mockClient.isSignedIn.mockResolvedValueOnce(false);
       const response: boolean | BasicUserInfo = await authApi.signIn();
 
       // Response should be returned, but state shouldn't be updated
       expect(response).toBeDefined();
-      expect(authApi.getState().isAuthenticated).toBe(false);
+      expect(authApi.getState().isSignedIn).toBe(false);
     });
   });
 
@@ -168,7 +168,7 @@ describe('AuthAPI', () => {
     it('should update the auth state', () => {
       const newState: AuthStateInterface = {
         allowedScopes: 'read write',
-        isAuthenticated: true,
+        isSignedIn: true,
         isLoading: false,
         username: 'newUser',
       };
@@ -241,7 +241,7 @@ describe('AuthAPI', () => {
       expect(authApi.getState()).toMatchObject({
         displayName: 'Test User',
         email: 'test@example.com',
-        isAuthenticated: true,
+        isSignedIn: true,
         isLoading: false,
         username: 'testUser',
       });
@@ -260,7 +260,7 @@ describe('AuthAPI', () => {
 
       // State should not be updated for session properties
       expect(authApi.getState().username).toBe('');
-      expect(authApi.getState().isAuthenticated).toBe(false);
+      expect(authApi.getState().isSignedIn).toBe(false);
     });
 
     it('should handle null response', async () => {
@@ -303,7 +303,7 @@ describe('AuthAPI', () => {
       authApi.updateState({
         allowedScopes: 'read write',
         email: 'test@example.com',
-        isAuthenticated: true,
+        isSignedIn: true,
         isLoading: false,
         username: 'testUser',
       });
@@ -390,9 +390,9 @@ describe('AuthAPI', () => {
   });
 
   describe('authentication status methods', () => {
-    it('should call isAuthenticated on the client', async () => {
-      const result: boolean = await authApi.isAuthenticated();
-      expect(mockClient.isAuthenticated).toHaveBeenCalled();
+    it('should call isSignedIn on the client', async () => {
+      const result: boolean = await authApi.isSignedIn();
+      expect(mockClient.isSignedIn).toHaveBeenCalled();
       expect(result).toBe(true);
     });
 
@@ -458,7 +458,7 @@ describe('AuthAPI', () => {
         allowedScopes: 'openid profile',
         displayName: 'Test User',
         email: 'test@example.com',
-        isAuthenticated: true,
+        isSignedIn: true,
         isLoading: false,
         sub: 'user-id-123',
         username: 'testUser',
@@ -474,13 +474,13 @@ describe('AuthAPI', () => {
 
     it('should handle false response from trySignInSilently', async () => {
       mockClient.trySignInSilently.mockResolvedValueOnce(false);
-      mockClient.isAuthenticated.mockResolvedValueOnce(false);
+      mockClient.isSignedIn.mockResolvedValueOnce(false);
 
       const result: boolean | BasicUserInfo = await authApi.trySignInSilently();
 
       expect(result).toBe(false);
       expect(authApi.getState().isLoading).toBe(false);
-      expect(authApi.getState().isAuthenticated).toBe(false);
+      expect(authApi.getState().isSignedIn).toBe(false);
     });
 
     it('should handle errors', async () => {
diff --git a/packages/vue/src/tests/mocks/mocks.ts b/packages/vue/src/tests/mocks/mocks.ts
index 7247bf24b..9598bfab4 100644
--- a/packages/vue/src/tests/mocks/mocks.ts
+++ b/packages/vue/src/tests/mocks/mocks.ts
@@ -26,7 +26,7 @@ export const mockAuthContext: Partial<AuthContextInterface> = {
   state: {
     allowedScopes: 'openid profile email',
     displayName: 'John Doe',
-    isAuthenticated: true,
+    isSignedIn: true,
     isLoading: false,
   },
 };
@@ -35,7 +35,7 @@ export const mockState: AuthStateInterface = {
   allowedScopes: '',
   displayName: '',
   email: '',
-  isAuthenticated: false,
+  isSignedIn: false,
   isLoading: true,
   sub: '',
   username: '',
@@ -54,7 +54,7 @@ export type MockAuthAPI = {
   httpRequest: Mock;
   httpRequestAll: Mock;
   init: Mock;
-  isAuthenticated: Mock;
+  isSignedIn: Mock;
   isSessionActive: Mock;
   on: Mock;
   refreshAccessToken: Mock;
@@ -86,7 +86,7 @@ export const mockAuthAPI: MockAuthAPI = {
   httpRequest: vi.fn().mockResolvedValue({data: {}, status: 200}),
   httpRequestAll: vi.fn().mockResolvedValue([{data: {}, status: 200}]),
   init: vi.fn().mockResolvedValue(true),
-  isAuthenticated: vi.fn().mockResolvedValue(true),
+  isSignedIn: vi.fn().mockResolvedValue(true),
   isSessionActive: vi.fn().mockResolvedValue(true),
   on: vi.fn(),
   refreshAccessToken: vi.fn().mockResolvedValue({
@@ -134,7 +134,7 @@ export const mockAsgardeoSPAClient: Partial<AsgardeoSPAClient> = {
   httpRequest: vi.fn().mockResolvedValue({data: {}, status: 200}),
   httpRequestAll: vi.fn().mockResolvedValue([{data: {}, status: 200}]),
   initialize: vi.fn().mockResolvedValue(true),
-  isAuthenticated: vi.fn().mockResolvedValue(true),
+  isSignedIn: vi.fn().mockResolvedValue(true),
   isSessionActive: vi.fn().mockResolvedValue(true),
   on: vi.fn().mockResolvedValue(undefined),
   refreshAccessToken: vi.fn().mockResolvedValue({
diff --git a/packages/vue/src/tests/useAsgardeo.test.ts b/packages/vue/src/tests/useAsgardeo.test.ts
index 0ac52bde2..9ccd33285 100644
--- a/packages/vue/src/tests/useAsgardeo.test.ts
+++ b/packages/vue/src/tests/useAsgardeo.test.ts
@@ -46,7 +46,7 @@ describe('useAsgardeo', () => {
     getOpenIDProviderEndpoints: vi.fn().mockResolvedValue({} as OIDCEndpoints),
     httpRequest: vi.fn().mockResolvedValue({} as HttpResponse<any>),
     httpRequestAll: vi.fn().mockResolvedValue([{} as HttpResponse<any>]),
-    isAuthenticated: vi.fn().mockResolvedValue(true),
+    isSignedIn: vi.fn().mockResolvedValue(true),
     on: vi.fn(),
     refreshAccessToken: vi.fn().mockResolvedValue({} as BasicUserInfo),
     exchangeToken: vi.fn(),
@@ -55,7 +55,7 @@ describe('useAsgardeo', () => {
     signOut: vi.fn().mockResolvedValue(true),
     state: {
       allowedScopes: '',
-      isAuthenticated: true,
+      isSignedIn: true,
       isLoading: false,
     },
     trySignInSilently: vi.fn().mockResolvedValue(true),
diff --git a/packages/vue/src/types.ts b/packages/vue/src/types.ts
index ed2b102a1..ae8c18fcc 100644
--- a/packages/vue/src/types.ts
+++ b/packages/vue/src/types.ts
@@ -75,7 +75,7 @@ export interface AuthStateInterface {
   /**
    * Specifies if the user is authenticated or not.
    */
-  isAuthenticated: boolean;
+  isSignedIn: boolean;
   /**
    * Are the Auth requests loading.
    */
@@ -102,7 +102,7 @@ export interface AuthContextInterface {
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   httpRequest(config: HttpRequestConfig): Promise<HttpResponse<any>>;
   httpRequestAll(configs: HttpRequestConfig[]): Promise<HttpResponse<any>[]>;
-  isAuthenticated(): Promise<boolean>;
+  isSignedIn(): Promise<boolean>;
   on(hook: Hooks.CustomGrant, callback: (response?: any) => void, id: string): void;
   on(hook: Exclude<Hooks, Hooks.CustomGrant>, callback: (response?: any) => void): void;
   on(hook: Hooks, callback: (response?: any) => void, id?: string): void;
diff --git a/recipes/nuxt-vite/pages/index.vue b/recipes/nuxt-vite/pages/index.vue
index 9cdd25175..1d51d8858 100644
--- a/recipes/nuxt-vite/pages/index.vue
+++ b/recipes/nuxt-vite/pages/index.vue
@@ -2,14 +2,14 @@
 import { ref, onMounted } from 'vue';
 import { navigateTo } from '#app';
 
-const { signOut, isAuthenticated, getBasicUserInfo } = useAuth();
+const { signOut, isSignedIn, getBasicUserInfo } = useAuth();
 
 const userInfo = ref<Record<string, any> | null>(null);
 const isLoading = ref(true);
 
 onMounted(async () => {
   try {
-    const authStatus = await isAuthenticated();
+    const authStatus = await isSignedIn();
     if (!authStatus) {
       await navigateTo('/login');
       return;
diff --git a/recipes/nuxt-vite/pages/login.vue b/recipes/nuxt-vite/pages/login.vue
index e45d940e6..c36113ae6 100644
--- a/recipes/nuxt-vite/pages/login.vue
+++ b/recipes/nuxt-vite/pages/login.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { navigateTo } from '#app';
-const { signIn, isAuthenticated } = useAuth();
+const { signIn, isSignedIn } = useAuth();
 
 const isLoading = ref(true);
 
 onMounted(async () => {
   try {
-    const authStatus = await isAuthenticated();
+    const authStatus = await isSignedIn();
     if (authStatus) {
       await navigateTo('/home');
     }
diff --git a/recipes/vue-vite/README.md b/recipes/vue-vite/README.md
index 390fa1367..ac8c86adf 100644
--- a/recipes/vue-vite/README.md
+++ b/recipes/vue-vite/README.md
@@ -77,12 +77,12 @@ The Asgardeo Auth plugin is available throughout your Vue application. Here's ho
 <script setup>
 import { useAsgardeo } from '@asgardeo/vue';
 
-const { isAuthenticated, signIn, signOut, getBasicUserInfo } = useAsgardeo();
+const { isSignedIn, signIn, signOut, getBasicUserInfo } = useAsgardeo();
 </script>
 
 <template>
   <div>
-    <button v-if="!isAuthenticated" @click="signIn">Login</button>
+    <button v-if="!isSignedIn" @click="signIn">Login</button>
     <button v-else @click="signOut">Logout</button>
   </div>
 </template>
diff --git a/recipes/vue-vite/src/components/AuthLayout.vue b/recipes/vue-vite/src/components/AuthLayout.vue
index ffce3f6b0..dc57ed070 100644
--- a/recipes/vue-vite/src/components/AuthLayout.vue
+++ b/recipes/vue-vite/src/components/AuthLayout.vue
@@ -88,8 +88,8 @@ const hideToken = () => {
           <p>Checking authentication status...</p>
         </div>
 
-        <div v-else-if="state.isAuthenticated" class="user-info">
-          <h2 v-if="state.isAuthenticated">Welcome, {{ state.displayName }}</h2>
+        <div v-else-if="state.isSignedIn" class="user-info">
+          <h2 v-if="state.isSignedIn">Welcome, {{ state.displayName }}</h2>
           <h2 v-else>Welcome, loading user data...</h2>
           <p v-if="state.email" class="user-email">{{ state.email }}</p>
 
diff --git a/recipes/vue-vite/src/router/index.ts b/recipes/vue-vite/src/router/index.ts
index 22e5bed13..c9dd98986 100644
--- a/recipes/vue-vite/src/router/index.ts
+++ b/recipes/vue-vite/src/router/index.ts
@@ -58,7 +58,7 @@ const router: Router = createRouter({
     },
     {
       beforeEnter: async (): Promise<boolean> => {
-        const { state, isAuthenticated, signIn } = useAsgardeo()
+        const { state, isSignedIn, signIn } = useAsgardeo()
 
         // Wait for loading to complete if still in progress
         if (state.isLoading) {
@@ -66,7 +66,7 @@ const router: Router = createRouter({
         }
 
         try {
-          const auth: boolean = await isAuthenticated()
+          const auth: boolean = await isSignedIn()
           if (!auth) {
             await signIn()
             return false // Prevent navigation until sign-in completes
diff --git a/recipes/vue-vite/src/views/LandingView.vue b/recipes/vue-vite/src/views/LandingView.vue
index 800dbe2ec..996ae5e22 100644
--- a/recipes/vue-vite/src/views/LandingView.vue
+++ b/recipes/vue-vite/src/views/LandingView.vue
@@ -31,7 +31,7 @@ const { state } = useAsgardeo()
 const router = useRouter()
 
 watch(
-  () => state.isAuthenticated,
+  () => state.isSignedIn,
   (auth) => {
     if (auth) {
       router.push('/home')

From fd8ae50f4ec29ee9533a9ac9e6d6bea3b801a271 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Tue, 10 Jun 2025 15:37:58 +0530
Subject: [PATCH 039/131] chore: update Header component to show user profile
 on click and adjust main theme to light mode

---
 recipes/vite-react-ts/src/components/Header.tsx | 11 ++++++++---
 recipes/vite-react-ts/src/main.tsx              |  2 +-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/recipes/vite-react-ts/src/components/Header.tsx b/recipes/vite-react-ts/src/components/Header.tsx
index c81f815f9..6dce63dbc 100644
--- a/recipes/vite-react-ts/src/components/Header.tsx
+++ b/recipes/vite-react-ts/src/components/Header.tsx
@@ -4,13 +4,14 @@ import {useState, useRef, useEffect} from 'react';
 import {Link} from 'react-router-dom';
 import {useApp} from '../App';
 import {Users, ChevronDown, Settings, User, LogOut, Plus, Check, Building2} from 'lucide-react';
-import {SignedOut, SignInButton, SignOutButton} from '@asgardeo/react';
+import {SignedOut, SignInButton, SignOutButton, UserProfile} from '@asgardeo/react';
 import {Button} from './ui/button';
 
 export default function Header() {
   const {user, currentOrg, organizations, setCurrentOrg} = useApp();
   const [showUserDropdown, setShowUserDropdown] = useState(false);
   const [showOrgDropdown, setShowOrgDropdown] = useState(false);
+  const [showUserProfile, setShowUserProfile] = useState(false);
   const userDropdownRef = useRef<HTMLDivElement>(null);
   const orgDropdownRef = useRef<HTMLDivElement>(null);
 
@@ -152,9 +153,12 @@ export default function Header() {
                   </div>
 
                   <Link
-                    to="/profile"
+                    // to="/profile"
                     className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
-                    onClick={() => setShowUserDropdown(false)}
+                    onClick={() => {
+                      setShowUserProfile(true);
+                      setShowUserDropdown(false);
+                    }}
                   >
                     <User className="h-4 w-4 mr-3" />
                     Your profile
@@ -190,6 +194,7 @@ export default function Header() {
           </div>
         </div>
       </div>
+      {showUserProfile && <UserProfile mode="popup" />}
     </header>
   );
 }
diff --git a/recipes/vite-react-ts/src/main.tsx b/recipes/vite-react-ts/src/main.tsx
index 9a5a09d93..a8b418fb8 100644
--- a/recipes/vite-react-ts/src/main.tsx
+++ b/recipes/vite-react-ts/src/main.tsx
@@ -12,7 +12,7 @@ createRoot(document.getElementById('root')!).render(
       scopes={['openid', 'address', 'email', 'profile']}
       preferences={{
         theme: {
-          mode: 'dark',
+          mode: 'light',
           overrides: {
             colors: {
               primary: {

From f7377b24b70df209dc194537d9e6f4e5a302f467 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Tue, 10 Jun 2025 15:51:40 +0530
Subject: [PATCH 040/131] chore: rename `getBasicUserInfo` to `getUser` for
 consistency across the codebase

---
 packages/browser/README.md                           |  2 +-
 packages/browser/src/__legacy__/client.ts            |  6 +++---
 .../src/__legacy__/clients/main-thread-client.ts     |  8 ++++----
 .../src/__legacy__/clients/web-worker-client.ts      |  8 ++++----
 .../src/__legacy__/helpers/authentication-helper.ts  | 12 ++++++------
 packages/browser/src/__legacy__/models/client.ts     |  4 ++--
 packages/browser/src/__legacy__/models/web-worker.ts |  2 +-
 .../browser/src/__legacy__/worker/worker-core.ts     |  6 +++---
 .../browser/src/__legacy__/worker/worker-receiver.ts |  2 +-
 packages/express/src/__legacy__/client.ts            |  4 ++--
 packages/javascript/README.md                        |  2 +-
 packages/javascript/src/__legacy__/client.ts         |  6 +++---
 packages/node/src/__legacy__/client.ts               |  8 ++++----
 packages/node/src/__legacy__/core/authentication.ts  |  4 ++--
 .../nuxt/src/runtime/composables/asgardeo/useAuth.ts |  4 ++--
 packages/nuxt/src/runtime/server/handler.ts          |  2 +-
 packages/nuxt/src/runtime/types.ts                   |  2 +-
 packages/react/src/__temp__/api.ts                   |  4 ++--
 packages/react/src/__temp__/models.ts                |  2 +-
 packages/vue/README.md                               |  2 +-
 packages/vue/src/plugins/AsgardeoPlugin.ts           |  4 ++--
 packages/vue/src/tests/AsgardeoPlugin.test.ts        |  4 ++--
 packages/vue/src/tests/auth-api.test.ts              |  8 ++++----
 packages/vue/src/tests/mocks/mocks.ts                |  6 +++---
 packages/vue/src/tests/useAsgardeo.test.ts           |  2 +-
 packages/vue/src/types.ts                            |  2 +-
 recipes/nuxt-vite/pages/index.vue                    |  4 ++--
 recipes/vue-vite/README.md                           |  2 +-
 28 files changed, 61 insertions(+), 61 deletions(-)

diff --git a/packages/browser/README.md b/packages/browser/README.md
index 1033f4ed3..64f2dca7b 100644
--- a/packages/browser/README.md
+++ b/packages/browser/README.md
@@ -37,7 +37,7 @@ const authClient = new AsgardeoAuthClient({
 authClient.signIn();
 
 // Get user info after authentication
-const userInfo = await authClient.getBasicUserInfo();
+const userInfo = await authClient.getUser();
 
 // Sign out
 authClient.signOut();
diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
index 3b7341e0b..67d4f1b71 100755
--- a/packages/browser/src/__legacy__/client.ts
+++ b/packages/browser/src/__legacy__/client.ts
@@ -331,7 +331,7 @@ export class AsgardeoSPAClient {
    *
    * @example
    * ```
-   * auth.getBasicUserInfo().then((response) => {
+   * auth.getUser().then((response) => {
    *    // console.log(response);
    * }).catch((error) => {
    *    // console.error(error);
@@ -344,10 +344,10 @@ export class AsgardeoSPAClient {
    *
    * @preserve
    */
-  public async getBasicUserInfo(): Promise<BasicUserInfo | undefined> {
+  public async getUser(): Promise<BasicUserInfo | undefined> {
     await this._validateMethod();
 
-    return this._client?.getBasicUserInfo();
+    return this._client?.getUser();
   }
 
   /**
diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index 7a7497d37..aa61937b6 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -157,7 +157,7 @@ export const MainThreadClient = async (
     _authenticationHelper.initializeSessionManger(
       config,
       oidcEndpoints,
-      async () => (await _authenticationClient.getBasicUserInfo()).sessionState,
+      async () => (await _authenticationClient.getUser()).sessionState,
       async (params?: ExtendedAuthorizeRequestUrlParams): Promise<string> => _authenticationClient.getSignInUrl(params),
       _sessionManagementHelper,
     );
@@ -368,8 +368,8 @@ export const MainThreadClient = async (
     );
   };
 
-  const getBasicUserInfo = async (): Promise<BasicUserInfo> => {
-    return _authenticationHelper.getBasicUserInfo();
+  const getUser = async (): Promise<BasicUserInfo> => {
+    return _authenticationHelper.getUser();
   };
 
   const getDecodedIDToken = async (): Promise<IdTokenPayload> => {
@@ -434,7 +434,7 @@ export const MainThreadClient = async (
     disableHttpHandler,
     enableHttpHandler,
     getAccessToken,
-    getBasicUserInfo,
+    getUser,
     getConfigData,
     getCrypto,
     getStorageManager,
diff --git a/packages/browser/src/__legacy__/clients/web-worker-client.ts b/packages/browser/src/__legacy__/clients/web-worker-client.ts
index 4a01e7b36..0b3e2b18f 100755
--- a/packages/browser/src/__legacy__/clients/web-worker-client.ts
+++ b/packages/browser/src/__legacy__/clients/web-worker-client.ts
@@ -385,7 +385,7 @@ export const WebWorkerClient = async (
     _authenticationHelper.initializeSessionManger(
       config,
       oidcEndpoints,
-      async () => (await getBasicUserInfo()).sessionState,
+      async () => (await getUser()).sessionState,
       async (params?: ExtendedAuthorizeRequestUrlParams): Promise<string> =>
         (await getSignInUrl(params)).authorizationURL,
       _sessionManagementHelper,
@@ -539,7 +539,7 @@ export const WebWorkerClient = async (
         checkSession();
       }
 
-      return getBasicUserInfo();
+      return getUser();
     }
 
     return Promise.resolve(undefined);
@@ -693,7 +693,7 @@ export const WebWorkerClient = async (
       });
   };
 
-  const getBasicUserInfo = (): Promise<BasicUserInfo> => {
+  const getUser = (): Promise<BasicUserInfo> => {
     const message: Message<null> = {
       type: GET_BASIC_USER_INFO,
     };
@@ -840,7 +840,7 @@ export const WebWorkerClient = async (
   return {
     disableHttpHandler,
     enableHttpHandler,
-    getBasicUserInfo,
+    getUser,
     getConfigData,
     getCrypto,
     getDecodedIDPIDToken,
diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
index a83306196..2bd171df4 100644
--- a/packages/browser/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -135,7 +135,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
           if (config.returnsSession) {
             this._spaHelper.refreshAccessTokenAutomatically(this);
 
-            return this._authenticationClient.getBasicUserInfo();
+            return this._authenticationClient.getUser();
           } else {
             return response as FetchResponse;
           }
@@ -177,7 +177,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
       }
       this._spaHelper.refreshAccessTokenAutomatically(this);
 
-      return this._authenticationClient.getBasicUserInfo();
+      return this._authenticationClient.getUser();
     } catch (error) {
       const refreshTokenError: Message<string> = {
         type: REFRESH_ACCESS_TOKEN_ERR0R,
@@ -490,7 +490,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
             }
           }
 
-          return this._authenticationClient.getBasicUserInfo();
+          return this._authenticationClient.getUser();
         })
         .catch(error => {
           return Promise.reject(error);
@@ -611,7 +611,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
           checkSession();
         }
 
-        return Promise.resolve(await this._authenticationClient.getBasicUserInfo());
+        return Promise.resolve(await this._authenticationClient.getUser());
       }
     }
 
@@ -656,8 +656,8 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     }
   }
 
-  public async getBasicUserInfo(): Promise<BasicUserInfo> {
-    return this._authenticationClient.getBasicUserInfo();
+  public async getUser(): Promise<BasicUserInfo> {
+    return this._authenticationClient.getUser();
   }
 
   public async getDecodedIDToken(): Promise<IdTokenPayload> {
diff --git a/packages/browser/src/__legacy__/models/client.ts b/packages/browser/src/__legacy__/models/client.ts
index 60ea9e5f2..961591038 100755
--- a/packages/browser/src/__legacy__/models/client.ts
+++ b/packages/browser/src/__legacy__/models/client.ts
@@ -59,7 +59,7 @@ export interface MainThreadClientInterface {
   exchangeToken(config: CustomGrantConfig): Promise<BasicUserInfo | FetchResponse>;
   refreshAccessToken(): Promise<BasicUserInfo>;
   revokeAccessToken(): Promise<boolean>;
-  getBasicUserInfo(): Promise<BasicUserInfo>;
+  getUser(): Promise<BasicUserInfo>;
   getDecodedIDToken(): Promise<IdTokenPayload>;
   getCrypto(): Promise<IsomorphicCrypto>;
   getConfigData(): Promise<AuthClientConfig<MainThreadClientConfig>>;
@@ -95,7 +95,7 @@ export interface WebWorkerClientInterface {
   signOut(afterSignOutUrl?: string): Promise<boolean>;
   revokeAccessToken(): Promise<boolean>;
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
-  getBasicUserInfo(): Promise<BasicUserInfo>;
+  getUser(): Promise<BasicUserInfo>;
   getConfigData(): Promise<AuthClientConfig<WebWorkerClientConfig>>;
   getDecodedIDToken(): Promise<IdTokenPayload>;
   getDecodedIDPIDToken(): Promise<IdTokenPayload>;
diff --git a/packages/browser/src/__legacy__/models/web-worker.ts b/packages/browser/src/__legacy__/models/web-worker.ts
index 5466b6641..ab1fdb1cd 100755
--- a/packages/browser/src/__legacy__/models/web-worker.ts
+++ b/packages/browser/src/__legacy__/models/web-worker.ts
@@ -57,7 +57,7 @@ export interface WebWorkerCoreInterface {
   exchangeToken(config: CustomGrantConfig): Promise<BasicUserInfo | FetchResponse>;
   refreshAccessToken(): Promise<BasicUserInfo>;
   revokeAccessToken(): Promise<boolean>;
-  getBasicUserInfo(): Promise<BasicUserInfo>;
+  getUser(): Promise<BasicUserInfo>;
   getDecodedIDToken(): Promise<IdTokenPayload>;
   getDecodedIDPIDToken(): Promise<IdTokenPayload>;
   getCrypto(): Promise<IsomorphicCrypto>;
diff --git a/packages/browser/src/__legacy__/worker/worker-core.ts b/packages/browser/src/__legacy__/worker/worker-core.ts
index 552dadf5d..ca77e9298 100755
--- a/packages/browser/src/__legacy__/worker/worker-core.ts
+++ b/packages/browser/src/__legacy__/worker/worker-core.ts
@@ -163,8 +163,8 @@ export const WebWorkerCore = async (
       .catch(error => Promise.reject(error));
   };
 
-  const getBasicUserInfo = async (): Promise<BasicUserInfo> => {
-    return _authenticationHelper.getBasicUserInfo();
+  const getUser = async (): Promise<BasicUserInfo> => {
+    return _authenticationHelper.getUser();
   };
 
   const getDecodedIDToken = async (): Promise<IdTokenPayload> => {
@@ -218,7 +218,7 @@ export const WebWorkerCore = async (
     enableHttpHandler,
     getAccessToken,
     getSignInUrl,
-    getBasicUserInfo,
+    getUser,
     getConfigData,
     getCrypto,
     getDecodedIDPIDToken,
diff --git a/packages/browser/src/__legacy__/worker/worker-receiver.ts b/packages/browser/src/__legacy__/worker/worker-receiver.ts
index 278f700d9..b19d9d21c 100644
--- a/packages/browser/src/__legacy__/worker/worker-receiver.ts
+++ b/packages/browser/src/__legacy__/worker/worker-receiver.ts
@@ -191,7 +191,7 @@ export const workerReceiver = (
         break;
       case GET_BASIC_USER_INFO:
         try {
-          port.postMessage(MessageUtils.generateSuccessMessage(await webWorker.getBasicUserInfo()));
+          port.postMessage(MessageUtils.generateSuccessMessage(await webWorker.getUser()));
         } catch (error) {
           port.postMessage(MessageUtils.generateFailureMessage(error));
         }
diff --git a/packages/express/src/__legacy__/client.ts b/packages/express/src/__legacy__/client.ts
index 379eb9135..db30b36f1 100644
--- a/packages/express/src/__legacy__/client.ts
+++ b/packages/express/src/__legacy__/client.ts
@@ -166,8 +166,8 @@ export class AsgardeoExpressClient {
     return this._authClient.getIDToken(userId);
   }
 
-  public async getBasicUserInfo(userId: string): Promise<BasicUserInfo> {
-    return this._authClient.getBasicUserInfo(userId);
+  public async getUser(userId: string): Promise<BasicUserInfo> {
+    return this._authClient.getUser(userId);
   }
 
   public async getOpenIDProviderEndpoints(): Promise<OIDCEndpoints> {
diff --git a/packages/javascript/README.md b/packages/javascript/README.md
index b59d5f1c1..13be756d3 100644
--- a/packages/javascript/README.md
+++ b/packages/javascript/README.md
@@ -43,7 +43,7 @@ auth.signIn()
     });
 
 // Get authenticated user
-auth.getBasicUserInfo()
+auth.getUser()
     .then((userInfo) => {
         console.log(userInfo);
     });
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index f1edcc70d..59aae248e 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -630,14 +630,14 @@ export class AsgardeoAuthClient<T> {
    *
    * @example
    * ```
-   * const userInfo = await auth.getBasicUserInfo();
+   * const userInfo = await auth.getUser();
    * ```
    *
-   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getBasicUserInfo}
+   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getUser}
    *
    * @preserve
    */
-  public async getBasicUserInfo(userId?: string): Promise<BasicUserInfo> {
+  public async getUser(userId?: string): Promise<BasicUserInfo> {
     const sessionData: SessionData = await this._storageManager.getSessionData(userId);
     const authenticatedUser: AuthenticatedUserInfo = this._authenticationHelper.getAuthenticatedUserInfo(
       sessionData?.id_token,
diff --git a/packages/node/src/__legacy__/client.ts b/packages/node/src/__legacy__/client.ts
index e1ee2b3b7..ea67b3cef 100644
--- a/packages/node/src/__legacy__/client.ts
+++ b/packages/node/src/__legacy__/client.ts
@@ -184,16 +184,16 @@ export class AsgardeoNodeClient<T> {
    *
    * @example
    * ```
-   * const basicInfo = await authClient.getBasicUserInfo("a2a2972c-51cd-5e9d-a9ae-058fae9f7927");
+   * const basicInfo = await authClient.getUser("a2a2972c-51cd-5e9d-a9ae-058fae9f7927");
    * ```
    *
-   * @link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getBasicUserInfo
+   * @link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getUser
    *
    * @memberof AsgardeoNodeClient
    *
    */
-  public async getBasicUserInfo(userId: string): Promise<BasicUserInfo> {
-    return this._authCore.getBasicUserInfo(userId);
+  public async getUser(userId: string): Promise<BasicUserInfo> {
+    return this._authCore.getUser(userId);
   }
 
   /**
diff --git a/packages/node/src/__legacy__/core/authentication.ts b/packages/node/src/__legacy__/core/authentication.ts
index 56b3e4e9c..206116b64 100644
--- a/packages/node/src/__legacy__/core/authentication.ts
+++ b/packages/node/src/__legacy__/core/authentication.ts
@@ -212,8 +212,8 @@ export class AsgardeoNodeCore<T> {
     return Promise.resolve(signOutURL);
   }
 
-  public async getBasicUserInfo(userId: string): Promise<BasicUserInfo> {
-    return this._auth.getBasicUserInfo(userId);
+  public async getUser(userId: string): Promise<BasicUserInfo> {
+    return this._auth.getUser(userId);
   }
 
   public async getOpenIDProviderEndpoints(): Promise<OIDCEndpoints> {
diff --git a/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts b/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
index ac87760b8..e65bb0539 100644
--- a/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
+++ b/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
@@ -174,7 +174,7 @@ export const useAuth = (): AuthInterface => {
    *
    * @returns {Promise<BasicUserInfo | null>} A promise resolving to user info or null.
    */
-  const getBasicUserInfo = async (): Promise<BasicUserInfo | null> => {
+  const getUser = async (): Promise<BasicUserInfo | null> => {
     try {
       const userInfo: BasicUserInfo = await $fetch<BasicUserInfo>('/api/auth/user', {
         method: 'GET',
@@ -231,7 +231,7 @@ export const useAuth = (): AuthInterface => {
 
   return {
     getAccessToken,
-    getBasicUserInfo,
+    getUser,
     getStorageManager,
     getDecodedIDToken,
     getIdToken,
diff --git a/packages/nuxt/src/runtime/server/handler.ts b/packages/nuxt/src/runtime/server/handler.ts
index 47d426807..4c6d28910 100644
--- a/packages/nuxt/src/runtime/server/handler.ts
+++ b/packages/nuxt/src/runtime/server/handler.ts
@@ -150,7 +150,7 @@ export const AsgardeoAuthHandler = (config: AuthClientConfig, options?: Asgardeo
       }
 
       try {
-        return await authClient.getBasicUserInfo(sessionId);
+        return await authClient.getUser(sessionId);
       } catch {
         throw createError({
           statusCode: 500,
diff --git a/packages/nuxt/src/runtime/types.ts b/packages/nuxt/src/runtime/types.ts
index 4e1b59c66..cebedccf9 100644
--- a/packages/nuxt/src/runtime/types.ts
+++ b/packages/nuxt/src/runtime/types.ts
@@ -59,7 +59,7 @@ export interface ModuleOptions {
 
 export interface AuthInterface {
   getAccessToken: () => Promise<string | null>;
-  getBasicUserInfo: () => Promise<BasicUserInfo | null>;
+  getUser: () => Promise<BasicUserInfo | null>;
   getStorageManager: () => Promise<StorageManager<any> | null>;
   getDecodedIDToken: () => Promise<IdTokenPayload | null>;
   getIdToken: () => Promise<string | null>;
diff --git a/packages/react/src/__temp__/api.ts b/packages/react/src/__temp__/api.ts
index 186a27295..9d56af467 100644
--- a/packages/react/src/__temp__/api.ts
+++ b/packages/react/src/__temp__/api.ts
@@ -181,8 +181,8 @@ class AuthAPI {
    *
    * @return {Promise<BasicUserInfo>} - A promise that resolves with the user information.
    */
-  public async getBasicUserInfo(): Promise<BasicUserInfo> {
-    return this._client.getBasicUserInfo();
+  public async getUser(): Promise<BasicUserInfo> {
+    return this._client.getUser();
   }
 
   /**
diff --git a/packages/react/src/__temp__/models.ts b/packages/react/src/__temp__/models.ts
index 0ab718b44..2c7517c60 100644
--- a/packages/react/src/__temp__/models.ts
+++ b/packages/react/src/__temp__/models.ts
@@ -97,7 +97,7 @@ export interface AuthContextInterface {
     },
   ) => Promise<BasicUserInfo>;
   signOut: (callback?: (response: boolean) => void) => Promise<boolean>;
-  getBasicUserInfo(): Promise<BasicUserInfo>;
+  getUser(): Promise<BasicUserInfo>;
   httpRequest(config: HttpRequestConfig): Promise<HttpResponse<any>>;
   httpRequestAll(configs: HttpRequestConfig[]): Promise<HttpResponse<any>[]>;
   exchangeToken(config: CustomGrantConfig, callback?: (response: BasicUserInfo | FetchResponse<any>) => void): void;
diff --git a/packages/vue/README.md b/packages/vue/README.md
index fad5b6d0a..874ef3df5 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -70,7 +70,7 @@ const auth = useAsgardeo()
   - `signIn()`: Function to initiate sign in
   - `signOut()`: Function to sign out
   - `getAccessToken()`: Function to get the current access token
-  - `getBasicUserInfo()`: Function to get basic user information
+  - `getUser()`: Function to get basic user information
   
 - `useAuthContext()`: Composable to access the raw authentication context
 - `useIsAuthenticated()`: Composable to check authentication status
diff --git a/packages/vue/src/plugins/AsgardeoPlugin.ts b/packages/vue/src/plugins/AsgardeoPlugin.ts
index 16671821e..057b930a5 100644
--- a/packages/vue/src/plugins/AsgardeoPlugin.ts
+++ b/packages/vue/src/plugins/AsgardeoPlugin.ts
@@ -86,7 +86,7 @@ export const asgardeoPlugin: Plugin = {
           AuthClient.updateState({...state, isSignedIn: false, isLoading: false});
           return;
         }
-        const response: BasicUserInfo = await AuthClient.getBasicUserInfo();
+        const response: BasicUserInfo = await AuthClient.getUser();
         const stateToUpdate: AuthStateInterface = response
           ? {
               allowedScopes: response.allowedScopes,
@@ -158,7 +158,7 @@ export const asgardeoPlugin: Plugin = {
       enableHttpHandler: (): Promise<boolean> => AuthClient.enableHttpHandler(),
       error: error.value,
       getAccessToken: (): Promise<string> => AuthClient.getAccessToken(),
-      getBasicUserInfo: (): Promise<BasicUserInfo> => AuthClient.getBasicUserInfo(),
+      getUser: (): Promise<BasicUserInfo> => AuthClient.getUser(),
       getDecodedIDToken: (): Promise<IdTokenPayload> => AuthClient.getDecodedIDToken(),
       getHttpClient: (): Promise<HttpClientInstance> => AuthClient.getHttpClient(),
       getIDToken: (): Promise<string> => AuthClient.getIDToken(),
diff --git a/packages/vue/src/tests/AsgardeoPlugin.test.ts b/packages/vue/src/tests/AsgardeoPlugin.test.ts
index 2b2dc19ff..ca22f0f56 100644
--- a/packages/vue/src/tests/AsgardeoPlugin.test.ts
+++ b/packages/vue/src/tests/AsgardeoPlugin.test.ts
@@ -147,9 +147,9 @@ describe('asgardeoPlugin', () => {
 
     mockAuthAPI.getState.mockReturnValueOnce(userInfoState);
 
-    await authContext.getBasicUserInfo();
+    await authContext.getUser();
 
-    expect(mockAuthAPI.getBasicUserInfo).toHaveBeenCalled();
+    expect(mockAuthAPI.getUser).toHaveBeenCalled();
     expect(authContext.state).toMatchObject(userInfoState);
   });
 
diff --git a/packages/vue/src/tests/auth-api.test.ts b/packages/vue/src/tests/auth-api.test.ts
index 77ee4568e..0d3365102 100644
--- a/packages/vue/src/tests/auth-api.test.ts
+++ b/packages/vue/src/tests/auth-api.test.ts
@@ -182,11 +182,11 @@ describe('AuthAPI', () => {
     });
   });
 
-  describe('getBasicUserInfo', () => {
-    it('should call getBasicUserInfo on the client', async () => {
-      const result: BasicUserInfo = await authApi.getBasicUserInfo();
+  describe('getUser', () => {
+    it('should call getUser on the client', async () => {
+      const result: BasicUserInfo = await authApi.getUser();
 
-      expect(mockClient.getBasicUserInfo).toHaveBeenCalled();
+      expect(mockClient.getUser).toHaveBeenCalled();
       expect(result).toEqual({
         allowedScopes: 'openid profile',
         displayName: 'Test User',
diff --git a/packages/vue/src/tests/mocks/mocks.ts b/packages/vue/src/tests/mocks/mocks.ts
index 9598bfab4..be10c9d22 100644
--- a/packages/vue/src/tests/mocks/mocks.ts
+++ b/packages/vue/src/tests/mocks/mocks.ts
@@ -45,7 +45,7 @@ export type MockAuthAPI = {
   disableHttpHandler: Mock;
   enableHttpHandler: Mock;
   getAccessToken: Mock;
-  getBasicUserInfo: Mock;
+  getUser: Mock;
   getDecodedIDToken: Mock;
   getHttpClient: Mock;
   getIDToken: Mock;
@@ -71,7 +71,7 @@ export const mockAuthAPI: MockAuthAPI = {
   disableHttpHandler: vi.fn().mockResolvedValue(true),
   enableHttpHandler: vi.fn().mockResolvedValue(true),
   getAccessToken: vi.fn().mockResolvedValue('mock-access-token'),
-  getBasicUserInfo: vi.fn().mockResolvedValue({
+  getUser: vi.fn().mockResolvedValue({
     allowedScopes: 'openid profile',
     displayName: 'Test User',
     email: 'test@example.com',
@@ -119,7 +119,7 @@ export const mockAsgardeoSPAClient: Partial<AsgardeoSPAClient> = {
   disableHttpHandler: vi.fn().mockResolvedValue(true),
   enableHttpHandler: vi.fn().mockResolvedValue(true),
   getAccessToken: vi.fn().mockResolvedValue('mock-access-token'),
-  getBasicUserInfo: vi.fn().mockResolvedValue({
+  getUser: vi.fn().mockResolvedValue({
     allowedScopes: 'openid profile',
     displayName: 'Test User',
     email: 'test@example.com',
diff --git a/packages/vue/src/tests/useAsgardeo.test.ts b/packages/vue/src/tests/useAsgardeo.test.ts
index 9ccd33285..140d9d6ac 100644
--- a/packages/vue/src/tests/useAsgardeo.test.ts
+++ b/packages/vue/src/tests/useAsgardeo.test.ts
@@ -39,7 +39,7 @@ describe('useAsgardeo', () => {
     enableHttpHandler: vi.fn().mockResolvedValue(true),
     error: new AsgardeoAuthException('Some error', 'Error message', 'error'),
     getAccessToken: vi.fn().mockResolvedValue('token'),
-    getBasicUserInfo: vi.fn().mockResolvedValue({} as BasicUserInfo),
+    getUser: vi.fn().mockResolvedValue({} as BasicUserInfo),
     getDecodedIDToken: vi.fn().mockResolvedValue({} as IdTokenPayload),
     getHttpClient: vi.fn().mockResolvedValue({} as HttpClientInstance),
     getIDToken: vi.fn().mockResolvedValue('id_token'),
diff --git a/packages/vue/src/types.ts b/packages/vue/src/types.ts
index ae8c18fcc..c686416de 100644
--- a/packages/vue/src/types.ts
+++ b/packages/vue/src/types.ts
@@ -95,7 +95,7 @@ export interface AuthContextInterface {
   enableHttpHandler(): Promise<boolean>;
   error: AsgardeoAuthException;
   getAccessToken(): Promise<string>;
-  getBasicUserInfo(): Promise<BasicUserInfo>;
+  getUser(): Promise<BasicUserInfo>;
   getDecodedIDToken(): Promise<IdTokenPayload>;
   getHttpClient(): Promise<HttpClientInstance>;
   getIDToken(): Promise<string>;
diff --git a/recipes/nuxt-vite/pages/index.vue b/recipes/nuxt-vite/pages/index.vue
index 1d51d8858..b04b68c18 100644
--- a/recipes/nuxt-vite/pages/index.vue
+++ b/recipes/nuxt-vite/pages/index.vue
@@ -2,7 +2,7 @@
 import { ref, onMounted } from 'vue';
 import { navigateTo } from '#app';
 
-const { signOut, isSignedIn, getBasicUserInfo } = useAuth();
+const { signOut, isSignedIn, getUser } = useAuth();
 
 const userInfo = ref<Record<string, any> | null>(null);
 const isLoading = ref(true);
@@ -14,7 +14,7 @@ onMounted(async () => {
       await navigateTo('/login');
       return;
     }
-    userInfo.value = await getBasicUserInfo();
+    userInfo.value = await getUser();
   } catch (error) {
     console.error("Authentication check or user info fetch failed:", error);
     await navigateTo('/login');
diff --git a/recipes/vue-vite/README.md b/recipes/vue-vite/README.md
index ac8c86adf..7445aa0af 100644
--- a/recipes/vue-vite/README.md
+++ b/recipes/vue-vite/README.md
@@ -77,7 +77,7 @@ The Asgardeo Auth plugin is available throughout your Vue application. Here's ho
 <script setup>
 import { useAsgardeo } from '@asgardeo/vue';
 
-const { isSignedIn, signIn, signOut, getBasicUserInfo } = useAsgardeo();
+const { isSignedIn, signIn, signOut, getUser } = useAsgardeo();
 </script>
 
 <template>

From 9f1ba9d87d6d11cb668384189e5dee6c8758803c Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Tue, 10 Jun 2025 15:55:16 +0530
Subject: [PATCH 041/131] chore: rename `updateConfig` methods to
 `reInitialize` for consistency across the codebase

---
 packages/browser/src/__legacy__/client.ts              | 10 +++++-----
 .../src/__legacy__/clients/main-thread-client.ts       |  6 +++---
 .../src/__legacy__/clients/web-worker-client.ts        |  4 ++--
 packages/browser/src/__legacy__/models/client.ts       |  4 ++--
 packages/browser/src/__legacy__/models/web-worker.ts   |  2 +-
 packages/browser/src/__legacy__/worker/worker-core.ts  |  6 +++---
 .../browser/src/__legacy__/worker/worker-receiver.ts   |  2 +-
 packages/express/src/__legacy__/client.ts              |  4 ++--
 packages/javascript/src/__legacy__/client.ts           |  6 +++---
 packages/node/src/__legacy__/client.ts                 |  8 ++++----
 packages/node/src/__legacy__/core/authentication.ts    |  4 ++--
 packages/react/src/__temp__/api.ts                     |  4 ++--
 packages/react/src/__temp__/models.ts                  |  2 +-
 packages/vue/src/auth-api.ts                           |  4 ++--
 packages/vue/src/plugins/AsgardeoPlugin.ts             |  4 ++--
 packages/vue/src/tests/AsgardeoPlugin.test.ts          |  4 ++--
 packages/vue/src/tests/auth-api.test.ts                |  8 ++++----
 packages/vue/src/tests/mocks/mocks.ts                  |  6 +++---
 packages/vue/src/tests/useAsgardeo.test.ts             |  2 +-
 packages/vue/src/types.ts                              |  2 +-
 20 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
index 67d4f1b71..b60a034e2 100755
--- a/packages/browser/src/__legacy__/client.ts
+++ b/packages/browser/src/__legacy__/client.ts
@@ -1148,22 +1148,22 @@ export class AsgardeoSPAClient {
    *     clientId: "client ID",
    *     baseUrl: "https://api.asgardeo.io"
    * }
-   * const auth.updateConfig(config);
+   * const auth.reInitialize(config);
    * ```
-   * @link https://github.com/asgardeo/asgardeo-auth-spa-sdk/tree/master/lib#updateConfig
+   * @link https://github.com/asgardeo/asgardeo-auth-spa-sdk/tree/master/lib#reInitialize
    *
    * @memberof AsgardeoAuthClient
    *
    * @preserve
    */
-  public async updateConfig(config: Partial<AuthClientConfig<Config>>): Promise<void> {
+  public async reInitialize(config: Partial<AuthClientConfig<Config>>): Promise<void> {
     await this._isInitialized();
     if (this._storage === BrowserStorage.WebWorker) {
       const client = this._client as WebWorkerClientInterface;
-      await client.updateConfig(config as Partial<AuthClientConfig<WebWorkerClientConfig>>);
+      await client.reInitialize(config as Partial<AuthClientConfig<WebWorkerClientConfig>>);
     } else {
       const client = this._client as WebWorkerClientInterface;
-      await client.updateConfig(config as Partial<AuthClientConfig<WebWorkerClientConfig>>);
+      await client.reInitialize(config as Partial<AuthClientConfig<WebWorkerClientConfig>>);
     }
 
     return;
diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index aa61937b6..0b5a7bc70 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -408,7 +408,7 @@ export const MainThreadClient = async (
     return (await _dataLayer.getSessionStatus()) === 'true';
   };
 
-  const updateConfig = async (newConfig: Partial<AuthClientConfig<MainThreadClientConfig>>): Promise<void> => {
+  const reInitialize = async (newConfig: Partial<AuthClientConfig<MainThreadClientConfig>>): Promise<void> => {
     const existingConfig = await _dataLayer.getConfigData();
     const isCheckSessionIframeDifferent: boolean = !(
       existingConfig &&
@@ -420,7 +420,7 @@ export const MainThreadClient = async (
       existingConfig.endpoints.checkSessionIframe === newConfig.endpoints.checkSessionIframe
     );
     const config = {...existingConfig, ...newConfig};
-    await _authenticationClient.updateConfig(config);
+    await _authenticationClient.reInitialize(config);
 
     // Re-initiates check session if the check session endpoint is updated.
     if (config.enableOIDCSessionManagement && isCheckSessionIframeDifferent) {
@@ -456,6 +456,6 @@ export const MainThreadClient = async (
     signIn,
     signOut,
     trySignInSilently,
-    updateConfig,
+    reInitialize,
   };
 };
diff --git a/packages/browser/src/__legacy__/clients/web-worker-client.ts b/packages/browser/src/__legacy__/clients/web-worker-client.ts
index 0b3e2b18f..58eda11d9 100755
--- a/packages/browser/src/__legacy__/clients/web-worker-client.ts
+++ b/packages/browser/src/__legacy__/clients/web-worker-client.ts
@@ -809,7 +809,7 @@ export const WebWorkerClient = async (
     }
   };
 
-  const updateConfig = async (newConfig: Partial<AuthClientConfig<WebWorkerClientConfig>>): Promise<void> => {
+  const reInitialize = async (newConfig: Partial<AuthClientConfig<WebWorkerClientConfig>>): Promise<void> => {
     const existingConfig = await getConfigData();
     const isCheckSessionIframeDifferent: boolean = !(
       existingConfig &&
@@ -861,6 +861,6 @@ export const WebWorkerClient = async (
     signIn,
     signOut,
     trySignInSilently,
-    updateConfig,
+    reInitialize,
   };
 };
diff --git a/packages/browser/src/__legacy__/models/client.ts b/packages/browser/src/__legacy__/models/client.ts
index 961591038..ca5df2c2b 100755
--- a/packages/browser/src/__legacy__/models/client.ts
+++ b/packages/browser/src/__legacy__/models/client.ts
@@ -68,7 +68,7 @@ export interface MainThreadClientInterface {
   getAccessToken(): Promise<string>;
   getStorageManager(): Promise<StorageManager<MainThreadClientConfig>>;
   isSignedIn(): Promise<boolean>;
-  updateConfig(config: Partial<AuthClientConfig<MainThreadClientConfig>>): Promise<void>;
+  reInitialize(config: Partial<AuthClientConfig<MainThreadClientConfig>>): Promise<void>;
   trySignInSilently(
     additionalParams?: Record<string, string | boolean>,
     tokenRequestConfig?: {params: Record<string, unknown>},
@@ -107,7 +107,7 @@ export interface WebWorkerClientInterface {
   setHttpRequestStartCallback(callback: () => void): void;
   setHttpRequestFinishCallback(callback: () => void): void;
   refreshAccessToken(): Promise<BasicUserInfo>;
-  updateConfig(config: Partial<AuthClientConfig<WebWorkerClientConfig>>): Promise<void>;
+  reInitialize(config: Partial<AuthClientConfig<WebWorkerClientConfig>>): Promise<void>;
   trySignInSilently(
     additionalParams?: Record<string, string | boolean>,
     tokenRequestConfig?: {params: Record<string, unknown>},
diff --git a/packages/browser/src/__legacy__/models/web-worker.ts b/packages/browser/src/__legacy__/models/web-worker.ts
index ab1fdb1cd..f1468788d 100755
--- a/packages/browser/src/__legacy__/models/web-worker.ts
+++ b/packages/browser/src/__legacy__/models/web-worker.ts
@@ -67,6 +67,6 @@ export interface WebWorkerCoreInterface {
   isSignedIn(): Promise<boolean>;
   startAutoRefreshToken(): Promise<void>;
   setSessionState(sessionState: string): Promise<void>;
-  updateConfig(config: Partial<AuthClientConfig<WebWorkerClientConfig>>): Promise<void>;
+  reInitialize(config: Partial<AuthClientConfig<WebWorkerClientConfig>>): Promise<void>;
   getConfigData(): Promise<AuthClientConfig<WebWorkerClientConfig>>;
 }
diff --git a/packages/browser/src/__legacy__/worker/worker-core.ts b/packages/browser/src/__legacy__/worker/worker-core.ts
index ca77e9298..621d581b9 100755
--- a/packages/browser/src/__legacy__/worker/worker-core.ts
+++ b/packages/browser/src/__legacy__/worker/worker-core.ts
@@ -203,8 +203,8 @@ export const WebWorkerCore = async (
     return;
   };
 
-  const updateConfig = async (config: Partial<AuthClientConfig<WebWorkerClientConfig>>): Promise<void> => {
-    await _authenticationClient.updateConfig(config);
+  const reInitialize = async (config: Partial<AuthClientConfig<WebWorkerClientConfig>>): Promise<void> => {
+    await _authenticationClient.reInitialize(config);
 
     return;
   };
@@ -239,6 +239,6 @@ export const WebWorkerCore = async (
     setSessionState,
     signOut,
     startAutoRefreshToken,
-    updateConfig,
+    reInitialize,
   };
 };
diff --git a/packages/browser/src/__legacy__/worker/worker-receiver.ts b/packages/browser/src/__legacy__/worker/worker-receiver.ts
index b19d9d21c..e6d76e6ef 100644
--- a/packages/browser/src/__legacy__/worker/worker-receiver.ts
+++ b/packages/browser/src/__legacy__/worker/worker-receiver.ts
@@ -273,7 +273,7 @@ export const workerReceiver = (
         break;
       case UPDATE_CONFIG:
         try {
-          port.postMessage(MessageUtils.generateSuccessMessage(await webWorker.updateConfig(data?.data)));
+          port.postMessage(MessageUtils.generateSuccessMessage(await webWorker.reInitialize(data?.data)));
         } catch (error) {
           port.postMessage(MessageUtils.generateFailureMessage(error));
         }
diff --git a/packages/express/src/__legacy__/client.ts b/packages/express/src/__legacy__/client.ts
index db30b36f1..6e12da51a 100644
--- a/packages/express/src/__legacy__/client.ts
+++ b/packages/express/src/__legacy__/client.ts
@@ -186,8 +186,8 @@ export class AsgardeoExpressClient {
     return this._authClient.exchangeToken(config, userId);
   }
 
-  public async updateConfig(config: Partial<AuthClientConfig>): Promise<void> {
-    return this._authClient.updateConfig(config);
+  public async reInitialize(config: Partial<AuthClientConfig>): Promise<void> {
+    return this._authClient.reInitialize(config);
   }
 
   public async revokeAccessToken(userId?: string): Promise<FetchResponse> {
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 59aae248e..e67af4b6f 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -1123,13 +1123,13 @@ export class AsgardeoAuthClient<T> {
    *     baseUrl: "https://localhost:9443"
    * }
    *
-   * await auth.updateConfig(config);
+   * await auth.reInitialize(config);
    * ```
-   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#updateConfig}
+   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#reInitialize}
    *
    * @preserve
    */
-  public async updateConfig(config: Partial<AuthClientConfig<T>>): Promise<void> {
+  public async reInitialize(config: Partial<AuthClientConfig<T>>): Promise<void> {
     await this._storageManager.setConfigData(config);
     await this.loadOpenIDProviderConfiguration(true);
   }
diff --git a/packages/node/src/__legacy__/client.ts b/packages/node/src/__legacy__/client.ts
index ea67b3cef..3ce874202 100644
--- a/packages/node/src/__legacy__/client.ts
+++ b/packages/node/src/__legacy__/client.ts
@@ -312,18 +312,18 @@ export class AsgardeoNodeClient<T> {
    *
    * @example
    * ```
-   * const updateConfig = await auth.updateConfig({
+   * const reInitialize = await auth.reInitialize({
    *       afterSignOutUrl: "http://localhost:3000/sign-out"
    *   });
    * ```
    *
-   * @link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#updateConfig
+   * @link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#reInitialize
    *
    * @memberof AsgardeoNodeClient
    *
    */
-  public async updateConfig(config: Partial<AuthClientConfig<T>>): Promise<void> {
-    return this._authCore.updateConfig(config);
+  public async reInitialize(config: Partial<AuthClientConfig<T>>): Promise<void> {
+    return this._authCore.reInitialize(config);
   }
 
   /**
diff --git a/packages/node/src/__legacy__/core/authentication.ts b/packages/node/src/__legacy__/core/authentication.ts
index 206116b64..1332ecc52 100644
--- a/packages/node/src/__legacy__/core/authentication.ts
+++ b/packages/node/src/__legacy__/core/authentication.ts
@@ -232,8 +232,8 @@ export class AsgardeoNodeCore<T> {
     return this._auth.exchangeToken(config, userId);
   }
 
-  public async updateConfig(config: Partial<AuthClientConfig<T>>): Promise<void> {
-    return this._auth.updateConfig(config);
+  public async reInitialize(config: Partial<AuthClientConfig<T>>): Promise<void> {
+    return this._auth.reInitialize(config);
   }
 
   public async revokeAccessToken(userId?: string): Promise<FetchResponse> {
diff --git a/packages/react/src/__temp__/api.ts b/packages/react/src/__temp__/api.ts
index 9d56af467..4b6a80df5 100644
--- a/packages/react/src/__temp__/api.ts
+++ b/packages/react/src/__temp__/api.ts
@@ -393,8 +393,8 @@ class AuthAPI {
    *
    * @param {Partial<AuthClientConfig<T>>} config - A config object to update the SDK configurations with.
    */
-  public async updateConfig(config: Partial<AuthClientConfig<Config>>): Promise<void> {
-    return this._client.updateConfig(config);
+  public async reInitialize(config: Partial<AuthClientConfig<Config>>): Promise<void> {
+    return this._client.reInitialize(config);
   }
 
   /**
diff --git a/packages/react/src/__temp__/models.ts b/packages/react/src/__temp__/models.ts
index 2c7517c60..92abf6374 100644
--- a/packages/react/src/__temp__/models.ts
+++ b/packages/react/src/__temp__/models.ts
@@ -112,7 +112,7 @@ export interface AuthContextInterface {
   isSignedIn(): Promise<boolean>;
   enableHttpHandler(): Promise<boolean>;
   disableHttpHandler(): Promise<boolean>;
-  updateConfig(config: Partial<AuthClientConfig<Config>>): Promise<void>;
+  reInitialize(config: Partial<AuthClientConfig<Config>>): Promise<void>;
   trySignInSilently: (
     additionalParams?: Record<string, string | boolean>,
     tokenRequestConfig?: {params: Record<string, unknown>},
diff --git a/packages/vue/src/auth-api.ts b/packages/vue/src/auth-api.ts
index 45ffa0732..c834fef60 100644
--- a/packages/vue/src/auth-api.ts
+++ b/packages/vue/src/auth-api.ts
@@ -346,8 +346,8 @@ class AuthAPI {
    *
    * @param {Partial<AuthClientConfig<T>>} config - A config object to update the SDK configurations with.
    */
-  public async updateConfig(config: Partial<AuthClientConfig<Config>>): Promise<void> {
-    return this._client.updateConfig(config);
+  public async reInitialize(config: Partial<AuthClientConfig<Config>>): Promise<void> {
+    return this._client.reInitialize(config);
   }
 
   /**
diff --git a/packages/vue/src/plugins/AsgardeoPlugin.ts b/packages/vue/src/plugins/AsgardeoPlugin.ts
index 057b930a5..96a3a34dd 100644
--- a/packages/vue/src/plugins/AsgardeoPlugin.ts
+++ b/packages/vue/src/plugins/AsgardeoPlugin.ts
@@ -221,9 +221,9 @@ export const asgardeoPlugin: Plugin = {
         }),
       state,
       trySignInSilently,
-      updateConfig: async (config: Partial<AuthClientConfig<Config>>): Promise<void> =>
+      reInitialize: async (config: Partial<AuthClientConfig<Config>>): Promise<void> =>
         withStateSync(async () => {
-          await AuthClient.updateConfig(config);
+          await AuthClient.reInitialize(config);
         }),
     };
 
diff --git a/packages/vue/src/tests/AsgardeoPlugin.test.ts b/packages/vue/src/tests/AsgardeoPlugin.test.ts
index ca22f0f56..5b4690ff6 100644
--- a/packages/vue/src/tests/AsgardeoPlugin.test.ts
+++ b/packages/vue/src/tests/AsgardeoPlugin.test.ts
@@ -185,9 +185,9 @@ describe('asgardeoPlugin', () => {
 
     mockAuthAPI.getState.mockReturnValueOnce(updatedState);
 
-    await authContext.updateConfig(newConfig);
+    await authContext.reInitialize(newConfig);
 
-    expect(mockAuthAPI.updateConfig).toHaveBeenCalledWith(newConfig);
+    expect(mockAuthAPI.reInitialize).toHaveBeenCalledWith(newConfig);
 
     expect(mockAuthAPI.getState).toHaveBeenCalled();
 
diff --git a/packages/vue/src/tests/auth-api.test.ts b/packages/vue/src/tests/auth-api.test.ts
index 0d3365102..5bb992897 100644
--- a/packages/vue/src/tests/auth-api.test.ts
+++ b/packages/vue/src/tests/auth-api.test.ts
@@ -417,11 +417,11 @@ describe('AuthAPI', () => {
     });
   });
 
-  describe('updateConfig', () => {
-    it('should call updateConfig on the client', async () => {
+  describe('reInitialize', () => {
+    it('should call reInitialize on the client', async () => {
       const config: Partial<AuthClientConfig<Config>> = {clientId: 'new-client-id'};
-      await authApi.updateConfig(config);
-      expect(mockClient.updateConfig).toHaveBeenCalledWith(config);
+      await authApi.reInitialize(config);
+      expect(mockClient.reInitialize).toHaveBeenCalledWith(config);
     });
   });
 
diff --git a/packages/vue/src/tests/mocks/mocks.ts b/packages/vue/src/tests/mocks/mocks.ts
index be10c9d22..f686934d0 100644
--- a/packages/vue/src/tests/mocks/mocks.ts
+++ b/packages/vue/src/tests/mocks/mocks.ts
@@ -63,7 +63,7 @@ export type MockAuthAPI = {
   signIn: Mock;
   signOut: Mock;
   trySignInSilently: Mock;
-  updateConfig: Mock;
+  reInitialize: Mock;
   updateState: Mock;
 };
 
@@ -109,7 +109,7 @@ export const mockAuthAPI: MockAuthAPI = {
   }),
   signOut: vi.fn().mockResolvedValue(true),
   trySignInSilently: vi.fn().mockResolvedValue(false),
-  updateConfig: vi.fn().mockResolvedValue(undefined),
+  reInitialize: vi.fn().mockResolvedValue(undefined),
   updateState: vi.fn().mockImplementation((newState: AuthStateInterface) => {
     Object.assign(mockState, newState);
   }),
@@ -163,7 +163,7 @@ export const mockAsgardeoSPAClient: Partial<AsgardeoSPAClient> = {
     sub: 'user-id-123',
     username: 'testUser',
   }),
-  updateConfig: vi.fn().mockResolvedValue(undefined),
+  reInitialize: vi.fn().mockResolvedValue(undefined),
 };
 
 export class MockAsgardeoAuthException extends Error {
diff --git a/packages/vue/src/tests/useAsgardeo.test.ts b/packages/vue/src/tests/useAsgardeo.test.ts
index 140d9d6ac..d4fa4a071 100644
--- a/packages/vue/src/tests/useAsgardeo.test.ts
+++ b/packages/vue/src/tests/useAsgardeo.test.ts
@@ -59,7 +59,7 @@ describe('useAsgardeo', () => {
       isLoading: false,
     },
     trySignInSilently: vi.fn().mockResolvedValue(true),
-    updateConfig: vi.fn().mockResolvedValue(undefined),
+    reInitialize: vi.fn().mockResolvedValue(undefined),
   };
 
   beforeEach(() => {
diff --git a/packages/vue/src/types.ts b/packages/vue/src/types.ts
index c686416de..8c75cdc6d 100644
--- a/packages/vue/src/types.ts
+++ b/packages/vue/src/types.ts
@@ -125,7 +125,7 @@ export interface AuthContextInterface {
     additionalParams?: Record<string, string | boolean>,
     tokenRequestConfig?: {params: Record<string, unknown>},
   ) => Promise<boolean | BasicUserInfo>;
-  updateConfig(config: Partial<AuthClientConfig<Config>>): Promise<void>;
+  reInitialize(config: Partial<AuthClientConfig<Config>>): Promise<void>;
 }
 
 /**

From 621b1bdd9f69da79de5bbddffc3f7063bc0471f0 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Tue, 10 Jun 2025 21:02:50 +0530
Subject: [PATCH 042/131] chore: change profile link to a span for improved
 accessibility

---
 recipes/vite-react-ts/src/components/Header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/recipes/vite-react-ts/src/components/Header.tsx b/recipes/vite-react-ts/src/components/Header.tsx
index 6dce63dbc..1952af139 100644
--- a/recipes/vite-react-ts/src/components/Header.tsx
+++ b/recipes/vite-react-ts/src/components/Header.tsx
@@ -152,7 +152,7 @@ export default function Header() {
                     <div className="text-sm text-gray-500">@{user?.username}</div>
                   </div>
 
-                  <Link
+                  <span
                     // to="/profile"
                     className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                     onClick={() => {
@@ -162,7 +162,7 @@ export default function Header() {
                   >
                     <User className="h-4 w-4 mr-3" />
                     Your profile
-                  </Link>
+                  </span>
 
                   <Link
                     to="/settings"

From f5fcc3b46966f4d1ac947ece445535a4c4e6ee5b Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Tue, 10 Jun 2025 21:03:37 +0530
Subject: [PATCH 043/131] chore: rename `clearUserSessionData` methods to
 `clearSession` for consistency across the codebase

---
 .../src/__legacy__/helpers/session-management-helper.ts     | 2 +-
 packages/browser/src/__legacy__/utils/spa-utils.ts          | 2 +-
 packages/javascript/src/__legacy__/client.ts                | 6 +++---
 .../src/__legacy__/helpers/authentication-helper.ts         | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/browser/src/__legacy__/helpers/session-management-helper.ts b/packages/browser/src/__legacy__/helpers/session-management-helper.ts
index 0caec2a0a..184245c92 100644
--- a/packages/browser/src/__legacy__/helpers/session-management-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/session-management-helper.ts
@@ -242,7 +242,7 @@ export const SessionManagementHelper = (() => {
         const signOutURL = await _signOut();
         // Clearing user session data before redirecting to the signOutURL because user has been already logged
         // out by the initial logout request in the single logout flow.
-        await AsgardeoAuthClient.clearUserSessionData();
+        await AsgardeoAuthClient.clearSession();
         parent.location.href = signOutURL;
         window.location.href = 'about:blank';
 
diff --git a/packages/browser/src/__legacy__/utils/spa-utils.ts b/packages/browser/src/__legacy__/utils/spa-utils.ts
index d345cc891..bf35ff957 100644
--- a/packages/browser/src/__legacy__/utils/spa-utils.ts
+++ b/packages/browser/src/__legacy__/utils/spa-utils.ts
@@ -120,7 +120,7 @@ export class SPAUtils {
       const newUrl = window.location.href.split('?')[0];
       history.pushState({}, document.title, newUrl);
 
-      await AsgardeoAuthClient.clearUserSessionData();
+      await AsgardeoAuthClient.clearSession();
 
       return true;
     }
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index e67af4b6f..53faa909c 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -751,7 +751,7 @@ export class AsgardeoAuthClient<T> {
       );
     }
 
-    this._authenticationHelper.clearUserSessionData(userId);
+    this._authenticationHelper.clearSession(userId);
 
     return Promise.resolve(response);
   }
@@ -1134,7 +1134,7 @@ export class AsgardeoAuthClient<T> {
     await this.loadOpenIDProviderConfiguration(true);
   }
 
-  public static async clearUserSessionData(userId?: string): Promise<void> {
-    await this._authenticationHelper.clearUserSessionData(userId);
+  public static async clearSession(userId?: string): Promise<void> {
+    await this._authenticationHelper.clearSession(userId);
   }
 }
diff --git a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
index a24009ae7..c55bb41de 100644
--- a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
@@ -245,7 +245,7 @@ export class AuthenticationHelper<T> {
       .replace(TokenExchangeConstants.Placeholders.CLIENT_SECRET, configData.clientSecret ?? '');
   }
 
-  public async clearUserSessionData(userId?: string): Promise<void> {
+  public async clearSession(userId?: string): Promise<void> {
     await this._storageManager.removeTemporaryData(userId);
     await this._storageManager.removeSessionData(userId);
   }

From a0271e767e0d77a317d6bd9678cfe87ec5462359 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Tue, 10 Jun 2025 21:08:53 +0530
Subject: [PATCH 044/131] chore: rename `getIDToken` methods to `getIdToken`
 for consistency across the codebase

---
 packages/__legacy__/core/src/api/sign-out.ts              | 2 +-
 packages/browser/src/__legacy__/client.ts                 | 8 ++++----
 .../browser/src/__legacy__/clients/main-thread-client.ts  | 6 +++---
 .../browser/src/__legacy__/clients/web-worker-client.ts   | 4 ++--
 .../src/__legacy__/helpers/authentication-helper.ts       | 4 ++--
 packages/browser/src/__legacy__/models/client.ts          | 4 ++--
 packages/browser/src/__legacy__/models/web-worker.ts      | 2 +-
 packages/browser/src/__legacy__/worker/worker-core.ts     | 6 +++---
 packages/browser/src/__legacy__/worker/worker-receiver.ts | 2 +-
 packages/express/src/__legacy__/client.ts                 | 4 ++--
 packages/javascript/src/__legacy__/client.ts              | 6 +++---
 packages/node/src/__legacy__/client.ts                    | 8 ++++----
 packages/node/src/__legacy__/core/authentication.ts       | 4 ++--
 packages/nuxt/src/runtime/server/handler.ts               | 2 +-
 packages/react/src/__temp__/api.ts                        | 4 ++--
 packages/react/src/__temp__/models.ts                     | 2 +-
 packages/vue/src/auth-api.ts                              | 4 ++--
 packages/vue/src/plugins/AsgardeoPlugin.ts                | 2 +-
 packages/vue/src/tests/auth-api.test.ts                   | 6 +++---
 packages/vue/src/tests/mocks/mocks.ts                     | 6 +++---
 packages/vue/src/tests/useAsgardeo.test.ts                | 2 +-
 packages/vue/src/types.ts                                 | 2 +-
 22 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/packages/__legacy__/core/src/api/sign-out.ts b/packages/__legacy__/core/src/api/sign-out.ts
index 5247e7114..90f54c57a 100644
--- a/packages/__legacy__/core/src/api/sign-out.ts
+++ b/packages/__legacy__/core/src/api/sign-out.ts
@@ -49,7 +49,7 @@ const signOut = async (): Promise<void> => {
   const authClient: UIAuthClient = AuthClient.getInstance();
 
   try {
-    formBody.append('id_token_hint', await authClient.getIDToken());
+    formBody.append('id_token_hint', await authClient.getIdToken());
     formBody.append('client_id', (await authClient.getStorageManager().getConfigData()).clientId);
     formBody.append('response_mode', 'direct');
   } catch (error) {
diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
index b60a034e2..301332f7e 100755
--- a/packages/browser/src/__legacy__/client.ts
+++ b/packages/browser/src/__legacy__/client.ts
@@ -789,19 +789,19 @@ export class AsgardeoSPAClient {
    *
    * @example
    * ```
-   * const idToken = await auth.getIDToken();
+   * const idToken = await auth.getIdToken();
    * ```
    *
-   * @link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getIDToken
+   * @link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getIdToken
    *
    * @memberof AsgardeoAuthClient
    *
    * @preserve
    */
-  public async getIDToken(): Promise<string | undefined> {
+  public async getIdToken(): Promise<string | undefined> {
     await this._validateMethod();
 
-    return this._client?.getIDToken();
+    return this._client?.getIdToken();
   }
 
   /**
diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index 0b5a7bc70..5a4788b9d 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -380,8 +380,8 @@ export const MainThreadClient = async (
     return _authenticationHelper.getCrypto();
   };
 
-  const getIDToken = async (): Promise<string> => {
-    return _authenticationHelper.getIDToken();
+  const getIdToken = async (): Promise<string> => {
+    return _authenticationHelper.getIdToken();
   };
 
   const getOpenIDProviderEndpoints = async (): Promise<OIDCEndpoints> => {
@@ -440,7 +440,7 @@ export const MainThreadClient = async (
     getStorageManager,
     getDecodedIDToken,
     getHttpClient,
-    getIDToken,
+    getIdToken,
     getOpenIDProviderEndpoints,
     httpRequest,
     httpRequestAll,
diff --git a/packages/browser/src/__legacy__/clients/web-worker-client.ts b/packages/browser/src/__legacy__/clients/web-worker-client.ts
index 58eda11d9..09dd46476 100755
--- a/packages/browser/src/__legacy__/clients/web-worker-client.ts
+++ b/packages/browser/src/__legacy__/clients/web-worker-client.ts
@@ -749,7 +749,7 @@ export const WebWorkerClient = async (
       });
   };
 
-  const getIDToken = (): Promise<string> => {
+  const getIdToken = (): Promise<string> => {
     const message: Message<null> = {
       type: GET_ID_TOKEN,
     };
@@ -845,7 +845,7 @@ export const WebWorkerClient = async (
     getCrypto,
     getDecodedIDPIDToken,
     getDecodedIDToken,
-    getIDToken,
+    getIdToken,
     getOpenIDProviderEndpoints,
     httpRequest,
     httpRequestAll,
diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
index 2bd171df4..e1682f8cc 100644
--- a/packages/browser/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -672,8 +672,8 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     return this._authenticationClient.getCrypto();
   }
 
-  public async getIDToken(): Promise<string> {
-    return this._authenticationClient.getIDToken();
+  public async getIdToken(): Promise<string> {
+    return this._authenticationClient.getIdToken();
   }
 
   public async getOpenIDProviderEndpoints(): Promise<OIDCEndpoints> {
diff --git a/packages/browser/src/__legacy__/models/client.ts b/packages/browser/src/__legacy__/models/client.ts
index ca5df2c2b..139a50021 100755
--- a/packages/browser/src/__legacy__/models/client.ts
+++ b/packages/browser/src/__legacy__/models/client.ts
@@ -63,7 +63,7 @@ export interface MainThreadClientInterface {
   getDecodedIDToken(): Promise<IdTokenPayload>;
   getCrypto(): Promise<IsomorphicCrypto>;
   getConfigData(): Promise<AuthClientConfig<MainThreadClientConfig>>;
-  getIDToken(): Promise<string>;
+  getIdToken(): Promise<string>;
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   getAccessToken(): Promise<string>;
   getStorageManager(): Promise<StorageManager<MainThreadClientConfig>>;
@@ -100,7 +100,7 @@ export interface WebWorkerClientInterface {
   getDecodedIDToken(): Promise<IdTokenPayload>;
   getDecodedIDPIDToken(): Promise<IdTokenPayload>;
   getCrypto(): Promise<IsomorphicCrypto>;
-  getIDToken(): Promise<string>;
+  getIdToken(): Promise<string>;
   isSignedIn(): Promise<boolean>;
   setHttpRequestSuccessCallback(callback: (response: HttpResponse) => void): void;
   setHttpRequestErrorCallback(callback: (response: HttpError) => void | Promise<void>): void;
diff --git a/packages/browser/src/__legacy__/models/web-worker.ts b/packages/browser/src/__legacy__/models/web-worker.ts
index f1468788d..5c15f95da 100755
--- a/packages/browser/src/__legacy__/models/web-worker.ts
+++ b/packages/browser/src/__legacy__/models/web-worker.ts
@@ -61,7 +61,7 @@ export interface WebWorkerCoreInterface {
   getDecodedIDToken(): Promise<IdTokenPayload>;
   getDecodedIDPIDToken(): Promise<IdTokenPayload>;
   getCrypto(): Promise<IsomorphicCrypto>;
-  getIDToken(): Promise<string>;
+  getIdToken(): Promise<string>;
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   getAccessToken(): Promise<string>;
   isSignedIn(): Promise<boolean>;
diff --git a/packages/browser/src/__legacy__/worker/worker-core.ts b/packages/browser/src/__legacy__/worker/worker-core.ts
index 621d581b9..5e54f89eb 100755
--- a/packages/browser/src/__legacy__/worker/worker-core.ts
+++ b/packages/browser/src/__legacy__/worker/worker-core.ts
@@ -179,8 +179,8 @@ export const WebWorkerCore = async (
     return _authenticationHelper.getDecodedIDPIDToken();
   };
 
-  const getIDToken = async (): Promise<string> => {
-    return _authenticationHelper.getIDToken();
+  const getIdToken = async (): Promise<string> => {
+    return _authenticationHelper.getIdToken();
   };
   const getOpenIDProviderEndpoints = async (): Promise<OIDCEndpoints> => {
     return _authenticationHelper.getOpenIDProviderEndpoints();
@@ -223,7 +223,7 @@ export const WebWorkerCore = async (
     getCrypto,
     getDecodedIDPIDToken,
     getDecodedIDToken,
-    getIDToken,
+    getIdToken,
     getOpenIDProviderEndpoints,
     getSignOutUrl,
     httpRequest,
diff --git a/packages/browser/src/__legacy__/worker/worker-receiver.ts b/packages/browser/src/__legacy__/worker/worker-receiver.ts
index e6d76e6ef..2fcf30435 100644
--- a/packages/browser/src/__legacy__/worker/worker-receiver.ts
+++ b/packages/browser/src/__legacy__/worker/worker-receiver.ts
@@ -215,7 +215,7 @@ export const workerReceiver = (
         break;
       case GET_ID_TOKEN:
         try {
-          port.postMessage(MessageUtils.generateSuccessMessage(await webWorker.getIDToken()));
+          port.postMessage(MessageUtils.generateSuccessMessage(await webWorker.getIdToken()));
         } catch (error) {
           port.postMessage(MessageUtils.generateFailureMessage(error));
         }
diff --git a/packages/express/src/__legacy__/client.ts b/packages/express/src/__legacy__/client.ts
index 6e12da51a..30195a142 100644
--- a/packages/express/src/__legacy__/client.ts
+++ b/packages/express/src/__legacy__/client.ts
@@ -162,8 +162,8 @@ export class AsgardeoExpressClient {
     return this._authClient.isSignedIn(userId);
   }
 
-  public async getIDToken(userId: string): Promise<string> {
-    return this._authClient.getIDToken(userId);
+  public async getIdToken(userId: string): Promise<string> {
+    return this._authClient.getIdToken(userId);
   }
 
   public async getUser(userId: string): Promise<BasicUserInfo> {
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 53faa909c..18030af0d 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -609,14 +609,14 @@ export class AsgardeoAuthClient<T> {
    *
    * @example
    * ```
-   * const idToken = await auth.getIDToken();
+   * const idToken = await auth.getIdToken();
    * ```
    *
-   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getIDToken}
+   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getIdToken}
    *
    * @preserve
    */
-  public async getIDToken(userId?: string): Promise<string> {
+  public async getIdToken(userId?: string): Promise<string> {
     return (await this._storageManager.getSessionData(userId)).id_token;
   }
 
diff --git a/packages/node/src/__legacy__/client.ts b/packages/node/src/__legacy__/client.ts
index 3ce874202..ab67c46f8 100644
--- a/packages/node/src/__legacy__/client.ts
+++ b/packages/node/src/__legacy__/client.ts
@@ -162,16 +162,16 @@ export class AsgardeoNodeClient<T> {
    *
    * @example
    * ```
-   * const isAuth = await authClient.getIDToken("a2a2972c-51cd-5e9d-a9ae-058fae9f7927");
+   * const isAuth = await authClient.getIdToken("a2a2972c-51cd-5e9d-a9ae-058fae9f7927");
    * ```
    *
-   * @link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getIDToken
+   * @link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getIdToken
    *
    * @memberof AsgardeoNodeClient
    *
    */
-  public async getIDToken(userId: string): Promise<string> {
-    return this._authCore.getIDToken(userId);
+  public async getIdToken(userId: string): Promise<string> {
+    return this._authCore.getIdToken(userId);
   }
 
   /**
diff --git a/packages/node/src/__legacy__/core/authentication.ts b/packages/node/src/__legacy__/core/authentication.ts
index 1332ecc52..88e4b4d97 100644
--- a/packages/node/src/__legacy__/core/authentication.ts
+++ b/packages/node/src/__legacy__/core/authentication.ts
@@ -143,7 +143,7 @@ export class AsgardeoNodeCore<T> {
     return this._auth.requestAccessToken(authorizationCode, sessionState, state, userId);
   }
 
-  public async getIDToken(userId: string): Promise<string> {
+  public async getIdToken(userId: string): Promise<string> {
     const is_logged_in = await this.isSignedIn(userId);
     if (!is_logged_in) {
       return Promise.reject(
@@ -154,7 +154,7 @@ export class AsgardeoNodeCore<T> {
         ),
       );
     }
-    const idToken = await this._auth.getIDToken(userId);
+    const idToken = await this._auth.getIdToken(userId);
     if (idToken) {
       return Promise.resolve(idToken);
     } else {
diff --git a/packages/nuxt/src/runtime/server/handler.ts b/packages/nuxt/src/runtime/server/handler.ts
index 4c6d28910..eed4929d3 100644
--- a/packages/nuxt/src/runtime/server/handler.ts
+++ b/packages/nuxt/src/runtime/server/handler.ts
@@ -176,7 +176,7 @@ export const AsgardeoAuthHandler = (config: AuthClientConfig, options?: Asgardeo
       }
 
       try {
-        const idToken: string = await authClient.getIDToken(sessionId);
+        const idToken: string = await authClient.getIdToken(sessionId);
         return {idToken};
       } catch {
         throw createError({
diff --git a/packages/react/src/__temp__/api.ts b/packages/react/src/__temp__/api.ts
index 4b6a80df5..4896c4fd6 100644
--- a/packages/react/src/__temp__/api.ts
+++ b/packages/react/src/__temp__/api.ts
@@ -314,8 +314,8 @@ class AuthAPI {
    *
    * @return {Promise<string>} - A Promise that resolves with the id token.
    */
-  public async getIDToken(): Promise<string> {
-    return this._client.getIDToken();
+  public async getIdToken(): Promise<string> {
+    return this._client.getIdToken();
   }
 
   /**
diff --git a/packages/react/src/__temp__/models.ts b/packages/react/src/__temp__/models.ts
index 92abf6374..0753e4e7c 100644
--- a/packages/react/src/__temp__/models.ts
+++ b/packages/react/src/__temp__/models.ts
@@ -106,7 +106,7 @@ export interface AuthContextInterface {
   getHttpClient(): Promise<HttpClientInstance>;
   getDecodedIDPIDToken(): Promise<IdTokenPayload>;
   getDecodedIDToken(): Promise<IdTokenPayload>;
-  getIDToken(): Promise<string>;
+  getIdToken(): Promise<string>;
   getAccessToken(): Promise<string>;
   refreshAccessToken(): Promise<BasicUserInfo>;
   isSignedIn(): Promise<boolean>;
diff --git a/packages/vue/src/auth-api.ts b/packages/vue/src/auth-api.ts
index c834fef60..ddf64d6ef 100644
--- a/packages/vue/src/auth-api.ts
+++ b/packages/vue/src/auth-api.ts
@@ -268,8 +268,8 @@ class AuthAPI {
    *
    * @return {Promise<string>} - A Promise that resolves with the id token.
    */
-  public async getIDToken(): Promise<string> {
-    return this._client.getIDToken();
+  public async getIdToken(): Promise<string> {
+    return this._client.getIdToken();
   }
 
   /**
diff --git a/packages/vue/src/plugins/AsgardeoPlugin.ts b/packages/vue/src/plugins/AsgardeoPlugin.ts
index 96a3a34dd..924b50044 100644
--- a/packages/vue/src/plugins/AsgardeoPlugin.ts
+++ b/packages/vue/src/plugins/AsgardeoPlugin.ts
@@ -161,7 +161,7 @@ export const asgardeoPlugin: Plugin = {
       getUser: (): Promise<BasicUserInfo> => AuthClient.getUser(),
       getDecodedIDToken: (): Promise<IdTokenPayload> => AuthClient.getDecodedIDToken(),
       getHttpClient: (): Promise<HttpClientInstance> => AuthClient.getHttpClient(),
-      getIDToken: (): Promise<string> => AuthClient.getIDToken(),
+      getIdToken: (): Promise<string> => AuthClient.getIdToken(),
       getOpenIDProviderEndpoints: (): Promise<OIDCEndpoints> => AuthClient.getOpenIDProviderEndpoints(),
       httpRequest: (config: HttpRequestConfig): Promise<HttpResponse<any>> => AuthClient.httpRequest(config),
       httpRequestAll: (configs: HttpRequestConfig[]): Promise<HttpResponse<any>[]> =>
diff --git a/packages/vue/src/tests/auth-api.test.ts b/packages/vue/src/tests/auth-api.test.ts
index 5bb992897..ddfc7a983 100644
--- a/packages/vue/src/tests/auth-api.test.ts
+++ b/packages/vue/src/tests/auth-api.test.ts
@@ -360,9 +360,9 @@ describe('AuthAPI', () => {
       expect(result).toEqual({sub: 'user-id-123'});
     });
 
-    it('should call getIDToken on the client', async () => {
-      const result: string = await authApi.getIDToken();
-      expect(mockClient.getIDToken).toHaveBeenCalled();
+    it('should call getIdToken on the client', async () => {
+      const result: string = await authApi.getIdToken();
+      expect(mockClient.getIdToken).toHaveBeenCalled();
       expect(result).toBe('mock-id-token');
     });
 
diff --git a/packages/vue/src/tests/mocks/mocks.ts b/packages/vue/src/tests/mocks/mocks.ts
index f686934d0..f692340a4 100644
--- a/packages/vue/src/tests/mocks/mocks.ts
+++ b/packages/vue/src/tests/mocks/mocks.ts
@@ -48,7 +48,7 @@ export type MockAuthAPI = {
   getUser: Mock;
   getDecodedIDToken: Mock;
   getHttpClient: Mock;
-  getIDToken: Mock;
+  getIdToken: Mock;
   getOpenIDProviderEndpoints: Mock;
   getState: Mock;
   httpRequest: Mock;
@@ -80,7 +80,7 @@ export const mockAuthAPI: MockAuthAPI = {
   }),
   getDecodedIDToken: vi.fn().mockResolvedValue({aud: 'client-id', iss: 'https://test.com', sub: 'user-id-123'}),
   getHttpClient: vi.fn().mockResolvedValue({}),
-  getIDToken: vi.fn().mockResolvedValue('mock-id-token'),
+  getIdToken: vi.fn().mockResolvedValue('mock-id-token'),
   getOpenIDProviderEndpoints: vi.fn().mockResolvedValue({}),
   getState: vi.fn().mockReturnValue(mockState),
   httpRequest: vi.fn().mockResolvedValue({data: {}, status: 200}),
@@ -129,7 +129,7 @@ export const mockAsgardeoSPAClient: Partial<AsgardeoSPAClient> = {
   getDecodedIDToken: vi.fn().mockResolvedValue({sub: 'user-id-123'}),
   getHttpClient: vi.fn().mockResolvedValue({}),
   getIDPAccessToken: vi.fn().mockResolvedValue('mock-idp-access-token'),
-  getIDToken: vi.fn().mockResolvedValue('mock-id-token'),
+  getIdToken: vi.fn().mockResolvedValue('mock-id-token'),
   getOpenIDProviderEndpoints: vi.fn().mockResolvedValue({}),
   httpRequest: vi.fn().mockResolvedValue({data: {}, status: 200}),
   httpRequestAll: vi.fn().mockResolvedValue([{data: {}, status: 200}]),
diff --git a/packages/vue/src/tests/useAsgardeo.test.ts b/packages/vue/src/tests/useAsgardeo.test.ts
index d4fa4a071..be7c20b7e 100644
--- a/packages/vue/src/tests/useAsgardeo.test.ts
+++ b/packages/vue/src/tests/useAsgardeo.test.ts
@@ -42,7 +42,7 @@ describe('useAsgardeo', () => {
     getUser: vi.fn().mockResolvedValue({} as BasicUserInfo),
     getDecodedIDToken: vi.fn().mockResolvedValue({} as IdTokenPayload),
     getHttpClient: vi.fn().mockResolvedValue({} as HttpClientInstance),
-    getIDToken: vi.fn().mockResolvedValue('id_token'),
+    getIdToken: vi.fn().mockResolvedValue('id_token'),
     getOpenIDProviderEndpoints: vi.fn().mockResolvedValue({} as OIDCEndpoints),
     httpRequest: vi.fn().mockResolvedValue({} as HttpResponse<any>),
     httpRequestAll: vi.fn().mockResolvedValue([{} as HttpResponse<any>]),
diff --git a/packages/vue/src/types.ts b/packages/vue/src/types.ts
index 8c75cdc6d..b812647db 100644
--- a/packages/vue/src/types.ts
+++ b/packages/vue/src/types.ts
@@ -98,7 +98,7 @@ export interface AuthContextInterface {
   getUser(): Promise<BasicUserInfo>;
   getDecodedIDToken(): Promise<IdTokenPayload>;
   getHttpClient(): Promise<HttpClientInstance>;
-  getIDToken(): Promise<string>;
+  getIdToken(): Promise<string>;
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   httpRequest(config: HttpRequestConfig): Promise<HttpResponse<any>>;
   httpRequestAll(configs: HttpRequestConfig[]): Promise<HttpResponse<any>[]>;

From a3c6a80016c5c3bf23c8e92e40e5a87df49e7fe3 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Tue, 10 Jun 2025 21:11:16 +0530
Subject: [PATCH 045/131] chore: rename `getDecodedIDToken` methods to
 `getDecodedIdToken` for consistency across the codebase

---
 packages/browser/src/__legacy__/client.ts                 | 6 +++---
 .../browser/src/__legacy__/clients/main-thread-client.ts  | 6 +++---
 .../browser/src/__legacy__/clients/web-worker-client.ts   | 4 ++--
 .../src/__legacy__/helpers/authentication-helper.ts       | 6 +++---
 packages/browser/src/__legacy__/models/client.ts          | 4 ++--
 packages/browser/src/__legacy__/models/web-worker.ts      | 2 +-
 packages/browser/src/__legacy__/worker/worker-core.ts     | 6 +++---
 packages/browser/src/__legacy__/worker/worker-receiver.ts | 2 +-
 packages/express/src/__legacy__/client.ts                 | 4 ++--
 packages/javascript/src/__legacy__/client.ts              | 6 +++---
 packages/node/src/__legacy__/client.ts                    | 8 ++++----
 packages/node/src/__legacy__/core/authentication.ts       | 4 ++--
 packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts | 4 ++--
 packages/nuxt/src/runtime/server/handler.ts               | 2 +-
 packages/nuxt/src/runtime/types.ts                        | 2 +-
 packages/react/src/__temp__/api.ts                        | 6 +++---
 packages/react/src/__temp__/models.ts                     | 2 +-
 packages/vue/src/auth-api.ts                              | 6 +++---
 packages/vue/src/plugins/AsgardeoPlugin.ts                | 2 +-
 packages/vue/src/tests/AsgardeoPlugin.test.ts             | 6 +++---
 packages/vue/src/tests/auth-api.test.ts                   | 8 ++++----
 packages/vue/src/tests/mocks/mocks.ts                     | 6 +++---
 packages/vue/src/tests/useAsgardeo.test.ts                | 2 +-
 packages/vue/src/types.ts                                 | 2 +-
 recipes/vue-vite/src/views/HomeView.vue                   | 4 ++--
 25 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
index 301332f7e..908490694 100755
--- a/packages/browser/src/__legacy__/client.ts
+++ b/packages/browser/src/__legacy__/client.ts
@@ -738,7 +738,7 @@ export class AsgardeoSPAClient {
    *
    * @example
    * ```
-   * auth.getDecodedIDToken().then((response)=>{
+   * auth.getDecodedIdToken().then((response)=>{
    *     // console.log(response);
    * }).catch((error)=>{
    *     // console.error(error);
@@ -750,10 +750,10 @@ export class AsgardeoSPAClient {
    *
    * @preserve
    */
-  public async getDecodedIDToken(): Promise<IdTokenPayload | undefined> {
+  public async getDecodedIdToken(): Promise<IdTokenPayload | undefined> {
     await this._validateMethod();
 
-    return this._client?.getDecodedIDToken();
+    return this._client?.getDecodedIdToken();
   }
 
   /**
diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index 5a4788b9d..98a39a7f2 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -372,8 +372,8 @@ export const MainThreadClient = async (
     return _authenticationHelper.getUser();
   };
 
-  const getDecodedIDToken = async (): Promise<IdTokenPayload> => {
-    return _authenticationHelper.getDecodedIDToken();
+  const getDecodedIdToken = async (): Promise<IdTokenPayload> => {
+    return _authenticationHelper.getDecodedIdToken();
   };
 
   const getCrypto = async (): Promise<IsomorphicCrypto> => {
@@ -438,7 +438,7 @@ export const MainThreadClient = async (
     getConfigData,
     getCrypto,
     getStorageManager,
-    getDecodedIDToken,
+    getDecodedIdToken,
     getHttpClient,
     getIdToken,
     getOpenIDProviderEndpoints,
diff --git a/packages/browser/src/__legacy__/clients/web-worker-client.ts b/packages/browser/src/__legacy__/clients/web-worker-client.ts
index 09dd46476..880581ffc 100755
--- a/packages/browser/src/__legacy__/clients/web-worker-client.ts
+++ b/packages/browser/src/__legacy__/clients/web-worker-client.ts
@@ -707,7 +707,7 @@ export const WebWorkerClient = async (
       });
   };
 
-  const getDecodedIDToken = (): Promise<IdTokenPayload> => {
+  const getDecodedIdToken = (): Promise<IdTokenPayload> => {
     const message: Message<null> = {
       type: GET_DECODED_ID_TOKEN,
     };
@@ -844,7 +844,7 @@ export const WebWorkerClient = async (
     getConfigData,
     getCrypto,
     getDecodedIDPIDToken,
-    getDecodedIDToken,
+    getDecodedIdToken,
     getIdToken,
     getOpenIDProviderEndpoints,
     httpRequest,
diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
index e1682f8cc..04de17495 100644
--- a/packages/browser/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -660,12 +660,12 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     return this._authenticationClient.getUser();
   }
 
-  public async getDecodedIDToken(): Promise<IdTokenPayload> {
-    return this._authenticationClient.getDecodedIDToken();
+  public async getDecodedIdToken(): Promise<IdTokenPayload> {
+    return this._authenticationClient.getDecodedIdToken();
   }
 
   public async getDecodedIDPIDToken(): Promise<IdTokenPayload> {
-    return this._authenticationClient.getDecodedIDToken();
+    return this._authenticationClient.getDecodedIdToken();
   }
 
   public async getCrypto(): Promise<IsomorphicCrypto> {
diff --git a/packages/browser/src/__legacy__/models/client.ts b/packages/browser/src/__legacy__/models/client.ts
index 139a50021..4371034b1 100755
--- a/packages/browser/src/__legacy__/models/client.ts
+++ b/packages/browser/src/__legacy__/models/client.ts
@@ -60,7 +60,7 @@ export interface MainThreadClientInterface {
   refreshAccessToken(): Promise<BasicUserInfo>;
   revokeAccessToken(): Promise<boolean>;
   getUser(): Promise<BasicUserInfo>;
-  getDecodedIDToken(): Promise<IdTokenPayload>;
+  getDecodedIdToken(): Promise<IdTokenPayload>;
   getCrypto(): Promise<IsomorphicCrypto>;
   getConfigData(): Promise<AuthClientConfig<MainThreadClientConfig>>;
   getIdToken(): Promise<string>;
@@ -97,7 +97,7 @@ export interface WebWorkerClientInterface {
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   getUser(): Promise<BasicUserInfo>;
   getConfigData(): Promise<AuthClientConfig<WebWorkerClientConfig>>;
-  getDecodedIDToken(): Promise<IdTokenPayload>;
+  getDecodedIdToken(): Promise<IdTokenPayload>;
   getDecodedIDPIDToken(): Promise<IdTokenPayload>;
   getCrypto(): Promise<IsomorphicCrypto>;
   getIdToken(): Promise<string>;
diff --git a/packages/browser/src/__legacy__/models/web-worker.ts b/packages/browser/src/__legacy__/models/web-worker.ts
index 5c15f95da..f8ebc023a 100755
--- a/packages/browser/src/__legacy__/models/web-worker.ts
+++ b/packages/browser/src/__legacy__/models/web-worker.ts
@@ -58,7 +58,7 @@ export interface WebWorkerCoreInterface {
   refreshAccessToken(): Promise<BasicUserInfo>;
   revokeAccessToken(): Promise<boolean>;
   getUser(): Promise<BasicUserInfo>;
-  getDecodedIDToken(): Promise<IdTokenPayload>;
+  getDecodedIdToken(): Promise<IdTokenPayload>;
   getDecodedIDPIDToken(): Promise<IdTokenPayload>;
   getCrypto(): Promise<IsomorphicCrypto>;
   getIdToken(): Promise<string>;
diff --git a/packages/browser/src/__legacy__/worker/worker-core.ts b/packages/browser/src/__legacy__/worker/worker-core.ts
index 5e54f89eb..5074dc967 100755
--- a/packages/browser/src/__legacy__/worker/worker-core.ts
+++ b/packages/browser/src/__legacy__/worker/worker-core.ts
@@ -167,8 +167,8 @@ export const WebWorkerCore = async (
     return _authenticationHelper.getUser();
   };
 
-  const getDecodedIDToken = async (): Promise<IdTokenPayload> => {
-    return _authenticationHelper.getDecodedIDToken();
+  const getDecodedIdToken = async (): Promise<IdTokenPayload> => {
+    return _authenticationHelper.getDecodedIdToken();
   };
 
   const getCrypto = async (): Promise<IsomorphicCrypto> => {
@@ -222,7 +222,7 @@ export const WebWorkerCore = async (
     getConfigData,
     getCrypto,
     getDecodedIDPIDToken,
-    getDecodedIDToken,
+    getDecodedIdToken,
     getIdToken,
     getOpenIDProviderEndpoints,
     getSignOutUrl,
diff --git a/packages/browser/src/__legacy__/worker/worker-receiver.ts b/packages/browser/src/__legacy__/worker/worker-receiver.ts
index 2fcf30435..7a0a3b6c5 100644
--- a/packages/browser/src/__legacy__/worker/worker-receiver.ts
+++ b/packages/browser/src/__legacy__/worker/worker-receiver.ts
@@ -199,7 +199,7 @@ export const workerReceiver = (
         break;
       case GET_DECODED_ID_TOKEN:
         try {
-          port.postMessage(MessageUtils.generateSuccessMessage(await webWorker.getDecodedIDToken()));
+          port.postMessage(MessageUtils.generateSuccessMessage(await webWorker.getDecodedIdToken()));
         } catch (error) {
           port.postMessage(MessageUtils.generateFailureMessage(error));
         }
diff --git a/packages/express/src/__legacy__/client.ts b/packages/express/src/__legacy__/client.ts
index 30195a142..70ac9543b 100644
--- a/packages/express/src/__legacy__/client.ts
+++ b/packages/express/src/__legacy__/client.ts
@@ -174,8 +174,8 @@ export class AsgardeoExpressClient {
     return this._authClient.getOpenIDProviderEndpoints();
   }
 
-  public async getDecodedIDToken(userId?: string): Promise<IdTokenPayload> {
-    return this._authClient.getDecodedIDToken(userId);
+  public async getDecodedIdToken(userId?: string): Promise<IdTokenPayload> {
+    return this._authClient.getDecodedIdToken(userId);
   }
 
   public async getAccessToken(userId?: string): Promise<string> {
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 18030af0d..c05a5e582 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -585,14 +585,14 @@ export class AsgardeoAuthClient<T> {
    *
    * @example
    * ```
-   * const decodedIdToken = await auth.getDecodedIDToken();
+   * const decodedIdToken = await auth.getDecodedIdToken();
    * ```
    *
-   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getDecodedIDToken}
+   * {@link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getDecodedIdToken}
    *
    * @preserve
    */
-  public async getDecodedIDToken(userId?: string): Promise<IdTokenPayload> {
+  public async getDecodedIdToken(userId?: string): Promise<IdTokenPayload> {
     const idToken: string = (await this._storageManager.getSessionData(userId)).id_token;
     const payload: IdTokenPayload = this._cryptoHelper.decodeIDToken(idToken);
 
diff --git a/packages/node/src/__legacy__/client.ts b/packages/node/src/__legacy__/client.ts
index ab67c46f8..3c1268a48 100644
--- a/packages/node/src/__legacy__/client.ts
+++ b/packages/node/src/__legacy__/client.ts
@@ -225,16 +225,16 @@ export class AsgardeoNodeClient<T> {
    *
    * @example
    * ```
-   * const decodedIDTokenPayload = await auth.getDecodedIDToken("a2a2972c-51cd-5e9d-a9ae-058fae9f7927");
+   * const decodedIDTokenPayload = await auth.getDecodedIdToken("a2a2972c-51cd-5e9d-a9ae-058fae9f7927");
    * ```
    *
-   * @link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getDecodedIDToken
+   * @link https://github.com/asgardeo/asgardeo-auth-js-sdk/tree/master#getDecodedIdToken
    *
    * @memberof AsgardeoNodeClient
    *
    */
-  public async getDecodedIDToken(userId?: string): Promise<IdTokenPayload> {
-    return this._authCore.getDecodedIDToken(userId);
+  public async getDecodedIdToken(userId?: string): Promise<IdTokenPayload> {
+    return this._authCore.getDecodedIdToken(userId);
   }
 
   /**
diff --git a/packages/node/src/__legacy__/core/authentication.ts b/packages/node/src/__legacy__/core/authentication.ts
index 88e4b4d97..8478f51ad 100644
--- a/packages/node/src/__legacy__/core/authentication.ts
+++ b/packages/node/src/__legacy__/core/authentication.ts
@@ -220,8 +220,8 @@ export class AsgardeoNodeCore<T> {
     return this._auth.getOpenIDProviderEndpoints() as Promise<OIDCEndpoints>;
   }
 
-  public async getDecodedIDToken(userId?: string): Promise<IdTokenPayload> {
-    return this._auth.getDecodedIDToken(userId);
+  public async getDecodedIdToken(userId?: string): Promise<IdTokenPayload> {
+    return this._auth.getDecodedIdToken(userId);
   }
 
   public async getAccessToken(userId?: string): Promise<string> {
diff --git a/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts b/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
index e65bb0539..dfdf584d5 100644
--- a/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
+++ b/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
@@ -100,7 +100,7 @@ export const useAuth = (): AuthInterface => {
    *
    * @returns {Promise<IdTokenPayload | null>} - A promise that resolves to the decoded ID token payload if available, or null if not.
    */
-  const getDecodedIDToken = async (): Promise<IdTokenPayload | null> => {
+  const getDecodedIdToken = async (): Promise<IdTokenPayload | null> => {
     try {
       const response: Response = await fetch(`/api/auth/get-decoded-id-token`, {
         credentials: 'include',
@@ -233,7 +233,7 @@ export const useAuth = (): AuthInterface => {
     getAccessToken,
     getUser,
     getStorageManager,
-    getDecodedIDToken,
+    getDecodedIdToken,
     getIdToken,
     getOpenIDProviderEndpoints,
     isSignedIn,
diff --git a/packages/nuxt/src/runtime/server/handler.ts b/packages/nuxt/src/runtime/server/handler.ts
index eed4929d3..00db0f3df 100644
--- a/packages/nuxt/src/runtime/server/handler.ts
+++ b/packages/nuxt/src/runtime/server/handler.ts
@@ -212,7 +212,7 @@ export const AsgardeoAuthHandler = (config: AuthClientConfig, options?: Asgardeo
       }
 
       try {
-        return await authClient.getDecodedIDToken(sessionId);
+        return await authClient.getDecodedIdToken(sessionId);
       } catch {
         throw createError({
           statusCode: 500,
diff --git a/packages/nuxt/src/runtime/types.ts b/packages/nuxt/src/runtime/types.ts
index cebedccf9..4a6a0398f 100644
--- a/packages/nuxt/src/runtime/types.ts
+++ b/packages/nuxt/src/runtime/types.ts
@@ -61,7 +61,7 @@ export interface AuthInterface {
   getAccessToken: () => Promise<string | null>;
   getUser: () => Promise<BasicUserInfo | null>;
   getStorageManager: () => Promise<StorageManager<any> | null>;
-  getDecodedIDToken: () => Promise<IdTokenPayload | null>;
+  getDecodedIdToken: () => Promise<IdTokenPayload | null>;
   getIdToken: () => Promise<string | null>;
   getOpenIDProviderEndpoints: () => Promise<OIDCEndpoints | null>;
   isSignedIn: () => Promise<boolean>;
diff --git a/packages/react/src/__temp__/api.ts b/packages/react/src/__temp__/api.ts
index 4896c4fd6..a02242986 100644
--- a/packages/react/src/__temp__/api.ts
+++ b/packages/react/src/__temp__/api.ts
@@ -295,8 +295,8 @@ class AuthAPI {
    * @return {Promise<DecodedIDTokenPayloadInterface>} - A Promise that resolves with
    * the decoded payload of the id token.
    */
-  public async getDecodedIDToken(): Promise<IdTokenPayload> {
-    return this._client.getDecodedIDToken();
+  public async getDecodedIdToken(): Promise<IdTokenPayload> {
+    return this._client.getDecodedIdToken();
   }
 
   /**
@@ -306,7 +306,7 @@ class AuthAPI {
    * the decoded payload of the idp id token.
    */
   public async getDecodedIDPIDToken(): Promise<IdTokenPayload> {
-    return this._client.getDecodedIDToken();
+    return this._client.getDecodedIdToken();
   }
 
   /**
diff --git a/packages/react/src/__temp__/models.ts b/packages/react/src/__temp__/models.ts
index 0753e4e7c..0cbf3471c 100644
--- a/packages/react/src/__temp__/models.ts
+++ b/packages/react/src/__temp__/models.ts
@@ -105,7 +105,7 @@ export interface AuthContextInterface {
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   getHttpClient(): Promise<HttpClientInstance>;
   getDecodedIDPIDToken(): Promise<IdTokenPayload>;
-  getDecodedIDToken(): Promise<IdTokenPayload>;
+  getDecodedIdToken(): Promise<IdTokenPayload>;
   getIdToken(): Promise<string>;
   getAccessToken(): Promise<string>;
   refreshAccessToken(): Promise<BasicUserInfo>;
diff --git a/packages/vue/src/auth-api.ts b/packages/vue/src/auth-api.ts
index ddf64d6ef..fd7a71e08 100644
--- a/packages/vue/src/auth-api.ts
+++ b/packages/vue/src/auth-api.ts
@@ -247,8 +247,8 @@ class AuthAPI {
    * @return {Promise<DecodedIDTokenPayloadInterface>} - A Promise that resolves with
    * the decoded payload of the id token.
    */
-  public async getDecodedIDToken(): Promise<IdTokenPayload> {
-    return this._client.getDecodedIDToken();
+  public async getDecodedIdToken(): Promise<IdTokenPayload> {
+    return this._client.getDecodedIdToken();
   }
 
   /**
@@ -260,7 +260,7 @@ class AuthAPI {
    * the decoded payload of the idp id token.
    */
   public async getDecodedIDPIDToken(): Promise<IdTokenPayload> {
-    return this._client.getDecodedIDToken();
+    return this._client.getDecodedIdToken();
   }
 
   /**
diff --git a/packages/vue/src/plugins/AsgardeoPlugin.ts b/packages/vue/src/plugins/AsgardeoPlugin.ts
index 924b50044..c1b49a88e 100644
--- a/packages/vue/src/plugins/AsgardeoPlugin.ts
+++ b/packages/vue/src/plugins/AsgardeoPlugin.ts
@@ -159,7 +159,7 @@ export const asgardeoPlugin: Plugin = {
       error: error.value,
       getAccessToken: (): Promise<string> => AuthClient.getAccessToken(),
       getUser: (): Promise<BasicUserInfo> => AuthClient.getUser(),
-      getDecodedIDToken: (): Promise<IdTokenPayload> => AuthClient.getDecodedIDToken(),
+      getDecodedIdToken: (): Promise<IdTokenPayload> => AuthClient.getDecodedIdToken(),
       getHttpClient: (): Promise<HttpClientInstance> => AuthClient.getHttpClient(),
       getIdToken: (): Promise<string> => AuthClient.getIdToken(),
       getOpenIDProviderEndpoints: (): Promise<OIDCEndpoints> => AuthClient.getOpenIDProviderEndpoints(),
diff --git a/packages/vue/src/tests/AsgardeoPlugin.test.ts b/packages/vue/src/tests/AsgardeoPlugin.test.ts
index 5b4690ff6..d93b82900 100644
--- a/packages/vue/src/tests/AsgardeoPlugin.test.ts
+++ b/packages/vue/src/tests/AsgardeoPlugin.test.ts
@@ -214,9 +214,9 @@ describe('asgardeoPlugin', () => {
     expect(accessTokenValue).toBe(accessToken);
 
     const decodedIDToken: IdTokenPayload = {aud: 'client-id', iss: 'https://test.com', sub: 'user-id-123'};
-    mockAuthAPI.getDecodedIDToken.mockResolvedValueOnce(decodedIDToken);
-    const idToken: IdTokenPayload = await authContext.getDecodedIDToken();
-    expect(mockAuthAPI.getDecodedIDToken).toHaveBeenCalled();
+    mockAuthAPI.getDecodedIdToken.mockResolvedValueOnce(decodedIDToken);
+    const idToken: IdTokenPayload = await authContext.getDecodedIdToken();
+    expect(mockAuthAPI.getDecodedIdToken).toHaveBeenCalled();
     expect(idToken).toMatchObject(decodedIDToken);
   });
 
diff --git a/packages/vue/src/tests/auth-api.test.ts b/packages/vue/src/tests/auth-api.test.ts
index ddfc7a983..7e38ca356 100644
--- a/packages/vue/src/tests/auth-api.test.ts
+++ b/packages/vue/src/tests/auth-api.test.ts
@@ -348,15 +348,15 @@ describe('AuthAPI', () => {
   });
 
   describe('token related methods', () => {
-    it('should call getDecodedIDToken on the client', async () => {
-      const result: IdTokenPayload = await authApi.getDecodedIDToken();
-      expect(mockClient.getDecodedIDToken).toHaveBeenCalled();
+    it('should call getDecodedIdToken on the client', async () => {
+      const result: IdTokenPayload = await authApi.getDecodedIdToken();
+      expect(mockClient.getDecodedIdToken).toHaveBeenCalled();
       expect(result).toEqual({sub: 'user-id-123'});
     });
 
     it('should call getDecodedIDPIDToken on the client', async () => {
       const result: IdTokenPayload = await authApi.getDecodedIDPIDToken();
-      expect(mockClient.getDecodedIDToken).toHaveBeenCalled();
+      expect(mockClient.getDecodedIdToken).toHaveBeenCalled();
       expect(result).toEqual({sub: 'user-id-123'});
     });
 
diff --git a/packages/vue/src/tests/mocks/mocks.ts b/packages/vue/src/tests/mocks/mocks.ts
index f692340a4..d31ffbcba 100644
--- a/packages/vue/src/tests/mocks/mocks.ts
+++ b/packages/vue/src/tests/mocks/mocks.ts
@@ -46,7 +46,7 @@ export type MockAuthAPI = {
   enableHttpHandler: Mock;
   getAccessToken: Mock;
   getUser: Mock;
-  getDecodedIDToken: Mock;
+  getDecodedIdToken: Mock;
   getHttpClient: Mock;
   getIdToken: Mock;
   getOpenIDProviderEndpoints: Mock;
@@ -78,7 +78,7 @@ export const mockAuthAPI: MockAuthAPI = {
     sub: 'user-id-123',
     username: 'testUser',
   }),
-  getDecodedIDToken: vi.fn().mockResolvedValue({aud: 'client-id', iss: 'https://test.com', sub: 'user-id-123'}),
+  getDecodedIdToken: vi.fn().mockResolvedValue({aud: 'client-id', iss: 'https://test.com', sub: 'user-id-123'}),
   getHttpClient: vi.fn().mockResolvedValue({}),
   getIdToken: vi.fn().mockResolvedValue('mock-id-token'),
   getOpenIDProviderEndpoints: vi.fn().mockResolvedValue({}),
@@ -126,7 +126,7 @@ export const mockAsgardeoSPAClient: Partial<AsgardeoSPAClient> = {
     sub: 'user-id-123',
     username: 'testUser',
   }),
-  getDecodedIDToken: vi.fn().mockResolvedValue({sub: 'user-id-123'}),
+  getDecodedIdToken: vi.fn().mockResolvedValue({sub: 'user-id-123'}),
   getHttpClient: vi.fn().mockResolvedValue({}),
   getIDPAccessToken: vi.fn().mockResolvedValue('mock-idp-access-token'),
   getIdToken: vi.fn().mockResolvedValue('mock-id-token'),
diff --git a/packages/vue/src/tests/useAsgardeo.test.ts b/packages/vue/src/tests/useAsgardeo.test.ts
index be7c20b7e..5a4ef8e55 100644
--- a/packages/vue/src/tests/useAsgardeo.test.ts
+++ b/packages/vue/src/tests/useAsgardeo.test.ts
@@ -40,7 +40,7 @@ describe('useAsgardeo', () => {
     error: new AsgardeoAuthException('Some error', 'Error message', 'error'),
     getAccessToken: vi.fn().mockResolvedValue('token'),
     getUser: vi.fn().mockResolvedValue({} as BasicUserInfo),
-    getDecodedIDToken: vi.fn().mockResolvedValue({} as IdTokenPayload),
+    getDecodedIdToken: vi.fn().mockResolvedValue({} as IdTokenPayload),
     getHttpClient: vi.fn().mockResolvedValue({} as HttpClientInstance),
     getIdToken: vi.fn().mockResolvedValue('id_token'),
     getOpenIDProviderEndpoints: vi.fn().mockResolvedValue({} as OIDCEndpoints),
diff --git a/packages/vue/src/types.ts b/packages/vue/src/types.ts
index b812647db..f8b624720 100644
--- a/packages/vue/src/types.ts
+++ b/packages/vue/src/types.ts
@@ -96,7 +96,7 @@ export interface AuthContextInterface {
   error: AsgardeoAuthException;
   getAccessToken(): Promise<string>;
   getUser(): Promise<BasicUserInfo>;
-  getDecodedIDToken(): Promise<IdTokenPayload>;
+  getDecodedIdToken(): Promise<IdTokenPayload>;
   getHttpClient(): Promise<HttpClientInstance>;
   getIdToken(): Promise<string>;
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
diff --git a/recipes/vue-vite/src/views/HomeView.vue b/recipes/vue-vite/src/views/HomeView.vue
index c16764fb8..571165d1a 100644
--- a/recipes/vue-vite/src/views/HomeView.vue
+++ b/recipes/vue-vite/src/views/HomeView.vue
@@ -20,12 +20,12 @@
 import { useAsgardeo } from '@asgardeo/vue'
 import { computed } from 'vue'
 
-const { state, signOut, getDecodedIDToken } = useAsgardeo()
+const { state, signOut, getDecodedIdToken } = useAsgardeo()
 
 const userEmail = computed(() => state?.email || 'This is the content of the home page.')
 
 const getid = async () => {
-  const id = await getDecodedIDToken()
+  const id = await getDecodedIdToken()
   console.log(JSON.stringify(id, null, 2))
 }
 </script>

From 8552b32b57e293dbf68e50e732cd7ca7f60b0df6 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Tue, 10 Jun 2025 21:53:49 +0530
Subject: [PATCH 046/131] chore: rename `decodeIDToken` methods to
 `decodeIdToken` for consistency across the codebase

---
 packages/javascript/src/IsomorphicCrypto.ts                   | 2 +-
 packages/javascript/src/__legacy__/client.ts                  | 2 +-
 .../src/__legacy__/helpers/authentication-helper.ts           | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/javascript/src/IsomorphicCrypto.ts b/packages/javascript/src/IsomorphicCrypto.ts
index 835158df2..aba1d9fd4 100644
--- a/packages/javascript/src/IsomorphicCrypto.ts
+++ b/packages/javascript/src/IsomorphicCrypto.ts
@@ -136,7 +136,7 @@ export class IsomorphicCrypto<T = any> {
    *
    * @throws
    */
-  public decodeIDToken(idToken: string): IdTokenPayload {
+  public decodeIdToken(idToken: string): IdTokenPayload {
     try {
       const utf8String: string = this._cryptoUtils.base64URLDecode(idToken.split('.')[1]);
       const payload: IdTokenPayload = JSON.parse(utf8String);
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index c05a5e582..9dec99ced 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -594,7 +594,7 @@ export class AsgardeoAuthClient<T> {
    */
   public async getDecodedIdToken(userId?: string): Promise<IdTokenPayload> {
     const idToken: string = (await this._storageManager.getSessionData(userId)).id_token;
-    const payload: IdTokenPayload = this._cryptoHelper.decodeIDToken(idToken);
+    const payload: IdTokenPayload = this._cryptoHelper.decodeIdToken(idToken);
 
     return payload;
   }
diff --git a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
index c55bb41de..a86ef441c 100644
--- a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
@@ -198,14 +198,14 @@ export class AuthenticationHelper<T> {
       jwk,
       (await this._config()).clientId,
       issuer ?? '',
-      this._cryptoHelper.decodeIDToken(idToken).sub,
+      this._cryptoHelper.decodeIdToken(idToken).sub,
       (await this._config()).clockTolerance,
       (await this._config()).validateIDTokenIssuer ?? true,
     );
   }
 
   public getAuthenticatedUserInfo(idToken: string): AuthenticatedUserInfo {
-    const payload: IdTokenPayload = this._cryptoHelper.decodeIDToken(idToken);
+    const payload: IdTokenPayload = this._cryptoHelper.decodeIdToken(idToken);
     const tenantDomain: string = extractTenantDomainFromIdTokenPayload(payload);
     const username: string = payload?.['username'] ?? '';
     const givenName: string = payload?.['given_name'] ?? '';

From c173e7c2c46ac2abb3458ed70a347a3b9cb5829d Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Wed, 11 Jun 2025 00:44:01 +0530
Subject: [PATCH 047/131] feat: implement application native authentication
 functions and models

---
 .../src/api/__tests__/authorize.test.ts       | 376 ------------------
 .../handleApplicationNativeAuthentication.ts  |  93 +++++
 ...tializeApplicationNativeAuthentication.ts} |  49 +--
 packages/javascript/src/index.ts              |   3 +-
 .../application-native-authentication.ts      |  64 +++
 5 files changed, 171 insertions(+), 414 deletions(-)
 delete mode 100644 packages/javascript/src/api/__tests__/authorize.test.ts
 create mode 100644 packages/javascript/src/api/handleApplicationNativeAuthentication.ts
 rename packages/javascript/src/api/{authorize.ts => initializeApplicationNativeAuthentication.ts} (84%)
 create mode 100644 packages/javascript/src/models/application-native-authentication.ts

diff --git a/packages/javascript/src/api/__tests__/authorize.test.ts b/packages/javascript/src/api/__tests__/authorize.test.ts
deleted file mode 100644
index 10836448e..000000000
--- a/packages/javascript/src/api/__tests__/authorize.test.ts
+++ /dev/null
@@ -1,376 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import {describe, it, expect, vi, beforeEach} from 'vitest';
-import authorize, {AuthorizationRequest, AuthorizationResponse} from '../authorize';
-import AsgardeoAPIError from '../../errors/AsgardeoAPIError';
-
-describe('authorize', (): void => {
-  beforeEach((): void => {
-    vi.resetAllMocks();
-  });
-
-  it('should make POST request with form data by default', async (): void => {
-    const mockAuthResponse: AuthorizationResponse = {
-      code: 'auth-code-123',
-      state: 'random-state-value',
-      session_state: 'session-123',
-    };
-
-    global.fetch = vi.fn().mockResolvedValue({
-      ok: true,
-      json: () => Promise.resolve(mockAuthResponse),
-    });
-
-    const url: string = 'https://localhost:9443/oauth2/authorize/';
-    const payload: AuthorizationRequest = {
-      client_id: 'test-client-id',
-      response_type: 'code',
-      redirect_uri: 'https://your-app.com/callback',
-      state: 'random-state-value',
-      scope: 'openid profile email',
-      response_mode: 'direct',
-    };
-
-    const result: AuthorizationResponse = await authorize({url, payload});
-
-    expect(fetch).toHaveBeenCalledWith(url, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        Accept: 'application/json',
-      },
-      body: 'client_id=test-client-id&response_type=code&redirect_uri=https%3A%2F%2Fyour-app.com%2Fcallback&state=random-state-value&scope=openid+profile+email&response_mode=direct',
-    });
-
-    expect(result).toEqual(mockAuthResponse);
-  });
-
-  it('should make GET request with URL parameters when method is GET', async (): void => {
-    const mockAuthResponse: AuthorizationResponse = {
-      code: 'auth-code-123',
-      state: 'random-state-value',
-    };
-
-    global.fetch = vi.fn().mockResolvedValue({
-      ok: true,
-      json: () => Promise.resolve(mockAuthResponse),
-    });
-
-    const url: string = 'https://localhost:9443/oauth2/authorize/';
-    const payload: AuthorizationRequest = {
-      client_id: 'test-client-id',
-      response_type: 'code',
-      redirect_uri: 'https://your-app.com/callback',
-      state: 'random-state-value',
-      scope: 'openid profile email',
-    };
-
-    const result: AuthorizationResponse = await authorize({
-      url,
-      payload,
-      method: 'GET',
-    });
-
-    const expectedUrl = 'https://localhost:9443/oauth2/authorize/?client_id=test-client-id&response_type=code&redirect_uri=https%3A%2F%2Fyour-app.com%2Fcallback&state=random-state-value&scope=openid+profile+email';
-
-    expect(fetch).toHaveBeenCalledWith(expectedUrl, {
-      method: 'GET',
-      headers: {
-        Accept: 'application/json',
-      },
-    });
-
-    expect(result).toEqual(mockAuthResponse);
-  });
-
-  it('should handle PKCE parameters correctly', async (): void => {
-    const mockAuthResponse: AuthorizationResponse = {
-      code: 'auth-code-123',
-      state: 'random-state-value',
-    };
-
-    global.fetch = vi.fn().mockResolvedValue({
-      ok: true,
-      json: () => Promise.resolve(mockAuthResponse),
-    });
-
-    const url: string = 'https://localhost:9443/oauth2/authorize/';
-    const payload: AuthorizationRequest = {
-      client_id: 'test-client-id',
-      response_type: 'code',
-      redirect_uri: 'https://your-app.com/callback',
-      state: 'random-state-value',
-      scope: 'openid profile email',
-      code_challenge: 'your-pkce-challenge',
-      code_challenge_method: 'S256',
-      nonce: 'test-nonce',
-    };
-
-    await authorize({url, payload});
-
-    expect(fetch).toHaveBeenCalledWith(url, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        Accept: 'application/json',
-      },
-      body: 'client_id=test-client-id&response_type=code&redirect_uri=https%3A%2F%2Fyour-app.com%2Fcallback&state=random-state-value&scope=openid+profile+email&code_challenge=your-pkce-challenge&code_challenge_method=S256&nonce=test-nonce',
-    });
-  });
-
-  it('should filter out undefined and null values from payload', async (): void => {
-    const mockAuthResponse: AuthorizationResponse = {
-      code: 'auth-code-123',
-    };
-
-    global.fetch = vi.fn().mockResolvedValue({
-      ok: true,
-      json: () => Promise.resolve(mockAuthResponse),
-    });
-
-    const url: string = 'https://localhost:9443/oauth2/authorize/';
-    const payload: AuthorizationRequest = {
-      client_id: 'test-client-id',
-      response_type: 'code',
-      redirect_uri: undefined,
-      state: null,
-      scope: 'openid profile email',
-      nonce: '', // Empty string should be included
-    };
-
-    await authorize({url, payload});
-
-    expect(fetch).toHaveBeenCalledWith(url, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        Accept: 'application/json',
-      },
-      body: 'client_id=test-client-id&response_type=code&scope=openid+profile+email&nonce=',
-    });
-  });
-
-  it('should merge custom headers with default headers', async (): void => {
-    const mockAuthResponse: AuthorizationResponse = {
-      code: 'auth-code-123',
-    };
-
-    global.fetch = vi.fn().mockResolvedValue({
-      ok: true,
-      json: () => Promise.resolve(mockAuthResponse),
-    });
-
-    const url: string = 'https://localhost:9443/oauth2/authorize/';
-    const payload: AuthorizationRequest = {
-      client_id: 'test-client-id',
-      response_type: 'code',
-    };
-
-    await authorize({
-      url,
-      payload,
-      headers: {
-        'Authorization': 'Bearer token',
-        'Custom-Header': 'custom-value',
-      },
-    });
-
-    expect(fetch).toHaveBeenCalledWith(url, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        Accept: 'application/json',
-        'Authorization': 'Bearer token',
-        'Custom-Header': 'custom-value',
-      },
-      body: 'client_id=test-client-id&response_type=code',
-    });
-  });
-
-  it('should handle authorization error response', async (): void => {
-    const mockErrorResponse: AuthorizationResponse = {
-      error: 'invalid_request',
-      error_description: 'The request is missing a required parameter',
-      state: 'random-state-value',
-    };
-
-    global.fetch = vi.fn().mockResolvedValue({
-      ok: true,
-      json: () => Promise.resolve(mockErrorResponse),
-    });
-
-    const url: string = 'https://localhost:9443/oauth2/authorize/';
-    const payload: AuthorizationRequest = {
-      client_id: 'test-client-id',
-      response_type: 'code',
-    };
-
-    const result: AuthorizationResponse = await authorize({url, payload});
-
-    expect(result).toEqual(mockErrorResponse);
-  });
-
-  it('should throw AsgardeoAPIError on HTTP error response', async (): void => {
-    const errorText: string = 'Unauthorized';
-
-    global.fetch = vi.fn().mockResolvedValue({
-      ok: false,
-      text: () => Promise.resolve(errorText),
-      status: 401,
-      statusText: 'Unauthorized',
-    });
-
-    const url: string = 'https://localhost:9443/oauth2/authorize/';
-    const payload: AuthorizationRequest = {
-      client_id: 'test-client-id',
-      response_type: 'code',
-    };
-
-    await expect(authorize({url, payload})).rejects.toThrow(AsgardeoAPIError);
-
-    const error: AsgardeoAPIError = await authorize({url, payload}).catch(e => e);
-
-    expect(error.message).toContain('Authorization request failed: Unauthorized');
-    expect(error.code).toBe('authorize-ResponseError-001');
-    expect(error.statusCode).toBe(401);
-    expect(error.statusText).toBe('Unauthorized');
-  });
-
-  it('should throw AsgardeoAPIError for invalid URL', async (): void => {
-    const invalidUrl: string = 'not-a-valid-url';
-    const payload: AuthorizationRequest = {
-      client_id: 'test-client-id',
-      response_type: 'code',
-    };
-
-    await expect(authorize({url: invalidUrl, payload})).rejects.toThrow(AsgardeoAPIError);
-
-    const error: AsgardeoAPIError = await authorize({url: invalidUrl, payload}).catch(e => e);
-
-    expect(error.message).toBe(
-      '🛡️ Asgardeo - @asgardeo/javascript: Invalid endpoint URL provided\n\n(code="authorize-ValidationError-001")\n',
-    );
-    expect(error.code).toBe('authorize-ValidationError-001');
-    expect(error.statusCode).toBe(400);
-    expect(error.statusText).toBe('Invalid Request');
-  });
-
-  it('should throw AsgardeoAPIError for empty string URL', async (): void => {
-    const payload: AuthorizationRequest = {
-      client_id: 'test-client-id',
-      response_type: 'code',
-    };
-
-    await expect(authorize({url: '', payload})).rejects.toThrow(AsgardeoAPIError);
-
-    const error: AsgardeoAPIError = await authorize({url: '', payload}).catch(e => e);
-
-    expect(error.message).toBe(
-      '🛡️ Asgardeo - @asgardeo/javascript: Invalid endpoint URL provided\n\n(code="authorize-ValidationError-001")\n',
-    );
-    expect(error.code).toBe('authorize-ValidationError-001');
-  });
-
-  it('should throw AsgardeoAPIError for missing payload', async (): void => {
-    const url: string = 'https://localhost:9443/oauth2/authorize/';
-
-    await expect(authorize({url, payload: undefined as any})).rejects.toThrow(AsgardeoAPIError);
-
-    const error: AsgardeoAPIError = await authorize({url, payload: undefined as any}).catch(e => e);
-
-    expect(error.message).toBe(
-      '🛡️ Asgardeo - @asgardeo/javascript: Authorization payload is required\n\n(code="authorize-ValidationError-002")\n',
-    );
-    expect(error.code).toBe('authorize-ValidationError-002');
-    expect(error.statusCode).toBe(400);
-    expect(error.statusText).toBe('Invalid Request');
-  });
-
-  it('should throw AsgardeoAPIError for null payload', async (): void => {
-    const url: string = 'https://localhost:9443/oauth2/authorize/';
-
-    await expect(authorize({url, payload: null as any})).rejects.toThrow(AsgardeoAPIError);
-
-    const error: AsgardeoAPIError = await authorize({url, payload: null as any}).catch(e => e);
-
-    expect(error.message).toBe(
-      '🛡️ Asgardeo - @asgardeo/javascript: Authorization payload is required\n\n(code="authorize-ValidationError-002")\n',
-    );
-    expect(error.code).toBe('authorize-ValidationError-002');
-  });
-
-  it('should handle numeric values in payload correctly', async (): void => {
-    const mockAuthResponse: AuthorizationResponse = {
-      code: 'auth-code-123',
-    };
-
-    global.fetch = vi.fn().mockResolvedValue({
-      ok: true,
-      json: () => Promise.resolve(mockAuthResponse),
-    });
-
-    const url: string = 'https://localhost:9443/oauth2/authorize/';
-    const payload: AuthorizationRequest = {
-      client_id: 'test-client-id',
-      response_type: 'code',
-      max_age: 3600, // Numeric value
-    };
-
-    await authorize({url, payload});
-
-    expect(fetch).toHaveBeenCalledWith(url, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        Accept: 'application/json',
-      },
-      body: 'client_id=test-client-id&response_type=code&max_age=3600',
-    });
-  });
-
-  it('should handle additional custom parameters in payload', async (): void => {
-    const mockAuthResponse: AuthorizationResponse = {
-      code: 'auth-code-123',
-    };
-
-    global.fetch = vi.fn().mockResolvedValue({
-      ok: true,
-      json: () => Promise.resolve(mockAuthResponse),
-    });
-
-    const url: string = 'https://localhost:9443/oauth2/authorize/';
-    const payload: AuthorizationRequest = {
-      client_id: 'test-client-id',
-      response_type: 'code',
-      custom_param: 'custom-value',
-      another_param: 'another-value',
-    };
-
-    await authorize({url, payload});
-
-    expect(fetch).toHaveBeenCalledWith(url, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        Accept: 'application/json',
-      },
-      body: 'client_id=test-client-id&response_type=code&custom_param=custom-value&another_param=another-value',
-    });
-  });
-});
diff --git a/packages/javascript/src/api/handleApplicationNativeAuthentication.ts b/packages/javascript/src/api/handleApplicationNativeAuthentication.ts
new file mode 100644
index 000000000..65ce3ac55
--- /dev/null
+++ b/packages/javascript/src/api/handleApplicationNativeAuthentication.ts
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import AsgardeoAPIError from '../errors/AsgardeoAPIError';
+import {
+  ApplicationNativeAuthenticationHandleRequestPayload,
+  ApplicationNativeAuthenticationHandleResponse,
+} from '../models/application-native-authentication';
+
+/**
+ * Request configuration for the authorize function.
+ */
+export interface AuthorizeRequestConfig extends Partial<Request> {
+  /**
+   * The authorization endpoint URL.
+   */
+  url: string;
+  /**
+   * The authorization request payload.
+   */
+  payload: ApplicationNativeAuthenticationHandleRequestPayload;
+}
+
+const handleApplicationNativeAuthentication = async ({
+  url,
+  payload,
+  ...requestConfig
+}: AuthorizeRequestConfig): Promise<ApplicationNativeAuthenticationHandleResponse> => {
+  try {
+    new URL(url);
+  } catch (error) {
+    throw new AsgardeoAPIError(
+      'Invalid endpoint URL provided',
+      'handleApplicationNativeAuthentication-ValidationError-001',
+      'javascript',
+      400,
+      'Invalid Request',
+    );
+  }
+
+  if (!payload) {
+    throw new AsgardeoAPIError(
+      'Authorization payload is required',
+      'handleApplicationNativeAuthentication-ValidationError-002',
+      'javascript',
+      400,
+      'Invalid Request',
+    );
+  }
+
+  const {headers: customHeaders, ...otherConfig} = requestConfig;
+  const response: Response = await fetch(url, {
+    method: requestConfig.method || 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      Accept: 'application/json',
+      ...customHeaders,
+    },
+    body: payload,
+    ...otherConfig,
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+
+    throw new AsgardeoAPIError(
+      `Authorization request failed: ${errorText}`,
+      'initializeApplicationNativeAuthentication-ResponseError-001',
+      'javascript',
+      response.status,
+      response.statusText,
+    );
+  }
+
+  return (await response.json()) as ApplicationNativeAuthenticationHandleResponse;
+};
+
+export default handleApplicationNativeAuthentication;
diff --git a/packages/javascript/src/api/authorize.ts b/packages/javascript/src/api/initializeApplicationNativeAuthentication.ts
similarity index 84%
rename from packages/javascript/src/api/authorize.ts
rename to packages/javascript/src/api/initializeApplicationNativeAuthentication.ts
index 21d1b4bf6..409a28a4f 100644
--- a/packages/javascript/src/api/authorize.ts
+++ b/packages/javascript/src/api/initializeApplicationNativeAuthentication.ts
@@ -17,6 +17,7 @@
  */
 
 import AsgardeoAPIError from '../errors/AsgardeoAPIError';
+import {ApplicationNativeAuthenticationInitiateResponse} from '../models/application-native-authentication';
 
 /**
  * Represents the authorization request payload that can be sent to the authorization endpoint.
@@ -72,36 +73,6 @@ export interface AuthorizationRequest {
   [key: string]: any;
 }
 
-/**
- * Represents the authorization response from the authorization endpoint.
- */
-export interface AuthorizationResponse {
-  /**
-   * The authorization code.
-   */
-  code?: string;
-  /**
-   * The state parameter.
-   */
-  state?: string;
-  /**
-   * Session state.
-   */
-  session_state?: string;
-  /**
-   * The error code if authorization failed.
-   */
-  error?: string;
-  /**
-   * Human-readable error description.
-   */
-  error_description?: string;
-  /**
-   * Additional response parameters.
-   */
-  [key: string]: any;
-}
-
 /**
  * Request configuration for the authorize function.
  */
@@ -126,7 +97,7 @@ export interface AuthorizeRequestConfig extends Partial<Request> {
  * @example
  * ```typescript
  * try {
- *   const authResponse = await authorize({
+ *   const authResponse = await initializeApplicationNativeAuthentication({
  *     url: "https://api.asgardeo.io/t/<ORGANIZATION>/oauth2/authorize",
  *     payload: {
  *       response_type: "code",
@@ -146,13 +117,17 @@ export interface AuthorizeRequestConfig extends Partial<Request> {
  * }
  * ```
  */
-const authorize = async ({url, payload, ...requestConfig}: AuthorizeRequestConfig): Promise<AuthorizationResponse> => {
+const initializeApplicationNativeAuthentication = async ({
+  url,
+  payload,
+  ...requestConfig
+}: AuthorizeRequestConfig): Promise<ApplicationNativeAuthenticationInitiateResponse> => {
   try {
     new URL(url);
   } catch (error) {
     throw new AsgardeoAPIError(
       'Invalid endpoint URL provided',
-      'authorize-ValidationError-001',
+      'initializeApplicationNativeAuthentication-ValidationError-001',
       'javascript',
       400,
       'Invalid Request',
@@ -162,7 +137,7 @@ const authorize = async ({url, payload, ...requestConfig}: AuthorizeRequestConfi
   if (!payload) {
     throw new AsgardeoAPIError(
       'Authorization payload is required',
-      'authorize-ValidationError-002',
+      'initializeApplicationNativeAuthentication-ValidationError-002',
       'javascript',
       400,
       'Invalid Request',
@@ -212,14 +187,14 @@ const authorize = async ({url, payload, ...requestConfig}: AuthorizeRequestConfi
 
     throw new AsgardeoAPIError(
       `Authorization request failed: ${errorText}`,
-      'authorize-ResponseError-001',
+      'initializeApplicationNativeAuthentication-ResponseError-001',
       'javascript',
       response.status,
       response.statusText,
     );
   }
 
-  return (await response.json()) as AuthorizationResponse;
+  return (await response.json()) as ApplicationNativeAuthenticationInitiateResponse;
 };
 
-export default authorize;
+export default initializeApplicationNativeAuthentication;
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 1b6ef4149..c5d827709 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -21,7 +21,8 @@ export * from './__legacy__/models';
 
 export * from './IsomorphicCrypto';
 
-export {default as authorize} from './api/authorize';
+export {default as initializeApplicationNativeAuthentication} from './api/initializeApplicationNativeAuthentication';
+export {default as handleApplicationNativeAuthentication} from './api/handleApplicationNativeAuthentication';
 export {default as getUserInfo} from './api/getUserInfo';
 
 export {default as TokenConstants} from './constants/TokenConstants';
diff --git a/packages/javascript/src/models/application-native-authentication.ts b/packages/javascript/src/models/application-native-authentication.ts
new file mode 100644
index 000000000..b9901ae74
--- /dev/null
+++ b/packages/javascript/src/models/application-native-authentication.ts
@@ -0,0 +1,64 @@
+export interface ApplicationNativeAuthenticationInitiateResponse {
+  flowId: string;
+  flowStatus: ApplicationNativeAuthenticationFlowStatus;
+  flowType: ApplicationNativeAuthenticationFlowType;
+  nextStep: {
+    stepType: ApplicationNativeAuthenticationStepType;
+    authenticators: ApplicationNativeAuthenticationAuthenticator[];
+  };
+  links: ApplicationNativeAuthenticationLink[];
+}
+
+export enum ApplicationNativeAuthenticationFlowStatus {
+  SuccessCompleted = 'SUCCESS_COMPLETED',
+  FailCompleted = 'FAIL_COMPLETED',
+  FailIncomplete = 'FAIL_INCOMPLETE',
+  Incomplete = 'INCOMPLETE',
+}
+
+export enum ApplicationNativeAuthenticationFlowType {
+  Authentication = 'AUTHENTICATION',
+}
+
+export enum ApplicationNativeAuthenticationStepType {
+  AuthenticatorPrompt = 'AUTHENTICATOR_PROMPT',
+  MultOptionsPrompt = 'MULTI_OPTIONS_PROMPT',
+}
+
+export interface ApplicationNativeAuthenticationAuthenticator {
+  authenticatorId: string;
+  authenticator: string;
+  idp: string;
+  metadata: {
+    i18nKey: string;
+    promptType: string;
+    params: {
+      param: string;
+      type: string;
+      order: number;
+      i18nKey: string;
+      displayName: string;
+      confidential: boolean;
+    }[];
+  };
+  requiredParams: string[];
+}
+
+export interface ApplicationNativeAuthenticationLink {
+  name: string;
+  href: string;
+  method: string;
+}
+
+export interface ApplicationNativeAuthenticationHandleRequestPayload {
+  flowId: string;
+  selectedAuthenticator: {
+    authenticatorId: string;
+    params: Record<string, string>;
+  };
+}
+
+export interface ApplicationNativeAuthenticationHandleResponse {
+  flowStatus: string;
+  authData: Record<string, any>;
+}

From 0d1db6c7907cc743b812925d22b2e44b681f1621 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Wed, 11 Jun 2025 11:48:44 +0530
Subject: [PATCH 048/131] feat: implement native authentication components and
 update related methods for consistency

---
 packages/browser/src/__legacy__/client.ts     |  22 +-
 .../handleApplicationNativeAuthentication.ts  |  20 +-
 ...itializeApplicationNativeAuthentication.ts |  55 +--
 packages/javascript/src/index.ts              |  10 +
 packages/react/src/__temp__/api.ts            |  20 +-
 .../presentation/SignIn/BaseSignIn.tsx        | 244 ++++++++++++
 .../components/presentation/SignIn/SignIn.tsx | 352 ++++++++++++++++++
 packages/react/src/index.ts                   |   6 +
 .../react/src/providers/AsgardeoProvider.tsx  |   4 +-
 recipes/vite-react-ts/src/pages/SignIn.tsx    |  13 +-
 10 files changed, 684 insertions(+), 62 deletions(-)
 create mode 100644 packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
 create mode 100644 packages/react/src/components/presentation/SignIn/SignIn.tsx

diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
index 908490694..0145bebf8 100755
--- a/packages/browser/src/__legacy__/client.ts
+++ b/packages/browser/src/__legacy__/client.ts
@@ -112,7 +112,7 @@ export class AsgardeoSPAClient {
    *
    * @private
    */
-  private async _isInitialized(): Promise<boolean> {
+  public async isInitialized(): Promise<boolean> {
     if (!this._startedInitialize) {
       return false;
     }
@@ -148,7 +148,7 @@ export class AsgardeoSPAClient {
    * @private
    */
   private async _validateMethod(validateAuthentication: boolean = true): Promise<boolean> {
-    if (!(await this._isInitialized())) {
+    if (!(await this.isInitialized())) {
       return Promise.reject(
         new AsgardeoAuthException(
           'SPA-AUTH_CLIENT-VM-NF01',
@@ -395,7 +395,7 @@ export class AsgardeoSPAClient {
       params: Record<string, unknown>;
     },
   ): Promise<BasicUserInfo | undefined> {
-    await this._isInitialized();
+    await this.isInitialized();
 
     // Discontinues the execution of this method if `config.callOnlyOnRedirect` is true and the `signIn` method
     // is not being called on redirect.
@@ -438,7 +438,7 @@ export class AsgardeoSPAClient {
     additionalParams?: Record<string, string | boolean>,
     tokenRequestConfig?: {params: Record<string, unknown>},
   ): Promise<BasicUserInfo | boolean | undefined> {
-    await this._isInitialized();
+    await this.isInitialized();
 
     // checks if the `signIn` method has been called.
     if (SPAUtils.wasSignInCalled()) {
@@ -694,7 +694,7 @@ export class AsgardeoSPAClient {
    * @preserve
    */
   public async getOpenIDProviderEndpoints(): Promise<OIDCEndpoints | undefined> {
-    await this._isInitialized();
+    await this.isInitialized();
 
     return this._client?.getOpenIDProviderEndpoints();
   }
@@ -984,7 +984,7 @@ export class AsgardeoSPAClient {
    * @preserve
    */
   public async isSignedIn(): Promise<boolean | undefined> {
-    await this._isInitialized();
+    await this.isInitialized();
 
     return this._client?.isSignedIn();
   }
@@ -999,7 +999,7 @@ export class AsgardeoSPAClient {
    * @preserve
    */
   public async isSessionActive(): Promise<boolean | undefined> {
-    await this._isInitialized();
+    await this.isInitialized();
 
     if (this._storage && [(BrowserStorage.WebWorker, BrowserStorage.BrowserMemory)].includes(this._storage)) {
       return Promise.reject(
@@ -1038,7 +1038,7 @@ export class AsgardeoSPAClient {
   public async on(hook: Hooks.CustomGrant, callback: (response?: any) => void, id: string): Promise<void>;
   public async on(hook: Exclude<Hooks, Hooks.CustomGrant>, callback: (response?: any) => void): Promise<void>;
   public async on(hook: Hooks, callback: (response?: any) => void | Promise<void>, id?: string): Promise<void> {
-    await this._isInitialized();
+    await this.isInitialized();
     if (callback && typeof callback === 'function') {
       switch (hook) {
         case Hooks.SignIn:
@@ -1109,7 +1109,7 @@ export class AsgardeoSPAClient {
    * @preserve
    */
   public async enableHttpHandler(): Promise<boolean | undefined> {
-    await this._isInitialized();
+    await this.isInitialized();
 
     return this._client?.enableHttpHandler();
   }
@@ -1131,7 +1131,7 @@ export class AsgardeoSPAClient {
    * @preserve
    */
   public async disableHttpHandler(): Promise<boolean | undefined> {
-    await this._isInitialized();
+    await this.isInitialized();
 
     return this._client?.disableHttpHandler();
   }
@@ -1157,7 +1157,7 @@ export class AsgardeoSPAClient {
    * @preserve
    */
   public async reInitialize(config: Partial<AuthClientConfig<Config>>): Promise<void> {
-    await this._isInitialized();
+    await this.isInitialized();
     if (this._storage === BrowserStorage.WebWorker) {
       const client = this._client as WebWorkerClientInterface;
       await client.reInitialize(config as Partial<AuthClientConfig<WebWorkerClientConfig>>);
diff --git a/packages/javascript/src/api/handleApplicationNativeAuthentication.ts b/packages/javascript/src/api/handleApplicationNativeAuthentication.ts
index 65ce3ac55..6db5ca79b 100644
--- a/packages/javascript/src/api/handleApplicationNativeAuthentication.ts
+++ b/packages/javascript/src/api/handleApplicationNativeAuthentication.ts
@@ -27,9 +27,9 @@ import {
  */
 export interface AuthorizeRequestConfig extends Partial<Request> {
   /**
-   * The authorization endpoint URL.
+   * The base URL of the Asgardeo server.
    */
-  url: string;
+  baseUrl: string;
   /**
    * The authorization request payload.
    */
@@ -37,19 +37,19 @@ export interface AuthorizeRequestConfig extends Partial<Request> {
 }
 
 const handleApplicationNativeAuthentication = async ({
-  url,
+  baseUrl,
   payload,
   ...requestConfig
 }: AuthorizeRequestConfig): Promise<ApplicationNativeAuthenticationHandleResponse> => {
   try {
-    new URL(url);
+    new URL(baseUrl);
   } catch (error) {
     throw new AsgardeoAPIError(
-      'Invalid endpoint URL provided',
+      'Invalid base URL provided',
       'handleApplicationNativeAuthentication-ValidationError-001',
       'javascript',
       400,
-      'Invalid Request',
+      'If an invalid base URL is provided, the endpoint URL cannot be constructed correctly.',
     );
   }
 
@@ -59,19 +59,19 @@ const handleApplicationNativeAuthentication = async ({
       'handleApplicationNativeAuthentication-ValidationError-002',
       'javascript',
       400,
-      'Invalid Request',
+      'If an authorization payload is not provided, the request cannot be constructed correctly.',
     );
   }
 
   const {headers: customHeaders, ...otherConfig} = requestConfig;
-  const response: Response = await fetch(url, {
+  const response: Response = await fetch(`${baseUrl}/oauth2/authn`, {
     method: requestConfig.method || 'POST',
     headers: {
-      'Content-Type': 'application/x-www-form-urlencoded',
+      'Content-Type': 'application/json',
       Accept: 'application/json',
       ...customHeaders,
     },
-    body: payload,
+    body: JSON.stringify(payload),
     ...otherConfig,
   });
 
diff --git a/packages/javascript/src/api/initializeApplicationNativeAuthentication.ts b/packages/javascript/src/api/initializeApplicationNativeAuthentication.ts
index 409a28a4f..f680b313c 100644
--- a/packages/javascript/src/api/initializeApplicationNativeAuthentication.ts
+++ b/packages/javascript/src/api/initializeApplicationNativeAuthentication.ts
@@ -78,9 +78,9 @@ export interface AuthorizationRequest {
  */
 export interface AuthorizeRequestConfig extends Partial<Request> {
   /**
-   * The authorization endpoint URL.
+   * The base URL of the Asgardeo server.
    */
-  url: string;
+  baseUrl: string;
   /**
    * The authorization request payload.
    */
@@ -118,19 +118,19 @@ export interface AuthorizeRequestConfig extends Partial<Request> {
  * ```
  */
 const initializeApplicationNativeAuthentication = async ({
-  url,
+  baseUrl,
   payload,
   ...requestConfig
 }: AuthorizeRequestConfig): Promise<ApplicationNativeAuthenticationInitiateResponse> => {
   try {
-    new URL(url);
+    new URL(baseUrl);
   } catch (error) {
     throw new AsgardeoAPIError(
-      'Invalid endpoint URL provided',
+      'Invalid base URL provided',
       'initializeApplicationNativeAuthentication-ValidationError-001',
       'javascript',
       400,
-      'Invalid Request',
+      'If an invalid base URL is provided, the endpoint URL cannot be constructed correctly.',
     );
   }
 
@@ -140,11 +140,10 @@ const initializeApplicationNativeAuthentication = async ({
       'initializeApplicationNativeAuthentication-ValidationError-002',
       'javascript',
       400,
-      'Invalid Request',
+      'If an authorization payload is not provided, the request cannot be constructed correctly.',
     );
   }
 
-  // Convert payload to URL search params for GET request or form data for POST
   const searchParams = new URLSearchParams();
   Object.entries(payload).forEach(([key, value]) => {
     if (value !== undefined && value !== null) {
@@ -152,35 +151,17 @@ const initializeApplicationNativeAuthentication = async ({
     }
   });
 
-  let response: Response;
-  const method = requestConfig.method || 'POST';
-
-  if (method.toUpperCase() === 'GET') {
-    // For GET requests, append parameters to URL
-    const urlWithParams = `${url}?${searchParams.toString()}`;
-    const {headers: customHeaders, ...otherConfig} = requestConfig;
-    response = await fetch(urlWithParams, {
-      method: 'GET',
-      headers: {
-        Accept: 'application/json',
-        ...customHeaders,
-      },
-      ...otherConfig,
-    });
-  } else {
-    // For POST requests, send as form data
-    const {headers: customHeaders, ...otherConfig} = requestConfig;
-    response = await fetch(url, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        Accept: 'application/json',
-        ...customHeaders,
-      },
-      body: searchParams.toString(),
-      ...otherConfig,
-    });
-  }
+  const {headers: customHeaders, ...otherConfig} = requestConfig;
+  const response: Response = await fetch(`${baseUrl}/oauth2/authorize`, {
+    method: requestConfig.method || 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      Accept: 'application/json',
+      ...customHeaders,
+    },
+    body: searchParams.toString(),
+    ...otherConfig,
+  });
 
   if (!response.ok) {
     const errorText = await response.text();
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index c5d827709..979e3951d 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -49,6 +49,16 @@ export {User} from './models/user';
 export {SessionData} from './models/session';
 export {Schema, SchemaAttribute, WellKnownSchemaIds} from './models/scim2-schema';
 export {RecursivePartial} from './models/utility-types';
+export {
+  ApplicationNativeAuthenticationInitiateResponse,
+  ApplicationNativeAuthenticationFlowStatus,
+  ApplicationNativeAuthenticationFlowType,
+  ApplicationNativeAuthenticationStepType,
+  ApplicationNativeAuthenticationAuthenticator,
+  ApplicationNativeAuthenticationLink,
+  ApplicationNativeAuthenticationHandleRequestPayload,
+  ApplicationNativeAuthenticationHandleResponse,
+} from './models/application-native-authentication';
 
 export {default as AsgardeoJavaScriptClient} from './AsgardeoJavaScriptClient';
 
diff --git a/packages/react/src/__temp__/api.ts b/packages/react/src/__temp__/api.ts
index a02242986..f6f509984 100644
--- a/packages/react/src/__temp__/api.ts
+++ b/packages/react/src/__temp__/api.ts
@@ -30,6 +30,7 @@ import {
   OIDCEndpoints,
   SignInConfig,
   SPACustomGrantConfig,
+  initializeApplicationNativeAuthentication,
 } from '@asgardeo/browser';
 import {AuthStateInterface} from './models';
 
@@ -108,7 +109,24 @@ class AuthAPI {
     tokenRequestConfig?: {
       params: Record<string, unknown>;
     },
-  ): Promise<BasicUserInfo> {
+  ): Promise<any> {
+    if (config?.['response_mode'] === 'direct') {
+      await this._client.isInitialized();
+
+      const payload = {
+        baseUrl: (await this.getConfigData())?.baseUrl,
+        payload: {
+          client_id: (await this.getConfigData())?.clientId,
+          redirect_uri: (await this.getConfigData())?.afterSignInUrl,
+          response_type: 'code',
+          scope: (await this.getConfigData())?.scope as any,
+          response_mode: 'direct',
+        },
+      };
+
+      return initializeApplicationNativeAuthentication(payload);
+    }
+
     return this._client
       .signIn(config, authorizationCode, sessionState, authState, tokenRequestConfig)
       .then(async (response: BasicUserInfo) => {
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
new file mode 100644
index 000000000..22e185a96
--- /dev/null
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -0,0 +1,244 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
+import {FC, FormEvent, ReactElement} from 'react';
+
+/**
+ * Interface for form field state.
+ */
+interface FormField {
+  param: string;
+  type: string;
+  displayName: string;
+  confidential: boolean;
+  required: boolean;
+  value: string;
+}
+
+/**
+ * Props for the BaseSignIn component.
+ */
+export interface BaseSignInProps {
+  /**
+   * Current authenticator information.
+   */
+  currentAuthenticator: ApplicationNativeAuthenticationAuthenticator | null;
+
+  /**
+   * Form field values.
+   */
+  formValues: Record<string, string>;
+
+  /**
+   * Whether the component is in loading state.
+   */
+  isLoading: boolean;
+
+  /**
+   * Error message to display.
+   */
+  error: string | null;
+
+  /**
+   * Messages to display to the user.
+   */
+  messages: Array<{type: string; message: string}>;
+
+  /**
+   * Whether the component has been initialized.
+   */
+  isInitialized: boolean;
+
+  /**
+   * Callback function called when form is submitted.
+   */
+  onSubmit: (formValues: Record<string, string>) => void;
+
+  /**
+   * Callback function called when input values change.
+   */
+  onInputChange: (param: string, value: string) => void;
+
+  /**
+   * Custom CSS class name for the form container.
+   */
+  className?: string;
+
+  /**
+   * Custom CSS class name for form inputs.
+   */
+  inputClassName?: string;
+
+  /**
+   * Custom CSS class name for the submit button.
+   */
+  buttonClassName?: string;
+
+  /**
+   * Custom CSS class name for error messages.
+   */
+  errorClassName?: string;
+
+  /**
+   * Custom CSS class name for info messages.
+   */
+  messageClassName?: string;
+
+  /**
+   * Text for the submit button.
+   */
+  submitButtonText?: string;
+
+  /**
+   * Whether to show loading state.
+   */
+  showLoading?: boolean;
+
+  /**
+   * Custom loading text.
+   */
+  loadingText?: string;
+}
+
+/**
+ * Base SignIn component that provides native authentication flow.
+ * This component handles the presentation layer for authentication forms.
+ *
+ * @example
+ * ```tsx
+ * import { BaseSignIn } from '@asgardeo/react';
+ *
+ * const MySignIn = () => {
+ *   return (
+ *     <BaseSignIn
+ *       currentAuthenticator={authenticator}
+ *       formValues={values}
+ *       isLoading={loading}
+ *       error={error}
+ *       messages={messages}
+ *       isInitialized={initialized}
+ *       onSubmit={handleSubmit}
+ *       onInputChange={handleInputChange}
+ *     />
+ *   );
+ * };
+ * ```
+ */
+const BaseSignIn: FC<BaseSignInProps> = ({
+  currentAuthenticator,
+  formValues,
+  isLoading,
+  error,
+  messages,
+  isInitialized,
+  onSubmit,
+  onInputChange,
+  className = '',
+  inputClassName = '',
+  buttonClassName = '',
+  errorClassName = '',
+  messageClassName = '',
+  submitButtonText = 'Sign In',
+  showLoading = true,
+  loadingText = 'Loading...',
+}) => {
+  /**
+   * Get form fields from the current authenticator.
+   */
+  const getFormFields = (): FormField[] => {
+    if (!currentAuthenticator) return [];
+
+    return currentAuthenticator.metadata.params
+      .sort((a, b) => a.order - b.order)
+      .map(param => ({
+        param: param.param,
+        type: param.type,
+        displayName: param.displayName,
+        confidential: param.confidential,
+        required: currentAuthenticator.requiredParams.includes(param.param),
+        value: formValues[param.param] || '',
+      }));
+  };
+
+  /**
+   * Handle form submission.
+   */
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    onSubmit(formValues);
+  };
+
+  if (!isInitialized && isLoading) {
+    return showLoading ? (
+      <div className={className}>
+        <p>{loadingText}</p>
+      </div>
+    ) : null;
+  }
+
+  if (!currentAuthenticator) {
+    return <div className={className}>{error && <div className={errorClassName}>Error: {error}</div>}</div>;
+  }
+
+  const formFields = getFormFields();
+
+  return (
+    <div className={className}>
+      {error && <div className={errorClassName}>{error}</div>}
+
+      {messages.length > 0 && (
+        <div className={messageClassName}>
+          {messages.map((message, index) => (
+            <div key={index} className={`message-${message.type.toLowerCase()}`}>
+              {message.message}
+            </div>
+          ))}
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit}>
+        <h2>{currentAuthenticator.authenticator}</h2>
+
+        {formFields.map(field => (
+          <div key={field.param} style={{marginBottom: '1rem'}}>
+            <label htmlFor={field.param}>
+              {field.displayName}
+              {field.required && ' *'}
+            </label>
+            <input
+              id={field.param}
+              type={field.confidential ? 'password' : 'text'}
+              value={formValues[field.param] || ''}
+              onChange={e => onInputChange(field.param, e.target.value)}
+              required={field.required}
+              className={inputClassName}
+              disabled={isLoading}
+            />
+          </div>
+        ))}
+
+        <button type="submit" disabled={isLoading} className={buttonClassName}>
+          {isLoading ? loadingText : submitButtonText}
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default BaseSignIn;
diff --git a/packages/react/src/components/presentation/SignIn/SignIn.tsx b/packages/react/src/components/presentation/SignIn/SignIn.tsx
new file mode 100644
index 000000000..656969872
--- /dev/null
+++ b/packages/react/src/components/presentation/SignIn/SignIn.tsx
@@ -0,0 +1,352 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  initializeApplicationNativeAuthentication,
+  handleApplicationNativeAuthentication,
+  ApplicationNativeAuthenticationInitiateResponse,
+  ApplicationNativeAuthenticationHandleResponse,
+  ApplicationNativeAuthenticationFlowStatus,
+  ApplicationNativeAuthenticationAuthenticator,
+  AsgardeoAPIError,
+} from '@asgardeo/browser';
+import {FC, useState, useEffect, ReactElement} from 'react';
+import {clsx} from 'clsx';
+import BaseSignIn from './BaseSignIn';
+import useAsgardeo from '../../../hooks/useAsgardeo';
+
+/**
+ * Props for the SignIn component.
+ */
+export interface SignInProps {
+  /**
+   * Callback function called when authentication is successful.
+   * @param authData - The authentication data returned upon successful completion.
+   */
+  onSuccess?: (authData: Record<string, any>) => void;
+
+  /**
+   * Callback function called when authentication fails.
+   * @param error - The error that occurred during authentication.
+   */
+  onError?: (error: Error) => void;
+
+  /**
+   * Callback function called when authentication flow status changes.
+   * @param response - The current authentication response.
+   */
+  onFlowChange?: (
+    response: ApplicationNativeAuthenticationInitiateResponse | ApplicationNativeAuthenticationHandleResponse,
+  ) => void;
+
+  /**
+   * Additional CSS class names for customization.
+   */
+  className?: string;
+
+  /**
+   * Apply default styling.
+   */
+  styled?: boolean;
+
+  /**
+   * Size variant for the component.
+   */
+  size?: 'small' | 'medium' | 'large';
+
+  /**
+   * Theme variant for the component.
+   */
+  variant?: 'default' | 'outlined' | 'filled';
+
+  /**
+   * Text for the submit button.
+   */
+  submitButtonText?: string;
+
+  /**
+   * Whether to show loading state.
+   */
+  showLoading?: boolean;
+
+  /**
+   * Custom loading text.
+   */
+  loadingText?: string;
+}
+
+/**
+ * A styled SignIn component that provides native authentication flow with pre-built styling.
+ * This component handles the API calls and state management for authentication.
+ *
+ * @example
+ * ```tsx
+ * import { SignIn } from '@asgardeo/react';
+ *
+ * const App = () => {
+ *   return (
+ *     <SignIn
+ *       baseUrl="https://api.asgardeo.io/t/your-org"
+ *       initialPayload={{
+ *         client_id: 'your-client-id',
+ *         response_type: 'code',
+ *         scope: 'openid',
+ *         redirect_uri: 'http://localhost:3000'
+ *       }}
+ *       onSuccess={(authData) => {
+ *         console.log('Authentication successful:', authData);
+ *         // Handle successful authentication (e.g., redirect, store tokens)
+ *       }}
+ *       onError={(error) => {
+ *         console.error('Authentication failed:', error);
+ *       }}
+ *       size="medium"
+ *       variant="outlined"
+ *     />
+ *   );
+ * };
+ * ```
+ */
+const SignIn: FC<SignInProps> = ({
+  onSuccess,
+  onError,
+  onFlowChange,
+  className,
+  styled = true,
+  size = 'medium',
+  variant = 'default',
+  submitButtonText = 'Sign In',
+  showLoading = true,
+  loadingText = 'Loading...',
+}) => {
+  const {signIn, baseUrl} = useAsgardeo();
+  const [isLoading, setIsLoading] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [currentFlow, setCurrentFlow] = useState<ApplicationNativeAuthenticationInitiateResponse | null>(null);
+  const [currentAuthenticator, setCurrentAuthenticator] = useState<ApplicationNativeAuthenticationAuthenticator | null>(
+    null,
+  );
+  const [formValues, setFormValues] = useState<Record<string, string>>({});
+  const [error, setError] = useState<string | null>(null);
+  const [messages, setMessages] = useState<Array<{type: string; message: string}>>([]);
+
+  /**
+   * Initialize the authentication flow.
+   */
+  const initializeFlow = async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await signIn({response_mode: 'direct'});
+
+      setCurrentFlow(response);
+      setIsInitialized(true);
+      onFlowChange?.(response);
+
+      if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+        // Flow completed immediately
+        onSuccess?.((response as any).authData || {});
+        return;
+      }
+
+      if (response.nextStep?.authenticators?.length > 0) {
+        // For now, select the first authenticator
+        const authenticator = response.nextStep.authenticators[0];
+        setCurrentAuthenticator(authenticator);
+        setupFormFields(authenticator);
+      }
+
+      // Handle any messages from the response
+      if ('nextStep' in response && response.nextStep && 'messages' in response.nextStep) {
+        const stepMessages = (response.nextStep as any).messages || [];
+        setMessages(
+          stepMessages.map((msg: any) => ({
+            type: msg.type || 'INFO',
+            message: msg.message || '',
+          })),
+        );
+      }
+    } catch (err) {
+      const errorMessage = err instanceof AsgardeoAPIError ? err.message : 'Failed to initialize authentication';
+      setError(errorMessage);
+      onError?.(err as Error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  /**
+   * Setup form fields based on the current authenticator.
+   */
+  const setupFormFields = (authenticator: ApplicationNativeAuthenticationAuthenticator) => {
+    // Initialize form values for the authenticator's parameters
+    const initialValues: Record<string, string> = {};
+    authenticator.metadata.params.forEach(param => {
+      initialValues[param.param] = '';
+    });
+    setFormValues(initialValues);
+  };
+
+  /**
+   * Handle form submission.
+   */
+  const handleSubmit = async (submittedValues: Record<string, string>) => {
+    if (!currentFlow || !currentAuthenticator) {
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    setMessages([]);
+
+    try {
+      const payload = {
+        flowId: currentFlow.flowId,
+        selectedAuthenticator: {
+          authenticatorId: currentAuthenticator.authenticatorId,
+          params: submittedValues,
+        },
+      };
+
+      const response = await handleApplicationNativeAuthentication({
+        baseUrl,
+        payload,
+      });
+
+      onFlowChange?.(response);
+
+      if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+        onSuccess?.(response.authData);
+        return;
+      }
+
+      if (
+        response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
+        response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
+      ) {
+        setError('Authentication failed. Please check your credentials and try again.');
+        return;
+      }
+
+      // Continue with next step
+      if ('flowId' in response && 'nextStep' in response) {
+        const nextStepResponse = response as any;
+        setCurrentFlow(nextStepResponse);
+
+        if (nextStepResponse.nextStep?.authenticators?.length > 0) {
+          const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
+          setCurrentAuthenticator(nextAuthenticator);
+          setupFormFields(nextAuthenticator);
+        }
+
+        // Handle any messages from the response
+        if (nextStepResponse.nextStep?.messages) {
+          setMessages(
+            nextStepResponse.nextStep.messages.map((msg: any) => ({
+              type: msg.type || 'INFO',
+              message: msg.message || '',
+            })),
+          );
+        }
+      }
+    } catch (err) {
+      const errorMessage = err instanceof AsgardeoAPIError ? err.message : 'Authentication failed';
+      setError(errorMessage);
+      onError?.(err as Error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  /**
+   * Handle input value changes.
+   */
+  const handleInputChange = (param: string, value: string) => {
+    setFormValues(prev => ({
+      ...prev,
+      [param]: value,
+    }));
+  };
+
+  // Initialize the flow on component mount
+  useEffect(() => {
+    if (!isInitialized) {
+      initializeFlow();
+    }
+  }, [isInitialized]);
+
+  const containerClasses = clsx(
+    styled && [
+      'asgardeo-signin',
+      `asgardeo-signin--${size}`,
+      `asgardeo-signin--${variant}`,
+      'max-w-md mx-auto p-6 bg-white rounded-lg shadow-md',
+    ],
+    className,
+  );
+
+  const inputClasses = clsx(
+    styled && [
+      'asgardeo-signin__input',
+      'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
+      size === 'small' && 'text-sm py-1',
+      size === 'large' && 'text-lg py-3',
+    ],
+  );
+
+  const buttonClasses = clsx(
+    styled && [
+      'asgardeo-signin__button',
+      'w-full py-2 px-4 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200',
+      size === 'small' && 'text-sm py-1',
+      size === 'large' && 'text-lg py-3',
+      variant === 'outlined' && 'bg-transparent text-blue-600 border-2 border-blue-600 hover:bg-blue-50',
+      variant === 'filled' && 'bg-blue-800 hover:bg-blue-900',
+    ],
+  );
+
+  const errorClasses = clsx(
+    styled && ['asgardeo-signin__error', 'mb-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-md text-sm'],
+  );
+
+  const messageClasses = clsx(styled && ['asgardeo-signin__messages', 'mb-4 space-y-2']);
+
+  return (
+    <BaseSignIn
+      currentAuthenticator={currentAuthenticator}
+      formValues={formValues}
+      isLoading={isLoading}
+      error={error}
+      messages={messages}
+      isInitialized={isInitialized}
+      onSubmit={handleSubmit}
+      onInputChange={handleInputChange}
+      className={containerClasses}
+      inputClassName={inputClasses}
+      buttonClassName={buttonClasses}
+      errorClassName={errorClasses}
+      messageClassName={messageClasses}
+      submitButtonText={submitButtonText}
+      showLoading={showLoading}
+      loadingText={loadingText}
+    />
+  );
+};
+
+export default SignIn;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index b86effea7..c212c37b4 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -52,6 +52,12 @@ export * from './components/control/SignedIn';
 export {default as SignedOut} from './components/control/SignedOut';
 export * from './components/control/SignedOut';
 
+export {default as BaseSignIn} from './components/presentation/SignIn/BaseSignIn';
+export * from './components/presentation/SignIn/BaseSignIn';
+
+export {default as SignIn} from './components/presentation/SignIn/SignIn';
+export * from './components/presentation/SignIn/SignIn';
+
 export {default as User} from './components/presentation/User';
 export * from './components/presentation/User';
 
diff --git a/packages/react/src/providers/AsgardeoProvider.tsx b/packages/react/src/providers/AsgardeoProvider.tsx
index f580c1b75..ea52bcbe6 100644
--- a/packages/react/src/providers/AsgardeoProvider.tsx
+++ b/packages/react/src/providers/AsgardeoProvider.tsx
@@ -136,7 +136,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   const signIn = async (options?: SignInOptions): Promise<User> => {
     try {
       const response = await asgardeo.signIn(options);
-      setUser(await asgardeo.getUser());
+      // setUser(await asgardeo.getUser());
 
       return response;
     } catch (error) {
@@ -170,7 +170,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
           throw new Error('Sign up functionality not implemented yet');
         },
         user,
-        baseUrl
+        baseUrl,
       }}
     >
       <ThemeProvider theme={preferences?.theme?.overrides} defaultColorScheme={isDarkMode ? 'dark' : 'light'}>
diff --git a/recipes/vite-react-ts/src/pages/SignIn.tsx b/recipes/vite-react-ts/src/pages/SignIn.tsx
index be00f1acd..41f6e3a20 100644
--- a/recipes/vite-react-ts/src/pages/SignIn.tsx
+++ b/recipes/vite-react-ts/src/pages/SignIn.tsx
@@ -6,7 +6,7 @@ import {Input} from '@/components/ui/input';
 import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
 import {Label} from '@/components/ui/label';
 import {Users, Eye, EyeOff} from 'lucide-react';
-import {useAsgardeo} from '@asgardeo/react';
+import {useAsgardeo, SignIn} from '@asgardeo/react';
 
 export default function SignInPage() {
   const {isLoading} = useAsgardeo();
@@ -28,6 +28,17 @@ export default function SignInPage() {
           <p className="text-gray-600 mt-2">Sign in to your account to continue</p>
         </div>
 
+        <SignIn
+          onSuccess={authData => {
+            console.log('Authentication successful:', authData);
+            // Handle successful authentication
+          }}
+          onError={error => {
+            console.error('Authentication failed:', error);
+          }}
+          styled={false}
+        />
+
         <Card className="border-0 shadow-lg">
           <CardHeader className="space-y-1">
             <CardTitle className="text-xl">Sign in</CardTitle>

From 1e90cffd672826a8baae4663e53daae0ffea0f1f Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Wed, 11 Jun 2025 12:03:41 +0530
Subject: [PATCH 049/131] chore(react): add field factory utilities and
 integrate into BaseSignIn component

---
 packages/javascript/src/index.ts              |   2 +
 .../application-native-authentication.ts      |  25 +-
 .../src/components/factories/FieldFactory.tsx | 245 ++++++++++++++++++
 .../presentation/SignIn/BaseSignIn.tsx        |  32 +--
 packages/react/src/index.ts                   |  10 +
 5 files changed, 297 insertions(+), 17 deletions(-)
 create mode 100644 packages/react/src/components/factories/FieldFactory.tsx

diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 979e3951d..627fa6b48 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -58,6 +58,8 @@ export {
   ApplicationNativeAuthenticationLink,
   ApplicationNativeAuthenticationHandleRequestPayload,
   ApplicationNativeAuthenticationHandleResponse,
+  ApplicationNativeAuthenticationAuthenticatorParamType,
+  ApplicationNativeAuthenticationAuthenticatorPromptType,
 } from './models/application-native-authentication';
 
 export {default as AsgardeoJavaScriptClient} from './AsgardeoJavaScriptClient';
diff --git a/packages/javascript/src/models/application-native-authentication.ts b/packages/javascript/src/models/application-native-authentication.ts
index b9901ae74..5791596a7 100644
--- a/packages/javascript/src/models/application-native-authentication.ts
+++ b/packages/javascript/src/models/application-native-authentication.ts
@@ -31,10 +31,10 @@ export interface ApplicationNativeAuthenticationAuthenticator {
   idp: string;
   metadata: {
     i18nKey: string;
-    promptType: string;
+    promptType: ApplicationNativeAuthenticationAuthenticatorPromptType;
     params: {
       param: string;
-      type: string;
+      type: ApplicationNativeAuthenticationAuthenticatorParamType;
       order: number;
       i18nKey: string;
       displayName: string;
@@ -62,3 +62,24 @@ export interface ApplicationNativeAuthenticationHandleResponse {
   flowStatus: string;
   authData: Record<string, any>;
 }
+
+export enum ApplicationNativeAuthenticationAuthenticatorParamType {
+  String = 'STRING',
+  Integer = 'INTEGER',
+  MultiValued = 'MULTI_VALUED',
+}
+
+export enum ApplicationNativeAuthenticationAuthenticatorPromptType {
+  /**
+   * Prompt for user input, typically for username/password or similar credentials.
+   */
+  USER_PROMPT,
+  /**
+   * Prompt for internal system use, such as API keys or tokens.
+   */
+  INTERNAL_PROMPT,
+  /**
+   * Prompt for redirection to another page or service.
+   */
+  REDIRECTION_PROMPT,
+}
diff --git a/packages/react/src/components/factories/FieldFactory.tsx b/packages/react/src/components/factories/FieldFactory.tsx
new file mode 100644
index 000000000..da69bda08
--- /dev/null
+++ b/packages/react/src/components/factories/FieldFactory.tsx
@@ -0,0 +1,245 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {ApplicationNativeAuthenticationAuthenticatorParamType} from '@asgardeo/browser';
+import {FC, ReactElement} from 'react';
+import TextField from '../primitives/TextField/TextField';
+import Select from '../primitives/Select/Select';
+import {SelectOption} from '../primitives/Select/Select';
+
+/**
+ * Interface for field configuration.
+ */
+export interface FieldConfig {
+  /**
+   * The parameter name.
+   */
+  param: string;
+  /**
+   * The field type based on ApplicationNativeAuthenticationAuthenticatorParamType.
+   */
+  type: ApplicationNativeAuthenticationAuthenticatorParamType;
+  /**
+   * Display name for the field.
+   */
+  displayName: string;
+  /**
+   * Whether the field contains confidential information (password).
+   */
+  confidential: boolean;
+  /**
+   * Whether the field is required.
+   */
+  required: boolean;
+  /**
+   * Current value of the field.
+   */
+  value: string;
+  /**
+   * Callback function when the field value changes.
+   */
+  onChange: (value: string) => void;
+  /**
+   * Whether the field is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Error message to display.
+   */
+  error?: string;
+  /**
+   * Additional CSS class name.
+   */
+  className?: string;
+  /**
+   * Additional options for multi-valued fields.
+   */
+  options?: SelectOption[];
+}
+
+/**
+ * Utility function to parse multi-valued string into array
+ */
+export const parseMultiValuedString = (value: string): string[] => {
+  if (!value || value.trim() === '') return [];
+  return value
+    .split(',')
+    .map(item => item.trim())
+    .filter(item => item.length > 0);
+};
+
+/**
+ * Utility function to format array into multi-valued string
+ */
+export const formatMultiValuedString = (values: string[]): string => {
+  return values.join(', ');
+};
+
+/**
+ * Utility function to validate field values based on type
+ */
+export const validateFieldValue = (
+  value: string,
+  type: ApplicationNativeAuthenticationAuthenticatorParamType,
+  required: boolean = false,
+): string | null => {
+  // Check if required field is empty
+  if (required && (!value || value.trim() === '')) {
+    return 'This field is required';
+  }
+
+  // If not required and empty, no validation needed
+  if (!value || value.trim() === '') {
+    return null;
+  }
+
+  switch (type) {
+    case ApplicationNativeAuthenticationAuthenticatorParamType.Integer:
+      const numValue = parseInt(value, 10);
+      if (isNaN(numValue)) {
+        return 'Please enter a valid number';
+      }
+      break;
+
+    case ApplicationNativeAuthenticationAuthenticatorParamType.MultiValued:
+      // Validate that multi-valued fields don't have empty values after splitting
+      const values = parseMultiValuedString(value);
+      if (values.some(v => v.trim() === '')) {
+        return 'Please remove empty values';
+      }
+      break;
+  }
+
+  return null;
+};
+
+/**
+ * Factory function to create form fields based on the ApplicationNativeAuthenticationAuthenticatorParamType.
+ *
+ * @param config - The field configuration
+ * @returns The appropriate React component for the field type
+ *
+ * @example
+ * ```tsx
+ * const field = createField({
+ *   param: 'username',
+ *   type: ApplicationNativeAuthenticationAuthenticatorParamType.String,
+ *   displayName: 'Username',
+ *   confidential: false,
+ *   required: true,
+ *   value: '',
+ *   onChange: (value) => console.log(value)
+ * });
+ * ```
+ */
+export const createField = (config: FieldConfig): ReactElement => {
+  const {
+    param,
+    type,
+    displayName,
+    confidential,
+    required,
+    value,
+    onChange,
+    disabled = false,
+    error,
+    className,
+    options = [],
+  } = config;
+
+  // Auto-validate the field value
+  const validationError = error || validateFieldValue(value, type, required);
+
+  const commonProps = {
+    id: param,
+    label: displayName,
+    required,
+    disabled,
+    error: validationError,
+    className,
+    value,
+  };
+
+  switch (type) {
+    case ApplicationNativeAuthenticationAuthenticatorParamType.String:
+      return (
+        <TextField
+          {...commonProps}
+          type={confidential ? 'password' : 'text'}
+          onChange={e => onChange(e.target.value)}
+          autoComplete={confidential ? 'current-password' : 'off'}
+        />
+      );
+
+    case ApplicationNativeAuthenticationAuthenticatorParamType.Integer:
+      return (
+        <TextField
+          {...commonProps}
+          type="number"
+          onChange={e => onChange(e.target.value)}
+          helperText="Enter a numeric value"
+        />
+      );
+
+    case ApplicationNativeAuthenticationAuthenticatorParamType.MultiValued:
+      // Try to get default options if none provided
+      const fieldOptions = options.length > 0 ? options : [];
+
+      if (fieldOptions.length > 0) {
+        return (
+          <Select
+            {...commonProps}
+            options={fieldOptions}
+            onChange={e => onChange(e.target.value)}
+            helperText="Select from available options"
+          />
+        );
+      }
+
+      // Fallback to text field with comma-separated values
+      return (
+        <TextField
+          {...commonProps}
+          type="text"
+          onChange={e => onChange(e.target.value)}
+          helperText="Enter multiple values separated by commas (e.g., value1, value2, value3)"
+          placeholder="value1, value2, value3"
+        />
+      );
+
+    default:
+      // Fallback to text field for unknown types
+      return (
+        <TextField
+          {...commonProps}
+          type={confidential ? 'password' : 'text'}
+          onChange={e => onChange(e.target.value)}
+          helperText="Unknown field type, treating as text"
+        />
+      );
+  }
+};
+
+/**
+ * React component wrapper for the field factory.
+ */
+export const FieldFactory: FC<FieldConfig> = props => {
+  return createField(props);
+};
+
+export default FieldFactory;
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index 22e185a96..d0c37083b 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -16,15 +16,19 @@
  * under the License.
  */
 
-import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
+import {
+  ApplicationNativeAuthenticationAuthenticator,
+  ApplicationNativeAuthenticationAuthenticatorParamType,
+} from '@asgardeo/browser';
 import {FC, FormEvent, ReactElement} from 'react';
+import {createField} from '../../factories/FieldFactory';
 
 /**
  * Interface for form field state.
  */
 interface FormField {
   param: string;
-  type: string;
+  type: ApplicationNativeAuthenticationAuthenticatorParamType;
   displayName: string;
   confidential: boolean;
   required: boolean;
@@ -217,19 +221,17 @@ const BaseSignIn: FC<BaseSignInProps> = ({
 
         {formFields.map(field => (
           <div key={field.param} style={{marginBottom: '1rem'}}>
-            <label htmlFor={field.param}>
-              {field.displayName}
-              {field.required && ' *'}
-            </label>
-            <input
-              id={field.param}
-              type={field.confidential ? 'password' : 'text'}
-              value={formValues[field.param] || ''}
-              onChange={e => onInputChange(field.param, e.target.value)}
-              required={field.required}
-              className={inputClassName}
-              disabled={isLoading}
-            />
+            {createField({
+              param: field.param,
+              type: field.type,
+              displayName: field.displayName,
+              confidential: field.confidential,
+              required: field.required,
+              value: field.value,
+              onChange: value => onInputChange(field.param, value),
+              disabled: isLoading,
+              className: inputClassName,
+            })}
           </div>
         ))}
 
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index c212c37b4..98d027ad2 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -73,4 +73,14 @@ export * from './components/presentation/UserDropdown/BaseUserDropdown';
 export {default as UserDropdown} from './components/presentation/UserDropdown/UserDropdown';
 export * from './components/presentation/UserDropdown/UserDropdown';
 
+export {
+  createField,
+  FieldFactory,
+  parseMultiValuedString,
+  formatMultiValuedString,
+  getDefaultOptionsForParam,
+  validateFieldValue,
+} from './components/factories/FieldFactory';
+export * from './components/factories/FieldFactory';
+
 export * from '@asgardeo/browser';

From 458c1aadf9054c9e41fb9f5f8e8dff3c208a12a9 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Wed, 11 Jun 2025 12:21:40 +0530
Subject: [PATCH 050/131] feat: implement reusable Button component and update
 related components to use it

---
 .../actions/SignInButton/BaseSignInButton.tsx |   8 +-
 .../SignOutButton/BaseSignOutButton.tsx       |   8 +-
 .../actions/SignUpButton/BaseSignUpButton.tsx |   8 +-
 .../presentation/SignIn/BaseSignIn.tsx        |  15 +-
 .../UserDropdown/BaseUserDropdown.tsx         |  17 +-
 .../UserProfile/BaseUserProfile.tsx           |  34 +-
 .../components/primitives/Button/Button.tsx   | 367 ++++++++++++++++++
 .../components/primitives/Popover/Popover.tsx |  15 +-
 packages/react/src/index.ts                   |   4 +-
 9 files changed, 445 insertions(+), 31 deletions(-)
 create mode 100644 packages/react/src/components/primitives/Button/Button.tsx

diff --git a/packages/react/src/components/actions/SignInButton/BaseSignInButton.tsx b/packages/react/src/components/actions/SignInButton/BaseSignInButton.tsx
index 6e89ab3c4..2471b196c 100644
--- a/packages/react/src/components/actions/SignInButton/BaseSignInButton.tsx
+++ b/packages/react/src/components/actions/SignInButton/BaseSignInButton.tsx
@@ -27,6 +27,7 @@ import {
 } from 'react';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
+import {Button} from '../../primitives/Button/Button';
 
 /**
  * Common props shared by all {@link BaseSignInButton} components.
@@ -89,16 +90,19 @@ const BaseSignInButton: ForwardRefExoticComponent<BaseSignInButtonProps & RefAtt
       }
 
       return (
-        <button
+        <Button
           ref={ref}
           className={clsx(withVendorCSSClassPrefix('sign-in-button'), className)}
           style={style}
           disabled={isLoading}
+          loading={isLoading}
           type="button"
+          variant="primary"
+          buttonType="solid"
           {...rest}
         >
           {children}
-        </button>
+        </Button>
       );
     },
   );
diff --git a/packages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsx b/packages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsx
index 957033b77..e7daebcbe 100644
--- a/packages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsx
+++ b/packages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsx
@@ -27,6 +27,7 @@ import {
 } from 'react';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
+import {Button} from '../../primitives/Button/Button';
 
 /**
  * Common props shared by all {@link BaseSignOutButton} components.
@@ -89,16 +90,19 @@ const BaseSignOutButton: ForwardRefExoticComponent<BaseSignOutButtonProps & RefA
       }
 
       return (
-        <button
+        <Button
           ref={ref}
           className={clsx(withVendorCSSClassPrefix('sign-out-button'), className)}
           style={style}
           disabled={isLoading}
+          loading={isLoading}
           type="button"
+          variant="secondary"
+          buttonType="outline"
           {...rest}
         >
           {children}
-        </button>
+        </Button>
       );
     },
   );
diff --git a/packages/react/src/components/actions/SignUpButton/BaseSignUpButton.tsx b/packages/react/src/components/actions/SignUpButton/BaseSignUpButton.tsx
index 256d75847..5ff06f961 100644
--- a/packages/react/src/components/actions/SignUpButton/BaseSignUpButton.tsx
+++ b/packages/react/src/components/actions/SignUpButton/BaseSignUpButton.tsx
@@ -27,6 +27,7 @@ import {
 } from 'react';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
+import {Button} from '../../primitives/Button/Button';
 
 /**
  * Common props shared by all {@link BaseSignUpButton} components.
@@ -89,16 +90,19 @@ const BaseSignUpButton: ForwardRefExoticComponent<BaseSignUpButtonProps & RefAtt
       }
 
       return (
-        <button
+        <Button
           ref={ref}
           className={clsx(withVendorCSSClassPrefix('sign-up-button'), className)}
           style={style}
           disabled={isLoading}
+          loading={isLoading}
           type="button"
+          variant="primary"
+          buttonType="outline"
           {...rest}
         >
           {children}
-        </button>
+        </Button>
       );
     },
   );
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index d0c37083b..4f0f80b92 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -22,6 +22,7 @@ import {
 } from '@asgardeo/browser';
 import {FC, FormEvent, ReactElement} from 'react';
 import {createField} from '../../factories/FieldFactory';
+import {Button} from '../../primitives/Button/Button';
 
 /**
  * Interface for form field state.
@@ -235,9 +236,17 @@ const BaseSignIn: FC<BaseSignInProps> = ({
           </div>
         ))}
 
-        <button type="submit" disabled={isLoading} className={buttonClassName}>
-          {isLoading ? loadingText : submitButtonText}
-        </button>
+        <Button 
+          type="submit" 
+          disabled={isLoading}
+          loading={isLoading}
+          className={buttonClassName}
+          variant="primary"
+          buttonType="solid"
+          fullWidth
+        >
+          {submitButtonText}
+        </Button>
       </form>
     </div>
   );
diff --git a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
index dd84f80dd..1a7cb9d27 100644
--- a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
+++ b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
@@ -22,6 +22,7 @@ import clsx from 'clsx';
 import {useTheme} from '../../../theme/useTheme';
 import {Avatar} from '../../primitives/Avatar/Avatar';
 import {Popover} from '../../primitives/Popover/Popover';
+import {Button} from '../../primitives/Button/Button';
 import getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';
 
 const useStyles = () => {
@@ -209,10 +210,13 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
 
   return (
     <div className={clsx(withVendorCSSClassPrefix('user-dropdown'), className)}>
-      <button
+      <Button
         className={withVendorCSSClassPrefix('user-dropdown-trigger')}
         style={styles.trigger}
         onClick={() => setIsOpen(!isOpen)}
+        variant="tertiary"
+        buttonType="text"
+        size="medium"
       >
         <Avatar
           imageUrl={getMappedUserProfileValue('picture', mergedMappings, user)}
@@ -221,7 +225,7 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
           alt={`${getDisplayName()}'s avatar`}
         />
         {showTriggerLable && <span style={styles.userName}>{getDisplayName()}</span>}
-      </button>
+      </Button>
 
       <Popover isOpen={isOpen} onClose={() => setIsOpen(false)} portalId={portalId} mode="dropdown">
         <Popover.Content>
@@ -263,14 +267,17 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
                       {item.label}
                     </a>
                   ) : (
-                    <button
+                    <Button
                       onClick={() => handleMenuItemClick(item)}
                       style={styles.menuItem}
                       className={withVendorCSSClassPrefix('user-dropdown-menu-item')}
+                      variant="tertiary"
+                      buttonType="text"
+                      size="small"
+                      startIcon={item.icon}
                     >
-                      {item.icon}
                       {item.label}
-                    </button>
+                    </Button>
                   )}
                   {index < menuItems.length - 1 && <div style={styles.divider} />}
                 </div>
diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index eb3e97c12..192948be2 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -22,6 +22,7 @@ import {Avatar} from '../../primitives/Avatar/Avatar';
 import {TextField} from '../../primitives/TextField/TextField';
 import {DatePicker} from '../../primitives/DatePicker/DatePicker';
 import {Checkbox} from '../../primitives/Checkbox/Checkbox';
+import {Button} from '../../primitives/Button/Button';
 import {useTheme} from '../../../theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
@@ -335,31 +336,36 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
           >
             {isFieldEditing ? (
               <>
-                <button style={{...actionButtonStyle, ...saveButtonStyle}} onClick={() => handleFieldSave(schema)}>
+                <Button 
+                  size="small"
+                  variant="primary"
+                  buttonType="solid"
+                  onClick={() => handleFieldSave(schema)}
+                >
                   Save
-                </button>
-                <button
-                  style={{...actionButtonStyle, ...cancelButtonStyle}}
+                </Button>
+                <Button
+                  size="small"
+                  variant="secondary"
+                  buttonType="outline"
                   onClick={() => handleFieldCancel(schema.name!)}
                 >
                   Cancel
-                </button>
+                </Button>
               </>
             ) : (
-              <button
+              <Button
+                size="small"
+                variant="tertiary"
+                buttonType="text"
+                onClick={() => toggleFieldEdit(schema.name!)}
+                title="Edit"
                 style={{
-                  ...actionButtonStyle,
-                  backgroundColor: 'transparent',
-                  border: 'none',
-                  margin: 0,
                   padding: theme.spacing.unit / 2 + 'px',
-                  color: theme.colors.text.secondary,
                 }}
-                onClick={() => toggleFieldEdit(schema.name!)}
-                title="Edit"
               >
                 <PencilIcon />
-              </button>
+              </Button>
             )}
           </div>
         )}
diff --git a/packages/react/src/components/primitives/Button/Button.tsx b/packages/react/src/components/primitives/Button/Button.tsx
new file mode 100644
index 000000000..02a010097
--- /dev/null
+++ b/packages/react/src/components/primitives/Button/Button.tsx
@@ -0,0 +1,367 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {CSSProperties, FC, ButtonHTMLAttributes, forwardRef, useMemo} from 'react';
+import {useTheme} from '../../../theme/useTheme';
+import {withVendorCSSClassPrefix} from '@asgardeo/browser';
+import clsx from 'clsx';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+export type ButtonType = 'solid' | 'outline' | 'text';
+export type ButtonSize = 'small' | 'medium' | 'large';
+
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
+  /**
+   * The button variant that determines the color scheme
+   */
+  variant?: ButtonVariant;
+  /**
+   * The button type that determines the visual style
+   */
+  buttonType?: ButtonType;
+  /**
+   * The size of the button
+   */
+  size?: ButtonSize;
+  /**
+   * Whether the button should take the full width of its container
+   */
+  fullWidth?: boolean;
+  /**
+   * Whether the button is in a loading state
+   */
+  loading?: boolean;
+  /**
+   * Icon to display before the button text
+   */
+  startIcon?: React.ReactNode;
+  /**
+   * Icon to display after the button text
+   */
+  endIcon?: React.ReactNode;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+}
+
+const useButtonStyles = (variant: ButtonVariant, buttonType: ButtonType, size: ButtonSize, fullWidth: boolean, disabled: boolean, loading: boolean) => {
+  const {theme} = useTheme();
+
+  return useMemo(() => {
+    // Size configurations
+    const sizeConfig = {
+      small: {
+        padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px`,
+        fontSize: '0.75rem',
+        minHeight: '24px',
+      },
+      medium: {
+        padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+        fontSize: '0.875rem',
+        minHeight: '32px',
+      },
+      large: {
+        padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit * 3}px`,
+        fontSize: '1rem',
+        minHeight: '40px',
+      },
+    };
+
+    // Color configurations based on variant and type
+    const getColorConfig = () => {
+      switch (variant) {
+        case 'primary':
+          switch (buttonType) {
+            case 'solid':
+              return {
+                backgroundColor: theme.colors.primary.main,
+                color: theme.colors.primary.contrastText,
+                border: `1px solid ${theme.colors.primary.main}`,
+                '&:hover': {
+                  backgroundColor: theme.colors.primary.main,
+                  opacity: 0.9,
+                },
+                '&:active': {
+                  backgroundColor: theme.colors.primary.main,
+                  opacity: 0.8,
+                },
+              };
+            case 'outline':
+              return {
+                backgroundColor: 'transparent',
+                color: theme.colors.primary.main,
+                border: `1px solid ${theme.colors.primary.main}`,
+                '&:hover': {
+                  backgroundColor: theme.colors.primary.main,
+                  color: theme.colors.primary.contrastText,
+                },
+                '&:active': {
+                  backgroundColor: theme.colors.primary.main,
+                  color: theme.colors.primary.contrastText,
+                  opacity: 0.9,
+                },
+              };
+            case 'text':
+              return {
+                backgroundColor: 'transparent',
+                color: theme.colors.primary.main,
+                border: '1px solid transparent',
+                '&:hover': {
+                  backgroundColor: theme.colors.background.surface,
+                },
+                '&:active': {
+                  backgroundColor: theme.colors.background.surface,
+                  opacity: 0.8,
+                },
+              };
+          }
+          break;
+        case 'secondary':
+          switch (buttonType) {
+            case 'solid':
+              return {
+                backgroundColor: theme.colors.secondary.main,
+                color: theme.colors.secondary.contrastText,
+                border: `1px solid ${theme.colors.secondary.main}`,
+                '&:hover': {
+                  backgroundColor: theme.colors.secondary.main,
+                  opacity: 0.9,
+                },
+                '&:active': {
+                  backgroundColor: theme.colors.secondary.main,
+                  opacity: 0.8,
+                },
+              };
+            case 'outline':
+              return {
+                backgroundColor: 'transparent',
+                color: theme.colors.secondary.main,
+                border: `1px solid ${theme.colors.secondary.main}`,
+                '&:hover': {
+                  backgroundColor: theme.colors.secondary.main,
+                  color: theme.colors.secondary.contrastText,
+                },
+                '&:active': {
+                  backgroundColor: theme.colors.secondary.main,
+                  color: theme.colors.secondary.contrastText,
+                  opacity: 0.9,
+                },
+              };
+            case 'text':
+              return {
+                backgroundColor: 'transparent',
+                color: theme.colors.secondary.main,
+                border: '1px solid transparent',
+                '&:hover': {
+                  backgroundColor: theme.colors.background.surface,
+                },
+                '&:active': {
+                  backgroundColor: theme.colors.background.surface,
+                  opacity: 0.8,
+                },
+              };
+          }
+          break;
+        case 'tertiary':
+          switch (buttonType) {
+            case 'solid':
+              return {
+                backgroundColor: theme.colors.text.secondary,
+                color: theme.colors.background.surface,
+                border: `1px solid ${theme.colors.text.secondary}`,
+                '&:hover': {
+                  backgroundColor: theme.colors.text.primary,
+                  color: theme.colors.background.surface,
+                },
+                '&:active': {
+                  backgroundColor: theme.colors.text.primary,
+                  color: theme.colors.background.surface,
+                  opacity: 0.9,
+                },
+              };
+            case 'outline':
+              return {
+                backgroundColor: 'transparent',
+                color: theme.colors.text.secondary,
+                border: `1px solid ${theme.colors.border}`,
+                '&:hover': {
+                  backgroundColor: theme.colors.background.surface,
+                  borderColor: theme.colors.text.secondary,
+                },
+                '&:active': {
+                  backgroundColor: theme.colors.background.surface,
+                  borderColor: theme.colors.text.primary,
+                  opacity: 0.9,
+                },
+              };
+            case 'text':
+              return {
+                backgroundColor: 'transparent',
+                color: theme.colors.text.secondary,
+                border: '1px solid transparent',
+                '&:hover': {
+                  backgroundColor: theme.colors.background.surface,
+                  color: theme.colors.text.primary,
+                },
+                '&:active': {
+                  backgroundColor: theme.colors.background.surface,
+                  color: theme.colors.text.primary,
+                  opacity: 0.8,
+                },
+              };
+          }
+          break;
+      }
+    };
+
+    const baseStyle: CSSProperties = {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: theme.spacing.unit / 2 + 'px',
+      borderRadius: theme.borderRadius.small,
+      fontWeight: 500,
+      cursor: disabled || loading ? 'not-allowed' : 'pointer',
+      transition: 'all 0.2s ease-in-out',
+      outline: 'none',
+      textDecoration: 'none',
+      whiteSpace: 'nowrap',
+      width: fullWidth ? '100%' : 'auto',
+      opacity: disabled || loading ? 0.6 : 1,
+      ...sizeConfig[size],
+      ...getColorConfig(),
+    };
+
+    return baseStyle;
+  }, [theme, variant, buttonType, size, fullWidth, disabled, loading]);
+};
+
+const LoadingSpinner: FC<{size: ButtonSize}> = ({size}) => {
+  const {theme} = useTheme();
+  
+  const spinnerSize = {
+    small: '12px',
+    medium: '16px',
+    large: '20px',
+  }[size];
+
+  const spinnerStyle: CSSProperties = {
+    width: spinnerSize,
+    height: spinnerSize,
+    border: '2px solid transparent',
+    borderTop: '2px solid currentColor',
+    borderRadius: '50%',
+    animation: 'asgardeo-button-spin 1s linear infinite',
+  };
+
+  return (
+    <>
+      <style>
+        {`
+          @keyframes asgardeo-button-spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        `}
+      </style>
+      <span style={spinnerStyle} />
+    </>
+  );
+};
+
+/**
+ * Button component with multiple variants and types.
+ * 
+ * @example
+ * ```tsx
+ * // Primary solid button
+ * <Button variant="primary" buttonType="solid">
+ *   Click me
+ * </Button>
+ * 
+ * // Secondary outline button
+ * <Button variant="secondary" buttonType="outline" size="large">
+ *   Cancel
+ * </Button>
+ * 
+ * // Text button with loading state
+ * <Button variant="tertiary" buttonType="text" loading>
+ *   Loading...
+ * </Button>
+ * 
+ * // Button with icons
+ * <Button 
+ *   variant="primary" 
+ *   startIcon={<Icon />} 
+ *   endIcon={<Arrow />}
+ * >
+ *   Save and Continue
+ * </Button>
+ * ```
+ */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = 'primary',
+      buttonType = 'solid',
+      size = 'medium',
+      fullWidth = false,
+      loading = false,
+      startIcon,
+      endIcon,
+      children,
+      className,
+      disabled,
+      style,
+      ...rest
+    },
+    ref
+  ) => {
+    const buttonStyle = useButtonStyles(variant, buttonType, size, fullWidth, disabled || false, loading);
+
+    return (
+      <button
+        ref={ref}
+        style={{...buttonStyle, ...style}}
+        className={clsx(
+          withVendorCSSClassPrefix('button'),
+          withVendorCSSClassPrefix(`button-${variant}`),
+          withVendorCSSClassPrefix(`button-${buttonType}`),
+          withVendorCSSClassPrefix(`button-${size}`),
+          {
+            [withVendorCSSClassPrefix('button-full-width')]: fullWidth,
+            [withVendorCSSClassPrefix('button-loading')]: loading,
+          },
+          className
+        )}
+        disabled={disabled || loading}
+        {...rest}
+      >
+        {loading && <LoadingSpinner size={size} />}
+        {!loading && startIcon && <span>{startIcon}</span>}
+        {children && <span>{children}</span>}
+        {!loading && endIcon && <span>{endIcon}</span>}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+export default Button;
diff --git a/packages/react/src/components/primitives/Popover/Popover.tsx b/packages/react/src/components/primitives/Popover/Popover.tsx
index d29c63164..7f3e01149 100644
--- a/packages/react/src/components/primitives/Popover/Popover.tsx
+++ b/packages/react/src/components/primitives/Popover/Popover.tsx
@@ -21,6 +21,7 @@ import {createPortal} from 'react-dom';
 import {useTheme} from '../../../theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
+import {Button} from '../Button/Button';
 
 const useStyles = () => {
   const {theme, colorScheme} = useTheme();
@@ -96,9 +97,19 @@ const PopoverHeader: FC<PopoverHeaderProps> = ({children}) => {
     <div style={styles.header}>
       {children && <h3 style={styles.headerTitle}>{children}</h3>}
       {onClose && (
-        <button style={styles.closeButton} onClick={onClose} aria-label="Close">
+        <Button
+          variant="tertiary"
+          buttonType="text"
+          size="small"
+          onClick={onClose}
+          aria-label="Close"
+          style={{
+            padding: styles.closeButton.padding,
+            fontSize: styles.closeButton.fontSize,
+          }}
+        >
           ×
-        </button>
+        </Button>
       )}
     </div>
   );
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 98d027ad2..2468e969c 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -73,12 +73,14 @@ export * from './components/presentation/UserDropdown/BaseUserDropdown';
 export {default as UserDropdown} from './components/presentation/UserDropdown/UserDropdown';
 export * from './components/presentation/UserDropdown/UserDropdown';
 
+export {default as Button} from './components/primitives/Button/Button';
+export * from './components/primitives/Button/Button';
+
 export {
   createField,
   FieldFactory,
   parseMultiValuedString,
   formatMultiValuedString,
-  getDefaultOptionsForParam,
   validateFieldValue,
 } from './components/factories/FieldFactory';
 export * from './components/factories/FieldFactory';

From 7ad0c9876ee5d6d23c044c621fb23168e2777b93 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Wed, 11 Jun 2025 12:53:47 +0530
Subject: [PATCH 051/131] refactor: update Button import statements and adjust
 props for consistency across components

---
 .../actions/SignInButton/BaseSignInButton.tsx |  4 +-
 .../SignOutButton/BaseSignOutButton.tsx       |  6 +-
 .../actions/SignUpButton/BaseSignUpButton.tsx |  6 +-
 .../presentation/SignIn/BaseSignIn.tsx        | 10 +--
 .../UserDropdown/BaseUserDropdown.tsx         | 10 +--
 .../UserProfile/BaseUserProfile.tsx           | 14 ++--
 .../components/primitives/Button/Button.tsx   | 79 ++++++++++---------
 .../components/primitives/Popover/Popover.tsx |  6 +-
 packages/react/src/index.ts                   |  2 +-
 .../vite-react-ts/src/components/Header.tsx   |  4 +-
 10 files changed, 72 insertions(+), 69 deletions(-)

diff --git a/packages/react/src/components/actions/SignInButton/BaseSignInButton.tsx b/packages/react/src/components/actions/SignInButton/BaseSignInButton.tsx
index 2471b196c..eb5aae36b 100644
--- a/packages/react/src/components/actions/SignInButton/BaseSignInButton.tsx
+++ b/packages/react/src/components/actions/SignInButton/BaseSignInButton.tsx
@@ -27,7 +27,7 @@ import {
 } from 'react';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
-import {Button} from '../../primitives/Button/Button';
+import Button from '../../primitives/Button/Button';
 
 /**
  * Common props shared by all {@link BaseSignInButton} components.
@@ -97,8 +97,6 @@ const BaseSignInButton: ForwardRefExoticComponent<BaseSignInButtonProps & RefAtt
           disabled={isLoading}
           loading={isLoading}
           type="button"
-          variant="primary"
-          buttonType="solid"
           {...rest}
         >
           {children}
diff --git a/packages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsx b/packages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsx
index e7daebcbe..cdb661007 100644
--- a/packages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsx
+++ b/packages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsx
@@ -27,7 +27,7 @@ import {
 } from 'react';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
-import {Button} from '../../primitives/Button/Button';
+import Button from '../../primitives/Button/Button';
 
 /**
  * Common props shared by all {@link BaseSignOutButton} components.
@@ -97,8 +97,8 @@ const BaseSignOutButton: ForwardRefExoticComponent<BaseSignOutButtonProps & RefA
           disabled={isLoading}
           loading={isLoading}
           type="button"
-          variant="secondary"
-          buttonType="outline"
+          color="secondary"
+          variant="outline"
           {...rest}
         >
           {children}
diff --git a/packages/react/src/components/actions/SignUpButton/BaseSignUpButton.tsx b/packages/react/src/components/actions/SignUpButton/BaseSignUpButton.tsx
index 5ff06f961..1c96b44b9 100644
--- a/packages/react/src/components/actions/SignUpButton/BaseSignUpButton.tsx
+++ b/packages/react/src/components/actions/SignUpButton/BaseSignUpButton.tsx
@@ -27,7 +27,7 @@ import {
 } from 'react';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
-import {Button} from '../../primitives/Button/Button';
+import Button from '../../primitives/Button/Button';
 
 /**
  * Common props shared by all {@link BaseSignUpButton} components.
@@ -97,8 +97,8 @@ const BaseSignUpButton: ForwardRefExoticComponent<BaseSignUpButtonProps & RefAtt
           disabled={isLoading}
           loading={isLoading}
           type="button"
-          variant="primary"
-          buttonType="outline"
+          color="primary"
+          variant="outline"
           {...rest}
         >
           {children}
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index 4f0f80b92..e669605a1 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -22,7 +22,7 @@ import {
 } from '@asgardeo/browser';
 import {FC, FormEvent, ReactElement} from 'react';
 import {createField} from '../../factories/FieldFactory';
-import {Button} from '../../primitives/Button/Button';
+import Button from '../../primitives/Button/Button';
 
 /**
  * Interface for form field state.
@@ -236,13 +236,13 @@ const BaseSignIn: FC<BaseSignInProps> = ({
           </div>
         ))}
 
-        <Button 
-          type="submit" 
+        <Button
+          type="submit"
           disabled={isLoading}
           loading={isLoading}
           className={buttonClassName}
-          variant="primary"
-          buttonType="solid"
+          color="primary"
+          variant="solid"
           fullWidth
         >
           {submitButtonText}
diff --git a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
index 1a7cb9d27..c92c398c3 100644
--- a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
+++ b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
@@ -22,7 +22,7 @@ import clsx from 'clsx';
 import {useTheme} from '../../../theme/useTheme';
 import {Avatar} from '../../primitives/Avatar/Avatar';
 import {Popover} from '../../primitives/Popover/Popover';
-import {Button} from '../../primitives/Button/Button';
+import Button from '../../primitives/Button/Button';
 import getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';
 
 const useStyles = () => {
@@ -214,8 +214,8 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
         className={withVendorCSSClassPrefix('user-dropdown-trigger')}
         style={styles.trigger}
         onClick={() => setIsOpen(!isOpen)}
-        variant="tertiary"
-        buttonType="text"
+        color="tertiary"
+        variant="text"
         size="medium"
       >
         <Avatar
@@ -271,8 +271,8 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
                       onClick={() => handleMenuItemClick(item)}
                       style={styles.menuItem}
                       className={withVendorCSSClassPrefix('user-dropdown-menu-item')}
-                      variant="tertiary"
-                      buttonType="text"
+                      color="tertiary"
+                      variant="text"
                       size="small"
                       startIcon={item.icon}
                     >
diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index 192948be2..eb675b20f 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -22,7 +22,7 @@ import {Avatar} from '../../primitives/Avatar/Avatar';
 import {TextField} from '../../primitives/TextField/TextField';
 import {DatePicker} from '../../primitives/DatePicker/DatePicker';
 import {Checkbox} from '../../primitives/Checkbox/Checkbox';
-import {Button} from '../../primitives/Button/Button';
+import Button from '../../primitives/Button/Button';
 import {useTheme} from '../../../theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
@@ -338,16 +338,16 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
               <>
                 <Button 
                   size="small"
-                  variant="primary"
-                  buttonType="solid"
+                  color="primary"
+                  variant="solid"
                   onClick={() => handleFieldSave(schema)}
                 >
                   Save
                 </Button>
                 <Button
                   size="small"
-                  variant="secondary"
-                  buttonType="outline"
+                  color="secondary"
+                  variant="outline"
                   onClick={() => handleFieldCancel(schema.name!)}
                 >
                   Cancel
@@ -356,8 +356,8 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
             ) : (
               <Button
                 size="small"
-                variant="tertiary"
-                buttonType="text"
+                color="tertiary"
+                variant="text"
                 onClick={() => toggleFieldEdit(schema.name!)}
                 title="Edit"
                 style={{
diff --git a/packages/react/src/components/primitives/Button/Button.tsx b/packages/react/src/components/primitives/Button/Button.tsx
index 02a010097..21dd29273 100644
--- a/packages/react/src/components/primitives/Button/Button.tsx
+++ b/packages/react/src/components/primitives/Button/Button.tsx
@@ -21,19 +21,19 @@ import {useTheme} from '../../../theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
 
-export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
-export type ButtonType = 'solid' | 'outline' | 'text';
+export type ButtonColor = 'primary' | 'secondary' | 'tertiary' | string;
+export type ButtonVariant = 'solid' | 'outline' | 'text';
 export type ButtonSize = 'small' | 'medium' | 'large';
 
-export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
   /**
-   * The button variant that determines the color scheme
+   * The button color that determines the color scheme
    */
-  variant?: ButtonVariant;
+  color?: ButtonColor;
   /**
-   * The button type that determines the visual style
+   * The button variant that determines the visual style
    */
-  buttonType?: ButtonType;
+  variant?: ButtonVariant;
   /**
    * The size of the button
    */
@@ -54,13 +54,16 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
    * Icon to display after the button text
    */
   endIcon?: React.ReactNode;
-  /**
-   * Additional CSS class names
-   */
-  className?: string;
 }
 
-const useButtonStyles = (variant: ButtonVariant, buttonType: ButtonType, size: ButtonSize, fullWidth: boolean, disabled: boolean, loading: boolean) => {
+const useButtonStyles = (
+  color: ButtonColor,
+  variant: ButtonVariant,
+  size: ButtonSize,
+  fullWidth: boolean,
+  disabled: boolean,
+  loading: boolean,
+) => {
   const {theme} = useTheme();
 
   return useMemo(() => {
@@ -83,11 +86,11 @@ const useButtonStyles = (variant: ButtonVariant, buttonType: ButtonType, size: B
       },
     };
 
-    // Color configurations based on variant and type
+    // Color configurations based on color and variant
     const getColorConfig = () => {
-      switch (variant) {
+      switch (color) {
         case 'primary':
-          switch (buttonType) {
+          switch (variant) {
             case 'solid':
               return {
                 backgroundColor: theme.colors.primary.main,
@@ -133,7 +136,7 @@ const useButtonStyles = (variant: ButtonVariant, buttonType: ButtonType, size: B
           }
           break;
         case 'secondary':
-          switch (buttonType) {
+          switch (variant) {
             case 'solid':
               return {
                 backgroundColor: theme.colors.secondary.main,
@@ -179,7 +182,7 @@ const useButtonStyles = (variant: ButtonVariant, buttonType: ButtonType, size: B
           }
           break;
         case 'tertiary':
-          switch (buttonType) {
+          switch (variant) {
             case 'solid':
               return {
                 backgroundColor: theme.colors.text.secondary,
@@ -227,6 +230,8 @@ const useButtonStyles = (variant: ButtonVariant, buttonType: ButtonType, size: B
               };
           }
           break;
+        default:
+          return {};
       }
     };
 
@@ -249,12 +254,12 @@ const useButtonStyles = (variant: ButtonVariant, buttonType: ButtonType, size: B
     };
 
     return baseStyle;
-  }, [theme, variant, buttonType, size, fullWidth, disabled, loading]);
+  }, [theme, color, variant, size, fullWidth, disabled, loading]);
 };
 
 const LoadingSpinner: FC<{size: ButtonSize}> = ({size}) => {
   const {theme} = useTheme();
-  
+
   const spinnerSize = {
     small: '12px',
     medium: '16px',
@@ -287,39 +292,39 @@ const LoadingSpinner: FC<{size: ButtonSize}> = ({size}) => {
 
 /**
  * Button component with multiple variants and types.
- * 
+ *
  * @example
  * ```tsx
  * // Primary solid button
- * <Button variant="primary" buttonType="solid">
+ * <Button color="primary" variant="solid">
  *   Click me
  * </Button>
- * 
+ *
  * // Secondary outline button
- * <Button variant="secondary" buttonType="outline" size="large">
+ * <Button color="secondary" variant="outline" size="large">
  *   Cancel
  * </Button>
- * 
+ *
  * // Text button with loading state
- * <Button variant="tertiary" buttonType="text" loading>
+ * <Button color="tertiary" variant="text" loading>
  *   Loading...
  * </Button>
- * 
+ *
  * // Button with icons
- * <Button 
- *   variant="primary" 
- *   startIcon={<Icon />} 
+ * <Button
+ *   color="primary"
+ *   startIcon={<Icon />}
  *   endIcon={<Arrow />}
  * >
  *   Save and Continue
  * </Button>
  * ```
  */
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
-      variant = 'primary',
-      buttonType = 'solid',
+      color = 'primary',
+      variant = 'solid',
       size = 'medium',
       fullWidth = false,
       loading = false,
@@ -331,9 +336,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       style,
       ...rest
     },
-    ref
+    ref,
   ) => {
-    const buttonStyle = useButtonStyles(variant, buttonType, size, fullWidth, disabled || false, loading);
+    const buttonStyle = useButtonStyles(color, variant, size, fullWidth, disabled || false, loading);
 
     return (
       <button
@@ -341,14 +346,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         style={{...buttonStyle, ...style}}
         className={clsx(
           withVendorCSSClassPrefix('button'),
+          withVendorCSSClassPrefix(`button-${color}`),
           withVendorCSSClassPrefix(`button-${variant}`),
-          withVendorCSSClassPrefix(`button-${buttonType}`),
           withVendorCSSClassPrefix(`button-${size}`),
           {
             [withVendorCSSClassPrefix('button-full-width')]: fullWidth,
             [withVendorCSSClassPrefix('button-loading')]: loading,
           },
-          className
+          className,
         )}
         disabled={disabled || loading}
         {...rest}
@@ -359,7 +364,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {!loading && endIcon && <span>{endIcon}</span>}
       </button>
     );
-  }
+  },
 );
 
 Button.displayName = 'Button';
diff --git a/packages/react/src/components/primitives/Popover/Popover.tsx b/packages/react/src/components/primitives/Popover/Popover.tsx
index 7f3e01149..ec3850c83 100644
--- a/packages/react/src/components/primitives/Popover/Popover.tsx
+++ b/packages/react/src/components/primitives/Popover/Popover.tsx
@@ -21,7 +21,7 @@ import {createPortal} from 'react-dom';
 import {useTheme} from '../../../theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
-import {Button} from '../Button/Button';
+import Button from '../Button/Button';
 
 const useStyles = () => {
   const {theme, colorScheme} = useTheme();
@@ -98,8 +98,8 @@ const PopoverHeader: FC<PopoverHeaderProps> = ({children}) => {
       {children && <h3 style={styles.headerTitle}>{children}</h3>}
       {onClose && (
         <Button
-          variant="tertiary"
-          buttonType="text"
+          color="tertiary"
+          variant="text"
           size="small"
           onClick={onClose}
           aria-label="Close"
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 2468e969c..609fef331 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -74,7 +74,7 @@ export {default as UserDropdown} from './components/presentation/UserDropdown/Us
 export * from './components/presentation/UserDropdown/UserDropdown';
 
 export {default as Button} from './components/primitives/Button/Button';
-export * from './components/primitives/Button/Button';
+export {ButtonProps} from './components/primitives/Button/Button';
 
 export {
   createField,
diff --git a/recipes/vite-react-ts/src/components/Header.tsx b/recipes/vite-react-ts/src/components/Header.tsx
index 1952af139..10931dab1 100644
--- a/recipes/vite-react-ts/src/components/Header.tsx
+++ b/recipes/vite-react-ts/src/components/Header.tsx
@@ -152,7 +152,7 @@ export default function Header() {
                     <div className="text-sm text-gray-500">@{user?.username}</div>
                   </div>
 
-                  <span
+                  <div
                     // to="/profile"
                     className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                     onClick={() => {
@@ -162,7 +162,7 @@ export default function Header() {
                   >
                     <User className="h-4 w-4 mr-3" />
                     Your profile
-                  </span>
+                  </div>
 
                   <Link
                     to="/settings"

From 1ee2178beac8d4386debb5ea6ff95885b67685cb Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Wed, 11 Jun 2025 13:31:04 +0530
Subject: [PATCH 052/131] chore(react): add password toggle functionality to
 TextField and implement Eye/EyeOff icon components

---
 .../src/components/factories/FieldFactory.tsx |  39 +++++--
 .../src/components/primitives/Icons/Eye.tsx   |  43 +++++++
 .../components/primitives/Icons/EyeOff.tsx    |  45 ++++++++
 .../primitives/TextField/TextField.tsx        | 108 +++++++++++++++++-
 packages/react/src/index.ts                   |   3 +
 5 files changed, 223 insertions(+), 15 deletions(-)
 create mode 100644 packages/react/src/components/primitives/Icons/Eye.tsx
 create mode 100644 packages/react/src/components/primitives/Icons/EyeOff.tsx

diff --git a/packages/react/src/components/factories/FieldFactory.tsx b/packages/react/src/components/factories/FieldFactory.tsx
index da69bda08..8a6391292 100644
--- a/packages/react/src/components/factories/FieldFactory.tsx
+++ b/packages/react/src/components/factories/FieldFactory.tsx
@@ -17,10 +17,12 @@
  */
 
 import {ApplicationNativeAuthenticationAuthenticatorParamType} from '@asgardeo/browser';
-import {FC, ReactElement} from 'react';
+import {FC, ReactElement, useState} from 'react';
 import TextField from '../primitives/TextField/TextField';
 import Select from '../primitives/Select/Select';
 import {SelectOption} from '../primitives/Select/Select';
+import Eye from '../primitives/Icons/Eye';
+import EyeOff from '../primitives/Icons/EyeOff';
 
 /**
  * Interface for field configuration.
@@ -175,16 +177,29 @@ export const createField = (config: FieldConfig): ReactElement => {
     value,
   };
 
+  // Password toggle component for confidential fields
+  const PasswordToggleField: FC = () => {
+    const [showPassword, setShowPassword] = useState(false);
+
+    return (
+      <TextField
+        {...commonProps}
+        type={showPassword ? 'text' : 'password'}
+        onChange={e => onChange(e.target.value)}
+        autoComplete="current-password"
+        endIcon={showPassword ? <EyeOff width={16} height={16} /> : <Eye width={16} height={16} />}
+        onEndIconClick={() => setShowPassword(!showPassword)}
+      />
+    );
+  };
+
   switch (type) {
     case ApplicationNativeAuthenticationAuthenticatorParamType.String:
-      return (
-        <TextField
-          {...commonProps}
-          type={confidential ? 'password' : 'text'}
-          onChange={e => onChange(e.target.value)}
-          autoComplete={confidential ? 'current-password' : 'off'}
-        />
-      );
+      if (confidential) {
+        return <PasswordToggleField />;
+      }
+
+      return <TextField {...commonProps} type="text" onChange={e => onChange(e.target.value)} autoComplete="off" />;
 
     case ApplicationNativeAuthenticationAuthenticatorParamType.Integer:
       return (
@@ -224,10 +239,14 @@ export const createField = (config: FieldConfig): ReactElement => {
 
     default:
       // Fallback to text field for unknown types
+      if (confidential) {
+        return <PasswordToggleField />;
+      }
+
       return (
         <TextField
           {...commonProps}
-          type={confidential ? 'password' : 'text'}
+          type="text"
           onChange={e => onChange(e.target.value)}
           helperText="Unknown field type, treating as text"
         />
diff --git a/packages/react/src/components/primitives/Icons/Eye.tsx b/packages/react/src/components/primitives/Icons/Eye.tsx
new file mode 100644
index 000000000..ab25230d8
--- /dev/null
+++ b/packages/react/src/components/primitives/Icons/Eye.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {FC, SVGProps} from 'react';
+
+/**
+ * Eye icon component.
+ */
+const Eye: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="lucide lucide-eye-icon lucide-eye"
+    {...props}
+  >
+    <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
+    <circle cx="12" cy="12" r="3" />
+  </svg>
+);
+
+export default Eye;
diff --git a/packages/react/src/components/primitives/Icons/EyeOff.tsx b/packages/react/src/components/primitives/Icons/EyeOff.tsx
new file mode 100644
index 000000000..dc1e15df3
--- /dev/null
+++ b/packages/react/src/components/primitives/Icons/EyeOff.tsx
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {FC, SVGProps} from 'react';
+
+/**
+ * EyeOff icon component.
+ */
+const EyeOff: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="lucide lucide-eye-off-icon lucide-eye-off"
+    {...props}
+  >
+    <path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" />
+    <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
+    <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />
+    <path d="m2 2 20 20" />
+  </svg>
+);
+
+export default EyeOff;
diff --git a/packages/react/src/components/primitives/TextField/TextField.tsx b/packages/react/src/components/primitives/TextField/TextField.tsx
index 7b5ea1e6f..20dfbe5b0 100644
--- a/packages/react/src/components/primitives/TextField/TextField.tsx
+++ b/packages/react/src/components/primitives/TextField/TextField.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {CSSProperties, FC, InputHTMLAttributes} from 'react';
+import {CSSProperties, FC, InputHTMLAttributes, ReactNode} from 'react';
 import {useTheme} from '../../../theme/useTheme';
 import clsx from 'clsx';
 
@@ -45,14 +45,50 @@ export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElemen
    * Helper text to display below the input
    */
   helperText?: string;
+  /**
+   * Icon to display at the start (left) of the input
+   */
+  startIcon?: ReactNode;
+  /**
+   * Icon to display at the end (right) of the input
+   */
+  endIcon?: ReactNode;
+  /**
+   * Click handler for the start icon
+   */
+  onStartIconClick?: () => void;
+  /**
+   * Click handler for the end icon
+   */
+  onEndIconClick?: () => void;
 }
 
-export const TextField: FC<TextFieldProps> = ({label, error, required, className, disabled, helperText, style = {}, ...rest}) => {
+export const TextField: FC<TextFieldProps> = ({
+  label,
+  error,
+  required,
+  className,
+  disabled,
+  helperText,
+  startIcon,
+  endIcon,
+  onStartIconClick,
+  onEndIconClick,
+  type = 'text',
+  style = {},
+  ...rest
+}) => {
   const {theme} = useTheme();
 
+  // Calculate padding based on icons
+  const hasStartIcon = !!startIcon;
+  const hasEndIcon = !!endIcon;
+  const leftPadding = hasStartIcon ? theme.spacing.unit * 5 : theme.spacing.unit * 1.5;
+  const rightPadding = hasEndIcon ? theme.spacing.unit * 5 : theme.spacing.unit * 1.5;
+
   const containerStyle: CSSProperties = {
     marginBottom: theme.spacing.unit * 2 + 'px',
-    ...style
+    ...style,
   };
 
   const labelStyle: CSSProperties = {
@@ -65,7 +101,7 @@ export const TextField: FC<TextFieldProps> = ({label, error, required, className
 
   const inputStyle: CSSProperties = {
     width: '100%',
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
+    padding: `${theme.spacing.unit}px ${rightPadding}px ${theme.spacing.unit}px ${leftPadding}px`,
     border: `1px solid ${error ? theme.colors.error.main : theme.colors.border}`,
     borderRadius: theme.borderRadius.small,
     fontSize: '1rem',
@@ -75,6 +111,37 @@ export const TextField: FC<TextFieldProps> = ({label, error, required, className
     transition: 'border-color 0.2s ease',
   };
 
+  const inputContainerStyle: CSSProperties = {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+  };
+
+  const iconButtonStyle: CSSProperties = {
+    position: 'absolute',
+    background: 'none',
+    border: 'none',
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    padding: theme.spacing.unit / 2,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: theme.colors.text.secondary,
+    opacity: disabled ? 0.5 : 1,
+    top: '50%',
+    transform: 'translateY(-50%)',
+  };
+
+  const startIconStyle: CSSProperties = {
+    ...iconButtonStyle,
+    left: theme.spacing.unit,
+  };
+
+  const endIconStyle: CSSProperties = {
+    ...iconButtonStyle,
+    right: theme.spacing.unit,
+  };
+
   const helperTextStyle: CSSProperties = {
     fontSize: '0.75rem',
     color: error ? theme.colors.error.main : theme.colors.text.secondary,
@@ -89,7 +156,38 @@ export const TextField: FC<TextFieldProps> = ({label, error, required, className
           {required && <span style={{color: theme.colors.error.main}}> *</span>}
         </label>
       )}
-      <input style={inputStyle} disabled={disabled} aria-invalid={!!error} aria-required={required} {...rest} />
+      <div style={inputContainerStyle}>
+        {startIcon && (
+          <div
+            style={startIconStyle}
+            onClick={onStartIconClick}
+            role={onStartIconClick ? 'button' : undefined}
+            tabIndex={onStartIconClick && !disabled ? 0 : undefined}
+            aria-label="Start icon"
+          >
+            {startIcon}
+          </div>
+        )}
+        <input
+          style={inputStyle}
+          type={type}
+          disabled={disabled}
+          aria-invalid={!!error}
+          aria-required={required}
+          {...rest}
+        />
+        {endIcon && (
+          <div
+            style={endIconStyle}
+            onClick={onEndIconClick}
+            role={onEndIconClick ? 'button' : undefined}
+            tabIndex={onEndIconClick && !disabled ? 0 : undefined}
+            aria-label="End icon"
+          >
+            {endIcon}
+          </div>
+        )}
+      </div>
       {(error || helperText) && <div style={helperTextStyle}>{error || helperText}</div>}
     </div>
   );
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 609fef331..c742b4810 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -76,6 +76,9 @@ export * from './components/presentation/UserDropdown/UserDropdown';
 export {default as Button} from './components/primitives/Button/Button';
 export {ButtonProps} from './components/primitives/Button/Button';
 
+export {default as Eye} from './components/primitives/Icons/Eye';
+export {default as EyeOff} from './components/primitives/Icons/EyeOff';
+
 export {
   createField,
   FieldFactory,

From 9bb8c1b8e53dfe06a28459b0ed6ab51ffa298573 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Wed, 11 Jun 2025 13:45:53 +0530
Subject: [PATCH 053/131] chore(react): implement Card component and integrate
 it into BaseSignIn for improved layout

---
 .../presentation/SignIn/BaseSignIn.tsx        | 106 ++--
 .../src/components/primitives/Card/Card.tsx   | 464 ++++++++++++++++++
 packages/react/src/index.ts                   |   5 +-
 3 files changed, 529 insertions(+), 46 deletions(-)
 create mode 100644 packages/react/src/components/primitives/Card/Card.tsx

diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index e669605a1..51819eaa6 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -23,6 +23,7 @@ import {
 import {FC, FormEvent, ReactElement} from 'react';
 import {createField} from '../../factories/FieldFactory';
 import Button from '../../primitives/Button/Button';
+import Card from '../../primitives/Card/Card';
 
 /**
  * Interface for form field state.
@@ -124,6 +125,7 @@ export interface BaseSignInProps {
 /**
  * Base SignIn component that provides native authentication flow.
  * This component handles the presentation layer for authentication forms.
+ * Now uses Card component for better visual structure.
  *
  * @example
  * ```tsx
@@ -140,6 +142,7 @@ export interface BaseSignInProps {
  *       isInitialized={initialized}
  *       onSubmit={handleSubmit}
  *       onInputChange={handleInputChange}
+ *       className="max-w-md mx-auto"
  *     />
  *   );
  * };
@@ -191,64 +194,77 @@ const BaseSignIn: FC<BaseSignInProps> = ({
 
   if (!isInitialized && isLoading) {
     return showLoading ? (
-      <div className={className}>
-        <p>{loadingText}</p>
-      </div>
+      <Card className={className}>
+        <Card.Content>
+          <p>{loadingText}</p>
+        </Card.Content>
+      </Card>
     ) : null;
   }
 
   if (!currentAuthenticator) {
-    return <div className={className}>{error && <div className={errorClassName}>Error: {error}</div>}</div>;
+    return (
+      <Card className={className}>
+        <Card.Content>
+          {error && <div className={errorClassName}>Error: {error}</div>}
+        </Card.Content>
+      </Card>
+    );
   }
 
   const formFields = getFormFields();
 
   return (
-    <div className={className}>
-      {error && <div className={errorClassName}>{error}</div>}
-
-      {messages.length > 0 && (
-        <div className={messageClassName}>
-          {messages.map((message, index) => (
-            <div key={index} className={`message-${message.type.toLowerCase()}`}>
-              {message.message}
+    <Card className={className}>
+      <form onSubmit={handleSubmit}>
+        <Card.Header>
+          <Card.Title level={2}>{currentAuthenticator.authenticator}</Card.Title>
+          {messages.length > 0 && (
+            <Card.Description>
+              {messages.map((message, index) => (
+                <div key={index} className={`message-${message.type.toLowerCase()}`}>
+                  {message.message}
+                </div>
+              ))}
+            </Card.Description>
+          )}
+        </Card.Header>
+
+        <Card.Content>
+          {error && <div className={errorClassName}>{error}</div>}
+
+          {formFields.map(field => (
+            <div key={field.param} style={{marginBottom: '1rem'}}>
+              {createField({
+                param: field.param,
+                type: field.type,
+                displayName: field.displayName,
+                confidential: field.confidential,
+                required: field.required,
+                value: field.value,
+                onChange: value => onInputChange(field.param, value),
+                disabled: isLoading,
+                className: inputClassName,
+              })}
             </div>
           ))}
-        </div>
-      )}
+        </Card.Content>
 
-      <form onSubmit={handleSubmit}>
-        <h2>{currentAuthenticator.authenticator}</h2>
-
-        {formFields.map(field => (
-          <div key={field.param} style={{marginBottom: '1rem'}}>
-            {createField({
-              param: field.param,
-              type: field.type,
-              displayName: field.displayName,
-              confidential: field.confidential,
-              required: field.required,
-              value: field.value,
-              onChange: value => onInputChange(field.param, value),
-              disabled: isLoading,
-              className: inputClassName,
-            })}
-          </div>
-        ))}
-
-        <Button
-          type="submit"
-          disabled={isLoading}
-          loading={isLoading}
-          className={buttonClassName}
-          color="primary"
-          variant="solid"
-          fullWidth
-        >
-          {submitButtonText}
-        </Button>
+        <Card.Footer>
+          <Button
+            type="submit"
+            disabled={isLoading}
+            loading={isLoading}
+            className={buttonClassName}
+            color="primary"
+            variant="solid"
+            fullWidth
+          >
+            {submitButtonText}
+          </Button>
+        </Card.Footer>
       </form>
-    </div>
+    </Card>
   );
 };
 
diff --git a/packages/react/src/components/primitives/Card/Card.tsx b/packages/react/src/components/primitives/Card/Card.tsx
new file mode 100644
index 000000000..e101a2626
--- /dev/null
+++ b/packages/react/src/components/primitives/Card/Card.tsx
@@ -0,0 +1,464 @@
+/**
+ * Copyright (import {CSSProperties, HTMLAttributes, forwardRef, useMemo, ReactNode, ForwardRefExoticComponent, Ref} from 'react';
+import {useTheme} from '../../../theme/useTheme'; 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {CSSProperties, HTMLAttributes, forwardRef, useMemo, ReactNode, ForwardRefExoticComponent, RefAttributes} from 'react';
+import {useTheme} from '../../../theme/useTheme';
+import {withVendorCSSClassPrefix} from '@asgardeo/browser';
+import clsx from 'clsx';
+
+export type CardVariant = 'default' | 'outlined' | 'elevated';
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * The visual variant of the card
+   */
+  variant?: CardVariant;
+  /**
+   * Whether the card should be clickable (shows hover effects)
+   */
+  clickable?: boolean;
+  /**
+   * Card content
+   */
+  children?: ReactNode;
+}
+
+export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Header content
+   */
+  children?: ReactNode;
+}
+
+export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+  /**
+   * Title content
+   */
+  children?: ReactNode;
+  /**
+   * The heading level to use
+   */
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+
+export interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+  /**
+   * Description content
+   */
+  children?: ReactNode;
+}
+
+export interface CardActionProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Action content
+   */
+  children?: ReactNode;
+}
+
+export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Content
+   */
+  children?: ReactNode;
+}
+
+export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Footer content
+   */
+  children?: ReactNode;
+}
+
+const useCardStyles = (variant: CardVariant, clickable: boolean) => {
+  const {theme} = useTheme();
+
+  return useMemo(() => {
+    const baseStyles: CSSProperties = {
+      borderRadius: theme.borderRadius.medium,
+      backgroundColor: theme.colors.background.surface,
+      border: `1px solid ${theme.colors.border}`,
+      transition: 'all 0.2s ease-in-out',
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+    };
+
+    const variantStyles: Record<CardVariant, CSSProperties> = {
+      default: {
+        ...baseStyles,
+      },
+      outlined: {
+        ...baseStyles,
+        border: `2px solid ${theme.colors.border}`,
+        backgroundColor: 'transparent',
+      },
+      elevated: {
+        ...baseStyles,
+        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+        border: 'none',
+      },
+    };
+
+    const clickableStyles: CSSProperties = clickable
+      ? {
+          cursor: 'pointer',
+        }
+      : {};
+
+    return {
+      ...variantStyles[variant],
+      ...clickableStyles,
+    };
+  }, [theme, variant, clickable]);
+};
+
+const useCardHeaderStyles = () => {
+  const {theme} = useTheme();
+
+  return useMemo(
+    (): CSSProperties => ({
+      padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px 0`,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: `${theme.spacing.unit}px`,
+    }),
+    [theme],
+  );
+};
+
+const useCardTitleStyles = () => {
+  const {theme} = useTheme();
+
+  return useMemo(
+    (): CSSProperties => ({
+      margin: 0,
+      color: theme.colors.text.primary,
+      fontSize: '1.25rem',
+      fontWeight: 600,
+      lineHeight: 1.4,
+    }),
+    [theme],
+  );
+};
+
+const useCardDescriptionStyles = () => {
+  const {theme} = useTheme();
+
+  return useMemo(
+    (): CSSProperties => ({
+      margin: 0,
+      color: theme.colors.text.secondary,
+      fontSize: '0.875rem',
+      lineHeight: 1.5,
+    }),
+    [theme],
+  );
+};
+
+const useCardActionStyles = () => {
+  const {theme} = useTheme();
+
+  return useMemo(
+    (): CSSProperties => ({
+      marginTop: `${theme.spacing.unit}px`,
+    }),
+    [theme],
+  );
+};
+
+const useCardContentStyles = () => {
+  const {theme} = useTheme();
+
+  return useMemo(
+    (): CSSProperties => ({
+      padding: `${theme.spacing.unit * 2}px`,
+      flex: 1,
+    }),
+    [theme],
+  );
+};
+
+const useCardFooterStyles = () => {
+  const {theme} = useTheme();
+
+  return useMemo(
+    (): CSSProperties => ({
+      padding: `0 ${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px`,
+      display: 'flex',
+      alignItems: 'center',
+      gap: `${theme.spacing.unit}px`,
+    }),
+    [theme],
+  );
+};
+
+/**
+ * Card component that provides a flexible container for content.
+ *
+ * @example
+ * ```tsx
+ * <Card variant="elevated" clickable>
+ *   <Card.Header>
+ *     <Card.Title>Card Title</Card.Title>
+ *     <Card.Description>Card Description</Card.Description>
+ *     <Card.Action>
+ *       <Button variant="link">Action</Button>
+ *     </Card.Action>
+ *   </Card.Header>
+ *   <Card.Content>
+ *     <p>Card content goes here</p>
+ *   </Card.Content>
+ *   <Card.Footer>
+ *     <Button>Cancel</Button>
+ *     <Button variant="outline">Submit</Button>
+ *   </Card.Footer>
+ * </Card>
+ * ```
+ */
+const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({variant = 'default', clickable = false, children, className, style, ...rest}, ref) => {
+    const cardStyle = useCardStyles(variant, clickable);
+
+    return (
+      <div
+        ref={ref}
+        style={{...cardStyle, ...style}}
+        className={clsx(
+          withVendorCSSClassPrefix('card'),
+          withVendorCSSClassPrefix(`card-${variant}`),
+          {
+            [withVendorCSSClassPrefix('card-clickable')]: clickable,
+          },
+          className,
+        )}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+/**
+ * Card header component that contains the title, description, and optional actions.
+ */
+const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(({children, className, style, ...rest}, ref) => {
+  const headerStyle = useCardHeaderStyles();
+
+  return (
+    <div
+      ref={ref}
+      style={{...headerStyle, ...style}}
+      className={clsx(withVendorCSSClassPrefix('card-header'), className)}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
+
+/**
+ * Card title component.
+ */
+const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(
+  ({children, level = 3, className, style, ...rest}, ref) => {
+    const titleStyle = useCardTitleStyles();
+
+    if (level === 1) {
+      return (
+        <h1
+          ref={ref}
+          style={{...titleStyle, ...style}}
+          className={clsx(withVendorCSSClassPrefix('card-title'), className)}
+          {...rest}
+        >
+          {children}
+        </h1>
+      );
+    }
+
+    if (level === 2) {
+      return (
+        <h2
+          ref={ref}
+          style={{...titleStyle, ...style}}
+          className={clsx(withVendorCSSClassPrefix('card-title'), className)}
+          {...rest}
+        >
+          {children}
+        </h2>
+      );
+    }
+
+    if (level === 4) {
+      return (
+        <h4
+          ref={ref}
+          style={{...titleStyle, ...style}}
+          className={clsx(withVendorCSSClassPrefix('card-title'), className)}
+          {...rest}
+        >
+          {children}
+        </h4>
+      );
+    }
+
+    if (level === 5) {
+      return (
+        <h5
+          ref={ref}
+          style={{...titleStyle, ...style}}
+          className={clsx(withVendorCSSClassPrefix('card-title'), className)}
+          {...rest}
+        >
+          {children}
+        </h5>
+      );
+    }
+
+    if (level === 6) {
+      return (
+        <h6
+          ref={ref}
+          style={{...titleStyle, ...style}}
+          className={clsx(withVendorCSSClassPrefix('card-title'), className)}
+          {...rest}
+        >
+          {children}
+        </h6>
+      );
+    }
+
+    // Default to h3
+    return (
+      <h3
+        ref={ref}
+        style={{...titleStyle, ...style}}
+        className={clsx(withVendorCSSClassPrefix('card-title'), className)}
+        {...rest}
+      >
+        {children}
+      </h3>
+    );
+  },
+);
+
+/**
+ * Card description component.
+ */
+const CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(
+  ({children, className, style, ...rest}, ref) => {
+    const descriptionStyle = useCardDescriptionStyles();
+
+    return (
+      <p
+        ref={ref}
+        style={{...descriptionStyle, ...style}}
+        className={clsx(withVendorCSSClassPrefix('card-description'), className)}
+        {...rest}
+      >
+        {children}
+      </p>
+    );
+  },
+);
+
+/**
+ * Card action component for action elements in the header.
+ */
+const CardAction = forwardRef<HTMLDivElement, CardActionProps>(({children, className, style, ...rest}, ref) => {
+  const actionStyle = useCardActionStyles();
+
+  return (
+    <div
+      ref={ref}
+      style={{...actionStyle, ...style}}
+      className={clsx(withVendorCSSClassPrefix('card-action'), className)}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
+
+/**
+ * Card content component that contains the main content of the card.
+ */
+const CardContent = forwardRef<HTMLDivElement, CardContentProps>(({children, className, style, ...rest}, ref) => {
+  const contentStyle = useCardContentStyles();
+
+  return (
+    <div
+      ref={ref}
+      style={{...contentStyle, ...style}}
+      className={clsx(withVendorCSSClassPrefix('card-content'), className)}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
+
+/**
+ * Card footer component that contains footer actions or additional information.
+ */
+const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(({children, className, style, ...rest}, ref) => {
+  const footerStyle = useCardFooterStyles();
+
+  return (
+    <div
+      ref={ref}
+      style={{...footerStyle, ...style}}
+      className={clsx(withVendorCSSClassPrefix('card-footer'), className)}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
+
+Card.displayName = 'Card';
+CardHeader.displayName = 'Card.Header';
+CardTitle.displayName = 'Card.Title';
+CardDescription.displayName = 'Card.Description';
+CardAction.displayName = 'Card.Action';
+CardContent.displayName = 'Card.Content';
+CardFooter.displayName = 'Card.Footer';
+
+// Attach subcomponents to Card for dot notation usage
+(Card as any).Header = CardHeader;
+(Card as any).Title = CardTitle;
+(Card as any).Description = CardDescription;
+(Card as any).Action = CardAction;
+(Card as any).Content = CardContent;
+(Card as any).Footer = CardFooter;
+
+// TypeScript interface augmentation for dot notation
+export interface CardComponent extends ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> {
+  Header: typeof CardHeader;
+  Title: typeof CardTitle;
+  Description: typeof CardDescription;
+  Action: typeof CardAction;
+  Content: typeof CardContent;
+  Footer: typeof CardFooter;
+}
+
+export default Card as CardComponent;
+export {Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter};
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index c742b4810..08151eaeb 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -74,7 +74,10 @@ export {default as UserDropdown} from './components/presentation/UserDropdown/Us
 export * from './components/presentation/UserDropdown/UserDropdown';
 
 export {default as Button} from './components/primitives/Button/Button';
-export {ButtonProps} from './components/primitives/Button/Button';
+export * from './components/primitives/Button/Button';
+
+export {default as Card} from './components/primitives/Card/Card';
+export * from './components/primitives/Card/Card';
 
 export {default as Eye} from './components/primitives/Icons/Eye';
 export {default as EyeOff} from './components/primitives/Icons/EyeOff';

From b67df3a88e9894c4ce621f36fcc88fd80ce496ac Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Wed, 11 Jun 2025 13:54:43 +0530
Subject: [PATCH 054/131] feat(react): add new icon components (CircleAlert,
 CircleCheck, TriangleAlert, Info) and update index exports

---
 .../primitives/Icons/CircleAlert.tsx          | 43 +++++++++++++++++++
 .../primitives/Icons/CircleCheck.tsx          | 42 ++++++++++++++++++
 .../src/components/primitives/Icons/Eye.tsx   |  1 -
 .../components/primitives/Icons/EyeOff.tsx    |  1 -
 .../src/components/primitives/Icons/Info.tsx  | 43 +++++++++++++++++++
 .../primitives/Icons/TriangleAlert.tsx        | 43 +++++++++++++++++++
 packages/react/src/index.ts                   |  4 ++
 7 files changed, 175 insertions(+), 2 deletions(-)
 create mode 100644 packages/react/src/components/primitives/Icons/CircleAlert.tsx
 create mode 100644 packages/react/src/components/primitives/Icons/CircleCheck.tsx
 create mode 100644 packages/react/src/components/primitives/Icons/Info.tsx
 create mode 100644 packages/react/src/components/primitives/Icons/TriangleAlert.tsx

diff --git a/packages/react/src/components/primitives/Icons/CircleAlert.tsx b/packages/react/src/components/primitives/Icons/CircleAlert.tsx
new file mode 100644
index 000000000..f5ce73b38
--- /dev/null
+++ b/packages/react/src/components/primitives/Icons/CircleAlert.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {FC, SVGProps} from 'react';
+
+/**
+ * CircleAlert icon component.
+ */
+const CircleAlert: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <circle cx="12" cy="12" r="10" />
+    <line x1="12" x2="12" y1="8" y2="12" />
+    <line x1="12" x2="12.01" y1="16" y2="16" />
+  </svg>
+);
+
+export default CircleAlert;
diff --git a/packages/react/src/components/primitives/Icons/CircleCheck.tsx b/packages/react/src/components/primitives/Icons/CircleCheck.tsx
new file mode 100644
index 000000000..8aa3de6cd
--- /dev/null
+++ b/packages/react/src/components/primitives/Icons/CircleCheck.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {FC, SVGProps} from 'react';
+
+/**
+ * CircleCheck icon component.
+ */
+const CircleCheck: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <circle cx="12" cy="12" r="10" />
+    <path d="m9 12 2 2 4-4" />
+  </svg>
+);
+
+export default CircleCheck;
diff --git a/packages/react/src/components/primitives/Icons/Eye.tsx b/packages/react/src/components/primitives/Icons/Eye.tsx
index ab25230d8..cdc250198 100644
--- a/packages/react/src/components/primitives/Icons/Eye.tsx
+++ b/packages/react/src/components/primitives/Icons/Eye.tsx
@@ -32,7 +32,6 @@ const Eye: FC<SVGProps<SVGSVGElement>> = props => (
     strokeWidth="2"
     strokeLinecap="round"
     strokeLinejoin="round"
-    className="lucide lucide-eye-icon lucide-eye"
     {...props}
   >
     <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
diff --git a/packages/react/src/components/primitives/Icons/EyeOff.tsx b/packages/react/src/components/primitives/Icons/EyeOff.tsx
index dc1e15df3..aa9f2c254 100644
--- a/packages/react/src/components/primitives/Icons/EyeOff.tsx
+++ b/packages/react/src/components/primitives/Icons/EyeOff.tsx
@@ -32,7 +32,6 @@ const EyeOff: FC<SVGProps<SVGSVGElement>> = props => (
     strokeWidth="2"
     strokeLinecap="round"
     strokeLinejoin="round"
-    className="lucide lucide-eye-off-icon lucide-eye-off"
     {...props}
   >
     <path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" />
diff --git a/packages/react/src/components/primitives/Icons/Info.tsx b/packages/react/src/components/primitives/Icons/Info.tsx
new file mode 100644
index 000000000..f0a42b4b7
--- /dev/null
+++ b/packages/react/src/components/primitives/Icons/Info.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {FC, SVGProps} from 'react';
+
+/**
+ * Info icon component.
+ */
+const Info: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <circle cx="12" cy="12" r="10" />
+    <path d="M12 16v-4" />
+    <path d="M12 8h.01" />
+  </svg>
+);
+
+export default Info;
diff --git a/packages/react/src/components/primitives/Icons/TriangleAlert.tsx b/packages/react/src/components/primitives/Icons/TriangleAlert.tsx
new file mode 100644
index 000000000..da0b03180
--- /dev/null
+++ b/packages/react/src/components/primitives/Icons/TriangleAlert.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {FC, SVGProps} from 'react';
+
+/**
+ * TriangleAlert icon component.
+ */
+const TriangleAlert: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+    <path d="M12 9v4" />
+    <path d="M12 17h.01" />
+  </svg>
+);
+
+export default TriangleAlert;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 08151eaeb..61849b1f2 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -81,6 +81,10 @@ export * from './components/primitives/Card/Card';
 
 export {default as Eye} from './components/primitives/Icons/Eye';
 export {default as EyeOff} from './components/primitives/Icons/EyeOff';
+export {default as CircleCheck} from './components/primitives/Icons/CircleCheck';
+export {default as CircleAlert} from './components/primitives/Icons/CircleAlert';
+export {default as TriangleAlert} from './components/primitives/Icons/TriangleAlert';
+export {default as Info} from './components/primitives/Icons/Info';
 
 export {
   createField,

From 63a65815ab80bedff477a3d290949ff6ccee9c6a Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Wed, 11 Jun 2025 14:02:38 +0530
Subject: [PATCH 055/131] feat(react): add Alert component with variants and
 styles, and update index exports

---
 .../src/components/primitives/Alert/Alert.tsx | 272 ++++++++++++++++++
 packages/react/src/index.ts                   |   3 +
 2 files changed, 275 insertions(+)
 create mode 100644 packages/react/src/components/primitives/Alert/Alert.tsx

diff --git a/packages/react/src/components/primitives/Alert/Alert.tsx b/packages/react/src/components/primitives/Alert/Alert.tsx
new file mode 100644
index 000000000..b3b7fcbdc
--- /dev/null
+++ b/packages/react/src/components/primitives/Alert/Alert.tsx
@@ -0,0 +1,272 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  CSSProperties,
+  forwardRef,
+  HTMLAttributes,
+  ReactNode,
+  RefAttributes,
+  ForwardRefExoticComponent,
+  useMemo,
+} from 'react';
+import {useTheme} from '../../../theme/useTheme';
+import {withVendorCSSClassPrefix} from '@asgardeo/browser';
+import clsx from 'clsx';
+import CircleCheck from '../Icons/CircleCheck';
+import CircleAlert from '../Icons/CircleAlert';
+import TriangleAlert from '../Icons/TriangleAlert';
+import Info from '../Icons/Info';
+
+export type AlertVariant = 'success' | 'error' | 'warning' | 'info';
+
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * The visual variant of the alert that determines color scheme and icon
+   */
+  variant?: AlertVariant;
+  /**
+   * Whether to show the default icon for the variant
+   */
+  showIcon?: boolean;
+  /**
+   * Alert content
+   */
+  children?: ReactNode;
+}
+
+export interface AlertTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+  /**
+   * Title content
+   */
+  children?: ReactNode;
+}
+
+export interface AlertDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+  /**
+   * Description content
+   */
+  children?: ReactNode;
+}
+
+const useAlertStyles = (variant: AlertVariant) => {
+  const {theme} = useTheme();
+
+  return useMemo(() => {
+    const variantStyles: Record<AlertVariant, CSSProperties> = {
+      success: {
+        backgroundColor: '#d4edda',
+        borderColor: '#28a745',
+        color: '#155724',
+      },
+      error: {
+        backgroundColor: `${theme.colors.error.main}15`,
+        borderColor: theme.colors.error.main,
+        color: theme.colors.error.main,
+      },
+      warning: {
+        backgroundColor: '#fff3cd',
+        borderColor: '#ffc107',
+        color: '#856404',
+      },
+      info: {
+        backgroundColor: `${theme.colors.primary.main}15`,
+        borderColor: theme.colors.primary.main,
+        color: theme.colors.primary.main,
+      },
+    };
+
+    return {
+      padding: `${theme.spacing.unit * 2}px`,
+      borderRadius: theme.borderRadius.medium,
+      border: '1px solid',
+      display: 'flex',
+      gap: `${theme.spacing.unit * 1.5}px`,
+      alignItems: 'flex-start',
+      ...variantStyles[variant],
+    };
+  }, [theme, variant]);
+};
+
+const useAlertIconStyles = () => {
+  const {theme} = useTheme();
+
+  return useMemo(
+    (): CSSProperties => ({
+      flexShrink: 0,
+      marginTop: '2px', // Slight alignment adjustment
+      width: '20px',
+      height: '20px',
+    }),
+    [theme],
+  );
+};
+
+const useAlertContentStyles = () => {
+  const {theme} = useTheme();
+
+  return useMemo(
+    (): CSSProperties => ({
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: `${theme.spacing.unit}px`,
+    }),
+    [theme],
+  );
+};
+
+const useAlertTitleStyles = () => {
+  const {theme} = useTheme();
+
+  return useMemo(
+    (): CSSProperties => ({
+      margin: 0,
+      fontSize: '14px',
+      fontWeight: 600,
+      lineHeight: 1.4,
+      color: 'inherit',
+    }),
+    [theme],
+  );
+};
+
+const useAlertDescriptionStyles = () => {
+  const {theme} = useTheme();
+
+  return useMemo(
+    (): CSSProperties => ({
+      margin: 0,
+      fontSize: '14px',
+      lineHeight: 1.4,
+      color: theme.colors.text.secondary,
+    }),
+    [theme],
+  );
+};
+
+const getDefaultIcon = (variant: AlertVariant) => {
+  switch (variant) {
+    case 'success':
+      return CircleCheck;
+    case 'error':
+      return CircleAlert;
+    case 'warning':
+      return TriangleAlert;
+    case 'info':
+      return Info;
+    default:
+      return Info;
+  }
+};
+
+/**
+ * Alert component that displays important information with different severity levels.
+ *
+ * @example
+ * ```tsx
+ * <Alert variant="success" showIcon>
+ *   <Alert.Title>Success! Your changes have been saved</Alert.Title>
+ *   <Alert.Description>
+ *     This is an alert with icon, title and description.
+ *   </Alert.Description>
+ * </Alert>
+ * ```
+ */
+const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({variant = 'info', showIcon = true, children, className, style, ...rest}, ref) => {
+    const alertStyle = useAlertStyles(variant);
+    const iconStyle = useAlertIconStyles();
+    const contentStyle = useAlertContentStyles();
+    const IconComponent = getDefaultIcon(variant);
+
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        style={{...alertStyle, ...style}}
+        className={clsx(withVendorCSSClassPrefix('alert'), withVendorCSSClassPrefix(`alert-${variant}`), className)}
+        {...rest}
+      >
+        {showIcon && (
+          <div style={iconStyle} className={withVendorCSSClassPrefix('alert-icon')}>
+            <IconComponent />
+          </div>
+        )}
+        <div style={contentStyle} className={withVendorCSSClassPrefix('alert-content')}>
+          {children}
+        </div>
+      </div>
+    );
+  },
+);
+
+/**
+ * Alert title component.
+ */
+const AlertTitle = forwardRef<HTMLHeadingElement, AlertTitleProps>(({children, className, style, ...rest}, ref) => {
+  const titleStyle = useAlertTitleStyles();
+
+  return (
+    <h3
+      ref={ref}
+      style={{...titleStyle, ...style}}
+      className={clsx(withVendorCSSClassPrefix('alert-title'), className)}
+      {...rest}
+    >
+      {children}
+    </h3>
+  );
+});
+
+/**
+ * Alert description component.
+ */
+const AlertDescription = forwardRef<HTMLParagraphElement, AlertDescriptionProps>(
+  ({children, className, style, ...rest}, ref) => {
+    const descriptionStyle = useAlertDescriptionStyles();
+
+    return (
+      <p
+        ref={ref}
+        style={{...descriptionStyle, ...style}}
+        className={clsx(withVendorCSSClassPrefix('alert-description'), className)}
+        {...rest}
+      >
+        {children}
+      </p>
+    );
+  },
+);
+
+Alert.displayName = 'Alert';
+AlertTitle.displayName = 'Alert.Title';
+AlertDescription.displayName = 'Alert.Description';
+
+// Attach subcomponents to Alert for dot notation usage
+(Alert as any).Title = AlertTitle;
+(Alert as any).Description = AlertDescription;
+
+// TypeScript interface augmentation for dot notation
+export interface AlertComponent extends ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>> {
+  Title: typeof AlertTitle;
+  Description: typeof AlertDescription;
+}
+
+export default Alert as AlertComponent;
+export {Alert, AlertTitle, AlertDescription};
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 61849b1f2..58c0b0b46 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -79,6 +79,9 @@ export * from './components/primitives/Button/Button';
 export {default as Card} from './components/primitives/Card/Card';
 export * from './components/primitives/Card/Card';
 
+export {default as Alert} from './components/primitives/Alert/Alert';
+export * from './components/primitives/Alert/Alert';
+
 export {default as Eye} from './components/primitives/Icons/Eye';
 export {default as EyeOff} from './components/primitives/Icons/EyeOff';
 export {default as CircleCheck} from './components/primitives/Icons/CircleCheck';

From 1e329ff0a13f77727b4987c625a0a8bf65066866 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Wed, 11 Jun 2025 14:17:12 +0530
Subject: [PATCH 056/131] feat(react): update theme colors to use
 background.surface and integrate Alert component for error handling in SignIn

---
 packages/javascript/src/theme/createTheme.ts  |  5 +--
 packages/javascript/src/theme/types.ts        |  1 -
 .../presentation/SignIn/BaseSignIn.tsx        | 40 ++++++++++++++-----
 .../UserProfile/BaseUserProfile.tsx           |  2 +-
 .../components/primitives/Avatar/Avatar.tsx   |  2 +-
 .../components/primitives/Popover/Popover.tsx |  2 +-
 6 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/packages/javascript/src/theme/createTheme.ts b/packages/javascript/src/theme/createTheme.ts
index cfce1a218..7cac18a24 100644
--- a/packages/javascript/src/theme/createTheme.ts
+++ b/packages/javascript/src/theme/createTheme.ts
@@ -30,7 +30,7 @@ const lightTheme: ThemeConfig = {
       contrastText: '#ffffff',
     },
     background: {
-      surface: '#f5f5f5',
+      surface: '#ffffff',
       disabled: '#f0f0f0',
       body: {
         main: '#1a1a1a',
@@ -40,7 +40,6 @@ const lightTheme: ThemeConfig = {
       main: '#d32f2f',
       contrastText: '#ffffff',
     },
-    surface: '#f5f5f5',
     text: {
       primary: '#1a1a1a',
       secondary: '#666666',
@@ -78,7 +77,6 @@ const darkTheme: ThemeConfig = {
       main: '#d32f2f',
       contrastText: '#ffffff',
     },
-    surface: '#2d2d2d',
     text: {
       primary: '#ffffff',
       secondary: '#b3b3b3',
@@ -108,7 +106,6 @@ const toCssVariables = (theme: RecursivePartial<ThemeConfig>): Record<string, st
   cssVars['--asgardeo-color-background-body-main'] = theme.colors.background.body.main;
   cssVars['--asgardeo-color-error-main'] = theme.colors.error.main;
   cssVars['--asgardeo-color-error-contrastText'] = theme.colors.error.contrastText;
-  cssVars['--asgardeo-color-surface'] = theme.colors.surface;
   cssVars['--asgardeo-color-text-primary'] = theme.colors.text.primary;
   cssVars['--asgardeo-color-text-secondary'] = theme.colors.text.secondary;
   cssVars['--asgardeo-color-border'] = theme.colors.border;
diff --git a/packages/javascript/src/theme/types.ts b/packages/javascript/src/theme/types.ts
index 9010026fe..78daff61c 100644
--- a/packages/javascript/src/theme/types.ts
+++ b/packages/javascript/src/theme/types.ts
@@ -32,7 +32,6 @@ export interface ThemeColors {
       main: string;
     };
   };
-  surface: string;
   text: {
     primary: string;
     secondary: string;
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index 51819eaa6..c9225cbe3 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -24,6 +24,7 @@ import {FC, FormEvent, ReactElement} from 'react';
 import {createField} from '../../factories/FieldFactory';
 import Button from '../../primitives/Button/Button';
 import Card from '../../primitives/Card/Card';
+import Alert from '../../primitives/Alert/Alert';
 
 /**
  * Interface for form field state.
@@ -206,7 +207,12 @@ const BaseSignIn: FC<BaseSignInProps> = ({
     return (
       <Card className={className}>
         <Card.Content>
-          {error && <div className={errorClassName}>Error: {error}</div>}
+          {error && (
+            <Alert variant="error">
+              <Alert.Title>Authentication Error</Alert.Title>
+              <Alert.Description>{error}</Alert.Description>
+            </Alert>
+          )}
         </Card.Content>
       </Card>
     );
@@ -220,18 +226,34 @@ const BaseSignIn: FC<BaseSignInProps> = ({
         <Card.Header>
           <Card.Title level={2}>{currentAuthenticator.authenticator}</Card.Title>
           {messages.length > 0 && (
-            <Card.Description>
-              {messages.map((message, index) => (
-                <div key={index} className={`message-${message.type.toLowerCase()}`}>
-                  {message.message}
-                </div>
-              ))}
-            </Card.Description>
+            <div style={{marginTop: '1rem'}}>
+              {messages.map((message, index) => {
+                const variant =
+                  message.type.toLowerCase() === 'error'
+                    ? 'error'
+                    : message.type.toLowerCase() === 'warning'
+                    ? 'warning'
+                    : message.type.toLowerCase() === 'success'
+                    ? 'success'
+                    : 'info';
+
+                return (
+                  <Alert key={index} variant={variant} style={{marginBottom: '0.5rem'}}>
+                    <Alert.Description>{message.message}</Alert.Description>
+                  </Alert>
+                );
+              })}
+            </div>
           )}
         </Card.Header>
 
         <Card.Content>
-          {error && <div className={errorClassName}>{error}</div>}
+          {error && (
+            <Alert variant="error" style={{marginBottom: '1rem'}}>
+              <Alert.Title>Error</Alert.Title>
+              <Alert.Description>{error}</Alert.Description>
+            </Alert>
+          )}
 
           {formFields.map(field => (
             <div key={field.param} style={{marginBottom: '1rem'}}>
diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index eb675b20f..cec0a1001 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -468,7 +468,7 @@ const useStyles = () => {
         margin: '0 auto',
       } as CSSProperties,
       card: {
-        background: theme.colors.surface,
+        background: theme.colors.background.surface,
         borderRadius: theme.borderRadius.large,
       } as CSSProperties,
       header: {
diff --git a/packages/react/src/components/primitives/Avatar/Avatar.tsx b/packages/react/src/components/primitives/Avatar/Avatar.tsx
index 778fe849f..040b80429 100644
--- a/packages/react/src/components/primitives/Avatar/Avatar.tsx
+++ b/packages/react/src/components/primitives/Avatar/Avatar.tsx
@@ -54,7 +54,7 @@ const useStyles = ({size}) => {
         height: `${size}px`,
         borderRadius: '50%',
         overflow: 'hidden',
-        backgroundColor: theme.colors.surface,
+        backgroundColor: theme.colors.background.surface,
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
diff --git a/packages/react/src/components/primitives/Popover/Popover.tsx b/packages/react/src/components/primitives/Popover/Popover.tsx
index ec3850c83..25df9f780 100644
--- a/packages/react/src/components/primitives/Popover/Popover.tsx
+++ b/packages/react/src/components/primitives/Popover/Popover.tsx
@@ -45,7 +45,7 @@ const useStyles = () => {
         zIndex: 1000,
         maxHeight: '90vh',
         overflowY: 'auto',
-        background: theme.colors.surface,
+        background: theme.colors.background.surface,
         borderRadius: theme.borderRadius.large,
         boxShadow: `0 2px 8px ${colorScheme === 'dark' ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.15)'}`,
       } as CSSProperties,

From fa180a9dcc711ad8e85d085833b783aa3d3632f5 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Wed, 11 Jun 2025 14:31:01 +0530
Subject: [PATCH 057/131] feat(react): refactor SignIn component to use
 withVendorCSSClassPrefix for styling and enhance Card component with padding

---
 .../components/presentation/SignIn/SignIn.tsx | 32 ++++++++-----------
 .../src/components/primitives/Card/Card.tsx   | 11 ++++++-
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/packages/react/src/components/presentation/SignIn/SignIn.tsx b/packages/react/src/components/presentation/SignIn/SignIn.tsx
index 656969872..331edde5c 100644
--- a/packages/react/src/components/presentation/SignIn/SignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/SignIn.tsx
@@ -24,6 +24,7 @@ import {
   ApplicationNativeAuthenticationFlowStatus,
   ApplicationNativeAuthenticationAuthenticator,
   AsgardeoAPIError,
+  withVendorCSSClassPrefix,
 } from '@asgardeo/browser';
 import {FC, useState, useEffect, ReactElement} from 'react';
 import {clsx} from 'clsx';
@@ -293,39 +294,34 @@ const SignIn: FC<SignInProps> = ({
 
   const containerClasses = clsx(
     styled && [
-      'asgardeo-signin',
-      `asgardeo-signin--${size}`,
-      `asgardeo-signin--${variant}`,
-      'max-w-md mx-auto p-6 bg-white rounded-lg shadow-md',
+      withVendorCSSClassPrefix('signin'),
+      withVendorCSSClassPrefix(`signin--${size}`),
+      withVendorCSSClassPrefix(`signin--${variant}`),
     ],
     className,
   );
 
   const inputClasses = clsx(
     styled && [
-      'asgardeo-signin__input',
-      'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
-      size === 'small' && 'text-sm py-1',
-      size === 'large' && 'text-lg py-3',
+      withVendorCSSClassPrefix('signin__input'),
+      size === 'small' && withVendorCSSClassPrefix('signin__input--small'),
+      size === 'large' && withVendorCSSClassPrefix('signin__input--large'),
     ],
   );
 
   const buttonClasses = clsx(
     styled && [
-      'asgardeo-signin__button',
-      'w-full py-2 px-4 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200',
-      size === 'small' && 'text-sm py-1',
-      size === 'large' && 'text-lg py-3',
-      variant === 'outlined' && 'bg-transparent text-blue-600 border-2 border-blue-600 hover:bg-blue-50',
-      variant === 'filled' && 'bg-blue-800 hover:bg-blue-900',
+      withVendorCSSClassPrefix('signin__button'),
+      size === 'small' && withVendorCSSClassPrefix('signin__button--small'),
+      size === 'large' && withVendorCSSClassPrefix('signin__button--large'),
+      variant === 'outlined' && withVendorCSSClassPrefix('signin__button--outlined'),
+      variant === 'filled' && withVendorCSSClassPrefix('signin__button--filled'),
     ],
   );
 
-  const errorClasses = clsx(
-    styled && ['asgardeo-signin__error', 'mb-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-md text-sm'],
-  );
+  const errorClasses = clsx(styled && [withVendorCSSClassPrefix('signin__error')]);
 
-  const messageClasses = clsx(styled && ['asgardeo-signin__messages', 'mb-4 space-y-2']);
+  const messageClasses = clsx(styled && [withVendorCSSClassPrefix('signin__messages')]);
 
   return (
     <BaseSignIn
diff --git a/packages/react/src/components/primitives/Card/Card.tsx b/packages/react/src/components/primitives/Card/Card.tsx
index e101a2626..ece544131 100644
--- a/packages/react/src/components/primitives/Card/Card.tsx
+++ b/packages/react/src/components/primitives/Card/Card.tsx
@@ -17,7 +17,15 @@ import {useTheme} from '../../../theme/useTheme'; 2025, WSO2 LLC. (https://www.w
  * under the License.
  */
 
-import {CSSProperties, HTMLAttributes, forwardRef, useMemo, ReactNode, ForwardRefExoticComponent, RefAttributes} from 'react';
+import {
+  CSSProperties,
+  HTMLAttributes,
+  forwardRef,
+  useMemo,
+  ReactNode,
+  ForwardRefExoticComponent,
+  RefAttributes,
+} from 'react';
 import {useTheme} from '../../../theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
@@ -98,6 +106,7 @@ const useCardStyles = (variant: CardVariant, clickable: boolean) => {
       display: 'flex',
       flexDirection: 'column',
       overflow: 'hidden',
+      padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px`,
     };
 
     const variantStyles: Record<CardVariant, CSSProperties> = {

From 92dced7261f53e8e97835989120d29d6842997ac Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Wed, 11 Jun 2025 15:42:12 +0530
Subject: [PATCH 058/131] feat(react): add OtpInput component and integrate
 field type resolution in BaseSignIn; update exports and configurations for
 application-native-authentication

---
 packages/javascript/src/index.ts              |  27 +-
 .../application-native-authentication.ts      |   4 +
 packages/javascript/src/models/config.ts      |  10 +-
 packages/javascript/src/models/field.ts       |  31 ++
 .../javascript/src/utils/resolveFieldName.ts  |  36 ++
 .../javascript/src/utils/resolveFieldType.ts  |  46 +++
 .../src/components/factories/FieldFactory.tsx |  76 +----
 .../presentation/SignIn/BaseSignIn.tsx        |  11 +-
 .../primitives/OtpInput/OtpInput.tsx          | 316 ++++++++++++++++++
 packages/react/src/index.ts                   |   3 +
 10 files changed, 484 insertions(+), 76 deletions(-)
 create mode 100644 packages/javascript/src/models/field.ts
 create mode 100644 packages/javascript/src/utils/resolveFieldName.ts
 create mode 100644 packages/javascript/src/utils/resolveFieldType.ts
 create mode 100644 packages/react/src/components/primitives/OtpInput/OtpInput.tsx

diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 627fa6b48..0b181a6ef 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -33,6 +33,18 @@ export {default as AsgardeoAPIError} from './errors/AsgardeoAPIError';
 export {default as AsgardeoRuntimeError} from './errors/AsgardeoRuntimeError';
 export {AsgardeoAuthException} from './errors/exception';
 
+export {
+  ApplicationNativeAuthenticationInitiateResponse,
+  ApplicationNativeAuthenticationFlowStatus,
+  ApplicationNativeAuthenticationFlowType,
+  ApplicationNativeAuthenticationStepType,
+  ApplicationNativeAuthenticationAuthenticator,
+  ApplicationNativeAuthenticationLink,
+  ApplicationNativeAuthenticationHandleRequestPayload,
+  ApplicationNativeAuthenticationHandleResponse,
+  ApplicationNativeAuthenticationAuthenticatorParamType,
+  ApplicationNativeAuthenticationAuthenticatorPromptType,
+} from './models/application-native-authentication';
 export {AsgardeoClient, SignInOptions, SignOutOptions} from './models/client';
 export {BaseConfig, Config, Preferences, ThemePreferences} from './models/config';
 export {TokenResponse, IdTokenPayload} from './models/token';
@@ -49,18 +61,7 @@ export {User} from './models/user';
 export {SessionData} from './models/session';
 export {Schema, SchemaAttribute, WellKnownSchemaIds} from './models/scim2-schema';
 export {RecursivePartial} from './models/utility-types';
-export {
-  ApplicationNativeAuthenticationInitiateResponse,
-  ApplicationNativeAuthenticationFlowStatus,
-  ApplicationNativeAuthenticationFlowType,
-  ApplicationNativeAuthenticationStepType,
-  ApplicationNativeAuthenticationAuthenticator,
-  ApplicationNativeAuthenticationLink,
-  ApplicationNativeAuthenticationHandleRequestPayload,
-  ApplicationNativeAuthenticationHandleResponse,
-  ApplicationNativeAuthenticationAuthenticatorParamType,
-  ApplicationNativeAuthenticationAuthenticatorPromptType,
-} from './models/application-native-authentication';
+export {FieldType} from './models/field';
 
 export {default as AsgardeoJavaScriptClient} from './AsgardeoJavaScriptClient';
 
@@ -70,5 +71,7 @@ export {ThemeColors, ThemeConfig, Theme, ThemeMode} from './theme/types';
 export {default as extractUserClaimsFromIdToken} from './utils/extractUserClaimsFromIdToken';
 export {default as extractPkceStorageKeyFromState} from './utils/extractPkceStorageKeyFromState';
 export {default as removeTrailingSlash} from './utils/removeTrailingSlash';
+export {default as resolveFieldType} from './utils/resolveFieldType';
+export {default as resolveFieldName} from './utils/resolveFieldName';
 
 export {default as StorageManager} from './StorageManager';
diff --git a/packages/javascript/src/models/application-native-authentication.ts b/packages/javascript/src/models/application-native-authentication.ts
index 5791596a7..9f14963aa 100644
--- a/packages/javascript/src/models/application-native-authentication.ts
+++ b/packages/javascript/src/models/application-native-authentication.ts
@@ -69,6 +69,10 @@ export enum ApplicationNativeAuthenticationAuthenticatorParamType {
   MultiValued = 'MULTI_VALUED',
 }
 
+export enum ApplicationNativeAuthenticationAuthenticatorExtendedParamType {
+  Otp = 'OTPCode',
+}
+
 export enum ApplicationNativeAuthenticationAuthenticatorPromptType {
   /**
    * Prompt for user input, typically for username/password or similar credentials.
diff --git a/packages/javascript/src/models/config.ts b/packages/javascript/src/models/config.ts
index 740065e53..b96d437fd 100644
--- a/packages/javascript/src/models/config.ts
+++ b/packages/javascript/src/models/config.ts
@@ -17,7 +17,7 @@
  */
 
 import {ThemeConfig, ThemeMode} from '../theme/types';
-import { RecursivePartial } from './utility-types';
+import {RecursivePartial} from './utility-types';
 
 export interface BaseConfig<T = unknown> {
   /**
@@ -83,9 +83,17 @@ export interface ThemePreferences {
   overrides?: RecursivePartial<ThemeConfig>;
 }
 
+export interface TextPreferences {
+  [key: string]: string | undefined;
+}
+
 export interface Preferences {
   /**
    * Theme preferences for the Asgardeo UI components
    */
   theme?: ThemePreferences;
+  /**
+   * Text preferences for the Asgardeo UI components
+   */
+  text?: TextPreferences;
 }
diff --git a/packages/javascript/src/models/field.ts b/packages/javascript/src/models/field.ts
new file mode 100644
index 000000000..b046b05d2
--- /dev/null
+++ b/packages/javascript/src/models/field.ts
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export enum FieldType {
+  Text = 'TEXT',
+  Password = 'PASSWORD',
+  Email = 'EMAIL',
+  Number = 'NUMBER',
+  Select = 'SELECT',
+  Checkbox = 'CHECKBOX',
+  Radio = 'RADIO',
+  Otp = 'OTP',
+  Date = 'DATE',
+  Time = 'TIME',
+  Textarea = 'TEXTAREA',
+}
diff --git a/packages/javascript/src/utils/resolveFieldName.ts b/packages/javascript/src/utils/resolveFieldName.ts
new file mode 100644
index 000000000..e8572c919
--- /dev/null
+++ b/packages/javascript/src/utils/resolveFieldName.ts
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import AsgardeoRuntimeError from '../errors/AsgardeoRuntimeError';
+import {ApplicationNativeAuthenticationAuthenticatorExtendedParamType} from '../models/application-native-authentication';
+import {FieldType} from '../models/field';
+
+const resolveFieldName = (field: any): string => {
+  if (field.param) {
+    return field.param;
+  }
+
+  throw new AsgardeoRuntimeError(
+    'Field name is not supported: ',
+    'resolveFieldName-Invalid-001',
+    'javascript',
+    'The provided field name is not supported. Please check the field configuration.',
+  );
+};
+
+export default resolveFieldName;
diff --git a/packages/javascript/src/utils/resolveFieldType.ts b/packages/javascript/src/utils/resolveFieldType.ts
new file mode 100644
index 000000000..29cd4ab03
--- /dev/null
+++ b/packages/javascript/src/utils/resolveFieldType.ts
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import AsgardeoRuntimeError from '../errors/AsgardeoRuntimeError';
+import {
+  ApplicationNativeAuthenticationAuthenticatorExtendedParamType,
+  ApplicationNativeAuthenticationAuthenticatorParamType,
+} from '../models/application-native-authentication';
+import {FieldType} from '../models/field';
+
+const resolveFieldType = (field: any): FieldType => {
+  if (field.type === ApplicationNativeAuthenticationAuthenticatorParamType.String) {
+    // Check if there's a `param` property and if it matches a known type.
+    if (field.param === ApplicationNativeAuthenticationAuthenticatorExtendedParamType.Otp) {
+      return FieldType.Otp;
+    } else if (field?.confidential) {
+      return FieldType.Password;
+    }
+
+    return FieldType.Text;
+  }
+
+  throw new AsgardeoRuntimeError(
+    'Field type is not supported: ' + field.type,
+    'resolveFieldType-Invalid-001',
+    'javascript',
+    'The provided field type is not supported. Please check the field configuration.',
+  );
+};
+
+export default resolveFieldType;
diff --git a/packages/react/src/components/factories/FieldFactory.tsx b/packages/react/src/components/factories/FieldFactory.tsx
index 8a6391292..f5de62c15 100644
--- a/packages/react/src/components/factories/FieldFactory.tsx
+++ b/packages/react/src/components/factories/FieldFactory.tsx
@@ -16,34 +16,28 @@
  * under the License.
  */
 
-import {ApplicationNativeAuthenticationAuthenticatorParamType} from '@asgardeo/browser';
+import {FieldType} from '@asgardeo/browser';
 import {FC, ReactElement, useState} from 'react';
 import TextField from '../primitives/TextField/TextField';
 import Select from '../primitives/Select/Select';
 import {SelectOption} from '../primitives/Select/Select';
 import Eye from '../primitives/Icons/Eye';
 import EyeOff from '../primitives/Icons/EyeOff';
+import OtpInput from '../primitives/OtpInput/OtpInput';
 
 /**
  * Interface for field configuration.
  */
 export interface FieldConfig {
-  /**
-   * The parameter name.
-   */
-  param: string;
+  name: string;
   /**
    * The field type based on ApplicationNativeAuthenticationAuthenticatorParamType.
    */
-  type: ApplicationNativeAuthenticationAuthenticatorParamType;
+  type: FieldType;
   /**
    * Display name for the field.
    */
-  displayName: string;
-  /**
-   * Whether the field contains confidential information (password).
-   */
-  confidential: boolean;
+  label: string;
   /**
    * Whether the field is required.
    */
@@ -95,11 +89,7 @@ export const formatMultiValuedString = (values: string[]): string => {
 /**
  * Utility function to validate field values based on type
  */
-export const validateFieldValue = (
-  value: string,
-  type: ApplicationNativeAuthenticationAuthenticatorParamType,
-  required: boolean = false,
-): string | null => {
+export const validateFieldValue = (value: string, type: FieldType, required: boolean = false): string | null => {
   // Check if required field is empty
   if (required && (!value || value.trim() === '')) {
     return 'This field is required';
@@ -111,20 +101,12 @@ export const validateFieldValue = (
   }
 
   switch (type) {
-    case ApplicationNativeAuthenticationAuthenticatorParamType.Integer:
+    case FieldType.Number:
       const numValue = parseInt(value, 10);
       if (isNaN(numValue)) {
         return 'Please enter a valid number';
       }
       break;
-
-    case ApplicationNativeAuthenticationAuthenticatorParamType.MultiValued:
-      // Validate that multi-valued fields don't have empty values after splitting
-      const values = parseMultiValuedString(value);
-      if (values.some(v => v.trim() === '')) {
-        return 'Please remove empty values';
-      }
-      break;
   }
 
   return null;
@@ -141,7 +123,7 @@ export const validateFieldValue = (
  * const field = createField({
  *   param: 'username',
  *   type: ApplicationNativeAuthenticationAuthenticatorParamType.String,
- *   displayName: 'Username',
+ *   label: 'Username',
  *   confidential: false,
  *   required: true,
  *   value: '',
@@ -150,26 +132,14 @@ export const validateFieldValue = (
  * ```
  */
 export const createField = (config: FieldConfig): ReactElement => {
-  const {
-    param,
-    type,
-    displayName,
-    confidential,
-    required,
-    value,
-    onChange,
-    disabled = false,
-    error,
-    className,
-    options = [],
-  } = config;
+  const {name, type, label, required, value, onChange, disabled = false, error, className, options = []} = config;
 
   // Auto-validate the field value
   const validationError = error || validateFieldValue(value, type, required);
 
   const commonProps = {
-    id: param,
-    label: displayName,
+    name,
+    label,
     required,
     disabled,
     error: validationError,
@@ -177,7 +147,6 @@ export const createField = (config: FieldConfig): ReactElement => {
     value,
   };
 
-  // Password toggle component for confidential fields
   const PasswordToggleField: FC = () => {
     const [showPassword, setShowPassword] = useState(false);
 
@@ -194,14 +163,13 @@ export const createField = (config: FieldConfig): ReactElement => {
   };
 
   switch (type) {
-    case ApplicationNativeAuthenticationAuthenticatorParamType.String:
-      if (confidential) {
-        return <PasswordToggleField />;
-      }
-
+    case FieldType.Password:
+      return <PasswordToggleField />;
+    case FieldType.Text:
       return <TextField {...commonProps} type="text" onChange={e => onChange(e.target.value)} autoComplete="off" />;
-
-    case ApplicationNativeAuthenticationAuthenticatorParamType.Integer:
+    case FieldType.Otp:
+      return <OtpInput {...commonProps} onChange={e => onChange(e.target.value)} />;
+    case FieldType.Number:
       return (
         <TextField
           {...commonProps}
@@ -210,9 +178,7 @@ export const createField = (config: FieldConfig): ReactElement => {
           helperText="Enter a numeric value"
         />
       );
-
-    case ApplicationNativeAuthenticationAuthenticatorParamType.MultiValued:
-      // Try to get default options if none provided
+    case FieldType.Select:
       const fieldOptions = options.length > 0 ? options : [];
 
       if (fieldOptions.length > 0) {
@@ -226,7 +192,6 @@ export const createField = (config: FieldConfig): ReactElement => {
         );
       }
 
-      // Fallback to text field with comma-separated values
       return (
         <TextField
           {...commonProps}
@@ -238,11 +203,6 @@ export const createField = (config: FieldConfig): ReactElement => {
       );
 
     default:
-      // Fallback to text field for unknown types
-      if (confidential) {
-        return <PasswordToggleField />;
-      }
-
       return (
         <TextField
           {...commonProps}
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index c9225cbe3..2965ccba4 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -19,6 +19,8 @@
 import {
   ApplicationNativeAuthenticationAuthenticator,
   ApplicationNativeAuthenticationAuthenticatorParamType,
+  resolveFieldName,
+  resolveFieldType
 } from '@asgardeo/browser';
 import {FC, FormEvent, ReactElement} from 'react';
 import {createField} from '../../factories/FieldFactory';
@@ -258,13 +260,12 @@ const BaseSignIn: FC<BaseSignInProps> = ({
           {formFields.map(field => (
             <div key={field.param} style={{marginBottom: '1rem'}}>
               {createField({
-                param: field.param,
-                type: field.type,
-                displayName: field.displayName,
-                confidential: field.confidential,
+                name: resolveFieldName(field),
+                type: resolveFieldType(field),
+                label: field.displayName,
                 required: field.required,
                 value: field.value,
-                onChange: value => onInputChange(field.param, value),
+                onChange: value => onInputChange(resolveFieldName(field), value),
                 disabled: isLoading,
                 className: inputClassName,
               })}
diff --git a/packages/react/src/components/primitives/OtpInput/OtpInput.tsx b/packages/react/src/components/primitives/OtpInput/OtpInput.tsx
new file mode 100644
index 000000000..ae7ce5bab
--- /dev/null
+++ b/packages/react/src/components/primitives/OtpInput/OtpInput.tsx
@@ -0,0 +1,316 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {CSSProperties, FC, KeyboardEvent, ChangeEvent, useRef, useEffect, useState} from 'react';
+import {useTheme} from '../../../theme/useTheme';
+import clsx from 'clsx';
+
+export interface OtpInputProps {
+  /**
+   * Label text to display above the OTP input
+   */
+  label?: string;
+  /**
+   * Error message to display below the OTP input
+   */
+  error?: string;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Whether the field is required
+   */
+  required?: boolean;
+  /**
+   * Whether the field is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Helper text to display below the OTP input
+   */
+  helperText?: string;
+  /**
+   * Number of OTP input fields
+   */
+  length?: number;
+  /**
+   * Current OTP value
+   */
+  value?: string;
+  /**
+   * Callback function called when OTP value changes
+   */
+  onChange?: (event: {target: {value: string}}) => void;
+  /**
+   * Callback function called when OTP input is complete
+   */
+  onComplete?: (value: string) => void;
+  /**
+   * Type of input (text, number, password)
+   */
+  type?: 'text' | 'number' | 'password';
+  /**
+   * Placeholder character for each input field
+   */
+  placeholder?: string;
+  /**
+   * Custom container style
+   */
+  style?: CSSProperties;
+  /**
+   * Auto focus the first input on mount
+   */
+  autoFocus?: boolean;
+  /**
+   * Pattern for numeric input validation
+   */
+  pattern?: string;
+}
+
+const OtpInput: FC<OtpInputProps> = ({
+  label,
+  error,
+  className,
+  required,
+  disabled,
+  helperText,
+  length = 6,
+  value = '',
+  onChange,
+  onComplete,
+  type = 'text',
+  placeholder = '',
+  style = {},
+  autoFocus = false,
+  pattern,
+}) => {
+  const {theme} = useTheme();
+  const [otp, setOtp] = useState<string[]>(Array(length).fill(''));
+  const inputRefs = useRef<HTMLInputElement[]>([]);
+
+  // Initialize refs array
+  useEffect(() => {
+    inputRefs.current = inputRefs.current.slice(0, length);
+  }, [length]);
+
+  // Update internal state when value prop changes
+  useEffect(() => {
+    if (value) {
+      const newOtp = value.split('').slice(0, length);
+      while (newOtp.length < length) {
+        newOtp.push('');
+      }
+      setOtp(newOtp);
+    } else {
+      setOtp(Array(length).fill(''));
+    }
+  }, [value, length]);
+
+  // Auto focus first input
+  useEffect(() => {
+    if (autoFocus && inputRefs.current[0]) {
+      inputRefs.current[0].focus();
+    }
+  }, [autoFocus]);
+
+  const containerStyle: CSSProperties = {
+    marginBottom: theme.spacing.unit * 2 + 'px',
+    ...style,
+  };
+
+  const labelStyle: CSSProperties = {
+    display: 'block',
+    marginBottom: theme.spacing.unit + 'px',
+    color: error ? theme.colors.error.main : theme.colors.text.secondary,
+    fontSize: '0.875rem',
+    fontWeight: 500,
+  };
+
+  const inputContainerStyle: CSSProperties = {
+    display: 'flex',
+    gap: theme.spacing.unit + 'px',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+  };
+
+  const inputStyle: CSSProperties = {
+    width: theme.spacing.unit * 6 + 'px',
+    height: theme.spacing.unit * 6 + 'px',
+    textAlign: 'center',
+    fontSize: '1.25rem',
+    fontWeight: 500,
+    border: `2px solid ${error ? theme.colors.error.main : theme.colors.border}`,
+    borderRadius: theme.borderRadius.small,
+    color: theme.colors.text.primary,
+    backgroundColor: disabled ? theme.colors.background.disabled : theme.colors.background.surface,
+    outline: 'none',
+    transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+  };
+
+  const focusedInputStyle: CSSProperties = {
+    borderColor: error ? theme.colors.error.main : theme.colors.primary.main,
+    boxShadow: `0 0 0 2px ${error ? theme.colors.error.main + '20' : theme.colors.primary.main + '20'}`,
+  };
+
+  const helperTextStyle: CSSProperties = {
+    fontSize: '0.75rem',
+    color: error ? theme.colors.error.main : theme.colors.text.secondary,
+    marginTop: theme.spacing.unit / 2 + 'px',
+    textAlign: 'center',
+  };
+
+  const handleChange = (index: number, event: ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+
+    // Only allow single character
+    if (newValue.length > 1) return;
+
+    // For numeric type, only allow numbers
+    if (type === 'number' && newValue && !/^\d$/.test(newValue)) return;
+
+    // Apply pattern if provided
+    if (pattern && newValue && !new RegExp(pattern).test(newValue)) return;
+
+    const newOtp = [...otp];
+    newOtp[index] = newValue;
+    setOtp(newOtp);
+
+    // Call onChange callback
+    const otpValue = newOtp.join('');
+    onChange?.({target: {value: otpValue}});
+
+    // Auto-focus next input if value is entered
+    if (newValue && index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+
+    // Call onComplete when all fields are filled
+    if (newOtp.every(digit => digit !== '') && onComplete) {
+      onComplete(otpValue);
+    }
+  };
+
+  const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Backspace') {
+      if (!otp[index] && index > 0) {
+        // If current field is empty, clear previous field and focus it
+        const newOtp = [...otp];
+        newOtp[index - 1] = '';
+        setOtp(newOtp);
+        inputRefs.current[index - 1]?.focus();
+        onChange?.({target: {value: newOtp.join('')}});
+      } else if (otp[index]) {
+        // Clear current field
+        const newOtp = [...otp];
+        newOtp[index] = '';
+        setOtp(newOtp);
+        onChange?.({target: {value: newOtp.join('')}});
+      }
+    } else if (event.key === 'ArrowLeft' && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    } else if (event.key === 'ArrowRight' && index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      if (otp.every(digit => digit !== '') && onComplete) {
+        onComplete(otp.join(''));
+      }
+    }
+  };
+
+  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    const pastedData = event.clipboardData.getData('text').slice(0, length);
+
+    // Validate pasted data
+    let validData = '';
+    for (const char of pastedData) {
+      if (type === 'number' && !/^\d$/.test(char)) continue;
+      if (pattern && !new RegExp(pattern).test(char)) continue;
+      validData += char;
+    }
+
+    const newOtp = Array(length).fill('');
+    for (let i = 0; i < Math.min(validData.length, length); i++) {
+      newOtp[i] = validData[i];
+    }
+
+    setOtp(newOtp);
+    onChange?.({target: {value: newOtp.join('')}});
+
+    // Focus next empty field or last field
+    const nextEmptyIndex = newOtp.findIndex(digit => digit === '');
+    const focusIndex = nextEmptyIndex !== -1 ? nextEmptyIndex : length - 1;
+    inputRefs.current[focusIndex]?.focus();
+
+    // Call onComplete if all fields are filled
+    if (newOtp.every(digit => digit !== '') && onComplete) {
+      onComplete(newOtp.join(''));
+    }
+  };
+
+  return (
+    <div style={containerStyle} className={clsx('asgardeo-otp-input', className)}>
+      {label && (
+        <label style={labelStyle}>
+          {label}
+          {required && <span style={{color: theme.colors.error.main}}> *</span>}
+        </label>
+      )}
+      <div style={inputContainerStyle}>
+        {Array.from({length}, (_, index) => (
+          <input
+            key={index}
+            ref={el => {
+              if (el) inputRefs.current[index] = el;
+            }}
+            type={type === 'password' ? 'password' : 'text'}
+            inputMode={type === 'number' ? 'numeric' : 'text'}
+            value={otp[index] || ''}
+            onChange={event => handleChange(index, event)}
+            onKeyDown={event => handleKeyDown(index, event)}
+            onPaste={handlePaste}
+            onFocus={event => {
+              event.target.style.borderColor = error ? theme.colors.error.main : theme.colors.primary.main;
+              event.target.style.boxShadow = `0 0 0 2px ${
+                error ? theme.colors.error.main + '20' : theme.colors.primary.main + '20'
+              }`;
+            }}
+            onBlur={event => {
+              event.target.style.borderColor = error ? theme.colors.error.main : theme.colors.border;
+              event.target.style.boxShadow = 'none';
+            }}
+            style={inputStyle}
+            maxLength={1}
+            placeholder={placeholder}
+            disabled={disabled}
+            aria-label={`${label || 'OTP'} digit ${index + 1}`}
+            aria-invalid={!!error}
+            aria-required={required}
+            autoComplete="one-time-code"
+          />
+        ))}
+      </div>
+      {(error || helperText) && <div style={helperTextStyle}>{error || helperText}</div>}
+    </div>
+  );
+};
+
+export default OtpInput;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 58c0b0b46..9e2613ebb 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -82,6 +82,9 @@ export * from './components/primitives/Card/Card';
 export {default as Alert} from './components/primitives/Alert/Alert';
 export * from './components/primitives/Alert/Alert';
 
+export {default as OtpInput} from './components/primitives/OtpInput/OtpInput';
+export * from './components/primitives/OtpInput/OtpInput';
+
 export {default as Eye} from './components/primitives/Icons/Eye';
 export {default as EyeOff} from './components/primitives/Icons/EyeOff';
 export {default as CircleCheck} from './components/primitives/Icons/CircleCheck';

From 2f4dde3a00101787b93e383f0806357383244138 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Wed, 11 Jun 2025 15:54:46 +0530
Subject: [PATCH 059/131] feat(react): introduce FormControl and InputLabel
 components; refactor existing form components (TextField, DatePicker,
 Checkbox, Select, OtpInput) to utilize new components for improved structure
 and styling

---
 .../UserProfile/BaseUserProfile.tsx           |  6 +-
 .../primitives/Checkbox/Checkbox.tsx          | 40 ++++-----
 .../primitives/DatePicker/DatePicker.tsx      | 38 +++-----
 .../primitives/FormControl/FormControl.tsx    | 90 +++++++++++++++++++
 .../primitives/InputLabel/InputLabel.tsx      | 77 ++++++++++++++++
 .../primitives/OtpInput/OtpInput.tsx          | 38 +++-----
 .../components/primitives/Select/Select.tsx   | 38 +++-----
 .../primitives/TextField/TextField.tsx        | 38 +++-----
 packages/react/src/index.ts                   | 18 ++++
 9 files changed, 256 insertions(+), 127 deletions(-)
 create mode 100644 packages/react/src/components/primitives/FormControl/FormControl.tsx
 create mode 100644 packages/react/src/components/primitives/InputLabel/InputLabel.tsx

diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index cec0a1001..9541425a6 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -19,9 +19,9 @@
 import {CSSProperties, FC, ReactElement, useMemo, useState, useCallback} from 'react';
 import {Popover} from '../../primitives/Popover/Popover';
 import {Avatar} from '../../primitives/Avatar/Avatar';
-import {TextField} from '../../primitives/TextField/TextField';
-import {DatePicker} from '../../primitives/DatePicker/DatePicker';
-import {Checkbox} from '../../primitives/Checkbox/Checkbox';
+import TextField from '../../primitives/TextField/TextField';
+import DatePicker from '../../primitives/DatePicker/DatePicker';
+import Checkbox from '../../primitives/Checkbox/Checkbox';
 import Button from '../../primitives/Button/Button';
 import {useTheme} from '../../../theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
diff --git a/packages/react/src/components/primitives/Checkbox/Checkbox.tsx b/packages/react/src/components/primitives/Checkbox/Checkbox.tsx
index 150e6b40b..b49a34941 100644
--- a/packages/react/src/components/primitives/Checkbox/Checkbox.tsx
+++ b/packages/react/src/components/primitives/Checkbox/Checkbox.tsx
@@ -19,6 +19,8 @@
 import {CSSProperties, FC, InputHTMLAttributes} from 'react';
 import {useTheme} from '../../../theme/useTheme';
 import clsx from 'clsx';
+import FormControl from '../FormControl/FormControl';
+import InputLabel from '../InputLabel/InputLabel';
 
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {
   /**
@@ -43,11 +45,10 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
   helperText?: string;
 }
 
-export const Checkbox: FC<CheckboxProps> = ({label, error, className, required, helperText, style = {}, ...rest}) => {
+const Checkbox: FC<CheckboxProps> = ({label, error, className, required, helperText, style = {}, ...rest}) => {
   const {theme} = useTheme();
 
   const containerStyle: CSSProperties = {
-    marginBottom: theme.spacing.unit * 2 + 'px',
     display: 'flex',
     alignItems: 'center',
     ...style
@@ -60,31 +61,30 @@ export const Checkbox: FC<CheckboxProps> = ({label, error, className, required,
     accentColor: theme.colors.primary.main,
   };
 
-  const labelStyle: CSSProperties = {
-    color: error ? theme.colors.error.main : theme.colors.text.primary,
-    fontSize: '0.875rem',
-  };
-
-  const helperTextStyle: CSSProperties = {
-    fontSize: '0.75rem',
-    color: error ? theme.colors.error.main : theme.colors.text.secondary,
-    marginTop: theme.spacing.unit / 2 + 'px',
-    marginLeft: theme.spacing.unit * 3.5 + 'px',
-  };
-
   return (
-    <div className={clsx('asgardeo-checkbox', className)}>
+    <FormControl
+      error={error}
+      helperText={helperText}
+      className={clsx('asgardeo-checkbox', className)}
+      helperTextMarginLeft={theme.spacing.unit * 3.5 + 'px'}
+    >
       <div style={containerStyle}>
         <input type="checkbox" style={inputStyle} aria-invalid={!!error} aria-required={required} {...rest} />
         {label && (
-          <label style={labelStyle}>
+          <InputLabel 
+            required={required} 
+            error={!!error}
+            variant="inline"
+            style={{
+              color: error ? theme.colors.error.main : theme.colors.text.primary,
+              fontSize: '0.875rem',
+            }}
+          >
             {label}
-            {required && <span style={{color: theme.colors.error.main}}> *</span>}
-          </label>
+          </InputLabel>
         )}
       </div>
-      {(error || helperText) && <div style={helperTextStyle}>{error || helperText}</div>}
-    </div>
+    </FormControl>
   );
 };
 
diff --git a/packages/react/src/components/primitives/DatePicker/DatePicker.tsx b/packages/react/src/components/primitives/DatePicker/DatePicker.tsx
index e2dfbde87..fd6f9fa44 100644
--- a/packages/react/src/components/primitives/DatePicker/DatePicker.tsx
+++ b/packages/react/src/components/primitives/DatePicker/DatePicker.tsx
@@ -19,6 +19,8 @@
 import {CSSProperties, FC, InputHTMLAttributes} from 'react';
 import {useTheme} from '../../../theme/useTheme';
 import clsx from 'clsx';
+import FormControl from '../FormControl/FormControl';
+import InputLabel from '../InputLabel/InputLabel';
 
 export interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {
   /**
@@ -51,7 +53,7 @@ export interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputEleme
   dateFormat?: string;
 }
 
-export const DatePicker: FC<DatePickerProps> = ({
+const DatePicker: FC<DatePickerProps> = ({
   label,
   error,
   className,
@@ -64,19 +66,6 @@ export const DatePicker: FC<DatePickerProps> = ({
 }) => {
   const {theme} = useTheme();
 
-  const containerStyle: CSSProperties = {
-    marginBottom: theme.spacing.unit * 2 + 'px',
-    ...style
-  };
-
-  const labelStyle: CSSProperties = {
-    display: 'block',
-    marginBottom: theme.spacing.unit + 'px',
-    color: error ? theme.colors.error.main : theme.colors.text.secondary,
-    fontSize: '0.875rem',
-    fontWeight: 500,
-  };
-
   const inputStyle: CSSProperties = {
     width: '100%',
     padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
@@ -89,19 +78,17 @@ export const DatePicker: FC<DatePickerProps> = ({
     transition: 'border-color 0.2s ease',
   };
 
-  const helperTextStyle: CSSProperties = {
-    fontSize: '0.75rem',
-    color: error ? theme.colors.error.main : theme.colors.text.secondary,
-    marginTop: theme.spacing.unit / 2 + 'px',
-  };
-
   return (
-    <div style={containerStyle} className={clsx('asgardeo-date-picker', className)}>
+    <FormControl
+      error={error}
+      helperText={helperText}
+      className={clsx('asgardeo-date-picker', className)}
+      style={style}
+    >
       {label && (
-        <label style={labelStyle}>
+        <InputLabel required={required} error={!!error}>
           {label}
-          {required && <span style={{color: theme.colors.error.main}}> *</span>}
-        </label>
+        </InputLabel>
       )}
       <input
         type="date"
@@ -113,8 +100,7 @@ export const DatePicker: FC<DatePickerProps> = ({
         aria-required={required}
         {...rest}
       />
-      {(error || helperText) && <div style={helperTextStyle}>{error || helperText}</div>}
-    </div>
+    </FormControl>
   );
 };
 
diff --git a/packages/react/src/components/primitives/FormControl/FormControl.tsx b/packages/react/src/components/primitives/FormControl/FormControl.tsx
new file mode 100644
index 000000000..aed741ce5
--- /dev/null
+++ b/packages/react/src/components/primitives/FormControl/FormControl.tsx
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {CSSProperties, FC, ReactNode} from 'react';
+import {useTheme} from '../../../theme/useTheme';
+import clsx from 'clsx';
+
+export interface FormControlProps {
+  /**
+   * The content to be wrapped by the form control
+   */
+  children: ReactNode;
+  /**
+   * Error message to display below the content
+   */
+  error?: string;
+  /**
+   * Helper text to display below the content
+   */
+  helperText?: string;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Custom container style
+   */
+  style?: CSSProperties;
+  /**
+   * Custom alignment for helper text (default: left, center for OTP)
+   */
+  helperTextAlign?: 'left' | 'center';
+  /**
+   * Custom margin left for helper text (for components like Checkbox)
+   */
+  helperTextMarginLeft?: string;
+}
+
+const FormControl: FC<FormControlProps> = ({
+  children,
+  error,
+  helperText,
+  className,
+  style = {},
+  helperTextAlign = 'left',
+  helperTextMarginLeft,
+}) => {
+  const {theme} = useTheme();
+
+  const containerStyle: CSSProperties = {
+    marginBottom: theme.spacing.unit * 2 + 'px',
+    ...style,
+  };
+
+  const helperTextStyle: CSSProperties = {
+    fontSize: '0.75rem',
+    color: error ? theme.colors.error.main : theme.colors.text.secondary,
+    marginTop: theme.spacing.unit / 2 + 'px',
+    textAlign: helperTextAlign,
+    ...(helperTextMarginLeft && { marginLeft: helperTextMarginLeft }),
+  };
+
+  return (
+    <div style={containerStyle} className={className}>
+      {children}
+      {(error || helperText) && (
+        <div style={helperTextStyle}>
+          {error || helperText}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FormControl;
diff --git a/packages/react/src/components/primitives/InputLabel/InputLabel.tsx b/packages/react/src/components/primitives/InputLabel/InputLabel.tsx
new file mode 100644
index 000000000..ab89c3687
--- /dev/null
+++ b/packages/react/src/components/primitives/InputLabel/InputLabel.tsx
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {CSSProperties, FC, LabelHTMLAttributes, ReactNode} from 'react';
+import {useTheme} from '../../../theme/useTheme';
+
+export interface InputLabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'style'> {
+  /**
+   * Label text or content
+   */
+  children: ReactNode;
+  /**
+   * Whether the field is required
+   */
+  required?: boolean;
+  /**
+   * Whether there's an error state
+   */
+  error?: boolean;
+  /**
+   * Custom style overrides
+   */
+  style?: CSSProperties;
+  /**
+   * Display type for label positioning
+   */
+  variant?: 'block' | 'inline';
+  /**
+   * Custom margin bottom (useful for different form layouts)
+   */
+  marginBottom?: string;
+}
+
+const InputLabel: FC<InputLabelProps> = ({
+  children,
+  required,
+  error,
+  style = {},
+  variant = 'block',
+  marginBottom,
+  ...rest
+}) => {
+  const {theme} = useTheme();
+
+  const labelStyle: CSSProperties = {
+    display: variant,
+    marginBottom: marginBottom || (variant === 'block' ? theme.spacing.unit + 'px' : '0'),
+    color: error ? theme.colors.error.main : theme.colors.text.secondary,
+    fontSize: '0.875rem',
+    fontWeight: variant === 'block' ? 500 : 'normal',
+    ...style,
+  };
+
+  return (
+    <label style={labelStyle} {...rest}>
+      {children}
+      {required && <span style={{color: theme.colors.error.main}}> *</span>}
+    </label>
+  );
+};
+
+export default InputLabel;
diff --git a/packages/react/src/components/primitives/OtpInput/OtpInput.tsx b/packages/react/src/components/primitives/OtpInput/OtpInput.tsx
index ae7ce5bab..4a961bfca 100644
--- a/packages/react/src/components/primitives/OtpInput/OtpInput.tsx
+++ b/packages/react/src/components/primitives/OtpInput/OtpInput.tsx
@@ -19,6 +19,8 @@
 import {CSSProperties, FC, KeyboardEvent, ChangeEvent, useRef, useEffect, useState} from 'react';
 import {useTheme} from '../../../theme/useTheme';
 import clsx from 'clsx';
+import FormControl from '../FormControl/FormControl';
+import InputLabel from '../InputLabel/InputLabel';
 
 export interface OtpInputProps {
   /**
@@ -129,19 +131,6 @@ const OtpInput: FC<OtpInputProps> = ({
     }
   }, [autoFocus]);
 
-  const containerStyle: CSSProperties = {
-    marginBottom: theme.spacing.unit * 2 + 'px',
-    ...style,
-  };
-
-  const labelStyle: CSSProperties = {
-    display: 'block',
-    marginBottom: theme.spacing.unit + 'px',
-    color: error ? theme.colors.error.main : theme.colors.text.secondary,
-    fontSize: '0.875rem',
-    fontWeight: 500,
-  };
-
   const inputContainerStyle: CSSProperties = {
     display: 'flex',
     gap: theme.spacing.unit + 'px',
@@ -169,13 +158,6 @@ const OtpInput: FC<OtpInputProps> = ({
     boxShadow: `0 0 0 2px ${error ? theme.colors.error.main + '20' : theme.colors.primary.main + '20'}`,
   };
 
-  const helperTextStyle: CSSProperties = {
-    fontSize: '0.75rem',
-    color: error ? theme.colors.error.main : theme.colors.text.secondary,
-    marginTop: theme.spacing.unit / 2 + 'px',
-    textAlign: 'center',
-  };
-
   const handleChange = (index: number, event: ChangeEvent<HTMLInputElement>) => {
     const newValue = event.target.value;
 
@@ -267,12 +249,17 @@ const OtpInput: FC<OtpInputProps> = ({
   };
 
   return (
-    <div style={containerStyle} className={clsx('asgardeo-otp-input', className)}>
+    <FormControl
+      error={error}
+      helperText={helperText}
+      className={clsx('asgardeo-otp-input', className)}
+      style={style}
+      helperTextAlign="center"
+    >
       {label && (
-        <label style={labelStyle}>
+        <InputLabel required={required} error={!!error}>
           {label}
-          {required && <span style={{color: theme.colors.error.main}}> *</span>}
-        </label>
+        </InputLabel>
       )}
       <div style={inputContainerStyle}>
         {Array.from({length}, (_, index) => (
@@ -308,8 +295,7 @@ const OtpInput: FC<OtpInputProps> = ({
           />
         ))}
       </div>
-      {(error || helperText) && <div style={helperTextStyle}>{error || helperText}</div>}
-    </div>
+    </FormControl>
   );
 };
 
diff --git a/packages/react/src/components/primitives/Select/Select.tsx b/packages/react/src/components/primitives/Select/Select.tsx
index 652b1123d..89b786ea3 100644
--- a/packages/react/src/components/primitives/Select/Select.tsx
+++ b/packages/react/src/components/primitives/Select/Select.tsx
@@ -19,6 +19,8 @@
 import {CSSProperties, FC, SelectHTMLAttributes} from 'react';
 import {useTheme} from '../../../theme/useTheme';
 import clsx from 'clsx';
+import FormControl from '../FormControl/FormControl';
+import InputLabel from '../InputLabel/InputLabel';
 
 export interface SelectOption {
   /**
@@ -62,7 +64,7 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
   options: SelectOption[];
 }
 
-export const Select: FC<SelectProps> = ({
+const Select: FC<SelectProps> = ({
   label,
   error,
   className,
@@ -75,19 +77,6 @@ export const Select: FC<SelectProps> = ({
 }) => {
   const {theme} = useTheme();
 
-  const containerStyle: CSSProperties = {
-    marginBottom: theme.spacing.unit * 2 + 'px',
-    ...style,
-  };
-
-  const labelStyle: CSSProperties = {
-    display: 'block',
-    marginBottom: theme.spacing.unit + 'px',
-    color: error ? theme.colors.error.main : theme.colors.text.secondary,
-    fontSize: '0.875rem',
-    fontWeight: 500,
-  };
-
   const selectStyle: CSSProperties = {
     width: '100%',
     padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
@@ -106,19 +95,17 @@ export const Select: FC<SelectProps> = ({
     backgroundSize: '.65em auto',
   };
 
-  const helperTextStyle: CSSProperties = {
-    fontSize: '0.75rem',
-    color: error ? theme.colors.error.main : theme.colors.text.secondary,
-    marginTop: theme.spacing.unit / 2 + 'px',
-  };
-
   return (
-    <div style={containerStyle} className={clsx('asgardeo-select', className)}>
+    <FormControl
+      error={error}
+      helperText={helperText}
+      className={clsx('asgardeo-select', className)}
+      style={style}
+    >
       {label && (
-        <label style={labelStyle}>
+        <InputLabel required={required} error={!!error}>
           {label}
-          {required && <span style={{color: theme.colors.error.main}}> *</span>}
-        </label>
+        </InputLabel>
       )}
       <select style={selectStyle} disabled={disabled} aria-invalid={!!error} aria-required={required} {...rest}>
         {options.map(option => (
@@ -127,8 +114,7 @@ export const Select: FC<SelectProps> = ({
           </option>
         ))}
       </select>
-      {(error || helperText) && <div style={helperTextStyle}>{error || helperText}</div>}
-    </div>
+    </FormControl>
   );
 };
 
diff --git a/packages/react/src/components/primitives/TextField/TextField.tsx b/packages/react/src/components/primitives/TextField/TextField.tsx
index 20dfbe5b0..7e09d2a3b 100644
--- a/packages/react/src/components/primitives/TextField/TextField.tsx
+++ b/packages/react/src/components/primitives/TextField/TextField.tsx
@@ -19,6 +19,8 @@
 import {CSSProperties, FC, InputHTMLAttributes, ReactNode} from 'react';
 import {useTheme} from '../../../theme/useTheme';
 import clsx from 'clsx';
+import FormControl from '../FormControl/FormControl';
+import InputLabel from '../InputLabel/InputLabel';
 
 export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {
   /**
@@ -63,7 +65,7 @@ export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElemen
   onEndIconClick?: () => void;
 }
 
-export const TextField: FC<TextFieldProps> = ({
+const TextField: FC<TextFieldProps> = ({
   label,
   error,
   required,
@@ -86,19 +88,6 @@ export const TextField: FC<TextFieldProps> = ({
   const leftPadding = hasStartIcon ? theme.spacing.unit * 5 : theme.spacing.unit * 1.5;
   const rightPadding = hasEndIcon ? theme.spacing.unit * 5 : theme.spacing.unit * 1.5;
 
-  const containerStyle: CSSProperties = {
-    marginBottom: theme.spacing.unit * 2 + 'px',
-    ...style,
-  };
-
-  const labelStyle: CSSProperties = {
-    display: 'block',
-    marginBottom: theme.spacing.unit + 'px',
-    color: error ? theme.colors.error.main : theme.colors.text.secondary,
-    fontSize: '0.875rem',
-    fontWeight: 500,
-  };
-
   const inputStyle: CSSProperties = {
     width: '100%',
     padding: `${theme.spacing.unit}px ${rightPadding}px ${theme.spacing.unit}px ${leftPadding}px`,
@@ -142,19 +131,17 @@ export const TextField: FC<TextFieldProps> = ({
     right: theme.spacing.unit,
   };
 
-  const helperTextStyle: CSSProperties = {
-    fontSize: '0.75rem',
-    color: error ? theme.colors.error.main : theme.colors.text.secondary,
-    marginTop: theme.spacing.unit / 2 + 'px',
-  };
-
   return (
-    <div style={containerStyle} className={clsx('asgardeo-text-field', className)}>
+    <FormControl
+      error={error}
+      helperText={helperText}
+      className={clsx('asgardeo-text-field', className)}
+      style={style}
+    >
       {label && (
-        <label style={labelStyle}>
+        <InputLabel required={required} error={!!error}>
           {label}
-          {required && <span style={{color: theme.colors.error.main}}> *</span>}
-        </label>
+        </InputLabel>
       )}
       <div style={inputContainerStyle}>
         {startIcon && (
@@ -188,8 +175,7 @@ export const TextField: FC<TextFieldProps> = ({
           </div>
         )}
       </div>
-      {(error || helperText) && <div style={helperTextStyle}>{error || helperText}</div>}
-    </div>
+    </FormControl>
   );
 };
 
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 9e2613ebb..b27b6187a 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -85,6 +85,24 @@ export * from './components/primitives/Alert/Alert';
 export {default as OtpInput} from './components/primitives/OtpInput/OtpInput';
 export * from './components/primitives/OtpInput/OtpInput';
 
+export {default as TextField} from './components/primitives/TextField/TextField';
+export * from './components/primitives/TextField/TextField';
+
+export {default as Select} from './components/primitives/Select/Select';
+export * from './components/primitives/Select/Select';
+
+export {default as DatePicker} from './components/primitives/DatePicker/DatePicker';
+export * from './components/primitives/DatePicker/DatePicker';
+
+export {default as Checkbox} from './components/primitives/Checkbox/Checkbox';
+export * from './components/primitives/Checkbox/Checkbox';
+
+export {default as FormControl} from './components/primitives/FormControl/FormControl';
+export * from './components/primitives/FormControl/FormControl';
+
+export {default as InputLabel} from './components/primitives/InputLabel/InputLabel';
+export * from './components/primitives/InputLabel/InputLabel';
+
 export {default as Eye} from './components/primitives/Icons/Eye';
 export {default as EyeOff} from './components/primitives/Icons/EyeOff';
 export {default as CircleCheck} from './components/primitives/Icons/CircleCheck';

From b8fcad7577ae6b1726d9e825e08b0bc531d3922c Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Wed, 11 Jun 2025 15:58:36 +0530
Subject: [PATCH 060/131] chore(react): replace OtpInput with OtpField
 component; update FieldFactory and index exports accordingly

---
 packages/react/src/components/factories/FieldFactory.tsx      | 4 ++--
 .../{OtpInput/OtpInput.tsx => OtpField/OtpField.tsx}          | 4 ++--
 packages/react/src/index.ts                                   | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)
 rename packages/react/src/components/primitives/{OtpInput/OtpInput.tsx => OtpField/OtpField.tsx} (99%)

diff --git a/packages/react/src/components/factories/FieldFactory.tsx b/packages/react/src/components/factories/FieldFactory.tsx
index f5de62c15..4b90ae8b1 100644
--- a/packages/react/src/components/factories/FieldFactory.tsx
+++ b/packages/react/src/components/factories/FieldFactory.tsx
@@ -23,7 +23,7 @@ import Select from '../primitives/Select/Select';
 import {SelectOption} from '../primitives/Select/Select';
 import Eye from '../primitives/Icons/Eye';
 import EyeOff from '../primitives/Icons/EyeOff';
-import OtpInput from '../primitives/OtpInput/OtpInput';
+import OtpField from '../primitives/OtpField/OtpField';
 
 /**
  * Interface for field configuration.
@@ -168,7 +168,7 @@ export const createField = (config: FieldConfig): ReactElement => {
     case FieldType.Text:
       return <TextField {...commonProps} type="text" onChange={e => onChange(e.target.value)} autoComplete="off" />;
     case FieldType.Otp:
-      return <OtpInput {...commonProps} onChange={e => onChange(e.target.value)} />;
+      return <OtpField {...commonProps} onChange={e => onChange(e.target.value)} />;
     case FieldType.Number:
       return (
         <TextField
diff --git a/packages/react/src/components/primitives/OtpInput/OtpInput.tsx b/packages/react/src/components/primitives/OtpField/OtpField.tsx
similarity index 99%
rename from packages/react/src/components/primitives/OtpInput/OtpInput.tsx
rename to packages/react/src/components/primitives/OtpField/OtpField.tsx
index 4a961bfca..74e40822a 100644
--- a/packages/react/src/components/primitives/OtpInput/OtpInput.tsx
+++ b/packages/react/src/components/primitives/OtpField/OtpField.tsx
@@ -85,7 +85,7 @@ export interface OtpInputProps {
   pattern?: string;
 }
 
-const OtpInput: FC<OtpInputProps> = ({
+const OtpField: FC<OtpInputProps> = ({
   label,
   error,
   className,
@@ -299,4 +299,4 @@ const OtpInput: FC<OtpInputProps> = ({
   );
 };
 
-export default OtpInput;
+export default OtpField;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index b27b6187a..c8a9bb7bd 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -82,8 +82,8 @@ export * from './components/primitives/Card/Card';
 export {default as Alert} from './components/primitives/Alert/Alert';
 export * from './components/primitives/Alert/Alert';
 
-export {default as OtpInput} from './components/primitives/OtpInput/OtpInput';
-export * from './components/primitives/OtpInput/OtpInput';
+export {default as OtpField} from './components/primitives/OtpField/OtpField';
+export * from './components/primitives/OtpField/OtpField';
 
 export {default as TextField} from './components/primitives/TextField/TextField';
 export * from './components/primitives/TextField/TextField';

From feb7d4f248af9116356425545bf87fa758613dc0 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Wed, 11 Jun 2025 16:40:54 +0530
Subject: [PATCH 061/131] feat(react): add internationalization support with
 I18n models and hooks; implement useTranslation for translation functionality

---
 packages/javascript/src/i18n/en-US.ts         | 38 ++++++++++++++++
 packages/javascript/src/i18n/index.ts         | 19 ++++++++
 packages/javascript/src/index.ts              |  2 +
 packages/javascript/src/models/i18n.ts        | 36 ++++++++++++++++
 .../javascript/src/utils/getI18nBundles.ts    | 32 ++++++++++++++
 packages/react/src/hooks/useTranslation.ts    | 43 +++++++++++++++++++
 packages/react/src/index.ts                   |  3 ++
 7 files changed, 173 insertions(+)
 create mode 100644 packages/javascript/src/i18n/en-US.ts
 create mode 100644 packages/javascript/src/i18n/index.ts
 create mode 100644 packages/javascript/src/models/i18n.ts
 create mode 100644 packages/javascript/src/utils/getI18nBundles.ts
 create mode 100644 packages/react/src/hooks/useTranslation.ts

diff --git a/packages/javascript/src/i18n/en-US.ts b/packages/javascript/src/i18n/en-US.ts
new file mode 100644
index 000000000..1fd1dd231
--- /dev/null
+++ b/packages/javascript/src/i18n/en-US.ts
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {I18nTranslations, I18nMetadata, I18nBundle} from '../models/i18n';
+
+const translations: I18nTranslations = {
+  'signin.title': 'Sign In',
+};
+
+const metadata: I18nMetadata = {
+  localeCode: 'en-US',
+  countryCode: 'US',
+  languageCode: 'en',
+  displayName: 'English (United States)',
+  direction: 'ltr',
+};
+
+const en_US: I18nBundle = {
+  metadata,
+  translations,
+};
+
+export default en_US;
diff --git a/packages/javascript/src/i18n/index.ts b/packages/javascript/src/i18n/index.ts
new file mode 100644
index 000000000..11a3c4f35
--- /dev/null
+++ b/packages/javascript/src/i18n/index.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './en-US';
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 0b181a6ef..1a42f8d12 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -62,6 +62,7 @@ export {SessionData} from './models/session';
 export {Schema, SchemaAttribute, WellKnownSchemaIds} from './models/scim2-schema';
 export {RecursivePartial} from './models/utility-types';
 export {FieldType} from './models/field';
+export {I18nBundle, I18nTranslations, I18nMetadata} from './models/i18n';
 
 export {default as AsgardeoJavaScriptClient} from './AsgardeoJavaScriptClient';
 
@@ -70,6 +71,7 @@ export {ThemeColors, ThemeConfig, Theme, ThemeMode} from './theme/types';
 
 export {default as extractUserClaimsFromIdToken} from './utils/extractUserClaimsFromIdToken';
 export {default as extractPkceStorageKeyFromState} from './utils/extractPkceStorageKeyFromState';
+export {default as getI18nBundles} from './utils/getI18nBundles';
 export {default as removeTrailingSlash} from './utils/removeTrailingSlash';
 export {default as resolveFieldType} from './utils/resolveFieldType';
 export {default as resolveFieldName} from './utils/resolveFieldName';
diff --git a/packages/javascript/src/models/i18n.ts b/packages/javascript/src/models/i18n.ts
new file mode 100644
index 000000000..5c66d97eb
--- /dev/null
+++ b/packages/javascript/src/models/i18n.ts
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export interface I18nTranslations {
+  'signin.title': string;
+}
+
+export type I18nTextDirection = 'ltr' | 'rtl';
+
+export interface I18nMetadata {
+  localeCode: string;
+  countryCode: string;
+  languageCode: string;
+  displayName: string;
+  direction: I18nTextDirection;
+}
+
+export interface I18nBundle {
+  metadata: I18nMetadata;
+  translations: I18nTranslations;
+}
diff --git a/packages/javascript/src/utils/getI18nBundles.ts b/packages/javascript/src/utils/getI18nBundles.ts
new file mode 100644
index 000000000..009c92bff
--- /dev/null
+++ b/packages/javascript/src/utils/getI18nBundles.ts
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {I18nBundle, I18nTranslations} from '../models/i18n';
+import * as i18n from '../i18n';
+
+/**
+ * Get internationalization bundles for the specified locale.
+ *
+ * @param locale - The locale to get the bundle for (defaults to 'en-US')
+ * @returns The i18n bundle for the specified locale
+ */
+const getI18nBundles = () => {
+  return i18n;
+};
+
+export default getI18nBundles;
diff --git a/packages/react/src/hooks/useTranslation.ts b/packages/react/src/hooks/useTranslation.ts
new file mode 100644
index 000000000..d5a5ca178
--- /dev/null
+++ b/packages/react/src/hooks/useTranslation.ts
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {getI18nBundles} from '@asgardeo/browser';
+
+export type UseTranslation = {
+  t: (key: string, params?: Record<string, string | number>) => string;
+};
+
+const useTranslation = (): UseTranslation => {
+  const i18n = getI18nBundles();
+
+  const t = (key: string, params?: Record<string, string | number>): string => {
+    const translation = i18n[key] || key;
+    if (params) {
+      return Object.entries(params).reduce((acc, [paramKey, paramValue]) => {
+        return acc.replace(`{${paramKey}}`, String(paramValue));
+      }, translation);
+    }
+    return translation;
+  };
+
+  return {
+    t,
+  };
+};
+
+export default useTranslation;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index c8a9bb7bd..59c8c4765 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -28,6 +28,9 @@ export * from './hooks/useAsgardeo';
 export {default as useBrowserUrl} from './hooks/useBrowserUrl';
 export * from './hooks/useBrowserUrl';
 
+export {default as useTranslation} from './hooks/useTranslation';
+export * from './hooks/useTranslation';
+
 export {default as BaseSignInButton} from './components/actions/SignInButton/BaseSignInButton';
 export * from './components/actions/SignInButton/BaseSignInButton';
 

From e328cf660d15fc4ee9acc3a9e08ba8b333c066d5 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Wed, 11 Jun 2025 17:21:06 +0530
Subject: [PATCH 062/131] feat(react): implement internationalization support;
 add I18nProvider, useTranslation hook, and update components for translation
 functionality

---
 packages/javascript/src/i18n/index.ts         |   2 +-
 packages/javascript/src/index.ts              |   2 +-
 packages/javascript/src/models/config.ts      |  24 ++-
 .../presentation/SignIn/BaseSignIn.tsx        |   7 +-
 packages/react/src/contexts/I18nContext.ts    |  53 +++++
 packages/react/src/hooks/useI18n.ts           |  39 ++++
 packages/react/src/hooks/useTranslation.ts    |  55 ++++--
 .../react/src/providers/AsgardeoProvider.tsx  |   9 +-
 packages/react/src/providers/I18nProvider.tsx | 184 ++++++++++++++++++
 9 files changed, 349 insertions(+), 26 deletions(-)
 create mode 100644 packages/react/src/contexts/I18nContext.ts
 create mode 100644 packages/react/src/hooks/useI18n.ts
 create mode 100644 packages/react/src/providers/I18nProvider.tsx

diff --git a/packages/javascript/src/i18n/index.ts b/packages/javascript/src/i18n/index.ts
index 11a3c4f35..213b4262b 100644
--- a/packages/javascript/src/i18n/index.ts
+++ b/packages/javascript/src/i18n/index.ts
@@ -16,4 +16,4 @@
  * under the License.
  */
 
-export * from './en-US';
+export {default as en_US} from './en-US';
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 1a42f8d12..dc3fc468b 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -46,7 +46,7 @@ export {
   ApplicationNativeAuthenticationAuthenticatorPromptType,
 } from './models/application-native-authentication';
 export {AsgardeoClient, SignInOptions, SignOutOptions} from './models/client';
-export {BaseConfig, Config, Preferences, ThemePreferences} from './models/config';
+export {BaseConfig, Config, Preferences, ThemePreferences, I18nPreferences} from './models/config';
 export {TokenResponse, IdTokenPayload} from './models/token';
 export {Crypto, JWKInterface} from './models/crypto';
 export {OAuthResponseMode} from './models/oauth-response';
diff --git a/packages/javascript/src/models/config.ts b/packages/javascript/src/models/config.ts
index b96d437fd..8d3119b02 100644
--- a/packages/javascript/src/models/config.ts
+++ b/packages/javascript/src/models/config.ts
@@ -17,6 +17,7 @@
  */
 
 import {ThemeConfig, ThemeMode} from '../theme/types';
+import { I18nBundle } from './i18n';
 import {RecursivePartial} from './utility-types';
 
 export interface BaseConfig<T = unknown> {
@@ -83,8 +84,23 @@ export interface ThemePreferences {
   overrides?: RecursivePartial<ThemeConfig>;
 }
 
-export interface TextPreferences {
-  [key: string]: string | undefined;
+export interface I18nPreferences {
+  /**
+   * The language to use for translations.
+   * Defaults to the browser's default language.
+   */
+  language?: string;
+  /**
+   * The fallback language to use if translations are not available in the specified language.
+   * Defaults to 'en-US'.
+   */
+  fallbackLanguage?: string;
+  /**
+   * Custom translations to override default ones.
+   */
+  bundles?: {
+    [key: string]: I18nBundle;
+  };
 }
 
 export interface Preferences {
@@ -93,7 +109,7 @@ export interface Preferences {
    */
   theme?: ThemePreferences;
   /**
-   * Text preferences for the Asgardeo UI components
+   * Internationalization preferences for the Asgardeo UI components
    */
-  text?: TextPreferences;
+  i18n?: I18nPreferences;
 }
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index 2965ccba4..1b2317610 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -20,13 +20,14 @@ import {
   ApplicationNativeAuthenticationAuthenticator,
   ApplicationNativeAuthenticationAuthenticatorParamType,
   resolveFieldName,
-  resolveFieldType
+  resolveFieldType,
 } from '@asgardeo/browser';
 import {FC, FormEvent, ReactElement} from 'react';
 import {createField} from '../../factories/FieldFactory';
 import Button from '../../primitives/Button/Button';
 import Card from '../../primitives/Card/Card';
 import Alert from '../../primitives/Alert/Alert';
+import useTranslation from '../../../hooks/useTranslation';
 
 /**
  * Interface for form field state.
@@ -169,6 +170,8 @@ const BaseSignIn: FC<BaseSignInProps> = ({
   showLoading = true,
   loadingText = 'Loading...',
 }) => {
+  const {t} = useTranslation();
+
   /**
    * Get form fields from the current authenticator.
    */
@@ -226,7 +229,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
     <Card className={className}>
       <form onSubmit={handleSubmit}>
         <Card.Header>
-          <Card.Title level={2}>{currentAuthenticator.authenticator}</Card.Title>
+          <Card.Title level={2}>{t("signin.title")}</Card.Title>
           {messages.length > 0 && (
             <div style={{marginTop: '1rem'}}>
               {messages.map((message, index) => {
diff --git a/packages/react/src/contexts/I18nContext.ts b/packages/react/src/contexts/I18nContext.ts
new file mode 100644
index 000000000..af8229a4e
--- /dev/null
+++ b/packages/react/src/contexts/I18nContext.ts
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {createContext} from 'react';
+import {I18nBundle} from '@asgardeo/browser';
+
+export interface I18nContextValue {
+  /**
+   * The current language code (e.g., 'en-US', 'fr-FR')
+   */
+  currentLanguage: string;
+  
+  /**
+   * The fallback language code
+   */
+  fallbackLanguage: string;
+  
+  /**
+   * All available i18n bundles (default + user provided)
+   */
+  bundles: Record<string, I18nBundle>;
+  
+  /**
+   * Function to change the current language
+   */
+  setLanguage: (language: string) => void;
+  
+  /**
+   * Function to get a translation by key with optional parameters
+   */
+  t: (key: string, params?: Record<string, string | number>) => string;
+}
+
+const I18nContext = createContext<I18nContextValue | null>(null);
+
+I18nContext.displayName = 'I18nContext';
+
+export default I18nContext;
diff --git a/packages/react/src/hooks/useI18n.ts b/packages/react/src/hooks/useI18n.ts
new file mode 100644
index 000000000..2b18cb44c
--- /dev/null
+++ b/packages/react/src/hooks/useI18n.ts
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {useContext} from 'react';
+import I18nContext, {I18nContextValue} from '../contexts/I18nContext';
+
+/**
+ * Hook for accessing the I18n context directly.
+ * Provides access to the full i18n context including bundles and all utilities.
+ * 
+ * @returns The complete I18n context value
+ * @throws Error if used outside of I18nProvider context
+ */
+const useI18n = (): I18nContextValue => {
+  const context = useContext(I18nContext);
+  
+  if (!context) {
+    throw new Error('useI18n must be used within an I18nProvider. Make sure your component is wrapped with AsgardeoProvider which includes I18nProvider.');
+  }
+  
+  return context;
+};
+
+export default useI18n;
diff --git a/packages/react/src/hooks/useTranslation.ts b/packages/react/src/hooks/useTranslation.ts
index d5a5ca178..0af794c24 100644
--- a/packages/react/src/hooks/useTranslation.ts
+++ b/packages/react/src/hooks/useTranslation.ts
@@ -16,27 +16,52 @@
  * under the License.
  */
 
-import {getI18nBundles} from '@asgardeo/browser';
+import {useContext} from 'react';
+import I18nContext, {I18nContextValue} from '../contexts/I18nContext';
 
-export type UseTranslation = {
+export interface UseTranslation {
+  /**
+   * Translation function that returns a translated string for the given key
+   */
   t: (key: string, params?: Record<string, string | number>) => string;
-};
+  
+  /**
+   * The current language code
+   */
+  currentLanguage: string;
+  
+  /**
+   * Function to change the current language
+   */
+  setLanguage: (language: string) => void;
+  
+  /**
+   * All available language codes
+   */
+  availableLanguages: string[];
+}
 
+/**
+ * Hook for accessing translation functions and language management.
+ * Must be used within an I18nProvider context.
+ * 
+ * @returns An object containing translation function and language management utilities
+ * @throws Error if used outside of I18nProvider context
+ */
 const useTranslation = (): UseTranslation => {
-  const i18n = getI18nBundles();
-
-  const t = (key: string, params?: Record<string, string | number>): string => {
-    const translation = i18n[key] || key;
-    if (params) {
-      return Object.entries(params).reduce((acc, [paramKey, paramValue]) => {
-        return acc.replace(`{${paramKey}}`, String(paramValue));
-      }, translation);
-    }
-    return translation;
-  };
-
+  const context = useContext(I18nContext);
+  
+  if (!context) {
+    throw new Error('useTranslation must be used within an I18nProvider. Make sure your component is wrapped with AsgardeoProvider which includes I18nProvider.');
+  }
+  
+  const {t, currentLanguage, setLanguage, bundles} = context;
+  
   return {
     t,
+    currentLanguage,
+    setLanguage,
+    availableLanguages: Object.keys(bundles),
   };
 };
 
diff --git a/packages/react/src/providers/AsgardeoProvider.tsx b/packages/react/src/providers/AsgardeoProvider.tsx
index ea52bcbe6..59f60a49d 100644
--- a/packages/react/src/providers/AsgardeoProvider.tsx
+++ b/packages/react/src/providers/AsgardeoProvider.tsx
@@ -23,6 +23,7 @@ import AsgardeoContext from '../contexts/AsgardeoContext';
 import useBrowserUrl from '../hooks/useBrowserUrl';
 import {AsgardeoReactConfig} from '../models/config';
 import {ThemeProvider} from '../theme/ThemeProvider';
+import I18nProvider from './I18nProvider';
 
 /**
  * Props interface of {@link AsgardeoProvider}
@@ -173,9 +174,11 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
         baseUrl,
       }}
     >
-      <ThemeProvider theme={preferences?.theme?.overrides} defaultColorScheme={isDarkMode ? 'dark' : 'light'}>
-        {children}
-      </ThemeProvider>
+      <I18nProvider preferences={preferences?.i18n}>
+        <ThemeProvider theme={preferences?.theme?.overrides} defaultColorScheme={isDarkMode ? 'dark' : 'light'}>
+          {children}
+        </ThemeProvider>
+      </I18nProvider>
     </AsgardeoContext.Provider>
   );
 };
diff --git a/packages/react/src/providers/I18nProvider.tsx b/packages/react/src/providers/I18nProvider.tsx
new file mode 100644
index 000000000..e8e1d8352
--- /dev/null
+++ b/packages/react/src/providers/I18nProvider.tsx
@@ -0,0 +1,184 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {FC, PropsWithChildren, ReactElement, useCallback, useEffect, useMemo, useState} from 'react';
+import {I18nBundle, I18nPreferences} from '@asgardeo/browser';
+import {getI18nBundles} from '@asgardeo/browser';
+import I18nContext, {I18nContextValue} from '../contexts/I18nContext';
+
+const I18N_LANGUAGE_STORAGE_KEY = 'asgardeo-i18n-language';
+
+export interface I18nProviderProps {
+  /**
+   * The i18n preferences from the AsgardeoProvider
+   */
+  preferences?: I18nPreferences;
+}
+
+/**
+ * Detects the browser's default language or returns a fallback
+ */
+const detectBrowserLanguage = (): string => {
+  if (typeof window !== 'undefined' && window.navigator) {
+    return window.navigator.language || 'en-US';
+  }
+  return 'en-US';
+};
+
+/**
+ * Gets the stored language from localStorage or returns null
+ */
+const getStoredLanguage = (): string | null => {
+  if (typeof window !== 'undefined' && window.localStorage) {
+    try {
+      return window.localStorage.getItem(I18N_LANGUAGE_STORAGE_KEY);
+    } catch (error) {
+      // localStorage might not be available or accessible
+      return null;
+    }
+  }
+  return null;
+};
+
+/**
+ * Stores the language in localStorage
+ */
+const storeLanguage = (language: string): void => {
+  if (typeof window !== 'undefined' && window.localStorage) {
+    try {
+      window.localStorage.setItem(I18N_LANGUAGE_STORAGE_KEY, language);
+    } catch (error) {
+      // localStorage might not be available or accessible
+      console.warn('Failed to store language preference:', error);
+    }
+  }
+};
+
+/**
+ * I18nProvider component that manages internationalization state and provides
+ * translation functions to child components.
+ */
+const I18nProvider: FC<PropsWithChildren<I18nProviderProps>> = ({
+  children,
+  preferences,
+}: PropsWithChildren<I18nProviderProps>): ReactElement => {
+  // Get default bundles from the browser package
+  const defaultBundles = getI18nBundles();
+  
+  // Determine the initial language based on preference order:
+  // 1. User preference from config
+  // 2. Stored language in localStorage
+  // 3. Browser's default language
+  // 4. Fallback language
+  const determineInitialLanguage = (): string => {
+    const configLanguage = preferences?.language;
+    const storedLanguage = getStoredLanguage();
+    const browserLanguage = detectBrowserLanguage();
+    const fallbackLanguage = preferences?.fallbackLanguage || 'en-US';
+    
+    return configLanguage || storedLanguage || browserLanguage || fallbackLanguage;
+  };
+  
+  const [currentLanguage, setCurrentLanguage] = useState<string>(determineInitialLanguage);
+  
+  // Merge default bundles with user-provided bundles
+  const mergedBundles = useMemo(() => {
+    const merged: Record<string, I18nBundle> = {};
+    
+    // Add default bundles
+    Object.entries(defaultBundles).forEach(([key, bundle]) => {
+      // Convert key format (e.g., 'en_US' to 'en-US')
+      const languageKey = key.replace('_', '-');
+      merged[languageKey] = bundle;
+    });
+    
+    // Add user-provided bundles (these take precedence)
+    if (preferences?.bundles) {
+      Object.entries(preferences.bundles).forEach(([key, bundle]) => {
+        merged[key] = bundle;
+      });
+    }
+    
+    return merged;
+  }, [defaultBundles, preferences?.bundles]);
+  
+  const fallbackLanguage = preferences?.fallbackLanguage || 'en-US';
+  
+  // Update stored language when current language changes
+  useEffect(() => {
+    storeLanguage(currentLanguage);
+  }, [currentLanguage]);
+  
+  // Translation function
+  const t = useCallback((key: string, params?: Record<string, string | number>): string => {
+    let translation: string | undefined;
+    
+    // Try to get translation from current language bundle
+    const currentBundle = mergedBundles[currentLanguage];
+    if (currentBundle?.translations[key]) {
+      translation = currentBundle.translations[key];
+    }
+    
+    // Fallback to fallback language if translation not found
+    if (!translation && currentLanguage !== fallbackLanguage) {
+      const fallbackBundle = mergedBundles[fallbackLanguage];
+      if (fallbackBundle?.translations[key]) {
+        translation = fallbackBundle.translations[key];
+      }
+    }
+    
+    // If still no translation found, return the key itself
+    if (!translation) {
+      translation = key;
+    }
+    
+    // Replace parameters if provided
+    if (params && Object.keys(params).length > 0) {
+      return Object.entries(params).reduce((acc, [paramKey, paramValue]) => {
+        return acc.replace(new RegExp(`\\{${paramKey}\\}`, 'g'), String(paramValue));
+      }, translation);
+    }
+    
+    return translation;
+  }, [mergedBundles, currentLanguage, fallbackLanguage]);
+  
+  // Language setter function
+  const setLanguage = useCallback((language: string) => {
+    if (mergedBundles[language]) {
+      setCurrentLanguage(language);
+    } else {
+      console.warn(`Language '${language}' is not available. Available languages: ${Object.keys(mergedBundles).join(', ')}`);
+    }
+  }, [mergedBundles]);
+  
+  const contextValue: I18nContextValue = useMemo(() => ({
+    currentLanguage,
+    fallbackLanguage,
+    bundles: mergedBundles,
+    setLanguage,
+    t,
+  }), [currentLanguage, fallbackLanguage, mergedBundles, setLanguage, t]);
+  
+  return (
+    <I18nContext.Provider value={contextValue}>
+      {children}
+    </I18nContext.Provider>
+  );
+};
+
+export default I18nProvider;

From dc09fdb909aafec2eb122d3e1b40f0e3c32d1708 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Wed, 11 Jun 2025 17:26:42 +0530
Subject: [PATCH 063/131] chore(react): Move hooks and contexts to dedicated
 directories

- Updated import paths for `useAsgardeo` and `useTheme` hooks to point to their new locations under `contexts/Asgardeo` and `contexts/Theme`.
- Created `AsgardeoContext` and `AsgardeoProvider` to manage authentication state and user information.
- Introduced `I18nContext` and `I18nProvider` for internationalization support.
- Added `ThemeContext` and `ThemeProvider` for theme management.
- Refactored components to utilize the new context and hooks structure.
- Cleaned up code formatting and improved consistency across components.
---
 .../actions/SignInButton/SignInButton.tsx     |   2 +-
 .../actions/SignOutButton/SignOutButton.tsx   |   2 +-
 .../actions/SignUpButton/SignUpButton.tsx     |   2 +-
 .../react/src/components/control/SignedIn.tsx |   2 +-
 .../src/components/control/SignedOut.tsx      |   2 +-
 .../components/presentation/SignIn/SignIn.tsx |   2 +-
 .../src/components/presentation/User.tsx      |   2 +-
 .../UserDropdown/BaseUserDropdown.tsx         |   2 +-
 .../UserDropdown/UserDropdown.tsx             |   2 +-
 .../UserProfile/BaseUserProfile.tsx           |   9 +-
 .../presentation/UserProfile/UserProfile.tsx  |   4 +-
 .../src/components/primitives/Alert/Alert.tsx |   2 +-
 .../components/primitives/Avatar/Avatar.tsx   |   2 +-
 .../components/primitives/Button/Button.tsx   |   2 +-
 .../src/components/primitives/Card/Card.tsx   |   2 +-
 .../primitives/Checkbox/Checkbox.tsx          |   8 +-
 .../primitives/DatePicker/DatePicker.tsx      |   2 +-
 .../primitives/FormControl/FormControl.tsx    |  10 +-
 .../primitives/InputLabel/InputLabel.tsx      |   2 +-
 .../primitives/OtpField/OtpField.tsx          |   2 +-
 .../components/primitives/Popover/Popover.tsx |   2 +-
 .../components/primitives/Select/Select.tsx   |   9 +-
 .../primitives/TextField/TextField.tsx        |   9 +-
 .../{ => Asgardeo}/AsgardeoContext.ts         |   0
 .../Asgardeo}/AsgardeoProvider.tsx            |  12 +-
 .../Asgardeo}/useAsgardeo.ts                  |   2 +-
 .../src/contexts/{ => I18n}/I18nContext.ts    |   0
 .../I18n}/I18nProvider.tsx                    | 131 +++++++++---------
 .../src/{hooks => contexts/I18n}/useI18n.ts   |  12 +-
 .../{theme => contexts/Theme}/ThemeContext.ts |   0
 .../Theme}/ThemeProvider.tsx                  |   0
 .../src/{theme => contexts/Theme}/types.ts    |   0
 .../src/{theme => contexts/Theme}/useTheme.ts |   0
 packages/react/src/hooks/useTranslation.ts    |  20 +--
 packages/react/src/index.ts                   |  12 +-
 35 files changed, 132 insertions(+), 140 deletions(-)
 rename packages/react/src/contexts/{ => Asgardeo}/AsgardeoContext.ts (100%)
 rename packages/react/src/{providers => contexts/Asgardeo}/AsgardeoProvider.tsx (94%)
 rename packages/react/src/{hooks => contexts/Asgardeo}/useAsgardeo.ts (92%)
 rename packages/react/src/contexts/{ => I18n}/I18nContext.ts (100%)
 rename packages/react/src/{providers => contexts/I18n}/I18nProvider.tsx (67%)
 rename packages/react/src/{hooks => contexts/I18n}/useI18n.ts (82%)
 rename packages/react/src/{theme => contexts/Theme}/ThemeContext.ts (100%)
 rename packages/react/src/{theme => contexts/Theme}/ThemeProvider.tsx (100%)
 rename packages/react/src/{theme => contexts/Theme}/types.ts (100%)
 rename packages/react/src/{theme => contexts/Theme}/useTheme.ts (100%)

diff --git a/packages/react/src/components/actions/SignInButton/SignInButton.tsx b/packages/react/src/components/actions/SignInButton/SignInButton.tsx
index 0053790e3..7834fc13f 100644
--- a/packages/react/src/components/actions/SignInButton/SignInButton.tsx
+++ b/packages/react/src/components/actions/SignInButton/SignInButton.tsx
@@ -17,7 +17,7 @@
  */
 
 import {forwardRef, ForwardRefExoticComponent, MouseEvent, ReactElement, Ref, RefAttributes, useState} from 'react';
-import useAsgardeo from '../../../hooks/useAsgardeo';
+import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
 import BaseSignInButton, {BaseSignInButtonProps} from './BaseSignInButton';
 
 /**
diff --git a/packages/react/src/components/actions/SignOutButton/SignOutButton.tsx b/packages/react/src/components/actions/SignOutButton/SignOutButton.tsx
index 262aba9df..206f5d65a 100644
--- a/packages/react/src/components/actions/SignOutButton/SignOutButton.tsx
+++ b/packages/react/src/components/actions/SignOutButton/SignOutButton.tsx
@@ -17,7 +17,7 @@
  */
 
 import {FC, forwardRef, ForwardRefExoticComponent, MouseEvent, ReactElement, Ref, RefAttributes, useState} from 'react';
-import useAsgardeo from '../../../hooks/useAsgardeo';
+import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
 import BaseSignOutButton, {BaseSignOutButtonProps} from './BaseSignOutButton';
 
 /**
diff --git a/packages/react/src/components/actions/SignUpButton/SignUpButton.tsx b/packages/react/src/components/actions/SignUpButton/SignUpButton.tsx
index 5521e9e98..92b4a948b 100644
--- a/packages/react/src/components/actions/SignUpButton/SignUpButton.tsx
+++ b/packages/react/src/components/actions/SignUpButton/SignUpButton.tsx
@@ -17,7 +17,7 @@
  */
 
 import {FC, forwardRef, ForwardRefExoticComponent, MouseEvent, ReactElement, Ref, RefAttributes, useState} from 'react';
-import useAsgardeo from '../../../hooks/useAsgardeo';
+import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
 import BaseSignUpButton, {BaseSignUpButtonProps} from './BaseSignUpButton';
 
 /**
diff --git a/packages/react/src/components/control/SignedIn.tsx b/packages/react/src/components/control/SignedIn.tsx
index eeeb462f7..298e77252 100644
--- a/packages/react/src/components/control/SignedIn.tsx
+++ b/packages/react/src/components/control/SignedIn.tsx
@@ -17,7 +17,7 @@
  */
 
 import {FC, PropsWithChildren, ReactNode} from 'react';
-import useAsgardeo from '../../hooks/useAsgardeo';
+import useAsgardeo from '../../contexts/Asgardeo/useAsgardeo';
 
 /**
  * Props for the SignedIn component.
diff --git a/packages/react/src/components/control/SignedOut.tsx b/packages/react/src/components/control/SignedOut.tsx
index b5b946052..61a9a14cd 100644
--- a/packages/react/src/components/control/SignedOut.tsx
+++ b/packages/react/src/components/control/SignedOut.tsx
@@ -17,7 +17,7 @@
  */
 
 import {FC, PropsWithChildren, ReactNode} from 'react';
-import useAsgardeo from '../../hooks/useAsgardeo';
+import useAsgardeo from '../../contexts/Asgardeo/useAsgardeo';
 
 /**
  * Props for the SignedOut component.
diff --git a/packages/react/src/components/presentation/SignIn/SignIn.tsx b/packages/react/src/components/presentation/SignIn/SignIn.tsx
index 331edde5c..9717750db 100644
--- a/packages/react/src/components/presentation/SignIn/SignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/SignIn.tsx
@@ -29,7 +29,7 @@ import {
 import {FC, useState, useEffect, ReactElement} from 'react';
 import {clsx} from 'clsx';
 import BaseSignIn from './BaseSignIn';
-import useAsgardeo from '../../../hooks/useAsgardeo';
+import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
 
 /**
  * Props for the SignIn component.
diff --git a/packages/react/src/components/presentation/User.tsx b/packages/react/src/components/presentation/User.tsx
index f04dbcad6..c1b6ff735 100644
--- a/packages/react/src/components/presentation/User.tsx
+++ b/packages/react/src/components/presentation/User.tsx
@@ -18,7 +18,7 @@
 
 import {User as AsgardeoUser} from '@asgardeo/browser';
 import {FC, ReactElement, ReactNode} from 'react';
-import useAsgardeo from '../../hooks/useAsgardeo';
+import useAsgardeo from '../../contexts/Asgardeo/useAsgardeo';
 
 /**
  * Props for the User component.
diff --git a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
index c92c398c3..6591b7b3f 100644
--- a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
+++ b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
@@ -19,7 +19,7 @@
 import {CSSProperties, FC, ReactElement, ReactNode, useMemo, useState} from 'react';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
-import {useTheme} from '../../../theme/useTheme';
+import {useTheme} from '../../../contexts/Theme/useTheme';
 import {Avatar} from '../../primitives/Avatar/Avatar';
 import {Popover} from '../../primitives/Popover/Popover';
 import Button from '../../primitives/Button/Button';
diff --git a/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx b/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx
index e6c8c7cf2..f3fe9296e 100644
--- a/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx
+++ b/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx
@@ -17,7 +17,7 @@
  */
 
 import {FC, ReactElement} from 'react';
-import useAsgardeo from '../../../hooks/useAsgardeo';
+import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
 import BaseUserDropdown, {BaseUserDropdownProps} from './BaseUserDropdown';
 
 /**
diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index 9541425a6..8a0a42e10 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -23,7 +23,7 @@ import TextField from '../../primitives/TextField/TextField';
 import DatePicker from '../../primitives/DatePicker/DatePicker';
 import Checkbox from '../../primitives/Checkbox/Checkbox';
 import Button from '../../primitives/Button/Button';
-import {useTheme} from '../../../theme/useTheme';
+import {useTheme} from '../../../contexts/Theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
 import getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';
@@ -336,12 +336,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
           >
             {isFieldEditing ? (
               <>
-                <Button 
-                  size="small"
-                  color="primary"
-                  variant="solid"
-                  onClick={() => handleFieldSave(schema)}
-                >
+                <Button size="small" color="primary" variant="solid" onClick={() => handleFieldSave(schema)}>
                   Save
                 </Button>
                 <Button
diff --git a/packages/react/src/components/presentation/UserProfile/UserProfile.tsx b/packages/react/src/components/presentation/UserProfile/UserProfile.tsx
index e795d87f7..0a68db937 100644
--- a/packages/react/src/components/presentation/UserProfile/UserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/UserProfile.tsx
@@ -17,7 +17,7 @@
  */
 
 import {FC, ReactElement} from 'react';
-import useAsgardeo from '../../../hooks/useAsgardeo';
+import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
 import BaseUserProfile, {BaseUserProfileProps} from './BaseUserProfile';
 import updateMeProfile from 'packages/react/src/api/scim2/updateMeProfile';
 import getMeProfile from 'packages/react/src/api/scim2/getMeProfile';
@@ -56,7 +56,7 @@ const UserProfile: FC<UserProfileProps> = ({...rest}: UserProfileProps): ReactEl
 
   const handleProfileUpdate = async (payload: any): Promise<void> => {
     await updateMeProfile({url: `${baseUrl}/scim2/Me`, payload});
-    await getMeProfile({url: `${baseUrl}/scim2/Me` });
+    await getMeProfile({url: `${baseUrl}/scim2/Me`});
   };
 
   return <BaseUserProfile user={user} onUpdate={handleProfileUpdate} {...rest} />;
diff --git a/packages/react/src/components/primitives/Alert/Alert.tsx b/packages/react/src/components/primitives/Alert/Alert.tsx
index b3b7fcbdc..de9ac804e 100644
--- a/packages/react/src/components/primitives/Alert/Alert.tsx
+++ b/packages/react/src/components/primitives/Alert/Alert.tsx
@@ -25,7 +25,7 @@ import {
   ForwardRefExoticComponent,
   useMemo,
 } from 'react';
-import {useTheme} from '../../../theme/useTheme';
+import {useTheme} from '../../../contexts/Theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
 import CircleCheck from '../Icons/CircleCheck';
diff --git a/packages/react/src/components/primitives/Avatar/Avatar.tsx b/packages/react/src/components/primitives/Avatar/Avatar.tsx
index 040b80429..095396989 100644
--- a/packages/react/src/components/primitives/Avatar/Avatar.tsx
+++ b/packages/react/src/components/primitives/Avatar/Avatar.tsx
@@ -17,7 +17,7 @@
  */
 
 import {CSSProperties, FC, useMemo} from 'react';
-import {useTheme} from '../../../theme/useTheme';
+import {useTheme} from '../../../contexts/Theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
 
diff --git a/packages/react/src/components/primitives/Button/Button.tsx b/packages/react/src/components/primitives/Button/Button.tsx
index 21dd29273..535c60021 100644
--- a/packages/react/src/components/primitives/Button/Button.tsx
+++ b/packages/react/src/components/primitives/Button/Button.tsx
@@ -17,7 +17,7 @@
  */
 
 import {CSSProperties, FC, ButtonHTMLAttributes, forwardRef, useMemo} from 'react';
-import {useTheme} from '../../../theme/useTheme';
+import {useTheme} from '../../../contexts/Theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
 
diff --git a/packages/react/src/components/primitives/Card/Card.tsx b/packages/react/src/components/primitives/Card/Card.tsx
index ece544131..235076d44 100644
--- a/packages/react/src/components/primitives/Card/Card.tsx
+++ b/packages/react/src/components/primitives/Card/Card.tsx
@@ -26,7 +26,7 @@ import {
   ForwardRefExoticComponent,
   RefAttributes,
 } from 'react';
-import {useTheme} from '../../../theme/useTheme';
+import {useTheme} from '../../../contexts/Theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
 
diff --git a/packages/react/src/components/primitives/Checkbox/Checkbox.tsx b/packages/react/src/components/primitives/Checkbox/Checkbox.tsx
index b49a34941..01076f95f 100644
--- a/packages/react/src/components/primitives/Checkbox/Checkbox.tsx
+++ b/packages/react/src/components/primitives/Checkbox/Checkbox.tsx
@@ -17,7 +17,7 @@
  */
 
 import {CSSProperties, FC, InputHTMLAttributes} from 'react';
-import {useTheme} from '../../../theme/useTheme';
+import {useTheme} from '../../../contexts/Theme/useTheme';
 import clsx from 'clsx';
 import FormControl from '../FormControl/FormControl';
 import InputLabel from '../InputLabel/InputLabel';
@@ -51,7 +51,7 @@ const Checkbox: FC<CheckboxProps> = ({label, error, className, required, helperT
   const containerStyle: CSSProperties = {
     display: 'flex',
     alignItems: 'center',
-    ...style
+    ...style,
   };
 
   const inputStyle: CSSProperties = {
@@ -71,8 +71,8 @@ const Checkbox: FC<CheckboxProps> = ({label, error, className, required, helperT
       <div style={containerStyle}>
         <input type="checkbox" style={inputStyle} aria-invalid={!!error} aria-required={required} {...rest} />
         {label && (
-          <InputLabel 
-            required={required} 
+          <InputLabel
+            required={required}
             error={!!error}
             variant="inline"
             style={{
diff --git a/packages/react/src/components/primitives/DatePicker/DatePicker.tsx b/packages/react/src/components/primitives/DatePicker/DatePicker.tsx
index fd6f9fa44..8362bbd2e 100644
--- a/packages/react/src/components/primitives/DatePicker/DatePicker.tsx
+++ b/packages/react/src/components/primitives/DatePicker/DatePicker.tsx
@@ -17,7 +17,7 @@
  */
 
 import {CSSProperties, FC, InputHTMLAttributes} from 'react';
-import {useTheme} from '../../../theme/useTheme';
+import {useTheme} from '../../../contexts/Theme/useTheme';
 import clsx from 'clsx';
 import FormControl from '../FormControl/FormControl';
 import InputLabel from '../InputLabel/InputLabel';
diff --git a/packages/react/src/components/primitives/FormControl/FormControl.tsx b/packages/react/src/components/primitives/FormControl/FormControl.tsx
index aed741ce5..b71b3ad39 100644
--- a/packages/react/src/components/primitives/FormControl/FormControl.tsx
+++ b/packages/react/src/components/primitives/FormControl/FormControl.tsx
@@ -17,7 +17,7 @@
  */
 
 import {CSSProperties, FC, ReactNode} from 'react';
-import {useTheme} from '../../../theme/useTheme';
+import {useTheme} from '../../../contexts/Theme/useTheme';
 import clsx from 'clsx';
 
 export interface FormControlProps {
@@ -72,17 +72,13 @@ const FormControl: FC<FormControlProps> = ({
     color: error ? theme.colors.error.main : theme.colors.text.secondary,
     marginTop: theme.spacing.unit / 2 + 'px',
     textAlign: helperTextAlign,
-    ...(helperTextMarginLeft && { marginLeft: helperTextMarginLeft }),
+    ...(helperTextMarginLeft && {marginLeft: helperTextMarginLeft}),
   };
 
   return (
     <div style={containerStyle} className={className}>
       {children}
-      {(error || helperText) && (
-        <div style={helperTextStyle}>
-          {error || helperText}
-        </div>
-      )}
+      {(error || helperText) && <div style={helperTextStyle}>{error || helperText}</div>}
     </div>
   );
 };
diff --git a/packages/react/src/components/primitives/InputLabel/InputLabel.tsx b/packages/react/src/components/primitives/InputLabel/InputLabel.tsx
index ab89c3687..6de5debec 100644
--- a/packages/react/src/components/primitives/InputLabel/InputLabel.tsx
+++ b/packages/react/src/components/primitives/InputLabel/InputLabel.tsx
@@ -17,7 +17,7 @@
  */
 
 import {CSSProperties, FC, LabelHTMLAttributes, ReactNode} from 'react';
-import {useTheme} from '../../../theme/useTheme';
+import {useTheme} from '../../../contexts/Theme/useTheme';
 
 export interface InputLabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'style'> {
   /**
diff --git a/packages/react/src/components/primitives/OtpField/OtpField.tsx b/packages/react/src/components/primitives/OtpField/OtpField.tsx
index 74e40822a..43d7f05f9 100644
--- a/packages/react/src/components/primitives/OtpField/OtpField.tsx
+++ b/packages/react/src/components/primitives/OtpField/OtpField.tsx
@@ -17,7 +17,7 @@
  */
 
 import {CSSProperties, FC, KeyboardEvent, ChangeEvent, useRef, useEffect, useState} from 'react';
-import {useTheme} from '../../../theme/useTheme';
+import {useTheme} from '../../../contexts/Theme/useTheme';
 import clsx from 'clsx';
 import FormControl from '../FormControl/FormControl';
 import InputLabel from '../InputLabel/InputLabel';
diff --git a/packages/react/src/components/primitives/Popover/Popover.tsx b/packages/react/src/components/primitives/Popover/Popover.tsx
index 25df9f780..bb3ed625c 100644
--- a/packages/react/src/components/primitives/Popover/Popover.tsx
+++ b/packages/react/src/components/primitives/Popover/Popover.tsx
@@ -18,7 +18,7 @@
 
 import React, {CSSProperties, FC, ReactNode, useEffect, useMemo, useState} from 'react';
 import {createPortal} from 'react-dom';
-import {useTheme} from '../../../theme/useTheme';
+import {useTheme} from '../../../contexts/Theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
 import Button from '../Button/Button';
diff --git a/packages/react/src/components/primitives/Select/Select.tsx b/packages/react/src/components/primitives/Select/Select.tsx
index 89b786ea3..cd6513d5d 100644
--- a/packages/react/src/components/primitives/Select/Select.tsx
+++ b/packages/react/src/components/primitives/Select/Select.tsx
@@ -17,7 +17,7 @@
  */
 
 import {CSSProperties, FC, SelectHTMLAttributes} from 'react';
-import {useTheme} from '../../../theme/useTheme';
+import {useTheme} from '../../../contexts/Theme/useTheme';
 import clsx from 'clsx';
 import FormControl from '../FormControl/FormControl';
 import InputLabel from '../InputLabel/InputLabel';
@@ -96,12 +96,7 @@ const Select: FC<SelectProps> = ({
   };
 
   return (
-    <FormControl
-      error={error}
-      helperText={helperText}
-      className={clsx('asgardeo-select', className)}
-      style={style}
-    >
+    <FormControl error={error} helperText={helperText} className={clsx('asgardeo-select', className)} style={style}>
       {label && (
         <InputLabel required={required} error={!!error}>
           {label}
diff --git a/packages/react/src/components/primitives/TextField/TextField.tsx b/packages/react/src/components/primitives/TextField/TextField.tsx
index 7e09d2a3b..d3f5344cf 100644
--- a/packages/react/src/components/primitives/TextField/TextField.tsx
+++ b/packages/react/src/components/primitives/TextField/TextField.tsx
@@ -17,7 +17,7 @@
  */
 
 import {CSSProperties, FC, InputHTMLAttributes, ReactNode} from 'react';
-import {useTheme} from '../../../theme/useTheme';
+import {useTheme} from '../../../contexts/Theme/useTheme';
 import clsx from 'clsx';
 import FormControl from '../FormControl/FormControl';
 import InputLabel from '../InputLabel/InputLabel';
@@ -132,12 +132,7 @@ const TextField: FC<TextFieldProps> = ({
   };
 
   return (
-    <FormControl
-      error={error}
-      helperText={helperText}
-      className={clsx('asgardeo-text-field', className)}
-      style={style}
-    >
+    <FormControl error={error} helperText={helperText} className={clsx('asgardeo-text-field', className)} style={style}>
       {label && (
         <InputLabel required={required} error={!!error}>
           {label}
diff --git a/packages/react/src/contexts/AsgardeoContext.ts b/packages/react/src/contexts/Asgardeo/AsgardeoContext.ts
similarity index 100%
rename from packages/react/src/contexts/AsgardeoContext.ts
rename to packages/react/src/contexts/Asgardeo/AsgardeoContext.ts
diff --git a/packages/react/src/providers/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
similarity index 94%
rename from packages/react/src/providers/AsgardeoProvider.tsx
rename to packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index 59f60a49d..61369f80f 100644
--- a/packages/react/src/providers/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -18,12 +18,12 @@
 
 import {SignInOptions, SignOutOptions, User} from '@asgardeo/browser';
 import {FC, RefObject, PropsWithChildren, ReactElement, useEffect, useMemo, useRef, useState, use} from 'react';
-import AsgardeoReactClient from '../AsgardeoReactClient';
-import AsgardeoContext from '../contexts/AsgardeoContext';
-import useBrowserUrl from '../hooks/useBrowserUrl';
-import {AsgardeoReactConfig} from '../models/config';
-import {ThemeProvider} from '../theme/ThemeProvider';
-import I18nProvider from './I18nProvider';
+import AsgardeoReactClient from '../../AsgardeoReactClient';
+import AsgardeoContext from './AsgardeoContext';
+import useBrowserUrl from '../../hooks/useBrowserUrl';
+import {AsgardeoReactConfig} from '../../models/config';
+import {ThemeProvider} from '../Theme/ThemeProvider';
+import I18nProvider from '../I18n/I18nProvider';
 
 /**
  * Props interface of {@link AsgardeoProvider}
diff --git a/packages/react/src/hooks/useAsgardeo.ts b/packages/react/src/contexts/Asgardeo/useAsgardeo.ts
similarity index 92%
rename from packages/react/src/hooks/useAsgardeo.ts
rename to packages/react/src/contexts/Asgardeo/useAsgardeo.ts
index 4c9622f3e..ca76eb42f 100644
--- a/packages/react/src/hooks/useAsgardeo.ts
+++ b/packages/react/src/contexts/Asgardeo/useAsgardeo.ts
@@ -17,7 +17,7 @@
  */
 
 import {useContext} from 'react';
-import AsgardeoContext, {AsgardeoContextProps} from '../contexts/AsgardeoContext';
+import AsgardeoContext, {AsgardeoContextProps} from './AsgardeoContext';
 
 const useAsgardeo = (): AsgardeoContextProps => {
   const context: AsgardeoContextProps | null = useContext(AsgardeoContext);
diff --git a/packages/react/src/contexts/I18nContext.ts b/packages/react/src/contexts/I18n/I18nContext.ts
similarity index 100%
rename from packages/react/src/contexts/I18nContext.ts
rename to packages/react/src/contexts/I18n/I18nContext.ts
diff --git a/packages/react/src/providers/I18nProvider.tsx b/packages/react/src/contexts/I18n/I18nProvider.tsx
similarity index 67%
rename from packages/react/src/providers/I18nProvider.tsx
rename to packages/react/src/contexts/I18n/I18nProvider.tsx
index e8e1d8352..36f4106ff 100644
--- a/packages/react/src/providers/I18nProvider.tsx
+++ b/packages/react/src/contexts/I18n/I18nProvider.tsx
@@ -19,7 +19,7 @@
 import {FC, PropsWithChildren, ReactElement, useCallback, useEffect, useMemo, useState} from 'react';
 import {I18nBundle, I18nPreferences} from '@asgardeo/browser';
 import {getI18nBundles} from '@asgardeo/browser';
-import I18nContext, {I18nContextValue} from '../contexts/I18nContext';
+import I18nContext, {I18nContextValue} from './I18nContext';
 
 const I18N_LANGUAGE_STORAGE_KEY = 'asgardeo-i18n-language';
 
@@ -79,7 +79,7 @@ const I18nProvider: FC<PropsWithChildren<I18nProviderProps>> = ({
 }: PropsWithChildren<I18nProviderProps>): ReactElement => {
   // Get default bundles from the browser package
   const defaultBundles = getI18nBundles();
-  
+
   // Determine the initial language based on preference order:
   // 1. User preference from config
   // 2. Stored language in localStorage
@@ -90,95 +90,102 @@ const I18nProvider: FC<PropsWithChildren<I18nProviderProps>> = ({
     const storedLanguage = getStoredLanguage();
     const browserLanguage = detectBrowserLanguage();
     const fallbackLanguage = preferences?.fallbackLanguage || 'en-US';
-    
+
     return configLanguage || storedLanguage || browserLanguage || fallbackLanguage;
   };
-  
+
   const [currentLanguage, setCurrentLanguage] = useState<string>(determineInitialLanguage);
-  
+
   // Merge default bundles with user-provided bundles
   const mergedBundles = useMemo(() => {
     const merged: Record<string, I18nBundle> = {};
-    
+
     // Add default bundles
     Object.entries(defaultBundles).forEach(([key, bundle]) => {
       // Convert key format (e.g., 'en_US' to 'en-US')
       const languageKey = key.replace('_', '-');
       merged[languageKey] = bundle;
     });
-    
+
     // Add user-provided bundles (these take precedence)
     if (preferences?.bundles) {
       Object.entries(preferences.bundles).forEach(([key, bundle]) => {
         merged[key] = bundle;
       });
     }
-    
+
     return merged;
   }, [defaultBundles, preferences?.bundles]);
-  
+
   const fallbackLanguage = preferences?.fallbackLanguage || 'en-US';
-  
+
   // Update stored language when current language changes
   useEffect(() => {
     storeLanguage(currentLanguage);
   }, [currentLanguage]);
-  
+
   // Translation function
-  const t = useCallback((key: string, params?: Record<string, string | number>): string => {
-    let translation: string | undefined;
-    
-    // Try to get translation from current language bundle
-    const currentBundle = mergedBundles[currentLanguage];
-    if (currentBundle?.translations[key]) {
-      translation = currentBundle.translations[key];
-    }
-    
-    // Fallback to fallback language if translation not found
-    if (!translation && currentLanguage !== fallbackLanguage) {
-      const fallbackBundle = mergedBundles[fallbackLanguage];
-      if (fallbackBundle?.translations[key]) {
-        translation = fallbackBundle.translations[key];
+  const t = useCallback(
+    (key: string, params?: Record<string, string | number>): string => {
+      let translation: string | undefined;
+
+      // Try to get translation from current language bundle
+      const currentBundle = mergedBundles[currentLanguage];
+      if (currentBundle?.translations[key]) {
+        translation = currentBundle.translations[key];
       }
-    }
-    
-    // If still no translation found, return the key itself
-    if (!translation) {
-      translation = key;
-    }
-    
-    // Replace parameters if provided
-    if (params && Object.keys(params).length > 0) {
-      return Object.entries(params).reduce((acc, [paramKey, paramValue]) => {
-        return acc.replace(new RegExp(`\\{${paramKey}\\}`, 'g'), String(paramValue));
-      }, translation);
-    }
-    
-    return translation;
-  }, [mergedBundles, currentLanguage, fallbackLanguage]);
-  
+
+      // Fallback to fallback language if translation not found
+      if (!translation && currentLanguage !== fallbackLanguage) {
+        const fallbackBundle = mergedBundles[fallbackLanguage];
+        if (fallbackBundle?.translations[key]) {
+          translation = fallbackBundle.translations[key];
+        }
+      }
+
+      // If still no translation found, return the key itself
+      if (!translation) {
+        translation = key;
+      }
+
+      // Replace parameters if provided
+      if (params && Object.keys(params).length > 0) {
+        return Object.entries(params).reduce((acc, [paramKey, paramValue]) => {
+          return acc.replace(new RegExp(`\\{${paramKey}\\}`, 'g'), String(paramValue));
+        }, translation);
+      }
+
+      return translation;
+    },
+    [mergedBundles, currentLanguage, fallbackLanguage],
+  );
+
   // Language setter function
-  const setLanguage = useCallback((language: string) => {
-    if (mergedBundles[language]) {
-      setCurrentLanguage(language);
-    } else {
-      console.warn(`Language '${language}' is not available. Available languages: ${Object.keys(mergedBundles).join(', ')}`);
-    }
-  }, [mergedBundles]);
-  
-  const contextValue: I18nContextValue = useMemo(() => ({
-    currentLanguage,
-    fallbackLanguage,
-    bundles: mergedBundles,
-    setLanguage,
-    t,
-  }), [currentLanguage, fallbackLanguage, mergedBundles, setLanguage, t]);
-  
-  return (
-    <I18nContext.Provider value={contextValue}>
-      {children}
-    </I18nContext.Provider>
+  const setLanguage = useCallback(
+    (language: string) => {
+      if (mergedBundles[language]) {
+        setCurrentLanguage(language);
+      } else {
+        console.warn(
+          `Language '${language}' is not available. Available languages: ${Object.keys(mergedBundles).join(', ')}`,
+        );
+      }
+    },
+    [mergedBundles],
   );
+
+  const contextValue: I18nContextValue = useMemo(
+    () => ({
+      currentLanguage,
+      fallbackLanguage,
+      bundles: mergedBundles,
+      setLanguage,
+      t,
+    }),
+    [currentLanguage, fallbackLanguage, mergedBundles, setLanguage, t],
+  );
+
+  return <I18nContext.Provider value={contextValue}>{children}</I18nContext.Provider>;
 };
 
 export default I18nProvider;
diff --git a/packages/react/src/hooks/useI18n.ts b/packages/react/src/contexts/I18n/useI18n.ts
similarity index 82%
rename from packages/react/src/hooks/useI18n.ts
rename to packages/react/src/contexts/I18n/useI18n.ts
index 2b18cb44c..638255091 100644
--- a/packages/react/src/hooks/useI18n.ts
+++ b/packages/react/src/contexts/I18n/useI18n.ts
@@ -17,22 +17,24 @@
  */
 
 import {useContext} from 'react';
-import I18nContext, {I18nContextValue} from '../contexts/I18nContext';
+import I18nContext, {I18nContextValue} from './I18nContext';
 
 /**
  * Hook for accessing the I18n context directly.
  * Provides access to the full i18n context including bundles and all utilities.
- * 
+ *
  * @returns The complete I18n context value
  * @throws Error if used outside of I18nProvider context
  */
 const useI18n = (): I18nContextValue => {
   const context = useContext(I18nContext);
-  
+
   if (!context) {
-    throw new Error('useI18n must be used within an I18nProvider. Make sure your component is wrapped with AsgardeoProvider which includes I18nProvider.');
+    throw new Error(
+      'useI18n must be used within an I18nProvider. Make sure your component is wrapped with AsgardeoProvider which includes I18nProvider.',
+    );
   }
-  
+
   return context;
 };
 
diff --git a/packages/react/src/theme/ThemeContext.ts b/packages/react/src/contexts/Theme/ThemeContext.ts
similarity index 100%
rename from packages/react/src/theme/ThemeContext.ts
rename to packages/react/src/contexts/Theme/ThemeContext.ts
diff --git a/packages/react/src/theme/ThemeProvider.tsx b/packages/react/src/contexts/Theme/ThemeProvider.tsx
similarity index 100%
rename from packages/react/src/theme/ThemeProvider.tsx
rename to packages/react/src/contexts/Theme/ThemeProvider.tsx
diff --git a/packages/react/src/theme/types.ts b/packages/react/src/contexts/Theme/types.ts
similarity index 100%
rename from packages/react/src/theme/types.ts
rename to packages/react/src/contexts/Theme/types.ts
diff --git a/packages/react/src/theme/useTheme.ts b/packages/react/src/contexts/Theme/useTheme.ts
similarity index 100%
rename from packages/react/src/theme/useTheme.ts
rename to packages/react/src/contexts/Theme/useTheme.ts
diff --git a/packages/react/src/hooks/useTranslation.ts b/packages/react/src/hooks/useTranslation.ts
index 0af794c24..07121b3e5 100644
--- a/packages/react/src/hooks/useTranslation.ts
+++ b/packages/react/src/hooks/useTranslation.ts
@@ -17,24 +17,24 @@
  */
 
 import {useContext} from 'react';
-import I18nContext, {I18nContextValue} from '../contexts/I18nContext';
+import I18nContext, {I18nContextValue} from '../contexts/I18n/I18nContext';
 
 export interface UseTranslation {
   /**
    * Translation function that returns a translated string for the given key
    */
   t: (key: string, params?: Record<string, string | number>) => string;
-  
+
   /**
    * The current language code
    */
   currentLanguage: string;
-  
+
   /**
    * Function to change the current language
    */
   setLanguage: (language: string) => void;
-  
+
   /**
    * All available language codes
    */
@@ -44,19 +44,21 @@ export interface UseTranslation {
 /**
  * Hook for accessing translation functions and language management.
  * Must be used within an I18nProvider context.
- * 
+ *
  * @returns An object containing translation function and language management utilities
  * @throws Error if used outside of I18nProvider context
  */
 const useTranslation = (): UseTranslation => {
   const context = useContext(I18nContext);
-  
+
   if (!context) {
-    throw new Error('useTranslation must be used within an I18nProvider. Make sure your component is wrapped with AsgardeoProvider which includes I18nProvider.');
+    throw new Error(
+      'useTranslation must be used within an I18nProvider. Make sure your component is wrapped with AsgardeoProvider which includes I18nProvider.',
+    );
   }
-  
+
   const {t, currentLanguage, setLanguage, bundles} = context;
-  
+
   return {
     t,
     currentLanguage,
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 59c8c4765..baab1b3d8 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -16,14 +16,14 @@
  * under the License.
  */
 
-export {default as AsgardeoProvider} from './providers/AsgardeoProvider';
-export * from './providers/AsgardeoProvider';
+export {default as AsgardeoProvider} from './contexts/Asgardeo/AsgardeoProvider';
+export * from './contexts/Asgardeo/AsgardeoProvider';
 
-export {default as AsgardeoContext} from './contexts/AsgardeoContext';
-export * from './contexts/AsgardeoContext';
+export {default as AsgardeoContext} from './contexts/Asgardeo/AsgardeoContext';
+export * from './contexts/Asgardeo/AsgardeoContext';
 
-export {default as useAsgardeo} from './hooks/useAsgardeo';
-export * from './hooks/useAsgardeo';
+export {default as useAsgardeo} from './contexts/Asgardeo/useAsgardeo';
+export * from './contexts/Asgardeo/useAsgardeo';
 
 export {default as useBrowserUrl} from './hooks/useBrowserUrl';
 export * from './hooks/useBrowserUrl';

From 881e2fecaf600489abaca3dd60793f7a1d29d17d Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Thu, 12 Jun 2025 10:52:50 +0530
Subject: [PATCH 064/131] chore(react): minor fixes

---
 .../src/components/presentation/SignIn/BaseSignIn.tsx     | 8 ++++----
 .../react/src/components/presentation/SignIn/SignIn.tsx   | 2 +-
 .../react/src/components/primitives/OtpField/OtpField.tsx | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index 1b2317610..b47843e13 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -178,9 +178,9 @@ const BaseSignIn: FC<BaseSignInProps> = ({
   const getFormFields = (): FormField[] => {
     if (!currentAuthenticator) return [];
 
-    return currentAuthenticator.metadata.params
-      .sort((a, b) => a.order - b.order)
-      .map(param => ({
+    return currentAuthenticator.metadata?.params
+      ?.sort((a, b) => a.order - b.order)
+      ?.map(param => ({
         param: param.param,
         type: param.type,
         displayName: param.displayName,
@@ -229,7 +229,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
     <Card className={className}>
       <form onSubmit={handleSubmit}>
         <Card.Header>
-          <Card.Title level={2}>{t("signin.title")}</Card.Title>
+          <Card.Title level={2}>{t('signin.title')}</Card.Title>
           {messages.length > 0 && (
             <div style={{marginTop: '1rem'}}>
               {messages.map((message, index) => {
diff --git a/packages/react/src/components/presentation/SignIn/SignIn.tsx b/packages/react/src/components/presentation/SignIn/SignIn.tsx
index 9717750db..1e765925e 100644
--- a/packages/react/src/components/presentation/SignIn/SignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/SignIn.tsx
@@ -198,7 +198,7 @@ const SignIn: FC<SignInProps> = ({
   const setupFormFields = (authenticator: ApplicationNativeAuthenticationAuthenticator) => {
     // Initialize form values for the authenticator's parameters
     const initialValues: Record<string, string> = {};
-    authenticator.metadata.params.forEach(param => {
+    authenticator.metadata?.params?.forEach(param => {
       initialValues[param.param] = '';
     });
     setFormValues(initialValues);
diff --git a/packages/react/src/components/primitives/OtpField/OtpField.tsx b/packages/react/src/components/primitives/OtpField/OtpField.tsx
index 43d7f05f9..587d39eed 100644
--- a/packages/react/src/components/primitives/OtpField/OtpField.tsx
+++ b/packages/react/src/components/primitives/OtpField/OtpField.tsx
@@ -134,7 +134,7 @@ const OtpField: FC<OtpInputProps> = ({
   const inputContainerStyle: CSSProperties = {
     display: 'flex',
     gap: theme.spacing.unit + 'px',
-    justifyContent: 'center',
+    justifyContent: 'space-between',
     alignItems: 'center',
     flexWrap: 'wrap',
   };

From ed233ee559628ba615d8d49fc66564c1bf90fdc8 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Thu, 12 Jun 2025 11:38:55 +0530
Subject: [PATCH 065/131] feat(react): enhance BaseSignIn and SignIn components
 for multi-authenticator support; add Divider component for UI separation

---
 .../presentation/SignIn/BaseSignIn.tsx        | 210 ++++++++++++++++++
 .../components/presentation/SignIn/SignIn.tsx | 154 ++++++++++++-
 .../components/primitives/Divider/Divider.tsx | 184 +++++++++++++++
 packages/react/src/index.ts                   |   3 +
 4 files changed, 544 insertions(+), 7 deletions(-)
 create mode 100644 packages/react/src/components/primitives/Divider/Divider.tsx

diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index b47843e13..1af17ec61 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -19,14 +19,18 @@
 import {
   ApplicationNativeAuthenticationAuthenticator,
   ApplicationNativeAuthenticationAuthenticatorParamType,
+  ApplicationNativeAuthenticationInitiateResponse,
+  ApplicationNativeAuthenticationHandleResponse,
   resolveFieldName,
   resolveFieldType,
+  FieldType,
 } from '@asgardeo/browser';
 import {FC, FormEvent, ReactElement} from 'react';
 import {createField} from '../../factories/FieldFactory';
 import Button from '../../primitives/Button/Button';
 import Card from '../../primitives/Card/Card';
 import Alert from '../../primitives/Alert/Alert';
+import Divider from '../../primitives/Divider/Divider';
 import useTranslation from '../../../hooks/useTranslation';
 
 /**
@@ -45,6 +49,11 @@ interface FormField {
  * Props for the BaseSignIn component.
  */
 export interface BaseSignInProps {
+  /**
+   * Current authentication flow information.
+   */
+  currentFlow: ApplicationNativeAuthenticationInitiateResponse | ApplicationNativeAuthenticationHandleResponse | null;
+
   /**
    * Current authenticator information.
    */
@@ -85,6 +94,14 @@ export interface BaseSignInProps {
    */
   onInputChange: (param: string, value: string) => void;
 
+  /**
+   * Callback function called when an authenticator is selected from multiple options.
+   */
+  onAuthenticatorSelection?: (
+    authenticator: ApplicationNativeAuthenticationAuthenticator,
+    formData?: Record<string, string>,
+  ) => void;
+
   /**
    * Custom CSS class name for the form container.
    */
@@ -153,6 +170,7 @@ export interface BaseSignInProps {
  * ```
  */
 const BaseSignIn: FC<BaseSignInProps> = ({
+  currentFlow,
   currentAuthenticator,
   formValues,
   isLoading,
@@ -161,6 +179,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
   isInitialized,
   onSubmit,
   onInputChange,
+  onAuthenticatorSelection,
   className = '',
   inputClassName = '',
   buttonClassName = '',
@@ -172,6 +191,76 @@ const BaseSignIn: FC<BaseSignInProps> = ({
 }) => {
   const {t} = useTranslation();
 
+  /**
+   * Check if current flow has multiple authenticator options.
+   */
+  const hasMultipleOptions = (): boolean => {
+    return (
+      currentFlow &&
+      'nextStep' in currentFlow &&
+      currentFlow.nextStep?.stepType === 'MULTI_OPTIONS_PROMPT' &&
+      currentFlow.nextStep?.authenticators &&
+      currentFlow.nextStep.authenticators.length > 1
+    );
+  };
+
+  /**
+   * Get available authenticators for selection.
+   */
+  const getAvailableAuthenticators = (): ApplicationNativeAuthenticationAuthenticator[] => {
+    if (!currentFlow || !('nextStep' in currentFlow) || !currentFlow.nextStep?.authenticators) {
+      return [];
+    }
+    return currentFlow.nextStep.authenticators;
+  };
+
+  /**
+   * Get the username & password authenticator (LOCAL).
+   */
+  const getUsernamePasswordAuthenticator = (): ApplicationNativeAuthenticationAuthenticator | null => {
+    const authenticators = getAvailableAuthenticators();
+    return authenticators.find(auth => auth.idp === 'LOCAL' && auth.authenticator === 'Username & Password') || null;
+  };
+
+  /**
+   * Get federated login authenticators (non-LOCAL).
+   */
+  const getFederatedAuthenticators = (): ApplicationNativeAuthenticationAuthenticator[] => {
+    const authenticators = getAvailableAuthenticators();
+    return authenticators.filter(auth => auth.idp !== 'LOCAL');
+  };
+
+  /**
+   * Get display name for an authenticator.
+   */
+  const getAuthenticatorDisplayName = (authenticator: ApplicationNativeAuthenticationAuthenticator): string => {
+    // For federated providers, use the IDP name
+    if (authenticator.idp !== 'LOCAL') {
+      return `Continue with ${authenticator.idp}`;
+    }
+    // For local authenticators, use the authenticator name
+    return authenticator.authenticator;
+  };
+
+  /**
+   * Get icon or styling hint for an authenticator.
+   */
+  const getAuthenticatorStyle = (
+    authenticator: ApplicationNativeAuthenticationAuthenticator,
+  ): {variant: 'solid' | 'outline'; color: string} => {
+    const idp = authenticator.idp.toLowerCase();
+
+    if (idp === 'google') {
+      return {variant: 'outline', color: 'secondary'};
+    } else if (idp === 'github') {
+      return {variant: 'solid', color: 'secondary'};
+    } else if (idp === 'local') {
+      return {variant: 'solid', color: 'primary'};
+    } else {
+      return {variant: 'outline', color: 'secondary'};
+    }
+  };
+
   /**
    * Get form fields from the current authenticator.
    */
@@ -208,6 +297,127 @@ const BaseSignIn: FC<BaseSignInProps> = ({
     ) : null;
   }
 
+  // Handle multiple authenticator options
+  if (hasMultipleOptions() && !currentAuthenticator) {
+    const usernamePasswordAuth = getUsernamePasswordAuthenticator();
+    const federatedAuths = getFederatedAuthenticators();
+
+    return (
+      <Card className={className}>
+        <Card.Header>
+          <Card.Title level={2}>{t('signin.title')}</Card.Title>
+          {messages.length > 0 && (
+            <div style={{marginTop: '1rem'}}>
+              {messages.map((message, index) => {
+                const variant =
+                  message.type.toLowerCase() === 'error'
+                    ? 'error'
+                    : message.type.toLowerCase() === 'warning'
+                    ? 'warning'
+                    : message.type.toLowerCase() === 'success'
+                    ? 'success'
+                    : 'info';
+
+                return (
+                  <Alert key={index} variant={variant} style={{marginBottom: '0.5rem'}}>
+                    <Alert.Description>{message.message}</Alert.Description>
+                  </Alert>
+                );
+              })}
+            </div>
+          )}
+        </Card.Header>
+
+        <Card.Content>
+          {error && (
+            <Alert variant="error" style={{marginBottom: '1rem'}}>
+              <Alert.Title>Error</Alert.Title>
+              <Alert.Description>{error}</Alert.Description>
+            </Alert>
+          )}
+
+          {/* Username & Password form at the top */}
+          {usernamePasswordAuth && (
+            <>
+              <form
+                onSubmit={e => {
+                  e.preventDefault();
+                  // Collect form data from formValues
+                  const formData: Record<string, string> = {};
+                  usernamePasswordAuth.metadata?.params?.forEach(param => {
+                    formData[param.param] = formValues[param.param] || '';
+                  });
+                  onAuthenticatorSelection?.(usernamePasswordAuth, formData);
+                }}
+              >
+                {usernamePasswordAuth.metadata?.params
+                  ?.sort((a, b) => a.order - b.order)
+                  ?.map(param => (
+                    <div key={param.param} style={{marginBottom: '1rem'}}>
+                      {createField({
+                        name: param.param,
+                        type:
+                          param.type === 'STRING'
+                            ? param.confidential
+                              ? FieldType.Password
+                              : FieldType.Text
+                            : FieldType.Text,
+                        label: param.displayName,
+                        required: usernamePasswordAuth.requiredParams.includes(param.param),
+                        value: formValues[param.param] || '',
+                        onChange: value => onInputChange(param.param, value),
+                        disabled: isLoading,
+                        className: inputClassName,
+                      })}
+                    </div>
+                  ))}
+
+                <Button
+                  type="submit"
+                  disabled={isLoading}
+                  loading={isLoading}
+                  className={buttonClassName}
+                  color="primary"
+                  variant="solid"
+                  fullWidth
+                  style={{marginBottom: '1rem'}}
+                >
+                  {submitButtonText}
+                </Button>
+              </form>
+
+              {/* Divider if there are federated options */}
+              {federatedAuths.length > 0 && <Divider style={{margin: '1.5rem 0'}}>OR</Divider>}
+            </>
+          )}
+
+          {/* Federated login options */}
+          {federatedAuths.length > 0 && (
+            <div style={{display: 'flex', flexDirection: 'column', gap: '0.75rem'}}>
+              {federatedAuths.map(authenticator => {
+                const style = getAuthenticatorStyle(authenticator);
+                return (
+                  <Button
+                    key={authenticator.authenticatorId}
+                    variant={style.variant}
+                    color={style.color}
+                    fullWidth
+                    disabled={isLoading}
+                    loading={isLoading}
+                    onClick={() => onAuthenticatorSelection?.(authenticator)}
+                    className={buttonClassName}
+                  >
+                    {getAuthenticatorDisplayName(authenticator)}
+                  </Button>
+                );
+              })}
+            </div>
+          )}
+        </Card.Content>
+      </Card>
+    );
+  }
+
   if (!currentAuthenticator) {
     return (
       <Card className={className}>
diff --git a/packages/react/src/components/presentation/SignIn/SignIn.tsx b/packages/react/src/components/presentation/SignIn/SignIn.tsx
index 1e765925e..0ced1591a 100644
--- a/packages/react/src/components/presentation/SignIn/SignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/SignIn.tsx
@@ -23,6 +23,7 @@ import {
   ApplicationNativeAuthenticationHandleResponse,
   ApplicationNativeAuthenticationFlowStatus,
   ApplicationNativeAuthenticationAuthenticator,
+  ApplicationNativeAuthenticationAuthenticatorPromptType,
   AsgardeoAPIError,
   withVendorCSSClassPrefix,
 } from '@asgardeo/browser';
@@ -167,10 +168,16 @@ const SignIn: FC<SignInProps> = ({
       }
 
       if (response.nextStep?.authenticators?.length > 0) {
-        // For now, select the first authenticator
-        const authenticator = response.nextStep.authenticators[0];
-        setCurrentAuthenticator(authenticator);
-        setupFormFields(authenticator);
+        // Check if this is a multi-options prompt
+        if (response.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' && response.nextStep.authenticators.length > 1) {
+          // Don't auto-select when there are multiple options, let user choose
+          setCurrentAuthenticator(null);
+        } else {
+          // Single authenticator or AUTHENTICATOR_PROMPT, select automatically
+          const authenticator = response.nextStep.authenticators[0];
+          setCurrentAuthenticator(authenticator);
+          setupFormFields(authenticator);
+        }
       }
 
       // Handle any messages from the response
@@ -251,9 +258,19 @@ const SignIn: FC<SignInProps> = ({
         setCurrentFlow(nextStepResponse);
 
         if (nextStepResponse.nextStep?.authenticators?.length > 0) {
-          const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
-          setCurrentAuthenticator(nextAuthenticator);
-          setupFormFields(nextAuthenticator);
+          // Check if this is a multi-options prompt
+          if (
+            nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
+            nextStepResponse.nextStep.authenticators.length > 1
+          ) {
+            // Don't auto-select when there are multiple options, let user choose
+            setCurrentAuthenticator(null);
+          } else {
+            // Single authenticator or AUTHENTICATOR_PROMPT, select automatically
+            const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
+            setCurrentAuthenticator(nextAuthenticator);
+            setupFormFields(nextAuthenticator);
+          }
         }
 
         // Handle any messages from the response
@@ -275,6 +292,127 @@ const SignIn: FC<SignInProps> = ({
     }
   };
 
+  /**
+   * Handle authenticator selection for multi-option prompts.
+   */
+  const handleAuthenticatorSelection = async (
+    authenticator: ApplicationNativeAuthenticationAuthenticator,
+    formData?: Record<string, string>,
+  ) => {
+    if (!currentFlow) {
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    setMessages([]);
+
+    try {
+      // Check if this is a redirection-based authenticator (like Google, GitHub)
+      if (
+        authenticator.metadata?.promptType === ApplicationNativeAuthenticationAuthenticatorPromptType.REDIRECTION_PROMPT
+      ) {
+        // For redirection-based authentication, just select the authenticator
+        const payload = {
+          flowId: currentFlow.flowId,
+          selectedAuthenticator: {
+            authenticatorId: authenticator.authenticatorId,
+            params: {},
+          },
+        };
+
+        const response = await handleApplicationNativeAuthentication({
+          baseUrl,
+          payload,
+        });
+
+        onFlowChange?.(response);
+
+        if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+          onSuccess?.(response.authData);
+          return;
+        }
+
+        // Handle redirection if needed - for now, we'll handle redirection in a future iteration
+        // TODO: Implement redirection handling for federated authentication
+      } else {
+        // For user prompt authenticators (like username/password)
+        if (formData) {
+          // Submit the form data directly
+          const payload = {
+            flowId: currentFlow.flowId,
+            selectedAuthenticator: {
+              authenticatorId: authenticator.authenticatorId,
+              params: formData,
+            },
+          };
+
+          const response = await handleApplicationNativeAuthentication({
+            baseUrl,
+            payload,
+          });
+
+          onFlowChange?.(response);
+
+          if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+            onSuccess?.(response.authData);
+            return;
+          }
+
+          if (
+            response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
+            response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
+          ) {
+            setError('Authentication failed. Please check your credentials and try again.');
+            return;
+          }
+
+          // Continue with next step
+          if ('flowId' in response && 'nextStep' in response) {
+            const nextStepResponse = response as any;
+            setCurrentFlow(nextStepResponse);
+
+            if (nextStepResponse.nextStep?.authenticators?.length > 0) {
+              // Check if this is a multi-options prompt
+              if (
+                nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
+                nextStepResponse.nextStep.authenticators.length > 1
+              ) {
+                // Don't auto-select when there are multiple options, let user choose
+                setCurrentAuthenticator(null);
+              } else {
+                // Single authenticator or AUTHENTICATOR_PROMPT, select automatically
+                const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
+                setCurrentAuthenticator(nextAuthenticator);
+                setupFormFields(nextAuthenticator);
+              }
+            }
+
+            // Handle any messages from the response
+            if (nextStepResponse.nextStep?.messages) {
+              setMessages(
+                nextStepResponse.nextStep.messages.map((msg: any) => ({
+                  type: msg.type || 'INFO',
+                  message: msg.message || '',
+                })),
+              );
+            }
+          }
+        } else {
+          // Just set up the form for the authenticator
+          setCurrentAuthenticator(authenticator);
+          setupFormFields(authenticator);
+        }
+      }
+    } catch (err) {
+      const errorMessage = err instanceof AsgardeoAPIError ? err.message : 'Authenticator selection failed';
+      setError(errorMessage);
+      onError?.(err as Error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   /**
    * Handle input value changes.
    */
@@ -325,6 +463,7 @@ const SignIn: FC<SignInProps> = ({
 
   return (
     <BaseSignIn
+      currentFlow={currentFlow}
       currentAuthenticator={currentAuthenticator}
       formValues={formValues}
       isLoading={isLoading}
@@ -333,6 +472,7 @@ const SignIn: FC<SignInProps> = ({
       isInitialized={isInitialized}
       onSubmit={handleSubmit}
       onInputChange={handleInputChange}
+      onAuthenticatorSelection={handleAuthenticatorSelection}
       className={containerClasses}
       inputClassName={inputClasses}
       buttonClassName={buttonClasses}
diff --git a/packages/react/src/components/primitives/Divider/Divider.tsx b/packages/react/src/components/primitives/Divider/Divider.tsx
new file mode 100644
index 000000000..c1e40ef31
--- /dev/null
+++ b/packages/react/src/components/primitives/Divider/Divider.tsx
@@ -0,0 +1,184 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {FC, HTMLAttributes, useMemo} from 'react';
+import {withVendorCSSClassPrefix} from '@asgardeo/browser';
+import {clsx} from 'clsx';
+import {useTheme} from '../../../contexts/Theme/useTheme';
+
+export type DividerOrientation = 'horizontal' | 'vertical';
+export type DividerVariant = 'solid' | 'dashed' | 'dotted';
+
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * The orientation of the divider
+   */
+  orientation?: DividerOrientation;
+
+  /**
+   * The variant style of the divider
+   */
+  variant?: DividerVariant;
+
+  /**
+   * Text to display in the center of the divider
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Custom color for the divider
+   */
+  color?: string;
+}
+
+const useStyles = (orientation: DividerOrientation, variant: DividerVariant, color?: string, hasChildren?: boolean) => {
+  const {theme} = useTheme();
+
+  return useMemo(() => {
+    const baseColor = color || theme.colors.border;
+    const borderStyle = variant === 'solid' ? 'solid' : variant === 'dashed' ? 'dashed' : 'dotted';
+
+    if (orientation === 'vertical') {
+      return {
+        display: 'inline-block',
+        height: '100%',
+        minHeight: '1rem',
+        width: '1px',
+        borderLeft: `1px ${borderStyle} ${baseColor}`,
+        margin: `0 ${theme.spacing.unit}px`,
+      };
+    }
+
+    // Horizontal divider
+    const baseStyle = {
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%',
+      margin: `${theme.spacing.unit * 2}px 0`,
+      fontSize: '0.875rem',
+      color: theme.colors.text.secondary,
+    };
+
+    if (hasChildren) {
+      return {
+        ...baseStyle,
+        '&::before': {
+          content: '""',
+          flex: 1,
+          height: '1px',
+          borderTop: `1px ${borderStyle} ${baseColor}`,
+          marginRight: `${theme.spacing.unit}px`,
+        },
+        '&::after': {
+          content: '""',
+          flex: 1,
+          height: '1px',
+          borderTop: `1px ${borderStyle} ${baseColor}`,
+          marginLeft: `${theme.spacing.unit}px`,
+        },
+      };
+    }
+
+    return {
+      ...baseStyle,
+      height: '1px',
+      borderTop: `1px ${borderStyle} ${baseColor}`,
+    };
+  }, [orientation, variant, color, hasChildren, theme]);
+};
+
+/**
+ * Divider component for separating content sections.
+ *
+ * @example
+ * ```tsx
+ * // Basic horizontal divider
+ * <Divider />
+ *
+ * // Divider with text
+ * <Divider>OR</Divider>
+ *
+ * // Vertical divider
+ * <Divider orientation="vertical" />
+ *
+ * // Custom styled divider
+ * <Divider variant="dashed" color="#ccc">Continue with</Divider>
+ * ```
+ */
+const Divider: FC<DividerProps> = ({
+  orientation = 'horizontal',
+  variant = 'solid',
+  children,
+  color,
+  className,
+  style,
+  ...rest
+}) => {
+  const dividerStyle = useStyles(orientation, variant, color, !!children);
+
+  if (orientation === 'vertical') {
+    return (
+      <div
+        className={clsx(withVendorCSSClassPrefix('divider'), withVendorCSSClassPrefix('divider-vertical'), className)}
+        style={{...dividerStyle, ...style}}
+        role="separator"
+        aria-orientation="vertical"
+        {...rest}
+      />
+    );
+  }
+
+  if (children) {
+    return (
+      <div
+        className={clsx(
+          withVendorCSSClassPrefix('divider'),
+          withVendorCSSClassPrefix('divider-horizontal'),
+          withVendorCSSClassPrefix('divider-with-text'),
+          className,
+        )}
+        style={{...dividerStyle, ...style}}
+        role="separator"
+        aria-orientation="horizontal"
+        {...rest}
+      >
+        <span
+          style={{
+            backgroundColor: 'var(--background-color, #fff)',
+            padding: '0 0.5rem',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {children}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={clsx(withVendorCSSClassPrefix('divider'), withVendorCSSClassPrefix('divider-horizontal'), className)}
+      style={{...dividerStyle, ...style}}
+      role="separator"
+      aria-orientation="horizontal"
+      {...rest}
+    />
+  );
+};
+
+export default Divider;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index baab1b3d8..bc6eb5532 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -106,6 +106,9 @@ export * from './components/primitives/FormControl/FormControl';
 export {default as InputLabel} from './components/primitives/InputLabel/InputLabel';
 export * from './components/primitives/InputLabel/InputLabel';
 
+export {default as Divider} from './components/primitives/Divider/Divider';
+export * from './components/primitives/Divider/Divider';
+
 export {default as Eye} from './components/primitives/Icons/Eye';
 export {default as EyeOff} from './components/primitives/Icons/EyeOff';
 export {default as CircleCheck} from './components/primitives/Icons/CircleCheck';

From ce7e0558b2ce9da06318c91d8154df2b3d95cdad Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Thu, 12 Jun 2025 11:48:03 +0530
Subject: [PATCH 066/131] chore(react): fix idf flow

---
 .../presentation/SignIn/BaseSignIn.tsx           | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index 1af17ec61..90c123421 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -24,6 +24,7 @@ import {
   resolveFieldName,
   resolveFieldType,
   FieldType,
+  ApplicationNativeAuthenticationStepType,
 } from '@asgardeo/browser';
 import {FC, FormEvent, ReactElement} from 'react';
 import {createField} from '../../factories/FieldFactory';
@@ -198,7 +199,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
     return (
       currentFlow &&
       'nextStep' in currentFlow &&
-      currentFlow.nextStep?.stepType === 'MULTI_OPTIONS_PROMPT' &&
+      currentFlow.nextStep?.stepType === ApplicationNativeAuthenticationStepType.MultOptionsPrompt &&
       currentFlow.nextStep?.authenticators &&
       currentFlow.nextStep.authenticators.length > 1
     );
@@ -219,7 +220,13 @@ const BaseSignIn: FC<BaseSignInProps> = ({
    */
   const getUsernamePasswordAuthenticator = (): ApplicationNativeAuthenticationAuthenticator | null => {
     const authenticators = getAvailableAuthenticators();
-    return authenticators.find(auth => auth.idp === 'LOCAL' && auth.authenticator === 'Username & Password') || null;
+    return (
+      authenticators.find(
+        auth =>
+          auth.idp === 'LOCAL' &&
+          (auth.authenticator === 'Username & Password' || auth.authenticator === 'Identifier First'),
+      ) || null
+    );
   };
 
   /**
@@ -238,7 +245,10 @@ const BaseSignIn: FC<BaseSignInProps> = ({
     if (authenticator.idp !== 'LOCAL') {
       return `Continue with ${authenticator.idp}`;
     }
-    // For local authenticators, use the authenticator name
+    // For local authenticators, use appropriate display text
+    if (authenticator.authenticator === 'Identifier First') {
+      return 'Sign In';
+    }
     return authenticator.authenticator;
   };
 

From 9672d8b01036e3bd155944b8b13361bb0b3a27f5 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Thu, 12 Jun 2025 13:17:14 +0530
Subject: [PATCH 067/131] feat(react): Add various sign-in options and
 authentication components

- Implemented Email OTP sign-in option for email-based OTP authentication.
- Added Facebook, GitHub, Google, LinkedIn, and Microsoft sign-in button components for social login.
- Created Identifier First and Username Password sign-in options for traditional authentication flows.
- Introduced TOTP and SMS OTP components for time-based and SMS-based one-time password authentication.
- Developed a Social Login component to handle authentication with external identity providers.
- Established a SignInOptionFactory to dynamically create sign-in components based on authenticator configuration.
- Updated types and interfaces for better type safety and clarity in sign-in options.
- Enhanced the index file to export all new sign-in option components and types for easier access.
---
 ...pplicationNativeAuthenticationConstants.ts |  41 +++
 packages/javascript/src/index.ts              |   2 +
 .../application-native-authentication.ts      |   4 +
 .../presentation/SignIn/BaseSignIn.tsx        | 291 ++++++------------
 .../presentation/SignIn/options/EmailOtp.tsx  | 104 +++++++
 .../SignIn/options/FacebookButton.tsx         |  58 ++++
 .../SignIn/options/GitHubButton.tsx           |  58 ++++
 .../SignIn/options/GoogleButton.tsx           |  58 ++++
 .../SignIn/options/IdentifierFirst.tsx        |  83 +++++
 .../SignIn/options/LinkedInButton.tsx         |  58 ++++
 .../SignIn/options/MicrosoftButton.tsx        |  58 ++++
 .../SignIn/options/SignInOptionFactory.tsx    | 160 ++++++++++
 .../options/SignInWithEthereumButton.tsx      |  58 ++++
 .../presentation/SignIn/options/SmsOtp.tsx    | 104 +++++++
 .../SignIn/options/SocialLogin.tsx            |  84 +++++
 .../presentation/SignIn/options/Totp.tsx      | 104 +++++++
 .../SignIn/options/UsernamePassword.tsx       |  84 +++++
 .../presentation/SignIn/options/types.ts      |  98 ++++++
 .../components/presentation/SignIn/types.ts   | 148 +++++++++
 packages/react/src/index.ts                   |  16 +
 20 files changed, 1472 insertions(+), 199 deletions(-)
 create mode 100644 packages/javascript/src/constants/ApplicationNativeAuthenticationConstants.ts
 create mode 100644 packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
 create mode 100644 packages/react/src/components/presentation/SignIn/options/FacebookButton.tsx
 create mode 100644 packages/react/src/components/presentation/SignIn/options/GitHubButton.tsx
 create mode 100644 packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx
 create mode 100644 packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
 create mode 100644 packages/react/src/components/presentation/SignIn/options/LinkedInButton.tsx
 create mode 100644 packages/react/src/components/presentation/SignIn/options/MicrosoftButton.tsx
 create mode 100644 packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx
 create mode 100644 packages/react/src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx
 create mode 100644 packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
 create mode 100644 packages/react/src/components/presentation/SignIn/options/SocialLogin.tsx
 create mode 100644 packages/react/src/components/presentation/SignIn/options/Totp.tsx
 create mode 100644 packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
 create mode 100644 packages/react/src/components/presentation/SignIn/options/types.ts
 create mode 100644 packages/react/src/components/presentation/SignIn/types.ts

diff --git a/packages/javascript/src/constants/ApplicationNativeAuthenticationConstants.ts b/packages/javascript/src/constants/ApplicationNativeAuthenticationConstants.ts
new file mode 100644
index 000000000..23f696de7
--- /dev/null
+++ b/packages/javascript/src/constants/ApplicationNativeAuthenticationConstants.ts
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Constants representing Application Native Authentication related configurations and constants.
+ */
+const ApplicationNativeAuthenticationConstants = {
+  SupportedAuthenticators: {
+    IdentifierFirst: 'SWRlbnRpZmllckV4ZWN1dG9yOkxPQ0FM',
+    EmailOtp: 'ZW1haWwtb3RwLWF1dGhlbnRpY2F0b3I6TE9DQUw',
+    Totp: 'dG90cDpMT0NBTA',
+    UsernamePassword: 'QmFzaWNBdXRoZW50aWNhdG9yOkxPQ0FM',
+    PushNotification: 'cHVzaC1ub3RpZmljYXRpb24tYXV0aGVudGljYXRvcjpMT0NBTA',
+    Passkey: 'RklET0F1dGhlbnRpY2F0b3I6TE9DQUw',
+    SmsOtp: 'c21zLW90cC1hdXRoZW50aWNhdG9yOkxPQ0FM',
+    MagicLink: 'TWFnaWNMaW5rQXV0aGVudGljYXRvcjpMT0NBTA',
+    Google: 'R29vZ2xlT0lEQ0F1dGhlbnRpY2F0b3I6R29vZ2xl',
+    Github: 'R2l0aHViQXV0aGVudGljYXRvcjpHaXRIdWI',
+    Microsoft: 'T3BlbklEQ29ubmVjdEF1dGhlbnRpY2F0b3I6TWljcm9zb2Z0',
+    Facebook: 'RmFjZWJvb2tBdXRoZW50aWNhdG9yOkZhY2Vib29r',
+    LinkedIn: 'TGlua2VkSW5PSURDOkxpbmtlZElu',
+    SignInWithEthereum: 'T3BlbklEQ29ubmVjdEF1dGhlbnRpY2F0b3I6U2lnbiBJbiBXaXRoIEV0aGVyZXVt',
+  },
+} as const;
+
+export default ApplicationNativeAuthenticationConstants;
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index dc3fc468b..6f170c73d 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -25,6 +25,7 @@ export {default as initializeApplicationNativeAuthentication} from './api/initia
 export {default as handleApplicationNativeAuthentication} from './api/handleApplicationNativeAuthentication';
 export {default as getUserInfo} from './api/getUserInfo';
 
+export {default as ApplicationNativeAuthenticationConstants} from './constants/ApplicationNativeAuthenticationConstants';
 export {default as TokenConstants} from './constants/TokenConstants';
 export {default as OIDCRequestConstants} from './constants/OIDCRequestConstants';
 
@@ -44,6 +45,7 @@ export {
   ApplicationNativeAuthenticationHandleResponse,
   ApplicationNativeAuthenticationAuthenticatorParamType,
   ApplicationNativeAuthenticationAuthenticatorPromptType,
+  ApplicationNativeAuthenticationAuthenticatorKnownIdPType,
 } from './models/application-native-authentication';
 export {AsgardeoClient, SignInOptions, SignOutOptions} from './models/client';
 export {BaseConfig, Config, Preferences, ThemePreferences, I18nPreferences} from './models/config';
diff --git a/packages/javascript/src/models/application-native-authentication.ts b/packages/javascript/src/models/application-native-authentication.ts
index 9f14963aa..04a9afbcc 100644
--- a/packages/javascript/src/models/application-native-authentication.ts
+++ b/packages/javascript/src/models/application-native-authentication.ts
@@ -73,6 +73,10 @@ export enum ApplicationNativeAuthenticationAuthenticatorExtendedParamType {
   Otp = 'OTPCode',
 }
 
+export enum ApplicationNativeAuthenticationAuthenticatorKnownIdPType {
+  Local = 'LOCAL',
+}
+
 export enum ApplicationNativeAuthenticationAuthenticatorPromptType {
   /**
    * Prompt for user input, typically for username/password or similar credentials.
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index 90c123421..7d78d19bd 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -18,33 +18,16 @@
 
 import {
   ApplicationNativeAuthenticationAuthenticator,
-  ApplicationNativeAuthenticationAuthenticatorParamType,
   ApplicationNativeAuthenticationInitiateResponse,
   ApplicationNativeAuthenticationHandleResponse,
-  resolveFieldName,
-  resolveFieldType,
-  FieldType,
   ApplicationNativeAuthenticationStepType,
 } from '@asgardeo/browser';
-import {FC, FormEvent, ReactElement} from 'react';
-import {createField} from '../../factories/FieldFactory';
-import Button from '../../primitives/Button/Button';
+import {FC, ReactElement, FormEvent} from 'react';
 import Card from '../../primitives/Card/Card';
 import Alert from '../../primitives/Alert/Alert';
 import Divider from '../../primitives/Divider/Divider';
 import useTranslation from '../../../hooks/useTranslation';
-
-/**
- * Interface for form field state.
- */
-interface FormField {
-  param: string;
-  type: ApplicationNativeAuthenticationAuthenticatorParamType;
-  displayName: string;
-  confidential: boolean;
-  required: boolean;
-  value: string;
-}
+import {createSignInOptionFromAuthenticator} from './options/SignInOptionFactory';
 
 /**
  * Props for the BaseSignIn component.
@@ -237,66 +220,6 @@ const BaseSignIn: FC<BaseSignInProps> = ({
     return authenticators.filter(auth => auth.idp !== 'LOCAL');
   };
 
-  /**
-   * Get display name for an authenticator.
-   */
-  const getAuthenticatorDisplayName = (authenticator: ApplicationNativeAuthenticationAuthenticator): string => {
-    // For federated providers, use the IDP name
-    if (authenticator.idp !== 'LOCAL') {
-      return `Continue with ${authenticator.idp}`;
-    }
-    // For local authenticators, use appropriate display text
-    if (authenticator.authenticator === 'Identifier First') {
-      return 'Sign In';
-    }
-    return authenticator.authenticator;
-  };
-
-  /**
-   * Get icon or styling hint for an authenticator.
-   */
-  const getAuthenticatorStyle = (
-    authenticator: ApplicationNativeAuthenticationAuthenticator,
-  ): {variant: 'solid' | 'outline'; color: string} => {
-    const idp = authenticator.idp.toLowerCase();
-
-    if (idp === 'google') {
-      return {variant: 'outline', color: 'secondary'};
-    } else if (idp === 'github') {
-      return {variant: 'solid', color: 'secondary'};
-    } else if (idp === 'local') {
-      return {variant: 'solid', color: 'primary'};
-    } else {
-      return {variant: 'outline', color: 'secondary'};
-    }
-  };
-
-  /**
-   * Get form fields from the current authenticator.
-   */
-  const getFormFields = (): FormField[] => {
-    if (!currentAuthenticator) return [];
-
-    return currentAuthenticator.metadata?.params
-      ?.sort((a, b) => a.order - b.order)
-      ?.map(param => ({
-        param: param.param,
-        type: param.type,
-        displayName: param.displayName,
-        confidential: param.confidential,
-        required: currentAuthenticator.requiredParams.includes(param.param),
-        value: formValues[param.param] || '',
-      }));
-  };
-
-  /**
-   * Handle form submission.
-   */
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    onSubmit(formValues);
-  };
-
   if (!isInitialized && isLoading) {
     return showLoading ? (
       <Card className={className}>
@@ -329,7 +252,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
                     : 'info';
 
                 return (
-                  <Alert key={index} variant={variant} style={{marginBottom: '0.5rem'}}>
+                  <Alert key={index} variant={variant} style={{marginBottom: '0.5rem'}} className={messageClassName}>
                     <Alert.Description>{message.message}</Alert.Description>
                   </Alert>
                 );
@@ -340,7 +263,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
 
         <Card.Content>
           {error && (
-            <Alert variant="error" style={{marginBottom: '1rem'}}>
+            <Alert variant="error" style={{marginBottom: '1rem'}} className={errorClassName}>
               <Alert.Title>Error</Alert.Title>
               <Alert.Description>{error}</Alert.Description>
             </Alert>
@@ -350,50 +273,28 @@ const BaseSignIn: FC<BaseSignInProps> = ({
           {usernamePasswordAuth && (
             <>
               <form
-                onSubmit={e => {
+                onSubmit={(e: FormEvent<HTMLFormElement>) => {
                   e.preventDefault();
-                  // Collect form data from formValues
                   const formData: Record<string, string> = {};
                   usernamePasswordAuth.metadata?.params?.forEach(param => {
                     formData[param.param] = formValues[param.param] || '';
                   });
-                  onAuthenticatorSelection?.(usernamePasswordAuth, formData);
+                  onAuthenticatorSelection!(usernamePasswordAuth, formData);
                 }}
               >
-                {usernamePasswordAuth.metadata?.params
-                  ?.sort((a, b) => a.order - b.order)
-                  ?.map(param => (
-                    <div key={param.param} style={{marginBottom: '1rem'}}>
-                      {createField({
-                        name: param.param,
-                        type:
-                          param.type === 'STRING'
-                            ? param.confidential
-                              ? FieldType.Password
-                              : FieldType.Text
-                            : FieldType.Text,
-                        label: param.displayName,
-                        required: usernamePasswordAuth.requiredParams.includes(param.param),
-                        value: formValues[param.param] || '',
-                        onChange: value => onInputChange(param.param, value),
-                        disabled: isLoading,
-                        className: inputClassName,
-                      })}
-                    </div>
-                  ))}
-
-                <Button
-                  type="submit"
-                  disabled={isLoading}
-                  loading={isLoading}
-                  className={buttonClassName}
-                  color="primary"
-                  variant="solid"
-                  fullWidth
-                  style={{marginBottom: '1rem'}}
-                >
-                  {submitButtonText}
-                </Button>
+                {createSignInOptionFromAuthenticator(
+                  usernamePasswordAuth,
+                  formValues,
+                  isLoading,
+                  onInputChange,
+                  onAuthenticatorSelection!,
+                  {
+                    inputClassName,
+                    buttonClassName,
+                    submitButtonText,
+                    error,
+                  },
+                )}
               </form>
 
               {/* Divider if there are federated options */}
@@ -404,23 +305,22 @@ const BaseSignIn: FC<BaseSignInProps> = ({
           {/* Federated login options */}
           {federatedAuths.length > 0 && (
             <div style={{display: 'flex', flexDirection: 'column', gap: '0.75rem'}}>
-              {federatedAuths.map(authenticator => {
-                const style = getAuthenticatorStyle(authenticator);
-                return (
-                  <Button
-                    key={authenticator.authenticatorId}
-                    variant={style.variant}
-                    color={style.color}
-                    fullWidth
-                    disabled={isLoading}
-                    loading={isLoading}
-                    onClick={() => onAuthenticatorSelection?.(authenticator)}
-                    className={buttonClassName}
-                  >
-                    {getAuthenticatorDisplayName(authenticator)}
-                  </Button>
-                );
-              })}
+              {federatedAuths.map(authenticator => (
+                <div key={authenticator.authenticatorId}>
+                  {createSignInOptionFromAuthenticator(
+                    authenticator,
+                    formValues,
+                    isLoading,
+                    onInputChange,
+                    onAuthenticatorSelection!,
+                    {
+                      inputClassName,
+                      buttonClassName,
+                      error,
+                    },
+                  )}
+                </div>
+              ))}
             </div>
           )}
         </Card.Content>
@@ -443,73 +343,66 @@ const BaseSignIn: FC<BaseSignInProps> = ({
     );
   }
 
-  const formFields = getFormFields();
-
+  // Single authenticator view
   return (
     <Card className={className}>
-      <form onSubmit={handleSubmit}>
-        <Card.Header>
-          <Card.Title level={2}>{t('signin.title')}</Card.Title>
-          {messages.length > 0 && (
-            <div style={{marginTop: '1rem'}}>
-              {messages.map((message, index) => {
-                const variant =
-                  message.type.toLowerCase() === 'error'
-                    ? 'error'
-                    : message.type.toLowerCase() === 'warning'
-                    ? 'warning'
-                    : message.type.toLowerCase() === 'success'
-                    ? 'success'
-                    : 'info';
-
-                return (
-                  <Alert key={index} variant={variant} style={{marginBottom: '0.5rem'}}>
-                    <Alert.Description>{message.message}</Alert.Description>
-                  </Alert>
-                );
-              })}
-            </div>
+      <Card.Header>
+        <Card.Title level={2}>{t('signin.title')}</Card.Title>
+        {messages.length > 0 && (
+          <div style={{marginTop: '1rem'}}>
+            {messages.map((message, index) => {
+              const variant =
+                message.type.toLowerCase() === 'error'
+                  ? 'error'
+                  : message.type.toLowerCase() === 'warning'
+                  ? 'warning'
+                  : message.type.toLowerCase() === 'success'
+                  ? 'success'
+                  : 'info';
+
+              return (
+                <Alert key={index} variant={variant} style={{marginBottom: '0.5rem'}} className={messageClassName}>
+                  <Alert.Description>{message.message}</Alert.Description>
+                </Alert>
+              );
+            })}
+          </div>
+        )}
+      </Card.Header>
+
+      <Card.Content>
+        {error && (
+          <Alert variant="error" style={{marginBottom: '1rem'}} className={errorClassName}>
+            <Alert.Title>Error</Alert.Title>
+            <Alert.Description>{error}</Alert.Description>
+          </Alert>
+        )}
+
+        <form
+          onSubmit={(e: FormEvent<HTMLFormElement>) => {
+            e.preventDefault();
+            const formData: Record<string, string> = {};
+            currentAuthenticator.metadata?.params?.forEach(param => {
+              formData[param.param] = formValues[param.param] || '';
+            });
+            onSubmit(formData);
+          }}
+        >
+          {createSignInOptionFromAuthenticator(
+            currentAuthenticator,
+            formValues,
+            isLoading,
+            onInputChange,
+            (authenticator, formData) => onSubmit(formData || formValues),
+            {
+              inputClassName,
+              buttonClassName,
+              submitButtonText,
+              error,
+            },
           )}
-        </Card.Header>
-
-        <Card.Content>
-          {error && (
-            <Alert variant="error" style={{marginBottom: '1rem'}}>
-              <Alert.Title>Error</Alert.Title>
-              <Alert.Description>{error}</Alert.Description>
-            </Alert>
-          )}
-
-          {formFields.map(field => (
-            <div key={field.param} style={{marginBottom: '1rem'}}>
-              {createField({
-                name: resolveFieldName(field),
-                type: resolveFieldType(field),
-                label: field.displayName,
-                required: field.required,
-                value: field.value,
-                onChange: value => onInputChange(resolveFieldName(field), value),
-                disabled: isLoading,
-                className: inputClassName,
-              })}
-            </div>
-          ))}
-        </Card.Content>
-
-        <Card.Footer>
-          <Button
-            type="submit"
-            disabled={isLoading}
-            loading={isLoading}
-            className={buttonClassName}
-            color="primary"
-            variant="solid"
-            fullWidth
-          >
-            {submitButtonText}
-          </Button>
-        </Card.Footer>
-      </form>
+        </form>
+      </Card.Content>
     </Card>
   );
 };
diff --git a/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx b/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
new file mode 100644
index 000000000..043a74ef5
--- /dev/null
+++ b/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  ApplicationNativeAuthenticationAuthenticator,
+  ApplicationNativeAuthenticationAuthenticatorParamType,
+  FieldType,
+} from '@asgardeo/browser';
+import {FC} from 'react';
+import {createField} from '../../../factories/FieldFactory';
+import Button from '../../../primitives/Button/Button';
+import OtpField from '../../../primitives/OtpField/OtpField';
+import {BaseSignInOptionProps} from './types';
+
+/**
+ * Email OTP Sign-In Option Component.
+ * Handles email-based OTP authentication.
+ */
+const EmailOtp: FC<BaseSignInOptionProps> = ({
+  authenticator,
+  formValues,
+  isLoading,
+  onInputChange,
+  onSubmit,
+  inputClassName = '',
+  buttonClassName = '',
+  submitButtonText = 'Verify Email OTP',
+}) => {
+  const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
+
+  // Check if this is an OTP field (typically has 'otpCode' or similar parameter)
+  const hasOtpField = formFields.some(
+    param => param.param.toLowerCase().includes('otp') || param.param.toLowerCase().includes('code'),
+  );
+
+  return (
+    <>
+      {formFields.map(param => {
+        const isOtpParam = param.param.toLowerCase().includes('otp') || param.param.toLowerCase().includes('code');
+
+        return (
+          <div key={param.param} style={{marginBottom: '1rem'}}>
+            {isOtpParam && hasOtpField ? (
+              <OtpField
+                length={6}
+                value={formValues[param.param] || ''}
+                onChange={event => onInputChange(param.param, event.target.value)}
+                disabled={isLoading}
+                className={inputClassName}
+                placeholder="Enter OTP"
+              />
+            ) : (
+              createField({
+                name: param.param,
+                type:
+                  param.type === ApplicationNativeAuthenticationAuthenticatorParamType.String
+                    ? param.confidential
+                      ? FieldType.Password
+                      : FieldType.Text
+                    : FieldType.Text,
+                label: param.displayName,
+                required: authenticator.requiredParams.includes(param.param),
+                value: formValues[param.param] || '',
+                onChange: value => onInputChange(param.param, value),
+                disabled: isLoading,
+                className: inputClassName,
+              })
+            )}
+          </div>
+        );
+      })}
+
+      <Button
+        type="submit"
+        disabled={isLoading}
+        loading={isLoading}
+        className={buttonClassName}
+        color="primary"
+        variant="solid"
+        fullWidth
+        style={{marginBottom: '1rem'}}
+      >
+        {submitButtonText}
+      </Button>
+    </>
+  );
+};
+
+export default EmailOtp;
diff --git a/packages/react/src/components/presentation/SignIn/options/FacebookButton.tsx b/packages/react/src/components/presentation/SignIn/options/FacebookButton.tsx
new file mode 100644
index 000000000..94d01f195
--- /dev/null
+++ b/packages/react/src/components/presentation/SignIn/options/FacebookButton.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
+import {FC} from 'react';
+import Button from '../../../primitives/Button/Button';
+import {BaseSignInOptionProps} from './types';
+
+/**
+ * Facebook Sign-In Button Component.
+ * Handles authentication with Facebook identity provider.
+ */
+const FacebookButton: FC<BaseSignInOptionProps> = ({
+  authenticator,
+  isLoading,
+  onSubmit,
+  buttonClassName = '',
+  submitButtonText = 'Continue with Facebook',
+}) => {
+  /**
+   * Handle button click.
+   */
+  const handleClick = () => {
+    onSubmit(authenticator);
+  };
+
+  return (
+    <Button
+      type="button"
+      variant="solid"
+      color="primary"
+      fullWidth
+      disabled={isLoading}
+      loading={isLoading}
+      onClick={handleClick}
+      className={buttonClassName}
+    >
+      {submitButtonText}
+    </Button>
+  );
+};
+
+export default FacebookButton;
diff --git a/packages/react/src/components/presentation/SignIn/options/GitHubButton.tsx b/packages/react/src/components/presentation/SignIn/options/GitHubButton.tsx
new file mode 100644
index 000000000..dfa0fe604
--- /dev/null
+++ b/packages/react/src/components/presentation/SignIn/options/GitHubButton.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
+import {FC} from 'react';
+import Button from '../../../primitives/Button/Button';
+import {BaseSignInOptionProps} from './types';
+
+/**
+ * GitHub Sign-In Button Component.
+ * Handles authentication with GitHub identity provider.
+ */
+const GitHubButton: FC<BaseSignInOptionProps> = ({
+  authenticator,
+  isLoading,
+  onSubmit,
+  buttonClassName = '',
+  submitButtonText = 'Continue with GitHub',
+}) => {
+  /**
+   * Handle button click.
+   */
+  const handleClick = () => {
+    onSubmit(authenticator);
+  };
+
+  return (
+    <Button
+      type="button"
+      variant="solid"
+      color="secondary"
+      fullWidth
+      disabled={isLoading}
+      loading={isLoading}
+      onClick={handleClick}
+      className={buttonClassName}
+    >
+      {submitButtonText}
+    </Button>
+  );
+};
+
+export default GitHubButton;
diff --git a/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx b/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx
new file mode 100644
index 000000000..5f708fa2d
--- /dev/null
+++ b/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
+import {FC} from 'react';
+import Button from '../../../primitives/Button/Button';
+import {BaseSignInOptionProps} from './types';
+
+/**
+ * Google Sign-In Button Component.
+ * Handles authentication with Google identity provider.
+ */
+const GoogleButton: FC<BaseSignInOptionProps> = ({
+  authenticator,
+  isLoading,
+  onSubmit,
+  buttonClassName = '',
+  submitButtonText = 'Continue with Google',
+}) => {
+  /**
+   * Handle button click.
+   */
+  const handleClick = () => {
+    onSubmit(authenticator);
+  };
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      color="secondary"
+      fullWidth
+      disabled={isLoading}
+      loading={isLoading}
+      onClick={handleClick}
+      className={buttonClassName}
+    >
+      {submitButtonText}
+    </Button>
+  );
+};
+
+export default GoogleButton;
diff --git a/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx b/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
new file mode 100644
index 000000000..86a6c790c
--- /dev/null
+++ b/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  ApplicationNativeAuthenticationAuthenticator,
+  ApplicationNativeAuthenticationAuthenticatorParamType,
+  FieldType,
+} from '@asgardeo/browser';
+import {FC} from 'react';
+import {createField} from '../../../factories/FieldFactory';
+import Button from '../../../primitives/Button/Button';
+import {BaseSignInOptionProps} from './types';
+
+/**
+ * Identifier First Sign-In Option Component.
+ * Handles identifier-first authentication flow (username first, then password).
+ */
+const IdentifierFirst: FC<BaseSignInOptionProps> = ({
+  authenticator,
+  formValues,
+  isLoading,
+  onInputChange,
+  onSubmit,
+  inputClassName = '',
+  buttonClassName = '',
+  submitButtonText = 'Continue',
+}) => {
+  const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
+
+  return (
+    <>
+      {formFields.map(param => (
+        <div key={param.param} style={{marginBottom: '1rem'}}>
+          {createField({
+            name: param.param,
+            type:
+              param.type === ApplicationNativeAuthenticationAuthenticatorParamType.String
+                ? param.confidential
+                  ? FieldType.Password
+                  : FieldType.Text
+                : FieldType.Text,
+            label: param.displayName,
+            required: authenticator.requiredParams.includes(param.param),
+            value: formValues[param.param] || '',
+            onChange: value => onInputChange(param.param, value),
+            disabled: isLoading,
+            className: inputClassName,
+          })}
+        </div>
+      ))}
+
+      <Button
+        type="submit"
+        disabled={isLoading}
+        loading={isLoading}
+        className={buttonClassName}
+        color="primary"
+        variant="solid"
+        fullWidth
+        style={{marginBottom: '1rem'}}
+      >
+        {submitButtonText}
+      </Button>
+    </>
+  );
+};
+
+export default IdentifierFirst;
diff --git a/packages/react/src/components/presentation/SignIn/options/LinkedInButton.tsx b/packages/react/src/components/presentation/SignIn/options/LinkedInButton.tsx
new file mode 100644
index 000000000..d88ecc5f7
--- /dev/null
+++ b/packages/react/src/components/presentation/SignIn/options/LinkedInButton.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
+import {FC} from 'react';
+import Button from '../../../primitives/Button/Button';
+import {BaseSignInOptionProps} from './types';
+
+/**
+ * LinkedIn Sign-In Button Component.
+ * Handles authentication with LinkedIn identity provider.
+ */
+const LinkedInButton: FC<BaseSignInOptionProps> = ({
+  authenticator,
+  isLoading,
+  onSubmit,
+  buttonClassName = '',
+  submitButtonText = 'Continue with LinkedIn',
+}) => {
+  /**
+   * Handle button click.
+   */
+  const handleClick = () => {
+    onSubmit(authenticator);
+  };
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      color="primary"
+      fullWidth
+      disabled={isLoading}
+      loading={isLoading}
+      onClick={handleClick}
+      className={buttonClassName}
+    >
+      {submitButtonText}
+    </Button>
+  );
+};
+
+export default LinkedInButton;
diff --git a/packages/react/src/components/presentation/SignIn/options/MicrosoftButton.tsx b/packages/react/src/components/presentation/SignIn/options/MicrosoftButton.tsx
new file mode 100644
index 000000000..cd9b97079
--- /dev/null
+++ b/packages/react/src/components/presentation/SignIn/options/MicrosoftButton.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
+import {FC} from 'react';
+import Button from '../../../primitives/Button/Button';
+import {BaseSignInOptionProps} from './types';
+
+/**
+ * Microsoft Sign-In Button Component.
+ * Handles authentication with Microsoft identity provider.
+ */
+const MicrosoftButton: FC<BaseSignInOptionProps> = ({
+  authenticator,
+  isLoading,
+  onSubmit,
+  buttonClassName = '',
+  submitButtonText = 'Continue with Microsoft',
+}) => {
+  /**
+   * Handle button click.
+   */
+  const handleClick = () => {
+    onSubmit(authenticator);
+  };
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      color="primary"
+      fullWidth
+      disabled={isLoading}
+      loading={isLoading}
+      onClick={handleClick}
+      className={buttonClassName}
+    >
+      {submitButtonText}
+    </Button>
+  );
+};
+
+export default MicrosoftButton;
diff --git a/packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx b/packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx
new file mode 100644
index 000000000..585436527
--- /dev/null
+++ b/packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx
@@ -0,0 +1,160 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  ApplicationNativeAuthenticationAuthenticator,
+  ApplicationNativeAuthenticationAuthenticatorKnownIdPType,
+} from '@asgardeo/browser';
+import {ReactElement} from 'react';
+import UsernamePassword from './UsernamePassword';
+import IdentifierFirst from './IdentifierFirst';
+import GoogleButton from './GoogleButton';
+import GitHubButton from './GitHubButton';
+import MicrosoftButton from './MicrosoftButton';
+import FacebookButton from './FacebookButton';
+import LinkedInButton from './LinkedInButton';
+import SignInWithEthereumButton from './SignInWithEthereumButton';
+import EmailOtp from './EmailOtp';
+import Totp from './Totp';
+import SmsOtp from './SmsOtp';
+import SocialLogin from './SocialLogin';
+import {SignInOptionType, SignInOptionFactoryProps} from './types';
+
+/**
+ * Determines the appropriate sign-in option type based on the authenticator configuration.
+ */
+export const getSignInOptionType = (authenticator: ApplicationNativeAuthenticationAuthenticator): SignInOptionType => {
+  // For federated/social login providers, check specific providers
+  if (authenticator.idp !== ApplicationNativeAuthenticationAuthenticatorKnownIdPType.Local) {
+    const provider = authenticator.idp.toLowerCase();
+
+    switch (provider) {
+      case 'google':
+        return SignInOptionType.GoogleButton;
+      case 'github':
+        return SignInOptionType.GitHubButton;
+      case 'microsoft':
+        return SignInOptionType.MicrosoftButton;
+      case 'facebook':
+        return SignInOptionType.FacebookButton;
+      case 'linkedin':
+        return SignInOptionType.LinkedInButton;
+      case 'sign in with ethereum':
+        return SignInOptionType.SignInWithEthereumButton;
+      default:
+        // Fallback to generic social login for unknown providers
+        return SignInOptionType.SocialLogin;
+    }
+  }
+
+  // For local authenticators, check the authenticator type
+  switch (authenticator.authenticator) {
+    case 'Username & Password':
+      return SignInOptionType.UsernamePassword;
+    case 'Identifier First':
+      return SignInOptionType.IdentifierFirst;
+    case 'TOTP':
+      return SignInOptionType.Totp;
+    case 'SMS OTP':
+      return SignInOptionType.SmsOtp;
+    case 'Email OTP':
+      return SignInOptionType.EmailOtp;
+    default:
+      // Default to username/password for unknown local authenticators
+      return SignInOptionType.UsernamePassword;
+  }
+};
+
+/**
+ * Factory function to create the appropriate sign-in option component.
+ */
+export const createSignInOption = (props: SignInOptionFactoryProps): ReactElement => {
+  const {optionType, ...optionProps} = props;
+
+  switch (optionType) {
+    case SignInOptionType.UsernamePassword:
+      return <UsernamePassword {...optionProps} />;
+
+    case SignInOptionType.IdentifierFirst:
+      return <IdentifierFirst {...optionProps} />;
+
+    case SignInOptionType.GoogleButton:
+      return <GoogleButton {...optionProps} />;
+
+    case SignInOptionType.GitHubButton:
+      return <GitHubButton {...optionProps} />;
+
+    case SignInOptionType.MicrosoftButton:
+      return <MicrosoftButton {...optionProps} />;
+
+    case SignInOptionType.FacebookButton:
+      return <FacebookButton {...optionProps} />;
+
+    case SignInOptionType.LinkedInButton:
+      return <LinkedInButton {...optionProps} />;
+
+    case SignInOptionType.SignInWithEthereumButton:
+      return <SignInWithEthereumButton {...optionProps} />;
+
+    case SignInOptionType.EmailOtp:
+      return <EmailOtp {...optionProps} />;
+
+    case SignInOptionType.Totp:
+      return <Totp {...optionProps} />;
+
+    case SignInOptionType.SmsOtp:
+      return <SmsOtp {...optionProps} />;
+
+    case SignInOptionType.SocialLogin:
+      // Legacy fallback for generic social login
+      return <SocialLogin {...optionProps} />;
+
+    default:
+      // Fallback to username/password
+      return <UsernamePassword {...optionProps} />;
+  }
+};
+
+/**
+ * Convenience function that automatically determines the option type and creates the component.
+ */
+export const createSignInOptionFromAuthenticator = (
+  authenticator: ApplicationNativeAuthenticationAuthenticator,
+  formValues: Record<string, string>,
+  isLoading: boolean,
+  onInputChange: (param: string, value: string) => void,
+  onSubmit: (authenticator: ApplicationNativeAuthenticationAuthenticator, formData?: Record<string, string>) => void,
+  options?: {
+    inputClassName?: string;
+    buttonClassName?: string;
+    submitButtonText?: string;
+    error?: string | null;
+  },
+): ReactElement => {
+  const optionType = getSignInOptionType(authenticator);
+
+  return createSignInOption({
+    optionType,
+    authenticator,
+    formValues,
+    isLoading,
+    onInputChange,
+    onSubmit,
+    ...options,
+  });
+};
diff --git a/packages/react/src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx b/packages/react/src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx
new file mode 100644
index 000000000..142e50ee1
--- /dev/null
+++ b/packages/react/src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
+import {FC} from 'react';
+import Button from '../../../primitives/Button/Button';
+import {BaseSignInOptionProps} from './types';
+
+/**
+ * Sign In With Ethereum Button Component.
+ * Handles authentication with Sign In With Ethereum identity provider.
+ */
+const SignInWithEthereumButton: FC<BaseSignInOptionProps> = ({
+  authenticator,
+  isLoading,
+  onSubmit,
+  buttonClassName = '',
+  submitButtonText = 'Sign In With Ethereum',
+}) => {
+  /**
+   * Handle button click.
+   */
+  const handleClick = () => {
+    onSubmit(authenticator);
+  };
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      color="secondary"
+      fullWidth
+      disabled={isLoading}
+      loading={isLoading}
+      onClick={handleClick}
+      className={buttonClassName}
+    >
+      {submitButtonText}
+    </Button>
+  );
+};
+
+export default SignInWithEthereumButton;
diff --git a/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx b/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
new file mode 100644
index 000000000..6ba7a63b8
--- /dev/null
+++ b/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  ApplicationNativeAuthenticationAuthenticator,
+  ApplicationNativeAuthenticationAuthenticatorParamType,
+  FieldType,
+} from '@asgardeo/browser';
+import {FC} from 'react';
+import {createField} from '../../../factories/FieldFactory';
+import Button from '../../../primitives/Button/Button';
+import OtpField from '../../../primitives/OtpField/OtpField';
+import {BaseSignInOptionProps} from './types';
+
+/**
+ * SMS OTP Sign-In Option Component.
+ * Handles SMS-based OTP authentication.
+ */
+const SmsOtp: FC<BaseSignInOptionProps> = ({
+  authenticator,
+  formValues,
+  isLoading,
+  onInputChange,
+  onSubmit,
+  inputClassName = '',
+  buttonClassName = '',
+  submitButtonText = 'Verify SMS OTP',
+}) => {
+  const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
+
+  // Check if this is an OTP field (typically has 'otpCode' or similar parameter)
+  const hasOtpField = formFields.some(
+    param => param.param.toLowerCase().includes('otp') || param.param.toLowerCase().includes('code'),
+  );
+
+  return (
+    <>
+      {formFields.map(param => {
+        const isOtpParam = param.param.toLowerCase().includes('otp') || param.param.toLowerCase().includes('code');
+
+        return (
+          <div key={param.param} style={{marginBottom: '1rem'}}>
+            {isOtpParam && hasOtpField ? (
+              <OtpField
+                length={6}
+                value={formValues[param.param] || ''}
+                onChange={event => onInputChange(param.param, event.target.value)}
+                disabled={isLoading}
+                className={inputClassName}
+                placeholder="Enter SMS OTP"
+              />
+            ) : (
+              createField({
+                name: param.param,
+                type:
+                  param.type === ApplicationNativeAuthenticationAuthenticatorParamType.String
+                    ? param.confidential
+                      ? FieldType.Password
+                      : FieldType.Text
+                    : FieldType.Text,
+                label: param.displayName,
+                required: authenticator.requiredParams.includes(param.param),
+                value: formValues[param.param] || '',
+                onChange: value => onInputChange(param.param, value),
+                disabled: isLoading,
+                className: inputClassName,
+              })
+            )}
+          </div>
+        );
+      })}
+
+      <Button
+        type="submit"
+        disabled={isLoading}
+        loading={isLoading}
+        className={buttonClassName}
+        color="primary"
+        variant="solid"
+        fullWidth
+        style={{marginBottom: '1rem'}}
+      >
+        {submitButtonText}
+      </Button>
+    </>
+  );
+};
+
+export default SmsOtp;
diff --git a/packages/react/src/components/presentation/SignIn/options/SocialLogin.tsx b/packages/react/src/components/presentation/SignIn/options/SocialLogin.tsx
new file mode 100644
index 000000000..64f5a3c20
--- /dev/null
+++ b/packages/react/src/components/presentation/SignIn/options/SocialLogin.tsx
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
+import {FC} from 'react';
+import Button from '../../../primitives/Button/Button';
+import {BaseSignInOptionProps} from './types';
+
+/**
+ * Social Login Sign-In Option Component.
+ * Handles authentication with external identity providers (Google, GitHub, etc.).
+ */
+const SocialLogin: FC<BaseSignInOptionProps> = ({authenticator, isLoading, onSubmit, buttonClassName = ''}) => {
+  /**
+   * Get display name for the social provider.
+   */
+  const getDisplayName = (): string => {
+    const providerName = authenticator.idp;
+    return `Continue with ${providerName}`;
+  };
+
+  /**
+   * Get styling configuration for the social provider.
+   */
+  const getProviderStyle = (): {variant: 'solid' | 'outline'; color: string} => {
+    const provider = authenticator.idp.toLowerCase();
+
+    switch (provider) {
+      case 'google':
+        return {variant: 'outline', color: 'secondary'};
+      case 'github':
+        return {variant: 'solid', color: 'secondary'};
+      case 'facebook':
+        return {variant: 'solid', color: 'primary'};
+      case 'microsoft':
+        return {variant: 'outline', color: 'primary'};
+      case 'apple':
+        return {variant: 'solid', color: 'secondary'};
+      default:
+        return {variant: 'outline', color: 'secondary'};
+    }
+  };
+
+  /**
+   * Handle button click.
+   */
+  const handleClick = () => {
+    onSubmit(authenticator);
+  };
+
+  const style = getProviderStyle();
+
+  return (
+    <Button
+      type="button"
+      variant={style.variant}
+      color={style.color}
+      fullWidth
+      disabled={isLoading}
+      loading={isLoading}
+      onClick={handleClick}
+      className={buttonClassName}
+    >
+      {getDisplayName()}
+    </Button>
+  );
+};
+
+export default SocialLogin;
diff --git a/packages/react/src/components/presentation/SignIn/options/Totp.tsx b/packages/react/src/components/presentation/SignIn/options/Totp.tsx
new file mode 100644
index 000000000..60d44da0a
--- /dev/null
+++ b/packages/react/src/components/presentation/SignIn/options/Totp.tsx
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  ApplicationNativeAuthenticationAuthenticator,
+  ApplicationNativeAuthenticationAuthenticatorParamType,
+  FieldType,
+} from '@asgardeo/browser';
+import {FC} from 'react';
+import {createField} from '../../../factories/FieldFactory';
+import Button from '../../../primitives/Button/Button';
+import OtpField from '../../../primitives/OtpField/OtpField';
+import {BaseSignInOptionProps} from './types';
+
+/**
+ * TOTP Sign-In Option Component.
+ * Handles Time-based One-Time Password (TOTP) authentication.
+ */
+const Totp: FC<BaseSignInOptionProps> = ({
+  authenticator,
+  formValues,
+  isLoading,
+  onInputChange,
+  onSubmit,
+  inputClassName = '',
+  buttonClassName = '',
+  submitButtonText = 'Verify TOTP',
+}) => {
+  const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
+
+  // Check if this is a TOTP field
+  const hasTotpField = formFields.some(
+    param => param.param.toLowerCase().includes('totp') || param.param.toLowerCase().includes('token'),
+  );
+
+  return (
+    <>
+      {formFields.map(param => {
+        const isTotpParam = param.param.toLowerCase().includes('totp') || param.param.toLowerCase().includes('token');
+
+        return (
+          <div key={param.param} style={{marginBottom: '1rem'}}>
+            {isTotpParam && hasTotpField ? (
+              <OtpField
+                length={6}
+                value={formValues[param.param] || ''}
+                onChange={event => onInputChange(param.param, event.target.value)}
+                disabled={isLoading}
+                className={inputClassName}
+                placeholder="Enter TOTP"
+              />
+            ) : (
+              createField({
+                name: param.param,
+                type:
+                  param.type === ApplicationNativeAuthenticationAuthenticatorParamType.String
+                    ? param.confidential
+                      ? FieldType.Password
+                      : FieldType.Text
+                    : FieldType.Text,
+                label: param.displayName,
+                required: authenticator.requiredParams.includes(param.param),
+                value: formValues[param.param] || '',
+                onChange: value => onInputChange(param.param, value),
+                disabled: isLoading,
+                className: inputClassName,
+              })
+            )}
+          </div>
+        );
+      })}
+
+      <Button
+        type="submit"
+        disabled={isLoading}
+        loading={isLoading}
+        className={buttonClassName}
+        color="primary"
+        variant="solid"
+        fullWidth
+        style={{marginBottom: '1rem'}}
+      >
+        {submitButtonText}
+      </Button>
+    </>
+  );
+};
+
+export default Totp;
diff --git a/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx b/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
new file mode 100644
index 000000000..109639802
--- /dev/null
+++ b/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  ApplicationNativeAuthenticationAuthenticator,
+  ApplicationNativeAuthenticationAuthenticatorParamType,
+  FieldType,
+} from '@asgardeo/browser';
+import {FC} from 'react';
+import {createField} from '../../../factories/FieldFactory';
+import Button from '../../../primitives/Button/Button';
+import {BaseSignInOptionProps} from './types';
+
+/**
+ * Username Password Sign-In Option Component.
+ * Handles traditional username and password authentication.
+ */
+const UsernamePassword: FC<BaseSignInOptionProps> = ({
+  authenticator,
+  formValues,
+  isLoading,
+  onInputChange,
+  onSubmit,
+  inputClassName = '',
+  buttonClassName = '',
+  submitButtonText = 'Sign In',
+}) => {
+  const formFields =
+    authenticator.metadata?.params?.sort((a, b) => a.order - b.order)?.filter(param => param.param !== 'totp') || []; // Exclude TOTP fields for username/password
+
+  return (
+    <>
+      {formFields.map(param => (
+        <div key={param.param} style={{marginBottom: '1rem'}}>
+          {createField({
+            name: param.param,
+            type:
+              param.type === ApplicationNativeAuthenticationAuthenticatorParamType.String
+                ? param.confidential
+                  ? FieldType.Password
+                  : FieldType.Text
+                : FieldType.Text,
+            label: param.displayName,
+            required: authenticator.requiredParams.includes(param.param),
+            value: formValues[param.param] || '',
+            onChange: value => onInputChange(param.param, value),
+            disabled: isLoading,
+            className: inputClassName,
+          })}
+        </div>
+      ))}
+
+      <Button
+        type="submit"
+        disabled={isLoading}
+        loading={isLoading}
+        className={buttonClassName}
+        color="primary"
+        variant="solid"
+        fullWidth
+        style={{marginBottom: '1rem'}}
+      >
+        {submitButtonText}
+      </Button>
+    </>
+  );
+};
+
+export default UsernamePassword;
diff --git a/packages/react/src/components/presentation/SignIn/options/types.ts b/packages/react/src/components/presentation/SignIn/options/types.ts
new file mode 100644
index 000000000..41098d296
--- /dev/null
+++ b/packages/react/src/components/presentation/SignIn/options/types.ts
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
+
+/**
+ * Base props that all sign-in option components share.
+ */
+export interface BaseSignInOptionProps {
+  /**
+   * The authenticator configuration.
+   */
+  authenticator: ApplicationNativeAuthenticationAuthenticator;
+
+  /**
+   * Current form values.
+   */
+  formValues: Record<string, string>;
+
+  /**
+   * Whether the component is in loading state.
+   */
+  isLoading: boolean;
+
+  /**
+   * Error message to display.
+   */
+  error?: string | null;
+
+  /**
+   * Callback function called when input values change.
+   */
+  onInputChange: (param: string, value: string) => void;
+
+  /**
+   * Callback function called when the option is submitted.
+   */
+  onSubmit: (authenticator: ApplicationNativeAuthenticationAuthenticator, formData?: Record<string, string>) => void;
+
+  /**
+   * Custom CSS class name for form inputs.
+   */
+  inputClassName?: string;
+
+  /**
+   * Custom CSS class name for the submit button.
+   */
+  buttonClassName?: string;
+
+  /**
+   * Text for the submit button.
+   */
+  submitButtonText?: string;
+}
+
+/**
+ * Sign-in option types.
+ */
+export enum SignInOptionType {
+  UsernamePassword = 'username-password',
+  IdentifierFirst = 'identifier-first',
+  GoogleButton = 'google-button',
+  GitHubButton = 'github-button',
+  MicrosoftButton = 'microsoft-button',
+  FacebookButton = 'facebook-button',
+  LinkedInButton = 'linkedin-button',
+  SignInWithEthereumButton = 'signin-with-ethereum-button',
+  EmailOtp = 'email-otp',
+  Totp = 'totp',
+  SmsOtp = 'sms-otp',
+  // Legacy SocialLogin for backwards compatibility
+  SocialLogin = 'social-login',
+}
+
+/**
+ * Factory function props.
+ */
+export interface SignInOptionFactoryProps extends BaseSignInOptionProps {
+  /**
+   * The type of sign-in option to create.
+   */
+  optionType: SignInOptionType;
+}
diff --git a/packages/react/src/components/presentation/SignIn/types.ts b/packages/react/src/components/presentation/SignIn/types.ts
new file mode 100644
index 000000000..0c27cb819
--- /dev/null
+++ b/packages/react/src/components/presentation/SignIn/types.ts
@@ -0,0 +1,148 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  ApplicationNativeAuthenticationAuthenticator,
+  ApplicationNativeAuthenticationAuthenticatorParamType,
+} from '@asgardeo/browser';
+
+/**
+ * Interface for form field state.
+ */
+export interface FormField {
+  param: string;
+  type: ApplicationNativeAuthenticationAuthenticatorParamType;
+  displayName: string;
+  confidential: boolean;
+  required: boolean;
+  value: string;
+}
+
+/**
+ * Base props that all authenticator components share.
+ */
+export interface BaseAuthenticatorProps {
+  /**
+   * The authenticator configuration.
+   */
+  authenticator: ApplicationNativeAuthenticationAuthenticator;
+
+  /**
+   * Current form values.
+   */
+  formValues: Record<string, string>;
+
+  /**
+   * Whether the component is in loading state.
+   */
+  isLoading: boolean;
+
+  /**
+   * Error message to display.
+   */
+  error?: string | null;
+
+  /**
+   * Callback function called when input values change.
+   */
+  onInputChange: (param: string, value: string) => void;
+
+  /**
+   * Callback function called when the authenticator is submitted.
+   */
+  onSubmit: (authenticator: ApplicationNativeAuthenticationAuthenticator, formData?: Record<string, string>) => void;
+
+  /**
+   * Custom CSS class name for form inputs.
+   */
+  inputClassName?: string;
+
+  /**
+   * Custom CSS class name for the submit button.
+   */
+  buttonClassName?: string;
+
+  /**
+   * Text for the submit button.
+   */
+  submitButtonText?: string;
+}
+
+/**
+ * Props for authenticator selector component.
+ */
+export interface AuthenticatorSelectorProps {
+  /**
+   * Available authenticators for selection.
+   */
+  authenticators: ApplicationNativeAuthenticationAuthenticator[];
+
+  /**
+   * Current form values.
+   */
+  formValues: Record<string, string>;
+
+  /**
+   * Whether the component is in loading state.
+   */
+  isLoading: boolean;
+
+  /**
+   * Error message to display.
+   */
+  error?: string | null;
+
+  /**
+   * Messages to display to the user.
+   */
+  messages: Array<{type: string; message: string}>;
+
+  /**
+   * Callback function called when input values change.
+   */
+  onInputChange: (param: string, value: string) => void;
+
+  /**
+   * Callback function called when an authenticator is selected.
+   */
+  onAuthenticatorSelection: (
+    authenticator: ApplicationNativeAuthenticationAuthenticator,
+    formData?: Record<string, string>,
+  ) => void;
+
+  /**
+   * Custom CSS class names.
+   */
+  inputClassName?: string;
+  buttonClassName?: string;
+  errorClassName?: string;
+  messageClassName?: string;
+
+  /**
+   * Text for the submit button.
+   */
+  submitButtonText?: string;
+}
+
+/**
+ * Style configuration for authenticators.
+ */
+export interface AuthenticatorStyle {
+  variant: 'solid' | 'outline';
+  color: string;
+}
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index bc6eb5532..00adeb49e 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -61,6 +61,22 @@ export * from './components/presentation/SignIn/BaseSignIn';
 export {default as SignIn} from './components/presentation/SignIn/SignIn';
 export * from './components/presentation/SignIn/SignIn';
 
+// Sign-In Options
+export {default as IdentifierFirst} from './components/presentation/SignIn/options/IdentifierFirst';
+export {default as UsernamePassword} from './components/presentation/SignIn/options/UsernamePassword';
+export {default as GoogleButton} from './components/presentation/SignIn/options/GoogleButton';
+export {default as GitHubButton} from './components/presentation/SignIn/options/GitHubButton';
+export {default as MicrosoftButton} from './components/presentation/SignIn/options/MicrosoftButton';
+export {default as FacebookButton} from './components/presentation/SignIn/options/FacebookButton';
+export {default as LinkedInButton} from './components/presentation/SignIn/options/LinkedInButton';
+export {default as SignInWithEthereumButton} from './components/presentation/SignIn/options/SignInWithEthereumButton';
+export {default as EmailOtp} from './components/presentation/SignIn/options/EmailOtp';
+export {default as Totp} from './components/presentation/SignIn/options/Totp';
+export {default as SmsOtp} from './components/presentation/SignIn/options/SmsOtp';
+export {default as SocialLogin} from './components/presentation/SignIn/options/SocialLogin';
+export * from './components/presentation/SignIn/options/types';
+export * from './components/presentation/SignIn/options/SignInOptionFactory';
+
 export {default as User} from './components/presentation/User';
 export * from './components/presentation/User';
 

From e983b3950fa1edfd70447bc028e60249f0dcf703 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Thu, 12 Jun 2025 13:33:37 +0530
Subject: [PATCH 068/131] refactor(react): Update sign-in option imports and
 remove unused types file

---
 ...pplicationNativeAuthenticationConstants.ts |   2 +-
 .../presentation/SignIn/options/EmailOtp.tsx  |   2 +-
 .../SignIn/options/FacebookButton.tsx         |   2 +-
 .../SignIn/options/GitHubButton.tsx           |   2 +-
 .../SignIn/options/GoogleButton.tsx           |   2 +-
 .../SignIn/options/IdentifierFirst.tsx        |   2 +-
 .../SignIn/options/LinkedInButton.tsx         |   2 +-
 .../SignIn/options/MicrosoftButton.tsx        |   2 +-
 .../SignIn/options/SignInOptionFactory.tsx    | 163 +++++++++---------
 .../options/SignInWithEthereumButton.tsx      |   2 +-
 .../presentation/SignIn/options/SmsOtp.tsx    |   2 +-
 .../SignIn/options/SocialLogin.tsx            |   2 +-
 .../presentation/SignIn/options/Totp.tsx      |   2 +-
 .../SignIn/options/UsernamePassword.tsx       |   2 +-
 .../presentation/SignIn/options/types.ts      |  98 -----------
 packages/react/src/index.ts                   |   1 -
 16 files changed, 97 insertions(+), 191 deletions(-)
 delete mode 100644 packages/react/src/components/presentation/SignIn/options/types.ts

diff --git a/packages/javascript/src/constants/ApplicationNativeAuthenticationConstants.ts b/packages/javascript/src/constants/ApplicationNativeAuthenticationConstants.ts
index 23f696de7..f0e60dc79 100644
--- a/packages/javascript/src/constants/ApplicationNativeAuthenticationConstants.ts
+++ b/packages/javascript/src/constants/ApplicationNativeAuthenticationConstants.ts
@@ -30,7 +30,7 @@ const ApplicationNativeAuthenticationConstants = {
     SmsOtp: 'c21zLW90cC1hdXRoZW50aWNhdG9yOkxPQ0FM',
     MagicLink: 'TWFnaWNMaW5rQXV0aGVudGljYXRvcjpMT0NBTA',
     Google: 'R29vZ2xlT0lEQ0F1dGhlbnRpY2F0b3I6R29vZ2xl',
-    Github: 'R2l0aHViQXV0aGVudGljYXRvcjpHaXRIdWI',
+    GitHub: 'R2l0aHViQXV0aGVudGljYXRvcjpHaXRIdWI',
     Microsoft: 'T3BlbklEQ29ubmVjdEF1dGhlbnRpY2F0b3I6TWljcm9zb2Z0',
     Facebook: 'RmFjZWJvb2tBdXRoZW50aWNhdG9yOkZhY2Vib29r',
     LinkedIn: 'TGlua2VkSW5PSURDOkxpbmtlZElu',
diff --git a/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx b/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
index 043a74ef5..ea490b4ed 100644
--- a/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
@@ -25,7 +25,7 @@ import {FC} from 'react';
 import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
 import OtpField from '../../../primitives/OtpField/OtpField';
-import {BaseSignInOptionProps} from './types';
+import {BaseSignInOptionProps} from './SignInOptionFactory';
 
 /**
  * Email OTP Sign-In Option Component.
diff --git a/packages/react/src/components/presentation/SignIn/options/FacebookButton.tsx b/packages/react/src/components/presentation/SignIn/options/FacebookButton.tsx
index 94d01f195..108f96313 100644
--- a/packages/react/src/components/presentation/SignIn/options/FacebookButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/FacebookButton.tsx
@@ -19,7 +19,7 @@
 import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
-import {BaseSignInOptionProps} from './types';
+import {BaseSignInOptionProps} from './SignInOptionFactory';
 
 /**
  * Facebook Sign-In Button Component.
diff --git a/packages/react/src/components/presentation/SignIn/options/GitHubButton.tsx b/packages/react/src/components/presentation/SignIn/options/GitHubButton.tsx
index dfa0fe604..fc1609fa7 100644
--- a/packages/react/src/components/presentation/SignIn/options/GitHubButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/GitHubButton.tsx
@@ -19,7 +19,7 @@
 import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
-import {BaseSignInOptionProps} from './types';
+import {BaseSignInOptionProps} from './SignInOptionFactory';
 
 /**
  * GitHub Sign-In Button Component.
diff --git a/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx b/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx
index 5f708fa2d..99bcaadc1 100644
--- a/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx
@@ -19,7 +19,7 @@
 import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
-import {BaseSignInOptionProps} from './types';
+import {BaseSignInOptionProps} from './SignInOptionFactory';
 
 /**
  * Google Sign-In Button Component.
diff --git a/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx b/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
index 86a6c790c..c526aeebd 100644
--- a/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
@@ -24,7 +24,7 @@ import {
 import {FC} from 'react';
 import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
-import {BaseSignInOptionProps} from './types';
+import {BaseSignInOptionProps} from './SignInOptionFactory';
 
 /**
  * Identifier First Sign-In Option Component.
diff --git a/packages/react/src/components/presentation/SignIn/options/LinkedInButton.tsx b/packages/react/src/components/presentation/SignIn/options/LinkedInButton.tsx
index d88ecc5f7..d9eb88852 100644
--- a/packages/react/src/components/presentation/SignIn/options/LinkedInButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/LinkedInButton.tsx
@@ -19,7 +19,7 @@
 import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
-import {BaseSignInOptionProps} from './types';
+import {BaseSignInOptionProps} from './SignInOptionFactory';
 
 /**
  * LinkedIn Sign-In Button Component.
diff --git a/packages/react/src/components/presentation/SignIn/options/MicrosoftButton.tsx b/packages/react/src/components/presentation/SignIn/options/MicrosoftButton.tsx
index cd9b97079..9adcd509c 100644
--- a/packages/react/src/components/presentation/SignIn/options/MicrosoftButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/MicrosoftButton.tsx
@@ -19,7 +19,7 @@
 import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
-import {BaseSignInOptionProps} from './types';
+import {BaseSignInOptionProps} from './SignInOptionFactory';
 
 /**
  * Microsoft Sign-In Button Component.
diff --git a/packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx b/packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx
index 585436527..f10a007f6 100644
--- a/packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx
@@ -19,6 +19,7 @@
 import {
   ApplicationNativeAuthenticationAuthenticator,
   ApplicationNativeAuthenticationAuthenticatorKnownIdPType,
+  ApplicationNativeAuthenticationConstants,
 } from '@asgardeo/browser';
 import {ReactElement} from 'react';
 import UsernamePassword from './UsernamePassword';
@@ -33,105 +34,112 @@ import EmailOtp from './EmailOtp';
 import Totp from './Totp';
 import SmsOtp from './SmsOtp';
 import SocialLogin from './SocialLogin';
-import {SignInOptionType, SignInOptionFactoryProps} from './types';
 
 /**
- * Determines the appropriate sign-in option type based on the authenticator configuration.
+ * Base props that all sign-in option components share.
  */
-export const getSignInOptionType = (authenticator: ApplicationNativeAuthenticationAuthenticator): SignInOptionType => {
-  // For federated/social login providers, check specific providers
-  if (authenticator.idp !== ApplicationNativeAuthenticationAuthenticatorKnownIdPType.Local) {
-    const provider = authenticator.idp.toLowerCase();
-
-    switch (provider) {
-      case 'google':
-        return SignInOptionType.GoogleButton;
-      case 'github':
-        return SignInOptionType.GitHubButton;
-      case 'microsoft':
-        return SignInOptionType.MicrosoftButton;
-      case 'facebook':
-        return SignInOptionType.FacebookButton;
-      case 'linkedin':
-        return SignInOptionType.LinkedInButton;
-      case 'sign in with ethereum':
-        return SignInOptionType.SignInWithEthereumButton;
-      default:
-        // Fallback to generic social login for unknown providers
-        return SignInOptionType.SocialLogin;
-    }
-  }
-
-  // For local authenticators, check the authenticator type
-  switch (authenticator.authenticator) {
-    case 'Username & Password':
-      return SignInOptionType.UsernamePassword;
-    case 'Identifier First':
-      return SignInOptionType.IdentifierFirst;
-    case 'TOTP':
-      return SignInOptionType.Totp;
-    case 'SMS OTP':
-      return SignInOptionType.SmsOtp;
-    case 'Email OTP':
-      return SignInOptionType.EmailOtp;
-    default:
-      // Default to username/password for unknown local authenticators
-      return SignInOptionType.UsernamePassword;
-  }
-};
+export interface BaseSignInOptionProps {
+  /**
+   * The authenticator configuration.
+   */
+  authenticator: ApplicationNativeAuthenticationAuthenticator;
+
+  /**
+   * Current form values.
+   */
+  formValues: Record<string, string>;
+
+  /**
+   * Whether the component is in loading state.
+   */
+  isLoading: boolean;
+
+  /**
+   * Error message to display.
+   */
+  error?: string | null;
+
+  /**
+   * Callback function called when input values change.
+   */
+  onInputChange: (param: string, value: string) => void;
+
+  /**
+   * Callback function called when the option is submitted.
+   */
+  onSubmit: (authenticator: ApplicationNativeAuthenticationAuthenticator, formData?: Record<string, string>) => void;
+
+  /**
+   * Custom CSS class name for form inputs.
+   */
+  inputClassName?: string;
+
+  /**
+   * Custom CSS class name for the submit button.
+   */
+  buttonClassName?: string;
+
+  /**
+   * Text for the submit button.
+   */
+  submitButtonText?: string;
+}
 
 /**
- * Factory function to create the appropriate sign-in option component.
+ * Creates the appropriate sign-in option component based on the authenticator's ID.
  */
-export const createSignInOption = (props: SignInOptionFactoryProps): ReactElement => {
-  const {optionType, ...optionProps} = props;
-
-  switch (optionType) {
-    case SignInOptionType.UsernamePassword:
-      return <UsernamePassword {...optionProps} />;
+export const createSignInOption = (props: BaseSignInOptionProps): ReactElement => {
+  const {authenticator, ...optionProps} = props;
 
-    case SignInOptionType.IdentifierFirst:
-      return <IdentifierFirst {...optionProps} />;
+  // Use authenticatorId to determine the component type
+  switch (authenticator.authenticatorId) {
+    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.UsernamePassword:
+      return <UsernamePassword {...props} />;
 
-    case SignInOptionType.GoogleButton:
-      return <GoogleButton {...optionProps} />;
+    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.IdentifierFirst:
+      return <IdentifierFirst {...props} />;
 
-    case SignInOptionType.GitHubButton:
-      return <GitHubButton {...optionProps} />;
+    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Google:
+      return <GoogleButton {...props} />;
 
-    case SignInOptionType.MicrosoftButton:
-      return <MicrosoftButton {...optionProps} />;
+    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.GitHub:
+      return <GitHubButton {...props} />;
 
-    case SignInOptionType.FacebookButton:
-      return <FacebookButton {...optionProps} />;
+    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Microsoft:
+      return <MicrosoftButton {...props} />;
 
-    case SignInOptionType.LinkedInButton:
-      return <LinkedInButton {...optionProps} />;
+    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Facebook:
+      return <FacebookButton {...props} />;
 
-    case SignInOptionType.SignInWithEthereumButton:
-      return <SignInWithEthereumButton {...optionProps} />;
+    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.LinkedIn:
+      return <LinkedInButton {...props} />;
 
-    case SignInOptionType.EmailOtp:
-      return <EmailOtp {...optionProps} />;
+    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.SignInWithEthereum:
+      return <SignInWithEthereumButton {...props} />;
 
-    case SignInOptionType.Totp:
-      return <Totp {...optionProps} />;
+    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.EmailOtp:
+      return <EmailOtp {...props} />;
 
-    case SignInOptionType.SmsOtp:
-      return <SmsOtp {...optionProps} />;
+    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Totp:
+      return <Totp {...props} />;
 
-    case SignInOptionType.SocialLogin:
-      // Legacy fallback for generic social login
-      return <SocialLogin {...optionProps} />;
+    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.SmsOtp:
+      return <SmsOtp {...props} />;
 
     default:
-      // Fallback to username/password
-      return <UsernamePassword {...optionProps} />;
+      // Check if it's a federated authenticator (non-LOCAL idp)
+      if (authenticator.idp !== ApplicationNativeAuthenticationAuthenticatorKnownIdPType.Local) {
+        // For unknown federated authenticators, use generic social login
+        return <SocialLogin {...props} />;
+      }
+
+      // Fallback to username/password for unknown local authenticators
+      return <UsernamePassword {...props} />;
   }
 };
 
 /**
- * Convenience function that automatically determines the option type and creates the component.
+ * Convenience function that creates the appropriate sign-in option component from an authenticator.
  */
 export const createSignInOptionFromAuthenticator = (
   authenticator: ApplicationNativeAuthenticationAuthenticator,
@@ -146,10 +154,7 @@ export const createSignInOptionFromAuthenticator = (
     error?: string | null;
   },
 ): ReactElement => {
-  const optionType = getSignInOptionType(authenticator);
-
   return createSignInOption({
-    optionType,
     authenticator,
     formValues,
     isLoading,
diff --git a/packages/react/src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx b/packages/react/src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx
index 142e50ee1..6861425be 100644
--- a/packages/react/src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx
@@ -19,7 +19,7 @@
 import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
-import {BaseSignInOptionProps} from './types';
+import {BaseSignInOptionProps} from './SignInOptionFactory';
 
 /**
  * Sign In With Ethereum Button Component.
diff --git a/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx b/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
index 6ba7a63b8..c339d7b52 100644
--- a/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
@@ -25,7 +25,7 @@ import {FC} from 'react';
 import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
 import OtpField from '../../../primitives/OtpField/OtpField';
-import {BaseSignInOptionProps} from './types';
+import {BaseSignInOptionProps} from './SignInOptionFactory';
 
 /**
  * SMS OTP Sign-In Option Component.
diff --git a/packages/react/src/components/presentation/SignIn/options/SocialLogin.tsx b/packages/react/src/components/presentation/SignIn/options/SocialLogin.tsx
index 64f5a3c20..7fc07cf4e 100644
--- a/packages/react/src/components/presentation/SignIn/options/SocialLogin.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/SocialLogin.tsx
@@ -19,7 +19,7 @@
 import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
-import {BaseSignInOptionProps} from './types';
+import {BaseSignInOptionProps} from './SignInOptionFactory';
 
 /**
  * Social Login Sign-In Option Component.
diff --git a/packages/react/src/components/presentation/SignIn/options/Totp.tsx b/packages/react/src/components/presentation/SignIn/options/Totp.tsx
index 60d44da0a..60c3f7155 100644
--- a/packages/react/src/components/presentation/SignIn/options/Totp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/Totp.tsx
@@ -25,7 +25,7 @@ import {FC} from 'react';
 import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
 import OtpField from '../../../primitives/OtpField/OtpField';
-import {BaseSignInOptionProps} from './types';
+import {BaseSignInOptionProps} from './SignInOptionFactory';
 
 /**
  * TOTP Sign-In Option Component.
diff --git a/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx b/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
index 109639802..cf423480b 100644
--- a/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
@@ -24,7 +24,7 @@ import {
 import {FC} from 'react';
 import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
-import {BaseSignInOptionProps} from './types';
+import {BaseSignInOptionProps} from './SignInOptionFactory';
 
 /**
  * Username Password Sign-In Option Component.
diff --git a/packages/react/src/components/presentation/SignIn/options/types.ts b/packages/react/src/components/presentation/SignIn/options/types.ts
deleted file mode 100644
index 41098d296..000000000
--- a/packages/react/src/components/presentation/SignIn/options/types.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
-
-/**
- * Base props that all sign-in option components share.
- */
-export interface BaseSignInOptionProps {
-  /**
-   * The authenticator configuration.
-   */
-  authenticator: ApplicationNativeAuthenticationAuthenticator;
-
-  /**
-   * Current form values.
-   */
-  formValues: Record<string, string>;
-
-  /**
-   * Whether the component is in loading state.
-   */
-  isLoading: boolean;
-
-  /**
-   * Error message to display.
-   */
-  error?: string | null;
-
-  /**
-   * Callback function called when input values change.
-   */
-  onInputChange: (param: string, value: string) => void;
-
-  /**
-   * Callback function called when the option is submitted.
-   */
-  onSubmit: (authenticator: ApplicationNativeAuthenticationAuthenticator, formData?: Record<string, string>) => void;
-
-  /**
-   * Custom CSS class name for form inputs.
-   */
-  inputClassName?: string;
-
-  /**
-   * Custom CSS class name for the submit button.
-   */
-  buttonClassName?: string;
-
-  /**
-   * Text for the submit button.
-   */
-  submitButtonText?: string;
-}
-
-/**
- * Sign-in option types.
- */
-export enum SignInOptionType {
-  UsernamePassword = 'username-password',
-  IdentifierFirst = 'identifier-first',
-  GoogleButton = 'google-button',
-  GitHubButton = 'github-button',
-  MicrosoftButton = 'microsoft-button',
-  FacebookButton = 'facebook-button',
-  LinkedInButton = 'linkedin-button',
-  SignInWithEthereumButton = 'signin-with-ethereum-button',
-  EmailOtp = 'email-otp',
-  Totp = 'totp',
-  SmsOtp = 'sms-otp',
-  // Legacy SocialLogin for backwards compatibility
-  SocialLogin = 'social-login',
-}
-
-/**
- * Factory function props.
- */
-export interface SignInOptionFactoryProps extends BaseSignInOptionProps {
-  /**
-   * The type of sign-in option to create.
-   */
-  optionType: SignInOptionType;
-}
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 00adeb49e..ccc79d816 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -74,7 +74,6 @@ export {default as EmailOtp} from './components/presentation/SignIn/options/Emai
 export {default as Totp} from './components/presentation/SignIn/options/Totp';
 export {default as SmsOtp} from './components/presentation/SignIn/options/SmsOtp';
 export {default as SocialLogin} from './components/presentation/SignIn/options/SocialLogin';
-export * from './components/presentation/SignIn/options/types';
 export * from './components/presentation/SignIn/options/SignInOptionFactory';
 
 export {default as User} from './components/presentation/User';

From 4cce5aea40d3b008e5d42d9e658a764a12a89410 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Thu, 12 Jun 2025 13:36:19 +0530
Subject: [PATCH 069/131] chore(react): Replace hardcoded class names with
 vendor-prefixed classes in form components

---
 .../react/src/components/primitives/Checkbox/Checkbox.tsx | 3 ++-
 .../src/components/primitives/DatePicker/DatePicker.tsx   | 3 ++-
 .../react/src/components/primitives/OtpField/OtpField.tsx | 3 ++-
 .../react/src/components/primitives/Select/Select.tsx     | 8 +++++++-
 .../src/components/primitives/TextField/TextField.tsx     | 3 ++-
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/primitives/Checkbox/Checkbox.tsx b/packages/react/src/components/primitives/Checkbox/Checkbox.tsx
index 01076f95f..0285c260a 100644
--- a/packages/react/src/components/primitives/Checkbox/Checkbox.tsx
+++ b/packages/react/src/components/primitives/Checkbox/Checkbox.tsx
@@ -21,6 +21,7 @@ import {useTheme} from '../../../contexts/Theme/useTheme';
 import clsx from 'clsx';
 import FormControl from '../FormControl/FormControl';
 import InputLabel from '../InputLabel/InputLabel';
+import { withVendorCSSClassPrefix } from 'packages/browser/dist';
 
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {
   /**
@@ -65,7 +66,7 @@ const Checkbox: FC<CheckboxProps> = ({label, error, className, required, helperT
     <FormControl
       error={error}
       helperText={helperText}
-      className={clsx('asgardeo-checkbox', className)}
+      className={clsx(withVendorCSSClassPrefix('checkbox'), className)}
       helperTextMarginLeft={theme.spacing.unit * 3.5 + 'px'}
     >
       <div style={containerStyle}>
diff --git a/packages/react/src/components/primitives/DatePicker/DatePicker.tsx b/packages/react/src/components/primitives/DatePicker/DatePicker.tsx
index 8362bbd2e..8e8c224fb 100644
--- a/packages/react/src/components/primitives/DatePicker/DatePicker.tsx
+++ b/packages/react/src/components/primitives/DatePicker/DatePicker.tsx
@@ -21,6 +21,7 @@ import {useTheme} from '../../../contexts/Theme/useTheme';
 import clsx from 'clsx';
 import FormControl from '../FormControl/FormControl';
 import InputLabel from '../InputLabel/InputLabel';
+import {withVendorCSSClassPrefix} from 'packages/browser/dist';
 
 export interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {
   /**
@@ -82,7 +83,7 @@ const DatePicker: FC<DatePickerProps> = ({
     <FormControl
       error={error}
       helperText={helperText}
-      className={clsx('asgardeo-date-picker', className)}
+      className={clsx(withVendorCSSClassPrefix('date-picker'), className)}
       style={style}
     >
       {label && (
diff --git a/packages/react/src/components/primitives/OtpField/OtpField.tsx b/packages/react/src/components/primitives/OtpField/OtpField.tsx
index 587d39eed..daad20b17 100644
--- a/packages/react/src/components/primitives/OtpField/OtpField.tsx
+++ b/packages/react/src/components/primitives/OtpField/OtpField.tsx
@@ -21,6 +21,7 @@ import {useTheme} from '../../../contexts/Theme/useTheme';
 import clsx from 'clsx';
 import FormControl from '../FormControl/FormControl';
 import InputLabel from '../InputLabel/InputLabel';
+import {withVendorCSSClassPrefix} from 'packages/browser/dist';
 
 export interface OtpInputProps {
   /**
@@ -252,7 +253,7 @@ const OtpField: FC<OtpInputProps> = ({
     <FormControl
       error={error}
       helperText={helperText}
-      className={clsx('asgardeo-otp-input', className)}
+      className={clsx(withVendorCSSClassPrefix('otp-input'), className)}
       style={style}
       helperTextAlign="center"
     >
diff --git a/packages/react/src/components/primitives/Select/Select.tsx b/packages/react/src/components/primitives/Select/Select.tsx
index cd6513d5d..f7f84ca91 100644
--- a/packages/react/src/components/primitives/Select/Select.tsx
+++ b/packages/react/src/components/primitives/Select/Select.tsx
@@ -21,6 +21,7 @@ import {useTheme} from '../../../contexts/Theme/useTheme';
 import clsx from 'clsx';
 import FormControl from '../FormControl/FormControl';
 import InputLabel from '../InputLabel/InputLabel';
+import {withVendorCSSClassPrefix} from 'packages/browser/dist';
 
 export interface SelectOption {
   /**
@@ -96,7 +97,12 @@ const Select: FC<SelectProps> = ({
   };
 
   return (
-    <FormControl error={error} helperText={helperText} className={clsx('asgardeo-select', className)} style={style}>
+    <FormControl
+      error={error}
+      helperText={helperText}
+      className={clsx(withVendorCSSClassPrefix('select'), className)}
+      style={style}
+    >
       {label && (
         <InputLabel required={required} error={!!error}>
           {label}
diff --git a/packages/react/src/components/primitives/TextField/TextField.tsx b/packages/react/src/components/primitives/TextField/TextField.tsx
index d3f5344cf..196d0702f 100644
--- a/packages/react/src/components/primitives/TextField/TextField.tsx
+++ b/packages/react/src/components/primitives/TextField/TextField.tsx
@@ -21,6 +21,7 @@ import {useTheme} from '../../../contexts/Theme/useTheme';
 import clsx from 'clsx';
 import FormControl from '../FormControl/FormControl';
 import InputLabel from '../InputLabel/InputLabel';
+import { withVendorCSSClassPrefix } from 'packages/browser/dist';
 
 export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {
   /**
@@ -132,7 +133,7 @@ const TextField: FC<TextFieldProps> = ({
   };
 
   return (
-    <FormControl error={error} helperText={helperText} className={clsx('asgardeo-text-field', className)} style={style}>
+    <FormControl error={error} helperText={helperText} className={clsx(withVendorCSSClassPrefix('text-field'), className)} style={style}>
       {label && (
         <InputLabel required={required} error={!!error}>
           {label}

From 89d223395da4bf683017943bf2e6bb28c3260164 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Thu, 12 Jun 2025 13:56:37 +0530
Subject: [PATCH 070/131] chore(react): Refactor SignIn component to delegate
 UI logic to BaseSignIn and streamline authentication flow handling

---
 .../presentation/SignIn/BaseSignIn.tsx        | 465 +++++++++++++++---
 .../components/presentation/SignIn/SignIn.tsx | 368 +-------------
 2 files changed, 407 insertions(+), 426 deletions(-)

diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index 7d78d19bd..06b2b2f84 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -21,8 +21,13 @@ import {
   ApplicationNativeAuthenticationInitiateResponse,
   ApplicationNativeAuthenticationHandleResponse,
   ApplicationNativeAuthenticationStepType,
+  ApplicationNativeAuthenticationFlowStatus,
+  ApplicationNativeAuthenticationAuthenticatorPromptType,
+  AsgardeoAPIError,
+  withVendorCSSClassPrefix,
 } from '@asgardeo/browser';
-import {FC, ReactElement, FormEvent} from 'react';
+import {FC, ReactElement, FormEvent, useState, useEffect} from 'react';
+import {clsx} from 'clsx';
 import Card from '../../primitives/Card/Card';
 import Alert from '../../primitives/Alert/Alert';
 import Divider from '../../primitives/Divider/Divider';
@@ -34,56 +39,42 @@ import {createSignInOptionFromAuthenticator} from './options/SignInOptionFactory
  */
 export interface BaseSignInProps {
   /**
-   * Current authentication flow information.
+   * Function to initialize authentication flow.
+   * @returns Promise resolving to the initial authentication response.
    */
-  currentFlow: ApplicationNativeAuthenticationInitiateResponse | ApplicationNativeAuthenticationHandleResponse | null;
+  onInitialize: () => Promise<ApplicationNativeAuthenticationInitiateResponse>;
 
   /**
-   * Current authenticator information.
+   * Function to handle authentication steps.
+   * @param payload - The authentication payload.
+   * @returns Promise resolving to the authentication response.
    */
-  currentAuthenticator: ApplicationNativeAuthenticationAuthenticator | null;
+  onAuthenticate: (payload: {
+    flowId: string;
+    selectedAuthenticator: {
+      authenticatorId: string;
+      params: Record<string, string>;
+    };
+  }) => Promise<ApplicationNativeAuthenticationHandleResponse>;
 
   /**
-   * Form field values.
+   * Callback function called when authentication is successful.
+   * @param authData - The authentication data returned upon successful completion.
    */
-  formValues: Record<string, string>;
+  onSuccess?: (authData: Record<string, any>) => void;
 
   /**
-   * Whether the component is in loading state.
+   * Callback function called when authentication fails.
+   * @param error - The error that occurred during authentication.
    */
-  isLoading: boolean;
+  onError?: (error: Error) => void;
 
   /**
-   * Error message to display.
+   * Callback function called when authentication flow status changes.
+   * @param response - The current authentication response.
    */
-  error: string | null;
-
-  /**
-   * Messages to display to the user.
-   */
-  messages: Array<{type: string; message: string}>;
-
-  /**
-   * Whether the component has been initialized.
-   */
-  isInitialized: boolean;
-
-  /**
-   * Callback function called when form is submitted.
-   */
-  onSubmit: (formValues: Record<string, string>) => void;
-
-  /**
-   * Callback function called when input values change.
-   */
-  onInputChange: (param: string, value: string) => void;
-
-  /**
-   * Callback function called when an authenticator is selected from multiple options.
-   */
-  onAuthenticatorSelection?: (
-    authenticator: ApplicationNativeAuthenticationAuthenticator,
-    formData?: Record<string, string>,
+  onFlowChange?: (
+    response: ApplicationNativeAuthenticationInitiateResponse | ApplicationNativeAuthenticationHandleResponse,
   ) => void;
 
   /**
@@ -125,12 +116,27 @@ export interface BaseSignInProps {
    * Custom loading text.
    */
   loadingText?: string;
+
+  /**
+   * Apply default styling.
+   */
+  styled?: boolean;
+
+  /**
+   * Size variant for the component.
+   */
+  size?: 'small' | 'medium' | 'large';
+
+  /**
+   * Theme variant for the component.
+   */
+  variant?: 'default' | 'outlined' | 'filled';
 }
 
 /**
  * Base SignIn component that provides native authentication flow.
- * This component handles the presentation layer for authentication forms.
- * Now uses Card component for better visual structure.
+ * This component handles both the presentation layer and authentication flow logic.
+ * It accepts API functions as props to maintain framework independence.
  *
  * @example
  * ```tsx
@@ -139,14 +145,20 @@ export interface BaseSignInProps {
  * const MySignIn = () => {
  *   return (
  *     <BaseSignIn
- *       currentAuthenticator={authenticator}
- *       formValues={values}
- *       isLoading={loading}
- *       error={error}
- *       messages={messages}
- *       isInitialized={initialized}
- *       onSubmit={handleSubmit}
- *       onInputChange={handleInputChange}
+ *       onInitialize={async () => {
+ *         // Your API call to initialize authentication
+ *         return await initializeAuth();
+ *       }}
+ *       onAuthenticate={async (payload) => {
+ *         // Your API call to handle authentication
+ *         return await handleAuth(payload);
+ *       }}
+ *       onSuccess={(authData) => {
+ *         console.log('Success:', authData);
+ *       }}
+ *       onError={(error) => {
+ *         console.error('Error:', error);
+ *       }}
  *       className="max-w-md mx-auto"
  *     />
  *   );
@@ -154,16 +166,11 @@ export interface BaseSignInProps {
  * ```
  */
 const BaseSignIn: FC<BaseSignInProps> = ({
-  currentFlow,
-  currentAuthenticator,
-  formValues,
-  isLoading,
-  error,
-  messages,
-  isInitialized,
-  onSubmit,
-  onInputChange,
-  onAuthenticatorSelection,
+  onInitialize,
+  onAuthenticate,
+  onSuccess,
+  onError,
+  onFlowChange,
   className = '',
   inputClassName = '',
   buttonClassName = '',
@@ -172,8 +179,303 @@ const BaseSignIn: FC<BaseSignInProps> = ({
   submitButtonText = 'Sign In',
   showLoading = true,
   loadingText = 'Loading...',
+  styled = true,
+  size = 'medium',
+  variant = 'default',
 }) => {
   const {t} = useTranslation();
+  
+  // Internal state management
+  const [isLoading, setIsLoading] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [currentFlow, setCurrentFlow] = useState<ApplicationNativeAuthenticationInitiateResponse | null>(null);
+  const [currentAuthenticator, setCurrentAuthenticator] = useState<ApplicationNativeAuthenticationAuthenticator | null>(
+    null,
+  );
+  const [formValues, setFormValues] = useState<Record<string, string>>({});
+  const [error, setError] = useState<string | null>(null);
+  const [messages, setMessages] = useState<Array<{type: string; message: string}>>([]);
+
+  // Generate CSS classes
+  const containerClasses = clsx(
+    styled && [
+      withVendorCSSClassPrefix('signin'),
+      withVendorCSSClassPrefix(`signin--${size}`),
+      withVendorCSSClassPrefix(`signin--${variant}`),
+    ],
+    className,
+  );
+
+  const inputClasses = clsx(
+    styled && [
+      withVendorCSSClassPrefix('signin__input'),
+      size === 'small' && withVendorCSSClassPrefix('signin__input--small'),
+      size === 'large' && withVendorCSSClassPrefix('signin__input--large'),
+    ],
+    inputClassName,
+  );
+
+  const buttonClasses = clsx(
+    styled && [
+      withVendorCSSClassPrefix('signin__button'),
+      size === 'small' && withVendorCSSClassPrefix('signin__button--small'),
+      size === 'large' && withVendorCSSClassPrefix('signin__button--large'),
+      variant === 'outlined' && withVendorCSSClassPrefix('signin__button--outlined'),
+      variant === 'filled' && withVendorCSSClassPrefix('signin__button--filled'),
+    ],
+    buttonClassName,
+  );
+
+  const errorClasses = clsx(styled && [withVendorCSSClassPrefix('signin__error')], errorClassName);
+
+  const messageClasses = clsx(styled && [withVendorCSSClassPrefix('signin__messages')], messageClassName);
+
+  /**
+   * Setup form fields based on the current authenticator.
+   */
+  const setupFormFields = (authenticator: ApplicationNativeAuthenticationAuthenticator) => {
+    const initialValues: Record<string, string> = {};
+    authenticator.metadata?.params?.forEach(param => {
+      initialValues[param.param] = '';
+    });
+    setFormValues(initialValues);
+  };
+
+  /**
+   * Initialize the authentication flow.
+   */
+  const initializeFlow = async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await onInitialize();
+
+      setCurrentFlow(response);
+      setIsInitialized(true);
+      onFlowChange?.(response);
+
+      if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+        onSuccess?.((response as any).authData || {});
+        return;
+      }
+
+      if (response.nextStep?.authenticators?.length > 0) {
+        if (response.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' && response.nextStep.authenticators.length > 1) {
+          setCurrentAuthenticator(null);
+        } else {
+          const authenticator = response.nextStep.authenticators[0];
+          setCurrentAuthenticator(authenticator);
+          setupFormFields(authenticator);
+        }
+      }
+
+      if ('nextStep' in response && response.nextStep && 'messages' in response.nextStep) {
+        const stepMessages = (response.nextStep as any).messages || [];
+        setMessages(
+          stepMessages.map((msg: any) => ({
+            type: msg.type || 'INFO',
+            message: msg.message || '',
+          })),
+        );
+      }
+    } catch (err) {
+      const errorMessage = err instanceof AsgardeoAPIError ? err.message : 'Failed to initialize authentication';
+      setError(errorMessage);
+      onError?.(err as Error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  /**
+   * Handle form submission.
+   */
+  const handleSubmit = async (submittedValues: Record<string, string>) => {
+    if (!currentFlow || !currentAuthenticator) {
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    setMessages([]);
+
+    try {
+      const payload = {
+        flowId: currentFlow.flowId,
+        selectedAuthenticator: {
+          authenticatorId: currentAuthenticator.authenticatorId,
+          params: submittedValues,
+        },
+      };
+
+      const response = await onAuthenticate(payload);
+      onFlowChange?.(response);
+
+      if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+        onSuccess?.(response.authData);
+        return;
+      }
+
+      if (
+        response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
+        response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
+      ) {
+        setError('Authentication failed. Please check your credentials and try again.');
+        return;
+      }
+
+      if ('flowId' in response && 'nextStep' in response) {
+        const nextStepResponse = response as any;
+        setCurrentFlow(nextStepResponse);
+
+        if (nextStepResponse.nextStep?.authenticators?.length > 0) {
+          if (
+            nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
+            nextStepResponse.nextStep.authenticators.length > 1
+          ) {
+            setCurrentAuthenticator(null);
+          } else {
+            const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
+            setCurrentAuthenticator(nextAuthenticator);
+            setupFormFields(nextAuthenticator);
+          }
+        }
+
+        if (nextStepResponse.nextStep?.messages) {
+          setMessages(
+            nextStepResponse.nextStep.messages.map((msg: any) => ({
+              type: msg.type || 'INFO',
+              message: msg.message || '',
+            })),
+          );
+        }
+      }
+    } catch (err) {
+      const errorMessage = err instanceof AsgardeoAPIError ? err.message : 'Authentication failed';
+      setError(errorMessage);
+      onError?.(err as Error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  /**
+   * Handle authenticator selection for multi-option prompts.
+   */
+  const handleAuthenticatorSelection = async (
+    authenticator: ApplicationNativeAuthenticationAuthenticator,
+    formData?: Record<string, string>,
+  ) => {
+    if (!currentFlow) {
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    setMessages([]);
+
+    try {
+      if (
+        authenticator.metadata?.promptType === ApplicationNativeAuthenticationAuthenticatorPromptType.REDIRECTION_PROMPT
+      ) {
+        const payload = {
+          flowId: currentFlow.flowId,
+          selectedAuthenticator: {
+            authenticatorId: authenticator.authenticatorId,
+            params: {},
+          },
+        };
+
+        const response = await onAuthenticate(payload);
+        onFlowChange?.(response);
+
+        if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+          onSuccess?.(response.authData);
+          return;
+        }
+      } else {
+        if (formData) {
+          const payload = {
+            flowId: currentFlow.flowId,
+            selectedAuthenticator: {
+              authenticatorId: authenticator.authenticatorId,
+              params: formData,
+            },
+          };
+
+          const response = await onAuthenticate(payload);
+          onFlowChange?.(response);
+
+          if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+            onSuccess?.(response.authData);
+            return;
+          }
+
+          if (
+            response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
+            response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
+          ) {
+            setError('Authentication failed. Please check your credentials and try again.');
+            return;
+          }
+
+          if ('flowId' in response && 'nextStep' in response) {
+            const nextStepResponse = response as any;
+            setCurrentFlow(nextStepResponse);
+
+            if (nextStepResponse.nextStep?.authenticators?.length > 0) {
+              if (
+                nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
+                nextStepResponse.nextStep.authenticators.length > 1
+              ) {
+                setCurrentAuthenticator(null);
+              } else {
+                const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
+                setCurrentAuthenticator(nextAuthenticator);
+                setupFormFields(nextAuthenticator);
+              }
+            }
+
+            if (nextStepResponse.nextStep?.messages) {
+              setMessages(
+                nextStepResponse.nextStep.messages.map((msg: any) => ({
+                  type: msg.type || 'INFO',
+                  message: msg.message || '',
+                })),
+              );
+            }
+          }
+        } else {
+          setCurrentAuthenticator(authenticator);
+          setupFormFields(authenticator);
+        }
+      }
+    } catch (err) {
+      const errorMessage = err instanceof AsgardeoAPIError ? err.message : 'Authenticator selection failed';
+      setError(errorMessage);
+      onError?.(err as Error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  /**
+   * Handle input value changes.
+   */
+  const handleInputChange = (param: string, value: string) => {
+    setFormValues(prev => ({
+      ...prev,
+      [param]: value,
+    }));
+  };
+
+  // Initialize the flow on component mount
+  useEffect(() => {
+    if (!isInitialized) {
+      initializeFlow();
+    }
+  }, [isInitialized]);
 
   /**
    * Check if current flow has multiple authenticator options.
@@ -222,7 +524,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
 
   if (!isInitialized && isLoading) {
     return showLoading ? (
-      <Card className={className}>
+      <Card className={containerClasses}>
         <Card.Content>
           <p>{loadingText}</p>
         </Card.Content>
@@ -236,7 +538,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
     const federatedAuths = getFederatedAuthenticators();
 
     return (
-      <Card className={className}>
+      <Card className={containerClasses}>
         <Card.Header>
           <Card.Title level={2}>{t('signin.title')}</Card.Title>
           {messages.length > 0 && (
@@ -252,7 +554,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
                     : 'info';
 
                 return (
-                  <Alert key={index} variant={variant} style={{marginBottom: '0.5rem'}} className={messageClassName}>
+                  <Alert key={index} variant={variant} style={{marginBottom: '0.5rem'}} className={messageClasses}>
                     <Alert.Description>{message.message}</Alert.Description>
                   </Alert>
                 );
@@ -263,7 +565,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
 
         <Card.Content>
           {error && (
-            <Alert variant="error" style={{marginBottom: '1rem'}} className={errorClassName}>
+            <Alert variant="error" style={{marginBottom: '1rem'}} className={errorClasses}>
               <Alert.Title>Error</Alert.Title>
               <Alert.Description>{error}</Alert.Description>
             </Alert>
@@ -279,18 +581,17 @@ const BaseSignIn: FC<BaseSignInProps> = ({
                   usernamePasswordAuth.metadata?.params?.forEach(param => {
                     formData[param.param] = formValues[param.param] || '';
                   });
-                  onAuthenticatorSelection!(usernamePasswordAuth, formData);
+                  handleAuthenticatorSelection(usernamePasswordAuth, formData);
                 }}
-              >
-                {createSignInOptionFromAuthenticator(
+              >                {createSignInOptionFromAuthenticator(
                   usernamePasswordAuth,
                   formValues,
                   isLoading,
-                  onInputChange,
-                  onAuthenticatorSelection!,
+                  handleInputChange,
+                  handleAuthenticatorSelection,
                   {
-                    inputClassName,
-                    buttonClassName,
+                    inputClassName: inputClasses,
+                    buttonClassName: buttonClasses,
                     submitButtonText,
                     error,
                   },
@@ -311,11 +612,11 @@ const BaseSignIn: FC<BaseSignInProps> = ({
                     authenticator,
                     formValues,
                     isLoading,
-                    onInputChange,
-                    onAuthenticatorSelection!,
+                    handleInputChange,
+                    handleAuthenticatorSelection,
                     {
-                      inputClassName,
-                      buttonClassName,
+                      inputClassName: inputClasses,
+                      buttonClassName: buttonClasses,
                       error,
                     },
                   )}
@@ -330,7 +631,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
 
   if (!currentAuthenticator) {
     return (
-      <Card className={className}>
+      <Card className={containerClasses}>
         <Card.Content>
           {error && (
             <Alert variant="error">
@@ -345,7 +646,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
 
   // Single authenticator view
   return (
-    <Card className={className}>
+    <Card className={containerClasses}>
       <Card.Header>
         <Card.Title level={2}>{t('signin.title')}</Card.Title>
         {messages.length > 0 && (
@@ -361,7 +662,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
                   : 'info';
 
               return (
-                <Alert key={index} variant={variant} style={{marginBottom: '0.5rem'}} className={messageClassName}>
+                <Alert key={index} variant={variant} style={{marginBottom: '0.5rem'}} className={messageClasses}>
                   <Alert.Description>{message.message}</Alert.Description>
                 </Alert>
               );
@@ -372,7 +673,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
 
       <Card.Content>
         {error && (
-          <Alert variant="error" style={{marginBottom: '1rem'}} className={errorClassName}>
+          <Alert variant="error" style={{marginBottom: '1rem'}} className={errorClasses}>
             <Alert.Title>Error</Alert.Title>
             <Alert.Description>{error}</Alert.Description>
           </Alert>
@@ -385,18 +686,18 @@ const BaseSignIn: FC<BaseSignInProps> = ({
             currentAuthenticator.metadata?.params?.forEach(param => {
               formData[param.param] = formValues[param.param] || '';
             });
-            onSubmit(formData);
+            handleSubmit(formData);
           }}
         >
           {createSignInOptionFromAuthenticator(
             currentAuthenticator,
             formValues,
             isLoading,
-            onInputChange,
-            (authenticator, formData) => onSubmit(formData || formValues),
+            handleInputChange,
+            (authenticator, formData) => handleSubmit(formData || formValues),
             {
-              inputClassName,
-              buttonClassName,
+              inputClassName: inputClasses,
+              buttonClassName: buttonClasses,
               submitButtonText,
               error,
             },
diff --git a/packages/react/src/components/presentation/SignIn/SignIn.tsx b/packages/react/src/components/presentation/SignIn/SignIn.tsx
index 0ced1591a..e36ea6973 100644
--- a/packages/react/src/components/presentation/SignIn/SignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/SignIn.tsx
@@ -17,18 +17,11 @@
  */
 
 import {
-  initializeApplicationNativeAuthentication,
   handleApplicationNativeAuthentication,
   ApplicationNativeAuthenticationInitiateResponse,
   ApplicationNativeAuthenticationHandleResponse,
-  ApplicationNativeAuthenticationFlowStatus,
-  ApplicationNativeAuthenticationAuthenticator,
-  ApplicationNativeAuthenticationAuthenticatorPromptType,
-  AsgardeoAPIError,
-  withVendorCSSClassPrefix,
 } from '@asgardeo/browser';
-import {FC, useState, useEffect, ReactElement} from 'react';
-import {clsx} from 'clsx';
+import {FC} from 'react';
 import BaseSignIn from './BaseSignIn';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
 
@@ -94,7 +87,7 @@ export interface SignInProps {
 
 /**
  * A styled SignIn component that provides native authentication flow with pre-built styling.
- * This component handles the API calls and state management for authentication.
+ * This component handles the API calls for authentication and delegates UI logic to BaseSignIn.
  *
  * @example
  * ```tsx
@@ -103,13 +96,6 @@ export interface SignInProps {
  * const App = () => {
  *   return (
  *     <SignIn
- *       baseUrl="https://api.asgardeo.io/t/your-org"
- *       initialPayload={{
- *         client_id: 'your-client-id',
- *         response_type: 'code',
- *         scope: 'openid',
- *         redirect_uri: 'http://localhost:3000'
- *       }}
  *       onSuccess={(authData) => {
  *         console.log('Authentication successful:', authData);
  *         // Handle successful authentication (e.g., redirect, store tokens)
@@ -137,347 +123,41 @@ const SignIn: FC<SignInProps> = ({
   loadingText = 'Loading...',
 }) => {
   const {signIn, baseUrl} = useAsgardeo();
-  const [isLoading, setIsLoading] = useState(false);
-  const [isInitialized, setIsInitialized] = useState(false);
-  const [currentFlow, setCurrentFlow] = useState<ApplicationNativeAuthenticationInitiateResponse | null>(null);
-  const [currentAuthenticator, setCurrentAuthenticator] = useState<ApplicationNativeAuthenticationAuthenticator | null>(
-    null,
-  );
-  const [formValues, setFormValues] = useState<Record<string, string>>({});
-  const [error, setError] = useState<string | null>(null);
-  const [messages, setMessages] = useState<Array<{type: string; message: string}>>([]);
 
   /**
    * Initialize the authentication flow.
    */
-  const initializeFlow = async () => {
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const response = await signIn({response_mode: 'direct'});
-
-      setCurrentFlow(response);
-      setIsInitialized(true);
-      onFlowChange?.(response);
-
-      if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
-        // Flow completed immediately
-        onSuccess?.((response as any).authData || {});
-        return;
-      }
-
-      if (response.nextStep?.authenticators?.length > 0) {
-        // Check if this is a multi-options prompt
-        if (response.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' && response.nextStep.authenticators.length > 1) {
-          // Don't auto-select when there are multiple options, let user choose
-          setCurrentAuthenticator(null);
-        } else {
-          // Single authenticator or AUTHENTICATOR_PROMPT, select automatically
-          const authenticator = response.nextStep.authenticators[0];
-          setCurrentAuthenticator(authenticator);
-          setupFormFields(authenticator);
-        }
-      }
-
-      // Handle any messages from the response
-      if ('nextStep' in response && response.nextStep && 'messages' in response.nextStep) {
-        const stepMessages = (response.nextStep as any).messages || [];
-        setMessages(
-          stepMessages.map((msg: any) => ({
-            type: msg.type || 'INFO',
-            message: msg.message || '',
-          })),
-        );
-      }
-    } catch (err) {
-      const errorMessage = err instanceof AsgardeoAPIError ? err.message : 'Failed to initialize authentication';
-      setError(errorMessage);
-      onError?.(err as Error);
-    } finally {
-      setIsLoading(false);
-    }
+  const handleInitialize = async (): Promise<ApplicationNativeAuthenticationInitiateResponse> => {
+    return await signIn({response_mode: 'direct'});
   };
 
   /**
-   * Setup form fields based on the current authenticator.
+   * Handle authentication steps.
    */
-  const setupFormFields = (authenticator: ApplicationNativeAuthenticationAuthenticator) => {
-    // Initialize form values for the authenticator's parameters
-    const initialValues: Record<string, string> = {};
-    authenticator.metadata?.params?.forEach(param => {
-      initialValues[param.param] = '';
+  const handleAuthenticate = async (payload: {
+    flowId: string;
+    selectedAuthenticator: {
+      authenticatorId: string;
+      params: Record<string, string>;
+    };
+  }): Promise<ApplicationNativeAuthenticationHandleResponse> => {
+    return await handleApplicationNativeAuthentication({
+      baseUrl,
+      payload,
     });
-    setFormValues(initialValues);
-  };
-
-  /**
-   * Handle form submission.
-   */
-  const handleSubmit = async (submittedValues: Record<string, string>) => {
-    if (!currentFlow || !currentAuthenticator) {
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-    setMessages([]);
-
-    try {
-      const payload = {
-        flowId: currentFlow.flowId,
-        selectedAuthenticator: {
-          authenticatorId: currentAuthenticator.authenticatorId,
-          params: submittedValues,
-        },
-      };
-
-      const response = await handleApplicationNativeAuthentication({
-        baseUrl,
-        payload,
-      });
-
-      onFlowChange?.(response);
-
-      if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
-        onSuccess?.(response.authData);
-        return;
-      }
-
-      if (
-        response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
-        response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
-      ) {
-        setError('Authentication failed. Please check your credentials and try again.');
-        return;
-      }
-
-      // Continue with next step
-      if ('flowId' in response && 'nextStep' in response) {
-        const nextStepResponse = response as any;
-        setCurrentFlow(nextStepResponse);
-
-        if (nextStepResponse.nextStep?.authenticators?.length > 0) {
-          // Check if this is a multi-options prompt
-          if (
-            nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
-            nextStepResponse.nextStep.authenticators.length > 1
-          ) {
-            // Don't auto-select when there are multiple options, let user choose
-            setCurrentAuthenticator(null);
-          } else {
-            // Single authenticator or AUTHENTICATOR_PROMPT, select automatically
-            const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
-            setCurrentAuthenticator(nextAuthenticator);
-            setupFormFields(nextAuthenticator);
-          }
-        }
-
-        // Handle any messages from the response
-        if (nextStepResponse.nextStep?.messages) {
-          setMessages(
-            nextStepResponse.nextStep.messages.map((msg: any) => ({
-              type: msg.type || 'INFO',
-              message: msg.message || '',
-            })),
-          );
-        }
-      }
-    } catch (err) {
-      const errorMessage = err instanceof AsgardeoAPIError ? err.message : 'Authentication failed';
-      setError(errorMessage);
-      onError?.(err as Error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  /**
-   * Handle authenticator selection for multi-option prompts.
-   */
-  const handleAuthenticatorSelection = async (
-    authenticator: ApplicationNativeAuthenticationAuthenticator,
-    formData?: Record<string, string>,
-  ) => {
-    if (!currentFlow) {
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-    setMessages([]);
-
-    try {
-      // Check if this is a redirection-based authenticator (like Google, GitHub)
-      if (
-        authenticator.metadata?.promptType === ApplicationNativeAuthenticationAuthenticatorPromptType.REDIRECTION_PROMPT
-      ) {
-        // For redirection-based authentication, just select the authenticator
-        const payload = {
-          flowId: currentFlow.flowId,
-          selectedAuthenticator: {
-            authenticatorId: authenticator.authenticatorId,
-            params: {},
-          },
-        };
-
-        const response = await handleApplicationNativeAuthentication({
-          baseUrl,
-          payload,
-        });
-
-        onFlowChange?.(response);
-
-        if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
-          onSuccess?.(response.authData);
-          return;
-        }
-
-        // Handle redirection if needed - for now, we'll handle redirection in a future iteration
-        // TODO: Implement redirection handling for federated authentication
-      } else {
-        // For user prompt authenticators (like username/password)
-        if (formData) {
-          // Submit the form data directly
-          const payload = {
-            flowId: currentFlow.flowId,
-            selectedAuthenticator: {
-              authenticatorId: authenticator.authenticatorId,
-              params: formData,
-            },
-          };
-
-          const response = await handleApplicationNativeAuthentication({
-            baseUrl,
-            payload,
-          });
-
-          onFlowChange?.(response);
-
-          if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
-            onSuccess?.(response.authData);
-            return;
-          }
-
-          if (
-            response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
-            response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
-          ) {
-            setError('Authentication failed. Please check your credentials and try again.');
-            return;
-          }
-
-          // Continue with next step
-          if ('flowId' in response && 'nextStep' in response) {
-            const nextStepResponse = response as any;
-            setCurrentFlow(nextStepResponse);
-
-            if (nextStepResponse.nextStep?.authenticators?.length > 0) {
-              // Check if this is a multi-options prompt
-              if (
-                nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
-                nextStepResponse.nextStep.authenticators.length > 1
-              ) {
-                // Don't auto-select when there are multiple options, let user choose
-                setCurrentAuthenticator(null);
-              } else {
-                // Single authenticator or AUTHENTICATOR_PROMPT, select automatically
-                const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
-                setCurrentAuthenticator(nextAuthenticator);
-                setupFormFields(nextAuthenticator);
-              }
-            }
-
-            // Handle any messages from the response
-            if (nextStepResponse.nextStep?.messages) {
-              setMessages(
-                nextStepResponse.nextStep.messages.map((msg: any) => ({
-                  type: msg.type || 'INFO',
-                  message: msg.message || '',
-                })),
-              );
-            }
-          }
-        } else {
-          // Just set up the form for the authenticator
-          setCurrentAuthenticator(authenticator);
-          setupFormFields(authenticator);
-        }
-      }
-    } catch (err) {
-      const errorMessage = err instanceof AsgardeoAPIError ? err.message : 'Authenticator selection failed';
-      setError(errorMessage);
-      onError?.(err as Error);
-    } finally {
-      setIsLoading(false);
-    }
   };
 
-  /**
-   * Handle input value changes.
-   */
-  const handleInputChange = (param: string, value: string) => {
-    setFormValues(prev => ({
-      ...prev,
-      [param]: value,
-    }));
-  };
-
-  // Initialize the flow on component mount
-  useEffect(() => {
-    if (!isInitialized) {
-      initializeFlow();
-    }
-  }, [isInitialized]);
-
-  const containerClasses = clsx(
-    styled && [
-      withVendorCSSClassPrefix('signin'),
-      withVendorCSSClassPrefix(`signin--${size}`),
-      withVendorCSSClassPrefix(`signin--${variant}`),
-    ],
-    className,
-  );
-
-  const inputClasses = clsx(
-    styled && [
-      withVendorCSSClassPrefix('signin__input'),
-      size === 'small' && withVendorCSSClassPrefix('signin__input--small'),
-      size === 'large' && withVendorCSSClassPrefix('signin__input--large'),
-    ],
-  );
-
-  const buttonClasses = clsx(
-    styled && [
-      withVendorCSSClassPrefix('signin__button'),
-      size === 'small' && withVendorCSSClassPrefix('signin__button--small'),
-      size === 'large' && withVendorCSSClassPrefix('signin__button--large'),
-      variant === 'outlined' && withVendorCSSClassPrefix('signin__button--outlined'),
-      variant === 'filled' && withVendorCSSClassPrefix('signin__button--filled'),
-    ],
-  );
-
-  const errorClasses = clsx(styled && [withVendorCSSClassPrefix('signin__error')]);
-
-  const messageClasses = clsx(styled && [withVendorCSSClassPrefix('signin__messages')]);
-
   return (
     <BaseSignIn
-      currentFlow={currentFlow}
-      currentAuthenticator={currentAuthenticator}
-      formValues={formValues}
-      isLoading={isLoading}
-      error={error}
-      messages={messages}
-      isInitialized={isInitialized}
-      onSubmit={handleSubmit}
-      onInputChange={handleInputChange}
-      onAuthenticatorSelection={handleAuthenticatorSelection}
-      className={containerClasses}
-      inputClassName={inputClasses}
-      buttonClassName={buttonClasses}
-      errorClassName={errorClasses}
-      messageClassName={messageClasses}
+      onInitialize={handleInitialize}
+      onAuthenticate={handleAuthenticate}
+      onSuccess={onSuccess}
+      onError={onError}
+      onFlowChange={onFlowChange}
+      className={className}
+      styled={styled}
+      size={size}
+      variant={variant}
       submitButtonText={submitButtonText}
       showLoading={showLoading}
       loadingText={loadingText}

From 4a20e9580130c14285c79ee60ab0794b65ce4629 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Thu, 12 Jun 2025 13:56:48 +0530
Subject: [PATCH 071/131] chore(react): fix otp placeholders

---
 .../src/components/presentation/SignIn/options/EmailOtp.tsx     | 2 +-
 .../react/src/components/presentation/SignIn/options/SmsOtp.tsx | 2 +-
 .../react/src/components/presentation/SignIn/options/Totp.tsx   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx b/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
index ea490b4ed..564b413b8 100644
--- a/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
@@ -62,7 +62,7 @@ const EmailOtp: FC<BaseSignInOptionProps> = ({
                 onChange={event => onInputChange(param.param, event.target.value)}
                 disabled={isLoading}
                 className={inputClassName}
-                placeholder="Enter OTP"
+                placeholder="."
               />
             ) : (
               createField({
diff --git a/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx b/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
index c339d7b52..16a9a939f 100644
--- a/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
@@ -62,7 +62,7 @@ const SmsOtp: FC<BaseSignInOptionProps> = ({
                 onChange={event => onInputChange(param.param, event.target.value)}
                 disabled={isLoading}
                 className={inputClassName}
-                placeholder="Enter SMS OTP"
+                placeholder="."
               />
             ) : (
               createField({
diff --git a/packages/react/src/components/presentation/SignIn/options/Totp.tsx b/packages/react/src/components/presentation/SignIn/options/Totp.tsx
index 60c3f7155..ecdd14fc2 100644
--- a/packages/react/src/components/presentation/SignIn/options/Totp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/Totp.tsx
@@ -62,7 +62,7 @@ const Totp: FC<BaseSignInOptionProps> = ({
                 onChange={event => onInputChange(param.param, event.target.value)}
                 disabled={isLoading}
                 className={inputClassName}
-                placeholder="Enter TOTP"
+                placeholder="."
               />
             ) : (
               createField({

From 11a739699ad0f1d4244cae1ae2a982373346d757 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Thu, 12 Jun 2025 14:26:32 +0530
Subject: [PATCH 072/131] feat(react): Add start icons to social sign-in
 buttons for improved UX

---
 .../SignIn/options/FacebookButton.tsx         |  7 +++-
 .../SignIn/options/GitHubButton.tsx           |  8 ++++-
 .../SignIn/options/GoogleButton.tsx           | 11 +++++-
 .../SignIn/options/LinkedInButton.tsx         |  6 +++-
 .../SignIn/options/MicrosoftButton.tsx        | 10 +++++-
 .../options/SignInWithEthereumButton.tsx      |  6 +++-
 .../SignIn/options/SocialLogin.tsx            | 34 ++++---------------
 7 files changed, 49 insertions(+), 33 deletions(-)

diff --git a/packages/react/src/components/presentation/SignIn/options/FacebookButton.tsx b/packages/react/src/components/presentation/SignIn/options/FacebookButton.tsx
index 108f96313..36a3db6f7 100644
--- a/packages/react/src/components/presentation/SignIn/options/FacebookButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/FacebookButton.tsx
@@ -16,7 +16,6 @@
  * under the License.
  */
 
-import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
@@ -49,6 +48,12 @@ const FacebookButton: FC<BaseSignInOptionProps> = ({
       loading={isLoading}
       onClick={handleClick}
       className={buttonClassName}
+      startIcon={
+        <svg width="18" height="18" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+          <path fill="#1976D2" d="M448,0H64C28.704,0,0,28.704,0,64v384c0,35.296,28.704,64,64,64h384c35.296,0,64-28.704,64-64V64C512,28.704,483.296,0,448,0z" />
+          <path fill="#FAFAFA" d="M432,256h-80v-64c0-17.664,14.336-16,32-16h32V96h-64l0,0c-53.024,0-96,42.976-96,96v64h-64v80h64v176h96V336h48L432,256z" />
+        </svg>
+      }
     >
       {submitButtonText}
     </Button>
diff --git a/packages/react/src/components/presentation/SignIn/options/GitHubButton.tsx b/packages/react/src/components/presentation/SignIn/options/GitHubButton.tsx
index fc1609fa7..fe7abb361 100644
--- a/packages/react/src/components/presentation/SignIn/options/GitHubButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/GitHubButton.tsx
@@ -16,7 +16,6 @@
  * under the License.
  */
 
-import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
@@ -49,6 +48,13 @@ const GitHubButton: FC<BaseSignInOptionProps> = ({
       loading={isLoading}
       onClick={handleClick}
       className={buttonClassName}
+      startIcon={
+        <svg width="18" height="18" viewBox="0 0 67.91 66.233" xmlns="http://www.w3.org/2000/svg">
+          <g transform="translate(-386.96 658.072)">
+            <path d="M420.915-658.072a33.956,33.956,0,0,0-33.955,33.955,33.963,33.963,0,0,0,23.221,32.22c1.7.314,2.32-.737,2.32-1.633,0-.81-.031-3.484-.046-6.322-9.446,2.054-11.44-4.006-11.44-4.006-1.545-3.925-3.77-4.968-3.77-4.968-3.081-2.107.232-2.064.232-2.064,3.41.239,5.205,3.5,5.205,3.5,3.028,5.19,7.943,3.69,9.881,2.822a7.23,7.23,0,0,1,2.156-4.54c-7.542-.859-15.47-3.77-15.47-16.781a13.141,13.141,0,0,1,3.5-9.114,12.2,12.2,0,0,1,.329-8.986s2.851-.913,9.34,3.48a32.545,32.545,0,0,1,8.5-1.143,32.629,32.629,0,0,1,8.506,1.143c6.481-4.393,9.328-3.48,9.328-3.48a12.185,12.185,0,0,1,.333,8.986,13.115,13.115,0,0,1,3.495,9.114c0,13.042-7.943,15.913-15.5,16.754,1.218,1.054,2.3,3.12,2.3,6.288,0,4.543-.039,8.2-.039,9.318,0,.9.611,1.962,2.332,1.629a33.959,33.959,0,0,0,23.2-32.215,33.955,33.955,0,0,0-33.955-33.955" fill="#ffffff" />
+          </g>
+        </svg>
+      }
     >
       {submitButtonText}
     </Button>
diff --git a/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx b/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx
index 99bcaadc1..97dc20c6b 100644
--- a/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx
@@ -16,7 +16,6 @@
  * under the License.
  */
 
-import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
@@ -49,6 +48,16 @@ const GoogleButton: FC<BaseSignInOptionProps> = ({
       loading={isLoading}
       onClick={handleClick}
       className={buttonClassName}
+      startIcon={
+        <svg width="18" height="18" viewBox="0 0 67.91 67.901" xmlns="http://www.w3.org/2000/svg">
+          <g transform="translate(-0.001 -0.001)">
+            <path d="M15.049,160.965l-2.364,8.824-8.639.183a34.011,34.011,0,0,1-.25-31.7h0l7.691,1.41,3.369,7.645a20.262,20.262,0,0,0,.19,13.642Z" transform="translate(0 -119.93)" fill="#fbbb00" />
+            <path d="M294.24,208.176A33.939,33.939,0,0,1,282.137,241h0l-9.687-.494-1.371-8.559a20.235,20.235,0,0,0,8.706-10.333H261.628V208.176Z" transform="translate(-226.93 -180.567)" fill="#518ef8" />
+            <path d="M81.668,328.8h0a33.962,33.962,0,0,1-51.161-10.387l11-9.006a20.192,20.192,0,0,0,29.1,10.338Z" transform="translate(-26.463 -268.374)" fill="#28b446" />
+            <path d="M80.451,7.816l-11,9A20.19,20.19,0,0,0,39.686,27.393l-11.06-9.055h0A33.959,33.959,0,0,1,80.451,7.816Z" transform="translate(-24.828)" fill="#f14336" />
+          </g>
+        </svg>
+      }
     >
       {submitButtonText}
     </Button>
diff --git a/packages/react/src/components/presentation/SignIn/options/LinkedInButton.tsx b/packages/react/src/components/presentation/SignIn/options/LinkedInButton.tsx
index d9eb88852..eee5229a0 100644
--- a/packages/react/src/components/presentation/SignIn/options/LinkedInButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/LinkedInButton.tsx
@@ -16,7 +16,6 @@
  * under the License.
  */
 
-import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
@@ -49,6 +48,11 @@ const LinkedInButton: FC<BaseSignInOptionProps> = ({
       loading={isLoading}
       onClick={handleClick}
       className={buttonClassName}
+      startIcon={
+        <svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path fill="#0077B5" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+        </svg>
+      }
     >
       {submitButtonText}
     </Button>
diff --git a/packages/react/src/components/presentation/SignIn/options/MicrosoftButton.tsx b/packages/react/src/components/presentation/SignIn/options/MicrosoftButton.tsx
index 9adcd509c..2448ed679 100644
--- a/packages/react/src/components/presentation/SignIn/options/MicrosoftButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/MicrosoftButton.tsx
@@ -16,7 +16,6 @@
  * under the License.
  */
 
-import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
@@ -49,6 +48,15 @@ const MicrosoftButton: FC<BaseSignInOptionProps> = ({
       loading={isLoading}
       onClick={handleClick}
       className={buttonClassName}
+      startIcon={
+        <svg width="14" height="14" viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg">
+          <path fill="#f3f3f3" d="M0 0h23v23H0z" />
+          <path fill="#f35325" d="M1 1h10v10H1z" />
+          <path fill="#81bc06" d="M12 1h10v10H12z" />
+          <path fill="#05a6f0" d="M1 12h10v10H1z" />
+          <path fill="#ffba08" d="M12 12h10v10H12z" />
+        </svg>
+      }
     >
       {submitButtonText}
     </Button>
diff --git a/packages/react/src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx b/packages/react/src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx
index 6861425be..0bddc1511 100644
--- a/packages/react/src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx
@@ -16,7 +16,6 @@
  * under the License.
  */
 
-import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
@@ -49,6 +48,11 @@ const SignInWithEthereumButton: FC<BaseSignInOptionProps> = ({
       loading={isLoading}
       onClick={handleClick}
       className={buttonClassName}
+      startIcon={
+        <svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path fill="#627EEA" d="M11.944 17.97L4.58 13.62 11.943 24l7.37-10.38-7.372 4.35h.003zM12.056 0L4.69 12.223l7.365 4.354 7.365-4.35L12.056 0z"/>
+        </svg>
+      }
     >
       {submitButtonText}
     </Button>
diff --git a/packages/react/src/components/presentation/SignIn/options/SocialLogin.tsx b/packages/react/src/components/presentation/SignIn/options/SocialLogin.tsx
index 7fc07cf4e..2d06acbba 100644
--- a/packages/react/src/components/presentation/SignIn/options/SocialLogin.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/SocialLogin.tsx
@@ -16,7 +16,6 @@
  * under the License.
  */
 
-import {ApplicationNativeAuthenticationAuthenticator} from '@asgardeo/browser';
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
@@ -34,28 +33,6 @@ const SocialLogin: FC<BaseSignInOptionProps> = ({authenticator, isLoading, onSub
     return `Continue with ${providerName}`;
   };
 
-  /**
-   * Get styling configuration for the social provider.
-   */
-  const getProviderStyle = (): {variant: 'solid' | 'outline'; color: string} => {
-    const provider = authenticator.idp.toLowerCase();
-
-    switch (provider) {
-      case 'google':
-        return {variant: 'outline', color: 'secondary'};
-      case 'github':
-        return {variant: 'solid', color: 'secondary'};
-      case 'facebook':
-        return {variant: 'solid', color: 'primary'};
-      case 'microsoft':
-        return {variant: 'outline', color: 'primary'};
-      case 'apple':
-        return {variant: 'solid', color: 'secondary'};
-      default:
-        return {variant: 'outline', color: 'secondary'};
-    }
-  };
-
   /**
    * Handle button click.
    */
@@ -63,18 +40,21 @@ const SocialLogin: FC<BaseSignInOptionProps> = ({authenticator, isLoading, onSub
     onSubmit(authenticator);
   };
 
-  const style = getProviderStyle();
-
   return (
     <Button
       type="button"
-      variant={style.variant}
-      color={style.color}
+      variant="outline"
+      color="secondary"
       fullWidth
       disabled={isLoading}
       loading={isLoading}
       onClick={handleClick}
       className={buttonClassName}
+      startIcon={
+        <svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path fill="#6B7280" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+        </svg>
+      }
     >
       {getDisplayName()}
     </Button>

From 65b4936c9c38592f4a74fb92e14a12b8c1affae8 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Thu, 12 Jun 2025 20:36:00 +0530
Subject: [PATCH 073/131] feat: Enhance Sign-In Options with Localization and
 Multi-Option Support

- Added localization support to Sign-In buttons (GitHub, Google, LinkedIn, Microsoft, Ethereum, Identifier First, SMS OTP, TOTP, Username/Password).
- Introduced MultiOptionButton component for authenticators that do not require immediate user input.
- Replaced SocialLogin component with SocialButton for better clarity.
- Updated I18nProvider to support deep merging of user-provided translation bundles.
- Enhanced useTranslation hook to merge component-level preferences with global ones.
- Refactored SignInOptionFactory to utilize MultiOptionButton for authenticators without parameters.
- Improved SVG icons for better readability and maintainability.
---
 packages/javascript/src/i18n/en-US.ts         |  97 ++++++
 packages/javascript/src/index.ts              |   3 +-
 packages/javascript/src/models/config.ts      |   6 +-
 .../src/utils/__tests__/deepMerge.test.ts     | 307 ++++++++++++++++++
 packages/javascript/src/utils/deepMerge.ts    |  91 ++++++
 .../actions/SignInButton/BaseSignInButton.tsx |   7 +-
 .../actions/SignInButton/SignInButton.tsx     |  43 ++-
 .../SignOutButton/BaseSignOutButton.tsx       |   7 +-
 .../actions/SignOutButton/SignOutButton.tsx   |  45 ++-
 .../actions/SignUpButton/BaseSignUpButton.tsx |   7 +-
 .../actions/SignUpButton/SignUpButton.tsx     |  45 ++-
 .../presentation/SignIn/BaseSignIn.tsx        | 150 ++++-----
 .../components/presentation/SignIn/SignIn.tsx |   7 -
 .../presentation/SignIn/options/EmailOtp.tsx  |   7 +-
 .../SignIn/options/FacebookButton.tsx         |  17 +-
 .../SignIn/options/GitHubButton.tsx           |  11 +-
 .../SignIn/options/GoogleButton.tsx           |  30 +-
 .../SignIn/options/IdentifierFirst.tsx        |   7 +-
 .../SignIn/options/LinkedInButton.tsx         |  11 +-
 .../SignIn/options/MicrosoftButton.tsx        |   6 +-
 .../SignIn/options/MultiOptionButton.tsx      | 154 +++++++++
 .../SignIn/options/SignInOptionFactory.tsx    |  31 +-
 .../options/SignInWithEthereumButton.tsx      |  12 +-
 .../presentation/SignIn/options/SmsOtp.tsx    |   7 +-
 .../{SocialLogin.tsx => SocialButton.tsx}     |  18 +-
 .../presentation/SignIn/options/Totp.tsx      |   7 +-
 .../SignIn/options/UsernamePassword.tsx       |   7 +-
 .../react/src/contexts/I18n/I18nProvider.tsx  |  18 +-
 packages/react/src/hooks/useTranslation.ts    |  92 +++++-
 packages/react/src/index.ts                   |   3 +-
 30 files changed, 1087 insertions(+), 166 deletions(-)
 create mode 100644 packages/javascript/src/utils/__tests__/deepMerge.test.ts
 create mode 100644 packages/javascript/src/utils/deepMerge.ts
 create mode 100644 packages/react/src/components/presentation/SignIn/options/MultiOptionButton.tsx
 rename packages/react/src/components/presentation/SignIn/options/{SocialLogin.tsx => SocialButton.tsx} (76%)

diff --git a/packages/javascript/src/i18n/en-US.ts b/packages/javascript/src/i18n/en-US.ts
index 1fd1dd231..eb8a34e29 100644
--- a/packages/javascript/src/i18n/en-US.ts
+++ b/packages/javascript/src/i18n/en-US.ts
@@ -19,7 +19,104 @@
 import {I18nTranslations, I18nMetadata, I18nBundle} from '../models/i18n';
 
 const translations: I18nTranslations = {
+  /* |---------------------------------------------------------------| */
+  /* |                        Elements                               | */
+  /* |---------------------------------------------------------------| */
+
+  //* Buttons */
+  'elements.buttons.signIn': 'Sign In',
+  'elements.buttons.signOut': 'Sign Out',
+  'elements.buttons.signUp': 'Sign Up',
+  'elements.buttons.facebook': 'Continue With Facebook',
+  'elements.buttons.google': 'Continue With Google',
+  'elements.buttons.github': 'Continue With GitHub',
+  'elements.buttons.microsoft': 'Continue With Microsoft',
+  'elements.buttons.linkedin': 'Continue With LinkedIn',
+  'elements.buttons.ethereum': 'Continue With Sign In Ethereum',
+  'elements.buttons.multi.option': 'Continue With {connection}',
+  'elements.buttons.social': 'Continue With {connection}',
+
+  /* |---------------------------------------------------------------| */
+  /* |                        Widgets                                | */
+  /* |---------------------------------------------------------------| */
+
+  /* Email OTP */
+  'email.otp.submit.button': 'Continue',
+  
+  /* Identifier First */
+  'identifier.first.submit.button': 'Continue',
+  
+  /* SMS OTP */
+  'sms.otp.submit.button': 'Continue',
+  
+  /* TOTP */
+  'totp.submit.button': 'Continue',
+  
+  /* Username Password */
+  'username.password.submit.button': 'Continue',
+
+  // Sign In related
   'signin.title': 'Sign In',
+  'signin.subtitle': 'Welcome back! Please sign in to continue.',
+  'signin.loading': 'Signing in...',
+
+  // Social Login Buttons
+  'buttons.continueWithGoogle': 'Continue with Google',
+  'buttons.continueWithGitHub': 'Continue with GitHub',
+  'buttons.continueWithMicrosoft': 'Continue with Microsoft',
+  'buttons.continueWithFacebook': 'Continue with Facebook',
+  'buttons.continueWithLinkedIn': 'Continue with LinkedIn',
+  'buttons.continueWithEthereum': 'Continue with Sign In Ethereum',
+
+  // Form Fields
+  'fields.username': 'Username',
+  'fields.password': 'Password',
+  'fields.email': 'Email',
+  'fields.confirmPassword': 'Confirm Password',
+  'fields.rememberMe': 'Remember me',
+
+  // Placeholders
+  'placeholders.enterUsername': 'Enter your username',
+  'placeholders.enterPassword': 'Enter your password',
+  'placeholders.enterEmail': 'Enter your email address',
+  'placeholders.enterOTP': 'Enter verification code',
+
+  // Messages
+  'messages.loading': 'Loading...',
+  'messages.success': 'Success!',
+  'messages.error': 'An error occurred',
+  'messages.invalidCredentials': 'Invalid username or password',
+  'messages.accountLocked': 'Account is locked. Please contact support.',
+
+  // Multi-factor Authentication
+  'mfa.title': 'Multi-Factor Authentication',
+  'mfa.subtitle': 'Please verify your identity',
+  'mfa.emailOtp.title': 'Email Verification',
+  'mfa.emailOtp.subtitle': 'Enter the verification code sent to your email',
+  'mfa.smsOtp.title': 'SMS Verification',
+  'mfa.smsOtp.subtitle': 'Enter the verification code sent to your phone',
+  'mfa.totp.title': 'Authenticator App',
+  'mfa.totp.subtitle': 'Enter the code from your authenticator app',
+
+  // Links
+  'links.forgotPassword': 'Forgot Password?',
+  'links.createAccount': 'Create an account',
+  'links.backToSignIn': 'Back to Sign In',
+  'links.help': 'Need help?',
+
+  // Errors
+  'errors.network': 'Network error. Please check your connection.',
+  'errors.timeout': 'Request timed out. Please try again.',
+  'errors.unauthorized': 'You are not authorized to access this resource.',
+  'errors.forbidden': 'Access forbidden.',
+  'errors.notFound': 'Resource not found.',
+  'errors.serverError': 'Server error. Please try again later.',
+  'errors.unknown': 'An unknown error occurred.',
+  'errors.authenticationFailed': 'Authentication failed',
+  'errors.authenticationFailedDetail': 'Authentication failed. Please check your credentials and try again.',
+  'errors.initializationFailed': 'Failed to initialize authentication',
+  'errors.title': 'Error',
+  'errors.authenticationError': 'Authentication Error',
 };
 
 const metadata: I18nMetadata = {
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 6f170c73d..04521bac4 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -48,7 +48,7 @@ export {
   ApplicationNativeAuthenticationAuthenticatorKnownIdPType,
 } from './models/application-native-authentication';
 export {AsgardeoClient, SignInOptions, SignOutOptions} from './models/client';
-export {BaseConfig, Config, Preferences, ThemePreferences, I18nPreferences} from './models/config';
+export {BaseConfig, Config, Preferences, ThemePreferences, I18nPreferences, WithPreferences} from './models/config';
 export {TokenResponse, IdTokenPayload} from './models/token';
 export {Crypto, JWKInterface} from './models/crypto';
 export {OAuthResponseMode} from './models/oauth-response';
@@ -71,6 +71,7 @@ export {default as AsgardeoJavaScriptClient} from './AsgardeoJavaScriptClient';
 export {default as createTheme} from './theme/createTheme';
 export {ThemeColors, ThemeConfig, Theme, ThemeMode} from './theme/types';
 
+export {default as deepMerge} from './utils/deepMerge';
 export {default as extractUserClaimsFromIdToken} from './utils/extractUserClaimsFromIdToken';
 export {default as extractPkceStorageKeyFromState} from './utils/extractPkceStorageKeyFromState';
 export {default as getI18nBundles} from './utils/getI18nBundles';
diff --git a/packages/javascript/src/models/config.ts b/packages/javascript/src/models/config.ts
index 8d3119b02..cbf3652da 100644
--- a/packages/javascript/src/models/config.ts
+++ b/packages/javascript/src/models/config.ts
@@ -17,10 +17,10 @@
  */
 
 import {ThemeConfig, ThemeMode} from '../theme/types';
-import { I18nBundle } from './i18n';
+import {I18nBundle} from './i18n';
 import {RecursivePartial} from './utility-types';
 
-export interface BaseConfig<T = unknown> {
+export interface BaseConfig<T = unknown> extends WithPreferences {
   /**
    * Optional URL where the authorization server should redirect after authentication.
    * This must match one of the allowed redirect URIs configured in your IdP.
@@ -64,7 +64,9 @@ export interface BaseConfig<T = unknown> {
    * scopes: ["openid", "profile", "email"]
    */
   scopes?: string | string[] | undefined;
+}
 
+export interface WithPreferences {
   /**
    * Preferences for customizing the Asgardeo UI components
    */
diff --git a/packages/javascript/src/utils/__tests__/deepMerge.test.ts b/packages/javascript/src/utils/__tests__/deepMerge.test.ts
new file mode 100644
index 000000000..c31b7ddd6
--- /dev/null
+++ b/packages/javascript/src/utils/__tests__/deepMerge.test.ts
@@ -0,0 +1,307 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {describe, expect, it} from 'vitest';
+import deepMerge from '../deepMerge';
+
+describe('deepMerge', (): void => {
+  it('should merge simple objects', (): void => {
+    const target = {a: 1, b: 2};
+    const source = {b: 3, c: 4};
+    const result = deepMerge(target, source as any);
+
+    expect(result).toEqual({a: 1, b: 3, c: 4});
+    expect(result).not.toBe(target); // Should create a new object
+  });
+
+  it('should merge nested objects recursively', (): void => {
+    const target = {
+      a: 1,
+      b: {
+        x: 1,
+        y: 2,
+      },
+    };
+    const source = {
+      b: {
+        y: 3,
+        z: 4,
+      },
+      c: 3,
+    };
+    const result = deepMerge(target, source as any);
+
+    expect(result).toEqual({
+      a: 1,
+      b: {x: 1, y: 3, z: 4},
+      c: 3,
+    });
+  });
+
+  it('should handle deeply nested objects', (): void => {
+    const target = {
+      theme: {
+        colors: {
+          primary: 'blue',
+          secondary: 'green',
+        },
+        spacing: {
+          small: 8,
+        },
+      },
+    };
+    const source = {
+      theme: {
+        colors: {
+          secondary: 'red',
+          accent: 'yellow',
+        },
+        typography: {
+          fontSize: 16,
+        },
+      },
+    };
+    const result = deepMerge(target, source as any);
+
+    expect(result).toEqual({
+      theme: {
+        colors: {
+          primary: 'blue',
+          secondary: 'red',
+          accent: 'yellow',
+        },
+        spacing: {
+          small: 8,
+        },
+        typography: {
+          fontSize: 16,
+        },
+      },
+    });
+  });
+
+  it('should replace arrays entirely instead of merging', (): void => {
+    const target = {arr: [1, 2, 3]};
+    const source = {arr: [4, 5]};
+    const result = deepMerge(target, source);
+
+    expect(result).toEqual({arr: [4, 5]});
+  });
+
+  it('should handle multiple sources', (): void => {
+    const target = {a: 1, b: {x: 1}};
+    const source1 = {b: {y: 2}, c: 3};
+    const source2 = {b: {z: 3}, d: 4};
+    const result = deepMerge(target, source1 as any, source2 as any);
+
+    expect(result).toEqual({
+      a: 1,
+      b: {x: 1, y: 2, z: 3},
+      c: 3,
+      d: 4,
+    });
+  });
+
+  it('should handle undefined and null sources', (): void => {
+    const target = {a: 1, b: 2};
+    const result = deepMerge(target, undefined, null as any, {c: 3} as any);
+
+    expect(result).toEqual({a: 1, b: 2, c: 3});
+  });
+
+  it('should handle empty objects', (): void => {
+    const target = {};
+    const source = {a: 1, b: {x: 2}};
+    const result = deepMerge(target, source);
+
+    expect(result).toEqual({a: 1, b: {x: 2}});
+  });
+
+  it('should not modify the original objects', (): void => {
+    const target = {a: 1, b: {x: 1}};
+    const source = {b: {y: 2}, c: 3};
+    const originalTarget = JSON.parse(JSON.stringify(target));
+    const originalSource = JSON.parse(JSON.stringify(source));
+
+    deepMerge(target, source as any);
+
+    expect(target).toEqual(originalTarget);
+    expect(source).toEqual(originalSource);
+  });
+
+  it('should handle special object types correctly', (): void => {
+    const date = new Date('2023-01-01');
+    const regex = /test/g;
+    const target = {a: 1};
+    const source = {
+      date: date,
+      regex: regex,
+      func: () => 'test',
+    };
+    const result = deepMerge(target, source as any);
+
+    expect((result as any).date).toBe(date);
+    expect((result as any).regex).toBe(regex);
+    expect(typeof (result as any).func).toBe('function');
+  });
+
+  it('should handle nested special objects', (): void => {
+    const target = {
+      config: {
+        timeout: 1000,
+      },
+    };
+    const source = {
+      config: {
+        date: new Date('2023-01-01'),
+        patterns: [/test/g, /example/i],
+      },
+    };
+    const result = deepMerge(target, source as any);
+
+    expect((result as any).config.timeout).toBe(1000);
+    expect((result as any).config.date).toBeInstanceOf(Date);
+    expect(Array.isArray((result as any).config.patterns)).toBe(true);
+  });
+
+  it('should handle boolean and number values', (): void => {
+    const target = {enabled: true, count: 5};
+    const source = {enabled: false, count: 10, active: true};
+    const result = deepMerge(target, source);
+
+    expect(result).toEqual({enabled: false, count: 10, active: true});
+  });
+
+  it('should handle string values', (): void => {
+    const target = {name: 'John', nested: {title: 'Mr.'}};
+    const source = {name: 'Jane', nested: {title: 'Ms.', surname: 'Doe'}};
+    const result = deepMerge(target, source);
+
+    expect(result).toEqual({
+      name: 'Jane',
+      nested: {title: 'Ms.', surname: 'Doe'},
+    });
+  });
+
+  it('should throw error for non-object target', (): void => {
+    expect(() => deepMerge(null as any)).toThrow('Target must be an object');
+    expect(() => deepMerge(undefined as any)).toThrow('Target must be an object');
+    expect(() => deepMerge('string' as any)).toThrow('Target must be an object');
+    expect(() => deepMerge(123 as any)).toThrow('Target must be an object');
+  });
+
+  it('should handle complex real-world scenario', (): void => {
+    const defaultConfig = {
+      api: {
+        baseUrl: 'https://api.example.com',
+        timeout: 5000,
+        retries: 3,
+      },
+      ui: {
+        theme: {
+          colors: {
+            primary: '#007bff',
+            secondary: '#6c757d',
+          },
+          spacing: {
+            xs: 4,
+            sm: 8,
+            md: 16,
+          },
+        },
+        components: {
+          button: {
+            borderRadius: 4,
+          },
+        },
+      },
+      features: {
+        analytics: true,
+        debug: false,
+      },
+    };
+
+    const userConfig = {
+      api: {
+        baseUrl: 'https://custom-api.example.com',
+        headers: {
+          'X-Custom': 'value',
+        },
+      },
+      ui: {
+        theme: {
+          colors: {
+            primary: '#ff0000',
+          },
+          spacing: {
+            lg: 32,
+          },
+        },
+        components: {
+          input: {
+            borderWidth: 2,
+          },
+        },
+      },
+      features: {
+        debug: true,
+        experimental: true,
+      },
+    };
+
+    const result = deepMerge(defaultConfig, userConfig as any);
+
+    expect(result).toEqual({
+      api: {
+        baseUrl: 'https://custom-api.example.com',
+        timeout: 5000,
+        retries: 3,
+        headers: {
+          'X-Custom': 'value',
+        },
+      },
+      ui: {
+        theme: {
+          colors: {
+            primary: '#ff0000',
+            secondary: '#6c757d',
+          },
+          spacing: {
+            xs: 4,
+            sm: 8,
+            md: 16,
+            lg: 32,
+          },
+        },
+        components: {
+          button: {
+            borderRadius: 4,
+          },
+          input: {
+            borderWidth: 2,
+          },
+        },
+      },
+      features: {
+        analytics: true,
+        debug: true,
+        experimental: true,
+      },
+    });
+  });
+});
diff --git a/packages/javascript/src/utils/deepMerge.ts b/packages/javascript/src/utils/deepMerge.ts
new file mode 100644
index 000000000..667688afa
--- /dev/null
+++ b/packages/javascript/src/utils/deepMerge.ts
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Checks if a value is a plain object (not an array, function, date, etc.)
+ *
+ * @param value - The value to check
+ * @returns True if the value is a plain object
+ */
+const isPlainObject = (value: unknown): value is Record<string, unknown> => {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    !Array.isArray(value) &&
+    !(value instanceof Date) &&
+    !(value instanceof RegExp) &&
+    Object.prototype.toString.call(value) === '[object Object]'
+  );
+};
+
+/**
+ * Recursively merges the properties of source objects into a target object.
+ * Similar to Lodash's merge function, this creates a deep copy and merges
+ * nested objects recursively. Arrays and non-plain objects are replaced entirely.
+ *
+ * @param target - The target object to merge into
+ * @param sources - One or more source objects to merge from
+ * @returns A new object with merged properties
+ *
+ * @example
+ * ```typescript
+ * const obj1 = { a: 1, b: { x: 1, y: 2 } };
+ * const obj2 = { b: { y: 3, z: 4 }, c: 3 };
+ * const result = deepMerge(obj1, obj2);
+ * // Result: { a: 1, b: { x: 1, y: 3, z: 4 }, c: 3 }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * const config = { theme: { colors: { primary: 'blue' } } };
+ * const userPrefs = { theme: { colors: { secondary: 'red' } } };
+ * const merged = deepMerge(config, userPrefs);
+ * // Result: { theme: { colors: { primary: 'blue', secondary: 'red' } } }
+ * ```
+ */
+const deepMerge = <T extends Record<string, any>>(
+  target: T,
+  ...sources: Array<Record<string, any> | undefined | null>
+): T => {
+  if (!target || typeof target !== 'object') {
+    throw new Error('Target must be an object');
+  }
+
+  const result = {...target} as T;
+
+  sources.forEach(source => {
+    if (!source || typeof source !== 'object') {
+      return;
+    }
+
+    Object.keys(source).forEach(key => {
+      const sourceValue = source[key];
+      const targetValue = (result as any)[key];
+
+      if (isPlainObject(sourceValue) && isPlainObject(targetValue)) {
+        (result as any)[key] = deepMerge(targetValue, sourceValue);
+      } else if (sourceValue !== undefined) {
+        (result as any)[key] = sourceValue;
+      }
+    });
+  });
+
+  return result;
+};
+
+export default deepMerge;
diff --git a/packages/react/src/components/actions/SignInButton/BaseSignInButton.tsx b/packages/react/src/components/actions/SignInButton/BaseSignInButton.tsx
index eb5aae36b..737994f6d 100644
--- a/packages/react/src/components/actions/SignInButton/BaseSignInButton.tsx
+++ b/packages/react/src/components/actions/SignInButton/BaseSignInButton.tsx
@@ -25,7 +25,7 @@ import {
   Ref,
   RefAttributes,
 } from 'react';
-import {withVendorCSSClassPrefix} from '@asgardeo/browser';
+import {WithPreferences, withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
 import Button from '../../primitives/Button/Button';
 
@@ -53,7 +53,8 @@ export type BaseSignInButtonRenderProps = CommonBaseSignInButtonProps;
  */
 export interface BaseSignInButtonProps
   extends Partial<CommonBaseSignInButtonProps>,
-    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,
+    WithPreferences {
   /**
    * Render prop function that receives sign-in props, or traditional ReactNode children
    */
@@ -82,7 +83,7 @@ export interface BaseSignInButtonProps
 const BaseSignInButton: ForwardRefExoticComponent<BaseSignInButtonProps & RefAttributes<HTMLButtonElement>> =
   forwardRef<HTMLButtonElement, BaseSignInButtonProps>(
     (
-      {children, className, style, signIn, isLoading, ...rest}: BaseSignInButtonProps,
+      {children, className, style, signIn, isLoading, preferences, ...rest}: BaseSignInButtonProps,
       ref: Ref<HTMLButtonElement>,
     ): ReactElement => {
       if (typeof children === 'function') {
diff --git a/packages/react/src/components/actions/SignInButton/SignInButton.tsx b/packages/react/src/components/actions/SignInButton/SignInButton.tsx
index 7834fc13f..2ca4f1899 100644
--- a/packages/react/src/components/actions/SignInButton/SignInButton.tsx
+++ b/packages/react/src/components/actions/SignInButton/SignInButton.tsx
@@ -18,7 +18,9 @@
 
 import {forwardRef, ForwardRefExoticComponent, MouseEvent, ReactElement, Ref, RefAttributes, useState} from 'react';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
+import useTranslation from '../../../hooks/useTranslation';
 import BaseSignInButton, {BaseSignInButtonProps} from './BaseSignInButton';
+import {AsgardeoRuntimeError} from '@asgardeo/browser';
 
 /**
  * Props interface of {@link SignInButton}
@@ -45,12 +47,33 @@ export type SignInButtonProps = BaseSignInButtonProps;
  * ```tsx
  * <SignInButton className="custom-button">Sign In</SignInButton>
  * ```
+ *
+ * @example Using component-level preferences
+ * ```tsx
+ * <SignInButton
+ *   preferences={{
+ *     i18n: {
+ *       bundles: {
+ *         'en-US': {
+ *           translations: {
+ *             'buttons.signIn': 'Custom Sign In Text'
+ *           }
+ *         }
+ *       }
+ *     }
+ *   }}
+ * >
+ *   Custom Sign In
+ * </SignInButton>
+ * ```
  */
 const SignInButton: ForwardRefExoticComponent<SignInButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
   HTMLButtonElement,
   SignInButtonProps
->(({children = 'Sign In', onClick, ...rest}: SignInButtonProps, ref: Ref<HTMLButtonElement>): ReactElement => {
+>(({children, onClick, preferences, ...rest}: SignInButtonProps, ref: Ref<HTMLButtonElement>): ReactElement => {
   const {signIn} = useAsgardeo();
+  const {t} = useTranslation(preferences?.i18n);
+
   const [isLoading, setIsLoading] = useState(false);
 
   const handleSignIn = async (e?: MouseEvent<HTMLButtonElement>): Promise<void> => {
@@ -63,15 +86,27 @@ const SignInButton: ForwardRefExoticComponent<SignInButtonProps & RefAttributes<
         onClick(e);
       }
     } catch (error) {
-      throw new Error(`Sign in failed: ${error instanceof Error ? error.message : String(error)}`);
+      throw new AsgardeoRuntimeError(
+        `Sign in failed: ${error instanceof Error ? error.message : String(error)}`,
+        'handleSignIn-RuntimeError-001',
+        'react',
+        'Something went wrong while trying to sign in. Please try again later.',
+      );
     } finally {
       setIsLoading(false);
     }
   };
 
   return (
-    <BaseSignInButton ref={ref} onClick={handleSignIn} isLoading={isLoading} signIn={handleSignIn} {...rest}>
-      {children}
+    <BaseSignInButton
+      ref={ref}
+      onClick={handleSignIn}
+      isLoading={isLoading}
+      signIn={handleSignIn}
+      preferences={preferences}
+      {...rest}
+    >
+      {children ?? t('elements.buttons.signIn')}
     </BaseSignInButton>
   );
 });
diff --git a/packages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsx b/packages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsx
index cdb661007..d8c18c178 100644
--- a/packages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsx
+++ b/packages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsx
@@ -25,7 +25,7 @@ import {
   Ref,
   RefAttributes,
 } from 'react';
-import {withVendorCSSClassPrefix} from '@asgardeo/browser';
+import {WithPreferences, withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
 import Button from '../../primitives/Button/Button';
 
@@ -53,7 +53,8 @@ export type BaseSignOutButtonRenderProps = CommonBaseSignOutButtonProps;
  */
 export interface BaseSignOutButtonProps
   extends Partial<CommonBaseSignOutButtonProps>,
-    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,
+    WithPreferences {
   /**
    * Render prop function that receives sign-out props, or traditional ReactNode children
    */
@@ -82,7 +83,7 @@ export interface BaseSignOutButtonProps
 const BaseSignOutButton: ForwardRefExoticComponent<BaseSignOutButtonProps & RefAttributes<HTMLButtonElement>> =
   forwardRef<HTMLButtonElement, BaseSignOutButtonProps>(
     (
-      {children, className, style, signOut, isLoading, ...rest}: BaseSignOutButtonProps,
+      {children, className, style, signOut, isLoading, preferences, ...rest}: BaseSignOutButtonProps,
       ref: Ref<HTMLButtonElement>,
     ): ReactElement => {
       if (typeof children === 'function') {
diff --git a/packages/react/src/components/actions/SignOutButton/SignOutButton.tsx b/packages/react/src/components/actions/SignOutButton/SignOutButton.tsx
index 206f5d65a..fc4f75695 100644
--- a/packages/react/src/components/actions/SignOutButton/SignOutButton.tsx
+++ b/packages/react/src/components/actions/SignOutButton/SignOutButton.tsx
@@ -18,7 +18,9 @@
 
 import {FC, forwardRef, ForwardRefExoticComponent, MouseEvent, ReactElement, Ref, RefAttributes, useState} from 'react';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
+import useTranslation from '../../../hooks/useTranslation';
 import BaseSignOutButton, {BaseSignOutButtonProps} from './BaseSignOutButton';
+import {AsgardeoRuntimeError} from '@asgardeo/browser';
 
 /**
  * Props interface of {@link SignOutButton}
@@ -28,6 +30,8 @@ export type SignOutButtonProps = BaseSignOutButtonProps;
 /**
  * SignOutButton component that supports both render props and traditional props patterns.
  *
+ * @remarks This component is only supported in browser based React applications (CSR).
+ *
  * @example Using render props pattern
  * ```tsx
  * <SignOutButton>
@@ -43,12 +47,33 @@ export type SignOutButtonProps = BaseSignOutButtonProps;
  * ```tsx
  * <SignOutButton className="custom-button">Sign Out</SignOutButton>
  * ```
+ *
+ * @example Using component-level preferences
+ * ```tsx
+ * <SignOutButton
+ *   preferences={{
+ *     i18n: {
+ *       bundles: {
+ *         'en-US': {
+ *           translations: {
+ *             'buttons.signOut': 'Custom Sign Out Text'
+ *           }
+ *         }
+ *       }
+ *     }
+ *   }}
+ * >
+ *   Custom Sign Out
+ * </SignOutButton>
+ * ```
  */
 const SignOutButton: ForwardRefExoticComponent<SignOutButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
   HTMLButtonElement,
   SignOutButtonProps
->(({children = 'Sign Out', onClick, ...rest}: SignOutButtonProps, ref: Ref<HTMLButtonElement>): ReactElement => {
+>(({children, onClick, preferences, ...rest}: SignOutButtonProps, ref: Ref<HTMLButtonElement>): ReactElement => {
   const {signOut} = useAsgardeo();
+  const {t} = useTranslation(preferences?.i18n);
+
   const [isLoading, setIsLoading] = useState(false);
 
   const handleSignOut = async (e?: MouseEvent<HTMLButtonElement>): Promise<void> => {
@@ -60,15 +85,27 @@ const SignOutButton: ForwardRefExoticComponent<SignOutButtonProps & RefAttribute
         onClick(e);
       }
     } catch (error) {
-      throw new Error(`Sign out failed: ${error instanceof Error ? error.message : String(error)}`);
+      throw new AsgardeoRuntimeError(
+        `Sign out failed: ${error instanceof Error ? error.message : String(error)}`,
+        'handleSignOut-RuntimeError-001',
+        'react',
+        'Something went wrong while trying to sign out. Please try again later.',
+      );
     } finally {
       setIsLoading(false);
     }
   };
 
   return (
-    <BaseSignOutButton ref={ref} onClick={handleSignOut} isLoading={isLoading} signOut={handleSignOut} {...rest}>
-      {children}
+    <BaseSignOutButton
+      ref={ref}
+      onClick={handleSignOut}
+      isLoading={isLoading}
+      signOut={handleSignOut}
+      preferences={preferences}
+      {...rest}
+    >
+      {children ?? t('elements.buttons.signOut')}
     </BaseSignOutButton>
   );
 });
diff --git a/packages/react/src/components/actions/SignUpButton/BaseSignUpButton.tsx b/packages/react/src/components/actions/SignUpButton/BaseSignUpButton.tsx
index 1c96b44b9..8e8711de9 100644
--- a/packages/react/src/components/actions/SignUpButton/BaseSignUpButton.tsx
+++ b/packages/react/src/components/actions/SignUpButton/BaseSignUpButton.tsx
@@ -25,7 +25,7 @@ import {
   Ref,
   RefAttributes,
 } from 'react';
-import {withVendorCSSClassPrefix} from '@asgardeo/browser';
+import {WithPreferences, withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
 import Button from '../../primitives/Button/Button';
 
@@ -53,7 +53,8 @@ export type BaseSignUpButtonRenderProps = CommonBaseSignUpButtonProps;
  */
 export interface BaseSignUpButtonProps
   extends CommonBaseSignUpButtonProps,
-    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,
+    WithPreferences {
   /**
    * Render prop function that receives sign-up props, or traditional ReactNode children
    */
@@ -82,7 +83,7 @@ export interface BaseSignUpButtonProps
 const BaseSignUpButton: ForwardRefExoticComponent<BaseSignUpButtonProps & RefAttributes<HTMLButtonElement>> =
   forwardRef<HTMLButtonElement, BaseSignUpButtonProps>(
     (
-      {children, className, style, signUp, isLoading, ...rest}: BaseSignUpButtonProps,
+      {children, className, style, signUp, isLoading, preferences, ...rest}: BaseSignUpButtonProps,
       ref: Ref<HTMLButtonElement>,
     ): ReactElement => {
       if (typeof children === 'function') {
diff --git a/packages/react/src/components/actions/SignUpButton/SignUpButton.tsx b/packages/react/src/components/actions/SignUpButton/SignUpButton.tsx
index 92b4a948b..548b591cf 100644
--- a/packages/react/src/components/actions/SignUpButton/SignUpButton.tsx
+++ b/packages/react/src/components/actions/SignUpButton/SignUpButton.tsx
@@ -18,7 +18,9 @@
 
 import {FC, forwardRef, ForwardRefExoticComponent, MouseEvent, ReactElement, Ref, RefAttributes, useState} from 'react';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
+import useTranslation from '../../../hooks/useTranslation';
 import BaseSignUpButton, {BaseSignUpButtonProps} from './BaseSignUpButton';
+import {AsgardeoRuntimeError} from '@asgardeo/browser';
 
 /**
  * Props interface of {@link SignUpButton}
@@ -29,6 +31,8 @@ export type SignUpButtonProps = BaseSignUpButtonProps;
  * SignUpButton component that supports both render props and traditional props patterns.
  * It redirects the user to the Asgardeo sign-up page configured for the application.
  *
+ * @remarks This component is only supported in browser based React applications (CSR).
+ *
  * @example Using render props pattern
  * ```tsx
  * <SignUpButton>
@@ -44,12 +48,33 @@ export type SignUpButtonProps = BaseSignUpButtonProps;
  * ```tsx
  * <SignUpButton className="custom-button">Create Account</SignUpButton>
  * ```
+ *
+ * @example Using component-level preferences
+ * ```tsx
+ * <SignUpButton
+ *   preferences={{
+ *     i18n: {
+ *       bundles: {
+ *         'en-US': {
+ *           translations: {
+ *             'buttons.signUp': 'Custom Sign Up Text'
+ *           }
+ *         }
+ *       }
+ *     }
+ *   }}
+ * >
+ *   Custom Sign Up
+ * </SignUpButton>
+ * ```
  */
 const SignUpButton: ForwardRefExoticComponent<SignUpButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
   HTMLButtonElement,
   SignUpButtonProps
->(({children = 'Sign Up', onClick, ...rest}: SignUpButtonProps, ref: Ref<HTMLButtonElement>): ReactElement => {
+>(({children, onClick, preferences, ...rest}: SignUpButtonProps, ref: Ref<HTMLButtonElement>): ReactElement => {
   const {signUp} = useAsgardeo();
+  const {t} = useTranslation(preferences?.i18n);
+
   const [isLoading, setIsLoading] = useState(false);
 
   const handleSignUp = async (e?: MouseEvent<HTMLButtonElement>): Promise<void> => {
@@ -61,15 +86,27 @@ const SignUpButton: ForwardRefExoticComponent<SignUpButtonProps & RefAttributes<
         onClick(e);
       }
     } catch (error) {
-      throw new Error(`Sign up failed: ${error instanceof Error ? error.message : String(error)}`);
+      throw new AsgardeoRuntimeError(
+        `Sign up failed: ${error instanceof Error ? error.message : String(error)}`,
+        'handleSignUp-RuntimeError-001',
+        'react',
+        'Something went wrong while trying to sign up. Please try again later.',
+      );
     } finally {
       setIsLoading(false);
     }
   };
 
   return (
-    <BaseSignUpButton ref={ref} onClick={handleSignUp} isLoading={isLoading} signUp={handleSignUp} {...rest}>
-      {children}
+    <BaseSignUpButton
+      ref={ref}
+      onClick={handleSignUp}
+      isLoading={isLoading}
+      signUp={handleSignUp}
+      preferences={preferences}
+      {...rest}
+    >
+      {children ?? t('elements.buttons.signUp')}
     </BaseSignUpButton>
   );
 });
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index 06b2b2f84..99f9a589a 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -8,7 +8,12 @@
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
- * Unless required by applicable law or agreed to in writing,
+ * Unless require        }
+      }
+    } catch (err) {
+      const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.authenticationFailed');
+      setError(errorMessage);
+      onError?.(err as Error);pplicable law or agreed to in writing,
  * software distributed under the License is distributed on an
  * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  * KIND, either express or implied. See the License for the
@@ -102,11 +107,6 @@ export interface BaseSignInProps {
    */
   messageClassName?: string;
 
-  /**
-   * Text for the submit button.
-   */
-  submitButtonText?: string;
-
   /**
    * Whether to show loading state.
    */
@@ -176,15 +176,14 @@ const BaseSignIn: FC<BaseSignInProps> = ({
   buttonClassName = '',
   errorClassName = '',
   messageClassName = '',
-  submitButtonText = 'Sign In',
   showLoading = true,
-  loadingText = 'Loading...',
+  loadingText,
   styled = true,
   size = 'medium',
   variant = 'default',
 }) => {
   const {t} = useTranslation();
-  
+
   // Internal state management
   const [isLoading, setIsLoading] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
@@ -280,7 +279,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
         );
       }
     } catch (err) {
-      const errorMessage = err instanceof AsgardeoAPIError ? err.message : 'Failed to initialize authentication';
+      const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.initializationFailed');
       setError(errorMessage);
       onError?.(err as Error);
     } finally {
@@ -321,7 +320,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
         response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
         response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
       ) {
-        setError('Authentication failed. Please check your credentials and try again.');
+        setError(t('errors.authenticationFailedDetail'));
         return;
       }
 
@@ -352,7 +351,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
         }
       }
     } catch (err) {
-      const errorMessage = err instanceof AsgardeoAPIError ? err.message : 'Authentication failed';
+      const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.authenticationFailed');
       setError(errorMessage);
       onError?.(err as Error);
     } finally {
@@ -500,33 +499,11 @@ const BaseSignIn: FC<BaseSignInProps> = ({
     return currentFlow.nextStep.authenticators;
   };
 
-  /**
-   * Get the username & password authenticator (LOCAL).
-   */
-  const getUsernamePasswordAuthenticator = (): ApplicationNativeAuthenticationAuthenticator | null => {
-    const authenticators = getAvailableAuthenticators();
-    return (
-      authenticators.find(
-        auth =>
-          auth.idp === 'LOCAL' &&
-          (auth.authenticator === 'Username & Password' || auth.authenticator === 'Identifier First'),
-      ) || null
-    );
-  };
-
-  /**
-   * Get federated login authenticators (non-LOCAL).
-   */
-  const getFederatedAuthenticators = (): ApplicationNativeAuthenticationAuthenticator[] => {
-    const authenticators = getAvailableAuthenticators();
-    return authenticators.filter(auth => auth.idp !== 'LOCAL');
-  };
-
   if (!isInitialized && isLoading) {
     return showLoading ? (
       <Card className={containerClasses}>
         <Card.Content>
-          <p>{loadingText}</p>
+          <p>{loadingText ?? t('messages.loading')}</p>
         </Card.Content>
       </Card>
     ) : null;
@@ -534,8 +511,18 @@ const BaseSignIn: FC<BaseSignInProps> = ({
 
   // Handle multiple authenticator options
   if (hasMultipleOptions() && !currentAuthenticator) {
-    const usernamePasswordAuth = getUsernamePasswordAuthenticator();
-    const federatedAuths = getFederatedAuthenticators();
+    const availableAuthenticators = getAvailableAuthenticators();
+
+    // Separate authenticators by prompt type and characteristics
+    const userPromptAuthenticators = availableAuthenticators.filter(
+      auth =>
+        auth.metadata?.promptType === ApplicationNativeAuthenticationAuthenticatorPromptType.USER_PROMPT ||
+        // Fallback: LOCAL authenticators with params are typically user prompts
+        (auth.idp === 'LOCAL' && auth.metadata?.params && auth.metadata.params.length > 0),
+    );
+
+    // All other authenticators are treated as options/buttons
+    const optionAuthenticators = availableAuthenticators.filter(auth => !userPromptAuthenticators.includes(auth));
 
     return (
       <Card className={containerClasses}>
@@ -571,43 +558,21 @@ const BaseSignIn: FC<BaseSignInProps> = ({
             </Alert>
           )}
 
-          {/* Username & Password form at the top */}
-          {usernamePasswordAuth && (
-            <>
-              <form
-                onSubmit={(e: FormEvent<HTMLFormElement>) => {
-                  e.preventDefault();
-                  const formData: Record<string, string> = {};
-                  usernamePasswordAuth.metadata?.params?.forEach(param => {
-                    formData[param.param] = formValues[param.param] || '';
-                  });
-                  handleAuthenticatorSelection(usernamePasswordAuth, formData);
-                }}
-              >                {createSignInOptionFromAuthenticator(
-                  usernamePasswordAuth,
-                  formValues,
-                  isLoading,
-                  handleInputChange,
-                  handleAuthenticatorSelection,
-                  {
-                    inputClassName: inputClasses,
-                    buttonClassName: buttonClasses,
-                    submitButtonText,
-                    error,
-                  },
-                )}
-              </form>
-
-              {/* Divider if there are federated options */}
-              {federatedAuths.length > 0 && <Divider style={{margin: '1.5rem 0'}}>OR</Divider>}
-            </>
-          )}
-
-          {/* Federated login options */}
-          {federatedAuths.length > 0 && (
-            <div style={{display: 'flex', flexDirection: 'column', gap: '0.75rem'}}>
-              {federatedAuths.map(authenticator => (
-                <div key={authenticator.authenticatorId}>
+          <div style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
+            {/* Render USER_PROMPT authenticators as form fields */}
+            {userPromptAuthenticators.map((authenticator, index) => (
+              <div key={authenticator.authenticatorId}>
+                {index > 0 && <Divider style={{margin: '0.5rem 0'}}>OR</Divider>}
+                <form
+                  onSubmit={e => {
+                    e.preventDefault();
+                    const formData: Record<string, string> = {};
+                    authenticator.metadata?.params?.forEach(param => {
+                      formData[param.param] = formValues[param.param] || '';
+                    });
+                    handleAuthenticatorSelection(authenticator, formData);
+                  }}
+                >
                   {createSignInOptionFromAuthenticator(
                     authenticator,
                     formValues,
@@ -620,10 +585,33 @@ const BaseSignIn: FC<BaseSignInProps> = ({
                       error,
                     },
                   )}
-                </div>
-              ))}
-            </div>
-          )}
+                </form>
+              </div>
+            ))}
+
+            {/* Add divider between user prompts and option authenticators if both exist */}
+            {userPromptAuthenticators.length > 0 && optionAuthenticators.length > 0 && (
+              <Divider style={{margin: '0.5rem 0'}}>OR</Divider>
+            )}
+
+            {/* Render all other authenticators (REDIRECTION_PROMPT, multi-option buttons, etc.) */}
+            {optionAuthenticators.map((authenticator, index) => (
+              <div key={authenticator.authenticatorId}>
+                {createSignInOptionFromAuthenticator(
+                  authenticator,
+                  formValues,
+                  isLoading,
+                  handleInputChange,
+                  handleAuthenticatorSelection,
+                  {
+                    inputClassName: inputClasses,
+                    buttonClassName: buttonClasses,
+                    error,
+                  },
+                )}
+              </div>
+            ))}
+          </div>
         </Card.Content>
       </Card>
     );
@@ -635,7 +623,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
         <Card.Content>
           {error && (
             <Alert variant="error">
-              <Alert.Title>Authentication Error</Alert.Title>
+              <Alert.Title>{t('errors.authenticationError')}</Alert.Title>
               <Alert.Description>{error}</Alert.Description>
             </Alert>
           )}
@@ -644,7 +632,6 @@ const BaseSignIn: FC<BaseSignInProps> = ({
     );
   }
 
-  // Single authenticator view
   return (
     <Card className={containerClasses}>
       <Card.Header>
@@ -674,7 +661,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
       <Card.Content>
         {error && (
           <Alert variant="error" style={{marginBottom: '1rem'}} className={errorClasses}>
-            <Alert.Title>Error</Alert.Title>
+            <Alert.Title>{t('errors.title')}</Alert.Title>
             <Alert.Description>{error}</Alert.Description>
           </Alert>
         )}
@@ -698,7 +685,6 @@ const BaseSignIn: FC<BaseSignInProps> = ({
             {
               inputClassName: inputClasses,
               buttonClassName: buttonClasses,
-              submitButtonText,
               error,
             },
           )}
diff --git a/packages/react/src/components/presentation/SignIn/SignIn.tsx b/packages/react/src/components/presentation/SignIn/SignIn.tsx
index e36ea6973..bb9f4d527 100644
--- a/packages/react/src/components/presentation/SignIn/SignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/SignIn.tsx
@@ -69,11 +69,6 @@ export interface SignInProps {
    */
   variant?: 'default' | 'outlined' | 'filled';
 
-  /**
-   * Text for the submit button.
-   */
-  submitButtonText?: string;
-
   /**
    * Whether to show loading state.
    */
@@ -118,7 +113,6 @@ const SignIn: FC<SignInProps> = ({
   styled = true,
   size = 'medium',
   variant = 'default',
-  submitButtonText = 'Sign In',
   showLoading = true,
   loadingText = 'Loading...',
 }) => {
@@ -158,7 +152,6 @@ const SignIn: FC<SignInProps> = ({
       styled={styled}
       size={size}
       variant={variant}
-      submitButtonText={submitButtonText}
       showLoading={showLoading}
       loadingText={loadingText}
     />
diff --git a/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx b/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
index 564b413b8..85f5dd52a 100644
--- a/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
@@ -26,6 +26,7 @@ import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
 import OtpField from '../../../primitives/OtpField/OtpField';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
+import useTranslation from '../../../../hooks/useTranslation';
 
 /**
  * Email OTP Sign-In Option Component.
@@ -39,8 +40,10 @@ const EmailOtp: FC<BaseSignInOptionProps> = ({
   onSubmit,
   inputClassName = '',
   buttonClassName = '',
-  submitButtonText = 'Verify Email OTP',
+  preferences,
 }) => {
+  const {t} = useTranslation(preferences?.i18n);
+
   const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
 
   // Check if this is an OTP field (typically has 'otpCode' or similar parameter)
@@ -95,7 +98,7 @@ const EmailOtp: FC<BaseSignInOptionProps> = ({
         fullWidth
         style={{marginBottom: '1rem'}}
       >
-        {submitButtonText}
+        {t('email.otp.submit.button')}
       </Button>
     </>
   );
diff --git a/packages/react/src/components/presentation/SignIn/options/FacebookButton.tsx b/packages/react/src/components/presentation/SignIn/options/FacebookButton.tsx
index 36a3db6f7..6371e5c1f 100644
--- a/packages/react/src/components/presentation/SignIn/options/FacebookButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/FacebookButton.tsx
@@ -19,6 +19,7 @@
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
+import useTranslation from '../../../../hooks/useTranslation';
 
 /**
  * Facebook Sign-In Button Component.
@@ -29,8 +30,10 @@ const FacebookButton: FC<BaseSignInOptionProps> = ({
   isLoading,
   onSubmit,
   buttonClassName = '',
-  submitButtonText = 'Continue with Facebook',
+  submitButtonText,
+  preferences,
 }) => {
+  const {t} = useTranslation(preferences?.i18n);
   /**
    * Handle button click.
    */
@@ -50,12 +53,18 @@ const FacebookButton: FC<BaseSignInOptionProps> = ({
       className={buttonClassName}
       startIcon={
         <svg width="18" height="18" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
-          <path fill="#1976D2" d="M448,0H64C28.704,0,0,28.704,0,64v384c0,35.296,28.704,64,64,64h384c35.296,0,64-28.704,64-64V64C512,28.704,483.296,0,448,0z" />
-          <path fill="#FAFAFA" d="M432,256h-80v-64c0-17.664,14.336-16,32-16h32V96h-64l0,0c-53.024,0-96,42.976-96,96v64h-64v80h64v176h96V336h48L432,256z" />
+          <path
+            fill="#1976D2"
+            d="M448,0H64C28.704,0,0,28.704,0,64v384c0,35.296,28.704,64,64,64h384c35.296,0,64-28.704,64-64V64C512,28.704,483.296,0,448,0z"
+          />
+          <path
+            fill="#FAFAFA"
+            d="M432,256h-80v-64c0-17.664,14.336-16,32-16h32V96h-64l0,0c-53.024,0-96,42.976-96,96v64h-64v80h64v176h96V336h48L432,256z"
+          />
         </svg>
       }
     >
-      {submitButtonText}
+      {t('elements.buttons.facebook')}
     </Button>
   );
 };
diff --git a/packages/react/src/components/presentation/SignIn/options/GitHubButton.tsx b/packages/react/src/components/presentation/SignIn/options/GitHubButton.tsx
index fe7abb361..8834d20b2 100644
--- a/packages/react/src/components/presentation/SignIn/options/GitHubButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/GitHubButton.tsx
@@ -19,6 +19,7 @@
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
+import useTranslation from '../../../../hooks/useTranslation';
 
 /**
  * GitHub Sign-In Button Component.
@@ -29,8 +30,9 @@ const GitHubButton: FC<BaseSignInOptionProps> = ({
   isLoading,
   onSubmit,
   buttonClassName = '',
-  submitButtonText = 'Continue with GitHub',
+  preferences,
 }) => {
+  const {t} = useTranslation(preferences?.i18n);
   /**
    * Handle button click.
    */
@@ -51,12 +53,15 @@ const GitHubButton: FC<BaseSignInOptionProps> = ({
       startIcon={
         <svg width="18" height="18" viewBox="0 0 67.91 66.233" xmlns="http://www.w3.org/2000/svg">
           <g transform="translate(-386.96 658.072)">
-            <path d="M420.915-658.072a33.956,33.956,0,0,0-33.955,33.955,33.963,33.963,0,0,0,23.221,32.22c1.7.314,2.32-.737,2.32-1.633,0-.81-.031-3.484-.046-6.322-9.446,2.054-11.44-4.006-11.44-4.006-1.545-3.925-3.77-4.968-3.77-4.968-3.081-2.107.232-2.064.232-2.064,3.41.239,5.205,3.5,5.205,3.5,3.028,5.19,7.943,3.69,9.881,2.822a7.23,7.23,0,0,1,2.156-4.54c-7.542-.859-15.47-3.77-15.47-16.781a13.141,13.141,0,0,1,3.5-9.114,12.2,12.2,0,0,1,.329-8.986s2.851-.913,9.34,3.48a32.545,32.545,0,0,1,8.5-1.143,32.629,32.629,0,0,1,8.506,1.143c6.481-4.393,9.328-3.48,9.328-3.48a12.185,12.185,0,0,1,.333,8.986,13.115,13.115,0,0,1,3.495,9.114c0,13.042-7.943,15.913-15.5,16.754,1.218,1.054,2.3,3.12,2.3,6.288,0,4.543-.039,8.2-.039,9.318,0,.9.611,1.962,2.332,1.629a33.959,33.959,0,0,0,23.2-32.215,33.955,33.955,0,0,0-33.955-33.955" fill="#ffffff" />
+            <path
+              d="M420.915-658.072a33.956,33.956,0,0,0-33.955,33.955,33.963,33.963,0,0,0,23.221,32.22c1.7.314,2.32-.737,2.32-1.633,0-.81-.031-3.484-.046-6.322-9.446,2.054-11.44-4.006-11.44-4.006-1.545-3.925-3.77-4.968-3.77-4.968-3.081-2.107.232-2.064.232-2.064,3.41.239,5.205,3.5,5.205,3.5,3.028,5.19,7.943,3.69,9.881,2.822a7.23,7.23,0,0,1,2.156-4.54c-7.542-.859-15.47-3.77-15.47-16.781a13.141,13.141,0,0,1,3.5-9.114,12.2,12.2,0,0,1,.329-8.986s2.851-.913,9.34,3.48a32.545,32.545,0,0,1,8.5-1.143,32.629,32.629,0,0,1,8.506,1.143c6.481-4.393,9.328-3.48,9.328-3.48a12.185,12.185,0,0,1,.333,8.986,13.115,13.115,0,0,1,3.495,9.114c0,13.042-7.943,15.913-15.5,16.754,1.218,1.054,2.3,3.12,2.3,6.288,0,4.543-.039,8.2-.039,9.318,0,.9.611,1.962,2.332,1.629a33.959,33.959,0,0,0,23.2-32.215,33.955,33.955,0,0,0-33.955-33.955"
+              fill="#ffffff"
+            />
           </g>
         </svg>
       }
     >
-      {submitButtonText}
+      {t('elements.buttons.github')}
     </Button>
   );
 };
diff --git a/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx b/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx
index 97dc20c6b..fedfd0e36 100644
--- a/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx
@@ -19,6 +19,7 @@
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
+import useTranslation from '../../../../hooks/useTranslation';
 
 /**
  * Google Sign-In Button Component.
@@ -29,8 +30,9 @@ const GoogleButton: FC<BaseSignInOptionProps> = ({
   isLoading,
   onSubmit,
   buttonClassName = '',
-  submitButtonText = 'Continue with Google',
+  preferences,
 }) => {
+  const {t} = useTranslation(preferences?.i18n);
   /**
    * Handle button click.
    */
@@ -51,15 +53,31 @@ const GoogleButton: FC<BaseSignInOptionProps> = ({
       startIcon={
         <svg width="18" height="18" viewBox="0 0 67.91 67.901" xmlns="http://www.w3.org/2000/svg">
           <g transform="translate(-0.001 -0.001)">
-            <path d="M15.049,160.965l-2.364,8.824-8.639.183a34.011,34.011,0,0,1-.25-31.7h0l7.691,1.41,3.369,7.645a20.262,20.262,0,0,0,.19,13.642Z" transform="translate(0 -119.93)" fill="#fbbb00" />
-            <path d="M294.24,208.176A33.939,33.939,0,0,1,282.137,241h0l-9.687-.494-1.371-8.559a20.235,20.235,0,0,0,8.706-10.333H261.628V208.176Z" transform="translate(-226.93 -180.567)" fill="#518ef8" />
-            <path d="M81.668,328.8h0a33.962,33.962,0,0,1-51.161-10.387l11-9.006a20.192,20.192,0,0,0,29.1,10.338Z" transform="translate(-26.463 -268.374)" fill="#28b446" />
-            <path d="M80.451,7.816l-11,9A20.19,20.19,0,0,0,39.686,27.393l-11.06-9.055h0A33.959,33.959,0,0,1,80.451,7.816Z" transform="translate(-24.828)" fill="#f14336" />
+            <path
+              d="M15.049,160.965l-2.364,8.824-8.639.183a34.011,34.011,0,0,1-.25-31.7h0l7.691,1.41,3.369,7.645a20.262,20.262,0,0,0,.19,13.642Z"
+              transform="translate(0 -119.93)"
+              fill="#fbbb00"
+            />
+            <path
+              d="M294.24,208.176A33.939,33.939,0,0,1,282.137,241h0l-9.687-.494-1.371-8.559a20.235,20.235,0,0,0,8.706-10.333H261.628V208.176Z"
+              transform="translate(-226.93 -180.567)"
+              fill="#518ef8"
+            />
+            <path
+              d="M81.668,328.8h0a33.962,33.962,0,0,1-51.161-10.387l11-9.006a20.192,20.192,0,0,0,29.1,10.338Z"
+              transform="translate(-26.463 -268.374)"
+              fill="#28b446"
+            />
+            <path
+              d="M80.451,7.816l-11,9A20.19,20.19,0,0,0,39.686,27.393l-11.06-9.055h0A33.959,33.959,0,0,1,80.451,7.816Z"
+              transform="translate(-24.828)"
+              fill="#f14336"
+            />
           </g>
         </svg>
       }
     >
-      {submitButtonText}
+      {t('elements.buttons.google')}
     </Button>
   );
 };
diff --git a/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx b/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
index c526aeebd..2b11a6bc1 100644
--- a/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
@@ -25,6 +25,7 @@ import {FC} from 'react';
 import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
+import useTranslation from '../../../../hooks/useTranslation';
 
 /**
  * Identifier First Sign-In Option Component.
@@ -38,8 +39,10 @@ const IdentifierFirst: FC<BaseSignInOptionProps> = ({
   onSubmit,
   inputClassName = '',
   buttonClassName = '',
-  submitButtonText = 'Continue',
+  preferences,
 }) => {
+  const {t} = useTranslation(preferences?.i18n);
+
   const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
 
   return (
@@ -74,7 +77,7 @@ const IdentifierFirst: FC<BaseSignInOptionProps> = ({
         fullWidth
         style={{marginBottom: '1rem'}}
       >
-        {submitButtonText}
+        {t('identifier.first.submit.button')}
       </Button>
     </>
   );
diff --git a/packages/react/src/components/presentation/SignIn/options/LinkedInButton.tsx b/packages/react/src/components/presentation/SignIn/options/LinkedInButton.tsx
index eee5229a0..68fb6a451 100644
--- a/packages/react/src/components/presentation/SignIn/options/LinkedInButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/LinkedInButton.tsx
@@ -19,6 +19,7 @@
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
+import useTranslation from '../../../../hooks/useTranslation';
 
 /**
  * LinkedIn Sign-In Button Component.
@@ -29,8 +30,9 @@ const LinkedInButton: FC<BaseSignInOptionProps> = ({
   isLoading,
   onSubmit,
   buttonClassName = '',
-  submitButtonText = 'Continue with LinkedIn',
+  preferences,
 }) => {
+  const {t} = useTranslation(preferences?.i18n);
   /**
    * Handle button click.
    */
@@ -50,11 +52,14 @@ const LinkedInButton: FC<BaseSignInOptionProps> = ({
       className={buttonClassName}
       startIcon={
         <svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path fill="#0077B5" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+          <path
+            fill="#0077B5"
+            d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
+          />
         </svg>
       }
     >
-      {submitButtonText}
+      {t('elements.buttons.linkedin')}
     </Button>
   );
 };
diff --git a/packages/react/src/components/presentation/SignIn/options/MicrosoftButton.tsx b/packages/react/src/components/presentation/SignIn/options/MicrosoftButton.tsx
index 2448ed679..f8403831b 100644
--- a/packages/react/src/components/presentation/SignIn/options/MicrosoftButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/MicrosoftButton.tsx
@@ -19,6 +19,7 @@
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
+import useTranslation from '../../../../hooks/useTranslation';
 
 /**
  * Microsoft Sign-In Button Component.
@@ -29,8 +30,9 @@ const MicrosoftButton: FC<BaseSignInOptionProps> = ({
   isLoading,
   onSubmit,
   buttonClassName = '',
-  submitButtonText = 'Continue with Microsoft',
+  preferences,
 }) => {
+  const {t} = useTranslation(preferences?.i18n);
   /**
    * Handle button click.
    */
@@ -58,7 +60,7 @@ const MicrosoftButton: FC<BaseSignInOptionProps> = ({
         </svg>
       }
     >
-      {submitButtonText}
+      {t('elements.buttons.microsoft')}
     </Button>
   );
 };
diff --git a/packages/react/src/components/presentation/SignIn/options/MultiOptionButton.tsx b/packages/react/src/components/presentation/SignIn/options/MultiOptionButton.tsx
new file mode 100644
index 000000000..d9f4019c7
--- /dev/null
+++ b/packages/react/src/components/presentation/SignIn/options/MultiOptionButton.tsx
@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {FC, JSX, ReactElement} from 'react';
+import Button from '../../../primitives/Button/Button';
+import {BaseSignInOptionProps} from './SignInOptionFactory';
+import {
+  ApplicationNativeAuthenticationConstants,
+  ApplicationNativeAuthenticationAuthenticatorKnownIdPType,
+} from '@asgardeo/browser';
+import useTranslation from '../../../../hooks/useTranslation';
+
+/**
+ * Multi Option Button Component.
+ * Renders authenticators as selectable buttons for multi-option prompts.
+ * Used when authenticators don't require immediate user input but need to be selected first.
+ */
+const MultiOptionButton: FC<BaseSignInOptionProps> = ({
+  authenticator,
+  isLoading,
+  onSubmit,
+  buttonClassName = '',
+  preferences,
+}) => {
+  const {t} = useTranslation(preferences?.i18n);
+
+  /**
+   * Get display name for the authenticator.
+   */
+  const getDisplayName = (): string => {
+    let authenticatorName = authenticator.authenticator;
+
+    if (authenticator.idp !== ApplicationNativeAuthenticationAuthenticatorKnownIdPType.Local) {
+      authenticatorName = authenticator.idp;
+    }
+
+    switch (authenticatorName) {
+      default:
+        return t('elements.buttons.multi.option', {connection: authenticatorName});
+    }
+  };
+
+  /**
+   * Get appropriate icon for the authenticator type.
+   */
+  const getIcon = (): ReactElement | null => {
+    const authenticatorId: string = authenticator.authenticatorId;
+
+    switch (authenticatorId) {
+      case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.SmsOtp:
+        return (
+          <svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill="currentColor"
+              d="M20 15.5c-1.25 0-2.45-.2-3.57-.57a1.02 1.02 0 0 0-1.02.24l-2.2 2.2a15.074 15.074 0 0 1-6.59-6.59l2.2-2.2c.27-.27.35-.67.24-1.02A11.36 11.36 0 0 1 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1M12 3v10l3-3h6V3z"
+            />
+          </svg>
+        );
+      case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.EmailOtp:
+        return (
+          <svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill="currentColor"
+              d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 4l-8 5l-8-5V6l8 5l8-5z"
+            />
+          </svg>
+        );
+      case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Totp:
+        return (
+          <svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path fill="currentColor" d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12c5.16-1.26 9-6.45 9-12V5z" />
+          </svg>
+        );
+      case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.PushNotification:
+        return (
+          <svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill="currentColor"
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m1-13h-2v6h2zm0 8h-2v2h2z"
+            />
+          </svg>
+        );
+      case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Passkey:
+        return (
+          <svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill="currentColor"
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m1-13h-2v6h2zm0 8h-2v2h2z"
+            />
+          </svg>
+        );
+      case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.MagicLink:
+        return (
+          <svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill="currentColor"
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m1-13h-2v6h2zm0 8h-2v2h2z"
+            />
+          </svg>
+        );
+      default:
+        return (
+          <svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill="currentColor"
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8z"
+            />
+          </svg>
+        );
+    }
+  };
+
+  /**
+   * Handle button click.
+   */
+  const handleClick = () => {
+    // For multi-option buttons, we call onSubmit without form data
+    // This will trigger the authenticator selection and likely move to the next step
+    onSubmit(authenticator);
+  };
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      color="primary"
+      fullWidth
+      disabled={isLoading}
+      loading={isLoading}
+      onClick={handleClick}
+      className={buttonClassName}
+      startIcon={getIcon()}
+    >
+      {getDisplayName()}
+    </Button>
+  );
+};
+
+export default MultiOptionButton;
diff --git a/packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx b/packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx
index f10a007f6..797b5fab7 100644
--- a/packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx
@@ -20,6 +20,7 @@ import {
   ApplicationNativeAuthenticationAuthenticator,
   ApplicationNativeAuthenticationAuthenticatorKnownIdPType,
   ApplicationNativeAuthenticationConstants,
+  WithPreferences,
 } from '@asgardeo/browser';
 import {ReactElement} from 'react';
 import UsernamePassword from './UsernamePassword';
@@ -33,12 +34,13 @@ import SignInWithEthereumButton from './SignInWithEthereumButton';
 import EmailOtp from './EmailOtp';
 import Totp from './Totp';
 import SmsOtp from './SmsOtp';
-import SocialLogin from './SocialLogin';
+import SocialButton from './SocialButton';
+import MultiOptionButton from './MultiOptionButton';
 
 /**
  * Base props that all sign-in option components share.
  */
-export interface BaseSignInOptionProps {
+export interface BaseSignInOptionProps extends WithPreferences {
   /**
    * The authenticator configuration.
    */
@@ -91,6 +93,9 @@ export interface BaseSignInOptionProps {
 export const createSignInOption = (props: BaseSignInOptionProps): ReactElement => {
   const {authenticator, ...optionProps} = props;
 
+  // Check if this authenticator has params (indicating it needs user input)
+  const hasParams = authenticator.metadata?.params && authenticator.metadata.params.length > 0;
+
   // Use authenticatorId to determine the component type
   switch (authenticator.authenticatorId) {
     case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.UsernamePassword:
@@ -118,23 +123,32 @@ export const createSignInOption = (props: BaseSignInOptionProps): ReactElement =
       return <SignInWithEthereumButton {...props} />;
 
     case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.EmailOtp:
-      return <EmailOtp {...props} />;
+      // If it has params, render as input form, otherwise as selection button
+      return hasParams ? <EmailOtp {...props} /> : <MultiOptionButton {...props} />;
 
     case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Totp:
-      return <Totp {...props} />;
+      // If it has params, render as input form, otherwise as selection button
+      return hasParams ? <Totp {...props} /> : <MultiOptionButton {...props} />;
 
     case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.SmsOtp:
-      return <SmsOtp {...props} />;
+      // If it has params, render as input form, otherwise as selection button
+      return hasParams ? <SmsOtp {...props} /> : <MultiOptionButton {...props} />;
 
     default:
       // Check if it's a federated authenticator (non-LOCAL idp)
       if (authenticator.idp !== ApplicationNativeAuthenticationAuthenticatorKnownIdPType.Local) {
         // For unknown federated authenticators, use generic social login
-        return <SocialLogin {...props} />;
+        return <SocialButton {...props} />;
       }
 
-      // Fallback to username/password for unknown local authenticators
-      return <UsernamePassword {...props} />;
+      // For LOCAL authenticators, decide based on whether they have params
+      if (hasParams) {
+        // Fallback to username/password for unknown local authenticators with params
+        return <UsernamePassword {...props} />;
+      } else {
+        // Use multi-option button for LOCAL authenticators without params
+        return <MultiOptionButton {...props} />;
+      }
   }
 };
 
@@ -150,7 +164,6 @@ export const createSignInOptionFromAuthenticator = (
   options?: {
     inputClassName?: string;
     buttonClassName?: string;
-    submitButtonText?: string;
     error?: string | null;
   },
 ): ReactElement => {
diff --git a/packages/react/src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx b/packages/react/src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx
index 0bddc1511..bad1c6dc2 100644
--- a/packages/react/src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx
@@ -18,6 +18,7 @@
 
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
+import useTranslation from '../../../../hooks/useTranslation';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
 
 /**
@@ -29,8 +30,10 @@ const SignInWithEthereumButton: FC<BaseSignInOptionProps> = ({
   isLoading,
   onSubmit,
   buttonClassName = '',
-  submitButtonText = 'Sign In With Ethereum',
+  preferences,
 }) => {
+  const {t} = useTranslation(preferences?.i18n);
+
   /**
    * Handle button click.
    */
@@ -50,11 +53,14 @@ const SignInWithEthereumButton: FC<BaseSignInOptionProps> = ({
       className={buttonClassName}
       startIcon={
         <svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path fill="#627EEA" d="M11.944 17.97L4.58 13.62 11.943 24l7.37-10.38-7.372 4.35h.003zM12.056 0L4.69 12.223l7.365 4.354 7.365-4.35L12.056 0z"/>
+          <path
+            fill="#627EEA"
+            d="M11.944 17.97L4.58 13.62 11.943 24l7.37-10.38-7.372 4.35h.003zM12.056 0L4.69 12.223l7.365 4.354 7.365-4.35L12.056 0z"
+          />
         </svg>
       }
     >
-      {submitButtonText}
+      {t('elements.buttons.ethereum')}
     </Button>
   );
 };
diff --git a/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx b/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
index 16a9a939f..46adf903f 100644
--- a/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
@@ -26,6 +26,7 @@ import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
 import OtpField from '../../../primitives/OtpField/OtpField';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
+import useTranslation from '../../../../hooks/useTranslation';
 
 /**
  * SMS OTP Sign-In Option Component.
@@ -39,8 +40,10 @@ const SmsOtp: FC<BaseSignInOptionProps> = ({
   onSubmit,
   inputClassName = '',
   buttonClassName = '',
-  submitButtonText = 'Verify SMS OTP',
+  preferences,
 }) => {
+  const {t} = useTranslation(preferences?.i18n);
+
   const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
 
   // Check if this is an OTP field (typically has 'otpCode' or similar parameter)
@@ -95,7 +98,7 @@ const SmsOtp: FC<BaseSignInOptionProps> = ({
         fullWidth
         style={{marginBottom: '1rem'}}
       >
-        {submitButtonText}
+        {t('sms.otp.submit.button')}
       </Button>
     </>
   );
diff --git a/packages/react/src/components/presentation/SignIn/options/SocialLogin.tsx b/packages/react/src/components/presentation/SignIn/options/SocialButton.tsx
similarity index 76%
rename from packages/react/src/components/presentation/SignIn/options/SocialLogin.tsx
rename to packages/react/src/components/presentation/SignIn/options/SocialButton.tsx
index 2d06acbba..882588ce0 100644
--- a/packages/react/src/components/presentation/SignIn/options/SocialLogin.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/SocialButton.tsx
@@ -19,18 +19,27 @@
 import {FC} from 'react';
 import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
+import useTranslation from '../../../../hooks/useTranslation';
 
 /**
  * Social Login Sign-In Option Component.
  * Handles authentication with external identity providers (Google, GitHub, etc.).
  */
-const SocialLogin: FC<BaseSignInOptionProps> = ({authenticator, isLoading, onSubmit, buttonClassName = ''}) => {
+const SocialLogin: FC<BaseSignInOptionProps> = ({
+  authenticator,
+  isLoading,
+  onSubmit,
+  buttonClassName = '',
+  preferences,
+}) => {
+  const {t} = useTranslation(preferences?.i18n);
+
   /**
    * Get display name for the social provider.
    */
   const getDisplayName = (): string => {
     const providerName = authenticator.idp;
-    return `Continue with ${providerName}`;
+    return t('elements.buttons.social', {connection: providerName});
   };
 
   /**
@@ -52,7 +61,10 @@ const SocialLogin: FC<BaseSignInOptionProps> = ({authenticator, isLoading, onSub
       className={buttonClassName}
       startIcon={
         <svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path fill="#6B7280" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+          <path
+            fill="#6B7280"
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+          />
         </svg>
       }
     >
diff --git a/packages/react/src/components/presentation/SignIn/options/Totp.tsx b/packages/react/src/components/presentation/SignIn/options/Totp.tsx
index ecdd14fc2..05644b5d9 100644
--- a/packages/react/src/components/presentation/SignIn/options/Totp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/Totp.tsx
@@ -26,6 +26,7 @@ import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
 import OtpField from '../../../primitives/OtpField/OtpField';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
+import useTranslation from '../../../../hooks/useTranslation';
 
 /**
  * TOTP Sign-In Option Component.
@@ -39,8 +40,10 @@ const Totp: FC<BaseSignInOptionProps> = ({
   onSubmit,
   inputClassName = '',
   buttonClassName = '',
-  submitButtonText = 'Verify TOTP',
+  preferences,
 }) => {
+  const {t} = useTranslation(preferences?.i18n);
+
   const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
 
   // Check if this is a TOTP field
@@ -95,7 +98,7 @@ const Totp: FC<BaseSignInOptionProps> = ({
         fullWidth
         style={{marginBottom: '1rem'}}
       >
-        {submitButtonText}
+        {t('totp.submit.button')}
       </Button>
     </>
   );
diff --git a/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx b/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
index cf423480b..c7aa42337 100644
--- a/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
@@ -25,6 +25,7 @@ import {FC} from 'react';
 import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
+import useTranslation from '../../../../hooks/useTranslation';
 
 /**
  * Username Password Sign-In Option Component.
@@ -38,8 +39,10 @@ const UsernamePassword: FC<BaseSignInOptionProps> = ({
   onSubmit,
   inputClassName = '',
   buttonClassName = '',
-  submitButtonText = 'Sign In',
+  preferences,
 }) => {
+  const {t} = useTranslation(preferences?.i18n);
+
   const formFields =
     authenticator.metadata?.params?.sort((a, b) => a.order - b.order)?.filter(param => param.param !== 'totp') || []; // Exclude TOTP fields for username/password
 
@@ -75,7 +78,7 @@ const UsernamePassword: FC<BaseSignInOptionProps> = ({
         fullWidth
         style={{marginBottom: '1rem'}}
       >
-        {submitButtonText}
+        {t('username.password.submit.button')}
       </Button>
     </>
   );
diff --git a/packages/react/src/contexts/I18n/I18nProvider.tsx b/packages/react/src/contexts/I18n/I18nProvider.tsx
index 36f4106ff..c249a861b 100644
--- a/packages/react/src/contexts/I18n/I18nProvider.tsx
+++ b/packages/react/src/contexts/I18n/I18nProvider.tsx
@@ -17,7 +17,7 @@
  */
 
 import {FC, PropsWithChildren, ReactElement, useCallback, useEffect, useMemo, useState} from 'react';
-import {I18nBundle, I18nPreferences} from '@asgardeo/browser';
+import {I18nBundle, I18nPreferences, deepMerge} from '@asgardeo/browser';
 import {getI18nBundles} from '@asgardeo/browser';
 import I18nContext, {I18nContextValue} from './I18nContext';
 
@@ -107,10 +107,20 @@ const I18nProvider: FC<PropsWithChildren<I18nProviderProps>> = ({
       merged[languageKey] = bundle;
     });
 
-    // Add user-provided bundles (these take precedence)
+    // Add user-provided bundles using deepMerge for better merging
     if (preferences?.bundles) {
-      Object.entries(preferences.bundles).forEach(([key, bundle]) => {
-        merged[key] = bundle;
+      Object.entries(preferences.bundles).forEach(([key, userBundle]) => {
+        if (merged[key]) {
+          // Deep merge user bundle with existing default bundle
+          merged[key] = {
+            ...merged[key],
+            translations: deepMerge(merged[key].translations, userBundle.translations),
+            metadata: userBundle.metadata ? {...merged[key].metadata, ...userBundle.metadata} : merged[key].metadata,
+          };
+        } else {
+          // No default bundle for this language, use user bundle as-is
+          merged[key] = userBundle;
+        }
       });
     }
 
diff --git a/packages/react/src/hooks/useTranslation.ts b/packages/react/src/hooks/useTranslation.ts
index 07121b3e5..981dbe2f8 100644
--- a/packages/react/src/hooks/useTranslation.ts
+++ b/packages/react/src/hooks/useTranslation.ts
@@ -16,7 +16,8 @@
  * under the License.
  */
 
-import {useContext} from 'react';
+import {useContext, useMemo} from 'react';
+import {deepMerge, I18nBundle, I18nPreferences} from '@asgardeo/browser';
 import I18nContext, {I18nContextValue} from '../contexts/I18n/I18nContext';
 
 export interface UseTranslation {
@@ -41,14 +42,22 @@ export interface UseTranslation {
   availableLanguages: string[];
 }
 
+export interface UseTranslationWithPreferences extends UseTranslation {
+  /**
+   * Enhanced translation function that merges component-level preferences
+   */
+  t: (key: string, params?: Record<string, string | number>) => string;
+}
+
 /**
  * Hook for accessing translation functions and language management.
  * Must be used within an I18nProvider context.
  *
+ * @param componentPreferences - Optional component-level i18n preferences to merge with global ones
  * @returns An object containing translation function and language management utilities
  * @throws Error if used outside of I18nProvider context
  */
-const useTranslation = (): UseTranslation => {
+const useTranslation = (componentPreferences?: I18nPreferences): UseTranslationWithPreferences => {
   const context = useContext(I18nContext);
 
   if (!context) {
@@ -57,13 +66,86 @@ const useTranslation = (): UseTranslation => {
     );
   }
 
-  const {t, currentLanguage, setLanguage, bundles} = context;
+  const {t: globalT, currentLanguage, setLanguage, bundles: globalBundles, fallbackLanguage} = context;
+
+  // Merge global bundles with component-level bundles if provided
+  const mergedBundles = useMemo(() => {
+    if (!componentPreferences?.bundles) {
+      return globalBundles;
+    }
+
+    const merged: Record<string, I18nBundle> = {};
+
+    // Start with global bundles
+    Object.entries(globalBundles).forEach(([key, bundle]) => {
+      merged[key] = bundle;
+    });
+
+    // Merge component-level bundles using deepMerge for better merging
+    Object.entries(componentPreferences.bundles).forEach(([key, componentBundle]) => {
+      if (merged[key]) {
+        // Deep merge component bundle with existing global bundle
+        merged[key] = {
+          ...merged[key],
+          translations: deepMerge(merged[key].translations, componentBundle.translations),
+          metadata: componentBundle.metadata
+            ? {...merged[key].metadata, ...componentBundle.metadata}
+            : merged[key].metadata,
+        };
+      } else {
+        // No global bundle for this language, use component bundle as-is
+        merged[key] = componentBundle;
+      }
+    });
+
+    return merged;
+  }, [globalBundles, componentPreferences?.bundles]);
+
+  // Create enhanced translation function that uses merged bundles
+  const enhancedT = useMemo(() => {
+    if (!componentPreferences?.bundles) {
+      // No component preferences, use global translation function
+      return globalT;
+    }
+
+    return (key: string, params?: Record<string, string | number>): string => {
+      let translation: string | undefined;
+
+      // Try to get translation from current language bundle
+      const currentBundle = mergedBundles[currentLanguage];
+      if (currentBundle?.translations[key]) {
+        translation = currentBundle.translations[key];
+      }
+
+      // Fallback to fallback language if translation not found
+      if (!translation && currentLanguage !== fallbackLanguage) {
+        const fallbackBundle = mergedBundles[fallbackLanguage];
+        if (fallbackBundle?.translations[key]) {
+          translation = fallbackBundle.translations[key];
+        }
+      }
+
+      // If still no translation found, return the key itself
+      if (!translation) {
+        translation = key;
+      }
+
+      // Replace parameters if provided
+      if (params && Object.keys(params).length > 0) {
+        return Object.entries(params).reduce((acc, [paramKey, paramValue]) => {
+          return acc.replace(new RegExp(`\\{${paramKey}\\}`, 'g'), String(paramValue));
+        }, translation);
+      }
+
+      return translation;
+    };
+  }, [mergedBundles, currentLanguage, fallbackLanguage, globalT, componentPreferences?.bundles]);
 
   return {
-    t,
+    t: enhancedT,
     currentLanguage,
     setLanguage,
-    availableLanguages: Object.keys(bundles),
+    availableLanguages: Object.keys(mergedBundles),
   };
 };
 
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index ccc79d816..72e741625 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -73,7 +73,8 @@ export {default as SignInWithEthereumButton} from './components/presentation/Sig
 export {default as EmailOtp} from './components/presentation/SignIn/options/EmailOtp';
 export {default as Totp} from './components/presentation/SignIn/options/Totp';
 export {default as SmsOtp} from './components/presentation/SignIn/options/SmsOtp';
-export {default as SocialLogin} from './components/presentation/SignIn/options/SocialLogin';
+export {default as SocialButton} from './components/presentation/SignIn/options/SocialButton';
+export {default as MultiOptionButton} from './components/presentation/SignIn/options/MultiOptionButton';
 export * from './components/presentation/SignIn/options/SignInOptionFactory';
 
 export {default as User} from './components/presentation/User';

From d2c5f84315033b2765f44a90a54997abd7b6d459 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Fri, 13 Jun 2025 11:40:00 +0530
Subject: [PATCH 074/131] fix(react): fix divider style

---
 .../components/primitives/Divider/Divider.tsx | 58 +++++++++----------
 1 file changed, 27 insertions(+), 31 deletions(-)

diff --git a/packages/react/src/components/primitives/Divider/Divider.tsx b/packages/react/src/components/primitives/Divider/Divider.tsx
index c1e40ef31..5f8212875 100644
--- a/packages/react/src/components/primitives/Divider/Divider.tsx
+++ b/packages/react/src/components/primitives/Divider/Divider.tsx
@@ -55,12 +55,14 @@ const useStyles = (orientation: DividerOrientation, variant: DividerVariant, col
 
     if (orientation === 'vertical') {
       return {
-        display: 'inline-block',
-        height: '100%',
-        minHeight: '1rem',
-        width: '1px',
-        borderLeft: `1px ${borderStyle} ${baseColor}`,
-        margin: `0 ${theme.spacing.unit}px`,
+        container: {
+          display: 'inline-block',
+          height: '100%',
+          minHeight: '1rem',
+          width: '1px',
+          borderLeft: `1px ${borderStyle} ${baseColor}`,
+          margin: `0 ${theme.spacing.unit}px`,
+        }
       };
     }
 
@@ -76,28 +78,26 @@ const useStyles = (orientation: DividerOrientation, variant: DividerVariant, col
 
     if (hasChildren) {
       return {
-        ...baseStyle,
-        '&::before': {
-          content: '""',
-          flex: 1,
-          height: '1px',
-          borderTop: `1px ${borderStyle} ${baseColor}`,
-          marginRight: `${theme.spacing.unit}px`,
-        },
-        '&::after': {
-          content: '""',
+        container: baseStyle,
+        line: {
           flex: 1,
           height: '1px',
           borderTop: `1px ${borderStyle} ${baseColor}`,
-          marginLeft: `${theme.spacing.unit}px`,
         },
+        text: {
+          backgroundColor: 'var(--background-color, #fff)',
+          padding: `0 ${theme.spacing.unit}px`,
+          whiteSpace: 'nowrap' as const,
+        }
       };
     }
 
     return {
-      ...baseStyle,
-      height: '1px',
-      borderTop: `1px ${borderStyle} ${baseColor}`,
+      container: {
+        ...baseStyle,
+        height: '1px',
+        borderTop: `1px ${borderStyle} ${baseColor}`,
+      }
     };
   }, [orientation, variant, color, hasChildren, theme]);
 };
@@ -129,13 +129,13 @@ const Divider: FC<DividerProps> = ({
   style,
   ...rest
 }) => {
-  const dividerStyle = useStyles(orientation, variant, color, !!children);
+  const styles = useStyles(orientation, variant, color, !!children);
 
   if (orientation === 'vertical') {
     return (
       <div
         className={clsx(withVendorCSSClassPrefix('divider'), withVendorCSSClassPrefix('divider-vertical'), className)}
-        style={{...dividerStyle, ...style}}
+        style={{...styles.container, ...style}}
         role="separator"
         aria-orientation="vertical"
         {...rest}
@@ -152,20 +152,16 @@ const Divider: FC<DividerProps> = ({
           withVendorCSSClassPrefix('divider-with-text'),
           className,
         )}
-        style={{...dividerStyle, ...style}}
+        style={{...styles.container, ...style}}
         role="separator"
         aria-orientation="horizontal"
         {...rest}
       >
-        <span
-          style={{
-            backgroundColor: 'var(--background-color, #fff)',
-            padding: '0 0.5rem',
-            whiteSpace: 'nowrap',
-          }}
-        >
+        <div style={styles.line} />
+        <span style={styles.text}>
           {children}
         </span>
+        <div style={styles.line} />
       </div>
     );
   }
@@ -173,7 +169,7 @@ const Divider: FC<DividerProps> = ({
   return (
     <div
       className={clsx(withVendorCSSClassPrefix('divider'), withVendorCSSClassPrefix('divider-horizontal'), className)}
-      style={{...dividerStyle, ...style}}
+      style={{...styles.container, ...style}}
       role="separator"
       aria-orientation="horizontal"
       {...rest}

From 603d6bade0887512d5de1ef34f31edf902e722ae Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Fri, 13 Jun 2025 13:42:25 +0530
Subject: [PATCH 075/131] feat(react): Add PasswordField component and update
 SignIn page with new password handling

---
 .../src/components/factories/FieldFactory.tsx | 35 +++----
 .../components/primitives/Divider/Divider.tsx | 10 +-
 .../PasswordField/PasswordField.tsx           | 93 +++++++++++++++++++
 packages/react/src/index.ts                   |  3 +
 4 files changed, 115 insertions(+), 26 deletions(-)
 create mode 100644 packages/react/src/components/primitives/PasswordField/PasswordField.tsx

diff --git a/packages/react/src/components/factories/FieldFactory.tsx b/packages/react/src/components/factories/FieldFactory.tsx
index 4b90ae8b1..f08aa4ef7 100644
--- a/packages/react/src/components/factories/FieldFactory.tsx
+++ b/packages/react/src/components/factories/FieldFactory.tsx
@@ -16,14 +16,13 @@
  * under the License.
  */
 
-import {FieldType} from '@asgardeo/browser';
-import {FC, ReactElement, useState} from 'react';
+import {FC, ReactElement} from 'react';
 import TextField from '../primitives/TextField/TextField';
 import Select from '../primitives/Select/Select';
 import {SelectOption} from '../primitives/Select/Select';
-import Eye from '../primitives/Icons/Eye';
-import EyeOff from '../primitives/Icons/EyeOff';
 import OtpField from '../primitives/OtpField/OtpField';
+import PasswordField from '../primitives/PasswordField/PasswordField';
+import {FieldType} from '@asgardeo/browser';
 
 /**
  * Interface for field configuration.
@@ -147,24 +146,20 @@ export const createField = (config: FieldConfig): ReactElement => {
     value,
   };
 
-  const PasswordToggleField: FC = () => {
-    const [showPassword, setShowPassword] = useState(false);
-
-    return (
-      <TextField
-        {...commonProps}
-        type={showPassword ? 'text' : 'password'}
-        onChange={e => onChange(e.target.value)}
-        autoComplete="current-password"
-        endIcon={showPassword ? <EyeOff width={16} height={16} /> : <Eye width={16} height={16} />}
-        onEndIconClick={() => setShowPassword(!showPassword)}
-      />
-    );
-  };
-
   switch (type) {
     case FieldType.Password:
-      return <PasswordToggleField />;
+      return (
+        <PasswordField
+          name={name}
+          label={label}
+          required={required}
+          disabled={disabled}
+          error={validationError}
+          className={className}
+          value={value}
+          onChange={onChange}
+        />
+      );
     case FieldType.Text:
       return <TextField {...commonProps} type="text" onChange={e => onChange(e.target.value)} autoComplete="off" />;
     case FieldType.Otp:
diff --git a/packages/react/src/components/primitives/Divider/Divider.tsx b/packages/react/src/components/primitives/Divider/Divider.tsx
index 5f8212875..14374b815 100644
--- a/packages/react/src/components/primitives/Divider/Divider.tsx
+++ b/packages/react/src/components/primitives/Divider/Divider.tsx
@@ -62,7 +62,7 @@ const useStyles = (orientation: DividerOrientation, variant: DividerVariant, col
           width: '1px',
           borderLeft: `1px ${borderStyle} ${baseColor}`,
           margin: `0 ${theme.spacing.unit}px`,
-        }
+        },
       };
     }
 
@@ -88,7 +88,7 @@ const useStyles = (orientation: DividerOrientation, variant: DividerVariant, col
           backgroundColor: 'var(--background-color, #fff)',
           padding: `0 ${theme.spacing.unit}px`,
           whiteSpace: 'nowrap' as const,
-        }
+        },
       };
     }
 
@@ -97,7 +97,7 @@ const useStyles = (orientation: DividerOrientation, variant: DividerVariant, col
         ...baseStyle,
         height: '1px',
         borderTop: `1px ${borderStyle} ${baseColor}`,
-      }
+      },
     };
   }, [orientation, variant, color, hasChildren, theme]);
 };
@@ -158,9 +158,7 @@ const Divider: FC<DividerProps> = ({
         {...rest}
       >
         <div style={styles.line} />
-        <span style={styles.text}>
-          {children}
-        </span>
+        <span style={styles.text}>{children}</span>
         <div style={styles.line} />
       </div>
     );
diff --git a/packages/react/src/components/primitives/PasswordField/PasswordField.tsx b/packages/react/src/components/primitives/PasswordField/PasswordField.tsx
new file mode 100644
index 000000000..1ef553514
--- /dev/null
+++ b/packages/react/src/components/primitives/PasswordField/PasswordField.tsx
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {FC, useState} from 'react';
+import TextField from '../TextField/TextField';
+import Eye from '../Icons/Eye';
+import EyeOff from '../Icons/EyeOff';
+
+export interface PasswordFieldProps {
+  /**
+   * Field name
+   */
+  name: string;
+  /**
+   * Label text to display above the input
+   */
+  label: string;
+  /**
+   * Whether the field is required
+   */
+  required: boolean;
+  /**
+   * Whether the field is disabled
+   */
+  disabled: boolean;
+  /**
+   * Error message to display below the input
+   */
+  error?: string | null;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Current value of the field
+   */
+  value: string;
+  /**
+   * Callback function when the field value changes
+   */
+  onChange: (value: string) => void;
+}
+
+/**
+ * Password field component with show/hide toggle functionality.
+ * This component is extracted to prevent re-rendering issues that cause loss of focus.
+ */
+const PasswordField: FC<PasswordFieldProps> = ({
+  name,
+  label,
+  required,
+  disabled,
+  error,
+  className,
+  value,
+  onChange,
+}) => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <TextField
+      name={name}
+      label={label}
+      required={required}
+      disabled={disabled}
+      error={error}
+      className={className}
+      value={value}
+      type={showPassword ? 'text' : 'password'}
+      onChange={e => onChange(e.target.value)}
+      autoComplete="current-password"
+      endIcon={showPassword ? <EyeOff width={16} height={16} /> : <Eye width={16} height={16} />}
+      onEndIconClick={() => setShowPassword(!showPassword)}
+    />
+  );
+};
+
+export default PasswordField;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 72e741625..3a49f0a8c 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -107,6 +107,9 @@ export * from './components/primitives/OtpField/OtpField';
 export {default as TextField} from './components/primitives/TextField/TextField';
 export * from './components/primitives/TextField/TextField';
 
+export {default as PasswordField} from './components/primitives/PasswordField/PasswordField';
+export * from './components/primitives/PasswordField/PasswordField';
+
 export {default as Select} from './components/primitives/Select/Select';
 export * from './components/primitives/Select/Select';
 

From bf44af875c80f29f12678b4a7b0f49a0fdf99cef Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Fri, 13 Jun 2025 14:06:01 +0530
Subject: [PATCH 076/131] feat(react): Implement useForm hook for enhanced form
 state management and validation

---
 .../src/components/factories/FieldFactory.tsx |  14 +-
 .../presentation/SignIn/BaseSignIn.tsx        | 204 ++++++---
 .../presentation/SignIn/options/EmailOtp.tsx  |   2 +
 .../SignIn/options/IdentifierFirst.tsx        |   2 +
 .../SignIn/options/SignInOptionFactory.tsx    |   7 +
 .../presentation/SignIn/options/SmsOtp.tsx    |   2 +
 .../presentation/SignIn/options/Totp.tsx      |   2 +
 .../SignIn/options/UsernamePassword.tsx       |   2 +
 packages/react/src/hooks/useForm.ts           | 419 ++++++++++++++++++
 packages/react/src/index.ts                   |   3 +
 10 files changed, 583 insertions(+), 74 deletions(-)
 create mode 100644 packages/react/src/hooks/useForm.ts

diff --git a/packages/react/src/components/factories/FieldFactory.tsx b/packages/react/src/components/factories/FieldFactory.tsx
index f08aa4ef7..ced562b55 100644
--- a/packages/react/src/components/factories/FieldFactory.tsx
+++ b/packages/react/src/components/factories/FieldFactory.tsx
@@ -65,6 +65,10 @@ export interface FieldConfig {
    * Additional options for multi-valued fields.
    */
   options?: SelectOption[];
+  /**
+   * Whether the field has been touched/interacted with by the user.
+   */
+  touched?: boolean;
 }
 
 /**
@@ -88,9 +92,9 @@ export const formatMultiValuedString = (values: string[]): string => {
 /**
  * Utility function to validate field values based on type
  */
-export const validateFieldValue = (value: string, type: FieldType, required: boolean = false): string | null => {
-  // Check if required field is empty
-  if (required && (!value || value.trim() === '')) {
+export const validateFieldValue = (value: string, type: FieldType, required: boolean = false, touched: boolean = false): string | null => {
+  // Only show required field errors if the field has been touched
+  if (required && touched && (!value || value.trim() === '')) {
     return 'This field is required';
   }
 
@@ -131,10 +135,10 @@ export const validateFieldValue = (value: string, type: FieldType, required: boo
  * ```
  */
 export const createField = (config: FieldConfig): ReactElement => {
-  const {name, type, label, required, value, onChange, disabled = false, error, className, options = []} = config;
+  const {name, type, label, required, value, onChange, disabled = false, error, className, options = [], touched = false} = config;
 
   // Auto-validate the field value
-  const validationError = error || validateFieldValue(value, type, required);
+  const validationError = error || validateFieldValue(value, type, required, touched);
 
   const commonProps = {
     name,
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index 99f9a589a..4989b4775 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -8,12 +8,7 @@
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
- * Unless require        }
-      }
-    } catch (err) {
-      const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.authenticationFailed');
-      setError(errorMessage);
-      onError?.(err as Error);pplicable law or agreed to in writing,
+ * Unless required by applicable law or agreed to in writing,
  * software distributed under the License is distributed on an
  * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  * KIND, either express or implied. See the License for the
@@ -31,12 +26,13 @@ import {
   AsgardeoAPIError,
   withVendorCSSClassPrefix,
 } from '@asgardeo/browser';
-import {FC, ReactElement, FormEvent, useState, useEffect} from 'react';
+import {FC, ReactElement, FormEvent, useEffect, useState, useCallback} from 'react';
 import {clsx} from 'clsx';
 import Card from '../../primitives/Card/Card';
 import Alert from '../../primitives/Alert/Alert';
 import Divider from '../../primitives/Divider/Divider';
 import useTranslation from '../../../hooks/useTranslation';
+import {useForm, FormField} from '../../../hooks/useForm';
 import {createSignInOptionFromAuthenticator} from './options/SignInOptionFactory';
 
 /**
@@ -184,66 +180,81 @@ const BaseSignIn: FC<BaseSignInProps> = ({
 }) => {
   const {t} = useTranslation();
 
-  // Internal state management
+  // Authentication state management
   const [isLoading, setIsLoading] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
   const [currentFlow, setCurrentFlow] = useState<ApplicationNativeAuthenticationInitiateResponse | null>(null);
   const [currentAuthenticator, setCurrentAuthenticator] = useState<ApplicationNativeAuthenticationAuthenticator | null>(
     null,
   );
-  const [formValues, setFormValues] = useState<Record<string, string>>({});
   const [error, setError] = useState<string | null>(null);
   const [messages, setMessages] = useState<Array<{type: string; message: string}>>([]);
 
-  // Generate CSS classes
-  const containerClasses = clsx(
-    styled && [
-      withVendorCSSClassPrefix('signin'),
-      withVendorCSSClassPrefix(`signin--${size}`),
-      withVendorCSSClassPrefix(`signin--${variant}`),
-    ],
-    className,
-  );
-
-  const inputClasses = clsx(
-    styled && [
-      withVendorCSSClassPrefix('signin__input'),
-      size === 'small' && withVendorCSSClassPrefix('signin__input--small'),
-      size === 'large' && withVendorCSSClassPrefix('signin__input--large'),
-    ],
-    inputClassName,
-  );
-
-  const buttonClasses = clsx(
-    styled && [
-      withVendorCSSClassPrefix('signin__button'),
-      size === 'small' && withVendorCSSClassPrefix('signin__button--small'),
-      size === 'large' && withVendorCSSClassPrefix('signin__button--large'),
-      variant === 'outlined' && withVendorCSSClassPrefix('signin__button--outlined'),
-      variant === 'filled' && withVendorCSSClassPrefix('signin__button--filled'),
-    ],
-    buttonClassName,
-  );
-
-  const errorClasses = clsx(styled && [withVendorCSSClassPrefix('signin__error')], errorClassName);
-
-  const messageClasses = clsx(styled && [withVendorCSSClassPrefix('signin__messages')], messageClassName);
+  // Create form fields configuration based on current authenticator
+  const formFields: FormField[] = currentAuthenticator?.metadata?.params?.map(param => ({
+    name: param.param,
+    required: currentAuthenticator.requiredParams.includes(param.param),
+    initialValue: '',
+    validator: (value: string) => {
+      if (currentAuthenticator.requiredParams.includes(param.param) && (!value || value.trim() === '')) {
+        return t('field.required');
+      }
+      return null;
+    },
+  })) || [];
+
+  // Initialize form with dynamic fields
+  const form = useForm<Record<string, string>>({
+    initialValues: {},
+    fields: formFields,
+    validateOnBlur: true,
+    validateOnChange: false,
+    requiredMessage: t('field.required'),
+  });
+
+  const {
+    values: formValues,
+    touched: touchedFields,
+    errors: formErrors,
+    isValid: isFormValid,
+    setValue: setFormValue,
+    setTouched: setFormTouched,
+    clearErrors: clearFormErrors,
+    validateField: validateFormField,
+    validateForm,
+    touchAllFields,
+    reset: resetForm,
+  } = form;
 
   /**
    * Setup form fields based on the current authenticator.
    */
-  const setupFormFields = (authenticator: ApplicationNativeAuthenticationAuthenticator) => {
+  const setupFormFields = useCallback((authenticator: ApplicationNativeAuthenticationAuthenticator) => {
     const initialValues: Record<string, string> = {};
     authenticator.metadata?.params?.forEach(param => {
       initialValues[param.param] = '';
     });
-    setFormValues(initialValues);
-  };
+    
+    // Reset form with new values
+    resetForm();
+    
+    // Set initial values for all fields
+    Object.keys(initialValues).forEach(key => {
+      setFormValue(key, initialValues[key]);
+    });
+  }, [resetForm, setFormValue]);
+
+  /**
+   * Mark all fields as touched for validation purposes.
+   */
+  const markAllFieldsAsTouched = useCallback(() => {
+    touchAllFields();
+  }, [touchAllFields]);
 
   /**
    * Initialize the authentication flow.
    */
-  const initializeFlow = async () => {
+  const initializeFlow = useCallback(async () => {
     setIsLoading(true);
     setError(null);
 
@@ -285,16 +296,25 @@ const BaseSignIn: FC<BaseSignInProps> = ({
     } finally {
       setIsLoading(false);
     }
-  };
+  }, [onInitialize, onFlowChange, onSuccess, onError, setupFormFields, t]);
 
   /**
    * Handle form submission.
    */
-  const handleSubmit = async (submittedValues: Record<string, string>) => {
+  const handleSubmit = useCallback(async (submittedValues: Record<string, string>) => {
     if (!currentFlow || !currentAuthenticator) {
       return;
     }
 
+    // Mark all fields as touched before validation
+    markAllFieldsAsTouched();
+
+    // Validate form before submission
+    const validation = validateForm();
+    if (!validation.isValid) {
+      return;
+    }
+
     setIsLoading(true);
     setError(null);
     setMessages([]);
@@ -357,12 +377,12 @@ const BaseSignIn: FC<BaseSignInProps> = ({
     } finally {
       setIsLoading(false);
     }
-  };
+  }, [currentFlow, currentAuthenticator, markAllFieldsAsTouched, validateForm, onAuthenticate, onFlowChange, onSuccess, onError, setupFormFields, t]);
 
   /**
    * Handle authenticator selection for multi-option prompts.
    */
-  const handleAuthenticatorSelection = async (
+  const handleAuthenticatorSelection = useCallback(async (
     authenticator: ApplicationNativeAuthenticationAuthenticator,
     formData?: Record<string, string>,
   ) => {
@@ -370,6 +390,11 @@ const BaseSignIn: FC<BaseSignInProps> = ({
       return;
     }
 
+    // Mark all fields as touched if we have form data (i.e., this is a submission)
+    if (formData) {
+      markAllFieldsAsTouched();
+    }
+
     setIsLoading(true);
     setError(null);
     setMessages([]);
@@ -395,6 +420,12 @@ const BaseSignIn: FC<BaseSignInProps> = ({
         }
       } else {
         if (formData) {
+          // Validate form before submission
+          const validation = validateForm();
+          if (!validation.isValid) {
+            return;
+          }
+
           const payload = {
             flowId: currentFlow.flowId,
             selectedAuthenticator: {
@@ -457,47 +488,79 @@ const BaseSignIn: FC<BaseSignInProps> = ({
     } finally {
       setIsLoading(false);
     }
-  };
+  }, [currentFlow, markAllFieldsAsTouched, validateForm, onAuthenticate, onFlowChange, onSuccess, onError, setupFormFields]);
 
   /**
    * Handle input value changes.
    */
-  const handleInputChange = (param: string, value: string) => {
-    setFormValues(prev => ({
-      ...prev,
-      [param]: value,
-    }));
-  };
-
-  // Initialize the flow on component mount
-  useEffect(() => {
-    if (!isInitialized) {
-      initializeFlow();
-    }
-  }, [isInitialized]);
+  const handleInputChange = useCallback((param: string, value: string) => {
+    setFormValue(param, value);
+    setFormTouched(param, true);
+  }, [setFormValue, setFormTouched]);
 
   /**
    * Check if current flow has multiple authenticator options.
    */
-  const hasMultipleOptions = (): boolean => {
+  const hasMultipleOptions = useCallback((): boolean => {
     return (
       currentFlow &&
       'nextStep' in currentFlow &&
-      currentFlow.nextStep?.stepType === ApplicationNativeAuthenticationStepType.MultOptionsPrompt &&
+      currentFlow.nextStep?.stepType === 'MULTI_OPTIONS_PROMPT' &&
       currentFlow.nextStep?.authenticators &&
       currentFlow.nextStep.authenticators.length > 1
     );
-  };
+  }, [currentFlow]);
 
   /**
    * Get available authenticators for selection.
    */
-  const getAvailableAuthenticators = (): ApplicationNativeAuthenticationAuthenticator[] => {
+  const getAvailableAuthenticators = useCallback((): ApplicationNativeAuthenticationAuthenticator[] => {
     if (!currentFlow || !('nextStep' in currentFlow) || !currentFlow.nextStep?.authenticators) {
       return [];
     }
     return currentFlow.nextStep.authenticators;
-  };
+  }, [currentFlow]);
+
+  // Generate CSS classes
+  const containerClasses = clsx(
+    styled && [
+      withVendorCSSClassPrefix('signin'),
+      withVendorCSSClassPrefix(`signin--${size}`),
+      withVendorCSSClassPrefix(`signin--${variant}`),
+    ],
+    className,
+  );
+
+  const inputClasses = clsx(
+    styled && [
+      withVendorCSSClassPrefix('signin__input'),
+      size === 'small' && withVendorCSSClassPrefix('signin__input--small'),
+      size === 'large' && withVendorCSSClassPrefix('signin__input--large'),
+    ],
+    inputClassName,
+  );
+
+  const buttonClasses = clsx(
+    styled && [
+      withVendorCSSClassPrefix('signin__button'),
+      size === 'small' && withVendorCSSClassPrefix('signin__button--small'),
+      size === 'large' && withVendorCSSClassPrefix('signin__button--large'),
+      variant === 'outlined' && withVendorCSSClassPrefix('signin__button--outlined'),
+      variant === 'filled' && withVendorCSSClassPrefix('signin__button--filled'),
+    ],
+    buttonClassName,
+  );
+
+  const errorClasses = clsx(styled && [withVendorCSSClassPrefix('signin__error')], errorClassName);
+
+  const messageClasses = clsx(styled && [withVendorCSSClassPrefix('signin__messages')], messageClassName);
+
+  // Initialize the flow on component mount
+  useEffect(() => {
+    if (!isInitialized) {
+      initializeFlow();
+    }
+  }, [isInitialized, initializeFlow]);
 
   if (!isInitialized && isLoading) {
     return showLoading ? (
@@ -576,6 +639,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
                   {createSignInOptionFromAuthenticator(
                     authenticator,
                     formValues,
+                    touchedFields,
                     isLoading,
                     handleInputChange,
                     handleAuthenticatorSelection,
@@ -600,6 +664,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
                 {createSignInOptionFromAuthenticator(
                   authenticator,
                   formValues,
+                  touchedFields,
                   isLoading,
                   handleInputChange,
                   handleAuthenticatorSelection,
@@ -679,6 +744,7 @@ const BaseSignIn: FC<BaseSignInProps> = ({
           {createSignInOptionFromAuthenticator(
             currentAuthenticator,
             formValues,
+            touchedFields,
             isLoading,
             handleInputChange,
             (authenticator, formData) => handleSubmit(formData || formValues),
diff --git a/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx b/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
index 85f5dd52a..579920b14 100644
--- a/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
@@ -35,6 +35,7 @@ import useTranslation from '../../../../hooks/useTranslation';
 const EmailOtp: FC<BaseSignInOptionProps> = ({
   authenticator,
   formValues,
+  touchedFields,
   isLoading,
   onInputChange,
   onSubmit,
@@ -82,6 +83,7 @@ const EmailOtp: FC<BaseSignInOptionProps> = ({
                 onChange: value => onInputChange(param.param, value),
                 disabled: isLoading,
                 className: inputClassName,
+                touched: touchedFields[param.param] || false,
               })
             )}
           </div>
diff --git a/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx b/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
index 2b11a6bc1..26e36003b 100644
--- a/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
@@ -34,6 +34,7 @@ import useTranslation from '../../../../hooks/useTranslation';
 const IdentifierFirst: FC<BaseSignInOptionProps> = ({
   authenticator,
   formValues,
+  touchedFields,
   isLoading,
   onInputChange,
   onSubmit,
@@ -63,6 +64,7 @@ const IdentifierFirst: FC<BaseSignInOptionProps> = ({
             onChange: value => onInputChange(param.param, value),
             disabled: isLoading,
             className: inputClassName,
+            touched: touchedFields[param.param] || false,
           })}
         </div>
       ))}
diff --git a/packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx b/packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx
index 797b5fab7..db68511e7 100644
--- a/packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx
@@ -51,6 +51,11 @@ export interface BaseSignInOptionProps extends WithPreferences {
    */
   formValues: Record<string, string>;
 
+  /**
+   * Touched state for form fields.
+   */
+  touchedFields: Record<string, boolean>;
+
   /**
    * Whether the component is in loading state.
    */
@@ -158,6 +163,7 @@ export const createSignInOption = (props: BaseSignInOptionProps): ReactElement =
 export const createSignInOptionFromAuthenticator = (
   authenticator: ApplicationNativeAuthenticationAuthenticator,
   formValues: Record<string, string>,
+  touchedFields: Record<string, boolean>,
   isLoading: boolean,
   onInputChange: (param: string, value: string) => void,
   onSubmit: (authenticator: ApplicationNativeAuthenticationAuthenticator, formData?: Record<string, string>) => void,
@@ -170,6 +176,7 @@ export const createSignInOptionFromAuthenticator = (
   return createSignInOption({
     authenticator,
     formValues,
+    touchedFields,
     isLoading,
     onInputChange,
     onSubmit,
diff --git a/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx b/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
index 46adf903f..93b7b2a2b 100644
--- a/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
@@ -35,6 +35,7 @@ import useTranslation from '../../../../hooks/useTranslation';
 const SmsOtp: FC<BaseSignInOptionProps> = ({
   authenticator,
   formValues,
+  touchedFields,
   isLoading,
   onInputChange,
   onSubmit,
@@ -82,6 +83,7 @@ const SmsOtp: FC<BaseSignInOptionProps> = ({
                 onChange: value => onInputChange(param.param, value),
                 disabled: isLoading,
                 className: inputClassName,
+                touched: touchedFields[param.param] || false,
               })
             )}
           </div>
diff --git a/packages/react/src/components/presentation/SignIn/options/Totp.tsx b/packages/react/src/components/presentation/SignIn/options/Totp.tsx
index 05644b5d9..196cbab6e 100644
--- a/packages/react/src/components/presentation/SignIn/options/Totp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/Totp.tsx
@@ -35,6 +35,7 @@ import useTranslation from '../../../../hooks/useTranslation';
 const Totp: FC<BaseSignInOptionProps> = ({
   authenticator,
   formValues,
+  touchedFields,
   isLoading,
   onInputChange,
   onSubmit,
@@ -82,6 +83,7 @@ const Totp: FC<BaseSignInOptionProps> = ({
                 onChange: value => onInputChange(param.param, value),
                 disabled: isLoading,
                 className: inputClassName,
+                touched: touchedFields[param.param] || false,
               })
             )}
           </div>
diff --git a/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx b/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
index c7aa42337..69af6db5b 100644
--- a/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
@@ -34,6 +34,7 @@ import useTranslation from '../../../../hooks/useTranslation';
 const UsernamePassword: FC<BaseSignInOptionProps> = ({
   authenticator,
   formValues,
+  touchedFields,
   isLoading,
   onInputChange,
   onSubmit,
@@ -64,6 +65,7 @@ const UsernamePassword: FC<BaseSignInOptionProps> = ({
             onChange: value => onInputChange(param.param, value),
             disabled: isLoading,
             className: inputClassName,
+            touched: touchedFields[param.param] || false,
           })}
         </div>
       ))}
diff --git a/packages/react/src/hooks/useForm.ts b/packages/react/src/hooks/useForm.ts
new file mode 100644
index 000000000..cc17d02fa
--- /dev/null
+++ b/packages/react/src/hooks/useForm.ts
@@ -0,0 +1,419 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {useState, useCallback} from 'react';
+
+/**
+ * Generic form field configuration
+ */
+export interface FormField {
+  name: string;
+  required?: boolean;
+  initialValue?: string;
+  validator?: (value: string) => string | null;
+}
+
+/**
+ * Form validation result
+ */
+export interface ValidationResult {
+  isValid: boolean;
+  errors: Record<string, string>;
+}
+
+/**
+ * Configuration for the useForm hook
+ */
+export interface UseFormConfig<T extends Record<string, string>> {
+  /**
+   * Initial form values
+   */
+  initialValues?: Partial<T>;
+  /**
+   * Form field definitions
+   */
+  fields?: FormField[];
+  /**
+   * Global form validator function
+   */
+  validator?: (values: T) => Record<string, string>;
+  /**
+   * Whether to validate on change (default: false)
+   */
+  validateOnChange?: boolean;
+  /**
+   * Whether to validate on blur (default: true)
+   */
+  validateOnBlur?: boolean;
+  /**
+   * Custom required field validation message
+   */
+  requiredMessage?: string;
+}
+
+/**
+ * Return type for the useForm hook
+ */
+export interface UseFormReturn<T extends Record<string, string>> {
+  /**
+   * Current form values
+   */
+  values: T;
+  /**
+   * Fields that have been touched by the user
+   */
+  touched: Record<keyof T, boolean>;
+  /**
+   * Current validation errors
+   */
+  errors: Record<keyof T, string>;
+  /**
+   * Whether the form is currently valid
+   */
+  isValid: boolean;
+  /**
+   * Whether the form has been submitted
+   */
+  isSubmitted: boolean;
+  /**
+   * Set a single field value
+   */
+  setValue: (name: keyof T, value: string) => void;
+  /**
+   * Set multiple field values
+   */
+  setValues: (values: Partial<T>) => void;
+  /**
+   * Mark a field as touched
+   */
+  setTouched: (name: keyof T, touched?: boolean) => void;
+  /**
+   * Mark multiple fields as touched
+   */
+  setTouchedFields: (touched: Partial<Record<keyof T, boolean>>) => void;
+  /**
+   * Mark all fields as touched
+   */
+  touchAllFields: () => void;
+  /**
+   * Set a field error
+   */
+  setError: (name: keyof T, error: string) => void;
+  /**
+   * Set multiple field errors
+   */
+  setErrors: (errors: Partial<Record<keyof T, string>>) => void;
+  /**
+   * Clear all errors
+   */
+  clearErrors: () => void;
+  /**
+   * Validate a single field
+   */
+  validateField: (name: keyof T) => string | null;
+  /**
+   * Validate all fields
+   */
+  validateForm: () => ValidationResult;
+  /**
+   * Reset the form to initial values
+   */
+  reset: () => void;
+  /**
+   * Handle form submission
+   */
+  handleSubmit: (onSubmit: (values: T) => void | Promise<void>) => (e?: React.FormEvent) => Promise<void>;
+  /**
+   * Get field props for easy integration with form components
+   */
+  getFieldProps: (name: keyof T) => {
+    name: keyof T;
+    value: string;
+    onChange: (value: string) => void;
+    onBlur: () => void;
+    error: string | undefined;
+    touched: boolean;
+    required: boolean;
+  };
+}
+
+/**
+ * Generic form hook that provides comprehensive form state management and validation.
+ * 
+ * @template T - The type of form values (must extend Record<string, string>)
+ * @param config - Configuration options for the form
+ * @returns Form state and methods
+ * 
+ * @example
+ * ```tsx
+ * interface LoginForm {
+ *   username: string;
+ *   password: string;
+ * }
+ * 
+ * const {
+ *   values,
+ *   touched,
+ *   errors,
+ *   isValid,
+ *   setValue,
+ *   handleSubmit,
+ *   getFieldProps
+ * } = useForm<LoginForm>({
+ *   initialValues: { username: '', password: '' },
+ *   fields: [
+ *     { name: 'username', required: true },
+ *     { name: 'password', required: true }
+ *   ]
+ * });
+ * 
+ * const onSubmit = handleSubmit((values) => {
+ *   console.log('Form submitted:', values);
+ * });
+ * 
+ * return (
+ *   <form onSubmit={onSubmit}>
+ *     <input {...getFieldProps('username')} />
+ *     <input {...getFieldProps('password')} type="password" />
+ *     <button type="submit" disabled={!isValid}>Submit</button>
+ *   </form>
+ * );
+ * ```
+ */
+export const useForm = <T extends Record<string, string>>(
+  config: UseFormConfig<T> = {}
+): UseFormReturn<T> => {
+  const {
+    initialValues = {} as T,
+    fields = [],
+    validator,
+    validateOnChange = false,
+    validateOnBlur = true,
+    requiredMessage = 'This field is required',
+  } = config;
+
+  // Initialize form state
+  const [values, setFormValues] = useState<T>({...initialValues} as T);
+  const [touched, setFormTouched] = useState<Record<keyof T, boolean>>({} as Record<keyof T, boolean>);
+  const [errors, setFormErrors] = useState<Record<keyof T, string>>({} as Record<keyof T, string>);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  // Get field configuration by name
+  const getFieldConfig = useCallback((name: keyof T): FormField | undefined => {
+    return fields.find(field => field.name === name);
+  }, [fields]);
+
+  // Validate a single field
+  const validateField = useCallback((name: keyof T): string | null => {
+    const value = values[name] || '';
+    const fieldConfig = getFieldConfig(name);
+    
+    // Check required validation
+    if (fieldConfig?.required && (!value || value.trim() === '')) {
+      return requiredMessage;
+    }
+    
+    // Run custom field validator
+    if (fieldConfig?.validator) {
+      const fieldError = fieldConfig.validator(value);
+      if (fieldError) return fieldError;
+    }
+    
+    return null;
+  }, [values, getFieldConfig, requiredMessage]);
+
+  // Validate the entire form
+  const validateForm = useCallback((): ValidationResult => {
+    const newErrors: Record<keyof T, string> = {} as Record<keyof T, string>;
+    
+    // Validate individual fields
+    fields.forEach(field => {
+      const error = validateField(field.name as keyof T);
+      if (error) {
+        newErrors[field.name as keyof T] = error;
+      }
+    });
+    
+    // Run global validator if provided
+    if (validator) {
+      const globalErrors = validator(values);
+      Object.keys(globalErrors).forEach(key => {
+        if (globalErrors[key]) {
+          newErrors[key as keyof T] = globalErrors[key];
+        }
+      });
+    }
+    
+    return {
+      isValid: Object.keys(newErrors).length === 0,
+      errors: newErrors,
+    };
+  }, [fields, validateField, validator, values]);
+
+  // Check if form is currently valid
+  const isValid = Object.keys(errors).length === 0;
+
+  // Set a single field value
+  const setValue = useCallback((name: keyof T, value: string) => {
+    setFormValues(prev => ({
+      ...prev,
+      [name]: value,
+    }));
+    
+    // Validate on change if enabled
+    if (validateOnChange) {
+      const error = validateField(name);
+      setFormErrors(prev => ({
+        ...prev,
+        [name]: error || '',
+      }));
+    }
+  }, [validateField, validateOnChange]);
+
+  // Set multiple field values
+  const setValues = useCallback((newValues: Partial<T>) => {
+    setFormValues(prev => ({
+      ...prev,
+      ...newValues,
+    }));
+  }, []);
+
+  // Mark a field as touched
+  const setTouched = useCallback((name: keyof T, isTouched: boolean = true) => {
+    setFormTouched(prev => ({
+      ...prev,
+      [name]: isTouched,
+    }));
+    
+    // Validate on blur if enabled and field is touched
+    if (validateOnBlur && isTouched) {
+      const error = validateField(name);
+      setFormErrors(prev => ({
+        ...prev,
+        [name]: error || '',
+      }));
+    }
+  }, [validateField, validateOnBlur]);
+
+  // Set multiple touched fields
+  const setTouchedFields = useCallback((touchedFields: Partial<Record<keyof T, boolean>>) => {
+    setFormTouched(prev => ({
+      ...prev,
+      ...touchedFields,
+    }));
+  }, []);
+
+  // Mark all fields as touched
+  const touchAllFields = useCallback(() => {
+    const allTouched = fields.reduce((acc, field) => {
+      acc[field.name as keyof T] = true;
+      return acc;
+    }, {} as Record<keyof T, boolean>);
+    
+    setFormTouched(allTouched);
+    
+    // Validate all fields
+    const validation = validateForm();
+    setFormErrors(validation.errors as Record<keyof T, string>);
+  }, [fields, validateForm]);
+
+  // Set a field error
+  const setError = useCallback((name: keyof T, error: string) => {
+    setFormErrors(prev => ({
+      ...prev,
+      [name]: error,
+    }));
+  }, []);
+
+  // Set multiple field errors
+  const setErrors = useCallback((newErrors: Partial<Record<keyof T, string>>) => {
+    setFormErrors(prev => ({
+      ...prev,
+      ...newErrors,
+    }));
+  }, []);
+
+  // Clear all errors
+  const clearErrors = useCallback(() => {
+    setFormErrors({} as Record<keyof T, string>);
+  }, []);
+
+  // Reset form to initial state
+  const reset = useCallback(() => {
+    setFormValues({...initialValues} as T);
+    setFormTouched({} as Record<keyof T, boolean>);
+    setFormErrors({} as Record<keyof T, string>);
+    setIsSubmitted(false);
+  }, [initialValues]);
+
+  // Handle form submission
+  const handleSubmit = useCallback((onSubmit: (values: T) => void | Promise<void>) => {
+    return async (e?: React.FormEvent) => {
+      if (e) {
+        e.preventDefault();
+      }
+      
+      setIsSubmitted(true);
+      touchAllFields();
+      
+      const validation = validateForm();
+      
+      if (validation.isValid) {
+        await onSubmit(values);
+      }
+    };
+  }, [values, touchAllFields, validateForm]);
+
+  // Get field props for easy integration
+  const getFieldProps = useCallback((name: keyof T) => {
+    const fieldConfig = getFieldConfig(name);
+    
+    return {
+      name,
+      value: values[name] || '',
+      onChange: (value: string) => setValue(name, value),
+      onBlur: () => setTouched(name, true),
+      error: touched[name] ? errors[name] : undefined,
+      touched: touched[name] || false,
+      required: fieldConfig?.required || false,
+    };
+  }, [values, errors, touched, setValue, setTouched, getFieldConfig]);
+
+  return {
+    values,
+    touched,
+    errors,
+    isValid,
+    isSubmitted,
+    setValue,
+    setValues,
+    setTouched,
+    setTouchedFields,
+    touchAllFields,
+    setError,
+    setErrors,
+    clearErrors,
+    validateField,
+    validateForm,
+    reset,
+    handleSubmit,
+    getFieldProps,
+  };
+};
+
+export default useForm;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 3a49f0a8c..0b1ba2780 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -31,6 +31,9 @@ export * from './hooks/useBrowserUrl';
 export {default as useTranslation} from './hooks/useTranslation';
 export * from './hooks/useTranslation';
 
+export {default as useForm} from './hooks/useForm';
+export * from './hooks/useForm';
+
 export {default as BaseSignInButton} from './components/actions/SignInButton/BaseSignInButton';
 export * from './components/actions/SignInButton/BaseSignInButton';
 

From 184265909c79b6a7a0aa86728b5b97671baccc28 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Fri, 13 Jun 2025 14:06:59 +0530
Subject: [PATCH 077/131] chore: fix formatting and i18n

---
 packages/javascript/src/i18n/en-US.ts         |  63 --
 packages/javascript/src/models/i18n.ts        |  36 +-
 .../src/components/factories/FieldFactory.tsx |  21 +-
 .../presentation/SignIn/BaseSignIn.tsx        | 377 ++++++------
 packages/react/src/hooks/useForm.ts           | 192 +++---
 packages/react/src/hooks/useSignInForm.ts     | 560 ++++++++++++++++++
 .../vite-react-ts/src/components/Header.tsx   |   8 +-
 recipes/vite-react-ts/src/pages/SignIn.tsx    |  10 +-
 8 files changed, 928 insertions(+), 339 deletions(-)
 create mode 100644 packages/react/src/hooks/useSignInForm.ts

diff --git a/packages/javascript/src/i18n/en-US.ts b/packages/javascript/src/i18n/en-US.ts
index eb8a34e29..1d3bbc1d5 100644
--- a/packages/javascript/src/i18n/en-US.ts
+++ b/packages/javascript/src/i18n/en-US.ts
@@ -54,69 +54,6 @@ const translations: I18nTranslations = {
   
   /* Username Password */
   'username.password.submit.button': 'Continue',
-
-  // Sign In related
-  'signin.title': 'Sign In',
-  'signin.subtitle': 'Welcome back! Please sign in to continue.',
-  'signin.loading': 'Signing in...',
-
-  // Social Login Buttons
-  'buttons.continueWithGoogle': 'Continue with Google',
-  'buttons.continueWithGitHub': 'Continue with GitHub',
-  'buttons.continueWithMicrosoft': 'Continue with Microsoft',
-  'buttons.continueWithFacebook': 'Continue with Facebook',
-  'buttons.continueWithLinkedIn': 'Continue with LinkedIn',
-  'buttons.continueWithEthereum': 'Continue with Sign In Ethereum',
-
-  // Form Fields
-  'fields.username': 'Username',
-  'fields.password': 'Password',
-  'fields.email': 'Email',
-  'fields.confirmPassword': 'Confirm Password',
-  'fields.rememberMe': 'Remember me',
-
-  // Placeholders
-  'placeholders.enterUsername': 'Enter your username',
-  'placeholders.enterPassword': 'Enter your password',
-  'placeholders.enterEmail': 'Enter your email address',
-  'placeholders.enterOTP': 'Enter verification code',
-
-  // Messages
-  'messages.loading': 'Loading...',
-  'messages.success': 'Success!',
-  'messages.error': 'An error occurred',
-  'messages.invalidCredentials': 'Invalid username or password',
-  'messages.accountLocked': 'Account is locked. Please contact support.',
-
-  // Multi-factor Authentication
-  'mfa.title': 'Multi-Factor Authentication',
-  'mfa.subtitle': 'Please verify your identity',
-  'mfa.emailOtp.title': 'Email Verification',
-  'mfa.emailOtp.subtitle': 'Enter the verification code sent to your email',
-  'mfa.smsOtp.title': 'SMS Verification',
-  'mfa.smsOtp.subtitle': 'Enter the verification code sent to your phone',
-  'mfa.totp.title': 'Authenticator App',
-  'mfa.totp.subtitle': 'Enter the code from your authenticator app',
-
-  // Links
-  'links.forgotPassword': 'Forgot Password?',
-  'links.createAccount': 'Create an account',
-  'links.backToSignIn': 'Back to Sign In',
-  'links.help': 'Need help?',
-
-  // Errors
-  'errors.network': 'Network error. Please check your connection.',
-  'errors.timeout': 'Request timed out. Please try again.',
-  'errors.unauthorized': 'You are not authorized to access this resource.',
-  'errors.forbidden': 'Access forbidden.',
-  'errors.notFound': 'Resource not found.',
-  'errors.serverError': 'Server error. Please try again later.',
-  'errors.unknown': 'An unknown error occurred.',
-  'errors.authenticationFailed': 'Authentication failed',
-  'errors.authenticationFailedDetail': 'Authentication failed. Please check your credentials and try again.',
-  'errors.initializationFailed': 'Failed to initialize authentication',
-  'errors.title': 'Error',
-  'errors.authenticationError': 'Authentication Error',
 };
 
 const metadata: I18nMetadata = {
diff --git a/packages/javascript/src/models/i18n.ts b/packages/javascript/src/models/i18n.ts
index 5c66d97eb..df04656a1 100644
--- a/packages/javascript/src/models/i18n.ts
+++ b/packages/javascript/src/models/i18n.ts
@@ -17,7 +17,41 @@
  */
 
 export interface I18nTranslations {
-  'signin.title': string;
+  /* |---------------------------------------------------------------| */
+  /* |                        Elements                               | */
+  /* |---------------------------------------------------------------| */
+
+  //* Buttons */
+  'elements.buttons.signIn': string;
+  'elements.buttons.signOut': string;
+  'elements.buttons.signUp': string;
+  'elements.buttons.facebook': string;
+  'elements.buttons.google': string;
+  'elements.buttons.github': string;
+  'elements.buttons.microsoft': string;
+  'elements.buttons.linkedin': string;
+  'elements.buttons.ethereum': string;
+  'elements.buttons.multi.option': string;
+  'elements.buttons.social': string;
+
+  /* |---------------------------------------------------------------| */
+  /* |                        Widgets                                | */
+  /* |---------------------------------------------------------------| */
+
+  /* Email OTP */
+  'email.otp.submit.button': string;
+
+  /* Identifier First */
+  'identifier.first.submit.button': string;
+
+  /* SMS OTP */
+  'sms.otp.submit.button': string;
+
+  /* TOTP */
+  'totp.submit.button': string;
+
+  /* Username Password */
+  'username.password.submit.button': string;
 }
 
 export type I18nTextDirection = 'ltr' | 'rtl';
diff --git a/packages/react/src/components/factories/FieldFactory.tsx b/packages/react/src/components/factories/FieldFactory.tsx
index ced562b55..fbd57d141 100644
--- a/packages/react/src/components/factories/FieldFactory.tsx
+++ b/packages/react/src/components/factories/FieldFactory.tsx
@@ -92,7 +92,12 @@ export const formatMultiValuedString = (values: string[]): string => {
 /**
  * Utility function to validate field values based on type
  */
-export const validateFieldValue = (value: string, type: FieldType, required: boolean = false, touched: boolean = false): string | null => {
+export const validateFieldValue = (
+  value: string,
+  type: FieldType,
+  required: boolean = false,
+  touched: boolean = false,
+): string | null => {
   // Only show required field errors if the field has been touched
   if (required && touched && (!value || value.trim() === '')) {
     return 'This field is required';
@@ -135,7 +140,19 @@ export const validateFieldValue = (value: string, type: FieldType, required: boo
  * ```
  */
 export const createField = (config: FieldConfig): ReactElement => {
-  const {name, type, label, required, value, onChange, disabled = false, error, className, options = [], touched = false} = config;
+  const {
+    name,
+    type,
+    label,
+    required,
+    value,
+    onChange,
+    disabled = false,
+    error,
+    className,
+    options = [],
+    touched = false,
+  } = config;
 
   // Auto-validate the field value
   const validationError = error || validateFieldValue(value, type, required, touched);
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index 4989b4775..5e73ac04d 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -191,17 +191,18 @@ const BaseSignIn: FC<BaseSignInProps> = ({
   const [messages, setMessages] = useState<Array<{type: string; message: string}>>([]);
 
   // Create form fields configuration based on current authenticator
-  const formFields: FormField[] = currentAuthenticator?.metadata?.params?.map(param => ({
-    name: param.param,
-    required: currentAuthenticator.requiredParams.includes(param.param),
-    initialValue: '',
-    validator: (value: string) => {
-      if (currentAuthenticator.requiredParams.includes(param.param) && (!value || value.trim() === '')) {
-        return t('field.required');
-      }
-      return null;
-    },
-  })) || [];
+  const formFields: FormField[] =
+    currentAuthenticator?.metadata?.params?.map(param => ({
+      name: param.param,
+      required: currentAuthenticator.requiredParams.includes(param.param),
+      initialValue: '',
+      validator: (value: string) => {
+        if (currentAuthenticator.requiredParams.includes(param.param) && (!value || value.trim() === '')) {
+          return t('field.required');
+        }
+        return null;
+      },
+    })) || [];
 
   // Initialize form with dynamic fields
   const form = useForm<Record<string, string>>({
@@ -229,20 +230,23 @@ const BaseSignIn: FC<BaseSignInProps> = ({
   /**
    * Setup form fields based on the current authenticator.
    */
-  const setupFormFields = useCallback((authenticator: ApplicationNativeAuthenticationAuthenticator) => {
-    const initialValues: Record<string, string> = {};
-    authenticator.metadata?.params?.forEach(param => {
-      initialValues[param.param] = '';
-    });
-    
-    // Reset form with new values
-    resetForm();
-    
-    // Set initial values for all fields
-    Object.keys(initialValues).forEach(key => {
-      setFormValue(key, initialValues[key]);
-    });
-  }, [resetForm, setFormValue]);
+  const setupFormFields = useCallback(
+    (authenticator: ApplicationNativeAuthenticationAuthenticator) => {
+      const initialValues: Record<string, string> = {};
+      authenticator.metadata?.params?.forEach(param => {
+        initialValues[param.param] = '';
+      });
+
+      // Reset form with new values
+      resetForm();
+
+      // Set initial values for all fields
+      Object.keys(initialValues).forEach(key => {
+        setFormValue(key, initialValues[key]);
+      });
+    },
+    [resetForm, setFormValue],
+  );
 
   /**
    * Mark all fields as touched for validation purposes.
@@ -301,113 +305,31 @@ const BaseSignIn: FC<BaseSignInProps> = ({
   /**
    * Handle form submission.
    */
-  const handleSubmit = useCallback(async (submittedValues: Record<string, string>) => {
-    if (!currentFlow || !currentAuthenticator) {
-      return;
-    }
-
-    // Mark all fields as touched before validation
-    markAllFieldsAsTouched();
-
-    // Validate form before submission
-    const validation = validateForm();
-    if (!validation.isValid) {
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-    setMessages([]);
-
-    try {
-      const payload = {
-        flowId: currentFlow.flowId,
-        selectedAuthenticator: {
-          authenticatorId: currentAuthenticator.authenticatorId,
-          params: submittedValues,
-        },
-      };
-
-      const response = await onAuthenticate(payload);
-      onFlowChange?.(response);
-
-      if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
-        onSuccess?.(response.authData);
-        return;
-      }
-
-      if (
-        response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
-        response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
-      ) {
-        setError(t('errors.authenticationFailedDetail'));
+  const handleSubmit = useCallback(
+    async (submittedValues: Record<string, string>) => {
+      if (!currentFlow || !currentAuthenticator) {
         return;
       }
 
-      if ('flowId' in response && 'nextStep' in response) {
-        const nextStepResponse = response as any;
-        setCurrentFlow(nextStepResponse);
-
-        if (nextStepResponse.nextStep?.authenticators?.length > 0) {
-          if (
-            nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
-            nextStepResponse.nextStep.authenticators.length > 1
-          ) {
-            setCurrentAuthenticator(null);
-          } else {
-            const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
-            setCurrentAuthenticator(nextAuthenticator);
-            setupFormFields(nextAuthenticator);
-          }
-        }
+      // Mark all fields as touched before validation
+      markAllFieldsAsTouched();
 
-        if (nextStepResponse.nextStep?.messages) {
-          setMessages(
-            nextStepResponse.nextStep.messages.map((msg: any) => ({
-              type: msg.type || 'INFO',
-              message: msg.message || '',
-            })),
-          );
-        }
+      // Validate form before submission
+      const validation = validateForm();
+      if (!validation.isValid) {
+        return;
       }
-    } catch (err) {
-      const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.authenticationFailed');
-      setError(errorMessage);
-      onError?.(err as Error);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [currentFlow, currentAuthenticator, markAllFieldsAsTouched, validateForm, onAuthenticate, onFlowChange, onSuccess, onError, setupFormFields, t]);
 
-  /**
-   * Handle authenticator selection for multi-option prompts.
-   */
-  const handleAuthenticatorSelection = useCallback(async (
-    authenticator: ApplicationNativeAuthenticationAuthenticator,
-    formData?: Record<string, string>,
-  ) => {
-    if (!currentFlow) {
-      return;
-    }
-
-    // Mark all fields as touched if we have form data (i.e., this is a submission)
-    if (formData) {
-      markAllFieldsAsTouched();
-    }
+      setIsLoading(true);
+      setError(null);
+      setMessages([]);
 
-    setIsLoading(true);
-    setError(null);
-    setMessages([]);
-
-    try {
-      if (
-        authenticator.metadata?.promptType === ApplicationNativeAuthenticationAuthenticatorPromptType.REDIRECTION_PROMPT
-      ) {
+      try {
         const payload = {
           flowId: currentFlow.flowId,
           selectedAuthenticator: {
-            authenticatorId: authenticator.authenticatorId,
-            params: {},
+            authenticatorId: currentAuthenticator.authenticatorId,
+            params: submittedValues,
           },
         };
 
@@ -418,19 +340,91 @@ const BaseSignIn: FC<BaseSignInProps> = ({
           onSuccess?.(response.authData);
           return;
         }
-      } else {
-        if (formData) {
-          // Validate form before submission
-          const validation = validateForm();
-          if (!validation.isValid) {
-            return;
+
+        if (
+          response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
+          response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
+        ) {
+          setError(t('errors.authenticationFailedDetail'));
+          return;
+        }
+
+        if ('flowId' in response && 'nextStep' in response) {
+          const nextStepResponse = response as any;
+          setCurrentFlow(nextStepResponse);
+
+          if (nextStepResponse.nextStep?.authenticators?.length > 0) {
+            if (
+              nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
+              nextStepResponse.nextStep.authenticators.length > 1
+            ) {
+              setCurrentAuthenticator(null);
+            } else {
+              const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
+              setCurrentAuthenticator(nextAuthenticator);
+              setupFormFields(nextAuthenticator);
+            }
           }
 
+          if (nextStepResponse.nextStep?.messages) {
+            setMessages(
+              nextStepResponse.nextStep.messages.map((msg: any) => ({
+                type: msg.type || 'INFO',
+                message: msg.message || '',
+              })),
+            );
+          }
+        }
+      } catch (err) {
+        const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.authenticationFailed');
+        setError(errorMessage);
+        onError?.(err as Error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [
+      currentFlow,
+      currentAuthenticator,
+      markAllFieldsAsTouched,
+      validateForm,
+      onAuthenticate,
+      onFlowChange,
+      onSuccess,
+      onError,
+      setupFormFields,
+      t,
+    ],
+  );
+
+  /**
+   * Handle authenticator selection for multi-option prompts.
+   */
+  const handleAuthenticatorSelection = useCallback(
+    async (authenticator: ApplicationNativeAuthenticationAuthenticator, formData?: Record<string, string>) => {
+      if (!currentFlow) {
+        return;
+      }
+
+      // Mark all fields as touched if we have form data (i.e., this is a submission)
+      if (formData) {
+        markAllFieldsAsTouched();
+      }
+
+      setIsLoading(true);
+      setError(null);
+      setMessages([]);
+
+      try {
+        if (
+          authenticator.metadata?.promptType ===
+          ApplicationNativeAuthenticationAuthenticatorPromptType.REDIRECTION_PROMPT
+        ) {
           const payload = {
             flowId: currentFlow.flowId,
             selectedAuthenticator: {
               authenticatorId: authenticator.authenticatorId,
-              params: formData,
+              params: {},
             },
           };
 
@@ -441,62 +435,99 @@ const BaseSignIn: FC<BaseSignInProps> = ({
             onSuccess?.(response.authData);
             return;
           }
+        } else {
+          if (formData) {
+            // Validate form before submission
+            const validation = validateForm();
+            if (!validation.isValid) {
+              return;
+            }
 
-          if (
-            response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
-            response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
-          ) {
-            setError('Authentication failed. Please check your credentials and try again.');
-            return;
-          }
+            const payload = {
+              flowId: currentFlow.flowId,
+              selectedAuthenticator: {
+                authenticatorId: authenticator.authenticatorId,
+                params: formData,
+              },
+            };
 
-          if ('flowId' in response && 'nextStep' in response) {
-            const nextStepResponse = response as any;
-            setCurrentFlow(nextStepResponse);
-
-            if (nextStepResponse.nextStep?.authenticators?.length > 0) {
-              if (
-                nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
-                nextStepResponse.nextStep.authenticators.length > 1
-              ) {
-                setCurrentAuthenticator(null);
-              } else {
-                const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
-                setCurrentAuthenticator(nextAuthenticator);
-                setupFormFields(nextAuthenticator);
-              }
+            const response = await onAuthenticate(payload);
+            onFlowChange?.(response);
+
+            if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+              onSuccess?.(response.authData);
+              return;
             }
 
-            if (nextStepResponse.nextStep?.messages) {
-              setMessages(
-                nextStepResponse.nextStep.messages.map((msg: any) => ({
-                  type: msg.type || 'INFO',
-                  message: msg.message || '',
-                })),
-              );
+            if (
+              response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
+              response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
+            ) {
+              setError('Authentication failed. Please check your credentials and try again.');
+              return;
+            }
+
+            if ('flowId' in response && 'nextStep' in response) {
+              const nextStepResponse = response as any;
+              setCurrentFlow(nextStepResponse);
+
+              if (nextStepResponse.nextStep?.authenticators?.length > 0) {
+                if (
+                  nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
+                  nextStepResponse.nextStep.authenticators.length > 1
+                ) {
+                  setCurrentAuthenticator(null);
+                } else {
+                  const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
+                  setCurrentAuthenticator(nextAuthenticator);
+                  setupFormFields(nextAuthenticator);
+                }
+              }
+
+              if (nextStepResponse.nextStep?.messages) {
+                setMessages(
+                  nextStepResponse.nextStep.messages.map((msg: any) => ({
+                    type: msg.type || 'INFO',
+                    message: msg.message || '',
+                  })),
+                );
+              }
             }
+          } else {
+            setCurrentAuthenticator(authenticator);
+            setupFormFields(authenticator);
           }
-        } else {
-          setCurrentAuthenticator(authenticator);
-          setupFormFields(authenticator);
         }
+      } catch (err) {
+        const errorMessage = err instanceof AsgardeoAPIError ? err.message : 'Authenticator selection failed';
+        setError(errorMessage);
+        onError?.(err as Error);
+      } finally {
+        setIsLoading(false);
       }
-    } catch (err) {
-      const errorMessage = err instanceof AsgardeoAPIError ? err.message : 'Authenticator selection failed';
-      setError(errorMessage);
-      onError?.(err as Error);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [currentFlow, markAllFieldsAsTouched, validateForm, onAuthenticate, onFlowChange, onSuccess, onError, setupFormFields]);
+    },
+    [
+      currentFlow,
+      markAllFieldsAsTouched,
+      validateForm,
+      onAuthenticate,
+      onFlowChange,
+      onSuccess,
+      onError,
+      setupFormFields,
+    ],
+  );
 
   /**
    * Handle input value changes.
    */
-  const handleInputChange = useCallback((param: string, value: string) => {
-    setFormValue(param, value);
-    setFormTouched(param, true);
-  }, [setFormValue, setFormTouched]);
+  const handleInputChange = useCallback(
+    (param: string, value: string) => {
+      setFormValue(param, value);
+      setFormTouched(param, true);
+    },
+    [setFormValue, setFormTouched],
+  );
 
   /**
    * Check if current flow has multiple authenticator options.
diff --git a/packages/react/src/hooks/useForm.ts b/packages/react/src/hooks/useForm.ts
index cc17d02fa..608c2c784 100644
--- a/packages/react/src/hooks/useForm.ts
+++ b/packages/react/src/hooks/useForm.ts
@@ -154,18 +154,18 @@ export interface UseFormReturn<T extends Record<string, string>> {
 
 /**
  * Generic form hook that provides comprehensive form state management and validation.
- * 
+ *
  * @template T - The type of form values (must extend Record<string, string>)
  * @param config - Configuration options for the form
  * @returns Form state and methods
- * 
+ *
  * @example
  * ```tsx
  * interface LoginForm {
  *   username: string;
  *   password: string;
  * }
- * 
+ *
  * const {
  *   values,
  *   touched,
@@ -181,11 +181,11 @@ export interface UseFormReturn<T extends Record<string, string>> {
  *     { name: 'password', required: true }
  *   ]
  * });
- * 
+ *
  * const onSubmit = handleSubmit((values) => {
  *   console.log('Form submitted:', values);
  * });
- * 
+ *
  * return (
  *   <form onSubmit={onSubmit}>
  *     <input {...getFieldProps('username')} />
@@ -195,9 +195,7 @@ export interface UseFormReturn<T extends Record<string, string>> {
  * );
  * ```
  */
-export const useForm = <T extends Record<string, string>>(
-  config: UseFormConfig<T> = {}
-): UseFormReturn<T> => {
+export const useForm = <T extends Record<string, string>>(config: UseFormConfig<T> = {}): UseFormReturn<T> => {
   const {
     initialValues = {} as T,
     fields = [],
@@ -214,33 +212,39 @@ export const useForm = <T extends Record<string, string>>(
   const [isSubmitted, setIsSubmitted] = useState(false);
 
   // Get field configuration by name
-  const getFieldConfig = useCallback((name: keyof T): FormField | undefined => {
-    return fields.find(field => field.name === name);
-  }, [fields]);
+  const getFieldConfig = useCallback(
+    (name: keyof T): FormField | undefined => {
+      return fields.find(field => field.name === name);
+    },
+    [fields],
+  );
 
   // Validate a single field
-  const validateField = useCallback((name: keyof T): string | null => {
-    const value = values[name] || '';
-    const fieldConfig = getFieldConfig(name);
-    
-    // Check required validation
-    if (fieldConfig?.required && (!value || value.trim() === '')) {
-      return requiredMessage;
-    }
-    
-    // Run custom field validator
-    if (fieldConfig?.validator) {
-      const fieldError = fieldConfig.validator(value);
-      if (fieldError) return fieldError;
-    }
-    
-    return null;
-  }, [values, getFieldConfig, requiredMessage]);
+  const validateField = useCallback(
+    (name: keyof T): string | null => {
+      const value = values[name] || '';
+      const fieldConfig = getFieldConfig(name);
+
+      // Check required validation
+      if (fieldConfig?.required && (!value || value.trim() === '')) {
+        return requiredMessage;
+      }
+
+      // Run custom field validator
+      if (fieldConfig?.validator) {
+        const fieldError = fieldConfig.validator(value);
+        if (fieldError) return fieldError;
+      }
+
+      return null;
+    },
+    [values, getFieldConfig, requiredMessage],
+  );
 
   // Validate the entire form
   const validateForm = useCallback((): ValidationResult => {
     const newErrors: Record<keyof T, string> = {} as Record<keyof T, string>;
-    
+
     // Validate individual fields
     fields.forEach(field => {
       const error = validateField(field.name as keyof T);
@@ -248,7 +252,7 @@ export const useForm = <T extends Record<string, string>>(
         newErrors[field.name as keyof T] = error;
       }
     });
-    
+
     // Run global validator if provided
     if (validator) {
       const globalErrors = validator(values);
@@ -258,7 +262,7 @@ export const useForm = <T extends Record<string, string>>(
         }
       });
     }
-    
+
     return {
       isValid: Object.keys(newErrors).length === 0,
       errors: newErrors,
@@ -269,21 +273,24 @@ export const useForm = <T extends Record<string, string>>(
   const isValid = Object.keys(errors).length === 0;
 
   // Set a single field value
-  const setValue = useCallback((name: keyof T, value: string) => {
-    setFormValues(prev => ({
-      ...prev,
-      [name]: value,
-    }));
-    
-    // Validate on change if enabled
-    if (validateOnChange) {
-      const error = validateField(name);
-      setFormErrors(prev => ({
+  const setValue = useCallback(
+    (name: keyof T, value: string) => {
+      setFormValues(prev => ({
         ...prev,
-        [name]: error || '',
+        [name]: value,
       }));
-    }
-  }, [validateField, validateOnChange]);
+
+      // Validate on change if enabled
+      if (validateOnChange) {
+        const error = validateField(name);
+        setFormErrors(prev => ({
+          ...prev,
+          [name]: error || '',
+        }));
+      }
+    },
+    [validateField, validateOnChange],
+  );
 
   // Set multiple field values
   const setValues = useCallback((newValues: Partial<T>) => {
@@ -294,21 +301,24 @@ export const useForm = <T extends Record<string, string>>(
   }, []);
 
   // Mark a field as touched
-  const setTouched = useCallback((name: keyof T, isTouched: boolean = true) => {
-    setFormTouched(prev => ({
-      ...prev,
-      [name]: isTouched,
-    }));
-    
-    // Validate on blur if enabled and field is touched
-    if (validateOnBlur && isTouched) {
-      const error = validateField(name);
-      setFormErrors(prev => ({
+  const setTouched = useCallback(
+    (name: keyof T, isTouched: boolean = true) => {
+      setFormTouched(prev => ({
         ...prev,
-        [name]: error || '',
+        [name]: isTouched,
       }));
-    }
-  }, [validateField, validateOnBlur]);
+
+      // Validate on blur if enabled and field is touched
+      if (validateOnBlur && isTouched) {
+        const error = validateField(name);
+        setFormErrors(prev => ({
+          ...prev,
+          [name]: error || '',
+        }));
+      }
+    },
+    [validateField, validateOnBlur],
+  );
 
   // Set multiple touched fields
   const setTouchedFields = useCallback((touchedFields: Partial<Record<keyof T, boolean>>) => {
@@ -324,9 +334,9 @@ export const useForm = <T extends Record<string, string>>(
       acc[field.name as keyof T] = true;
       return acc;
     }, {} as Record<keyof T, boolean>);
-    
+
     setFormTouched(allTouched);
-    
+
     // Validate all fields
     const validation = validateForm();
     setFormErrors(validation.errors as Record<keyof T, string>);
@@ -362,37 +372,43 @@ export const useForm = <T extends Record<string, string>>(
   }, [initialValues]);
 
   // Handle form submission
-  const handleSubmit = useCallback((onSubmit: (values: T) => void | Promise<void>) => {
-    return async (e?: React.FormEvent) => {
-      if (e) {
-        e.preventDefault();
-      }
-      
-      setIsSubmitted(true);
-      touchAllFields();
-      
-      const validation = validateForm();
-      
-      if (validation.isValid) {
-        await onSubmit(values);
-      }
-    };
-  }, [values, touchAllFields, validateForm]);
+  const handleSubmit = useCallback(
+    (onSubmit: (values: T) => void | Promise<void>) => {
+      return async (e?: React.FormEvent) => {
+        if (e) {
+          e.preventDefault();
+        }
+
+        setIsSubmitted(true);
+        touchAllFields();
+
+        const validation = validateForm();
+
+        if (validation.isValid) {
+          await onSubmit(values);
+        }
+      };
+    },
+    [values, touchAllFields, validateForm],
+  );
 
   // Get field props for easy integration
-  const getFieldProps = useCallback((name: keyof T) => {
-    const fieldConfig = getFieldConfig(name);
-    
-    return {
-      name,
-      value: values[name] || '',
-      onChange: (value: string) => setValue(name, value),
-      onBlur: () => setTouched(name, true),
-      error: touched[name] ? errors[name] : undefined,
-      touched: touched[name] || false,
-      required: fieldConfig?.required || false,
-    };
-  }, [values, errors, touched, setValue, setTouched, getFieldConfig]);
+  const getFieldProps = useCallback(
+    (name: keyof T) => {
+      const fieldConfig = getFieldConfig(name);
+
+      return {
+        name,
+        value: values[name] || '',
+        onChange: (value: string) => setValue(name, value),
+        onBlur: () => setTouched(name, true),
+        error: touched[name] ? errors[name] : undefined,
+        touched: touched[name] || false,
+        required: fieldConfig?.required || false,
+      };
+    },
+    [values, errors, touched, setValue, setTouched, getFieldConfig],
+  );
 
   return {
     values,
diff --git a/packages/react/src/hooks/useSignInForm.ts b/packages/react/src/hooks/useSignInForm.ts
new file mode 100644
index 000000000..a6e882770
--- /dev/null
+++ b/packages/react/src/hooks/useSignInForm.ts
@@ -0,0 +1,560 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {useState, useCallback, useMemo} from 'react';
+import {
+  ApplicationNativeAuthenticationAuthenticator,
+  ApplicationNativeAuthenticationInitiateResponse,
+  ApplicationNativeAuthenticationHandleResponse,
+  ApplicationNativeAuthenticationFlowStatus,
+  ApplicationNativeAuthenticationAuthenticatorPromptType,
+  AsgardeoAPIError,
+} from '@asgardeo/browser';
+import useTranslation from './useTranslation';
+import {useForm, FormField} from './useForm';
+
+/**
+ * Props for the useSignInForm hook.
+ */
+export interface UseSignInFormProps {
+  /**
+   * Function to initialize authentication flow.
+   */
+  onInitialize: () => Promise<ApplicationNativeAuthenticationInitiateResponse>;
+
+  /**
+   * Function to handle authentication steps.
+   */
+  onAuthenticate: (payload: {
+    flowId: string;
+    selectedAuthenticator: {
+      authenticatorId: string;
+      params: Record<string, string>;
+    };
+  }) => Promise<ApplicationNativeAuthenticationHandleResponse>;
+
+  /**
+   * Callback function called when authentication is successful.
+   */
+  onSuccess?: (authData: Record<string, any>) => void;
+
+  /**
+   * Callback function called when authentication fails.
+   */
+  onError?: (error: Error) => void;
+
+  /**
+   * Callback function called when authentication flow status changes.
+   */
+  onFlowChange?: (
+    response: ApplicationNativeAuthenticationInitiateResponse | ApplicationNativeAuthenticationHandleResponse,
+  ) => void;
+}
+
+/**
+ * Return type for the useSignInForm hook.
+ */
+export interface UseSignInFormReturn {
+  // State
+  isLoading: boolean;
+  isInitialized: boolean;
+  currentFlow: ApplicationNativeAuthenticationInitiateResponse | null;
+  currentAuthenticator: ApplicationNativeAuthenticationAuthenticator | null;
+  error: string | null;
+  messages: Array<{type: string; message: string}>;
+
+  // Form state and methods (from useForm)
+  formValues: Record<string, string>;
+  touchedFields: Record<string, boolean>;
+  formErrors: Record<string, string>;
+  isFormValid: boolean;
+  setFormValue: (name: string, value: string) => void;
+  setFormTouched: (name: string, touched?: boolean) => void;
+  clearFormErrors: () => void;
+  validateFormField: (name: string) => string | null;
+  validateForm: () => {isValid: boolean; errors: Record<string, string>};
+
+  // Actions
+  initializeFlow: () => Promise<void>;
+  handleSubmit: (submittedValues: Record<string, string>) => Promise<void>;
+  handleAuthenticatorSelection: (
+    authenticator: ApplicationNativeAuthenticationAuthenticator,
+    formData?: Record<string, string>,
+  ) => Promise<void>;
+  handleInputChange: (param: string, value: string) => void;
+  markAllFieldsAsTouched: () => void;
+  setupFormFields: (authenticator: ApplicationNativeAuthenticationAuthenticator) => void;
+
+  // Utilities
+  hasMultipleOptions: () => boolean;
+  getAvailableAuthenticators: () => ApplicationNativeAuthenticationAuthenticator[];
+}
+
+/**
+ * Custom hook for managing sign-in form state and logic.
+ *
+ * This hook encapsulates all the form-related functionality including:
+ * - Form field values and touched state management using the generic useForm hook
+ * - Authentication flow handling
+ * - Error and message state management
+ * - Field validation triggering
+ *
+ * @param props - Configuration for the sign-in form
+ * @returns Object containing state and action handlers for the sign-in form
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   isLoading,
+ *   currentAuthenticator,
+ *   formValues,
+ *   touchedFields,
+ *   error,
+ *   handleSubmit,
+ *   handleInputChange,
+ *   initializeFlow
+ * } = useSignInForm({
+ *   onInitialize: async () => await signIn(),
+ *   onAuthenticate: async (payload) => await authenticate(payload),
+ *   onSuccess: (authData) => console.log('Success:', authData),
+ *   onError: (error) => console.error('Error:', error)
+ * });
+ * ```
+ */
+export const useSignInForm = ({
+  onInitialize,
+  onAuthenticate,
+  onSuccess,
+  onError,
+  onFlowChange,
+}: UseSignInFormProps): UseSignInFormReturn => {
+  const {t} = useTranslation();
+
+  // Authentication state management
+  const [isLoading, setIsLoading] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [currentFlow, setCurrentFlow] = useState<ApplicationNativeAuthenticationInitiateResponse | null>(null);
+  const [currentAuthenticator, setCurrentAuthenticator] = useState<ApplicationNativeAuthenticationAuthenticator | null>(
+    null,
+  );
+  const [error, setError] = useState<string | null>(null);
+  const [messages, setMessages] = useState<Array<{type: string; message: string}>>([]);
+
+  // Create form fields configuration based on current authenticator
+  const formFields = useMemo((): FormField[] => {
+    if (!currentAuthenticator?.metadata?.params) {
+      return [];
+    }
+
+    return currentAuthenticator.metadata.params.map(param => ({
+      name: param.param,
+      required: currentAuthenticator.requiredParams.includes(param.param),
+      initialValue: '',
+      validator: (value: string) => {
+        // Add custom validation logic here if needed
+        if (currentAuthenticator.requiredParams.includes(param.param) && (!value || value.trim() === '')) {
+          return t('field.required');
+        }
+        return null;
+      },
+    }));
+  }, [currentAuthenticator, t]);
+
+  // Initialize form with dynamic fields
+  const form = useForm<Record<string, string>>({
+    initialValues: {},
+    fields: formFields,
+    validateOnBlur: true,
+    validateOnChange: false,
+    requiredMessage: t('field.required'),
+  });
+
+  const {
+    values: formValues,
+    touched: touchedFields,
+    errors: formErrors,
+    isValid: isFormValid,
+    setValue: setFormValue,
+    setTouched: setFormTouched,
+    clearErrors: clearFormErrors,
+    validateField: validateFormField,
+    validateForm,
+    touchAllFields,
+    reset: resetForm,
+  } = form;
+
+  /**
+   * Setup form fields based on the current authenticator.
+   */
+  const setupFormFields = useCallback(
+    (authenticator: ApplicationNativeAuthenticationAuthenticator) => {
+      const initialValues: Record<string, string> = {};
+      authenticator.metadata?.params?.forEach(param => {
+        initialValues[param.param] = '';
+      });
+
+      // Reset form with new values
+      resetForm();
+
+      // Set initial values for all fields
+      Object.keys(initialValues).forEach(key => {
+        setFormValue(key, initialValues[key]);
+      });
+    },
+    [resetForm, setFormValue],
+  );
+
+  /**
+   * Mark all fields as touched for validation purposes.
+   */
+  const markAllFieldsAsTouched = useCallback(() => {
+    touchAllFields();
+  }, [touchAllFields]);
+
+  /**
+   * Initialize the authentication flow.
+   */
+  const initializeFlow = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await onInitialize();
+
+      setCurrentFlow(response);
+      setIsInitialized(true);
+      onFlowChange?.(response);
+
+      if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+        onSuccess?.((response as any).authData || {});
+        return;
+      }
+
+      if (response.nextStep?.authenticators?.length > 0) {
+        if (response.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' && response.nextStep.authenticators.length > 1) {
+          setCurrentAuthenticator(null);
+        } else {
+          const authenticator = response.nextStep.authenticators[0];
+          setCurrentAuthenticator(authenticator);
+          setupFormFields(authenticator);
+        }
+      }
+
+      if ('nextStep' in response && response.nextStep && 'messages' in response.nextStep) {
+        const stepMessages = (response.nextStep as any).messages || [];
+        setMessages(
+          stepMessages.map((msg: any) => ({
+            type: msg.type || 'INFO',
+            message: msg.message || '',
+          })),
+        );
+      }
+    } catch (err) {
+      const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.initializationFailed');
+      setError(errorMessage);
+      onError?.(err as Error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [onInitialize, onFlowChange, onSuccess, onError, setupFormFields, t]);
+
+  /**
+   * Handle form submission.
+   */
+  const handleSubmit = useCallback(
+    async (submittedValues: Record<string, string>) => {
+      if (!currentFlow || !currentAuthenticator) {
+        return;
+      }
+
+      // Mark all fields as touched before validation
+      markAllFieldsAsTouched();
+
+      // Validate form before submission
+      const validation = validateForm();
+      if (!validation.isValid) {
+        return;
+      }
+
+      setIsLoading(true);
+      setError(null);
+      setMessages([]);
+
+      try {
+        const payload = {
+          flowId: currentFlow.flowId,
+          selectedAuthenticator: {
+            authenticatorId: currentAuthenticator.authenticatorId,
+            params: submittedValues,
+          },
+        };
+
+        const response = await onAuthenticate(payload);
+        onFlowChange?.(response);
+
+        if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+          onSuccess?.(response.authData);
+          return;
+        }
+
+        if (
+          response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
+          response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
+        ) {
+          setError(t('errors.authenticationFailedDetail'));
+          return;
+        }
+
+        if ('flowId' in response && 'nextStep' in response) {
+          const nextStepResponse = response as any;
+          setCurrentFlow(nextStepResponse);
+
+          if (nextStepResponse.nextStep?.authenticators?.length > 0) {
+            if (
+              nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
+              nextStepResponse.nextStep.authenticators.length > 1
+            ) {
+              setCurrentAuthenticator(null);
+            } else {
+              const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
+              setCurrentAuthenticator(nextAuthenticator);
+              setupFormFields(nextAuthenticator);
+            }
+          }
+
+          if (nextStepResponse.nextStep?.messages) {
+            setMessages(
+              nextStepResponse.nextStep.messages.map((msg: any) => ({
+                type: msg.type || 'INFO',
+                message: msg.message || '',
+              })),
+            );
+          }
+        }
+      } catch (err) {
+        const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.authenticationFailed');
+        setError(errorMessage);
+        onError?.(err as Error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [
+      currentFlow,
+      currentAuthenticator,
+      markAllFieldsAsTouched,
+      validateForm,
+      onAuthenticate,
+      onFlowChange,
+      onSuccess,
+      onError,
+      setupFormFields,
+      t,
+    ],
+  );
+
+  /**
+   * Handle authenticator selection for multi-option prompts.
+   */
+  const handleAuthenticatorSelection = useCallback(
+    async (authenticator: ApplicationNativeAuthenticationAuthenticator, formData?: Record<string, string>) => {
+      if (!currentFlow) {
+        return;
+      }
+
+      // Mark all fields as touched if we have form data (i.e., this is a submission)
+      if (formData) {
+        markAllFieldsAsTouched();
+      }
+
+      setIsLoading(true);
+      setError(null);
+      setMessages([]);
+
+      try {
+        if (
+          authenticator.metadata?.promptType ===
+          ApplicationNativeAuthenticationAuthenticatorPromptType.REDIRECTION_PROMPT
+        ) {
+          const payload = {
+            flowId: currentFlow.flowId,
+            selectedAuthenticator: {
+              authenticatorId: authenticator.authenticatorId,
+              params: {},
+            },
+          };
+
+          const response = await onAuthenticate(payload);
+          onFlowChange?.(response);
+
+          if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+            onSuccess?.(response.authData);
+            return;
+          }
+        } else {
+          if (formData) {
+            // Validate form before submission
+            const validation = validateForm();
+            if (!validation.isValid) {
+              return;
+            }
+
+            const payload = {
+              flowId: currentFlow.flowId,
+              selectedAuthenticator: {
+                authenticatorId: authenticator.authenticatorId,
+                params: formData,
+              },
+            };
+
+            const response = await onAuthenticate(payload);
+            onFlowChange?.(response);
+
+            if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+              onSuccess?.(response.authData);
+              return;
+            }
+
+            if (
+              response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
+              response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
+            ) {
+              setError('Authentication failed. Please check your credentials and try again.');
+              return;
+            }
+
+            if ('flowId' in response && 'nextStep' in response) {
+              const nextStepResponse = response as any;
+              setCurrentFlow(nextStepResponse);
+
+              if (nextStepResponse.nextStep?.authenticators?.length > 0) {
+                if (
+                  nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
+                  nextStepResponse.nextStep.authenticators.length > 1
+                ) {
+                  setCurrentAuthenticator(null);
+                } else {
+                  const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
+                  setCurrentAuthenticator(nextAuthenticator);
+                  setupFormFields(nextAuthenticator);
+                }
+              }
+
+              if (nextStepResponse.nextStep?.messages) {
+                setMessages(
+                  nextStepResponse.nextStep.messages.map((msg: any) => ({
+                    type: msg.type || 'INFO',
+                    message: msg.message || '',
+                  })),
+                );
+              }
+            }
+          } else {
+            setCurrentAuthenticator(authenticator);
+            setupFormFields(authenticator);
+          }
+        }
+      } catch (err) {
+        const errorMessage = err instanceof AsgardeoAPIError ? err.message : 'Authenticator selection failed';
+        setError(errorMessage);
+        onError?.(err as Error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [
+      currentFlow,
+      markAllFieldsAsTouched,
+      validateForm,
+      onAuthenticate,
+      onFlowChange,
+      onSuccess,
+      onError,
+      setupFormFields,
+    ],
+  );
+
+  /**
+   * Handle input value changes.
+   */
+  const handleInputChange = useCallback(
+    (param: string, value: string) => {
+      setFormValue(param, value);
+      setFormTouched(param, true);
+    },
+    [setFormValue, setFormTouched],
+  );
+
+  /**
+   * Check if current flow has multiple authenticator options.
+   */
+  const hasMultipleOptions = useCallback((): boolean => {
+    return (
+      currentFlow &&
+      'nextStep' in currentFlow &&
+      currentFlow.nextStep?.stepType === 'MULTI_OPTIONS_PROMPT' &&
+      currentFlow.nextStep?.authenticators &&
+      currentFlow.nextStep.authenticators.length > 1
+    );
+  }, [currentFlow]);
+
+  /**
+   * Get available authenticators for selection.
+   */
+  const getAvailableAuthenticators = useCallback((): ApplicationNativeAuthenticationAuthenticator[] => {
+    if (!currentFlow || !('nextStep' in currentFlow) || !currentFlow.nextStep?.authenticators) {
+      return [];
+    }
+    return currentFlow.nextStep.authenticators;
+  }, [currentFlow]);
+
+  return {
+    // State
+    isLoading,
+    isInitialized,
+    currentFlow,
+    currentAuthenticator,
+    error,
+    messages,
+
+    // Form state and methods (from useForm)
+    formValues,
+    touchedFields,
+    formErrors,
+    isFormValid,
+    setFormValue,
+    setFormTouched,
+    clearFormErrors,
+    validateFormField,
+    validateForm,
+
+    // Actions
+    initializeFlow,
+    handleSubmit,
+    handleAuthenticatorSelection,
+    handleInputChange,
+    markAllFieldsAsTouched,
+    setupFormFields,
+
+    // Utilities
+    hasMultipleOptions,
+    getAvailableAuthenticators,
+  };
+};
+
+export default useSignInForm;
diff --git a/recipes/vite-react-ts/src/components/Header.tsx b/recipes/vite-react-ts/src/components/Header.tsx
index 10931dab1..3f5d8db03 100644
--- a/recipes/vite-react-ts/src/components/Header.tsx
+++ b/recipes/vite-react-ts/src/components/Header.tsx
@@ -3,8 +3,8 @@
 import {useState, useRef, useEffect} from 'react';
 import {Link} from 'react-router-dom';
 import {useApp} from '../App';
-import {Users, ChevronDown, Settings, User, LogOut, Plus, Check, Building2} from 'lucide-react';
-import {SignedOut, SignInButton, SignOutButton, UserProfile} from '@asgardeo/react';
+import {Users, ChevronDown, Settings, User as UserIcon, LogOut, Plus, Check, Building2} from 'lucide-react';
+import {SignedOut, SignInButton, SignOutButton, User, UserProfile} from '@asgardeo/react';
 import {Button} from './ui/button';
 
 export default function Header() {
@@ -141,7 +141,7 @@ export default function Header() {
                 onClick={() => setShowUserDropdown(!showUserDropdown)}
                 className="flex items-center space-x-2 p-1 rounded-full hover:bg-gray-50"
               >
-                <img src={user?.avatar || '/placeholder.svg'} alt={user?.name} className="w-8 h-8 rounded-full" />
+                <User>{user => <img src={user?.picture} alt={user?.userName} className="w-8 h-8 rounded-full" />}</User>
                 <ChevronDown className="h-4 w-4 text-gray-500" />
               </button>
 
@@ -160,7 +160,7 @@ export default function Header() {
                       setShowUserDropdown(false);
                     }}
                   >
-                    <User className="h-4 w-4 mr-3" />
+                    <UserIcon className="h-4 w-4 mr-3" />
                     Your profile
                   </div>
 
diff --git a/recipes/vite-react-ts/src/pages/SignIn.tsx b/recipes/vite-react-ts/src/pages/SignIn.tsx
index 41f6e3a20..271fe5dbd 100644
--- a/recipes/vite-react-ts/src/pages/SignIn.tsx
+++ b/recipes/vite-react-ts/src/pages/SignIn.tsx
@@ -39,7 +39,7 @@ export default function SignInPage() {
           styled={false}
         />
 
-        <Card className="border-0 shadow-lg">
+        {/* <Card className="border-0 shadow-lg">
           <CardHeader className="space-y-1">
             <CardTitle className="text-xl">Sign in</CardTitle>
             <CardDescription>Enter your email and password to access your account</CardDescription>
@@ -85,12 +85,6 @@ export default function SignInPage() {
                 </div>
               </div>
 
-              {/* {state && !state.success && (
-                <Alert variant="destructive">
-                  <AlertDescription>{state.error}</AlertDescription>
-                </Alert>
-              )} */}
-
               <Button type="submit" className="w-full" disabled={isLoading}>
                 {isLoading ? 'Signing in...' : 'Sign in'}
               </Button>
@@ -119,7 +113,7 @@ export default function SignInPage() {
               </a>
             </div>
           </CardContent>
-        </Card>
+        </Card> */}
 
         <div className="mt-8 text-center">
           <a href="/" className="text-sm text-gray-500 hover:text-gray-700">

From 48ba3deb93579a87741ccb44957b24bbbd8223f0 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Fri, 13 Jun 2025 16:08:55 +0530
Subject: [PATCH 078/131] feat(react): Implement Flow context for managing
 authentication flow UI state and enhance sign-in options with localized
 titles and subtitles

---
 packages/javascript/src/i18n/en-US.ts         |  21 +-
 packages/javascript/src/models/i18n.ts        |  13 ++
 .../presentation/SignIn/BaseSignIn.tsx        |  61 +++++-
 .../presentation/SignIn/options/EmailOtp.tsx  |   9 +-
 .../SignIn/options/IdentifierFirst.tsx        |   9 +-
 .../presentation/SignIn/options/SmsOtp.tsx    |  10 +-
 .../presentation/SignIn/options/Totp.tsx      |  10 +-
 .../SignIn/options/UsernamePassword.tsx       |   9 +-
 .../contexts/Asgardeo/AsgardeoProvider.tsx    |   3 +-
 .../react/src/contexts/Flow/FlowContext.ts    |  98 +++++++++
 .../react/src/contexts/Flow/FlowProvider.tsx  | 196 ++++++++++++++++++
 packages/react/src/contexts/Flow/index.ts     |  26 +++
 packages/react/src/contexts/Flow/useFlow.ts   |  60 ++++++
 .../src/contexts/Flow/useFlowOptional.ts      |  55 +++++
 packages/react/src/index.ts                   |   9 +
 15 files changed, 566 insertions(+), 23 deletions(-)
 create mode 100644 packages/react/src/contexts/Flow/FlowContext.ts
 create mode 100644 packages/react/src/contexts/Flow/FlowProvider.tsx
 create mode 100644 packages/react/src/contexts/Flow/index.ts
 create mode 100644 packages/react/src/contexts/Flow/useFlow.ts
 create mode 100644 packages/react/src/contexts/Flow/useFlowOptional.ts

diff --git a/packages/javascript/src/i18n/en-US.ts b/packages/javascript/src/i18n/en-US.ts
index 1d3bbc1d5..199d7b92e 100644
--- a/packages/javascript/src/i18n/en-US.ts
+++ b/packages/javascript/src/i18n/en-US.ts
@@ -40,20 +40,33 @@ const translations: I18nTranslations = {
   /* |                        Widgets                                | */
   /* |---------------------------------------------------------------| */
 
+  /* Base Sign In */
+  'signin.title': 'Sign In',
+
   /* Email OTP */
+  'email.otp.title': 'OTP Verification',
+  'email.otp.subtitle': 'Enter the code sent to your email address.',
   'email.otp.submit.button': 'Continue',
-  
+
   /* Identifier First */
+  'identifier.first.title': 'Sign In',
+  'identifier.first.subtitle': 'Enter your username or email address.',
   'identifier.first.submit.button': 'Continue',
-  
+
   /* SMS OTP */
+  'sms.otp.title': 'OTP Verification',
+  'sms.otp.subtitle': 'Enter the code sent to your phone number.',
   'sms.otp.submit.button': 'Continue',
-  
+
   /* TOTP */
+  'totp.title': 'Verify Your Identity',
+  'totp.subtitle': 'Enter the code from your authenticator app.',
   'totp.submit.button': 'Continue',
-  
+
   /* Username Password */
   'username.password.submit.button': 'Continue',
+  'username.password.title': 'Sign In',
+  'username.password.subtitle': 'Enter your username and password to continue.',
 };
 
 const metadata: I18nMetadata = {
diff --git a/packages/javascript/src/models/i18n.ts b/packages/javascript/src/models/i18n.ts
index df04656a1..100235c78 100644
--- a/packages/javascript/src/models/i18n.ts
+++ b/packages/javascript/src/models/i18n.ts
@@ -38,20 +38,33 @@ export interface I18nTranslations {
   /* |                        Widgets                                | */
   /* |---------------------------------------------------------------| */
 
+  /* Base Sign In */
+  'signin.title': string;
+
   /* Email OTP */
+  'email.otp.title': string;
+  'email.otp.subtitle': string;
   'email.otp.submit.button': string;
 
   /* Identifier First */
+  'identifier.first.title': string;
+  'identifier.first.subtitle': string;
   'identifier.first.submit.button': string;
 
   /* SMS OTP */
+  'sms.otp.title': string;
+  'sms.otp.subtitle': string;
   'sms.otp.submit.button': string;
 
   /* TOTP */
+  'totp.title': string;
+  'totp.subtitle': string;
   'totp.submit.button': string;
 
   /* Username Password */
   'username.password.submit.button': string;
+  'username.password.title': string;
+  'username.password.subtitle': string;
 }
 
 export type I18nTextDirection = 'ltr' | 'rtl';
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index 5e73ac04d..c72414f73 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -33,6 +33,8 @@ import Alert from '../../primitives/Alert/Alert';
 import Divider from '../../primitives/Divider/Divider';
 import useTranslation from '../../../hooks/useTranslation';
 import {useForm, FormField} from '../../../hooks/useForm';
+import FlowProvider from '../../../contexts/Flow/FlowProvider';
+import useFlowOptional from '../../../contexts/Flow/useFlowOptional';
 import {createSignInOptionFromAuthenticator} from './options/SignInOptionFactory';
 
 /**
@@ -161,7 +163,18 @@ export interface BaseSignInProps {
  * };
  * ```
  */
-const BaseSignIn: FC<BaseSignInProps> = ({
+const BaseSignIn: FC<BaseSignInProps> = props => {
+  return (
+    <FlowProvider>
+      <BaseSignInContent {...props} />
+    </FlowProvider>
+  );
+};
+
+/**
+ * Internal component that consumes FlowContext and renders the sign-in UI.
+ */
+const BaseSignInContent: FC<BaseSignInProps> = ({
   onInitialize,
   onAuthenticate,
   onSuccess,
@@ -179,8 +192,8 @@ const BaseSignIn: FC<BaseSignInProps> = ({
   variant = 'default',
 }) => {
   const {t} = useTranslation();
+  const flow = useFlowOptional();
 
-  // Authentication state management
   const [isLoading, setIsLoading] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
   const [currentFlow, setCurrentFlow] = useState<ApplicationNativeAuthenticationInitiateResponse | null>(null);
@@ -190,7 +203,6 @@ const BaseSignIn: FC<BaseSignInProps> = ({
   const [error, setError] = useState<string | null>(null);
   const [messages, setMessages] = useState<Array<{type: string; message: string}>>([]);
 
-  // Create form fields configuration based on current authenticator
   const formFields: FormField[] =
     currentAuthenticator?.metadata?.params?.map(param => ({
       name: param.param,
@@ -204,7 +216,6 @@ const BaseSignIn: FC<BaseSignInProps> = ({
       },
     })) || [];
 
-  // Initialize form with dynamic fields
   const form = useForm<Record<string, string>>({
     initialValues: {},
     fields: formFields,
@@ -314,7 +325,6 @@ const BaseSignIn: FC<BaseSignInProps> = ({
       // Mark all fields as touched before validation
       markAllFieldsAsTouched();
 
-      // Validate form before submission
       const validation = validateForm();
       if (!validation.isValid) {
         return;
@@ -437,7 +447,6 @@ const BaseSignIn: FC<BaseSignInProps> = ({
           }
         } else {
           if (formData) {
-            // Validate form before submission
             const validation = validateForm();
             if (!validation.isValid) {
               return;
@@ -603,11 +612,9 @@ const BaseSignIn: FC<BaseSignInProps> = ({
     ) : null;
   }
 
-  // Handle multiple authenticator options
   if (hasMultipleOptions() && !currentAuthenticator) {
     const availableAuthenticators = getAvailableAuthenticators();
 
-    // Separate authenticators by prompt type and characteristics
     const userPromptAuthenticators = availableAuthenticators.filter(
       auth =>
         auth.metadata?.promptType === ApplicationNativeAuthenticationAuthenticatorPromptType.USER_PROMPT ||
@@ -615,13 +622,31 @@ const BaseSignIn: FC<BaseSignInProps> = ({
         (auth.idp === 'LOCAL' && auth.metadata?.params && auth.metadata.params.length > 0),
     );
 
-    // All other authenticators are treated as options/buttons
     const optionAuthenticators = availableAuthenticators.filter(auth => !userPromptAuthenticators.includes(auth));
 
     return (
       <Card className={containerClasses}>
         <Card.Header>
-          <Card.Title level={2}>{t('signin.title')}</Card.Title>
+          <Card.Title level={2}>{flow?.title || t('signin.title')}</Card.Title>
+          {flow?.subtitle && (
+            <Card.Title level={3} style={{marginTop: '0.5rem'}}>
+              {flow?.subtitle || t('signin.subtitle')}
+            </Card.Title>
+          )}
+          {flow?.messages && flow.messages.length > 0 && (
+            <div style={{marginTop: '1rem'}}>
+              {flow.messages.map((flowMessage, index) => (
+                <Alert
+                  key={flowMessage.id || index}
+                  variant={flowMessage.type}
+                  style={{marginBottom: '0.5rem'}}
+                  className={messageClasses}
+                >
+                  <Alert.Description>{flowMessage.message}</Alert.Description>
+                </Alert>
+              ))}
+            </div>
+          )}
           {messages.length > 0 && (
             <div style={{marginTop: '1rem'}}>
               {messages.map((message, index) => {
@@ -731,7 +756,21 @@ const BaseSignIn: FC<BaseSignInProps> = ({
   return (
     <Card className={containerClasses}>
       <Card.Header>
-        <Card.Title level={2}>{t('signin.title')}</Card.Title>
+        <Card.Title level={2}>{flow?.title || t('signin.title')}</Card.Title>
+        {flow?.messages && flow.messages.length > 0 && (
+          <div style={{marginTop: '1rem'}}>
+            {flow.messages.map((flowMessage, index) => (
+              <Alert
+                key={flowMessage.id || index}
+                variant={flowMessage.type}
+                style={{marginBottom: '0.5rem'}}
+                className={messageClasses}
+              >
+                <Alert.Description>{flowMessage.message}</Alert.Description>
+              </Alert>
+            ))}
+          </div>
+        )}
         {messages.length > 0 && (
           <div style={{marginTop: '1rem'}}>
             {messages.map((message, index) => {
diff --git a/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx b/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
index 579920b14..b6d7868cb 100644
--- a/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
@@ -21,12 +21,13 @@ import {
   ApplicationNativeAuthenticationAuthenticatorParamType,
   FieldType,
 } from '@asgardeo/browser';
-import {FC} from 'react';
+import {FC, useEffect} from 'react';
 import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
 import OtpField from '../../../primitives/OtpField/OtpField';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
 import useTranslation from '../../../../hooks/useTranslation';
+import {useFlow} from '../../../../contexts/Flow';
 
 /**
  * Email OTP Sign-In Option Component.
@@ -44,9 +45,15 @@ const EmailOtp: FC<BaseSignInOptionProps> = ({
   preferences,
 }) => {
   const {t} = useTranslation(preferences?.i18n);
+  const {setTitle, setSubtitle} = useFlow();
 
   const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
 
+  useEffect(() => {
+    setTitle(t('email.otp.title'));
+    setSubtitle(t('email.otp.subtitle'));
+  }, [setTitle, setSubtitle, t]);
+
   // Check if this is an OTP field (typically has 'otpCode' or similar parameter)
   const hasOtpField = formFields.some(
     param => param.param.toLowerCase().includes('otp') || param.param.toLowerCase().includes('code'),
diff --git a/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx b/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
index 26e36003b..7874efec8 100644
--- a/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
@@ -21,11 +21,12 @@ import {
   ApplicationNativeAuthenticationAuthenticatorParamType,
   FieldType,
 } from '@asgardeo/browser';
-import {FC} from 'react';
+import {FC, useEffect} from 'react';
 import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
 import useTranslation from '../../../../hooks/useTranslation';
+import {useFlow} from '../../../../contexts/Flow';
 
 /**
  * Identifier First Sign-In Option Component.
@@ -43,9 +44,15 @@ const IdentifierFirst: FC<BaseSignInOptionProps> = ({
   preferences,
 }) => {
   const {t} = useTranslation(preferences?.i18n);
+  const {setTitle, setSubtitle} = useFlow();
 
   const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
 
+  useEffect(() => {
+    setTitle(t('identifier.first.title'));
+    setSubtitle(t('identifier.first.subtitle'));
+  }, [setTitle, setSubtitle, t]);
+
   return (
     <>
       {formFields.map(param => (
diff --git a/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx b/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
index 93b7b2a2b..3ada1fbcd 100644
--- a/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
@@ -21,12 +21,13 @@ import {
   ApplicationNativeAuthenticationAuthenticatorParamType,
   FieldType,
 } from '@asgardeo/browser';
-import {FC} from 'react';
+import {FC, useEffect} from 'react';
 import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
 import OtpField from '../../../primitives/OtpField/OtpField';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
 import useTranslation from '../../../../hooks/useTranslation';
+import {useFlow} from '../../../../contexts/Flow';
 
 /**
  * SMS OTP Sign-In Option Component.
@@ -44,10 +45,15 @@ const SmsOtp: FC<BaseSignInOptionProps> = ({
   preferences,
 }) => {
   const {t} = useTranslation(preferences?.i18n);
+  const {setTitle, setSubtitle} = useFlow();
 
   const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
 
-  // Check if this is an OTP field (typically has 'otpCode' or similar parameter)
+  useEffect(() => {
+    setTitle(t('sms.otp.title'));
+    setSubtitle(t('sms.otp.subtitle'));
+  }, [setTitle, setSubtitle, t]);
+
   const hasOtpField = formFields.some(
     param => param.param.toLowerCase().includes('otp') || param.param.toLowerCase().includes('code'),
   );
diff --git a/packages/react/src/components/presentation/SignIn/options/Totp.tsx b/packages/react/src/components/presentation/SignIn/options/Totp.tsx
index 196cbab6e..1672d1639 100644
--- a/packages/react/src/components/presentation/SignIn/options/Totp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/Totp.tsx
@@ -21,12 +21,13 @@ import {
   ApplicationNativeAuthenticationAuthenticatorParamType,
   FieldType,
 } from '@asgardeo/browser';
-import {FC} from 'react';
+import {FC, useEffect} from 'react';
 import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
 import OtpField from '../../../primitives/OtpField/OtpField';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
 import useTranslation from '../../../../hooks/useTranslation';
+import {useFlow} from '../../../../contexts/Flow';
 
 /**
  * TOTP Sign-In Option Component.
@@ -44,10 +45,15 @@ const Totp: FC<BaseSignInOptionProps> = ({
   preferences,
 }) => {
   const {t} = useTranslation(preferences?.i18n);
+  const {setTitle, setSubtitle} = useFlow();
 
   const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
 
-  // Check if this is a TOTP field
+  useEffect(() => {
+    setTitle(t('totp.title'));
+    setSubtitle(t('totp.subtitle'));
+  }, [setTitle, setSubtitle, t]);
+
   const hasTotpField = formFields.some(
     param => param.param.toLowerCase().includes('totp') || param.param.toLowerCase().includes('token'),
   );
diff --git a/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx b/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
index 69af6db5b..9f6e3ab60 100644
--- a/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
@@ -21,11 +21,12 @@ import {
   ApplicationNativeAuthenticationAuthenticatorParamType,
   FieldType,
 } from '@asgardeo/browser';
-import {FC} from 'react';
+import {FC, useEffect} from 'react';
 import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
 import useTranslation from '../../../../hooks/useTranslation';
+import {useFlow} from '../../../../contexts/Flow';
 
 /**
  * Username Password Sign-In Option Component.
@@ -43,10 +44,16 @@ const UsernamePassword: FC<BaseSignInOptionProps> = ({
   preferences,
 }) => {
   const {t} = useTranslation(preferences?.i18n);
+  const {setTitle, setSubtitle} = useFlow();
 
   const formFields =
     authenticator.metadata?.params?.sort((a, b) => a.order - b.order)?.filter(param => param.param !== 'totp') || []; // Exclude TOTP fields for username/password
 
+  useEffect(() => {
+    setTitle(t('username.password.title'));
+    setSubtitle(t('username.password.subtitle'));
+  }, [setTitle, setSubtitle, t]);
+
   return (
     <>
       {formFields.map(param => (
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index 61369f80f..0e298059e 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -24,6 +24,7 @@ import useBrowserUrl from '../../hooks/useBrowserUrl';
 import {AsgardeoReactConfig} from '../../models/config';
 import {ThemeProvider} from '../Theme/ThemeProvider';
 import I18nProvider from '../I18n/I18nProvider';
+import FlowProvider from '../Flow/FlowProvider';
 
 /**
  * Props interface of {@link AsgardeoProvider}
@@ -176,7 +177,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
     >
       <I18nProvider preferences={preferences?.i18n}>
         <ThemeProvider theme={preferences?.theme?.overrides} defaultColorScheme={isDarkMode ? 'dark' : 'light'}>
-          {children}
+          <FlowProvider>{children}</FlowProvider>
         </ThemeProvider>
       </I18nProvider>
     </AsgardeoContext.Provider>
diff --git a/packages/react/src/contexts/Flow/FlowContext.ts b/packages/react/src/contexts/Flow/FlowContext.ts
new file mode 100644
index 000000000..51cfa9846
--- /dev/null
+++ b/packages/react/src/contexts/Flow/FlowContext.ts
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {createContext} from 'react';
+
+/**
+ * Types of authentication flows/steps that can be displayed.
+ */
+export type FlowStep = {
+  id: string;
+  type: 'signin' | 'signup' | 'organization-signin' | 'forgot-password' | 'reset-password' | 'verify-email' | 'mfa';
+  title: string;
+  subtitle?: string;
+  canGoBack?: boolean;
+  metadata?: Record<string, any>;
+} | null;
+
+/**
+ * Message types for displaying in authentication flows.
+ */
+export interface FlowMessage {
+  id?: string;
+  type: 'success' | 'error' | 'warning' | 'info';
+  message: string;
+  dismissible?: boolean;
+}
+
+/**
+ * Context value for managing authentication flow UI state.
+ */
+export interface FlowContextValue {
+  // Current step/flow
+  currentStep: FlowStep;
+  setCurrentStep: (step: FlowStep) => void;
+
+  // Title and subtitle
+  title: string;
+  setTitle: (title: string) => void;
+  subtitle?: string;
+  setSubtitle: (subtitle?: string) => void;
+
+  // Messages
+  messages: FlowMessage[];
+  addMessage: (message: FlowMessage) => void;
+  removeMessage: (messageId: string) => void;
+  clearMessages: () => void;
+
+  // Error state
+  error: string | null;
+  setError: (error: string | null) => void;
+
+  // Loading state
+  isLoading: boolean;
+  setIsLoading: (loading: boolean) => void;
+
+  // Navigation
+  showBackButton: boolean;
+  setShowBackButton: (show: boolean) => void;
+  onGoBack?: () => void;
+  setOnGoBack: (callback?: () => void) => void;
+
+  // Utilities
+  reset: () => void;
+  navigateToFlow: (
+    flowType: NonNullable<FlowStep>['type'],
+    options?: {
+      title?: string;
+      subtitle?: string;
+      metadata?: Record<string, any>;
+    },
+  ) => void;
+}
+
+/**
+ * Context for managing authentication flow UI state.
+ * This context handles titles, messages, navigation, and loading states
+ * for authentication flows like SignIn, SignUp, organization signin, etc.
+ */
+const FlowContext = createContext<FlowContextValue | undefined>(undefined);
+
+FlowContext.displayName = 'FlowContext';
+
+export default FlowContext;
diff --git a/packages/react/src/contexts/Flow/FlowProvider.tsx b/packages/react/src/contexts/Flow/FlowProvider.tsx
new file mode 100644
index 000000000..06298fd25
--- /dev/null
+++ b/packages/react/src/contexts/Flow/FlowProvider.tsx
@@ -0,0 +1,196 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {FC, PropsWithChildren, ReactElement, useCallback, useMemo, useState} from 'react';
+import FlowContext, {FlowContextValue, FlowMessage, FlowStep} from './FlowContext';
+
+/**
+ * Props for the FlowProvider component.
+ */
+export interface FlowProviderProps {
+  /**
+   * Initial step to start with.
+   */
+  initialStep?: FlowStep;
+
+  /**
+   * Initial title.
+   */
+  initialTitle?: string;
+
+  /**
+   * Initial subtitle.
+   */
+  initialSubtitle?: string;
+
+  /**
+   * Callback when flow type changes.
+   */
+  onFlowChange?: (step: FlowStep) => void;
+}
+
+/**
+ * Provider component for flow context.
+ * Manages shared UI state for authentication flows including titles, messages, and navigation.
+ */
+const FlowProvider: FC<PropsWithChildren<FlowProviderProps>> = ({
+  children,
+  initialStep = null,
+  initialTitle = '',
+  initialSubtitle,
+  onFlowChange,
+}: PropsWithChildren<FlowProviderProps>): ReactElement => {
+  const [currentStep, setCurrentStepState] = useState<FlowStep>(initialStep);
+  const [title, setTitle] = useState<string>(initialTitle);
+  const [subtitle, setSubtitle] = useState<string | undefined>(initialSubtitle);
+  const [messages, setMessages] = useState<FlowMessage[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [showBackButton, setShowBackButton] = useState<boolean>(false);
+  const [onGoBack, setOnGoBack] = useState<(() => void) | undefined>(undefined);
+
+  /**
+   * Set the current flow step and notify listeners.
+   */
+  const setCurrentStep = useCallback(
+    (step: FlowStep) => {
+      setCurrentStepState(step);
+      if (step) {
+        setTitle(step.title);
+        setSubtitle(step.subtitle);
+        setShowBackButton(step.canGoBack ?? false);
+      }
+      onFlowChange?.(step);
+    },
+    [onFlowChange],
+  );
+
+  /**
+   * Add a message to the message list.
+   */
+  const addMessage = useCallback((message: FlowMessage) => {
+    const messageWithId = {
+      ...message,
+      id: message.id ?? `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+    };
+
+    setMessages(prev => [...prev, messageWithId]);
+  }, []);
+
+  /**
+   * Remove a specific message by ID.
+   */
+  const removeMessage = useCallback((messageId: string) => {
+    setMessages(prev => prev.filter(msg => msg.id !== messageId));
+  }, []);
+
+  /**
+   * Clear all messages.
+   */
+  const clearMessages = useCallback(() => {
+    setMessages([]);
+  }, []);
+
+  /**
+   * Reset the flow context to initial state.
+   */
+  const reset = useCallback(() => {
+    setCurrentStepState(initialStep);
+    setTitle(initialTitle);
+    setSubtitle(initialSubtitle);
+    setMessages([]);
+    setError(null);
+    setIsLoading(false);
+    setShowBackButton(false);
+    setOnGoBack(undefined);
+  }, [initialStep, initialTitle, initialSubtitle]);
+
+  /**
+   * Navigate to a different authentication flow.
+   */
+  const navigateToFlow = useCallback(
+    (
+      flowType: NonNullable<FlowStep>['type'],
+      options?: {
+        title?: string;
+        subtitle?: string;
+        metadata?: Record<string, any>;
+      },
+    ) => {
+      const stepId = `${flowType}-${Date.now()}`;
+      const step: NonNullable<FlowStep> = {
+        id: stepId,
+        type: flowType,
+        title: options?.title,
+        subtitle: options?.subtitle,
+        canGoBack: flowType !== 'signin', // Usually allow going back except for main signin
+        metadata: options?.metadata,
+      };
+
+      setCurrentStep(step);
+      clearMessages();
+      setError(null);
+    },
+    [setCurrentStep, clearMessages],
+  );
+
+  const contextValue: FlowContextValue = useMemo(
+    () => ({
+      currentStep,
+      setCurrentStep,
+      title,
+      setTitle,
+      subtitle,
+      setSubtitle,
+      messages,
+      addMessage,
+      removeMessage,
+      clearMessages,
+      error,
+      setError,
+      isLoading,
+      setIsLoading,
+      showBackButton,
+      setShowBackButton,
+      onGoBack,
+      setOnGoBack,
+      reset,
+      navigateToFlow,
+    }),
+    [
+      currentStep,
+      setCurrentStep,
+      title,
+      subtitle,
+      messages,
+      addMessage,
+      removeMessage,
+      clearMessages,
+      error,
+      isLoading,
+      showBackButton,
+      onGoBack,
+      reset,
+      navigateToFlow,
+    ],
+  );
+
+  return <FlowContext.Provider value={contextValue}>{children}</FlowContext.Provider>;
+};
+
+export default FlowProvider;
diff --git a/packages/react/src/contexts/Flow/index.ts b/packages/react/src/contexts/Flow/index.ts
new file mode 100644
index 000000000..612f4cceb
--- /dev/null
+++ b/packages/react/src/contexts/Flow/index.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export {default as FlowContext} from './FlowContext';
+export {default as FlowProvider} from './FlowProvider';
+export {default as useFlow} from './useFlow';
+export {default as useFlowOptional} from './useFlowOptional';
+
+export type {FlowStep, FlowMessage, FlowContextValue} from './FlowContext';
+
+export type {FlowProviderProps} from './FlowProvider';
diff --git a/packages/react/src/contexts/Flow/useFlow.ts b/packages/react/src/contexts/Flow/useFlow.ts
new file mode 100644
index 000000000..93f08e033
--- /dev/null
+++ b/packages/react/src/contexts/Flow/useFlow.ts
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {useContext} from 'react';
+import FlowContext, {FlowContextValue} from './FlowContext';
+
+/**
+ * Hook to access the flow context.
+ * Must be used within a FlowProvider.
+ *
+ * @example
+ * ```tsx
+ * const MyAuthComponent = () => {
+ *   const { title, setTitle, addMessage, isLoading } = useFlow();
+ *
+ *   const handleSuccess = () => {
+ *     addMessage({
+ *       type: 'success',
+ *       message: 'Authentication successful!'
+ *     });
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <h1>{title}</h1>
+ *       {isLoading && <p>Loading...</p>}
+ *     </div>
+ *   );
+ * };
+ * ```
+ *
+ * @returns The flow context value
+ * @throws Error if used outside of FlowProvider
+ */
+const useFlow = (): FlowContextValue => {
+  const context = useContext(FlowContext);
+
+  if (!context) {
+    throw new Error('useFlow must be used within a FlowProvider');
+  }
+
+  return context;
+};
+
+export default useFlow;
diff --git a/packages/react/src/contexts/Flow/useFlowOptional.ts b/packages/react/src/contexts/Flow/useFlowOptional.ts
new file mode 100644
index 000000000..24ebd6ce6
--- /dev/null
+++ b/packages/react/src/contexts/Flow/useFlowOptional.ts
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {useContext} from 'react';
+import FlowContext, {FlowContextValue} from './FlowContext';
+
+/**
+ * Hook to optionally access the flow context.
+ * Unlike useFlow, this hook doesn't throw an error if used outside of FlowProvider.
+ * This allows components to work both with and without the flow context.
+ *
+ * @example
+ * ```tsx
+ * const MyAuthComponent = () => {
+ *   const flow = useFlowOptional();
+ *
+ *   const handleSuccess = () => {
+ *     // Only update flow context if it's available
+ *     flow?.addMessage({
+ *       type: 'success',
+ *       message: 'Authentication successful!'
+ *     });
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <h1>{flow?.title || 'Default Title'}</h1>
+ *       {flow?.isLoading && <p>Loading...</p>}
+ *     </div>
+ *   );
+ * };
+ * ```
+ *
+ * @returns The flow context value or undefined if not within a FlowProvider
+ */
+const useFlowOptional = (): FlowContextValue | undefined => {
+  return useContext(FlowContext);
+};
+
+export default useFlowOptional;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 0b1ba2780..b2a79b0b1 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -147,4 +147,13 @@ export {
 } from './components/factories/FieldFactory';
 export * from './components/factories/FieldFactory';
 
+export {default as FlowContext} from './contexts/Flow/FlowContext';
+export {default as FlowProvider} from './contexts/Flow/FlowProvider';
+export {default as useFlow} from './contexts/Flow/useFlow';
+export {default as useFlowOptional} from './contexts/Flow/useFlowOptional';
+
+export type {FlowStep, FlowMessage, FlowContextValue} from './contexts/Flow/FlowContext';
+
+export type {FlowProviderProps} from './contexts/Flow/FlowProvider';
+
 export * from '@asgardeo/browser';

From f9d8898d350788907936cc6d28c7bdbf280e8860 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Fri, 13 Jun 2025 16:19:54 +0530
Subject: [PATCH 079/131] feat(react): Add Typography component for consistent
 text rendering and export from index

---
 .../primitives/Typography/Typography.tsx      | 317 ++++++++++++++++++
 packages/react/src/index.ts                   |   3 +
 2 files changed, 320 insertions(+)
 create mode 100644 packages/react/src/components/primitives/Typography/Typography.tsx

diff --git a/packages/react/src/components/primitives/Typography/Typography.tsx b/packages/react/src/components/primitives/Typography/Typography.tsx
new file mode 100644
index 000000000..5ce08244d
--- /dev/null
+++ b/packages/react/src/components/primitives/Typography/Typography.tsx
@@ -0,0 +1,317 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {CSSProperties, FC, ReactNode, ComponentPropsWithoutRef, ElementType} from 'react';
+import {useTheme} from '../../../contexts/Theme/useTheme';
+import clsx from 'clsx';
+
+// Typography variants mapped to HTML elements and styling
+export type TypographyVariant = 
+  | 'h1' 
+  | 'h2' 
+  | 'h3' 
+  | 'h4' 
+  | 'h5' 
+  | 'h6' 
+  | 'subtitle1' 
+  | 'subtitle2' 
+  | 'body1' 
+  | 'body2' 
+  | 'caption' 
+  | 'overline'
+  | 'button';
+
+export type TypographyAlign = 'left' | 'center' | 'right' | 'justify';
+
+export type TypographyColor = 
+  | 'primary' 
+  | 'secondary' 
+  | 'error' 
+  | 'success' 
+  | 'warning' 
+  | 'info'
+  | 'textPrimary' 
+  | 'textSecondary' 
+  | 'inherit';
+
+export interface TypographyProps {
+  /**
+   * The content to be rendered
+   */
+  children: ReactNode;
+  /**
+   * The typography variant to apply
+   */
+  variant?: TypographyVariant;
+  /**
+   * The HTML element or React component to render
+   */
+  component?: ElementType;
+  /**
+   * Text alignment
+   */
+  align?: TypographyAlign;
+  /**
+   * Color variant
+   */
+  color?: TypographyColor;
+  /**
+   * Whether the text should be clipped with ellipsis when it overflows
+   */
+  noWrap?: boolean;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Custom styles
+   */
+  style?: CSSProperties;
+  /**
+   * Whether the text should be displayed inline
+   */
+  inline?: boolean;
+  /**
+   * Custom font weight
+   */
+  fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold' | number;
+  /**
+   * Custom font size (overrides variant sizing)
+   */
+  fontSize?: string | number;
+  /**
+   * Line height
+   */
+  lineHeight?: string | number;
+  /**
+   * Whether to disable gutters (margin bottom)
+   */
+  gutterBottom?: boolean;
+}
+
+// Default component mapping for variants
+const variantMapping: Record<TypographyVariant, ElementType> = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  subtitle1: 'h6',
+  subtitle2: 'h6',
+  body1: 'p',
+  body2: 'p',
+  caption: 'span',
+  overline: 'span',
+  button: 'span',
+};
+
+/**
+ * Typography component for consistent text rendering throughout the application.
+ * Integrates with the theme system and provides semantic HTML elements.
+ */
+const Typography: FC<TypographyProps> = ({
+  children,
+  variant = 'body1',
+  component,
+  align = 'left',
+  color = 'textPrimary',
+  noWrap = false,
+  className,
+  style = {},
+  inline = false,
+  fontWeight,
+  fontSize,
+  lineHeight,
+  gutterBottom = false,
+  ...rest
+}) => {
+  const {theme} = useTheme();
+
+  // Determine the component to render
+  const Component = component || variantMapping[variant] || 'span';
+
+  // Get color value from theme
+  const getColorValue = (colorVariant: TypographyColor): string => {
+    switch (colorVariant) {
+      case 'primary':
+        return theme.colors.primary.main;
+      case 'secondary':
+        return theme.colors.secondary.main;
+      case 'error':
+        return theme.colors.error.main;
+      case 'textPrimary':
+        return theme.colors.text.primary;
+      case 'textSecondary':
+        return theme.colors.text.secondary;
+      case 'inherit':
+        return 'inherit';
+      default:
+        return theme.colors.text.primary;
+    }
+  };
+
+  // Get variant styles
+  const getVariantStyles = (variantName: TypographyVariant): CSSProperties => {
+    const baseUnit = theme.spacing.unit;
+    
+    switch (variantName) {
+      case 'h1':
+        return {
+          fontSize: '2.125rem', // 34px
+          fontWeight: 400,
+          lineHeight: 1.235,
+          letterSpacing: '-0.00735em',
+        };
+      case 'h2':
+        return {
+          fontSize: '1.5rem', // 24px
+          fontWeight: 400,
+          lineHeight: 1.334,
+          letterSpacing: '0em',
+        };
+      case 'h3':
+        return {
+          fontSize: '1.25rem', // 20px
+          fontWeight: 400,
+          lineHeight: 1.6,
+          letterSpacing: '0.0075em',
+        };
+      case 'h4':
+        return {
+          fontSize: '1.125rem', // 18px
+          fontWeight: 400,
+          lineHeight: 1.5,
+          letterSpacing: '0.00938em',
+        };
+      case 'h5':
+        return {
+          fontSize: '1rem', // 16px
+          fontWeight: 400,
+          lineHeight: 1.334,
+          letterSpacing: '0em',
+        };
+      case 'h6':
+        return {
+          fontSize: '0.875rem', // 14px
+          fontWeight: 500,
+          lineHeight: 1.6,
+          letterSpacing: '0.0075em',
+        };
+      case 'subtitle1':
+        return {
+          fontSize: '1rem', // 16px
+          fontWeight: 400,
+          lineHeight: 1.75,
+          letterSpacing: '0.00938em',
+        };
+      case 'subtitle2':
+        return {
+          fontSize: '0.875rem', // 14px
+          fontWeight: 500,
+          lineHeight: 1.57,
+          letterSpacing: '0.00714em',
+        };
+      case 'body1':
+        return {
+          fontSize: '1rem', // 16px
+          fontWeight: 400,
+          lineHeight: 1.5,
+          letterSpacing: '0.00938em',
+        };
+      case 'body2':
+        return {
+          fontSize: '0.875rem', // 14px
+          fontWeight: 400,
+          lineHeight: 1.43,
+          letterSpacing: '0.01071em',
+        };
+      case 'caption':
+        return {
+          fontSize: '0.75rem', // 12px
+          fontWeight: 400,
+          lineHeight: 1.66,
+          letterSpacing: '0.03333em',
+        };
+      case 'overline':
+        return {
+          fontSize: '0.75rem', // 12px
+          fontWeight: 400,
+          lineHeight: 2.66,
+          letterSpacing: '0.08333em',
+          textTransform: 'uppercase',
+        };
+      case 'button':
+        return {
+          fontSize: '0.875rem', // 14px
+          fontWeight: 500,
+          lineHeight: 1.75,
+          letterSpacing: '0.02857em',
+          textTransform: 'uppercase',
+        };
+      default:
+        return {};
+    }
+  };
+
+  const variantStyles = getVariantStyles(variant);
+
+  const typographyStyle: CSSProperties = {
+    margin: 0,
+    color: getColorValue(color),
+    textAlign: align,
+    display: inline ? 'inline' : variantMapping[variant] === 'span' ? 'inline' : 'block',
+    ...variantStyles,
+    // Custom overrides
+    ...(fontWeight && { fontWeight }),
+    ...(fontSize && { fontSize: typeof fontSize === 'number' ? `${fontSize}px` : fontSize }),
+    ...(lineHeight && { lineHeight }),
+    ...(noWrap && {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+    }),
+    ...(gutterBottom && {
+      marginBottom: theme.spacing.unit + 'px',
+    }),
+    ...style,
+  };
+
+  const classes = clsx(
+    'wso2-typography',
+    `wso2-typography-${variant}`,
+    {
+      'wso2-typography-noWrap': noWrap,
+      'wso2-typography-inline': inline,
+      'wso2-typography-gutterBottom': gutterBottom,
+    },
+    className,
+  );
+
+  return (
+    <Component 
+      className={classes} 
+      style={typographyStyle} 
+      {...rest}
+    >
+      {children}
+    </Component>
+  );
+};
+
+export default Typography;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index b2a79b0b1..7a41ebb62 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -128,6 +128,9 @@ export * from './components/primitives/FormControl/FormControl';
 export {default as InputLabel} from './components/primitives/InputLabel/InputLabel';
 export * from './components/primitives/InputLabel/InputLabel';
 
+export {default as Typography} from './components/primitives/Typography/Typography';
+export * from './components/primitives/Typography/Typography';
+
 export {default as Divider} from './components/primitives/Divider/Divider';
 export * from './components/primitives/Divider/Divider';
 

From bcd2d56635e4c2de2094eb5a35c1f10f6fed7132 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Fri, 13 Jun 2025 16:45:09 +0530
Subject: [PATCH 080/131] feat(react): Enhance form fields with placeholder
 support and integrate Typography for consistent text styling

---
 packages/javascript/src/i18n/en-US.ts         |   3 +
 packages/javascript/src/models/i18n.ts        |   3 +
 .../src/components/factories/FieldFactory.tsx |  19 +--
 .../presentation/SignIn/BaseSignIn.tsx        |   7 +-
 .../presentation/SignIn/options/EmailOtp.tsx  |   1 -
 .../SignIn/options/IdentifierFirst.tsx        |   3 +
 .../presentation/SignIn/options/SmsOtp.tsx    |   1 -
 .../presentation/SignIn/options/Totp.tsx      |   1 -
 .../SignIn/options/UsernamePassword.tsx       |   3 +
 .../src/components/primitives/Alert/Alert.tsx |  26 +++-
 .../src/components/primitives/Card/Card.tsx   | 140 ++++++++----------
 .../components/primitives/Divider/Divider.tsx |   7 +-
 .../primitives/FormControl/FormControl.tsx    |   9 +-
 .../PasswordField/PasswordField.tsx           |  50 +------
 14 files changed, 118 insertions(+), 155 deletions(-)

diff --git a/packages/javascript/src/i18n/en-US.ts b/packages/javascript/src/i18n/en-US.ts
index 199d7b92e..ab912c1e1 100644
--- a/packages/javascript/src/i18n/en-US.ts
+++ b/packages/javascript/src/i18n/en-US.ts
@@ -35,6 +35,9 @@ const translations: I18nTranslations = {
   'elements.buttons.ethereum': 'Continue With Sign In Ethereum',
   'elements.buttons.multi.option': 'Continue With {connection}',
   'elements.buttons.social': 'Continue With {connection}',
+  
+  /* Fields */
+  'elements.fields.placeholder': 'Enter your {field}',
 
   /* |---------------------------------------------------------------| */
   /* |                        Widgets                                | */
diff --git a/packages/javascript/src/models/i18n.ts b/packages/javascript/src/models/i18n.ts
index 100235c78..ff58d2946 100644
--- a/packages/javascript/src/models/i18n.ts
+++ b/packages/javascript/src/models/i18n.ts
@@ -34,6 +34,9 @@ export interface I18nTranslations {
   'elements.buttons.multi.option': string;
   'elements.buttons.social': string;
 
+  /* Fields */
+  'elements.fields.placeholder': string;
+
   /* |---------------------------------------------------------------| */
   /* |                        Widgets                                | */
   /* |---------------------------------------------------------------| */
diff --git a/packages/react/src/components/factories/FieldFactory.tsx b/packages/react/src/components/factories/FieldFactory.tsx
index fbd57d141..6c2109c73 100644
--- a/packages/react/src/components/factories/FieldFactory.tsx
+++ b/packages/react/src/components/factories/FieldFactory.tsx
@@ -69,6 +69,10 @@ export interface FieldConfig {
    * Whether the field has been touched/interacted with by the user.
    */
   touched?: boolean;
+  /**
+   * Placeholder text for the field.
+   */
+  placeholder?: string;
 }
 
 /**
@@ -152,6 +156,7 @@ export const createField = (config: FieldConfig): ReactElement => {
     className,
     options = [],
     touched = false,
+    placeholder,
   } = config;
 
   // Auto-validate the field value
@@ -165,22 +170,12 @@ export const createField = (config: FieldConfig): ReactElement => {
     error: validationError,
     className,
     value,
+    placeholder,
   };
 
   switch (type) {
     case FieldType.Password:
-      return (
-        <PasswordField
-          name={name}
-          label={label}
-          required={required}
-          disabled={disabled}
-          error={validationError}
-          className={className}
-          value={value}
-          onChange={onChange}
-        />
-      );
+      return <PasswordField {...commonProps} onChange={onChange} />;
     case FieldType.Text:
       return <TextField {...commonProps} type="text" onChange={e => onChange(e.target.value)} autoComplete="off" />;
     case FieldType.Otp:
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index c72414f73..b9d388904 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -31,6 +31,7 @@ import {clsx} from 'clsx';
 import Card from '../../primitives/Card/Card';
 import Alert from '../../primitives/Alert/Alert';
 import Divider from '../../primitives/Divider/Divider';
+import Typography from '../../primitives/Typography/Typography';
 import useTranslation from '../../../hooks/useTranslation';
 import {useForm, FormField} from '../../../hooks/useForm';
 import FlowProvider from '../../../contexts/Flow/FlowProvider';
@@ -606,7 +607,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
     return showLoading ? (
       <Card className={containerClasses}>
         <Card.Content>
-          <p>{loadingText ?? t('messages.loading')}</p>
+          <Typography variant="body1">{loadingText ?? t('messages.loading')}</Typography>
         </Card.Content>
       </Card>
     ) : null;
@@ -629,9 +630,9 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
         <Card.Header>
           <Card.Title level={2}>{flow?.title || t('signin.title')}</Card.Title>
           {flow?.subtitle && (
-            <Card.Title level={3} style={{marginTop: '0.5rem'}}>
+            <Typography variant="body1" style={{marginTop: '0.5rem'}}>
               {flow?.subtitle || t('signin.subtitle')}
-            </Card.Title>
+            </Typography>
           )}
           {flow?.messages && flow.messages.length > 0 && (
             <div style={{marginTop: '1rem'}}>
diff --git a/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx b/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
index b6d7868cb..45d6a952b 100644
--- a/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
@@ -73,7 +73,6 @@ const EmailOtp: FC<BaseSignInOptionProps> = ({
                 onChange={event => onInputChange(param.param, event.target.value)}
                 disabled={isLoading}
                 className={inputClassName}
-                placeholder="."
               />
             ) : (
               createField({
diff --git a/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx b/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
index 7874efec8..3b4921d19 100644
--- a/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
@@ -72,6 +72,9 @@ const IdentifierFirst: FC<BaseSignInOptionProps> = ({
             disabled: isLoading,
             className: inputClassName,
             touched: touchedFields[param.param] || false,
+            placeholder: t(`elements.fields.placeholder`, {
+              field: (param.displayName || param.param).toLowerCase(),
+            }),
           })}
         </div>
       ))}
diff --git a/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx b/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
index 3ada1fbcd..cccc4cb4c 100644
--- a/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
@@ -72,7 +72,6 @@ const SmsOtp: FC<BaseSignInOptionProps> = ({
                 onChange={event => onInputChange(param.param, event.target.value)}
                 disabled={isLoading}
                 className={inputClassName}
-                placeholder="."
               />
             ) : (
               createField({
diff --git a/packages/react/src/components/presentation/SignIn/options/Totp.tsx b/packages/react/src/components/presentation/SignIn/options/Totp.tsx
index 1672d1639..b0581da17 100644
--- a/packages/react/src/components/presentation/SignIn/options/Totp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/Totp.tsx
@@ -72,7 +72,6 @@ const Totp: FC<BaseSignInOptionProps> = ({
                 onChange={event => onInputChange(param.param, event.target.value)}
                 disabled={isLoading}
                 className={inputClassName}
-                placeholder="."
               />
             ) : (
               createField({
diff --git a/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx b/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
index 9f6e3ab60..771480388 100644
--- a/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
@@ -73,6 +73,9 @@ const UsernamePassword: FC<BaseSignInOptionProps> = ({
             disabled: isLoading,
             className: inputClassName,
             touched: touchedFields[param.param] || false,
+            placeholder: t(`elements.fields.placeholder`, {
+              field: (param.displayName || param.param).toLowerCase(),
+            }),
           })}
         </div>
       ))}
diff --git a/packages/react/src/components/primitives/Alert/Alert.tsx b/packages/react/src/components/primitives/Alert/Alert.tsx
index de9ac804e..7026741bd 100644
--- a/packages/react/src/components/primitives/Alert/Alert.tsx
+++ b/packages/react/src/components/primitives/Alert/Alert.tsx
@@ -28,6 +28,7 @@ import {
 import {useTheme} from '../../../contexts/Theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
+import Typography from '../Typography/Typography';
 import CircleCheck from '../Icons/CircleCheck';
 import CircleAlert from '../Icons/CircleAlert';
 import TriangleAlert from '../Icons/TriangleAlert';
@@ -222,15 +223,20 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
 const AlertTitle = forwardRef<HTMLHeadingElement, AlertTitleProps>(({children, className, style, ...rest}, ref) => {
   const titleStyle = useAlertTitleStyles();
 
+  // Filter out conflicting props that shouldn't be passed to Typography
+  const {color, ...filteredRest} = rest;
+
   return (
-    <h3
-      ref={ref}
+    <Typography
+      component="h3"
+      variant="h6"
+      fontWeight={600}
       style={{...titleStyle, ...style}}
       className={clsx(withVendorCSSClassPrefix('alert-title'), className)}
-      {...rest}
+      {...filteredRest}
     >
       {children}
-    </h3>
+    </Typography>
   );
 });
 
@@ -241,15 +247,19 @@ const AlertDescription = forwardRef<HTMLParagraphElement, AlertDescriptionProps>
   ({children, className, style, ...rest}, ref) => {
     const descriptionStyle = useAlertDescriptionStyles();
 
+    // Filter out conflicting props that shouldn't be passed to Typography
+    const {color, ...filteredRest} = rest;
+
     return (
-      <p
-        ref={ref}
+      <Typography
+        component="p"
+        variant="body2"
         style={{...descriptionStyle, ...style}}
         className={clsx(withVendorCSSClassPrefix('alert-description'), className)}
-        {...rest}
+        {...filteredRest}
       >
         {children}
-      </p>
+      </Typography>
     );
   },
 );
diff --git a/packages/react/src/components/primitives/Card/Card.tsx b/packages/react/src/components/primitives/Card/Card.tsx
index 235076d44..a69e08ca3 100644
--- a/packages/react/src/components/primitives/Card/Card.tsx
+++ b/packages/react/src/components/primitives/Card/Card.tsx
@@ -29,6 +29,7 @@ import {
 import {useTheme} from '../../../contexts/Theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
+import Typography from '../Typography/Typography';
 
 export type CardVariant = 'default' | 'outlined' | 'elevated';
 
@@ -158,10 +159,7 @@ const useCardTitleStyles = () => {
   return useMemo(
     (): CSSProperties => ({
       margin: 0,
-      color: theme.colors.text.primary,
-      fontSize: '1.25rem',
-      fontWeight: 600,
-      lineHeight: 1.4,
+      // Typography component will handle color, fontSize, fontWeight, lineHeight
     }),
     [theme],
   );
@@ -290,81 +288,62 @@ const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(
   ({children, level = 3, className, style, ...rest}, ref) => {
     const titleStyle = useCardTitleStyles();
 
-    if (level === 1) {
-      return (
-        <h1
-          ref={ref}
-          style={{...titleStyle, ...style}}
-          className={clsx(withVendorCSSClassPrefix('card-title'), className)}
-          {...rest}
-        >
-          {children}
-        </h1>
-      );
-    }
-
-    if (level === 2) {
-      return (
-        <h2
-          ref={ref}
-          style={{...titleStyle, ...style}}
-          className={clsx(withVendorCSSClassPrefix('card-title'), className)}
-          {...rest}
-        >
-          {children}
-        </h2>
-      );
-    }
-
-    if (level === 4) {
-      return (
-        <h4
-          ref={ref}
-          style={{...titleStyle, ...style}}
-          className={clsx(withVendorCSSClassPrefix('card-title'), className)}
-          {...rest}
-        >
-          {children}
-        </h4>
-      );
-    }
-
-    if (level === 5) {
-      return (
-        <h5
-          ref={ref}
-          style={{...titleStyle, ...style}}
-          className={clsx(withVendorCSSClassPrefix('card-title'), className)}
-          {...rest}
-        >
-          {children}
-        </h5>
-      );
-    }
-
-    if (level === 6) {
-      return (
-        <h6
-          ref={ref}
-          style={{...titleStyle, ...style}}
-          className={clsx(withVendorCSSClassPrefix('card-title'), className)}
-          {...rest}
-        >
-          {children}
-        </h6>
-      );
-    }
-
-    // Default to h3
+    // Map level to Typography variant
+    const getVariantFromLevel = (level: number) => {
+      switch (level) {
+        case 1:
+          return 'h1';
+        case 2:
+          return 'h2';
+        case 3:
+          return 'h3';
+        case 4:
+          return 'h4';
+        case 5:
+          return 'h5';
+        case 6:
+          return 'h6';
+        default:
+          return 'h3';
+      }
+    };
+
+    // Map level to HTML element for ref forwarding
+    const getComponentFromLevel = (level: number) => {
+      switch (level) {
+        case 1:
+          return 'h1';
+        case 2:
+          return 'h2';
+        case 3:
+          return 'h3';
+        case 4:
+          return 'h4';
+        case 5:
+          return 'h5';
+        case 6:
+          return 'h6';
+        default:
+          return 'h3';
+      }
+    };
+
+    // Filter out conflicting props that shouldn't be passed to Typography
+    const {color, ...filteredRest} = rest;
+
     return (
-      <h3
-        ref={ref}
+      <Typography
+        component={getComponentFromLevel(level)}
+        variant={getVariantFromLevel(level)}
         style={{...titleStyle, ...style}}
         className={clsx(withVendorCSSClassPrefix('card-title'), className)}
-        {...rest}
+        fontWeight={600}
+        {...filteredRest}
+        // We can't forward ref to Typography since it doesn't use forwardRef
+        // The ref will be handled by the Typography component's underlying element
       >
         {children}
-      </h3>
+      </Typography>
     );
   },
 );
@@ -376,15 +355,20 @@ const CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(
   ({children, className, style, ...rest}, ref) => {
     const descriptionStyle = useCardDescriptionStyles();
 
+    // Filter out conflicting props that shouldn't be passed to Typography
+    const {color, ...filteredRest} = rest;
+
     return (
-      <p
-        ref={ref}
+      <Typography
+        component="p"
+        variant="body2"
+        color="textSecondary"
         style={{...descriptionStyle, ...style}}
         className={clsx(withVendorCSSClassPrefix('card-description'), className)}
-        {...rest}
+        {...filteredRest}
       >
         {children}
-      </p>
+      </Typography>
     );
   },
 );
diff --git a/packages/react/src/components/primitives/Divider/Divider.tsx b/packages/react/src/components/primitives/Divider/Divider.tsx
index 14374b815..dfc954459 100644
--- a/packages/react/src/components/primitives/Divider/Divider.tsx
+++ b/packages/react/src/components/primitives/Divider/Divider.tsx
@@ -20,6 +20,7 @@ import {FC, HTMLAttributes, useMemo} from 'react';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import {clsx} from 'clsx';
 import {useTheme} from '../../../contexts/Theme/useTheme';
+import Typography from '../Typography/Typography';
 
 export type DividerOrientation = 'horizontal' | 'vertical';
 export type DividerVariant = 'solid' | 'dashed' | 'dotted';
@@ -72,8 +73,6 @@ const useStyles = (orientation: DividerOrientation, variant: DividerVariant, col
       alignItems: 'center',
       width: '100%',
       margin: `${theme.spacing.unit * 2}px 0`,
-      fontSize: '0.875rem',
-      color: theme.colors.text.secondary,
     };
 
     if (hasChildren) {
@@ -158,7 +157,9 @@ const Divider: FC<DividerProps> = ({
         {...rest}
       >
         <div style={styles.line} />
-        <span style={styles.text}>{children}</span>
+        <Typography variant="body2" color="textSecondary" style={styles.text} inline>
+          {children}
+        </Typography>
         <div style={styles.line} />
       </div>
     );
diff --git a/packages/react/src/components/primitives/FormControl/FormControl.tsx b/packages/react/src/components/primitives/FormControl/FormControl.tsx
index b71b3ad39..03c0740ec 100644
--- a/packages/react/src/components/primitives/FormControl/FormControl.tsx
+++ b/packages/react/src/components/primitives/FormControl/FormControl.tsx
@@ -19,6 +19,7 @@
 import {CSSProperties, FC, ReactNode} from 'react';
 import {useTheme} from '../../../contexts/Theme/useTheme';
 import clsx from 'clsx';
+import Typography from '../Typography/Typography';
 
 export interface FormControlProps {
   /**
@@ -68,8 +69,6 @@ const FormControl: FC<FormControlProps> = ({
   };
 
   const helperTextStyle: CSSProperties = {
-    fontSize: '0.75rem',
-    color: error ? theme.colors.error.main : theme.colors.text.secondary,
     marginTop: theme.spacing.unit / 2 + 'px',
     textAlign: helperTextAlign,
     ...(helperTextMarginLeft && {marginLeft: helperTextMarginLeft}),
@@ -78,7 +77,11 @@ const FormControl: FC<FormControlProps> = ({
   return (
     <div style={containerStyle} className={className}>
       {children}
-      {(error || helperText) && <div style={helperTextStyle}>{error || helperText}</div>}
+      {(error || helperText) && (
+        <Typography variant="caption" color={error ? 'error' : 'textSecondary'} style={helperTextStyle}>
+          {error || helperText}
+        </Typography>
+      )}
     </div>
   );
 };
diff --git a/packages/react/src/components/primitives/PasswordField/PasswordField.tsx b/packages/react/src/components/primitives/PasswordField/PasswordField.tsx
index 1ef553514..3020204ba 100644
--- a/packages/react/src/components/primitives/PasswordField/PasswordField.tsx
+++ b/packages/react/src/components/primitives/PasswordField/PasswordField.tsx
@@ -17,39 +17,11 @@
  */
 
 import {FC, useState} from 'react';
-import TextField from '../TextField/TextField';
+import TextField, {TextFieldProps} from '../TextField/TextField';
 import Eye from '../Icons/Eye';
 import EyeOff from '../Icons/EyeOff';
 
-export interface PasswordFieldProps {
-  /**
-   * Field name
-   */
-  name: string;
-  /**
-   * Label text to display above the input
-   */
-  label: string;
-  /**
-   * Whether the field is required
-   */
-  required: boolean;
-  /**
-   * Whether the field is disabled
-   */
-  disabled: boolean;
-  /**
-   * Error message to display below the input
-   */
-  error?: string | null;
-  /**
-   * Additional CSS class names
-   */
-  className?: string;
-  /**
-   * Current value of the field
-   */
-  value: string;
+export interface PasswordFieldProps extends Omit<TextFieldProps, 'type' | 'endIcon' | 'onEndIconClick' | 'onChange'> {
   /**
    * Callback function when the field value changes
    */
@@ -58,29 +30,17 @@ export interface PasswordFieldProps {
 
 /**
  * Password field component with show/hide toggle functionality.
- * This component is extracted to prevent re-rendering issues that cause loss of focus.
+ * This component extends TextField and adds password visibility toggle functionality.
  */
 const PasswordField: FC<PasswordFieldProps> = ({
-  name,
-  label,
-  required,
-  disabled,
-  error,
-  className,
-  value,
   onChange,
+  ...textFieldProps
 }) => {
   const [showPassword, setShowPassword] = useState(false);
 
   return (
     <TextField
-      name={name}
-      label={label}
-      required={required}
-      disabled={disabled}
-      error={error}
-      className={className}
-      value={value}
+      {...textFieldProps}
       type={showPassword ? 'text' : 'password'}
       onChange={e => onChange(e.target.value)}
       autoComplete="current-password"

From 17230d9e3b6112c2b894a6465a291601a6f89105 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Fri, 13 Jun 2025 16:47:34 +0530
Subject: [PATCH 081/131] fix(react): Correct gap calculation in
 useButtonStyles for consistent spacing

---
 packages/react/src/components/primitives/Button/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/primitives/Button/Button.tsx b/packages/react/src/components/primitives/Button/Button.tsx
index 535c60021..b6a2585e6 100644
--- a/packages/react/src/components/primitives/Button/Button.tsx
+++ b/packages/react/src/components/primitives/Button/Button.tsx
@@ -239,7 +239,7 @@ const useButtonStyles = (
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
-      gap: theme.spacing.unit / 2 + 'px',
+      gap: `${theme.spacing.unit}px`,
       borderRadius: theme.borderRadius.small,
       fontWeight: 500,
       cursor: disabled || loading ? 'not-allowed' : 'pointer',

From 43740d32d9540eaf92b40b4a0a4eec481df4e731 Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Fri, 13 Jun 2025 17:19:57 +0530
Subject: [PATCH 082/131] chore(react): Update useFlow import paths and remove
 unused Flow index file

---
 .../presentation/SignIn/options/EmailOtp.tsx  |  2 +-
 .../SignIn/options/IdentifierFirst.tsx        |  2 +-
 .../presentation/SignIn/options/SmsOtp.tsx    |  2 +-
 .../presentation/SignIn/options/Totp.tsx      |  2 +-
 .../SignIn/options/UsernamePassword.tsx       |  2 +-
 packages/react/src/contexts/Flow/index.ts     | 26 -------------------
 6 files changed, 5 insertions(+), 31 deletions(-)
 delete mode 100644 packages/react/src/contexts/Flow/index.ts

diff --git a/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx b/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
index 45d6a952b..75d575893 100644
--- a/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
@@ -27,7 +27,7 @@ import Button from '../../../primitives/Button/Button';
 import OtpField from '../../../primitives/OtpField/OtpField';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
 import useTranslation from '../../../../hooks/useTranslation';
-import {useFlow} from '../../../../contexts/Flow';
+import useFlow from '../../../../contexts/Flow/useFlow';
 
 /**
  * Email OTP Sign-In Option Component.
diff --git a/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx b/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
index 3b4921d19..4f1c1ae6a 100644
--- a/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
@@ -26,7 +26,7 @@ import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
 import useTranslation from '../../../../hooks/useTranslation';
-import {useFlow} from '../../../../contexts/Flow';
+import useFlow from '../../../../contexts/Flow/useFlow';
 
 /**
  * Identifier First Sign-In Option Component.
diff --git a/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx b/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
index cccc4cb4c..9b7f520a8 100644
--- a/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
@@ -27,7 +27,7 @@ import Button from '../../../primitives/Button/Button';
 import OtpField from '../../../primitives/OtpField/OtpField';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
 import useTranslation from '../../../../hooks/useTranslation';
-import {useFlow} from '../../../../contexts/Flow';
+import useFlow from '../../../../contexts/Flow/useFlow';
 
 /**
  * SMS OTP Sign-In Option Component.
diff --git a/packages/react/src/components/presentation/SignIn/options/Totp.tsx b/packages/react/src/components/presentation/SignIn/options/Totp.tsx
index b0581da17..ad03b0c54 100644
--- a/packages/react/src/components/presentation/SignIn/options/Totp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/Totp.tsx
@@ -27,7 +27,7 @@ import Button from '../../../primitives/Button/Button';
 import OtpField from '../../../primitives/OtpField/OtpField';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
 import useTranslation from '../../../../hooks/useTranslation';
-import {useFlow} from '../../../../contexts/Flow';
+import useFlow from '../../../../contexts/Flow/useFlow';
 
 /**
  * TOTP Sign-In Option Component.
diff --git a/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx b/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
index 771480388..2f65e649a 100644
--- a/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
@@ -26,7 +26,7 @@ import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
 import useTranslation from '../../../../hooks/useTranslation';
-import {useFlow} from '../../../../contexts/Flow';
+import useFlow from '../../../../contexts/Flow/useFlow';
 
 /**
  * Username Password Sign-In Option Component.
diff --git a/packages/react/src/contexts/Flow/index.ts b/packages/react/src/contexts/Flow/index.ts
deleted file mode 100644
index 612f4cceb..000000000
--- a/packages/react/src/contexts/Flow/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-export {default as FlowContext} from './FlowContext';
-export {default as FlowProvider} from './FlowProvider';
-export {default as useFlow} from './useFlow';
-export {default as useFlowOptional} from './useFlowOptional';
-
-export type {FlowStep, FlowMessage, FlowContextValue} from './FlowContext';
-
-export type {FlowProviderProps} from './FlowProvider';

From 8df3cbd579f97afe23619a3f8cf1264a96fb5b2d Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Fri, 13 Jun 2025 17:29:31 +0530
Subject: [PATCH 083/131] chore(react): Replace useFlowOptional with useFlow
 for improved flow context handling and remove unused hook

---
 .../presentation/SignIn/BaseSignIn.tsx        | 23 ++++----
 .../src/contexts/Flow/useFlowOptional.ts      | 55 -------------------
 packages/react/src/index.ts                   |  1 -
 3 files changed, 13 insertions(+), 66 deletions(-)
 delete mode 100644 packages/react/src/contexts/Flow/useFlowOptional.ts

diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index b9d388904..4c3eb641c 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -35,7 +35,7 @@ import Typography from '../../primitives/Typography/Typography';
 import useTranslation from '../../../hooks/useTranslation';
 import {useForm, FormField} from '../../../hooks/useForm';
 import FlowProvider from '../../../contexts/Flow/FlowProvider';
-import useFlowOptional from '../../../contexts/Flow/useFlowOptional';
+import useFlow from '../../../contexts/Flow/useFlow';
 import {createSignInOptionFromAuthenticator} from './options/SignInOptionFactory';
 
 /**
@@ -193,7 +193,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
   variant = 'default',
 }) => {
   const {t} = useTranslation();
-  const flow = useFlowOptional();
+  const {subtitle: flowSubtitle, title: flowTitle, messages: flowMessages} = useFlow();
 
   const [isLoading, setIsLoading] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
@@ -628,15 +628,15 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
     return (
       <Card className={containerClasses}>
         <Card.Header>
-          <Card.Title level={2}>{flow?.title || t('signin.title')}</Card.Title>
-          {flow?.subtitle && (
+          <Card.Title level={2}>{flowTitle || t('signin.title')}</Card.Title>
+          {flowSubtitle && (
             <Typography variant="body1" style={{marginTop: '0.5rem'}}>
-              {flow?.subtitle || t('signin.subtitle')}
+              {flowSubtitle || t('signin.subtitle')}
             </Typography>
           )}
-          {flow?.messages && flow.messages.length > 0 && (
+          {flowMessages && flowMessages.length > 0 && (
             <div style={{marginTop: '1rem'}}>
-              {flow.messages.map((flowMessage, index) => (
+              {flowMessages.map((flowMessage, index) => (
                 <Alert
                   key={flowMessage.id || index}
                   variant={flowMessage.type}
@@ -757,10 +757,13 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
   return (
     <Card className={containerClasses}>
       <Card.Header>
-        <Card.Title level={2}>{flow?.title || t('signin.title')}</Card.Title>
-        {flow?.messages && flow.messages.length > 0 && (
+        <Card.Title level={2}>{flowTitle || t('signin.title')}</Card.Title>
+        <Typography variant="body1" style={{marginTop: '0.5rem'}}>
+          {flowSubtitle || t('signin.subtitle')}
+        </Typography>
+        {flowMessages && flowMessages.length > 0 && (
           <div style={{marginTop: '1rem'}}>
-            {flow.messages.map((flowMessage, index) => (
+            {flowMessages.map((flowMessage, index) => (
               <Alert
                 key={flowMessage.id || index}
                 variant={flowMessage.type}
diff --git a/packages/react/src/contexts/Flow/useFlowOptional.ts b/packages/react/src/contexts/Flow/useFlowOptional.ts
deleted file mode 100644
index 24ebd6ce6..000000000
--- a/packages/react/src/contexts/Flow/useFlowOptional.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import {useContext} from 'react';
-import FlowContext, {FlowContextValue} from './FlowContext';
-
-/**
- * Hook to optionally access the flow context.
- * Unlike useFlow, this hook doesn't throw an error if used outside of FlowProvider.
- * This allows components to work both with and without the flow context.
- *
- * @example
- * ```tsx
- * const MyAuthComponent = () => {
- *   const flow = useFlowOptional();
- *
- *   const handleSuccess = () => {
- *     // Only update flow context if it's available
- *     flow?.addMessage({
- *       type: 'success',
- *       message: 'Authentication successful!'
- *     });
- *   };
- *
- *   return (
- *     <div>
- *       <h1>{flow?.title || 'Default Title'}</h1>
- *       {flow?.isLoading && <p>Loading...</p>}
- *     </div>
- *   );
- * };
- * ```
- *
- * @returns The flow context value or undefined if not within a FlowProvider
- */
-const useFlowOptional = (): FlowContextValue | undefined => {
-  return useContext(FlowContext);
-};
-
-export default useFlowOptional;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 7a41ebb62..1e920dc26 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -153,7 +153,6 @@ export * from './components/factories/FieldFactory';
 export {default as FlowContext} from './contexts/Flow/FlowContext';
 export {default as FlowProvider} from './contexts/Flow/FlowProvider';
 export {default as useFlow} from './contexts/Flow/useFlow';
-export {default as useFlowOptional} from './contexts/Flow/useFlowOptional';
 
 export type {FlowStep, FlowMessage, FlowContextValue} from './contexts/Flow/FlowContext';
 

From 327aad4b30147c6d365837d2c4c7ddbe4ff5052f Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Fri, 13 Jun 2025 17:48:51 +0530
Subject: [PATCH 084/131] chore(react): Remove useSignInForm hook to streamline
 authentication logic

---
 packages/react/src/hooks/useSignInForm.ts | 560 ----------------------
 1 file changed, 560 deletions(-)
 delete mode 100644 packages/react/src/hooks/useSignInForm.ts

diff --git a/packages/react/src/hooks/useSignInForm.ts b/packages/react/src/hooks/useSignInForm.ts
deleted file mode 100644
index a6e882770..000000000
--- a/packages/react/src/hooks/useSignInForm.ts
+++ /dev/null
@@ -1,560 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import {useState, useCallback, useMemo} from 'react';
-import {
-  ApplicationNativeAuthenticationAuthenticator,
-  ApplicationNativeAuthenticationInitiateResponse,
-  ApplicationNativeAuthenticationHandleResponse,
-  ApplicationNativeAuthenticationFlowStatus,
-  ApplicationNativeAuthenticationAuthenticatorPromptType,
-  AsgardeoAPIError,
-} from '@asgardeo/browser';
-import useTranslation from './useTranslation';
-import {useForm, FormField} from './useForm';
-
-/**
- * Props for the useSignInForm hook.
- */
-export interface UseSignInFormProps {
-  /**
-   * Function to initialize authentication flow.
-   */
-  onInitialize: () => Promise<ApplicationNativeAuthenticationInitiateResponse>;
-
-  /**
-   * Function to handle authentication steps.
-   */
-  onAuthenticate: (payload: {
-    flowId: string;
-    selectedAuthenticator: {
-      authenticatorId: string;
-      params: Record<string, string>;
-    };
-  }) => Promise<ApplicationNativeAuthenticationHandleResponse>;
-
-  /**
-   * Callback function called when authentication is successful.
-   */
-  onSuccess?: (authData: Record<string, any>) => void;
-
-  /**
-   * Callback function called when authentication fails.
-   */
-  onError?: (error: Error) => void;
-
-  /**
-   * Callback function called when authentication flow status changes.
-   */
-  onFlowChange?: (
-    response: ApplicationNativeAuthenticationInitiateResponse | ApplicationNativeAuthenticationHandleResponse,
-  ) => void;
-}
-
-/**
- * Return type for the useSignInForm hook.
- */
-export interface UseSignInFormReturn {
-  // State
-  isLoading: boolean;
-  isInitialized: boolean;
-  currentFlow: ApplicationNativeAuthenticationInitiateResponse | null;
-  currentAuthenticator: ApplicationNativeAuthenticationAuthenticator | null;
-  error: string | null;
-  messages: Array<{type: string; message: string}>;
-
-  // Form state and methods (from useForm)
-  formValues: Record<string, string>;
-  touchedFields: Record<string, boolean>;
-  formErrors: Record<string, string>;
-  isFormValid: boolean;
-  setFormValue: (name: string, value: string) => void;
-  setFormTouched: (name: string, touched?: boolean) => void;
-  clearFormErrors: () => void;
-  validateFormField: (name: string) => string | null;
-  validateForm: () => {isValid: boolean; errors: Record<string, string>};
-
-  // Actions
-  initializeFlow: () => Promise<void>;
-  handleSubmit: (submittedValues: Record<string, string>) => Promise<void>;
-  handleAuthenticatorSelection: (
-    authenticator: ApplicationNativeAuthenticationAuthenticator,
-    formData?: Record<string, string>,
-  ) => Promise<void>;
-  handleInputChange: (param: string, value: string) => void;
-  markAllFieldsAsTouched: () => void;
-  setupFormFields: (authenticator: ApplicationNativeAuthenticationAuthenticator) => void;
-
-  // Utilities
-  hasMultipleOptions: () => boolean;
-  getAvailableAuthenticators: () => ApplicationNativeAuthenticationAuthenticator[];
-}
-
-/**
- * Custom hook for managing sign-in form state and logic.
- *
- * This hook encapsulates all the form-related functionality including:
- * - Form field values and touched state management using the generic useForm hook
- * - Authentication flow handling
- * - Error and message state management
- * - Field validation triggering
- *
- * @param props - Configuration for the sign-in form
- * @returns Object containing state and action handlers for the sign-in form
- *
- * @example
- * ```tsx
- * const {
- *   isLoading,
- *   currentAuthenticator,
- *   formValues,
- *   touchedFields,
- *   error,
- *   handleSubmit,
- *   handleInputChange,
- *   initializeFlow
- * } = useSignInForm({
- *   onInitialize: async () => await signIn(),
- *   onAuthenticate: async (payload) => await authenticate(payload),
- *   onSuccess: (authData) => console.log('Success:', authData),
- *   onError: (error) => console.error('Error:', error)
- * });
- * ```
- */
-export const useSignInForm = ({
-  onInitialize,
-  onAuthenticate,
-  onSuccess,
-  onError,
-  onFlowChange,
-}: UseSignInFormProps): UseSignInFormReturn => {
-  const {t} = useTranslation();
-
-  // Authentication state management
-  const [isLoading, setIsLoading] = useState(false);
-  const [isInitialized, setIsInitialized] = useState(false);
-  const [currentFlow, setCurrentFlow] = useState<ApplicationNativeAuthenticationInitiateResponse | null>(null);
-  const [currentAuthenticator, setCurrentAuthenticator] = useState<ApplicationNativeAuthenticationAuthenticator | null>(
-    null,
-  );
-  const [error, setError] = useState<string | null>(null);
-  const [messages, setMessages] = useState<Array<{type: string; message: string}>>([]);
-
-  // Create form fields configuration based on current authenticator
-  const formFields = useMemo((): FormField[] => {
-    if (!currentAuthenticator?.metadata?.params) {
-      return [];
-    }
-
-    return currentAuthenticator.metadata.params.map(param => ({
-      name: param.param,
-      required: currentAuthenticator.requiredParams.includes(param.param),
-      initialValue: '',
-      validator: (value: string) => {
-        // Add custom validation logic here if needed
-        if (currentAuthenticator.requiredParams.includes(param.param) && (!value || value.trim() === '')) {
-          return t('field.required');
-        }
-        return null;
-      },
-    }));
-  }, [currentAuthenticator, t]);
-
-  // Initialize form with dynamic fields
-  const form = useForm<Record<string, string>>({
-    initialValues: {},
-    fields: formFields,
-    validateOnBlur: true,
-    validateOnChange: false,
-    requiredMessage: t('field.required'),
-  });
-
-  const {
-    values: formValues,
-    touched: touchedFields,
-    errors: formErrors,
-    isValid: isFormValid,
-    setValue: setFormValue,
-    setTouched: setFormTouched,
-    clearErrors: clearFormErrors,
-    validateField: validateFormField,
-    validateForm,
-    touchAllFields,
-    reset: resetForm,
-  } = form;
-
-  /**
-   * Setup form fields based on the current authenticator.
-   */
-  const setupFormFields = useCallback(
-    (authenticator: ApplicationNativeAuthenticationAuthenticator) => {
-      const initialValues: Record<string, string> = {};
-      authenticator.metadata?.params?.forEach(param => {
-        initialValues[param.param] = '';
-      });
-
-      // Reset form with new values
-      resetForm();
-
-      // Set initial values for all fields
-      Object.keys(initialValues).forEach(key => {
-        setFormValue(key, initialValues[key]);
-      });
-    },
-    [resetForm, setFormValue],
-  );
-
-  /**
-   * Mark all fields as touched for validation purposes.
-   */
-  const markAllFieldsAsTouched = useCallback(() => {
-    touchAllFields();
-  }, [touchAllFields]);
-
-  /**
-   * Initialize the authentication flow.
-   */
-  const initializeFlow = useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const response = await onInitialize();
-
-      setCurrentFlow(response);
-      setIsInitialized(true);
-      onFlowChange?.(response);
-
-      if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
-        onSuccess?.((response as any).authData || {});
-        return;
-      }
-
-      if (response.nextStep?.authenticators?.length > 0) {
-        if (response.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' && response.nextStep.authenticators.length > 1) {
-          setCurrentAuthenticator(null);
-        } else {
-          const authenticator = response.nextStep.authenticators[0];
-          setCurrentAuthenticator(authenticator);
-          setupFormFields(authenticator);
-        }
-      }
-
-      if ('nextStep' in response && response.nextStep && 'messages' in response.nextStep) {
-        const stepMessages = (response.nextStep as any).messages || [];
-        setMessages(
-          stepMessages.map((msg: any) => ({
-            type: msg.type || 'INFO',
-            message: msg.message || '',
-          })),
-        );
-      }
-    } catch (err) {
-      const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.initializationFailed');
-      setError(errorMessage);
-      onError?.(err as Error);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [onInitialize, onFlowChange, onSuccess, onError, setupFormFields, t]);
-
-  /**
-   * Handle form submission.
-   */
-  const handleSubmit = useCallback(
-    async (submittedValues: Record<string, string>) => {
-      if (!currentFlow || !currentAuthenticator) {
-        return;
-      }
-
-      // Mark all fields as touched before validation
-      markAllFieldsAsTouched();
-
-      // Validate form before submission
-      const validation = validateForm();
-      if (!validation.isValid) {
-        return;
-      }
-
-      setIsLoading(true);
-      setError(null);
-      setMessages([]);
-
-      try {
-        const payload = {
-          flowId: currentFlow.flowId,
-          selectedAuthenticator: {
-            authenticatorId: currentAuthenticator.authenticatorId,
-            params: submittedValues,
-          },
-        };
-
-        const response = await onAuthenticate(payload);
-        onFlowChange?.(response);
-
-        if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
-          onSuccess?.(response.authData);
-          return;
-        }
-
-        if (
-          response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
-          response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
-        ) {
-          setError(t('errors.authenticationFailedDetail'));
-          return;
-        }
-
-        if ('flowId' in response && 'nextStep' in response) {
-          const nextStepResponse = response as any;
-          setCurrentFlow(nextStepResponse);
-
-          if (nextStepResponse.nextStep?.authenticators?.length > 0) {
-            if (
-              nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
-              nextStepResponse.nextStep.authenticators.length > 1
-            ) {
-              setCurrentAuthenticator(null);
-            } else {
-              const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
-              setCurrentAuthenticator(nextAuthenticator);
-              setupFormFields(nextAuthenticator);
-            }
-          }
-
-          if (nextStepResponse.nextStep?.messages) {
-            setMessages(
-              nextStepResponse.nextStep.messages.map((msg: any) => ({
-                type: msg.type || 'INFO',
-                message: msg.message || '',
-              })),
-            );
-          }
-        }
-      } catch (err) {
-        const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.authenticationFailed');
-        setError(errorMessage);
-        onError?.(err as Error);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [
-      currentFlow,
-      currentAuthenticator,
-      markAllFieldsAsTouched,
-      validateForm,
-      onAuthenticate,
-      onFlowChange,
-      onSuccess,
-      onError,
-      setupFormFields,
-      t,
-    ],
-  );
-
-  /**
-   * Handle authenticator selection for multi-option prompts.
-   */
-  const handleAuthenticatorSelection = useCallback(
-    async (authenticator: ApplicationNativeAuthenticationAuthenticator, formData?: Record<string, string>) => {
-      if (!currentFlow) {
-        return;
-      }
-
-      // Mark all fields as touched if we have form data (i.e., this is a submission)
-      if (formData) {
-        markAllFieldsAsTouched();
-      }
-
-      setIsLoading(true);
-      setError(null);
-      setMessages([]);
-
-      try {
-        if (
-          authenticator.metadata?.promptType ===
-          ApplicationNativeAuthenticationAuthenticatorPromptType.REDIRECTION_PROMPT
-        ) {
-          const payload = {
-            flowId: currentFlow.flowId,
-            selectedAuthenticator: {
-              authenticatorId: authenticator.authenticatorId,
-              params: {},
-            },
-          };
-
-          const response = await onAuthenticate(payload);
-          onFlowChange?.(response);
-
-          if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
-            onSuccess?.(response.authData);
-            return;
-          }
-        } else {
-          if (formData) {
-            // Validate form before submission
-            const validation = validateForm();
-            if (!validation.isValid) {
-              return;
-            }
-
-            const payload = {
-              flowId: currentFlow.flowId,
-              selectedAuthenticator: {
-                authenticatorId: authenticator.authenticatorId,
-                params: formData,
-              },
-            };
-
-            const response = await onAuthenticate(payload);
-            onFlowChange?.(response);
-
-            if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
-              onSuccess?.(response.authData);
-              return;
-            }
-
-            if (
-              response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
-              response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
-            ) {
-              setError('Authentication failed. Please check your credentials and try again.');
-              return;
-            }
-
-            if ('flowId' in response && 'nextStep' in response) {
-              const nextStepResponse = response as any;
-              setCurrentFlow(nextStepResponse);
-
-              if (nextStepResponse.nextStep?.authenticators?.length > 0) {
-                if (
-                  nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
-                  nextStepResponse.nextStep.authenticators.length > 1
-                ) {
-                  setCurrentAuthenticator(null);
-                } else {
-                  const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
-                  setCurrentAuthenticator(nextAuthenticator);
-                  setupFormFields(nextAuthenticator);
-                }
-              }
-
-              if (nextStepResponse.nextStep?.messages) {
-                setMessages(
-                  nextStepResponse.nextStep.messages.map((msg: any) => ({
-                    type: msg.type || 'INFO',
-                    message: msg.message || '',
-                  })),
-                );
-              }
-            }
-          } else {
-            setCurrentAuthenticator(authenticator);
-            setupFormFields(authenticator);
-          }
-        }
-      } catch (err) {
-        const errorMessage = err instanceof AsgardeoAPIError ? err.message : 'Authenticator selection failed';
-        setError(errorMessage);
-        onError?.(err as Error);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [
-      currentFlow,
-      markAllFieldsAsTouched,
-      validateForm,
-      onAuthenticate,
-      onFlowChange,
-      onSuccess,
-      onError,
-      setupFormFields,
-    ],
-  );
-
-  /**
-   * Handle input value changes.
-   */
-  const handleInputChange = useCallback(
-    (param: string, value: string) => {
-      setFormValue(param, value);
-      setFormTouched(param, true);
-    },
-    [setFormValue, setFormTouched],
-  );
-
-  /**
-   * Check if current flow has multiple authenticator options.
-   */
-  const hasMultipleOptions = useCallback((): boolean => {
-    return (
-      currentFlow &&
-      'nextStep' in currentFlow &&
-      currentFlow.nextStep?.stepType === 'MULTI_OPTIONS_PROMPT' &&
-      currentFlow.nextStep?.authenticators &&
-      currentFlow.nextStep.authenticators.length > 1
-    );
-  }, [currentFlow]);
-
-  /**
-   * Get available authenticators for selection.
-   */
-  const getAvailableAuthenticators = useCallback((): ApplicationNativeAuthenticationAuthenticator[] => {
-    if (!currentFlow || !('nextStep' in currentFlow) || !currentFlow.nextStep?.authenticators) {
-      return [];
-    }
-    return currentFlow.nextStep.authenticators;
-  }, [currentFlow]);
-
-  return {
-    // State
-    isLoading,
-    isInitialized,
-    currentFlow,
-    currentAuthenticator,
-    error,
-    messages,
-
-    // Form state and methods (from useForm)
-    formValues,
-    touchedFields,
-    formErrors,
-    isFormValid,
-    setFormValue,
-    setFormTouched,
-    clearFormErrors,
-    validateFormField,
-    validateForm,
-
-    // Actions
-    initializeFlow,
-    handleSubmit,
-    handleAuthenticatorSelection,
-    handleInputChange,
-    markAllFieldsAsTouched,
-    setupFormFields,
-
-    // Utilities
-    hasMultipleOptions,
-    getAvailableAuthenticators,
-  };
-};
-
-export default useSignInForm;

From 6172843df842c031d6c5c084d562159191cf486b Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Fri, 13 Jun 2025 17:53:07 +0530
Subject: [PATCH 085/131] fix(react): Enhance authentication flow to handle
 authenticators with and without user input

---
 .../presentation/SignIn/BaseSignIn.tsx        | 62 ++++++++++++++++++-
 1 file changed, 60 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index 4c3eb641c..db6082d97 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -504,8 +504,66 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
               }
             }
           } else {
-            setCurrentAuthenticator(authenticator);
-            setupFormFields(authenticator);
+            // Check if the authenticator requires user input
+            const hasParams = authenticator.metadata?.params && authenticator.metadata.params.length > 0;
+
+            if (!hasParams) {
+              // If no parameters are required, directly authenticate
+              const payload = {
+                flowId: currentFlow.flowId,
+                selectedAuthenticator: {
+                  authenticatorId: authenticator.authenticatorId,
+                  params: {},
+                },
+              };
+
+              const response = await onAuthenticate(payload);
+              onFlowChange?.(response);
+
+              if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+                onSuccess?.(response.authData);
+                return;
+              }
+
+              if (
+                response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
+                response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
+              ) {
+                setError('Authentication failed. Please try again.');
+                return;
+              }
+
+              if ('flowId' in response && 'nextStep' in response) {
+                const nextStepResponse = response as any;
+                setCurrentFlow(nextStepResponse);
+
+                if (nextStepResponse.nextStep?.authenticators?.length > 0) {
+                  if (
+                    nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
+                    nextStepResponse.nextStep.authenticators.length > 1
+                  ) {
+                    setCurrentAuthenticator(null);
+                  } else {
+                    const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
+                    setCurrentAuthenticator(nextAuthenticator);
+                    setupFormFields(nextAuthenticator);
+                  }
+                }
+
+                if (nextStepResponse.nextStep?.messages) {
+                  setMessages(
+                    nextStepResponse.nextStep.messages.map((msg: any) => ({
+                      type: msg.type || 'INFO',
+                      message: msg.message || '',
+                    })),
+                  );
+                }
+              }
+            } else {
+              // If parameters are required, show the form
+              setCurrentAuthenticator(authenticator);
+              setupFormFields(authenticator);
+            }
           }
         }
       } catch (err) {

From 1dc2f96365e99c34f7f8954d905c36d0b9b788af Mon Sep 17 00:00:00 2001
From: Brion Mario <info@brionmario.com>
Date: Fri, 13 Jun 2025 18:30:28 +0530
Subject: [PATCH 086/131] fix(react): Refactor authentication handling in
 BaseSignIn component for improved clarity and functionality

---
 .../presentation/SignIn/BaseSignIn.tsx        | 359 +++++++++---------
 1 file changed, 169 insertions(+), 190 deletions(-)

diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index db6082d97..f90e26fec 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -263,9 +263,9 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
   /**
    * Mark all fields as touched for validation purposes.
    */
-  const markAllFieldsAsTouched = useCallback(() => {
+  const markAllFieldsAsTouched = () => {
     touchAllFields();
-  }, [touchAllFields]);
+  };
 
   /**
    * Initialize the authentication flow.
@@ -317,30 +317,112 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
   /**
    * Handle form submission.
    */
-  const handleSubmit = useCallback(
-    async (submittedValues: Record<string, string>) => {
-      if (!currentFlow || !currentAuthenticator) {
+  const handleSubmit = async (submittedValues: Record<string, string>) => {
+    if (!currentFlow || !currentAuthenticator) {
+      return;
+    }
+
+    // Mark all fields as touched before validation
+    touchAllFields();
+
+    const validation = validateForm();
+    if (!validation.isValid) {
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    setMessages([]);
+
+    try {
+      const payload = {
+        flowId: currentFlow.flowId,
+        selectedAuthenticator: {
+          authenticatorId: currentAuthenticator.authenticatorId,
+          params: submittedValues,
+        },
+      };
+
+      const response = await onAuthenticate(payload);
+      onFlowChange?.(response);
+
+      if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+        onSuccess?.(response.authData);
         return;
       }
 
-      // Mark all fields as touched before validation
-      markAllFieldsAsTouched();
-
-      const validation = validateForm();
-      if (!validation.isValid) {
+      if (
+        response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
+        response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
+      ) {
+        setError(t('errors.authenticationFailedDetail'));
         return;
       }
 
-      setIsLoading(true);
-      setError(null);
-      setMessages([]);
+      if ('flowId' in response && 'nextStep' in response) {
+        const nextStepResponse = response as any;
+        setCurrentFlow(nextStepResponse);
+
+        if (nextStepResponse.nextStep?.authenticators?.length > 0) {
+          if (
+            nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
+            nextStepResponse.nextStep.authenticators.length > 1
+          ) {
+            setCurrentAuthenticator(null);
+          } else {
+            const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
+            setCurrentAuthenticator(nextAuthenticator);
+            setupFormFields(nextAuthenticator);
+          }
+        }
+
+        if (nextStepResponse.nextStep?.messages) {
+          setMessages(
+            nextStepResponse.nextStep.messages.map((msg: any) => ({
+              type: msg.type || 'INFO',
+              message: msg.message || '',
+            })),
+          );
+        }
+      }
+    } catch (err) {
+      const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.authenticationFailed');
+      setError(errorMessage);
+      onError?.(err as Error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  /**
+   * Handle authenticator selection for multi-option prompts.
+   */
+  const handleAuthenticatorSelection = async (
+    authenticator: ApplicationNativeAuthenticationAuthenticator,
+    formData?: Record<string, string>,
+  ) => {
+    if (!currentFlow) {
+      return;
+    }
 
-      try {
+    // Mark all fields as touched if we have form data (i.e., this is a submission)
+    if (formData) {
+      touchAllFields();
+    }
+
+    setIsLoading(true);
+    setError(null);
+    setMessages([]);
+
+    try {
+      if (
+        authenticator.metadata?.promptType === ApplicationNativeAuthenticationAuthenticatorPromptType.REDIRECTION_PROMPT
+      ) {
         const payload = {
           flowId: currentFlow.flowId,
           selectedAuthenticator: {
-            authenticatorId: currentAuthenticator.authenticatorId,
-            params: submittedValues,
+            authenticatorId: authenticator.authenticatorId,
+            params: {},
           },
         };
 
@@ -351,91 +433,18 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
           onSuccess?.(response.authData);
           return;
         }
-
-        if (
-          response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
-          response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
-        ) {
-          setError(t('errors.authenticationFailedDetail'));
-          return;
-        }
-
-        if ('flowId' in response && 'nextStep' in response) {
-          const nextStepResponse = response as any;
-          setCurrentFlow(nextStepResponse);
-
-          if (nextStepResponse.nextStep?.authenticators?.length > 0) {
-            if (
-              nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
-              nextStepResponse.nextStep.authenticators.length > 1
-            ) {
-              setCurrentAuthenticator(null);
-            } else {
-              const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
-              setCurrentAuthenticator(nextAuthenticator);
-              setupFormFields(nextAuthenticator);
-            }
+      } else {
+        if (formData) {
+          const validation = validateForm();
+          if (!validation.isValid) {
+            return;
           }
 
-          if (nextStepResponse.nextStep?.messages) {
-            setMessages(
-              nextStepResponse.nextStep.messages.map((msg: any) => ({
-                type: msg.type || 'INFO',
-                message: msg.message || '',
-              })),
-            );
-          }
-        }
-      } catch (err) {
-        const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.authenticationFailed');
-        setError(errorMessage);
-        onError?.(err as Error);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [
-      currentFlow,
-      currentAuthenticator,
-      markAllFieldsAsTouched,
-      validateForm,
-      onAuthenticate,
-      onFlowChange,
-      onSuccess,
-      onError,
-      setupFormFields,
-      t,
-    ],
-  );
-
-  /**
-   * Handle authenticator selection for multi-option prompts.
-   */
-  const handleAuthenticatorSelection = useCallback(
-    async (authenticator: ApplicationNativeAuthenticationAuthenticator, formData?: Record<string, string>) => {
-      if (!currentFlow) {
-        return;
-      }
-
-      // Mark all fields as touched if we have form data (i.e., this is a submission)
-      if (formData) {
-        markAllFieldsAsTouched();
-      }
-
-      setIsLoading(true);
-      setError(null);
-      setMessages([]);
-
-      try {
-        if (
-          authenticator.metadata?.promptType ===
-          ApplicationNativeAuthenticationAuthenticatorPromptType.REDIRECTION_PROMPT
-        ) {
           const payload = {
             flowId: currentFlow.flowId,
             selectedAuthenticator: {
               authenticatorId: authenticator.authenticatorId,
-              params: {},
+              params: formData,
             },
           };
 
@@ -446,18 +455,52 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
             onSuccess?.(response.authData);
             return;
           }
-        } else {
-          if (formData) {
-            const validation = validateForm();
-            if (!validation.isValid) {
-              return;
+
+          if (
+            response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
+            response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
+          ) {
+            setError('Authentication failed. Please check your credentials and try again.');
+            return;
+          }
+
+          if ('flowId' in response && 'nextStep' in response) {
+            const nextStepResponse = response as any;
+            setCurrentFlow(nextStepResponse);
+
+            if (nextStepResponse.nextStep?.authenticators?.length > 0) {
+              if (
+                nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
+                nextStepResponse.nextStep.authenticators.length > 1
+              ) {
+                setCurrentAuthenticator(null);
+              } else {
+                const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
+                setCurrentAuthenticator(nextAuthenticator);
+                setupFormFields(nextAuthenticator);
+              }
+            }
+
+            if (nextStepResponse.nextStep?.messages) {
+              setMessages(
+                nextStepResponse.nextStep.messages.map((msg: any) => ({
+                  type: msg.type || 'INFO',
+                  message: msg.message || '',
+                })),
+              );
             }
+          }
+        } else {
+          // Check if the authenticator requires user input
+          const hasParams = authenticator.metadata?.params && authenticator.metadata.params.length > 0;
 
+          if (!hasParams) {
+            // If no parameters are required, directly authenticate
             const payload = {
               flowId: currentFlow.flowId,
               selectedAuthenticator: {
                 authenticatorId: authenticator.authenticatorId,
-                params: formData,
+                params: {},
               },
             };
 
@@ -473,7 +516,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
               response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
               response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
             ) {
-              setError('Authentication failed. Please check your credentials and try again.');
+              setError('Authentication failed. Please try again.');
               return;
             }
 
@@ -504,98 +547,28 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
               }
             }
           } else {
-            // Check if the authenticator requires user input
-            const hasParams = authenticator.metadata?.params && authenticator.metadata.params.length > 0;
-
-            if (!hasParams) {
-              // If no parameters are required, directly authenticate
-              const payload = {
-                flowId: currentFlow.flowId,
-                selectedAuthenticator: {
-                  authenticatorId: authenticator.authenticatorId,
-                  params: {},
-                },
-              };
-
-              const response = await onAuthenticate(payload);
-              onFlowChange?.(response);
-
-              if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
-                onSuccess?.(response.authData);
-                return;
-              }
-
-              if (
-                response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
-                response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
-              ) {
-                setError('Authentication failed. Please try again.');
-                return;
-              }
-
-              if ('flowId' in response && 'nextStep' in response) {
-                const nextStepResponse = response as any;
-                setCurrentFlow(nextStepResponse);
-
-                if (nextStepResponse.nextStep?.authenticators?.length > 0) {
-                  if (
-                    nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
-                    nextStepResponse.nextStep.authenticators.length > 1
-                  ) {
-                    setCurrentAuthenticator(null);
-                  } else {
-                    const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
-                    setCurrentAuthenticator(nextAuthenticator);
-                    setupFormFields(nextAuthenticator);
-                  }
-                }
-
-                if (nextStepResponse.nextStep?.messages) {
-                  setMessages(
-                    nextStepResponse.nextStep.messages.map((msg: any) => ({
-                      type: msg.type || 'INFO',
-                      message: msg.message || '',
-                    })),
-                  );
-                }
-              }
-            } else {
-              // If parameters are required, show the form
-              setCurrentAuthenticator(authenticator);
-              setupFormFields(authenticator);
-            }
+            // If parameters are required, show the form
+            setCurrentAuthenticator(authenticator);
+            setupFormFields(authenticator);
           }
         }
-      } catch (err) {
-        const errorMessage = err instanceof AsgardeoAPIError ? err.message : 'Authenticator selection failed';
-        setError(errorMessage);
-        onError?.(err as Error);
-      } finally {
-        setIsLoading(false);
       }
-    },
-    [
-      currentFlow,
-      markAllFieldsAsTouched,
-      validateForm,
-      onAuthenticate,
-      onFlowChange,
-      onSuccess,
-      onError,
-      setupFormFields,
-    ],
-  );
+    } catch (err) {
+      const errorMessage = err instanceof AsgardeoAPIError ? err.message : 'Authenticator selection failed';
+      setError(errorMessage);
+      onError?.(err as Error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   /**
    * Handle input value changes.
    */
-  const handleInputChange = useCallback(
-    (param: string, value: string) => {
-      setFormValue(param, value);
-      setFormTouched(param, true);
-    },
-    [setFormValue, setFormTouched],
-  );
+  const handleInputChange = (param: string, value: string) => {
+    setFormValue(param, value);
+    setFormTouched(param, true);
+  };
 
   /**
    * Check if current flow has multiple authenticator options.
@@ -757,7 +730,9 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
                     touchedFields,
                     isLoading,
                     handleInputChange,
-                    handleAuthenticatorSelection,
+                    (auth, formData) => {
+                      return handleAuthenticatorSelection(auth, formData);
+                    },
                     {
                       inputClassName: inputClasses,
                       buttonClassName: buttonClasses,
@@ -782,7 +757,9 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
                   touchedFields,
                   isLoading,
                   handleInputChange,
-                  handleAuthenticatorSelection,
+                  (auth, formData) => {
+                    return handleAuthenticatorSelection(auth, formData);
+                  },
                   {
                     inputClassName: inputClasses,
                     buttonClassName: buttonClasses,
@@ -879,7 +856,9 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
             touchedFields,
             isLoading,
             handleInputChange,
-            (authenticator, formData) => handleSubmit(formData || formValues),
+            (authenticator, formData) => {
+              return handleSubmit(formData || formValues);
+            },
             {
               inputClassName: inputClasses,
               buttonClassName: buttonClasses,

From 1c3d1c19d2a822a4cf86adc418ca6e620244e4ae Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Sat, 14 Jun 2025 15:43:17 +0530
Subject: [PATCH 087/131] fix(react): Update prompt type enums and implement
 redirection handling in BaseSignIn component

---
 .../application-native-authentication.ts      |  6 +--
 .../presentation/SignIn/BaseSignIn.tsx        | 51 ++++++++++++++++++-
 2 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/packages/javascript/src/models/application-native-authentication.ts b/packages/javascript/src/models/application-native-authentication.ts
index 04a9afbcc..425913305 100644
--- a/packages/javascript/src/models/application-native-authentication.ts
+++ b/packages/javascript/src/models/application-native-authentication.ts
@@ -81,13 +81,13 @@ export enum ApplicationNativeAuthenticationAuthenticatorPromptType {
   /**
    * Prompt for user input, typically for username/password or similar credentials.
    */
-  USER_PROMPT,
+  UserPrompt = 'USER_PROMPT',
   /**
    * Prompt for internal system use, such as API keys or tokens.
    */
-  INTERNAL_PROMPT,
+  InternalPrompt = 'INTERNAL_PROMPT',
   /**
    * Prompt for redirection to another page or service.
    */
-  REDIRECTION_PROMPT,
+  RedirectionPrompt = 'REDIRECTION_PROMPT',
 }
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index f90e26fec..37ec3b7ab 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -314,6 +314,33 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
     }
   }, [onInitialize, onFlowChange, onSuccess, onError, setupFormFields, t]);
 
+  /**
+   * Check if the response contains a redirection URL and perform the redirect if necessary.
+   * @param response - The authentication response
+   * @returns true if a redirect was performed, false otherwise
+   */
+  const handleRedirectionIfNeeded = (response: ApplicationNativeAuthenticationHandleResponse): boolean => {
+    if (
+      'nextStep' in response &&
+      response.nextStep &&
+      (response.nextStep as any).stepType === ApplicationNativeAuthenticationStepType.AuthenticatorPrompt &&
+      (response.nextStep as any).authenticators &&
+      (response.nextStep as any).authenticators.length === 1
+    ) {
+      const responseAuthenticator = (response.nextStep as any).authenticators[0];
+      if (
+        responseAuthenticator.metadata?.promptType ===
+          ApplicationNativeAuthenticationAuthenticatorPromptType.RedirectionPrompt &&
+        (responseAuthenticator.metadata as any)?.additionalData?.redirectUrl
+      ) {
+        // Perform the redirect immediately
+        window.location.href = (responseAuthenticator.metadata as any).additionalData.redirectUrl;
+        return true;
+      }
+    }
+    return false;
+  };
+
   /**
    * Handle form submission.
    */
@@ -359,6 +386,11 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
         return;
       }
 
+      // Check if the response contains a redirection URL and redirect if needed
+      if (handleRedirectionIfNeeded(response)) {
+        return;
+      }
+
       if ('flowId' in response && 'nextStep' in response) {
         const nextStepResponse = response as any;
         setCurrentFlow(nextStepResponse);
@@ -416,7 +448,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
     try {
       if (
-        authenticator.metadata?.promptType === ApplicationNativeAuthenticationAuthenticatorPromptType.REDIRECTION_PROMPT
+        authenticator.metadata?.promptType === ApplicationNativeAuthenticationAuthenticatorPromptType.RedirectionPrompt
       ) {
         const payload = {
           flowId: currentFlow.flowId,
@@ -433,6 +465,11 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
           onSuccess?.(response.authData);
           return;
         }
+
+        // Check if the response contains a redirection URL and redirect if needed
+        if (handleRedirectionIfNeeded(response)) {
+          return;
+        }
       } else {
         if (formData) {
           const validation = validateForm();
@@ -464,6 +501,11 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
             return;
           }
 
+          // Check if the response contains a redirection URL and redirect if needed
+          if (handleRedirectionIfNeeded(response)) {
+            return;
+          }
+
           if ('flowId' in response && 'nextStep' in response) {
             const nextStepResponse = response as any;
             setCurrentFlow(nextStepResponse);
@@ -520,6 +562,11 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
               return;
             }
 
+            // Check if the response contains a redirection URL and redirect if needed
+            if (handleRedirectionIfNeeded(response)) {
+              return;
+            }
+
             if ('flowId' in response && 'nextStep' in response) {
               const nextStepResponse = response as any;
               setCurrentFlow(nextStepResponse);
@@ -649,7 +696,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
     const userPromptAuthenticators = availableAuthenticators.filter(
       auth =>
-        auth.metadata?.promptType === ApplicationNativeAuthenticationAuthenticatorPromptType.USER_PROMPT ||
+        auth.metadata?.promptType === ApplicationNativeAuthenticationAuthenticatorPromptType.UserPrompt ||
         // Fallback: LOCAL authenticators with params are typically user prompts
         (auth.idp === 'LOCAL' && auth.metadata?.params && auth.metadata.params.length > 0),
     );

From 374a43579c7026d2d152015822f55a21632085f3 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Sun, 15 Jun 2025 08:00:12 +0530
Subject: [PATCH 088/131] chore: replace BasicUserInfo with User across the
 codebase

- Updated all instances of BasicUserInfo to User in main-thread-client, web-worker-client, authentication-helper, and other related files.
- Modified return types and function signatures to reflect the new User interface.
- Removed the BasicUserInfo interface definition and its references.
- Introduced a new UserSession interface to encapsulate session-related data.
- Ensured compatibility with existing functionality while enhancing type safety and clarity.
---
 packages/browser/src/__legacy__/client.ts     |  48 ++++-----
 .../__legacy__/clients/main-thread-client.ts  |  18 ++--
 .../__legacy__/clients/web-worker-client.ts   |  28 ++---
 .../helpers/authentication-helper.ts          |  24 ++---
 .../browser/src/__legacy__/models/client.ts   |  22 ++--
 .../src/__legacy__/models/web-worker.ts       |  10 +-
 .../src/__legacy__/worker/worker-core.ts      |  10 +-
 .../src/__legacy__/worker/worker-receiver.ts  |   4 +-
 packages/express/src/__legacy__/client.ts     |   4 +-
 packages/javascript/src/__legacy__/client.ts  |  35 +++---
 .../helpers/authentication-helper.ts          |   7 +-
 .../javascript/src/__legacy__/models/index.ts |   1 -
 .../javascript/src/__legacy__/models/user.ts  |  87 ---------------
 packages/javascript/src/models/session.ts     |  21 ++--
 packages/javascript/src/models/user.ts        | 102 ++----------------
 packages/node/src/__legacy__/client.ts        |  12 +--
 .../src/__legacy__/core/authentication.ts     |   4 +-
 packages/react/src/__temp__/api.ts            |  36 +++----
 packages/react/src/__temp__/models.ts         |  22 ++--
 19 files changed, 145 insertions(+), 350 deletions(-)
 delete mode 100644 packages/javascript/src/__legacy__/models/user.ts

diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
index 0145bebf8..ec829f854 100755
--- a/packages/browser/src/__legacy__/client.ts
+++ b/packages/browser/src/__legacy__/client.ts
@@ -20,13 +20,13 @@ import {
   AsgardeoAuthClient,
   AsgardeoAuthException,
   AuthClientConfig,
-  BasicUserInfo,
   IsomorphicCrypto,
   CustomGrantConfig,
   StorageManager,
   IdTokenPayload,
   FetchResponse,
   OIDCEndpoints,
+  User,
 } from '@asgardeo/javascript';
 import WorkerFile from '../worker';
 import {MainThreadClient, WebWorkerClient} from './clients';
@@ -75,7 +75,7 @@ export class AsgardeoSPAClient {
   protected _worker: new () => Worker = WorkerFile;
   protected _initialized: boolean = false;
   protected _startedInitialize: boolean = false;
-  protected _onSignInCallback: (response: BasicUserInfo) => void = () => null;
+  protected _onSignInCallback: (response: User) => void = () => null;
   protected _onSignOutCallback: () => void = () => null;
   protected _onSignOutFailedCallback: (error: SignOutError) => void = () => null;
   protected _onEndUserSession: (response: any) => void = () => null;
@@ -327,7 +327,7 @@ export class AsgardeoSPAClient {
   /**
    * This method returns a Promise that resolves with the basic user information obtained from the ID token.
    *
-   * @return {Promise<BasicUserInfo>} - A promise that resolves with the user information.
+   * @return {Promise<User>} - A promise that resolves with the user information.
    *
    * @example
    * ```
@@ -344,7 +344,7 @@ export class AsgardeoSPAClient {
    *
    * @preserve
    */
-  public async getUser(): Promise<BasicUserInfo | undefined> {
+  public async getUser(): Promise<User | undefined> {
     await this._validateMethod();
 
     return this._client?.getUser();
@@ -373,7 +373,7 @@ export class AsgardeoSPAClient {
    * @param {string} sessionState - The session state. (Optional)
    * @param {string} state - The state. (Optional)
    *
-   * @return {Promise<BasicUserInfo>} - A promise that resolves with the user information.
+   * @return {Promise<User>} - A promise that resolves with the user information.
    *
    * @example
    * ```
@@ -394,7 +394,7 @@ export class AsgardeoSPAClient {
     tokenRequestConfig?: {
       params: Record<string, unknown>;
     },
-  ): Promise<BasicUserInfo | undefined> {
+  ): Promise<User | undefined> {
     await this.isInitialized();
 
     // Discontinues the execution of this method if `config.callOnlyOnRedirect` is true and the `signIn` method
@@ -407,11 +407,9 @@ export class AsgardeoSPAClient {
 
     return this._client
       ?.signIn(config, authorizationCode, sessionState, state, tokenRequestConfig)
-      .then((response: BasicUserInfo) => {
+      .then((response: User) => {
         if (this._onSignInCallback) {
-          if (response.allowedScopes || response.displayName || response.email || response.username) {
-            this._onSignInCallback(response);
-          }
+          this._onSignInCallback(response);
         }
 
         return response;
@@ -426,7 +424,7 @@ export class AsgardeoSPAClient {
    * If this method is to be called on page load and the `signIn` method is also to be called on page load,
    * then it is advisable to call this method after the `signIn` call.
    *
-   * @return {Promise<BasicUserInfo | boolean>} - A Promise that resolves with the user information after signing in
+   * @return {Promise<User | boolean>} - A Promise that resolves with the user information after signing in
    * or with `false` if the user is not signed in.
    *
    * @example
@@ -437,7 +435,7 @@ export class AsgardeoSPAClient {
   public async trySignInSilently(
     additionalParams?: Record<string, string | boolean>,
     tokenRequestConfig?: {params: Record<string, unknown>},
-  ): Promise<BasicUserInfo | boolean | undefined> {
+  ): Promise<User | boolean | undefined> {
     await this.isInitialized();
 
     // checks if the `signIn` method has been called.
@@ -445,23 +443,13 @@ export class AsgardeoSPAClient {
       return undefined;
     }
 
-    return this._client
-      ?.trySignInSilently(additionalParams, tokenRequestConfig)
-      .then((response: BasicUserInfo | boolean) => {
-        if (this._onSignInCallback && response) {
-          const basicUserInfo = response as BasicUserInfo;
-          if (
-            basicUserInfo.allowedScopes ||
-            basicUserInfo.displayName ||
-            basicUserInfo.email ||
-            basicUserInfo.username
-          ) {
-            this._onSignInCallback(basicUserInfo);
-          }
-        }
+    return this._client?.trySignInSilently(additionalParams, tokenRequestConfig).then((response: User | boolean) => {
+      if (this._onSignInCallback && response) {
+        this._onSignInCallback(response as User);
+      }
 
-        return response;
-      });
+      return response;
+    });
   }
 
   /**
@@ -619,7 +607,7 @@ export class AsgardeoSPAClient {
    *
    * @preserve
    */
-  public async exchangeToken(config: CustomGrantConfig): Promise<FetchResponse<any> | BasicUserInfo | undefined> {
+  public async exchangeToken(config: CustomGrantConfig): Promise<FetchResponse<any> | User | undefined> {
     if (config.signInRequired) {
       await this._validateMethod();
     } else {
@@ -968,7 +956,7 @@ export class AsgardeoSPAClient {
    *
    * @preserve
    */
-  public async refreshAccessToken(): Promise<BasicUserInfo | undefined> {
+  public async refreshAccessToken(): Promise<User | undefined> {
     await this._validateMethod(false);
 
     return this._client?.refreshAccessToken();
diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index 98a39a7f2..a565ded12 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -19,7 +19,7 @@
 import {
   AsgardeoAuthClient,
   AuthClientConfig,
-  BasicUserInfo,
+  User,
   IsomorphicCrypto,
   StorageManager,
   IdTokenPayload,
@@ -157,7 +157,7 @@ export const MainThreadClient = async (
     _authenticationHelper.initializeSessionManger(
       config,
       oidcEndpoints,
-      async () => (await _authenticationClient.getUser()).sessionState,
+      async () => (await _authenticationClient.getUserSession()).sessionState,
       async (params?: ExtendedAuthorizeRequestUrlParams): Promise<string> => _authenticationClient.getSignInUrl(params),
       _sessionManagementHelper,
     );
@@ -185,7 +185,7 @@ export const MainThreadClient = async (
     tokenRequestConfig?: {
       params: Record<string, unknown>;
     },
-  ): Promise<BasicUserInfo> => {
+  ): Promise<User> => {
     const basicUserInfo = await _authenticationHelper.handleSignIn(shouldStopAuthn, checkSession, undefined);
 
     if (basicUserInfo) {
@@ -279,11 +279,11 @@ export const MainThreadClient = async (
     }
   };
 
-  const exchangeToken = async (config: SPACustomGrantConfig): Promise<BasicUserInfo | FetchResponse> => {
+  const exchangeToken = async (config: SPACustomGrantConfig): Promise<User | FetchResponse> => {
     return await _authenticationHelper.exchangeToken(config, enableRetrievingSignOutURLFromSession);
   };
 
-  const refreshAccessToken = async (): Promise<BasicUserInfo> => {
+  const refreshAccessToken = async (): Promise<User> => {
     try {
       return await _authenticationHelper.refreshAccessToken(enableRetrievingSignOutURLFromSession);
     } catch (error) {
@@ -312,7 +312,7 @@ export const MainThreadClient = async (
     tokenRequestConfig?: {
       params: Record<string, unknown>;
     },
-  ): Promise<BasicUserInfo> => {
+  ): Promise<User> => {
     return await _authenticationHelper.requestAccessToken(
       resolvedAuthorizationCode,
       resolvedSessionState,
@@ -352,13 +352,13 @@ export const MainThreadClient = async (
    * This method checks if there is an active user session in the server by sending a prompt none request.
    * If the user is signed in, this method sends a token request. Returns false otherwise.
    *
-   * @return {Promise<BasicUserInfo|boolean} Returns a Promise that resolves with the BasicUserInfo
+   * @return {Promise<User|boolean} Returns a Promise that resolves with the User
    * if the user is signed in or with `false` if there is no active user session in the server.
    */
   const trySignInSilently = async (
     additionalParams?: Record<string, string | boolean>,
     tokenRequestConfig?: {params: Record<string, unknown>},
-  ): Promise<BasicUserInfo | boolean> => {
+  ): Promise<User | boolean> => {
     return await _authenticationHelper.trySignInSilently(
       constructSilentSignInUrl,
       requestAccessToken,
@@ -368,7 +368,7 @@ export const MainThreadClient = async (
     );
   };
 
-  const getUser = async (): Promise<BasicUserInfo> => {
+  const getUser = async (): Promise<User> => {
     return _authenticationHelper.getUser();
   };
 
diff --git a/packages/browser/src/__legacy__/clients/web-worker-client.ts b/packages/browser/src/__legacy__/clients/web-worker-client.ts
index 880581ffc..b12a0cc39 100755
--- a/packages/browser/src/__legacy__/clients/web-worker-client.ts
+++ b/packages/browser/src/__legacy__/clients/web-worker-client.ts
@@ -20,7 +20,7 @@ import {
   AsgardeoAuthClient,
   AsgardeoAuthException,
   AuthClientConfig,
-  BasicUserInfo,
+  User,
   IsomorphicCrypto,
   CustomGrantConfig,
   IdTokenPayload,
@@ -188,13 +188,13 @@ export const WebWorkerClient = async (
    * @returns {Promise<HttpResponse|boolean>} A promise that resolves with a boolean value or the request
    * response if the the `returnResponse` attribute in the `requestParams` object is set to `true`.
    */
-  const exchangeToken = (requestParams: SPACustomGrantConfig): Promise<FetchResponse | BasicUserInfo> => {
+  const exchangeToken = (requestParams: SPACustomGrantConfig): Promise<FetchResponse | User> => {
     const message: Message<CustomGrantConfig> = {
       data: requestParams,
       type: REQUEST_CUSTOM_GRANT,
     };
 
-    return communicate<CustomGrantConfig, FetchResponse | BasicUserInfo>(message)
+    return communicate<CustomGrantConfig, FetchResponse | User>(message)
       .then(response => {
         if (requestParams.preventSignOutURLUpdate) {
           _getSignOutURLFromSessionStorage = true;
@@ -385,7 +385,7 @@ export const WebWorkerClient = async (
     _authenticationHelper.initializeSessionManger(
       config,
       oidcEndpoints,
-      async () => (await getUser()).sessionState,
+      async () => (await _authenticationClient.getUserSession()).sessionState,
       async (params?: ExtendedAuthorizeRequestUrlParams): Promise<string> =>
         (await getSignInUrl(params)).authorizationURL,
       _sessionManagementHelper,
@@ -427,13 +427,13 @@ export const WebWorkerClient = async (
    * This method checks if there is an active user session in the server by sending a prompt none request.
    * If the user is signed in, this method sends a token request. Returns false otherwise.
    *
-   * @return {Promise<BasicUserInfo|boolean} Returns a Promise that resolves with the BasicUserInfo
+   * @return {Promise<User|boolean} Returns a Promise that resolves with the User
    * if the user is signed in or with `false` if there is no active user session in the server.
    */
   const trySignInSilently = async (
     additionalParams?: Record<string, string | boolean>,
     tokenRequestConfig?: {params: Record<string, unknown>},
-  ): Promise<BasicUserInfo | boolean> => {
+  ): Promise<User | boolean> => {
     return await _authenticationHelper.trySignInSilently(
       constructSilentSignInUrl,
       requestAccessToken,
@@ -479,7 +479,7 @@ export const WebWorkerClient = async (
     tokenRequestConfig?: {
       params: Record<string, unknown>;
     },
-  ): Promise<BasicUserInfo> => {
+  ): Promise<User> => {
     const config: AuthClientConfig<WebWorkerClientConfig> = await getConfigData();
     const pkceKey: string = extractPkceStorageKeyFromState(resolvedState);
 
@@ -496,7 +496,7 @@ export const WebWorkerClient = async (
 
     config.enablePKCE && SPAUtils.removePKCE(pkceKey);
 
-    return communicate<AuthorizationInfo, BasicUserInfo>(message)
+    return communicate<AuthorizationInfo, User>(message)
       .then(response => {
         const message: Message<null> = {
           type: GET_SIGN_OUT_URL,
@@ -530,7 +530,7 @@ export const WebWorkerClient = async (
     });
   };
 
-  const tryRetrievingUserInfo = async (): Promise<BasicUserInfo | undefined> => {
+  const tryRetrievingUserInfo = async (): Promise<User | undefined> => {
     if (await isSignedIn()) {
       await startAutoRefreshToken();
 
@@ -558,7 +558,7 @@ export const WebWorkerClient = async (
     tokenRequestConfig?: {
       params: Record<string, unknown>;
     },
-  ): Promise<BasicUserInfo> => {
+  ): Promise<User> => {
     const basicUserInfo = await _authenticationHelper.handleSignIn(
       shouldStopAuthn,
       checkSession,
@@ -693,12 +693,12 @@ export const WebWorkerClient = async (
       });
   };
 
-  const getUser = (): Promise<BasicUserInfo> => {
+  const getUser = (): Promise<User> => {
     const message: Message<null> = {
       type: GET_BASIC_USER_INFO,
     };
 
-    return communicate<null, BasicUserInfo>(message)
+    return communicate<null, User>(message)
       .then(response => {
         return Promise.resolve(response);
       })
@@ -777,12 +777,12 @@ export const WebWorkerClient = async (
       });
   };
 
-  const refreshAccessToken = (): Promise<BasicUserInfo> => {
+  const refreshAccessToken = (): Promise<User> => {
     const message: Message<null> = {
       type: REFRESH_ACCESS_TOKEN,
     };
 
-    return communicate<null, BasicUserInfo>(message);
+    return communicate<null, User>(message);
   };
 
   const setHttpRequestSuccessCallback = (callback: (response: HttpResponse) => void): void => {
diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
index 04de17495..31581ee06 100644
--- a/packages/browser/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -20,7 +20,7 @@ import {
   AsgardeoAuthClient,
   AsgardeoAuthException,
   AuthClientConfig,
-  BasicUserInfo,
+  User,
   IsomorphicCrypto,
   CustomGrantConfig,
   StorageManager,
@@ -103,7 +103,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
   public async exchangeToken(
     config: SPACustomGrantConfig,
     enableRetrievingSignOutURLFromSession?: (config: SPACustomGrantConfig) => void,
-  ): Promise<BasicUserInfo | FetchResponse> {
+  ): Promise<User | FetchResponse> {
     let useDefaultEndpoint = true;
     let matches = false;
 
@@ -168,7 +168,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
 
   public async refreshAccessToken(
     enableRetrievingSignOutURLFromSession?: (config: SPACustomGrantConfig) => void,
-  ): Promise<BasicUserInfo> {
+  ): Promise<User> {
     try {
       await this._authenticationClient.refreshAccessToken();
       const customGrantConfig = await this.getCustomGrantConfigData();
@@ -256,7 +256,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
 
             this._isTokenRefreshing = true;
             // Try to refresh the token
-            let refreshAccessTokenResponse: BasicUserInfo;
+            let refreshAccessTokenResponse: User;
             try {
               refreshAccessTokenResponse = await this.refreshAccessToken(enableRetrievingSignOutURLFromSession);
 
@@ -372,7 +372,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
           })
           .catch(async (error: HttpError) => {
             if (error?.response?.status === 401 || !error?.response) {
-              let refreshTokenResponse: TokenResponse | BasicUserInfo;
+              let refreshTokenResponse: TokenResponse | User;
               try {
                 refreshTokenResponse = await this._authenticationClient.refreshAccessToken();
               } catch (refreshError: any) {
@@ -453,7 +453,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     tokenRequestConfig?: {
       params: Record<string, unknown>;
     },
-  ): Promise<BasicUserInfo> {
+  ): Promise<User> {
     const config = await this._storageManager.getConfigData();
 
     if (config.storage === BrowserStorage.BrowserMemory && config.enablePKCE && sessionState) {
@@ -513,11 +513,11 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
       sessionState: string,
       state: string,
       tokenRequestConfig?: {params: Record<string, unknown>},
-    ) => Promise<BasicUserInfo>,
+    ) => Promise<User>,
     sessionManagementHelper: SessionManagementHelperInterface,
     additionalParams?: Record<string, string | boolean>,
     tokenRequestConfig?: {params: Record<string, unknown>},
-  ): Promise<BasicUserInfo | boolean> {
+  ): Promise<User | boolean> {
     // This block is executed by the iFrame when the server redirects with the authorization code.
     if (SPAUtils.isInitializedSilentSignIn()) {
       await sessionManagementHelper.receivePromptNoneResponse();
@@ -564,7 +564,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
 
         if (data?.type == CHECK_SESSION_SIGNED_IN && data?.data?.code) {
           requestAccessToken(data?.data?.code, data?.data?.sessionState, data?.data?.state, tokenRequestConfig)
-            .then((response: BasicUserInfo) => {
+            .then((response: User) => {
               window.removeEventListener('message', listenToPromptNoneIFrame);
               resolve(response);
             })
@@ -585,8 +585,8 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
   public async handleSignIn(
     shouldStopAuthn: () => Promise<boolean>,
     checkSession: () => Promise<void>,
-    tryRetrievingUserInfo?: () => Promise<BasicUserInfo | undefined>,
-  ): Promise<BasicUserInfo | undefined> {
+    tryRetrievingUserInfo?: () => Promise<User | undefined>,
+  ): Promise<User | undefined> {
     const config = await this._storageManager.getConfigData();
 
     if (await shouldStopAuthn()) {
@@ -656,7 +656,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     }
   }
 
-  public async getUser(): Promise<BasicUserInfo> {
+  public async getUser(): Promise<User> {
     return this._authenticationClient.getUser();
   }
 
diff --git a/packages/browser/src/__legacy__/models/client.ts b/packages/browser/src/__legacy__/models/client.ts
index 4371034b1..eb287e0fd 100755
--- a/packages/browser/src/__legacy__/models/client.ts
+++ b/packages/browser/src/__legacy__/models/client.ts
@@ -18,7 +18,7 @@
 
 import {
   AuthClientConfig,
-  BasicUserInfo,
+  User,
   IsomorphicCrypto,
   CustomGrantConfig,
   StorageManager,
@@ -54,12 +54,12 @@ export interface MainThreadClientInterface {
     tokenRequestConfig?: {
       params: Record<string, unknown>;
     },
-  ): Promise<BasicUserInfo>;
+  ): Promise<User>;
   signOut(afterSignOutUrl?: string): Promise<boolean>;
-  exchangeToken(config: CustomGrantConfig): Promise<BasicUserInfo | FetchResponse>;
-  refreshAccessToken(): Promise<BasicUserInfo>;
+  exchangeToken(config: CustomGrantConfig): Promise<User | FetchResponse>;
+  refreshAccessToken(): Promise<User>;
   revokeAccessToken(): Promise<boolean>;
-  getUser(): Promise<BasicUserInfo>;
+  getUser(): Promise<User>;
   getDecodedIdToken(): Promise<IdTokenPayload>;
   getCrypto(): Promise<IsomorphicCrypto>;
   getConfigData(): Promise<AuthClientConfig<MainThreadClientConfig>>;
@@ -72,12 +72,12 @@ export interface MainThreadClientInterface {
   trySignInSilently(
     additionalParams?: Record<string, string | boolean>,
     tokenRequestConfig?: {params: Record<string, unknown>},
-  ): Promise<BasicUserInfo | boolean>;
+  ): Promise<User | boolean>;
   isSessionActive(): Promise<boolean>;
 }
 
 export interface WebWorkerClientInterface {
-  exchangeToken(requestParams: CustomGrantConfig): Promise<FetchResponse | BasicUserInfo>;
+  exchangeToken(requestParams: CustomGrantConfig): Promise<FetchResponse | User>;
   httpRequest<T = any>(config: HttpRequestConfig): Promise<HttpResponse<T>>;
   httpRequestAll<T = any>(configs: HttpRequestConfig[]): Promise<HttpResponse<T>[]>;
   enableHttpHandler(): Promise<boolean>;
@@ -91,11 +91,11 @@ export interface WebWorkerClientInterface {
     tokenRequestConfig?: {
       params: Record<string, unknown>;
     },
-  ): Promise<BasicUserInfo>;
+  ): Promise<User>;
   signOut(afterSignOutUrl?: string): Promise<boolean>;
   revokeAccessToken(): Promise<boolean>;
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
-  getUser(): Promise<BasicUserInfo>;
+  getUser(): Promise<User>;
   getConfigData(): Promise<AuthClientConfig<WebWorkerClientConfig>>;
   getDecodedIdToken(): Promise<IdTokenPayload>;
   getDecodedIDPIDToken(): Promise<IdTokenPayload>;
@@ -106,10 +106,10 @@ export interface WebWorkerClientInterface {
   setHttpRequestErrorCallback(callback: (response: HttpError) => void | Promise<void>): void;
   setHttpRequestStartCallback(callback: () => void): void;
   setHttpRequestFinishCallback(callback: () => void): void;
-  refreshAccessToken(): Promise<BasicUserInfo>;
+  refreshAccessToken(): Promise<User>;
   reInitialize(config: Partial<AuthClientConfig<WebWorkerClientConfig>>): Promise<void>;
   trySignInSilently(
     additionalParams?: Record<string, string | boolean>,
     tokenRequestConfig?: {params: Record<string, unknown>},
-  ): Promise<BasicUserInfo | boolean>;
+  ): Promise<User | boolean>;
 }
diff --git a/packages/browser/src/__legacy__/models/web-worker.ts b/packages/browser/src/__legacy__/models/web-worker.ts
index f8ebc023a..16c40b60c 100755
--- a/packages/browser/src/__legacy__/models/web-worker.ts
+++ b/packages/browser/src/__legacy__/models/web-worker.ts
@@ -19,7 +19,7 @@
 import {
   AuthClientConfig,
   AuthorizeRequestUrlParams,
-  BasicUserInfo,
+  User,
   IsomorphicCrypto,
   CustomGrantConfig,
   IdTokenPayload,
@@ -51,13 +51,13 @@ export interface WebWorkerCoreInterface {
     sessionState?: string,
     pkce?: string,
     state?: string,
-  ): Promise<BasicUserInfo>;
+  ): Promise<User>;
   signOut(afterSignOutUrl?: string): Promise<string>;
   getSignOutUrl(afterSignOutUrl?: string): Promise<string>;
-  exchangeToken(config: CustomGrantConfig): Promise<BasicUserInfo | FetchResponse>;
-  refreshAccessToken(): Promise<BasicUserInfo>;
+  exchangeToken(config: CustomGrantConfig): Promise<User | FetchResponse>;
+  refreshAccessToken(): Promise<User>;
   revokeAccessToken(): Promise<boolean>;
-  getUser(): Promise<BasicUserInfo>;
+  getUser(): Promise<User>;
   getDecodedIdToken(): Promise<IdTokenPayload>;
   getDecodedIDPIDToken(): Promise<IdTokenPayload>;
   getCrypto(): Promise<IsomorphicCrypto>;
diff --git a/packages/browser/src/__legacy__/worker/worker-core.ts b/packages/browser/src/__legacy__/worker/worker-core.ts
index 5074dc967..efbff8190 100755
--- a/packages/browser/src/__legacy__/worker/worker-core.ts
+++ b/packages/browser/src/__legacy__/worker/worker-core.ts
@@ -20,7 +20,7 @@ import {
   AsgardeoAuthClient,
   AuthClientConfig,
   AuthorizeRequestUrlParams,
-  BasicUserInfo,
+  User,
   IsomorphicCrypto,
   CustomGrantConfig,
   IdTokenPayload,
@@ -124,7 +124,7 @@ export const WebWorkerCore = async (
     sessionState?: string,
     pkce?: string,
     state?: string,
-  ): Promise<BasicUserInfo> => {
+  ): Promise<User> => {
     return await _authenticationHelper.requestAccessToken(authorizationCode, sessionState, undefined, pkce, state);
   };
 
@@ -138,11 +138,11 @@ export const WebWorkerCore = async (
     return await _authenticationClient.getSignOutUrl();
   };
 
-  const exchangeToken = async (config: CustomGrantConfig): Promise<BasicUserInfo | FetchResponse> => {
+  const exchangeToken = async (config: CustomGrantConfig): Promise<User | FetchResponse> => {
     return await _authenticationHelper.exchangeToken(config);
   };
 
-  const refreshAccessToken = async (): Promise<BasicUserInfo> => {
+  const refreshAccessToken = async (): Promise<User> => {
     try {
       return await _authenticationHelper.refreshAccessToken();
     } catch (error) {
@@ -163,7 +163,7 @@ export const WebWorkerCore = async (
       .catch(error => Promise.reject(error));
   };
 
-  const getUser = async (): Promise<BasicUserInfo> => {
+  const getUser = async (): Promise<User> => {
     return _authenticationHelper.getUser();
   };
 
diff --git a/packages/browser/src/__legacy__/worker/worker-receiver.ts b/packages/browser/src/__legacy__/worker/worker-receiver.ts
index 7a0a3b6c5..ee7c8deff 100644
--- a/packages/browser/src/__legacy__/worker/worker-receiver.ts
+++ b/packages/browser/src/__legacy__/worker/worker-receiver.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {AsgardeoAuthClient, AsgardeoAuthException, AuthClientConfig, BasicUserInfo} from '@asgardeo/javascript';
+import {AsgardeoAuthClient, AsgardeoAuthException, AuthClientConfig, User} from '@asgardeo/javascript';
 import {WebWorkerCore} from './worker-core';
 import {
   DISABLE_HTTP_HANDLER,
@@ -109,7 +109,7 @@ export const workerReceiver = (
       case REQUEST_ACCESS_TOKEN:
         webWorker
           .requestAccessToken(data?.data?.code, data?.data?.sessionState, data?.data?.pkce, data?.data?.state)
-          .then((response: BasicUserInfo) => {
+          .then((response: User) => {
             port.postMessage(MessageUtils.generateSuccessMessage(response));
           })
           .catch(error => {
diff --git a/packages/express/src/__legacy__/client.ts b/packages/express/src/__legacy__/client.ts
index 70ac9543b..b7bc0b481 100644
--- a/packages/express/src/__legacy__/client.ts
+++ b/packages/express/src/__legacy__/client.ts
@@ -22,7 +22,7 @@ import {
   AuthURLCallback,
   TokenResponse,
   Storage,
-  BasicUserInfo,
+  User,
   OIDCEndpoints,
   IdTokenPayload,
   CustomGrantConfig,
@@ -166,7 +166,7 @@ export class AsgardeoExpressClient {
     return this._authClient.getIdToken(userId);
   }
 
-  public async getUser(userId: string): Promise<BasicUserInfo> {
+  public async getUser(userId: string): Promise<User> {
     return this._authClient.getUser(userId);
   }
 
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 9dec99ced..e9a007b69 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -17,15 +17,7 @@
  */
 
 import StorageManager from '../StorageManager';
-import {
-  AuthClientConfig,
-  AuthenticatedUserInfo,
-  BasicUserInfo,
-  CustomGrantConfig,
-  FetchRequestConfig,
-  FetchResponse,
-  StrictAuthClientConfig,
-} from './models';
+import {AuthClientConfig, CustomGrantConfig, FetchRequestConfig, FetchResponse, StrictAuthClientConfig} from './models';
 import {ExtendedAuthorizeRequestUrlParams} from '../models/oauth-request';
 import {Crypto} from '../models/crypto';
 import {TokenResponse, IdTokenPayload} from '../models/token';
@@ -39,13 +31,14 @@ import extractPkceStorageKeyFromState from '../utils/extractPkceStorageKeyFromSt
 import generateStateParamForRequestCorrelation from '../utils/generateStateParamForRequestCorrelation';
 import {AsgardeoAuthException} from '../errors/exception';
 import {AuthenticationHelper} from './helpers';
-import {SessionData} from '../models/session';
+import {SessionData, UserSession} from '../models/session';
 import {AuthorizeRequestUrlParams} from '../models/oauth-request';
 import {TemporaryStore} from '../models/store';
 import generatePkceStorageKey from '../utils/generatePkceStorageKey';
 import {OIDCDiscoveryApiResponse} from '../models/oidc-discovery';
 import getAuthorizeRequestUrlParams from '../utils/getAuthorizeRequestUrlParams';
 import PKCEConstants from '../constants/PKCEConstants';
+import {User} from '../models/user';
 
 /**
  * Default configurations.
@@ -637,16 +630,9 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public async getUser(userId?: string): Promise<BasicUserInfo> {
+  public async getUser(userId?: string): Promise<User> {
     const sessionData: SessionData = await this._storageManager.getSessionData(userId);
-    const authenticatedUser: AuthenticatedUserInfo = this._authenticationHelper.getAuthenticatedUserInfo(
-      sessionData?.id_token,
-    );
-
-    let basicUserInfo: BasicUserInfo = {
-      allowedScopes: sessionData.scope,
-      sessionState: sessionData.session_state,
-    };
+    const authenticatedUser: User = this._authenticationHelper.getAuthenticatedUserInfo(sessionData?.id_token);
 
     Object.keys(authenticatedUser).forEach((key: string) => {
       if (authenticatedUser[key] === undefined || authenticatedUser[key] === '' || authenticatedUser[key] === null) {
@@ -654,9 +640,16 @@ export class AsgardeoAuthClient<T> {
       }
     });
 
-    basicUserInfo = {...basicUserInfo, ...authenticatedUser};
+    return authenticatedUser;
+  }
+
+  public async getUserSession(userId?: string): Promise<UserSession> {
+    const sessionData: SessionData = await this._storageManager.getSessionData(userId);
 
-    return basicUserInfo;
+    return {
+      scopes: sessionData?.scope?.split(' '),
+      sessionState: sessionData?.session_state ?? '',
+    };
   }
 
   /**
diff --git a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
index a86ef441c..3ddd24307 100644
--- a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
@@ -19,7 +19,8 @@
 import {IsomorphicCrypto} from '../../IsomorphicCrypto';
 import StorageManager from '../../StorageManager';
 import {AsgardeoAuthException} from '../../errors/exception';
-import {AuthClientConfig, AuthenticatedUserInfo, StrictAuthClientConfig} from '../models';
+import {AuthClientConfig, StrictAuthClientConfig} from '../models';
+import {User} from '../../models/user';
 import {SessionData} from '../../models/session';
 import {JWKInterface} from '../../models/crypto';
 import {TokenResponse, AccessTokenApiResponse} from '../../models/token';
@@ -204,9 +205,8 @@ export class AuthenticationHelper<T> {
     );
   }
 
-  public getAuthenticatedUserInfo(idToken: string): AuthenticatedUserInfo {
+  public getAuthenticatedUserInfo(idToken: string): User {
     const payload: IdTokenPayload = this._cryptoHelper.decodeIdToken(idToken);
-    const tenantDomain: string = extractTenantDomainFromIdTokenPayload(payload);
     const username: string = payload?.['username'] ?? '';
     const givenName: string = payload?.['given_name'] ?? '';
     const familyName: string = payload?.['family_name'] ?? '';
@@ -216,7 +216,6 @@ export class AuthenticationHelper<T> {
 
     return {
       displayName: displayName,
-      tenantDomain,
       username: username,
       ...extractUserClaimsFromIdToken(payload),
     };
diff --git a/packages/javascript/src/__legacy__/models/index.ts b/packages/javascript/src/__legacy__/models/index.ts
index d14934120..729f3eedb 100644
--- a/packages/javascript/src/__legacy__/models/index.ts
+++ b/packages/javascript/src/__legacy__/models/index.ts
@@ -18,5 +18,4 @@
 
 export * from './client-config';
 export * from './custom-grant';
-export * from './user';
 export * from './fetch';
diff --git a/packages/javascript/src/__legacy__/models/user.ts b/packages/javascript/src/__legacy__/models/user.ts
deleted file mode 100644
index a4b64e0e0..000000000
--- a/packages/javascript/src/__legacy__/models/user.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * Copyright (c) 2020, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-/**
- * Interface containing the basic user information.
- */
-export interface BasicUserInfo {
-    /**
-     * The email address of the user.
-     */
-    email?: string | undefined;
-    /**
-     * 	The username of the user.
-     */
-    username?: string | undefined;
-    /**
-     * The display name of the user. It is the preferred_username in the id token payload or the `sub`.
-     */
-    displayName?: string | undefined;
-    /**
-     * The scopes allowed for the user.
-     */
-    allowedScopes: string;
-    /**
-     * The tenant domain to which the user belongs.
-     */
-    tenantDomain?: string | undefined;
-    /**
-     * The session state.
-     */
-    sessionState: string;
-    /**
-     * The `uid` corresponding to the user who the ID token belongs to.
-     */
-    sub?: string;
-    /**
-     * Any other attributes retrieved from teh `id_token`.
-     */
-    [ key: string ]: any;
-}
-
-/**
- * Interface of the authenticated user.
- */
-export interface AuthenticatedUserInfo {
-    /**
-     * Authenticated user's display name.
-     */
-    displayName?: string | undefined;
-    /**
-     * Authenticated user's display name.
-     * @deprecated Use `displayName` instead.
-     */
-    display_name?: string | undefined;
-    /**
-     * User's email.
-     */
-    email?: string | undefined;
-    /**
-     * Available scopes.
-     */
-    scope?: string | undefined;
-    /**
-     * Authenticated user's tenant domain.
-     */
-    tenantDomain?: string | undefined;
-    /**
-     * Authenticated user's username.
-     */
-    username: string;
-    [key: string]: any;
-}
diff --git a/packages/javascript/src/models/session.ts b/packages/javascript/src/models/session.ts
index 54423225a..33d88ccb1 100644
--- a/packages/javascript/src/models/session.ts
+++ b/packages/javascript/src/models/session.ts
@@ -17,12 +17,17 @@
  */
 
 export interface SessionData {
-    access_token: string;
-    id_token: string;
-    expires_in: string;
-    scope: string;
-    refresh_token?: string;
-    token_type: string;
-    session_state: string;
-    created_at: number;
+  access_token: string;
+  id_token: string;
+  expires_in: string;
+  scope: string;
+  refresh_token?: string;
+  token_type: string;
+  session_state: string;
+  created_at: number;
+}
+
+export interface UserSession {
+  scopes: string[];
+  sessionState: string;
 }
diff --git a/packages/javascript/src/models/user.ts b/packages/javascript/src/models/user.ts
index ee1f0222c..d6f9f5532 100644
--- a/packages/javascript/src/models/user.ts
+++ b/packages/javascript/src/models/user.ts
@@ -16,102 +16,14 @@
  * under the License.
  */
 
-import {Schema} from './scim2-schema';
-
-/**
- * Type for the Meta object in SCIM2 responses
- */
-export interface UserMeta {
-  created: string;
-  location: string;
-  lastModified: string;
-  resourceType: string;
-}
-
-/**
- * Type for the Role object in SCIM2 responses
- */
-export interface UserRole {
-  audienceValue: string;
-  display: string;
-  audienceType: string;
-  value: string;
-  $ref: string;
-  audienceDisplay: string;
-}
-
-/**
- * Type for the Name object in SCIM2 responses
- */
-export interface UserName {
-  formatted: string;
-  givenName: string;
-  familyName: string;
+export interface KnownUser {
+  username: string;
+  email?: string;
+  givenName?: string;
+  familyName?: string;
+  displayName?: string;
 }
 
-/**
- * Represents a user in the Asgardeo system.
- *
- * @remarks
- * This interface defines the user properties based on the SCIM2 schema.
- * WSO2 specific properties are flattened to the root level for easier access.
- *
- * @example
- * ```typescript
- * const user: User = {
- *   emails: ["user@example.com"],
- *   profileUrl: "https://gravatar.com/avatar/123",
- *   meta: {
- *     created: "2021-06-21T11:28:21.800618Z",
- *     location: "https://api.asgardeo.io/scim2/Users/123",
- *     lastModified: "2025-04-30T06:46:48.520896Z",
- *     resourceType: "User"
- *   },
- *   name: {
- *     formatted: "John Smith",
- *     givenName: "John",
- *     familyName: "Smith"
- *   },
- *   userName: "john@example.com",
- *   id: "123",
- *   // Flattened WSO2 schema properties
- *   accountState: "UNLOCKED",
- *   accountLocked: "false",
- *   photoUrl: "https://gravatar.com/avatar/123",
- *   emailVerified: "true",
- *   lastLogonTime: "1749098996152"
- * };
- * ```
- */
-export interface User {
-  // Base SCIM2 properties
-  emails: string[];
-  profileUrl?: string;
-  meta: UserMeta;
-  schemas: Schema[];
-  roles?: UserRole[];
-  name: UserName;
-  id: string;
-  userName: string;
-
-  // Flattened WSO2 schema properties
-  accountState?: string;
-  accountLocked?: string;
-  failedLoginLockoutCount?: string;
-  failedTOTPAttempts?: string;
-  failedLoginAttempts?: string;
-  totpEnabled?: string;
-  photoUrl?: string;
-  emailVerified?: string;
-  backupCodeEnabled?: string;
-  lastLogonTime?: string;
-  signedUpRegion?: string;
-  unlockTime?: string;
-  isReadOnlyUser?: string;
-  failedLoginAttemptsBeforeSuccess?: string;
-
-  // Allow additional properties
+export interface User extends KnownUser {
   [key: string]: any;
 }
-
-export default User;
diff --git a/packages/node/src/__legacy__/client.ts b/packages/node/src/__legacy__/client.ts
index 3c1268a48..12831dfa3 100644
--- a/packages/node/src/__legacy__/client.ts
+++ b/packages/node/src/__legacy__/client.ts
@@ -18,7 +18,6 @@
 
 import {
   AuthClientConfig,
-  BasicUserInfo,
   CustomGrantConfig,
   StorageManager,
   IdTokenPayload,
@@ -26,6 +25,7 @@ import {
   OIDCEndpoints,
   Storage,
   TokenResponse,
+  User,
 } from '@asgardeo/javascript';
 import {AsgardeoNodeCore} from './core';
 import {AuthURLCallback} from './models';
@@ -192,7 +192,7 @@ export class AsgardeoNodeClient<T> {
    * @memberof AsgardeoNodeClient
    *
    */
-  public async getUser(userId: string): Promise<BasicUserInfo> {
+  public async getUser(userId: string): Promise<User> {
     return this._authCore.getUser(userId);
   }
 
@@ -260,15 +260,15 @@ export class AsgardeoNodeClient<T> {
   }
 
   /**
-     * This method returns Promise that resolves with the token information 
+     * This method returns Promise that resolves with the token information
      * or the response returned by the server depending on the configuration passed.
-     * @param {CustomGrantConfig} config - The config object contains attributes that would be used 
+     * @param {CustomGrantConfig} config - The config object contains attributes that would be used
      * to configure the custom grant request.
      *
      * @param {string} userId - The userId of the user.
      * (If you are using ExpressJS, you may get this from the request cookies)
-     * 
-     * @return {Promise<TokenResponse | FetchResponse>} -A Promise that resolves with the token information 
+     *
+     * @return {Promise<TokenResponse | FetchResponse>} -A Promise that resolves with the token information
      * or the response returned by the server depending on the configuration passed.
      *
      * @example
diff --git a/packages/node/src/__legacy__/core/authentication.ts b/packages/node/src/__legacy__/core/authentication.ts
index 8478f51ad..ade82b4be 100644
--- a/packages/node/src/__legacy__/core/authentication.ts
+++ b/packages/node/src/__legacy__/core/authentication.ts
@@ -20,7 +20,6 @@ import {
   AsgardeoAuthClient,
   AsgardeoAuthException,
   AuthClientConfig,
-  BasicUserInfo,
   Crypto,
   CustomGrantConfig,
   StorageManager,
@@ -30,6 +29,7 @@ import {
   SessionData,
   Storage,
   TokenResponse,
+  User,
 } from '@asgardeo/javascript';
 import {AuthURLCallback} from '../models';
 import {MemoryCacheStore} from '../stores';
@@ -212,7 +212,7 @@ export class AsgardeoNodeCore<T> {
     return Promise.resolve(signOutURL);
   }
 
-  public async getUser(userId: string): Promise<BasicUserInfo> {
+  public async getUser(userId: string): Promise<User> {
     return this._auth.getUser(userId);
   }
 
diff --git a/packages/react/src/__temp__/api.ts b/packages/react/src/__temp__/api.ts
index f6f509984..4fbee45b4 100644
--- a/packages/react/src/__temp__/api.ts
+++ b/packages/react/src/__temp__/api.ts
@@ -19,7 +19,7 @@
 import {
   AsgardeoSPAClient,
   AuthClientConfig,
-  BasicUserInfo,
+  User,
   LegacyConfig as Config,
   IdTokenPayload,
   FetchResponse,
@@ -105,7 +105,7 @@ class AuthAPI {
     authorizationCode?: string,
     sessionState?: string,
     authState?: string,
-    callback?: (response: BasicUserInfo) => void,
+    callback?: (response: User) => void,
     tokenRequestConfig?: {
       params: Record<string, unknown>;
     },
@@ -129,20 +129,18 @@ class AuthAPI {
 
     return this._client
       .signIn(config, authorizationCode, sessionState, authState, tokenRequestConfig)
-      .then(async (response: BasicUserInfo) => {
+      .then(async (response: User) => {
         if (!response) {
           return null; // FIXME: Validate this. Temp fix for: error TS7030: Not all code paths return a value.
         }
 
         if (await this._client.isSignedIn()) {
           const stateToUpdate = {
-            allowedScopes: response.allowedScopes,
             displayName: response.displayName,
             email: response.email,
             isSignedIn: true,
             isLoading: false,
             isSigningOut: false,
-            sub: response.sub,
             username: response.username,
           };
 
@@ -197,9 +195,9 @@ class AuthAPI {
   /**
    * This method returns a Promise that resolves with the basic user information obtained from the ID token.
    *
-   * @return {Promise<BasicUserInfo>} - A promise that resolves with the user information.
+   * @return {Promise<User>} - A promise that resolves with the user information.
    */
-  public async getUser(): Promise<BasicUserInfo> {
+  public async getUser(): Promise<User> {
     return this._client.getUser();
   }
 
@@ -241,12 +239,12 @@ class AuthAPI {
    */
   public exchangeToken(
     config: SPACustomGrantConfig,
-    callback: (response: BasicUserInfo | FetchResponse<any>) => void,
+    callback: (response: User | FetchResponse<any>) => void,
     dispatch: (state: AuthStateInterface) => void,
-  ): Promise<BasicUserInfo | FetchResponse<any>> {
+  ): Promise<User | FetchResponse<any>> {
     return this._client
       .exchangeToken(config)
-      .then((response: BasicUserInfo | FetchResponse<any>) => {
+      .then((response: User | FetchResponse<any>) => {
         if (!response) {
           return null; // FIXME: Validate this. Temp fix for: error TS7030: Not all code paths return a value.
         }
@@ -254,12 +252,12 @@ class AuthAPI {
         if (config.returnsSession) {
           this.updateState({
             ...this.getState(),
-            ...(response as BasicUserInfo),
+            ...(response as User),
             isSignedIn: true,
             isLoading: false,
           });
 
-          dispatch({...(response as BasicUserInfo), isSignedIn: true, isLoading: false});
+          dispatch({...(response as User), isSignedIn: true, isLoading: false});
         }
 
         callback && callback(response);
@@ -365,7 +363,7 @@ class AuthAPI {
    * @return {TokenResponseInterface} - A Promise that resolves with an object containing
    * information about the refreshed access token.
    */
-  public async refreshAccessToken(): Promise<BasicUserInfo> {
+  public async refreshAccessToken(): Promise<User> {
     return this._client.refreshAccessToken();
   }
 
@@ -438,7 +436,7 @@ class AuthAPI {
    * First, this method sends a prompt none request to see if there is an active user session in the identity server.
    * If there is one, then it requests the access token and stores it. Else, it returns false.
    *
-   * @return {Promise<BasicUserInfo | boolean>} - A Promise that resolves with the user information after signing in
+   * @return {Promise<User | boolean>} - A Promise that resolves with the user information after signing in
    * or with `false` if the user is not signed in.
    *
    * @example
@@ -451,10 +449,10 @@ class AuthAPI {
     dispatch: (state: AuthStateInterface) => void,
     additionalParams?: Record<string, string | boolean>,
     tokenRequestConfig?: {params: Record<string, unknown>},
-  ): Promise<BasicUserInfo | boolean | undefined> {
+  ): Promise<User | boolean | undefined> {
     return this._client
       .trySignInSilently(additionalParams, tokenRequestConfig)
-      .then(async (response: BasicUserInfo | boolean) => {
+      .then(async (response: User | boolean) => {
         if (!response) {
           this.updateState({...this.getState(), isLoading: false});
           dispatch({...state, isLoading: false});
@@ -463,15 +461,13 @@ class AuthAPI {
         }
 
         if (await this._client.isSignedIn()) {
-          const basicUserInfo = response as BasicUserInfo;
+          const basicUserInfo = response as User;
           const stateToUpdate = {
-            allowedScopes: basicUserInfo.allowedScopes,
             displayName: basicUserInfo.displayName,
             email: basicUserInfo.email,
             isSignedIn: true,
             isLoading: false,
             isSigningOut: false,
-            sub: basicUserInfo.sub,
             username: basicUserInfo.username,
           };
 
@@ -489,12 +485,10 @@ class AuthAPI {
 }
 
 AuthAPI.DEFAULT_STATE = {
-  allowedScopes: '',
   displayName: '',
   email: '',
   isSignedIn: false,
   isLoading: true,
-  sub: '',
   username: '',
 };
 
diff --git a/packages/react/src/__temp__/models.ts b/packages/react/src/__temp__/models.ts
index 0cbf3471c..3753603ae 100644
--- a/packages/react/src/__temp__/models.ts
+++ b/packages/react/src/__temp__/models.ts
@@ -20,7 +20,7 @@ import {
   AsgardeoAuthException,
   AuthClientConfig,
   AuthSPAClientConfig,
-  BasicUserInfo,
+  User,
   Config,
   CustomGrantConfig,
   IdTokenPayload,
@@ -55,10 +55,6 @@ export type AuthReactConfig = AuthSPAClientConfig & ReactConfig;
  * via `state` object from `useAuthContext` hook.
  */
 export interface AuthStateInterface {
-  /**
-   * The scopes that are allowed for the user.
-   */
-  allowedScopes: string;
   /**
    * The display name of the user.
    */
@@ -75,10 +71,6 @@ export interface AuthStateInterface {
    * Are the Auth requests loading.
    */
   isLoading: boolean;
-  /**
-   * The uid corresponding to the user who the ID token belonged to.
-   */
-  sub?: string;
   /**
    * The username of the user.
    */
@@ -91,16 +83,16 @@ export interface AuthContextInterface {
     authorizationCode?: string,
     sessionState?: string,
     state?: string,
-    callback?: (response: BasicUserInfo) => void,
+    callback?: (response: User) => void,
     tokenRequestConfig?: {
       params: Record<string, unknown>;
     },
-  ) => Promise<BasicUserInfo>;
+  ) => Promise<User>;
   signOut: (callback?: (response: boolean) => void) => Promise<boolean>;
-  getUser(): Promise<BasicUserInfo>;
+  getUser(): Promise<User>;
   httpRequest(config: HttpRequestConfig): Promise<HttpResponse<any>>;
   httpRequestAll(configs: HttpRequestConfig[]): Promise<HttpResponse<any>[]>;
-  exchangeToken(config: CustomGrantConfig, callback?: (response: BasicUserInfo | FetchResponse<any>) => void): void;
+  exchangeToken(config: CustomGrantConfig, callback?: (response: User | FetchResponse<any>) => void): void;
   revokeAccessToken(): Promise<boolean>;
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   getHttpClient(): Promise<HttpClientInstance>;
@@ -108,7 +100,7 @@ export interface AuthContextInterface {
   getDecodedIdToken(): Promise<IdTokenPayload>;
   getIdToken(): Promise<string>;
   getAccessToken(): Promise<string>;
-  refreshAccessToken(): Promise<BasicUserInfo>;
+  refreshAccessToken(): Promise<User>;
   isSignedIn(): Promise<boolean>;
   enableHttpHandler(): Promise<boolean>;
   disableHttpHandler(): Promise<boolean>;
@@ -116,7 +108,7 @@ export interface AuthContextInterface {
   trySignInSilently: (
     additionalParams?: Record<string, string | boolean>,
     tokenRequestConfig?: {params: Record<string, unknown>},
-  ) => Promise<boolean | BasicUserInfo>;
+  ) => Promise<boolean | User>;
   on(hook: Hooks.CustomGrant, callback: (response?: any) => void, id: string): void;
   on(hook: Exclude<Hooks, Hooks.CustomGrant>, callback: (response?: any) => void): void;
   on(hook: Hooks, callback: (response?: any) => void, id?: string): void;

From 1f38ac43f46636533c3eb99debee9cac097c68f2 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Sun, 15 Jun 2025 08:09:53 +0530
Subject: [PATCH 089/131] chore: rename CustomGrantConfig to
 TokenExchangeRequestConfig across the codebase

---
 packages/browser/src/__legacy__/client.ts     |  4 +--
 .../__legacy__/clients/web-worker-client.ts   |  6 ++---
 .../helpers/authentication-helper.ts          |  4 +--
 .../browser/src/__legacy__/models/client.ts   |  6 ++---
 .../__legacy__/models/request-custom-grant.ts |  4 +--
 .../src/__legacy__/models/web-worker.ts       | 11 +++-----
 .../src/__legacy__/worker/worker-core.ts      |  4 +--
 packages/express/src/__legacy__/client.ts     |  7 +++--
 packages/javascript/src/__legacy__/client.ts  |  9 ++++---
 .../src/__legacy__/models/client-config.ts    |  2 +-
 .../src/__legacy__/models/custom-grant.ts     | 27 -------------------
 .../javascript/src/__legacy__/models/index.ts |  1 -
 packages/javascript/src/models/token.ts       | 10 +++++++
 packages/node/src/__legacy__/client.ts        |  9 ++++---
 .../src/__legacy__/core/authentication.ts     |  7 +++--
 packages/react/src/__temp__/models.ts         |  4 +--
 packages/vue/src/plugins/AsgardeoPlugin.ts    |  4 +--
 packages/vue/src/types.ts                     |  7 +++--
 18 files changed, 59 insertions(+), 67 deletions(-)
 delete mode 100644 packages/javascript/src/__legacy__/models/custom-grant.ts

diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
index ec829f854..ba20eae86 100755
--- a/packages/browser/src/__legacy__/client.ts
+++ b/packages/browser/src/__legacy__/client.ts
@@ -21,7 +21,7 @@ import {
   AsgardeoAuthException,
   AuthClientConfig,
   IsomorphicCrypto,
-  CustomGrantConfig,
+  TokenExchangeRequestConfig,
   StorageManager,
   IdTokenPayload,
   FetchResponse,
@@ -607,7 +607,7 @@ export class AsgardeoSPAClient {
    *
    * @preserve
    */
-  public async exchangeToken(config: CustomGrantConfig): Promise<FetchResponse<any> | User | undefined> {
+  public async exchangeToken(config: TokenExchangeRequestConfig): Promise<FetchResponse<any> | User | undefined> {
     if (config.signInRequired) {
       await this._validateMethod();
     } else {
diff --git a/packages/browser/src/__legacy__/clients/web-worker-client.ts b/packages/browser/src/__legacy__/clients/web-worker-client.ts
index b12a0cc39..f23adeada 100755
--- a/packages/browser/src/__legacy__/clients/web-worker-client.ts
+++ b/packages/browser/src/__legacy__/clients/web-worker-client.ts
@@ -22,7 +22,7 @@ import {
   AuthClientConfig,
   User,
   IsomorphicCrypto,
-  CustomGrantConfig,
+  TokenExchangeRequestConfig,
   IdTokenPayload,
   FetchResponse,
   ExtendedAuthorizeRequestUrlParams,
@@ -189,12 +189,12 @@ export const WebWorkerClient = async (
    * response if the the `returnResponse` attribute in the `requestParams` object is set to `true`.
    */
   const exchangeToken = (requestParams: SPACustomGrantConfig): Promise<FetchResponse | User> => {
-    const message: Message<CustomGrantConfig> = {
+    const message: Message<TokenExchangeRequestConfig> = {
       data: requestParams,
       type: REQUEST_CUSTOM_GRANT,
     };
 
-    return communicate<CustomGrantConfig, FetchResponse | User>(message)
+    return communicate<TokenExchangeRequestConfig, FetchResponse | User>(message)
       .then(response => {
         if (requestParams.preventSignOutURLUpdate) {
           _getSignOutURLFromSessionStorage = true;
diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
index 31581ee06..b63b26b18 100644
--- a/packages/browser/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -22,7 +22,7 @@ import {
   AuthClientConfig,
   User,
   IsomorphicCrypto,
-  CustomGrantConfig,
+  TokenExchangeRequestConfig,
   StorageManager,
   IdTokenPayload,
   FetchResponse,
@@ -156,7 +156,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     }
   }
 
-  public async getCustomGrantConfigData(): Promise<AuthClientConfig<CustomGrantConfig> | null> {
+  public async getCustomGrantConfigData(): Promise<AuthClientConfig<TokenExchangeRequestConfig> | null> {
     const configString = await this._storageManager.getTemporaryDataParameter(CUSTOM_GRANT_CONFIG);
 
     if (configString) {
diff --git a/packages/browser/src/__legacy__/models/client.ts b/packages/browser/src/__legacy__/models/client.ts
index eb287e0fd..2be74371b 100755
--- a/packages/browser/src/__legacy__/models/client.ts
+++ b/packages/browser/src/__legacy__/models/client.ts
@@ -20,7 +20,7 @@ import {
   AuthClientConfig,
   User,
   IsomorphicCrypto,
-  CustomGrantConfig,
+  TokenExchangeRequestConfig,
   StorageManager,
   IdTokenPayload,
   FetchResponse,
@@ -56,7 +56,7 @@ export interface MainThreadClientInterface {
     },
   ): Promise<User>;
   signOut(afterSignOutUrl?: string): Promise<boolean>;
-  exchangeToken(config: CustomGrantConfig): Promise<User | FetchResponse>;
+  exchangeToken(config: TokenExchangeRequestConfig): Promise<User | FetchResponse>;
   refreshAccessToken(): Promise<User>;
   revokeAccessToken(): Promise<boolean>;
   getUser(): Promise<User>;
@@ -77,7 +77,7 @@ export interface MainThreadClientInterface {
 }
 
 export interface WebWorkerClientInterface {
-  exchangeToken(requestParams: CustomGrantConfig): Promise<FetchResponse | User>;
+  exchangeToken(requestParams: TokenExchangeRequestConfig): Promise<FetchResponse | User>;
   httpRequest<T = any>(config: HttpRequestConfig): Promise<HttpResponse<T>>;
   httpRequestAll<T = any>(configs: HttpRequestConfig[]): Promise<HttpResponse<T>[]>;
   enableHttpHandler(): Promise<boolean>;
diff --git a/packages/browser/src/__legacy__/models/request-custom-grant.ts b/packages/browser/src/__legacy__/models/request-custom-grant.ts
index 1c8b995f7..1718c9ae8 100644
--- a/packages/browser/src/__legacy__/models/request-custom-grant.ts
+++ b/packages/browser/src/__legacy__/models/request-custom-grant.ts
@@ -16,11 +16,11 @@
  * under the License.
  */
 
-import {CustomGrantConfig} from '@asgardeo/javascript';
+import {TokenExchangeRequestConfig} from '@asgardeo/javascript';
 
 /**
  * SPA Custom Request Grant config model
  */
-export interface SPACustomGrantConfig extends CustomGrantConfig {
+export interface SPACustomGrantConfig extends TokenExchangeRequestConfig {
   preventSignOutURLUpdate?: boolean;
 }
diff --git a/packages/browser/src/__legacy__/models/web-worker.ts b/packages/browser/src/__legacy__/models/web-worker.ts
index 16c40b60c..837559c9e 100755
--- a/packages/browser/src/__legacy__/models/web-worker.ts
+++ b/packages/browser/src/__legacy__/models/web-worker.ts
@@ -21,7 +21,7 @@ import {
   AuthorizeRequestUrlParams,
   User,
   IsomorphicCrypto,
-  CustomGrantConfig,
+  TokenExchangeRequestConfig,
   IdTokenPayload,
   FetchResponse,
   OIDCEndpoints,
@@ -46,15 +46,10 @@ export interface WebWorkerCoreInterface {
   enableHttpHandler(): void;
   disableHttpHandler(): void;
   getSignInUrl(params?: AuthorizeRequestUrlParams, afterSignInUrl?: string): Promise<AuthorizationResponse>;
-  requestAccessToken(
-    authorizationCode?: string,
-    sessionState?: string,
-    pkce?: string,
-    state?: string,
-  ): Promise<User>;
+  requestAccessToken(authorizationCode?: string, sessionState?: string, pkce?: string, state?: string): Promise<User>;
   signOut(afterSignOutUrl?: string): Promise<string>;
   getSignOutUrl(afterSignOutUrl?: string): Promise<string>;
-  exchangeToken(config: CustomGrantConfig): Promise<User | FetchResponse>;
+  exchangeToken(config: TokenExchangeRequestConfig): Promise<User | FetchResponse>;
   refreshAccessToken(): Promise<User>;
   revokeAccessToken(): Promise<boolean>;
   getUser(): Promise<User>;
diff --git a/packages/browser/src/__legacy__/worker/worker-core.ts b/packages/browser/src/__legacy__/worker/worker-core.ts
index efbff8190..c0dc611d0 100755
--- a/packages/browser/src/__legacy__/worker/worker-core.ts
+++ b/packages/browser/src/__legacy__/worker/worker-core.ts
@@ -22,7 +22,7 @@ import {
   AuthorizeRequestUrlParams,
   User,
   IsomorphicCrypto,
-  CustomGrantConfig,
+  TokenExchangeRequestConfig,
   IdTokenPayload,
   FetchResponse,
   OIDCEndpoints,
@@ -138,7 +138,7 @@ export const WebWorkerCore = async (
     return await _authenticationClient.getSignOutUrl();
   };
 
-  const exchangeToken = async (config: CustomGrantConfig): Promise<User | FetchResponse> => {
+  const exchangeToken = async (config: TokenExchangeRequestConfig): Promise<User | FetchResponse> => {
     return await _authenticationHelper.exchangeToken(config);
   };
 
diff --git a/packages/express/src/__legacy__/client.ts b/packages/express/src/__legacy__/client.ts
index b7bc0b481..accf748e3 100644
--- a/packages/express/src/__legacy__/client.ts
+++ b/packages/express/src/__legacy__/client.ts
@@ -25,7 +25,7 @@ import {
   User,
   OIDCEndpoints,
   IdTokenPayload,
-  CustomGrantConfig,
+  TokenExchangeRequestConfig,
   FetchResponse,
   AsgardeoAuthException,
   Logger,
@@ -182,7 +182,10 @@ export class AsgardeoExpressClient {
     return this._authClient.getAccessToken(userId);
   }
 
-  public async exchangeToken(config: CustomGrantConfig, userId?: string): Promise<TokenResponse | FetchResponse> {
+  public async exchangeToken(
+    config: TokenExchangeRequestConfig,
+    userId?: string,
+  ): Promise<TokenResponse | FetchResponse> {
     return this._authClient.exchangeToken(config, userId);
   }
 
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index e9a007b69..61fe4d415 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -17,10 +17,10 @@
  */
 
 import StorageManager from '../StorageManager';
-import {AuthClientConfig, CustomGrantConfig, FetchRequestConfig, FetchResponse, StrictAuthClientConfig} from './models';
+import {AuthClientConfig, FetchRequestConfig, FetchResponse, StrictAuthClientConfig} from './models';
 import {ExtendedAuthorizeRequestUrlParams} from '../models/oauth-request';
 import {Crypto} from '../models/crypto';
-import {TokenResponse, IdTokenPayload} from '../models/token';
+import {TokenResponse, IdTokenPayload, TokenExchangeRequestConfig} from '../models/token';
 import {OIDCEndpoints} from '../models/oidc-endpoints';
 import {Storage} from '../models/store';
 import ScopeConstants from '../constants/ScopeConstants';
@@ -894,7 +894,10 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public async exchangeToken(config: CustomGrantConfig, userId?: string): Promise<TokenResponse | FetchResponse> {
+  public async exchangeToken(
+    config: TokenExchangeRequestConfig,
+    userId?: string,
+  ): Promise<TokenResponse | FetchResponse> {
     const oidcProviderMetadata: OIDCDiscoveryApiResponse = await this._oidcProviderMetaData();
     const configData: StrictAuthClientConfig = await this._config();
 
diff --git a/packages/javascript/src/__legacy__/models/client-config.ts b/packages/javascript/src/__legacy__/models/client-config.ts
index a6538c398..8c9adb636 100644
--- a/packages/javascript/src/__legacy__/models/client-config.ts
+++ b/packages/javascript/src/__legacy__/models/client-config.ts
@@ -28,7 +28,7 @@ export interface DefaultAuthClientConfig {
   enablePKCE?: boolean;
   prompt?: string;
   responseMode?: OAuthResponseMode;
-  scope?: string[];
+  scopes?: string[];
   validateIDToken?: boolean;
   validateIDTokenIssuer?: boolean;
   /**
diff --git a/packages/javascript/src/__legacy__/models/custom-grant.ts b/packages/javascript/src/__legacy__/models/custom-grant.ts
deleted file mode 100644
index aedbf25d4..000000000
--- a/packages/javascript/src/__legacy__/models/custom-grant.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright (c) 2020, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-export interface CustomGrantConfig{
-    id: string;
-    data: any;
-    signInRequired: boolean;
-    attachToken: boolean;
-    returnsSession: boolean;
-    tokenEndpoint?: string;
-    shouldReplayAfterRefresh?: boolean;
-}
diff --git a/packages/javascript/src/__legacy__/models/index.ts b/packages/javascript/src/__legacy__/models/index.ts
index 729f3eedb..eeebf8375 100644
--- a/packages/javascript/src/__legacy__/models/index.ts
+++ b/packages/javascript/src/__legacy__/models/index.ts
@@ -17,5 +17,4 @@
  */
 
 export * from './client-config';
-export * from './custom-grant';
 export * from './fetch';
diff --git a/packages/javascript/src/models/token.ts b/packages/javascript/src/models/token.ts
index 009069551..5b95f4253 100644
--- a/packages/javascript/src/models/token.ts
+++ b/packages/javascript/src/models/token.ts
@@ -178,3 +178,13 @@ export interface IdTokenPayload extends IdTokenPayloadStandardClaims {
    */
   [claim: string]: any;
 }
+
+export interface TokenExchangeRequestConfig {
+  id: string;
+  data: any;
+  signInRequired: boolean;
+  attachToken: boolean;
+  returnsSession: boolean;
+  tokenEndpoint?: string;
+  shouldReplayAfterRefresh?: boolean;
+}
diff --git a/packages/node/src/__legacy__/client.ts b/packages/node/src/__legacy__/client.ts
index 12831dfa3..d9413591e 100644
--- a/packages/node/src/__legacy__/client.ts
+++ b/packages/node/src/__legacy__/client.ts
@@ -18,7 +18,7 @@
 
 import {
   AuthClientConfig,
-  CustomGrantConfig,
+  TokenExchangeRequestConfig,
   StorageManager,
   IdTokenPayload,
   FetchResponse,
@@ -262,7 +262,7 @@ export class AsgardeoNodeClient<T> {
   /**
      * This method returns Promise that resolves with the token information
      * or the response returned by the server depending on the configuration passed.
-     * @param {CustomGrantConfig} config - The config object contains attributes that would be used
+     * @param {TokenExchangeRequestConfig} config - The config object contains attributes that would be used
      * to configure the custom grant request.
      *
      * @param {string} userId - The userId of the user.
@@ -299,7 +299,10 @@ export class AsgardeoNodeClient<T> {
      * @memberof AsgardeoNodeClient
      *
      */
-  public async exchangeToken(config: CustomGrantConfig, userId?: string): Promise<TokenResponse | FetchResponse> {
+  public async exchangeToken(
+    config: TokenExchangeRequestConfig,
+    userId?: string,
+  ): Promise<TokenResponse | FetchResponse> {
     return this._authCore.exchangeToken(config, userId);
   }
 
diff --git a/packages/node/src/__legacy__/core/authentication.ts b/packages/node/src/__legacy__/core/authentication.ts
index ade82b4be..dcc77be8d 100644
--- a/packages/node/src/__legacy__/core/authentication.ts
+++ b/packages/node/src/__legacy__/core/authentication.ts
@@ -21,7 +21,7 @@ import {
   AsgardeoAuthException,
   AuthClientConfig,
   Crypto,
-  CustomGrantConfig,
+  TokenExchangeRequestConfig,
   StorageManager,
   IdTokenPayload,
   FetchResponse,
@@ -228,7 +228,10 @@ export class AsgardeoNodeCore<T> {
     return this._auth.getAccessToken(userId);
   }
 
-  public async exchangeToken(config: CustomGrantConfig, userId?: string): Promise<TokenResponse | FetchResponse> {
+  public async exchangeToken(
+    config: TokenExchangeRequestConfig,
+    userId?: string,
+  ): Promise<TokenResponse | FetchResponse> {
     return this._auth.exchangeToken(config, userId);
   }
 
diff --git a/packages/react/src/__temp__/models.ts b/packages/react/src/__temp__/models.ts
index 3753603ae..581bd6fc2 100644
--- a/packages/react/src/__temp__/models.ts
+++ b/packages/react/src/__temp__/models.ts
@@ -22,7 +22,7 @@ import {
   AuthSPAClientConfig,
   User,
   Config,
-  CustomGrantConfig,
+  TokenExchangeRequestConfig,
   IdTokenPayload,
   FetchResponse,
   Hooks,
@@ -92,7 +92,7 @@ export interface AuthContextInterface {
   getUser(): Promise<User>;
   httpRequest(config: HttpRequestConfig): Promise<HttpResponse<any>>;
   httpRequestAll(configs: HttpRequestConfig[]): Promise<HttpResponse<any>[]>;
-  exchangeToken(config: CustomGrantConfig, callback?: (response: User | FetchResponse<any>) => void): void;
+  exchangeToken(config: TokenExchangeRequestConfig, callback?: (response: User | FetchResponse<any>) => void): void;
   revokeAccessToken(): Promise<boolean>;
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   getHttpClient(): Promise<HttpClientInstance>;
diff --git a/packages/vue/src/plugins/AsgardeoPlugin.ts b/packages/vue/src/plugins/AsgardeoPlugin.ts
index c1b49a88e..9893d6414 100644
--- a/packages/vue/src/plugins/AsgardeoPlugin.ts
+++ b/packages/vue/src/plugins/AsgardeoPlugin.ts
@@ -20,7 +20,7 @@ import {
   AsgardeoAuthException,
   AuthClientConfig,
   Config,
-  CustomGrantConfig,
+  TokenExchangeRequestConfig,
   IdTokenPayload,
   FetchResponse,
   Hooks,
@@ -176,7 +176,7 @@ export const asgardeoPlugin: Plugin = {
       },
       refreshAccessToken: (): Promise<BasicUserInfo> => AuthClient.refreshAccessToken(),
       exchangeToken: async (
-        config: CustomGrantConfig,
+        config: TokenExchangeRequestConfig,
         callback?: (response: BasicUserInfo | FetchResponse<any>) => void,
       ): Promise<BasicUserInfo | FetchResponse<any>> => {
         try {
diff --git a/packages/vue/src/types.ts b/packages/vue/src/types.ts
index f8b624720..67b41ef00 100644
--- a/packages/vue/src/types.ts
+++ b/packages/vue/src/types.ts
@@ -22,7 +22,7 @@ import {
   AuthSPAClientConfig,
   BasicUserInfo,
   Config,
-  CustomGrantConfig,
+  TokenExchangeRequestConfig,
   IdTokenPayload,
   FetchResponse,
   Hooks,
@@ -107,7 +107,10 @@ export interface AuthContextInterface {
   on(hook: Exclude<Hooks, Hooks.CustomGrant>, callback: (response?: any) => void): void;
   on(hook: Hooks, callback: (response?: any) => void, id?: string): void;
   refreshAccessToken(): Promise<BasicUserInfo>;
-  exchangeToken(config: CustomGrantConfig, callback?: (response: BasicUserInfo | FetchResponse<any>) => void): void;
+  exchangeToken(
+    config: TokenExchangeRequestConfig,
+    callback?: (response: BasicUserInfo | FetchResponse<any>) => void,
+  ): void;
   revokeAccessToken(): Promise<boolean>;
   signIn: (
     config?: SignInConfig,

From bbc37670e9a3a587190724dc1c9f9953a2f9a6ac Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Sun, 15 Jun 2025 08:37:26 +0530
Subject: [PATCH 090/131] chore: refactor scope handling to use
 processOpenIDScopes utility for consistency across the codebase

---
 packages/javascript/src/__legacy__/client.ts  |  9 +--
 .../helpers/authentication-helper.ts          |  9 +--
 .../src/__legacy__/models/client-config.ts    |  2 +-
 .../src/constants/OIDCRequestConstants.ts     | 19 +++++-
 packages/javascript/src/index.ts              |  3 +-
 .../src/utils/getAuthorizeRequestUrlParams.ts | 26 +-------
 .../src/utils/processOpenIDScopes.ts          | 64 +++++++++++++++++++
 packages/react/src/AsgardeoReactClient.ts     |  2 +-
 packages/react/src/__temp__/api.ts            |  3 +-
 9 files changed, 96 insertions(+), 41 deletions(-)
 create mode 100644 packages/javascript/src/utils/processOpenIDScopes.ts

diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 61fe4d415..81594c626 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -39,6 +39,7 @@ import {OIDCDiscoveryApiResponse} from '../models/oidc-discovery';
 import getAuthorizeRequestUrlParams from '../utils/getAuthorizeRequestUrlParams';
 import PKCEConstants from '../constants/PKCEConstants';
 import {User} from '../models/user';
+import processOpenIDScopes from '../utils/processOpenIDScopes';
 
 /**
  * Default configurations.
@@ -47,7 +48,6 @@ const DefaultConfig: Partial<AuthClientConfig<unknown>> = {
   clockTolerance: 300,
   enablePKCE: true,
   responseMode: 'query',
-  scope: [ScopeConstants.OPENID],
   sendCookiesInRequests: true,
   validateIDToken: true,
   validateIDTokenIssuer: true,
@@ -143,10 +143,7 @@ export class AsgardeoAuthClient<T> {
     await this._storageManager.setConfigData({
       ...DefaultConfig,
       ...config,
-      scope: [
-        ...(DefaultConfig.scope ?? []),
-        ...(config.scope?.filter((scope: string) => !DefaultConfig?.scope?.includes(scope)) ?? []),
-      ],
+      scope: processOpenIDScopes(config.scopes),
     });
   }
 
@@ -244,7 +241,7 @@ export class AsgardeoAuthClient<T> {
         {
           redirectUri: configData.afterSignInUrl,
           clientId: configData.clientId,
-          scope: configData.scope as unknown as any,
+          scopes: processOpenIDScopes(configData.scopes),
           responseMode: configData.responseMode,
           codeChallengeMethod: PKCEConstants.DEFAULT_CODE_CHALLENGE_METHOD,
           codeChallenge,
diff --git a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
index 3ddd24307..b3b2283f1 100644
--- a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
@@ -32,6 +32,7 @@ import ScopeConstants from '../../constants/ScopeConstants';
 import OIDCDiscoveryConstants from '../../constants/OIDCDiscoveryConstants';
 import TokenExchangeConstants from '../../constants/TokenExchangeConstants';
 import {OIDCDiscoveryEndpointsApiResponse, OIDCDiscoveryApiResponse} from '../../models/oidc-discovery';
+import processOpenIDScopes from '../../utils/processOpenIDScopes';
 
 export class AuthenticationHelper<T> {
   private _storageManager: StorageManager<T>;
@@ -222,16 +223,10 @@ export class AuthenticationHelper<T> {
   }
 
   public async replaceCustomGrantTemplateTags(text: string, userId?: string): Promise<string> {
-    let scope: string = ScopeConstants.OPENID;
     const configData: StrictAuthClientConfig = await this._config();
     const sessionData: SessionData = await this._storageManager.getSessionData(userId);
 
-    if (configData.scope && configData.scope.length > 0) {
-      if (!configData.scope.includes(ScopeConstants.OPENID)) {
-        configData.scope.push(ScopeConstants.OPENID);
-      }
-      scope = configData.scope.join(' ');
-    }
+    let scope: string = processOpenIDScopes(configData.scopes);
 
     return text
       .replace(TokenExchangeConstants.Placeholders.TOKEN, sessionData.access_token)
diff --git a/packages/javascript/src/__legacy__/models/client-config.ts b/packages/javascript/src/__legacy__/models/client-config.ts
index 8c9adb636..61b86ca28 100644
--- a/packages/javascript/src/__legacy__/models/client-config.ts
+++ b/packages/javascript/src/__legacy__/models/client-config.ts
@@ -28,7 +28,7 @@ export interface DefaultAuthClientConfig {
   enablePKCE?: boolean;
   prompt?: string;
   responseMode?: OAuthResponseMode;
-  scopes?: string[];
+  scopes?: string | string[] | undefined;
   validateIDToken?: boolean;
   validateIDTokenIssuer?: boolean;
   /**
diff --git a/packages/javascript/src/constants/OIDCRequestConstants.ts b/packages/javascript/src/constants/OIDCRequestConstants.ts
index 652b05e77..88b39a478 100644
--- a/packages/javascript/src/constants/OIDCRequestConstants.ts
+++ b/packages/javascript/src/constants/OIDCRequestConstants.ts
@@ -16,6 +16,8 @@
  * under the License.
  */
 
+import ScopeConstants from "./ScopeConstants";
+
 /**
  * Constants representing standard OpenID Connect (OIDC) request and response parameters.
  * These parameters are commonly used during authorization, token exchange, and logout flows.
@@ -45,7 +47,22 @@ const OIDCRequestConstants = {
      */
     SIGN_OUT_SUCCESS: 'sign_out_success',
   },
-  
+
+  /**
+   * Constants related to the OpenID Connect (OIDC) sign-in flow.
+   */
+  SignIn: {
+    /**
+     * Constants related to the payload of the OIDC sign-in request.
+     */
+    Payload: {
+      /**
+       * The default scopes used in OIDC sign-in requests.
+       */
+      DEFAULT_SCOPES: [ScopeConstants.OPENID],
+    },
+  },
+
   /**
    * Sign-out related constants for managing the end-session flow in OIDC.
    */
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 04521bac4..195b06f6b 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -49,7 +49,7 @@ export {
 } from './models/application-native-authentication';
 export {AsgardeoClient, SignInOptions, SignOutOptions} from './models/client';
 export {BaseConfig, Config, Preferences, ThemePreferences, I18nPreferences, WithPreferences} from './models/config';
-export {TokenResponse, IdTokenPayload} from './models/token';
+export {TokenResponse, IdTokenPayload, TokenExchangeRequestConfig} from './models/token';
 export {Crypto, JWKInterface} from './models/crypto';
 export {OAuthResponseMode} from './models/oauth-response';
 export {
@@ -78,5 +78,6 @@ export {default as getI18nBundles} from './utils/getI18nBundles';
 export {default as removeTrailingSlash} from './utils/removeTrailingSlash';
 export {default as resolveFieldType} from './utils/resolveFieldType';
 export {default as resolveFieldName} from './utils/resolveFieldName';
+export {default as processOpenIDScopes} from './utils/processOpenIDScopes';
 
 export {default as StorageManager} from './StorageManager';
diff --git a/packages/javascript/src/utils/getAuthorizeRequestUrlParams.ts b/packages/javascript/src/utils/getAuthorizeRequestUrlParams.ts
index b5359f767..f588467c7 100644
--- a/packages/javascript/src/utils/getAuthorizeRequestUrlParams.ts
+++ b/packages/javascript/src/utils/getAuthorizeRequestUrlParams.ts
@@ -55,7 +55,7 @@ const getAuthorizeRequestUrlParams = (
   options: {
     redirectUri: string;
     clientId: string;
-    scope?: string | string[];
+    scopes?: string;
     responseMode?: string;
     codeChallenge?: string;
     codeChallengeMethod?: string;
@@ -64,33 +64,13 @@ const getAuthorizeRequestUrlParams = (
   pkceOptions: {key: string},
   customParams: Record<string, string | number | boolean>,
 ): Map<string, string> => {
-  const {redirectUri, clientId, scope, responseMode, codeChallenge, codeChallengeMethod, prompt} = options;
+  const {redirectUri, clientId, scopes, responseMode, codeChallenge, codeChallengeMethod, prompt} = options;
   const authorizeRequestParams: Map<string, string> = new Map<string, string>();
 
   authorizeRequestParams.set('response_type', 'code');
   authorizeRequestParams.set('client_id', clientId as string);
 
-  let resolvedScopes: string = ScopeConstants.OPENID;
-
-  if (scope) {
-    if (Array.isArray(scope)) {
-      if (!scope.includes(ScopeConstants.OPENID)) {
-        scope.push(ScopeConstants.OPENID);
-      }
-
-      resolvedScopes = scope.join(' ');
-    } else if (typeof scope === 'string') {
-      const scopesArray = scope.split(' ').filter(Boolean);
-
-      if (!scopesArray.includes(ScopeConstants.OPENID)) {
-        scopesArray.push(ScopeConstants.OPENID);
-      }
-
-      resolvedScopes = scopesArray.join(' ');
-    }
-  }
-
-  authorizeRequestParams.set('scope', resolvedScopes);
+  authorizeRequestParams.set('scope', scopes);
   authorizeRequestParams.set('redirect_uri', redirectUri as string);
 
   if (responseMode) {
diff --git a/packages/javascript/src/utils/processOpenIDScopes.ts b/packages/javascript/src/utils/processOpenIDScopes.ts
new file mode 100644
index 000000000..2c55ab969
--- /dev/null
+++ b/packages/javascript/src/utils/processOpenIDScopes.ts
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import OIDCRequestConstants from '../constants/OIDCRequestConstants';
+import AsgardeoRuntimeError from '../errors/AsgardeoRuntimeError';
+
+/**
+ * Processes OpenID scopes to ensure they are in the correct format.
+ * If the input is a string, it returns it as is.
+ * If the input is an array, it joins the elements into a single string separated by spaces.
+ * If the input is neither, it throws an error.
+ *
+ * @param scopes - The OpenID scopes to process, which can be a string or an array of strings.
+ * @returns A string of OpenID scopes separated by spaces.
+ *
+ * @example
+ * ```typescript
+ * processOpenIDScopes("openid profile email"); // returns "openid profile email"
+ * processOpenIDScopes(["openid", "profile", "email"]); // returns "openid profile email"
+ * processOpenIDScopes(123); // throws AsgardeoRuntimeError
+ * processOpenIDScopes({}); // throws AsgardeoRuntimeError
+ * ```
+ */
+const processOpenIDScopes = (scopes: string | string[]): string => {
+  let processedScopes: string[] = [];
+
+  if (Array.isArray(scopes)) {
+    processedScopes = scopes;
+  } else if (typeof scopes === 'string') {
+    processedScopes = scopes.split(' ');
+  } else {
+    throw new AsgardeoRuntimeError(
+      'Scopes must be a string or an array of strings.',
+      'processOpenIDScopes-Invalid-001',
+      'javascript',
+      'The provided scopes are not in the expected format. Please provide a string or an array of strings.',
+    );
+  }
+
+  OIDCRequestConstants.SignIn.Payload.DEFAULT_SCOPES.forEach((defaultScope: string) => {
+    if (!processedScopes.includes(defaultScope)) {
+      processedScopes.push(defaultScope);
+    }
+  });
+
+  return processedScopes.join(' ');
+};
+
+export default processOpenIDScopes;
diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index a464899d9..e903fadbd 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -51,7 +51,7 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
       baseUrl: config.baseUrl,
       clientId: config.clientId,
       afterSignInUrl: config.afterSignInUrl,
-      scope: [...scopes, 'internal_login'],
+      scopes: [...scopes, 'internal_login'],
     });
   }
 
diff --git a/packages/react/src/__temp__/api.ts b/packages/react/src/__temp__/api.ts
index 4fbee45b4..e9f7133ab 100644
--- a/packages/react/src/__temp__/api.ts
+++ b/packages/react/src/__temp__/api.ts
@@ -31,6 +31,7 @@ import {
   SignInConfig,
   SPACustomGrantConfig,
   initializeApplicationNativeAuthentication,
+  processOpenIDScopes
 } from '@asgardeo/browser';
 import {AuthStateInterface} from './models';
 
@@ -119,7 +120,7 @@ class AuthAPI {
           client_id: (await this.getConfigData())?.clientId,
           redirect_uri: (await this.getConfigData())?.afterSignInUrl,
           response_type: 'code',
-          scope: (await this.getConfigData())?.scope as any,
+          scope: processOpenIDScopes((await this.getConfigData())?.scopes) as any,
           response_mode: 'direct',
         },
       };

From 01926da591e2e0dc433652d7353901196e9377db Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Sun, 15 Jun 2025 16:20:56 +0530
Subject: [PATCH 091/131] chore: replace FetchResponse with Response across the
 codebase

---
 packages/browser/src/__legacy__/client.ts     |  3 +-
 .../__legacy__/clients/main-thread-client.ts  |  3 +-
 .../__legacy__/clients/web-worker-client.ts   |  5 +-
 .../helpers/authentication-helper.ts          |  7 +-
 .../browser/src/__legacy__/models/client.ts   |  5 +-
 .../src/__legacy__/models/web-worker.ts       |  3 +-
 .../src/__legacy__/worker/worker-core.ts      |  3 +-
 packages/express/src/__legacy__/client.ts     |  5 +-
 packages/javascript/src/__legacy__/client.ts  | 10 +--
 .../javascript/src/__legacy__/models/fetch.ts | 83 -------------------
 .../javascript/src/__legacy__/models/index.ts |  1 -
 packages/node/src/__legacy__/client.ts        |  9 +-
 .../src/__legacy__/core/authentication.ts     |  5 +-
 packages/react/src/__temp__/api.ts            | 13 ++-
 packages/react/src/__temp__/models.ts         |  3 +-
 packages/vue/src/auth-api.ts                  | 15 ++--
 packages/vue/src/plugins/AsgardeoPlugin.ts    |  7 +-
 packages/vue/src/tests/AsgardeoPlugin.test.ts |  3 +-
 packages/vue/src/tests/auth-api.test.ts       |  5 +-
 packages/vue/src/types.ts                     |  3 +-
 20 files changed, 45 insertions(+), 146 deletions(-)
 delete mode 100644 packages/javascript/src/__legacy__/models/fetch.ts

diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
index ba20eae86..289a15ac3 100755
--- a/packages/browser/src/__legacy__/client.ts
+++ b/packages/browser/src/__legacy__/client.ts
@@ -24,7 +24,6 @@ import {
   TokenExchangeRequestConfig,
   StorageManager,
   IdTokenPayload,
-  FetchResponse,
   OIDCEndpoints,
   User,
 } from '@asgardeo/javascript';
@@ -607,7 +606,7 @@ export class AsgardeoSPAClient {
    *
    * @preserve
    */
-  public async exchangeToken(config: TokenExchangeRequestConfig): Promise<FetchResponse<any> | User | undefined> {
+  public async exchangeToken(config: TokenExchangeRequestConfig): Promise<Response | User | undefined> {
     if (config.signInRequired) {
       await this._validateMethod();
     } else {
diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index a565ded12..ca09ad0af 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -23,7 +23,6 @@ import {
   IsomorphicCrypto,
   StorageManager,
   IdTokenPayload,
-  FetchResponse,
   ExtendedAuthorizeRequestUrlParams,
   OIDCEndpoints,
   OIDCRequestConstants,
@@ -279,7 +278,7 @@ export const MainThreadClient = async (
     }
   };
 
-  const exchangeToken = async (config: SPACustomGrantConfig): Promise<User | FetchResponse> => {
+  const exchangeToken = async (config: SPACustomGrantConfig): Promise<User | Response> => {
     return await _authenticationHelper.exchangeToken(config, enableRetrievingSignOutURLFromSession);
   };
 
diff --git a/packages/browser/src/__legacy__/clients/web-worker-client.ts b/packages/browser/src/__legacy__/clients/web-worker-client.ts
index f23adeada..84444cbd3 100755
--- a/packages/browser/src/__legacy__/clients/web-worker-client.ts
+++ b/packages/browser/src/__legacy__/clients/web-worker-client.ts
@@ -24,7 +24,6 @@ import {
   IsomorphicCrypto,
   TokenExchangeRequestConfig,
   IdTokenPayload,
-  FetchResponse,
   ExtendedAuthorizeRequestUrlParams,
   OIDCEndpoints,
   OIDCRequestConstants,
@@ -188,13 +187,13 @@ export const WebWorkerClient = async (
    * @returns {Promise<HttpResponse|boolean>} A promise that resolves with a boolean value or the request
    * response if the the `returnResponse` attribute in the `requestParams` object is set to `true`.
    */
-  const exchangeToken = (requestParams: SPACustomGrantConfig): Promise<FetchResponse | User> => {
+  const exchangeToken = (requestParams: SPACustomGrantConfig): Promise<Response | User> => {
     const message: Message<TokenExchangeRequestConfig> = {
       data: requestParams,
       type: REQUEST_CUSTOM_GRANT,
     };
 
-    return communicate<TokenExchangeRequestConfig, FetchResponse | User>(message)
+    return communicate<TokenExchangeRequestConfig, Response | User>(message)
       .then(response => {
         if (requestParams.preventSignOutURLUpdate) {
           _getSignOutURLFromSessionStorage = true;
diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
index b63b26b18..0763ba273 100644
--- a/packages/browser/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -25,7 +25,6 @@ import {
   TokenExchangeRequestConfig,
   StorageManager,
   IdTokenPayload,
-  FetchResponse,
   ExtendedAuthorizeRequestUrlParams,
   OIDCEndpoints,
   TokenResponse,
@@ -103,7 +102,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
   public async exchangeToken(
     config: SPACustomGrantConfig,
     enableRetrievingSignOutURLFromSession?: (config: SPACustomGrantConfig) => void,
-  ): Promise<User | FetchResponse> {
+  ): Promise<User | Response> {
     let useDefaultEndpoint = true;
     let matches = false;
 
@@ -127,7 +126,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     if (useDefaultEndpoint || matches) {
       return this._authenticationClient
         .exchangeToken(config)
-        .then(async (response: FetchResponse | TokenResponse) => {
+        .then(async (response: Response | TokenResponse) => {
           if (enableRetrievingSignOutURLFromSession && typeof enableRetrievingSignOutURLFromSession === 'function') {
             enableRetrievingSignOutURLFromSession(config);
           }
@@ -137,7 +136,7 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
 
             return this._authenticationClient.getUser();
           } else {
-            return response as FetchResponse;
+            return response as Response;
           }
         })
         .catch(error => {
diff --git a/packages/browser/src/__legacy__/models/client.ts b/packages/browser/src/__legacy__/models/client.ts
index 2be74371b..3eac33889 100755
--- a/packages/browser/src/__legacy__/models/client.ts
+++ b/packages/browser/src/__legacy__/models/client.ts
@@ -23,7 +23,6 @@ import {
   TokenExchangeRequestConfig,
   StorageManager,
   IdTokenPayload,
-  FetchResponse,
   OIDCEndpoints,
 } from '@asgardeo/javascript';
 import {
@@ -56,7 +55,7 @@ export interface MainThreadClientInterface {
     },
   ): Promise<User>;
   signOut(afterSignOutUrl?: string): Promise<boolean>;
-  exchangeToken(config: TokenExchangeRequestConfig): Promise<User | FetchResponse>;
+  exchangeToken(config: TokenExchangeRequestConfig): Promise<User | Response>;
   refreshAccessToken(): Promise<User>;
   revokeAccessToken(): Promise<boolean>;
   getUser(): Promise<User>;
@@ -77,7 +76,7 @@ export interface MainThreadClientInterface {
 }
 
 export interface WebWorkerClientInterface {
-  exchangeToken(requestParams: TokenExchangeRequestConfig): Promise<FetchResponse | User>;
+  exchangeToken(requestParams: TokenExchangeRequestConfig): Promise<Response | User>;
   httpRequest<T = any>(config: HttpRequestConfig): Promise<HttpResponse<T>>;
   httpRequestAll<T = any>(configs: HttpRequestConfig[]): Promise<HttpResponse<T>[]>;
   enableHttpHandler(): Promise<boolean>;
diff --git a/packages/browser/src/__legacy__/models/web-worker.ts b/packages/browser/src/__legacy__/models/web-worker.ts
index 837559c9e..0df884874 100755
--- a/packages/browser/src/__legacy__/models/web-worker.ts
+++ b/packages/browser/src/__legacy__/models/web-worker.ts
@@ -23,7 +23,6 @@ import {
   IsomorphicCrypto,
   TokenExchangeRequestConfig,
   IdTokenPayload,
-  FetchResponse,
   OIDCEndpoints,
 } from '@asgardeo/javascript';
 import {HttpRequestConfig, HttpResponse, Message} from '.';
@@ -49,7 +48,7 @@ export interface WebWorkerCoreInterface {
   requestAccessToken(authorizationCode?: string, sessionState?: string, pkce?: string, state?: string): Promise<User>;
   signOut(afterSignOutUrl?: string): Promise<string>;
   getSignOutUrl(afterSignOutUrl?: string): Promise<string>;
-  exchangeToken(config: TokenExchangeRequestConfig): Promise<User | FetchResponse>;
+  exchangeToken(config: TokenExchangeRequestConfig): Promise<User | Response>;
   refreshAccessToken(): Promise<User>;
   revokeAccessToken(): Promise<boolean>;
   getUser(): Promise<User>;
diff --git a/packages/browser/src/__legacy__/worker/worker-core.ts b/packages/browser/src/__legacy__/worker/worker-core.ts
index c0dc611d0..ec1ddc120 100755
--- a/packages/browser/src/__legacy__/worker/worker-core.ts
+++ b/packages/browser/src/__legacy__/worker/worker-core.ts
@@ -24,7 +24,6 @@ import {
   IsomorphicCrypto,
   TokenExchangeRequestConfig,
   IdTokenPayload,
-  FetchResponse,
   OIDCEndpoints,
   OIDCRequestConstants,
   SessionData,
@@ -138,7 +137,7 @@ export const WebWorkerCore = async (
     return await _authenticationClient.getSignOutUrl();
   };
 
-  const exchangeToken = async (config: TokenExchangeRequestConfig): Promise<User | FetchResponse> => {
+  const exchangeToken = async (config: TokenExchangeRequestConfig): Promise<User | Response> => {
     return await _authenticationHelper.exchangeToken(config);
   };
 
diff --git a/packages/express/src/__legacy__/client.ts b/packages/express/src/__legacy__/client.ts
index accf748e3..ebd797022 100644
--- a/packages/express/src/__legacy__/client.ts
+++ b/packages/express/src/__legacy__/client.ts
@@ -26,7 +26,6 @@ import {
   OIDCEndpoints,
   IdTokenPayload,
   TokenExchangeRequestConfig,
-  FetchResponse,
   AsgardeoAuthException,
   Logger,
 } from '@asgardeo/node';
@@ -185,7 +184,7 @@ export class AsgardeoExpressClient {
   public async exchangeToken(
     config: TokenExchangeRequestConfig,
     userId?: string,
-  ): Promise<TokenResponse | FetchResponse> {
+  ): Promise<TokenResponse | Response> {
     return this._authClient.exchangeToken(config, userId);
   }
 
@@ -193,7 +192,7 @@ export class AsgardeoExpressClient {
     return this._authClient.reInitialize(config);
   }
 
-  public async revokeAccessToken(userId?: string): Promise<FetchResponse> {
+  public async revokeAccessToken(userId?: string): Promise<Response> {
     return this._authClient.revokeAccessToken(userId);
   }
 
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 81594c626..3de479fd0 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -17,7 +17,7 @@
  */
 
 import StorageManager from '../StorageManager';
-import {AuthClientConfig, FetchRequestConfig, FetchResponse, StrictAuthClientConfig} from './models';
+import {AuthClientConfig, StrictAuthClientConfig} from './models';
 import {ExtendedAuthorizeRequestUrlParams} from '../models/oauth-request';
 import {Crypto} from '../models/crypto';
 import {TokenResponse, IdTokenPayload, TokenExchangeRequestConfig} from '../models/token';
@@ -690,7 +690,7 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public async revokeAccessToken(userId?: string): Promise<FetchResponse> {
+  public async revokeAccessToken(userId?: string): Promise<Response> {
     const revokeTokenEndpoint: string | undefined = (await this._oidcProviderMetaData()).revocation_endpoint;
     const configData: StrictAuthClientConfig = await this._config();
 
@@ -894,7 +894,7 @@ export class AsgardeoAuthClient<T> {
   public async exchangeToken(
     config: TokenExchangeRequestConfig,
     userId?: string,
-  ): Promise<TokenResponse | FetchResponse> {
+  ): Promise<TokenResponse | Response> {
     const oidcProviderMetadata: OIDCDiscoveryApiResponse = await this._oidcProviderMetaData();
     const configData: StrictAuthClientConfig = await this._config();
 
@@ -938,7 +938,7 @@ export class AsgardeoAuthClient<T> {
       };
     }
 
-    const requestConfig: FetchRequestConfig = {
+    const requestConfig: RequestInit = {
       body: data.join('&'),
       credentials: configData.sendCookiesInRequests ? 'include' : 'same-origin',
       headers: new Headers(requestHeaders),
@@ -968,7 +968,7 @@ export class AsgardeoAuthClient<T> {
     if (config.returnsSession) {
       return this._authenticationHelper.handleTokenResponse(response, userId);
     } else {
-      return Promise.resolve((await response.json()) as TokenResponse | FetchResponse);
+      return Promise.resolve((await response.json()) as TokenResponse | Response);
     }
   }
 
diff --git a/packages/javascript/src/__legacy__/models/fetch.ts b/packages/javascript/src/__legacy__/models/fetch.ts
deleted file mode 100644
index ac7cf35d4..000000000
--- a/packages/javascript/src/__legacy__/models/fetch.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * Copyright (c) 2020, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-export type Method =
-    | "get"
-    | "GET"
-    | "delete"
-    | "DELETE"
-    | "head"
-    | "HEAD"
-    | "options"
-    | "OPTIONS"
-    | "post"
-    | "POST"
-    | "put"
-    | "PUT"
-    | "patch"
-    | "PATCH"
-    | "purge"
-    | "PURGE"
-    | "link"
-    | "LINK"
-    | "unlink"
-    | "UNLINK";
-
-export type FetchCredentials = "omit" | "same-origin" | "include";
-
-export type FetchRedirect = "follow" | "error" | "manual";
-
-export interface FetchRequestConfig extends RequestInit {
-    method?: Method;
-    url?: string;
-    credentials?: FetchCredentials;
-    body?: any; // FIXME: Add proper type
-    bodyUsed?: boolean;
-    cache?: any; // FIXME: Add proper type
-    destination?: string;
-    integrity?: string;
-    mode?: any; // FIXME: Add proper type
-    redirect?: FetchRedirect;
-    referrer?: string;
-    referrerPolicy?: any;
-}
-
-export interface FetchResponse<T = any> extends ResponseInit {
-    body: T;
-    ok: boolean;
-    bodyUsed?: boolean;
-    redirected?: boolean;
-    type: any; // FIXME: Add proper type
-    url: string;
-    //TODO: Implement trailer property once the MDN docs are completed
-    json();
-    text();
-    formData();
-    blob();
-    arrayBuffer();
-}
-
-export interface FetchError<T = any> extends Error {
-    config: FetchRequestConfig;
-    code?: string;
-    request?: any;
-    response?: FetchResponse<T>;
-    isFetchError: boolean;
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    toJSON: () => object;
-}
diff --git a/packages/javascript/src/__legacy__/models/index.ts b/packages/javascript/src/__legacy__/models/index.ts
index eeebf8375..2d461ba29 100644
--- a/packages/javascript/src/__legacy__/models/index.ts
+++ b/packages/javascript/src/__legacy__/models/index.ts
@@ -17,4 +17,3 @@
  */
 
 export * from './client-config';
-export * from './fetch';
diff --git a/packages/node/src/__legacy__/client.ts b/packages/node/src/__legacy__/client.ts
index d9413591e..00406486a 100644
--- a/packages/node/src/__legacy__/client.ts
+++ b/packages/node/src/__legacy__/client.ts
@@ -21,7 +21,6 @@ import {
   TokenExchangeRequestConfig,
   StorageManager,
   IdTokenPayload,
-  FetchResponse,
   OIDCEndpoints,
   Storage,
   TokenResponse,
@@ -268,7 +267,7 @@ export class AsgardeoNodeClient<T> {
      * @param {string} userId - The userId of the user.
      * (If you are using ExpressJS, you may get this from the request cookies)
      *
-     * @return {Promise<TokenResponse | FetchResponse>} -A Promise that resolves with the token information
+     * @return {Promise<TokenResponse | Response>} -A Promise that resolves with the token information
      * or the response returned by the server depending on the configuration passed.
      *
      * @example
@@ -302,7 +301,7 @@ export class AsgardeoNodeClient<T> {
   public async exchangeToken(
     config: TokenExchangeRequestConfig,
     userId?: string,
-  ): Promise<TokenResponse | FetchResponse> {
+  ): Promise<TokenResponse | Response> {
     return this._authCore.exchangeToken(config, userId);
   }
 
@@ -334,7 +333,7 @@ export class AsgardeoNodeClient<T> {
    * @param {string} userId - The userId of the user.
    * (If you are using ExpressJS, you may get this from the request cookies)
    *
-   * @return {Promise<FetchResponse>} -A Promise that resolves with the response returned by the server.
+   * @return {Promise<Response>} -A Promise that resolves with the response returned by the server.
    *
    * @example
    * ```
@@ -346,7 +345,7 @@ export class AsgardeoNodeClient<T> {
    * @memberof AsgardeoNodeClient
    *
    */
-  public async revokeAccessToken(userId?: string): Promise<FetchResponse> {
+  public async revokeAccessToken(userId?: string): Promise<Response> {
     return this._authCore.revokeAccessToken(userId);
   }
 
diff --git a/packages/node/src/__legacy__/core/authentication.ts b/packages/node/src/__legacy__/core/authentication.ts
index dcc77be8d..f4be26a7c 100644
--- a/packages/node/src/__legacy__/core/authentication.ts
+++ b/packages/node/src/__legacy__/core/authentication.ts
@@ -24,7 +24,6 @@ import {
   TokenExchangeRequestConfig,
   StorageManager,
   IdTokenPayload,
-  FetchResponse,
   OIDCEndpoints,
   SessionData,
   Storage,
@@ -231,7 +230,7 @@ export class AsgardeoNodeCore<T> {
   public async exchangeToken(
     config: TokenExchangeRequestConfig,
     userId?: string,
-  ): Promise<TokenResponse | FetchResponse> {
+  ): Promise<TokenResponse | Response> {
     return this._auth.exchangeToken(config, userId);
   }
 
@@ -239,7 +238,7 @@ export class AsgardeoNodeCore<T> {
     return this._auth.reInitialize(config);
   }
 
-  public async revokeAccessToken(userId?: string): Promise<FetchResponse> {
+  public async revokeAccessToken(userId?: string): Promise<Response> {
     return this._auth.revokeAccessToken(userId);
   }
 
diff --git a/packages/react/src/__temp__/api.ts b/packages/react/src/__temp__/api.ts
index e9f7133ab..7a313018c 100644
--- a/packages/react/src/__temp__/api.ts
+++ b/packages/react/src/__temp__/api.ts
@@ -22,7 +22,6 @@ import {
   User,
   LegacyConfig as Config,
   IdTokenPayload,
-  FetchResponse,
   Hooks,
   HttpClientInstance,
   HttpRequestConfig,
@@ -210,7 +209,7 @@ class AuthAPI {
    *
    * @param {HttpRequestConfig} config -  The config object containing attributes necessary to send a request.
    *
-   * @return {Promise<FetchResponse>} - Returns a Promise that resolves with the response to the request.
+   * @return {Promise<Response>} - Returns a Promise that resolves with the response to the request.
    */
   public async httpRequest(config: HttpRequestConfig): Promise<HttpResponse<any>> {
     return this._client.httpRequest(config);
@@ -224,7 +223,7 @@ class AuthAPI {
    *
    * @param {HttpRequestConfig[]} config -  The config object containing attributes necessary to send a request.
    *
-   * @return {Promise<FetchResponse[]>} - Returns a Promise that resolves with the responses to the requests.
+   * @return {Promise<Response>} - Returns a Promise that resolves with the responses to the requests.
    */
   public async httpRequestAll(configs: HttpRequestConfig[]): Promise<HttpResponse<any>[]> {
     return this._client.httpRequestAll(configs);
@@ -235,17 +234,17 @@ class AuthAPI {
    *
    * @param {CustomGrantRequestParams} config - The request parameters.
    *
-   * @return {Promise<FetchResponse<any> | SignInResponse>} - A Promise that resolves with
+   * @return {Promise<Response | SignInResponse>} - A Promise that resolves with
    * the value returned by the custom grant request.
    */
   public exchangeToken(
     config: SPACustomGrantConfig,
-    callback: (response: User | FetchResponse<any>) => void,
+    callback: (response: User | Response) => void,
     dispatch: (state: AuthStateInterface) => void,
-  ): Promise<User | FetchResponse<any>> {
+  ): Promise<User | Response> {
     return this._client
       .exchangeToken(config)
-      .then((response: User | FetchResponse<any>) => {
+      .then((response: User | Response) => {
         if (!response) {
           return null; // FIXME: Validate this. Temp fix for: error TS7030: Not all code paths return a value.
         }
diff --git a/packages/react/src/__temp__/models.ts b/packages/react/src/__temp__/models.ts
index 581bd6fc2..54800c149 100644
--- a/packages/react/src/__temp__/models.ts
+++ b/packages/react/src/__temp__/models.ts
@@ -24,7 +24,6 @@ import {
   Config,
   TokenExchangeRequestConfig,
   IdTokenPayload,
-  FetchResponse,
   Hooks,
   HttpClientInstance,
   HttpRequestConfig,
@@ -92,7 +91,7 @@ export interface AuthContextInterface {
   getUser(): Promise<User>;
   httpRequest(config: HttpRequestConfig): Promise<HttpResponse<any>>;
   httpRequestAll(configs: HttpRequestConfig[]): Promise<HttpResponse<any>[]>;
-  exchangeToken(config: TokenExchangeRequestConfig, callback?: (response: User | FetchResponse<any>) => void): void;
+  exchangeToken(config: TokenExchangeRequestConfig, callback?: (response: User | Response) => void): void;
   revokeAccessToken(): Promise<boolean>;
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   getHttpClient(): Promise<HttpClientInstance>;
diff --git a/packages/vue/src/auth-api.ts b/packages/vue/src/auth-api.ts
index fd7a71e08..c417c4f09 100644
--- a/packages/vue/src/auth-api.ts
+++ b/packages/vue/src/auth-api.ts
@@ -23,7 +23,6 @@ import {
   BasicUserInfo,
   Config,
   IdTokenPayload,
-  FetchResponse,
   Hooks,
   HttpClientInstance,
   HttpRequestConfig,
@@ -152,7 +151,7 @@ class AuthAPI {
    *
    * @param {HttpRequestConfig} config - The config object containing attributes necessary to send a request.
    *
-   * @return {Promise<FetchResponse>} - Returns a Promise that resolves with the response to the request.
+   * @return {Promise<Response>} - Returns a Promise that resolves with the response to the request.
    */
   public async httpRequest(config: HttpRequestConfig): Promise<HttpResponse<any>> {
     return this._client.httpRequest(config);
@@ -166,7 +165,7 @@ class AuthAPI {
    *
    * @param {HttpRequestConfig[]} configs - The config object containing attributes necessary to send a request.
    *
-   * @return {Promise<FetchResponse[]>} a Promise that resolves with the responses to the requests.
+   * @return {Promise<Response>} a Promise that resolves with the responses to the requests.
    */
   public async httpRequestAll(configs: HttpRequestConfig[]): Promise<HttpResponse<any>[]> {
     return this._client.httpRequestAll(configs);
@@ -176,18 +175,18 @@ class AuthAPI {
    * This method allows you to send a request with a custom grant.
    *
    * @param {CustomGrantRequestParams} config - The request parameters.
-   * @param {(response: BasicUserInfo | FetchResponse<any>) => void} [callback] - An optional callback function.
+   * @param {(response: BasicUserInfo | Response) => void} [callback] - An optional callback function.
    *
-   * @return {Promise<FetchResponse<any> | SignInResponse>} a promise that resolves with
+   * @return {Promise<Response | SignInResponse>} a promise that resolves with
    * the value returned by the custom grant request.
    */
   public exchangeToken(
     config: SPACustomGrantConfig,
-    callback?: (response: BasicUserInfo | FetchResponse<any>) => void,
-  ): Promise<BasicUserInfo | FetchResponse<any>> {
+    callback?: (response: BasicUserInfo | Response) => void,
+  ): Promise<BasicUserInfo | Response> {
     return this._client
       .exchangeToken(config)
-      .then((response: BasicUserInfo | FetchResponse<any>) => {
+      .then((response: BasicUserInfo | Response) => {
         if (!response) {
           return response;
         }
diff --git a/packages/vue/src/plugins/AsgardeoPlugin.ts b/packages/vue/src/plugins/AsgardeoPlugin.ts
index 9893d6414..2abb03d0e 100644
--- a/packages/vue/src/plugins/AsgardeoPlugin.ts
+++ b/packages/vue/src/plugins/AsgardeoPlugin.ts
@@ -22,7 +22,6 @@ import {
   Config,
   TokenExchangeRequestConfig,
   IdTokenPayload,
-  FetchResponse,
   Hooks,
   HttpClientInstance,
   HttpRequestConfig,
@@ -177,10 +176,10 @@ export const asgardeoPlugin: Plugin = {
       refreshAccessToken: (): Promise<BasicUserInfo> => AuthClient.refreshAccessToken(),
       exchangeToken: async (
         config: TokenExchangeRequestConfig,
-        callback?: (response: BasicUserInfo | FetchResponse<any>) => void,
-      ): Promise<BasicUserInfo | FetchResponse<any>> => {
+        callback?: (response: BasicUserInfo | Response) => void,
+      ): Promise<BasicUserInfo | Response> => {
         try {
-          const response: BasicUserInfo | FetchResponse<any> = await AuthClient.exchangeToken(config);
+          const response: BasicUserInfo | Response = await AuthClient.exchangeToken(config);
           callback?.(response);
           return response;
         } catch (err) {
diff --git a/packages/vue/src/tests/AsgardeoPlugin.test.ts b/packages/vue/src/tests/AsgardeoPlugin.test.ts
index d93b82900..0fb32f5c1 100644
--- a/packages/vue/src/tests/AsgardeoPlugin.test.ts
+++ b/packages/vue/src/tests/AsgardeoPlugin.test.ts
@@ -21,7 +21,6 @@ import {
   BasicUserInfo,
   Config,
   IdTokenPayload,
-  FetchResponse,
   Hooks,
   HttpClientInstance,
   SPACustomGrantConfig,
@@ -248,7 +247,7 @@ describe('asgardeoPlugin', () => {
       signInRequired: true,
     };
 
-    const customGrantResponse: BasicUserInfo | FetchResponse<any> = {
+    const customGrantResponse: BasicUserInfo | Response = {
       allowedScopes: 'openid',
       sessionState: 'test',
     };
diff --git a/packages/vue/src/tests/auth-api.test.ts b/packages/vue/src/tests/auth-api.test.ts
index 7e38ca356..fb9774dc4 100644
--- a/packages/vue/src/tests/auth-api.test.ts
+++ b/packages/vue/src/tests/auth-api.test.ts
@@ -22,7 +22,6 @@ import {
   type BasicUserInfo,
   type Config,
   type IdTokenPayload,
-  type FetchResponse,
   Hooks,
   type HttpRequestConfig,
   type HttpResponse,
@@ -232,7 +231,7 @@ describe('AuthAPI', () => {
       };
       const callback: Mock = vi.fn();
 
-      const result: BasicUserInfo | FetchResponse<any> = await authApi.exchangeToken(config, callback);
+      const result: BasicUserInfo | Response = await authApi.exchangeToken(config, callback);
 
       expect(mockClient.exchangeToken).toHaveBeenCalledWith(config);
       expect(callback).toHaveBeenCalledWith(result);
@@ -273,7 +272,7 @@ describe('AuthAPI', () => {
         signInRequired: true,
       };
 
-      const result: BasicUserInfo | FetchResponse<any> = await authApi.exchangeToken(config);
+      const result: BasicUserInfo | Response = await authApi.exchangeToken(config);
       expect(result).toBeNull();
     });
 
diff --git a/packages/vue/src/types.ts b/packages/vue/src/types.ts
index 67b41ef00..eb5193879 100644
--- a/packages/vue/src/types.ts
+++ b/packages/vue/src/types.ts
@@ -24,7 +24,6 @@ import {
   Config,
   TokenExchangeRequestConfig,
   IdTokenPayload,
-  FetchResponse,
   Hooks,
   HttpClientInstance,
   HttpRequestConfig,
@@ -109,7 +108,7 @@ export interface AuthContextInterface {
   refreshAccessToken(): Promise<BasicUserInfo>;
   exchangeToken(
     config: TokenExchangeRequestConfig,
-    callback?: (response: BasicUserInfo | FetchResponse<any>) => void,
+    callback?: (response: BasicUserInfo | Response) => void,
   ): void;
   revokeAccessToken(): Promise<boolean>;
   signIn: (

From 03c49fb71538dce7145ab953e1733ecedabcdf4a Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Sun, 15 Jun 2025 18:35:52 +0530
Subject: [PATCH 092/131] chore(react): enhance user profile handling with
 flattening and dynamic attribute setting

---
 packages/javascript/src/index.ts              |  6 +-
 .../javascript/src/models/scim2-schema.ts     |  4 +
 packages/javascript/src/models/user.ts        |  2 +-
 .../javascript/src/utils/flattenUserSchema.ts | 93 +++++++++++++++++++
 .../src/utils/generateFlatUserProfile.ts      | 88 ++++++++++++++++++
 packages/javascript/src/utils/get.ts          | 41 ++++++++
 packages/javascript/src/utils/set.ts          | 52 +++++++++++
 packages/javascript/tsconfig.lib.json         |  2 +-
 packages/react/src/AsgardeoReactClient.ts     |  2 +
 packages/react/src/utils/getUserProfile.ts    | 81 +++++-----------
 10 files changed, 309 insertions(+), 62 deletions(-)
 create mode 100644 packages/javascript/src/utils/flattenUserSchema.ts
 create mode 100644 packages/javascript/src/utils/generateFlatUserProfile.ts
 create mode 100644 packages/javascript/src/utils/get.ts
 create mode 100644 packages/javascript/src/utils/set.ts

diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 195b06f6b..f64b05a03 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -61,7 +61,7 @@ export {OIDCEndpoints} from './models/oidc-endpoints';
 export {Storage} from './models/store';
 export {User} from './models/user';
 export {SessionData} from './models/session';
-export {Schema, SchemaAttribute, WellKnownSchemaIds} from './models/scim2-schema';
+export {Schema, SchemaAttribute, WellKnownSchemaIds, FlattenedSchema} from './models/scim2-schema';
 export {RecursivePartial} from './models/utility-types';
 export {FieldType} from './models/field';
 export {I18nBundle, I18nTranslations, I18nMetadata} from './models/i18n';
@@ -74,7 +74,11 @@ export {ThemeColors, ThemeConfig, Theme, ThemeMode} from './theme/types';
 export {default as deepMerge} from './utils/deepMerge';
 export {default as extractUserClaimsFromIdToken} from './utils/extractUserClaimsFromIdToken';
 export {default as extractPkceStorageKeyFromState} from './utils/extractPkceStorageKeyFromState';
+export {default as flattenSchemaAttributes} from './utils/flattenUserSchema';
+export {default as generateFlatUserProfile} from './utils/generateFlatUserProfile';
 export {default as getI18nBundles} from './utils/getI18nBundles';
+export {default as set} from './utils/set';
+export {default as get} from './utils/get';
 export {default as removeTrailingSlash} from './utils/removeTrailingSlash';
 export {default as resolveFieldType} from './utils/resolveFieldType';
 export {default as resolveFieldName} from './utils/resolveFieldName';
diff --git a/packages/javascript/src/models/scim2-schema.ts b/packages/javascript/src/models/scim2-schema.ts
index 697debd54..0a6fe2007 100644
--- a/packages/javascript/src/models/scim2-schema.ts
+++ b/packages/javascript/src/models/scim2-schema.ts
@@ -48,6 +48,10 @@ export interface Schema {
   attributes: SchemaAttribute[];
 }
 
+export interface FlattenedSchema extends Schema {
+  schemaId: string;
+}
+
 /**
  * Well-known SCIM2 schema IDs
  */
diff --git a/packages/javascript/src/models/user.ts b/packages/javascript/src/models/user.ts
index d6f9f5532..fcac468e9 100644
--- a/packages/javascript/src/models/user.ts
+++ b/packages/javascript/src/models/user.ts
@@ -17,7 +17,7 @@
  */
 
 export interface KnownUser {
-  username: string;
+  username?: string;
   email?: string;
   givenName?: string;
   familyName?: string;
diff --git a/packages/javascript/src/utils/flattenUserSchema.ts b/packages/javascript/src/utils/flattenUserSchema.ts
new file mode 100644
index 000000000..da26b96ed
--- /dev/null
+++ b/packages/javascript/src/utils/flattenUserSchema.ts
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {Schema, FlattenedSchema} from '../models/scim2-schema';
+
+/**
+ * Flattens nested schema attributes into a flat structure for easier processing
+ *
+ * This function processes SCIM2 schemas and creates a flattened representation by:
+ * - Extracting all top-level attributes from each schema
+ * - Processing sub-attributes and creating dot-notation names (e.g., 'name.givenName')
+ * - Adding schema ID reference to each flattened attribute
+ * - Preserving all original attribute properties while adding schema context
+ *
+ * @param schemas - Array of SCIM2 schemas containing nested attribute structures
+ * @returns Array of flattened schema attributes with dot-notation names and schema references
+ *
+ * @example
+ * ```typescript
+ * const schemas = [
+ *   {
+ *     id: 'urn:ietf:params:scim:schemas:core:2.0:User',
+ *     attributes: [
+ *       {
+ *         name: 'userName',
+ *         type: 'string',
+ *         multiValued: false
+ *       },
+ *       {
+ *         name: 'name',
+ *         type: 'complex',
+ *         multiValued: false,
+ *         subAttributes: [
+ *           { name: 'givenName', type: 'string', multiValued: false },
+ *           { name: 'familyName', type: 'string', multiValued: false }
+ *         ]
+ *       }
+ *     ]
+ *   }
+ * ];
+ *
+ * const flattened = flattenSchemaAttributes(schemas);
+ * // Result: [
+ * //   { name: 'userName', type: 'string', multiValued: false, schemaId: 'urn:ietf:params:scim:schemas:core:2.0:User' },
+ * //   { name: 'name', type: 'complex', multiValued: false, schemaId: 'urn:ietf:params:scim:schemas:core:2.0:User' },
+ * //   { name: 'name.givenName', type: 'string', multiValued: false, schemaId: 'urn:ietf:params:scim:schemas:core:2.0:User' },
+ * //   { name: 'name.familyName', type: 'string', multiValued: false, schemaId: 'urn:ietf:params:scim:schemas:core:2.0:User' }
+ * // ]
+ * ```
+ */
+const flattenSchemaAttributes = (schemas: Schema[]): FlattenedSchema[] => {
+  const flattenedAttributes: FlattenedSchema[] = [];
+
+  schemas.forEach(schema => {
+    if (schema.attributes && Array.isArray(schema.attributes)) {
+      schema.attributes.forEach(attribute => {
+        flattenedAttributes.push({
+          ...attribute,
+          schemaId: schema.id,
+        } as unknown as FlattenedSchema);
+
+        if (attribute.subAttributes && Array.isArray(attribute.subAttributes)) {
+          attribute.subAttributes.forEach(subAttribute => {
+            flattenedAttributes.push({
+              ...subAttribute,
+              name: `${attribute.name}.${subAttribute.name}`,
+              schemaId: schema.id,
+            } as unknown as FlattenedSchema);
+          });
+        }
+      });
+    }
+  });
+
+  return flattenedAttributes;
+};
+
+export default flattenSchemaAttributes;
diff --git a/packages/javascript/src/utils/generateFlatUserProfile.ts b/packages/javascript/src/utils/generateFlatUserProfile.ts
new file mode 100644
index 000000000..1b4ff4a8a
--- /dev/null
+++ b/packages/javascript/src/utils/generateFlatUserProfile.ts
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import get from './get';
+import set from './set';
+import {User} from '../models/user';
+
+/**
+ * Creates a flat profile structure from ME response based on processed schemas
+ *
+ * This function processes each schema attribute and populates the profile dynamically by:
+ * - Extracting values from the ME response using the schema attribute names
+ * - Handling multi-valued attributes by converting single values to arrays when needed
+ * - Setting appropriate default values based on schema type and multiValued properties
+ * - Using dynamic property setting to build the final profile object
+ *
+ * @param meResponse - The ME API response containing user data
+ * @param processedSchemas - The processed and flattened schemas with name, type, and multiValued properties
+ * @returns Flat profile object with dynamically populated user attributes
+ *
+ * @example
+ * ```typescript
+ * const meResponse = {
+ *   userName: 'john.doe',
+ *   emails: ['john@example.com', 'john.doe@work.com'],
+ *   name: { givenName: 'John', familyName: 'Doe' }
+ * };
+ *
+ * const schemas = [
+ *   { name: 'userName', type: 'STRING', multiValued: false },
+ *   { name: 'emails', type: 'STRING', multiValued: true },
+ *   { name: 'name.givenName', type: 'STRING', multiValued: false }
+ * ];
+ *
+ * const profile = generateFlatUserProfile(meResponse, schemas);
+ * // Result: {
+ * //   userName: 'john.doe',
+ * //   emails: ['john@example.com', 'john.doe@work.com'],
+ * //   'name.givenName': 'John'
+ * // }
+ * ```
+ */
+const generateFlatUserProfile = (meResponse: any, processedSchemas: any[]): User => {
+  const profile: User = {};
+
+  processedSchemas.forEach(schema => {
+    const {name, type, multiValued} = schema;
+
+    if (!name) return;
+
+    let value = get(meResponse, name);
+
+    if (value !== undefined) {
+      if (multiValued && !Array.isArray(value)) {
+        value = [value];
+      }
+    } else {
+      if (multiValued) {
+        value = undefined;
+      } else if (type === 'STRING') {
+        value = '';
+      } else {
+        value = undefined;
+      }
+    }
+
+    set(profile, name, value);
+  });
+
+  return profile;
+};
+
+export default generateFlatUserProfile;
diff --git a/packages/javascript/src/utils/get.ts b/packages/javascript/src/utils/get.ts
new file mode 100644
index 000000000..1a796f7e7
--- /dev/null
+++ b/packages/javascript/src/utils/get.ts
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Gets the value at path of object. If the resolved value is undefined,
+ * the defaultValue is returned in its place.
+ * Similar to Lodash's get() function
+ *
+ * @param object - The object to query
+ * @param path - The path of the property to get
+ * @param defaultValue - The value returned for undefined resolved values
+ * @returns The resolved value
+ */
+const get = (object: any, path: string | string[], defaultValue?: any): any => {
+  if (!object || !path) return defaultValue;
+
+  const pathArray = Array.isArray(path) ? path : path.split('.');
+
+  const result = pathArray.reduce((current, key) => {
+    return current?.[key];
+  }, object);
+
+  return result !== undefined ? result : defaultValue;
+};
+
+export default get;
diff --git a/packages/javascript/src/utils/set.ts b/packages/javascript/src/utils/set.ts
new file mode 100644
index 000000000..18c42ce8d
--- /dev/null
+++ b/packages/javascript/src/utils/set.ts
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Sets the value at path of object. If a portion of path doesn't exist,
+ * it's created. Arrays are created for missing index properties while
+ * objects are created for all other missing properties.
+ * Similar to Lodash's set() function
+ *
+ * @param object - The object to modify
+ * @param path - The path of the property to set
+ * @param value - The value to set
+ * @returns The object
+ */
+const set = (object: any, path: string | string[], value: any): any => {
+  if (!object || !path) return object;
+
+  const pathArray = Array.isArray(path) ? path : path.split('.');
+  const lastIndex = pathArray.length - 1;
+
+  pathArray.reduce((current, key, index) => {
+    if (index === lastIndex) {
+      current[key] = value;
+    } else {
+      if (!(key in current) || typeof current[key] !== 'object' || current[key] === null) {
+        // Create array if next key is numeric, otherwise create object
+        const nextKey = pathArray[index + 1];
+        current[key] = /^\d+$/.test(nextKey) ? [] : {};
+      }
+    }
+    return current[key];
+  }, object);
+
+  return object;
+};
+
+export default set;
diff --git a/packages/javascript/tsconfig.lib.json b/packages/javascript/tsconfig.lib.json
index c05b615f7..b2c9c1aef 100644
--- a/packages/javascript/tsconfig.lib.json
+++ b/packages/javascript/tsconfig.lib.json
@@ -16,5 +16,5 @@
     "**/*.spec.jsx",
     "**/*.test.jsx"
   ],
-  "include": ["src/**/*.js", "src/**/*.ts", "types/**/*.d.ts", "../react/src/getUserProfile.ts"]
+  "include": ["src/**/*.js", "src/**/*.ts", "types/**/*.d.ts"]
 }
diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index e903fadbd..407ca89d6 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -59,6 +59,8 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
     const baseUrl = await (await this.asgardeo.getConfigData()).baseUrl;
     const profile = await getUserProfile({baseUrl});
 
+    console.log('User Profile:', profile);
+
     return profile;
   }
 
diff --git a/packages/react/src/utils/getUserProfile.ts b/packages/react/src/utils/getUserProfile.ts
index 5d8b2af52..4caff47bc 100644
--- a/packages/react/src/utils/getUserProfile.ts
+++ b/packages/react/src/utils/getUserProfile.ts
@@ -17,7 +17,14 @@
  */
 
 import getMeProfile from '../api/scim2/getMeProfile';
-import {AsgardeoAPIError, User, WellKnownSchemaIds} from '@asgardeo/browser';
+import {
+  AsgardeoAPIError,
+  flattenSchemaAttributes,
+  FlattenedSchema,
+  SchemaAttribute,
+  User,
+  generateFlatUserProfile,
+} from '@asgardeo/browser';
 import getSchemas from '../api/scim2/getSchemas';
 
 /**
@@ -36,21 +43,21 @@ import getSchemas from '../api/scim2/getSchemas';
  * ```typescript
  * try {
  *   const userProfile = await getUserProfile({
- *     url: "https://api.asgardeo.io/t/<ORGANIZATION>/scim2/Me",
+ *     baseUrl: "https://api.asgardeo.io/t/<ORGANIZATION>",
  *   });
  *
  *   // Access flattened properties directly:
- *   console.log("Email:", userProfile.emails[0]);
- *   console.log("Name:", userProfile.name.formatted);
+ *   console.log("Email:", userProfile.emails);
+ *   console.log("Given Name:", userProfile.name?.givenName);
  *   console.log("Username:", userProfile.userName);
  *
  *   // WSO2 specific properties:
- *   console.log("Account State:", userProfile.accountState);
- *   console.log("Email Verified:", userProfile.emailVerified);
+ *   console.log("Country:", userProfile.country);
+ *   console.log("Date of Birth:", userProfile.dateOfBirth);
  *
  *   // Enterprise properties (if available):
- *   console.log("Employee Number:", userProfile.employeeNumber);
- *   console.log("Cost Center:", userProfile.costCenter);
+ *   console.log("Verified Emails:", userProfile.verifiedEmailAddresses);
+ *   console.log("Mobile Numbers:", userProfile.mobileNumbers);
  * } catch (error) {
  *   if (error instanceof AsgardeoAPIError) {
  *     console.error('Failed to get user profile:', error.message);
@@ -58,65 +65,21 @@ import getSchemas from '../api/scim2/getSchemas';
  * }
  * ```
  */
-const getUserProfile = async ({baseUrl}): Promise<any> => {
+const getUserProfile = async ({baseUrl}): Promise<User> => {
   try {
     const profile = await getMeProfile({url: `${baseUrl}/scim2/Me`});
     const schemas = await getSchemas({url: `${baseUrl}/scim2/Schemas`});
 
-    const result = [];
+    const processedSchemas = flattenSchemaAttributes(schemas);
 
-    for (const schema of schemas) {
-      const schemaId = schema.id;
+    console.log('Processed Schemas:', JSON.stringify(processedSchemas));
 
-      const source = schemaId.startsWith('urn:ietf:params:scim:schemas:core:2.0') ? profile : profile[schemaId] ?? {};
+    // Create flat profile from ME response and processed schemas
+    const flatProfile = generateFlatUserProfile(profile, processedSchemas);
 
-      for (const attr of schema.attributes || []) {
-        const {name, type, subAttributes, multiValued, caseExact, returned} = attr;
+    console.log('Flat Profile:', JSON.stringify(flatProfile, null, 2));
 
-        if (type === 'COMPLEX' && subAttributes?.length && typeof source[name] === 'object') {
-          // For complex attributes with subAttributes, create an entry for each subAttribute
-          const complexValue = source[name];
-          for (const subAttr of subAttributes) {
-            if (complexValue[subAttr.name] !== undefined) {
-              const {subAttributes, ...attrWithoutSubAttrs} = attr;
-
-              // UPDATED PATH: prefix with schemaId except for core user schema
-              const basePath =
-                schemaId === 'urn:ietf:params:scim:schemas:core:2.0:User'
-                  ? `${name}.${subAttr.name}`
-                  : `${schemaId}.${name}.${subAttr.name}`;
-
-              result.push({
-                schemaId,
-                ...subAttr,
-                value: complexValue[subAttr.name],
-                parent: {
-                  ...attrWithoutSubAttrs,
-                },
-                path: basePath,
-              });
-            }
-          }
-        } else {
-          const value = source[name];
-          // Only include if value exists
-
-          if (value !== undefined) {
-            // UPDATED PATH: prefix with schemaId except for core user schema
-            const basePath = schemaId === 'urn:ietf:params:scim:schemas:core:2.0:User' ? name : `${schemaId}.${name}`;
-
-            result.push({
-              schemaId,
-              ...attr,
-              value,
-              path: basePath,
-            });
-          }
-        }
-      }
-    }
-
-    return result;
+    return flatProfile;
   } catch (error) {
     throw new AsgardeoAPIError(
       'Failed to get user profile',

From c0bed9382f6dcf39c9fb899b13fccea095406a87 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Sun, 15 Jun 2025 18:53:08 +0530
Subject: [PATCH 093/131] chore: update user profile generation functions to
 improve clarity and functionality

---
 packages/javascript/src/index.ts              |  3 +-
 .../src/utils/generateFlattenedUserProfile.ts | 92 +++++++++++++++++++
 ...tUserProfile.ts => generateUserProfile.ts} |  8 +-
 packages/react/src/utils/getUserProfile.ts    |  7 +-
 4 files changed, 103 insertions(+), 7 deletions(-)
 create mode 100644 packages/javascript/src/utils/generateFlattenedUserProfile.ts
 rename packages/javascript/src/utils/{generateFlatUserProfile.ts => generateUserProfile.ts} (90%)

diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index f64b05a03..0ee1ceb87 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -75,7 +75,8 @@ export {default as deepMerge} from './utils/deepMerge';
 export {default as extractUserClaimsFromIdToken} from './utils/extractUserClaimsFromIdToken';
 export {default as extractPkceStorageKeyFromState} from './utils/extractPkceStorageKeyFromState';
 export {default as flattenSchemaAttributes} from './utils/flattenUserSchema';
-export {default as generateFlatUserProfile} from './utils/generateFlatUserProfile';
+export {default as generateUserProfile} from './utils/generateUserProfile';
+export {default as generateFlattenedUserProfile} from './utils/generateFlattenedUserProfile';
 export {default as getI18nBundles} from './utils/getI18nBundles';
 export {default as set} from './utils/set';
 export {default as get} from './utils/get';
diff --git a/packages/javascript/src/utils/generateFlattenedUserProfile.ts b/packages/javascript/src/utils/generateFlattenedUserProfile.ts
new file mode 100644
index 000000000..3ea6d692d
--- /dev/null
+++ b/packages/javascript/src/utils/generateFlattenedUserProfile.ts
@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import get from './get';
+import {User} from '../models/user';
+
+/**
+ * Generates a flattened user profile from a response object and schema definitions.
+ *
+ * This function processes user data according to schema specifications, creating
+ * a flat object with dot notation keys instead of nested objects. Multi-valued
+ * properties and type-specific defaults are handled appropriately.
+ *
+ * @param meResponse - The response object containing user data
+ * @param processedSchemas - Array of schema objects defining field properties
+ * @param processedSchemas[].name - The field name/path for the property
+ * @param processedSchemas[].type - The data type of the field (e.g., 'STRING')
+ * @param processedSchemas[].multiValued - Whether the field can contain multiple values
+ *
+ * @returns A flattened user profile object with dot notation keys
+ *
+ * @example
+ * ```typescript
+ * const schemas = [
+ *   { name: 'name.givenName', type: 'STRING', multiValued: false },
+ *   { name: 'emails', type: 'STRING', multiValued: true }
+ * ];
+ * const response = { name: { givenName: 'John' }, emails: 'john@example.com' };
+ * const profile = generateFlattenedUserProfile(response, schemas);
+ * // Result: { "name.givenName": 'John', emails: ['john@example.com'] }
+ * ```
+ */
+const generateFlattenedUserProfile = (meResponse: any, processedSchemas: any[]): User => {
+  const profile: User = {};
+
+  const allSchemaNames = processedSchemas.map(schema => schema.name).filter(Boolean);
+
+  processedSchemas.forEach(schema => {
+    const {name, type, multiValued} = schema;
+
+    if (!name) return;
+
+    // Skip this property if it's a parent of other flattened properties
+    // e.g., skip "name" if "name.givenName" or "name.familyName" exists
+    // skip "roles" if "roles.default" exists
+    const hasChildProperties = allSchemaNames.some(
+      schemaName => schemaName !== name && schemaName.startsWith(name + '.'),
+    );
+
+    if (hasChildProperties) {
+      // Skip this parent property
+      return;
+    }
+
+    let value = get(meResponse, name);
+
+    if (value !== undefined) {
+      if (multiValued && !Array.isArray(value)) {
+        value = [value];
+      }
+    } else {
+      if (multiValued) {
+        value = undefined;
+      } else if (type === 'STRING') {
+        value = '';
+      } else {
+        value = undefined;
+      }
+    }
+
+    profile[name] = value;
+  });
+
+  return profile;
+};
+
+export default generateFlattenedUserProfile;
diff --git a/packages/javascript/src/utils/generateFlatUserProfile.ts b/packages/javascript/src/utils/generateUserProfile.ts
similarity index 90%
rename from packages/javascript/src/utils/generateFlatUserProfile.ts
rename to packages/javascript/src/utils/generateUserProfile.ts
index 1b4ff4a8a..c158d225c 100644
--- a/packages/javascript/src/utils/generateFlatUserProfile.ts
+++ b/packages/javascript/src/utils/generateUserProfile.ts
@@ -21,7 +21,7 @@ import set from './set';
 import {User} from '../models/user';
 
 /**
- * Creates a flat profile structure from ME response based on processed schemas
+ * Creates a profile structure from ME response based on processed schemas
  *
  * This function processes each schema attribute and populates the profile dynamically by:
  * - Extracting values from the ME response using the schema attribute names
@@ -47,7 +47,7 @@ import {User} from '../models/user';
  *   { name: 'name.givenName', type: 'STRING', multiValued: false }
  * ];
  *
- * const profile = generateFlatUserProfile(meResponse, schemas);
+ * const profile = generateUserProfile(meResponse, schemas);
  * // Result: {
  * //   userName: 'john.doe',
  * //   emails: ['john@example.com', 'john.doe@work.com'],
@@ -55,7 +55,7 @@ import {User} from '../models/user';
  * // }
  * ```
  */
-const generateFlatUserProfile = (meResponse: any, processedSchemas: any[]): User => {
+const generateUserProfile = (meResponse: any, processedSchemas: any[]): User => {
   const profile: User = {};
 
   processedSchemas.forEach(schema => {
@@ -85,4 +85,4 @@ const generateFlatUserProfile = (meResponse: any, processedSchemas: any[]): User
   return profile;
 };
 
-export default generateFlatUserProfile;
+export default generateUserProfile;
diff --git a/packages/react/src/utils/getUserProfile.ts b/packages/react/src/utils/getUserProfile.ts
index 4caff47bc..b57d867d2 100644
--- a/packages/react/src/utils/getUserProfile.ts
+++ b/packages/react/src/utils/getUserProfile.ts
@@ -23,7 +23,8 @@ import {
   FlattenedSchema,
   SchemaAttribute,
   User,
-  generateFlatUserProfile,
+  generateUserProfile,
+  generateFlattenedUserProfile
 } from '@asgardeo/browser';
 import getSchemas from '../api/scim2/getSchemas';
 
@@ -75,8 +76,10 @@ const getUserProfile = async ({baseUrl}): Promise<User> => {
     console.log('Processed Schemas:', JSON.stringify(processedSchemas));
 
     // Create flat profile from ME response and processed schemas
-    const flatProfile = generateFlatUserProfile(profile, processedSchemas);
+    const profles = generateUserProfile(profile, processedSchemas);
+    const flatProfile = generateFlattenedUserProfile(profile, processedSchemas);
 
+    console.log('profles profles:', JSON.stringify(profles, null, 2));
     console.log('Flat Profile:', JSON.stringify(flatProfile, null, 2));
 
     return flatProfile;

From 66d68b627b6be2cb0c434468881b7f46da880c1f Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Sun, 15 Jun 2025 19:09:18 +0530
Subject: [PATCH 094/131] feat(react): add UserContext, UserProvider, and
 useUser hook for user profile management

---
 .../react/src/contexts/User/UserContext.ts    |  76 +++++++
 .../react/src/contexts/User/UserProvider.tsx  | 213 ++++++++++++++++++
 packages/react/src/contexts/User/useUser.ts   | 106 +++++++++
 packages/react/src/index.ts                   |   9 +
 4 files changed, 404 insertions(+)
 create mode 100644 packages/react/src/contexts/User/UserContext.ts
 create mode 100644 packages/react/src/contexts/User/UserProvider.tsx
 create mode 100644 packages/react/src/contexts/User/useUser.ts

diff --git a/packages/react/src/contexts/User/UserContext.ts b/packages/react/src/contexts/User/UserContext.ts
new file mode 100644
index 000000000..fc9508a17
--- /dev/null
+++ b/packages/react/src/contexts/User/UserContext.ts
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {Context, createContext} from 'react';
+import {User, Schema, FlattenedSchema} from '@asgardeo/browser';
+
+/**
+ * Props interface of {@link UserContext}
+ */
+export type UserContextProps = {
+  /**
+   * Flag indicating whether the user data is loading.
+   */
+  isLoading: boolean;
+  /**
+   * The raw ME API response object containing user profile information.
+   */
+  profile: any | null;
+  /**
+   * Array of SCIM2 schemas used for user profile structure.
+   */
+  schemas: Schema[] | null;
+  /**
+   * Flattened user profile with dot-notation keys for easier access.
+   */
+  flattenedUser: User | null;
+  /**
+   * The processed user object with nested structure.
+   */
+  user: User | null;
+  /**
+   * Function to refresh user data from the server.
+   */
+  refreshUser: () => Promise<void>;
+  /**
+   * Function to update user profile.
+   */
+  updateUser: (payload: any) => Promise<void>;
+  /**
+   * Error object if there was an issue fetching user data.
+   */
+  error: Error | null;
+};
+
+/**
+ * Context object for managing user profile data and related operations.
+ */
+const UserContext: Context<UserContextProps | null> = createContext<null | UserContextProps>({
+  isLoading: true,
+  profile: null,
+  schemas: null,
+  flattenedUser: null,
+  user: null,
+  refreshUser: async () => {},
+  updateUser: async () => {},
+  error: null,
+});
+
+UserContext.displayName = 'UserContext';
+
+export default UserContext;
diff --git a/packages/react/src/contexts/User/UserProvider.tsx b/packages/react/src/contexts/User/UserProvider.tsx
new file mode 100644
index 000000000..3245a4578
--- /dev/null
+++ b/packages/react/src/contexts/User/UserProvider.tsx
@@ -0,0 +1,213 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {FC, PropsWithChildren, ReactElement, useEffect, useState, useCallback, useMemo} from 'react';
+import {
+  User,
+  Schema,
+  AsgardeoAPIError,
+  flattenSchemaAttributes,
+  generateUserProfile,
+  generateFlattenedUserProfile,
+} from '@asgardeo/browser';
+import UserContext from './UserContext';
+import useAsgardeo from '../Asgardeo/useAsgardeo';
+import getMeProfile from '../../api/scim2/getMeProfile';
+import getSchemas from '../../api/scim2/getSchemas';
+import updateMeProfile from '../../api/scim2/updateMeProfile';
+
+/**
+ * Props interface of {@link UserProvider}
+ */
+export interface UserProviderProps {
+  /**
+   * Whether to automatically fetch user data when the component mounts.
+   * @default true
+   */
+  autoFetch?: boolean;
+  /**
+   * Custom error handler for user data operations.
+   */
+  onError?: (error: Error) => void;
+}
+
+/**
+ * UserProvider component that manages user profile data and provides it through UserContext.
+ *
+ * This provider:
+ * - Fetches user profile data from the ME endpoint
+ * - Retrieves SCIM2 schemas for profile structure
+ * - Generates both nested and flattened user profiles
+ * - Provides functions for refreshing and updating user data
+ * - Handles loading states and errors
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <UserProvider>
+ *   <App />
+ * </UserProvider>
+ *
+ * // With custom error handling
+ * <UserProvider onError={(error) => console.error('User error:', error)}>
+ *   <App />
+ * </UserProvider>
+ *
+ * // Disable auto-fetch (fetch manually using refreshUser)
+ * <UserProvider autoFetch={false}>
+ *   <App />
+ * </UserProvider>
+ * ```
+ */
+const UserProvider: FC<PropsWithChildren<UserProviderProps>> = ({
+  children,
+  autoFetch = true,
+  onError,
+}: PropsWithChildren<UserProviderProps>): ReactElement => {
+  const {isSignedIn, baseUrl} = useAsgardeo();
+
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [profile, setProfile] = useState<any | null>(null);
+  const [schemas, setSchemas] = useState<Schema[] | null>(null);
+  const [user, setUser] = useState<User | null>(null);
+  const [flattenedUser, setFlattenedUser] = useState<User | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+
+  /**
+   * Fetches user profile data including ME response and schemas.
+   */
+  const fetchUserData = useCallback(async (): Promise<void> => {
+    if (!isSignedIn || !baseUrl) {
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const [meResponse, schemasResponse] = await Promise.all([
+        getMeProfile({url: `${baseUrl}/scim2/Me`}),
+        getSchemas({url: `${baseUrl}/scim2/Schemas`}),
+      ]);
+
+      const processedSchemas = flattenSchemaAttributes(schemasResponse);
+
+      const userProfile = generateUserProfile(meResponse, processedSchemas);
+      const flatProfile = generateFlattenedUserProfile(meResponse, processedSchemas);
+
+      setProfile(meResponse);
+      setSchemas(schemasResponse);
+      setUser(userProfile);
+      setFlattenedUser(flatProfile);
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Failed to fetch user data');
+      setError(error);
+
+      if (onError) {
+        onError(error);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [isSignedIn, baseUrl, onError]);
+
+  /**
+   * Refreshes user data by re-fetching from the server.
+   */
+  const refreshUser = useCallback(async (): Promise<void> => {
+    await fetchUserData();
+  }, [fetchUserData]);
+
+  /**
+   * Updates user profile with the provided payload.
+   */
+  const updateUser = useCallback(
+    async (payload: any): Promise<void> => {
+      if (!baseUrl) {
+        throw new AsgardeoAPIError(
+          'Base URL is not available',
+          'updateUser-NoBaseUrl-001',
+          'javascript',
+          400,
+          'Bad Request',
+        );
+      }
+
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        await updateMeProfile({url: `${baseUrl}/scim2/Me`, payload});
+        await fetchUserData();
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error('Failed to update user profile');
+        setError(error);
+
+        if (onError) {
+          onError(error);
+        }
+
+        throw error;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [baseUrl, fetchUserData, onError],
+  );
+
+  /**
+   * Auto-fetch user data when user signs in and autoFetch is enabled.
+   */
+  useEffect(() => {
+    if (autoFetch && isSignedIn) {
+      fetchUserData();
+    }
+  }, [autoFetch, isSignedIn, fetchUserData]);
+
+  /**
+   * Clear user data when user signs out.
+   */
+  useEffect(() => {
+    if (!isSignedIn) {
+      setProfile(null);
+      setSchemas(null);
+      setUser(null);
+      setFlattenedUser(null);
+      setError(null);
+      setIsLoading(false);
+    }
+  }, [isSignedIn]);
+
+  const contextValue = useMemo(
+    () => ({
+      isLoading,
+      profile,
+      schemas,
+      flattenedUser,
+      user,
+      refreshUser,
+      updateUser,
+      error,
+    }),
+    [isLoading, profile, schemas, flattenedUser, user, refreshUser, updateUser, error],
+  );
+
+  return <UserContext.Provider value={contextValue}>{children}</UserContext.Provider>;
+};
+
+export default UserProvider;
diff --git a/packages/react/src/contexts/User/useUser.ts b/packages/react/src/contexts/User/useUser.ts
new file mode 100644
index 000000000..fd2459e1d
--- /dev/null
+++ b/packages/react/src/contexts/User/useUser.ts
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {useContext} from 'react';
+import UserContext, {UserContextProps} from './UserContext';
+
+/**
+ * Hook to access the User context.
+ *
+ * This hook provides access to user profile data including:
+ * - Raw profile API response
+ * - SCIM2 schemas
+ * - Nested user object
+ * - Flattened user profile
+ * - Functions to refresh and update user data
+ * - Loading states and error handling
+ *
+ * @returns {UserContextProps} The user context value containing all user-related data and functions
+ * @throws {Error} Throws an error if used outside of UserProvider
+ *
+ * @example
+ * ```tsx
+ * import {useUser} from '@asgardeo/react';
+ *
+ * function ProfileComponent() {
+ *   const {
+ *     isLoading,
+ *     profile,
+ *     schemas,
+ *     user,
+ *     flattenedUser,
+ *     refreshUser,
+ *     updateUser,
+ *     error
+ *   } = useUser();
+ *
+ *   if (isLoading) {
+ *     return <div>Loading user data...</div>;
+ *   }
+ *
+ *   if (error) {
+ *     return <div>Error: {error.message}</div>;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <h1>Welcome {user?.name?.givenName}!</h1>
+ *       <p>Email: {flattenedUser?.emails}</p>
+ *       <button onClick={refreshUser}>Refresh Profile</button>
+ *     </div>
+ *   );
+ * }
+ *
+ * // Access specific user properties
+ * function UserEmail() {
+ *   const {flattenedUser} = useUser();
+ *   return <span>{flattenedUser?.emails?.[0]}</span>;
+ * }
+ *
+ * // Update user profile
+ * function EditProfile() {
+ *   const {updateUser, user} = useUser();
+ *
+ *   const handleUpdate = async () => {
+ *     try {
+ *       await updateUser({
+ *         name: {
+ *           givenName: 'John',
+ *           familyName: 'Doe'
+ *         }
+ *       });
+ *     } catch (error) {
+ *       console.error('Update failed:', error);
+ *     }
+ *   };
+ *
+ *   return <button onClick={handleUpdate}>Update Name</button>;
+ * }
+ * ```
+ */
+const useUser = (): UserContextProps => {
+  const context = useContext(UserContext);
+
+  if (!context) {
+    throw new Error('useUser must be used within a UserProvider');
+  }
+
+  return context;
+};
+
+export default useUser;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 1e920dc26..4c7cbb7fa 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -25,6 +25,15 @@ export * from './contexts/Asgardeo/AsgardeoContext';
 export {default as useAsgardeo} from './contexts/Asgardeo/useAsgardeo';
 export * from './contexts/Asgardeo/useAsgardeo';
 
+export {default as UserContext} from './contexts/User/UserContext';
+export * from './contexts/User/UserContext';
+
+export {default as UserProvider} from './contexts/User/UserProvider';
+export * from './contexts/User/UserProvider';
+
+export {default as useUser} from './contexts/User/useUser';
+export * from './contexts/User/useUser';
+
 export {default as useBrowserUrl} from './hooks/useBrowserUrl';
 export * from './hooks/useBrowserUrl';
 

From 090201b3e1531305f301b24e9cc3a27d752e4772 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Sun, 15 Jun 2025 19:12:12 +0530
Subject: [PATCH 095/131] feat(react): integrate UserProvider within
 AsgardeoProvider for enhanced user context management

---
 packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index 0e298059e..ef04e7f80 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -25,6 +25,7 @@ import {AsgardeoReactConfig} from '../../models/config';
 import {ThemeProvider} from '../Theme/ThemeProvider';
 import I18nProvider from '../I18n/I18nProvider';
 import FlowProvider from '../Flow/FlowProvider';
+import UserProvider from '../User/UserProvider';
 
 /**
  * Props interface of {@link AsgardeoProvider}
@@ -177,7 +178,9 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
     >
       <I18nProvider preferences={preferences?.i18n}>
         <ThemeProvider theme={preferences?.theme?.overrides} defaultColorScheme={isDarkMode ? 'dark' : 'light'}>
-          <FlowProvider>{children}</FlowProvider>
+          <FlowProvider>
+            <UserProvider>{children}</UserProvider>
+          </FlowProvider>
         </ThemeProvider>
       </I18nProvider>
     </AsgardeoContext.Provider>

From fa31862743a71a8c2c4d0c060223c2b57fb9c1cb Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Sun, 15 Jun 2025 22:21:16 +0530
Subject: [PATCH 096/131] chore(javascript): update user schema handling by
 exporting UserProfile and renaming flattenSchemaAttributes to
 flattenUserSchema

---
 packages/javascript/src/index.ts              |  4 ++--
 .../javascript/src/utils/flattenUserSchema.ts | 21 ++++++++++---------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 0ee1ceb87..5b620e2d5 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -59,7 +59,7 @@ export {
 } from './models/oauth-request';
 export {OIDCEndpoints} from './models/oidc-endpoints';
 export {Storage} from './models/store';
-export {User} from './models/user';
+export {User, UserProfile} from './models/user';
 export {SessionData} from './models/session';
 export {Schema, SchemaAttribute, WellKnownSchemaIds, FlattenedSchema} from './models/scim2-schema';
 export {RecursivePartial} from './models/utility-types';
@@ -74,7 +74,7 @@ export {ThemeColors, ThemeConfig, Theme, ThemeMode} from './theme/types';
 export {default as deepMerge} from './utils/deepMerge';
 export {default as extractUserClaimsFromIdToken} from './utils/extractUserClaimsFromIdToken';
 export {default as extractPkceStorageKeyFromState} from './utils/extractPkceStorageKeyFromState';
-export {default as flattenSchemaAttributes} from './utils/flattenUserSchema';
+export {default as flattenUserSchema} from './utils/flattenUserSchema';
 export {default as generateUserProfile} from './utils/generateUserProfile';
 export {default as generateFlattenedUserProfile} from './utils/generateFlattenedUserProfile';
 export {default as getI18nBundles} from './utils/getI18nBundles';
diff --git a/packages/javascript/src/utils/flattenUserSchema.ts b/packages/javascript/src/utils/flattenUserSchema.ts
index da26b96ed..f3d08d6e7 100644
--- a/packages/javascript/src/utils/flattenUserSchema.ts
+++ b/packages/javascript/src/utils/flattenUserSchema.ts
@@ -22,10 +22,10 @@ import {Schema, FlattenedSchema} from '../models/scim2-schema';
  * Flattens nested schema attributes into a flat structure for easier processing
  *
  * This function processes SCIM2 schemas and creates a flattened representation by:
- * - Extracting all top-level attributes from each schema
  * - Processing sub-attributes and creating dot-notation names (e.g., 'name.givenName')
  * - Adding schema ID reference to each flattened attribute
  * - Preserving all original attribute properties while adding schema context
+ * - Only including leaf-level attributes (sub-attributes) and top-level simple attributes
  *
  * @param schemas - Array of SCIM2 schemas containing nested attribute structures
  * @returns Array of flattened schema attributes with dot-notation names and schema references
@@ -54,26 +54,21 @@ import {Schema, FlattenedSchema} from '../models/scim2-schema';
  *   }
  * ];
  *
- * const flattened = flattenSchemaAttributes(schemas);
+ * const flattened = flattenUserSchema(schemas);
  * // Result: [
  * //   { name: 'userName', type: 'string', multiValued: false, schemaId: 'urn:ietf:params:scim:schemas:core:2.0:User' },
- * //   { name: 'name', type: 'complex', multiValued: false, schemaId: 'urn:ietf:params:scim:schemas:core:2.0:User' },
  * //   { name: 'name.givenName', type: 'string', multiValued: false, schemaId: 'urn:ietf:params:scim:schemas:core:2.0:User' },
  * //   { name: 'name.familyName', type: 'string', multiValued: false, schemaId: 'urn:ietf:params:scim:schemas:core:2.0:User' }
  * // ]
  * ```
  */
-const flattenSchemaAttributes = (schemas: Schema[]): FlattenedSchema[] => {
+const flattenUserSchema = (schemas: Schema[]): FlattenedSchema[] => {
   const flattenedAttributes: FlattenedSchema[] = [];
 
   schemas.forEach(schema => {
     if (schema.attributes && Array.isArray(schema.attributes)) {
       schema.attributes.forEach(attribute => {
-        flattenedAttributes.push({
-          ...attribute,
-          schemaId: schema.id,
-        } as unknown as FlattenedSchema);
-
+        // If the attribute has sub-attributes, only add the flattened sub-attributes
         if (attribute.subAttributes && Array.isArray(attribute.subAttributes)) {
           attribute.subAttributes.forEach(subAttribute => {
             flattenedAttributes.push({
@@ -82,6 +77,12 @@ const flattenSchemaAttributes = (schemas: Schema[]): FlattenedSchema[] => {
               schemaId: schema.id,
             } as unknown as FlattenedSchema);
           });
+        } else {
+          // If it's a simple attribute (no sub-attributes), add it directly
+          flattenedAttributes.push({
+            ...attribute,
+            schemaId: schema.id,
+          } as unknown as FlattenedSchema);
         }
       });
     }
@@ -90,4 +91,4 @@ const flattenSchemaAttributes = (schemas: Schema[]): FlattenedSchema[] => {
   return flattenedAttributes;
 };
 
-export default flattenSchemaAttributes;
+export default flattenUserSchema;

From d72364b6d95b8e9d580b325fc84527c4132f827f Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 16 Jun 2025 00:02:36 +0530
Subject: [PATCH 097/131] chore: Refactor user profile handling and dropdown
 components

- Updated AsgardeoReactClient to include new user profile methods and flatten user schema.
- Enhanced BaseUserDropdown to utilize Floating UI for improved dropdown behavior and styling.
- Modified BaseUserProfile to accept flattened user profiles and schemas, improving data handling.
- Updated UserProfile component to fetch and pass user profile data correctly.
- Refactored UserContext to manage user profile and flattened profile states.
- Removed deprecated getUserProfile utility and replaced it with direct API calls.
- Improved getMappedUserProfileValue utility for better attribute mapping.
- Updated Header component to integrate UserDropdown for user actions.
---
 .../src/AsgardeoJavaScriptClient.ts           |   4 +-
 packages/javascript/src/models/client.ts      |   9 +-
 packages/javascript/src/models/user.ts        |   8 +
 packages/react/package.json                   |   1 +
 packages/react/src/AsgardeoReactClient.ts     |  35 +++-
 .../UserDropdown/BaseUserDropdown.tsx         | 172 +++++++++++-------
 .../UserProfile/BaseUserProfile.tsx           | 145 ++++++++++-----
 .../presentation/UserProfile/UserProfile.tsx  |  14 +-
 .../contexts/Asgardeo/AsgardeoProvider.tsx    |   7 +-
 .../react/src/contexts/User/UserContext.ts    |  40 +---
 .../react/src/contexts/User/UserProvider.tsx  | 149 +--------------
 .../src/utils/getMappedUserProfileValue.ts    |  72 ++++++--
 packages/react/src/utils/getUserProfile.ts    |  97 ----------
 pnpm-lock.yaml                                |  49 +++++
 .../vite-react-ts/src/components/Header.tsx   |   7 +-
 15 files changed, 390 insertions(+), 419 deletions(-)
 delete mode 100644 packages/react/src/utils/getUserProfile.ts

diff --git a/packages/javascript/src/AsgardeoJavaScriptClient.ts b/packages/javascript/src/AsgardeoJavaScriptClient.ts
index d13433016..5d46f7b1a 100644
--- a/packages/javascript/src/AsgardeoJavaScriptClient.ts
+++ b/packages/javascript/src/AsgardeoJavaScriptClient.ts
@@ -17,7 +17,7 @@
  */
 
 import {AsgardeoClient, SignInOptions, SignOutOptions} from './models/client';
-import {User} from './models/user';
+import {User, UserProfile} from './models/user';
 import {Config} from './models/config';
 
 /**
@@ -42,6 +42,8 @@ abstract class AsgardeoJavaScriptClient<T = Config> implements AsgardeoClient<T>
    */
   abstract getUser(): Promise<User>;
 
+  abstract getUserProfile(): Promise<UserProfile>;
+
   /**
    * Checks if the client is currently loading.
    * This can be used to determine if the client is in the process of initializing or fetching user data.
diff --git a/packages/javascript/src/models/client.ts b/packages/javascript/src/models/client.ts
index 7aa0d2b2c..bc7545b6c 100644
--- a/packages/javascript/src/models/client.ts
+++ b/packages/javascript/src/models/client.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {User} from './user';
+import {User, UserProfile} from './user';
 
 export type SignInOptions = Record<string, unknown>;
 export type SignOutOptions = Record<string, unknown>;
@@ -39,6 +39,13 @@ export interface AsgardeoClient<T> {
    */
   getUser(): Promise<User>;
 
+  /**
+   * Fetches the user profile along with its schemas and a flattened version of the profile.
+   *
+   * @returns A promise resolving to a UserProfile object containing the user's profile information.
+   */
+  getUserProfile(): Promise<UserProfile>;
+
   /**
    * Initializes the authentication client with provided configuration.
    *
diff --git a/packages/javascript/src/models/user.ts b/packages/javascript/src/models/user.ts
index fcac468e9..726cffdc4 100644
--- a/packages/javascript/src/models/user.ts
+++ b/packages/javascript/src/models/user.ts
@@ -16,6 +16,8 @@
  * under the License.
  */
 
+import {Schema} from './scim2-schema';
+
 export interface KnownUser {
   username?: string;
   email?: string;
@@ -27,3 +29,9 @@ export interface KnownUser {
 export interface User extends KnownUser {
   [key: string]: any;
 }
+
+export interface UserProfile {
+  schemas: Schema[];
+  profile: User;
+  flattenedProfile: User;
+}
diff --git a/packages/react/package.json b/packages/react/package.json
index ef2eb69aa..b23e23bf3 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -63,6 +63,7 @@
   },
   "dependencies": {
     "@asgardeo/browser": "workspace:^",
+    "@floating-ui/react": "^0.27.12",
     "@types/react-dom": "^19.1.5",
     "clsx": "^2.1.1",
     "esbuild": "^0.25.4",
diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index 407ca89d6..5dae4ecde 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -18,15 +18,18 @@
 
 import {
   AsgardeoBrowserClient,
-  extractUserClaimsFromIdToken,
-  getUserInfo,
+  flattenUserSchema,
+  generateFlattenedUserProfile,
+  UserProfile,
   SignInOptions,
   SignOutOptions,
   User,
+  generateUserProfile,
 } from '@asgardeo/browser';
 import AuthAPI from './__temp__/api';
 import {AsgardeoReactConfig} from './models/config';
-import getUserProfile from './utils/getUserProfile';
+import getMeProfile from './api/scim2/getMeProfile';
+import getSchemas from './api/scim2/getSchemas';
 
 /**
  * Client for mplementing Asgardeo in React applications.
@@ -55,13 +58,31 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
     });
   }
 
-  override async getUser(): Promise<any> {
+  override async getUser(): Promise<User> {
     const baseUrl = await (await this.asgardeo.getConfigData()).baseUrl;
-    const profile = await getUserProfile({baseUrl});
+    const profile = await getMeProfile({url: `${baseUrl}/scim2/Me`});
+    const schemas = await getSchemas({url: `${baseUrl}/scim2/Schemas`});
 
-    console.log('User Profile:', profile);
+    return generateUserProfile(profile, flattenUserSchema(schemas));
+  }
+
+  async getUserProfile(): Promise<UserProfile> {
+    const baseUrl: string = (await this.asgardeo.getConfigData()).baseUrl;
+
+    const profile = await getMeProfile({url: `${baseUrl}/scim2/Me`});
+    const schemas = await getSchemas({url: `${baseUrl}/scim2/Schemas`});
+    
+    console.log('Raw Schemas:', JSON.stringify(schemas, null, 2));
+
+    const processedSchemas = flattenUserSchema(schemas);
+    
+    console.log('Processed Schemas:', JSON.stringify(processedSchemas, null, 2));
 
-    return profile;
+    return {
+      schemas: processedSchemas,
+      flattenedProfile: generateFlattenedUserProfile(profile, processedSchemas),
+      profile,
+    };
   }
 
   override isLoading(): boolean {
diff --git a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
index 6591b7b3f..7a550ad0f 100644
--- a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
+++ b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
@@ -16,17 +16,29 @@
  * under the License.
  */
 
-import {CSSProperties, FC, ReactElement, ReactNode, useMemo, useState} from 'react';
+import {CSSProperties, FC, ReactElement, ReactNode, useMemo, useRef, useState} from 'react';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  useClick,
+  useDismiss,
+  useRole,
+  useInteractions,
+  FloatingFocusManager,
+  FloatingPortal,
+} from '@floating-ui/react';
 import {useTheme} from '../../../contexts/Theme/useTheme';
 import {Avatar} from '../../primitives/Avatar/Avatar';
-import {Popover} from '../../primitives/Popover/Popover';
 import Button from '../../primitives/Button/Button';
 import getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';
 
 const useStyles = () => {
-  const {theme} = useTheme();
+  const {theme, colorScheme} = useTheme();
 
   return useMemo(
     () => ({
@@ -51,6 +63,14 @@ const useStyles = () => {
       dropdownContent: {
         minWidth: '200px',
         maxWidth: '300px',
+        backgroundColor: theme.colors.background.surface,
+        borderRadius: theme.borderRadius.medium,
+        boxShadow: `0 4px 6px -1px ${
+          colorScheme === 'dark' ? 'rgba(0, 0, 0, 0.4)' : 'rgba(0, 0, 0, 0.1)'
+        }, 0 2px 4px -1px ${colorScheme === 'dark' ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.06)'}`,
+        border: `1px solid ${theme.colors.border}`,
+        outline: 'none',
+        zIndex: 1000,
       } as CSSProperties,
       dropdownMenu: {
         display: 'flex',
@@ -101,7 +121,7 @@ const useStyles = () => {
         margin: 0,
       } as CSSProperties,
     }),
-    [theme],
+    [theme, colorScheme],
   );
 };
 
@@ -136,7 +156,7 @@ export interface BaseUserDropdownProps {
   /**
    * Show user's display name next to avatar in the trigger button
    */
-  showTriggerLable?: boolean;
+  showTriggerLabel?: boolean;
   /**
    * Show dropdown header with user information
    */
@@ -169,7 +189,7 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
   user,
   portalId = 'asgardeo-user-dropdown',
   menuItems = [],
-  showTriggerLable = false,
+  showTriggerLabel = false,
   showDropdownHeader = true,
   avatarSize = 32,
   attributeMapping = {},
@@ -177,10 +197,24 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
   const styles = useStyles();
   const [isOpen, setIsOpen] = useState(false);
 
+  const {refs, floatingStyles, context} = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: 'bottom-start',
+    middleware: [offset(5), flip({fallbackAxisSideDirection: 'end'}), shift({padding: 5})],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+
+  const {getReferenceProps, getFloatingProps} = useInteractions([click, dismiss, role]);
+
   const defaultAttributeMappings = {
     picture: ['profile', 'profileUrl'],
-    firstName: 'givenName',
-    lastName: 'familyName',
+    firstName: 'name.givenName',
+    lastName: 'name.familyName',
     email: 'emails',
   };
 
@@ -211,12 +245,13 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
   return (
     <div className={clsx(withVendorCSSClassPrefix('user-dropdown'), className)}>
       <Button
+        ref={refs.setReference}
         className={withVendorCSSClassPrefix('user-dropdown-trigger')}
         style={styles.trigger}
-        onClick={() => setIsOpen(!isOpen)}
         color="tertiary"
         variant="text"
         size="medium"
+        {...getReferenceProps()}
       >
         <Avatar
           imageUrl={getMappedUserProfileValue('picture', mergedMappings, user)}
@@ -224,68 +259,75 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
           size={avatarSize}
           alt={`${getDisplayName()}'s avatar`}
         />
-        {showTriggerLable && <span style={styles.userName}>{getDisplayName()}</span>}
+        {showTriggerLabel && <span style={styles.userName}>{getDisplayName()}</span>}
       </Button>
 
-      <Popover isOpen={isOpen} onClose={() => setIsOpen(false)} portalId={portalId} mode="dropdown">
-        <Popover.Content>
-          <div style={styles.dropdownContent}>
-            {showDropdownHeader && (
-              <div className={withVendorCSSClassPrefix('user-dropdown-header')} style={styles.dropdownHeader}>
-                <Avatar
-                  imageUrl={getMappedUserProfileValue('picture', mergedMappings, user)}
-                  name={getDisplayName()}
-                  size={avatarSize * 1.25}
-                  alt={`${getDisplayName()}'s avatar`}
-                />
-                <div className={withVendorCSSClassPrefix('user-dropdown-header-info')} style={styles.headerInfo}>
-                  <span className={withVendorCSSClassPrefix('user-dropdown-header-name')} style={styles.headerName}>
-                    {getDisplayName()}
-                  </span>
-                  {getMappedUserProfileValue('email', mergedMappings, user) !== getDisplayName() &&
-                    getMappedUserProfileValue('email', mergedMappings, user) && (
-                      <span
-                        className={withVendorCSSClassPrefix('user-dropdown-header-email')}
-                        style={styles.headerEmail}
+      {isOpen && (
+        <FloatingPortal id={portalId}>
+          <FloatingFocusManager context={context} modal={false}>
+            <div
+              ref={refs.setFloating}
+              className={withVendorCSSClassPrefix('user-dropdown-content')}
+              style={{...floatingStyles, ...styles.dropdownContent}}
+              {...getFloatingProps()}
+            >
+              {showDropdownHeader && (
+                <div className={withVendorCSSClassPrefix('user-dropdown-header')} style={styles.dropdownHeader}>
+                  <Avatar
+                    imageUrl={getMappedUserProfileValue('picture', mergedMappings, user)}
+                    name={getDisplayName()}
+                    size={avatarSize * 1.25}
+                    alt={`${getDisplayName()}'s avatar`}
+                  />
+                  <div className={withVendorCSSClassPrefix('user-dropdown-header-info')} style={styles.headerInfo}>
+                    <span className={withVendorCSSClassPrefix('user-dropdown-header-name')} style={styles.headerName}>
+                      {getDisplayName()}
+                    </span>
+                    {getMappedUserProfileValue('email', mergedMappings, user) !== getDisplayName() &&
+                      getMappedUserProfileValue('email', mergedMappings, user) && (
+                        <span
+                          className={withVendorCSSClassPrefix('user-dropdown-header-email')}
+                          style={styles.headerEmail}
+                        >
+                          {getMappedUserProfileValue('email', mergedMappings, user)}
+                        </span>
+                      )}
+                  </div>
+                </div>
+              )}
+              <div className={withVendorCSSClassPrefix('user-dropdown-menu')} style={styles.dropdownMenu}>
+                {menuItems.map((item, index) => (
+                  <div key={index}>
+                    {item.href ? (
+                      <a
+                        href={item.href}
+                        style={styles.menuItem}
+                        className={withVendorCSSClassPrefix('user-dropdown-menu-item')}
                       >
-                        {getMappedUserProfileValue('email', mergedMappings, user)}
-                      </span>
+                        {item.icon}
+                        {item.label}
+                      </a>
+                    ) : (
+                      <Button
+                        onClick={() => handleMenuItemClick(item)}
+                        style={styles.menuItem}
+                        className={withVendorCSSClassPrefix('user-dropdown-menu-item')}
+                        color="tertiary"
+                        variant="text"
+                        size="small"
+                        startIcon={item.icon}
+                      >
+                        {item.label}
+                      </Button>
                     )}
-                </div>
+                    {index < menuItems.length - 1 && <div style={styles.divider} />}
+                  </div>
+                ))}
               </div>
-            )}
-            <div className={withVendorCSSClassPrefix('user-dropdown-menu')} style={styles.dropdownMenu}>
-              {menuItems.map((item, index) => (
-                <div key={index}>
-                  {item.href ? (
-                    <a
-                      href={item.href}
-                      style={styles.menuItem}
-                      className={withVendorCSSClassPrefix('user-dropdown-menu-item')}
-                    >
-                      {item.icon}
-                      {item.label}
-                    </a>
-                  ) : (
-                    <Button
-                      onClick={() => handleMenuItemClick(item)}
-                      style={styles.menuItem}
-                      className={withVendorCSSClassPrefix('user-dropdown-menu-item')}
-                      color="tertiary"
-                      variant="text"
-                      size="small"
-                      startIcon={item.icon}
-                    >
-                      {item.label}
-                    </Button>
-                  )}
-                  {index < menuItems.length - 1 && <div style={styles.divider} />}
-                </div>
-              ))}
             </div>
-          </div>
-        </Popover.Content>
-      </Popover>
+          </FloatingFocusManager>
+        </FloatingPortal>
+      )}
     </div>
   );
 };
diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index 8a0a42e10..9b43b418f 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -24,7 +24,7 @@ import DatePicker from '../../primitives/DatePicker/DatePicker';
 import Checkbox from '../../primitives/Checkbox/Checkbox';
 import Button from '../../primitives/Button/Button';
 import {useTheme} from '../../../contexts/Theme/useTheme';
-import {withVendorCSSClassPrefix} from '@asgardeo/browser';
+import {User, withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
 import getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';
 
@@ -37,6 +37,7 @@ interface Schema extends ExtendedFlatSchema {
   caseExact?: boolean;
   description?: string;
   displayName?: string;
+  displayOrder?: string;
   multiValued?: boolean;
   mutability?: string;
   name?: string;
@@ -52,7 +53,9 @@ export interface BaseUserProfileProps {
   fallback?: ReactElement;
   className?: string;
   cardLayout?: boolean;
-  user: any;
+  profile: User;
+  flattenedProfile?: User;
+  schemas: Schema[];
   mode?: 'inline' | 'popup';
   portalId?: string;
   title?: string;
@@ -75,7 +78,9 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
   fallback = null,
   className = '',
   cardLayout = true,
-  user,
+  profile,
+  schemas,
+  flattenedProfile,
   mode = 'inline',
   portalId = 'asgardeo-user-profile',
   title = 'User Profile',
@@ -89,7 +94,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
 }): ReactElement => {
   const {theme} = useTheme();
   const [isOpen, setIsOpen] = useState(mode === 'popup');
-  const [editedUser, setEditedUser] = useState(user);
+  const [editedUser, setEditedUser] = useState(flattenedProfile || profile);
   const [editingFields, setEditingFields] = useState<Record<string, boolean>>({});
 
   const PencilIcon = () => (
@@ -136,29 +141,36 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
 
   const handleFieldSave = useCallback(
     (schema: Schema) => {
+      if (!onUpdate || !schema.name) return;
+
       let payload = {};
       const fieldName = schema.name;
       const fieldValue =
-        editedUser && fieldName && editedUser[fieldName] !== undefined ? editedUser[fieldName] : schema.value;
+        editedUser && fieldName && editedUser[fieldName] !== undefined
+          ? editedUser[fieldName]
+          : flattenedProfile && flattenedProfile[fieldName] !== undefined
+          ? flattenedProfile[fieldName]
+          : '';
 
-      set(payload, schema.path, fieldValue);
+      set(payload, fieldName, fieldValue);
 
       onUpdate(payload);
       // Optionally, exit edit mode for this field after save
-      toggleFieldEdit(fieldName!);
+      toggleFieldEdit(fieldName);
     },
-    [editedUser, onUpdate, toggleFieldEdit],
+    [editedUser, flattenedProfile, onUpdate, toggleFieldEdit],
   );
 
   const handleFieldCancel = useCallback(
     (fieldName: string) => {
+      const currentUser = flattenedProfile || profile;
       setEditedUser(prev => ({
         ...prev,
-        [fieldName]: user[fieldName],
+        [fieldName]: currentUser[fieldName],
       }));
       toggleFieldEdit(fieldName);
     },
-    [user, toggleFieldEdit],
+    [flattenedProfile, profile, toggleFieldEdit],
   );
 
   const formatLabel = useCallback((key: string): string => {
@@ -201,9 +213,10 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
   );
 
   const defaultAttributeMappings = {
-    picture: ['profile', 'profileUrl'],
-    firstName: 'givenName',
-    lastName: 'familyName',
+    picture: 'profileUrl',
+    firstName: 'name.givenName',
+    lastName: 'name.familyName',
+    username: 'userName',
   };
 
   const mergedMappings = {...defaultAttributeMappings, ...attributeMapping};
@@ -240,9 +253,10 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
       );
     }
     if (Array.isArray(value)) {
-      const displayValue = value
-        .map(item => (typeof item === 'object' ? JSON.stringify(item) : String(item)))
-        .join(', ');
+      const displayValue =
+        value.length > 0
+          ? value.map(item => (typeof item === 'object' ? JSON.stringify(item) : String(item))).join(', ')
+          : '-';
       return (
         <>
           <span style={styles.label}>{label}</span>
@@ -255,8 +269,14 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
     }
     // If editing, show field instead of value
     if (isEditing && onEditValue && mutability !== 'READ_ONLY') {
-      // Use editedUser value if available
-      const fieldValue = editedUser && name && editedUser[name] !== undefined ? editedUser[name] : value || '';
+      // Use editedUser value if available, then flattenedProfile, then schema value
+      const fieldValue =
+        editedUser && name && editedUser[name] !== undefined
+          ? editedUser[name]
+          : flattenedProfile && name && flattenedProfile[name] !== undefined
+          ? flattenedProfile[name]
+          : value || '';
+
       const commonProps = {
         label: undefined, // Don't show label in field, we render it outside
         required: required,
@@ -278,7 +298,23 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
           field = <Checkbox {...commonProps} checked={!!fieldValue} onChange={e => onEditValue(e.target.checked)} />;
           break;
         case 'COMPLEX':
-          field = <TextField {...commonProps} />;
+          // For complex types, use a textarea
+          field = (
+            <textarea
+              value={fieldValue}
+              onChange={e => onEditValue(e.target.value)}
+              required={required}
+              style={{
+                ...commonProps.style,
+                minHeight: '60px',
+                width: '100%',
+                padding: '8px',
+                border: '1px solid #ccc',
+                borderRadius: '4px',
+                resize: 'vertical',
+              }}
+            />
+          );
           break;
         default:
           field = <TextField {...commonProps} />;
@@ -291,10 +327,11 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
       );
     }
     // Default: view mode
+    const displayValue = value !== undefined && value !== null && value !== '' ? String(value) : '-';
     return (
       <>
         <span style={styles.label}>{label}</span>
-        <div style={styles.value}>{String(value)}</div>
+        <div style={styles.value}>{displayValue}</div>
       </>
     );
   };
@@ -302,19 +339,23 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
   const renderUserInfo = (schema: Schema) => {
     if (!schema || !schema.name) return null;
 
+    // Skip fields with undefined or empty values unless editing or editable
+    const hasValue = schema.value !== undefined && schema.value !== '' && schema.value !== null;
     const isFieldEditing = editingFields[schema.name];
+
+    // Show field if: has value, currently editing, or is editable and READ_WRITE
+    const shouldShow = hasValue || isFieldEditing || (editable && schema.mutability === 'READ_WRITE');
+
+    if (!shouldShow) {
+      return null;
+    }
+
     const fieldStyle = {
       ...styles.field,
       display: 'flex',
       alignItems: 'center',
       gap: theme.spacing.unit + 'px',
     };
-    const actionButtonStyle = {
-      ...buttonStyle,
-      padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px`,
-      fontSize: '0.75rem',
-      marginLeft: 'auto',
-    };
 
     return (
       <div style={fieldStyle}>
@@ -390,17 +431,18 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
   };
 
   const getDisplayName = () => {
-    const firstName = getMappedUserProfileValue('firstName', mergedMappings, user);
-    const lastName = getMappedUserProfileValue('lastName', mergedMappings, user);
+    const currentUser = flattenedProfile || profile;
+    const firstName = getMappedUserProfileValue('firstName', mergedMappings, currentUser);
+    const lastName = getMappedUserProfileValue('lastName', mergedMappings, currentUser);
 
     if (firstName && lastName) {
       return `${firstName} ${lastName}`;
     }
 
-    return getMappedUserProfileValue('username', mergedMappings, user) || '';
+    return getMappedUserProfileValue('username', mergedMappings, currentUser) || '';
   };
 
-  if (!user) {
+  if (!profile && !flattenedProfile) {
     return fallback;
   }
 
@@ -409,6 +451,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
     ...(cardLayout ? styles.card : {}),
   };
 
+  const currentUser = flattenedProfile || profile;
   const avatarAttributes = ['picture'];
   const excludedProps = avatarAttributes.map(attr => mergedMappings[attr] || attr);
 
@@ -416,26 +459,40 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
     <div style={containerStyle} className={clsx(withVendorCSSClassPrefix('user-profile'), className)}>
       <div style={styles.header}>
         <Avatar
-          imageUrl={getMappedUserProfileValue('picture', mergedMappings, user)}
+          imageUrl={getMappedUserProfileValue('picture', mergedMappings, currentUser)}
           name={getDisplayName()}
           size={80}
           alt={`${getDisplayName()}'s avatar`}
         />
       </div>
       <div style={styles.infoContainer}>
-        {Array.isArray(user)
-          ? user
-              .filter(schema => !excludedProps.includes(schema.name) && schema.value)
-              .map((schema, index) => <div key={index}>{renderUserInfo(schema)}</div>)
-          : Object.entries(user)
-              .filter(([key]) => !excludedProps.includes(key) && user[key])
-              .map(([key, value]) =>
-                renderUserInfo({
-                  name: key,
-                  value: value,
-                  displayName: formatLabel(key),
-                }),
-              )}
+        {schemas
+          .filter(schema => {
+            // Filter out avatar-related fields and fields we don't want to show
+            if (!schema.name || schema.name === 'profileUrl') return false;
+
+            // For non-editable mode, only show fields with values
+            if (!editable) {
+              const value = flattenedProfile && schema.name ? flattenedProfile[schema.name] : undefined;
+              return value !== undefined && value !== '' && value !== null;
+            }
+
+            return true;
+          })
+          .sort((a, b) => {
+            const orderA = a.displayOrder ? parseInt(a.displayOrder) : 999;
+            const orderB = b.displayOrder ? parseInt(b.displayOrder) : 999;
+            return orderA - orderB;
+          })
+          .map((schema, index) => {
+            // Get the value from flattenedProfile
+            const value = flattenedProfile && schema.name ? flattenedProfile[schema.name] : undefined;
+            const schemaWithValue = {
+              ...schema,
+              value: value,
+            };
+            return <div key={schema.name || index}>{renderUserInfo(schemaWithValue)}</div>;
+          })}
       </div>
     </div>
   );
diff --git a/packages/react/src/components/presentation/UserProfile/UserProfile.tsx b/packages/react/src/components/presentation/UserProfile/UserProfile.tsx
index 0a68db937..1f792d4f9 100644
--- a/packages/react/src/components/presentation/UserProfile/UserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/UserProfile.tsx
@@ -18,6 +18,7 @@
 
 import {FC, ReactElement} from 'react';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
+import useUser from '../../../contexts/User/useUser';
 import BaseUserProfile, {BaseUserProfileProps} from './BaseUserProfile';
 import updateMeProfile from 'packages/react/src/api/scim2/updateMeProfile';
 import getMeProfile from 'packages/react/src/api/scim2/getMeProfile';
@@ -52,14 +53,23 @@ export type UserProfileProps = Omit<BaseUserProfileProps, 'user'>;
  * ```
  */
 const UserProfile: FC<UserProfileProps> = ({...rest}: UserProfileProps): ReactElement => {
-  const {user, baseUrl} = useAsgardeo();
+  const {baseUrl} = useAsgardeo();
+  const {profile, flattenedProfile, schemas} = useUser();
 
   const handleProfileUpdate = async (payload: any): Promise<void> => {
     await updateMeProfile({url: `${baseUrl}/scim2/Me`, payload});
     await getMeProfile({url: `${baseUrl}/scim2/Me`});
   };
 
-  return <BaseUserProfile user={user} onUpdate={handleProfileUpdate} {...rest} />;
+  return (
+    <BaseUserProfile
+      profile={profile}
+      flattenedProfile={flattenedProfile}
+      schemas={schemas}
+      onUpdate={handleProfileUpdate}
+      {...rest}
+    />
+  );
 };
 
 export default UserProfile;
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index ef04e7f80..418d50279 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {SignInOptions, SignOutOptions, User} from '@asgardeo/browser';
+import {SignInOptions, SignOutOptions, User, UserProfile} from '@asgardeo/browser';
 import {FC, RefObject, PropsWithChildren, ReactElement, useEffect, useMemo, useRef, useState, use} from 'react';
 import AsgardeoReactClient from '../../AsgardeoReactClient';
 import AsgardeoContext from './AsgardeoContext';
@@ -47,6 +47,8 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
 
   const [isSignedInSync, setIsSignedInSync] = useState<boolean>(false);
 
+  const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
+
   useEffect(() => {
     (async (): Promise<void> => {
       await asgardeo.initialize({
@@ -78,6 +80,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
       // User is already authenticated. Skip...
       if (await asgardeo.isSignedIn()) {
         setUser(await asgardeo.getUser());
+        setUserProfile(await asgardeo.getUserProfile());
 
         return;
       }
@@ -179,7 +182,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
       <I18nProvider preferences={preferences?.i18n}>
         <ThemeProvider theme={preferences?.theme?.overrides} defaultColorScheme={isDarkMode ? 'dark' : 'light'}>
           <FlowProvider>
-            <UserProvider>{children}</UserProvider>
+            <UserProvider profile={userProfile}>{children}</UserProvider>
           </FlowProvider>
         </ThemeProvider>
       </I18nProvider>
diff --git a/packages/react/src/contexts/User/UserContext.ts b/packages/react/src/contexts/User/UserContext.ts
index fc9508a17..d71eeba0a 100644
--- a/packages/react/src/contexts/User/UserContext.ts
+++ b/packages/react/src/contexts/User/UserContext.ts
@@ -23,52 +23,18 @@ import {User, Schema, FlattenedSchema} from '@asgardeo/browser';
  * Props interface of {@link UserContext}
  */
 export type UserContextProps = {
-  /**
-   * Flag indicating whether the user data is loading.
-   */
-  isLoading: boolean;
-  /**
-   * The raw ME API response object containing user profile information.
-   */
-  profile: any | null;
-  /**
-   * Array of SCIM2 schemas used for user profile structure.
-   */
+  profile: User | null;
   schemas: Schema[] | null;
-  /**
-   * Flattened user profile with dot-notation keys for easier access.
-   */
-  flattenedUser: User | null;
-  /**
-   * The processed user object with nested structure.
-   */
-  user: User | null;
-  /**
-   * Function to refresh user data from the server.
-   */
-  refreshUser: () => Promise<void>;
-  /**
-   * Function to update user profile.
-   */
-  updateUser: (payload: any) => Promise<void>;
-  /**
-   * Error object if there was an issue fetching user data.
-   */
-  error: Error | null;
+  flattenedProfile: User | null;
 };
 
 /**
  * Context object for managing user profile data and related operations.
  */
 const UserContext: Context<UserContextProps | null> = createContext<null | UserContextProps>({
-  isLoading: true,
   profile: null,
   schemas: null,
-  flattenedUser: null,
-  user: null,
-  refreshUser: async () => {},
-  updateUser: async () => {},
-  error: null,
+  flattenedProfile: null,
 });
 
 UserContext.displayName = 'UserContext';
diff --git a/packages/react/src/contexts/User/UserProvider.tsx b/packages/react/src/contexts/User/UserProvider.tsx
index 3245a4578..42fe86057 100644
--- a/packages/react/src/contexts/User/UserProvider.tsx
+++ b/packages/react/src/contexts/User/UserProvider.tsx
@@ -17,14 +17,7 @@
  */
 
 import {FC, PropsWithChildren, ReactElement, useEffect, useState, useCallback, useMemo} from 'react';
-import {
-  User,
-  Schema,
-  AsgardeoAPIError,
-  flattenSchemaAttributes,
-  generateUserProfile,
-  generateFlattenedUserProfile,
-} from '@asgardeo/browser';
+import {UserProfile} from '@asgardeo/browser';
 import UserContext from './UserContext';
 import useAsgardeo from '../Asgardeo/useAsgardeo';
 import getMeProfile from '../../api/scim2/getMeProfile';
@@ -35,15 +28,7 @@ import updateMeProfile from '../../api/scim2/updateMeProfile';
  * Props interface of {@link UserProvider}
  */
 export interface UserProviderProps {
-  /**
-   * Whether to automatically fetch user data when the component mounts.
-   * @default true
-   */
-  autoFetch?: boolean;
-  /**
-   * Custom error handler for user data operations.
-   */
-  onError?: (error: Error) => void;
+  profile: UserProfile;
 }
 
 /**
@@ -76,135 +61,15 @@ export interface UserProviderProps {
  */
 const UserProvider: FC<PropsWithChildren<UserProviderProps>> = ({
   children,
-  autoFetch = true,
-  onError,
+  profile,
 }: PropsWithChildren<UserProviderProps>): ReactElement => {
-  const {isSignedIn, baseUrl} = useAsgardeo();
-
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [profile, setProfile] = useState<any | null>(null);
-  const [schemas, setSchemas] = useState<Schema[] | null>(null);
-  const [user, setUser] = useState<User | null>(null);
-  const [flattenedUser, setFlattenedUser] = useState<User | null>(null);
-  const [error, setError] = useState<Error | null>(null);
-
-  /**
-   * Fetches user profile data including ME response and schemas.
-   */
-  const fetchUserData = useCallback(async (): Promise<void> => {
-    if (!isSignedIn || !baseUrl) {
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const [meResponse, schemasResponse] = await Promise.all([
-        getMeProfile({url: `${baseUrl}/scim2/Me`}),
-        getSchemas({url: `${baseUrl}/scim2/Schemas`}),
-      ]);
-
-      const processedSchemas = flattenSchemaAttributes(schemasResponse);
-
-      const userProfile = generateUserProfile(meResponse, processedSchemas);
-      const flatProfile = generateFlattenedUserProfile(meResponse, processedSchemas);
-
-      setProfile(meResponse);
-      setSchemas(schemasResponse);
-      setUser(userProfile);
-      setFlattenedUser(flatProfile);
-    } catch (err) {
-      const error = err instanceof Error ? err : new Error('Failed to fetch user data');
-      setError(error);
-
-      if (onError) {
-        onError(error);
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  }, [isSignedIn, baseUrl, onError]);
-
-  /**
-   * Refreshes user data by re-fetching from the server.
-   */
-  const refreshUser = useCallback(async (): Promise<void> => {
-    await fetchUserData();
-  }, [fetchUserData]);
-
-  /**
-   * Updates user profile with the provided payload.
-   */
-  const updateUser = useCallback(
-    async (payload: any): Promise<void> => {
-      if (!baseUrl) {
-        throw new AsgardeoAPIError(
-          'Base URL is not available',
-          'updateUser-NoBaseUrl-001',
-          'javascript',
-          400,
-          'Bad Request',
-        );
-      }
-
-      setIsLoading(true);
-      setError(null);
-
-      try {
-        await updateMeProfile({url: `${baseUrl}/scim2/Me`, payload});
-        await fetchUserData();
-      } catch (err) {
-        const error = err instanceof Error ? err : new Error('Failed to update user profile');
-        setError(error);
-
-        if (onError) {
-          onError(error);
-        }
-
-        throw error;
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [baseUrl, fetchUserData, onError],
-  );
-
-  /**
-   * Auto-fetch user data when user signs in and autoFetch is enabled.
-   */
-  useEffect(() => {
-    if (autoFetch && isSignedIn) {
-      fetchUserData();
-    }
-  }, [autoFetch, isSignedIn, fetchUserData]);
-
-  /**
-   * Clear user data when user signs out.
-   */
-  useEffect(() => {
-    if (!isSignedIn) {
-      setProfile(null);
-      setSchemas(null);
-      setUser(null);
-      setFlattenedUser(null);
-      setError(null);
-      setIsLoading(false);
-    }
-  }, [isSignedIn]);
-
   const contextValue = useMemo(
     () => ({
-      isLoading,
-      profile,
-      schemas,
-      flattenedUser,
-      user,
-      refreshUser,
-      updateUser,
-      error,
+      schemas: profile?.schemas,
+      profile: profile?.profile,
+      flattenedProfile: profile?.flattenedProfile,
     }),
-    [isLoading, profile, schemas, flattenedUser, user, refreshUser, updateUser, error],
+    [profile],
   );
 
   return <UserContext.Provider value={contextValue}>{children}</UserContext.Provider>;
diff --git a/packages/react/src/utils/getMappedUserProfileValue.ts b/packages/react/src/utils/getMappedUserProfileValue.ts
index 652ad0315..e29cf50fe 100644
--- a/packages/react/src/utils/getMappedUserProfileValue.ts
+++ b/packages/react/src/utils/getMappedUserProfileValue.ts
@@ -16,30 +16,64 @@
  * under the License.
  */
 
-const getMappedUserProfileValue = (key: string, mappings, user) => {
-  const mappedKey = mappings[key];
+import {User, get} from '@asgardeo/browser';
 
-  if (Array.isArray(user)) {
-    if (Array.isArray(mappedKey)) {
-      for (const field of mappedKey) {
-        const found = user.find(u => u.name === field);
-        if (found?.value !== undefined) {
-          return found.value;
-        }
-      }
-    } else {
-      const found = user.find(u => u.name === mappedKey);
-      if (found?.value !== undefined) {
-        return found.value;
-      }
-    }
+/**
+ * Retrieves a user profile value based on attribute mapping configuration.
+ *
+ * This function allows flexible mapping of component attribute names to actual
+ * user profile field paths. It supports both simple string mappings and arrays
+ * of potential field paths for fallback scenarios.
+ *
+ * @param key - The logical attribute name to retrieve (e.g., 'firstName', 'email')
+ * @param mappings - Object mapping logical names to user profile field paths
+ * @param user - The user object to extract values from
+ * @returns The mapped value from the user profile, or undefined if not found
+ *
+ * @example
+ * ```typescript
+ * const mappings = {
+ *   firstName: 'name.givenName',
+ *   email: 'emails[0]',
+ *   picture: ['profileUrl', 'profile', 'avatar'] // fallback options
+ * };
+ *
+ * const user = {
+ *   name: { givenName: 'John' },
+ *   emails: ['john@example.com'],
+ *   profileUrl: 'https://example.com/avatar.jpg'
+ * };
+ *
+ * getMappedUserProfileValue('firstName', mappings, user); // 'John'
+ * getMappedUserProfileValue('email', mappings, user); // 'john@example.com'
+ * getMappedUserProfileValue('picture', mappings, user); // 'https://example.com/avatar.jpg'
+ * ```
+ */
+const getMappedUserProfileValue = (key: string, mappings: Record<string, string | string[]>, user: User): any => {
+  if (!key || !mappings || !user) {
+    return undefined;
+  }
 
-    const found = user.find(u => u.name === key);
+  const mapping = mappings[key];
 
-    return found?.value;
+  if (!mapping) {
+    // If no mapping defined, try to get the value directly from the user object
+    return get(user, key);
+  }
+
+  // If mapping is an array, try each path until we find a value
+  if (Array.isArray(mapping)) {
+    for (const path of mapping) {
+      const value = get(user, path);
+      if (value !== undefined && value !== null && value !== '') {
+        return value;
+      }
+    }
+    return undefined;
   }
 
-  return mappedKey ? user[mappedKey] : user[key];
+  // For single string mapping, get the value directly
+  return get(user, mapping);
 };
 
 export default getMappedUserProfileValue;
diff --git a/packages/react/src/utils/getUserProfile.ts b/packages/react/src/utils/getUserProfile.ts
deleted file mode 100644
index b57d867d2..000000000
--- a/packages/react/src/utils/getUserProfile.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import getMeProfile from '../api/scim2/getMeProfile';
-import {
-  AsgardeoAPIError,
-  flattenSchemaAttributes,
-  FlattenedSchema,
-  SchemaAttribute,
-  User,
-  generateUserProfile,
-  generateFlattenedUserProfile
-} from '@asgardeo/browser';
-import getSchemas from '../api/scim2/getSchemas';
-
-/**
- * Retrieves the authenticated user's profile information with all SCIM2 schema properties
- * flattened to the root level for easier access.
- *
- * The function flattens properties from all schemas defined in WellKnownSchemaIds:
- * - Core User properties (urn:ietf:params:scim:schemas:core:2.0:User)
- * - Enterprise User properties (urn:ietf:params:scim:schemas:extension:enterprise:2.0:User)
- * - System User properties (urn:scim:wso2:schema)
- * - Custom User properties (urn:scim:schemas:extension:custom:User)
- *
- * @param requestConfig - Request configuration object.
- * @returns A promise that resolves with the flattened user profile information.
- * @example
- * ```typescript
- * try {
- *   const userProfile = await getUserProfile({
- *     baseUrl: "https://api.asgardeo.io/t/<ORGANIZATION>",
- *   });
- *
- *   // Access flattened properties directly:
- *   console.log("Email:", userProfile.emails);
- *   console.log("Given Name:", userProfile.name?.givenName);
- *   console.log("Username:", userProfile.userName);
- *
- *   // WSO2 specific properties:
- *   console.log("Country:", userProfile.country);
- *   console.log("Date of Birth:", userProfile.dateOfBirth);
- *
- *   // Enterprise properties (if available):
- *   console.log("Verified Emails:", userProfile.verifiedEmailAddresses);
- *   console.log("Mobile Numbers:", userProfile.mobileNumbers);
- * } catch (error) {
- *   if (error instanceof AsgardeoAPIError) {
- *     console.error('Failed to get user profile:', error.message);
- *   }
- * }
- * ```
- */
-const getUserProfile = async ({baseUrl}): Promise<User> => {
-  try {
-    const profile = await getMeProfile({url: `${baseUrl}/scim2/Me`});
-    const schemas = await getSchemas({url: `${baseUrl}/scim2/Schemas`});
-
-    const processedSchemas = flattenSchemaAttributes(schemas);
-
-    console.log('Processed Schemas:', JSON.stringify(processedSchemas));
-
-    // Create flat profile from ME response and processed schemas
-    const profles = generateUserProfile(profile, processedSchemas);
-    const flatProfile = generateFlattenedUserProfile(profile, processedSchemas);
-
-    console.log('profles profles:', JSON.stringify(profles, null, 2));
-    console.log('Flat Profile:', JSON.stringify(flatProfile, null, 2));
-
-    return flatProfile;
-  } catch (error) {
-    throw new AsgardeoAPIError(
-      'Failed to get user profile',
-      'getUserProfile-Error-001',
-      'javascript',
-      500,
-      'Internal Server Error',
-    );
-  }
-};
-
-export default getUserProfile;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b8e2afb73..b8b203dce 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -374,6 +374,9 @@ importers:
       '@asgardeo/browser':
         specifier: workspace:^
         version: link:../browser
+      '@floating-ui/react':
+        specifier: ^0.26.0
+        version: 0.26.28(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@types/react-dom':
         specifier: ^19.1.5
         version: 19.1.5(@types/react@19.1.5)
@@ -1421,6 +1424,27 @@ packages:
   '@fastify/busboy@3.1.1':
     resolution: {integrity: sha512-5DGmA8FTdB2XbDeEwc/5ZXBl6UbBAyBOOLlPuBnZ/N1SwdH9Ii+cOX3tBROlDgcTXxjOYnLMVoKk9+FXAw0CJw==}
 
+  '@floating-ui/core@1.7.1':
+    resolution: {integrity: sha512-azI0DrjMMfIug/ExbBaeDVJXcY0a7EPvPjb2xAJPa4HeimBX+Z18HK8QQR3jb6356SnDDdxx+hinMLcJEDdOjw==}
+
+  '@floating-ui/dom@1.7.1':
+    resolution: {integrity: sha512-cwsmW/zyw5ltYTUeeYJ60CnQuPqmGwuGVhG9w0PRaRKkAyi38BT5CKrpIbb+jtahSwUl04cWzSx9ZOIxeS6RsQ==}
+
+  '@floating-ui/react-dom@2.1.3':
+    resolution: {integrity: sha512-huMBfiU9UnQ2oBwIhgzyIiSpVgvlDstU8CX0AF+wS+KzmYMs0J2a3GwuFHV1Lz+jlrQGeC1fF+Nv0QoumyV0bA==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/react@0.26.28':
+    resolution: {integrity: sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.9':
+    resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -9751,6 +9775,31 @@ snapshots:
 
   '@fastify/busboy@3.1.1': {}
 
+  '@floating-ui/core@1.7.1':
+    dependencies:
+      '@floating-ui/utils': 0.2.9
+
+  '@floating-ui/dom@1.7.1':
+    dependencies:
+      '@floating-ui/core': 1.7.1
+      '@floating-ui/utils': 0.2.9
+
+  '@floating-ui/react-dom@2.1.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@floating-ui/dom': 1.7.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
+  '@floating-ui/react@0.26.28(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@floating-ui/utils': 0.2.9
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      tabbable: 6.2.0
+
+  '@floating-ui/utils@0.2.9': {}
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.6':
diff --git a/recipes/vite-react-ts/src/components/Header.tsx b/recipes/vite-react-ts/src/components/Header.tsx
index 3f5d8db03..d09498d77 100644
--- a/recipes/vite-react-ts/src/components/Header.tsx
+++ b/recipes/vite-react-ts/src/components/Header.tsx
@@ -4,7 +4,7 @@ import {useState, useRef, useEffect} from 'react';
 import {Link} from 'react-router-dom';
 import {useApp} from '../App';
 import {Users, ChevronDown, Settings, User as UserIcon, LogOut, Plus, Check, Building2} from 'lucide-react';
-import {SignedOut, SignInButton, SignOutButton, User, UserProfile} from '@asgardeo/react';
+import {SignedOut, SignInButton, SignOutButton, User, UserDropdown, UserProfile} from '@asgardeo/react';
 import {Button} from './ui/button';
 
 export default function Header() {
@@ -141,9 +141,12 @@ export default function Header() {
                 onClick={() => setShowUserDropdown(!showUserDropdown)}
                 className="flex items-center space-x-2 p-1 rounded-full hover:bg-gray-50"
               >
-                <User>{user => <img src={user?.picture} alt={user?.userName} className="w-8 h-8 rounded-full" />}</User>
+                <User>
+                  {user => <img src={user?.profileUrl} alt={user?.userName} className="w-8 h-8 rounded-full" />}
+                </User>
                 <ChevronDown className="h-4 w-4 text-gray-500" />
               </button>
+              <UserDropdown />
 
               {showUserDropdown && (
                 <div className="absolute right-0 mt-2 w-56 bg-white rounded-md shadow-lg border border-gray-200 py-1 z-50">

From 832f6792516252be416cc918c550a10384fef758 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 16 Jun 2025 00:40:55 +0530
Subject: [PATCH 098/131] chore: replace Popover component with Dialog for user
 profile display

---
 .../UserProfile/BaseUserProfile.tsx           |  17 +-
 .../components/primitives/Popover/Popover.tsx | 576 ++++++++++++++----
 .../vite-react-ts/src/components/Header.tsx   |   1 -
 3 files changed, 456 insertions(+), 138 deletions(-)

diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index 9b43b418f..b64cce0f8 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -16,8 +16,8 @@
  * under the License.
  */
 
-import {CSSProperties, FC, ReactElement, useMemo, useState, useCallback} from 'react';
-import {Popover} from '../../primitives/Popover/Popover';
+import {CSSProperties, FC, ReactElement, useMemo, useState, useCallback, useRef} from 'react';
+import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Popover';
 import {Avatar} from '../../primitives/Avatar/Avatar';
 import TextField from '../../primitives/TextField/TextField';
 import DatePicker from '../../primitives/DatePicker/DatePicker';
@@ -57,7 +57,6 @@ export interface BaseUserProfileProps {
   flattenedProfile?: User;
   schemas: Schema[];
   mode?: 'inline' | 'popup';
-  portalId?: string;
   title?: string;
   attributeMapping?: {
     picture?: string | string[];
@@ -82,7 +81,6 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
   schemas,
   flattenedProfile,
   mode = 'inline',
-  portalId = 'asgardeo-user-profile',
   title = 'User Profile',
   attributeMapping = {},
   editable = true,
@@ -96,6 +94,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
   const [isOpen, setIsOpen] = useState(mode === 'popup');
   const [editedUser, setEditedUser] = useState(flattenedProfile || profile);
   const [editingFields, setEditingFields] = useState<Record<string, boolean>>({});
+  const triggerRef = useRef<HTMLButtonElement>(null);
 
   const PencilIcon = () => (
     <svg
@@ -499,10 +498,12 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
 
   if (mode === 'popup') {
     return (
-      <Popover isOpen={isOpen} onClose={() => setIsOpen(false)} portalId={portalId}>
-        <Popover.Header>{title}</Popover.Header>
-        <Popover.Content>{profileContent}</Popover.Content>
-      </Popover>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent>
+          <DialogHeading>{title}</DialogHeading>
+          <div style={{padding: '1rem'}}>{profileContent}</div>
+        </DialogContent>
+      </Dialog>
     );
   }
 
diff --git a/packages/react/src/components/primitives/Popover/Popover.tsx b/packages/react/src/components/primitives/Popover/Popover.tsx
index bb3ed625c..3f3f66f7d 100644
--- a/packages/react/src/components/primitives/Popover/Popover.tsx
+++ b/packages/react/src/components/primitives/Popover/Popover.tsx
@@ -16,8 +16,25 @@
  * under the License.
  */
 
-import React, {CSSProperties, FC, ReactNode, useEffect, useMemo, useState} from 'react';
-import {createPortal} from 'react-dom';
+import React, {CSSProperties, useMemo} from 'react';
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  useClick,
+  useDismiss,
+  useRole,
+  useInteractions,
+  useMergeRefs,
+  FloatingFocusManager,
+  FloatingOverlay,
+  FloatingPortal,
+  useId,
+  UseFloatingReturn,
+  UseInteractionsReturn,
+} from '@floating-ui/react';
 import {useTheme} from '../../../contexts/Theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
@@ -29,27 +46,32 @@ const useStyles = () => {
   return useMemo(
     () => ({
       overlay: {
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
         backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        zIndex: 999,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 9999,
       } as CSSProperties,
       content: {
-        position: 'fixed',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        zIndex: 1000,
+        background: theme.colors.background.surface,
+        borderRadius: theme.borderRadius.large,
+        boxShadow: `0 2px 8px ${colorScheme === 'dark' ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.15)'}`,
+        outline: 'none',
+        maxWidth: '90vw',
         maxHeight: '90vh',
         overflowY: 'auto',
+        zIndex: 10000,
+      } as CSSProperties,
+      dropdownContent: {
         background: theme.colors.background.surface,
         borderRadius: theme.borderRadius.large,
         boxShadow: `0 2px 8px ${colorScheme === 'dark' ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.15)'}`,
+        outline: 'none',
+        maxWidth: '90vw',
+        maxHeight: '90vh',
+        overflowY: 'auto',
+        zIndex: 10000,
       } as CSSProperties,
-      contentBody: {} as CSSProperties,
       header: {
         display: 'flex',
         justifyContent: 'space-between',
@@ -63,153 +85,449 @@ const useStyles = () => {
         fontWeight: 600,
         color: theme.colors.text.primary,
       } as CSSProperties,
-      closeButton: {
-        background: 'none',
-        border: 'none',
-        cursor: 'pointer',
-        padding: theme.spacing.unit / 2 + 'px',
-        color: theme.colors.text.secondary,
-        fontSize: '1.2rem',
-        '&:hover': {
-          color: theme.colors.text.primary,
-        },
+      contentBody: {
+        padding: `${theme.spacing.unit * 2}px`,
       } as CSSProperties,
     }),
     [theme, colorScheme],
   );
 };
 
-interface PopoverContextType {
-  onClose?: () => void;
+// Modal Dialog hook and components
+interface DialogOptions {
+  initialOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+// Return type for dialog hook
+interface DialogHookReturn extends UseFloatingReturn, UseInteractionsReturn {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  labelId: string | undefined;
+  descriptionId: string | undefined;
+  setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+}
+
+export function useDialog({
+  initialOpen = false,
+  open: controlledOpen,
+  onOpenChange: setControlledOpen,
+}: DialogOptions = {}): DialogHookReturn {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
+  const [labelId, setLabelId] = React.useState<string | undefined>();
+  const [descriptionId, setDescriptionId] = React.useState<string | undefined>();
+
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = setControlledOpen ?? setUncontrolledOpen;
+
+  const data = useFloating({
+    open,
+    onOpenChange: setOpen,
+  });
+
+  const context = data.context;
+
+  const click = useClick(context, {
+    enabled: controlledOpen == null,
+  });
+  const dismiss = useDismiss(context, {outsidePressEvent: 'mousedown'});
+  const role = useRole(context);
+
+  const interactions = useInteractions([click, dismiss, role]);
+
+  return React.useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId,
+    }),
+    [open, setOpen, interactions, data, labelId, descriptionId],
+  );
+}
+
+// Dropdown Popover hook
+interface PopoverOptions {
+  initialOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+  offset?: number;
+}
+
+// Return type for popover hook
+interface PopoverHookReturn extends UseFloatingReturn, UseInteractionsReturn {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  labelId: string | undefined;
+  descriptionId: string | undefined;
+  setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
 }
 
-const PopoverContext = React.createContext<PopoverContextType>({});
+export function usePopover({
+  initialOpen = false,
+  open: controlledOpen,
+  onOpenChange: setControlledOpen,
+  placement = 'bottom',
+  offset: offsetValue = 5,
+}: PopoverOptions = {}): PopoverHookReturn {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
+  const [labelId, setLabelId] = React.useState<string | undefined>();
+  const [descriptionId, setDescriptionId] = React.useState<string | undefined>();
+
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = setControlledOpen ?? setUncontrolledOpen;
+
+  const data = useFloating({
+    open,
+    onOpenChange: setOpen,
+    middleware: [offset(offsetValue), flip(), shift()],
+    whileElementsMounted: autoUpdate,
+    placement,
+  });
+
+  const context = data.context;
+
+  const click = useClick(context);
+  const dismiss = useDismiss(context, {outsidePressEvent: 'mousedown'});
+  const role = useRole(context);
+
+  const interactions = useInteractions([click, dismiss, role]);
+
+  return React.useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId,
+    }),
+    [open, setOpen, interactions, data, labelId, descriptionId],
+  );
+}
+
+// Context types
+type DialogContextType =
+  | (DialogHookReturn & {
+      setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+      setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    })
+  | null;
+
+type PopoverContextType =
+  | (PopoverHookReturn & {
+      setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+      setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    })
+  | null;
+
+const DialogContext = React.createContext<DialogContextType>(null);
+const PopoverContext = React.createContext<PopoverContextType>(null);
+
+export const useDialogContext = (): DialogHookReturn => {
+  const context = React.useContext(DialogContext);
+  if (context == null) {
+    throw new Error('Dialog components must be wrapped in <Dialog />');
+  }
+  return context;
+};
+
+export const usePopoverContext = (): PopoverHookReturn => {
+  const context = React.useContext(PopoverContext);
+  if (context == null) {
+    throw new Error('Popover components must be wrapped in <Popover />');
+  }
+  return context;
+};
+
+// Dialog Components (Modal)
+export function Dialog({children, ...options}: {children: React.ReactNode} & DialogOptions) {
+  const dialog = useDialog(options);
+  return <DialogContext.Provider value={dialog}>{children}</DialogContext.Provider>;
+}
+
+interface DialogTriggerProps {
+  children: React.ReactNode;
+  asChild?: boolean;
+}
+
+export const DialogTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement> & DialogTriggerProps>(
+  function DialogTrigger({children, asChild = false, ...props}, propRef) {
+    const context = useDialogContext();
+    const childrenRef = (children as any).ref;
+    const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(
+        children,
+        context.getReferenceProps({
+          ref,
+          ...props,
+          ...(children.props as any),
+          'data-state': context.open ? 'open' : 'closed',
+        }),
+      );
+    }
+
+    return (
+      <button ref={ref} data-state={context.open ? 'open' : 'closed'} {...context.getReferenceProps(props)}>
+        {children}
+      </button>
+    );
+  },
+);
+
+export const DialogContent = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(function DialogContent(
+  props,
+  propRef,
+) {
+  const {context: floatingContext, ...context} = useDialogContext();
+  const ref = useMergeRefs([context.refs.setFloating, propRef]);
+  const styles = useStyles();
 
-interface PopoverHeaderProps {
-  children?: ReactNode;
+  if (!floatingContext.open) return null;
+
+  return (
+    <FloatingPortal>
+      <FloatingOverlay className={withVendorCSSClassPrefix('popover-overlay')} style={styles.overlay} lockScroll>
+        <FloatingFocusManager context={floatingContext}>
+          <div
+            ref={ref}
+            style={styles.content}
+            className={clsx(withVendorCSSClassPrefix('popover-content'), props.className)}
+            aria-labelledby={context.labelId}
+            aria-describedby={context.descriptionId}
+            {...context.getFloatingProps(props)}
+          >
+            {props.children}
+          </div>
+        </FloatingFocusManager>
+      </FloatingOverlay>
+    </FloatingPortal>
+  );
+});
+
+// Popover Components (Dropdown)
+export function Popover({children, ...options}: {children: React.ReactNode} & PopoverOptions) {
+  const popover = usePopover(options);
+  return <PopoverContext.Provider value={popover}>{children}</PopoverContext.Provider>;
+}
+
+interface PopoverTriggerProps {
+  children: React.ReactNode;
+  asChild?: boolean;
 }
 
-const PopoverHeader: FC<PopoverHeaderProps> = ({children}) => {
+export const PopoverTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement> & PopoverTriggerProps>(
+  function PopoverTrigger({children, asChild = false, ...props}, propRef) {
+    const context = usePopoverContext();
+    const childrenRef = (children as any).ref;
+    const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(
+        children,
+        context.getReferenceProps({
+          ref,
+          ...props,
+          ...(children.props as any),
+          'data-state': context.open ? 'open' : 'closed',
+        }),
+      );
+    }
+
+    return (
+      <button ref={ref} data-state={context.open ? 'open' : 'closed'} {...context.getReferenceProps(props)}>
+        {children}
+      </button>
+    );
+  },
+);
+
+export const PopoverContent = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(function PopoverContent(
+  props,
+  propRef,
+) {
+  const {context: floatingContext, ...context} = usePopoverContext();
+  const ref = useMergeRefs([context.refs.setFloating, propRef]);
   const styles = useStyles();
-  const {onClose} = React.useContext(PopoverContext);
+
+  if (!floatingContext.open) return null;
 
   return (
-    <div style={styles.header}>
-      {children && <h3 style={styles.headerTitle}>{children}</h3>}
-      {onClose && (
-        <Button
-          color="tertiary"
-          variant="text"
-          size="small"
-          onClick={onClose}
-          aria-label="Close"
-          style={{
-            padding: styles.closeButton.padding,
-            fontSize: styles.closeButton.fontSize,
-          }}
+    <FloatingPortal>
+      <FloatingFocusManager context={floatingContext}>
+        <div
+          ref={ref}
+          style={{...styles.dropdownContent, ...context.floatingStyles}}
+          className={clsx(withVendorCSSClassPrefix('popover-content'), props.className)}
+          aria-labelledby={context.labelId}
+          aria-describedby={context.descriptionId}
+          {...context.getFloatingProps(props)}
         >
+          {props.children}
+        </div>
+      </FloatingFocusManager>
+    </FloatingPortal>
+  );
+});
+
+// Shared components
+export const PopoverHeading = React.forwardRef<HTMLHeadingElement, React.HTMLProps<HTMLHeadingElement>>(
+  function PopoverHeading({children, ...props}, ref) {
+    const context = usePopoverContext();
+    const styles = useStyles();
+    const id = useId();
+
+    React.useLayoutEffect(() => {
+      context.setLabelId(id);
+      return () => context.setLabelId(undefined);
+    }, [id, context.setLabelId]);
+
+    return (
+      <div style={styles.header}>
+        <h2 {...props} ref={ref} id={id} style={styles.headerTitle}>
+          {children}
+        </h2>
+        <Button color="tertiary" variant="text" size="small" onClick={() => context.setOpen(false)} aria-label="Close">
           ×
         </Button>
-      )}
-    </div>
-  );
-};
+      </div>
+    );
+  },
+);
 
-interface PopoverContentProps {
-  children: ReactNode;
-}
+export const DialogHeading = React.forwardRef<HTMLHeadingElement, React.HTMLProps<HTMLHeadingElement>>(
+  function DialogHeading({children, ...props}, ref) {
+    const context = useDialogContext();
+    const styles = useStyles();
+    const id = useId();
 
-const PopoverContent: FC<PopoverContentProps> = ({children}) => {
-  const styles = useStyles();
-  return <div style={styles.contentBody}>{children}</div>;
-};
+    React.useLayoutEffect(() => {
+      context.setLabelId(id);
+      return () => context.setLabelId(undefined);
+    }, [id, context.setLabelId]);
+
+    return (
+      <div style={styles.header}>
+        <h2 {...props} ref={ref} id={id} style={styles.headerTitle}>
+          {children}
+        </h2>
+        <Button color="tertiary" variant="text" size="small" onClick={() => context.setOpen(false)} aria-label="Close">
+          ×
+        </Button>
+      </div>
+    );
+  },
+);
+
+export const PopoverDescription = React.forwardRef<HTMLParagraphElement, React.HTMLProps<HTMLParagraphElement>>(
+  function PopoverDescription({children, ...props}, ref) {
+    const context = usePopoverContext();
+    const id = useId();
+
+    React.useLayoutEffect(() => {
+      context.setDescriptionId(id);
+      return () => context.setDescriptionId(undefined);
+    }, [id, context.setDescriptionId]);
+
+    return (
+      <p {...props} ref={ref} id={id}>
+        {children}
+      </p>
+    );
+  },
+);
+
+export const DialogDescription = React.forwardRef<HTMLParagraphElement, React.HTMLProps<HTMLParagraphElement>>(
+  function DialogDescription({children, ...props}, ref) {
+    const context = useDialogContext();
+    const id = useId();
+
+    React.useLayoutEffect(() => {
+      context.setDescriptionId(id);
+      return () => context.setDescriptionId(undefined);
+    }, [id, context.setDescriptionId]);
+
+    return (
+      <p {...props} ref={ref} id={id}>
+        {children}
+      </p>
+    );
+  },
+);
 
-export interface PopoverProps {
-  /**
-   * Whether the popover is open
-   */
+export const PopoverClose = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  function PopoverClose(props, ref) {
+    const context = usePopoverContext();
+    return <button type="button" {...props} ref={ref} onClick={() => context.setOpen(false)} />;
+  },
+);
+
+export const DialogClose = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  function DialogClose(props, ref) {
+    const context = useDialogContext();
+    return <button type="button" {...props} ref={ref} onClick={() => context.setOpen(false)} />;
+  },
+);
+
+// Legacy API compatibility (for existing code)
+interface LegacyPopoverProps {
   isOpen: boolean;
-  /**
-   * The content to display inside the popover
-   */
-  children: ReactNode;
-  /**
-   * Callback when the popover should close
-   */
+  children: React.ReactNode;
   onClose: () => void;
-  /**
-   * Optional custom class name for the popover container
-   */
   className?: string;
-  /**
-   * The HTML element ID where the portal should be mounted
-   */
-  portalId?: string;
-  /**
-   * The display mode of the popover
-   * 'modal' - shows overlay and centers content
-   * 'dropdown' - no overlay, content positioned relative to trigger
-   */
   mode?: 'modal' | 'dropdown';
+  trigger?: HTMLElement | null;
+  placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+  offset?: number;
 }
 
-export const Popover: FC<PopoverProps> & {
-  Header: typeof PopoverHeader;
-  Content: typeof PopoverContent;
-} = ({isOpen, children, onClose, className = '', portalId = 'wso2-popover-root', mode = 'modal'}) => {
-  const [portalEl, setPortalEl] = useState<HTMLElement | null>(null);
+// Legacy Header component for backward compatibility
+const LegacyPopoverHeader: React.FC<{children?: React.ReactNode}> = ({children}) => {
   const styles = useStyles();
 
-  useEffect(() => {
-    const existing = document.getElementById(portalId);
-    if (existing) {
-      setPortalEl(existing);
-      return void 0;
-    }
+  return <div style={styles.header}>{children && <h3 style={styles.headerTitle}>{children}</h3>}</div>;
+};
+
+// Legacy Content component for backward compatibility
+const LegacyPopoverContent: React.FC<{children: React.ReactNode}> = ({children}) => {
+  const styles = useStyles();
+  return <div style={styles.contentBody}>{children}</div>;
+};
 
-    const el = document.createElement('div');
-    el.id = portalId;
-    document.body.appendChild(el);
-    setPortalEl(el);
-
-    return () => {
-      if (document.getElementById(portalId)) {
-        document.getElementById(portalId)?.remove();
-      }
-    };
-  }, [portalId]);
-
-  useEffect(() => {
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isOpen) {
-        onClose();
-      }
-    };
-
-    document.addEventListener('keydown', handleEscape);
-    return () => document.removeEventListener('keydown', handleEscape);
-  }, [isOpen, onClose]);
-
-  if (!isOpen || !portalEl) {
-    return null;
+// Legacy component for backward compatibility
+export const LegacyPopover: React.FC<LegacyPopoverProps> & {
+  Header: typeof LegacyPopoverHeader;
+  Content: typeof LegacyPopoverContent;
+} = ({isOpen, children, onClose, className = '', mode = 'modal', trigger, placement, offset}) => {
+  if (mode === 'modal') {
+    return (
+      <Dialog open={isOpen} onOpenChange={onClose}>
+        <DialogContent className={className}>{children}</DialogContent>
+      </Dialog>
+    );
   }
 
-  return createPortal(
-    <PopoverContext.Provider value={{onClose}}>
-      <div className={clsx(withVendorCSSClassPrefix('popover'), className)}>
-        {mode === 'modal' && (
-          <div className={withVendorCSSClassPrefix('popover-overlay')} style={styles['overlay']} onClick={onClose} />
-        )}
-        <div className={withVendorCSSClassPrefix('popover-content')} style={styles['content']}>
-          {children}
-        </div>
-      </div>
-    </PopoverContext.Provider>,
-    portalEl,
+  return (
+    <Popover open={isOpen} onOpenChange={onClose} placement={placement} offset={offset}>
+      <PopoverContent className={className}>{children}</PopoverContent>
+    </Popover>
   );
 };
 
-Popover.Header = PopoverHeader;
-Popover.Content = PopoverContent;
+LegacyPopover.Header = LegacyPopoverHeader;
+LegacyPopover.Content = LegacyPopoverContent;
 
-export default Popover;
+// Export the legacy component as default for backward compatibility
+export default LegacyPopover;
diff --git a/recipes/vite-react-ts/src/components/Header.tsx b/recipes/vite-react-ts/src/components/Header.tsx
index d09498d77..c5a16b252 100644
--- a/recipes/vite-react-ts/src/components/Header.tsx
+++ b/recipes/vite-react-ts/src/components/Header.tsx
@@ -146,7 +146,6 @@ export default function Header() {
                 </User>
                 <ChevronDown className="h-4 w-4 text-gray-500" />
               </button>
-              <UserDropdown />
 
               {showUserDropdown && (
                 <div className="absolute right-0 mt-2 w-56 bg-white rounded-md shadow-lg border border-gray-200 py-1 z-50">

From 4a2b822a2d9bbf94199bb0eab47c297583266371 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 16 Jun 2025 01:32:28 +0530
Subject: [PATCH 099/131] chore(react): update import statements to use default
 imports for useTheme and ThemeProvider

---
 .../UserDropdown/BaseUserDropdown.tsx         |  2 +-
 .../UserProfile/BaseUserProfile.tsx           |  2 +-
 .../src/components/primitives/Alert/Alert.tsx |  2 +-
 .../components/primitives/Avatar/Avatar.tsx   |  2 +-
 .../components/primitives/Button/Button.tsx   |  2 +-
 .../src/components/primitives/Card/Card.tsx   |  4 +-
 .../primitives/Checkbox/Checkbox.tsx          |  4 +-
 .../primitives/DatePicker/DatePicker.tsx      |  2 +-
 .../components/primitives/Divider/Divider.tsx |  2 +-
 .../primitives/FormControl/FormControl.tsx    |  2 +-
 .../primitives/InputLabel/InputLabel.tsx      |  2 +-
 .../primitives/OtpField/OtpField.tsx          |  2 +-
 .../components/primitives/Popover/Popover.tsx |  2 +-
 .../components/primitives/Select/Select.tsx   |  2 +-
 .../primitives/TextField/TextField.tsx        | 11 +++-
 .../primitives/Typography/Typography.tsx      | 56 +++++++++----------
 .../contexts/Asgardeo/AsgardeoProvider.tsx    |  2 +-
 .../src/contexts/Theme/ThemeProvider.tsx      |  4 +-
 packages/react/src/contexts/Theme/useTheme.ts |  4 +-
 packages/react/src/index.ts                   | 31 ++++++++--
 20 files changed, 84 insertions(+), 56 deletions(-)

diff --git a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
index 7a550ad0f..981a73652 100644
--- a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
+++ b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
@@ -32,7 +32,7 @@ import {
   FloatingFocusManager,
   FloatingPortal,
 } from '@floating-ui/react';
-import {useTheme} from '../../../contexts/Theme/useTheme';
+import useTheme from '../../../contexts/Theme/useTheme';
 import {Avatar} from '../../primitives/Avatar/Avatar';
 import Button from '../../primitives/Button/Button';
 import getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';
diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index b64cce0f8..d6b2a47db 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -23,7 +23,7 @@ import TextField from '../../primitives/TextField/TextField';
 import DatePicker from '../../primitives/DatePicker/DatePicker';
 import Checkbox from '../../primitives/Checkbox/Checkbox';
 import Button from '../../primitives/Button/Button';
-import {useTheme} from '../../../contexts/Theme/useTheme';
+import useTheme from '../../../contexts/Theme/useTheme';
 import {User, withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
 import getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';
diff --git a/packages/react/src/components/primitives/Alert/Alert.tsx b/packages/react/src/components/primitives/Alert/Alert.tsx
index 7026741bd..9af01832a 100644
--- a/packages/react/src/components/primitives/Alert/Alert.tsx
+++ b/packages/react/src/components/primitives/Alert/Alert.tsx
@@ -25,7 +25,7 @@ import {
   ForwardRefExoticComponent,
   useMemo,
 } from 'react';
-import {useTheme} from '../../../contexts/Theme/useTheme';
+import useTheme from '../../../contexts/Theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
 import Typography from '../Typography/Typography';
diff --git a/packages/react/src/components/primitives/Avatar/Avatar.tsx b/packages/react/src/components/primitives/Avatar/Avatar.tsx
index 095396989..899c479f3 100644
--- a/packages/react/src/components/primitives/Avatar/Avatar.tsx
+++ b/packages/react/src/components/primitives/Avatar/Avatar.tsx
@@ -17,7 +17,7 @@
  */
 
 import {CSSProperties, FC, useMemo} from 'react';
-import {useTheme} from '../../../contexts/Theme/useTheme';
+import useTheme from '../../../contexts/Theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
 
diff --git a/packages/react/src/components/primitives/Button/Button.tsx b/packages/react/src/components/primitives/Button/Button.tsx
index b6a2585e6..ce4ad5515 100644
--- a/packages/react/src/components/primitives/Button/Button.tsx
+++ b/packages/react/src/components/primitives/Button/Button.tsx
@@ -17,7 +17,7 @@
  */
 
 import {CSSProperties, FC, ButtonHTMLAttributes, forwardRef, useMemo} from 'react';
-import {useTheme} from '../../../contexts/Theme/useTheme';
+import useTheme from '../../../contexts/Theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
 
diff --git a/packages/react/src/components/primitives/Card/Card.tsx b/packages/react/src/components/primitives/Card/Card.tsx
index a69e08ca3..663b35e28 100644
--- a/packages/react/src/components/primitives/Card/Card.tsx
+++ b/packages/react/src/components/primitives/Card/Card.tsx
@@ -1,6 +1,6 @@
 /**
  * Copyright (import {CSSProperties, HTMLAttributes, forwardRef, useMemo, ReactNode, ForwardRefExoticComponent, Ref} from 'react';
-import {useTheme} from '../../../theme/useTheme'; 2025, WSO2 LLC. (https://www.wso2.com).
+import useTheme from '../../../theme/useTheme'; 2025, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -26,7 +26,7 @@ import {
   ForwardRefExoticComponent,
   RefAttributes,
 } from 'react';
-import {useTheme} from '../../../contexts/Theme/useTheme';
+import useTheme from '../../../contexts/Theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
 import Typography from '../Typography/Typography';
diff --git a/packages/react/src/components/primitives/Checkbox/Checkbox.tsx b/packages/react/src/components/primitives/Checkbox/Checkbox.tsx
index 0285c260a..9628f97c4 100644
--- a/packages/react/src/components/primitives/Checkbox/Checkbox.tsx
+++ b/packages/react/src/components/primitives/Checkbox/Checkbox.tsx
@@ -17,11 +17,11 @@
  */
 
 import {CSSProperties, FC, InputHTMLAttributes} from 'react';
-import {useTheme} from '../../../contexts/Theme/useTheme';
+import useTheme from '../../../contexts/Theme/useTheme';
 import clsx from 'clsx';
 import FormControl from '../FormControl/FormControl';
 import InputLabel from '../InputLabel/InputLabel';
-import { withVendorCSSClassPrefix } from 'packages/browser/dist';
+import {withVendorCSSClassPrefix} from 'packages/browser/dist';
 
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {
   /**
diff --git a/packages/react/src/components/primitives/DatePicker/DatePicker.tsx b/packages/react/src/components/primitives/DatePicker/DatePicker.tsx
index 8e8c224fb..b74d7d95b 100644
--- a/packages/react/src/components/primitives/DatePicker/DatePicker.tsx
+++ b/packages/react/src/components/primitives/DatePicker/DatePicker.tsx
@@ -17,7 +17,7 @@
  */
 
 import {CSSProperties, FC, InputHTMLAttributes} from 'react';
-import {useTheme} from '../../../contexts/Theme/useTheme';
+import useTheme from '../../../contexts/Theme/useTheme';
 import clsx from 'clsx';
 import FormControl from '../FormControl/FormControl';
 import InputLabel from '../InputLabel/InputLabel';
diff --git a/packages/react/src/components/primitives/Divider/Divider.tsx b/packages/react/src/components/primitives/Divider/Divider.tsx
index dfc954459..3c955f4e9 100644
--- a/packages/react/src/components/primitives/Divider/Divider.tsx
+++ b/packages/react/src/components/primitives/Divider/Divider.tsx
@@ -19,7 +19,7 @@
 import {FC, HTMLAttributes, useMemo} from 'react';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import {clsx} from 'clsx';
-import {useTheme} from '../../../contexts/Theme/useTheme';
+import useTheme from '../../../contexts/Theme/useTheme';
 import Typography from '../Typography/Typography';
 
 export type DividerOrientation = 'horizontal' | 'vertical';
diff --git a/packages/react/src/components/primitives/FormControl/FormControl.tsx b/packages/react/src/components/primitives/FormControl/FormControl.tsx
index 03c0740ec..fa46b5a5f 100644
--- a/packages/react/src/components/primitives/FormControl/FormControl.tsx
+++ b/packages/react/src/components/primitives/FormControl/FormControl.tsx
@@ -17,7 +17,7 @@
  */
 
 import {CSSProperties, FC, ReactNode} from 'react';
-import {useTheme} from '../../../contexts/Theme/useTheme';
+import useTheme from '../../../contexts/Theme/useTheme';
 import clsx from 'clsx';
 import Typography from '../Typography/Typography';
 
diff --git a/packages/react/src/components/primitives/InputLabel/InputLabel.tsx b/packages/react/src/components/primitives/InputLabel/InputLabel.tsx
index 6de5debec..5b3382f30 100644
--- a/packages/react/src/components/primitives/InputLabel/InputLabel.tsx
+++ b/packages/react/src/components/primitives/InputLabel/InputLabel.tsx
@@ -17,7 +17,7 @@
  */
 
 import {CSSProperties, FC, LabelHTMLAttributes, ReactNode} from 'react';
-import {useTheme} from '../../../contexts/Theme/useTheme';
+import useTheme from '../../../contexts/Theme/useTheme';
 
 export interface InputLabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'style'> {
   /**
diff --git a/packages/react/src/components/primitives/OtpField/OtpField.tsx b/packages/react/src/components/primitives/OtpField/OtpField.tsx
index daad20b17..c87fbcbaf 100644
--- a/packages/react/src/components/primitives/OtpField/OtpField.tsx
+++ b/packages/react/src/components/primitives/OtpField/OtpField.tsx
@@ -17,7 +17,7 @@
  */
 
 import {CSSProperties, FC, KeyboardEvent, ChangeEvent, useRef, useEffect, useState} from 'react';
-import {useTheme} from '../../../contexts/Theme/useTheme';
+import useTheme from '../../../contexts/Theme/useTheme';
 import clsx from 'clsx';
 import FormControl from '../FormControl/FormControl';
 import InputLabel from '../InputLabel/InputLabel';
diff --git a/packages/react/src/components/primitives/Popover/Popover.tsx b/packages/react/src/components/primitives/Popover/Popover.tsx
index 3f3f66f7d..0b717f6c0 100644
--- a/packages/react/src/components/primitives/Popover/Popover.tsx
+++ b/packages/react/src/components/primitives/Popover/Popover.tsx
@@ -35,7 +35,7 @@ import {
   UseFloatingReturn,
   UseInteractionsReturn,
 } from '@floating-ui/react';
-import {useTheme} from '../../../contexts/Theme/useTheme';
+import useTheme from '../../../contexts/Theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
 import Button from '../Button/Button';
diff --git a/packages/react/src/components/primitives/Select/Select.tsx b/packages/react/src/components/primitives/Select/Select.tsx
index f7f84ca91..acdad0cac 100644
--- a/packages/react/src/components/primitives/Select/Select.tsx
+++ b/packages/react/src/components/primitives/Select/Select.tsx
@@ -17,7 +17,7 @@
  */
 
 import {CSSProperties, FC, SelectHTMLAttributes} from 'react';
-import {useTheme} from '../../../contexts/Theme/useTheme';
+import useTheme from '../../../contexts/Theme/useTheme';
 import clsx from 'clsx';
 import FormControl from '../FormControl/FormControl';
 import InputLabel from '../InputLabel/InputLabel';
diff --git a/packages/react/src/components/primitives/TextField/TextField.tsx b/packages/react/src/components/primitives/TextField/TextField.tsx
index 196d0702f..0401cc473 100644
--- a/packages/react/src/components/primitives/TextField/TextField.tsx
+++ b/packages/react/src/components/primitives/TextField/TextField.tsx
@@ -17,11 +17,11 @@
  */
 
 import {CSSProperties, FC, InputHTMLAttributes, ReactNode} from 'react';
-import {useTheme} from '../../../contexts/Theme/useTheme';
+import useTheme from '../../../contexts/Theme/useTheme';
 import clsx from 'clsx';
 import FormControl from '../FormControl/FormControl';
 import InputLabel from '../InputLabel/InputLabel';
-import { withVendorCSSClassPrefix } from 'packages/browser/dist';
+import {withVendorCSSClassPrefix} from 'packages/browser/dist';
 
 export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {
   /**
@@ -133,7 +133,12 @@ const TextField: FC<TextFieldProps> = ({
   };
 
   return (
-    <FormControl error={error} helperText={helperText} className={clsx(withVendorCSSClassPrefix('text-field'), className)} style={style}>
+    <FormControl
+      error={error}
+      helperText={helperText}
+      className={clsx(withVendorCSSClassPrefix('text-field'), className)}
+      style={style}
+    >
       {label && (
         <InputLabel required={required} error={!!error}>
           {label}
diff --git a/packages/react/src/components/primitives/Typography/Typography.tsx b/packages/react/src/components/primitives/Typography/Typography.tsx
index 5ce08244d..bdb799e60 100644
--- a/packages/react/src/components/primitives/Typography/Typography.tsx
+++ b/packages/react/src/components/primitives/Typography/Typography.tsx
@@ -17,36 +17,36 @@
  */
 
 import {CSSProperties, FC, ReactNode, ComponentPropsWithoutRef, ElementType} from 'react';
-import {useTheme} from '../../../contexts/Theme/useTheme';
+import useTheme from '../../../contexts/Theme/useTheme';
 import clsx from 'clsx';
 
 // Typography variants mapped to HTML elements and styling
-export type TypographyVariant = 
-  | 'h1' 
-  | 'h2' 
-  | 'h3' 
-  | 'h4' 
-  | 'h5' 
-  | 'h6' 
-  | 'subtitle1' 
-  | 'subtitle2' 
-  | 'body1' 
-  | 'body2' 
-  | 'caption' 
+export type TypographyVariant =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'subtitle1'
+  | 'subtitle2'
+  | 'body1'
+  | 'body2'
+  | 'caption'
   | 'overline'
   | 'button';
 
 export type TypographyAlign = 'left' | 'center' | 'right' | 'justify';
 
-export type TypographyColor = 
-  | 'primary' 
-  | 'secondary' 
-  | 'error' 
-  | 'success' 
-  | 'warning' 
+export type TypographyColor =
+  | 'primary'
+  | 'secondary'
+  | 'error'
+  | 'success'
+  | 'warning'
   | 'info'
-  | 'textPrimary' 
-  | 'textSecondary' 
+  | 'textPrimary'
+  | 'textSecondary'
   | 'inherit';
 
 export interface TypographyProps {
@@ -169,7 +169,7 @@ const Typography: FC<TypographyProps> = ({
   // Get variant styles
   const getVariantStyles = (variantName: TypographyVariant): CSSProperties => {
     const baseUnit = theme.spacing.unit;
-    
+
     switch (variantName) {
       case 'h1':
         return {
@@ -278,9 +278,9 @@ const Typography: FC<TypographyProps> = ({
     display: inline ? 'inline' : variantMapping[variant] === 'span' ? 'inline' : 'block',
     ...variantStyles,
     // Custom overrides
-    ...(fontWeight && { fontWeight }),
-    ...(fontSize && { fontSize: typeof fontSize === 'number' ? `${fontSize}px` : fontSize }),
-    ...(lineHeight && { lineHeight }),
+    ...(fontWeight && {fontWeight}),
+    ...(fontSize && {fontSize: typeof fontSize === 'number' ? `${fontSize}px` : fontSize}),
+    ...(lineHeight && {lineHeight}),
     ...(noWrap && {
       overflow: 'hidden',
       textOverflow: 'ellipsis',
@@ -304,11 +304,7 @@ const Typography: FC<TypographyProps> = ({
   );
 
   return (
-    <Component 
-      className={classes} 
-      style={typographyStyle} 
-      {...rest}
-    >
+    <Component className={classes} style={typographyStyle} {...rest}>
       {children}
     </Component>
   );
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index 418d50279..05971289d 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -22,7 +22,7 @@ import AsgardeoReactClient from '../../AsgardeoReactClient';
 import AsgardeoContext from './AsgardeoContext';
 import useBrowserUrl from '../../hooks/useBrowserUrl';
 import {AsgardeoReactConfig} from '../../models/config';
-import {ThemeProvider} from '../Theme/ThemeProvider';
+import ThemeProvider from '../Theme/ThemeProvider';
 import I18nProvider from '../I18n/I18nProvider';
 import FlowProvider from '../Flow/FlowProvider';
 import UserProvider from '../User/UserProvider';
diff --git a/packages/react/src/contexts/Theme/ThemeProvider.tsx b/packages/react/src/contexts/Theme/ThemeProvider.tsx
index f885c7662..3d0ed2021 100644
--- a/packages/react/src/contexts/Theme/ThemeProvider.tsx
+++ b/packages/react/src/contexts/Theme/ThemeProvider.tsx
@@ -31,7 +31,7 @@ const applyThemeToDOM = (theme: Theme) => {
   });
 };
 
-export const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
+const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
   children,
   theme: themeConfig,
   defaultColorScheme = 'light',
@@ -56,3 +56,5 @@ export const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
 };
+
+export default ThemeProvider;
diff --git a/packages/react/src/contexts/Theme/useTheme.ts b/packages/react/src/contexts/Theme/useTheme.ts
index f907897bf..c13493fd6 100644
--- a/packages/react/src/contexts/Theme/useTheme.ts
+++ b/packages/react/src/contexts/Theme/useTheme.ts
@@ -19,10 +19,12 @@
 import {useContext} from 'react';
 import ThemeContext, {ThemeContextValue} from './ThemeContext';
 
-export const useTheme = (): ThemeContextValue => {
+const useTheme = (): ThemeContextValue => {
   const context = useContext(ThemeContext);
   if (!context) {
     throw new Error('useTheme must be used within a ThemeProvider');
   }
   return context;
 };
+
+export default useTheme;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 4c7cbb7fa..0aa556948 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -34,6 +34,33 @@ export * from './contexts/User/UserProvider';
 export {default as useUser} from './contexts/User/useUser';
 export * from './contexts/User/useUser';
 
+export {default as FlowContext} from './contexts/Flow/FlowContext';
+export * from './contexts/Flow/FlowContext';
+
+export {default as FlowProvider} from './contexts/Flow/FlowProvider';
+export * from './contexts/Flow/FlowProvider';
+
+export {default as useFlow} from './contexts/Flow/useFlow';
+export * from './contexts/Flow/useFlow';
+
+export {default as I18nContext} from './contexts/I18n/I18nContext';
+export * from './contexts/I18n/I18nContext';
+
+export {default as I18nProvider} from './contexts/I18n/I18nProvider';
+export * from './contexts/I18n/I18nProvider';
+
+export {default as useI18n} from './contexts/I18n/useI18n';
+export * from './contexts/I18n/useI18n';
+
+export {default as ThemeContext} from './contexts/Theme/ThemeContext';
+export * from './contexts/Theme/ThemeContext';
+
+export {default as ThemeProvider} from './contexts/Theme/ThemeProvider';
+export * from './contexts/Theme/ThemeProvider';
+
+export {default as useTheme} from './contexts/Theme/useTheme';
+export * from './contexts/Theme/useTheme';
+
 export {default as useBrowserUrl} from './hooks/useBrowserUrl';
 export * from './hooks/useBrowserUrl';
 
@@ -159,10 +186,6 @@ export {
 } from './components/factories/FieldFactory';
 export * from './components/factories/FieldFactory';
 
-export {default as FlowContext} from './contexts/Flow/FlowContext';
-export {default as FlowProvider} from './contexts/Flow/FlowProvider';
-export {default as useFlow} from './contexts/Flow/useFlow';
-
 export type {FlowStep, FlowMessage, FlowContextValue} from './contexts/Flow/FlowContext';
 
 export type {FlowProviderProps} from './contexts/Flow/FlowProvider';

From d31d71375f889c0292a49f9b4e24ac4ead9da1c2 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 16 Jun 2025 11:44:47 +0530
Subject: [PATCH 100/131] feat(recipes): add header components for
 authenticated and public actions

- Created AuthenticatedActions component for user organization and dropdown actions.
- Implemented AuthenticatedMobileMenu for mobile navigation with links to dashboard, projects, and teams.
- Added AuthenticatedNavigation for desktop navigation links.
- Developed Logo component for branding in the header.
- Introduced OrganizationSwitcher for managing user organizations with dropdown functionality.
- Created PublicActions component for sign-in and sign-up links, including mobile-specific actions.
- Implemented PublicNavigation for public navigation links with mobile menu support.
- Added UserDropdown for user profile management and sign-out functionality.
- Developed LandingPage component with sections for features, testimonials, pricing, and a call to action.
---
 recipes/vite-react-ts/src/App.tsx             |   3 +
 .../vite-react-ts/src/components/Header.tsx   | 204 +------
 .../header/AuthenticatedActions.tsx           |  17 +
 .../header/AuthenticatedMobileMenu.tsx        |  50 ++
 .../header/AuthenticatedNavigation.tsx        |  29 +
 .../src/components/header/Logo.tsx            |  20 +
 .../header/OrganizationSwitcher.tsx           |  88 +++
 .../src/components/header/PublicActions.tsx   |  57 ++
 .../components/header/PublicNavigation.tsx    |  57 ++
 .../src/components/header/UserDropdown.tsx    |  87 +++
 .../vite-react-ts/src/pages/LandingPage.tsx   | 537 ++++++++++++++++++
 11 files changed, 967 insertions(+), 182 deletions(-)
 create mode 100644 recipes/vite-react-ts/src/components/header/AuthenticatedActions.tsx
 create mode 100644 recipes/vite-react-ts/src/components/header/AuthenticatedMobileMenu.tsx
 create mode 100644 recipes/vite-react-ts/src/components/header/AuthenticatedNavigation.tsx
 create mode 100644 recipes/vite-react-ts/src/components/header/Logo.tsx
 create mode 100644 recipes/vite-react-ts/src/components/header/OrganizationSwitcher.tsx
 create mode 100644 recipes/vite-react-ts/src/components/header/PublicActions.tsx
 create mode 100644 recipes/vite-react-ts/src/components/header/PublicNavigation.tsx
 create mode 100644 recipes/vite-react-ts/src/components/header/UserDropdown.tsx
 create mode 100644 recipes/vite-react-ts/src/pages/LandingPage.tsx

diff --git a/recipes/vite-react-ts/src/App.tsx b/recipes/vite-react-ts/src/App.tsx
index 333870708..db108aba8 100644
--- a/recipes/vite-react-ts/src/App.tsx
+++ b/recipes/vite-react-ts/src/App.tsx
@@ -8,6 +8,8 @@ import ProfilePage from './pages/Profile';
 import OrganizationsPage from './pages/Organizations';
 import CreateOrganizationPage from './pages/CreateOrganization';
 import SignInPage from './pages/SignIn';
+import LandingPage from './pages/LandingPage';
+import {SignedIn} from '@asgardeo/react';
 
 // Types
 export interface User {
@@ -96,6 +98,7 @@ function App() {
           <Header />
           <main>
             <Routes>
+              <Route path="/" element={<LandingPage />} />
               <Route path="/signin" element={<SignInPage />} />
               <Route path="/" element={<DashboardPage />} />
               <Route path="/profile" element={<ProfilePage />} />
diff --git a/recipes/vite-react-ts/src/components/Header.tsx b/recipes/vite-react-ts/src/components/Header.tsx
index c5a16b252..dc61c664f 100644
--- a/recipes/vite-react-ts/src/components/Header.tsx
+++ b/recipes/vite-react-ts/src/components/Header.tsx
@@ -1,202 +1,42 @@
 'use client';
 
-import {useState, useRef, useEffect} from 'react';
-import {Link} from 'react-router-dom';
-import {useApp} from '../App';
-import {Users, ChevronDown, Settings, User as UserIcon, LogOut, Plus, Check, Building2} from 'lucide-react';
-import {SignedOut, SignInButton, SignOutButton, User, UserDropdown, UserProfile} from '@asgardeo/react';
-import {Button} from './ui/button';
+import {SignedIn, SignedOut} from '@asgardeo/react';
+import Logo from './header/Logo';
+import PublicNavigation from './header/PublicNavigation';
+import AuthenticatedNavigation from './header/AuthenticatedNavigation';
+import AuthenticatedMobileMenu from './header/AuthenticatedMobileMenu';
+import PublicActions from './header/PublicActions';
+import AuthenticatedActions from './header/AuthenticatedActions';
 
 export default function Header() {
-  const {user, currentOrg, organizations, setCurrentOrg} = useApp();
-  const [showUserDropdown, setShowUserDropdown] = useState(false);
-  const [showOrgDropdown, setShowOrgDropdown] = useState(false);
-  const [showUserProfile, setShowUserProfile] = useState(false);
-  const userDropdownRef = useRef<HTMLDivElement>(null);
-  const orgDropdownRef = useRef<HTMLDivElement>(null);
-
-  // Close dropdowns when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (userDropdownRef.current && !userDropdownRef.current.contains(event.target as Node)) {
-        setShowUserDropdown(false);
-      }
-      if (orgDropdownRef.current && !orgDropdownRef.current.contains(event.target as Node)) {
-        setShowOrgDropdown(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  const handleOrgSwitch = (org: typeof currentOrg) => {
-    if (org) {
-      setCurrentOrg(org);
-      setShowOrgDropdown(false);
-    }
-  };
-
   return (
     <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center h-16">
           {/* Left side - Logo and Navigation */}
           <div className="flex items-center space-x-8">
-            <Link to="/dashboard" className="flex items-center space-x-2">
-              <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
-                <Users className="h-5 w-5 text-white" />
-              </div>
-              <span className="text-xl font-bold text-gray-900">Teamspace</span>
-            </Link>
-
-            <nav className="hidden md:flex space-x-6">
-              <Link to="/dashboard" className="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">
-                Dashboard
-              </Link>
-              <Link to="/projects" className="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">
-                Projects
-              </Link>
-              <Link to="/teams" className="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">
-                Teams
-              </Link>
-            </nav>
+            <SignedIn>
+              <Logo to="/dashboard" />
+              <AuthenticatedNavigation />
+            </SignedIn>
+            <SignedOut>
+              <Logo to="/" />
+              <PublicNavigation />
+            </SignedOut>
           </div>
 
-          {/* Right side - Organization switcher and User dropdown */}
-          <div className="flex items-center space-x-4">
+          {/* Right side - Actions based on auth state */}
+          <div className="flex items-center space-x-2">
             <SignedOut>
-              <SignInButton>
-                {({signIn, isLoading}) => (
-                  <Button onClick={signIn} disabled={isLoading}>
-                    {isLoading ? 'Signing in...' : 'Sign In'}
-                  </Button>
-                )}
-              </SignInButton>
+              <PublicActions showMobileActions={false} />
             </SignedOut>
-
-            {/* Organization Switcher */}
-            <div className="relative" ref={orgDropdownRef}>
-              <button
-                onClick={() => setShowOrgDropdown(!showOrgDropdown)}
-                className="flex items-center space-x-2 px-3 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md border border-gray-200"
-              >
-                <img
-                  src={currentOrg?.avatar || '/placeholder.svg'}
-                  alt={currentOrg?.name}
-                  className="w-5 h-5 rounded"
-                />
-                <span className="max-w-32 truncate">{currentOrg?.name}</span>
-                <ChevronDown className="h-4 w-4" />
-              </button>
-
-              {showOrgDropdown && (
-                <div className="absolute right-0 mt-2 w-64 bg-white rounded-md shadow-lg border border-gray-200 py-1 z-50">
-                  <div className="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wide border-b border-gray-100">
-                    Switch organization
-                  </div>
-
-                  {organizations.map(org => (
-                    <button
-                      key={org.id}
-                      onClick={() => handleOrgSwitch(org)}
-                      className="w-full flex items-center justify-between px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
-                    >
-                      <div className="flex items-center space-x-3">
-                        <img src={org.avatar || '/placeholder.svg'} alt={org.name} className="w-6 h-6 rounded" />
-                        <div className="text-left">
-                          <div className="font-medium">{org.name}</div>
-                          <div className="text-xs text-gray-500">{org.memberCount} members</div>
-                        </div>
-                      </div>
-                      {currentOrg?.id === org.id && <Check className="h-4 w-4 text-green-600" />}
-                    </button>
-                  ))}
-
-                  <div className="border-t border-gray-100 mt-1">
-                    <Link
-                      to="/organizations"
-                      className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
-                      onClick={() => setShowOrgDropdown(false)}
-                    >
-                      <Building2 className="h-4 w-4 mr-3" />
-                      Manage organizations
-                    </Link>
-                    <Link
-                      to="/organizations/new"
-                      className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
-                      onClick={() => setShowOrgDropdown(false)}
-                    >
-                      <Plus className="h-4 w-4 mr-3" />
-                      New organization
-                    </Link>
-                  </div>
-                </div>
-              )}
-            </div>
-
-            {/* User Dropdown */}
-            <div className="relative" ref={userDropdownRef}>
-              <button
-                onClick={() => setShowUserDropdown(!showUserDropdown)}
-                className="flex items-center space-x-2 p-1 rounded-full hover:bg-gray-50"
-              >
-                <User>
-                  {user => <img src={user?.profileUrl} alt={user?.userName} className="w-8 h-8 rounded-full" />}
-                </User>
-                <ChevronDown className="h-4 w-4 text-gray-500" />
-              </button>
-
-              {showUserDropdown && (
-                <div className="absolute right-0 mt-2 w-56 bg-white rounded-md shadow-lg border border-gray-200 py-1 z-50">
-                  <div className="px-4 py-3 border-b border-gray-100">
-                    <div className="text-sm font-medium text-gray-900">{user?.name}</div>
-                    <div className="text-sm text-gray-500">@{user?.username}</div>
-                  </div>
-
-                  <div
-                    // to="/profile"
-                    className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
-                    onClick={() => {
-                      setShowUserProfile(true);
-                      setShowUserDropdown(false);
-                    }}
-                  >
-                    <UserIcon className="h-4 w-4 mr-3" />
-                    Your profile
-                  </div>
-
-                  <Link
-                    to="/settings"
-                    className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
-                    onClick={() => setShowUserDropdown(false)}
-                  >
-                    <Settings className="h-4 w-4 mr-3" />
-                    Settings
-                  </Link>
-
-                  <div className="border-t border-gray-100 mt-1">
-                    <SignOutButton>
-                      {({signOut}) => (
-                        <button
-                          onClick={() => {
-                            signOut();
-                          }}
-                          className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
-                        >
-                          <LogOut className="h-4 w-4 mr-3" />
-                          Sign out
-                        </button>
-                      )}
-                    </SignOutButton>
-                  </div>
-                </div>
-              )}
-            </div>
+            <SignedIn>
+              <AuthenticatedActions />
+              <AuthenticatedMobileMenu />
+            </SignedIn>
           </div>
         </div>
       </div>
-      {showUserProfile && <UserProfile mode="popup" />}
     </header>
   );
 }
diff --git a/recipes/vite-react-ts/src/components/header/AuthenticatedActions.tsx b/recipes/vite-react-ts/src/components/header/AuthenticatedActions.tsx
new file mode 100644
index 000000000..fa284ccd1
--- /dev/null
+++ b/recipes/vite-react-ts/src/components/header/AuthenticatedActions.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import OrganizationSwitcher from './OrganizationSwitcher';
+import UserDropdown from './UserDropdown';
+
+interface AuthenticatedActionsProps {
+  className?: string;
+}
+
+export default function AuthenticatedActions({className = ''}: AuthenticatedActionsProps) {
+  return (
+    <div className={`flex items-center space-x-4 ${className}`}>
+      <OrganizationSwitcher />
+      <UserDropdown />
+    </div>
+  );
+}
diff --git a/recipes/vite-react-ts/src/components/header/AuthenticatedMobileMenu.tsx b/recipes/vite-react-ts/src/components/header/AuthenticatedMobileMenu.tsx
new file mode 100644
index 000000000..518f6eaf7
--- /dev/null
+++ b/recipes/vite-react-ts/src/components/header/AuthenticatedMobileMenu.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import {useState} from 'react';
+import {Link} from 'react-router-dom';
+import {Menu, X, Home, Briefcase, Users as UsersIcon} from 'lucide-react';
+
+interface AuthenticatedMobileMenuProps {
+  className?: string;
+}
+
+export default function AuthenticatedMobileMenu({className = ''}: AuthenticatedMobileMenuProps) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const navigationItems = [
+    {label: 'Dashboard', href: '/dashboard', icon: Home},
+    {label: 'Projects', href: '/projects', icon: Briefcase},
+    {label: 'Teams', href: '/teams', icon: UsersIcon},
+  ];
+
+  return (
+    <>
+      {/* Mobile Menu Button */}
+      <button className={`md:hidden p-2 ${className}`} onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
+        {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+      </button>
+
+      {/* Mobile Navigation */}
+      {mobileMenuOpen && (
+        <div className="md:hidden absolute top-16 left-0 right-0 bg-white border-b border-gray-200 shadow-lg z-50">
+          <div className="px-4 py-4 space-y-2">
+            {navigationItems.map(item => {
+              const Icon = item.icon;
+              return (
+                <Link
+                  key={item.label}
+                  to={item.href}
+                  className="flex items-center space-x-3 px-3 py-2 text-gray-700 hover:bg-gray-50 rounded-md transition-colors"
+                  onClick={() => setMobileMenuOpen(false)}
+                >
+                  <Icon className="h-5 w-5" />
+                  <span>{item.label}</span>
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/recipes/vite-react-ts/src/components/header/AuthenticatedNavigation.tsx b/recipes/vite-react-ts/src/components/header/AuthenticatedNavigation.tsx
new file mode 100644
index 000000000..34bb455ea
--- /dev/null
+++ b/recipes/vite-react-ts/src/components/header/AuthenticatedNavigation.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import {Link} from 'react-router-dom';
+
+interface AuthenticatedNavigationProps {
+  className?: string;
+}
+
+export default function AuthenticatedNavigation({className = ''}: AuthenticatedNavigationProps) {
+  const navigationItems = [
+    {label: 'Dashboard', href: '/dashboard'},
+    {label: 'Projects', href: '/projects'},
+    {label: 'Teams', href: '/teams'},
+  ];
+
+  return (
+    <nav className={`hidden md:flex space-x-6 ${className}`}>
+      {navigationItems.map(item => (
+        <Link
+          key={item.label}
+          to={item.href}
+          className="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium"
+        >
+          {item.label}
+        </Link>
+      ))}
+    </nav>
+  );
+}
diff --git a/recipes/vite-react-ts/src/components/header/Logo.tsx b/recipes/vite-react-ts/src/components/header/Logo.tsx
new file mode 100644
index 000000000..19249594e
--- /dev/null
+++ b/recipes/vite-react-ts/src/components/header/Logo.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import {Link} from 'react-router-dom';
+import {Users} from 'lucide-react';
+
+interface LogoProps {
+  to?: string;
+  className?: string;
+}
+
+export default function Logo({to = '/', className = ''}: LogoProps) {
+  return (
+    <Link to={to} className={`flex items-center space-x-2 ${className}`}>
+      <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+        <Users className="h-5 w-5 text-white" />
+      </div>
+      <span className="text-xl font-bold text-gray-900">Teamspace</span>
+    </Link>
+  );
+}
diff --git a/recipes/vite-react-ts/src/components/header/OrganizationSwitcher.tsx b/recipes/vite-react-ts/src/components/header/OrganizationSwitcher.tsx
new file mode 100644
index 000000000..1367e4696
--- /dev/null
+++ b/recipes/vite-react-ts/src/components/header/OrganizationSwitcher.tsx
@@ -0,0 +1,88 @@
+'use client';
+
+import {useState, useRef, useEffect} from 'react';
+import {Link} from 'react-router-dom';
+import {ChevronDown, Plus, Check, Building2} from 'lucide-react';
+import {useApp} from '../../App';
+
+export default function OrganizationSwitcher() {
+  const {currentOrg, organizations, setCurrentOrg} = useApp();
+  const [showOrgDropdown, setShowOrgDropdown] = useState(false);
+  const orgDropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (orgDropdownRef.current && !orgDropdownRef.current.contains(event.target as Node)) {
+        setShowOrgDropdown(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleOrgSwitch = (org: typeof currentOrg) => {
+    if (org) {
+      setCurrentOrg(org);
+      setShowOrgDropdown(false);
+    }
+  };
+
+  return (
+    <div className="relative" ref={orgDropdownRef}>
+      <button
+        onClick={() => setShowOrgDropdown(!showOrgDropdown)}
+        className="flex items-center space-x-2 px-3 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md border border-gray-200"
+      >
+        <img src={currentOrg?.avatar || '/placeholder.svg'} alt={currentOrg?.name} className="w-5 h-5 rounded" />
+        <span className="max-w-32 truncate">{currentOrg?.name}</span>
+        <ChevronDown className="h-4 w-4" />
+      </button>
+
+      {showOrgDropdown && (
+        <div className="absolute right-0 mt-2 w-64 bg-white rounded-md shadow-lg border border-gray-200 py-1 z-50">
+          <div className="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wide border-b border-gray-100">
+            Switch organization
+          </div>
+
+          {organizations.map(org => (
+            <button
+              key={org.id}
+              onClick={() => handleOrgSwitch(org)}
+              className="w-full flex items-center justify-between px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+            >
+              <div className="flex items-center space-x-3">
+                <img src={org.avatar || '/placeholder.svg'} alt={org.name} className="w-6 h-6 rounded" />
+                <div className="text-left">
+                  <div className="font-medium">{org.name}</div>
+                  <div className="text-xs text-gray-500">{org.memberCount} members</div>
+                </div>
+              </div>
+              {currentOrg?.id === org.id && <Check className="h-4 w-4 text-green-600" />}
+            </button>
+          ))}
+
+          <div className="border-t border-gray-100 mt-1">
+            <Link
+              to="/organizations"
+              className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+              onClick={() => setShowOrgDropdown(false)}
+            >
+              <Building2 className="h-4 w-4 mr-3" />
+              Manage organizations
+            </Link>
+            <Link
+              to="/organizations/new"
+              className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+              onClick={() => setShowOrgDropdown(false)}
+            >
+              <Plus className="h-4 w-4 mr-3" />
+              New organization
+            </Link>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/recipes/vite-react-ts/src/components/header/PublicActions.tsx b/recipes/vite-react-ts/src/components/header/PublicActions.tsx
new file mode 100644
index 000000000..6bf1c009f
--- /dev/null
+++ b/recipes/vite-react-ts/src/components/header/PublicActions.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import {Link} from 'react-router-dom';
+import {SignInButton} from '@asgardeo/react';
+import {Button} from '../ui/button';
+
+interface PublicActionsProps {
+  className?: string;
+  showMobileActions?: boolean;
+}
+
+export default function PublicActions({className = '', showMobileActions = false}: PublicActionsProps) {
+  if (showMobileActions) {
+    // Mobile menu actions
+    return (
+      <div className="pt-4 border-t border-gray-200 space-y-2">
+        <Link to="/signin" className="block text-center py-2 text-gray-700 hover:text-blue-600 transition-colors">
+          Sign In
+        </Link>
+        <Link
+          to="/signup"
+          className="block text-center bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors"
+        >
+          Get Started
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex items-center space-x-4 ${className}`}>
+      {/* Desktop CTA */}
+      <div className="hidden md:flex items-center space-x-4">
+        <Link to="/signin" className="text-gray-700 hover:text-blue-600 transition-colors font-medium">
+          Sign In
+        </Link>
+        <Link
+          to="/signup"
+          className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors font-medium"
+        >
+          Get Started
+        </Link>
+      </div>
+
+      {/* Mobile CTA - shown in mobile menu */}
+      <div className="md:hidden">
+        <SignInButton>
+          {({signIn, isLoading}) => (
+            <Button onClick={signIn} disabled={isLoading} size="sm">
+              {isLoading ? 'Signing in...' : 'Sign In'}
+            </Button>
+          )}
+        </SignInButton>
+      </div>
+    </div>
+  );
+}
diff --git a/recipes/vite-react-ts/src/components/header/PublicNavigation.tsx b/recipes/vite-react-ts/src/components/header/PublicNavigation.tsx
new file mode 100644
index 000000000..7d44e93f9
--- /dev/null
+++ b/recipes/vite-react-ts/src/components/header/PublicNavigation.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import {useState} from 'react';
+import {Menu, X} from 'lucide-react';
+import PublicActions from './PublicActions';
+
+interface PublicNavigationProps {
+  className?: string;
+}
+
+export default function PublicNavigation({className = ''}: PublicNavigationProps) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const navigationItems = [
+    {label: 'Features', href: '#features'},
+    {label: 'Testimonials', href: '#testimonials'},
+    {label: 'Pricing', href: '#pricing'},
+    {label: 'Contact', href: '#contact'},
+  ];
+
+  return (
+    <>
+      {/* Desktop Navigation */}
+      <nav className={`hidden md:flex space-x-8 ${className}`}>
+        {navigationItems.map(item => (
+          <a key={item.label} href={item.href} className="text-gray-700 hover:text-blue-600 transition-colors">
+            {item.label}
+          </a>
+        ))}
+      </nav>
+
+      {/* Mobile Menu Button */}
+      <button className="md:hidden p-2" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
+        {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+      </button>
+
+      {/* Mobile Navigation */}
+      {mobileMenuOpen && (
+        <div className="md:hidden absolute top-16 left-0 right-0 bg-white border-b border-gray-200 shadow-lg z-50">
+          <div className="px-4 py-4 space-y-4">
+            {navigationItems.map(item => (
+              <a
+                key={item.label}
+                href={item.href}
+                className="block text-gray-700 hover:text-blue-600 transition-colors"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                {item.label}
+              </a>
+            ))}
+            <PublicActions showMobileActions={true} />
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/recipes/vite-react-ts/src/components/header/UserDropdown.tsx b/recipes/vite-react-ts/src/components/header/UserDropdown.tsx
new file mode 100644
index 000000000..0574fb69a
--- /dev/null
+++ b/recipes/vite-react-ts/src/components/header/UserDropdown.tsx
@@ -0,0 +1,87 @@
+'use client';
+
+import {useState, useRef, useEffect} from 'react';
+import {Link} from 'react-router-dom';
+import {ChevronDown, Settings, User as UserIcon, LogOut} from 'lucide-react';
+import {SignOutButton, User, UserProfile} from '@asgardeo/react';
+import {useApp} from '../../App';
+
+export default function UserDropdown() {
+  const {user} = useApp();
+  const [showUserDropdown, setShowUserDropdown] = useState(false);
+  const [showUserProfile, setShowUserProfile] = useState(false);
+  const userDropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (userDropdownRef.current && !userDropdownRef.current.contains(event.target as Node)) {
+        setShowUserDropdown(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <>
+      <div className="relative" ref={userDropdownRef}>
+        <button
+          onClick={() => setShowUserDropdown(!showUserDropdown)}
+          className="flex items-center space-x-2 p-1 rounded-full hover:bg-gray-50"
+        >
+          <User>{user => <img src={user?.profileUrl} alt={user?.userName} className="w-8 h-8 rounded-full" />}</User>
+          <ChevronDown className="h-4 w-4 text-gray-500" />
+        </button>
+
+        {showUserDropdown && (
+          <div className="absolute right-0 mt-2 w-56 bg-white rounded-md shadow-lg border border-gray-200 py-1 z-50">
+            <div className="px-4 py-3 border-b border-gray-100">
+              <div className="text-sm font-medium text-gray-900">{user?.name}</div>
+              <div className="text-sm text-gray-500">@{user?.username}</div>
+            </div>
+
+            <button
+              className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+              onClick={() => {
+                setShowUserProfile(true);
+                setShowUserDropdown(false);
+              }}
+            >
+              <UserIcon className="h-4 w-4 mr-3" />
+              Your profile
+            </button>
+
+            <Link
+              to="/settings"
+              className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+              onClick={() => setShowUserDropdown(false)}
+            >
+              <Settings className="h-4 w-4 mr-3" />
+              Settings
+            </Link>
+
+            <div className="border-t border-gray-100 mt-1">
+              <SignOutButton>
+                {({signOut}) => (
+                  <button
+                    onClick={() => {
+                      signOut();
+                    }}
+                    className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                  >
+                    <LogOut className="h-4 w-4 mr-3" />
+                    Sign out
+                  </button>
+                )}
+              </SignOutButton>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {showUserProfile && <UserProfile mode="popup" />}
+    </>
+  );
+}
diff --git a/recipes/vite-react-ts/src/pages/LandingPage.tsx b/recipes/vite-react-ts/src/pages/LandingPage.tsx
new file mode 100644
index 000000000..3bbc9d972
--- /dev/null
+++ b/recipes/vite-react-ts/src/pages/LandingPage.tsx
@@ -0,0 +1,537 @@
+'use client';
+
+import {Link} from 'react-router-dom';
+import {
+  Users,
+  MessageSquare,
+  Calendar,
+  FileText,
+  Shield,
+  Zap,
+  CheckCircle,
+  Star,
+  ArrowRight,
+  Play,
+  Github,
+  Twitter,
+  Linkedin,
+  Mail,
+} from 'lucide-react';
+
+export default function LandingPage() {
+  const features = [
+    {
+      icon: MessageSquare,
+      title: 'Real-time Communication',
+      description:
+        'Stay connected with instant messaging, video calls, and threaded discussions that keep everyone in the loop.',
+      color: 'text-blue-600',
+      bgColor: 'bg-blue-50',
+    },
+    {
+      icon: Calendar,
+      title: 'Project Management',
+      description:
+        'Plan, track, and deliver projects on time with intuitive task management, timelines, and progress tracking.',
+      color: 'text-green-600',
+      bgColor: 'bg-green-50',
+    },
+    {
+      icon: FileText,
+      title: 'Document Collaboration',
+      description: 'Create, edit, and share documents in real-time with version control and seamless integration.',
+      color: 'text-purple-600',
+      bgColor: 'bg-purple-50',
+    },
+    {
+      icon: Shield,
+      title: 'Enterprise Security',
+      description:
+        'Keep your data safe with enterprise-grade security, SSO integration, and compliance certifications.',
+      color: 'text-red-600',
+      bgColor: 'bg-red-50',
+    },
+    {
+      icon: Zap,
+      title: 'Workflow Automation',
+      description: 'Automate repetitive tasks and streamline processes with custom workflows and integrations.',
+      color: 'text-yellow-600',
+      bgColor: 'bg-yellow-50',
+    },
+    {
+      icon: Users,
+      title: 'Team Analytics',
+      description: 'Gain insights into team performance and project progress with detailed analytics and reporting.',
+      color: 'text-indigo-600',
+      bgColor: 'bg-indigo-50',
+    },
+  ];
+
+  const testimonials = [
+    {
+      quote: "Teamspace transformed how our remote team collaborates. We're 40% more productive since switching.",
+      author: 'Sarah Chen',
+      role: 'VP of Engineering',
+      company: 'TechCorp',
+      avatar: '/placeholder.svg?height=48&width=48',
+    },
+    {
+      quote: "The best investment we've made for our team. The ROI was clear within the first month.",
+      author: 'Michael Rodriguez',
+      role: 'Project Manager',
+      company: 'InnovateLab',
+      avatar: '/placeholder.svg?height=48&width=48',
+    },
+    {
+      quote: 'Finally, a platform that brings everything together. Our team loves the intuitive interface.',
+      author: 'Emily Johnson',
+      role: 'Creative Director',
+      company: 'DesignStudio',
+      avatar: '/placeholder.svg?height=48&width=48',
+    },
+  ];
+
+  const pricingPlans = [
+    {
+      name: 'Starter',
+      price: 'Free',
+      description: 'Perfect for small teams getting started',
+      features: [
+        'Up to 5 team members',
+        'Basic project management',
+        '5GB storage',
+        'Community support',
+        'Basic integrations',
+      ],
+      cta: 'Get Started',
+      popular: false,
+    },
+    {
+      name: 'Professional',
+      price: '$12',
+      period: '/user/month',
+      description: 'For growing teams that need more power',
+      features: [
+        'Unlimited team members',
+        'Advanced project management',
+        '100GB storage',
+        'Priority support',
+        'Advanced integrations',
+        'Custom workflows',
+        'Team analytics',
+      ],
+      cta: 'Start Free Trial',
+      popular: true,
+    },
+    {
+      name: 'Enterprise',
+      price: 'Custom',
+      description: 'For large organizations with custom needs',
+      features: [
+        'Everything in Professional',
+        'SSO & advanced security',
+        'Unlimited storage',
+        'Dedicated support',
+        'Custom integrations',
+        'Advanced compliance',
+        'On-premise deployment',
+      ],
+      cta: 'Contact Sales',
+      popular: false,
+    },
+  ];
+
+  const stats = [
+    {value: '10,000+', label: 'Teams worldwide'},
+    {value: '99.9%', label: 'Uptime guarantee'},
+    {value: '50+', label: 'Integrations'},
+    {value: '24/7', label: 'Support available'},
+  ];
+
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Hero Section */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-32">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <div className="space-y-8">
+              <div className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-blue-100 text-blue-800">
+                🚀 New: AI-powered insights now available
+              </div>
+
+              <h1 className="text-4xl lg:text-6xl font-bold text-gray-900 leading-tight">
+                Where teams
+                <span className="text-blue-600"> collaborate</span> and ideas come to life
+              </h1>
+
+              <p className="text-xl text-gray-600 leading-relaxed">
+                Streamline your team's workflow with our all-in-one collaboration platform. Chat, plan, share, and
+                deliver exceptional results together.
+              </p>
+
+              <div className="flex flex-col sm:flex-row gap-4">
+                <Link
+                  to="/signup"
+                  className="inline-flex items-center justify-center px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                  Start Free Trial
+                  <ArrowRight className="ml-2 h-5 w-5" />
+                </Link>
+                <button className="inline-flex items-center justify-center px-8 py-4 border border-gray-300 text-gray-700 font-semibold rounded-lg hover:bg-gray-50 transition-colors">
+                  <Play className="mr-2 h-5 w-5" />
+                  Watch Demo
+                </button>
+              </div>
+
+              <div className="flex items-center space-x-6 text-sm text-gray-600">
+                <div className="flex items-center">
+                  <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
+                  Free 14-day trial
+                </div>
+                <div className="flex items-center">
+                  <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
+                  No credit card required
+                </div>
+              </div>
+            </div>
+
+            <div className="relative">
+              <img
+                src="/placeholder.svg?height=500&width=600"
+                alt="Teamspace Dashboard"
+                className="w-full rounded-2xl shadow-2xl"
+              />
+              <div className="absolute -bottom-6 -left-6 bg-white rounded-lg shadow-lg p-4 border border-gray-200">
+                <div className="flex items-center space-x-3">
+                  <div className="w-3 h-3 bg-green-500 rounded-full"></div>
+                  <span className="text-sm font-medium">12 team members online</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Stats Section */}
+      <section className="bg-gray-50 py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <p className="text-gray-600">Trusted by teams worldwide</p>
+          </div>
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
+            {stats.map((stat, index) => (
+              <div key={index} className="text-center">
+                <div className="text-3xl lg:text-4xl font-bold text-gray-900">{stat.value}</div>
+                <div className="text-gray-600 mt-2">{stat.label}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section id="features" className="py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <div className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-blue-100 text-blue-800 mb-4">
+              Features
+            </div>
+            <h2 className="text-3xl lg:text-5xl font-bold text-gray-900 mb-4">Everything your team needs to succeed</h2>
+            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+              From real-time collaboration to project management, Teamspace provides all the tools your team needs in
+              one integrated platform.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {features.map((feature, index) => {
+              const Icon = feature.icon;
+              return (
+                <div
+                  key={index}
+                  className="bg-white rounded-2xl p-8 shadow-sm border border-gray-200 hover:shadow-lg transition-shadow"
+                >
+                  <div className={`w-12 h-12 ${feature.bgColor} rounded-lg flex items-center justify-center mb-6`}>
+                    <Icon className={`h-6 w-6 ${feature.color}`} />
+                  </div>
+                  <h3 className="text-xl font-semibold text-gray-900 mb-4">{feature.title}</h3>
+                  <p className="text-gray-600 leading-relaxed">{feature.description}</p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonials Section */}
+      <section id="testimonials" className="bg-gray-50 py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <div className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-blue-100 text-blue-800 mb-4">
+              Testimonials
+            </div>
+            <h2 className="text-3xl lg:text-5xl font-bold text-gray-900 mb-4">What our customers say</h2>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {testimonials.map((testimonial, index) => (
+              <div key={index} className="bg-white rounded-2xl p-8 shadow-sm border border-gray-200">
+                <div className="flex mb-4">
+                  {[...Array(5)].map((_, i) => (
+                    <Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
+                  ))}
+                </div>
+                <blockquote className="text-gray-700 mb-6 text-lg leading-relaxed">"{testimonial.quote}"</blockquote>
+                <div className="flex items-center">
+                  <img
+                    src={testimonial.avatar || '/placeholder.svg'}
+                    alt={testimonial.author}
+                    className="w-12 h-12 rounded-full mr-4"
+                  />
+                  <div>
+                    <div className="font-semibold text-gray-900">{testimonial.author}</div>
+                    <div className="text-gray-600 text-sm">
+                      {testimonial.role}, {testimonial.company}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Pricing Section */}
+      <section id="pricing" className="py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <div className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-blue-100 text-blue-800 mb-4">
+              Pricing
+            </div>
+            <h2 className="text-3xl lg:text-5xl font-bold text-gray-900 mb-4">Simple, transparent pricing</h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              Choose the plan that's right for your team. Start free and scale as you grow.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+            {pricingPlans.map((plan, index) => (
+              <div
+                key={index}
+                className={`bg-white rounded-2xl p-8 shadow-sm border-2 relative ${
+                  plan.popular ? 'border-blue-200 shadow-lg' : 'border-gray-200'
+                }`}
+              >
+                {plan.popular && (
+                  <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
+                    <span className="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium">
+                      Most Popular
+                    </span>
+                  </div>
+                )}
+
+                <div className="text-center mb-8">
+                  <h3 className="text-xl font-semibold text-gray-900 mb-2">{plan.name}</h3>
+                  <p className="text-gray-600 mb-4">{plan.description}</p>
+                  <div className="mb-4">
+                    <span className="text-4xl font-bold text-gray-900">{plan.price}</span>
+                    {plan.period && <span className="text-gray-600">{plan.period}</span>}
+                  </div>
+                </div>
+
+                <ul className="space-y-3 mb-8">
+                  {plan.features.map((feature, featureIndex) => (
+                    <li key={featureIndex} className="flex items-center">
+                      <CheckCircle className="h-5 w-5 text-green-500 mr-3 flex-shrink-0" />
+                      <span className="text-gray-700">{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+
+                <Link
+                  to="/signup"
+                  className={`block w-full text-center py-3 px-6 rounded-lg font-semibold transition-colors ${
+                    plan.popular
+                      ? 'bg-blue-600 text-white hover:bg-blue-700'
+                      : 'bg-gray-100 text-gray-900 hover:bg-gray-200'
+                  }`}
+                >
+                  {plan.cta}
+                </Link>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="bg-blue-600 py-20">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h2 className="text-3xl lg:text-5xl font-bold text-white mb-6">
+            Ready to transform your team's productivity?
+          </h2>
+          <p className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
+            Join thousands of teams already using Teamspace to collaborate better and achieve more.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Link
+              to="/signup"
+              className="inline-flex items-center justify-center px-8 py-4 bg-white text-blue-600 font-semibold rounded-lg hover:bg-gray-100 transition-colors"
+            >
+              Start Free Trial
+              <ArrowRight className="ml-2 h-5 w-5" />
+            </Link>
+            <button className="inline-flex items-center justify-center px-8 py-4 border-2 border-white text-white font-semibold rounded-lg hover:bg-white hover:text-blue-600 transition-colors">
+              Schedule Demo
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="bg-gray-900 text-white py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid md:grid-cols-2 lg:grid-cols-5 gap-8">
+            {/* Company Info */}
+            <div className="lg:col-span-2">
+              <div className="flex items-center mb-4">
+                <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+                  <Users className="h-5 w-5 text-white" />
+                </div>
+                <span className="ml-2 text-xl font-bold">Teamspace</span>
+              </div>
+              <p className="text-gray-400 mb-6 max-w-md">
+                Empowering teams to collaborate better and achieve more together. Built for the modern workplace.
+              </p>
+              <div className="flex space-x-4">
+                <a href="#" className="text-gray-400 hover:text-white transition-colors">
+                  <Twitter className="h-5 w-5" />
+                </a>
+                <a href="#" className="text-gray-400 hover:text-white transition-colors">
+                  <Github className="h-5 w-5" />
+                </a>
+                <a href="#" className="text-gray-400 hover:text-white transition-colors">
+                  <Linkedin className="h-5 w-5" />
+                </a>
+                <a href="#" className="text-gray-400 hover:text-white transition-colors">
+                  <Mail className="h-5 w-5" />
+                </a>
+              </div>
+            </div>
+
+            {/* Product Links */}
+            <div>
+              <h4 className="font-semibold mb-4">Product</h4>
+              <ul className="space-y-2 text-gray-400">
+                <li>
+                  <a href="#" className="hover:text-white transition-colors">
+                    Features
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-white transition-colors">
+                    Pricing
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-white transition-colors">
+                    Integrations
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-white transition-colors">
+                    API
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-white transition-colors">
+                    Security
+                  </a>
+                </li>
+              </ul>
+            </div>
+
+            {/* Company Links */}
+            <div>
+              <h4 className="font-semibold mb-4">Company</h4>
+              <ul className="space-y-2 text-gray-400">
+                <li>
+                  <a href="#" className="hover:text-white transition-colors">
+                    About
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-white transition-colors">
+                    Blog
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-white transition-colors">
+                    Careers
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-white transition-colors">
+                    Press
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-white transition-colors">
+                    Contact
+                  </a>
+                </li>
+              </ul>
+            </div>
+
+            {/* Support Links */}
+            <div>
+              <h4 className="font-semibold mb-4">Support</h4>
+              <ul className="space-y-2 text-gray-400">
+                <li>
+                  <a href="#" className="hover:text-white transition-colors">
+                    Help Center
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-white transition-colors">
+                    Documentation
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-white transition-colors">
+                    Status
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-white transition-colors">
+                    Community
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-white transition-colors">
+                    Contact Support
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+            <p className="text-gray-400 text-sm">© {new Date().getFullYear()} Teamspace. All rights reserved.</p>
+            <div className="flex space-x-6 mt-4 md:mt-0">
+              <a href="#" className="text-gray-400 hover:text-white text-sm transition-colors">
+                Privacy Policy
+              </a>
+              <a href="#" className="text-gray-400 hover:text-white text-sm transition-colors">
+                Terms of Service
+              </a>
+              <a href="#" className="text-gray-400 hover:text-white text-sm transition-colors">
+                Cookie Policy
+              </a>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}

From 94923e557d3e9e47836faeba67e99366082708ff Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 16 Jun 2025 11:50:31 +0530
Subject: [PATCH 101/131] feat(recipes): implement layout components for
 landing, authenticated, and dashboard pages

---
 recipes/vite-react-ts/src/App.tsx             | 55 ++++++++++++++-----
 .../src/layouts/AuthenticatedLayout.tsx       | 15 +++++
 .../src/layouts/DashboardLayout.tsx           | 19 +++++++
 .../src/layouts/LandingLayout.tsx             | 19 +++++++
 .../vite-react-ts/src/pages/LandingPage.tsx   |  2 +-
 recipes/vite-react-ts/src/pages/SignIn.tsx    | 28 ++--------
 6 files changed, 98 insertions(+), 40 deletions(-)
 create mode 100644 recipes/vite-react-ts/src/layouts/AuthenticatedLayout.tsx
 create mode 100644 recipes/vite-react-ts/src/layouts/DashboardLayout.tsx
 create mode 100644 recipes/vite-react-ts/src/layouts/LandingLayout.tsx

diff --git a/recipes/vite-react-ts/src/App.tsx b/recipes/vite-react-ts/src/App.tsx
index db108aba8..39e0ae21d 100644
--- a/recipes/vite-react-ts/src/App.tsx
+++ b/recipes/vite-react-ts/src/App.tsx
@@ -2,14 +2,15 @@
 
 import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
 import {useState, createContext, useContext} from 'react';
-import Header from './components/Header';
 import DashboardPage from './pages/Dashboard';
 import ProfilePage from './pages/Profile';
 import OrganizationsPage from './pages/Organizations';
 import CreateOrganizationPage from './pages/CreateOrganization';
 import SignInPage from './pages/SignIn';
 import LandingPage from './pages/LandingPage';
-import {SignedIn} from '@asgardeo/react';
+import LandingLayout from './layouts/LandingLayout';
+import DashboardLayout from './layouts/DashboardLayout';
+import AuthenticatedLayout from './layouts/AuthenticatedLayout';
 
 // Types
 export interface User {
@@ -94,19 +95,43 @@ function App() {
       }}
     >
       <Router>
-        <div className="min-h-screen bg-gray-50">
-          <Header />
-          <main>
-            <Routes>
-              <Route path="/" element={<LandingPage />} />
-              <Route path="/signin" element={<SignInPage />} />
-              <Route path="/" element={<DashboardPage />} />
-              <Route path="/profile" element={<ProfilePage />} />
-              <Route path="/organizations" element={<OrganizationsPage />} />
-              <Route path="/organizations/new" element={<CreateOrganizationPage />} />
-            </Routes>
-          </main>
-        </div>
+        <Routes>
+          {/* Landing/Public Routes */}
+          <Route path="/" element={
+            <LandingLayout>
+              <LandingPage />
+            </LandingLayout>
+          } />
+          
+          {/* Auth Routes */}
+          <Route path="/signin" element={
+            <AuthenticatedLayout>
+              <SignInPage />
+            </AuthenticatedLayout>
+          } />
+          
+          {/* Dashboard/Protected Routes */}
+          <Route path="/dashboard" element={
+            <DashboardLayout>
+              <DashboardPage />
+            </DashboardLayout>
+          } />
+          <Route path="/profile" element={
+            <DashboardLayout>
+              <ProfilePage />
+            </DashboardLayout>
+          } />
+          <Route path="/organizations" element={
+            <DashboardLayout>
+              <OrganizationsPage />
+            </DashboardLayout>
+          } />
+          <Route path="/organizations/new" element={
+            <DashboardLayout>
+              <CreateOrganizationPage />
+            </DashboardLayout>
+          } />
+        </Routes>
       </Router>
     </AppContext.Provider>
   );
diff --git a/recipes/vite-react-ts/src/layouts/AuthenticatedLayout.tsx b/recipes/vite-react-ts/src/layouts/AuthenticatedLayout.tsx
new file mode 100644
index 000000000..c7f980d38
--- /dev/null
+++ b/recipes/vite-react-ts/src/layouts/AuthenticatedLayout.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import { type ReactNode } from 'react';
+
+interface AuthenticatedLayoutProps {
+  children: ReactNode;
+}
+
+export default function AuthenticatedLayout({ children }: AuthenticatedLayoutProps) {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
+      {children}
+    </div>
+  );
+}
diff --git a/recipes/vite-react-ts/src/layouts/DashboardLayout.tsx b/recipes/vite-react-ts/src/layouts/DashboardLayout.tsx
new file mode 100644
index 000000000..361bc5ddb
--- /dev/null
+++ b/recipes/vite-react-ts/src/layouts/DashboardLayout.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { type ReactNode } from 'react';
+import Header from '../components/Header';
+
+interface DashboardLayoutProps {
+  children: ReactNode;
+}
+
+export default function DashboardLayout({ children }: DashboardLayoutProps) {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header />
+      <main className="pt-4">
+        {children}
+      </main>
+    </div>
+  );
+}
diff --git a/recipes/vite-react-ts/src/layouts/LandingLayout.tsx b/recipes/vite-react-ts/src/layouts/LandingLayout.tsx
new file mode 100644
index 000000000..60ffefccd
--- /dev/null
+++ b/recipes/vite-react-ts/src/layouts/LandingLayout.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { type ReactNode } from 'react';
+import Header from '../components/Header';
+
+interface LandingLayoutProps {
+  children: ReactNode;
+}
+
+export default function LandingLayout({ children }: LandingLayoutProps) {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header />
+      <main>
+        {children}
+      </main>
+    </div>
+  );
+}
diff --git a/recipes/vite-react-ts/src/pages/LandingPage.tsx b/recipes/vite-react-ts/src/pages/LandingPage.tsx
index 3bbc9d972..aa6be30e6 100644
--- a/recipes/vite-react-ts/src/pages/LandingPage.tsx
+++ b/recipes/vite-react-ts/src/pages/LandingPage.tsx
@@ -149,7 +149,7 @@ export default function LandingPage() {
   ];
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="bg-white">
       {/* Hero Section */}
       <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-32">
diff --git a/recipes/vite-react-ts/src/pages/SignIn.tsx b/recipes/vite-react-ts/src/pages/SignIn.tsx
index 271fe5dbd..4602e6652 100644
--- a/recipes/vite-react-ts/src/pages/SignIn.tsx
+++ b/recipes/vite-react-ts/src/pages/SignIn.tsx
@@ -1,20 +1,11 @@
 'use client';
 
-import {useState} from 'react';
-import {Button} from '@/components/ui/button';
-import {Input} from '@/components/ui/input';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
-import {Label} from '@/components/ui/label';
-import {Users, Eye, EyeOff} from 'lucide-react';
-import {useAsgardeo, SignIn} from '@asgardeo/react';
+import {Users} from 'lucide-react';
+import {SignIn} from '@asgardeo/react';
 
 export default function SignInPage() {
-  const {isLoading} = useAsgardeo();
-
-  const [showPassword, setShowPassword] = useState(false);
-
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-purple-50 p-4">
+    <div className="min-h-screen flex items-center justify-center p-4">
       <div className="w-full max-w-md">
         {/* Header */}
         <div className="text-center mb-8">
@@ -24,20 +15,9 @@ export default function SignInPage() {
             </div>
             <span className="ml-2 text-2xl font-bold text-gray-900">Teamspace</span>
           </a>
-          <h1 className="text-2xl font-bold text-gray-900">Welcome back</h1>
-          <p className="text-gray-600 mt-2">Sign in to your account to continue</p>
         </div>
 
-        <SignIn
-          onSuccess={authData => {
-            console.log('Authentication successful:', authData);
-            // Handle successful authentication
-          }}
-          onError={error => {
-            console.error('Authentication failed:', error);
-          }}
-          styled={false}
-        />
+        <SignIn />
 
         {/* <Card className="border-0 shadow-lg">
           <CardHeader className="space-y-1">

From 81192cb88da5748d5b0efe4a74e906be0d340fe1 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 16 Jun 2025 11:53:32 +0530
Subject: [PATCH 102/131] chore(recipes): update formatting

---
 recipes/vite-react-ts/src/App.tsx             | 82 +++++++++++--------
 .../vite-react-ts/src/layouts/AuthLayout.tsx  | 11 +++
 .../src/layouts/AuthenticatedLayout.tsx       | 10 +--
 .../src/layouts/DashboardLayout.tsx           |  8 +-
 .../src/layouts/LandingLayout.tsx             |  8 +-
 5 files changed, 70 insertions(+), 49 deletions(-)
 create mode 100644 recipes/vite-react-ts/src/layouts/AuthLayout.tsx

diff --git a/recipes/vite-react-ts/src/App.tsx b/recipes/vite-react-ts/src/App.tsx
index 39e0ae21d..fcf836b5f 100644
--- a/recipes/vite-react-ts/src/App.tsx
+++ b/recipes/vite-react-ts/src/App.tsx
@@ -97,40 +97,58 @@ function App() {
       <Router>
         <Routes>
           {/* Landing/Public Routes */}
-          <Route path="/" element={
-            <LandingLayout>
-              <LandingPage />
-            </LandingLayout>
-          } />
-          
+          <Route
+            path="/"
+            element={
+              <LandingLayout>
+                <LandingPage />
+              </LandingLayout>
+            }
+          />
+
           {/* Auth Routes */}
-          <Route path="/signin" element={
-            <AuthenticatedLayout>
-              <SignInPage />
-            </AuthenticatedLayout>
-          } />
-          
+          <Route
+            path="/signin"
+            element={
+              <AuthenticatedLayout>
+                <SignInPage />
+              </AuthenticatedLayout>
+            }
+          />
+
           {/* Dashboard/Protected Routes */}
-          <Route path="/dashboard" element={
-            <DashboardLayout>
-              <DashboardPage />
-            </DashboardLayout>
-          } />
-          <Route path="/profile" element={
-            <DashboardLayout>
-              <ProfilePage />
-            </DashboardLayout>
-          } />
-          <Route path="/organizations" element={
-            <DashboardLayout>
-              <OrganizationsPage />
-            </DashboardLayout>
-          } />
-          <Route path="/organizations/new" element={
-            <DashboardLayout>
-              <CreateOrganizationPage />
-            </DashboardLayout>
-          } />
+          <Route
+            path="/dashboard"
+            element={
+              <DashboardLayout>
+                <DashboardPage />
+              </DashboardLayout>
+            }
+          />
+          <Route
+            path="/profile"
+            element={
+              <DashboardLayout>
+                <ProfilePage />
+              </DashboardLayout>
+            }
+          />
+          <Route
+            path="/organizations"
+            element={
+              <DashboardLayout>
+                <OrganizationsPage />
+              </DashboardLayout>
+            }
+          />
+          <Route
+            path="/organizations/new"
+            element={
+              <DashboardLayout>
+                <CreateOrganizationPage />
+              </DashboardLayout>
+            }
+          />
         </Routes>
       </Router>
     </AppContext.Provider>
diff --git a/recipes/vite-react-ts/src/layouts/AuthLayout.tsx b/recipes/vite-react-ts/src/layouts/AuthLayout.tsx
new file mode 100644
index 000000000..9cc7d5f39
--- /dev/null
+++ b/recipes/vite-react-ts/src/layouts/AuthLayout.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import {type ReactNode} from 'react';
+
+interface AuthLayoutProps {
+  children: ReactNode;
+}
+
+export default function AuthLayout({children}: AuthLayoutProps) {
+  return <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">{children}</div>;
+}
diff --git a/recipes/vite-react-ts/src/layouts/AuthenticatedLayout.tsx b/recipes/vite-react-ts/src/layouts/AuthenticatedLayout.tsx
index c7f980d38..be4f6fd35 100644
--- a/recipes/vite-react-ts/src/layouts/AuthenticatedLayout.tsx
+++ b/recipes/vite-react-ts/src/layouts/AuthenticatedLayout.tsx
@@ -1,15 +1,11 @@
 'use client';
 
-import { type ReactNode } from 'react';
+import {type ReactNode} from 'react';
 
 interface AuthenticatedLayoutProps {
   children: ReactNode;
 }
 
-export default function AuthenticatedLayout({ children }: AuthenticatedLayoutProps) {
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
-      {children}
-    </div>
-  );
+export default function AuthenticatedLayout({children}: AuthenticatedLayoutProps) {
+  return <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">{children}</div>;
 }
diff --git a/recipes/vite-react-ts/src/layouts/DashboardLayout.tsx b/recipes/vite-react-ts/src/layouts/DashboardLayout.tsx
index 361bc5ddb..c79b54ace 100644
--- a/recipes/vite-react-ts/src/layouts/DashboardLayout.tsx
+++ b/recipes/vite-react-ts/src/layouts/DashboardLayout.tsx
@@ -1,19 +1,17 @@
 'use client';
 
-import { type ReactNode } from 'react';
+import {type ReactNode} from 'react';
 import Header from '../components/Header';
 
 interface DashboardLayoutProps {
   children: ReactNode;
 }
 
-export default function DashboardLayout({ children }: DashboardLayoutProps) {
+export default function DashboardLayout({children}: DashboardLayoutProps) {
   return (
     <div className="min-h-screen bg-gray-50">
       <Header />
-      <main className="pt-4">
-        {children}
-      </main>
+      <main className="pt-4">{children}</main>
     </div>
   );
 }
diff --git a/recipes/vite-react-ts/src/layouts/LandingLayout.tsx b/recipes/vite-react-ts/src/layouts/LandingLayout.tsx
index 60ffefccd..2058ce111 100644
--- a/recipes/vite-react-ts/src/layouts/LandingLayout.tsx
+++ b/recipes/vite-react-ts/src/layouts/LandingLayout.tsx
@@ -1,19 +1,17 @@
 'use client';
 
-import { type ReactNode } from 'react';
+import {type ReactNode} from 'react';
 import Header from '../components/Header';
 
 interface LandingLayoutProps {
   children: ReactNode;
 }
 
-export default function LandingLayout({ children }: LandingLayoutProps) {
+export default function LandingLayout({children}: LandingLayoutProps) {
   return (
     <div className="min-h-screen bg-gray-50">
       <Header />
-      <main>
-        {children}
-      </main>
+      <main>{children}</main>
     </div>
   );
 }

From b13f1107b903a272750f7bf4b7f9d2bca79be0fa Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 16 Jun 2025 17:41:37 +0530
Subject: [PATCH 103/131] feat(react): implement native authentication flow and
 add afterSignInUrl support

---
 .../__legacy__/clients/main-thread-client.ts  |  21 +-
 .../handleApplicationNativeAuthentication.ts  |  17 +-
 ...itializeApplicationNativeAuthentication.ts |  18 +-
 packages/javascript/src/index.ts              |   3 +-
 .../src/utils/getLatestStateParam.ts          |  73 ++++
 packages/react/src/__temp__/api.ts            |  19 +-
 .../presentation/SignIn/BaseSignIn.tsx        | 316 ++++++++++++++----
 .../components/presentation/SignIn/SignIn.tsx |  50 ++-
 .../src/contexts/Asgardeo/AsgardeoContext.ts  |   4 +-
 .../contexts/Asgardeo/AsgardeoProvider.tsx    |   1 +
 recipes/vite-react-ts/src/main.tsx            |   1 +
 11 files changed, 399 insertions(+), 124 deletions(-)
 create mode 100644 packages/javascript/src/utils/getLatestStateParam.ts

diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index ca09ad0af..0abfa4451 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -29,6 +29,9 @@ import {
   SessionData,
   Storage,
   extractPkceStorageKeyFromState,
+  initializeApplicationNativeAuthentication,
+  handleApplicationNativeAuthentication,
+  TemporaryStore,
 } from '@asgardeo/javascript';
 import {SILENT_SIGN_IN_STATE, TOKEN_REQUEST_CONFIG_KEY} from '../constants';
 import {AuthenticationHelper, SPAHelper, SessionManagementHelper} from '../helpers';
@@ -185,6 +188,13 @@ export const MainThreadClient = async (
       params: Record<string, unknown>;
     },
   ): Promise<User> => {
+    if (signInConfig['flow']) {
+      return handleApplicationNativeAuthentication({
+        url: signInConfig['flow']['requestConfig']['url'],
+        payload: signInConfig['flow']['payload'],
+      });
+    }
+
     const basicUserInfo = await _authenticationHelper.handleSignIn(shouldStopAuthn, checkSession, undefined);
 
     if (basicUserInfo) {
@@ -236,7 +246,16 @@ export const MainThreadClient = async (
           _dataLayer.setTemporaryDataParameter(TOKEN_REQUEST_CONFIG_KEY, JSON.stringify(tokenRequestConfig));
         }
 
-        location.href = url;
+        if (signInConfig['response_mode'] === 'direct') {
+          const authorizeUrl: URL = new URL(url);
+
+          return initializeApplicationNativeAuthentication({
+            url: `${authorizeUrl.origin}${authorizeUrl.pathname}`,
+            payload: Object.fromEntries(authorizeUrl.searchParams.entries()),
+          });
+        } else {
+          location.href = url;
+        }
 
         await SPAUtils.waitTillPageRedirect();
 
diff --git a/packages/javascript/src/api/handleApplicationNativeAuthentication.ts b/packages/javascript/src/api/handleApplicationNativeAuthentication.ts
index 6db5ca79b..1688d4197 100644
--- a/packages/javascript/src/api/handleApplicationNativeAuthentication.ts
+++ b/packages/javascript/src/api/handleApplicationNativeAuthentication.ts
@@ -29,7 +29,7 @@ export interface AuthorizeRequestConfig extends Partial<Request> {
   /**
    * The base URL of the Asgardeo server.
    */
-  baseUrl: string;
+  baseUrl?: string;
   /**
    * The authorization request payload.
    */
@@ -37,22 +37,11 @@ export interface AuthorizeRequestConfig extends Partial<Request> {
 }
 
 const handleApplicationNativeAuthentication = async ({
+  url,
   baseUrl,
   payload,
   ...requestConfig
 }: AuthorizeRequestConfig): Promise<ApplicationNativeAuthenticationHandleResponse> => {
-  try {
-    new URL(baseUrl);
-  } catch (error) {
-    throw new AsgardeoAPIError(
-      'Invalid base URL provided',
-      'handleApplicationNativeAuthentication-ValidationError-001',
-      'javascript',
-      400,
-      'If an invalid base URL is provided, the endpoint URL cannot be constructed correctly.',
-    );
-  }
-
   if (!payload) {
     throw new AsgardeoAPIError(
       'Authorization payload is required',
@@ -64,7 +53,7 @@ const handleApplicationNativeAuthentication = async ({
   }
 
   const {headers: customHeaders, ...otherConfig} = requestConfig;
-  const response: Response = await fetch(`${baseUrl}/oauth2/authn`, {
+  const response: Response = await fetch(url ?? `${baseUrl}/oauth2/authn`, {
     method: requestConfig.method || 'POST',
     headers: {
       'Content-Type': 'application/json',
diff --git a/packages/javascript/src/api/initializeApplicationNativeAuthentication.ts b/packages/javascript/src/api/initializeApplicationNativeAuthentication.ts
index f680b313c..6f093be0e 100644
--- a/packages/javascript/src/api/initializeApplicationNativeAuthentication.ts
+++ b/packages/javascript/src/api/initializeApplicationNativeAuthentication.ts
@@ -77,10 +77,11 @@ export interface AuthorizationRequest {
  * Request configuration for the authorize function.
  */
 export interface AuthorizeRequestConfig extends Partial<Request> {
+  url?: string;
   /**
    * The base URL of the Asgardeo server.
    */
-  baseUrl: string;
+  baseUrl?: string;
   /**
    * The authorization request payload.
    */
@@ -118,22 +119,11 @@ export interface AuthorizeRequestConfig extends Partial<Request> {
  * ```
  */
 const initializeApplicationNativeAuthentication = async ({
+  url,
   baseUrl,
   payload,
   ...requestConfig
 }: AuthorizeRequestConfig): Promise<ApplicationNativeAuthenticationInitiateResponse> => {
-  try {
-    new URL(baseUrl);
-  } catch (error) {
-    throw new AsgardeoAPIError(
-      'Invalid base URL provided',
-      'initializeApplicationNativeAuthentication-ValidationError-001',
-      'javascript',
-      400,
-      'If an invalid base URL is provided, the endpoint URL cannot be constructed correctly.',
-    );
-  }
-
   if (!payload) {
     throw new AsgardeoAPIError(
       'Authorization payload is required',
@@ -152,7 +142,7 @@ const initializeApplicationNativeAuthentication = async ({
   });
 
   const {headers: customHeaders, ...otherConfig} = requestConfig;
-  const response: Response = await fetch(`${baseUrl}/oauth2/authorize`, {
+  const response: Response = await fetch(url ?? `${baseUrl}/oauth2/authorize`, {
     method: requestConfig.method || 'POST',
     headers: {
       'Content-Type': 'application/x-www-form-urlencoded',
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 5b620e2d5..348ac76da 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -58,7 +58,7 @@ export {
   ExtendedAuthorizeRequestUrlParams,
 } from './models/oauth-request';
 export {OIDCEndpoints} from './models/oidc-endpoints';
-export {Storage} from './models/store';
+export {Storage, TemporaryStore} from './models/store';
 export {User, UserProfile} from './models/user';
 export {SessionData} from './models/session';
 export {Schema, SchemaAttribute, WellKnownSchemaIds, FlattenedSchema} from './models/scim2-schema';
@@ -76,6 +76,7 @@ export {default as extractUserClaimsFromIdToken} from './utils/extractUserClaims
 export {default as extractPkceStorageKeyFromState} from './utils/extractPkceStorageKeyFromState';
 export {default as flattenUserSchema} from './utils/flattenUserSchema';
 export {default as generateUserProfile} from './utils/generateUserProfile';
+export {default as getLatestStateParam} from './utils/getLatestStateParam';
 export {default as generateFlattenedUserProfile} from './utils/generateFlattenedUserProfile';
 export {default as getI18nBundles} from './utils/getI18nBundles';
 export {default as set} from './utils/set';
diff --git a/packages/javascript/src/utils/getLatestStateParam.ts b/packages/javascript/src/utils/getLatestStateParam.ts
new file mode 100644
index 000000000..b024cea08
--- /dev/null
+++ b/packages/javascript/src/utils/getLatestStateParam.ts
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import PKCEConstants from '../constants/PKCEConstants';
+import {TemporaryStore} from '../models/store';
+import generateStateParamForRequestCorrelation from './generateStateParamForRequestCorrelation';
+
+/**
+ * Gets the latest PKCE storage key from the temporary store.
+ *
+ * @param tempStore - The object that holds temporary PKCE-related data (e.g., sessionStorage).
+ * @returns The latest PKCE storage key or null if no keys exist.
+ */
+const getLatestPkceStorageKey = (tempStore: TemporaryStore): string | null => {
+  const keys: string[] = [];
+
+  Object.keys(tempStore).forEach((key: string) => {
+    if (key.startsWith(PKCEConstants.Storage.StorageKeys.CODE_VERIFIER)) {
+      keys.push(key);
+    }
+  });
+
+  const lastKey: string | undefined = keys.sort().pop();
+
+  return lastKey ?? null;
+};
+
+/**
+ * Finds the latest state parameter based on the most recent PKCE storage key.
+ *
+ * This utility combines the functionality of finding the latest PKCE key and generating
+ * the corresponding state parameter for request correlation.
+ *
+ * @param tempStore - The object that holds temporary PKCE-related data (e.g., sessionStorage).
+ * @param state - Optional state string to prepend to the request correlation.
+ * @returns The latest state parameter string or null if no PKCE keys exist.
+ *
+ * @example
+ * const latestState = getLatestStateParam(sessionStorage, "myState");
+ * // Returns: "myState_request_2" (if latest PKCE key is pkce_code_verifier_2)
+ *
+ * const latestStateNoPrefix = getLatestStateParam(sessionStorage);
+ * // Returns: "request_2" (if latest PKCE key is pkce_code_verifier_2)
+ *
+ * const noKeys = getLatestStateParam(emptyStorage);
+ * // Returns: null (if no PKCE keys exist)
+ */
+const getLatestStateParam = (tempStore: TemporaryStore, state?: string): string | null => {
+  const latestPkceKey = getLatestPkceStorageKey(tempStore);
+
+  if (!latestPkceKey) {
+    return null;
+  }
+
+  return generateStateParamForRequestCorrelation(latestPkceKey, state);
+};
+
+export default getLatestStateParam;
diff --git a/packages/react/src/__temp__/api.ts b/packages/react/src/__temp__/api.ts
index 7a313018c..279ebcb81 100644
--- a/packages/react/src/__temp__/api.ts
+++ b/packages/react/src/__temp__/api.ts
@@ -30,7 +30,7 @@ import {
   SignInConfig,
   SPACustomGrantConfig,
   initializeApplicationNativeAuthentication,
-  processOpenIDScopes
+  processOpenIDScopes,
 } from '@asgardeo/browser';
 import {AuthStateInterface} from './models';
 
@@ -110,23 +110,6 @@ class AuthAPI {
       params: Record<string, unknown>;
     },
   ): Promise<any> {
-    if (config?.['response_mode'] === 'direct') {
-      await this._client.isInitialized();
-
-      const payload = {
-        baseUrl: (await this.getConfigData())?.baseUrl,
-        payload: {
-          client_id: (await this.getConfigData())?.clientId,
-          redirect_uri: (await this.getConfigData())?.afterSignInUrl,
-          response_type: 'code',
-          scope: processOpenIDScopes((await this.getConfigData())?.scopes) as any,
-          response_mode: 'direct',
-        },
-      };
-
-      return initializeApplicationNativeAuthentication(payload);
-    }
-
     return this._client
       .signIn(config, authorizationCode, sessionState, authState, tokenRequestConfig)
       .then(async (response: User) => {
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index 37ec3b7ab..78075f014 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -26,7 +26,7 @@ import {
   AsgardeoAPIError,
   withVendorCSSClassPrefix,
 } from '@asgardeo/browser';
-import {FC, ReactElement, FormEvent, useEffect, useState, useCallback} from 'react';
+import {FC, ReactElement, FormEvent, useEffect, useState, useCallback, useRef} from 'react';
 import {clsx} from 'clsx';
 import Card from '../../primitives/Card/Card';
 import Alert from '../../primitives/Alert/Alert';
@@ -53,11 +53,17 @@ export interface BaseSignInProps {
    * @param payload - The authentication payload.
    * @returns Promise resolving to the authentication response.
    */
-  onAuthenticate: (payload: {
-    flowId: string;
-    selectedAuthenticator: {
-      authenticatorId: string;
-      params: Record<string, string>;
+  onSubmit: (flow: {
+    requestConfig?: {
+      method: string;
+      url: string;
+    };
+    payload: {
+      flowId: string;
+      selectedAuthenticator: {
+        authenticatorId: string;
+        params: Record<string, string>;
+      };
     };
   }) => Promise<ApplicationNativeAuthenticationHandleResponse>;
 
@@ -130,6 +136,7 @@ export interface BaseSignInProps {
    * Theme variant for the component.
    */
   variant?: 'default' | 'outlined' | 'filled';
+  afterSignInUrl?: string;
 }
 
 /**
@@ -148,7 +155,7 @@ export interface BaseSignInProps {
  *         // Your API call to initialize authentication
  *         return await initializeAuth();
  *       }}
- *       onAuthenticate={async (payload) => {
+ *       onSubmit={async (payload) => {
  *         // Your API call to handle authentication
  *         return await handleAuth(payload);
  *       }}
@@ -176,8 +183,9 @@ const BaseSignIn: FC<BaseSignInProps> = props => {
  * Internal component that consumes FlowContext and renders the sign-in UI.
  */
 const BaseSignInContent: FC<BaseSignInProps> = ({
+  afterSignInUrl,
   onInitialize,
-  onAuthenticate,
+  onSubmit,
   onSuccess,
   onError,
   onFlowChange,
@@ -204,6 +212,9 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
   const [error, setError] = useState<string | null>(null);
   const [messages, setMessages] = useState<Array<{type: string; message: string}>>([]);
 
+  // Ref to track if initialization has been attempted to prevent multiple calls
+  const initializationAttemptedRef = useRef(false);
+
   const formFields: FormField[] =
     currentAuthenticator?.metadata?.params?.map(param => ({
       name: param.param,
@@ -267,53 +278,6 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
     touchAllFields();
   };
 
-  /**
-   * Initialize the authentication flow.
-   */
-  const initializeFlow = useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const response = await onInitialize();
-
-      setCurrentFlow(response);
-      setIsInitialized(true);
-      onFlowChange?.(response);
-
-      if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
-        onSuccess?.((response as any).authData || {});
-        return;
-      }
-
-      if (response.nextStep?.authenticators?.length > 0) {
-        if (response.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' && response.nextStep.authenticators.length > 1) {
-          setCurrentAuthenticator(null);
-        } else {
-          const authenticator = response.nextStep.authenticators[0];
-          setCurrentAuthenticator(authenticator);
-          setupFormFields(authenticator);
-        }
-      }
-
-      if ('nextStep' in response && response.nextStep && 'messages' in response.nextStep) {
-        const stepMessages = (response.nextStep as any).messages || [];
-        setMessages(
-          stepMessages.map((msg: any) => ({
-            type: msg.type || 'INFO',
-            message: msg.message || '',
-          })),
-        );
-      }
-    } catch (err) {
-      const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.initializationFailed');
-      setError(errorMessage);
-      onError?.(err as Error);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [onInitialize, onFlowChange, onSuccess, onError, setupFormFields, t]);
-
   /**
    * Check if the response contains a redirection URL and perform the redirect if necessary.
    * @param response - The authentication response
@@ -333,8 +297,156 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
           ApplicationNativeAuthenticationAuthenticatorPromptType.RedirectionPrompt &&
         (responseAuthenticator.metadata as any)?.additionalData?.redirectUrl
       ) {
-        // Perform the redirect immediately
-        window.location.href = (responseAuthenticator.metadata as any).additionalData.redirectUrl;
+        /**
+         * Open a popup window to handle redirection prompts
+         */
+        const redirectUrl = (responseAuthenticator.metadata as any)?.additionalData?.redirectUrl;
+        const popup = window.open(redirectUrl, 'oauth_popup', 'width=500,height=600,scrollbars=yes,resizable=yes');
+
+        if (!popup) {
+          console.error('Failed to open popup window');
+          return false;
+        }
+
+        /**
+         * Add an event listener to the window to capture the message from the popup
+         */
+        const messageHandler = async function messageEventHandler(event: MessageEvent) {
+          /**
+           * Check if the message is from our popup window
+           */
+          if (event.source !== popup) {
+            // Don't log every message rejection to reduce noise
+            if (event.source !== window && event.source !== window.parent) {
+              // TODO: Add logs
+            }
+            return;
+          }
+
+          /**
+           * Check the origin of the message to ensure it's from a trusted source
+           */
+          const expectedOrigin = afterSignInUrl ? new URL(afterSignInUrl).origin : window.location.origin;
+          if (event.origin !== expectedOrigin && event.origin !== window.location.origin) {
+            return;
+          }
+
+          const {code, state} = event.data;
+
+          if (code && state) {
+            const payload = {
+              flowId: currentFlow.flowId,
+              selectedAuthenticator: {
+                authenticatorId: responseAuthenticator.authenticatorId,
+                params: {
+                  code,
+                  state,
+                },
+              },
+            };
+
+            await onSubmit({
+              requestConfig: {
+                method: currentFlow?.links[0].method,
+                url: currentFlow?.links[0].href,
+              },
+              payload,
+            });
+
+            popup.close();
+            cleanup();
+          } else {
+            // TODO: Add logs
+          }
+        };
+
+        const cleanup = () => {
+          window.removeEventListener('message', messageHandler);
+          if (popupMonitor) {
+            clearInterval(popupMonitor);
+          }
+        };
+
+        window.addEventListener('message', messageHandler);
+
+        /**
+         * Monitor popup for closure and URL changes
+         */
+        let hasProcessedCallback = false; // Prevent multiple processing
+        const popupMonitor = setInterval(async () => {
+          try {
+            if (popup.closed) {
+              cleanup();
+
+              return;
+            }
+
+            // Skip if we've already processed a callback
+            if (hasProcessedCallback) {
+              return;
+            }
+
+            // Try to access popup URL to check for callback
+            try {
+              const popupUrl = popup.location.href;
+
+              // Check if we've been redirected to the callback URL
+              if (popupUrl && (popupUrl.includes('code=') || popupUrl.includes('error='))) {
+                hasProcessedCallback = true; // Set flag to prevent multiple processing
+
+                // Parse the URL for OAuth parameters
+                const url = new URL(popupUrl);
+                const code = url.searchParams.get('code');
+                const state = url.searchParams.get('state');
+                const error = url.searchParams.get('error');
+
+                if (error) {
+                  console.error('OAuth error:', error);
+                  popup.close();
+                  cleanup();
+                  return;
+                }
+
+                if (code && state) {
+                  const payload = {
+                    flowId: currentFlow.flowId,
+                    selectedAuthenticator: {
+                      authenticatorId: responseAuthenticator.authenticatorId,
+                      params: {
+                        code,
+                        state,
+                      },
+                    },
+                  };
+
+                  const response = await onSubmit({
+                    requestConfig: {
+                      method: currentFlow?.links[0].method,
+                      url: currentFlow?.links[0].href,
+                    },
+                    payload,
+                  });
+
+                  popup.close();
+
+                  onFlowChange?.(response);
+
+                  if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+                    onSuccess?.(response.authData);
+
+                    return;
+                  }
+                }
+              }
+            } catch (e) {
+              // Cross-origin error is expected when popup navigates to OAuth provider
+              // This is normal and we can ignore it
+            }
+          } catch (e) {
+            console.error('Error monitoring popup:', e);
+          }
+        }, 1000);
+
         return true;
       }
     }
@@ -370,7 +482,13 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
         },
       };
 
-      const response = await onAuthenticate(payload);
+      const response = await onSubmit({
+        requestConfig: {
+          method: currentFlow?.links[0].method,
+          url: currentFlow?.links[0].href,
+        },
+        payload,
+      });
       onFlowChange?.(response);
 
       if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
@@ -458,7 +576,13 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
           },
         };
 
-        const response = await onAuthenticate(payload);
+        const response = await onSubmit({
+          requestConfig: {
+            method: currentFlow?.links[0].method,
+            url: currentFlow?.links[0].href,
+          },
+          payload,
+        });
         onFlowChange?.(response);
 
         if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
@@ -485,7 +609,13 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
             },
           };
 
-          const response = await onAuthenticate(payload);
+          const response = await onSubmit({
+            requestConfig: {
+              method: currentFlow?.links[0].method,
+              url: currentFlow?.links[0].href,
+            },
+            payload,
+          });
           onFlowChange?.(response);
 
           if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
@@ -546,7 +676,13 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
               },
             };
 
-            const response = await onAuthenticate(payload);
+            const response = await onSubmit({
+              requestConfig: {
+                method: currentFlow?.links[0].method,
+                url: currentFlow?.links[0].href,
+              },
+              payload,
+            });
             onFlowChange?.(response);
 
             if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
@@ -676,10 +812,62 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
   // Initialize the flow on component mount
   useEffect(() => {
-    if (!isInitialized) {
-      initializeFlow();
+    if (!isInitialized && !initializationAttemptedRef.current) {
+      initializationAttemptedRef.current = true;
+
+      // Inline initialization to avoid dependency issues
+      const performInitialization = async () => {
+        setIsLoading(true);
+        setError(null);
+
+        try {
+          const response = await onInitialize();
+
+          setCurrentFlow(response);
+          setIsInitialized(true);
+          onFlowChange?.(response);
+
+          if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+            onSuccess?.((response as any).authData || {});
+            return;
+          }
+
+          if (response.nextStep?.authenticators?.length > 0) {
+            if (response.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' && response.nextStep.authenticators.length > 1) {
+              setCurrentAuthenticator(null);
+            } else {
+              const authenticator = response.nextStep.authenticators[0];
+              setCurrentAuthenticator(authenticator);
+              setupFormFields(authenticator);
+            }
+          }
+
+          if ('nextStep' in response && response.nextStep && 'messages' in response.nextStep) {
+            const stepMessages = (response.nextStep as any).messages || [];
+            setMessages(
+              stepMessages.map((msg: any) => ({
+                type: msg.type || 'INFO',
+                message: msg.message || '',
+              })),
+            );
+          }
+        } catch (err) {
+          const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.initializationFailed');
+          setError(errorMessage);
+          onError?.(err as Error);
+        } finally {
+          setIsLoading(false);
+        }
+      };
+
+      performInitialization();
     }
-  }, [isInitialized, initializeFlow]);
+
+    // Cleanup function to reset initialization state on unmount
+    return () => {
+      initializationAttemptedRef.current = false;
+    };
+  }, [isInitialized]);
 
   if (!isInitialized && isLoading) {
     return showLoading ? (
diff --git a/packages/react/src/components/presentation/SignIn/SignIn.tsx b/packages/react/src/components/presentation/SignIn/SignIn.tsx
index bb9f4d527..a42eaeb81 100644
--- a/packages/react/src/components/presentation/SignIn/SignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/SignIn.tsx
@@ -116,7 +116,7 @@ const SignIn: FC<SignInProps> = ({
   showLoading = true,
   loadingText = 'Loading...',
 }) => {
-  const {signIn, baseUrl} = useAsgardeo();
+  const {signIn, baseUrl, afterSignInUrl} = useAsgardeo();
 
   /**
    * Initialize the authentication flow.
@@ -128,24 +128,52 @@ const SignIn: FC<SignInProps> = ({
   /**
    * Handle authentication steps.
    */
-  const handleAuthenticate = async (payload: {
-    flowId: string;
-    selectedAuthenticator: {
-      authenticatorId: string;
-      params: Record<string, string>;
+  const handleOnSubmit = async (flow: {
+    requestConfig?: {
+      method: string;
+      url: string;
+    };
+    payload: {
+      flowId: string;
+      selectedAuthenticator: {
+        authenticatorId: string;
+        params: Record<string, string>;
+      };
     };
   }): Promise<ApplicationNativeAuthenticationHandleResponse> => {
-    return await handleApplicationNativeAuthentication({
-      baseUrl,
-      payload,
+    return await signIn({
+      flow,
     });
   };
 
+  /**
+   * Handle successful authentication and redirect with query params.
+   */
+  const handleSuccess = (authData: Record<string, any>) => {
+    // Call the user-provided onSuccess callback first
+    onSuccess?.(authData);
+
+    // Handle redirection for non-federated flows
+    if (authData && afterSignInUrl) {
+      const url = new URL(afterSignInUrl, window.location.origin);
+
+      Object.entries(authData).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+          url.searchParams.append(key, String(value));
+        }
+      });
+
+      // Redirect to the URL with query parameters
+      window.location.href = url.toString();
+    }
+  };
+
   return (
     <BaseSignIn
+      afterSignInUrl={afterSignInUrl}
       onInitialize={handleInitialize}
-      onAuthenticate={handleAuthenticate}
-      onSuccess={onSuccess}
+      onSubmit={handleOnSubmit}
+      onSuccess={handleSuccess}
       onError={onError}
       onFlowChange={onFlowChange}
       className={className}
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoContext.ts b/packages/react/src/contexts/Asgardeo/AsgardeoContext.ts
index 596649124..0d2f0e418 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoContext.ts
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoContext.ts
@@ -51,6 +51,7 @@ export type AsgardeoContextProps = {
   signUp: any;
   user: any;
   baseUrl: string;
+  afterSignInUrl: string;
 };
 
 /**
@@ -63,7 +64,8 @@ const AsgardeoContext: Context<AsgardeoContextProps | null> = createContext<null
   signOut: null,
   signUp: null,
   user: null,
-  baseUrl: ''
+  baseUrl: '',
+  afterSignInUrl: '',
 });
 
 AsgardeoContext.displayName = 'AsgardeoContext';
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index 05971289d..ff14085c0 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -177,6 +177,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
         },
         user,
         baseUrl,
+        afterSignInUrl
       }}
     >
       <I18nProvider preferences={preferences?.i18n}>
diff --git a/recipes/vite-react-ts/src/main.tsx b/recipes/vite-react-ts/src/main.tsx
index a8b418fb8..582cf08ff 100644
--- a/recipes/vite-react-ts/src/main.tsx
+++ b/recipes/vite-react-ts/src/main.tsx
@@ -8,6 +8,7 @@ createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <AsgardeoProvider
       baseUrl={import.meta.env.VITE_ASGARDEO_BASE_URL}
+      afterSignInUrl={import.meta.env.VITE_ASGARDEO_AFTER_SIGN_IN_URL}
       clientId={import.meta.env.VITE_ASGARDEO_CLIENT_ID}
       scopes={['openid', 'address', 'email', 'profile']}
       preferences={{

From ba7bb57019815b7662f3bee1f1dc68a09e0bf3a0 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 16 Jun 2025 22:34:30 +0530
Subject: [PATCH 104/131] feat(react): enhance passkey authentication flow and
 update button icons

---
 packages/javascript/src/i18n/en-US.ts         |  16 +-
 .../presentation/SignIn/BaseSignIn.tsx        | 280 +++++++++++++++++-
 .../SignIn/options/MultiOptionButton.tsx      |  11 +-
 3 files changed, 288 insertions(+), 19 deletions(-)

diff --git a/packages/javascript/src/i18n/en-US.ts b/packages/javascript/src/i18n/en-US.ts
index ab912c1e1..bd60e9c69 100644
--- a/packages/javascript/src/i18n/en-US.ts
+++ b/packages/javascript/src/i18n/en-US.ts
@@ -27,14 +27,14 @@ const translations: I18nTranslations = {
   'elements.buttons.signIn': 'Sign In',
   'elements.buttons.signOut': 'Sign Out',
   'elements.buttons.signUp': 'Sign Up',
-  'elements.buttons.facebook': 'Continue With Facebook',
-  'elements.buttons.google': 'Continue With Google',
-  'elements.buttons.github': 'Continue With GitHub',
-  'elements.buttons.microsoft': 'Continue With Microsoft',
-  'elements.buttons.linkedin': 'Continue With LinkedIn',
-  'elements.buttons.ethereum': 'Continue With Sign In Ethereum',
-  'elements.buttons.multi.option': 'Continue With {connection}',
-  'elements.buttons.social': 'Continue With {connection}',
+  'elements.buttons.facebook': 'Continue with Facebook',
+  'elements.buttons.google': 'Continue with Google',
+  'elements.buttons.github': 'Continue with GitHub',
+  'elements.buttons.microsoft': 'Continue with Microsoft',
+  'elements.buttons.linkedin': 'Continue with LinkedIn',
+  'elements.buttons.ethereum': 'Continue with Sign In Ethereum',
+  'elements.buttons.multi.option': 'Continue with {connection}',
+  'elements.buttons.social': 'Continue with {connection}',
   
   /* Fields */
   'elements.fields.placeholder': 'Enter your {field}',
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index 78075f014..131a9f507 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -23,6 +23,7 @@ import {
   ApplicationNativeAuthenticationStepType,
   ApplicationNativeAuthenticationFlowStatus,
   ApplicationNativeAuthenticationAuthenticatorPromptType,
+  ApplicationNativeAuthenticationConstants,
   AsgardeoAPIError,
   withVendorCSSClassPrefix,
 } from '@asgardeo/browser';
@@ -38,6 +39,136 @@ import FlowProvider from '../../../contexts/Flow/FlowProvider';
 import useFlow from '../../../contexts/Flow/useFlow';
 import {createSignInOptionFromAuthenticator} from './options/SignInOptionFactory';
 
+/**
+ * Utility functions for WebAuthn/Passkey operations
+ */
+
+/**
+ * Convert base64url string to ArrayBuffer
+ */
+const base64urlToArrayBuffer = (base64url: string): ArrayBuffer => {
+  // Add padding if needed
+  const padding = '='.repeat((4 - (base64url.length % 4)) % 4);
+  const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/') + padding;
+
+  const binaryString = atob(base64);
+  const bytes = new Uint8Array(binaryString.length);
+  for (let i = 0; i < binaryString.length; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+  return bytes.buffer;
+};
+
+/**
+ * Convert ArrayBuffer to base64url string
+ */
+const arrayBufferToBase64url = (buffer: ArrayBuffer): string => {
+  const bytes = new Uint8Array(buffer);
+  let binary = '';
+  for (let i = 0; i < bytes.byteLength; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+};
+
+/**
+ * Handle WebAuthn authentication
+ */
+const handleWebAuthnAuthentication = async (challengeData: string): Promise<string> => {
+  // Check if WebAuthn is supported
+  if (!window.navigator.credentials || !window.navigator.credentials.get) {
+    throw new Error('WebAuthn is not supported in this browser. Please use a modern browser or try a different authentication method.');
+  }
+
+  // Check if we're on HTTPS (required for WebAuthn)
+  if (window.location.protocol !== 'https:' && window.location.hostname !== 'localhost') {
+    throw new Error('Passkey authentication requires a secure connection (HTTPS). Please ensure you are accessing this site over HTTPS.');
+  }
+
+  try {
+    // Decode the challenge data
+    const decodedChallenge = JSON.parse(atob(challengeData));
+    const {publicKeyCredentialRequestOptions} = decodedChallenge;
+
+    // Convert challenge from base64url to ArrayBuffer
+    const credential = (await navigator.credentials.get({
+      publicKey: {
+        ...publicKeyCredentialRequestOptions,
+        challenge: base64urlToArrayBuffer(publicKeyCredentialRequestOptions.challenge),
+        // Convert user handle if present
+        ...(publicKeyCredentialRequestOptions.userVerification && {
+          userVerification: publicKeyCredentialRequestOptions.userVerification,
+        }),
+        // Convert allowCredentials if present
+        ...(publicKeyCredentialRequestOptions.allowCredentials && {
+          allowCredentials: publicKeyCredentialRequestOptions.allowCredentials.map((cred: any) => ({
+            ...cred,
+            id: base64urlToArrayBuffer(cred.id),
+          })),
+        }),
+      },
+    })) as PublicKeyCredential;
+
+    if (!credential) {
+      throw new Error('No credential returned from WebAuthn');
+    }
+
+    const authData = credential.response as AuthenticatorAssertionResponse;
+
+    // Create the token response for the server
+    const tokenResponse = {
+      requestId: decodedChallenge.requestId,
+      credential: {
+        id: credential.id,
+        rawId: arrayBufferToBase64url(credential.rawId),
+        response: {
+          authenticatorData: arrayBufferToBase64url(authData.authenticatorData),
+          clientDataJSON: arrayBufferToBase64url(authData.clientDataJSON),
+          signature: arrayBufferToBase64url(authData.signature),
+          ...(authData.userHandle && {
+            userHandle: arrayBufferToBase64url(authData.userHandle),
+          }),
+        },
+        type: credential.type,
+      },
+    };
+
+    return JSON.stringify(tokenResponse);
+  } catch (error) {
+    console.error('WebAuthn authentication failed:', error);
+
+    // Handle specific error cases
+    if (error instanceof Error) {
+      if (error.name === 'NotAllowedError') {
+        throw new Error('Passkey authentication was cancelled or timed out. Please try again.');
+      } else if (error.name === 'SecurityError') {
+        throw new Error('Passkey authentication failed. Please ensure you are using HTTPS and that your browser supports passkeys.');
+      } else if (error.name === 'InvalidStateError') {
+        throw new Error('No valid passkey found for this account. Please register a passkey first or use a different authentication method.');
+      } else if (error.name === 'NotSupportedError') {
+        throw new Error('Passkey authentication is not supported on this device or browser. Please use a different authentication method.');
+      } else if (error.name === 'NetworkError') {
+        throw new Error('Network error during passkey authentication. Please check your connection and try again.');
+      } else if (error.name === 'UnknownError') {
+        throw new Error('An unknown error occurred during passkey authentication. Please try again or use a different authentication method.');
+      }
+    }
+
+    throw new Error(`Passkey authentication failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+};
+
+/**
+ * Check if the authenticator is a passkey/FIDO authenticator
+ */
+const isPasskeyAuthenticator = (authenticator: ApplicationNativeAuthenticationAuthenticator): boolean => {
+  return (
+    authenticator.authenticatorId === ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Passkey &&
+    authenticator.metadata?.promptType === ApplicationNativeAuthenticationAuthenticatorPromptType.InternalPrompt &&
+    (authenticator.metadata as any)?.additionalData?.challengeData
+  );
+};
+
 /**
  * Props for the BaseSignIn component.
  */
@@ -565,7 +696,98 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
     setMessages([]);
 
     try {
-      if (
+      // Handle passkey/FIDO authentication
+      if (isPasskeyAuthenticator(authenticator)) {
+        try {
+          const challengeData = (authenticator.metadata as any)?.additionalData?.challengeData;
+          if (!challengeData) {
+            throw new Error('Missing challenge data for passkey authentication');
+          }
+
+          const tokenResponse = await handleWebAuthnAuthentication(challengeData);
+
+          const payload = {
+            flowId: currentFlow.flowId,
+            selectedAuthenticator: {
+              authenticatorId: authenticator.authenticatorId,
+              params: {
+                tokenResponse,
+              },
+            },
+          };
+
+          const response = await onSubmit({
+            requestConfig: {
+              method: currentFlow?.links[0].method,
+              url: currentFlow?.links[0].href,
+            },
+            payload,
+          });
+          onFlowChange?.(response);
+
+          if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+            onSuccess?.(response.authData);
+            return;
+          }
+
+          if (
+            response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
+            response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
+          ) {
+            setError(t('errors.passkeyAuthenticationFailed'));
+            return;
+          }
+
+          // Handle next step if authentication is not complete
+          if ('flowId' in response && 'nextStep' in response) {
+            const nextStepResponse = response as any;
+            setCurrentFlow(nextStepResponse);
+
+            if (nextStepResponse.nextStep?.authenticators?.length > 0) {
+              if (
+                nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
+                nextStepResponse.nextStep.authenticators.length > 1
+              ) {
+                setCurrentAuthenticator(null);
+              } else {
+                const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
+                
+                // Check if the next authenticator is also a passkey - if so, auto-trigger it
+                if (isPasskeyAuthenticator(nextAuthenticator)) {
+                  // Recursively handle the passkey authenticator without showing UI
+                  handleAuthenticatorSelection(nextAuthenticator);
+                  return;
+                } else {
+                  setCurrentAuthenticator(nextAuthenticator);
+                  setupFormFields(nextAuthenticator);
+                }
+              }
+            }
+
+            if (nextStepResponse.nextStep?.messages) {
+              setMessages(
+                nextStepResponse.nextStep.messages.map((msg: any) => ({
+                  type: msg.type || 'INFO',
+                  message: msg.message || '',
+                })),
+              );
+            }
+          }
+        } catch (passkeyError) {
+          console.error('Passkey authentication error:', passkeyError);
+          
+          // Provide more context for common errors
+          let errorMessage = passkeyError instanceof Error ? passkeyError.message : t('errors.passkeyAuthenticationFailed');
+          
+          // Add additional context for security errors
+          if (passkeyError instanceof Error && passkeyError.message.includes('security')) {
+            errorMessage += ' This may be due to browser security settings, an insecure connection, or device restrictions.';
+          }
+          
+          setError(errorMessage);
+          return;
+        }
+      } else if (
         authenticator.metadata?.promptType === ApplicationNativeAuthenticationAuthenticatorPromptType.RedirectionPrompt
       ) {
         const payload = {
@@ -648,8 +870,16 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
                 setCurrentAuthenticator(null);
               } else {
                 const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
-                setCurrentAuthenticator(nextAuthenticator);
-                setupFormFields(nextAuthenticator);
+                
+                // Check if the next authenticator is a passkey - if so, auto-trigger it
+                if (isPasskeyAuthenticator(nextAuthenticator)) {
+                  // Recursively handle the passkey authenticator without showing UI
+                  handleAuthenticatorSelection(nextAuthenticator);
+                  return;
+                } else {
+                  setCurrentAuthenticator(nextAuthenticator);
+                  setupFormFields(nextAuthenticator);
+                }
               }
             }
 
@@ -715,8 +945,16 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
                   setCurrentAuthenticator(null);
                 } else {
                   const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
-                  setCurrentAuthenticator(nextAuthenticator);
-                  setupFormFields(nextAuthenticator);
+                  
+                  // Check if the next authenticator is a passkey - if so, auto-trigger it
+                  if (isPasskeyAuthenticator(nextAuthenticator)) {
+                    // Recursively handle the passkey authenticator without showing UI
+                    handleAuthenticatorSelection(nextAuthenticator);
+                    return;
+                  } else {
+                    setCurrentAuthenticator(nextAuthenticator);
+                    setupFormFields(nextAuthenticator);
+                  }
                 }
               }
 
@@ -1015,7 +1253,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
         <Card.Content>
           {error && (
             <Alert variant="error">
-              <Alert.Title>{t('errors.authenticationError')}</Alert.Title>
+              <Alert.Title>{t('errors.title') || 'Error'}</Alert.Title>
               <Alert.Description>{error}</Alert.Description>
             </Alert>
           )}
@@ -1024,6 +1262,36 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
     );
   }
 
+  // If the current authenticator is a passkey, auto-trigger it instead of showing a form
+  if (isPasskeyAuthenticator(currentAuthenticator) && !isLoading) {
+    // Auto-trigger passkey authentication
+    useEffect(() => {
+      handleAuthenticatorSelection(currentAuthenticator);
+    }, [currentAuthenticator]);
+
+    // Show loading state while passkey authentication is in progress
+    return (
+      <Card className={containerClasses}>
+        <Card.Content>
+          <div style={{textAlign: 'center', padding: '2rem'}}>
+            <div style={{marginBottom: '1rem'}}>
+              <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  fill="currentColor"
+                  d="M7 14c1.66 0 3-1.34 3-3S8.66 8 7 8s-3 1.34-3 3s1.34 3 3 3m0-4c.55 0 1 .45 1 1s-.45 1-1 1s-1-.45-1-1s.45-1 1-1m12-3h-8l1.5 1.5L9 12l1.5 1.5L8 16h8c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2m-1 5h-1v-1h1v1m0-2h-1V9h1v1"
+                />
+              </svg>
+            </div>
+            <Typography variant="body1">{t('passkey.authenticating') || 'Authenticating with passkey...'}</Typography>
+            <Typography variant="body2" style={{marginTop: '0.5rem', color: '#666'}}>
+              {t('passkey.instruction') || 'Please use your fingerprint, face, or security key to authenticate.'}
+            </Typography>
+          </div>
+        </Card.Content>
+      </Card>
+    );
+  }
+
   return (
     <Card className={containerClasses}>
       <Card.Header>
diff --git a/packages/react/src/components/presentation/SignIn/options/MultiOptionButton.tsx b/packages/react/src/components/presentation/SignIn/options/MultiOptionButton.tsx
index d9f4019c7..059eb3931 100644
--- a/packages/react/src/components/presentation/SignIn/options/MultiOptionButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/MultiOptionButton.tsx
@@ -97,11 +97,12 @@ const MultiOptionButton: FC<BaseSignInOptionProps> = ({
         );
       case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Passkey:
         return (
-          <svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path
-              fill="currentColor"
-              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m1-13h-2v6h2zm0 8h-2v2h2z"
-            />
+          <svg fill="#000000" width="18" height="18" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+            <g id="SVGRepo_iconCarrier">
+              <path d="M7.7 4.7C9.36 3.07 12.68 2 16.17 2S23 3.06 24.6 4.7A1 1 0 0 0 26 3.3C23.6.86 19.34 0 16.16 0S8.72.87 6.3 3.3a1 1 0 0 0 1.4 1.4zM29.2 12.55C26.38 6.88 22 4 16.17 4s-10.22 2.88-13 8.55a1 1 0 0 0 .44 1.34 1 1 0 0 0 1.35-.45C7.4 8.45 11.08 6 16.15 6s8.77 2.44 11.27 7.45a1 1 0 0 0 .9.55.87.87 0 0 0 .44-.1 1 1 0 0 0 .45-1.35zM19.4 28.08c-4.13-1.77-5.8-4.5-6-6.5a2.87 2.87 0 0 1 1.13-2.75c.85-.57 2.1.24 3.87 1.52s4.13 3 6.17 1.45c1.8-1.35 2.34-3.76 1.45-6.44A10.85 10.85 0 0 0 16.16 8C7.2 8 4 15.75 4 23a1 1 0 0 0 2 0c0-3 .73-13 10.16-13 3.9 0 7 3.1 8 6 .3.87.8 3-.75 4.2-.8.6-2-.2-3.8-1.47s-4.07-2.94-6.14-1.56a4.87 4.87 0 0 0-2 4.6c.24 2.56 2.24 6 7.18 8.15A1 1 0 0 0 19 30a1 1 0 0 0 .4-1.92zM10 19.24a7.06 7.06 0 0 1 5.2-4.65c2.24-.43 4.32.6 6 3a1 1 0 1 0 1.62-1.17c-2.9-4.07-6.27-4.12-8-3.8A9.1 9.1 0 0 0 8 18.77c-1 3.94.43 8.27 4.2 12.87a1 1 0 0 0 .8.37.94.94 0 0 0 .63-.23 1 1 0 0 0 .14-1.4c-3.34-4.1-4.62-7.83-3.77-11.13zM25.3 24.3a3 3 0 0 1-3.06.63c-2.4-.57-4.78-2.7-5.3-4.25a1 1 0 1 0-1.9.64c.8 2.33 3.87 4.88 6.74 5.56a6.84 6.84 0 0 0 1.52.18 4.7 4.7 0 0 0 3.4-1.35 1 1 0 0 0-1.4-1.4z"></path>{' '}
+            </g>
           </svg>
         );
       case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.MagicLink:

From dffb7bc3703290f455d4c89d56e7097b33d7694a Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 16 Jun 2025 22:44:50 +0530
Subject: [PATCH 105/131] chore(react): add vite-plugin-mkcert for HTTPS
 support and update vite.config.ts

---
 .../presentation/SignIn/BaseSignIn.tsx        | 100 +++--
 pnpm-lock.yaml                                | 409 ++++++++++++------
 recipes/vite-react-ts/package.json            |   3 +-
 recipes/vite-react-ts/vite.config.ts          |   6 +-
 4 files changed, 343 insertions(+), 175 deletions(-)

diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index 131a9f507..e604ee435 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -77,12 +77,16 @@ const arrayBufferToBase64url = (buffer: ArrayBuffer): string => {
 const handleWebAuthnAuthentication = async (challengeData: string): Promise<string> => {
   // Check if WebAuthn is supported
   if (!window.navigator.credentials || !window.navigator.credentials.get) {
-    throw new Error('WebAuthn is not supported in this browser. Please use a modern browser or try a different authentication method.');
+    throw new Error(
+      'WebAuthn is not supported in this browser. Please use a modern browser or try a different authentication method.',
+    );
   }
 
   // Check if we're on HTTPS (required for WebAuthn)
   if (window.location.protocol !== 'https:' && window.location.hostname !== 'localhost') {
-    throw new Error('Passkey authentication requires a secure connection (HTTPS). Please ensure you are accessing this site over HTTPS.');
+    throw new Error(
+      'Passkey authentication requires a secure connection (HTTPS). Please ensure you are accessing this site over HTTPS.',
+    );
   }
 
   try {
@@ -90,23 +94,45 @@ const handleWebAuthnAuthentication = async (challengeData: string): Promise<stri
     const decodedChallenge = JSON.parse(atob(challengeData));
     const {publicKeyCredentialRequestOptions} = decodedChallenge;
 
+    // Handle RP ID mismatch by checking domain compatibility
+    const currentDomain = window.location.hostname;
+    const challengeRpId = publicKeyCredentialRequestOptions.rpId;
+    
+    let rpIdToUse = challengeRpId;
+    
+    // Check if the challenge RP ID is compatible with current domain
+    if (challengeRpId && !currentDomain.endsWith(challengeRpId) && challengeRpId !== currentDomain) {
+      console.warn(`RP ID mismatch detected. Challenge RP ID: ${challengeRpId}, Current domain: ${currentDomain}`);
+      // Use current domain as fallback to avoid errors
+      rpIdToUse = currentDomain;
+    }
+
+    const adjustedOptions = {
+      ...publicKeyCredentialRequestOptions,
+      rpId: rpIdToUse,
+      challenge: base64urlToArrayBuffer(publicKeyCredentialRequestOptions.challenge),
+      // Convert user handle if present
+      ...(publicKeyCredentialRequestOptions.userVerification && {
+        userVerification: publicKeyCredentialRequestOptions.userVerification,
+      }),
+      // Convert allowCredentials if present
+      ...(publicKeyCredentialRequestOptions.allowCredentials && {
+        allowCredentials: publicKeyCredentialRequestOptions.allowCredentials.map((cred: any) => ({
+          ...cred,
+          id: base64urlToArrayBuffer(cred.id),
+        })),
+      }),
+    };
+
+    console.log('WebAuthn authentication with options:', {
+      originalRpId: challengeRpId,
+      adjustedRpId: rpIdToUse,
+      currentDomain: currentDomain,
+    });
+
     // Convert challenge from base64url to ArrayBuffer
     const credential = (await navigator.credentials.get({
-      publicKey: {
-        ...publicKeyCredentialRequestOptions,
-        challenge: base64urlToArrayBuffer(publicKeyCredentialRequestOptions.challenge),
-        // Convert user handle if present
-        ...(publicKeyCredentialRequestOptions.userVerification && {
-          userVerification: publicKeyCredentialRequestOptions.userVerification,
-        }),
-        // Convert allowCredentials if present
-        ...(publicKeyCredentialRequestOptions.allowCredentials && {
-          allowCredentials: publicKeyCredentialRequestOptions.allowCredentials.map((cred: any) => ({
-            ...cred,
-            id: base64urlToArrayBuffer(cred.id),
-          })),
-        }),
-      },
+      publicKey: adjustedOptions,
     })) as PublicKeyCredential;
 
     if (!credential) {
@@ -142,15 +168,29 @@ const handleWebAuthnAuthentication = async (challengeData: string): Promise<stri
       if (error.name === 'NotAllowedError') {
         throw new Error('Passkey authentication was cancelled or timed out. Please try again.');
       } else if (error.name === 'SecurityError') {
-        throw new Error('Passkey authentication failed. Please ensure you are using HTTPS and that your browser supports passkeys.');
+        if (error.message.includes('relying party ID') || error.message.includes('RP ID')) {
+          throw new Error(
+            'Domain mismatch error. The passkey was registered for a different domain. Please contact support or try a different authentication method.',
+          );
+        } else {
+          throw new Error(
+            'Passkey authentication failed. Please ensure you are using HTTPS and that your browser supports passkeys.',
+          );
+        }
       } else if (error.name === 'InvalidStateError') {
-        throw new Error('No valid passkey found for this account. Please register a passkey first or use a different authentication method.');
+        throw new Error(
+          'No valid passkey found for this account. Please register a passkey first or use a different authentication method.',
+        );
       } else if (error.name === 'NotSupportedError') {
-        throw new Error('Passkey authentication is not supported on this device or browser. Please use a different authentication method.');
+        throw new Error(
+          'Passkey authentication is not supported on this device or browser. Please use a different authentication method.',
+        );
       } else if (error.name === 'NetworkError') {
         throw new Error('Network error during passkey authentication. Please check your connection and try again.');
       } else if (error.name === 'UnknownError') {
-        throw new Error('An unknown error occurred during passkey authentication. Please try again or use a different authentication method.');
+        throw new Error(
+          'An unknown error occurred during passkey authentication. Please try again or use a different authentication method.',
+        );
       }
     }
 
@@ -751,7 +791,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
                 setCurrentAuthenticator(null);
               } else {
                 const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
-                
+
                 // Check if the next authenticator is also a passkey - if so, auto-trigger it
                 if (isPasskeyAuthenticator(nextAuthenticator)) {
                   // Recursively handle the passkey authenticator without showing UI
@@ -775,15 +815,17 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
           }
         } catch (passkeyError) {
           console.error('Passkey authentication error:', passkeyError);
-          
+
           // Provide more context for common errors
-          let errorMessage = passkeyError instanceof Error ? passkeyError.message : t('errors.passkeyAuthenticationFailed');
-          
+          let errorMessage =
+            passkeyError instanceof Error ? passkeyError.message : t('errors.passkeyAuthenticationFailed');
+
           // Add additional context for security errors
           if (passkeyError instanceof Error && passkeyError.message.includes('security')) {
-            errorMessage += ' This may be due to browser security settings, an insecure connection, or device restrictions.';
+            errorMessage +=
+              ' This may be due to browser security settings, an insecure connection, or device restrictions.';
           }
-          
+
           setError(errorMessage);
           return;
         }
@@ -870,7 +912,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
                 setCurrentAuthenticator(null);
               } else {
                 const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
-                
+
                 // Check if the next authenticator is a passkey - if so, auto-trigger it
                 if (isPasskeyAuthenticator(nextAuthenticator)) {
                   // Recursively handle the passkey authenticator without showing UI
@@ -945,7 +987,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
                   setCurrentAuthenticator(null);
                 } else {
                   const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
-                  
+
                   // Check if the next authenticator is a passkey - if so, auto-trigger it
                   if (isPasskeyAuthenticator(nextAuthenticator)) {
                     // Recursively handle the passkey authenticator without showing UI
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b8b203dce..3f3671a2d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -28,10 +28,10 @@ importers:
         version: 2.29.4
       '@wso2/eslint-plugin':
         specifier: 'catalog:'
-        version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
+        version: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
       '@wso2/prettier-config':
         specifier: 'catalog:'
-        version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@2.8.8)(typescript@5.7.3)
+        version: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@2.8.8)(typescript@5.7.3)
       eslint:
         specifier: 8.57.0
         version: 8.57.0
@@ -49,7 +49,7 @@ importers:
     devDependencies:
       vitepress:
         specifier: ^1.2.2
-        version: 1.6.3(@algolia/client-search@5.25.0)(@types/node@22.15.30)(axios@1.9.0)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.1)(postcss@8.5.3)(sass@1.89.0)(search-insights@2.17.3)(terser@5.39.2)(typescript@5.8.3)
+        version: 1.6.3(@algolia/client-search@5.25.0)(@types/node@24.0.3)(axios@1.9.0)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.1)(postcss@8.5.3)(sass@1.89.0)(search-insights@2.17.3)(terser@5.39.2)(typescript@5.8.3)
 
   packages/browser:
     dependencies:
@@ -104,10 +104,10 @@ importers:
         version: 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
       '@wso2/eslint-plugin':
         specifier: 'catalog:'
-        version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
+        version: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
       '@wso2/prettier-config':
         specifier: 'catalog:'
-        version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@2.8.8)(typescript@5.7.3)
+        version: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@2.8.8)(typescript@5.7.3)
       esbuild:
         specifier: ^0.25.4
         version: 0.25.4
@@ -147,10 +147,10 @@ importers:
         version: 22.15.30
       '@wso2/eslint-plugin':
         specifier: 'catalog:'
-        version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
+        version: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
       '@wso2/prettier-config':
         specifier: 'catalog:'
-        version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@2.8.8)(typescript@5.7.3)
+        version: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@2.8.8)(typescript@5.7.3)
       esbuild:
         specifier: ^0.25.4
         version: 0.25.4
@@ -184,10 +184,10 @@ importers:
         version: 22.15.30
       '@wso2/eslint-plugin':
         specifier: 'catalog:'
-        version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
+        version: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
       '@wso2/prettier-config':
         specifier: 'catalog:'
-        version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@2.8.8)(typescript@5.7.3)
+        version: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@2.8.8)(typescript@5.7.3)
       esbuild:
         specifier: ^0.25.4
         version: 0.25.4
@@ -227,10 +227,10 @@ importers:
         version: 22.15.30
       '@wso2/eslint-plugin':
         specifier: 'catalog:'
-        version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
+        version: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
       '@wso2/prettier-config':
         specifier: 'catalog:'
-        version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@2.8.8)(typescript@5.7.3)
+        version: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@2.8.8)(typescript@5.7.3)
       esbuild:
         specifier: ^0.25.4
         version: 0.25.4
@@ -242,7 +242,7 @@ importers:
         version: 8.57.0
       next:
         specifier: ^15.3.2
-        version: 15.3.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.89.0)
+        version: 15.3.2(@babel/core@7.27.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.89.0)
       prettier:
         specifier: ^2.6.2
         version: 2.8.8
@@ -294,10 +294,10 @@ importers:
         version: 22.15.30
       '@wso2/eslint-plugin':
         specifier: 'catalog:'
-        version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
+        version: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
       '@wso2/prettier-config':
         specifier: 'catalog:'
-        version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@2.8.8)(typescript@5.7.3)
+        version: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@2.8.8)(typescript@5.7.3)
       esbuild:
         specifier: ^0.25.4
         version: 0.25.4
@@ -331,7 +331,7 @@ importers:
     devDependencies:
       '@nuxt/devtools':
         specifier: ^2.4.0
-        version: 2.4.1(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
+        version: 2.4.1(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
       '@nuxt/eslint-config':
         specifier: ^1.3.0
         version: 1.4.1(@vue/compiler-sfc@3.5.14)(eslint@8.57.0)(typescript@5.8.3)
@@ -343,10 +343,10 @@ importers:
         version: 3.17.4
       '@nuxt/test-utils':
         specifier: ^3.17.2
-        version: 3.19.0(@types/node@22.15.30)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
+        version: 3.19.0(@types/node@24.0.3)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
       '@types/node':
         specifier: latest
-        version: 22.15.30
+        version: 24.0.3
       changelogen:
         specifier: ^0.6.1
         version: 0.6.1(magicast@0.3.5)
@@ -358,13 +358,13 @@ importers:
         version: 8.57.0
       nuxt:
         specifier: ^3.16.2
-        version: 3.17.4(@parcel/watcher@2.5.1)(@types/node@22.15.30)(db0@0.3.2)(eslint@8.57.0)(ioredis@5.6.1)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))(yaml@2.8.0)
+        version: 3.17.4(@parcel/watcher@2.5.1)(@types/node@24.0.3)(db0@0.3.2)(eslint@8.57.0)(ioredis@5.6.1)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))(yaml@2.8.0)
       typescript:
         specifier: ~5.8.3
         version: 5.8.3
       vitest:
         specifier: ^3.1.1
-        version: 3.1.3(@types/node@22.15.30)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+        version: 3.1.3(@types/node@24.0.3)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vue-tsc:
         specifier: ^2.2.8
         version: 2.2.10(typescript@5.8.3)
@@ -375,8 +375,8 @@ importers:
         specifier: workspace:^
         version: link:../browser
       '@floating-ui/react':
-        specifier: ^0.26.0
-        version: 0.26.28(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+        specifier: ^0.27.12
+        version: 0.27.12(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@types/react-dom':
         specifier: ^19.1.5
         version: 19.1.5(@types/react@19.1.5)
@@ -407,10 +407,10 @@ importers:
         version: 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
       '@wso2/eslint-plugin':
         specifier: 'catalog:'
-        version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
+        version: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)
       '@wso2/prettier-config':
         specifier: 'catalog:'
-        version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@2.8.8)(typescript@5.7.3)
+        version: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@2.8.8)(typescript@5.7.3)
       esbuild-plugin-preserve-directives:
         specifier: ^0.0.11
         version: 0.0.11(esbuild@0.25.4)
@@ -504,13 +504,13 @@ importers:
         version: 2.4.6
       '@wso2/eslint-plugin':
         specifier: 'catalog:'
-        version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.1.6)
+        version: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.1.6)
       '@wso2/prettier-config':
         specifier: 'catalog:'
-        version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@3.5.3)(typescript@5.1.6)
+        version: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@3.5.3)(typescript@5.1.6)
       '@wso2/stylelint-config':
         specifier: 'catalog:'
-        version: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/stylelint-config?a1fc6eb570653c999828aea9f5027cba06af4391(postcss@8.5.3)(stylelint@15.1.0(typescript@5.1.6))(typescript@5.1.6)
+        version: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?a1fc6eb570653c999828aea9f5027cba06af4391(postcss@8.5.3)(stylelint@15.1.0(typescript@5.1.6))(typescript@5.1.6)
       eslint:
         specifier: 8.57.0
         version: 8.57.0
@@ -555,7 +555,7 @@ importers:
         version: link:../../packages/nextjs
       next:
         specifier: 15.3.2
-        version: 15.3.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.89.0)
+        version: 15.3.2(@babel/core@7.27.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.89.0)
       react:
         specifier: ^19.0.0
         version: 19.1.0
@@ -620,7 +620,7 @@ importers:
     devDependencies:
       '@tailwindcss/vite':
         specifier: ^4.1.8
-        version: 4.1.8(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+        version: 4.1.8(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       '@types/react':
         specifier: ^19.1.2
         version: 19.1.5
@@ -629,7 +629,7 @@ importers:
         version: 19.1.5(@types/react@19.1.5)
       '@vitejs/plugin-react':
         specifier: ^4.4.1
-        version: 4.5.1(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+        version: 4.5.1(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       autoprefixer:
         specifier: ^10.4.16
         version: 10.4.21(postcss@8.5.3)
@@ -662,7 +662,10 @@ importers:
         version: 8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
       vite:
         specifier: ^6.3.5
-        version: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+        version: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-plugin-mkcert:
+        specifier: ^1.17.8
+        version: 1.17.8(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
 
 packages:
 
@@ -1436,11 +1439,11 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
-  '@floating-ui/react@0.26.28':
-    resolution: {integrity: sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==}
+  '@floating-ui/react@0.27.12':
+    resolution: {integrity: sha512-kKlWNrpIQxF1B/a2MZvE0/uyKby4960yjO91W7nVyNKmmfNi62xU9HCjL1M1eWzx/LFj/VPSwJVbwQk9Pq/68A==}
     peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
+      react: '>=17.0.0'
+      react-dom: '>=17.0.0'
 
   '@floating-ui/utils@0.2.9':
     resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
@@ -2620,6 +2623,9 @@ packages:
   '@types/node@22.15.30':
     resolution: {integrity: sha512-6Q7lr06bEHdlfplU6YRbgG1SFBdlsfNC4/lX+SkhiTs0cpJkOElmWls8PxDFv4yY/xKb8Y6SO0OmSX4wgqTZbA==}
 
+  '@types/node@24.0.3':
+    resolution: {integrity: sha512-R4I/kzCYAdRLzfiCabn9hxWfbuHS573x+r0dJMkkzThEa7pbrcDWK+9zu3e7aBOouf+rQAciqPFMnxwr0aWgKg==}
+
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
 
@@ -3299,8 +3305,8 @@ packages:
     resolution: {integrity: sha512-ueFCcIPaMgtuYDS9u0qlUoEvj6GiSsKrwnOLPp9SshqjtcRaR1IEHRjoReq3sXNydsF5i0ZnmuYgXq9dV53t0g==}
     engines: {node: '>=18.0.0'}
 
-  '@wso2/eslint-plugin@https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391':
-    resolution: {tarball: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391}
+  '@wso2/eslint-plugin@https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391':
+    resolution: {tarball: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391}
     version: 0.1.0
     engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0}
     peerDependencies:
@@ -3310,8 +3316,8 @@ packages:
       typescript:
         optional: true
 
-  '@wso2/prettier-config@https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391':
-    resolution: {tarball: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391}
+  '@wso2/prettier-config@https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391':
+    resolution: {tarball: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391}
     version: 0.1.0
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -3321,8 +3327,8 @@ packages:
       typescript:
         optional: true
 
-  '@wso2/stylelint-config@https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/stylelint-config?a1fc6eb570653c999828aea9f5027cba06af4391':
-    resolution: {tarball: https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/stylelint-config?a1fc6eb570653c999828aea9f5027cba06af4391}
+  '@wso2/stylelint-config@https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?a1fc6eb570653c999828aea9f5027cba06af4391':
+    resolution: {tarball: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?a1fc6eb570653c999828aea9f5027cba06af4391}
     version: 0.1.0
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -8321,6 +8327,9 @@ packages:
   undici-types@6.21.0:
     resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
 
+  undici-types@7.8.0:
+    resolution: {integrity: sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==}
+
   unenv@2.0.0-rc.17:
     resolution: {integrity: sha512-B06u0wXkEd+o5gOCMl/ZHl5cfpYbDZKAT+HWTL+Hws6jWu7dCiqBBXXXzMFcFVJb8D4ytAnYmxJA83uwOQRSsg==}
 
@@ -8568,6 +8577,12 @@ packages:
       '@nuxt/kit':
         optional: true
 
+  vite-plugin-mkcert@1.17.8:
+    resolution: {integrity: sha512-S+4tNEyGqdZQ3RLAG54ETeO2qyURHWrVjUWKYikLAbmhh/iJ+36gDEja4OWwFyXNuvyXcZwNt5TZZR9itPeG5Q==}
+    engines: {node: '>=v16.7.0'}
+    peerDependencies:
+      vite: '>=3'
+
   vite-plugin-vue-tracer@0.1.3:
     resolution: {integrity: sha512-+fN6oo0//dwZP9Ax9gRKeUroCqpQ43P57qlWgL0ljCIxAs+Rpqn/L4anIPZPgjDPga5dZH+ZJsshbF0PNJbm3Q==}
     peerDependencies:
@@ -9790,7 +9805,7 @@ snapshots:
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
 
-  '@floating-ui/react@0.26.28(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@floating-ui/react@0.27.12(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@floating-ui/react-dom': 2.1.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@floating-ui/utils': 0.2.9
@@ -10184,12 +10199,12 @@ snapshots:
 
   '@nuxt/devalue@2.0.2': {}
 
-  '@nuxt/devtools-kit@2.4.1(magicast@0.3.5)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
+  '@nuxt/devtools-kit@2.4.1(magicast@0.3.5)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       '@nuxt/kit': 3.17.4(magicast@0.3.5)
       '@nuxt/schema': 3.17.4
       execa: 8.0.1
-      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
     transitivePeerDependencies:
       - magicast
 
@@ -10204,12 +10219,12 @@ snapshots:
       prompts: 2.4.2
       semver: 7.7.2
 
-  '@nuxt/devtools@2.4.1(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
+  '@nuxt/devtools@2.4.1(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
     dependencies:
-      '@nuxt/devtools-kit': 2.4.1(magicast@0.3.5)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      '@nuxt/devtools-kit': 2.4.1(magicast@0.3.5)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       '@nuxt/devtools-wizard': 2.4.1
       '@nuxt/kit': 3.17.4(magicast@0.3.5)
-      '@vue/devtools-core': 7.7.6(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
+      '@vue/devtools-core': 7.7.6(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
       '@vue/devtools-kit': 7.7.6
       birpc: 2.3.0
       consola: 3.4.2
@@ -10234,9 +10249,9 @@ snapshots:
       sirv: 3.0.1
       structured-clone-es: 1.0.0
       tinyglobby: 0.2.13
-      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-plugin-inspect: 11.1.0(@nuxt/kit@3.17.4(magicast@0.3.5))(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
-      vite-plugin-vue-tracer: 0.1.3(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
+      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-plugin-inspect: 11.1.0(@nuxt/kit@3.17.4(magicast@0.3.5))(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      vite-plugin-vue-tracer: 0.1.3(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
       which: 5.0.0
       ws: 8.18.2
     transitivePeerDependencies:
@@ -10357,7 +10372,7 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/test-utils@3.19.0(@types/node@22.15.30)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)':
+  '@nuxt/test-utils@3.19.0(@types/node@24.0.3)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)':
     dependencies:
       '@nuxt/kit': 3.17.4(magicast@0.3.5)
       '@nuxt/schema': 3.17.4
@@ -10382,14 +10397,14 @@ snapshots:
       tinyexec: 1.0.1
       ufo: 1.6.1
       unplugin: 2.3.4
-      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vitest-environment-nuxt: 1.0.1(@types/node@22.15.30)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vitest-environment-nuxt: 1.0.1(@types/node@24.0.3)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
       vue: 3.5.14(typescript@5.8.3)
     optionalDependencies:
       '@vue/test-utils': 2.4.6
       jsdom: 26.1.0
       playwright-core: 1.52.0
-      vitest: 3.1.3(@types/node@22.15.30)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vitest: 3.1.3(@types/node@24.0.3)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -10405,12 +10420,12 @@ snapshots:
       - typescript
       - yaml
 
-  '@nuxt/vite-builder@3.17.4(@types/node@22.15.30)(eslint@8.57.0)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3))(yaml@2.8.0)':
+  '@nuxt/vite-builder@3.17.4(@types/node@24.0.3)(eslint@8.57.0)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3))(yaml@2.8.0)':
     dependencies:
       '@nuxt/kit': 3.17.4(magicast@0.3.5)
       '@rollup/plugin-replace': 6.0.2(rollup@4.40.2)
-      '@vitejs/plugin-vue': 5.2.4(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
-      '@vitejs/plugin-vue-jsx': 4.2.0(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
+      '@vitejs/plugin-vue': 5.2.4(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
+      '@vitejs/plugin-vue-jsx': 4.2.0(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
       autoprefixer: 10.4.21(postcss@8.5.3)
       consola: 3.4.2
       cssnano: 7.0.7(postcss@8.5.3)
@@ -10436,9 +10451,9 @@ snapshots:
       ufo: 1.6.1
       unenv: 2.0.0-rc.17
       unplugin: 2.3.4
-      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-node: 3.1.4(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-plugin-checker: 0.9.3(eslint@8.57.0)(optionator@0.9.4)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))
+      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-node: 3.1.4(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-plugin-checker: 0.9.3(eslint@8.57.0)(optionator@0.9.4)(typescript@5.8.3)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))
       vue: 3.5.14(typescript@5.8.3)
       vue-bundle-renderer: 2.1.1
     transitivePeerDependencies:
@@ -10962,12 +10977,12 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.1.8
       '@tailwindcss/oxide-win32-x64-msvc': 4.1.8
 
-  '@tailwindcss/vite@4.1.8(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
+  '@tailwindcss/vite@4.1.8(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       '@tailwindcss/node': 4.1.8
       '@tailwindcss/oxide': 4.1.8
       tailwindcss: 4.1.8
-      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
   '@testing-library/dom@10.4.0':
     dependencies:
@@ -11054,6 +11069,10 @@ snapshots:
     dependencies:
       undici-types: 6.21.0
 
+  '@types/node@24.0.3':
+    dependencies:
+      undici-types: 7.8.0
+
   '@types/normalize-package-data@2.4.4': {}
 
   '@types/parse-json@4.0.2': {}
@@ -11082,7 +11101,7 @@ snapshots:
 
   '@types/yauzl@2.10.3':
     dependencies:
-      '@types/node': 22.15.30
+      '@types/node': 20.17.50
     optional: true
 
   '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6)':
@@ -11685,7 +11704,7 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vitejs/plugin-react@4.5.1(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
+  '@vitejs/plugin-react@4.5.1(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       '@babel/core': 7.27.1
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.27.1)
@@ -11693,24 +11712,24 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.9
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@4.2.0(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
+  '@vitejs/plugin-vue-jsx@4.2.0(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
     dependencies:
       '@babel/core': 7.27.1
       '@babel/plugin-transform-typescript': 7.27.1(@babel/core@7.27.1)
       '@rolldown/pluginutils': 1.0.0-beta.9
       '@vue/babel-plugin-jsx': 1.4.0(@babel/core@7.27.1)
-      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vue: 3.5.14(typescript@5.8.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.2.4(vite@5.4.19(@types/node@22.15.30)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2))(vue@3.5.14(typescript@5.8.3))':
+  '@vitejs/plugin-vue@5.2.4(vite@5.4.19(@types/node@24.0.3)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2))(vue@3.5.14(typescript@5.8.3))':
     dependencies:
-      vite: 5.4.19(@types/node@22.15.30)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)
+      vite: 5.4.19(@types/node@24.0.3)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)
       vue: 3.5.14(typescript@5.8.3)
 
   '@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@20.17.50)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.1.6))':
@@ -11718,9 +11737,9 @@ snapshots:
       vite: 6.3.5(@types/node@20.17.50)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vue: 3.5.14(typescript@5.1.6)
 
-  '@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
+  '@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
     dependencies:
-      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vue: 3.5.14(typescript@5.8.3)
 
   '@vitest/browser@3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)':
@@ -11742,6 +11761,26 @@ snapshots:
       - utf-8-validate
       - vite
 
+  '@vitest/browser@3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)':
+    dependencies:
+      '@testing-library/dom': 10.4.0
+      '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.0)
+      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      '@vitest/utils': 3.1.3
+      magic-string: 0.30.17
+      sirv: 3.0.1
+      tinyrainbow: 2.0.0
+      vitest: 3.1.3(@types/node@24.0.3)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      ws: 8.18.2
+    optionalDependencies:
+      playwright: 1.52.0
+    transitivePeerDependencies:
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+    optional: true
+
   '@vitest/coverage-v8@3.0.8(vitest@3.1.3(@types/node@20.17.50)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -11783,6 +11822,14 @@ snapshots:
     optionalDependencies:
       vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
+  '@vitest/mocker@3.1.3(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
+    dependencies:
+      '@vitest/spy': 3.1.3
+      estree-walker: 3.0.3
+      magic-string: 0.30.17
+    optionalDependencies:
+      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+
   '@vitest/pretty-format@3.1.3':
     dependencies:
       tinyrainbow: 2.0.0
@@ -11908,14 +11955,14 @@ snapshots:
     dependencies:
       '@vue/devtools-kit': 7.7.6
 
-  '@vue/devtools-core@7.7.6(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
+  '@vue/devtools-core@7.7.6(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
     dependencies:
       '@vue/devtools-kit': 7.7.6
       '@vue/devtools-shared': 7.7.6
       mitt: 3.0.1
       nanoid: 5.1.5
       pathe: 2.0.3
-      vite-hot-client: 2.0.4(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      vite-hot-client: 2.0.4(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       vue: 3.5.14(typescript@5.8.3)
     transitivePeerDependencies:
       - vite
@@ -12031,7 +12078,7 @@ snapshots:
       '@vueuse/shared': 12.8.2(typescript@5.8.3)
       vue: 3.5.14(typescript@5.8.3)
     optionalDependencies:
-      axios: 1.9.0
+      axios: 1.9.0(debug@4.4.1)
       focus-trap: 7.6.4
       fuse.js: 7.1.0
       jwt-decode: 4.0.0
@@ -12074,7 +12121,7 @@ snapshots:
       '@whatwg-node/promise-helpers': 1.3.2
       tslib: 2.8.1
 
-  '@wso2/eslint-plugin@https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.1.6)':
+  '@wso2/eslint-plugin@https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.1.6)':
     dependencies:
       '@babel/core': 7.27.1
       '@babel/eslint-parser': 7.27.1(@babel/core@7.27.1)(eslint@8.57.0)
@@ -12082,14 +12129,14 @@ snapshots:
       '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6)
       '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.1.6)
       eslint: 8.57.0
-      eslint-config-airbnb: 19.0.4(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.37.5(eslint@8.57.0))(eslint@8.57.0)
-      eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0))(eslint@8.57.0)
-      eslint-config-airbnb-typescript: 17.1.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6))(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-config-airbnb: 19.0.4(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.37.5(eslint@8.57.0))(eslint@8.57.0)
+      eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-config-airbnb-typescript: 17.1.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0))(eslint@8.57.0)
       eslint-config-prettier: 8.10.0(eslint@8.57.0)
       eslint-plugin-eslint-plugin: 5.5.1(eslint@8.57.0)
       eslint-plugin-header: 3.1.1(eslint@8.57.0)
       eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)
-      eslint-plugin-jest: 27.9.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6)
+      eslint-plugin-jest: 27.9.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)(typescript@5.1.6)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.0)
       eslint-plugin-node: 11.1.0(eslint@8.57.0)
       eslint-plugin-prettier: 4.2.1(eslint-config-prettier@8.10.0(eslint@8.57.0))(eslint@8.57.0)(prettier@2.8.8)
@@ -12108,7 +12155,7 @@ snapshots:
       - jest
       - supports-color
 
-  '@wso2/eslint-plugin@https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)':
+  '@wso2/eslint-plugin@https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.7.3)':
     dependencies:
       '@babel/core': 7.27.1
       '@babel/eslint-parser': 7.27.1(@babel/core@7.27.1)(eslint@8.57.0)
@@ -12142,19 +12189,19 @@ snapshots:
       - jest
       - supports-color
 
-  '@wso2/prettier-config@https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@2.8.8)(typescript@5.7.3)':
+  '@wso2/prettier-config@https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@2.8.8)(typescript@5.7.3)':
     dependencies:
       prettier: 2.8.8
     optionalDependencies:
       typescript: 5.7.3
 
-  '@wso2/prettier-config@https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@3.5.3)(typescript@5.1.6)':
+  '@wso2/prettier-config@https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?a1fc6eb570653c999828aea9f5027cba06af4391(prettier@3.5.3)(typescript@5.1.6)':
     dependencies:
       prettier: 3.5.3
     optionalDependencies:
       typescript: 5.1.6
 
-  '@wso2/stylelint-config@https://gitpkg.vercel.app/brionmario/wso2-ui-configs/packages/stylelint-config?a1fc6eb570653c999828aea9f5027cba06af4391(postcss@8.5.3)(stylelint@15.1.0(typescript@5.1.6))(typescript@5.1.6)':
+  '@wso2/stylelint-config@https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?a1fc6eb570653c999828aea9f5027cba06af4391(postcss@8.5.3)(stylelint@15.1.0(typescript@5.1.6))(typescript@5.1.6)':
     dependencies:
       postcss-scss: 4.0.9(postcss@8.5.3)
       stylelint: 15.1.0(typescript@5.1.6)
@@ -12408,13 +12455,13 @@ snapshots:
 
   axios@0.26.1:
     dependencies:
-      follow-redirects: 1.15.9
+      follow-redirects: 1.15.9(debug@4.4.1)
     transitivePeerDependencies:
       - debug
 
-  axios@1.9.0:
+  axios@1.9.0(debug@4.4.1):
     dependencies:
-      follow-redirects: 1.15.9
+      follow-redirects: 1.15.9(debug@4.4.1)
       form-data: 4.0.2
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
@@ -13581,15 +13628,6 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
-  eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0))(eslint@8.57.0):
-    dependencies:
-      confusing-browser-globals: 1.0.11
-      eslint: 8.57.0
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)
-      object.assign: 4.1.7
-      object.entries: 1.1.9
-      semver: 6.3.1
-
   eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
       confusing-browser-globals: 1.0.11
@@ -13599,13 +13637,13 @@ snapshots:
       object.entries: 1.1.9
       semver: 6.3.1
 
-  eslint-config-airbnb-typescript@17.1.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6))(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0))(eslint@8.57.0):
+  eslint-config-airbnb-typescript@17.1.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6)
+      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)(typescript@5.7.3)
       '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.1.6)
       eslint: 8.57.0
-      eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)
+      eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)
 
   eslint-config-airbnb-typescript@17.1.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
@@ -13615,17 +13653,6 @@ snapshots:
       eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0))(eslint@8.57.0)
       eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)
 
-  eslint-config-airbnb@19.0.4(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.37.5(eslint@8.57.0))(eslint@8.57.0):
-    dependencies:
-      eslint: 8.57.0
-      eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)
-      eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.0)
-      eslint-plugin-react: 7.37.5(eslint@8.57.0)
-      eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0)
-      object.assign: 4.1.7
-      object.entries: 1.1.9
-
   eslint-config-airbnb@19.0.4(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.37.5(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
       eslint: 8.57.0
@@ -13651,7 +13678,7 @@ snapshots:
       eslint: 9.28.0(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import-x@4.12.2(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-plugin-import@2.31.0)(eslint@9.28.0(jiti@2.4.2))
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.28.0(jiti@2.4.2))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.28.0(jiti@2.4.2))
       eslint-plugin-jsx-a11y: 6.10.2(eslint@9.28.0(jiti@2.4.2))
       eslint-plugin-react: 7.37.5(eslint@9.28.0(jiti@2.4.2))
       eslint-plugin-react-hooks: 5.2.0(eslint@9.28.0(jiti@2.4.2))
@@ -13689,7 +13716,7 @@ snapshots:
       tinyglobby: 0.2.13
       unrs-resolver: 1.7.2
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.28.0(jiti@2.4.2))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.28.0(jiti@2.4.2))
       eslint-plugin-import-x: 4.12.2(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
     transitivePeerDependencies:
       - supports-color
@@ -13840,7 +13867,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.28.0(jiti@2.4.2)):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.28.0(jiti@2.4.2)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -13869,12 +13896,12 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-jest@27.9.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6):
+  eslint-plugin-jest@27.9.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)(typescript@5.1.6):
     dependencies:
       '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.1.6)
       eslint: 8.57.0
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6)
+      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)(typescript@5.7.3)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -14487,7 +14514,9 @@ snapshots:
     dependencies:
       tabbable: 6.2.0
 
-  follow-redirects@1.15.9: {}
+  follow-redirects@1.15.9(debug@4.4.1):
+    optionalDependencies:
+      debug: 4.4.1
 
   for-each@0.3.5:
     dependencies:
@@ -15780,7 +15809,7 @@ snapshots:
       p-wait-for: 5.0.2
       qs: 6.14.0
 
-  next@15.3.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.89.0):
+  next@15.3.2(@babel/core@7.27.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.89.0):
     dependencies:
       '@next/env': 15.3.2
       '@swc/counter': 0.1.3
@@ -15790,7 +15819,7 @@ snapshots:
       postcss: 8.4.31
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      styled-jsx: 5.1.6(react@19.1.0)
+      styled-jsx: 5.1.6(@babel/core@7.27.1)(react@19.1.0)
     optionalDependencies:
       '@next/swc-darwin-arm64': 15.3.2
       '@next/swc-darwin-x64': 15.3.2
@@ -15991,15 +16020,15 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  nuxt@3.17.4(@parcel/watcher@2.5.1)(@types/node@22.15.30)(db0@0.3.2)(eslint@8.57.0)(ioredis@5.6.1)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))(yaml@2.8.0):
+  nuxt@3.17.4(@parcel/watcher@2.5.1)(@types/node@24.0.3)(db0@0.3.2)(eslint@8.57.0)(ioredis@5.6.1)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))(yaml@2.8.0):
     dependencies:
       '@nuxt/cli': 3.25.1(magicast@0.3.5)
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 2.4.1(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
+      '@nuxt/devtools': 2.4.1(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
       '@nuxt/kit': 3.17.4(magicast@0.3.5)
       '@nuxt/schema': 3.17.4
       '@nuxt/telemetry': 2.6.6(magicast@0.3.5)
-      '@nuxt/vite-builder': 3.17.4(@types/node@22.15.30)(eslint@8.57.0)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3))(yaml@2.8.0)
+      '@nuxt/vite-builder': 3.17.4(@types/node@24.0.3)(eslint@8.57.0)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3))(yaml@2.8.0)
       '@unhead/vue': 2.0.10(vue@3.5.14(typescript@5.8.3))
       '@vue/shared': 3.5.14
       c12: 3.0.4(magicast@0.3.5)
@@ -16057,7 +16086,7 @@ snapshots:
       vue-router: 4.5.1(vue@3.5.14(typescript@5.8.3))
     optionalDependencies:
       '@parcel/watcher': 2.5.1
-      '@types/node': 22.15.30
+      '@types/node': 24.0.3
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -16120,7 +16149,7 @@ snapshots:
       '@yarnpkg/lockfile': 1.1.0
       '@yarnpkg/parsers': 3.0.2
       '@zkochan/js-yaml': 0.0.7
-      axios: 1.9.0
+      axios: 1.9.0(debug@4.4.1)
       chalk: 4.1.2
       cli-cursor: 3.1.0
       cli-spinners: 2.6.1
@@ -17729,10 +17758,12 @@ snapshots:
 
   style-search@0.1.0: {}
 
-  styled-jsx@5.1.6(react@19.1.0):
+  styled-jsx@5.1.6(@babel/core@7.27.1)(react@19.1.0):
     dependencies:
       client-only: 0.0.1
       react: 19.1.0
+    optionalDependencies:
+      '@babel/core': 7.27.1
 
   stylehacks@5.1.1(postcss@8.5.3):
     dependencies:
@@ -18177,6 +18208,8 @@ snapshots:
 
   undici-types@6.21.0: {}
 
+  undici-types@7.8.0: {}
+
   unenv@2.0.0-rc.17:
     dependencies:
       defu: 6.1.4
@@ -18379,15 +18412,15 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite-dev-rpc@1.0.7(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
+  vite-dev-rpc@1.0.7(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
     dependencies:
       birpc: 2.3.0
-      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-hot-client: 2.0.4(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-hot-client: 2.0.4(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
 
-  vite-hot-client@2.0.4(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
+  vite-hot-client@2.0.4(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
     dependencies:
-      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
   vite-node@3.1.3(@types/node@20.17.50)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
     dependencies:
@@ -18431,13 +18464,34 @@ snapshots:
       - tsx
       - yaml
 
-  vite-node@3.1.4(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
+  vite-node@3.1.3(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.1
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+    transitivePeerDependencies:
+      - '@types/node'
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  vite-node@3.1.4(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.1
+      es-module-lexer: 1.7.0
+      pathe: 2.0.3
+      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -18452,7 +18506,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-checker@0.9.3(eslint@8.57.0)(optionator@0.9.4)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3)):
+  vite-plugin-checker@0.9.3(eslint@8.57.0)(optionator@0.9.4)(typescript@5.8.3)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3)):
     dependencies:
       '@babel/code-frame': 7.27.1
       chokidar: 4.0.3
@@ -18462,7 +18516,7 @@ snapshots:
       strip-ansi: 7.1.0
       tiny-invariant: 1.3.3
       tinyglobby: 0.2.13
-      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vscode-uri: 3.1.0
     optionalDependencies:
       eslint: 8.57.0
@@ -18470,7 +18524,7 @@ snapshots:
       typescript: 5.8.3
       vue-tsc: 2.2.10(typescript@5.8.3)
 
-  vite-plugin-inspect@11.1.0(@nuxt/kit@3.17.4(magicast@0.3.5))(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
+  vite-plugin-inspect@11.1.0(@nuxt/kit@3.17.4(magicast@0.3.5))(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
     dependencies:
       ansis: 3.17.0
       debug: 4.4.1
@@ -18480,30 +18534,39 @@ snapshots:
       perfect-debounce: 1.0.0
       sirv: 3.0.1
       unplugin-utils: 0.2.4
-      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-dev-rpc: 1.0.7(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-dev-rpc: 1.0.7(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
     optionalDependencies:
       '@nuxt/kit': 3.17.4(magicast@0.3.5)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vue-tracer@0.1.3(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3)):
+  vite-plugin-mkcert@1.17.8(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
+    dependencies:
+      axios: 1.9.0(debug@4.4.1)
+      debug: 4.4.1
+      picocolors: 1.1.1
+      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-plugin-vue-tracer@0.1.3(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3)):
     dependencies:
       estree-walker: 3.0.3
       exsolve: 1.0.5
       magic-string: 0.30.17
       pathe: 2.0.3
       source-map-js: 1.2.1
-      vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vue: 3.5.14(typescript@5.8.3)
 
-  vite@5.4.19(@types/node@22.15.30)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2):
+  vite@5.4.19(@types/node@24.0.3)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.3
       rollup: 4.40.2
     optionalDependencies:
-      '@types/node': 22.15.30
+      '@types/node': 24.0.3
       fsevents: 2.3.3
       lightningcss: 1.30.1
       sass: 1.89.0
@@ -18543,7 +18606,24 @@ snapshots:
       terser: 5.39.2
       yaml: 2.8.0
 
-  vitepress@1.6.3(@algolia/client-search@5.25.0)(@types/node@22.15.30)(axios@1.9.0)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.1)(postcss@8.5.3)(sass@1.89.0)(search-insights@2.17.3)(terser@5.39.2)(typescript@5.8.3):
+  vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
+    dependencies:
+      esbuild: 0.25.4
+      fdir: 6.4.4(picomatch@4.0.2)
+      picomatch: 4.0.2
+      postcss: 8.5.3
+      rollup: 4.40.2
+      tinyglobby: 0.2.13
+    optionalDependencies:
+      '@types/node': 24.0.3
+      fsevents: 2.3.3
+      jiti: 2.4.2
+      lightningcss: 1.30.1
+      sass: 1.89.0
+      terser: 5.39.2
+      yaml: 2.8.0
+
+  vitepress@1.6.3(@algolia/client-search@5.25.0)(@types/node@24.0.3)(axios@1.9.0)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.1)(postcss@8.5.3)(sass@1.89.0)(search-insights@2.17.3)(terser@5.39.2)(typescript@5.8.3):
     dependencies:
       '@docsearch/css': 3.8.2
       '@docsearch/js': 3.8.2(@algolia/client-search@5.25.0)(search-insights@2.17.3)
@@ -18552,7 +18632,7 @@ snapshots:
       '@shikijs/transformers': 2.5.0
       '@shikijs/types': 2.5.0
       '@types/markdown-it': 14.1.2
-      '@vitejs/plugin-vue': 5.2.4(vite@5.4.19(@types/node@22.15.30)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2))(vue@3.5.14(typescript@5.8.3))
+      '@vitejs/plugin-vue': 5.2.4(vite@5.4.19(@types/node@24.0.3)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2))(vue@3.5.14(typescript@5.8.3))
       '@vue/devtools-api': 7.7.6
       '@vue/shared': 3.5.14
       '@vueuse/core': 12.8.2(typescript@5.8.3)
@@ -18561,7 +18641,7 @@ snapshots:
       mark.js: 8.11.1
       minisearch: 7.1.2
       shiki: 2.5.0
-      vite: 5.4.19(@types/node@22.15.30)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)
+      vite: 5.4.19(@types/node@24.0.3)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)
       vue: 3.5.14(typescript@5.8.3)
     optionalDependencies:
       postcss: 8.5.3
@@ -18602,9 +18682,9 @@ snapshots:
       '@types/react': 19.1.5
       '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
-  vitest-environment-nuxt@1.0.1(@types/node@22.15.30)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0):
+  vitest-environment-nuxt@1.0.1(@types/node@24.0.3)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0):
     dependencies:
-      '@nuxt/test-utils': 3.19.0(@types/node@22.15.30)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
+      '@nuxt/test-utils': 3.19.0(@types/node@24.0.3)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
     transitivePeerDependencies:
       - '@cucumber/cucumber'
       - '@jest/globals'
@@ -18711,6 +18791,47 @@ snapshots:
       - tsx
       - yaml
 
+  vitest@3.1.3(@types/node@24.0.3)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
+    dependencies:
+      '@vitest/expect': 3.1.3
+      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      '@vitest/pretty-format': 3.1.3
+      '@vitest/runner': 3.1.3
+      '@vitest/snapshot': 3.1.3
+      '@vitest/spy': 3.1.3
+      '@vitest/utils': 3.1.3
+      chai: 5.2.0
+      debug: 4.4.1
+      expect-type: 1.2.1
+      magic-string: 0.30.17
+      pathe: 2.0.3
+      std-env: 3.9.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.13
+      tinypool: 1.0.2
+      tinyrainbow: 2.0.0
+      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      vite-node: 3.1.3(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 24.0.3
+      '@vitest/browser': 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
+      jsdom: 26.1.0
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
   vscode-uri@3.1.0: {}
 
   vue-bundle-renderer@2.1.1:
diff --git a/recipes/vite-react-ts/package.json b/recipes/vite-react-ts/package.json
index 0cda07072..e3afdbf66 100644
--- a/recipes/vite-react-ts/package.json
+++ b/recipes/vite-react-ts/package.json
@@ -36,6 +36,7 @@
     "tw-animate-css": "^1.3.4",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.30.1",
-    "vite": "^6.3.5"
+    "vite": "^6.3.5",
+    "vite-plugin-mkcert": "^1.17.8"
   }
 }
\ No newline at end of file
diff --git a/recipes/vite-react-ts/vite.config.ts b/recipes/vite-react-ts/vite.config.ts
index 8075aa8ec..7fb657bc2 100644
--- a/recipes/vite-react-ts/vite.config.ts
+++ b/recipes/vite-react-ts/vite.config.ts
@@ -2,13 +2,17 @@ import path from 'path';
 import {defineConfig} from 'vite';
 import react from '@vitejs/plugin-react';
 import tailwindcss from '@tailwindcss/vite';
+import mkcert from 'vite-plugin-mkcert';
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [tailwindcss(), react()],
+  plugins: [tailwindcss(), react(), mkcert()],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),
     },
   },
+  server: {
+    https: true,
+  },
 });

From f44b88e07e54916d8f640553a010837ddf1182cd Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 16 Jun 2025 22:51:43 +0530
Subject: [PATCH 106/131] chore(react): simplify SignIn component by removing
 unused props and callbacks

---
 .../presentation/SignIn/BaseSignIn.tsx        | 30 ++++-------
 .../components/presentation/SignIn/SignIn.tsx | 52 +------------------
 2 files changed, 10 insertions(+), 72 deletions(-)

diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index e604ee435..ea9f4d262 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -97,9 +97,9 @@ const handleWebAuthnAuthentication = async (challengeData: string): Promise<stri
     // Handle RP ID mismatch by checking domain compatibility
     const currentDomain = window.location.hostname;
     const challengeRpId = publicKeyCredentialRequestOptions.rpId;
-    
+
     let rpIdToUse = challengeRpId;
-    
+
     // Check if the challenge RP ID is compatible with current domain
     if (challengeRpId && !currentDomain.endsWith(challengeRpId) && challengeRpId !== currentDomain) {
       console.warn(`RP ID mismatch detected. Challenge RP ID: ${challengeRpId}, Current domain: ${currentDomain}`);
@@ -283,21 +283,11 @@ export interface BaseSignInProps {
    */
   messageClassName?: string;
 
-  /**
-   * Whether to show loading state.
-   */
-  showLoading?: boolean;
-
   /**
    * Custom loading text.
    */
   loadingText?: string;
 
-  /**
-   * Apply default styling.
-   */
-  styled?: boolean;
-
   /**
    * Size variant for the component.
    */
@@ -365,9 +355,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
   buttonClassName = '',
   errorClassName = '',
   messageClassName = '',
-  showLoading = true,
   loadingText,
-  styled = true,
   size = 'medium',
   variant = 'default',
 }) => {
@@ -1058,7 +1046,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
   // Generate CSS classes
   const containerClasses = clsx(
-    styled && [
+    [
       withVendorCSSClassPrefix('signin'),
       withVendorCSSClassPrefix(`signin--${size}`),
       withVendorCSSClassPrefix(`signin--${variant}`),
@@ -1067,7 +1055,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
   );
 
   const inputClasses = clsx(
-    styled && [
+    [
       withVendorCSSClassPrefix('signin__input'),
       size === 'small' && withVendorCSSClassPrefix('signin__input--small'),
       size === 'large' && withVendorCSSClassPrefix('signin__input--large'),
@@ -1076,7 +1064,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
   );
 
   const buttonClasses = clsx(
-    styled && [
+    [
       withVendorCSSClassPrefix('signin__button'),
       size === 'small' && withVendorCSSClassPrefix('signin__button--small'),
       size === 'large' && withVendorCSSClassPrefix('signin__button--large'),
@@ -1086,9 +1074,9 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
     buttonClassName,
   );
 
-  const errorClasses = clsx(styled && [withVendorCSSClassPrefix('signin__error')], errorClassName);
+  const errorClasses = clsx([withVendorCSSClassPrefix('signin__error')], errorClassName);
 
-  const messageClasses = clsx(styled && [withVendorCSSClassPrefix('signin__messages')], messageClassName);
+  const messageClasses = clsx([withVendorCSSClassPrefix('signin__messages')], messageClassName);
 
   // Initialize the flow on component mount
   useEffect(() => {
@@ -1150,13 +1138,13 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
   }, [isInitialized]);
 
   if (!isInitialized && isLoading) {
-    return showLoading ? (
+    return (
       <Card className={containerClasses}>
         <Card.Content>
           <Typography variant="body1">{loadingText ?? t('messages.loading')}</Typography>
         </Card.Content>
       </Card>
-    ) : null;
+    );
   }
 
   if (hasMultipleOptions() && !currentAuthenticator) {
diff --git a/packages/react/src/components/presentation/SignIn/SignIn.tsx b/packages/react/src/components/presentation/SignIn/SignIn.tsx
index a42eaeb81..2f426ea82 100644
--- a/packages/react/src/components/presentation/SignIn/SignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/SignIn.tsx
@@ -29,36 +29,11 @@ import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
  * Props for the SignIn component.
  */
 export interface SignInProps {
-  /**
-   * Callback function called when authentication is successful.
-   * @param authData - The authentication data returned upon successful completion.
-   */
-  onSuccess?: (authData: Record<string, any>) => void;
-
-  /**
-   * Callback function called when authentication fails.
-   * @param error - The error that occurred during authentication.
-   */
-  onError?: (error: Error) => void;
-
-  /**
-   * Callback function called when authentication flow status changes.
-   * @param response - The current authentication response.
-   */
-  onFlowChange?: (
-    response: ApplicationNativeAuthenticationInitiateResponse | ApplicationNativeAuthenticationHandleResponse,
-  ) => void;
-
   /**
    * Additional CSS class names for customization.
    */
   className?: string;
 
-  /**
-   * Apply default styling.
-   */
-  styled?: boolean;
-
   /**
    * Size variant for the component.
    */
@@ -69,11 +44,6 @@ export interface SignInProps {
    */
   variant?: 'default' | 'outlined' | 'filled';
 
-  /**
-   * Whether to show loading state.
-   */
-  showLoading?: boolean;
-
   /**
    * Custom loading text.
    */
@@ -105,17 +75,7 @@ export interface SignInProps {
  * };
  * ```
  */
-const SignIn: FC<SignInProps> = ({
-  onSuccess,
-  onError,
-  onFlowChange,
-  className,
-  styled = true,
-  size = 'medium',
-  variant = 'default',
-  showLoading = true,
-  loadingText = 'Loading...',
-}) => {
+const SignIn: FC<SignInProps> = ({className, size = 'medium', variant = 'default'}) => {
   const {signIn, baseUrl, afterSignInUrl} = useAsgardeo();
 
   /**
@@ -150,10 +110,6 @@ const SignIn: FC<SignInProps> = ({
    * Handle successful authentication and redirect with query params.
    */
   const handleSuccess = (authData: Record<string, any>) => {
-    // Call the user-provided onSuccess callback first
-    onSuccess?.(authData);
-
-    // Handle redirection for non-federated flows
     if (authData && afterSignInUrl) {
       const url = new URL(afterSignInUrl, window.location.origin);
 
@@ -163,7 +119,6 @@ const SignIn: FC<SignInProps> = ({
         }
       });
 
-      // Redirect to the URL with query parameters
       window.location.href = url.toString();
     }
   };
@@ -174,14 +129,9 @@ const SignIn: FC<SignInProps> = ({
       onInitialize={handleInitialize}
       onSubmit={handleOnSubmit}
       onSuccess={handleSuccess}
-      onError={onError}
-      onFlowChange={onFlowChange}
       className={className}
-      styled={styled}
       size={size}
       variant={variant}
-      showLoading={showLoading}
-      loadingText={loadingText}
     />
   );
 };

From 72eabda35466b670c74b1998a1d09e41ca86c252 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 00:25:44 +0530
Subject: [PATCH 107/131] chore: temp comment out worker ref

---
 packages/browser/src/__legacy__/client.ts     | 22 +++++++++----------
 .../src/__legacy__/models/web-worker.ts       |  5 +++--
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
index 289a15ac3..11190d60a 100755
--- a/packages/browser/src/__legacy__/client.ts
+++ b/packages/browser/src/__legacy__/client.ts
@@ -27,7 +27,7 @@ import {
   OIDCEndpoints,
   User,
 } from '@asgardeo/javascript';
-import WorkerFile from '../worker';
+// import WorkerFile from '../worker';
 import {MainThreadClient, WebWorkerClient} from './clients';
 import {Hooks, REFRESH_ACCESS_TOKEN_ERR0R} from './constants';
 import {AuthenticationHelper, SPAHelper} from './helpers';
@@ -53,7 +53,6 @@ import {SPAUtils} from './utils';
 const DefaultConfig: Partial<AuthClientConfig<Config>> = {
   autoLogoutOnTokenRefreshError: true,
   checkSessionInterval: 3,
-  clientHost: origin,
   enableOIDCSessionManagement: false,
   periodicTokenRefresh: false,
   sessionRefreshInterval: 300,
@@ -71,7 +70,8 @@ export class AsgardeoSPAClient {
   protected _client: WebWorkerClientInterface | MainThreadClientInterface | undefined;
   protected _storage: BrowserStorage | undefined;
   protected _authHelper: typeof AuthenticationHelper = AuthenticationHelper;
-  protected _worker: new () => Worker = WorkerFile;
+  // protected _worker: new () => Worker = WorkerFile;
+  protected _worker = null;
   protected _initialized: boolean = false;
   protected _startedInitialize: boolean = false;
   protected _onSignInCallback: (response: User) => void = () => null;
@@ -94,13 +94,13 @@ export class AsgardeoSPAClient {
     }
   }
 
-  public instantiateWorker(worker: new () => Worker) {
-    if (worker) {
-      this._worker = worker;
-    } else {
-      this._worker = WorkerFile;
-    }
-  }
+  // public instantiateWorker(worker: new () => Worker) {
+  //   if (worker) {
+  //     this._worker = worker;
+  //   } else {
+  //     this._worker = WorkerFile;
+  //   }
+  // }
 
   /**
    * This method specifies if the `AsgardeoSPAClient` has been initialized or not.
@@ -239,7 +239,7 @@ export class AsgardeoSPAClient {
     this._startedInitialize = true;
 
     authHelper && this.instantiateAuthHelper(authHelper);
-    workerFile && this.instantiateWorker(workerFile);
+    // workerFile && this.instantiateWorker(workerFile);
 
     const _config = await this._client?.getConfigData();
 
diff --git a/packages/browser/src/__legacy__/models/web-worker.ts b/packages/browser/src/__legacy__/models/web-worker.ts
index 0df884874..7abb33b61 100755
--- a/packages/browser/src/__legacy__/models/web-worker.ts
+++ b/packages/browser/src/__legacy__/models/web-worker.ts
@@ -32,8 +32,9 @@ interface WebWorkerEvent<T> extends MessageEvent {
   data: Message<T>;
 }
 
-export class WebWorkerClass<T> extends Worker {
-  public override onmessage: (this: Worker, event: WebWorkerEvent<T>) => any = () => null;
+export class WebWorkerClass<T> {
+  onmessage: (this: Worker, event: WebWorkerEvent<T>) => any = () => null;
+  postMessage: (message: Message<T>) => void = () => null;
 }
 
 export interface WebWorkerCoreInterface {

From 10872381d853605b397bebd10045ca4f98c00c85 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 00:26:14 +0530
Subject: [PATCH 108/131] feat(react): implement Asgardeo authentication
 context and provider

---
 .../{ => Asgardeo}/AsgardeoContext.ts         |  0
 .../contexts/Asgardeo/AsgardeoProvider.tsx    | 70 +++++++++++++++++++
 .../Asgardeo}/useAsgardeo.ts                  |  2 +-
 .../src/client/providers/AsgardeoProvider.tsx | 35 ----------
 .../nextjs/src/server/AsgardeoProvider.tsx    |  2 +-
 5 files changed, 72 insertions(+), 37 deletions(-)
 rename packages/nextjs/src/client/contexts/{ => Asgardeo}/AsgardeoContext.ts (100%)
 create mode 100644 packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
 rename packages/nextjs/src/client/{hooks => contexts/Asgardeo}/useAsgardeo.ts (92%)
 delete mode 100644 packages/nextjs/src/client/providers/AsgardeoProvider.tsx

diff --git a/packages/nextjs/src/client/contexts/AsgardeoContext.ts b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoContext.ts
similarity index 100%
rename from packages/nextjs/src/client/contexts/AsgardeoContext.ts
rename to packages/nextjs/src/client/contexts/Asgardeo/AsgardeoContext.ts
diff --git a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
new file mode 100644
index 000000000..d463955b1
--- /dev/null
+++ b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+'use client';
+
+import {FC, PropsWithChildren, useEffect, useMemo, useState} from 'react';
+import {I18nProvider, FlowProvider, UserProvider, ThemeProvider} from '@asgardeo/react';
+import AsgardeoContext from './AsgardeoContext';
+
+/**
+ * Props interface of {@link AsgardeoClientProvider}
+ */
+export type AsgardeoClientProviderProps = {
+  /**
+   * Preferences for theming, i18n, and other UI customizations.
+   */
+  preferences?: any;
+};
+
+const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>> = ({
+  children,
+  preferences,
+}: PropsWithChildren<AsgardeoClientProviderProps>) => {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    if (!preferences?.theme?.mode || preferences.theme.mode === 'system') {
+      setIsDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches);
+    } else {
+      setIsDarkMode(preferences.theme.mode === 'dark');
+    }
+  }, [preferences?.theme?.mode]);
+
+  return (
+    <AsgardeoContext.Provider value={{}}>
+      <I18nProvider preferences={preferences?.i18n}>
+        <ThemeProvider theme={preferences?.theme?.overrides} defaultColorScheme={isDarkMode ? 'dark' : 'light'}>
+          <FlowProvider>
+            <UserProvider
+              profile={{
+                schemas: [],
+                profile: {},
+                flattenedProfile: {},
+              }}
+            >
+              {children}
+            </UserProvider>
+          </FlowProvider>
+        </ThemeProvider>
+      </I18nProvider>
+    </AsgardeoContext.Provider>
+  );
+};
+
+export default AsgardeoClientProvider;
diff --git a/packages/nextjs/src/client/hooks/useAsgardeo.ts b/packages/nextjs/src/client/contexts/Asgardeo/useAsgardeo.ts
similarity index 92%
rename from packages/nextjs/src/client/hooks/useAsgardeo.ts
rename to packages/nextjs/src/client/contexts/Asgardeo/useAsgardeo.ts
index b21b1e6a6..4a4937ec4 100644
--- a/packages/nextjs/src/client/hooks/useAsgardeo.ts
+++ b/packages/nextjs/src/client/contexts/Asgardeo/useAsgardeo.ts
@@ -19,7 +19,7 @@
 'use client';
 
 import {useContext} from 'react';
-import AsgardeoContext, {AsgardeoContextProps} from '../contexts/AsgardeoContext';
+import AsgardeoContext, {AsgardeoContextProps} from './AsgardeoContext';
 
 const useAsgardeo = (): AsgardeoContextProps => {
   const context: AsgardeoContextProps | null = useContext(AsgardeoContext);
diff --git a/packages/nextjs/src/client/providers/AsgardeoProvider.tsx b/packages/nextjs/src/client/providers/AsgardeoProvider.tsx
deleted file mode 100644
index f904bbf44..000000000
--- a/packages/nextjs/src/client/providers/AsgardeoProvider.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-'use client';
-
-import {FC, PropsWithChildren} from 'react';
-import AsgardeoContext from '../contexts/AsgardeoContext';
-
-/**
- * Props interface of {@link AsgardeoClientProvider}
- */
-export type AsgardeoClientProviderProps = {};
-
-const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>> = ({
-  children,
-}: PropsWithChildren<AsgardeoClientProviderProps>) => (
-  <AsgardeoContext.Provider value={{}}>{children}</AsgardeoContext.Provider>
-);
-
-export default AsgardeoClientProvider;
diff --git a/packages/nextjs/src/server/AsgardeoProvider.tsx b/packages/nextjs/src/server/AsgardeoProvider.tsx
index 8ffc15074..358d2b98f 100644
--- a/packages/nextjs/src/server/AsgardeoProvider.tsx
+++ b/packages/nextjs/src/server/AsgardeoProvider.tsx
@@ -17,7 +17,7 @@
  */
 
 import {FC, PropsWithChildren, ReactElement} from 'react';
-import AsgardeoClientProvider, {AsgardeoClientProviderProps} from '../client/providers/AsgardeoProvider';
+import AsgardeoClientProvider, {AsgardeoClientProviderProps} from '../client/contexts/Asgardeo/AsgardeoProvider';
 
 /**
  * Props interface of {@link AsgardeoServerProvider}

From 851139a3c823e729048b61e78514e6201bdb81a7 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 00:26:38 +0530
Subject: [PATCH 109/131] feat(react): integrate AsgardeoProvider in layout and
 enhance middleware with scopes

---
 packages/nextjs/src/AsgardeoNextClient.ts     | 14 ++++++-------
 packages/nextjs/src/index.ts                  |  3 ---
 .../app/layout.tsx                            | 21 ++++++++++---------
 .../middleware.ts                             |  1 +
 4 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/nextjs/src/AsgardeoNextClient.ts b/packages/nextjs/src/AsgardeoNextClient.ts
index 3a753d292..8ed65de81 100644
--- a/packages/nextjs/src/AsgardeoNextClient.ts
+++ b/packages/nextjs/src/AsgardeoNextClient.ts
@@ -22,7 +22,7 @@ import {
   SignInOptions,
   SignOutOptions,
   User,
-  // removeTrailingSlash,
+  UserProfile,
 } from '@asgardeo/node';
 import {NextRequest, NextResponse} from 'next/server';
 import {AsgardeoNextConfig} from './models/config';
@@ -49,18 +49,14 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
   }
 
   override initialize(config: T): Promise<boolean> {
-    const {baseUrl, clientId, clientSecret, afterSignInUrl} = decorateConfigWithNextEnv({
-      afterSignInUrl: config.afterSignInUrl,
-      baseUrl: config.baseUrl,
-      clientId: config.clientId,
-      clientSecret: config.clientSecret,
-    });
+    const {baseUrl, clientId, clientSecret, afterSignInUrl, ...rest} = decorateConfigWithNextEnv(config);
 
     return this.asgardeo.initialize({
       baseUrl,
       clientId: clientId,
       clientSecret,
       afterSignInUrl: afterSignInUrl,
+      ...rest,
     } as any);
   }
 
@@ -68,6 +64,10 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
     throw new Error('Method not implemented.');
   }
 
+  override getUserProfile(): Promise<UserProfile> {
+    throw new Error('Method not implemented.');
+  }
+
   override isLoading(): boolean {
     return false;
   }
diff --git a/packages/nextjs/src/index.ts b/packages/nextjs/src/index.ts
index a31906498..a8601a719 100644
--- a/packages/nextjs/src/index.ts
+++ b/packages/nextjs/src/index.ts
@@ -33,7 +33,4 @@ export type {SignInButtonProps} from './client/components/actions/SignInButton';
 export {default as SignOutButton} from './client/components/actions/SignOutButton';
 export type {SignOutButtonProps} from './client/components/actions/SignOutButton';
 
-export {default as AsgardeoContext} from './client/contexts/AsgardeoContext';
-export type {AsgardeoContextProps} from './client/contexts/AsgardeoContext';
-
 export {default as AsgardeoNext} from './AsgardeoNextClient';
diff --git a/recipes/create-next-app-ts-app-router/app/layout.tsx b/recipes/create-next-app-ts-app-router/app/layout.tsx
index 42fc323e4..7786670cd 100644
--- a/recipes/create-next-app-ts-app-router/app/layout.tsx
+++ b/recipes/create-next-app-ts-app-router/app/layout.tsx
@@ -1,20 +1,21 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import type {Metadata} from 'next';
+import {Geist, Geist_Mono} from 'next/font/google';
+import './globals.css';
+import {AsgardeoProvider} from '@asgardeo/nextjs';
 
 const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
 });
 
 const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'Create Next App',
+  description: 'Generated by create next app',
 };
 
 export default function RootLayout({
@@ -25,7 +26,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        {children}
+        <AsgardeoProvider>{children}</AsgardeoProvider>
       </body>
     </html>
   );
diff --git a/recipes/create-next-app-ts-app-router/middleware.ts b/recipes/create-next-app-ts-app-router/middleware.ts
index ade3bfbc8..3baabc0ad 100644
--- a/recipes/create-next-app-ts-app-router/middleware.ts
+++ b/recipes/create-next-app-ts-app-router/middleware.ts
@@ -8,6 +8,7 @@ asgardeo.initialize({
   clientId: process.env.NEXT_PUBLIC_ASGARDEO_CLIENT_ID,
   clientSecret: process.env.NEXT_PUBLIC_ASGARDEO_CLIENT_SECRET,
   afterSignInUrl: 'http://localhost:3000',
+  scopes: 'openid profile email',
 });
 
 export async function middleware(request: NextRequest) {

From d669acf12aed4b879c99b28a3008727bf7f99e06 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 00:41:59 +0530
Subject: [PATCH 110/131] feat(react): add BaseUser and User components for
 user management

---
 .../components/presentation/User/BaseUser.tsx | 80 +++++++++++++++++++
 .../src/components/presentation/User/User.tsx | 78 ++++++++++++++++++
 packages/react/src/index.ts                   |  9 ++-
 3 files changed, 163 insertions(+), 4 deletions(-)
 create mode 100644 packages/react/src/components/presentation/User/BaseUser.tsx
 create mode 100644 packages/react/src/components/presentation/User/User.tsx

diff --git a/packages/react/src/components/presentation/User/BaseUser.tsx b/packages/react/src/components/presentation/User/BaseUser.tsx
new file mode 100644
index 000000000..e9f87c802
--- /dev/null
+++ b/packages/react/src/components/presentation/User/BaseUser.tsx
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import type {User} from '@asgardeo/browser';
+import {FC, ReactElement, ReactNode} from 'react';
+
+/**
+ * Props for the BaseUser component.
+ */
+export interface BaseUserProps {
+  /**
+   * The user object to display. If not provided, the component will render the fallback.
+   */
+  user: User | null;
+
+  /**
+   * Render prop that takes the user object and returns a ReactNode.
+   * @param user - The authenticated user object from Asgardeo.
+   * @returns A ReactNode to render.
+   */
+  children: (user: User | null) => ReactNode;
+
+  /**
+   * Optional element to render when no user is provided.
+   */
+  fallback?: ReactNode;
+}
+
+/**
+ * Base User component that provides the core functionality for displaying user information.
+ * This component takes a user object as a prop and uses render props to expose it.
+ *
+ * @remarks This is the base component that can be used in any context where you have
+ * a user object available. For React applications, use the User component which
+ * automatically retrieves the user from Asgardeo context.
+ *
+ * @example
+ * ```tsx
+ * import { BaseUser } from '@asgardeo/auth-react';
+ *
+ * const MyComponent = ({ user }) => {
+ *   return (
+ *     <BaseUser user={user} fallback={<p>No user data</p>}>
+ *       {(user) => (
+ *         <div>
+ *           <h1>Welcome, {user.displayName}!</h1>
+ *           <p>Email: {user.email}</p>
+ *         </div>
+ *       )}
+ *     </BaseUser>
+ *   );
+ * }
+ * ```
+ */
+const BaseUser: FC<BaseUserProps> = ({user, children, fallback = null}): ReactElement => {
+  if (!user) {
+    return <>{fallback}</>;
+  }
+
+  return <>{children(user)}</>;
+};
+
+BaseUser.displayName = 'BaseUser';
+
+export default BaseUser;
diff --git a/packages/react/src/components/presentation/User/User.tsx b/packages/react/src/components/presentation/User/User.tsx
new file mode 100644
index 000000000..ed0bb09fc
--- /dev/null
+++ b/packages/react/src/components/presentation/User/User.tsx
@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import type {User} from '@asgardeo/browser';
+import {FC, ReactElement, ReactNode} from 'react';
+import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
+import BaseUser, {BaseUserProps} from './BaseUser';
+
+/**
+ * Props for the User component.
+ * Extends BaseUserProps but makes the user prop optional since it will be obtained from useAsgardeo
+ */
+export interface UserProps extends Omit<BaseUserProps, 'user'> {
+  /**
+   * Render prop that takes the user object and returns a ReactNode.
+   * @param user - The authenticated user object from Asgardeo.
+   * @returns A ReactNode to render.
+   */
+  children: (user: User | null) => ReactNode;
+
+  /**
+   * Optional element to render when no user is signed in.
+   */
+  fallback?: ReactNode;
+}
+
+/**
+ * A component that uses render props to expose the authenticated user object.
+ * This component automatically retrieves the user from Asgardeo context.
+ *
+ * @remarks This component is only supported in browser based React applications (CSR).
+ *
+ * @example
+ * ```tsx
+ * import { User } from '@asgardeo/auth-react';
+ *
+ * const App = () => {
+ *   return (
+ *     <User fallback={<p>Please sign in</p>}>
+ *       {(user) => (
+ *         <div>
+ *           <h1>Welcome, {user.displayName}!</h1>
+ *           <p>Email: {user.email}</p>
+ *         </div>
+ *       )}
+ *     </User>
+ *   );
+ * }
+ * ```
+ */
+const User: FC<UserProps> = ({children, fallback = null}): ReactElement => {
+  const {user} = useAsgardeo();
+
+  return (
+    <BaseUser user={user} fallback={fallback}>
+      {children}
+    </BaseUser>
+  );
+};
+
+User.displayName = 'User';
+
+export default User;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 0aa556948..30560ac5e 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -116,8 +116,11 @@ export {default as SocialButton} from './components/presentation/SignIn/options/
 export {default as MultiOptionButton} from './components/presentation/SignIn/options/MultiOptionButton';
 export * from './components/presentation/SignIn/options/SignInOptionFactory';
 
-export {default as User} from './components/presentation/User';
-export * from './components/presentation/User';
+export {default as BaseUser} from './components/presentation/User/BaseUser';
+export * from './components/presentation/User/BaseUser';
+
+export {default as User} from './components/presentation/User/User';
+export * from './components/presentation/User/User';
 
 export {default as BaseUserProfile} from './components/presentation/UserProfile/BaseUserProfile';
 export * from './components/presentation/UserProfile/BaseUserProfile';
@@ -189,5 +192,3 @@ export * from './components/factories/FieldFactory';
 export type {FlowStep, FlowMessage, FlowContextValue} from './contexts/Flow/FlowContext';
 
 export type {FlowProviderProps} from './contexts/Flow/FlowProvider';
-
-export * from '@asgardeo/browser';

From 199bd44c451c53e0503c19047a268147af550dea Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 00:45:10 +0530
Subject: [PATCH 111/131] feat(next): add SignInButton, SignOutButton,
 SignUpButton components and SignedIn, SignedOut control components

---
 .../{ => SignInButton}/SignInButton.tsx       |  2 +-
 .../{ => SignOutButton}/SignOutButton.tsx     |  2 +-
 .../{ => SignUpButton}/SignUpButton.tsx       |  2 +-
 .../control/{ => SignedIn}/SignedIn.tsx       |  2 +-
 .../control/{ => SignedOut}/SignedOut.tsx     |  2 +-
 packages/nextjs/src/index.ts                  | 16 ++--
 .../src/components/presentation/User.tsx      | 73 -------------------
 7 files changed, 13 insertions(+), 86 deletions(-)
 rename packages/nextjs/src/client/components/actions/{ => SignInButton}/SignInButton.tsx (95%)
 rename packages/nextjs/src/client/components/actions/{ => SignOutButton}/SignOutButton.tsx (95%)
 rename packages/nextjs/src/client/components/actions/{ => SignUpButton}/SignUpButton.tsx (95%)
 rename packages/nextjs/src/client/components/control/{ => SignedIn}/SignedIn.tsx (96%)
 rename packages/nextjs/src/client/components/control/{ => SignedOut}/SignedOut.tsx (96%)
 delete mode 100644 packages/react/src/components/presentation/User.tsx

diff --git a/packages/nextjs/src/client/components/actions/SignInButton.tsx b/packages/nextjs/src/client/components/actions/SignInButton/SignInButton.tsx
similarity index 95%
rename from packages/nextjs/src/client/components/actions/SignInButton.tsx
rename to packages/nextjs/src/client/components/actions/SignInButton/SignInButton.tsx
index 8dbec9340..262ad09dd 100644
--- a/packages/nextjs/src/client/components/actions/SignInButton.tsx
+++ b/packages/nextjs/src/client/components/actions/SignInButton/SignInButton.tsx
@@ -19,7 +19,7 @@
 'use client';
 
 import {FC, forwardRef, HTMLAttributes, PropsWithChildren, ReactElement, Ref} from 'react';
-import InternalAuthAPIRoutesConfig from '../../../configs/InternalAuthAPIRoutesConfig';
+import InternalAuthAPIRoutesConfig from '../../../../configs/InternalAuthAPIRoutesConfig';
 import {BaseSignInButton} from '@asgardeo/react';
 
 /**
diff --git a/packages/nextjs/src/client/components/actions/SignOutButton.tsx b/packages/nextjs/src/client/components/actions/SignOutButton/SignOutButton.tsx
similarity index 95%
rename from packages/nextjs/src/client/components/actions/SignOutButton.tsx
rename to packages/nextjs/src/client/components/actions/SignOutButton/SignOutButton.tsx
index e234971bb..4ac4a59f3 100644
--- a/packages/nextjs/src/client/components/actions/SignOutButton.tsx
+++ b/packages/nextjs/src/client/components/actions/SignOutButton/SignOutButton.tsx
@@ -19,7 +19,7 @@
 'use client';
 
 import {FC, forwardRef, HTMLAttributes, PropsWithChildren, ReactElement, Ref} from 'react';
-import InternalAuthAPIRoutesConfig from '../../../configs/InternalAuthAPIRoutesConfig';
+import InternalAuthAPIRoutesConfig from '../../../../configs/InternalAuthAPIRoutesConfig';
 import {BaseSignOutButton} from '@asgardeo/react';
 
 /**
diff --git a/packages/nextjs/src/client/components/actions/SignUpButton.tsx b/packages/nextjs/src/client/components/actions/SignUpButton/SignUpButton.tsx
similarity index 95%
rename from packages/nextjs/src/client/components/actions/SignUpButton.tsx
rename to packages/nextjs/src/client/components/actions/SignUpButton/SignUpButton.tsx
index d14d26a9d..821e952ba 100644
--- a/packages/nextjs/src/client/components/actions/SignUpButton.tsx
+++ b/packages/nextjs/src/client/components/actions/SignUpButton/SignUpButton.tsx
@@ -19,7 +19,7 @@
 'use client';
 
 import {FC, forwardRef, HTMLAttributes, PropsWithChildren, ReactElement, Ref} from 'react';
-import InternalAuthAPIRoutesConfig from '../../../configs/InternalAuthAPIRoutesConfig';
+import InternalAuthAPIRoutesConfig from '../../../../configs/InternalAuthAPIRoutesConfig';
 import {BaseSignUpButton} from '@asgardeo/react';
 
 /**
diff --git a/packages/nextjs/src/client/components/control/SignedIn.tsx b/packages/nextjs/src/client/components/control/SignedIn/SignedIn.tsx
similarity index 96%
rename from packages/nextjs/src/client/components/control/SignedIn.tsx
rename to packages/nextjs/src/client/components/control/SignedIn/SignedIn.tsx
index 1c3db7870..e1bd3f4de 100644
--- a/packages/nextjs/src/client/components/control/SignedIn.tsx
+++ b/packages/nextjs/src/client/components/control/SignedIn/SignedIn.tsx
@@ -19,7 +19,7 @@
 'use client';
 
 import {FC, PropsWithChildren, ReactNode, useEffect, useState} from 'react';
-import isSignedIn from '../../../server/actions/isSignedIn';
+import isSignedIn from '../../../../server/actions/isSignedIn';
 
 /**
  * Props interface of {@link SignedIn}
diff --git a/packages/nextjs/src/client/components/control/SignedOut.tsx b/packages/nextjs/src/client/components/control/SignedOut/SignedOut.tsx
similarity index 96%
rename from packages/nextjs/src/client/components/control/SignedOut.tsx
rename to packages/nextjs/src/client/components/control/SignedOut/SignedOut.tsx
index b83b75926..2c8ac7269 100644
--- a/packages/nextjs/src/client/components/control/SignedOut.tsx
+++ b/packages/nextjs/src/client/components/control/SignedOut/SignedOut.tsx
@@ -19,7 +19,7 @@
 'use client';
 
 import {FC, PropsWithChildren, ReactNode, useEffect, useState} from 'react';
-import isSignedIn from '../../../server/actions/isSignedIn';
+import isSignedIn from '../../../../server/actions/isSignedIn';
 
 /**
  * Props interface of {@link SignedOut}
diff --git a/packages/nextjs/src/index.ts b/packages/nextjs/src/index.ts
index a8601a719..69e51b350 100644
--- a/packages/nextjs/src/index.ts
+++ b/packages/nextjs/src/index.ts
@@ -21,16 +21,16 @@ export * from './server/AsgardeoProvider';
 
 export {default as isSignedIn} from './server/actions/isSignedIn';
 
-export {default as SignedIn} from './client/components/control/SignedIn';
-export * from './client/components/control/SignedIn';
+export {default as SignedIn} from './client/components/control/SignedIn/SignedIn';
+export * from './client/components/control/SignedIn/SignedIn';
 
-export {default as SignedOut} from './client/components/control/SignedOut';
-export * from './client/components/control/SignedOut';
+export {default as SignedOut} from './client/components/control/SignedOut/SignedOut';
+export * from './client/components/control/SignedOut/SignedOut';
 
-export {default as SignInButton} from './client/components/actions/SignInButton';
-export type {SignInButtonProps} from './client/components/actions/SignInButton';
+export {default as SignInButton} from './client/components/actions/SignInButton/SignInButton';
+export type {SignInButtonProps} from './client/components/actions/SignInButton/SignInButton';
 
-export {default as SignOutButton} from './client/components/actions/SignOutButton';
-export type {SignOutButtonProps} from './client/components/actions/SignOutButton';
+export {default as SignOutButton} from './client/components/actions/SignOutButton/SignOutButton';
+export type {SignOutButtonProps} from './client/components/actions/SignOutButton/SignOutButton';
 
 export {default as AsgardeoNext} from './AsgardeoNextClient';
diff --git a/packages/react/src/components/presentation/User.tsx b/packages/react/src/components/presentation/User.tsx
deleted file mode 100644
index c1b6ff735..000000000
--- a/packages/react/src/components/presentation/User.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import {User as AsgardeoUser} from '@asgardeo/browser';
-import {FC, ReactElement, ReactNode} from 'react';
-import useAsgardeo from '../../contexts/Asgardeo/useAsgardeo';
-
-/**
- * Props for the User component.
- */
-export interface UserProps {
-  /**
-   * Render prop that takes the user object and returns a ReactNode.
-   * @param user - The authenticated user object from Asgardeo.
-   * @returns A ReactNode to render.
-   */
-  children: (user: AsgardeoUser | null) => ReactNode;
-
-  /**
-   * Optional element to render when no user is signed in.
-   */
-  fallback?: ReactNode;
-}
-
-/**
- * A component that uses render props to expose the authenticated user object.
- *
- * @example
- * ```tsx
- * import { User } from '@asgardeo/auth-react';
- *
- * const App = () => {
- *   return (
- *     <User fallback={<p>Please sign in</p>}>
- *       {(user) => (
- *         <div>
- *           <h1>Welcome, {user.displayName}!</h1>
- *           <p>Email: {user.email}</p>
- *         </div>
- *       )}
- *     </User>
- *   );
- * }
- * ```
- */
-const User: FC<UserProps> = ({children, fallback = null}): ReactElement => {
-  const {user} = useAsgardeo();
-
-  if (!user) {
-    return <>{fallback}</>;
-  }
-
-  return <>{children(user)}</>;
-};
-
-User.displayName = 'User';
-
-export default User;

From 635db03e73067f925c87c205d8c39e1e931ce6ab Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 00:46:55 +0530
Subject: [PATCH 112/131] chore(recipes): update recipe name

---
 recipes/{vite-react-ts => teamspace-react}/.env.local.example   | 0
 recipes/{vite-react-ts => teamspace-react}/.gitignore           | 0
 recipes/{vite-react-ts => teamspace-react}/README.md            | 0
 recipes/{vite-react-ts => teamspace-react}/components.json      | 0
 recipes/{vite-react-ts => teamspace-react}/eslint.config.js     | 0
 recipes/{vite-react-ts => teamspace-react}/index.html           | 0
 recipes/{vite-react-ts => teamspace-react}/package.json         | 2 +-
 recipes/{vite-react-ts => teamspace-react}/public/vite.svg      | 0
 recipes/{vite-react-ts => teamspace-react}/src/App.tsx          | 0
 recipes/{vite-react-ts => teamspace-react}/src/assets/react.svg | 0
 .../src/components/Header.tsx                                   | 0
 .../src/components/header/AuthenticatedActions.tsx              | 0
 .../src/components/header/AuthenticatedMobileMenu.tsx           | 0
 .../src/components/header/AuthenticatedNavigation.tsx           | 0
 .../src/components/header/Logo.tsx                              | 0
 .../src/components/header/OrganizationSwitcher.tsx              | 0
 .../src/components/header/PublicActions.tsx                     | 0
 .../src/components/header/PublicNavigation.tsx                  | 0
 .../src/components/header/UserDropdown.tsx                      | 0
 .../src/components/ui/alert.tsx                                 | 0
 .../src/components/ui/button.tsx                                | 0
 .../src/components/ui/card.tsx                                  | 0
 .../src/components/ui/input.tsx                                 | 0
 .../src/components/ui/label.tsx                                 | 0
 recipes/{vite-react-ts => teamspace-react}/src/index.css        | 0
 .../src/layouts/AuthLayout.tsx                                  | 0
 .../src/layouts/AuthenticatedLayout.tsx                         | 0
 .../src/layouts/DashboardLayout.tsx                             | 0
 .../src/layouts/LandingLayout.tsx                               | 0
 recipes/{vite-react-ts => teamspace-react}/src/lib/utils.ts     | 0
 recipes/{vite-react-ts => teamspace-react}/src/main.tsx         | 2 +-
 .../src/pages/CreateOrganization.tsx                            | 0
 .../{vite-react-ts => teamspace-react}/src/pages/Dashboard.tsx  | 0
 .../src/pages/LandingPage.tsx                                   | 0
 .../src/pages/Organizations.tsx                                 | 0
 .../{vite-react-ts => teamspace-react}/src/pages/Profile.tsx    | 0
 recipes/{vite-react-ts => teamspace-react}/src/pages/SignIn.tsx | 0
 recipes/{vite-react-ts => teamspace-react}/src/vite-env.d.ts    | 0
 recipes/{vite-react-ts => teamspace-react}/tailwind.config.js   | 0
 recipes/{vite-react-ts => teamspace-react}/tsconfig.app.json    | 0
 recipes/{vite-react-ts => teamspace-react}/tsconfig.json        | 0
 recipes/{vite-react-ts => teamspace-react}/tsconfig.node.json   | 0
 recipes/{vite-react-ts => teamspace-react}/vite.config.ts       | 0
 43 files changed, 2 insertions(+), 2 deletions(-)
 rename recipes/{vite-react-ts => teamspace-react}/.env.local.example (100%)
 rename recipes/{vite-react-ts => teamspace-react}/.gitignore (100%)
 rename recipes/{vite-react-ts => teamspace-react}/README.md (100%)
 rename recipes/{vite-react-ts => teamspace-react}/components.json (100%)
 rename recipes/{vite-react-ts => teamspace-react}/eslint.config.js (100%)
 rename recipes/{vite-react-ts => teamspace-react}/index.html (100%)
 rename recipes/{vite-react-ts => teamspace-react}/package.json (96%)
 rename recipes/{vite-react-ts => teamspace-react}/public/vite.svg (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/App.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/assets/react.svg (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/components/Header.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/components/header/AuthenticatedActions.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/components/header/AuthenticatedMobileMenu.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/components/header/AuthenticatedNavigation.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/components/header/Logo.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/components/header/OrganizationSwitcher.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/components/header/PublicActions.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/components/header/PublicNavigation.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/components/header/UserDropdown.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/components/ui/alert.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/components/ui/button.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/components/ui/card.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/components/ui/input.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/components/ui/label.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/index.css (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/layouts/AuthLayout.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/layouts/AuthenticatedLayout.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/layouts/DashboardLayout.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/layouts/LandingLayout.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/lib/utils.ts (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/main.tsx (96%)
 rename recipes/{vite-react-ts => teamspace-react}/src/pages/CreateOrganization.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/pages/Dashboard.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/pages/LandingPage.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/pages/Organizations.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/pages/Profile.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/pages/SignIn.tsx (100%)
 rename recipes/{vite-react-ts => teamspace-react}/src/vite-env.d.ts (100%)
 rename recipes/{vite-react-ts => teamspace-react}/tailwind.config.js (100%)
 rename recipes/{vite-react-ts => teamspace-react}/tsconfig.app.json (100%)
 rename recipes/{vite-react-ts => teamspace-react}/tsconfig.json (100%)
 rename recipes/{vite-react-ts => teamspace-react}/tsconfig.node.json (100%)
 rename recipes/{vite-react-ts => teamspace-react}/vite.config.ts (100%)

diff --git a/recipes/vite-react-ts/.env.local.example b/recipes/teamspace-react/.env.local.example
similarity index 100%
rename from recipes/vite-react-ts/.env.local.example
rename to recipes/teamspace-react/.env.local.example
diff --git a/recipes/vite-react-ts/.gitignore b/recipes/teamspace-react/.gitignore
similarity index 100%
rename from recipes/vite-react-ts/.gitignore
rename to recipes/teamspace-react/.gitignore
diff --git a/recipes/vite-react-ts/README.md b/recipes/teamspace-react/README.md
similarity index 100%
rename from recipes/vite-react-ts/README.md
rename to recipes/teamspace-react/README.md
diff --git a/recipes/vite-react-ts/components.json b/recipes/teamspace-react/components.json
similarity index 100%
rename from recipes/vite-react-ts/components.json
rename to recipes/teamspace-react/components.json
diff --git a/recipes/vite-react-ts/eslint.config.js b/recipes/teamspace-react/eslint.config.js
similarity index 100%
rename from recipes/vite-react-ts/eslint.config.js
rename to recipes/teamspace-react/eslint.config.js
diff --git a/recipes/vite-react-ts/index.html b/recipes/teamspace-react/index.html
similarity index 100%
rename from recipes/vite-react-ts/index.html
rename to recipes/teamspace-react/index.html
diff --git a/recipes/vite-react-ts/package.json b/recipes/teamspace-react/package.json
similarity index 96%
rename from recipes/vite-react-ts/package.json
rename to recipes/teamspace-react/package.json
index e3afdbf66..1a2d9db06 100644
--- a/recipes/vite-react-ts/package.json
+++ b/recipes/teamspace-react/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "@asgardep/vite-react-ts",
+  "name": "@asgardeo/teamspace-react",
   "version": "0.0.0",
   "type": "module",
   "scripts": {
diff --git a/recipes/vite-react-ts/public/vite.svg b/recipes/teamspace-react/public/vite.svg
similarity index 100%
rename from recipes/vite-react-ts/public/vite.svg
rename to recipes/teamspace-react/public/vite.svg
diff --git a/recipes/vite-react-ts/src/App.tsx b/recipes/teamspace-react/src/App.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/App.tsx
rename to recipes/teamspace-react/src/App.tsx
diff --git a/recipes/vite-react-ts/src/assets/react.svg b/recipes/teamspace-react/src/assets/react.svg
similarity index 100%
rename from recipes/vite-react-ts/src/assets/react.svg
rename to recipes/teamspace-react/src/assets/react.svg
diff --git a/recipes/vite-react-ts/src/components/Header.tsx b/recipes/teamspace-react/src/components/Header.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/components/Header.tsx
rename to recipes/teamspace-react/src/components/Header.tsx
diff --git a/recipes/vite-react-ts/src/components/header/AuthenticatedActions.tsx b/recipes/teamspace-react/src/components/header/AuthenticatedActions.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/components/header/AuthenticatedActions.tsx
rename to recipes/teamspace-react/src/components/header/AuthenticatedActions.tsx
diff --git a/recipes/vite-react-ts/src/components/header/AuthenticatedMobileMenu.tsx b/recipes/teamspace-react/src/components/header/AuthenticatedMobileMenu.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/components/header/AuthenticatedMobileMenu.tsx
rename to recipes/teamspace-react/src/components/header/AuthenticatedMobileMenu.tsx
diff --git a/recipes/vite-react-ts/src/components/header/AuthenticatedNavigation.tsx b/recipes/teamspace-react/src/components/header/AuthenticatedNavigation.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/components/header/AuthenticatedNavigation.tsx
rename to recipes/teamspace-react/src/components/header/AuthenticatedNavigation.tsx
diff --git a/recipes/vite-react-ts/src/components/header/Logo.tsx b/recipes/teamspace-react/src/components/header/Logo.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/components/header/Logo.tsx
rename to recipes/teamspace-react/src/components/header/Logo.tsx
diff --git a/recipes/vite-react-ts/src/components/header/OrganizationSwitcher.tsx b/recipes/teamspace-react/src/components/header/OrganizationSwitcher.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/components/header/OrganizationSwitcher.tsx
rename to recipes/teamspace-react/src/components/header/OrganizationSwitcher.tsx
diff --git a/recipes/vite-react-ts/src/components/header/PublicActions.tsx b/recipes/teamspace-react/src/components/header/PublicActions.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/components/header/PublicActions.tsx
rename to recipes/teamspace-react/src/components/header/PublicActions.tsx
diff --git a/recipes/vite-react-ts/src/components/header/PublicNavigation.tsx b/recipes/teamspace-react/src/components/header/PublicNavigation.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/components/header/PublicNavigation.tsx
rename to recipes/teamspace-react/src/components/header/PublicNavigation.tsx
diff --git a/recipes/vite-react-ts/src/components/header/UserDropdown.tsx b/recipes/teamspace-react/src/components/header/UserDropdown.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/components/header/UserDropdown.tsx
rename to recipes/teamspace-react/src/components/header/UserDropdown.tsx
diff --git a/recipes/vite-react-ts/src/components/ui/alert.tsx b/recipes/teamspace-react/src/components/ui/alert.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/components/ui/alert.tsx
rename to recipes/teamspace-react/src/components/ui/alert.tsx
diff --git a/recipes/vite-react-ts/src/components/ui/button.tsx b/recipes/teamspace-react/src/components/ui/button.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/components/ui/button.tsx
rename to recipes/teamspace-react/src/components/ui/button.tsx
diff --git a/recipes/vite-react-ts/src/components/ui/card.tsx b/recipes/teamspace-react/src/components/ui/card.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/components/ui/card.tsx
rename to recipes/teamspace-react/src/components/ui/card.tsx
diff --git a/recipes/vite-react-ts/src/components/ui/input.tsx b/recipes/teamspace-react/src/components/ui/input.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/components/ui/input.tsx
rename to recipes/teamspace-react/src/components/ui/input.tsx
diff --git a/recipes/vite-react-ts/src/components/ui/label.tsx b/recipes/teamspace-react/src/components/ui/label.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/components/ui/label.tsx
rename to recipes/teamspace-react/src/components/ui/label.tsx
diff --git a/recipes/vite-react-ts/src/index.css b/recipes/teamspace-react/src/index.css
similarity index 100%
rename from recipes/vite-react-ts/src/index.css
rename to recipes/teamspace-react/src/index.css
diff --git a/recipes/vite-react-ts/src/layouts/AuthLayout.tsx b/recipes/teamspace-react/src/layouts/AuthLayout.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/layouts/AuthLayout.tsx
rename to recipes/teamspace-react/src/layouts/AuthLayout.tsx
diff --git a/recipes/vite-react-ts/src/layouts/AuthenticatedLayout.tsx b/recipes/teamspace-react/src/layouts/AuthenticatedLayout.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/layouts/AuthenticatedLayout.tsx
rename to recipes/teamspace-react/src/layouts/AuthenticatedLayout.tsx
diff --git a/recipes/vite-react-ts/src/layouts/DashboardLayout.tsx b/recipes/teamspace-react/src/layouts/DashboardLayout.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/layouts/DashboardLayout.tsx
rename to recipes/teamspace-react/src/layouts/DashboardLayout.tsx
diff --git a/recipes/vite-react-ts/src/layouts/LandingLayout.tsx b/recipes/teamspace-react/src/layouts/LandingLayout.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/layouts/LandingLayout.tsx
rename to recipes/teamspace-react/src/layouts/LandingLayout.tsx
diff --git a/recipes/vite-react-ts/src/lib/utils.ts b/recipes/teamspace-react/src/lib/utils.ts
similarity index 100%
rename from recipes/vite-react-ts/src/lib/utils.ts
rename to recipes/teamspace-react/src/lib/utils.ts
diff --git a/recipes/vite-react-ts/src/main.tsx b/recipes/teamspace-react/src/main.tsx
similarity index 96%
rename from recipes/vite-react-ts/src/main.tsx
rename to recipes/teamspace-react/src/main.tsx
index 582cf08ff..c7be31c44 100644
--- a/recipes/vite-react-ts/src/main.tsx
+++ b/recipes/teamspace-react/src/main.tsx
@@ -1,7 +1,7 @@
 import {StrictMode} from 'react';
 import {createRoot} from 'react-dom/client';
 import './index.css';
-import App from './App.tsx';
+import App from './App';
 import {AsgardeoProvider} from '@asgardeo/react';
 
 createRoot(document.getElementById('root')!).render(
diff --git a/recipes/vite-react-ts/src/pages/CreateOrganization.tsx b/recipes/teamspace-react/src/pages/CreateOrganization.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/pages/CreateOrganization.tsx
rename to recipes/teamspace-react/src/pages/CreateOrganization.tsx
diff --git a/recipes/vite-react-ts/src/pages/Dashboard.tsx b/recipes/teamspace-react/src/pages/Dashboard.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/pages/Dashboard.tsx
rename to recipes/teamspace-react/src/pages/Dashboard.tsx
diff --git a/recipes/vite-react-ts/src/pages/LandingPage.tsx b/recipes/teamspace-react/src/pages/LandingPage.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/pages/LandingPage.tsx
rename to recipes/teamspace-react/src/pages/LandingPage.tsx
diff --git a/recipes/vite-react-ts/src/pages/Organizations.tsx b/recipes/teamspace-react/src/pages/Organizations.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/pages/Organizations.tsx
rename to recipes/teamspace-react/src/pages/Organizations.tsx
diff --git a/recipes/vite-react-ts/src/pages/Profile.tsx b/recipes/teamspace-react/src/pages/Profile.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/pages/Profile.tsx
rename to recipes/teamspace-react/src/pages/Profile.tsx
diff --git a/recipes/vite-react-ts/src/pages/SignIn.tsx b/recipes/teamspace-react/src/pages/SignIn.tsx
similarity index 100%
rename from recipes/vite-react-ts/src/pages/SignIn.tsx
rename to recipes/teamspace-react/src/pages/SignIn.tsx
diff --git a/recipes/vite-react-ts/src/vite-env.d.ts b/recipes/teamspace-react/src/vite-env.d.ts
similarity index 100%
rename from recipes/vite-react-ts/src/vite-env.d.ts
rename to recipes/teamspace-react/src/vite-env.d.ts
diff --git a/recipes/vite-react-ts/tailwind.config.js b/recipes/teamspace-react/tailwind.config.js
similarity index 100%
rename from recipes/vite-react-ts/tailwind.config.js
rename to recipes/teamspace-react/tailwind.config.js
diff --git a/recipes/vite-react-ts/tsconfig.app.json b/recipes/teamspace-react/tsconfig.app.json
similarity index 100%
rename from recipes/vite-react-ts/tsconfig.app.json
rename to recipes/teamspace-react/tsconfig.app.json
diff --git a/recipes/vite-react-ts/tsconfig.json b/recipes/teamspace-react/tsconfig.json
similarity index 100%
rename from recipes/vite-react-ts/tsconfig.json
rename to recipes/teamspace-react/tsconfig.json
diff --git a/recipes/vite-react-ts/tsconfig.node.json b/recipes/teamspace-react/tsconfig.node.json
similarity index 100%
rename from recipes/vite-react-ts/tsconfig.node.json
rename to recipes/teamspace-react/tsconfig.node.json
diff --git a/recipes/vite-react-ts/vite.config.ts b/recipes/teamspace-react/vite.config.ts
similarity index 100%
rename from recipes/vite-react-ts/vite.config.ts
rename to recipes/teamspace-react/vite.config.ts

From d57b68c308efef3bc9ba6a800615bca0d2345e0d Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 02:32:55 +0530
Subject: [PATCH 113/131] chore(samples): refactor

---
 packages/nextjs/src/index.ts                  |    4 +-
 pnpm-lock.yaml                                | 1505 +++++++++++++++--
 pnpm-workspace.yaml                           |    6 +-
 recipes/vue-vite/.env                         |    4 -
 .../__legacy__}/nuxt-vite/.gitignore          |    0
 .../__legacy__}/nuxt-vite/CHANGELOG.md        |    0
 .../__legacy__}/nuxt-vite/README.md           |    0
 .../__legacy__}/nuxt-vite/app.vue             |    0
 .../__legacy__}/nuxt-vite/assets/asgardeo.svg |    0
 .../__legacy__}/nuxt-vite/nuxt.config.ts      |    0
 .../__legacy__}/nuxt-vite/package.json        |    0
 .../__legacy__}/nuxt-vite/pages/index.vue     |    0
 .../__legacy__}/nuxt-vite/pages/login.vue     |    0
 .../__legacy__}/nuxt-vite/public/favicon.ico  |  Bin
 .../nuxt-vite/public/images/logo.svg          |    0
 .../__legacy__}/nuxt-vite/public/robots.txt   |    0
 .../nuxt-vite/server/api/auth/[...].ts        |    0
 .../nuxt-vite/server/tsconfig.json            |    0
 .../__legacy__}/nuxt-vite/tsconfig.json       |    0
 .../__legacy__/react-vite/.eslintrc.cjs       |    0
 .../__legacy__/react-vite/.gitignore          |    0
 .../__legacy__/react-vite/CHANGELOG.md        |    0
 .../__legacy__/react-vite/README.md           |    0
 .../__legacy__/react-vite/index.html          |    0
 .../__legacy__/react-vite/package.json        |    0
 .../__legacy__/react-vite/public/vite.svg     |    0
 .../__legacy__/react-vite/src/App.css         |    0
 .../__legacy__/react-vite/src/App.tsx         |    0
 .../__legacy__/react-vite/src/main.tsx        |    2 +-
 .../__legacy__/react-vite/src/vite-env.d.ts   |    0
 .../__legacy__/react-vite/tsconfig.json       |    0
 .../__legacy__/react-vite/tsconfig.node.json  |    0
 .../__legacy__/react-vite/vite.config.ts      |    0
 .../__legacy__}/vue-vite/.editorconfig        |    0
 .../__legacy__}/vue-vite/.eslintrc.cjs        |    0
 .../__legacy__}/vue-vite/.gitattributes       |    0
 .../__legacy__}/vue-vite/.gitignore           |    0
 .../__legacy__}/vue-vite/.prettierrc.json     |    0
 .../vue-vite/.vscode/extensions.json          |    0
 .../__legacy__}/vue-vite/CHANGELOG.md         |    0
 .../__legacy__}/vue-vite/README.md            |    0
 .../__legacy__}/vue-vite/env.d.ts             |    0
 .../__legacy__}/vue-vite/index.html           |    0
 .../__legacy__}/vue-vite/package.json         |    0
 .../__legacy__}/vue-vite/public/favicon.ico   |  Bin
 .../__legacy__}/vue-vite/src/App.vue          |    0
 .../vue-vite/src/assets/asgardeo.svg          |    0
 .../__legacy__}/vue-vite/src/assets/logo.svg  |    0
 .../__legacy__}/vue-vite/src/assets/main.css  |    0
 .../vue-vite/src/components/AuthLayout.vue    |    0
 .../vue-vite/src/components/SignInBtn.vue     |    0
 .../vue-vite/src/images/footer.png            |  Bin
 .../__legacy__}/vue-vite/src/main.ts          |    0
 .../__legacy__}/vue-vite/src/router/index.ts  |    0
 .../__legacy__}/vue-vite/src/shims-vue.d.ts   |    0
 .../vue-vite/src/views/HomeView.vue           |    0
 .../vue-vite/src/views/LandingView.vue        |    0
 .../__legacy__}/vue-vite/tsconfig.app.json    |    0
 .../__legacy__}/vue-vite/tsconfig.eslint.json |    0
 .../__legacy__}/vue-vite/tsconfig.json        |    0
 .../__legacy__}/vue-vite/tsconfig.node.json   |    0
 .../__legacy__}/vue-vite/tsconfig.vitest.json |    0
 .../__legacy__}/vue-vite/vite.config.ts       |    0
 .../__legacy__}/vue-vite/vitest.config.ts     |    0
 .../teamspace-nextjs-1}/.gitignore            |    0
 .../teamspace-nextjs-1}/README.md             |    0
 .../teamspace-nextjs-1}/app/favicon.ico       |  Bin
 .../teamspace-nextjs-1}/app/globals.css       |    0
 .../teamspace-nextjs-1}/app/layout.tsx        |    0
 .../teamspace-nextjs-1}/app/page.module.css   |    0
 .../teamspace-nextjs-1}/app/page.tsx          |    0
 .../teamspace-nextjs-1}/env.local.example     |    0
 .../teamspace-nextjs-1}/eslint.config.mjs     |    0
 .../teamspace-nextjs-1}/middleware.ts         |    0
 .../teamspace-nextjs-1}/next.config.ts        |    0
 .../teamspace-nextjs-1}/package.json          |    0
 .../teamspace-nextjs-1}/public/file.svg       |    0
 .../teamspace-nextjs-1}/public/globe.svg      |    0
 .../teamspace-nextjs-1}/public/next.svg       |    0
 .../teamspace-nextjs-1}/public/vercel.svg     |    0
 .../teamspace-nextjs-1}/public/window.svg     |    0
 .../teamspace-nextjs-1}/tsconfig.json         |    0
 samples/teamspace-nextjs/.gitignore           |   41 +
 samples/teamspace-nextjs/README.md            |   36 +
 samples/teamspace-nextjs/app/actions/auth.ts  |   29 +
 .../teamspace-nextjs/app/auth/signin/page.tsx |  135 ++
 .../teamspace-nextjs/app/auth/signup/page.tsx |  170 ++
 .../app/dashboard/dashboard-client.tsx        |  224 +++
 .../teamspace-nextjs/app/dashboard/page.tsx   |  258 +++
 samples/teamspace-nextjs/app/globals.css      |   76 +
 samples/teamspace-nextjs/app/layout.tsx       |   28 +
 .../app/organizations/new/page.tsx            |  211 +++
 .../app/organizations/page.tsx                |  170 ++
 samples/teamspace-nextjs/app/page.tsx         |  458 +++++
 samples/teamspace-nextjs/app/profile/page.tsx |  266 +++
 samples/teamspace-nextjs/components.json      |   21 +
 .../teamspace-nextjs/components/header.tsx    |  216 +++
 .../components/theme-provider.tsx             |    7 +
 .../components/ui/accordion.tsx               |   58 +
 .../components/ui/alert-dialog.tsx            |  141 ++
 .../teamspace-nextjs/components/ui/alert.tsx  |   43 +
 .../components/ui/aspect-ratio.tsx            |    7 +
 .../teamspace-nextjs/components/ui/avatar.tsx |   40 +
 .../teamspace-nextjs/components/ui/badge.tsx  |   29 +
 .../components/ui/breadcrumb.tsx              |  115 ++
 .../teamspace-nextjs/components/ui/button.tsx |   47 +
 .../components/ui/calendar.tsx                |   66 +
 .../teamspace-nextjs/components/ui/card.tsx   |   43 +
 .../components/ui/carousel.tsx                |  262 +++
 .../teamspace-nextjs/components/ui/chart.tsx  |  365 ++++
 .../components/ui/checkbox.tsx                |   28 +
 .../components/ui/collapsible.tsx             |   11 +
 .../components/ui/command.tsx                 |  153 ++
 .../components/ui/context-menu.tsx            |  200 +++
 .../teamspace-nextjs/components/ui/dialog.tsx |  122 ++
 .../teamspace-nextjs/components/ui/drawer.tsx |  118 ++
 .../components/ui/dropdown-menu.tsx           |  181 ++
 .../teamspace-nextjs/components/ui/form.tsx   |  178 ++
 .../components/ui/hover-card.tsx              |   29 +
 .../components/ui/input-otp.tsx               |   71 +
 .../teamspace-nextjs/components/ui/input.tsx  |   22 +
 .../teamspace-nextjs/components/ui/label.tsx  |   19 +
 .../components/ui/menubar.tsx                 |  236 +++
 .../components/ui/navigation-menu.tsx         |  128 ++
 .../components/ui/pagination.tsx              |  117 ++
 .../components/ui/popover.tsx                 |   31 +
 .../components/ui/progress.tsx                |   28 +
 .../components/ui/radio-group.tsx             |   44 +
 .../components/ui/resizable.tsx               |   45 +
 .../components/ui/scroll-area.tsx             |   48 +
 .../teamspace-nextjs/components/ui/select.tsx |  160 ++
 .../components/ui/separator.tsx               |   31 +
 .../teamspace-nextjs/components/ui/sheet.tsx  |  140 ++
 .../components/ui/sidebar.tsx                 |  763 +++++++++
 .../components/ui/skeleton.tsx                |   15 +
 .../teamspace-nextjs/components/ui/slider.tsx |   28 +
 .../teamspace-nextjs/components/ui/sonner.tsx |   31 +
 .../teamspace-nextjs/components/ui/switch.tsx |   29 +
 .../teamspace-nextjs/components/ui/table.tsx  |  117 ++
 .../teamspace-nextjs/components/ui/tabs.tsx   |   55 +
 .../components/ui/textarea.tsx                |   21 +
 .../teamspace-nextjs/components/ui/toast.tsx  |  129 ++
 .../components/ui/toaster.tsx                 |   35 +
 .../components/ui/toggle-group.tsx            |   61 +
 .../teamspace-nextjs/components/ui/toggle.tsx |   45 +
 .../components/ui/tooltip.tsx                 |   30 +
 .../components/ui/use-mobile.tsx              |   19 +
 .../components/ui/use-toast.ts                |  194 +++
 samples/teamspace-nextjs/env.local.example    |    6 +
 samples/teamspace-nextjs/eslint.config.mjs    |   16 +
 samples/teamspace-nextjs/hooks/use-auth.tsx   |  161 ++
 samples/teamspace-nextjs/hooks/use-mobile.tsx |   19 +
 samples/teamspace-nextjs/hooks/use-toast.ts   |  194 +++
 samples/teamspace-nextjs/lib/auth.ts          |   90 +
 samples/teamspace-nextjs/lib/utils.ts         |    6 +
 samples/teamspace-nextjs/middleware.ts        |   25 +
 samples/teamspace-nextjs/next.config.js       |   13 +
 samples/teamspace-nextjs/next.config.ts       |    7 +
 samples/teamspace-nextjs/package.json         |   39 +
 samples/teamspace-nextjs/pages.tsx            |  458 +++++
 samples/teamspace-nextjs/postcss.config.js    |    6 +
 samples/teamspace-nextjs/postcss.config.mjs   |    6 +
 .../public/placeholder-logo.png               |  Bin 0 -> 568 bytes
 .../public/placeholder-logo.svg               |    1 +
 .../public/placeholder-user.jpg               |  Bin 0 -> 1635 bytes
 .../teamspace-nextjs/public/placeholder.jpg   |  Bin 0 -> 1064 bytes
 .../teamspace-nextjs/public/placeholder.svg   |    1 +
 samples/teamspace-nextjs/styles/globals.css   |   94 +
 samples/teamspace-nextjs/tailwind.config.js   |   78 +
 samples/teamspace-nextjs/tsconfig.json        |   28 +
 .../teamspace-react/.env.local.example        |    0
 .../teamspace-react/.gitignore                |    0
 .../teamspace-react/README.md                 |    0
 .../teamspace-react/components.json           |    0
 .../teamspace-react/eslint.config.js          |    0
 .../teamspace-react/index.html                |    0
 .../teamspace-react/package.json              |    0
 .../teamspace-react/public/vite.svg           |    0
 .../teamspace-react/src/App.tsx               |    0
 .../teamspace-react/src/assets/react.svg      |    0
 .../teamspace-react/src/components/Header.tsx |    0
 .../header/AuthenticatedActions.tsx           |    0
 .../header/AuthenticatedMobileMenu.tsx        |    0
 .../header/AuthenticatedNavigation.tsx        |    0
 .../src/components/header/Logo.tsx            |    0
 .../header/OrganizationSwitcher.tsx           |    0
 .../src/components/header/PublicActions.tsx   |    0
 .../components/header/PublicNavigation.tsx    |    0
 .../src/components/header/UserDropdown.tsx    |    0
 .../src/components/ui/alert.tsx               |    0
 .../src/components/ui/button.tsx              |    0
 .../src/components/ui/card.tsx                |    0
 .../src/components/ui/input.tsx               |    0
 .../src/components/ui/label.tsx               |    0
 .../teamspace-react/src/index.css             |    0
 .../src/layouts/AuthLayout.tsx                |    0
 .../src/layouts/AuthenticatedLayout.tsx       |    0
 .../src/layouts/DashboardLayout.tsx           |    0
 .../src/layouts/LandingLayout.tsx             |    0
 .../teamspace-react/src/lib/utils.ts          |    0
 .../teamspace-react/src/main.tsx              |    0
 .../src/pages/CreateOrganization.tsx          |    0
 .../teamspace-react/src/pages/Dashboard.tsx   |    0
 .../teamspace-react/src/pages/LandingPage.tsx |    0
 .../src/pages/Organizations.tsx               |    0
 .../teamspace-react/src/pages/Profile.tsx     |    0
 .../teamspace-react/src/pages/SignIn.tsx      |    0
 .../teamspace-react/src/vite-env.d.ts         |    0
 .../teamspace-react/tailwind.config.js        |    0
 .../teamspace-react/tsconfig.app.json         |    0
 .../teamspace-react/tsconfig.json             |    0
 .../teamspace-react/tsconfig.node.json        |    0
 .../teamspace-react/vite.config.ts            |    0
 213 files changed, 9868 insertions(+), 175 deletions(-)
 delete mode 100644 recipes/vue-vite/.env
 rename {recipes => samples/__legacy__}/nuxt-vite/.gitignore (100%)
 rename {recipes => samples/__legacy__}/nuxt-vite/CHANGELOG.md (100%)
 rename {recipes => samples/__legacy__}/nuxt-vite/README.md (100%)
 rename {recipes => samples/__legacy__}/nuxt-vite/app.vue (100%)
 rename {recipes => samples/__legacy__}/nuxt-vite/assets/asgardeo.svg (100%)
 rename {recipes => samples/__legacy__}/nuxt-vite/nuxt.config.ts (100%)
 rename {recipes => samples/__legacy__}/nuxt-vite/package.json (100%)
 rename {recipes => samples/__legacy__}/nuxt-vite/pages/index.vue (100%)
 rename {recipes => samples/__legacy__}/nuxt-vite/pages/login.vue (100%)
 rename {recipes => samples/__legacy__}/nuxt-vite/public/favicon.ico (100%)
 rename {recipes => samples/__legacy__}/nuxt-vite/public/images/logo.svg (100%)
 rename {recipes => samples/__legacy__}/nuxt-vite/public/robots.txt (100%)
 rename {recipes => samples/__legacy__}/nuxt-vite/server/api/auth/[...].ts (100%)
 rename {recipes => samples/__legacy__}/nuxt-vite/server/tsconfig.json (100%)
 rename {recipes => samples/__legacy__}/nuxt-vite/tsconfig.json (100%)
 rename {recipes => samples}/__legacy__/react-vite/.eslintrc.cjs (100%)
 rename {recipes => samples}/__legacy__/react-vite/.gitignore (100%)
 rename {recipes => samples}/__legacy__/react-vite/CHANGELOG.md (100%)
 rename {recipes => samples}/__legacy__/react-vite/README.md (100%)
 rename {recipes => samples}/__legacy__/react-vite/index.html (100%)
 rename {recipes => samples}/__legacy__/react-vite/package.json (100%)
 rename {recipes => samples}/__legacy__/react-vite/public/vite.svg (100%)
 rename {recipes => samples}/__legacy__/react-vite/src/App.css (100%)
 rename {recipes => samples}/__legacy__/react-vite/src/App.tsx (100%)
 rename {recipes => samples}/__legacy__/react-vite/src/main.tsx (95%)
 rename {recipes => samples}/__legacy__/react-vite/src/vite-env.d.ts (100%)
 rename {recipes => samples}/__legacy__/react-vite/tsconfig.json (100%)
 rename {recipes => samples}/__legacy__/react-vite/tsconfig.node.json (100%)
 rename {recipes => samples}/__legacy__/react-vite/vite.config.ts (100%)
 rename {recipes => samples/__legacy__}/vue-vite/.editorconfig (100%)
 rename {recipes => samples/__legacy__}/vue-vite/.eslintrc.cjs (100%)
 rename {recipes => samples/__legacy__}/vue-vite/.gitattributes (100%)
 rename {recipes => samples/__legacy__}/vue-vite/.gitignore (100%)
 rename {recipes => samples/__legacy__}/vue-vite/.prettierrc.json (100%)
 rename {recipes => samples/__legacy__}/vue-vite/.vscode/extensions.json (100%)
 rename {recipes => samples/__legacy__}/vue-vite/CHANGELOG.md (100%)
 rename {recipes => samples/__legacy__}/vue-vite/README.md (100%)
 rename {recipes => samples/__legacy__}/vue-vite/env.d.ts (100%)
 rename {recipes => samples/__legacy__}/vue-vite/index.html (100%)
 rename {recipes => samples/__legacy__}/vue-vite/package.json (100%)
 rename {recipes => samples/__legacy__}/vue-vite/public/favicon.ico (100%)
 rename {recipes => samples/__legacy__}/vue-vite/src/App.vue (100%)
 rename {recipes => samples/__legacy__}/vue-vite/src/assets/asgardeo.svg (100%)
 rename {recipes => samples/__legacy__}/vue-vite/src/assets/logo.svg (100%)
 rename {recipes => samples/__legacy__}/vue-vite/src/assets/main.css (100%)
 rename {recipes => samples/__legacy__}/vue-vite/src/components/AuthLayout.vue (100%)
 rename {recipes => samples/__legacy__}/vue-vite/src/components/SignInBtn.vue (100%)
 rename {recipes => samples/__legacy__}/vue-vite/src/images/footer.png (100%)
 rename {recipes => samples/__legacy__}/vue-vite/src/main.ts (100%)
 rename {recipes => samples/__legacy__}/vue-vite/src/router/index.ts (100%)
 rename {recipes => samples/__legacy__}/vue-vite/src/shims-vue.d.ts (100%)
 rename {recipes => samples/__legacy__}/vue-vite/src/views/HomeView.vue (100%)
 rename {recipes => samples/__legacy__}/vue-vite/src/views/LandingView.vue (100%)
 rename {recipes => samples/__legacy__}/vue-vite/tsconfig.app.json (100%)
 rename {recipes => samples/__legacy__}/vue-vite/tsconfig.eslint.json (100%)
 rename {recipes => samples/__legacy__}/vue-vite/tsconfig.json (100%)
 rename {recipes => samples/__legacy__}/vue-vite/tsconfig.node.json (100%)
 rename {recipes => samples/__legacy__}/vue-vite/tsconfig.vitest.json (100%)
 rename {recipes => samples/__legacy__}/vue-vite/vite.config.ts (100%)
 rename {recipes => samples/__legacy__}/vue-vite/vitest.config.ts (100%)
 rename {recipes/create-next-app-ts-app-router => samples/teamspace-nextjs-1}/.gitignore (100%)
 rename {recipes/create-next-app-ts-app-router => samples/teamspace-nextjs-1}/README.md (100%)
 rename {recipes/create-next-app-ts-app-router => samples/teamspace-nextjs-1}/app/favicon.ico (100%)
 rename {recipes/create-next-app-ts-app-router => samples/teamspace-nextjs-1}/app/globals.css (100%)
 rename {recipes/create-next-app-ts-app-router => samples/teamspace-nextjs-1}/app/layout.tsx (100%)
 rename {recipes/create-next-app-ts-app-router => samples/teamspace-nextjs-1}/app/page.module.css (100%)
 rename {recipes/create-next-app-ts-app-router => samples/teamspace-nextjs-1}/app/page.tsx (100%)
 rename {recipes/create-next-app-ts-app-router => samples/teamspace-nextjs-1}/env.local.example (100%)
 rename {recipes/create-next-app-ts-app-router => samples/teamspace-nextjs-1}/eslint.config.mjs (100%)
 rename {recipes/create-next-app-ts-app-router => samples/teamspace-nextjs-1}/middleware.ts (100%)
 rename {recipes/create-next-app-ts-app-router => samples/teamspace-nextjs-1}/next.config.ts (100%)
 rename {recipes/create-next-app-ts-app-router => samples/teamspace-nextjs-1}/package.json (100%)
 rename {recipes/create-next-app-ts-app-router => samples/teamspace-nextjs-1}/public/file.svg (100%)
 rename {recipes/create-next-app-ts-app-router => samples/teamspace-nextjs-1}/public/globe.svg (100%)
 rename {recipes/create-next-app-ts-app-router => samples/teamspace-nextjs-1}/public/next.svg (100%)
 rename {recipes/create-next-app-ts-app-router => samples/teamspace-nextjs-1}/public/vercel.svg (100%)
 rename {recipes/create-next-app-ts-app-router => samples/teamspace-nextjs-1}/public/window.svg (100%)
 rename {recipes/create-next-app-ts-app-router => samples/teamspace-nextjs-1}/tsconfig.json (100%)
 create mode 100644 samples/teamspace-nextjs/.gitignore
 create mode 100644 samples/teamspace-nextjs/README.md
 create mode 100644 samples/teamspace-nextjs/app/actions/auth.ts
 create mode 100644 samples/teamspace-nextjs/app/auth/signin/page.tsx
 create mode 100644 samples/teamspace-nextjs/app/auth/signup/page.tsx
 create mode 100644 samples/teamspace-nextjs/app/dashboard/dashboard-client.tsx
 create mode 100644 samples/teamspace-nextjs/app/dashboard/page.tsx
 create mode 100644 samples/teamspace-nextjs/app/globals.css
 create mode 100644 samples/teamspace-nextjs/app/layout.tsx
 create mode 100644 samples/teamspace-nextjs/app/organizations/new/page.tsx
 create mode 100644 samples/teamspace-nextjs/app/organizations/page.tsx
 create mode 100644 samples/teamspace-nextjs/app/page.tsx
 create mode 100644 samples/teamspace-nextjs/app/profile/page.tsx
 create mode 100644 samples/teamspace-nextjs/components.json
 create mode 100644 samples/teamspace-nextjs/components/header.tsx
 create mode 100644 samples/teamspace-nextjs/components/theme-provider.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/accordion.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/alert-dialog.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/alert.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/aspect-ratio.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/avatar.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/badge.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/breadcrumb.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/button.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/calendar.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/card.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/carousel.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/chart.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/checkbox.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/collapsible.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/command.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/context-menu.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/dialog.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/drawer.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/dropdown-menu.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/form.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/hover-card.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/input-otp.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/input.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/label.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/menubar.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/navigation-menu.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/pagination.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/popover.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/progress.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/radio-group.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/resizable.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/scroll-area.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/select.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/separator.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/sheet.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/sidebar.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/skeleton.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/slider.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/sonner.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/switch.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/table.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/tabs.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/textarea.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/toast.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/toaster.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/toggle-group.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/toggle.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/tooltip.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/use-mobile.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/use-toast.ts
 create mode 100644 samples/teamspace-nextjs/env.local.example
 create mode 100644 samples/teamspace-nextjs/eslint.config.mjs
 create mode 100644 samples/teamspace-nextjs/hooks/use-auth.tsx
 create mode 100644 samples/teamspace-nextjs/hooks/use-mobile.tsx
 create mode 100644 samples/teamspace-nextjs/hooks/use-toast.ts
 create mode 100644 samples/teamspace-nextjs/lib/auth.ts
 create mode 100644 samples/teamspace-nextjs/lib/utils.ts
 create mode 100644 samples/teamspace-nextjs/middleware.ts
 create mode 100644 samples/teamspace-nextjs/next.config.js
 create mode 100644 samples/teamspace-nextjs/next.config.ts
 create mode 100644 samples/teamspace-nextjs/package.json
 create mode 100644 samples/teamspace-nextjs/pages.tsx
 create mode 100644 samples/teamspace-nextjs/postcss.config.js
 create mode 100644 samples/teamspace-nextjs/postcss.config.mjs
 create mode 100644 samples/teamspace-nextjs/public/placeholder-logo.png
 create mode 100644 samples/teamspace-nextjs/public/placeholder-logo.svg
 create mode 100644 samples/teamspace-nextjs/public/placeholder-user.jpg
 create mode 100644 samples/teamspace-nextjs/public/placeholder.jpg
 create mode 100644 samples/teamspace-nextjs/public/placeholder.svg
 create mode 100644 samples/teamspace-nextjs/styles/globals.css
 create mode 100644 samples/teamspace-nextjs/tailwind.config.js
 create mode 100644 samples/teamspace-nextjs/tsconfig.json
 rename {recipes => samples}/teamspace-react/.env.local.example (100%)
 rename {recipes => samples}/teamspace-react/.gitignore (100%)
 rename {recipes => samples}/teamspace-react/README.md (100%)
 rename {recipes => samples}/teamspace-react/components.json (100%)
 rename {recipes => samples}/teamspace-react/eslint.config.js (100%)
 rename {recipes => samples}/teamspace-react/index.html (100%)
 rename {recipes => samples}/teamspace-react/package.json (100%)
 rename {recipes => samples}/teamspace-react/public/vite.svg (100%)
 rename {recipes => samples}/teamspace-react/src/App.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/assets/react.svg (100%)
 rename {recipes => samples}/teamspace-react/src/components/Header.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/components/header/AuthenticatedActions.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/components/header/AuthenticatedMobileMenu.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/components/header/AuthenticatedNavigation.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/components/header/Logo.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/components/header/OrganizationSwitcher.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/components/header/PublicActions.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/components/header/PublicNavigation.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/components/header/UserDropdown.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/components/ui/alert.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/components/ui/button.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/components/ui/card.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/components/ui/input.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/components/ui/label.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/index.css (100%)
 rename {recipes => samples}/teamspace-react/src/layouts/AuthLayout.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/layouts/AuthenticatedLayout.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/layouts/DashboardLayout.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/layouts/LandingLayout.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/lib/utils.ts (100%)
 rename {recipes => samples}/teamspace-react/src/main.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/pages/CreateOrganization.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/pages/Dashboard.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/pages/LandingPage.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/pages/Organizations.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/pages/Profile.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/pages/SignIn.tsx (100%)
 rename {recipes => samples}/teamspace-react/src/vite-env.d.ts (100%)
 rename {recipes => samples}/teamspace-react/tailwind.config.js (100%)
 rename {recipes => samples}/teamspace-react/tsconfig.app.json (100%)
 rename {recipes => samples}/teamspace-react/tsconfig.json (100%)
 rename {recipes => samples}/teamspace-react/tsconfig.node.json (100%)
 rename {recipes => samples}/teamspace-react/vite.config.ts (100%)

diff --git a/packages/nextjs/src/index.ts b/packages/nextjs/src/index.ts
index 69e51b350..46f0ab2ac 100644
--- a/packages/nextjs/src/index.ts
+++ b/packages/nextjs/src/index.ts
@@ -22,10 +22,10 @@ export * from './server/AsgardeoProvider';
 export {default as isSignedIn} from './server/actions/isSignedIn';
 
 export {default as SignedIn} from './client/components/control/SignedIn/SignedIn';
-export * from './client/components/control/SignedIn/SignedIn';
+export {SignedInProps} from './client/components/control/SignedIn/SignedIn';
 
 export {default as SignedOut} from './client/components/control/SignedOut/SignedOut';
-export * from './client/components/control/SignedOut/SignedOut';
+export {SignedOutProps} from './client/components/control/SignedOut/SignedOut';
 
 export {default as SignInButton} from './client/components/actions/SignInButton/SignInButton';
 export type {SignInButtonProps} from './client/components/actions/SignInButton/SignInButton';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3f3671a2d..74ec3f6b9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,7 +49,7 @@ importers:
     devDependencies:
       vitepress:
         specifier: ^1.2.2
-        version: 1.6.3(@algolia/client-search@5.25.0)(@types/node@24.0.3)(axios@1.9.0)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.1)(postcss@8.5.3)(sass@1.89.0)(search-insights@2.17.3)(terser@5.39.2)(typescript@5.8.3)
+        version: 1.6.3(@algolia/client-search@5.25.0)(@types/node@24.0.3)(@types/react@18.3.23)(axios@1.9.0)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.1)(postcss@8.5.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.89.0)(search-insights@2.17.3)(terser@5.39.2)(typescript@5.8.3)
 
   packages/browser:
     dependencies:
@@ -242,7 +242,7 @@ importers:
         version: 8.57.0
       next:
         specifier: ^15.3.2
-        version: 15.3.2(@babel/core@7.27.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.89.0)
+        version: 15.3.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.89.0)
       prettier:
         specifier: ^2.6.2
         version: 2.8.8
@@ -548,14 +548,90 @@ importers:
         specifier: ^2.2.2
         version: 2.2.10(typescript@5.1.6)
 
-  recipes/create-next-app-ts-app-router:
+  samples/teamspace-nextjs:
+    dependencies:
+      '@asgardeo/nextjs':
+        specifier: workspace:^
+        version: link:../../packages/nextjs
+      '@radix-ui/react-avatar':
+        specifier: ^1.0.4
+        version: 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-checkbox':
+        specifier: ^1.0.4
+        version: 1.3.2(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.0.6
+        version: 2.1.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-label':
+        specifier: ^2.0.2
+        version: 2.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot':
+        specifier: ^1.0.2
+        version: 1.2.3(@types/react@18.3.23)(react@18.3.1)
+      class-variance-authority:
+        specifier: ^0.7.0
+        version: 0.7.1
+      clsx:
+        specifier: ^2.0.0
+        version: 2.1.1
+      lucide-react:
+        specifier: ^0.294.0
+        version: 0.294.0(react@18.3.1)
+      next:
+        specifier: 14.0.4
+        version: 14.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.89.0)
+      react:
+        specifier: ^18
+        version: 18.3.1
+      react-dom:
+        specifier: ^18
+        version: 18.3.1(react@18.3.1)
+      tailwind-merge:
+        specifier: ^2.0.0
+        version: 2.6.0
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@4.1.10)
+    devDependencies:
+      '@tailwindcss/postcss':
+        specifier: ^4.1.10
+        version: 4.1.10
+      '@types/node':
+        specifier: ^20
+        version: 20.17.50
+      '@types/react':
+        specifier: ^18
+        version: 18.3.23
+      '@types/react-dom':
+        specifier: ^18
+        version: 18.3.7(@types/react@18.3.23)
+      autoprefixer:
+        specifier: ^10.0.1
+        version: 10.4.21(postcss@8.5.3)
+      eslint:
+        specifier: ^8
+        version: 8.57.0
+      eslint-config-next:
+        specifier: 14.0.4
+        version: 14.0.4(eslint-plugin-import-x@4.12.2(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)
+      postcss:
+        specifier: ^8.5.3
+        version: 8.5.3
+      tailwindcss:
+        specifier: ^4
+        version: 4.1.10
+      typescript:
+        specifier: ^5
+        version: 5.8.3
+
+  samples/teamspace-nextjs-1:
     dependencies:
       '@asgardeo/nextjs':
         specifier: workspace:^
         version: link:../../packages/nextjs
       next:
         specifier: 15.3.2
-        version: 15.3.2(@babel/core@7.27.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.89.0)
+        version: 15.3.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.89.0)
       react:
         specifier: ^19.0.0
         version: 19.1.0
@@ -585,7 +661,7 @@ importers:
         specifier: ^5
         version: 5.8.3
 
-  recipes/vite-react-ts:
+  samples/teamspace-react:
     dependencies:
       '@asgardeo/react':
         specifier: workspace:^
@@ -741,6 +817,10 @@ packages:
     resolution: {integrity: sha512-ZO0UKvDyEFvyeJQX0gmZDQEvhLZ2X10K+ps6hViMo1HgE2V8em00SwNsQ+7E/52a+YiBkVWX61pJJJE44juDMQ==}
     engines: {node: '>= 14.0.0'}
 
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
   '@ampproject/remapping@2.3.0':
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
@@ -1703,57 +1783,117 @@ packages:
     engines: {node: '>=18.14.0'}
     hasBin: true
 
+  '@next/env@14.0.4':
+    resolution: {integrity: sha512-irQnbMLbUNQpP1wcE5NstJtbuA/69kRfzBrpAD7Gsn8zm/CY6YQYc3HQBz8QPxwISG26tIm5afvvVbu508oBeQ==}
+
   '@next/env@15.3.2':
     resolution: {integrity: sha512-xURk++7P7qR9JG1jJtLzPzf0qEvqCN0A/T3DXf8IPMKo9/6FfjxtEffRJIIew/bIL4T3C2jLLqBor8B/zVlx6g==}
 
   '@next/eslint-plugin-next@13.5.11':
     resolution: {integrity: sha512-0qjDhes9UTSxirt/dYzrv20hs8SUhcIOvlEioj5+XucVrBHihnAk6Om7Vzk+VZ2nRE7tcShm/6lH1xSkJ3XMpg==}
 
+  '@next/eslint-plugin-next@14.0.4':
+    resolution: {integrity: sha512-U3qMNHmEZoVmHA0j/57nRfi3AscXNvkOnxDmle/69Jz/G0o/gWjXTDdlgILZdrxQ0Lw/jv2mPW8PGy0EGIHXhQ==}
+
   '@next/eslint-plugin-next@15.3.2':
     resolution: {integrity: sha512-ijVRTXBgnHT33aWnDtmlG+LJD+5vhc9AKTJPquGG5NKXjpKNjc62woIhFtrAcWdBobt8kqjCoaJ0q6sDQoX7aQ==}
 
+  '@next/swc-darwin-arm64@14.0.4':
+    resolution: {integrity: sha512-mF05E/5uPthWzyYDyptcwHptucf/jj09i2SXBPwNzbgBNc+XnwzrL0U6BmPjQeOL+FiB+iG1gwBeq7mlDjSRPg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@next/swc-darwin-arm64@15.3.2':
     resolution: {integrity: sha512-2DR6kY/OGcokbnCsjHpNeQblqCZ85/1j6njYSkzRdpLn5At7OkSdmk7WyAmB9G0k25+VgqVZ/u356OSoQZ3z0g==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
+  '@next/swc-darwin-x64@14.0.4':
+    resolution: {integrity: sha512-IZQ3C7Bx0k2rYtrZZxKKiusMTM9WWcK5ajyhOZkYYTCc8xytmwSzR1skU7qLgVT/EY9xtXDG0WhY6fyujnI3rw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
   '@next/swc-darwin-x64@15.3.2':
     resolution: {integrity: sha512-ro/fdqaZWL6k1S/5CLv1I0DaZfDVJkWNaUU3un8Lg6m0YENWlDulmIWzV96Iou2wEYyEsZq51mwV8+XQXqMp3w==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
+  '@next/swc-linux-arm64-gnu@14.0.4':
+    resolution: {integrity: sha512-VwwZKrBQo/MGb1VOrxJ6LrKvbpo7UbROuyMRvQKTFKhNaXjUmKTu7wxVkIuCARAfiI8JpaWAnKR+D6tzpCcM4w==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
   '@next/swc-linux-arm64-gnu@15.3.2':
     resolution: {integrity: sha512-covwwtZYhlbRWK2HlYX9835qXum4xYZ3E2Mra1mdQ+0ICGoMiw1+nVAn4d9Bo7R3JqSmK1grMq/va+0cdh7bJA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
+  '@next/swc-linux-arm64-musl@14.0.4':
+    resolution: {integrity: sha512-8QftwPEW37XxXoAwsn+nXlodKWHfpMaSvt81W43Wh8dv0gkheD+30ezWMcFGHLI71KiWmHK5PSQbTQGUiidvLQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
   '@next/swc-linux-arm64-musl@15.3.2':
     resolution: {integrity: sha512-KQkMEillvlW5Qk5mtGA/3Yz0/tzpNlSw6/3/ttsV1lNtMuOHcGii3zVeXZyi4EJmmLDKYcTcByV2wVsOhDt/zg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
+  '@next/swc-linux-x64-gnu@14.0.4':
+    resolution: {integrity: sha512-/s/Pme3VKfZAfISlYVq2hzFS8AcAIOTnoKupc/j4WlvF6GQ0VouS2Q2KEgPuO1eMBwakWPB1aYFIA4VNVh667A==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
   '@next/swc-linux-x64-gnu@15.3.2':
     resolution: {integrity: sha512-uRBo6THWei0chz+Y5j37qzx+BtoDRFIkDzZjlpCItBRXyMPIg079eIkOCl3aqr2tkxL4HFyJ4GHDes7W8HuAUg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
+  '@next/swc-linux-x64-musl@14.0.4':
+    resolution: {integrity: sha512-m8z/6Fyal4L9Bnlxde5g2Mfa1Z7dasMQyhEhskDATpqr+Y0mjOBZcXQ7G5U+vgL22cI4T7MfvgtrM2jdopqWaw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
   '@next/swc-linux-x64-musl@15.3.2':
     resolution: {integrity: sha512-+uxFlPuCNx/T9PdMClOqeE8USKzj8tVz37KflT3Kdbx/LOlZBRI2yxuIcmx1mPNK8DwSOMNCr4ureSet7eyC0w==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
+  '@next/swc-win32-arm64-msvc@14.0.4':
+    resolution: {integrity: sha512-7Wv4PRiWIAWbm5XrGz3D8HUkCVDMMz9igffZG4NB1p4u1KoItwx9qjATHz88kwCEal/HXmbShucaslXCQXUM5w==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
   '@next/swc-win32-arm64-msvc@15.3.2':
     resolution: {integrity: sha512-LLTKmaI5cfD8dVzh5Vt7+OMo+AIOClEdIU/TSKbXXT2iScUTSxOGoBhfuv+FU8R9MLmrkIL1e2fBMkEEjYAtPQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
+  '@next/swc-win32-ia32-msvc@14.0.4':
+    resolution: {integrity: sha512-zLeNEAPULsl0phfGb4kdzF/cAVIfaC7hY+kt0/d+y9mzcZHsMS3hAS829WbJ31DkSlVKQeHEjZHIdhN+Pg7Gyg==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@next/swc-win32-x64-msvc@14.0.4':
+    resolution: {integrity: sha512-yEh2+R8qDlDCjxVpzOTEpBLQTEFAcP2A8fUFLaWNap9GitYKkKv1//y2S6XY6zsR4rCOPRpU7plYDR+az2n30A==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
   '@next/swc-win32-x64-msvc@15.3.2':
     resolution: {integrity: sha512-aW5B8wOPioJ4mBdMDXkt5f3j8pUr9W8AnlX0Df35uRWNT1Y6RIybxjnSUe+PhM+M1bwgyY8PHLmXZC6zT1o5tA==}
     engines: {node: '>= 10'}
@@ -2138,6 +2278,61 @@ packages:
     resolution: {integrity: sha512-aQypoot0HPSJa6gDPEPTntc1GT6QINrSbgRlRhadGW2WaYqUK3tK4Bw9SBMZXhmxd3GeAlZjVcODHgiu+THY7A==}
     engines: {node: '>=18'}
 
+  '@radix-ui/primitive@1.1.2':
+    resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
+
+  '@radix-ui/react-arrow@1.1.7':
+    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-avatar@1.1.10':
+    resolution: {integrity: sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-checkbox@1.3.2':
+    resolution: {integrity: sha512-yd+dI56KZqawxKZrJ31eENUwqc1QSqg4OZ15rybGjF2ZNwMO+wCyHzAVLRp9qoYJf7kYy0YpZ2b0JCzJ42HZpA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-compose-refs@1.1.2':
     resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
     peerDependencies:
@@ -2147,6 +2342,81 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-context@1.1.2':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.10':
+    resolution: {integrity: sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dropdown-menu@2.1.15':
+    resolution: {integrity: sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.2':
+    resolution: {integrity: sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.7':
+    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.1':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-label@2.1.7':
     resolution: {integrity: sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==}
     peerDependencies:
@@ -2160,6 +2430,58 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-menu@2.1.15':
+    resolution: {integrity: sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.7':
+    resolution: {integrity: sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.9':
+    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.4':
+    resolution: {integrity: sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-primitive@2.1.3':
     resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
     peerDependencies:
@@ -2173,6 +2495,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-roving-focus@1.1.10':
+    resolution: {integrity: sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slot@1.2.3':
     resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
     peerDependencies:
@@ -2182,6 +2517,90 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.1':
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-is-hydrated@0.1.0':
+    resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.1':
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+
   '@remix-run/router@1.23.0':
     resolution: {integrity: sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==}
     engines: {node: '>=14.0.0'}
@@ -2461,63 +2880,135 @@ packages:
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
+  '@swc/helpers@0.5.2':
+    resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==}
+
+  '@tailwindcss/node@4.1.10':
+    resolution: {integrity: sha512-2ACf1znY5fpRBwRhMgj9ZXvb2XZW8qs+oTfotJ2C5xR0/WNL7UHZ7zXl6s+rUqedL1mNi+0O+WQr5awGowS3PQ==}
+
   '@tailwindcss/node@4.1.8':
     resolution: {integrity: sha512-OWwBsbC9BFAJelmnNcrKuf+bka2ZxCE2A4Ft53Tkg4uoiE67r/PMEYwCsourC26E+kmxfwE0hVzMdxqeW+xu7Q==}
 
+  '@tailwindcss/oxide-android-arm64@4.1.10':
+    resolution: {integrity: sha512-VGLazCoRQ7rtsCzThaI1UyDu/XRYVyH4/EWiaSX6tFglE+xZB5cvtC5Omt0OQ+FfiIVP98su16jDVHDEIuH4iQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
   '@tailwindcss/oxide-android-arm64@4.1.8':
     resolution: {integrity: sha512-Fbz7qni62uKYceWYvUjRqhGfZKwhZDQhlrJKGtnZfuNtHFqa8wmr+Wn74CTWERiW2hn3mN5gTpOoxWKk0jRxjg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [android]
 
+  '@tailwindcss/oxide-darwin-arm64@4.1.10':
+    resolution: {integrity: sha512-ZIFqvR1irX2yNjWJzKCqTCcHZbgkSkSkZKbRM3BPzhDL/18idA8uWCoopYA2CSDdSGFlDAxYdU2yBHwAwx8euQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@tailwindcss/oxide-darwin-arm64@4.1.8':
     resolution: {integrity: sha512-RdRvedGsT0vwVVDztvyXhKpsU2ark/BjgG0huo4+2BluxdXo8NDgzl77qh0T1nUxmM11eXwR8jA39ibvSTbi7A==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
+  '@tailwindcss/oxide-darwin-x64@4.1.10':
+    resolution: {integrity: sha512-eCA4zbIhWUFDXoamNztmS0MjXHSEJYlvATzWnRiTqJkcUteSjO94PoRHJy1Xbwp9bptjeIxxBHh+zBWFhttbrQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
   '@tailwindcss/oxide-darwin-x64@4.1.8':
     resolution: {integrity: sha512-t6PgxjEMLp5Ovf7uMb2OFmb3kqzVTPPakWpBIFzppk4JE4ix0yEtbtSjPbU8+PZETpaYMtXvss2Sdkx8Vs4XRw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
+  '@tailwindcss/oxide-freebsd-x64@4.1.10':
+    resolution: {integrity: sha512-8/392Xu12R0cc93DpiJvNpJ4wYVSiciUlkiOHOSOQNH3adq9Gi/dtySK7dVQjXIOzlpSHjeCL89RUUI8/GTI6g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@tailwindcss/oxide-freebsd-x64@4.1.8':
     resolution: {integrity: sha512-g8C8eGEyhHTqwPStSwZNSrOlyx0bhK/V/+zX0Y+n7DoRUzyS8eMbVshVOLJTDDC+Qn9IJnilYbIKzpB9n4aBsg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [freebsd]
 
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.10':
+    resolution: {integrity: sha512-t9rhmLT6EqeuPT+MXhWhlRYIMSfh5LZ6kBrC4FS6/+M1yXwfCtp24UumgCWOAJVyjQwG+lYva6wWZxrfvB+NhQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
   '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.8':
     resolution: {integrity: sha512-Jmzr3FA4S2tHhaC6yCjac3rGf7hG9R6Gf2z9i9JFcuyy0u79HfQsh/thifbYTF2ic82KJovKKkIB6Z9TdNhCXQ==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
 
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.10':
+    resolution: {integrity: sha512-3oWrlNlxLRxXejQ8zImzrVLuZ/9Z2SeKoLhtCu0hpo38hTO2iL86eFOu4sVR8cZc6n3z7eRXXqtHJECa6mFOvA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
   '@tailwindcss/oxide-linux-arm64-gnu@4.1.8':
     resolution: {integrity: sha512-qq7jXtO1+UEtCmCeBBIRDrPFIVI4ilEQ97qgBGdwXAARrUqSn/L9fUrkb1XP/mvVtoVeR2bt/0L77xx53bPZ/Q==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.10':
+    resolution: {integrity: sha512-saScU0cmWvg/Ez4gUmQWr9pvY9Kssxt+Xenfx1LG7LmqjcrvBnw4r9VjkFcqmbBb7GCBwYNcZi9X3/oMda9sqQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
   '@tailwindcss/oxide-linux-arm64-musl@4.1.8':
     resolution: {integrity: sha512-O6b8QesPbJCRshsNApsOIpzKt3ztG35gfX9tEf4arD7mwNinsoCKxkj8TgEE0YRjmjtO3r9FlJnT/ENd9EVefQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.10':
+    resolution: {integrity: sha512-/G3ao/ybV9YEEgAXeEg28dyH6gs1QG8tvdN9c2MNZdUXYBaIY/Gx0N6RlJzfLy/7Nkdok4kaxKPHKJUlAaoTdA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
   '@tailwindcss/oxide-linux-x64-gnu@4.1.8':
     resolution: {integrity: sha512-32iEXX/pXwikshNOGnERAFwFSfiltmijMIAbUhnNyjFr3tmWmMJWQKU2vNcFX0DACSXJ3ZWcSkzNbaKTdngH6g==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
+  '@tailwindcss/oxide-linux-x64-musl@4.1.10':
+    resolution: {integrity: sha512-LNr7X8fTiKGRtQGOerSayc2pWJp/9ptRYAa4G+U+cjw9kJZvkopav1AQc5HHD+U364f71tZv6XamaHKgrIoVzA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
   '@tailwindcss/oxide-linux-x64-musl@4.1.8':
     resolution: {integrity: sha512-s+VSSD+TfZeMEsCaFaHTaY5YNj3Dri8rST09gMvYQKwPphacRG7wbuQ5ZJMIJXN/puxPcg/nU+ucvWguPpvBDg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
+  '@tailwindcss/oxide-wasm32-wasi@4.1.10':
+    resolution: {integrity: sha512-d6ekQpopFQJAcIK2i7ZzWOYGZ+A6NzzvQ3ozBvWFdeyqfOZdYHU66g5yr+/HC4ipP1ZgWsqa80+ISNILk+ae/Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
   '@tailwindcss/oxide-wasm32-wasi@4.1.8':
     resolution: {integrity: sha512-CXBPVFkpDjM67sS1psWohZ6g/2/cd+cq56vPxK4JeawelxwK4YECgl9Y9TjkE2qfF+9/s1tHHJqrC4SS6cVvSg==}
     engines: {node: '>=14.0.0'}
@@ -2530,22 +3021,41 @@ packages:
       - '@emnapi/wasi-threads'
       - tslib
 
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.10':
+    resolution: {integrity: sha512-i1Iwg9gRbwNVOCYmnigWCCgow8nDWSFmeTUU5nbNx3rqbe4p0kRbEqLwLJbYZKmSSp23g4N6rCDmm7OuPBXhDA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
   '@tailwindcss/oxide-win32-arm64-msvc@4.1.8':
     resolution: {integrity: sha512-7GmYk1n28teDHUjPlIx4Z6Z4hHEgvP5ZW2QS9ygnDAdI/myh3HTHjDqtSqgu1BpRoI4OiLx+fThAyA1JePoENA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.10':
+    resolution: {integrity: sha512-sGiJTjcBSfGq2DVRtaSljq5ZgZS2SDHSIfhOylkBvHVjwOsodBhnb3HdmiKkVuUGKD0I7G63abMOVaskj1KpOA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
   '@tailwindcss/oxide-win32-x64-msvc@4.1.8':
     resolution: {integrity: sha512-fou+U20j+Jl0EHwK92spoWISON2OBnCazIc038Xj2TdweYV33ZRkS9nwqiUi2d/Wba5xg5UoHfvynnb/UB49cQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
 
+  '@tailwindcss/oxide@4.1.10':
+    resolution: {integrity: sha512-v0C43s7Pjw+B9w21htrQwuFObSkio2aV/qPx/mhrRldbqxbWJK6KizM+q7BF1/1CmuLqZqX3CeYF7s7P9fbA8Q==}
+    engines: {node: '>= 10'}
+
   '@tailwindcss/oxide@4.1.8':
     resolution: {integrity: sha512-d7qvv9PsM5N3VNKhwVUhpK6r4h9wtLkJ6lz9ZY9aeZgrUWk1Z8VPyqyDT9MZlem7GTGseRQHkeB1j3tC7W1P+A==}
     engines: {node: '>= 10'}
 
+  '@tailwindcss/postcss@4.1.10':
+    resolution: {integrity: sha512-B+7r7ABZbkXJwpvt2VMnS6ujcDoR2OOcFaqrLIo1xbcdxje4Vf+VgJdBzNNbrAjBj/rLZ66/tlQ1knIGNLKOBQ==}
+
   '@tailwindcss/vite@4.1.8':
     resolution: {integrity: sha512-CQ+I8yxNV5/6uGaJjiuymgw0kEQiNKRinYbZXPdx1fk5WgiyReG0VaUx/Xq6aVNSUNJFzxm6o8FNKS5aMaim5A==}
     peerDependencies:
@@ -2636,11 +3146,22 @@ packages:
     resolution: {integrity: sha512-EULJ8LApcVEPbrfND0cRQqutIOdiIgJ1Mgrhpy755r14xMohPTEpkV/k28SJvuOs9bHRFW8x+KeDAEPiGQPB9Q==}
     deprecated: This is a stub types definition. parse-path provides its own type definitions, so you do not need this installed.
 
+  '@types/prop-types@15.7.15':
+    resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
+
+  '@types/react-dom@18.3.7':
+    resolution: {integrity: sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==}
+    peerDependencies:
+      '@types/react': ^18.0.0
+
   '@types/react-dom@19.1.5':
     resolution: {integrity: sha512-CMCjrWucUBZvohgZxkjd6S9h0nZxXjzus6yDfUb+xLxYM7VvjKNH1tQrE9GWLql1XoOP4/Ds3bwFqShHUYraGg==}
     peerDependencies:
       '@types/react': ^19.0.0
 
+  '@types/react@18.3.23':
+    resolution: {integrity: sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==}
+
   '@types/react@19.1.5':
     resolution: {integrity: sha512-piErsCVVbpMMT2r7wbawdZsq4xMvIAhQuac2gedQHysu1TZYEigE6pnFfgZT+/jQnrRuF5r+SHzuehFjfRjr4g==}
 
@@ -2684,17 +3205,6 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/eslint-plugin@7.18.0':
-    resolution: {integrity: sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      '@typescript-eslint/parser': ^7.0.0
-      eslint: ^8.56.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@typescript-eslint/eslint-plugin@8.32.1':
     resolution: {integrity: sha512-6u6Plg9nP/J1GRpe/vcjjabo6Uc5YQPAMxsgQyGC/I0RuukiG1wIe3+Vtg3IrSCVJDmqK3j8adrtzXSENRtFgg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2737,16 +3247,6 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/parser@7.18.0':
-    resolution: {integrity: sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      eslint: ^8.56.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@typescript-eslint/parser@8.32.1':
     resolution: {integrity: sha512-LKMrmwCPoLhM45Z00O1ulb6jwyVr2kr3XJp+G+tSEZcbauNnScewcQwtJqXDhXeYPDEjZ8C1SjXm015CirEmGg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2775,10 +3275,6 @@ packages:
     resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
     engines: {node: ^16.0.0 || >=18.0.0}
 
-  '@typescript-eslint/scope-manager@7.18.0':
-    resolution: {integrity: sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-
   '@typescript-eslint/scope-manager@8.32.1':
     resolution: {integrity: sha512-7IsIaIDeZn7kffk7qXC3o6Z4UblZJKV3UBpkvRNpr5NSyLji7tvTcvmnMNYuYLyh26mN8W723xpo3i4MlD33vA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2813,16 +3309,6 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/type-utils@7.18.0':
-    resolution: {integrity: sha512-XL0FJXuCLaDuX2sYqZUUSOJ2sG5/i1AAze+axqmLnSkNEVMVYLF+cbwlB2w8D1tinFuSikHmFta+P+HOofrLeA==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      eslint: ^8.56.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@typescript-eslint/type-utils@8.32.1':
     resolution: {integrity: sha512-mv9YpQGA8iIsl5KyUPi+FGLm7+bA4fgXaeRcFKRDRwDMu4iwrSHeDPipwueNXhdIIZltwCJv+NkxftECbIZWfA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2845,10 +3331,6 @@ packages:
     resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
     engines: {node: ^16.0.0 || >=18.0.0}
 
-  '@typescript-eslint/types@7.18.0':
-    resolution: {integrity: sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-
   '@typescript-eslint/types@8.32.1':
     resolution: {integrity: sha512-YmybwXUJcgGqgAp6bEsgpPXEg6dcCyPyCSr0CAAueacR/CCBi25G3V8gGQ2kRzQRBNol7VQknxMs9HvVa9Rvfg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2875,15 +3357,6 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/typescript-estree@7.18.0':
-    resolution: {integrity: sha512-aP1v/BSPnnyhMHts8cf1qQ6Q1IFwwRvAQGRvBFkWlo3/lH29OXA3Pts+c10nxRxIBrDnoMqzhgdwVe5f2D6OzA==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@typescript-eslint/typescript-estree@8.32.1':
     resolution: {integrity: sha512-Y3AP9EIfYwBb4kWGb+simvPaqQoT5oJuzzj9m0i6FCY6SPvlomY2Ei4UEMm7+FXtlNJbor80ximyslzaQF6xhg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2908,12 +3381,6 @@ packages:
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
 
-  '@typescript-eslint/utils@7.18.0':
-    resolution: {integrity: sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-    peerDependencies:
-      eslint: ^8.56.0
-
   '@typescript-eslint/utils@8.32.1':
     resolution: {integrity: sha512-DsSFNIgLSrc89gpq1LJB7Hm1YpuhK086DRDJSNrewcGvYloWW1vZLHBTIvarKZDcAORIy/uWNx8Gad+4oMpkSA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2936,10 +3403,6 @@ packages:
     resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
     engines: {node: ^16.0.0 || >=18.0.0}
 
-  '@typescript-eslint/visitor-keys@7.18.0':
-    resolution: {integrity: sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==}
-    engines: {node: ^18.18.0 || >=20.0.0}
-
   '@typescript-eslint/visitor-keys@8.32.1':
     resolution: {integrity: sha512-ar0tjQfObzhSaW3C3QNmTc5ofj0hDoNQ5XWrCy6zDyabdr0TWhCkClp+rywGNj/odAFBVzzJrK4tEq5M4Hmu4w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3447,6 +3910,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
@@ -4260,6 +4727,9 @@ packages:
     resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
     engines: {node: '>=8'}
 
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
   detective-amd@6.0.1:
     resolution: {integrity: sha512-TtyZ3OhwUoEEIhTFoc1C9IyJIud3y+xYkSRjmvCt65+ycQuc3VcBrPRTMWoO/AnuCyOB8T5gky+xf7Igxtjd3g==}
     engines: {node: '>=18'}
@@ -4576,6 +5046,15 @@ packages:
     peerDependencies:
       eslint: ^9.5.0
 
+  eslint-config-next@14.0.4:
+    resolution: {integrity: sha512-9/xbOHEQOmQtqvQ1UsTQZpnA7SlDMBtuKJ//S4JnoyK3oGLhILKXdBgu/UO7lQo/2xOykQULS1qQ6p2+EpHgAQ==}
+    peerDependencies:
+      eslint: ^7.23.0 || ^8.0.0
+      typescript: '>=3.3.1'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   eslint-config-next@15.3.2:
     resolution: {integrity: sha512-FerU4DYccO4FgeYFFglz0SnaKRe1ejXQrDb8kWUkTAg036YWi+jUsgg4sIGNCDhAsDITsZaL4MzBWKB6f4G1Dg==}
     peerDependencies:
@@ -5160,6 +5639,10 @@ packages:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
   get-port-please@3.1.2:
     resolution: {integrity: sha512-Gxc29eLs1fbn6LQ4jSU4vXjlwyZhF5HsGuMAa7gqBP4Rw4yxxltyDUuF5MBclFzDTXO+ACchGQoeela4DSfzdQ==}
 
@@ -5204,6 +5687,9 @@ packages:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
+  glob-to-regexp@0.4.1:
+    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
+
   glob@10.4.5:
     resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
     hasBin: true
@@ -6379,6 +6865,21 @@ packages:
     resolution: {integrity: sha512-Nc3loyVASW59W+8fLDZT1lncpG7llffyZ2o0UQLx/Fr20i7P8oP+lE7+TEcFvXj9IUWU6LjB9P3BH+iFGyp+mg==}
     engines: {node: ^14.16.0 || >=16.0.0}
 
+  next@14.0.4:
+    resolution: {integrity: sha512-qbwypnM7327SadwFtxXnQdGiKpkuhaRLE2uq62/nRul9cj9KhQ5LhHmlziTNqUidZotw/Q1I9OjirBROdUJNgA==}
+    engines: {node: '>=18.17.0'}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      react: ^18.2.0
+      react-dom: ^18.2.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      sass:
+        optional: true
+
   next@15.3.2:
     resolution: {integrity: sha512-CA3BatMyHkxZ48sgOCLdVHjFU36N7TF1HhqAHLFOkV6buwZnvMI84Cug8xD56B9mCuKrqXnLn94417GrZ/jjCQ==}
     engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
@@ -7367,6 +7868,11 @@ packages:
   rc9@2.1.2:
     resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
 
+  react-dom@18.3.1:
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+    peerDependencies:
+      react: ^18.3.1
+
   react-dom@19.1.0:
     resolution: {integrity: sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==}
     peerDependencies:
@@ -7385,6 +7891,26 @@ packages:
     resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
     engines: {node: '>=0.10.0'}
 
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.1:
+    resolution: {integrity: sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-router-dom@6.30.1:
     resolution: {integrity: sha512-llKsgOkZdbPU1Eg3zK8lCn+sjD9wMRZZPuzmdWWX5SUs8OFkN5HnFVC0u5KMeMaC9aoancFI/KoLuKPqN+hxHw==}
     engines: {node: '>=14.0.0'}
@@ -7398,6 +7924,20 @@ packages:
     peerDependencies:
       react: '>=16.8'
 
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
+
   react@19.1.0:
     resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
     engines: {node: '>=0.10.0'}
@@ -7642,6 +8182,9 @@ packages:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
 
+  scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+
   scheduler@0.26.0:
     resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
 
@@ -7943,6 +8486,19 @@ packages:
   style-search@0.1.0:
     resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
 
+  styled-jsx@5.1.1:
+    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+
   styled-jsx@5.1.6:
     resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
     engines: {node: '>= 12.0.0'}
@@ -8057,9 +8613,20 @@ packages:
     resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
     engines: {node: '>=10.0.0'}
 
+  tailwind-merge@2.6.0:
+    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
+
   tailwind-merge@3.3.0:
     resolution: {integrity: sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ==}
 
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
+  tailwindcss@4.1.10:
+    resolution: {integrity: sha512-P3nr6WkvKV/ONsTzj6Gb57sWPMX29EPNPopo7+FcpkQaNsrNpZ1pv8QmrYI2RqEKD7mlGqLnGovlcYnBK0IqUA==}
+
   tailwindcss@4.1.8:
     resolution: {integrity: sha512-kjeW8gjdxasbmFKpVGrGd5T4i40mV5J2Rasw48QARfYeQ8YS9x02ON9SFWax3Qf616rt4Cp3nVNIj6Hd1mP3og==}
 
@@ -8490,6 +9057,31 @@ packages:
   urlpattern-polyfill@8.0.2:
     resolution: {integrity: sha512-Qp95D4TPJl1kC9SKigDcqgyM2VDVO4RiJc2d4qe5GrYm+zbIQCWWKAFaJNQ4BhdFeDGwBmAxqJBwWSJDb9T3BQ==}
 
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sync-external-store@1.5.0:
+    resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -8774,6 +9366,10 @@ packages:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
     engines: {node: '>=18'}
 
+  watchpack@2.4.0:
+    resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==}
+    engines: {node: '>=10.13.0'}
+
   wcwidth@1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
 
@@ -9066,6 +9662,8 @@ snapshots:
     dependencies:
       '@algolia/client-common': 5.25.0
 
+  '@alloc/quick-lru@5.2.0': {}
+
   '@ampproject/remapping@2.3.0':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.8
@@ -9521,9 +10119,9 @@ snapshots:
 
   '@docsearch/css@3.8.2': {}
 
-  '@docsearch/js@3.8.2(@algolia/client-search@5.25.0)(search-insights@2.17.3)':
+  '@docsearch/js@3.8.2(@algolia/client-search@5.25.0)(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)':
     dependencies:
-      '@docsearch/react': 3.8.2(@algolia/client-search@5.25.0)(search-insights@2.17.3)
+      '@docsearch/react': 3.8.2(@algolia/client-search@5.25.0)(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)
       preact: 10.26.7
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -9532,13 +10130,16 @@ snapshots:
       - react-dom
       - search-insights
 
-  '@docsearch/react@3.8.2(@algolia/client-search@5.25.0)(search-insights@2.17.3)':
+  '@docsearch/react@3.8.2(@algolia/client-search@5.25.0)(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)':
     dependencies:
       '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.25.0)(algoliasearch@5.25.0)(search-insights@2.17.3)
       '@algolia/autocomplete-preset-algolia': 1.17.7(@algolia/client-search@5.25.0)(algoliasearch@5.25.0)
       '@docsearch/css': 3.8.2
       algoliasearch: 5.25.0
     optionalDependencies:
+      '@types/react': 18.3.23
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
       search-insights: 2.17.3
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -9799,6 +10400,12 @@ snapshots:
       '@floating-ui/core': 1.7.1
       '@floating-ui/utils': 0.2.9
 
+  '@floating-ui/react-dom@2.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/dom': 1.7.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   '@floating-ui/react-dom@2.1.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@floating-ui/dom': 1.7.1
@@ -10116,37 +10723,70 @@ snapshots:
       - rollup
       - supports-color
 
+  '@next/env@14.0.4': {}
+
   '@next/env@15.3.2': {}
 
   '@next/eslint-plugin-next@13.5.11':
     dependencies:
       glob: 7.1.7
 
+  '@next/eslint-plugin-next@14.0.4':
+    dependencies:
+      glob: 7.1.7
+
   '@next/eslint-plugin-next@15.3.2':
     dependencies:
       fast-glob: 3.3.1
 
+  '@next/swc-darwin-arm64@14.0.4':
+    optional: true
+
   '@next/swc-darwin-arm64@15.3.2':
     optional: true
 
+  '@next/swc-darwin-x64@14.0.4':
+    optional: true
+
   '@next/swc-darwin-x64@15.3.2':
     optional: true
 
+  '@next/swc-linux-arm64-gnu@14.0.4':
+    optional: true
+
   '@next/swc-linux-arm64-gnu@15.3.2':
     optional: true
 
+  '@next/swc-linux-arm64-musl@14.0.4':
+    optional: true
+
   '@next/swc-linux-arm64-musl@15.3.2':
     optional: true
 
+  '@next/swc-linux-x64-gnu@14.0.4':
+    optional: true
+
   '@next/swc-linux-x64-gnu@15.3.2':
     optional: true
 
+  '@next/swc-linux-x64-musl@14.0.4':
+    optional: true
+
   '@next/swc-linux-x64-musl@15.3.2':
     optional: true
 
+  '@next/swc-win32-arm64-msvc@14.0.4':
+    optional: true
+
   '@next/swc-win32-arm64-msvc@15.3.2':
     optional: true
 
+  '@next/swc-win32-ia32-msvc@14.0.4':
+    optional: true
+
+  '@next/swc-win32-x64-msvc@14.0.4':
+    optional: true
+
   '@next/swc-win32-x64-msvc@15.3.2':
     optional: true
 
@@ -10643,12 +11283,143 @@ snapshots:
 
   '@poppinss/exception@1.2.1': {}
 
+  '@radix-ui/primitive@1.1.2': {}
+
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-avatar@1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-checkbox@1.3.2(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
   '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.5)(react@19.1.0)':
     dependencies:
       react: 19.1.0
     optionalDependencies:
       '@types/react': 19.1.5
 
+  '@radix-ui/react-context@1.1.2(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/react-direction@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/react-dismissable-layer@1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-dropdown-menu@2.1.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-focus-guards@1.1.2(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-id@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/react-label@2.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
   '@radix-ui/react-label@2.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -10658,21 +11429,181 @@ snapshots:
       '@types/react': 19.1.5
       '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
+  '@radix-ui/react-menu@2.1.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      aria-hidden: 1.2.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.7.1(@types/react@18.3.23)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-popper@1.2.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/rect': 1.1.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-presence@1.1.4(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
   '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.5)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.5)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.5
+      '@types/react-dom': 19.1.5(@types/react@19.1.5)
+
+  '@radix-ui/react-roving-focus@1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/react-slot@1.2.3(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/react-slot@1.2.3(@types/react@19.1.5)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.5
+
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+      use-sync-external-store: 1.5.0(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/react-use-previous@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/react-use-rect@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 19.1.5
-      '@types/react-dom': 19.1.5(@types/react@19.1.5)
+      '@types/react': 18.3.23
 
-  '@radix-ui/react-slot@1.2.3(@types/react@19.1.5)(react@19.1.0)':
+  '@radix-ui/react-use-size@1.1.1(@types/react@18.3.23)(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
-      react: 19.1.0
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 19.1.5
+      '@types/react': 18.3.23
+
+  '@radix-ui/rect@1.1.1': {}
 
   '@remix-run/router@1.23.0': {}
 
@@ -10913,6 +11844,20 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@swc/helpers@0.5.2':
+    dependencies:
+      tslib: 2.8.1
+
+  '@tailwindcss/node@4.1.10':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      enhanced-resolve: 5.18.1
+      jiti: 2.4.2
+      lightningcss: 1.30.1
+      magic-string: 0.30.17
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.10
+
   '@tailwindcss/node@4.1.8':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -10923,42 +11868,96 @@ snapshots:
       source-map-js: 1.2.1
       tailwindcss: 4.1.8
 
+  '@tailwindcss/oxide-android-arm64@4.1.10':
+    optional: true
+
   '@tailwindcss/oxide-android-arm64@4.1.8':
     optional: true
 
+  '@tailwindcss/oxide-darwin-arm64@4.1.10':
+    optional: true
+
   '@tailwindcss/oxide-darwin-arm64@4.1.8':
     optional: true
 
+  '@tailwindcss/oxide-darwin-x64@4.1.10':
+    optional: true
+
   '@tailwindcss/oxide-darwin-x64@4.1.8':
     optional: true
 
+  '@tailwindcss/oxide-freebsd-x64@4.1.10':
+    optional: true
+
   '@tailwindcss/oxide-freebsd-x64@4.1.8':
     optional: true
 
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.10':
+    optional: true
+
   '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.8':
     optional: true
 
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.10':
+    optional: true
+
   '@tailwindcss/oxide-linux-arm64-gnu@4.1.8':
     optional: true
 
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.10':
+    optional: true
+
   '@tailwindcss/oxide-linux-arm64-musl@4.1.8':
     optional: true
 
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.10':
+    optional: true
+
   '@tailwindcss/oxide-linux-x64-gnu@4.1.8':
     optional: true
 
+  '@tailwindcss/oxide-linux-x64-musl@4.1.10':
+    optional: true
+
   '@tailwindcss/oxide-linux-x64-musl@4.1.8':
     optional: true
 
+  '@tailwindcss/oxide-wasm32-wasi@4.1.10':
+    optional: true
+
   '@tailwindcss/oxide-wasm32-wasi@4.1.8':
     optional: true
 
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.10':
+    optional: true
+
   '@tailwindcss/oxide-win32-arm64-msvc@4.1.8':
     optional: true
 
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.10':
+    optional: true
+
   '@tailwindcss/oxide-win32-x64-msvc@4.1.8':
     optional: true
 
+  '@tailwindcss/oxide@4.1.10':
+    dependencies:
+      detect-libc: 2.0.4
+      tar: 7.4.3
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.10
+      '@tailwindcss/oxide-darwin-arm64': 4.1.10
+      '@tailwindcss/oxide-darwin-x64': 4.1.10
+      '@tailwindcss/oxide-freebsd-x64': 4.1.10
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.10
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.10
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.10
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.10
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.10
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.10
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.10
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.10
+
   '@tailwindcss/oxide@4.1.8':
     dependencies:
       detect-libc: 2.0.4
@@ -10977,6 +11976,14 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.1.8
       '@tailwindcss/oxide-win32-x64-msvc': 4.1.8
 
+  '@tailwindcss/postcss@4.1.10':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.1.10
+      '@tailwindcss/oxide': 4.1.10
+      postcss: 8.5.3
+      tailwindcss: 4.1.10
+
   '@tailwindcss/vite@4.1.8(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       '@tailwindcss/node': 4.1.8
@@ -11081,10 +12088,21 @@ snapshots:
     dependencies:
       parse-path: 7.1.0
 
+  '@types/prop-types@15.7.15': {}
+
+  '@types/react-dom@18.3.7(@types/react@18.3.23)':
+    dependencies:
+      '@types/react': 18.3.23
+
   '@types/react-dom@19.1.5(@types/react@19.1.5)':
     dependencies:
       '@types/react': 19.1.5
 
+  '@types/react@18.3.23':
+    dependencies:
+      '@types/prop-types': 15.7.15
+      csstype: 3.1.3
+
   '@types/react@19.1.5':
     dependencies:
       csstype: 3.1.3
@@ -11162,24 +12180,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)':
-    dependencies:
-      '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/scope-manager': 7.18.0
-      '@typescript-eslint/type-utils': 7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/utils': 7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/visitor-keys': 7.18.0
-      eslint: 9.28.0(jiti@2.4.2)
-      graphemer: 1.4.0
-      ignore: 5.3.2
-      natural-compare: 1.4.0
-      ts-api-utils: 1.4.3(typescript@5.8.3)
-    optionalDependencies:
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.32.1(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -11267,14 +12267,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)':
+  '@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.8.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 7.18.0
-      '@typescript-eslint/types': 7.18.0
-      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.8.3)
-      '@typescript-eslint/visitor-keys': 7.18.0
+      '@typescript-eslint/scope-manager': 6.21.0
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.8.3)
+      '@typescript-eslint/visitor-keys': 6.21.0
       debug: 4.4.1
-      eslint: 9.28.0(jiti@2.4.2)
+      eslint: 8.57.0
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -11323,11 +12323,6 @@ snapshots:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/visitor-keys': 6.21.0
 
-  '@typescript-eslint/scope-manager@7.18.0':
-    dependencies:
-      '@typescript-eslint/types': 7.18.0
-      '@typescript-eslint/visitor-keys': 7.18.0
-
   '@typescript-eslint/scope-manager@8.32.1':
     dependencies:
       '@typescript-eslint/types': 8.32.1
@@ -11378,18 +12373,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/type-utils@7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.8.3)
-      '@typescript-eslint/utils': 7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
-      debug: 4.4.1
-      eslint: 9.28.0(jiti@2.4.2)
-      ts-api-utils: 1.4.3(typescript@5.8.3)
-    optionalDependencies:
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/type-utils@8.32.1(eslint@8.57.0)(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.8.3)
@@ -11416,8 +12399,6 @@ snapshots:
 
   '@typescript-eslint/types@6.21.0': {}
 
-  '@typescript-eslint/types@7.18.0': {}
-
   '@typescript-eslint/types@8.32.1': {}
 
   '@typescript-eslint/types@8.33.1': {}
@@ -11465,14 +12446,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@7.18.0(typescript@5.8.3)':
+  '@typescript-eslint/typescript-estree@6.21.0(typescript@5.8.3)':
     dependencies:
-      '@typescript-eslint/types': 7.18.0
-      '@typescript-eslint/visitor-keys': 7.18.0
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/visitor-keys': 6.21.0
       debug: 4.4.1
       globby: 11.1.0
       is-glob: 4.0.3
-      minimatch: 9.0.5
+      minimatch: 9.0.3
       semver: 7.7.2
       ts-api-utils: 1.4.3(typescript@5.8.3)
     optionalDependencies:
@@ -11554,17 +12535,6 @@ snapshots:
       - supports-color
       - typescript
 
-  '@typescript-eslint/utils@7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.28.0(jiti@2.4.2))
-      '@typescript-eslint/scope-manager': 7.18.0
-      '@typescript-eslint/types': 7.18.0
-      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.8.3)
-      eslint: 9.28.0(jiti@2.4.2)
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
   '@typescript-eslint/utils@8.32.1(eslint@8.57.0)(typescript@5.8.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.7.0(eslint@8.57.0)
@@ -11609,11 +12579,6 @@ snapshots:
       '@typescript-eslint/types': 6.21.0
       eslint-visitor-keys: 3.4.3
 
-  '@typescript-eslint/visitor-keys@7.18.0':
-    dependencies:
-      '@typescript-eslint/types': 7.18.0
-      eslint-visitor-keys: 3.4.3
-
   '@typescript-eslint/visitor-keys@8.32.1':
     dependencies:
       '@typescript-eslint/types': 8.32.1
@@ -12129,14 +13094,14 @@ snapshots:
       '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6)
       '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.1.6)
       eslint: 8.57.0
-      eslint-config-airbnb: 19.0.4(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.37.5(eslint@8.57.0))(eslint@8.57.0)
-      eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0))(eslint@8.57.0)
-      eslint-config-airbnb-typescript: 17.1.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-config-airbnb: 19.0.4(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.37.5(eslint@8.57.0))(eslint@8.57.0)
+      eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-config-airbnb-typescript: 17.1.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6))(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0))(eslint@8.57.0)
       eslint-config-prettier: 8.10.0(eslint@8.57.0)
       eslint-plugin-eslint-plugin: 5.5.1(eslint@8.57.0)
       eslint-plugin-header: 3.1.1(eslint@8.57.0)
       eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)
-      eslint-plugin-jest: 27.9.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)(typescript@5.1.6)
+      eslint-plugin-jest: 27.9.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.0)
       eslint-plugin-node: 11.1.0(eslint@8.57.0)
       eslint-plugin-prettier: 4.2.1(eslint-config-prettier@8.10.0(eslint@8.57.0))(eslint@8.57.0)(prettier@2.8.8)
@@ -12328,6 +13293,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
   aria-query@5.3.0:
     dependencies:
       dequal: 2.0.3
@@ -13227,6 +14196,8 @@ snapshots:
 
   detect-libc@2.0.4: {}
 
+  detect-node-es@1.1.0: {}
+
   detective-amd@6.0.1:
     dependencies:
       ast-module-types: 6.0.1
@@ -13628,6 +14599,15 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
+  eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0))(eslint@8.57.0):
+    dependencies:
+      confusing-browser-globals: 1.0.11
+      eslint: 8.57.0
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)
+      object.assign: 4.1.7
+      object.entries: 1.1.9
+      semver: 6.3.1
+
   eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
       confusing-browser-globals: 1.0.11
@@ -13637,13 +14617,13 @@ snapshots:
       object.entries: 1.1.9
       semver: 6.3.1
 
-  eslint-config-airbnb-typescript@17.1.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0))(eslint@8.57.0):
+  eslint-config-airbnb-typescript@17.1.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6))(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)(typescript@5.7.3)
+      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6)
       '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.1.6)
       eslint: 8.57.0
-      eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)
+      eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)
 
   eslint-config-airbnb-typescript@17.1.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)(typescript@5.7.3))(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
@@ -13653,6 +14633,17 @@ snapshots:
       eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0))(eslint@8.57.0)
       eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)
 
+  eslint-config-airbnb@19.0.4(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.37.5(eslint@8.57.0))(eslint@8.57.0):
+    dependencies:
+      eslint: 8.57.0
+      eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.0)
+      eslint-plugin-react: 7.37.5(eslint@8.57.0)
+      eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0)
+      object.assign: 4.1.7
+      object.entries: 1.1.9
+
   eslint-config-airbnb@19.0.4(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.37.5(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
       eslint: 8.57.0
@@ -13669,16 +14660,35 @@ snapshots:
       '@eslint/compat': 1.2.9(eslint@8.57.0)
       eslint: 8.57.0
 
+  eslint-config-next@14.0.4(eslint-plugin-import-x@4.12.2(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3):
+    dependencies:
+      '@next/eslint-plugin-next': 14.0.4
+      '@rushstack/eslint-patch': 1.11.0
+      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.8.3)
+      eslint: 8.57.0
+      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import-x@4.12.2(eslint@8.57.0)(typescript@5.8.3))(eslint-plugin-import@2.31.0(eslint@8.57.0))(eslint@8.57.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.0)
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.0)
+      eslint-plugin-react: 7.37.5(eslint@8.57.0)
+      eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0)
+    optionalDependencies:
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - eslint-import-resolver-webpack
+      - eslint-plugin-import-x
+      - supports-color
+
   eslint-config-next@15.3.2(eslint-plugin-import-x@4.12.2(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3):
     dependencies:
       '@next/eslint-plugin-next': 15.3.2
       '@rushstack/eslint-patch': 1.11.0
-      '@typescript-eslint/eslint-plugin': 7.18.0(@typescript-eslint/parser@7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
-      '@typescript-eslint/parser': 7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
+      '@typescript-eslint/eslint-plugin': 8.33.1(@typescript-eslint/parser@8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
+      '@typescript-eslint/parser': 8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
       eslint: 9.28.0(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import-x@4.12.2(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-plugin-import@2.31.0)(eslint@9.28.0(jiti@2.4.2))
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.28.0(jiti@2.4.2))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.28.0(jiti@2.4.2))
       eslint-plugin-jsx-a11y: 6.10.2(eslint@9.28.0(jiti@2.4.2))
       eslint-plugin-react: 7.37.5(eslint@9.28.0(jiti@2.4.2))
       eslint-plugin-react-hooks: 5.2.0(eslint@9.28.0(jiti@2.4.2))
@@ -13705,6 +14715,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import-x@4.12.2(eslint@8.57.0)(typescript@5.8.3))(eslint-plugin-import@2.31.0(eslint@8.57.0))(eslint@8.57.0):
+    dependencies:
+      '@nolyfill/is-core-module': 1.0.39
+      debug: 4.4.1
+      eslint: 8.57.0
+      get-tsconfig: 4.10.1
+      is-bun-module: 2.0.0
+      stable-hash: 0.0.5
+      tinyglobby: 0.2.13
+      unrs-resolver: 1.7.2
+    optionalDependencies:
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.0)
+      eslint-plugin-import-x: 4.12.2(eslint@8.57.0)(typescript@5.8.3)
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-import-resolver-typescript@3.10.1(eslint-plugin-import-x@4.12.2(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-plugin-import@2.31.0)(eslint@9.28.0(jiti@2.4.2)):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
@@ -13716,7 +14742,7 @@ snapshots:
       tinyglobby: 0.2.13
       unrs-resolver: 1.7.2
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.28.0(jiti@2.4.2))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.28.0(jiti@2.4.2))
       eslint-plugin-import-x: 4.12.2(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
     transitivePeerDependencies:
       - supports-color
@@ -13745,11 +14771,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.28.0(jiti@2.4.2)):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import-x@4.12.2(eslint@8.57.0)(typescript@5.8.3))(eslint-plugin-import@2.31.0(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
+      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.8.3)
+      eslint: 8.57.0
+      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import-x@4.12.2(eslint@8.57.0)(typescript@5.8.3))(eslint-plugin-import@2.31.0(eslint@8.57.0))(eslint@8.57.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.28.0(jiti@2.4.2)):
+    dependencies:
+      debug: 3.2.7
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
       eslint: 9.28.0(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import-x@4.12.2(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-plugin-import@2.31.0)(eslint@9.28.0(jiti@2.4.2))
@@ -13867,7 +14904,36 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.28.0(jiti@2.4.2)):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.0):
+    dependencies:
+      '@rtsao/scc': 1.1.0
+      array-includes: 3.1.8
+      array.prototype.findlastindex: 1.2.6
+      array.prototype.flat: 1.3.3
+      array.prototype.flatmap: 1.3.3
+      debug: 3.2.7
+      doctrine: 2.1.0
+      eslint: 8.57.0
+      eslint-import-resolver-node: 0.3.9
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import-x@4.12.2(eslint@8.57.0)(typescript@5.8.3))(eslint-plugin-import@2.31.0(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
+      hasown: 2.0.2
+      is-core-module: 2.16.1
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      object.fromentries: 2.0.8
+      object.groupby: 1.0.3
+      object.values: 1.2.1
+      semver: 6.3.1
+      string.prototype.trimend: 1.0.9
+      tsconfig-paths: 3.15.0
+    optionalDependencies:
+      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.8.3)
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.28.0(jiti@2.4.2)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -13878,7 +14944,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 9.28.0(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.28.0(jiti@2.4.2))
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.28.0(jiti@2.4.2))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -13890,18 +14956,18 @@ snapshots:
       string.prototype.trimend: 1.0.9
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 7.18.0(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
+      '@typescript-eslint/parser': 8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-jest@27.9.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)(typescript@5.1.6):
+  eslint-plugin-jest@27.9.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6):
     dependencies:
       '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.1.6)
       eslint: 8.57.0
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.7.3))(eslint@8.57.0)(typescript@5.7.3)
+      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -14613,6 +15679,8 @@ snapshots:
       hasown: 2.0.2
       math-intrinsics: 1.1.0
 
+  get-nonce@1.0.1: {}
+
   get-port-please@3.1.2: {}
 
   get-proto@1.0.1:
@@ -14666,6 +15734,8 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
+  glob-to-regexp@0.4.1: {}
+
   glob@10.4.5:
     dependencies:
       foreground-child: 3.3.1
@@ -15538,6 +16608,10 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
+  lucide-react@0.294.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   lucide-react@0.294.0(react@19.1.0):
     dependencies:
       react: 19.1.0
@@ -15809,7 +16883,34 @@ snapshots:
       p-wait-for: 5.0.2
       qs: 6.14.0
 
-  next@15.3.2(@babel/core@7.27.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.89.0):
+  next@14.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.89.0):
+    dependencies:
+      '@next/env': 14.0.4
+      '@swc/helpers': 0.5.2
+      busboy: 1.6.0
+      caniuse-lite: 1.0.30001718
+      graceful-fs: 4.2.11
+      postcss: 8.4.31
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      styled-jsx: 5.1.1(react@18.3.1)
+      watchpack: 2.4.0
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 14.0.4
+      '@next/swc-darwin-x64': 14.0.4
+      '@next/swc-linux-arm64-gnu': 14.0.4
+      '@next/swc-linux-arm64-musl': 14.0.4
+      '@next/swc-linux-x64-gnu': 14.0.4
+      '@next/swc-linux-x64-musl': 14.0.4
+      '@next/swc-win32-arm64-msvc': 14.0.4
+      '@next/swc-win32-ia32-msvc': 14.0.4
+      '@next/swc-win32-x64-msvc': 14.0.4
+      sass: 1.89.0
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+
+  next@15.3.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.89.0):
     dependencies:
       '@next/env': 15.3.2
       '@swc/counter': 0.1.3
@@ -15819,7 +16920,7 @@ snapshots:
       postcss: 8.4.31
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      styled-jsx: 5.1.6(@babel/core@7.27.1)(react@19.1.0)
+      styled-jsx: 5.1.6(react@19.1.0)
     optionalDependencies:
       '@next/swc-darwin-arm64': 15.3.2
       '@next/swc-darwin-x64': 15.3.2
@@ -17034,6 +18135,12 @@ snapshots:
       defu: 6.1.4
       destr: 2.0.5
 
+  react-dom@18.3.1(react@18.3.1):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
+
   react-dom@19.1.0(react@19.1.0):
     dependencies:
       react: 19.1.0
@@ -17047,6 +18154,25 @@ snapshots:
 
   react-refresh@0.17.0: {}
 
+  react-remove-scroll-bar@2.3.8(@types/react@18.3.23)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-style-singleton: 2.2.3(@types/react@18.3.23)(react@18.3.1)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  react-remove-scroll@2.7.1(@types/react@18.3.23)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.8(@types/react@18.3.23)(react@18.3.1)
+      react-style-singleton: 2.2.3(@types/react@18.3.23)(react@18.3.1)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@18.3.23)(react@18.3.1)
+      use-sidecar: 1.1.3(@types/react@18.3.23)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+
   react-router-dom@6.30.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       '@remix-run/router': 1.23.0
@@ -17059,6 +18185,18 @@ snapshots:
       '@remix-run/router': 1.23.0
       react: 19.1.0
 
+  react-style-singleton@2.2.3(@types/react@18.3.23)(react@18.3.1):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  react@18.3.1:
+    dependencies:
+      loose-envify: 1.4.0
+
   react@19.1.0: {}
 
   read-package-up@11.0.0:
@@ -17378,6 +18516,10 @@ snapshots:
       xmlchars: 2.2.0
     optional: true
 
+  scheduler@0.23.2:
+    dependencies:
+      loose-envify: 1.4.0
+
   scheduler@0.26.0: {}
 
   scslre@0.3.0:
@@ -17758,12 +18900,15 @@ snapshots:
 
   style-search@0.1.0: {}
 
-  styled-jsx@5.1.6(@babel/core@7.27.1)(react@19.1.0):
+  styled-jsx@5.1.1(react@18.3.1):
+    dependencies:
+      client-only: 0.0.1
+      react: 18.3.1
+
+  styled-jsx@5.1.6(react@19.1.0):
     dependencies:
       client-only: 0.0.1
       react: 19.1.0
-    optionalDependencies:
-      '@babel/core': 7.27.1
 
   stylehacks@5.1.1(postcss@8.5.3):
     dependencies:
@@ -17917,8 +19062,16 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
+  tailwind-merge@2.6.0: {}
+
   tailwind-merge@3.3.0: {}
 
+  tailwindcss-animate@1.0.7(tailwindcss@4.1.10):
+    dependencies:
+      tailwindcss: 4.1.10
+
+  tailwindcss@4.1.10: {}
+
   tailwindcss@4.1.8: {}
 
   tapable@2.2.2: {}
@@ -18389,6 +19542,25 @@ snapshots:
 
   urlpattern-polyfill@8.0.2: {}
 
+  use-callback-ref@1.3.3(@types/react@18.3.23)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  use-sidecar@1.1.3(@types/react@18.3.23)(react@18.3.1):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  use-sync-external-store@1.5.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   util-deprecate@1.0.2: {}
 
   uuid@11.1.0: {}
@@ -18623,10 +19795,10 @@ snapshots:
       terser: 5.39.2
       yaml: 2.8.0
 
-  vitepress@1.6.3(@algolia/client-search@5.25.0)(@types/node@24.0.3)(axios@1.9.0)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.1)(postcss@8.5.3)(sass@1.89.0)(search-insights@2.17.3)(terser@5.39.2)(typescript@5.8.3):
+  vitepress@1.6.3(@algolia/client-search@5.25.0)(@types/node@24.0.3)(@types/react@18.3.23)(axios@1.9.0)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.1)(postcss@8.5.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.89.0)(search-insights@2.17.3)(terser@5.39.2)(typescript@5.8.3):
     dependencies:
       '@docsearch/css': 3.8.2
-      '@docsearch/js': 3.8.2(@algolia/client-search@5.25.0)(search-insights@2.17.3)
+      '@docsearch/js': 3.8.2(@algolia/client-search@5.25.0)(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)
       '@iconify-json/simple-icons': 1.2.35
       '@shikijs/core': 2.5.0
       '@shikijs/transformers': 2.5.0
@@ -18917,6 +20089,11 @@ snapshots:
       xml-name-validator: 5.0.0
     optional: true
 
+  watchpack@2.4.0:
+    dependencies:
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+
   wcwidth@1.0.1:
     dependencies:
       defaults: 1.0.4
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 2d4ba3b4a..c6169035a 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -2,10 +2,8 @@ packages:
   - 'docs'
   - 'packages/*'
   - '!packages/__legacy__'
-  - 'recipes/*'
-  - '!recipes/__legacy__/*'
-  - '!recipes/vue-vite'
-  - '!recipes/nuxt-vite'
+  - 'samples/*'
+  - '!samples/__legacy__/*'
 
 catalog:
   '@wso2/eslint-plugin': 'https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391'
diff --git a/recipes/vue-vite/.env b/recipes/vue-vite/.env
deleted file mode 100644
index 4222ba186..000000000
--- a/recipes/vue-vite/.env
+++ /dev/null
@@ -1,4 +0,0 @@
-VITE_ASGARDEO_BASE_URL=<your-asgardeo-tenant-url>
-VITE_ASGARDEO_CLIENT_ID=<your-client-id>
-VITE_ASGARDEO_SIGN_IN_REDIRECT_URL=<your-sign-in-redirect-url>
-VITE_ASGARDEO_SIGN_OUT_REDIRECT_URL=<your-sign-out-redirect-url>
\ No newline at end of file
diff --git a/recipes/nuxt-vite/.gitignore b/samples/__legacy__/nuxt-vite/.gitignore
similarity index 100%
rename from recipes/nuxt-vite/.gitignore
rename to samples/__legacy__/nuxt-vite/.gitignore
diff --git a/recipes/nuxt-vite/CHANGELOG.md b/samples/__legacy__/nuxt-vite/CHANGELOG.md
similarity index 100%
rename from recipes/nuxt-vite/CHANGELOG.md
rename to samples/__legacy__/nuxt-vite/CHANGELOG.md
diff --git a/recipes/nuxt-vite/README.md b/samples/__legacy__/nuxt-vite/README.md
similarity index 100%
rename from recipes/nuxt-vite/README.md
rename to samples/__legacy__/nuxt-vite/README.md
diff --git a/recipes/nuxt-vite/app.vue b/samples/__legacy__/nuxt-vite/app.vue
similarity index 100%
rename from recipes/nuxt-vite/app.vue
rename to samples/__legacy__/nuxt-vite/app.vue
diff --git a/recipes/nuxt-vite/assets/asgardeo.svg b/samples/__legacy__/nuxt-vite/assets/asgardeo.svg
similarity index 100%
rename from recipes/nuxt-vite/assets/asgardeo.svg
rename to samples/__legacy__/nuxt-vite/assets/asgardeo.svg
diff --git a/recipes/nuxt-vite/nuxt.config.ts b/samples/__legacy__/nuxt-vite/nuxt.config.ts
similarity index 100%
rename from recipes/nuxt-vite/nuxt.config.ts
rename to samples/__legacy__/nuxt-vite/nuxt.config.ts
diff --git a/recipes/nuxt-vite/package.json b/samples/__legacy__/nuxt-vite/package.json
similarity index 100%
rename from recipes/nuxt-vite/package.json
rename to samples/__legacy__/nuxt-vite/package.json
diff --git a/recipes/nuxt-vite/pages/index.vue b/samples/__legacy__/nuxt-vite/pages/index.vue
similarity index 100%
rename from recipes/nuxt-vite/pages/index.vue
rename to samples/__legacy__/nuxt-vite/pages/index.vue
diff --git a/recipes/nuxt-vite/pages/login.vue b/samples/__legacy__/nuxt-vite/pages/login.vue
similarity index 100%
rename from recipes/nuxt-vite/pages/login.vue
rename to samples/__legacy__/nuxt-vite/pages/login.vue
diff --git a/recipes/nuxt-vite/public/favicon.ico b/samples/__legacy__/nuxt-vite/public/favicon.ico
similarity index 100%
rename from recipes/nuxt-vite/public/favicon.ico
rename to samples/__legacy__/nuxt-vite/public/favicon.ico
diff --git a/recipes/nuxt-vite/public/images/logo.svg b/samples/__legacy__/nuxt-vite/public/images/logo.svg
similarity index 100%
rename from recipes/nuxt-vite/public/images/logo.svg
rename to samples/__legacy__/nuxt-vite/public/images/logo.svg
diff --git a/recipes/nuxt-vite/public/robots.txt b/samples/__legacy__/nuxt-vite/public/robots.txt
similarity index 100%
rename from recipes/nuxt-vite/public/robots.txt
rename to samples/__legacy__/nuxt-vite/public/robots.txt
diff --git a/recipes/nuxt-vite/server/api/auth/[...].ts b/samples/__legacy__/nuxt-vite/server/api/auth/[...].ts
similarity index 100%
rename from recipes/nuxt-vite/server/api/auth/[...].ts
rename to samples/__legacy__/nuxt-vite/server/api/auth/[...].ts
diff --git a/recipes/nuxt-vite/server/tsconfig.json b/samples/__legacy__/nuxt-vite/server/tsconfig.json
similarity index 100%
rename from recipes/nuxt-vite/server/tsconfig.json
rename to samples/__legacy__/nuxt-vite/server/tsconfig.json
diff --git a/recipes/nuxt-vite/tsconfig.json b/samples/__legacy__/nuxt-vite/tsconfig.json
similarity index 100%
rename from recipes/nuxt-vite/tsconfig.json
rename to samples/__legacy__/nuxt-vite/tsconfig.json
diff --git a/recipes/__legacy__/react-vite/.eslintrc.cjs b/samples/__legacy__/react-vite/.eslintrc.cjs
similarity index 100%
rename from recipes/__legacy__/react-vite/.eslintrc.cjs
rename to samples/__legacy__/react-vite/.eslintrc.cjs
diff --git a/recipes/__legacy__/react-vite/.gitignore b/samples/__legacy__/react-vite/.gitignore
similarity index 100%
rename from recipes/__legacy__/react-vite/.gitignore
rename to samples/__legacy__/react-vite/.gitignore
diff --git a/recipes/__legacy__/react-vite/CHANGELOG.md b/samples/__legacy__/react-vite/CHANGELOG.md
similarity index 100%
rename from recipes/__legacy__/react-vite/CHANGELOG.md
rename to samples/__legacy__/react-vite/CHANGELOG.md
diff --git a/recipes/__legacy__/react-vite/README.md b/samples/__legacy__/react-vite/README.md
similarity index 100%
rename from recipes/__legacy__/react-vite/README.md
rename to samples/__legacy__/react-vite/README.md
diff --git a/recipes/__legacy__/react-vite/index.html b/samples/__legacy__/react-vite/index.html
similarity index 100%
rename from recipes/__legacy__/react-vite/index.html
rename to samples/__legacy__/react-vite/index.html
diff --git a/recipes/__legacy__/react-vite/package.json b/samples/__legacy__/react-vite/package.json
similarity index 100%
rename from recipes/__legacy__/react-vite/package.json
rename to samples/__legacy__/react-vite/package.json
diff --git a/recipes/__legacy__/react-vite/public/vite.svg b/samples/__legacy__/react-vite/public/vite.svg
similarity index 100%
rename from recipes/__legacy__/react-vite/public/vite.svg
rename to samples/__legacy__/react-vite/public/vite.svg
diff --git a/recipes/__legacy__/react-vite/src/App.css b/samples/__legacy__/react-vite/src/App.css
similarity index 100%
rename from recipes/__legacy__/react-vite/src/App.css
rename to samples/__legacy__/react-vite/src/App.css
diff --git a/recipes/__legacy__/react-vite/src/App.tsx b/samples/__legacy__/react-vite/src/App.tsx
similarity index 100%
rename from recipes/__legacy__/react-vite/src/App.tsx
rename to samples/__legacy__/react-vite/src/App.tsx
diff --git a/recipes/__legacy__/react-vite/src/main.tsx b/samples/__legacy__/react-vite/src/main.tsx
similarity index 95%
rename from recipes/__legacy__/react-vite/src/main.tsx
rename to samples/__legacy__/react-vite/src/main.tsx
index d95552061..381370202 100644
--- a/recipes/__legacy__/react-vite/src/main.tsx
+++ b/samples/__legacy__/react-vite/src/main.tsx
@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
+import App from './App.js';
 import {AsgardeoProvider, UIAuthConfig} from '@asgardeo/react';
 
 const envVariables = import.meta.env;
diff --git a/recipes/__legacy__/react-vite/src/vite-env.d.ts b/samples/__legacy__/react-vite/src/vite-env.d.ts
similarity index 100%
rename from recipes/__legacy__/react-vite/src/vite-env.d.ts
rename to samples/__legacy__/react-vite/src/vite-env.d.ts
diff --git a/recipes/__legacy__/react-vite/tsconfig.json b/samples/__legacy__/react-vite/tsconfig.json
similarity index 100%
rename from recipes/__legacy__/react-vite/tsconfig.json
rename to samples/__legacy__/react-vite/tsconfig.json
diff --git a/recipes/__legacy__/react-vite/tsconfig.node.json b/samples/__legacy__/react-vite/tsconfig.node.json
similarity index 100%
rename from recipes/__legacy__/react-vite/tsconfig.node.json
rename to samples/__legacy__/react-vite/tsconfig.node.json
diff --git a/recipes/__legacy__/react-vite/vite.config.ts b/samples/__legacy__/react-vite/vite.config.ts
similarity index 100%
rename from recipes/__legacy__/react-vite/vite.config.ts
rename to samples/__legacy__/react-vite/vite.config.ts
diff --git a/recipes/vue-vite/.editorconfig b/samples/__legacy__/vue-vite/.editorconfig
similarity index 100%
rename from recipes/vue-vite/.editorconfig
rename to samples/__legacy__/vue-vite/.editorconfig
diff --git a/recipes/vue-vite/.eslintrc.cjs b/samples/__legacy__/vue-vite/.eslintrc.cjs
similarity index 100%
rename from recipes/vue-vite/.eslintrc.cjs
rename to samples/__legacy__/vue-vite/.eslintrc.cjs
diff --git a/recipes/vue-vite/.gitattributes b/samples/__legacy__/vue-vite/.gitattributes
similarity index 100%
rename from recipes/vue-vite/.gitattributes
rename to samples/__legacy__/vue-vite/.gitattributes
diff --git a/recipes/vue-vite/.gitignore b/samples/__legacy__/vue-vite/.gitignore
similarity index 100%
rename from recipes/vue-vite/.gitignore
rename to samples/__legacy__/vue-vite/.gitignore
diff --git a/recipes/vue-vite/.prettierrc.json b/samples/__legacy__/vue-vite/.prettierrc.json
similarity index 100%
rename from recipes/vue-vite/.prettierrc.json
rename to samples/__legacy__/vue-vite/.prettierrc.json
diff --git a/recipes/vue-vite/.vscode/extensions.json b/samples/__legacy__/vue-vite/.vscode/extensions.json
similarity index 100%
rename from recipes/vue-vite/.vscode/extensions.json
rename to samples/__legacy__/vue-vite/.vscode/extensions.json
diff --git a/recipes/vue-vite/CHANGELOG.md b/samples/__legacy__/vue-vite/CHANGELOG.md
similarity index 100%
rename from recipes/vue-vite/CHANGELOG.md
rename to samples/__legacy__/vue-vite/CHANGELOG.md
diff --git a/recipes/vue-vite/README.md b/samples/__legacy__/vue-vite/README.md
similarity index 100%
rename from recipes/vue-vite/README.md
rename to samples/__legacy__/vue-vite/README.md
diff --git a/recipes/vue-vite/env.d.ts b/samples/__legacy__/vue-vite/env.d.ts
similarity index 100%
rename from recipes/vue-vite/env.d.ts
rename to samples/__legacy__/vue-vite/env.d.ts
diff --git a/recipes/vue-vite/index.html b/samples/__legacy__/vue-vite/index.html
similarity index 100%
rename from recipes/vue-vite/index.html
rename to samples/__legacy__/vue-vite/index.html
diff --git a/recipes/vue-vite/package.json b/samples/__legacy__/vue-vite/package.json
similarity index 100%
rename from recipes/vue-vite/package.json
rename to samples/__legacy__/vue-vite/package.json
diff --git a/recipes/vue-vite/public/favicon.ico b/samples/__legacy__/vue-vite/public/favicon.ico
similarity index 100%
rename from recipes/vue-vite/public/favicon.ico
rename to samples/__legacy__/vue-vite/public/favicon.ico
diff --git a/recipes/vue-vite/src/App.vue b/samples/__legacy__/vue-vite/src/App.vue
similarity index 100%
rename from recipes/vue-vite/src/App.vue
rename to samples/__legacy__/vue-vite/src/App.vue
diff --git a/recipes/vue-vite/src/assets/asgardeo.svg b/samples/__legacy__/vue-vite/src/assets/asgardeo.svg
similarity index 100%
rename from recipes/vue-vite/src/assets/asgardeo.svg
rename to samples/__legacy__/vue-vite/src/assets/asgardeo.svg
diff --git a/recipes/vue-vite/src/assets/logo.svg b/samples/__legacy__/vue-vite/src/assets/logo.svg
similarity index 100%
rename from recipes/vue-vite/src/assets/logo.svg
rename to samples/__legacy__/vue-vite/src/assets/logo.svg
diff --git a/recipes/vue-vite/src/assets/main.css b/samples/__legacy__/vue-vite/src/assets/main.css
similarity index 100%
rename from recipes/vue-vite/src/assets/main.css
rename to samples/__legacy__/vue-vite/src/assets/main.css
diff --git a/recipes/vue-vite/src/components/AuthLayout.vue b/samples/__legacy__/vue-vite/src/components/AuthLayout.vue
similarity index 100%
rename from recipes/vue-vite/src/components/AuthLayout.vue
rename to samples/__legacy__/vue-vite/src/components/AuthLayout.vue
diff --git a/recipes/vue-vite/src/components/SignInBtn.vue b/samples/__legacy__/vue-vite/src/components/SignInBtn.vue
similarity index 100%
rename from recipes/vue-vite/src/components/SignInBtn.vue
rename to samples/__legacy__/vue-vite/src/components/SignInBtn.vue
diff --git a/recipes/vue-vite/src/images/footer.png b/samples/__legacy__/vue-vite/src/images/footer.png
similarity index 100%
rename from recipes/vue-vite/src/images/footer.png
rename to samples/__legacy__/vue-vite/src/images/footer.png
diff --git a/recipes/vue-vite/src/main.ts b/samples/__legacy__/vue-vite/src/main.ts
similarity index 100%
rename from recipes/vue-vite/src/main.ts
rename to samples/__legacy__/vue-vite/src/main.ts
diff --git a/recipes/vue-vite/src/router/index.ts b/samples/__legacy__/vue-vite/src/router/index.ts
similarity index 100%
rename from recipes/vue-vite/src/router/index.ts
rename to samples/__legacy__/vue-vite/src/router/index.ts
diff --git a/recipes/vue-vite/src/shims-vue.d.ts b/samples/__legacy__/vue-vite/src/shims-vue.d.ts
similarity index 100%
rename from recipes/vue-vite/src/shims-vue.d.ts
rename to samples/__legacy__/vue-vite/src/shims-vue.d.ts
diff --git a/recipes/vue-vite/src/views/HomeView.vue b/samples/__legacy__/vue-vite/src/views/HomeView.vue
similarity index 100%
rename from recipes/vue-vite/src/views/HomeView.vue
rename to samples/__legacy__/vue-vite/src/views/HomeView.vue
diff --git a/recipes/vue-vite/src/views/LandingView.vue b/samples/__legacy__/vue-vite/src/views/LandingView.vue
similarity index 100%
rename from recipes/vue-vite/src/views/LandingView.vue
rename to samples/__legacy__/vue-vite/src/views/LandingView.vue
diff --git a/recipes/vue-vite/tsconfig.app.json b/samples/__legacy__/vue-vite/tsconfig.app.json
similarity index 100%
rename from recipes/vue-vite/tsconfig.app.json
rename to samples/__legacy__/vue-vite/tsconfig.app.json
diff --git a/recipes/vue-vite/tsconfig.eslint.json b/samples/__legacy__/vue-vite/tsconfig.eslint.json
similarity index 100%
rename from recipes/vue-vite/tsconfig.eslint.json
rename to samples/__legacy__/vue-vite/tsconfig.eslint.json
diff --git a/recipes/vue-vite/tsconfig.json b/samples/__legacy__/vue-vite/tsconfig.json
similarity index 100%
rename from recipes/vue-vite/tsconfig.json
rename to samples/__legacy__/vue-vite/tsconfig.json
diff --git a/recipes/vue-vite/tsconfig.node.json b/samples/__legacy__/vue-vite/tsconfig.node.json
similarity index 100%
rename from recipes/vue-vite/tsconfig.node.json
rename to samples/__legacy__/vue-vite/tsconfig.node.json
diff --git a/recipes/vue-vite/tsconfig.vitest.json b/samples/__legacy__/vue-vite/tsconfig.vitest.json
similarity index 100%
rename from recipes/vue-vite/tsconfig.vitest.json
rename to samples/__legacy__/vue-vite/tsconfig.vitest.json
diff --git a/recipes/vue-vite/vite.config.ts b/samples/__legacy__/vue-vite/vite.config.ts
similarity index 100%
rename from recipes/vue-vite/vite.config.ts
rename to samples/__legacy__/vue-vite/vite.config.ts
diff --git a/recipes/vue-vite/vitest.config.ts b/samples/__legacy__/vue-vite/vitest.config.ts
similarity index 100%
rename from recipes/vue-vite/vitest.config.ts
rename to samples/__legacy__/vue-vite/vitest.config.ts
diff --git a/recipes/create-next-app-ts-app-router/.gitignore b/samples/teamspace-nextjs-1/.gitignore
similarity index 100%
rename from recipes/create-next-app-ts-app-router/.gitignore
rename to samples/teamspace-nextjs-1/.gitignore
diff --git a/recipes/create-next-app-ts-app-router/README.md b/samples/teamspace-nextjs-1/README.md
similarity index 100%
rename from recipes/create-next-app-ts-app-router/README.md
rename to samples/teamspace-nextjs-1/README.md
diff --git a/recipes/create-next-app-ts-app-router/app/favicon.ico b/samples/teamspace-nextjs-1/app/favicon.ico
similarity index 100%
rename from recipes/create-next-app-ts-app-router/app/favicon.ico
rename to samples/teamspace-nextjs-1/app/favicon.ico
diff --git a/recipes/create-next-app-ts-app-router/app/globals.css b/samples/teamspace-nextjs-1/app/globals.css
similarity index 100%
rename from recipes/create-next-app-ts-app-router/app/globals.css
rename to samples/teamspace-nextjs-1/app/globals.css
diff --git a/recipes/create-next-app-ts-app-router/app/layout.tsx b/samples/teamspace-nextjs-1/app/layout.tsx
similarity index 100%
rename from recipes/create-next-app-ts-app-router/app/layout.tsx
rename to samples/teamspace-nextjs-1/app/layout.tsx
diff --git a/recipes/create-next-app-ts-app-router/app/page.module.css b/samples/teamspace-nextjs-1/app/page.module.css
similarity index 100%
rename from recipes/create-next-app-ts-app-router/app/page.module.css
rename to samples/teamspace-nextjs-1/app/page.module.css
diff --git a/recipes/create-next-app-ts-app-router/app/page.tsx b/samples/teamspace-nextjs-1/app/page.tsx
similarity index 100%
rename from recipes/create-next-app-ts-app-router/app/page.tsx
rename to samples/teamspace-nextjs-1/app/page.tsx
diff --git a/recipes/create-next-app-ts-app-router/env.local.example b/samples/teamspace-nextjs-1/env.local.example
similarity index 100%
rename from recipes/create-next-app-ts-app-router/env.local.example
rename to samples/teamspace-nextjs-1/env.local.example
diff --git a/recipes/create-next-app-ts-app-router/eslint.config.mjs b/samples/teamspace-nextjs-1/eslint.config.mjs
similarity index 100%
rename from recipes/create-next-app-ts-app-router/eslint.config.mjs
rename to samples/teamspace-nextjs-1/eslint.config.mjs
diff --git a/recipes/create-next-app-ts-app-router/middleware.ts b/samples/teamspace-nextjs-1/middleware.ts
similarity index 100%
rename from recipes/create-next-app-ts-app-router/middleware.ts
rename to samples/teamspace-nextjs-1/middleware.ts
diff --git a/recipes/create-next-app-ts-app-router/next.config.ts b/samples/teamspace-nextjs-1/next.config.ts
similarity index 100%
rename from recipes/create-next-app-ts-app-router/next.config.ts
rename to samples/teamspace-nextjs-1/next.config.ts
diff --git a/recipes/create-next-app-ts-app-router/package.json b/samples/teamspace-nextjs-1/package.json
similarity index 100%
rename from recipes/create-next-app-ts-app-router/package.json
rename to samples/teamspace-nextjs-1/package.json
diff --git a/recipes/create-next-app-ts-app-router/public/file.svg b/samples/teamspace-nextjs-1/public/file.svg
similarity index 100%
rename from recipes/create-next-app-ts-app-router/public/file.svg
rename to samples/teamspace-nextjs-1/public/file.svg
diff --git a/recipes/create-next-app-ts-app-router/public/globe.svg b/samples/teamspace-nextjs-1/public/globe.svg
similarity index 100%
rename from recipes/create-next-app-ts-app-router/public/globe.svg
rename to samples/teamspace-nextjs-1/public/globe.svg
diff --git a/recipes/create-next-app-ts-app-router/public/next.svg b/samples/teamspace-nextjs-1/public/next.svg
similarity index 100%
rename from recipes/create-next-app-ts-app-router/public/next.svg
rename to samples/teamspace-nextjs-1/public/next.svg
diff --git a/recipes/create-next-app-ts-app-router/public/vercel.svg b/samples/teamspace-nextjs-1/public/vercel.svg
similarity index 100%
rename from recipes/create-next-app-ts-app-router/public/vercel.svg
rename to samples/teamspace-nextjs-1/public/vercel.svg
diff --git a/recipes/create-next-app-ts-app-router/public/window.svg b/samples/teamspace-nextjs-1/public/window.svg
similarity index 100%
rename from recipes/create-next-app-ts-app-router/public/window.svg
rename to samples/teamspace-nextjs-1/public/window.svg
diff --git a/recipes/create-next-app-ts-app-router/tsconfig.json b/samples/teamspace-nextjs-1/tsconfig.json
similarity index 100%
rename from recipes/create-next-app-ts-app-router/tsconfig.json
rename to samples/teamspace-nextjs-1/tsconfig.json
diff --git a/samples/teamspace-nextjs/.gitignore b/samples/teamspace-nextjs/.gitignore
new file mode 100644
index 000000000..5ef6a5207
--- /dev/null
+++ b/samples/teamspace-nextjs/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/samples/teamspace-nextjs/README.md b/samples/teamspace-nextjs/README.md
new file mode 100644
index 000000000..e215bc4cc
--- /dev/null
+++ b/samples/teamspace-nextjs/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/samples/teamspace-nextjs/app/actions/auth.ts b/samples/teamspace-nextjs/app/actions/auth.ts
new file mode 100644
index 000000000..5e591ac5a
--- /dev/null
+++ b/samples/teamspace-nextjs/app/actions/auth.ts
@@ -0,0 +1,29 @@
+"use server"
+
+import { redirect } from "next/navigation"
+import { login, signup, logout } from "@/lib/auth"
+
+export async function loginAction(formData: FormData) {
+  const result = await login(formData)
+
+  if (result.success) {
+    redirect("/dashboard")
+  }
+
+  return result
+}
+
+export async function signupAction(formData: FormData) {
+  const result = await signup(formData)
+
+  if (result.success) {
+    redirect("/dashboard")
+  }
+
+  return result
+}
+
+export async function logoutAction() {
+  await logout()
+  redirect("/")
+}
diff --git a/samples/teamspace-nextjs/app/auth/signin/page.tsx b/samples/teamspace-nextjs/app/auth/signin/page.tsx
new file mode 100644
index 000000000..d96320f03
--- /dev/null
+++ b/samples/teamspace-nextjs/app/auth/signin/page.tsx
@@ -0,0 +1,135 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { Users, Eye, EyeOff } from "lucide-react"
+import { useAuth } from "@/hooks/use-auth"
+
+export default function SignInPage() {
+  const { signIn } = useAuth()
+  const [showPassword, setShowPassword] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState("")
+  const [formData, setFormData] = useState({
+    email: "demo@teamspace.com",
+    password: "password",
+  })
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+    setError("")
+
+    try {
+      await signIn(formData.email, formData.password)
+    } catch (err) {
+      setError("Invalid email or password")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-background to-purple-50 p-4">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <Link href="/" className="inline-flex items-center justify-center mb-4">
+            <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
+              <Users className="h-6 w-6 text-primary-foreground" />
+            </div>
+            <span className="ml-2 text-2xl font-bold">Teamspace</span>
+          </Link>
+          <h1 className="text-2xl font-bold">Welcome back</h1>
+          <p className="text-muted-foreground mt-2">Sign in to your account to continue</p>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Sign in</CardTitle>
+            <CardDescription>Enter your email and password to access your account</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="demo@teamspace.com"
+                  value={formData.email}
+                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                  required
+                  disabled={isLoading}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
+                <div className="relative">
+                  <Input
+                    id="password"
+                    type={showPassword ? "text" : "password"}
+                    placeholder="password"
+                    value={formData.password}
+                    onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                    required
+                    disabled={isLoading}
+                  />
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                    onClick={() => setShowPassword(!showPassword)}
+                    disabled={isLoading}
+                  >
+                    {showPassword ? (
+                      <EyeOff className="h-4 w-4 text-muted-foreground" />
+                    ) : (
+                      <Eye className="h-4 w-4 text-muted-foreground" />
+                    )}
+                  </Button>
+                </div>
+              </div>
+
+              {error && (
+                <Alert variant="destructive">
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              )}
+
+              <Button type="submit" className="w-full" disabled={isLoading}>
+                {isLoading ? "Signing in..." : "Sign in"}
+              </Button>
+            </form>
+
+            <div className="mt-6 p-4 bg-muted rounded-lg">
+              <p className="text-sm font-medium mb-2">Demo Credentials:</p>
+              <p className="text-sm text-muted-foreground">Email: demo@teamspace.com</p>
+              <p className="text-sm text-muted-foreground">Password: password</p>
+            </div>
+
+            <div className="mt-6 text-center text-sm">
+              <span className="text-muted-foreground">Don't have an account? </span>
+              <Link href="/auth/signup" className="text-primary hover:underline font-medium">
+                Sign up
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="mt-8 text-center">
+          <Link href="/" className="text-sm text-muted-foreground hover:text-foreground">
+            ← Back to home
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/samples/teamspace-nextjs/app/auth/signup/page.tsx b/samples/teamspace-nextjs/app/auth/signup/page.tsx
new file mode 100644
index 000000000..a1c221ecf
--- /dev/null
+++ b/samples/teamspace-nextjs/app/auth/signup/page.tsx
@@ -0,0 +1,170 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Users, Eye, EyeOff } from "lucide-react"
+import { useAuth } from "@/hooks/use-auth"
+
+export default function SignUpPage() {
+  const { signUp } = useAuth()
+  const [showPassword, setShowPassword] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState("")
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    password: "",
+    acceptTerms: false,
+  })
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+    setError("")
+
+    if (!formData.acceptTerms) {
+      setError("Please accept the terms and conditions")
+      setIsLoading(false)
+      return
+    }
+
+    try {
+      await signUp(formData.name, formData.email, formData.password)
+    } catch (err) {
+      setError("Failed to create account")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-background to-purple-50 p-4">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <Link href="/" className="inline-flex items-center justify-center mb-4">
+            <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
+              <Users className="h-6 w-6 text-primary-foreground" />
+            </div>
+            <span className="ml-2 text-2xl font-bold">Teamspace</span>
+          </Link>
+          <h1 className="text-2xl font-bold">Create your account</h1>
+          <p className="text-muted-foreground mt-2">Start collaborating with your team today</p>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Sign up</CardTitle>
+            <CardDescription>Create your account to get started with Teamspace</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="name">Full Name</Label>
+                <Input
+                  id="name"
+                  type="text"
+                  placeholder="John Doe"
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  required
+                  disabled={isLoading}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="john@company.com"
+                  value={formData.email}
+                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                  required
+                  disabled={isLoading}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
+                <div className="relative">
+                  <Input
+                    id="password"
+                    type={showPassword ? "text" : "password"}
+                    placeholder="Create a strong password"
+                    value={formData.password}
+                    onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                    required
+                    disabled={isLoading}
+                    minLength={8}
+                  />
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                    onClick={() => setShowPassword(!showPassword)}
+                    disabled={isLoading}
+                  >
+                    {showPassword ? (
+                      <EyeOff className="h-4 w-4 text-muted-foreground" />
+                    ) : (
+                      <Eye className="h-4 w-4 text-muted-foreground" />
+                    )}
+                  </Button>
+                </div>
+                <p className="text-xs text-muted-foreground">Password must be at least 8 characters long</p>
+              </div>
+
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="terms"
+                  checked={formData.acceptTerms}
+                  onCheckedChange={(checked) => setFormData({ ...formData, acceptTerms: checked as boolean })}
+                />
+                <Label htmlFor="terms" className="text-sm">
+                  I agree to the{" "}
+                  <Link href="/terms" className="text-primary hover:underline">
+                    Terms of Service
+                  </Link>{" "}
+                  and{" "}
+                  <Link href="/privacy" className="text-primary hover:underline">
+                    Privacy Policy
+                  </Link>
+                </Label>
+              </div>
+
+              {error && (
+                <Alert variant="destructive">
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              )}
+
+              <Button type="submit" className="w-full" disabled={isLoading}>
+                {isLoading ? "Creating account..." : "Create account"}
+              </Button>
+            </form>
+
+            <div className="mt-6 text-center text-sm">
+              <span className="text-muted-foreground">Already have an account? </span>
+              <Link href="/auth/signin" className="text-primary hover:underline font-medium">
+                Sign in
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="mt-8 text-center">
+          <Link href="/" className="text-sm text-muted-foreground hover:text-foreground">
+            ← Back to home
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/samples/teamspace-nextjs/app/dashboard/dashboard-client.tsx b/samples/teamspace-nextjs/app/dashboard/dashboard-client.tsx
new file mode 100644
index 000000000..a276a4b74
--- /dev/null
+++ b/samples/teamspace-nextjs/app/dashboard/dashboard-client.tsx
@@ -0,0 +1,224 @@
+"use client"
+
+import { useAuth } from "@/hooks/use-auth"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Users, MessageSquare, Calendar, FileText, TrendingUp, Clock, CheckCircle2, AlertCircle } from "lucide-react"
+import { redirect } from "next/navigation"
+import { useEffect } from "react"
+
+export function DashboardClient() {
+  const { user, currentOrg, isAuthenticated, isLoading } = useAuth()
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      redirect("/")
+    }
+  }, [isAuthenticated, isLoading])
+
+  if (isLoading) {
+    return <div className="flex items-center justify-center min-h-screen">Loading...</div>
+  }
+
+  if (!isAuthenticated) {
+    return null
+  }
+
+  const stats = [
+    {
+      name: "Active Projects",
+      value: "12",
+      change: "+2.1%",
+      changeType: "positive" as const,
+      icon: FileText,
+    },
+    {
+      name: "Team Members",
+      value: currentOrg?.memberCount.toString() || "0",
+      change: "+5.4%",
+      changeType: "positive" as const,
+      icon: Users,
+    },
+    {
+      name: "Messages Today",
+      value: "89",
+      change: "+12.5%",
+      changeType: "positive" as const,
+      icon: MessageSquare,
+    },
+    {
+      name: "Meetings This Week",
+      value: "7",
+      change: "-2.3%",
+      changeType: "negative" as const,
+      icon: Calendar,
+    },
+  ]
+
+  const recentActivity = [
+    {
+      id: 1,
+      user: "Sarah Chen",
+      action: 'completed task "Design Review"',
+      time: "2 hours ago",
+      type: "completed",
+    },
+    {
+      id: 2,
+      user: "Mike Johnson",
+      action: 'created new project "Mobile App"',
+      time: "4 hours ago",
+      type: "created",
+    },
+    {
+      id: 3,
+      user: "Emily Davis",
+      action: "scheduled team meeting",
+      time: "6 hours ago",
+      type: "scheduled",
+    },
+    {
+      id: 4,
+      user: "Alex Rodriguez",
+      action: 'uploaded 3 files to "Q4 Planning"',
+      time: "1 day ago",
+      type: "uploaded",
+    },
+  ]
+
+  const upcomingTasks = [
+    {
+      id: 1,
+      title: "Review quarterly reports",
+      dueDate: "Today, 3:00 PM",
+      priority: "high" as const,
+      project: "Q4 Planning",
+    },
+    {
+      id: 2,
+      title: "Team standup meeting",
+      dueDate: "Tomorrow, 9:00 AM",
+      priority: "medium" as const,
+      project: "Daily Operations",
+    },
+    {
+      id: 3,
+      title: "Client presentation prep",
+      dueDate: "Friday, 2:00 PM",
+      priority: "high" as const,
+      project: "Client Work",
+    },
+  ]
+
+  return (
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-foreground">Welcome back, {user?.name}!</h1>
+        <p className="text-muted-foreground mt-2">Here's what's happening with {currentOrg?.name} today.</p>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        {stats.map((stat) => {
+          const Icon = stat.icon
+          return (
+            <Card key={stat.name}>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">{stat.name}</CardTitle>
+                <Icon className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{stat.value}</div>
+                <div className="flex items-center text-xs text-muted-foreground">
+                  <TrendingUp
+                    className={`h-3 w-3 mr-1 ${stat.changeType === "positive" ? "text-green-500" : "text-red-500"}`}
+                  />
+                  <span className={stat.changeType === "positive" ? "text-green-600" : "text-red-600"}>
+                    {stat.change}
+                  </span>
+                  <span className="ml-1">from last month</span>
+                </div>
+              </CardContent>
+            </Card>
+          )
+        })}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        {/* Recent Activity */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Recent Activity</CardTitle>
+            <CardDescription>Latest updates from your team</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {recentActivity.map((activity) => (
+                <div key={activity.id} className="flex items-start space-x-3">
+                  <div className="flex-shrink-0">
+                    {activity.type === "completed" && (
+                      <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
+                        <CheckCircle2 className="h-4 w-4 text-green-600" />
+                      </div>
+                    )}
+                    {activity.type === "created" && (
+                      <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
+                        <FileText className="h-4 w-4 text-blue-600" />
+                      </div>
+                    )}
+                    {activity.type === "scheduled" && (
+                      <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
+                        <Calendar className="h-4 w-4 text-purple-600" />
+                      </div>
+                    )}
+                    {activity.type === "uploaded" && (
+                      <div className="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center">
+                        <FileText className="h-4 w-4 text-orange-600" />
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm text-foreground">
+                      <span className="font-medium">{activity.user}</span> {activity.action}
+                    </p>
+                    <p className="text-xs text-muted-foreground mt-1">{activity.time}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Upcoming Tasks */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Upcoming Tasks</CardTitle>
+            <CardDescription>Your tasks and deadlines</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {upcomingTasks.map((task) => (
+                <div key={task.id} className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
+                  <div className="flex-1">
+                    <h3 className="text-sm font-medium text-foreground">{task.title}</h3>
+                    <p className="text-xs text-muted-foreground mt-1">{task.project}</p>
+                  </div>
+                  <div className="flex items-center space-x-3">
+                    <div className="flex items-center text-xs text-muted-foreground">
+                      <Clock className="h-3 w-3 mr-1" />
+                      {task.dueDate}
+                    </div>
+                    <Badge variant={task.priority === "high" ? "destructive" : "secondary"} className="text-xs">
+                      {task.priority === "high" && <AlertCircle className="h-3 w-3 mr-1" />}
+                      {task.priority}
+                    </Badge>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/samples/teamspace-nextjs/app/dashboard/page.tsx b/samples/teamspace-nextjs/app/dashboard/page.tsx
new file mode 100644
index 000000000..02a2b8436
--- /dev/null
+++ b/samples/teamspace-nextjs/app/dashboard/page.tsx
@@ -0,0 +1,258 @@
+"use client"
+
+import { useAuth } from "@/hooks/use-auth"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Users, MessageSquare, Calendar, FileText, TrendingUp, Clock, CheckCircle2, AlertCircle } from "lucide-react"
+import { redirect } from "next/navigation"
+import { useEffect } from "react"
+import { Header } from "@/components/header"
+
+export default function DashboardPage() {
+  const { user, currentOrg, isAuthenticated, isLoading } = useAuth()
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      redirect("/")
+    }
+  }, [isAuthenticated, isLoading])
+
+  if (isLoading) {
+    return <div className="flex items-center justify-center min-h-screen">Loading...</div>
+  }
+
+  if (!isAuthenticated) {
+    return null
+  }
+
+  const stats = [
+    {
+      name: "Active Projects",
+      value: "12",
+      change: "+2.1%",
+      changeType: "positive" as const,
+      icon: FileText,
+    },
+    {
+      name: "Team Members",
+      value: currentOrg?.memberCount.toString() || "0",
+      change: "+5.4%",
+      changeType: "positive" as const,
+      icon: Users,
+    },
+    {
+      name: "Messages Today",
+      value: "89",
+      change: "+12.5%",
+      changeType: "positive" as const,
+      icon: MessageSquare,
+    },
+    {
+      name: "Meetings This Week",
+      value: "7",
+      change: "-2.3%",
+      changeType: "negative" as const,
+      icon: Calendar,
+    },
+  ]
+
+  const recentActivity = [
+    {
+      id: 1,
+      user: "Sarah Chen",
+      action: 'completed task "Design Review"',
+      time: "2 hours ago",
+      type: "completed",
+    },
+    {
+      id: 2,
+      user: "Mike Johnson",
+      action: 'created new project "Mobile App"',
+      time: "4 hours ago",
+      type: "created",
+    },
+    {
+      id: 3,
+      user: "Emily Davis",
+      action: "scheduled team meeting",
+      time: "6 hours ago",
+      type: "scheduled",
+    },
+    {
+      id: 4,
+      user: "Alex Rodriguez",
+      action: 'uploaded 3 files to "Q4 Planning"',
+      time: "1 day ago",
+      type: "uploaded",
+    },
+  ]
+
+  const upcomingTasks = [
+    {
+      id: 1,
+      title: "Review quarterly reports",
+      dueDate: "Today, 3:00 PM",
+      priority: "high" as const,
+      project: "Q4 Planning",
+    },
+    {
+      id: 2,
+      title: "Team standup meeting",
+      dueDate: "Tomorrow, 9:00 AM",
+      priority: "medium" as const,
+      project: "Daily Operations",
+    },
+    {
+      id: 3,
+      title: "Client presentation prep",
+      dueDate: "Friday, 2:00 PM",
+      priority: "high" as const,
+      project: "Client Work",
+    },
+  ]
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-foreground">Welcome back, {user?.name}!</h1>
+          <p className="text-muted-foreground mt-2">Here's what's happening with {currentOrg?.name} today.</p>
+        </div>
+
+        {/* Stats Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+          {stats.map((stat) => {
+            const Icon = stat.icon
+            return (
+              <Card key={stat.name}>
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium">{stat.name}</CardTitle>
+                  <Icon className="h-4 w-4 text-muted-foreground" />
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold">{stat.value}</div>
+                  <div className="flex items-center text-xs text-muted-foreground">
+                    <TrendingUp
+                      className={`h-3 w-3 mr-1 ${stat.changeType === "positive" ? "text-green-500" : "text-red-500"}`}
+                    />
+                    <span className={stat.changeType === "positive" ? "text-green-600" : "text-red-600"}>
+                      {stat.change}
+                    </span>
+                    <span className="ml-1">from last month</span>
+                  </div>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          {/* Recent Activity */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Recent Activity</CardTitle>
+              <CardDescription>Latest updates from your team</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                {recentActivity.map((activity) => (
+                  <div key={activity.id} className="flex items-start space-x-3">
+                    <div className="flex-shrink-0">
+                      {activity.type === "completed" && (
+                        <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
+                          <CheckCircle2 className="h-4 w-4 text-green-600" />
+                        </div>
+                      )}
+                      {activity.type === "created" && (
+                        <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
+                          <FileText className="h-4 w-4 text-blue-600" />
+                        </div>
+                      )}
+                      {activity.type === "scheduled" && (
+                        <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
+                          <Calendar className="h-4 w-4 text-purple-600" />
+                        </div>
+                      )}
+                      {activity.type === "uploaded" && (
+                        <div className="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center">
+                          <FileText className="h-4 w-4 text-orange-600" />
+                        </div>
+                      )}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm text-foreground">
+                        <span className="font-medium">{activity.user}</span> {activity.action}
+                      </p>
+                      <p className="text-xs text-muted-foreground mt-1">{activity.time}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Upcoming Tasks */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Upcoming Tasks</CardTitle>
+              <CardDescription>Your tasks and deadlines</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                {upcomingTasks.map((task) => (
+                  <div key={task.id} className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
+                    <div className="flex-1">
+                      <h3 className="text-sm font-medium text-foreground">{task.title}</h3>
+                      <p className="text-xs text-muted-foreground mt-1">{task.project}</p>
+                    </div>
+                    <div className="flex items-center space-x-3">
+                      <div className="flex items-center text-xs text-muted-foreground">
+                        <Clock className="h-3 w-3 mr-1" />
+                        {task.dueDate}
+                      </div>
+                      <Badge variant={task.priority === "high" ? "destructive" : "secondary"} className="text-xs">
+                        {task.priority === "high" && <AlertCircle className="h-3 w-3 mr-1" />}
+                        {task.priority}
+                      </Badge>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Quick Actions */}
+        <Card className="mt-8">
+          <CardHeader>
+            <CardTitle>Quick Actions</CardTitle>
+            <CardDescription>Get started with common tasks</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <Button variant="outline" className="h-20 flex-col">
+                <MessageSquare className="h-6 w-6 mb-2" />
+                Start Chat
+              </Button>
+              <Button variant="outline" className="h-20 flex-col">
+                <FileText className="h-6 w-6 mb-2" />
+                New Project
+              </Button>
+              <Button variant="outline" className="h-20 flex-col">
+                <Calendar className="h-6 w-6 mb-2" />
+                Schedule Meeting
+              </Button>
+              <Button variant="outline" className="h-20 flex-col">
+                <Users className="h-6 w-6 mb-2" />
+                Invite Members
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/samples/teamspace-nextjs/app/globals.css b/samples/teamspace-nextjs/app/globals.css
new file mode 100644
index 000000000..548269743
--- /dev/null
+++ b/samples/teamspace-nextjs/app/globals.css
@@ -0,0 +1,76 @@
+@import "tailwindcss";
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 84% 4.9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.75rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 84% 4.9%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 94.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: hsl(var(--muted));
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground));
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--foreground));
+}
diff --git a/samples/teamspace-nextjs/app/layout.tsx b/samples/teamspace-nextjs/app/layout.tsx
new file mode 100644
index 000000000..b9a32064b
--- /dev/null
+++ b/samples/teamspace-nextjs/app/layout.tsx
@@ -0,0 +1,28 @@
+import type React from 'react';
+import type {Metadata} from 'next';
+import {Inter} from 'next/font/google';
+import './globals.css';
+import {ThemeProvider} from '@/components/theme-provider';
+import {AsgardeoProvider} from '@asgardeo/nextjs';
+
+const inter = Inter({subsets: ['latin']});
+
+export const metadata: Metadata = {
+  title: 'Teamspace - Where teams collaborate',
+  description: "Streamline your team's workflow with our all-in-one collaboration platform.",
+  generator: 'v0.dev',
+};
+
+export default function RootLayout({children}: {children: React.ReactNode}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
+          <AsgardeoProvider>
+            <div className="min-h-screen bg-background">{children}</div>
+          </AsgardeoProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/samples/teamspace-nextjs/app/organizations/new/page.tsx b/samples/teamspace-nextjs/app/organizations/new/page.tsx
new file mode 100644
index 000000000..b2200aeb4
--- /dev/null
+++ b/samples/teamspace-nextjs/app/organizations/new/page.tsx
@@ -0,0 +1,211 @@
+"use client"
+
+import type React from "react"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { useAuth } from "@/hooks/use-auth"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Building2, Upload, ArrowLeft } from "lucide-react"
+import Link from "next/link"
+import { Header } from "@/components/header"
+import { redirect } from "next/navigation"
+
+export default function CreateOrganizationPage() {
+  const router = useRouter()
+  const { addOrganization, isAuthenticated, isLoading } = useAuth()
+  const [formData, setFormData] = useState({
+    name: "",
+    slug: "",
+    description: "",
+    website: "",
+    avatar: "/placeholder.svg?height=64&width=64",
+  })
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      redirect("/")
+    }
+  }, [isAuthenticated, isLoading])
+
+  if (isLoading) {
+    return <div className="flex items-center justify-center min-h-screen">Loading...</div>
+  }
+
+  if (!isAuthenticated) {
+    return null
+  }
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const name = e.target.value
+    const slug = name
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-|-$/g, "")
+    setFormData({ ...formData, name, slug })
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+
+    // Simulate API call
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+
+    const newOrg = {
+      id: Date.now().toString(),
+      name: formData.name,
+      slug: formData.slug,
+      avatar: formData.avatar,
+      role: "owner" as const,
+      memberCount: 1,
+    }
+
+    addOrganization(newOrg)
+    router.push("/organizations")
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-2xl">
+        {/* Header */}
+        <div className="mb-8">
+          <Button variant="ghost" asChild className="mb-4">
+            <Link href="/organizations">
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back to organizations
+            </Link>
+          </Button>
+          <h1 className="text-3xl font-bold text-foreground">Create a new organization</h1>
+          <p className="text-muted-foreground mt-2">
+            Organizations are shared accounts where teams can collaborate across many projects at once.
+          </p>
+        </div>
+
+        {/* Form */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Organization Details</CardTitle>
+            <CardDescription>Set up your new organization with basic information</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-6">
+              {/* Organization Avatar */}
+              <div>
+                <Label className="text-sm font-medium">Organization avatar</Label>
+                <div className="flex items-center space-x-4 mt-2">
+                  <Avatar className="w-16 h-16">
+                    <AvatarImage src={formData.avatar || "/placeholder.svg"} alt="Organization avatar" />
+                    <AvatarFallback>
+                      <Building2 className="h-8 w-8" />
+                    </AvatarFallback>
+                  </Avatar>
+                  <Button type="button" variant="outline">
+                    <Upload className="h-4 w-4 mr-2" />
+                    Upload image
+                  </Button>
+                </div>
+                <p className="text-xs text-muted-foreground mt-2">
+                  We recommend an image that's at least 64×64 pixels.
+                </p>
+              </div>
+
+              {/* Organization Name */}
+              <div>
+                <Label htmlFor="name">Organization name *</Label>
+                <Input
+                  id="name"
+                  required
+                  value={formData.name}
+                  onChange={handleNameChange}
+                  placeholder="Enter organization name"
+                  className="mt-2"
+                />
+              </div>
+
+              {/* Organization Slug */}
+              <div>
+                <Label htmlFor="slug">Organization slug *</Label>
+                <div className="flex mt-2">
+                  <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-input bg-muted text-muted-foreground text-sm">
+                    teamspace.com/
+                  </span>
+                  <Input
+                    id="slug"
+                    required
+                    value={formData.slug}
+                    onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
+                    placeholder="organization-slug"
+                    className="rounded-l-none"
+                  />
+                </div>
+                <p className="text-xs text-muted-foreground mt-2">
+                  This will be your organization's URL. Only lowercase letters, numbers, and hyphens are allowed.
+                </p>
+              </div>
+
+              {/* Description */}
+              <div>
+                <Label htmlFor="description">Description</Label>
+                <Textarea
+                  id="description"
+                  rows={3}
+                  value={formData.description}
+                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                  placeholder="Tell us about your organization..."
+                  className="mt-2"
+                />
+              </div>
+
+              {/* Website */}
+              <div>
+                <Label htmlFor="website">Website</Label>
+                <Input
+                  id="website"
+                  type="url"
+                  value={formData.website}
+                  onChange={(e) => setFormData({ ...formData, website: e.target.value })}
+                  placeholder="https://example.com"
+                  className="mt-2"
+                />
+              </div>
+
+              {/* Terms */}
+              <div className="bg-muted rounded-lg p-4">
+                <div className="flex items-start">
+                  <Building2 className="h-5 w-5 text-muted-foreground mt-0.5 mr-3" />
+                  <div className="text-sm text-muted-foreground">
+                    <p className="font-medium mb-2">By creating an organization, you agree to:</p>
+                    <ul className="space-y-1 text-xs">
+                      <li>• Follow our Terms of Service and Community Guidelines</li>
+                      <li>• Take responsibility for all activity under this organization</li>
+                      <li>• Ensure all members comply with our policies</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              {/* Submit Button */}
+              <div className="flex justify-end space-x-3 pt-6 border-t border-border">
+                <Button type="button" variant="outline" asChild>
+                  <Link href="/organizations">Cancel</Link>
+                </Button>
+                <Button type="submit" disabled={isSubmitting || !formData.name || !formData.slug}>
+                  {isSubmitting ? "Creating..." : "Create organization"}
+                </Button>
+              </div>
+            </form>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/samples/teamspace-nextjs/app/organizations/page.tsx b/samples/teamspace-nextjs/app/organizations/page.tsx
new file mode 100644
index 000000000..bdbba62a2
--- /dev/null
+++ b/samples/teamspace-nextjs/app/organizations/page.tsx
@@ -0,0 +1,170 @@
+"use client"
+
+import { useAuth } from "@/hooks/use-auth"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Building2, Users, Settings, Crown, Shield, User, Plus, ExternalLink } from "lucide-react"
+import Link from "next/link"
+import { Header } from "@/components/header"
+import { redirect } from "next/navigation"
+import { useEffect } from "react"
+
+export default function OrganizationsPage() {
+  const { organizations, currentOrg, setCurrentOrg, isAuthenticated, isLoading } = useAuth()
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      redirect("/")
+    }
+  }, [isAuthenticated, isLoading])
+
+  if (isLoading) {
+    return <div className="flex items-center justify-center min-h-screen">Loading...</div>
+  }
+
+  if (!isAuthenticated) {
+    return null
+  }
+
+  const getRoleIcon = (role: string) => {
+    switch (role) {
+      case "owner":
+        return <Crown className="h-4 w-4 text-yellow-500" />
+      case "admin":
+        return <Shield className="h-4 w-4 text-blue-500" />
+      default:
+        return <User className="h-4 w-4 text-muted-foreground" />
+    }
+  }
+
+  const getRoleBadge = (role: string) => {
+    switch (role) {
+      case "owner":
+        return "default"
+      case "admin":
+        return "secondary"
+      default:
+        return "outline"
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-4xl">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-3xl font-bold text-foreground">Organizations</h1>
+            <p className="text-muted-foreground mt-2">Manage your organizations and switch between them</p>
+          </div>
+          <Button asChild>
+            <Link href="/organizations/new">
+              <Plus className="h-4 w-4 mr-2" />
+              New Organization
+            </Link>
+          </Button>
+        </div>
+
+        {/* Current Organization */}
+        <div className="mb-8">
+          <h2 className="text-lg font-semibold text-foreground mb-4">Current Organization</h2>
+          <Card className="border-primary/50 bg-primary/5">
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-4">
+                  <Avatar className="w-12 h-12">
+                    <AvatarImage src={currentOrg?.avatar || "/placeholder.svg"} alt={currentOrg?.name} />
+                    <AvatarFallback>{currentOrg?.name?.charAt(0)}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <h3 className="text-lg font-medium text-foreground">{currentOrg?.name}</h3>
+                    <div className="flex items-center space-x-2 mt-1">
+                      <Badge variant={getRoleBadge(currentOrg?.role || "member")}>
+                        {getRoleIcon(currentOrg?.role || "member")}
+                        <span className="ml-1 capitalize">{currentOrg?.role}</span>
+                      </Badge>
+                      <span className="text-sm text-muted-foreground">{currentOrg?.memberCount} members</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Button variant="outline" size="sm">
+                    <Settings className="h-4 w-4 mr-2" />
+                    Settings
+                  </Button>
+                  <Button variant="outline" size="sm">
+                    <ExternalLink className="h-4 w-4 mr-2" />
+                    View
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* All Organizations */}
+        <div>
+          <h2 className="text-lg font-semibold text-foreground mb-4">All Organizations</h2>
+          <div className="space-y-4">
+            {organizations?.map((org) => (
+              <Card key={org.id} className={currentOrg?.id === org.id ? "border-primary/50 bg-primary/5" : ""}>
+                <CardContent className="pt-6">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-4">
+                      <Avatar className="w-12 h-12">
+                        <AvatarImage src={org.avatar || "/placeholder.svg"} alt={org.name} />
+                        <AvatarFallback>{org.name.charAt(0)}</AvatarFallback>
+                      </Avatar>
+                      <div>
+                        <h3 className="text-lg font-medium text-foreground">{org.name}</h3>
+                        <div className="flex items-center space-x-2 mt-1">
+                          <Badge variant={getRoleBadge(org.role)}>
+                            {getRoleIcon(org.role)}
+                            <span className="ml-1 capitalize">{org.role}</span>
+                          </Badge>
+                          <span className="text-sm text-muted-foreground">
+                            <Users className="h-3 w-3 inline mr-1" />
+                            {org.memberCount} members
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      {currentOrg?.id !== org.id && (
+                        <Button onClick={() => setCurrentOrg(org)} variant="outline" size="sm">
+                          Switch to
+                        </Button>
+                      )}
+                      {currentOrg?.id === org.id && <Badge variant="default">Current</Badge>}
+                      <Button variant="outline" size="sm">
+                        <Settings className="h-4 w-4 mr-2" />
+                        Manage
+                      </Button>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+
+        {/* Organization Invitations */}
+        <div className="mt-8">
+          <h2 className="text-lg font-semibold text-foreground mb-4">Pending Invitations</h2>
+          <Card>
+            <CardContent className="pt-6">
+              <div className="text-center py-8">
+                <Building2 className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+                <p className="text-muted-foreground">No pending invitations</p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/samples/teamspace-nextjs/app/page.tsx b/samples/teamspace-nextjs/app/page.tsx
new file mode 100644
index 000000000..a609578b4
--- /dev/null
+++ b/samples/teamspace-nextjs/app/page.tsx
@@ -0,0 +1,458 @@
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  Users,
+  MessageSquare,
+  Calendar,
+  FileText,
+  Shield,
+  Zap,
+  CheckCircle,
+  Star,
+  ArrowRight,
+  Play,
+  Github,
+  Twitter,
+  Linkedin,
+} from "lucide-react"
+import Link from "next/link"
+import Image from "next/image"
+import { Header } from "@/components/header"
+
+const features = [
+  {
+    icon: MessageSquare,
+    title: "Real-time Communication",
+    description: "Stay connected with instant messaging, video calls, and threaded discussions.",
+    color: "text-blue-600",
+    bgColor: "bg-blue-50",
+  },
+  {
+    icon: Calendar,
+    title: "Project Management",
+    description: "Plan, track, and deliver projects on time with intuitive task management.",
+    color: "text-green-600",
+    bgColor: "bg-green-50",
+  },
+  {
+    icon: FileText,
+    title: "Document Collaboration",
+    description: "Create, edit, and share documents in real-time with version control.",
+    color: "text-purple-600",
+    bgColor: "bg-purple-50",
+  },
+  {
+    icon: Shield,
+    title: "Enterprise Security",
+    description: "Keep your data safe with enterprise-grade security and compliance.",
+    color: "text-red-600",
+    bgColor: "bg-red-50",
+  },
+  {
+    icon: Zap,
+    title: "Workflow Automation",
+    description: "Automate repetitive tasks and streamline processes with custom workflows.",
+    color: "text-yellow-600",
+    bgColor: "bg-yellow-50",
+  },
+  {
+    icon: Users,
+    title: "Team Analytics",
+    description: "Gain insights into team performance and project progress with detailed analytics.",
+    color: "text-indigo-600",
+    bgColor: "bg-indigo-50",
+  },
+]
+
+const testimonials = [
+  {
+    quote: "Teamspace transformed how our remote team collaborates. We're 40% more productive since switching.",
+    author: "Sarah Chen",
+    role: "VP of Engineering",
+    company: "TechCorp",
+    avatar: "/placeholder.svg?height=48&width=48",
+  },
+  {
+    quote: "The best investment we've made for our team. The ROI was clear within the first month.",
+    author: "Michael Rodriguez",
+    role: "Project Manager",
+    company: "InnovateLab",
+    avatar: "/placeholder.svg?height=48&width=48",
+  },
+  {
+    quote: "Finally, a platform that brings everything together. Our team loves the intuitive interface.",
+    author: "Emily Johnson",
+    role: "Creative Director",
+    company: "DesignStudio",
+    avatar: "/placeholder.svg?height=48&width=48",
+  },
+]
+
+const pricingPlans = [
+  {
+    name: "Starter",
+    price: "Free",
+    description: "Perfect for small teams getting started",
+    features: ["Up to 5 team members", "Basic project management", "5GB storage", "Community support"],
+    cta: "Get Started",
+    popular: false,
+  },
+  {
+    name: "Professional",
+    price: "$12",
+    period: "/user/month",
+    description: "For growing teams that need more power",
+    features: [
+      "Unlimited team members",
+      "Advanced project management",
+      "100GB storage",
+      "Priority support",
+      "Advanced integrations",
+      "Team analytics",
+    ],
+    cta: "Start Free Trial",
+    popular: true,
+  },
+  {
+    name: "Enterprise",
+    price: "Custom",
+    description: "For large organizations with custom needs",
+    features: [
+      "Everything in Professional",
+      "SSO & advanced security",
+      "Unlimited storage",
+      "Dedicated support",
+      "Custom integrations",
+      "On-premise deployment",
+    ],
+    cta: "Contact Sales",
+    popular: false,
+  },
+]
+
+export default function LandingPage() {
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+
+      {/* Hero Section */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-background to-purple-50 py-20 lg:py-32">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <div className="space-y-8">
+              <Badge variant="secondary" className="w-fit">
+                🚀 New: AI-powered insights now available
+              </Badge>
+
+              <h1 className="text-4xl lg:text-6xl font-bold text-foreground leading-tight">
+                Where teams
+                <span className="text-primary"> collaborate</span> and ideas come to life
+              </h1>
+
+              <p className="text-xl text-muted-foreground leading-relaxed">
+                Streamline your team's workflow with our all-in-one collaboration platform. Chat, plan, share, and
+                deliver exceptional results together.
+              </p>
+
+              <div className="flex flex-col sm:flex-row gap-4">
+                <Button asChild size="lg" className="h-12 px-8">
+                  <Link href="/auth/signup">
+                    Start Free Trial
+                    <ArrowRight className="ml-2 h-5 w-5" />
+                  </Link>
+                </Button>
+                <Button variant="outline" size="lg" className="h-12 px-8">
+                  <Play className="mr-2 h-5 w-5" />
+                  Watch Demo
+                </Button>
+              </div>
+
+              <div className="flex items-center space-x-6 text-sm text-muted-foreground">
+                <div className="flex items-center">
+                  <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
+                  Free 14-day trial
+                </div>
+                <div className="flex items-center">
+                  <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
+                  No credit card required
+                </div>
+              </div>
+            </div>
+
+            <div className="relative">
+              <Image
+                src="/placeholder.svg?height=500&width=600"
+                alt="Teamspace Dashboard"
+                width={600}
+                height={500}
+                className="w-full rounded-2xl shadow-2xl"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section id="features" className="py-20">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <Badge variant="outline" className="mb-4">
+              Features
+            </Badge>
+            <h2 className="text-3xl lg:text-5xl font-bold text-foreground mb-4">
+              Everything your team needs to succeed
+            </h2>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+              From real-time collaboration to project management, Teamspace provides all the tools your team needs.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {features.map((feature, index) => {
+              const Icon = feature.icon
+              return (
+                <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-shadow">
+                  <CardHeader>
+                    <div className={`w-12 h-12 ${feature.bgColor} rounded-lg flex items-center justify-center mb-4`}>
+                      <Icon className={`h-6 w-6 ${feature.color}`} />
+                    </div>
+                    <CardTitle className="text-xl">{feature.title}</CardTitle>
+                    <CardDescription className="text-base leading-relaxed">{feature.description}</CardDescription>
+                  </CardHeader>
+                </Card>
+              )
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonials Section */}
+      <section id="testimonials" className="bg-muted/50 py-20">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <Badge variant="outline" className="mb-4">
+              Testimonials
+            </Badge>
+            <h2 className="text-3xl lg:text-5xl font-bold text-foreground mb-4">What our customers say</h2>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {testimonials.map((testimonial, index) => (
+              <Card key={index} className="border-0 shadow-lg">
+                <CardContent className="pt-6">
+                  <div className="flex mb-4">
+                    {[...Array(5)].map((_, i) => (
+                      <Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
+                    ))}
+                  </div>
+                  <blockquote className="text-foreground mb-6 text-lg leading-relaxed">
+                    "{testimonial.quote}"
+                  </blockquote>
+                  <div className="flex items-center">
+                    <Image
+                      src={testimonial.avatar || "/placeholder.svg"}
+                      alt={testimonial.author}
+                      width={48}
+                      height={48}
+                      className="w-12 h-12 rounded-full mr-4"
+                    />
+                    <div>
+                      <div className="font-semibold text-foreground">{testimonial.author}</div>
+                      <div className="text-muted-foreground text-sm">
+                        {testimonial.role}, {testimonial.company}
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Pricing Section */}
+      <section id="pricing" className="py-20">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <Badge variant="outline" className="mb-4">
+              Pricing
+            </Badge>
+            <h2 className="text-3xl lg:text-5xl font-bold text-foreground mb-4">Simple, transparent pricing</h2>
+            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+              Choose the plan that's right for your team. Start free and scale as you grow.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+            {pricingPlans.map((plan, index) => (
+              <Card key={index} className={`relative ${plan.popular ? "border-primary shadow-lg scale-105" : ""}`}>
+                {plan.popular && (
+                  <Badge className="absolute -top-3 left-1/2 transform -translate-x-1/2">Most Popular</Badge>
+                )}
+
+                <CardHeader className="text-center">
+                  <CardTitle className="text-xl">{plan.name}</CardTitle>
+                  <CardDescription>{plan.description}</CardDescription>
+                  <div className="mt-4">
+                    <span className="text-4xl font-bold text-foreground">{plan.price}</span>
+                    {plan.period && <span className="text-muted-foreground">{plan.period}</span>}
+                  </div>
+                </CardHeader>
+
+                <CardContent>
+                  <ul className="space-y-3 mb-8">
+                    {plan.features.map((feature, featureIndex) => (
+                      <li key={featureIndex} className="flex items-center">
+                        <CheckCircle className="h-5 w-5 text-green-500 mr-3 flex-shrink-0" />
+                        <span className="text-muted-foreground">{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
+
+                  <Button asChild className="w-full" variant={plan.popular ? "default" : "outline"}>
+                    <Link href="/auth/signup">{plan.cta}</Link>
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="bg-primary py-20">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h2 className="text-3xl lg:text-5xl font-bold text-primary-foreground mb-6">
+            Ready to transform your team's productivity?
+          </h2>
+          <p className="text-xl text-primary-foreground/80 mb-8 max-w-2xl mx-auto">
+            Join thousands of teams already using Teamspace to collaborate better and achieve more.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button asChild size="lg" variant="secondary" className="h-12 px-8">
+              <Link href="/auth/signup">
+                Start Free Trial
+                <ArrowRight className="ml-2 h-5 w-5" />
+              </Link>
+            </Button>
+            <Button
+              size="lg"
+              variant="outline"
+              className="h-12 px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary"
+            >
+              Schedule Demo
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="bg-muted py-16">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid md:grid-cols-2 lg:grid-cols-5 gap-8">
+            <div className="lg:col-span-2">
+              <div className="flex items-center mb-4">
+                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+                  <Users className="h-5 w-5 text-primary-foreground" />
+                </div>
+                <span className="ml-2 text-xl font-bold">Teamspace</span>
+              </div>
+              <p className="text-muted-foreground mb-6 max-w-md">
+                Empowering teams to collaborate better and achieve more together.
+              </p>
+              <div className="flex space-x-4">
+                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
+                  <Twitter className="h-5 w-5" />
+                </Link>
+                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
+                  <Github className="h-5 w-5" />
+                </Link>
+                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
+                  <Linkedin className="h-5 w-5" />
+                </Link>
+              </div>
+            </div>
+
+            <div>
+              <h4 className="font-semibold mb-4">Product</h4>
+              <ul className="space-y-2 text-muted-foreground">
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Features
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Pricing
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    API
+                  </Link>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h4 className="font-semibold mb-4">Company</h4>
+              <ul className="space-y-2 text-muted-foreground">
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    About
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Blog
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Careers
+                  </Link>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h4 className="font-semibold mb-4">Support</h4>
+              <ul className="space-y-2 text-muted-foreground">
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Help Center
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Documentation
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Contact
+                  </Link>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="border-t border-border mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+            <p className="text-muted-foreground text-sm">
+              © {new Date().getFullYear()} Teamspace. All rights reserved.
+            </p>
+            <div className="flex space-x-6 mt-4 md:mt-0">
+              <Link href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
+                Privacy Policy
+              </Link>
+              <Link href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
+                Terms of Service
+              </Link>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  )
+}
diff --git a/samples/teamspace-nextjs/app/profile/page.tsx b/samples/teamspace-nextjs/app/profile/page.tsx
new file mode 100644
index 000000000..81a9d5fb2
--- /dev/null
+++ b/samples/teamspace-nextjs/app/profile/page.tsx
@@ -0,0 +1,266 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useAuth } from "@/hooks/use-auth"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { User, Mail, Calendar, MapPin, LinkIcon, Edit3, Save, X } from "lucide-react"
+import { Header } from "@/components/header"
+import { redirect } from "next/navigation"
+
+export default function ProfilePage() {
+  const { user, isAuthenticated, isLoading } = useAuth()
+  const [isEditing, setIsEditing] = useState(false)
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    bio: "Full-stack developer passionate about building great user experiences.",
+    location: "San Francisco, CA",
+    website: "https://johndoe.dev",
+    company: "Acme Corp",
+  })
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      redirect("/")
+    }
+    if (user) {
+      setFormData({
+        name: user.name,
+        email: user.email,
+        bio: "Full-stack developer passionate about building great user experiences.",
+        location: "San Francisco, CA",
+        website: "https://johndoe.dev",
+        company: "Acme Corp",
+      })
+    }
+  }, [user, isAuthenticated, isLoading])
+
+  if (isLoading) {
+    return <div className="flex items-center justify-center min-h-screen">Loading...</div>
+  }
+
+  if (!isAuthenticated) {
+    return null
+  }
+
+  const handleSave = () => {
+    // In a real app, you'd save to your backend
+    console.log("Saving profile:", formData)
+    setIsEditing(false)
+  }
+
+  const handleCancel = () => {
+    if (user) {
+      setFormData({
+        name: user.name,
+        email: user.email,
+        bio: "Full-stack developer passionate about building great user experiences.",
+        location: "San Francisco, CA",
+        website: "https://johndoe.dev",
+        company: "Acme Corp",
+      })
+    }
+    setIsEditing(false)
+  }
+
+  const stats = [
+    { label: "Projects", value: "24" },
+    { label: "Organizations", value: "3" },
+    { label: "Contributions", value: "1,247" },
+    { label: "Followers", value: "89" },
+  ]
+
+  const recentProjects = [
+    {
+      id: 1,
+      name: "Mobile App Redesign",
+      description: "Complete UI/UX overhaul for mobile application",
+      status: "In Progress",
+      lastUpdated: "2 days ago",
+    },
+    {
+      id: 2,
+      name: "API Documentation",
+      description: "Comprehensive API documentation and examples",
+      status: "Completed",
+      lastUpdated: "1 week ago",
+    },
+    {
+      id: 3,
+      name: "Team Dashboard",
+      description: "Analytics dashboard for team performance metrics",
+      status: "Planning",
+      lastUpdated: "3 days ago",
+    },
+  ]
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-4xl">
+        {/* Profile Header */}
+        <Card className="mb-8">
+          <div className="h-32 bg-gradient-to-r from-blue-500 to-purple-600 rounded-t-lg"></div>
+          <CardContent className="relative pt-0 pb-6">
+            <div className="flex items-end justify-between -mt-16 mb-6">
+              <div className="flex items-end space-x-4">
+                <Avatar className="w-24 h-24 border-4 border-background">
+                  <AvatarImage src={user?.avatar || "/placeholder.svg"} alt={user?.name} />
+                  <AvatarFallback className="text-2xl">{user?.name?.charAt(0)}</AvatarFallback>
+                </Avatar>
+                <div className="pb-2">
+                  {isEditing ? (
+                    <Input
+                      value={formData.name}
+                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                      className="text-2xl font-bold bg-transparent border-b border-border focus:border-primary"
+                    />
+                  ) : (
+                    <h1 className="text-2xl font-bold text-foreground">{formData.name}</h1>
+                  )}
+                  <p className="text-muted-foreground">@{user?.username}</p>
+                </div>
+              </div>
+              <div className="pb-2">
+                {isEditing ? (
+                  <div className="flex space-x-2">
+                    <Button onClick={handleSave} size="sm">
+                      <Save className="h-4 w-4 mr-2" />
+                      Save
+                    </Button>
+                    <Button onClick={handleCancel} variant="outline" size="sm">
+                      <X className="h-4 w-4 mr-2" />
+                      Cancel
+                    </Button>
+                  </div>
+                ) : (
+                  <Button onClick={() => setIsEditing(true)} variant="outline" size="sm">
+                    <Edit3 className="h-4 w-4 mr-2" />
+                    Edit Profile
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            {/* Bio and Details */}
+            <div className="space-y-4">
+              {isEditing ? (
+                <Textarea
+                  value={formData.bio}
+                  onChange={(e) => setFormData({ ...formData, bio: e.target.value })}
+                  rows={3}
+                  placeholder="Tell us about yourself..."
+                />
+              ) : (
+                <p className="text-foreground">{formData.bio}</p>
+              )}
+
+              <div className="flex flex-wrap gap-6 text-sm text-muted-foreground">
+                <div className="flex items-center">
+                  <User className="h-4 w-4 mr-2" />
+                  {isEditing ? (
+                    <Input
+                      value={formData.company}
+                      onChange={(e) => setFormData({ ...formData, company: e.target.value })}
+                      className="h-6 text-sm bg-transparent border-b border-border focus:border-primary"
+                    />
+                  ) : (
+                    formData.company
+                  )}
+                </div>
+                <div className="flex items-center">
+                  <MapPin className="h-4 w-4 mr-2" />
+                  {isEditing ? (
+                    <Input
+                      value={formData.location}
+                      onChange={(e) => setFormData({ ...formData, location: e.target.value })}
+                      className="h-6 text-sm bg-transparent border-b border-border focus:border-primary"
+                    />
+                  ) : (
+                    formData.location
+                  )}
+                </div>
+                <div className="flex items-center">
+                  <LinkIcon className="h-4 w-4 mr-2" />
+                  {isEditing ? (
+                    <Input
+                      type="url"
+                      value={formData.website}
+                      onChange={(e) => setFormData({ ...formData, website: e.target.value })}
+                      className="h-6 text-sm bg-transparent border-b border-border focus:border-primary"
+                    />
+                  ) : (
+                    <a href={formData.website} className="text-primary hover:underline">
+                      {formData.website}
+                    </a>
+                  )}
+                </div>
+                <div className="flex items-center">
+                  <Mail className="h-4 w-4 mr-2" />
+                  {formData.email}
+                </div>
+                <div className="flex items-center">
+                  <Calendar className="h-4 w-4 mr-2" />
+                  Joined March 2023
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Stats */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+          {stats.map((stat) => (
+            <Card key={stat.label} className="text-center">
+              <CardContent className="pt-6">
+                <div className="text-2xl font-bold text-foreground">{stat.value}</div>
+                <div className="text-sm text-muted-foreground">{stat.label}</div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        {/* Recent Projects */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Recent Projects</CardTitle>
+            <CardDescription>Your latest work and contributions</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {recentProjects.map((project) => (
+                <div
+                  key={project.id}
+                  className="flex items-center justify-between p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors"
+                >
+                  <div className="flex-1">
+                    <h3 className="font-medium text-foreground">{project.name}</h3>
+                    <p className="text-sm text-muted-foreground mt-1">{project.description}</p>
+                    <p className="text-xs text-muted-foreground mt-2">Updated {project.lastUpdated}</p>
+                  </div>
+                  <Badge
+                    variant={
+                      project.status === "Completed"
+                        ? "default"
+                        : project.status === "In Progress"
+                          ? "secondary"
+                          : "outline"
+                    }
+                  >
+                    {project.status}
+                  </Badge>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/samples/teamspace-nextjs/components.json b/samples/teamspace-nextjs/components.json
new file mode 100644
index 000000000..335484f94
--- /dev/null
+++ b/samples/teamspace-nextjs/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
\ No newline at end of file
diff --git a/samples/teamspace-nextjs/components/header.tsx b/samples/teamspace-nextjs/components/header.tsx
new file mode 100644
index 000000000..b0cd2836c
--- /dev/null
+++ b/samples/teamspace-nextjs/components/header.tsx
@@ -0,0 +1,216 @@
+'use client';
+
+import {useState} from 'react';
+import Link from 'next/link';
+import {Button} from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {Avatar, AvatarFallback, AvatarImage} from '@/components/ui/avatar';
+import {Users, ChevronDown, Settings, User, LogOut, Plus, Check, Building2, Menu, X} from 'lucide-react';
+
+export function Header() {
+  const isAuthenticated = true; // Replace with actual authentication check
+  const user = {
+    name: 'John Doe',
+    email: 'john.doe@example.com',
+    username: 'johndoe',
+  }; // Replace with actual user data
+  const organizations = [
+    {id: '1', name: 'Organization One', avatar: '/org1.svg ', memberCount: 10},
+    {id: '2', name: 'Organization Two', avatar: '/org2.svg', memberCount: 5},
+  ]; // Replace with actual organizations data
+  const [currentOrg, setCurrentOrg] = useState(organizations[0]); // Replace with actual current organization
+  const signOut = () => {
+    // Implement sign out logic here
+    console.log('Signing out...');
+  };
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  if (!isAuthenticated) {
+    return (
+      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container mx-auto flex h-16 items-center justify-between px-4">
+          <Link href="/" className="flex items-center space-x-2">
+            <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+              <Users className="h-5 w-5 text-primary-foreground" />
+            </div>
+            <span className="text-xl font-bold">Teamspace</span>
+          </Link>
+
+          <nav className="hidden md:flex items-center space-x-6">
+            <Link href="#features" className="text-muted-foreground hover:text-foreground transition-colors">
+              Features
+            </Link>
+            <Link href="#testimonials" className="text-muted-foreground hover:text-foreground transition-colors">
+              Testimonials
+            </Link>
+            <Link href="#pricing" className="text-muted-foreground hover:text-foreground transition-colors">
+              Pricing
+            </Link>
+          </nav>
+
+          <div className="hidden md:flex items-center space-x-4">
+            <Button variant="ghost" asChild>
+              <Link href="/auth/signin">Sign In</Link>
+            </Button>
+            <Button asChild>
+              <Link href="/auth/signup">Get Started</Link>
+            </Button>
+          </div>
+
+          <Button variant="ghost" size="sm" className="md:hidden" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
+            {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+          </Button>
+        </div>
+
+        {mobileMenuOpen && (
+          <div className="md:hidden border-t bg-background">
+            <div className="container mx-auto px-4 py-4 space-y-4">
+              <Link href="#features" className="block text-muted-foreground hover:text-foreground">
+                Features
+              </Link>
+              <Link href="#testimonials" className="block text-muted-foreground hover:text-foreground">
+                Testimonials
+              </Link>
+              <Link href="#pricing" className="block text-muted-foreground hover:text-foreground">
+                Pricing
+              </Link>
+              <div className="pt-4 border-t space-y-2">
+                <Button variant="ghost" asChild className="w-full">
+                  <Link href="/auth/signin">Sign In</Link>
+                </Button>
+                <Button asChild className="w-full">
+                  <Link href="/auth/signup">Get Started</Link>
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+      </header>
+    );
+  }
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container mx-auto flex h-16 items-center justify-between px-4">
+        <div className="flex items-center space-x-8">
+          <Link href="/dashboard" className="flex items-center space-x-2">
+            <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+              <Users className="h-5 w-5 text-primary-foreground" />
+            </div>
+            <span className="text-xl font-bold">Teamspace</span>
+          </Link>
+
+          <nav className="hidden md:flex space-x-6">
+            <Link href="/dashboard" className="text-muted-foreground hover:text-foreground transition-colors">
+              Dashboard
+            </Link>
+            <Link href="/projects" className="text-muted-foreground hover:text-foreground transition-colors">
+              Projects
+            </Link>
+            <Link href="/teams" className="text-muted-foreground hover:text-foreground transition-colors">
+              Teams
+            </Link>
+          </nav>
+        </div>
+
+        <div className="flex items-center space-x-4">
+          {/* Organization Switcher */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" className="flex items-center space-x-2">
+                <Avatar className="w-5 h-5">
+                  <AvatarImage src={currentOrg?.avatar || '/placeholder.svg'} alt={currentOrg?.name} />
+                  <AvatarFallback className="text-xs">{currentOrg?.name?.charAt(0)}</AvatarFallback>
+                </Avatar>
+                <span className="max-w-32 truncate">{currentOrg?.name}</span>
+                <ChevronDown className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-64" align="end">
+              <DropdownMenuLabel>Switch organization</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              {organizations?.map(org => (
+                <DropdownMenuItem
+                  key={org.id}
+                  onClick={() => setCurrentOrg(org)}
+                  className="flex items-center justify-between"
+                >
+                  <div className="flex items-center space-x-3">
+                    <Avatar className="w-6 h-6">
+                      <AvatarImage src={org.avatar || '/placeholder.svg'} alt={org.name} />
+                      <AvatarFallback className="text-xs">{org.name.charAt(0)}</AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <div className="font-medium">{org.name}</div>
+                      <div className="text-xs text-muted-foreground">{org.memberCount} members</div>
+                    </div>
+                  </div>
+                  {currentOrg?.id === org.id && <Check className="h-4 w-4 text-green-600" />}
+                </DropdownMenuItem>
+              ))}
+              <DropdownMenuSeparator />
+              <DropdownMenuItem asChild>
+                <Link href="/organizations" className="flex items-center">
+                  <Building2 className="h-4 w-4 mr-2" />
+                  Manage organizations
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuItem asChild>
+                <Link href="/organizations/new" className="flex items-center">
+                  <Plus className="h-4 w-4 mr-2" />
+                  New organization
+                </Link>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {/* User Dropdown */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="flex items-center space-x-2 p-2">
+                <Avatar className="w-8 h-8">
+                  <AvatarImage src={user?.avatar || '/placeholder.svg'} alt={user?.name} />
+                  <AvatarFallback>{user?.name?.charAt(0)}</AvatarFallback>
+                </Avatar>
+                <ChevronDown className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56" align="end">
+              <DropdownMenuLabel>
+                <div>
+                  <div className="font-medium">{user?.name}</div>
+                  <div className="text-sm text-muted-foreground">@{user?.username}</div>
+                </div>
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem asChild>
+                <Link href="/profile" className="flex items-center">
+                  <User className="h-4 w-4 mr-2" />
+                  Your profile
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuItem asChild>
+                <Link href="/settings" className="flex items-center">
+                  <Settings className="h-4 w-4 mr-2" />
+                  Settings
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={signOut} className="flex items-center text-destructive">
+                <LogOut className="h-4 w-4 mr-2" />
+                Sign out
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/samples/teamspace-nextjs/components/theme-provider.tsx b/samples/teamspace-nextjs/components/theme-provider.tsx
new file mode 100644
index 000000000..1cd216d6d
--- /dev/null
+++ b/samples/teamspace-nextjs/components/theme-provider.tsx
@@ -0,0 +1,7 @@
+"use client"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import type { ThemeProviderProps } from "next-themes"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
diff --git a/samples/teamspace-nextjs/components/ui/accordion.tsx b/samples/teamspace-nextjs/components/ui/accordion.tsx
new file mode 100644
index 000000000..24c788c2c
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/accordion.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/samples/teamspace-nextjs/components/ui/alert-dialog.tsx b/samples/teamspace-nextjs/components/ui/alert-dialog.tsx
new file mode 100644
index 000000000..25e7b4744
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/alert-dialog.tsx
@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/samples/teamspace-nextjs/components/ui/alert.tsx b/samples/teamspace-nextjs/components/ui/alert.tsx
new file mode 100644
index 000000000..a0de44914
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/alert.tsx
@@ -0,0 +1,43 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
+  ),
+)
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+  ),
+)
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/samples/teamspace-nextjs/components/ui/aspect-ratio.tsx b/samples/teamspace-nextjs/components/ui/aspect-ratio.tsx
new file mode 100644
index 000000000..d6a5226f5
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/aspect-ratio.tsx
@@ -0,0 +1,7 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }
diff --git a/samples/teamspace-nextjs/components/ui/avatar.tsx b/samples/teamspace-nextjs/components/ui/avatar.tsx
new file mode 100644
index 000000000..9946eec7e
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/avatar.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/samples/teamspace-nextjs/components/ui/badge.tsx b/samples/teamspace-nextjs/components/ui/badge.tsx
new file mode 100644
index 000000000..15241a319
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/badge.tsx
@@ -0,0 +1,29 @@
+import type * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }
diff --git a/samples/teamspace-nextjs/components/ui/breadcrumb.tsx b/samples/teamspace-nextjs/components/ui/breadcrumb.tsx
new file mode 100644
index 000000000..60e6c96f7
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/breadcrumb.tsx
@@ -0,0 +1,115 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props}
+  />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/samples/teamspace-nextjs/components/ui/button.tsx b/samples/teamspace-nextjs/components/ui/button.tsx
new file mode 100644
index 000000000..d5fbaac56
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/button.tsx
@@ -0,0 +1,47 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    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) => {
+    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/samples/teamspace-nextjs/components/ui/calendar.tsx b/samples/teamspace-nextjs/components/ui/calendar.tsx
new file mode 100644
index 000000000..61d2b451e
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/calendar.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }
diff --git a/samples/teamspace-nextjs/components/ui/card.tsx b/samples/teamspace-nextjs/components/ui/card.tsx
new file mode 100644
index 000000000..ac5e036e8
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/card.tsx
@@ -0,0 +1,43 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+)
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
+  ),
+)
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  ),
+)
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
+)
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  ),
+)
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/samples/teamspace-nextjs/components/ui/carousel.tsx b/samples/teamspace-nextjs/components/ui/carousel.tsx
new file mode 100644
index 000000000..ec505d00d
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/carousel.tsx
@@ -0,0 +1,262 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api?.off("select", onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}
diff --git a/samples/teamspace-nextjs/components/ui/chart.tsx b/samples/teamspace-nextjs/components/ui/chart.tsx
new file mode 100644
index 000000000..8620baa3b
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/chart.tsx
@@ -0,0 +1,365 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"]
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+})
+ChartContainer.displayName = "Chart"
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([_, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean
+      hideIndicator?: boolean
+      indicator?: "line" | "dot" | "dashed"
+      nameKey?: string
+      labelKey?: string
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null
+      }
+
+      const [item] = payload
+      const key = `${labelKey || item.dataKey || item.name || "value"}`
+      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        )
+      }
+
+      if (!value) {
+        return null
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ])
+
+    if (!active || !payload?.length) {
+      return null
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot"
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color || item.payload.fill || item.color
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+)
+ChartTooltipContent.displayName = "ChartTooltip"
+
+const ChartLegend = RechartsPrimitive.Legend
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean
+      nameKey?: string
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    if (!payload?.length) {
+      return null
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+)
+ChartLegendContent.displayName = "ChartLegend"
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
diff --git a/samples/teamspace-nextjs/components/ui/checkbox.tsx b/samples/teamspace-nextjs/components/ui/checkbox.tsx
new file mode 100644
index 000000000..5c40f159d
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/checkbox.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/samples/teamspace-nextjs/components/ui/collapsible.tsx b/samples/teamspace-nextjs/components/ui/collapsible.tsx
new file mode 100644
index 000000000..9fa48946a
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/collapsible.tsx
@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/samples/teamspace-nextjs/components/ui/command.tsx b/samples/teamspace-nextjs/components/ui/command.tsx
new file mode 100644
index 000000000..59a264529
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/command.tsx
@@ -0,0 +1,153 @@
+"use client"
+
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/samples/teamspace-nextjs/components/ui/context-menu.tsx b/samples/teamspace-nextjs/components/ui/context-menu.tsx
new file mode 100644
index 000000000..93ef37ba9
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/context-menu.tsx
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
diff --git a/samples/teamspace-nextjs/components/ui/dialog.tsx b/samples/teamspace-nextjs/components/ui/dialog.tsx
new file mode 100644
index 000000000..01ff19c7e
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/samples/teamspace-nextjs/components/ui/drawer.tsx b/samples/teamspace-nextjs/components/ui/drawer.tsx
new file mode 100644
index 000000000..6a0ef53dd
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/drawer.tsx
@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/samples/teamspace-nextjs/components/ui/dropdown-menu.tsx b/samples/teamspace-nextjs/components/ui/dropdown-menu.tsx
new file mode 100644
index 000000000..8ea2f4948
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/dropdown-menu.tsx
@@ -0,0 +1,181 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/samples/teamspace-nextjs/components/ui/form.tsx b/samples/teamspace-nextjs/components/ui/form.tsx
new file mode 100644
index 000000000..ce264aef2
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/form.tsx
@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/samples/teamspace-nextjs/components/ui/hover-card.tsx b/samples/teamspace-nextjs/components/ui/hover-card.tsx
new file mode 100644
index 000000000..e54d91cf8
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/hover-card.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/samples/teamspace-nextjs/components/ui/input-otp.tsx b/samples/teamspace-nextjs/components/ui/input-otp.tsx
new file mode 100644
index 000000000..f66fcfa0d
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/input-otp.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { Dot } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+))
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-2 ring-ring ring-offset-background",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Dot />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/samples/teamspace-nextjs/components/ui/input.tsx b/samples/teamspace-nextjs/components/ui/input.tsx
new file mode 100644
index 000000000..7f84bdeb0
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Input.displayName = "Input"
+
+export { Input }
diff --git a/samples/teamspace-nextjs/components/ui/label.tsx b/samples/teamspace-nextjs/components/ui/label.tsx
new file mode 100644
index 000000000..14be10165
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/label.tsx
@@ -0,0 +1,19 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/samples/teamspace-nextjs/components/ui/menubar.tsx b/samples/teamspace-nextjs/components/ui/menubar.tsx
new file mode 100644
index 000000000..5586fa9b2
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/menubar.tsx
@@ -0,0 +1,236 @@
+"use client"
+
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const MenubarMenu = MenubarPrimitive.Menu
+
+const MenubarGroup = MenubarPrimitive.Group
+
+const MenubarPortal = MenubarPrimitive.Portal
+
+const MenubarSub = MenubarPrimitive.Sub
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
+      className
+    )}
+    {...props}
+  />
+))
+Menubar.displayName = MenubarPrimitive.Root.displayName
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+))
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+    ref
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  )
+)
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarItem.displayName = MenubarPrimitive.Item.displayName
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+MenubarShortcut.displayname = "MenubarShortcut"
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+}
diff --git a/samples/teamspace-nextjs/components/ui/navigation-menu.tsx b/samples/teamspace-nextjs/components/ui/navigation-menu.tsx
new file mode 100644
index 000000000..1419f5669
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/navigation-menu.tsx
@@ -0,0 +1,128 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}
diff --git a/samples/teamspace-nextjs/components/ui/pagination.tsx b/samples/teamspace-nextjs/components/ui/pagination.tsx
new file mode 100644
index 000000000..ea40d196d
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/pagination.tsx
@@ -0,0 +1,117 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { ButtonProps, buttonVariants } from "@/components/ui/button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}
diff --git a/samples/teamspace-nextjs/components/ui/popover.tsx b/samples/teamspace-nextjs/components/ui/popover.tsx
new file mode 100644
index 000000000..a0ec48bee
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/popover.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }
diff --git a/samples/teamspace-nextjs/components/ui/progress.tsx b/samples/teamspace-nextjs/components/ui/progress.tsx
new file mode 100644
index 000000000..5c87ea486
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/progress.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/samples/teamspace-nextjs/components/ui/radio-group.tsx b/samples/teamspace-nextjs/components/ui/radio-group.tsx
new file mode 100644
index 000000000..e9bde1793
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/radio-group.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }
diff --git a/samples/teamspace-nextjs/components/ui/resizable.tsx b/samples/teamspace-nextjs/components/ui/resizable.tsx
new file mode 100644
index 000000000..f4bc5586b
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/resizable.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/samples/teamspace-nextjs/components/ui/scroll-area.tsx b/samples/teamspace-nextjs/components/ui/scroll-area.tsx
new file mode 100644
index 000000000..0b4a48d87
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/scroll-area.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/samples/teamspace-nextjs/components/ui/select.tsx b/samples/teamspace-nextjs/components/ui/select.tsx
new file mode 100644
index 000000000..cbe5a36b6
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/select.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/samples/teamspace-nextjs/components/ui/separator.tsx b/samples/teamspace-nextjs/components/ui/separator.tsx
new file mode 100644
index 000000000..12d81c4a8
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/separator.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/samples/teamspace-nextjs/components/ui/sheet.tsx b/samples/teamspace-nextjs/components/ui/sheet.tsx
new file mode 100644
index 000000000..a37f17ba0
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/sheet.tsx
@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/samples/teamspace-nextjs/components/ui/sidebar.tsx b/samples/teamspace-nextjs/components/ui/sidebar.tsx
new file mode 100644
index 000000000..eeb2d7aeb
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/sidebar.tsx
@@ -0,0 +1,763 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { VariantProps, cva } from "class-variance-authority"
+import { PanelLeft } from "lucide-react"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import { Sheet, SheetContent } from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContext = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContext | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsMobile()
+    const [openMobile, setOpenMobile] = React.useState(false)
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen)
+    const open = openProp ?? _open
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === "function" ? value(open) : value
+        if (setOpenProp) {
+          setOpenProp(openState)
+        } else {
+          _setOpen(openState)
+        }
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      },
+      [setOpenProp, open]
+    )
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open)
+    }, [isMobile, setOpen, setOpenMobile])
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault()
+          toggleSidebar()
+        }
+      }
+
+      window.addEventListener("keydown", handleKeyDown)
+      return () => window.removeEventListener("keydown", handleKeyDown)
+    }, [toggleSidebar])
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed"
+
+    const contextValue = React.useMemo<SidebarContext>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    )
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              className
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    )
+  }
+)
+SidebarProvider.displayName = "SidebarProvider"
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right"
+    variant?: "sidebar" | "floating" | "inset"
+    collapsible?: "offcanvas" | "icon" | "none"
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={cn(
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      )
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      )
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer hidden md:block text-sidebar-foreground"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-variant={variant}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={cn(
+            "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+          )}
+        />
+        <div
+          className={cn(
+            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
+            side === "left"
+              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            // Adjust the padding for floating and inset variants.
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+Sidebar.displayName = "Sidebar"
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("h-7 w-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeft />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+})
+SidebarTrigger.displayName = "SidebarTrigger"
+
+const SidebarRail = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarRail.displayName = "SidebarRail"
+
+const SidebarInset = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"main">
+>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        "relative flex min-h-svh flex-1 flex-col bg-background",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInset.displayName = "SidebarInset"
+
+const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInput.displayName = "SidebarInput"
+
+const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarHeader.displayName = "SidebarHeader"
+
+const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarFooter.displayName = "SidebarFooter"
+
+const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+})
+SidebarSeparator.displayName = "SidebarSeparator"
+
+const SidebarContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarContent.displayName = "SidebarContent"
+
+const SidebarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarGroup.displayName = "SidebarGroup"
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupLabel.displayName = "SidebarGroupLabel"
+
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupAction.displayName = "SidebarGroupAction"
+
+const SidebarGroupContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={cn("w-full text-sm", className)}
+    {...props}
+  />
+))
+SidebarGroupContent.displayName = "SidebarGroupContent"
+
+const SidebarMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu"
+    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    {...props}
+  />
+))
+SidebarMenu.displayName = "SidebarMenu"
+
+const SidebarMenuItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    data-sidebar="menu-item"
+    className={cn("group/menu-item relative", className)}
+    {...props}
+  />
+))
+SidebarMenuItem.displayName = "SidebarMenuItem"
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button"
+    const { isMobile, state } = useSidebar()
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    )
+
+    if (!tooltip) {
+      return button
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip,
+      }
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== "collapsed" || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    )
+  }
+)
+SidebarMenuButton.displayName = "SidebarMenuButton"
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    showOnHover?: boolean
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuAction.displayName = "SidebarMenuAction"
+
+const SidebarMenuBadge = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={cn(
+      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
+      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=lg]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuBadge.displayName = "SidebarMenuBadge"
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 flex-1 max-w-[--skeleton-width]"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+})
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
+
+const SidebarMenuSub = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu-sub"
+    className={cn(
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuSub.displayName = "SidebarMenuSub"
+
+const SidebarMenuSubItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />)
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean
+    size?: "sm" | "md"
+    isActive?: boolean
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/samples/teamspace-nextjs/components/ui/skeleton.tsx b/samples/teamspace-nextjs/components/ui/skeleton.tsx
new file mode 100644
index 000000000..01b8b6d4f
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/samples/teamspace-nextjs/components/ui/slider.tsx b/samples/teamspace-nextjs/components/ui/slider.tsx
new file mode 100644
index 000000000..c31c2b3bc
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/slider.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
diff --git a/samples/teamspace-nextjs/components/ui/sonner.tsx b/samples/teamspace-nextjs/components/ui/sonner.tsx
new file mode 100644
index 000000000..452f4d9f0
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/sonner.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/samples/teamspace-nextjs/components/ui/switch.tsx b/samples/teamspace-nextjs/components/ui/switch.tsx
new file mode 100644
index 000000000..bc69cf2db
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/samples/teamspace-nextjs/components/ui/table.tsx b/samples/teamspace-nextjs/components/ui/table.tsx
new file mode 100644
index 000000000..7f3502f8b
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/table.tsx
@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/samples/teamspace-nextjs/components/ui/tabs.tsx b/samples/teamspace-nextjs/components/ui/tabs.tsx
new file mode 100644
index 000000000..26eb10912
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/samples/teamspace-nextjs/components/ui/textarea.tsx b/samples/teamspace-nextjs/components/ui/textarea.tsx
new file mode 100644
index 000000000..f0c9320d2
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/textarea.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/samples/teamspace-nextjs/components/ui/toast.tsx b/samples/teamspace-nextjs/components/ui/toast.tsx
new file mode 100644
index 000000000..521b94b07
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/toast.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
diff --git a/samples/teamspace-nextjs/components/ui/toaster.tsx b/samples/teamspace-nextjs/components/ui/toaster.tsx
new file mode 100644
index 000000000..171beb46d
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { useToast } from "@/hooks/use-toast"
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/samples/teamspace-nextjs/components/ui/toggle-group.tsx b/samples/teamspace-nextjs/components/ui/toggle-group.tsx
new file mode 100644
index 000000000..1c876bbee
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/toggle-group.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/samples/teamspace-nextjs/components/ui/toggle.tsx b/samples/teamspace-nextjs/components/ui/toggle.tsx
new file mode 100644
index 000000000..c19bea373
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/toggle.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3 min-w-10",
+        sm: "h-9 px-2.5 min-w-9",
+        lg: "h-11 px-5 min-w-11",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }
diff --git a/samples/teamspace-nextjs/components/ui/tooltip.tsx b/samples/teamspace-nextjs/components/ui/tooltip.tsx
new file mode 100644
index 000000000..30fc44d90
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/tooltip.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/samples/teamspace-nextjs/components/ui/use-mobile.tsx b/samples/teamspace-nextjs/components/ui/use-mobile.tsx
new file mode 100644
index 000000000..2b0fe1dfe
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/use-mobile.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/samples/teamspace-nextjs/components/ui/use-toast.ts b/samples/teamspace-nextjs/components/ui/use-toast.ts
new file mode 100644
index 000000000..02e111d81
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/use-toast.ts
@@ -0,0 +1,194 @@
+"use client"
+
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }
diff --git a/samples/teamspace-nextjs/env.local.example b/samples/teamspace-nextjs/env.local.example
new file mode 100644
index 000000000..8b5f755d9
--- /dev/null
+++ b/samples/teamspace-nextjs/env.local.example
@@ -0,0 +1,6 @@
+# This file is an example of the .env.local file.
+# DO NOT modify the sample values.
+
+NEXT_PUBLIC_ASGARDEO_BASE_URL='https://api.asgardeo.io/t/<ORGANIZATION>'
+NEXT_PUBLIC_ASGARDEO_CLIENT_ID='<CLIENT_ID>'
+ASGARDEO_CLIENT_SECRET='<CLIENT_SECRET>'
diff --git a/samples/teamspace-nextjs/eslint.config.mjs b/samples/teamspace-nextjs/eslint.config.mjs
new file mode 100644
index 000000000..c85fb67c4
--- /dev/null
+++ b/samples/teamspace-nextjs/eslint.config.mjs
@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;
diff --git a/samples/teamspace-nextjs/hooks/use-auth.tsx b/samples/teamspace-nextjs/hooks/use-auth.tsx
new file mode 100644
index 000000000..ce5970c87
--- /dev/null
+++ b/samples/teamspace-nextjs/hooks/use-auth.tsx
@@ -0,0 +1,161 @@
+"use client"
+
+import { createContext, useContext, useState, useEffect, type ReactNode } from "react"
+import { useRouter } from "next/navigation"
+
+interface User {
+  id: string
+  name: string
+  email: string
+  avatar: string
+  username: string
+}
+
+interface Organization {
+  id: string
+  name: string
+  slug: string
+  avatar: string
+  role: "owner" | "admin" | "member"
+  memberCount: number
+}
+
+interface AuthContextType {
+  user: User | null
+  currentOrg: Organization | null
+  organizations: Organization[]
+  isAuthenticated: boolean
+  isLoading: boolean
+  signIn: (email: string, password: string) => Promise<void>
+  signUp: (name: string, email: string, password: string) => Promise<void>
+  signOut: () => void
+  setCurrentOrg: (org: Organization) => void
+  addOrganization: (org: Organization) => void
+}
+
+const AuthContext = createContext<AuthContextType | null>(null)
+
+const mockUser: User = {
+  id: "1",
+  name: "John Doe",
+  email: "demo@teamspace.com",
+  avatar: "/placeholder.svg?height=32&width=32",
+  username: "johndoe",
+}
+
+const mockOrganizations: Organization[] = [
+  {
+    id: "1",
+    name: "Acme Corp",
+    slug: "acme-corp",
+    avatar: "/placeholder.svg?height=32&width=32",
+    role: "owner",
+    memberCount: 12,
+  },
+  {
+    id: "2",
+    name: "Tech Startup",
+    slug: "tech-startup",
+    avatar: "/placeholder.svg?height=32&width=32",
+    role: "admin",
+    memberCount: 8,
+  },
+]
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null)
+  const [currentOrg, setCurrentOrg] = useState<Organization | null>(null)
+  const [organizations, setOrganizations] = useState<Organization[]>(mockOrganizations)
+  const [isLoading, setIsLoading] = useState(true)
+  const router = useRouter()
+
+  useEffect(() => {
+    // Check for existing session
+    const savedUser = localStorage.getItem("user")
+    const savedOrg = localStorage.getItem("currentOrg")
+
+    if (savedUser) {
+      setUser(JSON.parse(savedUser))
+      if (savedOrg) {
+        setCurrentOrg(JSON.parse(savedOrg))
+      } else {
+        setCurrentOrg(mockOrganizations[0])
+      }
+    }
+    setIsLoading(false)
+  }, [])
+
+  const signIn = async (email: string, password: string) => {
+    // Mock authentication
+    if (email === "demo@teamspace.com" && password === "password") {
+      setUser(mockUser)
+      setCurrentOrg(mockOrganizations[0])
+      localStorage.setItem("user", JSON.stringify(mockUser))
+      localStorage.setItem("currentOrg", JSON.stringify(mockOrganizations[0]))
+      router.push("/dashboard")
+    } else {
+      throw new Error("Invalid credentials")
+    }
+  }
+
+  const signUp = async (name: string, email: string, password: string) => {
+    // Mock registration
+    const newUser: User = {
+      id: Date.now().toString(),
+      name,
+      email,
+      avatar: "/placeholder.svg?height=32&width=32",
+      username: name.toLowerCase().replace(/\s+/g, ""),
+    }
+
+    setUser(newUser)
+    setCurrentOrg(mockOrganizations[0])
+    localStorage.setItem("user", JSON.stringify(newUser))
+    localStorage.setItem("currentOrg", JSON.stringify(mockOrganizations[0]))
+    router.push("/dashboard")
+  }
+
+  const signOut = () => {
+    setUser(null)
+    setCurrentOrg(null)
+    localStorage.removeItem("user")
+    localStorage.removeItem("currentOrg")
+    router.push("/")
+  }
+
+  const handleSetCurrentOrg = (org: Organization) => {
+    setCurrentOrg(org)
+    localStorage.setItem("currentOrg", JSON.stringify(org))
+  }
+
+  const addOrganization = (org: Organization) => {
+    setOrganizations((prev) => [...prev, org])
+  }
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        currentOrg,
+        organizations,
+        isAuthenticated: !!user,
+        isLoading,
+        signIn,
+        signUp,
+        signOut,
+        setCurrentOrg: handleSetCurrentOrg,
+        addOrganization,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext)
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider")
+  }
+  return context
+}
diff --git a/samples/teamspace-nextjs/hooks/use-mobile.tsx b/samples/teamspace-nextjs/hooks/use-mobile.tsx
new file mode 100644
index 000000000..2b0fe1dfe
--- /dev/null
+++ b/samples/teamspace-nextjs/hooks/use-mobile.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/samples/teamspace-nextjs/hooks/use-toast.ts b/samples/teamspace-nextjs/hooks/use-toast.ts
new file mode 100644
index 000000000..02e111d81
--- /dev/null
+++ b/samples/teamspace-nextjs/hooks/use-toast.ts
@@ -0,0 +1,194 @@
+"use client"
+
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }
diff --git a/samples/teamspace-nextjs/lib/auth.ts b/samples/teamspace-nextjs/lib/auth.ts
new file mode 100644
index 000000000..64e559bdf
--- /dev/null
+++ b/samples/teamspace-nextjs/lib/auth.ts
@@ -0,0 +1,90 @@
+import { SignJWT, jwtVerify } from "jose"
+import { cookies } from "next/headers"
+import { type NextRequest, NextResponse } from "next/server"
+
+const key = new TextEncoder().encode(process.env.JWT_SECRET || "your-secret-key")
+
+export async function encrypt(payload: any) {
+  return await new SignJWT(payload)
+    .setProtectedHeader({ alg: "HS256" })
+    .setIssuedAt()
+    .setExpirationTime("24h")
+    .sign(key)
+}
+
+export async function decrypt(input: string): Promise<any> {
+  const { payload } = await jwtVerify(input, key, {
+    algorithms: ["HS256"],
+  })
+  return payload
+}
+
+export async function login(formData: FormData) {
+  // Verify credentials & get the user
+  const email = formData.get("email") as string
+  const password = formData.get("password") as string
+
+  // In a real app, you'd verify against your database
+  // For demo purposes, we'll use a simple check
+  if (email === "demo@teamspace.com" && password === "password") {
+    const user = { id: "1", email: "demo@teamspace.com", name: "Demo User" }
+
+    // Create the session
+    const expires = new Date(Date.now() + 24 * 60 * 60 * 1000) // 24 hours
+    const session = await encrypt({ user, expires })
+
+    // Save the session in a cookie
+    cookies().set("session", session, { expires, httpOnly: true })
+
+    return { success: true, user }
+  }
+
+  return { success: false, error: "Invalid credentials" }
+}
+
+export async function signup(formData: FormData) {
+  const name = formData.get("name") as string
+  const email = formData.get("email") as string
+  const password = formData.get("password") as string
+
+  // In a real app, you'd save to your database
+  // For demo purposes, we'll create a session immediately
+  const user = { id: Date.now().toString(), email, name }
+
+  // Create the session
+  const expires = new Date(Date.now() + 24 * 60 * 60 * 1000)
+  const session = await encrypt({ user, expires })
+
+  // Save the session in a cookie
+  cookies().set("session", session, { expires, httpOnly: true })
+
+  return { success: true, user }
+}
+
+export async function logout() {
+  // Destroy the session
+  cookies().set("session", "", { expires: new Date(0) })
+}
+
+export async function getSession() {
+  const session = cookies().get("session")?.value
+  if (!session) return null
+  return await decrypt(session)
+}
+
+export async function updateSession(request: NextRequest) {
+  const session = request.cookies.get("session")?.value
+  if (!session) return
+
+  // Refresh the session so it doesn't expire
+  const parsed = await decrypt(session)
+  parsed.expires = new Date(Date.now() + 24 * 60 * 60 * 1000)
+  const res = NextResponse.next()
+  res.cookies.set({
+    name: "session",
+    value: await encrypt(parsed),
+    httpOnly: true,
+    expires: parsed.expires,
+  })
+  return res
+}
diff --git a/samples/teamspace-nextjs/lib/utils.ts b/samples/teamspace-nextjs/lib/utils.ts
new file mode 100644
index 000000000..d084ccade
--- /dev/null
+++ b/samples/teamspace-nextjs/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/samples/teamspace-nextjs/middleware.ts b/samples/teamspace-nextjs/middleware.ts
new file mode 100644
index 000000000..3baabc0ad
--- /dev/null
+++ b/samples/teamspace-nextjs/middleware.ts
@@ -0,0 +1,25 @@
+import {AsgardeoNext} from '@asgardeo/nextjs';
+import {NextRequest} from 'next/server';
+
+const asgardeo = new AsgardeoNext();
+
+asgardeo.initialize({
+  baseUrl: process.env.NEXT_PUBLIC_ASGARDEO_BASE_URL,
+  clientId: process.env.NEXT_PUBLIC_ASGARDEO_CLIENT_ID,
+  clientSecret: process.env.NEXT_PUBLIC_ASGARDEO_CLIENT_SECRET,
+  afterSignInUrl: 'http://localhost:3000',
+  scopes: 'openid profile email',
+});
+
+export async function middleware(request: NextRequest) {
+  return await asgardeo.middleware(request);
+}
+
+export const config = {
+  matcher: [
+    // Skip Next.js internals and all static files, unless found in search params
+    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
+    // Always run for API routes
+    '/(api|trpc)(.*)',
+  ],
+};
diff --git a/samples/teamspace-nextjs/next.config.js b/samples/teamspace-nextjs/next.config.js
new file mode 100644
index 000000000..d4aab3dd5
--- /dev/null
+++ b/samples/teamspace-nextjs/next.config.js
@@ -0,0 +1,13 @@
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  images: {
+    unoptimized: true,
+  },
+}
+
+module.exports = nextConfig
diff --git a/samples/teamspace-nextjs/next.config.ts b/samples/teamspace-nextjs/next.config.ts
new file mode 100644
index 000000000..e9ffa3083
--- /dev/null
+++ b/samples/teamspace-nextjs/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
diff --git a/samples/teamspace-nextjs/package.json b/samples/teamspace-nextjs/package.json
new file mode 100644
index 000000000..e8319267b
--- /dev/null
+++ b/samples/teamspace-nextjs/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "teamspace",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@asgardeo/nextjs": "workspace:^",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-slot": "^1.0.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "lucide-react": "^0.294.0",
+    "next": "14.0.4",
+    "react": "^18",
+    "react-dom": "^18",
+    "tailwind-merge": "^2.0.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.10",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.4",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}
diff --git a/samples/teamspace-nextjs/pages.tsx b/samples/teamspace-nextjs/pages.tsx
new file mode 100644
index 000000000..a609578b4
--- /dev/null
+++ b/samples/teamspace-nextjs/pages.tsx
@@ -0,0 +1,458 @@
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  Users,
+  MessageSquare,
+  Calendar,
+  FileText,
+  Shield,
+  Zap,
+  CheckCircle,
+  Star,
+  ArrowRight,
+  Play,
+  Github,
+  Twitter,
+  Linkedin,
+} from "lucide-react"
+import Link from "next/link"
+import Image from "next/image"
+import { Header } from "@/components/header"
+
+const features = [
+  {
+    icon: MessageSquare,
+    title: "Real-time Communication",
+    description: "Stay connected with instant messaging, video calls, and threaded discussions.",
+    color: "text-blue-600",
+    bgColor: "bg-blue-50",
+  },
+  {
+    icon: Calendar,
+    title: "Project Management",
+    description: "Plan, track, and deliver projects on time with intuitive task management.",
+    color: "text-green-600",
+    bgColor: "bg-green-50",
+  },
+  {
+    icon: FileText,
+    title: "Document Collaboration",
+    description: "Create, edit, and share documents in real-time with version control.",
+    color: "text-purple-600",
+    bgColor: "bg-purple-50",
+  },
+  {
+    icon: Shield,
+    title: "Enterprise Security",
+    description: "Keep your data safe with enterprise-grade security and compliance.",
+    color: "text-red-600",
+    bgColor: "bg-red-50",
+  },
+  {
+    icon: Zap,
+    title: "Workflow Automation",
+    description: "Automate repetitive tasks and streamline processes with custom workflows.",
+    color: "text-yellow-600",
+    bgColor: "bg-yellow-50",
+  },
+  {
+    icon: Users,
+    title: "Team Analytics",
+    description: "Gain insights into team performance and project progress with detailed analytics.",
+    color: "text-indigo-600",
+    bgColor: "bg-indigo-50",
+  },
+]
+
+const testimonials = [
+  {
+    quote: "Teamspace transformed how our remote team collaborates. We're 40% more productive since switching.",
+    author: "Sarah Chen",
+    role: "VP of Engineering",
+    company: "TechCorp",
+    avatar: "/placeholder.svg?height=48&width=48",
+  },
+  {
+    quote: "The best investment we've made for our team. The ROI was clear within the first month.",
+    author: "Michael Rodriguez",
+    role: "Project Manager",
+    company: "InnovateLab",
+    avatar: "/placeholder.svg?height=48&width=48",
+  },
+  {
+    quote: "Finally, a platform that brings everything together. Our team loves the intuitive interface.",
+    author: "Emily Johnson",
+    role: "Creative Director",
+    company: "DesignStudio",
+    avatar: "/placeholder.svg?height=48&width=48",
+  },
+]
+
+const pricingPlans = [
+  {
+    name: "Starter",
+    price: "Free",
+    description: "Perfect for small teams getting started",
+    features: ["Up to 5 team members", "Basic project management", "5GB storage", "Community support"],
+    cta: "Get Started",
+    popular: false,
+  },
+  {
+    name: "Professional",
+    price: "$12",
+    period: "/user/month",
+    description: "For growing teams that need more power",
+    features: [
+      "Unlimited team members",
+      "Advanced project management",
+      "100GB storage",
+      "Priority support",
+      "Advanced integrations",
+      "Team analytics",
+    ],
+    cta: "Start Free Trial",
+    popular: true,
+  },
+  {
+    name: "Enterprise",
+    price: "Custom",
+    description: "For large organizations with custom needs",
+    features: [
+      "Everything in Professional",
+      "SSO & advanced security",
+      "Unlimited storage",
+      "Dedicated support",
+      "Custom integrations",
+      "On-premise deployment",
+    ],
+    cta: "Contact Sales",
+    popular: false,
+  },
+]
+
+export default function LandingPage() {
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+
+      {/* Hero Section */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-background to-purple-50 py-20 lg:py-32">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <div className="space-y-8">
+              <Badge variant="secondary" className="w-fit">
+                🚀 New: AI-powered insights now available
+              </Badge>
+
+              <h1 className="text-4xl lg:text-6xl font-bold text-foreground leading-tight">
+                Where teams
+                <span className="text-primary"> collaborate</span> and ideas come to life
+              </h1>
+
+              <p className="text-xl text-muted-foreground leading-relaxed">
+                Streamline your team's workflow with our all-in-one collaboration platform. Chat, plan, share, and
+                deliver exceptional results together.
+              </p>
+
+              <div className="flex flex-col sm:flex-row gap-4">
+                <Button asChild size="lg" className="h-12 px-8">
+                  <Link href="/auth/signup">
+                    Start Free Trial
+                    <ArrowRight className="ml-2 h-5 w-5" />
+                  </Link>
+                </Button>
+                <Button variant="outline" size="lg" className="h-12 px-8">
+                  <Play className="mr-2 h-5 w-5" />
+                  Watch Demo
+                </Button>
+              </div>
+
+              <div className="flex items-center space-x-6 text-sm text-muted-foreground">
+                <div className="flex items-center">
+                  <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
+                  Free 14-day trial
+                </div>
+                <div className="flex items-center">
+                  <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
+                  No credit card required
+                </div>
+              </div>
+            </div>
+
+            <div className="relative">
+              <Image
+                src="/placeholder.svg?height=500&width=600"
+                alt="Teamspace Dashboard"
+                width={600}
+                height={500}
+                className="w-full rounded-2xl shadow-2xl"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section id="features" className="py-20">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <Badge variant="outline" className="mb-4">
+              Features
+            </Badge>
+            <h2 className="text-3xl lg:text-5xl font-bold text-foreground mb-4">
+              Everything your team needs to succeed
+            </h2>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+              From real-time collaboration to project management, Teamspace provides all the tools your team needs.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {features.map((feature, index) => {
+              const Icon = feature.icon
+              return (
+                <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-shadow">
+                  <CardHeader>
+                    <div className={`w-12 h-12 ${feature.bgColor} rounded-lg flex items-center justify-center mb-4`}>
+                      <Icon className={`h-6 w-6 ${feature.color}`} />
+                    </div>
+                    <CardTitle className="text-xl">{feature.title}</CardTitle>
+                    <CardDescription className="text-base leading-relaxed">{feature.description}</CardDescription>
+                  </CardHeader>
+                </Card>
+              )
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonials Section */}
+      <section id="testimonials" className="bg-muted/50 py-20">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <Badge variant="outline" className="mb-4">
+              Testimonials
+            </Badge>
+            <h2 className="text-3xl lg:text-5xl font-bold text-foreground mb-4">What our customers say</h2>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {testimonials.map((testimonial, index) => (
+              <Card key={index} className="border-0 shadow-lg">
+                <CardContent className="pt-6">
+                  <div className="flex mb-4">
+                    {[...Array(5)].map((_, i) => (
+                      <Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
+                    ))}
+                  </div>
+                  <blockquote className="text-foreground mb-6 text-lg leading-relaxed">
+                    "{testimonial.quote}"
+                  </blockquote>
+                  <div className="flex items-center">
+                    <Image
+                      src={testimonial.avatar || "/placeholder.svg"}
+                      alt={testimonial.author}
+                      width={48}
+                      height={48}
+                      className="w-12 h-12 rounded-full mr-4"
+                    />
+                    <div>
+                      <div className="font-semibold text-foreground">{testimonial.author}</div>
+                      <div className="text-muted-foreground text-sm">
+                        {testimonial.role}, {testimonial.company}
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Pricing Section */}
+      <section id="pricing" className="py-20">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <Badge variant="outline" className="mb-4">
+              Pricing
+            </Badge>
+            <h2 className="text-3xl lg:text-5xl font-bold text-foreground mb-4">Simple, transparent pricing</h2>
+            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+              Choose the plan that's right for your team. Start free and scale as you grow.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+            {pricingPlans.map((plan, index) => (
+              <Card key={index} className={`relative ${plan.popular ? "border-primary shadow-lg scale-105" : ""}`}>
+                {plan.popular && (
+                  <Badge className="absolute -top-3 left-1/2 transform -translate-x-1/2">Most Popular</Badge>
+                )}
+
+                <CardHeader className="text-center">
+                  <CardTitle className="text-xl">{plan.name}</CardTitle>
+                  <CardDescription>{plan.description}</CardDescription>
+                  <div className="mt-4">
+                    <span className="text-4xl font-bold text-foreground">{plan.price}</span>
+                    {plan.period && <span className="text-muted-foreground">{plan.period}</span>}
+                  </div>
+                </CardHeader>
+
+                <CardContent>
+                  <ul className="space-y-3 mb-8">
+                    {plan.features.map((feature, featureIndex) => (
+                      <li key={featureIndex} className="flex items-center">
+                        <CheckCircle className="h-5 w-5 text-green-500 mr-3 flex-shrink-0" />
+                        <span className="text-muted-foreground">{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
+
+                  <Button asChild className="w-full" variant={plan.popular ? "default" : "outline"}>
+                    <Link href="/auth/signup">{plan.cta}</Link>
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="bg-primary py-20">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h2 className="text-3xl lg:text-5xl font-bold text-primary-foreground mb-6">
+            Ready to transform your team's productivity?
+          </h2>
+          <p className="text-xl text-primary-foreground/80 mb-8 max-w-2xl mx-auto">
+            Join thousands of teams already using Teamspace to collaborate better and achieve more.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button asChild size="lg" variant="secondary" className="h-12 px-8">
+              <Link href="/auth/signup">
+                Start Free Trial
+                <ArrowRight className="ml-2 h-5 w-5" />
+              </Link>
+            </Button>
+            <Button
+              size="lg"
+              variant="outline"
+              className="h-12 px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary"
+            >
+              Schedule Demo
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="bg-muted py-16">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid md:grid-cols-2 lg:grid-cols-5 gap-8">
+            <div className="lg:col-span-2">
+              <div className="flex items-center mb-4">
+                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+                  <Users className="h-5 w-5 text-primary-foreground" />
+                </div>
+                <span className="ml-2 text-xl font-bold">Teamspace</span>
+              </div>
+              <p className="text-muted-foreground mb-6 max-w-md">
+                Empowering teams to collaborate better and achieve more together.
+              </p>
+              <div className="flex space-x-4">
+                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
+                  <Twitter className="h-5 w-5" />
+                </Link>
+                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
+                  <Github className="h-5 w-5" />
+                </Link>
+                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
+                  <Linkedin className="h-5 w-5" />
+                </Link>
+              </div>
+            </div>
+
+            <div>
+              <h4 className="font-semibold mb-4">Product</h4>
+              <ul className="space-y-2 text-muted-foreground">
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Features
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Pricing
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    API
+                  </Link>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h4 className="font-semibold mb-4">Company</h4>
+              <ul className="space-y-2 text-muted-foreground">
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    About
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Blog
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Careers
+                  </Link>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h4 className="font-semibold mb-4">Support</h4>
+              <ul className="space-y-2 text-muted-foreground">
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Help Center
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Documentation
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Contact
+                  </Link>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="border-t border-border mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+            <p className="text-muted-foreground text-sm">
+              © {new Date().getFullYear()} Teamspace. All rights reserved.
+            </p>
+            <div className="flex space-x-6 mt-4 md:mt-0">
+              <Link href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
+                Privacy Policy
+              </Link>
+              <Link href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
+                Terms of Service
+              </Link>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  )
+}
diff --git a/samples/teamspace-nextjs/postcss.config.js b/samples/teamspace-nextjs/postcss.config.js
new file mode 100644
index 000000000..33ad091d2
--- /dev/null
+++ b/samples/teamspace-nextjs/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/samples/teamspace-nextjs/postcss.config.mjs b/samples/teamspace-nextjs/postcss.config.mjs
new file mode 100644
index 000000000..95d885ee9
--- /dev/null
+++ b/samples/teamspace-nextjs/postcss.config.mjs
@@ -0,0 +1,6 @@
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+export default config;
diff --git a/samples/teamspace-nextjs/public/placeholder-logo.png b/samples/teamspace-nextjs/public/placeholder-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..8a792ac2ddfbe047639f7907c82f14c73e3de3d9
GIT binary patch
literal 568
zcmeAS@N?(olHy`uVBq!ia0y~yU<5K5Ca^FANm1Vwi-43tfKP}kNR$*1WiP`GRL@@$
z<QL3vU!lR_fWZ6t2>}KL6V^XjP|gFiXN9MWV@SoVw>S2B83zimJup|_^-FbrjeV<v
z*lw|=xs0x-S#nsL%^x(0FVKj%;qsQ{U_)>3it>ba2M!&I{-9Oz_xPcYF3oFZ=eo>b
ztd*bf%*2|<`prCX7bFlbJSYChhATpnZHm_gDmxOE$M3Ov^QCh;k9GZ#-G|g`wsZ1y
zY-hCA6Y*4%kP@8PzH+9qgqG>UuX7G~Jv3yxb4X!L$WkVer)+Lao)20%*YwyPoNauk
zS!$0_-Kr#3+3w{V4Ccu^47H4DY>j<sazVM=;K3pHk{C5Z9+CU(_C~D2hB~a*&VI>P
zOx?nl+kWZD?x4qFw+?-2Jz{$0yTXmVj$U6an>Gc>YVI}tW1#2eCg2#H$RT;W`9jE4
z<(d!P-_Kw0oV0yf*RuH&47YRnuIuc%FZkt*pVIL&DpPv8{<u#M`yJBCefwlcT-?&n
zjxSV#cP<yr(CFAcO<MeKYtwf3*yMaAuj@PF;;yRSvlUx1ZJp{~pm)R1n_XBvJ$&o^
z@|B67@3(7p1LcJx-KQrXz4I$U-A#P^e%a;@1bFc|j=?m3v(EJ3b*iA~_jL7hS?83{
F1OR^s+sXg{

literal 0
HcmV?d00001

diff --git a/samples/teamspace-nextjs/public/placeholder-logo.svg b/samples/teamspace-nextjs/public/placeholder-logo.svg
new file mode 100644
index 000000000..b1695aafc
--- /dev/null
+++ b/samples/teamspace-nextjs/public/placeholder-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/samples/teamspace-nextjs/public/placeholder-user.jpg b/samples/teamspace-nextjs/public/placeholder-user.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6fa7543d38ed8fdb38f03b5c0f40ad2d66827d4a
GIT binary patch
literal 1635
zcmex=<NpH&0WUXCHwH#V1_nkTWcYuZ!I^=Jot=}Njf<0mlbf51hhI{FpO24UPE1@#
zQbj>cRarq<NkiAtKtsz+TS?i-#mLOs*1^F+&A`pu)y~V(-oX}R2qQN)H$N}Gtbl;5
zt){Z3Ey>{jAqGJXh7$}Ym>C5bm;@P_1sVSzVUPwol9>?*7~p`Fjh%&&i5Vy<f-DS?
z|9^{thnbOqNq|`ZC~&g@u8VX=&D0{3NxJM8pgPZVC{;A7_ZmRB%rg%6?s#L-<8jAt
z0z{;6M(1w%g+C<%x63v_L_Qop_vlnupKyXLgwOCqL#0qDzHbAR3#0hCCI(yZ^Dhe6
zF%4q6JX@HXcv8TZpNd?b`6dvt1)_(e?F$%`&(vJvb^z&QR@8F^nq++Vvq=Gn&*oGp
ztH8i`B#KuC#AReE29iQ7J3t)rfIKjWodp;enVA?_x!E~6A*KL>o`r#xP0%qgXfnHy
zn7E>$Lug{-LIb0a!ifhj3W%7RB^MNLx}>0_tP&7BY4IaqjBo(siP4_n_ky5FEmL(`
zmhdc@Jb`OxUUPQK!#s<ks4a^p%H4WwDH~SypW$=Z+Y7nHVuC7`f>q(C`ZJd3YCA-U
zh)gnS;tOzhJ@#Yf$<H#|T_Xi0EycfeiDqs%zjsG4=iCqeb2guta$W3tyl3m%@RzH%
zw$)BNFmug&r#)BuLRM|CQ!V1T5}m5A6W-@iJL|m54!fk=sdn?qW<?z@Q0vqR3!XAL
zY<6+j>SRGl2DVF#R;SL@d2ijhdh5m?{S3~XPpnp*$)2k2D4JJuYTMD;n0K36=Y8OJ
z-mS1ZZC1<AQ;7$xFJ;KI$coB-@#?w#R%S(^Vy12TlL^0+jun3QbGz*s)t|7a{K#C>
z49BdqoLo<WB68%O^mTUSWN*BC$H7x@u4>M_v$9v)Hm?5W<`Stp{n4{)u7wjb{~fvi
z!T;47&))dGMoGtVj(5+GENxwrz4z{INB>V}1-4JUxp@DgJ8LKAUAQWhoR~X5%Wp!~
z<DEyIh54}GuHDORee^nG{=GJ{6F;tQFYa8gBi;RW!?hOKPp@w0bZ55BxNw^zr`q$9
z|Cgg0imF};Dm+VO?a6Cq6V!EZKX>=~v%IB`XWv<uso3&rOQXBsJ*#tZSFUs9{Y^K{
zS>>j>XTei(%h-3q0fm1bY5udCHKmu^f&G@&$==-St!-gGk?J$~inXs)aj#q07WR4-
zM=rxkFUy8C!QJtD_bgKux*|B+dhW6{-z2Xe?@~0Ks(ijMro-3a&Mj#N$xpGBRnmWt
zTsUxz-_bhtPj<sMeuw`I#q*`&SU0SnCF#EM>F={K-%Z^<th=u9Px?QDVDQ^dYbW_s
zu35R9EqP8RyTuy$o@<vb=I^oyx%njXt>57b<}UkWR&Lo)qWhnrV2yD?(SL?Q-l9d;
zHS6^j9!_Ejaqqemoyn}=@ptvvS-S7I7N7FZ5}(WNv3l;#-@XTLOmcJGRz1a7FhcBC
z-nPY(UsETGE4&Rdme=pC+jj2j;!j+6o-!m}7oD?jz2dGcAvK4%qSmfE=U+z7Z+`#j
z$Mx4a@1yJ$R+zt@y0z(yW_ISH^4k|<^!Al@?-M=r`gz3ehXgqVyM1>}k-Q}GF<-;)
z*LLGyVd)Qk|Ji$(J?dTY-07-((_=n&#1_`3T&d5FiH|guzja;wny>q}tw+C34*a{8
zfJ9i0DbumfeTVp1E#|(wudjdSJE%AnL@H&$nSBB{^D;34Gp|fN9u>e68m!_b0O__-
AD*ylh

literal 0
HcmV?d00001

diff --git a/samples/teamspace-nextjs/public/placeholder.jpg b/samples/teamspace-nextjs/public/placeholder.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6bfe96336dbe567f5f1e9129f5bccdc78b114bba
GIT binary patch
literal 1064
zcmb7@Nla5w6o$`zL;Ko7c&|)~7+MC)5J;K9giwZ-mWToZDl29|7tA;;v?z!g5*b9%
zRSP(-1ZOwO;J6Z;05{Ybq6y%HZtA^{7Ghj^Zu0K`Ud}o9eCM5OpR~^apJ^}|03iS)
zUSPLDyMAv~1wd97gaQBuEK&lE6~YUU53r&J$VBT_bS?^Z_)q|CRlqoW3h_=1XC~2(
zowlIWj23Fe8(HX8O~UM7AR)W5x}mzhvbshU9ifGUR8tm1vSSl<kSO`*>)WSJzz{QQ
zmi2yKN<Cm70f8eW(?|eHK(v7DW8jCYV3BBI7ywN%hy{t1lgSm>VU))a_#4eg7^#He
zB=v{_T40oFHqzanm!#xGc@)<MNSjrish-x{=)u4et=Dkfcv@G?A<ni{7gXvUJKtU3
zmz_Rzcws|cT-nKnk)nx~{xvmkH2V1RtND!sJ)^CQ&kRlGw;2T$*JSdwKEWZO35gqx
zrp#^IcNFfdtlG6_@4o#<+KwJO-f`-5@0qifbLTHyyma}>^&2;D-M({g?EZs?j~+jH
z`uxSqSCdoIGw<Gi`1omd?(4VjKYlL#`b{Wtcb6gYQ{*HN47*B+TS8$@nxa{Xr5L6S
z;U3YvQq8C$Q`}jte^ic#P7)nZoa$Md8`GQ}*lA50^pcjuZk-<wDjH6=)h&1*Dvhhz
zpwH{l^iAOAtr0omF^C}pqvRJ5n6mN;!c*VS*hHAjhg({gxw=pGETi=gIN*k^UUTq`
zj5-OQIT7EybwDnzP`-vVP;i`_lPcsgxvPu9Rq#~`Zf=7AS|1PJkif9e;6RNgJW3ZI
zu1(TvGzps$lhX7?lQArAOa5j<o-V_vx8o$p#nn}C6VytjS|6c_(EqpDr@@65+b7`R
zn%j-vIox%`QU^te2QL{dOFV{7i9nK!9mXJ<Cs%<YhW{A=rNHy5j!elZu5IqL4i3+c
z^R@+*R+n8=WA3nAx%YI&c|fxI?q6r~ek7ehemM<@V)2~gYb`?{s3UotPgOhL*=!vg
XAGR(0la3V0lXM&+MLHyoCvxf!Qm;2N

literal 0
HcmV?d00001

diff --git a/samples/teamspace-nextjs/public/placeholder.svg b/samples/teamspace-nextjs/public/placeholder.svg
new file mode 100644
index 000000000..e763910b2
--- /dev/null
+++ b/samples/teamspace-nextjs/public/placeholder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/samples/teamspace-nextjs/styles/globals.css b/samples/teamspace-nextjs/styles/globals.css
new file mode 100644
index 000000000..ac6844236
--- /dev/null
+++ b/samples/teamspace-nextjs/styles/globals.css
@@ -0,0 +1,94 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/samples/teamspace-nextjs/tailwind.config.js b/samples/teamspace-nextjs/tailwind.config.js
new file mode 100644
index 000000000..658ba6011
--- /dev/null
+++ b/samples/teamspace-nextjs/tailwind.config.js
@@ -0,0 +1,78 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ['class'],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+    '*.{js,ts,jsx,tsx,mdx}',
+  ],
+  prefix: '',
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        '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: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate')],
+};
diff --git a/samples/teamspace-nextjs/tsconfig.json b/samples/teamspace-nextjs/tsconfig.json
new file mode 100644
index 000000000..5d2b7e671
--- /dev/null
+++ b/samples/teamspace-nextjs/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "es6"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/recipes/teamspace-react/.env.local.example b/samples/teamspace-react/.env.local.example
similarity index 100%
rename from recipes/teamspace-react/.env.local.example
rename to samples/teamspace-react/.env.local.example
diff --git a/recipes/teamspace-react/.gitignore b/samples/teamspace-react/.gitignore
similarity index 100%
rename from recipes/teamspace-react/.gitignore
rename to samples/teamspace-react/.gitignore
diff --git a/recipes/teamspace-react/README.md b/samples/teamspace-react/README.md
similarity index 100%
rename from recipes/teamspace-react/README.md
rename to samples/teamspace-react/README.md
diff --git a/recipes/teamspace-react/components.json b/samples/teamspace-react/components.json
similarity index 100%
rename from recipes/teamspace-react/components.json
rename to samples/teamspace-react/components.json
diff --git a/recipes/teamspace-react/eslint.config.js b/samples/teamspace-react/eslint.config.js
similarity index 100%
rename from recipes/teamspace-react/eslint.config.js
rename to samples/teamspace-react/eslint.config.js
diff --git a/recipes/teamspace-react/index.html b/samples/teamspace-react/index.html
similarity index 100%
rename from recipes/teamspace-react/index.html
rename to samples/teamspace-react/index.html
diff --git a/recipes/teamspace-react/package.json b/samples/teamspace-react/package.json
similarity index 100%
rename from recipes/teamspace-react/package.json
rename to samples/teamspace-react/package.json
diff --git a/recipes/teamspace-react/public/vite.svg b/samples/teamspace-react/public/vite.svg
similarity index 100%
rename from recipes/teamspace-react/public/vite.svg
rename to samples/teamspace-react/public/vite.svg
diff --git a/recipes/teamspace-react/src/App.tsx b/samples/teamspace-react/src/App.tsx
similarity index 100%
rename from recipes/teamspace-react/src/App.tsx
rename to samples/teamspace-react/src/App.tsx
diff --git a/recipes/teamspace-react/src/assets/react.svg b/samples/teamspace-react/src/assets/react.svg
similarity index 100%
rename from recipes/teamspace-react/src/assets/react.svg
rename to samples/teamspace-react/src/assets/react.svg
diff --git a/recipes/teamspace-react/src/components/Header.tsx b/samples/teamspace-react/src/components/Header.tsx
similarity index 100%
rename from recipes/teamspace-react/src/components/Header.tsx
rename to samples/teamspace-react/src/components/Header.tsx
diff --git a/recipes/teamspace-react/src/components/header/AuthenticatedActions.tsx b/samples/teamspace-react/src/components/header/AuthenticatedActions.tsx
similarity index 100%
rename from recipes/teamspace-react/src/components/header/AuthenticatedActions.tsx
rename to samples/teamspace-react/src/components/header/AuthenticatedActions.tsx
diff --git a/recipes/teamspace-react/src/components/header/AuthenticatedMobileMenu.tsx b/samples/teamspace-react/src/components/header/AuthenticatedMobileMenu.tsx
similarity index 100%
rename from recipes/teamspace-react/src/components/header/AuthenticatedMobileMenu.tsx
rename to samples/teamspace-react/src/components/header/AuthenticatedMobileMenu.tsx
diff --git a/recipes/teamspace-react/src/components/header/AuthenticatedNavigation.tsx b/samples/teamspace-react/src/components/header/AuthenticatedNavigation.tsx
similarity index 100%
rename from recipes/teamspace-react/src/components/header/AuthenticatedNavigation.tsx
rename to samples/teamspace-react/src/components/header/AuthenticatedNavigation.tsx
diff --git a/recipes/teamspace-react/src/components/header/Logo.tsx b/samples/teamspace-react/src/components/header/Logo.tsx
similarity index 100%
rename from recipes/teamspace-react/src/components/header/Logo.tsx
rename to samples/teamspace-react/src/components/header/Logo.tsx
diff --git a/recipes/teamspace-react/src/components/header/OrganizationSwitcher.tsx b/samples/teamspace-react/src/components/header/OrganizationSwitcher.tsx
similarity index 100%
rename from recipes/teamspace-react/src/components/header/OrganizationSwitcher.tsx
rename to samples/teamspace-react/src/components/header/OrganizationSwitcher.tsx
diff --git a/recipes/teamspace-react/src/components/header/PublicActions.tsx b/samples/teamspace-react/src/components/header/PublicActions.tsx
similarity index 100%
rename from recipes/teamspace-react/src/components/header/PublicActions.tsx
rename to samples/teamspace-react/src/components/header/PublicActions.tsx
diff --git a/recipes/teamspace-react/src/components/header/PublicNavigation.tsx b/samples/teamspace-react/src/components/header/PublicNavigation.tsx
similarity index 100%
rename from recipes/teamspace-react/src/components/header/PublicNavigation.tsx
rename to samples/teamspace-react/src/components/header/PublicNavigation.tsx
diff --git a/recipes/teamspace-react/src/components/header/UserDropdown.tsx b/samples/teamspace-react/src/components/header/UserDropdown.tsx
similarity index 100%
rename from recipes/teamspace-react/src/components/header/UserDropdown.tsx
rename to samples/teamspace-react/src/components/header/UserDropdown.tsx
diff --git a/recipes/teamspace-react/src/components/ui/alert.tsx b/samples/teamspace-react/src/components/ui/alert.tsx
similarity index 100%
rename from recipes/teamspace-react/src/components/ui/alert.tsx
rename to samples/teamspace-react/src/components/ui/alert.tsx
diff --git a/recipes/teamspace-react/src/components/ui/button.tsx b/samples/teamspace-react/src/components/ui/button.tsx
similarity index 100%
rename from recipes/teamspace-react/src/components/ui/button.tsx
rename to samples/teamspace-react/src/components/ui/button.tsx
diff --git a/recipes/teamspace-react/src/components/ui/card.tsx b/samples/teamspace-react/src/components/ui/card.tsx
similarity index 100%
rename from recipes/teamspace-react/src/components/ui/card.tsx
rename to samples/teamspace-react/src/components/ui/card.tsx
diff --git a/recipes/teamspace-react/src/components/ui/input.tsx b/samples/teamspace-react/src/components/ui/input.tsx
similarity index 100%
rename from recipes/teamspace-react/src/components/ui/input.tsx
rename to samples/teamspace-react/src/components/ui/input.tsx
diff --git a/recipes/teamspace-react/src/components/ui/label.tsx b/samples/teamspace-react/src/components/ui/label.tsx
similarity index 100%
rename from recipes/teamspace-react/src/components/ui/label.tsx
rename to samples/teamspace-react/src/components/ui/label.tsx
diff --git a/recipes/teamspace-react/src/index.css b/samples/teamspace-react/src/index.css
similarity index 100%
rename from recipes/teamspace-react/src/index.css
rename to samples/teamspace-react/src/index.css
diff --git a/recipes/teamspace-react/src/layouts/AuthLayout.tsx b/samples/teamspace-react/src/layouts/AuthLayout.tsx
similarity index 100%
rename from recipes/teamspace-react/src/layouts/AuthLayout.tsx
rename to samples/teamspace-react/src/layouts/AuthLayout.tsx
diff --git a/recipes/teamspace-react/src/layouts/AuthenticatedLayout.tsx b/samples/teamspace-react/src/layouts/AuthenticatedLayout.tsx
similarity index 100%
rename from recipes/teamspace-react/src/layouts/AuthenticatedLayout.tsx
rename to samples/teamspace-react/src/layouts/AuthenticatedLayout.tsx
diff --git a/recipes/teamspace-react/src/layouts/DashboardLayout.tsx b/samples/teamspace-react/src/layouts/DashboardLayout.tsx
similarity index 100%
rename from recipes/teamspace-react/src/layouts/DashboardLayout.tsx
rename to samples/teamspace-react/src/layouts/DashboardLayout.tsx
diff --git a/recipes/teamspace-react/src/layouts/LandingLayout.tsx b/samples/teamspace-react/src/layouts/LandingLayout.tsx
similarity index 100%
rename from recipes/teamspace-react/src/layouts/LandingLayout.tsx
rename to samples/teamspace-react/src/layouts/LandingLayout.tsx
diff --git a/recipes/teamspace-react/src/lib/utils.ts b/samples/teamspace-react/src/lib/utils.ts
similarity index 100%
rename from recipes/teamspace-react/src/lib/utils.ts
rename to samples/teamspace-react/src/lib/utils.ts
diff --git a/recipes/teamspace-react/src/main.tsx b/samples/teamspace-react/src/main.tsx
similarity index 100%
rename from recipes/teamspace-react/src/main.tsx
rename to samples/teamspace-react/src/main.tsx
diff --git a/recipes/teamspace-react/src/pages/CreateOrganization.tsx b/samples/teamspace-react/src/pages/CreateOrganization.tsx
similarity index 100%
rename from recipes/teamspace-react/src/pages/CreateOrganization.tsx
rename to samples/teamspace-react/src/pages/CreateOrganization.tsx
diff --git a/recipes/teamspace-react/src/pages/Dashboard.tsx b/samples/teamspace-react/src/pages/Dashboard.tsx
similarity index 100%
rename from recipes/teamspace-react/src/pages/Dashboard.tsx
rename to samples/teamspace-react/src/pages/Dashboard.tsx
diff --git a/recipes/teamspace-react/src/pages/LandingPage.tsx b/samples/teamspace-react/src/pages/LandingPage.tsx
similarity index 100%
rename from recipes/teamspace-react/src/pages/LandingPage.tsx
rename to samples/teamspace-react/src/pages/LandingPage.tsx
diff --git a/recipes/teamspace-react/src/pages/Organizations.tsx b/samples/teamspace-react/src/pages/Organizations.tsx
similarity index 100%
rename from recipes/teamspace-react/src/pages/Organizations.tsx
rename to samples/teamspace-react/src/pages/Organizations.tsx
diff --git a/recipes/teamspace-react/src/pages/Profile.tsx b/samples/teamspace-react/src/pages/Profile.tsx
similarity index 100%
rename from recipes/teamspace-react/src/pages/Profile.tsx
rename to samples/teamspace-react/src/pages/Profile.tsx
diff --git a/recipes/teamspace-react/src/pages/SignIn.tsx b/samples/teamspace-react/src/pages/SignIn.tsx
similarity index 100%
rename from recipes/teamspace-react/src/pages/SignIn.tsx
rename to samples/teamspace-react/src/pages/SignIn.tsx
diff --git a/recipes/teamspace-react/src/vite-env.d.ts b/samples/teamspace-react/src/vite-env.d.ts
similarity index 100%
rename from recipes/teamspace-react/src/vite-env.d.ts
rename to samples/teamspace-react/src/vite-env.d.ts
diff --git a/recipes/teamspace-react/tailwind.config.js b/samples/teamspace-react/tailwind.config.js
similarity index 100%
rename from recipes/teamspace-react/tailwind.config.js
rename to samples/teamspace-react/tailwind.config.js
diff --git a/recipes/teamspace-react/tsconfig.app.json b/samples/teamspace-react/tsconfig.app.json
similarity index 100%
rename from recipes/teamspace-react/tsconfig.app.json
rename to samples/teamspace-react/tsconfig.app.json
diff --git a/recipes/teamspace-react/tsconfig.json b/samples/teamspace-react/tsconfig.json
similarity index 100%
rename from recipes/teamspace-react/tsconfig.json
rename to samples/teamspace-react/tsconfig.json
diff --git a/recipes/teamspace-react/tsconfig.node.json b/samples/teamspace-react/tsconfig.node.json
similarity index 100%
rename from recipes/teamspace-react/tsconfig.node.json
rename to samples/teamspace-react/tsconfig.node.json
diff --git a/recipes/teamspace-react/vite.config.ts b/samples/teamspace-react/vite.config.ts
similarity index 100%
rename from recipes/teamspace-react/vite.config.ts
rename to samples/teamspace-react/vite.config.ts

From 0790bca4f5b4e3ed49475e7261716e7926578c54 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 02:52:49 +0530
Subject: [PATCH 114/131] Refactor: Remove AsgardeoProvider from layout and
 update organization creation page with mock authentication and organization
 data

Refactor: Update organizations page to use mock data and improve role handling

Refactor: Enhance profile page with mock user data and improve form handling

Cleanup: Remove unused authentication hooks and related functions

Cleanup: Delete unused authentication and session management logic

Cleanup: Remove Next.js configuration and PostCSS setup

Cleanup: Delete global CSS and Tailwind configuration files
---
 .../teamspace-nextjs/app/auth/signin/page.tsx |   3 +-
 .../teamspace-nextjs/app/auth/signup/page.tsx |   3 +-
 .../teamspace-nextjs/app/dashboard/page.tsx   |   6 +-
 samples/teamspace-nextjs/app/globals.css      | 125 ++++++++------
 samples/teamspace-nextjs/app/layout.tsx       |   6 +-
 .../app/organizations/new/page.tsx            | 102 +++++------
 .../app/organizations/page.tsx                |  97 +++++++----
 samples/teamspace-nextjs/app/profile/page.tsx | 151 ++++++++--------
 samples/teamspace-nextjs/hooks/use-auth.tsx   | 161 ------------------
 samples/teamspace-nextjs/lib/auth.ts          |  90 ----------
 samples/teamspace-nextjs/next.config.ts       |   7 -
 samples/teamspace-nextjs/postcss.config.js    |   6 -
 samples/teamspace-nextjs/styles/globals.css   |  94 ----------
 samples/teamspace-nextjs/tailwind.config.js   |  78 ---------
 14 files changed, 274 insertions(+), 655 deletions(-)
 delete mode 100644 samples/teamspace-nextjs/hooks/use-auth.tsx
 delete mode 100644 samples/teamspace-nextjs/lib/auth.ts
 delete mode 100644 samples/teamspace-nextjs/next.config.ts
 delete mode 100644 samples/teamspace-nextjs/postcss.config.js
 delete mode 100644 samples/teamspace-nextjs/styles/globals.css
 delete mode 100644 samples/teamspace-nextjs/tailwind.config.js

diff --git a/samples/teamspace-nextjs/app/auth/signin/page.tsx b/samples/teamspace-nextjs/app/auth/signin/page.tsx
index d96320f03..0e473b7df 100644
--- a/samples/teamspace-nextjs/app/auth/signin/page.tsx
+++ b/samples/teamspace-nextjs/app/auth/signin/page.tsx
@@ -10,10 +10,9 @@ import { Label } from "@/components/ui/label"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Alert, AlertDescription } from "@/components/ui/alert"
 import { Users, Eye, EyeOff } from "lucide-react"
-import { useAuth } from "@/hooks/use-auth"
 
 export default function SignInPage() {
-  const { signIn } = useAuth()
+  const signIn = () => null;
   const [showPassword, setShowPassword] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState("")
diff --git a/samples/teamspace-nextjs/app/auth/signup/page.tsx b/samples/teamspace-nextjs/app/auth/signup/page.tsx
index a1c221ecf..b8dda3ed5 100644
--- a/samples/teamspace-nextjs/app/auth/signup/page.tsx
+++ b/samples/teamspace-nextjs/app/auth/signup/page.tsx
@@ -11,10 +11,9 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Alert, AlertDescription } from "@/components/ui/alert"
 import { Checkbox } from "@/components/ui/checkbox"
 import { Users, Eye, EyeOff } from "lucide-react"
-import { useAuth } from "@/hooks/use-auth"
 
 export default function SignUpPage() {
-  const { signUp } = useAuth()
+  const signUp = () => null;
   const [showPassword, setShowPassword] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState("")
diff --git a/samples/teamspace-nextjs/app/dashboard/page.tsx b/samples/teamspace-nextjs/app/dashboard/page.tsx
index 02a2b8436..217c4a373 100644
--- a/samples/teamspace-nextjs/app/dashboard/page.tsx
+++ b/samples/teamspace-nextjs/app/dashboard/page.tsx
@@ -1,6 +1,5 @@
 "use client"
 
-import { useAuth } from "@/hooks/use-auth"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -10,7 +9,10 @@ import { useEffect } from "react"
 import { Header } from "@/components/header"
 
 export default function DashboardPage() {
-  const { user, currentOrg, isAuthenticated, isLoading } = useAuth()
+  const user = { name: "John Doe" } // Replace with actual user data
+  const currentOrg = { name: "My Organization", memberCount: 10 } //
+  const isLoading = false // Replace with actual loading state
+  const isAuthenticated = true // Replace with actual authentication check
 
   useEffect(() => {
     if (!isLoading && !isAuthenticated) {
diff --git a/samples/teamspace-nextjs/app/globals.css b/samples/teamspace-nextjs/app/globals.css
index 548269743..500bf0107 100644
--- a/samples/teamspace-nextjs/app/globals.css
+++ b/samples/teamspace-nextjs/app/globals.css
@@ -1,49 +1,86 @@
-@import "tailwindcss";
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
 
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --foreground: 0 0% 3.9%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 0 0% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96%;
-    --secondary-foreground: 222.2 84% 4.9%;
-    --muted: 210 40% 96%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96%;
-    --accent-foreground: 222.2 84% 4.9%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 221.2 83.2% 53.3%;
-    --radius: 0.75rem;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 84% 4.9%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 224.3 76.3% 94.1%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
 
@@ -56,21 +93,3 @@
     @apply bg-background text-foreground;
   }
 }
-
-/* Custom scrollbar */
-::-webkit-scrollbar {
-  width: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: hsl(var(--muted));
-}
-
-::-webkit-scrollbar-thumb {
-  background: hsl(var(--muted-foreground));
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: hsl(var(--foreground));
-}
diff --git a/samples/teamspace-nextjs/app/layout.tsx b/samples/teamspace-nextjs/app/layout.tsx
index b9a32064b..dfcd1a2c9 100644
--- a/samples/teamspace-nextjs/app/layout.tsx
+++ b/samples/teamspace-nextjs/app/layout.tsx
@@ -3,7 +3,7 @@ import type {Metadata} from 'next';
 import {Inter} from 'next/font/google';
 import './globals.css';
 import {ThemeProvider} from '@/components/theme-provider';
-import {AsgardeoProvider} from '@asgardeo/nextjs';
+// import {AsgardeoProvider} from '@asgardeo/nextjs';
 
 const inter = Inter({subsets: ['latin']});
 
@@ -18,9 +18,7 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
         <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
-          <AsgardeoProvider>
-            <div className="min-h-screen bg-background">{children}</div>
-          </AsgardeoProvider>
+          <div className="min-h-screen bg-background">{children}</div>
         </ThemeProvider>
       </body>
     </html>
diff --git a/samples/teamspace-nextjs/app/organizations/new/page.tsx b/samples/teamspace-nextjs/app/organizations/new/page.tsx
index b2200aeb4..b9b1638bd 100644
--- a/samples/teamspace-nextjs/app/organizations/new/page.tsx
+++ b/samples/teamspace-nextjs/app/organizations/new/page.tsx
@@ -1,75 +1,79 @@
-"use client"
-
-import type React from "react"
-
-import { useState, useEffect } from "react"
-import { useRouter } from "next/navigation"
-import { useAuth } from "@/hooks/use-auth"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Textarea } from "@/components/ui/textarea"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Building2, Upload, ArrowLeft } from "lucide-react"
-import Link from "next/link"
-import { Header } from "@/components/header"
-import { redirect } from "next/navigation"
+'use client';
+
+import type React from 'react';
+
+import {useState, useEffect} from 'react';
+import {useRouter} from 'next/navigation';
+import {Button} from '@/components/ui/button';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
+import {Textarea} from '@/components/ui/textarea';
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+import {Avatar, AvatarFallback, AvatarImage} from '@/components/ui/avatar';
+import {Building2, Upload, ArrowLeft} from 'lucide-react';
+import Link from 'next/link';
+import {Header} from '@/components/header';
+import {redirect} from 'next/navigation';
 
 export default function CreateOrganizationPage() {
-  const router = useRouter()
-  const { addOrganization, isAuthenticated, isLoading } = useAuth()
+  const router = useRouter();
+  const addOrganization = (org: any) => {
+    // This function should handle adding the organization to your state management or API
+    console.log('Organization added:', org);
+  };
+  const isAuthenticated = true; // Replace with actual authentication check
+  const isLoading = false; // Replace with actual loading state
   const [formData, setFormData] = useState({
-    name: "",
-    slug: "",
-    description: "",
-    website: "",
-    avatar: "/placeholder.svg?height=64&width=64",
-  })
-  const [isSubmitting, setIsSubmitting] = useState(false)
+    name: '',
+    slug: '',
+    description: '',
+    website: '',
+    avatar: '/placeholder.svg?height=64&width=64',
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   useEffect(() => {
     if (!isLoading && !isAuthenticated) {
-      redirect("/")
+      redirect('/');
     }
-  }, [isAuthenticated, isLoading])
+  }, [isAuthenticated, isLoading]);
 
   if (isLoading) {
-    return <div className="flex items-center justify-center min-h-screen">Loading...</div>
+    return <div className="flex items-center justify-center min-h-screen">Loading...</div>;
   }
 
   if (!isAuthenticated) {
-    return null
+    return null;
   }
 
   const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const name = e.target.value
+    const name = e.target.value;
     const slug = name
       .toLowerCase()
-      .replace(/[^a-z0-9]+/g, "-")
-      .replace(/^-|-$/g, "")
-    setFormData({ ...formData, name, slug })
-  }
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-|-$/g, '');
+    setFormData({...formData, name, slug});
+  };
 
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setIsSubmitting(true)
+    e.preventDefault();
+    setIsSubmitting(true);
 
     // Simulate API call
-    await new Promise((resolve) => setTimeout(resolve, 1000))
+    await new Promise(resolve => setTimeout(resolve, 1000));
 
     const newOrg = {
       id: Date.now().toString(),
       name: formData.name,
       slug: formData.slug,
       avatar: formData.avatar,
-      role: "owner" as const,
+      role: 'owner' as const,
       memberCount: 1,
-    }
+    };
 
-    addOrganization(newOrg)
-    router.push("/organizations")
-  }
+    addOrganization(newOrg);
+    router.push('/organizations');
+  };
 
   return (
     <div className="min-h-screen bg-background">
@@ -103,7 +107,7 @@ export default function CreateOrganizationPage() {
                 <Label className="text-sm font-medium">Organization avatar</Label>
                 <div className="flex items-center space-x-4 mt-2">
                   <Avatar className="w-16 h-16">
-                    <AvatarImage src={formData.avatar || "/placeholder.svg"} alt="Organization avatar" />
+                    <AvatarImage src={formData.avatar || '/placeholder.svg'} alt="Organization avatar" />
                     <AvatarFallback>
                       <Building2 className="h-8 w-8" />
                     </AvatarFallback>
@@ -142,7 +146,7 @@ export default function CreateOrganizationPage() {
                     id="slug"
                     required
                     value={formData.slug}
-                    onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
+                    onChange={e => setFormData({...formData, slug: e.target.value})}
                     placeholder="organization-slug"
                     className="rounded-l-none"
                   />
@@ -159,7 +163,7 @@ export default function CreateOrganizationPage() {
                   id="description"
                   rows={3}
                   value={formData.description}
-                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                  onChange={e => setFormData({...formData, description: e.target.value})}
                   placeholder="Tell us about your organization..."
                   className="mt-2"
                 />
@@ -172,7 +176,7 @@ export default function CreateOrganizationPage() {
                   id="website"
                   type="url"
                   value={formData.website}
-                  onChange={(e) => setFormData({ ...formData, website: e.target.value })}
+                  onChange={e => setFormData({...formData, website: e.target.value})}
                   placeholder="https://example.com"
                   className="mt-2"
                 />
@@ -199,7 +203,7 @@ export default function CreateOrganizationPage() {
                   <Link href="/organizations">Cancel</Link>
                 </Button>
                 <Button type="submit" disabled={isSubmitting || !formData.name || !formData.slug}>
-                  {isSubmitting ? "Creating..." : "Create organization"}
+                  {isSubmitting ? 'Creating...' : 'Create organization'}
                 </Button>
               </div>
             </form>
@@ -207,5 +211,5 @@ export default function CreateOrganizationPage() {
         </Card>
       </div>
     </div>
-  )
+  );
 }
diff --git a/samples/teamspace-nextjs/app/organizations/page.tsx b/samples/teamspace-nextjs/app/organizations/page.tsx
index bdbba62a2..d9beb10de 100644
--- a/samples/teamspace-nextjs/app/organizations/page.tsx
+++ b/samples/teamspace-nextjs/app/organizations/page.tsx
@@ -1,54 +1,81 @@
-"use client"
+'use client';
 
-import { useAuth } from "@/hooks/use-auth"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent } from "@/components/ui/card"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Badge } from "@/components/ui/badge"
-import { Building2, Users, Settings, Crown, Shield, User, Plus, ExternalLink } from "lucide-react"
-import Link from "next/link"
-import { Header } from "@/components/header"
-import { redirect } from "next/navigation"
-import { useEffect } from "react"
+import {Button} from '@/components/ui/button';
+import {Card, CardContent} from '@/components/ui/card';
+import {Avatar, AvatarFallback, AvatarImage} from '@/components/ui/avatar';
+import {Badge} from '@/components/ui/badge';
+import {Building2, Users, Settings, Crown, Shield, User, Plus, ExternalLink} from 'lucide-react';
+import Link from 'next/link';
+import {Header} from '@/components/header';
+import {redirect} from 'next/navigation';
+import {useEffect} from 'react';
 
 export default function OrganizationsPage() {
-  const { organizations, currentOrg, setCurrentOrg, isAuthenticated, isLoading } = useAuth()
+  const organizations = [
+    {
+      id: '1',
+      name: 'Organization 1',
+      slug: 'organization-1',
+      avatar: '/placeholder.svg',
+      role: 'owner',
+      memberCount: 5,
+    },
+    {
+      id: '2',
+      name: 'Organization 2',
+      slug: 'organization-2',
+      avatar: '/placeholder.svg',
+      role: 'admin',
+      memberCount: 3,
+    },
+  ];
+  const setCurrentOrg = org => {
+    // This function should handle setting the current organization in your state management or API
+    console.log('Current organization set to:', org);
+  };
+  const isAuthenticated = true; // Replace with actual authentication check
+  const isLoading = false; // Replace with actual loading state
+  const redirect = path => {
+    // This function should handle redirection in your application
+    console.log('Redirecting to:', path);
+  };
+  const currentOrg = organizations[0] || null; // Default to first organization or null if none
 
   useEffect(() => {
     if (!isLoading && !isAuthenticated) {
-      redirect("/")
+      redirect('/');
     }
-  }, [isAuthenticated, isLoading])
+  }, [isAuthenticated, isLoading]);
 
   if (isLoading) {
-    return <div className="flex items-center justify-center min-h-screen">Loading...</div>
+    return <div className="flex items-center justify-center min-h-screen">Loading...</div>;
   }
 
   if (!isAuthenticated) {
-    return null
+    return null;
   }
 
   const getRoleIcon = (role: string) => {
     switch (role) {
-      case "owner":
-        return <Crown className="h-4 w-4 text-yellow-500" />
-      case "admin":
-        return <Shield className="h-4 w-4 text-blue-500" />
+      case 'owner':
+        return <Crown className="h-4 w-4 text-yellow-500" />;
+      case 'admin':
+        return <Shield className="h-4 w-4 text-blue-500" />;
       default:
-        return <User className="h-4 w-4 text-muted-foreground" />
+        return <User className="h-4 w-4 text-muted-foreground" />;
     }
-  }
+  };
 
   const getRoleBadge = (role: string) => {
     switch (role) {
-      case "owner":
-        return "default"
-      case "admin":
-        return "secondary"
+      case 'owner':
+        return 'default';
+      case 'admin':
+        return 'secondary';
       default:
-        return "outline"
+        return 'outline';
     }
-  }
+  };
 
   return (
     <div className="min-h-screen bg-background">
@@ -77,14 +104,14 @@ export default function OrganizationsPage() {
               <div className="flex items-center justify-between">
                 <div className="flex items-center space-x-4">
                   <Avatar className="w-12 h-12">
-                    <AvatarImage src={currentOrg?.avatar || "/placeholder.svg"} alt={currentOrg?.name} />
+                    <AvatarImage src={currentOrg?.avatar || '/placeholder.svg'} alt={currentOrg?.name} />
                     <AvatarFallback>{currentOrg?.name?.charAt(0)}</AvatarFallback>
                   </Avatar>
                   <div>
                     <h3 className="text-lg font-medium text-foreground">{currentOrg?.name}</h3>
                     <div className="flex items-center space-x-2 mt-1">
-                      <Badge variant={getRoleBadge(currentOrg?.role || "member")}>
-                        {getRoleIcon(currentOrg?.role || "member")}
+                      <Badge variant={getRoleBadge(currentOrg?.role || 'member')}>
+                        {getRoleIcon(currentOrg?.role || 'member')}
                         <span className="ml-1 capitalize">{currentOrg?.role}</span>
                       </Badge>
                       <span className="text-sm text-muted-foreground">{currentOrg?.memberCount} members</span>
@@ -110,13 +137,13 @@ export default function OrganizationsPage() {
         <div>
           <h2 className="text-lg font-semibold text-foreground mb-4">All Organizations</h2>
           <div className="space-y-4">
-            {organizations?.map((org) => (
-              <Card key={org.id} className={currentOrg?.id === org.id ? "border-primary/50 bg-primary/5" : ""}>
+            {organizations?.map(org => (
+              <Card key={org.id} className={currentOrg?.id === org.id ? 'border-primary/50 bg-primary/5' : ''}>
                 <CardContent className="pt-6">
                   <div className="flex items-center justify-between">
                     <div className="flex items-center space-x-4">
                       <Avatar className="w-12 h-12">
-                        <AvatarImage src={org.avatar || "/placeholder.svg"} alt={org.name} />
+                        <AvatarImage src={org.avatar || '/placeholder.svg'} alt={org.name} />
                         <AvatarFallback>{org.name.charAt(0)}</AvatarFallback>
                       </Avatar>
                       <div>
@@ -166,5 +193,5 @@ export default function OrganizationsPage() {
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/samples/teamspace-nextjs/app/profile/page.tsx b/samples/teamspace-nextjs/app/profile/page.tsx
index 81a9d5fb2..cded1ee95 100644
--- a/samples/teamspace-nextjs/app/profile/page.tsx
+++ b/samples/teamspace-nextjs/app/profile/page.tsx
@@ -1,103 +1,110 @@
-"use client"
+'use client';
 
-import { useState, useEffect } from "react"
-import { useAuth } from "@/hooks/use-auth"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Badge } from "@/components/ui/badge"
-import { User, Mail, Calendar, MapPin, LinkIcon, Edit3, Save, X } from "lucide-react"
-import { Header } from "@/components/header"
-import { redirect } from "next/navigation"
+import {useState, useEffect} from 'react';
+import {Button} from '@/components/ui/button';
+import {Input} from '@/components/ui/input';
+import {Textarea} from '@/components/ui/textarea';
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+import {Avatar, AvatarFallback, AvatarImage} from '@/components/ui/avatar';
+import {Badge} from '@/components/ui/badge';
+import {User, Mail, Calendar, MapPin, LinkIcon, Edit3, Save, X} from 'lucide-react';
+import {Header} from '@/components/header';
+import {redirect} from 'next/navigation';
 
 export default function ProfilePage() {
-  const { user, isAuthenticated, isLoading } = useAuth()
-  const [isEditing, setIsEditing] = useState(false)
+  const user = {
+    name: 'John Doe',
+    email: '',
+    avatar: '/placeholder.svg?height=64&width=64',
+    username: 'johndoe',
+  };
+  const isAuthenticated = true; // Replace with actual authentication check
+  const isLoading = false; // Replace with actual loading state
+
+  const [isEditing, setIsEditing] = useState(false);
   const [formData, setFormData] = useState({
-    name: "",
-    email: "",
-    bio: "Full-stack developer passionate about building great user experiences.",
-    location: "San Francisco, CA",
-    website: "https://johndoe.dev",
-    company: "Acme Corp",
-  })
+    name: '',
+    email: '',
+    bio: 'Full-stack developer passionate about building great user experiences.',
+    location: 'San Francisco, CA',
+    website: 'https://johndoe.dev',
+    company: 'Acme Corp',
+  });
 
   useEffect(() => {
     if (!isLoading && !isAuthenticated) {
-      redirect("/")
+      redirect('/');
     }
     if (user) {
       setFormData({
         name: user.name,
         email: user.email,
-        bio: "Full-stack developer passionate about building great user experiences.",
-        location: "San Francisco, CA",
-        website: "https://johndoe.dev",
-        company: "Acme Corp",
-      })
+        bio: 'Full-stack developer passionate about building great user experiences.',
+        location: 'San Francisco, CA',
+        website: 'https://johndoe.dev',
+        company: 'Acme Corp',
+      });
     }
-  }, [user, isAuthenticated, isLoading])
+  }, [user, isAuthenticated, isLoading]);
 
   if (isLoading) {
-    return <div className="flex items-center justify-center min-h-screen">Loading...</div>
+    return <div className="flex items-center justify-center min-h-screen">Loading...</div>;
   }
 
   if (!isAuthenticated) {
-    return null
+    return null;
   }
 
   const handleSave = () => {
     // In a real app, you'd save to your backend
-    console.log("Saving profile:", formData)
-    setIsEditing(false)
-  }
+    console.log('Saving profile:', formData);
+    setIsEditing(false);
+  };
 
   const handleCancel = () => {
     if (user) {
       setFormData({
         name: user.name,
         email: user.email,
-        bio: "Full-stack developer passionate about building great user experiences.",
-        location: "San Francisco, CA",
-        website: "https://johndoe.dev",
-        company: "Acme Corp",
-      })
+        bio: 'Full-stack developer passionate about building great user experiences.',
+        location: 'San Francisco, CA',
+        website: 'https://johndoe.dev',
+        company: 'Acme Corp',
+      });
     }
-    setIsEditing(false)
-  }
+    setIsEditing(false);
+  };
 
   const stats = [
-    { label: "Projects", value: "24" },
-    { label: "Organizations", value: "3" },
-    { label: "Contributions", value: "1,247" },
-    { label: "Followers", value: "89" },
-  ]
+    {label: 'Projects', value: '24'},
+    {label: 'Organizations', value: '3'},
+    {label: 'Contributions', value: '1,247'},
+    {label: 'Followers', value: '89'},
+  ];
 
   const recentProjects = [
     {
       id: 1,
-      name: "Mobile App Redesign",
-      description: "Complete UI/UX overhaul for mobile application",
-      status: "In Progress",
-      lastUpdated: "2 days ago",
+      name: 'Mobile App Redesign',
+      description: 'Complete UI/UX overhaul for mobile application',
+      status: 'In Progress',
+      lastUpdated: '2 days ago',
     },
     {
       id: 2,
-      name: "API Documentation",
-      description: "Comprehensive API documentation and examples",
-      status: "Completed",
-      lastUpdated: "1 week ago",
+      name: 'API Documentation',
+      description: 'Comprehensive API documentation and examples',
+      status: 'Completed',
+      lastUpdated: '1 week ago',
     },
     {
       id: 3,
-      name: "Team Dashboard",
-      description: "Analytics dashboard for team performance metrics",
-      status: "Planning",
-      lastUpdated: "3 days ago",
+      name: 'Team Dashboard',
+      description: 'Analytics dashboard for team performance metrics',
+      status: 'Planning',
+      lastUpdated: '3 days ago',
     },
-  ]
+  ];
 
   return (
     <div className="min-h-screen bg-background">
@@ -111,14 +118,14 @@ export default function ProfilePage() {
             <div className="flex items-end justify-between -mt-16 mb-6">
               <div className="flex items-end space-x-4">
                 <Avatar className="w-24 h-24 border-4 border-background">
-                  <AvatarImage src={user?.avatar || "/placeholder.svg"} alt={user?.name} />
+                  <AvatarImage src={user?.avatar || '/placeholder.svg'} alt={user?.name} />
                   <AvatarFallback className="text-2xl">{user?.name?.charAt(0)}</AvatarFallback>
                 </Avatar>
                 <div className="pb-2">
                   {isEditing ? (
                     <Input
                       value={formData.name}
-                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                      onChange={e => setFormData({...formData, name: e.target.value})}
                       className="text-2xl font-bold bg-transparent border-b border-border focus:border-primary"
                     />
                   ) : (
@@ -153,7 +160,7 @@ export default function ProfilePage() {
               {isEditing ? (
                 <Textarea
                   value={formData.bio}
-                  onChange={(e) => setFormData({ ...formData, bio: e.target.value })}
+                  onChange={e => setFormData({...formData, bio: e.target.value})}
                   rows={3}
                   placeholder="Tell us about yourself..."
                 />
@@ -167,7 +174,7 @@ export default function ProfilePage() {
                   {isEditing ? (
                     <Input
                       value={formData.company}
-                      onChange={(e) => setFormData({ ...formData, company: e.target.value })}
+                      onChange={e => setFormData({...formData, company: e.target.value})}
                       className="h-6 text-sm bg-transparent border-b border-border focus:border-primary"
                     />
                   ) : (
@@ -179,7 +186,7 @@ export default function ProfilePage() {
                   {isEditing ? (
                     <Input
                       value={formData.location}
-                      onChange={(e) => setFormData({ ...formData, location: e.target.value })}
+                      onChange={e => setFormData({...formData, location: e.target.value})}
                       className="h-6 text-sm bg-transparent border-b border-border focus:border-primary"
                     />
                   ) : (
@@ -192,7 +199,7 @@ export default function ProfilePage() {
                     <Input
                       type="url"
                       value={formData.website}
-                      onChange={(e) => setFormData({ ...formData, website: e.target.value })}
+                      onChange={e => setFormData({...formData, website: e.target.value})}
                       className="h-6 text-sm bg-transparent border-b border-border focus:border-primary"
                     />
                   ) : (
@@ -216,7 +223,7 @@ export default function ProfilePage() {
 
         {/* Stats */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-          {stats.map((stat) => (
+          {stats.map(stat => (
             <Card key={stat.label} className="text-center">
               <CardContent className="pt-6">
                 <div className="text-2xl font-bold text-foreground">{stat.value}</div>
@@ -234,7 +241,7 @@ export default function ProfilePage() {
           </CardHeader>
           <CardContent>
             <div className="space-y-4">
-              {recentProjects.map((project) => (
+              {recentProjects.map(project => (
                 <div
                   key={project.id}
                   className="flex items-center justify-between p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors"
@@ -246,11 +253,11 @@ export default function ProfilePage() {
                   </div>
                   <Badge
                     variant={
-                      project.status === "Completed"
-                        ? "default"
-                        : project.status === "In Progress"
-                          ? "secondary"
-                          : "outline"
+                      project.status === 'Completed'
+                        ? 'default'
+                        : project.status === 'In Progress'
+                        ? 'secondary'
+                        : 'outline'
                     }
                   >
                     {project.status}
@@ -262,5 +269,5 @@ export default function ProfilePage() {
         </Card>
       </div>
     </div>
-  )
+  );
 }
diff --git a/samples/teamspace-nextjs/hooks/use-auth.tsx b/samples/teamspace-nextjs/hooks/use-auth.tsx
deleted file mode 100644
index ce5970c87..000000000
--- a/samples/teamspace-nextjs/hooks/use-auth.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-"use client"
-
-import { createContext, useContext, useState, useEffect, type ReactNode } from "react"
-import { useRouter } from "next/navigation"
-
-interface User {
-  id: string
-  name: string
-  email: string
-  avatar: string
-  username: string
-}
-
-interface Organization {
-  id: string
-  name: string
-  slug: string
-  avatar: string
-  role: "owner" | "admin" | "member"
-  memberCount: number
-}
-
-interface AuthContextType {
-  user: User | null
-  currentOrg: Organization | null
-  organizations: Organization[]
-  isAuthenticated: boolean
-  isLoading: boolean
-  signIn: (email: string, password: string) => Promise<void>
-  signUp: (name: string, email: string, password: string) => Promise<void>
-  signOut: () => void
-  setCurrentOrg: (org: Organization) => void
-  addOrganization: (org: Organization) => void
-}
-
-const AuthContext = createContext<AuthContextType | null>(null)
-
-const mockUser: User = {
-  id: "1",
-  name: "John Doe",
-  email: "demo@teamspace.com",
-  avatar: "/placeholder.svg?height=32&width=32",
-  username: "johndoe",
-}
-
-const mockOrganizations: Organization[] = [
-  {
-    id: "1",
-    name: "Acme Corp",
-    slug: "acme-corp",
-    avatar: "/placeholder.svg?height=32&width=32",
-    role: "owner",
-    memberCount: 12,
-  },
-  {
-    id: "2",
-    name: "Tech Startup",
-    slug: "tech-startup",
-    avatar: "/placeholder.svg?height=32&width=32",
-    role: "admin",
-    memberCount: 8,
-  },
-]
-
-export function AuthProvider({ children }: { children: ReactNode }) {
-  const [user, setUser] = useState<User | null>(null)
-  const [currentOrg, setCurrentOrg] = useState<Organization | null>(null)
-  const [organizations, setOrganizations] = useState<Organization[]>(mockOrganizations)
-  const [isLoading, setIsLoading] = useState(true)
-  const router = useRouter()
-
-  useEffect(() => {
-    // Check for existing session
-    const savedUser = localStorage.getItem("user")
-    const savedOrg = localStorage.getItem("currentOrg")
-
-    if (savedUser) {
-      setUser(JSON.parse(savedUser))
-      if (savedOrg) {
-        setCurrentOrg(JSON.parse(savedOrg))
-      } else {
-        setCurrentOrg(mockOrganizations[0])
-      }
-    }
-    setIsLoading(false)
-  }, [])
-
-  const signIn = async (email: string, password: string) => {
-    // Mock authentication
-    if (email === "demo@teamspace.com" && password === "password") {
-      setUser(mockUser)
-      setCurrentOrg(mockOrganizations[0])
-      localStorage.setItem("user", JSON.stringify(mockUser))
-      localStorage.setItem("currentOrg", JSON.stringify(mockOrganizations[0]))
-      router.push("/dashboard")
-    } else {
-      throw new Error("Invalid credentials")
-    }
-  }
-
-  const signUp = async (name: string, email: string, password: string) => {
-    // Mock registration
-    const newUser: User = {
-      id: Date.now().toString(),
-      name,
-      email,
-      avatar: "/placeholder.svg?height=32&width=32",
-      username: name.toLowerCase().replace(/\s+/g, ""),
-    }
-
-    setUser(newUser)
-    setCurrentOrg(mockOrganizations[0])
-    localStorage.setItem("user", JSON.stringify(newUser))
-    localStorage.setItem("currentOrg", JSON.stringify(mockOrganizations[0]))
-    router.push("/dashboard")
-  }
-
-  const signOut = () => {
-    setUser(null)
-    setCurrentOrg(null)
-    localStorage.removeItem("user")
-    localStorage.removeItem("currentOrg")
-    router.push("/")
-  }
-
-  const handleSetCurrentOrg = (org: Organization) => {
-    setCurrentOrg(org)
-    localStorage.setItem("currentOrg", JSON.stringify(org))
-  }
-
-  const addOrganization = (org: Organization) => {
-    setOrganizations((prev) => [...prev, org])
-  }
-
-  return (
-    <AuthContext.Provider
-      value={{
-        user,
-        currentOrg,
-        organizations,
-        isAuthenticated: !!user,
-        isLoading,
-        signIn,
-        signUp,
-        signOut,
-        setCurrentOrg: handleSetCurrentOrg,
-        addOrganization,
-      }}
-    >
-      {children}
-    </AuthContext.Provider>
-  )
-}
-
-export function useAuth() {
-  const context = useContext(AuthContext)
-  if (!context) {
-    throw new Error("useAuth must be used within an AuthProvider")
-  }
-  return context
-}
diff --git a/samples/teamspace-nextjs/lib/auth.ts b/samples/teamspace-nextjs/lib/auth.ts
deleted file mode 100644
index 64e559bdf..000000000
--- a/samples/teamspace-nextjs/lib/auth.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { SignJWT, jwtVerify } from "jose"
-import { cookies } from "next/headers"
-import { type NextRequest, NextResponse } from "next/server"
-
-const key = new TextEncoder().encode(process.env.JWT_SECRET || "your-secret-key")
-
-export async function encrypt(payload: any) {
-  return await new SignJWT(payload)
-    .setProtectedHeader({ alg: "HS256" })
-    .setIssuedAt()
-    .setExpirationTime("24h")
-    .sign(key)
-}
-
-export async function decrypt(input: string): Promise<any> {
-  const { payload } = await jwtVerify(input, key, {
-    algorithms: ["HS256"],
-  })
-  return payload
-}
-
-export async function login(formData: FormData) {
-  // Verify credentials & get the user
-  const email = formData.get("email") as string
-  const password = formData.get("password") as string
-
-  // In a real app, you'd verify against your database
-  // For demo purposes, we'll use a simple check
-  if (email === "demo@teamspace.com" && password === "password") {
-    const user = { id: "1", email: "demo@teamspace.com", name: "Demo User" }
-
-    // Create the session
-    const expires = new Date(Date.now() + 24 * 60 * 60 * 1000) // 24 hours
-    const session = await encrypt({ user, expires })
-
-    // Save the session in a cookie
-    cookies().set("session", session, { expires, httpOnly: true })
-
-    return { success: true, user }
-  }
-
-  return { success: false, error: "Invalid credentials" }
-}
-
-export async function signup(formData: FormData) {
-  const name = formData.get("name") as string
-  const email = formData.get("email") as string
-  const password = formData.get("password") as string
-
-  // In a real app, you'd save to your database
-  // For demo purposes, we'll create a session immediately
-  const user = { id: Date.now().toString(), email, name }
-
-  // Create the session
-  const expires = new Date(Date.now() + 24 * 60 * 60 * 1000)
-  const session = await encrypt({ user, expires })
-
-  // Save the session in a cookie
-  cookies().set("session", session, { expires, httpOnly: true })
-
-  return { success: true, user }
-}
-
-export async function logout() {
-  // Destroy the session
-  cookies().set("session", "", { expires: new Date(0) })
-}
-
-export async function getSession() {
-  const session = cookies().get("session")?.value
-  if (!session) return null
-  return await decrypt(session)
-}
-
-export async function updateSession(request: NextRequest) {
-  const session = request.cookies.get("session")?.value
-  if (!session) return
-
-  // Refresh the session so it doesn't expire
-  const parsed = await decrypt(session)
-  parsed.expires = new Date(Date.now() + 24 * 60 * 60 * 1000)
-  const res = NextResponse.next()
-  res.cookies.set({
-    name: "session",
-    value: await encrypt(parsed),
-    httpOnly: true,
-    expires: parsed.expires,
-  })
-  return res
-}
diff --git a/samples/teamspace-nextjs/next.config.ts b/samples/teamspace-nextjs/next.config.ts
deleted file mode 100644
index e9ffa3083..000000000
--- a/samples/teamspace-nextjs/next.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  /* config options here */
-};
-
-export default nextConfig;
diff --git a/samples/teamspace-nextjs/postcss.config.js b/samples/teamspace-nextjs/postcss.config.js
deleted file mode 100644
index 33ad091d2..000000000
--- a/samples/teamspace-nextjs/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
diff --git a/samples/teamspace-nextjs/styles/globals.css b/samples/teamspace-nextjs/styles/globals.css
deleted file mode 100644
index ac6844236..000000000
--- a/samples/teamspace-nextjs/styles/globals.css
+++ /dev/null
@@ -1,94 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-body {
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
diff --git a/samples/teamspace-nextjs/tailwind.config.js b/samples/teamspace-nextjs/tailwind.config.js
deleted file mode 100644
index 658ba6011..000000000
--- a/samples/teamspace-nextjs/tailwind.config.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ['class'],
-  content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-    '*.{js,ts,jsx,tsx,mdx}',
-  ],
-  prefix: '',
-  theme: {
-    container: {
-      center: true,
-      padding: '2rem',
-      screens: {
-        '2xl': '1400px',
-      },
-    },
-    extend: {
-      colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      keyframes: {
-        '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: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-      },
-    },
-  },
-  plugins: [require('tailwindcss-animate')],
-};

From 796259f2da3a2822303033a456bd05ebe9f3d569 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 03:42:28 +0530
Subject: [PATCH 115/131] chore: refactor samples

---
 samples/teamspace-nextjs-1/app/page.tsx       |   9 +
 samples/teamspace-nextjs/app/actions/auth.ts  |  29 -
 .../teamspace-nextjs/app/auth/signin/page.tsx | 134 ---
 .../teamspace-nextjs/app/auth/signup/page.tsx | 169 ----
 .../app/dashboard/dashboard-client.tsx        | 224 -----
 .../teamspace-nextjs/app/dashboard/page.tsx   | 260 ------
 samples/teamspace-nextjs/app/favicon.ico      | Bin 0 -> 25931 bytes
 samples/teamspace-nextjs/app/globals.css      | 189 +++--
 samples/teamspace-nextjs/app/layout.tsx       |  40 +-
 .../app/organizations/new/page.tsx            | 215 -----
 .../app/organizations/page.tsx                | 197 -----
 samples/teamspace-nextjs/app/page.tsx         | 549 +++----------
 samples/teamspace-nextjs/app/profile/page.tsx | 273 -------
 .../teamspace-nextjs/components/header.tsx    | 216 -----
 .../components/theme-provider.tsx             |   7 -
 .../components/ui/accordion.tsx               |  58 --
 .../components/ui/alert-dialog.tsx            | 141 ----
 .../teamspace-nextjs/components/ui/alert.tsx  |  43 -
 .../components/ui/aspect-ratio.tsx            |   7 -
 .../teamspace-nextjs/components/ui/avatar.tsx |  40 -
 .../teamspace-nextjs/components/ui/badge.tsx  |  29 -
 .../components/ui/breadcrumb.tsx              | 115 ---
 .../teamspace-nextjs/components/ui/button.tsx |  47 --
 .../components/ui/calendar.tsx                |  66 --
 .../teamspace-nextjs/components/ui/card.tsx   |  43 -
 .../components/ui/carousel.tsx                | 262 ------
 .../teamspace-nextjs/components/ui/chart.tsx  | 365 ---------
 .../components/ui/checkbox.tsx                |  28 -
 .../components/ui/collapsible.tsx             |  11 -
 .../components/ui/command.tsx                 | 153 ----
 .../components/ui/context-menu.tsx            | 200 -----
 .../teamspace-nextjs/components/ui/dialog.tsx | 122 ---
 .../teamspace-nextjs/components/ui/drawer.tsx | 118 ---
 .../components/ui/dropdown-menu.tsx           | 181 -----
 .../teamspace-nextjs/components/ui/form.tsx   | 178 ----
 .../components/ui/hover-card.tsx              |  29 -
 .../components/ui/input-otp.tsx               |  71 --
 .../teamspace-nextjs/components/ui/input.tsx  |  22 -
 .../teamspace-nextjs/components/ui/label.tsx  |  19 -
 .../components/ui/menubar.tsx                 | 236 ------
 .../components/ui/navigation-menu.tsx         | 128 ---
 .../components/ui/pagination.tsx              | 117 ---
 .../components/ui/popover.tsx                 |  31 -
 .../components/ui/progress.tsx                |  28 -
 .../components/ui/radio-group.tsx             |  44 -
 .../components/ui/resizable.tsx               |  45 --
 .../components/ui/scroll-area.tsx             |  48 --
 .../teamspace-nextjs/components/ui/select.tsx | 160 ----
 .../components/ui/separator.tsx               |  31 -
 .../teamspace-nextjs/components/ui/sheet.tsx  | 140 ----
 .../components/ui/sidebar.tsx                 | 763 ------------------
 .../components/ui/skeleton.tsx                |  15 -
 .../teamspace-nextjs/components/ui/slider.tsx |  28 -
 .../teamspace-nextjs/components/ui/sonner.tsx |  31 -
 .../teamspace-nextjs/components/ui/switch.tsx |  29 -
 .../teamspace-nextjs/components/ui/table.tsx  | 117 ---
 .../teamspace-nextjs/components/ui/tabs.tsx   |  55 --
 .../components/ui/textarea.tsx                |  21 -
 .../teamspace-nextjs/components/ui/toast.tsx  | 129 ---
 .../components/ui/toaster.tsx                 |  35 -
 .../components/ui/toggle-group.tsx            |  61 --
 .../teamspace-nextjs/components/ui/toggle.tsx |  45 --
 .../components/ui/tooltip.tsx                 |  30 -
 .../components/ui/use-mobile.tsx              |  19 -
 .../components/ui/use-toast.ts                | 194 -----
 samples/teamspace-nextjs/env.local.example    |   6 -
 samples/teamspace-nextjs/hooks/use-mobile.tsx |  19 -
 samples/teamspace-nextjs/hooks/use-toast.ts   | 194 -----
 samples/teamspace-nextjs/lib/utils.ts         |   2 +-
 samples/teamspace-nextjs/middleware.ts        |  25 -
 samples/teamspace-nextjs/next.config.js       |  13 -
 samples/teamspace-nextjs/next.config.ts       |   7 +
 samples/teamspace-nextjs/package.json         |  37 +-
 samples/teamspace-nextjs/pages.tsx            | 458 -----------
 samples/teamspace-nextjs/postcss.config.mjs   |   5 +-
 samples/teamspace-nextjs/public/file.svg      |   1 +
 samples/teamspace-nextjs/public/globe.svg     |   1 +
 samples/teamspace-nextjs/public/next.svg      |   1 +
 .../public/placeholder-logo.png               | Bin 568 -> 0 bytes
 .../public/placeholder-logo.svg               |   1 -
 .../public/placeholder-user.jpg               | Bin 1635 -> 0 bytes
 .../teamspace-nextjs/public/placeholder.jpg   | Bin 1064 -> 0 bytes
 .../teamspace-nextjs/public/placeholder.svg   |   1 -
 samples/teamspace-nextjs/public/vercel.svg    |   1 +
 samples/teamspace-nextjs/public/window.svg    |   1 +
 samples/teamspace-nextjs/tsconfig.json        |   5 +-
 86 files changed, 270 insertions(+), 7947 deletions(-)
 delete mode 100644 samples/teamspace-nextjs/app/actions/auth.ts
 delete mode 100644 samples/teamspace-nextjs/app/auth/signin/page.tsx
 delete mode 100644 samples/teamspace-nextjs/app/auth/signup/page.tsx
 delete mode 100644 samples/teamspace-nextjs/app/dashboard/dashboard-client.tsx
 delete mode 100644 samples/teamspace-nextjs/app/dashboard/page.tsx
 create mode 100644 samples/teamspace-nextjs/app/favicon.ico
 delete mode 100644 samples/teamspace-nextjs/app/organizations/new/page.tsx
 delete mode 100644 samples/teamspace-nextjs/app/organizations/page.tsx
 delete mode 100644 samples/teamspace-nextjs/app/profile/page.tsx
 delete mode 100644 samples/teamspace-nextjs/components/header.tsx
 delete mode 100644 samples/teamspace-nextjs/components/theme-provider.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/accordion.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/alert-dialog.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/alert.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/aspect-ratio.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/avatar.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/badge.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/breadcrumb.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/button.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/calendar.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/card.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/carousel.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/chart.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/checkbox.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/collapsible.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/command.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/context-menu.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/dialog.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/drawer.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/dropdown-menu.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/form.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/hover-card.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/input-otp.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/input.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/label.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/menubar.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/navigation-menu.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/pagination.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/popover.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/progress.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/radio-group.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/resizable.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/scroll-area.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/select.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/separator.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/sheet.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/sidebar.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/skeleton.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/slider.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/sonner.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/switch.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/table.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/tabs.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/textarea.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/toast.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/toaster.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/toggle-group.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/toggle.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/tooltip.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/use-mobile.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/use-toast.ts
 delete mode 100644 samples/teamspace-nextjs/env.local.example
 delete mode 100644 samples/teamspace-nextjs/hooks/use-mobile.tsx
 delete mode 100644 samples/teamspace-nextjs/hooks/use-toast.ts
 delete mode 100644 samples/teamspace-nextjs/middleware.ts
 delete mode 100644 samples/teamspace-nextjs/next.config.js
 create mode 100644 samples/teamspace-nextjs/next.config.ts
 delete mode 100644 samples/teamspace-nextjs/pages.tsx
 create mode 100644 samples/teamspace-nextjs/public/file.svg
 create mode 100644 samples/teamspace-nextjs/public/globe.svg
 create mode 100644 samples/teamspace-nextjs/public/next.svg
 delete mode 100644 samples/teamspace-nextjs/public/placeholder-logo.png
 delete mode 100644 samples/teamspace-nextjs/public/placeholder-logo.svg
 delete mode 100644 samples/teamspace-nextjs/public/placeholder-user.jpg
 delete mode 100644 samples/teamspace-nextjs/public/placeholder.jpg
 delete mode 100644 samples/teamspace-nextjs/public/placeholder.svg
 create mode 100644 samples/teamspace-nextjs/public/vercel.svg
 create mode 100644 samples/teamspace-nextjs/public/window.svg

diff --git a/samples/teamspace-nextjs-1/app/page.tsx b/samples/teamspace-nextjs-1/app/page.tsx
index 419cc8ef7..3c8a82f3e 100644
--- a/samples/teamspace-nextjs-1/app/page.tsx
+++ b/samples/teamspace-nextjs-1/app/page.tsx
@@ -6,6 +6,15 @@ export default function Home() {
     <div className={styles.page}>
       <main className={styles.main}>
         <div className={styles.ctas}>
+          <SignedOut>
+            <SignInButton>
+              {({isLoading}) => (
+                <button type="submit" disabled={isLoading} className={styles.primary}>
+                  {isLoading ? 'Signing in...' : 'Sign In'}
+                </button>
+              )}
+            </SignInButton>
+          </SignedOut>
           <SignedOut>
             <SignInButton className={styles.primary}>Sign In</SignInButton>
           </SignedOut>
diff --git a/samples/teamspace-nextjs/app/actions/auth.ts b/samples/teamspace-nextjs/app/actions/auth.ts
deleted file mode 100644
index 5e591ac5a..000000000
--- a/samples/teamspace-nextjs/app/actions/auth.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-"use server"
-
-import { redirect } from "next/navigation"
-import { login, signup, logout } from "@/lib/auth"
-
-export async function loginAction(formData: FormData) {
-  const result = await login(formData)
-
-  if (result.success) {
-    redirect("/dashboard")
-  }
-
-  return result
-}
-
-export async function signupAction(formData: FormData) {
-  const result = await signup(formData)
-
-  if (result.success) {
-    redirect("/dashboard")
-  }
-
-  return result
-}
-
-export async function logoutAction() {
-  await logout()
-  redirect("/")
-}
diff --git a/samples/teamspace-nextjs/app/auth/signin/page.tsx b/samples/teamspace-nextjs/app/auth/signin/page.tsx
deleted file mode 100644
index 0e473b7df..000000000
--- a/samples/teamspace-nextjs/app/auth/signin/page.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-"use client"
-
-import type React from "react"
-
-import { useState } from "react"
-import Link from "next/link"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Alert, AlertDescription } from "@/components/ui/alert"
-import { Users, Eye, EyeOff } from "lucide-react"
-
-export default function SignInPage() {
-  const signIn = () => null;
-  const [showPassword, setShowPassword] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState("")
-  const [formData, setFormData] = useState({
-    email: "demo@teamspace.com",
-    password: "password",
-  })
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setIsLoading(true)
-    setError("")
-
-    try {
-      await signIn(formData.email, formData.password)
-    } catch (err) {
-      setError("Invalid email or password")
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-background to-purple-50 p-4">
-      <div className="w-full max-w-md">
-        <div className="text-center mb-8">
-          <Link href="/" className="inline-flex items-center justify-center mb-4">
-            <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
-              <Users className="h-6 w-6 text-primary-foreground" />
-            </div>
-            <span className="ml-2 text-2xl font-bold">Teamspace</span>
-          </Link>
-          <h1 className="text-2xl font-bold">Welcome back</h1>
-          <p className="text-muted-foreground mt-2">Sign in to your account to continue</p>
-        </div>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Sign in</CardTitle>
-            <CardDescription>Enter your email and password to access your account</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <form onSubmit={handleSubmit} className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="email">Email</Label>
-                <Input
-                  id="email"
-                  type="email"
-                  placeholder="demo@teamspace.com"
-                  value={formData.email}
-                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-                  required
-                  disabled={isLoading}
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="password">Password</Label>
-                <div className="relative">
-                  <Input
-                    id="password"
-                    type={showPassword ? "text" : "password"}
-                    placeholder="password"
-                    value={formData.password}
-                    onChange={(e) => setFormData({ ...formData, password: e.target.value })}
-                    required
-                    disabled={isLoading}
-                  />
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
-                    onClick={() => setShowPassword(!showPassword)}
-                    disabled={isLoading}
-                  >
-                    {showPassword ? (
-                      <EyeOff className="h-4 w-4 text-muted-foreground" />
-                    ) : (
-                      <Eye className="h-4 w-4 text-muted-foreground" />
-                    )}
-                  </Button>
-                </div>
-              </div>
-
-              {error && (
-                <Alert variant="destructive">
-                  <AlertDescription>{error}</AlertDescription>
-                </Alert>
-              )}
-
-              <Button type="submit" className="w-full" disabled={isLoading}>
-                {isLoading ? "Signing in..." : "Sign in"}
-              </Button>
-            </form>
-
-            <div className="mt-6 p-4 bg-muted rounded-lg">
-              <p className="text-sm font-medium mb-2">Demo Credentials:</p>
-              <p className="text-sm text-muted-foreground">Email: demo@teamspace.com</p>
-              <p className="text-sm text-muted-foreground">Password: password</p>
-            </div>
-
-            <div className="mt-6 text-center text-sm">
-              <span className="text-muted-foreground">Don't have an account? </span>
-              <Link href="/auth/signup" className="text-primary hover:underline font-medium">
-                Sign up
-              </Link>
-            </div>
-          </CardContent>
-        </Card>
-
-        <div className="mt-8 text-center">
-          <Link href="/" className="text-sm text-muted-foreground hover:text-foreground">
-            ← Back to home
-          </Link>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/samples/teamspace-nextjs/app/auth/signup/page.tsx b/samples/teamspace-nextjs/app/auth/signup/page.tsx
deleted file mode 100644
index b8dda3ed5..000000000
--- a/samples/teamspace-nextjs/app/auth/signup/page.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-"use client"
-
-import type React from "react"
-
-import { useState } from "react"
-import Link from "next/link"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Alert, AlertDescription } from "@/components/ui/alert"
-import { Checkbox } from "@/components/ui/checkbox"
-import { Users, Eye, EyeOff } from "lucide-react"
-
-export default function SignUpPage() {
-  const signUp = () => null;
-  const [showPassword, setShowPassword] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState("")
-  const [formData, setFormData] = useState({
-    name: "",
-    email: "",
-    password: "",
-    acceptTerms: false,
-  })
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setIsLoading(true)
-    setError("")
-
-    if (!formData.acceptTerms) {
-      setError("Please accept the terms and conditions")
-      setIsLoading(false)
-      return
-    }
-
-    try {
-      await signUp(formData.name, formData.email, formData.password)
-    } catch (err) {
-      setError("Failed to create account")
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-background to-purple-50 p-4">
-      <div className="w-full max-w-md">
-        <div className="text-center mb-8">
-          <Link href="/" className="inline-flex items-center justify-center mb-4">
-            <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
-              <Users className="h-6 w-6 text-primary-foreground" />
-            </div>
-            <span className="ml-2 text-2xl font-bold">Teamspace</span>
-          </Link>
-          <h1 className="text-2xl font-bold">Create your account</h1>
-          <p className="text-muted-foreground mt-2">Start collaborating with your team today</p>
-        </div>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Sign up</CardTitle>
-            <CardDescription>Create your account to get started with Teamspace</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <form onSubmit={handleSubmit} className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="name">Full Name</Label>
-                <Input
-                  id="name"
-                  type="text"
-                  placeholder="John Doe"
-                  value={formData.name}
-                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                  required
-                  disabled={isLoading}
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="email">Email</Label>
-                <Input
-                  id="email"
-                  type="email"
-                  placeholder="john@company.com"
-                  value={formData.email}
-                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-                  required
-                  disabled={isLoading}
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="password">Password</Label>
-                <div className="relative">
-                  <Input
-                    id="password"
-                    type={showPassword ? "text" : "password"}
-                    placeholder="Create a strong password"
-                    value={formData.password}
-                    onChange={(e) => setFormData({ ...formData, password: e.target.value })}
-                    required
-                    disabled={isLoading}
-                    minLength={8}
-                  />
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
-                    onClick={() => setShowPassword(!showPassword)}
-                    disabled={isLoading}
-                  >
-                    {showPassword ? (
-                      <EyeOff className="h-4 w-4 text-muted-foreground" />
-                    ) : (
-                      <Eye className="h-4 w-4 text-muted-foreground" />
-                    )}
-                  </Button>
-                </div>
-                <p className="text-xs text-muted-foreground">Password must be at least 8 characters long</p>
-              </div>
-
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="terms"
-                  checked={formData.acceptTerms}
-                  onCheckedChange={(checked) => setFormData({ ...formData, acceptTerms: checked as boolean })}
-                />
-                <Label htmlFor="terms" className="text-sm">
-                  I agree to the{" "}
-                  <Link href="/terms" className="text-primary hover:underline">
-                    Terms of Service
-                  </Link>{" "}
-                  and{" "}
-                  <Link href="/privacy" className="text-primary hover:underline">
-                    Privacy Policy
-                  </Link>
-                </Label>
-              </div>
-
-              {error && (
-                <Alert variant="destructive">
-                  <AlertDescription>{error}</AlertDescription>
-                </Alert>
-              )}
-
-              <Button type="submit" className="w-full" disabled={isLoading}>
-                {isLoading ? "Creating account..." : "Create account"}
-              </Button>
-            </form>
-
-            <div className="mt-6 text-center text-sm">
-              <span className="text-muted-foreground">Already have an account? </span>
-              <Link href="/auth/signin" className="text-primary hover:underline font-medium">
-                Sign in
-              </Link>
-            </div>
-          </CardContent>
-        </Card>
-
-        <div className="mt-8 text-center">
-          <Link href="/" className="text-sm text-muted-foreground hover:text-foreground">
-            ← Back to home
-          </Link>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/samples/teamspace-nextjs/app/dashboard/dashboard-client.tsx b/samples/teamspace-nextjs/app/dashboard/dashboard-client.tsx
deleted file mode 100644
index a276a4b74..000000000
--- a/samples/teamspace-nextjs/app/dashboard/dashboard-client.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-"use client"
-
-import { useAuth } from "@/hooks/use-auth"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { Users, MessageSquare, Calendar, FileText, TrendingUp, Clock, CheckCircle2, AlertCircle } from "lucide-react"
-import { redirect } from "next/navigation"
-import { useEffect } from "react"
-
-export function DashboardClient() {
-  const { user, currentOrg, isAuthenticated, isLoading } = useAuth()
-
-  useEffect(() => {
-    if (!isLoading && !isAuthenticated) {
-      redirect("/")
-    }
-  }, [isAuthenticated, isLoading])
-
-  if (isLoading) {
-    return <div className="flex items-center justify-center min-h-screen">Loading...</div>
-  }
-
-  if (!isAuthenticated) {
-    return null
-  }
-
-  const stats = [
-    {
-      name: "Active Projects",
-      value: "12",
-      change: "+2.1%",
-      changeType: "positive" as const,
-      icon: FileText,
-    },
-    {
-      name: "Team Members",
-      value: currentOrg?.memberCount.toString() || "0",
-      change: "+5.4%",
-      changeType: "positive" as const,
-      icon: Users,
-    },
-    {
-      name: "Messages Today",
-      value: "89",
-      change: "+12.5%",
-      changeType: "positive" as const,
-      icon: MessageSquare,
-    },
-    {
-      name: "Meetings This Week",
-      value: "7",
-      change: "-2.3%",
-      changeType: "negative" as const,
-      icon: Calendar,
-    },
-  ]
-
-  const recentActivity = [
-    {
-      id: 1,
-      user: "Sarah Chen",
-      action: 'completed task "Design Review"',
-      time: "2 hours ago",
-      type: "completed",
-    },
-    {
-      id: 2,
-      user: "Mike Johnson",
-      action: 'created new project "Mobile App"',
-      time: "4 hours ago",
-      type: "created",
-    },
-    {
-      id: 3,
-      user: "Emily Davis",
-      action: "scheduled team meeting",
-      time: "6 hours ago",
-      type: "scheduled",
-    },
-    {
-      id: 4,
-      user: "Alex Rodriguez",
-      action: 'uploaded 3 files to "Q4 Planning"',
-      time: "1 day ago",
-      type: "uploaded",
-    },
-  ]
-
-  const upcomingTasks = [
-    {
-      id: 1,
-      title: "Review quarterly reports",
-      dueDate: "Today, 3:00 PM",
-      priority: "high" as const,
-      project: "Q4 Planning",
-    },
-    {
-      id: 2,
-      title: "Team standup meeting",
-      dueDate: "Tomorrow, 9:00 AM",
-      priority: "medium" as const,
-      project: "Daily Operations",
-    },
-    {
-      id: 3,
-      title: "Client presentation prep",
-      dueDate: "Friday, 2:00 PM",
-      priority: "high" as const,
-      project: "Client Work",
-    },
-  ]
-
-  return (
-    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold text-foreground">Welcome back, {user?.name}!</h1>
-        <p className="text-muted-foreground mt-2">Here's what's happening with {currentOrg?.name} today.</p>
-      </div>
-
-      {/* Stats Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-        {stats.map((stat) => {
-          const Icon = stat.icon
-          return (
-            <Card key={stat.name}>
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium">{stat.name}</CardTitle>
-                <Icon className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">{stat.value}</div>
-                <div className="flex items-center text-xs text-muted-foreground">
-                  <TrendingUp
-                    className={`h-3 w-3 mr-1 ${stat.changeType === "positive" ? "text-green-500" : "text-red-500"}`}
-                  />
-                  <span className={stat.changeType === "positive" ? "text-green-600" : "text-red-600"}>
-                    {stat.change}
-                  </span>
-                  <span className="ml-1">from last month</span>
-                </div>
-              </CardContent>
-            </Card>
-          )
-        })}
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-        {/* Recent Activity */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Recent Activity</CardTitle>
-            <CardDescription>Latest updates from your team</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              {recentActivity.map((activity) => (
-                <div key={activity.id} className="flex items-start space-x-3">
-                  <div className="flex-shrink-0">
-                    {activity.type === "completed" && (
-                      <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
-                        <CheckCircle2 className="h-4 w-4 text-green-600" />
-                      </div>
-                    )}
-                    {activity.type === "created" && (
-                      <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
-                        <FileText className="h-4 w-4 text-blue-600" />
-                      </div>
-                    )}
-                    {activity.type === "scheduled" && (
-                      <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
-                        <Calendar className="h-4 w-4 text-purple-600" />
-                      </div>
-                    )}
-                    {activity.type === "uploaded" && (
-                      <div className="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center">
-                        <FileText className="h-4 w-4 text-orange-600" />
-                      </div>
-                    )}
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm text-foreground">
-                      <span className="font-medium">{activity.user}</span> {activity.action}
-                    </p>
-                    <p className="text-xs text-muted-foreground mt-1">{activity.time}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Upcoming Tasks */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Upcoming Tasks</CardTitle>
-            <CardDescription>Your tasks and deadlines</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              {upcomingTasks.map((task) => (
-                <div key={task.id} className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
-                  <div className="flex-1">
-                    <h3 className="text-sm font-medium text-foreground">{task.title}</h3>
-                    <p className="text-xs text-muted-foreground mt-1">{task.project}</p>
-                  </div>
-                  <div className="flex items-center space-x-3">
-                    <div className="flex items-center text-xs text-muted-foreground">
-                      <Clock className="h-3 w-3 mr-1" />
-                      {task.dueDate}
-                    </div>
-                    <Badge variant={task.priority === "high" ? "destructive" : "secondary"} className="text-xs">
-                      {task.priority === "high" && <AlertCircle className="h-3 w-3 mr-1" />}
-                      {task.priority}
-                    </Badge>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-}
diff --git a/samples/teamspace-nextjs/app/dashboard/page.tsx b/samples/teamspace-nextjs/app/dashboard/page.tsx
deleted file mode 100644
index 217c4a373..000000000
--- a/samples/teamspace-nextjs/app/dashboard/page.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-"use client"
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Users, MessageSquare, Calendar, FileText, TrendingUp, Clock, CheckCircle2, AlertCircle } from "lucide-react"
-import { redirect } from "next/navigation"
-import { useEffect } from "react"
-import { Header } from "@/components/header"
-
-export default function DashboardPage() {
-  const user = { name: "John Doe" } // Replace with actual user data
-  const currentOrg = { name: "My Organization", memberCount: 10 } //
-  const isLoading = false // Replace with actual loading state
-  const isAuthenticated = true // Replace with actual authentication check
-
-  useEffect(() => {
-    if (!isLoading && !isAuthenticated) {
-      redirect("/")
-    }
-  }, [isAuthenticated, isLoading])
-
-  if (isLoading) {
-    return <div className="flex items-center justify-center min-h-screen">Loading...</div>
-  }
-
-  if (!isAuthenticated) {
-    return null
-  }
-
-  const stats = [
-    {
-      name: "Active Projects",
-      value: "12",
-      change: "+2.1%",
-      changeType: "positive" as const,
-      icon: FileText,
-    },
-    {
-      name: "Team Members",
-      value: currentOrg?.memberCount.toString() || "0",
-      change: "+5.4%",
-      changeType: "positive" as const,
-      icon: Users,
-    },
-    {
-      name: "Messages Today",
-      value: "89",
-      change: "+12.5%",
-      changeType: "positive" as const,
-      icon: MessageSquare,
-    },
-    {
-      name: "Meetings This Week",
-      value: "7",
-      change: "-2.3%",
-      changeType: "negative" as const,
-      icon: Calendar,
-    },
-  ]
-
-  const recentActivity = [
-    {
-      id: 1,
-      user: "Sarah Chen",
-      action: 'completed task "Design Review"',
-      time: "2 hours ago",
-      type: "completed",
-    },
-    {
-      id: 2,
-      user: "Mike Johnson",
-      action: 'created new project "Mobile App"',
-      time: "4 hours ago",
-      type: "created",
-    },
-    {
-      id: 3,
-      user: "Emily Davis",
-      action: "scheduled team meeting",
-      time: "6 hours ago",
-      type: "scheduled",
-    },
-    {
-      id: 4,
-      user: "Alex Rodriguez",
-      action: 'uploaded 3 files to "Q4 Planning"',
-      time: "1 day ago",
-      type: "uploaded",
-    },
-  ]
-
-  const upcomingTasks = [
-    {
-      id: 1,
-      title: "Review quarterly reports",
-      dueDate: "Today, 3:00 PM",
-      priority: "high" as const,
-      project: "Q4 Planning",
-    },
-    {
-      id: 2,
-      title: "Team standup meeting",
-      dueDate: "Tomorrow, 9:00 AM",
-      priority: "medium" as const,
-      project: "Daily Operations",
-    },
-    {
-      id: 3,
-      title: "Client presentation prep",
-      dueDate: "Friday, 2:00 PM",
-      priority: "high" as const,
-      project: "Client Work",
-    },
-  ]
-
-  return (
-    <div className="min-h-screen bg-background">
-      <Header />
-
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold text-foreground">Welcome back, {user?.name}!</h1>
-          <p className="text-muted-foreground mt-2">Here's what's happening with {currentOrg?.name} today.</p>
-        </div>
-
-        {/* Stats Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-          {stats.map((stat) => {
-            const Icon = stat.icon
-            return (
-              <Card key={stat.name}>
-                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                  <CardTitle className="text-sm font-medium">{stat.name}</CardTitle>
-                  <Icon className="h-4 w-4 text-muted-foreground" />
-                </CardHeader>
-                <CardContent>
-                  <div className="text-2xl font-bold">{stat.value}</div>
-                  <div className="flex items-center text-xs text-muted-foreground">
-                    <TrendingUp
-                      className={`h-3 w-3 mr-1 ${stat.changeType === "positive" ? "text-green-500" : "text-red-500"}`}
-                    />
-                    <span className={stat.changeType === "positive" ? "text-green-600" : "text-red-600"}>
-                      {stat.change}
-                    </span>
-                    <span className="ml-1">from last month</span>
-                  </div>
-                </CardContent>
-              </Card>
-            )
-          })}
-        </div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-          {/* Recent Activity */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Recent Activity</CardTitle>
-              <CardDescription>Latest updates from your team</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-4">
-                {recentActivity.map((activity) => (
-                  <div key={activity.id} className="flex items-start space-x-3">
-                    <div className="flex-shrink-0">
-                      {activity.type === "completed" && (
-                        <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
-                          <CheckCircle2 className="h-4 w-4 text-green-600" />
-                        </div>
-                      )}
-                      {activity.type === "created" && (
-                        <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
-                          <FileText className="h-4 w-4 text-blue-600" />
-                        </div>
-                      )}
-                      {activity.type === "scheduled" && (
-                        <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
-                          <Calendar className="h-4 w-4 text-purple-600" />
-                        </div>
-                      )}
-                      {activity.type === "uploaded" && (
-                        <div className="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center">
-                          <FileText className="h-4 w-4 text-orange-600" />
-                        </div>
-                      )}
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm text-foreground">
-                        <span className="font-medium">{activity.user}</span> {activity.action}
-                      </p>
-                      <p className="text-xs text-muted-foreground mt-1">{activity.time}</p>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Upcoming Tasks */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Upcoming Tasks</CardTitle>
-              <CardDescription>Your tasks and deadlines</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-4">
-                {upcomingTasks.map((task) => (
-                  <div key={task.id} className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
-                    <div className="flex-1">
-                      <h3 className="text-sm font-medium text-foreground">{task.title}</h3>
-                      <p className="text-xs text-muted-foreground mt-1">{task.project}</p>
-                    </div>
-                    <div className="flex items-center space-x-3">
-                      <div className="flex items-center text-xs text-muted-foreground">
-                        <Clock className="h-3 w-3 mr-1" />
-                        {task.dueDate}
-                      </div>
-                      <Badge variant={task.priority === "high" ? "destructive" : "secondary"} className="text-xs">
-                        {task.priority === "high" && <AlertCircle className="h-3 w-3 mr-1" />}
-                        {task.priority}
-                      </Badge>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Quick Actions */}
-        <Card className="mt-8">
-          <CardHeader>
-            <CardTitle>Quick Actions</CardTitle>
-            <CardDescription>Get started with common tasks</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-              <Button variant="outline" className="h-20 flex-col">
-                <MessageSquare className="h-6 w-6 mb-2" />
-                Start Chat
-              </Button>
-              <Button variant="outline" className="h-20 flex-col">
-                <FileText className="h-6 w-6 mb-2" />
-                New Project
-              </Button>
-              <Button variant="outline" className="h-20 flex-col">
-                <Calendar className="h-6 w-6 mb-2" />
-                Schedule Meeting
-              </Button>
-              <Button variant="outline" className="h-20 flex-col">
-                <Users className="h-6 w-6 mb-2" />
-                Invite Members
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-}
diff --git a/samples/teamspace-nextjs/app/favicon.ico b/samples/teamspace-nextjs/app/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..718d6fea4835ec2d246af9800eddb7ffb276240c
GIT binary patch
literal 25931
zcmeHv30#a{`}aL_*G&7qml|y<+KVaDM2m#dVr!KsA!#An?kSQM(q<_dDNCpjEux83
zLb9Z^XxbDl(w>%i@8hT6>)&Gu{h#Oeyszu?xtw#Zb1mO<?sK2}EE5RAKnxHU7lft+
zNRAPL3?T?25I&drAjl1ssi=G|D?(7bFsgtO(2o>{pgX9699l+Qppw7jXaYf~-84xW
z)w4x8?=youko|}Vr~(D$UX<xm7|19n6Hxvd5m6xx<*9a4%RmR{en}E&p$X-wy5A}T
zU0^dwXVA>IbiXABHh`p1?nn8Po~fxRJv}|0e(BPs|G`(TT%kKVJAdg5*Z|x0leQq0
zkdUBvb#>9F()jo|T~kx@OM8$9wzs~t2l;K=woNssA3l6|sx2r3+kdfVW@e^8e*E}v
zA1y5{bRi+3Z`uD3{F7LgFJDdvm;nJilkzDku>BwXH(8ItVCXk*-lSJnR?-2UN%<G)
zWdETe=&R39RaKR)udn|#TOgZ!e!yM=<=+`Uz{l^5UtkZ2fHDQ;UwMB}v%l$A-`~F-
z{Qr^x^CSUf63Sry{6y#+`<sMA?dPFvg)$lC_RkFRKnCi7&P<a6>hJ){&rlvg`CDTj
z)Bzo!3v7Ou#83zEDEFcKt(f1E0~=rqeEbTnMvWR#{+9pg%7G8y>u1OVRUSoox-ovF
z2Ydma(;=YuBY(eI|04{hXzZD6_f(v~H;C~y5=DhAC{MMS>2fm~1H_t2$56pc$NH8(
z5bH|<)71dV-_oCHIrzrT`2s-5w_+2CM0$95I6X8p^r!gHp+j_gd;9O<1~CEQQGS8)
zS9Qh3#p&JM-G8rHekNmKVewU;pJRcTAog68KYo^dRo}(M<!8cv(gkb9@A>>36U4Us
zfgYWSiHZL3;lpWT=<n~R&zm>zNAW>Dh#mB!_@Lg%$ms8N-;aPqMn+C2HqZgz&9~Eu
z4|Kp<`$q)Uw1R?y(~S>ePdonHxpV1#eSP1B;Ogo+-Pk}6#0GsZZ5!||ev2MGdh}_m
z{DeR7?0-1^zVs&`AV6<!ZvGbtU{7FdY&`9DeD(=q|M30$GCs(E?S0J1$e@G0#Z=wz
zl)*a>Vt;r3`I`OI_wgs*w=eO%_#7Kepl{B<UyBc9U%rn&@xFZ-e{%i>@xiyCANc(l
zzIyd4y|c6PXWq9-|KM8(zIk8LPk(>a)zyFWjhT!$HJ$qX1vo@d25W<<x-(q{Yn-pG
zKTz?fwGmh&&2-F3f57**)?Xk#p#S9h^DhK{VVKE&0KR^-_MMD9nf@pDACnmVll!kp
z3?Tha?LWW70P;AL{}cP~sW|?W|MbA09{7Kt2f!i(y>fvZQ2zUz5WRc(UnFMKHwe1|
zWmlB1qdbiA(C0jmnV<}GfbKtmcu^2*P^O?<jWWPHxu*D53Uq)j1!ZtH3Vi&#Nd^rV
zj`B>MBLZKt|As~ge8&AAO~2K@zbXelK|4T<{|y4`raF{=72kC2Kn(L4YyenWgrPiv
z@^mr$t{#X5VuIMeL!7Ab6_kG$&#&5p*Z{+?5U|TZ`B!7llpVmp@skYz&n^8QfPJzL
z0G6K_OJM9x+Wu2gfN45phANGt{7=C>i34CV{Xqlx(fWpeAoj^N0Biu`w+MVcCUyU*
zDZuzO0>4Z6fbu^T_arWW5n!E45vX8N=bxTVeFoep_G#VmNlQzAI_KTIc{6>c+04vr
zx@W}zE5JNSU>!THJ{J=cqjz+4{L4A{Ob9$ZJ*S1?Ggg3klFp!+Y1@K+pK1DqI|_gq
z5ZDXVpge8-cs!o|;K73#YXZ3AShj50wBvuq3NTOZ`M&qtjj#GOFfgExjg8Gn8>Vq5
z`85n+9|!iLCZF5$HJ$Iu($dm?8~-ofu}tEc+-pyke=3!im#6pk_Wo8IA|fJwD&~~F
zc16osQ)EBo58U7XDuMexaPRjU@h8tXe%S{fA0NH3vGJFhuyyO!Uyl2^&EOpX{9As0
zWj+P>{@}jxH)8|r;2HdupP!vie{sJ28b&bo!8`D^x}TE$%zXNb^X1p@0PJ86`dZyj
z%ce7*{^oo+6%&~I!8hQy-vQ7E)0t0ybH4l%KltWOo~8cO`T=157JqL(oq_rC%ea&4
z2NcTJe-HgFjNg-gZ$6!Y`SMHrlj}Etf7<Kk?_r;;``Uc^3+u}-v3@Q8<@$Nr`<F?K
z-%F>?r!zQTPPSv}{so2e>Fjs1{<qUF=hGRSFDG$<z3x<+@%{Vd%a`e+qodRP&D<om
zAEn>gzk~LGeesX%r(Lh6rbhSo_n)@@G-FTQy93;l#E)hgP@d_SGvyCp0~o(Y;Ee8{
zdVUDbHm5`2taPUOY^MAGOw*<R_VaVlPH<<CgYr!E->>=s7=Gst=D+p+2yON!0%Hk`
zz5mAhyT4lS*T3LS^WSxUy86q&GnoHxzQ6vm8)VS}_zuqG?+3td68_x;etQAdu@sc6
zQJ&5|4(I?~3d-QOAODHpZ=hlSg(lBZ!JZWCtHHSj`0Wh93-Uk)_S%zsJ~aD>{`A0~
z9{AG(e|q3g5B%wYKRxiL2Y$8(4w<boVrLOyLG9R$m+7N>6bzchKuloQW#e&S3n+P-
z8!ds-%f;TJ1>)v)##>gd{PdS2Oc3VaR`fr=`O8QIO(6(N!A?pr5C#6fc~Ge@N%Vvu
zaoAX2&(a6eWy_q&UwOhU)|P3J0Qc%OdhzW=F4D|pt0E4osw;%<%Dn58hAWD^XnZD=
z>9~H(3bmLtxpF?a7su6J7M*x1By7YSUbxGi)Ot0P77`}P<HJ;%@cvfCkvm6xcMjdY
zed_u6xK)F%|1Hy`)`e~K(f*MqTJ?92I+4lga{A5`-U@Cab35G6unNk<*dpB|Rtkp;
z?32o^yBlJsuA-^abQ~7;%<oa^k<DbKc{lOW2!yM#nEALvv)IhY7b|Wfg(UhtiurTM
zY-B6L26$JQo&Kt3nh3JTJ)garEgw^{uEM3__%b$U5{~+aMO*k)6R#grkER2`U6KS-
z=j1=QhCkuy%iiHWrqH8CeGNw*C?epTpl2Bo@ugUPKRFeiVHOpL7PHu-SAgX@qmTGH
z_%ePz1`io8XDfwLmip;Rn;1yo+3>3{)&5Un{KD?`-e?r21!4vTTnN(4Y6Lin?UkSM
z`MXCTC1@4A4~mvz%Rh2&EwY))LeoT=*`tMoqcEXI>TZU9WTP#l?uFv+@Dn~b(>xh2
z;>B?;Tz2SR&KVb>vGiBSB`@U7VIWFSo=LDSb9F{GF^DbmWAfpms8Sx9OX4CnBJca3
zlj9(x!dIjN?OG1X4l*imJNvRCk}F%!?SOfiOq5y^mZW)jFL@<gIi}tCXee1<sGV$i
z4r_`X#mEQbiDh!Efji0GjM9z-0bF}p0(*s(OzMJ|;K&OJBar<ARLp}T>a|r-@d#f7
z2gmU8L3IZq0ynIws=}~m^#@&C%J6QFo~Mo4V`>v7MI-_!EBMMtb%_M&kvAaN)@ZVw
z+`toz&WG#HkWDjnZE!6nk{e-oFdL^$YnbOCN}JC&{$#$O27@|Tn-skXr)2ml2~O!5
zX+gYoxhoc7qoU?C^3~&!U?kRFtnSEecWuH0B0OvLodgUAi}8p1<ZO0#U-k07ifx!>
zrO6RSXHH}D<I*>Mc$&|?D004<Y&c6)m74d`LOLU@ruR+Um4>DiOVMHV8kXCP@7NKB
zgaZq^^O<7PoKEp72kby@W0Z!Y*A<g|TlOeriuPP`vK2IntATvs?Iv|J14j&;NFSFo
zyJ+sca?G+8C%!b{Sq=6cJJqS>y{&vfg#C&gG@YVR9g?FEocMUi1gSN$+V+ayF45{a
zuDZDT<?u;)RfLQwg>N}mS|;BO%gEf}pjBfN2-gIrU#G5~cucA;dokXW89%>AyXJJI
z9X4Ul<x{xc_m~`mWBP0<g-{#wm}Vv~Ef3pKWC&N_<~88zSbEk;;+{DnJ9-u&Zc74s
zJ6TCQyl_^|5cY;wmDdrU@LTL-3v0H#Ui?8ICQV{imof1MHuM$`e*ux>IWA|ZYHgbI
z5?oFk@A=Ik7lrEQPDH!H+b`7_Y~aDb_qa=B2^Y&Ow41cU=4WDd40dp5(QS-WMN-=Y
z9g;6_-JdNU;|6cPwf$ak*aJIcwL@1n$#l~zi{c{EW?T;DaW*E8DYq?Umtz{nJ&w-M
zEMyT<MDk{HKbd#ckg5-pS_?QUVhZv?&Q-ioBS}$nvBd)nE7YO0deN~G(#zCJAbY$E
z!)g3Ytl=_NDUV%pykcE+Q<{EoZ_4FR@&#d<hqs%N>DrC&9K$d|kZe2#ws6)L=7K+{
zQw{XnV6UC$6-rW0emqm8wJoeZK)wJIcV?dST}Z;G0Arq{dVDu0&4kd%N!3F1*;*pW
zR&qUiFzK=@44#QGw7k1`3t_d8&*kBV->O##t|tonFc2YWrL7_eqg+=+k;!F-`^b8>
z#KWCE8%u4k@EprxqiV$VmmtiWxDLgnGu$Vs<8rppV5E<MCr+anDo)-{XRlCJ;D#M(
zT=3WgR02;Nm!54biUb^FtzPh8iGrf412epnki-k+G4mdkzC|lJqaRMbb0~Jjp-{}I
z5Do5afZi>ajBXL4nyyZM$SWVm!wnCj-B!Wjqj5-5dNXukI2$$|Bu3Lrw}z65Lc=1G
z^-#WuQOj$hwNGG?*CM_TO8Bg-1+qc>J7k5c51U8g?ZU5n?HYor;~JIjoWH-G>AoUP
ztrWWLbRNqIjW#RT*WqZgPJXU7C)VaW5}MiijYbABmzoru6EmQ*N8cVK7a3|aOB#O&
zBl8JY2WKfmj;h#Q!pN%9o@VNLv{OUL?rixHwOZuvX7{IJ{(EdPpuVFoQqIOa7gi<U
zTpbX&UCeYeNu>LVkBOKL@^smUA!tZ1CKRK}#SSM)iQHk)*R~?M!qkCruaS!#oIL1c
z<cK@1=jX>?J<BS8bpdt^R+}%A_DEhF^%o}8e!!lc`Y!qU>;U~&FfH#*98^G?i}pA{
z9Jg36t4=%6mhY(quYq*vSxptes9qy|7xSlH?G=S@>u>Ebe;|LVhs~@+06N<4CViBk
zUiY$thvX;>Tby6z9Y1e<Q<iIG*|o$r?OTFp`s)@_nHs4LeWbGvg7^}NK)>dAMQaiH
zm^r3v#$Q#2T=X>bsY#D%s!bhs^M9PMAcHbCc0FMHV{u-dwlL;a1eJ63v5U*?Q_8JO
zT#50!RD619#j_Uf))0ooADz~*9&lN!bBDRUgE>Vud-i5ck%vT=r^yD*^?Mp@Q^v+V
zG#-?gKlr}Eeqifb{|So?HM&g91<J5P5=Ly{?(NNY{6`O~L5r@sJe3rNZn06%SLk);
z9?hvE^Hr{!*G$<_doyzGn#*z*#}?)8dH=eYTgvc)T~}Jw!kCv68<+KL5{5?EXtDAZ
zWeNqp8%KIuBi&icn5s815Vho<+99VW1~m@L8l0=$c`t-L{q))~<!p*~vCdUcBcPz`
zyUi}!-k_`G{>P8|av8hQoCmQXkd?7wIJw<dY^{|7OQJUHKB~nksN_|Xy;DL?xjxU^
zbMa`WdfTBnr<wTd$mY&SgJ4U|X``k`#`gN@M+0x2W{YgC3kbLk<uYFJWglkx_)2#b
ztRiuA!EK9o)f`I2k)l;Of%E`ff91WlZh8yfRi6#N-mC`Ma(yr~U82SyAhc9B+ur!f
zP-3igg*KeYs9mGOAw@OaXYy9DnGjn0<m`JH&Q^h}^!h+uS9Ct*o-oEy(?iT6Yco>b
z_^v8bbg`<ZOL)a;i=IdfK0Zvw4nXsoC?eTOMpY)_ptiORm%J(1CD3dE0Z%Vy<2iHp
zcp>SAn{I*4bH$u(RZ6*x<DqKJ+5;a6Jq~=Y8V&c?Vsyq88!2nD?H?Eww58Mqt$7R8
z5BMjmKx>UhuA~hc=8czK8SHEKTzSxgbwi~9(OqJB&gwb^l4+m`k*Q;_?>Y-APi1{k
zAHQ)P)G)f|AyjSgcCFps)Fh6Bca*Xznq3<?y%xNvu0N78_R?~<RDFQx0ynlRG(E|j
zvEGN3bF<E_9p-I!UwQXFqcSGV#e^98tgFqLp+z9eP}y!jNA{)r*a+%M-_20xg?94<
zzmM{}syi0cd&P)zywMdS&Y_9k5JDtOM!L)b^2WP!+fHYGv>6!pV6Az&m{O8$wGFD?
zY&O*3*J0;_EqM#jh6^gMQKpXV?#1?>$ml1xvh8nSN>-?H=V;nJIwB07YX$e6vLxH(
zqYwQ>qxwR(i4f)DLd)-$P>T-no_c!LsN@)8`e;W@)-Hj0>nJ-}Kla4-ZdPJzI&Mce
zv)V_j;(3ERN3_@I$N<^|4Lf`B;8n+bX@bHbcZTopEmDI*Jfl)-pFDvo6svPRoo@(x
z);_{lY<;);XzT`dBFpRmGrr}z5u1=p<K1~3>C^<jVp}L(pzgMB_Vs-O?{Z?y$8M;)
zi@7zwpzV9#m72%En~(9@E)GWV^(~J*@^*K*TE0mynAnGJ5YSLCEnC42H-`tr4L=oW
zI}N{xQ$HT8Q6CVHf%RY&xw7!Zj(0xmg(K#UQ4u!ej95z7V4phlcTJ2&AR}$)zV-s!
zO7bqY6(=?1t+JCOW_z%HRE>S-{ce6iXQlLGcItwJ^mZx{m$&DA_oEZ)B{_bYPq-HA
zcH8WGoBG(aBU_j)vEy+_71T34@4dmSg!|M8Vf92Zj6WH7Q7t#OHQqWgFE3ARt+%!T
z?oLovLVlnf?2c7pTc)~cc^($_8nyKwsN`RA-23ed3sdj(ys%pjjM+9JrctL;dy8a(
z@en&CQmnV(()bu|Y%G1-4a(6x{aLytn$T-;(&{QIJB9vMox11U-1HpD@d(QkaJdEb
zG{)+6Dos_L+O3NpWo^=gR?evp|CqEG?L&Ut#D*KLaRFOgOEK(Kq1@!EGcTfo+%A&I
z=dLbB+d$u{sh?u)xP{PF8L%;YPPW53+@{>5W=Jt#wQpN;0_HYdw1{ksf_XhO4#2F=
zyPx6Lx2<92L-;L5PD`zn6zwIH`Jk(<gsVPionpJ-imI56$j4P0!br@ny3=!{x2TY^
zCD=)8_PgmN)E!^nczcDGc9Wm7oo5O3@fh=k=kh8J?_3KqEp7JHdv8z_iZ5#KmbiPt
z2Bt8Ro^p$7pS!xL3mtj<iN3f}#r6_&$Es0PnJTE?c;0#$%cGdu`T%~`gW;c^VD-S=
zrAatMf^%Lzr*wQ4kHSOb?WOUuEsJQ3xr{Imf1t{~iNmRwb_SP9!?FFN=b-E){!8P2
ztWCT~262O8`%?3<W4Wg+ovWY<re)?^kZ|Yi>$?Qw({erA$^bC;q33hv!d!>%wRhj#
zal^hk+WGNg;rJtb-EB(?czvOM=H7dl=vblBwAv>}%1@{}mnpUznfq1cE^sgsL0*4I
zJ##!*B?=vI_OEVis5o+_IwMIRrpQyT_Sq~ZU%oY7c5JMIADzpD!Upz9h@iWg_>>~j
zOLS;wp^i$-E?4<_cp?RiS%Rd?i;f*mOz=~(&3lo<=@(nR!_Rqiprh@weZlL!t#NCc
zO!QTcInq|%#>OVgobj{~ixEUec`E25zJ~*DofsQdzIa@5^nOXj2T;8O`l--(QyU<o
zeu8G~Z>^$t?TGY^7#&FQ+2SS3B#qK*k3`ye?8jUYSajE5iBbJls75CCc(m3dk{t?-
zopcER9{Z?TC)mk~gpi^kbbu>b-+a{m#8-y2^p$ka4n60w;Sc2}HMf<8JUvh<G@KZw
z+<GL!lpeahq2+nO{>CL0B&Btk)T`ctE$*qNW8L$`7!r^9T+>=<=2qaq-;ll2{`{Rg
zc5a0ZUI$oG&j-qVOuKa=*v4aY#IsoM+1|c4Z)<}lEDvy;5huB@1RJPquU2U*U-;gu
z=En2m+qjBzR#DEJDO`WU)hdd{Vj%^0V*KoyZ|5lzV87&g_j~NCjwv0uQVqXOb*QrQ
zy|Qn`hxx(58c<SELWpDAg~83oY-J_WoDiI6d7>70$E;L(X0uZZ72M1!6oeg)(cdKO
ze0gDaTz+ohR-#d)NbAH4x{I(21yjwvBQfmpLu$)|m{XolbgF!pmsqJ#D}(ylp6uC>
z{bqtcI#hT#HW=wl7>p!38sKsJ`r8}lt-q%Keqy%u(xk=yiIJiUw6|5IvkS+#?JTBl
z8H5(Q?l#wzazujH!8o>1xtn8#_w+397*<wp?Ryt$UFh41$qd}LyNJ7Oao(Aw2g|wy
zH_nZ+R#~EUME^#j4$@^5&>_cy8!pQGP%K(Ga3pAjsaTbbXJlQF_+m+-UpUUent@xM
zg%jqLUExj~o^vQ3Gl*>wh=_gOr2*|U64_iXb+-111a<qXXnUI&{l`dM&{4Gw)jZn;
zlj{VxW@#OcVE1Y%J*u^Z@H+XSqL6SwA|^jv2RU_+d;O!mk)dw7-m9B4{6*G1zRdR6
zQ}6v&Xt7R2h3Xp}EQk4nF2TULG{Ri=D|JC<a+K7dldN1}CY_f!vK#u}K3`g#TpO&W
z;!;64`0$d9raD!VbYP`kuFUasaMh!;&81y}LHS(SuGRxwEn4LZb4DS1j9iAq$MXd@
z(Ebka7_Gc(ljGaJqtI-OzmA@c@sYB$)Vg!RP4~``vaVyRq$rJXRjIPwtepN;(B%wy
zmU>H}$TjeajM+I20xw(((>fej-@CIz4S1pi$(#}P7`4({6QS2CaQS4NPENDp>sAqD
z$bH4KGzXGffkJ7R>V>)>tC)uax{UsN*dbeNC*v}#8Y#OWYwL4t$ePR?VTyIs!wea+
z5Urmc)X|^`MG~*dS6pGSbU+gPJoq*^a=_>$n4|P^w$sMBBy@f*Z^Jg6?n5?oId6f{
z$LW4M|4m502z0t7g<#Bx%X;9<=)smFolV&(V^(7Cv2-sxbxopQ!)*#ZRhTBpx1)Fc
zNm1T%bONzv6@#|dz(w02AH8OXe>kQ#1FMCzO}2J_mST)+ExmBr9cva-@?;wnmWMOk
z{3_~EX_xadgJGv&H@zK_8{(x84`}+c?oSBX*Ge3VdfTt&F}yCpFP?CpW+BE^cWY0^
zb&uBN!Ja3UzYHK-CTyA5=L<c0d<h!DNBIa<xax8W3(Ru8L0cVXQ18|Y^|*S%)R96z
zBT$(=zQ}2vmt6LzN~Oyf_Y92%P@QOx{7~}5!UIqCdfu?VwC0Nb!2@iiit8-5zUWFG
z*G&+GLIU#J;}hvowNJWnglvb^<2q~lS#?ixVtYT@(O3{TC|4kFJYLB*jni-4YZi0>
zEMW{l3Usky#ly=7px648W31UNV@K)&Ub&zP1c7%)`{);I4b0Q<)B}3;NMG2JH=X$U
zfIW4)4n9ZM`-yRj67I)YSLDK)qfUJ_ij}a#aZN~9EXrh8eZY2&=uY%2N0UFF7<~%M
zsB8=erOWZ>Ct_#^tHZ|*q`H;A)5;ycw*I<Cd*bZlOJ9YmRUK2<qXkpRR3nr6r~%Jz
z*(8tA&DYO)etdgVmoonqD{*<5Fog4ClIs-~_uhjuZOI}#Wy+ce${%#oyHloXelqfz
z8)?D3Y_>cmVxi8_0Xk}aJA^ath+E;xg!x+As(M#0=)3!NJR6H&9+zd#iP(m0PIW8$
z1Y^VX`>jm`W!=WpF*{ioM?C9`yOR>@0q=u7o>BP-eSHqCgMDj!2anwH?s%i2p+Q7D
zzszIf5XJpE)IG4;d_(La-xenmF(tgAxK`Y4sQ}BSJEPs6N_U2vI{8=0C_F?@7<(G;
zo$~G=8p+076G;`}>{MQ>t>7cm=zGtfbdDXm6||jUU|?X?CaE?(<6bKDYKeHlz}DA8
zXT={X=yp_R;HfJ9h%?eWvQ!dRgz&Su*JfNt!Wu>|XfU<MM~gB&J0gc}IH}?|B4WRK
zWPL0FhctFGdMucOFdhrVunIe5)4K^H9IjB#eA)p5w?c#v7kp8jx^~bxxJB{;hPFL9
zkR9Dbpj+T5ZMgHQg|oj*DS;x&jK}1rn&}Shp9sgOI*7puQD-w?3H*cg72;5H(_zW*
zApJBIM-p2~F;qWDj!n|Kd=5|T8OPkQ_G;ujgvKybr5@~eci2{8WAz+%NUSp-&eoG!
zOGLNLJewWl&1*NT467W3god~fYgX?!f0?NCFnjD$qE-fyQ)|Q_DLc*{olmXSVl$g_
z$vj}o?RatMy(o*j8?q1Mgw{OUOgVR6_qvS<Co*&!cR`ROi|*I`ajyG5s@L8agnX2J
zF=DLkMG`z{RP&996y0yAtvJcb<cba?TV#j4VYFPC>&68iRikRrHRW|ZxzRR^`eIGt
zIeiDgVS>IeExKVRWW8-=<xUfo0v~z=RA=cFWKXgcMECd}xHp7iqkBanH}TZ0h0rA=
zqxUZ>A=<k-RjTtwbJkkep{8z*173wY^e%-U0{Ue!n@wbg^2q)Vx5c(_RfvuR4}XXn
z+JE>yA`}`)ZkWBrZD`hpWIxBGkh&f#ijr449~m`j6{4jiJ*C!oVA8ZC?$1RM#K(_b
zL9TW)kN*Y4%^-qPpMP7d4)o?Nk#>aoYHT(*g)qmRUb?**F@pnNiy6Fv9rEiUqD(^O
zzyS?nBrX63BTRYduaG(0VVG2yJRe%o&rVrLjbxTaAFTd8s;<<@Qs>u(<193R8>}2_
zuwp{7;H2a*X7_jryzriZXMg?bTuegABb^87@SsKkr2)0Gyiax8KQWstw^v<oS3Xw7
zu51m`3~hoyxErcHymdFTZd#AO59{EkuFTcpAR33(3xc{zRnn1~1Ei(i*^HdCvM~;;
za&}Uip|u>#ix45EVrcEhr>!NMhprl<CqZuKa#zuI&@zymVzIicetS0bq#u?m(r_@S
zJ79bl%4EyHCQ3fK@en+A1@)e}HWLP|gr_zuoA{}Z<(-*53Zu@k+=^%~5F(z$EFLI;
z-TQTS8$W|GRbZq93Ha1?lu+`O;rn>$InQMzjSFH54x5k9qHc`@9uKQzvL4ihcq{^B
zPrVR=o_ic%Y>6&rMN)hTZsI7I<3&`#(nl+3y3ys9A~<Ao%ZuW})CJ)6^(aRV(gGxR
z89#(FDW;GZEAf;rI$+PU)rEV|rASrwP0_mr^Ldv)IuUf1M>&^=4?PL&nd8)`OfG#n
zwAMN$1&>K++c{^|7<<q5KGu)u(OEfEJJw2aEi(;x-i=Y=j3ram9H2n-Fuqv0dVlXJ
z&WgG5X({!vJFDrEbm+CWDca^zIe2@s1@a;;Y3!U9Q)&P0UXFmCP51_!wvTfAIyR^M
z7^R*O@yz1b-s4VC>4P=2y(B{jJsQ0a#U;HTo4ZmWZYvI{+s;Td{Yzem%0*k#)vjpB
zia;J&>}ICate44SFYY3vEelqStQWFihx%^vQ@Do(sOy7yR2@WNv7Y9I^yL=nZr3mb
zXKV5t@=?-Sk|b{XMhA7ZGB@2hqsx}4xwCW!in#C<kr{U&JG{9FhoZ<aTve_lLz39>
zI@}sc<h3gsW}hp-`WUywKA>Zlr3-NFJ@NFaJlhyfcw{k^vvtGl`N9xSo**rDW4S}i
zM9{fMPWo%4wYDG~BZ18BD+}h|GQKc-g^{++3MY>}W_uq7jGHx{mwE9fZiPCoxN$+7
zrODGGJrOkcPQUB(FD5aoS4g~7#6NR^ma7-!>mHuJfY5kTe6PpNNKC9GGRiu^L31uG
z$7v`*JknQHsYB!Tm_W{a32TM099djW%5e+j0Ve_ct}IM>XLF1Ap+YvcrLV=|CKo6S
zb+<Td{{5RWR}u2f(q<b(D$9JsF0OOzJ*+z0P5kc1t}CXlYgua%x*2lSgp|*WS3H-#
zdYr7?GQOL18zUS<2|;+vi4|4sQBM2Gs&WVS!D`q5Lz;XR@5rEfa{uG-!q?R8Ncz%(
z5K6~LQ@d2wp#)5q4u<ENlFbS)U4o1t9{-d>9Nl3_YdKP6%Cxy@6TxZ>;4&nTneadr
z_ES90ydCev)LV!dN=#(*f}|ZORFdvkYBni^aLbUk>BajeWIOcmHP#8S)*2U~QKI%S
zyrLmtPqb&TphJ;>yAxri#;{uyk`JJqODDw%(Z=2<VfJZemI(PFAD{6Sm|uE%BTbkl
zROsg*MOh20YgGs3H7?@pmQ>`1uc}br^V%>j!gS)D*q*f_-qf8&D;W1dJgQMlaH5er
zN2U<%Smb7==vE}dDI8K7cKz!vs^73o9f>2sgiTzWcwY|BMYHH5%Vn7#kiw&eItCqa
zIkR2~Q}>X=Ar8W|^Ms41Fm8o6IB2_j60eOeBB1Br!boW7JnoeX6Gs)?7rW0^5psc-
zjS16yb>dFn>KPOF;imD}e!enuIniFzv}n$m2#gCCv4jM#ArwlzZ$7@9&XkFxZ4n!V
zj3dyiwW4Ki2QG{@i>yuZXQizw_OkZI^-3otXC{!(lUpJF33gI60ak;Uqitp74|B6I
zgg{b=Iz}WkhCGj1M<xTd?60J5qsr1Cg7F~~U2N!(@lC<>=hu4#Aw173YxIVbISaoc
z-nLZC*6Tgivd5V`K%GxhBsp@SUU60-rfc$=wb>zdJzXS&-5(NRRodFk;Kxk!S(<ov
z$YXcI9;^grAyiJ4dWTv3b}K~Ww09(;mLY4+kj|$A?IMr}`7q?mIS1>O(a0e7oY=E(
zAyS;Ow?6Q&XA+cnkCb{28_1N8H#?J!*$MmIwLq^*T_9-z^&UE@A(z9oGYtFy6EZef
LrJugUA?W`A8`#=m

literal 0
HcmV?d00001

diff --git a/samples/teamspace-nextjs/app/globals.css b/samples/teamspace-nextjs/app/globals.css
index 500bf0107..dc98be74c 100644
--- a/samples/teamspace-nextjs/app/globals.css
+++ b/samples/teamspace-nextjs/app/globals.css
@@ -1,94 +1,121 @@
-@import 'tailwindcss';
-@import 'tw-animate-css';
+@import "tailwindcss";
+@import "tw-animate-css";
 
-body {
-  font-family: Arial, Helvetica, sans-serif;
-}
+@custom-variant dark (&:is(.dark *));
 
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
 }
 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
 
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
 @layer base {
   * {
-    @apply border-border;
+    @apply border-border outline-ring/50;
   }
-
   body {
     @apply bg-background text-foreground;
   }
diff --git a/samples/teamspace-nextjs/app/layout.tsx b/samples/teamspace-nextjs/app/layout.tsx
index dfcd1a2c9..f7fa87eb8 100644
--- a/samples/teamspace-nextjs/app/layout.tsx
+++ b/samples/teamspace-nextjs/app/layout.tsx
@@ -1,25 +1,33 @@
-import type React from 'react';
-import type {Metadata} from 'next';
-import {Inter} from 'next/font/google';
-import './globals.css';
-import {ThemeProvider} from '@/components/theme-provider';
-// import {AsgardeoProvider} from '@asgardeo/nextjs';
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
 
-const inter = Inter({subsets: ['latin']});
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
 
 export const metadata: Metadata = {
-  title: 'Teamspace - Where teams collaborate',
-  description: "Streamline your team's workflow with our all-in-one collaboration platform.",
-  generator: 'v0.dev',
+  title: "Create Next App",
+  description: "Generated by create next app",
 };
 
-export default function RootLayout({children}: {children: React.ReactNode}) {
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
-        <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
-          <div className="min-h-screen bg-background">{children}</div>
-        </ThemeProvider>
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
       </body>
     </html>
   );
diff --git a/samples/teamspace-nextjs/app/organizations/new/page.tsx b/samples/teamspace-nextjs/app/organizations/new/page.tsx
deleted file mode 100644
index b9b1638bd..000000000
--- a/samples/teamspace-nextjs/app/organizations/new/page.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-'use client';
-
-import type React from 'react';
-
-import {useState, useEffect} from 'react';
-import {useRouter} from 'next/navigation';
-import {Button} from '@/components/ui/button';
-import {Input} from '@/components/ui/input';
-import {Label} from '@/components/ui/label';
-import {Textarea} from '@/components/ui/textarea';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
-import {Avatar, AvatarFallback, AvatarImage} from '@/components/ui/avatar';
-import {Building2, Upload, ArrowLeft} from 'lucide-react';
-import Link from 'next/link';
-import {Header} from '@/components/header';
-import {redirect} from 'next/navigation';
-
-export default function CreateOrganizationPage() {
-  const router = useRouter();
-  const addOrganization = (org: any) => {
-    // This function should handle adding the organization to your state management or API
-    console.log('Organization added:', org);
-  };
-  const isAuthenticated = true; // Replace with actual authentication check
-  const isLoading = false; // Replace with actual loading state
-  const [formData, setFormData] = useState({
-    name: '',
-    slug: '',
-    description: '',
-    website: '',
-    avatar: '/placeholder.svg?height=64&width=64',
-  });
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  useEffect(() => {
-    if (!isLoading && !isAuthenticated) {
-      redirect('/');
-    }
-  }, [isAuthenticated, isLoading]);
-
-  if (isLoading) {
-    return <div className="flex items-center justify-center min-h-screen">Loading...</div>;
-  }
-
-  if (!isAuthenticated) {
-    return null;
-  }
-
-  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const name = e.target.value;
-    const slug = name
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, '-')
-      .replace(/^-|-$/g, '');
-    setFormData({...formData, name, slug});
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsSubmitting(true);
-
-    // Simulate API call
-    await new Promise(resolve => setTimeout(resolve, 1000));
-
-    const newOrg = {
-      id: Date.now().toString(),
-      name: formData.name,
-      slug: formData.slug,
-      avatar: formData.avatar,
-      role: 'owner' as const,
-      memberCount: 1,
-    };
-
-    addOrganization(newOrg);
-    router.push('/organizations');
-  };
-
-  return (
-    <div className="min-h-screen bg-background">
-      <Header />
-
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-2xl">
-        {/* Header */}
-        <div className="mb-8">
-          <Button variant="ghost" asChild className="mb-4">
-            <Link href="/organizations">
-              <ArrowLeft className="h-4 w-4 mr-2" />
-              Back to organizations
-            </Link>
-          </Button>
-          <h1 className="text-3xl font-bold text-foreground">Create a new organization</h1>
-          <p className="text-muted-foreground mt-2">
-            Organizations are shared accounts where teams can collaborate across many projects at once.
-          </p>
-        </div>
-
-        {/* Form */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Organization Details</CardTitle>
-            <CardDescription>Set up your new organization with basic information</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <form onSubmit={handleSubmit} className="space-y-6">
-              {/* Organization Avatar */}
-              <div>
-                <Label className="text-sm font-medium">Organization avatar</Label>
-                <div className="flex items-center space-x-4 mt-2">
-                  <Avatar className="w-16 h-16">
-                    <AvatarImage src={formData.avatar || '/placeholder.svg'} alt="Organization avatar" />
-                    <AvatarFallback>
-                      <Building2 className="h-8 w-8" />
-                    </AvatarFallback>
-                  </Avatar>
-                  <Button type="button" variant="outline">
-                    <Upload className="h-4 w-4 mr-2" />
-                    Upload image
-                  </Button>
-                </div>
-                <p className="text-xs text-muted-foreground mt-2">
-                  We recommend an image that's at least 64×64 pixels.
-                </p>
-              </div>
-
-              {/* Organization Name */}
-              <div>
-                <Label htmlFor="name">Organization name *</Label>
-                <Input
-                  id="name"
-                  required
-                  value={formData.name}
-                  onChange={handleNameChange}
-                  placeholder="Enter organization name"
-                  className="mt-2"
-                />
-              </div>
-
-              {/* Organization Slug */}
-              <div>
-                <Label htmlFor="slug">Organization slug *</Label>
-                <div className="flex mt-2">
-                  <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-input bg-muted text-muted-foreground text-sm">
-                    teamspace.com/
-                  </span>
-                  <Input
-                    id="slug"
-                    required
-                    value={formData.slug}
-                    onChange={e => setFormData({...formData, slug: e.target.value})}
-                    placeholder="organization-slug"
-                    className="rounded-l-none"
-                  />
-                </div>
-                <p className="text-xs text-muted-foreground mt-2">
-                  This will be your organization's URL. Only lowercase letters, numbers, and hyphens are allowed.
-                </p>
-              </div>
-
-              {/* Description */}
-              <div>
-                <Label htmlFor="description">Description</Label>
-                <Textarea
-                  id="description"
-                  rows={3}
-                  value={formData.description}
-                  onChange={e => setFormData({...formData, description: e.target.value})}
-                  placeholder="Tell us about your organization..."
-                  className="mt-2"
-                />
-              </div>
-
-              {/* Website */}
-              <div>
-                <Label htmlFor="website">Website</Label>
-                <Input
-                  id="website"
-                  type="url"
-                  value={formData.website}
-                  onChange={e => setFormData({...formData, website: e.target.value})}
-                  placeholder="https://example.com"
-                  className="mt-2"
-                />
-              </div>
-
-              {/* Terms */}
-              <div className="bg-muted rounded-lg p-4">
-                <div className="flex items-start">
-                  <Building2 className="h-5 w-5 text-muted-foreground mt-0.5 mr-3" />
-                  <div className="text-sm text-muted-foreground">
-                    <p className="font-medium mb-2">By creating an organization, you agree to:</p>
-                    <ul className="space-y-1 text-xs">
-                      <li>• Follow our Terms of Service and Community Guidelines</li>
-                      <li>• Take responsibility for all activity under this organization</li>
-                      <li>• Ensure all members comply with our policies</li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-
-              {/* Submit Button */}
-              <div className="flex justify-end space-x-3 pt-6 border-t border-border">
-                <Button type="button" variant="outline" asChild>
-                  <Link href="/organizations">Cancel</Link>
-                </Button>
-                <Button type="submit" disabled={isSubmitting || !formData.name || !formData.slug}>
-                  {isSubmitting ? 'Creating...' : 'Create organization'}
-                </Button>
-              </div>
-            </form>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}
diff --git a/samples/teamspace-nextjs/app/organizations/page.tsx b/samples/teamspace-nextjs/app/organizations/page.tsx
deleted file mode 100644
index d9beb10de..000000000
--- a/samples/teamspace-nextjs/app/organizations/page.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-'use client';
-
-import {Button} from '@/components/ui/button';
-import {Card, CardContent} from '@/components/ui/card';
-import {Avatar, AvatarFallback, AvatarImage} from '@/components/ui/avatar';
-import {Badge} from '@/components/ui/badge';
-import {Building2, Users, Settings, Crown, Shield, User, Plus, ExternalLink} from 'lucide-react';
-import Link from 'next/link';
-import {Header} from '@/components/header';
-import {redirect} from 'next/navigation';
-import {useEffect} from 'react';
-
-export default function OrganizationsPage() {
-  const organizations = [
-    {
-      id: '1',
-      name: 'Organization 1',
-      slug: 'organization-1',
-      avatar: '/placeholder.svg',
-      role: 'owner',
-      memberCount: 5,
-    },
-    {
-      id: '2',
-      name: 'Organization 2',
-      slug: 'organization-2',
-      avatar: '/placeholder.svg',
-      role: 'admin',
-      memberCount: 3,
-    },
-  ];
-  const setCurrentOrg = org => {
-    // This function should handle setting the current organization in your state management or API
-    console.log('Current organization set to:', org);
-  };
-  const isAuthenticated = true; // Replace with actual authentication check
-  const isLoading = false; // Replace with actual loading state
-  const redirect = path => {
-    // This function should handle redirection in your application
-    console.log('Redirecting to:', path);
-  };
-  const currentOrg = organizations[0] || null; // Default to first organization or null if none
-
-  useEffect(() => {
-    if (!isLoading && !isAuthenticated) {
-      redirect('/');
-    }
-  }, [isAuthenticated, isLoading]);
-
-  if (isLoading) {
-    return <div className="flex items-center justify-center min-h-screen">Loading...</div>;
-  }
-
-  if (!isAuthenticated) {
-    return null;
-  }
-
-  const getRoleIcon = (role: string) => {
-    switch (role) {
-      case 'owner':
-        return <Crown className="h-4 w-4 text-yellow-500" />;
-      case 'admin':
-        return <Shield className="h-4 w-4 text-blue-500" />;
-      default:
-        return <User className="h-4 w-4 text-muted-foreground" />;
-    }
-  };
-
-  const getRoleBadge = (role: string) => {
-    switch (role) {
-      case 'owner':
-        return 'default';
-      case 'admin':
-        return 'secondary';
-      default:
-        return 'outline';
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-background">
-      <Header />
-
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-4xl">
-        {/* Header */}
-        <div className="flex items-center justify-between mb-8">
-          <div>
-            <h1 className="text-3xl font-bold text-foreground">Organizations</h1>
-            <p className="text-muted-foreground mt-2">Manage your organizations and switch between them</p>
-          </div>
-          <Button asChild>
-            <Link href="/organizations/new">
-              <Plus className="h-4 w-4 mr-2" />
-              New Organization
-            </Link>
-          </Button>
-        </div>
-
-        {/* Current Organization */}
-        <div className="mb-8">
-          <h2 className="text-lg font-semibold text-foreground mb-4">Current Organization</h2>
-          <Card className="border-primary/50 bg-primary/5">
-            <CardContent className="pt-6">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center space-x-4">
-                  <Avatar className="w-12 h-12">
-                    <AvatarImage src={currentOrg?.avatar || '/placeholder.svg'} alt={currentOrg?.name} />
-                    <AvatarFallback>{currentOrg?.name?.charAt(0)}</AvatarFallback>
-                  </Avatar>
-                  <div>
-                    <h3 className="text-lg font-medium text-foreground">{currentOrg?.name}</h3>
-                    <div className="flex items-center space-x-2 mt-1">
-                      <Badge variant={getRoleBadge(currentOrg?.role || 'member')}>
-                        {getRoleIcon(currentOrg?.role || 'member')}
-                        <span className="ml-1 capitalize">{currentOrg?.role}</span>
-                      </Badge>
-                      <span className="text-sm text-muted-foreground">{currentOrg?.memberCount} members</span>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex items-center space-x-2">
-                  <Button variant="outline" size="sm">
-                    <Settings className="h-4 w-4 mr-2" />
-                    Settings
-                  </Button>
-                  <Button variant="outline" size="sm">
-                    <ExternalLink className="h-4 w-4 mr-2" />
-                    View
-                  </Button>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* All Organizations */}
-        <div>
-          <h2 className="text-lg font-semibold text-foreground mb-4">All Organizations</h2>
-          <div className="space-y-4">
-            {organizations?.map(org => (
-              <Card key={org.id} className={currentOrg?.id === org.id ? 'border-primary/50 bg-primary/5' : ''}>
-                <CardContent className="pt-6">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center space-x-4">
-                      <Avatar className="w-12 h-12">
-                        <AvatarImage src={org.avatar || '/placeholder.svg'} alt={org.name} />
-                        <AvatarFallback>{org.name.charAt(0)}</AvatarFallback>
-                      </Avatar>
-                      <div>
-                        <h3 className="text-lg font-medium text-foreground">{org.name}</h3>
-                        <div className="flex items-center space-x-2 mt-1">
-                          <Badge variant={getRoleBadge(org.role)}>
-                            {getRoleIcon(org.role)}
-                            <span className="ml-1 capitalize">{org.role}</span>
-                          </Badge>
-                          <span className="text-sm text-muted-foreground">
-                            <Users className="h-3 w-3 inline mr-1" />
-                            {org.memberCount} members
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      {currentOrg?.id !== org.id && (
-                        <Button onClick={() => setCurrentOrg(org)} variant="outline" size="sm">
-                          Switch to
-                        </Button>
-                      )}
-                      {currentOrg?.id === org.id && <Badge variant="default">Current</Badge>}
-                      <Button variant="outline" size="sm">
-                        <Settings className="h-4 w-4 mr-2" />
-                        Manage
-                      </Button>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </div>
-
-        {/* Organization Invitations */}
-        <div className="mt-8">
-          <h2 className="text-lg font-semibold text-foreground mb-4">Pending Invitations</h2>
-          <Card>
-            <CardContent className="pt-6">
-              <div className="text-center py-8">
-                <Building2 className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
-                <p className="text-muted-foreground">No pending invitations</p>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/samples/teamspace-nextjs/app/page.tsx b/samples/teamspace-nextjs/app/page.tsx
index a609578b4..88f0cc9b5 100644
--- a/samples/teamspace-nextjs/app/page.tsx
+++ b/samples/teamspace-nextjs/app/page.tsx
@@ -1,458 +1,103 @@
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import {
-  Users,
-  MessageSquare,
-  Calendar,
-  FileText,
-  Shield,
-  Zap,
-  CheckCircle,
-  Star,
-  ArrowRight,
-  Play,
-  Github,
-  Twitter,
-  Linkedin,
-} from "lucide-react"
-import Link from "next/link"
-import Image from "next/image"
-import { Header } from "@/components/header"
+import Image from "next/image";
 
-const features = [
-  {
-    icon: MessageSquare,
-    title: "Real-time Communication",
-    description: "Stay connected with instant messaging, video calls, and threaded discussions.",
-    color: "text-blue-600",
-    bgColor: "bg-blue-50",
-  },
-  {
-    icon: Calendar,
-    title: "Project Management",
-    description: "Plan, track, and deliver projects on time with intuitive task management.",
-    color: "text-green-600",
-    bgColor: "bg-green-50",
-  },
-  {
-    icon: FileText,
-    title: "Document Collaboration",
-    description: "Create, edit, and share documents in real-time with version control.",
-    color: "text-purple-600",
-    bgColor: "bg-purple-50",
-  },
-  {
-    icon: Shield,
-    title: "Enterprise Security",
-    description: "Keep your data safe with enterprise-grade security and compliance.",
-    color: "text-red-600",
-    bgColor: "bg-red-50",
-  },
-  {
-    icon: Zap,
-    title: "Workflow Automation",
-    description: "Automate repetitive tasks and streamline processes with custom workflows.",
-    color: "text-yellow-600",
-    bgColor: "bg-yellow-50",
-  },
-  {
-    icon: Users,
-    title: "Team Analytics",
-    description: "Gain insights into team performance and project progress with detailed analytics.",
-    color: "text-indigo-600",
-    bgColor: "bg-indigo-50",
-  },
-]
-
-const testimonials = [
-  {
-    quote: "Teamspace transformed how our remote team collaborates. We're 40% more productive since switching.",
-    author: "Sarah Chen",
-    role: "VP of Engineering",
-    company: "TechCorp",
-    avatar: "/placeholder.svg?height=48&width=48",
-  },
-  {
-    quote: "The best investment we've made for our team. The ROI was clear within the first month.",
-    author: "Michael Rodriguez",
-    role: "Project Manager",
-    company: "InnovateLab",
-    avatar: "/placeholder.svg?height=48&width=48",
-  },
-  {
-    quote: "Finally, a platform that brings everything together. Our team loves the intuitive interface.",
-    author: "Emily Johnson",
-    role: "Creative Director",
-    company: "DesignStudio",
-    avatar: "/placeholder.svg?height=48&width=48",
-  },
-]
-
-const pricingPlans = [
-  {
-    name: "Starter",
-    price: "Free",
-    description: "Perfect for small teams getting started",
-    features: ["Up to 5 team members", "Basic project management", "5GB storage", "Community support"],
-    cta: "Get Started",
-    popular: false,
-  },
-  {
-    name: "Professional",
-    price: "$12",
-    period: "/user/month",
-    description: "For growing teams that need more power",
-    features: [
-      "Unlimited team members",
-      "Advanced project management",
-      "100GB storage",
-      "Priority support",
-      "Advanced integrations",
-      "Team analytics",
-    ],
-    cta: "Start Free Trial",
-    popular: true,
-  },
-  {
-    name: "Enterprise",
-    price: "Custom",
-    description: "For large organizations with custom needs",
-    features: [
-      "Everything in Professional",
-      "SSO & advanced security",
-      "Unlimited storage",
-      "Dedicated support",
-      "Custom integrations",
-      "On-premise deployment",
-    ],
-    cta: "Contact Sales",
-    popular: false,
-  },
-]
-
-export default function LandingPage() {
+export default function Home() {
   return (
-    <div className="min-h-screen bg-background">
-      <Header />
-
-      {/* Hero Section */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-background to-purple-50 py-20 lg:py-32">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="grid lg:grid-cols-2 gap-12 items-center">
-            <div className="space-y-8">
-              <Badge variant="secondary" className="w-fit">
-                🚀 New: AI-powered insights now available
-              </Badge>
-
-              <h1 className="text-4xl lg:text-6xl font-bold text-foreground leading-tight">
-                Where teams
-                <span className="text-primary"> collaborate</span> and ideas come to life
-              </h1>
-
-              <p className="text-xl text-muted-foreground leading-relaxed">
-                Streamline your team's workflow with our all-in-one collaboration platform. Chat, plan, share, and
-                deliver exceptional results together.
-              </p>
-
-              <div className="flex flex-col sm:flex-row gap-4">
-                <Button asChild size="lg" className="h-12 px-8">
-                  <Link href="/auth/signup">
-                    Start Free Trial
-                    <ArrowRight className="ml-2 h-5 w-5" />
-                  </Link>
-                </Button>
-                <Button variant="outline" size="lg" className="h-12 px-8">
-                  <Play className="mr-2 h-5 w-5" />
-                  Watch Demo
-                </Button>
-              </div>
-
-              <div className="flex items-center space-x-6 text-sm text-muted-foreground">
-                <div className="flex items-center">
-                  <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
-                  Free 14-day trial
-                </div>
-                <div className="flex items-center">
-                  <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
-                  No credit card required
-                </div>
-              </div>
-            </div>
-
-            <div className="relative">
-              <Image
-                src="/placeholder.svg?height=500&width=600"
-                alt="Teamspace Dashboard"
-                width={600}
-                height={500}
-                className="w-full rounded-2xl shadow-2xl"
-              />
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Features Section */}
-      <section id="features" className="py-20">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <Badge variant="outline" className="mb-4">
-              Features
-            </Badge>
-            <h2 className="text-3xl lg:text-5xl font-bold text-foreground mb-4">
-              Everything your team needs to succeed
-            </h2>
-            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
-              From real-time collaboration to project management, Teamspace provides all the tools your team needs.
-            </p>
-          </div>
-
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {features.map((feature, index) => {
-              const Icon = feature.icon
-              return (
-                <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-shadow">
-                  <CardHeader>
-                    <div className={`w-12 h-12 ${feature.bgColor} rounded-lg flex items-center justify-center mb-4`}>
-                      <Icon className={`h-6 w-6 ${feature.color}`} />
-                    </div>
-                    <CardTitle className="text-xl">{feature.title}</CardTitle>
-                    <CardDescription className="text-base leading-relaxed">{feature.description}</CardDescription>
-                  </CardHeader>
-                </Card>
-              )
-            })}
-          </div>
-        </div>
-      </section>
-
-      {/* Testimonials Section */}
-      <section id="testimonials" className="bg-muted/50 py-20">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <Badge variant="outline" className="mb-4">
-              Testimonials
-            </Badge>
-            <h2 className="text-3xl lg:text-5xl font-bold text-foreground mb-4">What our customers say</h2>
-          </div>
-
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {testimonials.map((testimonial, index) => (
-              <Card key={index} className="border-0 shadow-lg">
-                <CardContent className="pt-6">
-                  <div className="flex mb-4">
-                    {[...Array(5)].map((_, i) => (
-                      <Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
-                    ))}
-                  </div>
-                  <blockquote className="text-foreground mb-6 text-lg leading-relaxed">
-                    "{testimonial.quote}"
-                  </blockquote>
-                  <div className="flex items-center">
-                    <Image
-                      src={testimonial.avatar || "/placeholder.svg"}
-                      alt={testimonial.author}
-                      width={48}
-                      height={48}
-                      className="w-12 h-12 rounded-full mr-4"
-                    />
-                    <div>
-                      <div className="font-semibold text-foreground">{testimonial.author}</div>
-                      <div className="text-muted-foreground text-sm">
-                        {testimonial.role}, {testimonial.company}
-                      </div>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Pricing Section */}
-      <section id="pricing" className="py-20">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <Badge variant="outline" className="mb-4">
-              Pricing
-            </Badge>
-            <h2 className="text-3xl lg:text-5xl font-bold text-foreground mb-4">Simple, transparent pricing</h2>
-            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
-              Choose the plan that's right for your team. Start free and scale as you grow.
-            </p>
-          </div>
-
-          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
-            {pricingPlans.map((plan, index) => (
-              <Card key={index} className={`relative ${plan.popular ? "border-primary shadow-lg scale-105" : ""}`}>
-                {plan.popular && (
-                  <Badge className="absolute -top-3 left-1/2 transform -translate-x-1/2">Most Popular</Badge>
-                )}
-
-                <CardHeader className="text-center">
-                  <CardTitle className="text-xl">{plan.name}</CardTitle>
-                  <CardDescription>{plan.description}</CardDescription>
-                  <div className="mt-4">
-                    <span className="text-4xl font-bold text-foreground">{plan.price}</span>
-                    {plan.period && <span className="text-muted-foreground">{plan.period}</span>}
-                  </div>
-                </CardHeader>
-
-                <CardContent>
-                  <ul className="space-y-3 mb-8">
-                    {plan.features.map((feature, featureIndex) => (
-                      <li key={featureIndex} className="flex items-center">
-                        <CheckCircle className="h-5 w-5 text-green-500 mr-3 flex-shrink-0" />
-                        <span className="text-muted-foreground">{feature}</span>
-                      </li>
-                    ))}
-                  </ul>
-
-                  <Button asChild className="w-full" variant={plan.popular ? "default" : "outline"}>
-                    <Link href="/auth/signup">{plan.cta}</Link>
-                  </Button>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* CTA Section */}
-      <section className="bg-primary py-20">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <h2 className="text-3xl lg:text-5xl font-bold text-primary-foreground mb-6">
-            Ready to transform your team's productivity?
-          </h2>
-          <p className="text-xl text-primary-foreground/80 mb-8 max-w-2xl mx-auto">
-            Join thousands of teams already using Teamspace to collaborate better and achieve more.
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Button asChild size="lg" variant="secondary" className="h-12 px-8">
-              <Link href="/auth/signup">
-                Start Free Trial
-                <ArrowRight className="ml-2 h-5 w-5" />
-              </Link>
-            </Button>
-            <Button
-              size="lg"
-              variant="outline"
-              className="h-12 px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary"
-            >
-              Schedule Demo
-            </Button>
-          </div>
-        </div>
-      </section>
-
-      {/* Footer */}
-      <footer className="bg-muted py-16">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="grid md:grid-cols-2 lg:grid-cols-5 gap-8">
-            <div className="lg:col-span-2">
-              <div className="flex items-center mb-4">
-                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-                  <Users className="h-5 w-5 text-primary-foreground" />
-                </div>
-                <span className="ml-2 text-xl font-bold">Teamspace</span>
-              </div>
-              <p className="text-muted-foreground mb-6 max-w-md">
-                Empowering teams to collaborate better and achieve more together.
-              </p>
-              <div className="flex space-x-4">
-                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
-                  <Twitter className="h-5 w-5" />
-                </Link>
-                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
-                  <Github className="h-5 w-5" />
-                </Link>
-                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
-                  <Linkedin className="h-5 w-5" />
-                </Link>
-              </div>
-            </div>
-
-            <div>
-              <h4 className="font-semibold mb-4">Product</h4>
-              <ul className="space-y-2 text-muted-foreground">
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Features
-                  </Link>
-                </li>
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Pricing
-                  </Link>
-                </li>
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    API
-                  </Link>
-                </li>
-              </ul>
-            </div>
-
-            <div>
-              <h4 className="font-semibold mb-4">Company</h4>
-              <ul className="space-y-2 text-muted-foreground">
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    About
-                  </Link>
-                </li>
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Blog
-                  </Link>
-                </li>
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Careers
-                  </Link>
-                </li>
-              </ul>
-            </div>
-
-            <div>
-              <h4 className="font-semibold mb-4">Support</h4>
-              <ul className="space-y-2 text-muted-foreground">
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Help Center
-                  </Link>
-                </li>
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Documentation
-                  </Link>
-                </li>
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Contact
-                  </Link>
-                </li>
-              </ul>
-            </div>
-          </div>
-
-          <div className="border-t border-border mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
-            <p className="text-muted-foreground text-sm">
-              © {new Date().getFullYear()} Teamspace. All rights reserved.
-            </p>
-            <div className="flex space-x-6 mt-4 md:mt-0">
-              <Link href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
-                Privacy Policy
-              </Link>
-              <Link href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
-                Terms of Service
-              </Link>
-            </div>
-          </div>
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
+        <Image
+          className="dark:invert"
+          src="/next.svg"
+          alt="Next.js logo"
+          width={180}
+          height={38}
+          priority
+        />
+        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
+          <li className="mb-2 tracking-[-.01em]">
+            Get started by editing{" "}
+            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
+              app/page.tsx
+            </code>
+            .
+          </li>
+          <li className="tracking-[-.01em]">
+            Save and see your changes instantly.
+          </li>
+        </ol>
+
+        <div className="flex gap-4 items-center flex-col sm:flex-row">
+          <a
+            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              className="dark:invert"
+              src="/vercel.svg"
+              alt="Vercel logomark"
+              width={20}
+              height={20}
+            />
+            Deploy now
+          </a>
+          <a
+            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Read our docs
+          </a>
         </div>
+      </main>
+      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="/file.svg"
+            alt="File icon"
+            width={16}
+            height={16}
+          />
+          Learn
+        </a>
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="/window.svg"
+            alt="Window icon"
+            width={16}
+            height={16}
+          />
+          Examples
+        </a>
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="/globe.svg"
+            alt="Globe icon"
+            width={16}
+            height={16}
+          />
+          Go to nextjs.org →
+        </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/samples/teamspace-nextjs/app/profile/page.tsx b/samples/teamspace-nextjs/app/profile/page.tsx
deleted file mode 100644
index cded1ee95..000000000
--- a/samples/teamspace-nextjs/app/profile/page.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-'use client';
-
-import {useState, useEffect} from 'react';
-import {Button} from '@/components/ui/button';
-import {Input} from '@/components/ui/input';
-import {Textarea} from '@/components/ui/textarea';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
-import {Avatar, AvatarFallback, AvatarImage} from '@/components/ui/avatar';
-import {Badge} from '@/components/ui/badge';
-import {User, Mail, Calendar, MapPin, LinkIcon, Edit3, Save, X} from 'lucide-react';
-import {Header} from '@/components/header';
-import {redirect} from 'next/navigation';
-
-export default function ProfilePage() {
-  const user = {
-    name: 'John Doe',
-    email: '',
-    avatar: '/placeholder.svg?height=64&width=64',
-    username: 'johndoe',
-  };
-  const isAuthenticated = true; // Replace with actual authentication check
-  const isLoading = false; // Replace with actual loading state
-
-  const [isEditing, setIsEditing] = useState(false);
-  const [formData, setFormData] = useState({
-    name: '',
-    email: '',
-    bio: 'Full-stack developer passionate about building great user experiences.',
-    location: 'San Francisco, CA',
-    website: 'https://johndoe.dev',
-    company: 'Acme Corp',
-  });
-
-  useEffect(() => {
-    if (!isLoading && !isAuthenticated) {
-      redirect('/');
-    }
-    if (user) {
-      setFormData({
-        name: user.name,
-        email: user.email,
-        bio: 'Full-stack developer passionate about building great user experiences.',
-        location: 'San Francisco, CA',
-        website: 'https://johndoe.dev',
-        company: 'Acme Corp',
-      });
-    }
-  }, [user, isAuthenticated, isLoading]);
-
-  if (isLoading) {
-    return <div className="flex items-center justify-center min-h-screen">Loading...</div>;
-  }
-
-  if (!isAuthenticated) {
-    return null;
-  }
-
-  const handleSave = () => {
-    // In a real app, you'd save to your backend
-    console.log('Saving profile:', formData);
-    setIsEditing(false);
-  };
-
-  const handleCancel = () => {
-    if (user) {
-      setFormData({
-        name: user.name,
-        email: user.email,
-        bio: 'Full-stack developer passionate about building great user experiences.',
-        location: 'San Francisco, CA',
-        website: 'https://johndoe.dev',
-        company: 'Acme Corp',
-      });
-    }
-    setIsEditing(false);
-  };
-
-  const stats = [
-    {label: 'Projects', value: '24'},
-    {label: 'Organizations', value: '3'},
-    {label: 'Contributions', value: '1,247'},
-    {label: 'Followers', value: '89'},
-  ];
-
-  const recentProjects = [
-    {
-      id: 1,
-      name: 'Mobile App Redesign',
-      description: 'Complete UI/UX overhaul for mobile application',
-      status: 'In Progress',
-      lastUpdated: '2 days ago',
-    },
-    {
-      id: 2,
-      name: 'API Documentation',
-      description: 'Comprehensive API documentation and examples',
-      status: 'Completed',
-      lastUpdated: '1 week ago',
-    },
-    {
-      id: 3,
-      name: 'Team Dashboard',
-      description: 'Analytics dashboard for team performance metrics',
-      status: 'Planning',
-      lastUpdated: '3 days ago',
-    },
-  ];
-
-  return (
-    <div className="min-h-screen bg-background">
-      <Header />
-
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-4xl">
-        {/* Profile Header */}
-        <Card className="mb-8">
-          <div className="h-32 bg-gradient-to-r from-blue-500 to-purple-600 rounded-t-lg"></div>
-          <CardContent className="relative pt-0 pb-6">
-            <div className="flex items-end justify-between -mt-16 mb-6">
-              <div className="flex items-end space-x-4">
-                <Avatar className="w-24 h-24 border-4 border-background">
-                  <AvatarImage src={user?.avatar || '/placeholder.svg'} alt={user?.name} />
-                  <AvatarFallback className="text-2xl">{user?.name?.charAt(0)}</AvatarFallback>
-                </Avatar>
-                <div className="pb-2">
-                  {isEditing ? (
-                    <Input
-                      value={formData.name}
-                      onChange={e => setFormData({...formData, name: e.target.value})}
-                      className="text-2xl font-bold bg-transparent border-b border-border focus:border-primary"
-                    />
-                  ) : (
-                    <h1 className="text-2xl font-bold text-foreground">{formData.name}</h1>
-                  )}
-                  <p className="text-muted-foreground">@{user?.username}</p>
-                </div>
-              </div>
-              <div className="pb-2">
-                {isEditing ? (
-                  <div className="flex space-x-2">
-                    <Button onClick={handleSave} size="sm">
-                      <Save className="h-4 w-4 mr-2" />
-                      Save
-                    </Button>
-                    <Button onClick={handleCancel} variant="outline" size="sm">
-                      <X className="h-4 w-4 mr-2" />
-                      Cancel
-                    </Button>
-                  </div>
-                ) : (
-                  <Button onClick={() => setIsEditing(true)} variant="outline" size="sm">
-                    <Edit3 className="h-4 w-4 mr-2" />
-                    Edit Profile
-                  </Button>
-                )}
-              </div>
-            </div>
-
-            {/* Bio and Details */}
-            <div className="space-y-4">
-              {isEditing ? (
-                <Textarea
-                  value={formData.bio}
-                  onChange={e => setFormData({...formData, bio: e.target.value})}
-                  rows={3}
-                  placeholder="Tell us about yourself..."
-                />
-              ) : (
-                <p className="text-foreground">{formData.bio}</p>
-              )}
-
-              <div className="flex flex-wrap gap-6 text-sm text-muted-foreground">
-                <div className="flex items-center">
-                  <User className="h-4 w-4 mr-2" />
-                  {isEditing ? (
-                    <Input
-                      value={formData.company}
-                      onChange={e => setFormData({...formData, company: e.target.value})}
-                      className="h-6 text-sm bg-transparent border-b border-border focus:border-primary"
-                    />
-                  ) : (
-                    formData.company
-                  )}
-                </div>
-                <div className="flex items-center">
-                  <MapPin className="h-4 w-4 mr-2" />
-                  {isEditing ? (
-                    <Input
-                      value={formData.location}
-                      onChange={e => setFormData({...formData, location: e.target.value})}
-                      className="h-6 text-sm bg-transparent border-b border-border focus:border-primary"
-                    />
-                  ) : (
-                    formData.location
-                  )}
-                </div>
-                <div className="flex items-center">
-                  <LinkIcon className="h-4 w-4 mr-2" />
-                  {isEditing ? (
-                    <Input
-                      type="url"
-                      value={formData.website}
-                      onChange={e => setFormData({...formData, website: e.target.value})}
-                      className="h-6 text-sm bg-transparent border-b border-border focus:border-primary"
-                    />
-                  ) : (
-                    <a href={formData.website} className="text-primary hover:underline">
-                      {formData.website}
-                    </a>
-                  )}
-                </div>
-                <div className="flex items-center">
-                  <Mail className="h-4 w-4 mr-2" />
-                  {formData.email}
-                </div>
-                <div className="flex items-center">
-                  <Calendar className="h-4 w-4 mr-2" />
-                  Joined March 2023
-                </div>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Stats */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-          {stats.map(stat => (
-            <Card key={stat.label} className="text-center">
-              <CardContent className="pt-6">
-                <div className="text-2xl font-bold text-foreground">{stat.value}</div>
-                <div className="text-sm text-muted-foreground">{stat.label}</div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-
-        {/* Recent Projects */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Recent Projects</CardTitle>
-            <CardDescription>Your latest work and contributions</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              {recentProjects.map(project => (
-                <div
-                  key={project.id}
-                  className="flex items-center justify-between p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors"
-                >
-                  <div className="flex-1">
-                    <h3 className="font-medium text-foreground">{project.name}</h3>
-                    <p className="text-sm text-muted-foreground mt-1">{project.description}</p>
-                    <p className="text-xs text-muted-foreground mt-2">Updated {project.lastUpdated}</p>
-                  </div>
-                  <Badge
-                    variant={
-                      project.status === 'Completed'
-                        ? 'default'
-                        : project.status === 'In Progress'
-                        ? 'secondary'
-                        : 'outline'
-                    }
-                  >
-                    {project.status}
-                  </Badge>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}
diff --git a/samples/teamspace-nextjs/components/header.tsx b/samples/teamspace-nextjs/components/header.tsx
deleted file mode 100644
index b0cd2836c..000000000
--- a/samples/teamspace-nextjs/components/header.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-'use client';
-
-import {useState} from 'react';
-import Link from 'next/link';
-import {Button} from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import {Avatar, AvatarFallback, AvatarImage} from '@/components/ui/avatar';
-import {Users, ChevronDown, Settings, User, LogOut, Plus, Check, Building2, Menu, X} from 'lucide-react';
-
-export function Header() {
-  const isAuthenticated = true; // Replace with actual authentication check
-  const user = {
-    name: 'John Doe',
-    email: 'john.doe@example.com',
-    username: 'johndoe',
-  }; // Replace with actual user data
-  const organizations = [
-    {id: '1', name: 'Organization One', avatar: '/org1.svg ', memberCount: 10},
-    {id: '2', name: 'Organization Two', avatar: '/org2.svg', memberCount: 5},
-  ]; // Replace with actual organizations data
-  const [currentOrg, setCurrentOrg] = useState(organizations[0]); // Replace with actual current organization
-  const signOut = () => {
-    // Implement sign out logic here
-    console.log('Signing out...');
-  };
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-
-  if (!isAuthenticated) {
-    return (
-      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <div className="container mx-auto flex h-16 items-center justify-between px-4">
-          <Link href="/" className="flex items-center space-x-2">
-            <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-              <Users className="h-5 w-5 text-primary-foreground" />
-            </div>
-            <span className="text-xl font-bold">Teamspace</span>
-          </Link>
-
-          <nav className="hidden md:flex items-center space-x-6">
-            <Link href="#features" className="text-muted-foreground hover:text-foreground transition-colors">
-              Features
-            </Link>
-            <Link href="#testimonials" className="text-muted-foreground hover:text-foreground transition-colors">
-              Testimonials
-            </Link>
-            <Link href="#pricing" className="text-muted-foreground hover:text-foreground transition-colors">
-              Pricing
-            </Link>
-          </nav>
-
-          <div className="hidden md:flex items-center space-x-4">
-            <Button variant="ghost" asChild>
-              <Link href="/auth/signin">Sign In</Link>
-            </Button>
-            <Button asChild>
-              <Link href="/auth/signup">Get Started</Link>
-            </Button>
-          </div>
-
-          <Button variant="ghost" size="sm" className="md:hidden" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
-            {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
-          </Button>
-        </div>
-
-        {mobileMenuOpen && (
-          <div className="md:hidden border-t bg-background">
-            <div className="container mx-auto px-4 py-4 space-y-4">
-              <Link href="#features" className="block text-muted-foreground hover:text-foreground">
-                Features
-              </Link>
-              <Link href="#testimonials" className="block text-muted-foreground hover:text-foreground">
-                Testimonials
-              </Link>
-              <Link href="#pricing" className="block text-muted-foreground hover:text-foreground">
-                Pricing
-              </Link>
-              <div className="pt-4 border-t space-y-2">
-                <Button variant="ghost" asChild className="w-full">
-                  <Link href="/auth/signin">Sign In</Link>
-                </Button>
-                <Button asChild className="w-full">
-                  <Link href="/auth/signup">Get Started</Link>
-                </Button>
-              </div>
-            </div>
-          </div>
-        )}
-      </header>
-    );
-  }
-
-  return (
-    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container mx-auto flex h-16 items-center justify-between px-4">
-        <div className="flex items-center space-x-8">
-          <Link href="/dashboard" className="flex items-center space-x-2">
-            <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-              <Users className="h-5 w-5 text-primary-foreground" />
-            </div>
-            <span className="text-xl font-bold">Teamspace</span>
-          </Link>
-
-          <nav className="hidden md:flex space-x-6">
-            <Link href="/dashboard" className="text-muted-foreground hover:text-foreground transition-colors">
-              Dashboard
-            </Link>
-            <Link href="/projects" className="text-muted-foreground hover:text-foreground transition-colors">
-              Projects
-            </Link>
-            <Link href="/teams" className="text-muted-foreground hover:text-foreground transition-colors">
-              Teams
-            </Link>
-          </nav>
-        </div>
-
-        <div className="flex items-center space-x-4">
-          {/* Organization Switcher */}
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" className="flex items-center space-x-2">
-                <Avatar className="w-5 h-5">
-                  <AvatarImage src={currentOrg?.avatar || '/placeholder.svg'} alt={currentOrg?.name} />
-                  <AvatarFallback className="text-xs">{currentOrg?.name?.charAt(0)}</AvatarFallback>
-                </Avatar>
-                <span className="max-w-32 truncate">{currentOrg?.name}</span>
-                <ChevronDown className="h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-64" align="end">
-              <DropdownMenuLabel>Switch organization</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              {organizations?.map(org => (
-                <DropdownMenuItem
-                  key={org.id}
-                  onClick={() => setCurrentOrg(org)}
-                  className="flex items-center justify-between"
-                >
-                  <div className="flex items-center space-x-3">
-                    <Avatar className="w-6 h-6">
-                      <AvatarImage src={org.avatar || '/placeholder.svg'} alt={org.name} />
-                      <AvatarFallback className="text-xs">{org.name.charAt(0)}</AvatarFallback>
-                    </Avatar>
-                    <div>
-                      <div className="font-medium">{org.name}</div>
-                      <div className="text-xs text-muted-foreground">{org.memberCount} members</div>
-                    </div>
-                  </div>
-                  {currentOrg?.id === org.id && <Check className="h-4 w-4 text-green-600" />}
-                </DropdownMenuItem>
-              ))}
-              <DropdownMenuSeparator />
-              <DropdownMenuItem asChild>
-                <Link href="/organizations" className="flex items-center">
-                  <Building2 className="h-4 w-4 mr-2" />
-                  Manage organizations
-                </Link>
-              </DropdownMenuItem>
-              <DropdownMenuItem asChild>
-                <Link href="/organizations/new" className="flex items-center">
-                  <Plus className="h-4 w-4 mr-2" />
-                  New organization
-                </Link>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-
-          {/* User Dropdown */}
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="flex items-center space-x-2 p-2">
-                <Avatar className="w-8 h-8">
-                  <AvatarImage src={user?.avatar || '/placeholder.svg'} alt={user?.name} />
-                  <AvatarFallback>{user?.name?.charAt(0)}</AvatarFallback>
-                </Avatar>
-                <ChevronDown className="h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-56" align="end">
-              <DropdownMenuLabel>
-                <div>
-                  <div className="font-medium">{user?.name}</div>
-                  <div className="text-sm text-muted-foreground">@{user?.username}</div>
-                </div>
-              </DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem asChild>
-                <Link href="/profile" className="flex items-center">
-                  <User className="h-4 w-4 mr-2" />
-                  Your profile
-                </Link>
-              </DropdownMenuItem>
-              <DropdownMenuItem asChild>
-                <Link href="/settings" className="flex items-center">
-                  <Settings className="h-4 w-4 mr-2" />
-                  Settings
-                </Link>
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem onClick={signOut} className="flex items-center text-destructive">
-                <LogOut className="h-4 w-4 mr-2" />
-                Sign out
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </div>
-    </header>
-  );
-}
diff --git a/samples/teamspace-nextjs/components/theme-provider.tsx b/samples/teamspace-nextjs/components/theme-provider.tsx
deleted file mode 100644
index 1cd216d6d..000000000
--- a/samples/teamspace-nextjs/components/theme-provider.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-"use client"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
-import type { ThemeProviderProps } from "next-themes"
-
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
-}
diff --git a/samples/teamspace-nextjs/components/ui/accordion.tsx b/samples/teamspace-nextjs/components/ui/accordion.tsx
deleted file mode 100644
index 24c788c2c..000000000
--- a/samples/teamspace-nextjs/components/ui/accordion.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Accordion = AccordionPrimitive.Root
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b", className)}
-    {...props}
-  />
-))
-AccordionItem.displayName = "AccordionItem"
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
-  </AccordionPrimitive.Content>
-))
-
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/samples/teamspace-nextjs/components/ui/alert-dialog.tsx b/samples/teamspace-nextjs/components/ui/alert-dialog.tsx
deleted file mode 100644
index 25e7b4744..000000000
--- a/samples/teamspace-nextjs/components/ui/alert-dialog.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
-
-const AlertDialog = AlertDialogPrimitive.Root
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    )}
-    {...props}
-  />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}
diff --git a/samples/teamspace-nextjs/components/ui/alert.tsx b/samples/teamspace-nextjs/components/ui/alert.tsx
deleted file mode 100644
index a0de44914..000000000
--- a/samples/teamspace-nextjs/components/ui/alert.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-)
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
-))
-Alert.displayName = "Alert"
-
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
-  ),
-)
-AlertTitle.displayName = "AlertTitle"
-
-const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
-  ),
-)
-AlertDescription.displayName = "AlertDescription"
-
-export { Alert, AlertTitle, AlertDescription }
diff --git a/samples/teamspace-nextjs/components/ui/aspect-ratio.tsx b/samples/teamspace-nextjs/components/ui/aspect-ratio.tsx
deleted file mode 100644
index d6a5226f5..000000000
--- a/samples/teamspace-nextjs/components/ui/aspect-ratio.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-"use client"
-
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
-
-const AspectRatio = AspectRatioPrimitive.Root
-
-export { AspectRatio }
diff --git a/samples/teamspace-nextjs/components/ui/avatar.tsx b/samples/teamspace-nextjs/components/ui/avatar.tsx
deleted file mode 100644
index 9946eec7e..000000000
--- a/samples/teamspace-nextjs/components/ui/avatar.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-
-import { cn } from "@/lib/utils"
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
-    {...props}
-  />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
-
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
-    {...props}
-  />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
-
-export { Avatar, AvatarImage, AvatarFallback }
diff --git a/samples/teamspace-nextjs/components/ui/badge.tsx b/samples/teamspace-nextjs/components/ui/badge.tsx
deleted file mode 100644
index 15241a319..000000000
--- a/samples/teamspace-nextjs/components/ui/badge.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import type * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-)
-
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
-}
-
-export { Badge, badgeVariants }
diff --git a/samples/teamspace-nextjs/components/ui/breadcrumb.tsx b/samples/teamspace-nextjs/components/ui/breadcrumb.tsx
deleted file mode 100644
index 60e6c96f7..000000000
--- a/samples/teamspace-nextjs/components/ui/breadcrumb.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
-  }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = "Breadcrumb"
-
-const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
-  <ol
-    ref={ref}
-    className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
-    )}
-    {...props}
-  />
-))
-BreadcrumbList.displayName = "BreadcrumbList"
-
-const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
-    {...props}
-  />
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
-
-const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
-  }
->(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
-
-  return (
-    <Comp
-      ref={ref}
-      className={cn("transition-colors hover:text-foreground", className)}
-      {...props}
-    />
-  )
-})
-BreadcrumbLink.displayName = "BreadcrumbLink"
-
-const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn("font-normal text-foreground", className)}
-    {...props}
-  />
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
-
-const BreadcrumbSeparator = ({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) => (
-  <li
-    role="presentation"
-    aria-hidden="true"
-    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
-    {...props}
-  >
-    {children ?? <ChevronRight />}
-  </li>
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
-
-const BreadcrumbEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-}
diff --git a/samples/teamspace-nextjs/components/ui/button.tsx b/samples/teamspace-nextjs/components/ui/button.tsx
deleted file mode 100644
index d5fbaac56..000000000
--- a/samples/teamspace-nextjs/components/ui/button.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    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) => {
-    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/samples/teamspace-nextjs/components/ui/calendar.tsx b/samples/teamspace-nextjs/components/ui/calendar.tsx
deleted file mode 100644
index 61d2b451e..000000000
--- a/samples/teamspace-nextjs/components/ui/calendar.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import { DayPicker } from "react-day-picker"
-
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: CalendarProps) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
-      classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
-        day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
-        ),
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
-        ...classNames,
-      }}
-      components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
-      }}
-      {...props}
-    />
-  )
-}
-Calendar.displayName = "Calendar"
-
-export { Calendar }
diff --git a/samples/teamspace-nextjs/components/ui/card.tsx b/samples/teamspace-nextjs/components/ui/card.tsx
deleted file mode 100644
index ac5e036e8..000000000
--- a/samples/teamspace-nextjs/components/ui/card.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
-))
-Card.displayName = "Card"
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
-  ),
-)
-CardHeader.displayName = "CardHeader"
-
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
-  ),
-)
-CardTitle.displayName = "CardTitle"
-
-const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
-  ),
-)
-CardDescription.displayName = "CardDescription"
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
-)
-CardContent.displayName = "CardContent"
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
-  ),
-)
-CardFooter.displayName = "CardFooter"
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/samples/teamspace-nextjs/components/ui/carousel.tsx b/samples/teamspace-nextjs/components/ui/carousel.tsx
deleted file mode 100644
index ec505d00d..000000000
--- a/samples/teamspace-nextjs/components/ui/carousel.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-"use client"
-
-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
-}
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext)
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
-  }
-
-  return context
-}
-
-const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
-    {
-      orientation = "horizontal",
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const [carouselRef, api] = useEmblaCarousel(
-      {
-        ...opts,
-        axis: orientation === "horizontal" ? "x" : "y",
-      },
-      plugins
-    )
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
-
-    const onSelect = React.useCallback((api: CarouselApi) => {
-      if (!api) {
-        return
-      }
-
-      setCanScrollPrev(api.canScrollPrev())
-      setCanScrollNext(api.canScrollNext())
-    }, [])
-
-    const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
-    }, [api])
-
-    const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
-    }, [api])
-
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === "ArrowLeft") {
-          event.preventDefault()
-          scrollPrev()
-        } else if (event.key === "ArrowRight") {
-          event.preventDefault()
-          scrollNext()
-        }
-      },
-      [scrollPrev, scrollNext]
-    )
-
-    React.useEffect(() => {
-      if (!api || !setApi) {
-        return
-      }
-
-      setApi(api)
-    }, [api, setApi])
-
-    React.useEffect(() => {
-      if (!api) {
-        return
-      }
-
-      onSelect(api)
-      api.on("reInit", onSelect)
-      api.on("select", onSelect)
-
-      return () => {
-        api?.off("select", onSelect)
-      }
-    }, [api, onSelect])
-
-    return (
-      <CarouselContext.Provider
-        value={{
-          carouselRef,
-          api: api,
-          opts,
-          orientation:
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext,
-        }}
-      >
-        <div
-          ref={ref}
-          onKeyDownCapture={handleKeyDown}
-          className={cn("relative", className)}
-          role="region"
-          aria-roledescription="carousel"
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    )
-  }
-)
-Carousel.displayName = "Carousel"
-
-const CarouselContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel()
-
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
-      <div
-        ref={ref}
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-})
-CarouselContent.displayName = "CarouselContent"
-
-const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
-
-  return (
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-CarouselItem.displayName = "CarouselItem"
-
-const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute  h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  )
-})
-CarouselPrevious.displayName = "CarouselPrevious"
-
-const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  )
-})
-CarouselNext.displayName = "CarouselNext"
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-}
diff --git a/samples/teamspace-nextjs/components/ui/chart.tsx b/samples/teamspace-nextjs/components/ui/chart.tsx
deleted file mode 100644
index 8620baa3b..000000000
--- a/samples/teamspace-nextjs/components/ui/chart.tsx
+++ /dev/null
@@ -1,365 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
-
-import { cn } from "@/lib/utils"
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
-
-export type ChartConfig = {
-  [k in string]: {
-    label?: React.ReactNode
-    icon?: React.ComponentType
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
-}
-
-type ChartContextProps = {
-  config: ChartConfig
-}
-
-const ChartContext = React.createContext<ChartContextProps | null>(null)
-
-function useChart() {
-  const context = React.useContext(ChartContext)
-
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
-  }
-
-  return context
-}
-
-const ChartContainer = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    config: ChartConfig
-    children: React.ComponentProps<
-      typeof RechartsPrimitive.ResponsiveContainer
-    >["children"]
-  }
->(({ id, className, children, config, ...props }, ref) => {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-chart={chartId}
-        ref={ref}
-        className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-          className
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  )
-})
-ChartContainer.displayName = "Chart"
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([_, config]) => config.theme || config.color
-  )
-
-  if (!colorConfig.length) {
-    return null
-  }
-
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
-  })
-  .join("\n")}
-}
-`
-          )
-          .join("\n"),
-      }}
-    />
-  )
-}
-
-const ChartTooltip = RechartsPrimitive.Tooltip
-
-const ChartTooltipContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-    React.ComponentProps<"div"> & {
-      hideLabel?: boolean
-      hideIndicator?: boolean
-      indicator?: "line" | "dot" | "dashed"
-      nameKey?: string
-      labelKey?: string
-    }
->(
-  (
-    {
-      active,
-      payload,
-      className,
-      indicator = "dot",
-      hideLabel = false,
-      hideIndicator = false,
-      label,
-      labelFormatter,
-      labelClassName,
-      formatter,
-      color,
-      nameKey,
-      labelKey,
-    },
-    ref
-  ) => {
-    const { config } = useChart()
-
-    const tooltipLabel = React.useMemo(() => {
-      if (hideLabel || !payload?.length) {
-        return null
-      }
-
-      const [item] = payload
-      const key = `${labelKey || item.dataKey || item.name || "value"}`
-      const itemConfig = getPayloadConfigFromPayload(config, item, key)
-      const value =
-        !labelKey && typeof label === "string"
-          ? config[label as keyof typeof config]?.label || label
-          : itemConfig?.label
-
-      if (labelFormatter) {
-        return (
-          <div className={cn("font-medium", labelClassName)}>
-            {labelFormatter(value, payload)}
-          </div>
-        )
-      }
-
-      if (!value) {
-        return null
-      }
-
-      return <div className={cn("font-medium", labelClassName)}>{value}</div>
-    }, [
-      label,
-      labelFormatter,
-      payload,
-      hideLabel,
-      labelClassName,
-      config,
-      labelKey,
-    ])
-
-    if (!active || !payload?.length) {
-      return null
-    }
-
-    const nestLabel = payload.length === 1 && indicator !== "dot"
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
-          className
-        )}
-      >
-        {!nestLabel ? tooltipLabel : null}
-        <div className="grid gap-1.5">
-          {payload.map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color || item.payload.fill || item.color
-
-            return (
-              <div
-                key={item.dataKey}
-                className={cn(
-                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  indicator === "dot" && "items-center"
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={cn(
-                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
-                            {
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
-                            }
-                          )}
-                          style={
-                            {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
-                      )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label || item.name}
-                        </span>
-                      </div>
-                      {item.value && (
-                        <span className="font-mono font-medium tabular-nums text-foreground">
-                          {item.value.toLocaleString()}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    )
-  }
-)
-ChartTooltipContent.displayName = "ChartTooltip"
-
-const ChartLegend = RechartsPrimitive.Legend
-
-const ChartLegendContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> &
-    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-      hideIcon?: boolean
-      nameKey?: string
-    }
->(
-  (
-    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
-    ref
-  ) => {
-    const { config } = useChart()
-
-    if (!payload?.length) {
-      return null
-    }
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "flex items-center justify-center gap-4",
-          verticalAlign === "top" ? "pb-3" : "pt-3",
-          className
-        )}
-      >
-        {payload.map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-
-          return (
-            <div
-              key={item.value}
-              className={cn(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          )
-        })}
-      </div>
-    )
-  }
-)
-ChartLegendContent.displayName = "ChartLegend"
-
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string
-) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined
-  }
-
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined
-
-  let configLabelKey: string = key
-
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string
-  }
-
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config]
-}
-
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-}
diff --git a/samples/teamspace-nextjs/components/ui/checkbox.tsx b/samples/teamspace-nextjs/components/ui/checkbox.tsx
deleted file mode 100644
index 5c40f159d..000000000
--- a/samples/teamspace-nextjs/components/ui/checkbox.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className,
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
-
-export { Checkbox }
diff --git a/samples/teamspace-nextjs/components/ui/collapsible.tsx b/samples/teamspace-nextjs/components/ui/collapsible.tsx
deleted file mode 100644
index 9fa48946a..000000000
--- a/samples/teamspace-nextjs/components/ui/collapsible.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-"use client"
-
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
-
-const Collapsible = CollapsiblePrimitive.Root
-
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
-
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/samples/teamspace-nextjs/components/ui/command.tsx b/samples/teamspace-nextjs/components/ui/command.tsx
deleted file mode 100644
index 59a264529..000000000
--- a/samples/teamspace-nextjs/components/ui/command.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-Command.displayName = CommandPrimitive.displayName
-
-const CommandDialog = ({ children, ...props }: DialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  </div>
-))
-
-CommandInput.displayName = CommandPrimitive.Input.displayName
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-))
-
-CommandList.displayName = CommandPrimitive.List.displayName
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-))
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className
-    )}
-    {...props}
-  />
-))
-
-CommandItem.displayName = CommandPrimitive.Item.displayName
-
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-}
diff --git a/samples/teamspace-nextjs/components/ui/context-menu.tsx b/samples/teamspace-nextjs/components/ui/context-menu.tsx
deleted file mode 100644
index 93ef37ba9..000000000
--- a/samples/teamspace-nextjs/components/ui/context-menu.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const ContextMenu = ContextMenuPrimitive.Root
-
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger
-
-const ContextMenuGroup = ContextMenuPrimitive.Group
-
-const ContextMenuPortal = ContextMenuPrimitive.Portal
-
-const ContextMenuSub = ContextMenuPrimitive.Sub
-
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
-
-const ContextMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <ContextMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </ContextMenuPrimitive.SubTrigger>
-))
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
-
-const ContextMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
-
-const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.Content
-      ref={ref}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </ContextMenuPrimitive.Portal>
-))
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
-
-const ContextMenuItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
-
-const ContextMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <ContextMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.CheckboxItem>
-))
-ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName
-
-const ContextMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <ContextMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.RadioItem>
-))
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
-
-const ContextMenuLabel = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold text-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
-
-const ContextMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
-
-const ContextMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-ContextMenuShortcut.displayName = "ContextMenuShortcut"
-
-export {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
-}
diff --git a/samples/teamspace-nextjs/components/ui/dialog.tsx b/samples/teamspace-nextjs/components/ui/dialog.tsx
deleted file mode 100644
index 01ff19c7e..000000000
--- a/samples/teamspace-nextjs/components/ui/dialog.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Dialog = DialogPrimitive.Root
-
-const DialogTrigger = DialogPrimitive.Trigger
-
-const DialogPortal = DialogPrimitive.Portal
-
-const DialogClose = DialogPrimitive.Close
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-DialogHeader.displayName = "DialogHeader"
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-DialogFooter.displayName = "DialogFooter"
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-}
diff --git a/samples/teamspace-nextjs/components/ui/drawer.tsx b/samples/teamspace-nextjs/components/ui/drawer.tsx
deleted file mode 100644
index 6a0ef53dd..000000000
--- a/samples/teamspace-nextjs/components/ui/drawer.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
-
-import { cn } from "@/lib/utils"
-
-const Drawer = ({
-  shouldScaleBackground = true,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root
-    shouldScaleBackground={shouldScaleBackground}
-    {...props}
-  />
-)
-Drawer.displayName = "Drawer"
-
-const DrawerTrigger = DrawerPrimitive.Trigger
-
-const DrawerPortal = DrawerPrimitive.Portal
-
-const DrawerClose = DrawerPrimitive.Close
-
-const DrawerOverlay = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Overlay
-    ref={ref}
-    className={cn("fixed inset-0 z-50 bg-black/80", className)}
-    {...props}
-  />
-))
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
-
-const DrawerContent = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DrawerPortal>
-    <DrawerOverlay />
-    <DrawerPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className
-      )}
-      {...props}
-    >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-      {children}
-    </DrawerPrimitive.Content>
-  </DrawerPortal>
-))
-DrawerContent.displayName = "DrawerContent"
-
-const DrawerHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
-    {...props}
-  />
-)
-DrawerHeader.displayName = "DrawerHeader"
-
-const DrawerFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-    {...props}
-  />
-)
-DrawerFooter.displayName = "DrawerFooter"
-
-const DrawerTitle = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName
-
-const DrawerDescription = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName
-
-export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-}
diff --git a/samples/teamspace-nextjs/components/ui/dropdown-menu.tsx b/samples/teamspace-nextjs/components/ui/dropdown-menu.tsx
deleted file mode 100644
index 8ea2f4948..000000000
--- a/samples/teamspace-nextjs/components/ui/dropdown-menu.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const DropdownMenu = DropdownMenuPrimitive.Root
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
-    )}
-    {...props}
-  />
-))
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
-    {...props}
-  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
-
-const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-}
diff --git a/samples/teamspace-nextjs/components/ui/form.tsx b/samples/teamspace-nextjs/components/ui/form.tsx
deleted file mode 100644
index ce264aef2..000000000
--- a/samples/teamspace-nextjs/components/ui/form.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
-import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext,
-} from "react-hook-form"
-
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
-
-const Form = FormProvider
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> = {
-  name: TName
-}
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  )
-}
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
-
-  const fieldState = getFieldState(fieldContext.name, formState)
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
-  }
-
-  const { id } = itemContext
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  }
-}
-
-type FormItemContextValue = {
-  id: string
-}
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
-
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const id = React.useId()
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
-    </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
-
-  return (
-    <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  )
-})
-FormLabel.displayName = "FormLabel"
-
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  )
-})
-FormControl.displayName = "FormControl"
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
-
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
-})
-FormDescription.displayName = "FormDescription"
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
-
-  if (!body) {
-    return null
-  }
-
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn("text-sm font-medium text-destructive", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-}
diff --git a/samples/teamspace-nextjs/components/ui/hover-card.tsx b/samples/teamspace-nextjs/components/ui/hover-card.tsx
deleted file mode 100644
index e54d91cf8..000000000
--- a/samples/teamspace-nextjs/components/ui/hover-card.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
-
-import { cn } from "@/lib/utils"
-
-const HoverCard = HoverCardPrimitive.Root
-
-const HoverCardTrigger = HoverCardPrimitive.Trigger
-
-const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <HoverCardPrimitive.Content
-    ref={ref}
-    align={align}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
-
-export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/samples/teamspace-nextjs/components/ui/input-otp.tsx b/samples/teamspace-nextjs/components/ui/input-otp.tsx
deleted file mode 100644
index f66fcfa0d..000000000
--- a/samples/teamspace-nextjs/components/ui/input-otp.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
-import { Dot } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const InputOTP = React.forwardRef<
-  React.ElementRef<typeof OTPInput>,
-  React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
-  <OTPInput
-    ref={ref}
-    containerClassName={cn(
-      "flex items-center gap-2 has-[:disabled]:opacity-50",
-      containerClassName
-    )}
-    className={cn("disabled:cursor-not-allowed", className)}
-    {...props}
-  />
-))
-InputOTP.displayName = "InputOTP"
-
-const InputOTPGroup = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("flex items-center", className)} {...props} />
-))
-InputOTPGroup.displayName = "InputOTPGroup"
-
-const InputOTPSlot = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div"> & { index: number }
->(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
-
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "z-10 ring-2 ring-ring ring-offset-background",
-        className
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
-        </div>
-      )}
-    </div>
-  )
-})
-InputOTPSlot.displayName = "InputOTPSlot"
-
-const InputOTPSeparator = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ ...props }, ref) => (
-  <div ref={ref} role="separator" {...props}>
-    <Dot />
-  </div>
-))
-InputOTPSeparator.displayName = "InputOTPSeparator"
-
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/samples/teamspace-nextjs/components/ui/input.tsx b/samples/teamspace-nextjs/components/ui/input.tsx
deleted file mode 100644
index 7f84bdeb0..000000000
--- a/samples/teamspace-nextjs/components/ui/input.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
-  return (
-    <input
-      type={type}
-      className={cn(
-        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  )
-})
-Input.displayName = "Input"
-
-export { Input }
diff --git a/samples/teamspace-nextjs/components/ui/label.tsx b/samples/teamspace-nextjs/components/ui/label.tsx
deleted file mode 100644
index 14be10165..000000000
--- a/samples/teamspace-nextjs/components/ui/label.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }
diff --git a/samples/teamspace-nextjs/components/ui/menubar.tsx b/samples/teamspace-nextjs/components/ui/menubar.tsx
deleted file mode 100644
index 5586fa9b2..000000000
--- a/samples/teamspace-nextjs/components/ui/menubar.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { Check, ChevronRight, Circle } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const MenubarMenu = MenubarPrimitive.Menu
-
-const MenubarGroup = MenubarPrimitive.Group
-
-const MenubarPortal = MenubarPrimitive.Portal
-
-const MenubarSub = MenubarPrimitive.Sub
-
-const MenubarRadioGroup = MenubarPrimitive.RadioGroup
-
-const Menubar = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
-      className
-    )}
-    {...props}
-  />
-))
-Menubar.displayName = MenubarPrimitive.Root.displayName
-
-const MenubarTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
-
-const MenubarSubTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <MenubarPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </MenubarPrimitive.SubTrigger>
-))
-MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
-
-const MenubarSubContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
-
-const MenubarContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(
-  (
-    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
-    ref
-  ) => (
-    <MenubarPrimitive.Portal>
-      <MenubarPrimitive.Content
-        ref={ref}
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-          className
-        )}
-        {...props}
-      />
-    </MenubarPrimitive.Portal>
-  )
-)
-MenubarContent.displayName = MenubarPrimitive.Content.displayName
-
-const MenubarItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-MenubarItem.displayName = MenubarPrimitive.Item.displayName
-
-const MenubarCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <MenubarPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.CheckboxItem>
-))
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
-
-const MenubarRadioItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <MenubarPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.RadioItem>
-))
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
-
-const MenubarLabel = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-MenubarLabel.displayName = MenubarPrimitive.Label.displayName
-
-const MenubarSeparator = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
-
-const MenubarShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-MenubarShortcut.displayname = "MenubarShortcut"
-
-export {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarPortal,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarGroup,
-  MenubarSub,
-  MenubarShortcut,
-}
diff --git a/samples/teamspace-nextjs/components/ui/navigation-menu.tsx b/samples/teamspace-nextjs/components/ui/navigation-menu.tsx
deleted file mode 100644
index 1419f5669..000000000
--- a/samples/teamspace-nextjs/components/ui/navigation-menu.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import * as React from "react"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { cva } from "class-variance-authority"
-import { ChevronDown } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const NavigationMenu = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative z-10 flex max-w-max flex-1 items-center justify-center",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <NavigationMenuViewport />
-  </NavigationMenuPrimitive.Root>
-))
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
-
-const NavigationMenuList = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.List
-    ref={ref}
-    className={cn(
-      "group flex flex-1 list-none items-center justify-center space-x-1",
-      className
-    )}
-    {...props}
-  />
-))
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
-
-const NavigationMenuItem = NavigationMenuPrimitive.Item
-
-const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
-)
-
-const NavigationMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Trigger
-    ref={ref}
-    className={cn(navigationMenuTriggerStyle(), "group", className)}
-    {...props}
-  >
-    {children}{" "}
-    <ChevronDown
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
-    />
-  </NavigationMenuPrimitive.Trigger>
-))
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
-
-const NavigationMenuContent = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Content
-    ref={ref}
-    className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
-      className
-    )}
-    {...props}
-  />
-))
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
-
-const NavigationMenuLink = NavigationMenuPrimitive.Link
-
-const NavigationMenuViewport = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
->(({ className, ...props }, ref) => (
-  <div className={cn("absolute left-0 top-full flex justify-center")}>
-    <NavigationMenuPrimitive.Viewport
-      className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  </div>
-))
-NavigationMenuViewport.displayName =
-  NavigationMenuPrimitive.Viewport.displayName
-
-const NavigationMenuIndicator = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Indicator
-    ref={ref}
-    className={cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-      className
-    )}
-    {...props}
-  >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
-  </NavigationMenuPrimitive.Indicator>
-))
-NavigationMenuIndicator.displayName =
-  NavigationMenuPrimitive.Indicator.displayName
-
-export {
-  navigationMenuTriggerStyle,
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-}
diff --git a/samples/teamspace-nextjs/components/ui/pagination.tsx b/samples/teamspace-nextjs/components/ui/pagination.tsx
deleted file mode 100644
index ea40d196d..000000000
--- a/samples/teamspace-nextjs/components/ui/pagination.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as React from "react"
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { ButtonProps, buttonVariants } from "@/components/ui/button"
-
-const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
-  <nav
-    role="navigation"
-    aria-label="pagination"
-    className={cn("mx-auto flex w-full justify-center", className)}
-    {...props}
-  />
-)
-Pagination.displayName = "Pagination"
-
-const PaginationContent = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    className={cn("flex flex-row items-center gap-1", className)}
-    {...props}
-  />
-))
-PaginationContent.displayName = "PaginationContent"
-
-const PaginationItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ className, ...props }, ref) => (
-  <li ref={ref} className={cn("", className)} {...props} />
-))
-PaginationItem.displayName = "PaginationItem"
-
-type PaginationLinkProps = {
-  isActive?: boolean
-} & Pick<ButtonProps, "size"> &
-  React.ComponentProps<"a">
-
-const PaginationLink = ({
-  className,
-  isActive,
-  size = "icon",
-  ...props
-}: PaginationLinkProps) => (
-  <a
-    aria-current={isActive ? "page" : undefined}
-    className={cn(
-      buttonVariants({
-        variant: isActive ? "outline" : "ghost",
-        size,
-      }),
-      className
-    )}
-    {...props}
-  />
-)
-PaginationLink.displayName = "PaginationLink"
-
-const PaginationPrevious = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to previous page"
-    size="default"
-    className={cn("gap-1 pl-2.5", className)}
-    {...props}
-  >
-    <ChevronLeft className="h-4 w-4" />
-    <span>Previous</span>
-  </PaginationLink>
-)
-PaginationPrevious.displayName = "PaginationPrevious"
-
-const PaginationNext = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to next page"
-    size="default"
-    className={cn("gap-1 pr-2.5", className)}
-    {...props}
-  >
-    <span>Next</span>
-    <ChevronRight className="h-4 w-4" />
-  </PaginationLink>
-)
-PaginationNext.displayName = "PaginationNext"
-
-const PaginationEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
-  <span
-    aria-hidden
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More pages</span>
-  </span>
-)
-PaginationEllipsis.displayName = "PaginationEllipsis"
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-}
diff --git a/samples/teamspace-nextjs/components/ui/popover.tsx b/samples/teamspace-nextjs/components/ui/popover.tsx
deleted file mode 100644
index a0ec48bee..000000000
--- a/samples/teamspace-nextjs/components/ui/popover.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
-
-import { cn } from "@/lib/utils"
-
-const Popover = PopoverPrimitive.Root
-
-const PopoverTrigger = PopoverPrimitive.Trigger
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
-
-export { Popover, PopoverTrigger, PopoverContent }
diff --git a/samples/teamspace-nextjs/components/ui/progress.tsx b/samples/teamspace-nextjs/components/ui/progress.tsx
deleted file mode 100644
index 5c87ea486..000000000
--- a/samples/teamspace-nextjs/components/ui/progress.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
-
-import { cn } from "@/lib/utils"
-
-const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
-      className
-    )}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
-))
-Progress.displayName = ProgressPrimitive.Root.displayName
-
-export { Progress }
diff --git a/samples/teamspace-nextjs/components/ui/radio-group.tsx b/samples/teamspace-nextjs/components/ui/radio-group.tsx
deleted file mode 100644
index e9bde1793..000000000
--- a/samples/teamspace-nextjs/components/ui/radio-group.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { Circle } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
-      {...props}
-      ref={ref}
-    />
-  )
-})
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
-
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-2.5 w-2.5 fill-current text-current" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  )
-})
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
-
-export { RadioGroup, RadioGroupItem }
diff --git a/samples/teamspace-nextjs/components/ui/resizable.tsx b/samples/teamspace-nextjs/components/ui/resizable.tsx
deleted file mode 100644
index f4bc5586b..000000000
--- a/samples/teamspace-nextjs/components/ui/resizable.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-"use client"
-
-import { GripVertical } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
-
-import { cn } from "@/lib/utils"
-
-const ResizablePanelGroup = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
-    className={cn(
-      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className
-    )}
-    {...props}
-  />
-)
-
-const ResizablePanel = ResizablePrimitive.Panel
-
-const ResizableHandle = ({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
-}) => (
-  <ResizablePrimitive.PanelResizeHandle
-    className={cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      className
-    )}
-    {...props}
-  >
-    {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-        <GripVertical className="h-2.5 w-2.5" />
-      </div>
-    )}
-  </ResizablePrimitive.PanelResizeHandle>
-)
-
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/samples/teamspace-nextjs/components/ui/scroll-area.tsx b/samples/teamspace-nextjs/components/ui/scroll-area.tsx
deleted file mode 100644
index 0b4a48d87..000000000
--- a/samples/teamspace-nextjs/components/ui/scroll-area.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
-
-import { cn } from "@/lib/utils"
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
-
-export { ScrollArea, ScrollBar }
diff --git a/samples/teamspace-nextjs/components/ui/select.tsx b/samples/teamspace-nextjs/components/ui/select.tsx
deleted file mode 100644
index cbe5a36b6..000000000
--- a/samples/teamspace-nextjs/components/ui/select.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Select = SelectPrimitive.Root
-
-const SelectGroup = SelectPrimitive.Group
-
-const SelectValue = SelectPrimitive.Value
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
-    {...props}
-  />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-}
diff --git a/samples/teamspace-nextjs/components/ui/separator.tsx b/samples/teamspace-nextjs/components/ui/separator.tsx
deleted file mode 100644
index 12d81c4a8..000000000
--- a/samples/teamspace-nextjs/components/ui/separator.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-
-import { cn } from "@/lib/utils"
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
-
-export { Separator }
diff --git a/samples/teamspace-nextjs/components/ui/sheet.tsx b/samples/teamspace-nextjs/components/ui/sheet.tsx
deleted file mode 100644
index a37f17ba0..000000000
--- a/samples/teamspace-nextjs/components/ui/sheet.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Sheet = SheetPrimitive.Root
-
-const SheetTrigger = SheetPrimitive.Trigger
-
-const SheetClose = SheetPrimitive.Close
-
-const SheetPortal = SheetPrimitive.Portal
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
-
-const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  }
-)
-
-interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
-
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
-      {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-    </SheetPrimitive.Content>
-  </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
-
-const SheetHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-SheetHeader.displayName = "SheetHeader"
-
-const SheetFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-SheetFooter.displayName = "SheetFooter"
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold text-foreground", className)}
-    {...props}
-  />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
-
-export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-}
diff --git a/samples/teamspace-nextjs/components/ui/sidebar.tsx b/samples/teamspace-nextjs/components/ui/sidebar.tsx
deleted file mode 100644
index eeb2d7aeb..000000000
--- a/samples/teamspace-nextjs/components/ui/sidebar.tsx
+++ /dev/null
@@ -1,763 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { VariantProps, cva } from "class-variance-authority"
-import { PanelLeft } from "lucide-react"
-
-import { useIsMobile } from "@/hooks/use-mobile"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Separator } from "@/components/ui/separator"
-import { Sheet, SheetContent } from "@/components/ui/sheet"
-import { Skeleton } from "@/components/ui/skeleton"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-
-const SIDEBAR_COOKIE_NAME = "sidebar:state"
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
-const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
-
-type SidebarContext = {
-  state: "expanded" | "collapsed"
-  open: boolean
-  setOpen: (open: boolean) => void
-  openMobile: boolean
-  setOpenMobile: (open: boolean) => void
-  isMobile: boolean
-  toggleSidebar: () => void
-}
-
-const SidebarContext = React.createContext<SidebarContext | null>(null)
-
-function useSidebar() {
-  const context = React.useContext(SidebarContext)
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.")
-  }
-
-  return context
-}
-
-const SidebarProvider = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    defaultOpen?: boolean
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
-  }
->(
-  (
-    {
-      defaultOpen = true,
-      open: openProp,
-      onOpenChange: setOpenProp,
-      className,
-      style,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const isMobile = useIsMobile()
-    const [openMobile, setOpenMobile] = React.useState(false)
-
-    // This is the internal state of the sidebar.
-    // We use openProp and setOpenProp for control from outside the component.
-    const [_open, _setOpen] = React.useState(defaultOpen)
-    const open = openProp ?? _open
-    const setOpen = React.useCallback(
-      (value: boolean | ((value: boolean) => boolean)) => {
-        const openState = typeof value === "function" ? value(open) : value
-        if (setOpenProp) {
-          setOpenProp(openState)
-        } else {
-          _setOpen(openState)
-        }
-
-        // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
-      },
-      [setOpenProp, open]
-    )
-
-    // Helper to toggle the sidebar.
-    const toggleSidebar = React.useCallback(() => {
-      return isMobile
-        ? setOpenMobile((open) => !open)
-        : setOpen((open) => !open)
-    }, [isMobile, setOpen, setOpenMobile])
-
-    // Adds a keyboard shortcut to toggle the sidebar.
-    React.useEffect(() => {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (
-          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-          (event.metaKey || event.ctrlKey)
-        ) {
-          event.preventDefault()
-          toggleSidebar()
-        }
-      }
-
-      window.addEventListener("keydown", handleKeyDown)
-      return () => window.removeEventListener("keydown", handleKeyDown)
-    }, [toggleSidebar])
-
-    // We add a state so that we can do data-state="expanded" or "collapsed".
-    // This makes it easier to style the sidebar with Tailwind classes.
-    const state = open ? "expanded" : "collapsed"
-
-    const contextValue = React.useMemo<SidebarContext>(
-      () => ({
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar,
-      }),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-    )
-
-    return (
-      <SidebarContext.Provider value={contextValue}>
-        <TooltipProvider delayDuration={0}>
-          <div
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH,
-                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-                ...style,
-              } as React.CSSProperties
-            }
-            className={cn(
-              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
-              className
-            )}
-            ref={ref}
-            {...props}
-          >
-            {children}
-          </div>
-        </TooltipProvider>
-      </SidebarContext.Provider>
-    )
-  }
-)
-SidebarProvider.displayName = "SidebarProvider"
-
-const Sidebar = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    side?: "left" | "right"
-    variant?: "sidebar" | "floating" | "inset"
-    collapsible?: "offcanvas" | "icon" | "none"
-  }
->(
-  (
-    {
-      side = "left",
-      variant = "sidebar",
-      collapsible = "offcanvas",
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
-
-    if (collapsible === "none") {
-      return (
-        <div
-          className={cn(
-            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
-            className
-          )}
-          ref={ref}
-          {...props}
-        >
-          {children}
-        </div>
-      )
-    }
-
-    if (isMobile) {
-      return (
-        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-          <SheetContent
-            data-sidebar="sidebar"
-            data-mobile="true"
-            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-              } as React.CSSProperties
-            }
-            side={side}
-          >
-            <div className="flex h-full w-full flex-col">{children}</div>
-          </SheetContent>
-        </Sheet>
-      )
-    }
-
-    return (
-      <div
-        ref={ref}
-        className="group peer hidden md:block text-sidebar-foreground"
-        data-state={state}
-        data-collapsible={state === "collapsed" ? collapsible : ""}
-        data-variant={variant}
-        data-side={side}
-      >
-        {/* This is what handles the sidebar gap on desktop */}
-        <div
-          className={cn(
-            "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
-            "group-data-[collapsible=offcanvas]:w-0",
-            "group-data-[side=right]:rotate-180",
-            variant === "floating" || variant === "inset"
-              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
-          )}
-        />
-        <div
-          className={cn(
-            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
-            side === "left"
-              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-            // Adjust the padding for floating and inset variants.
-            variant === "floating" || variant === "inset"
-              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
-            className
-          )}
-          {...props}
-        >
-          <div
-            data-sidebar="sidebar"
-            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
-          >
-            {children}
-          </div>
-        </div>
-      </div>
-    )
-  }
-)
-Sidebar.displayName = "Sidebar"
-
-const SidebarTrigger = React.forwardRef<
-  React.ElementRef<typeof Button>,
-  React.ComponentProps<typeof Button>
->(({ className, onClick, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar()
-
-  return (
-    <Button
-      ref={ref}
-      data-sidebar="trigger"
-      variant="ghost"
-      size="icon"
-      className={cn("h-7 w-7", className)}
-      onClick={(event) => {
-        onClick?.(event)
-        toggleSidebar()
-      }}
-      {...props}
-    >
-      <PanelLeft />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  )
-})
-SidebarTrigger.displayName = "SidebarTrigger"
-
-const SidebarRail = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button">
->(({ className, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar()
-
-  return (
-    <button
-      ref={ref}
-      data-sidebar="rail"
-      aria-label="Toggle Sidebar"
-      tabIndex={-1}
-      onClick={toggleSidebar}
-      title="Toggle Sidebar"
-      className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarRail.displayName = "SidebarRail"
-
-const SidebarInset = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"main">
->(({ className, ...props }, ref) => {
-  return (
-    <main
-      ref={ref}
-      className={cn(
-        "relative flex min-h-svh flex-1 flex-col bg-background",
-        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarInset.displayName = "SidebarInset"
-
-const SidebarInput = React.forwardRef<
-  React.ElementRef<typeof Input>,
-  React.ComponentProps<typeof Input>
->(({ className, ...props }, ref) => {
-  return (
-    <Input
-      ref={ref}
-      data-sidebar="input"
-      className={cn(
-        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarInput.displayName = "SidebarInput"
-
-const SidebarHeader = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  )
-})
-SidebarHeader.displayName = "SidebarHeader"
-
-const SidebarFooter = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="footer"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  )
-})
-SidebarFooter.displayName = "SidebarFooter"
-
-const SidebarSeparator = React.forwardRef<
-  React.ElementRef<typeof Separator>,
-  React.ComponentProps<typeof Separator>
->(({ className, ...props }, ref) => {
-  return (
-    <Separator
-      ref={ref}
-      data-sidebar="separator"
-      className={cn("mx-2 w-auto bg-sidebar-border", className)}
-      {...props}
-    />
-  )
-})
-SidebarSeparator.displayName = "SidebarSeparator"
-
-const SidebarContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="content"
-      className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarContent.displayName = "SidebarContent"
-
-const SidebarGroup = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
-      {...props}
-    />
-  )
-})
-SidebarGroup.displayName = "SidebarGroup"
-
-const SidebarGroupLabel = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & { asChild?: boolean }
->(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "div"
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="group-label"
-      className={cn(
-        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarGroupLabel.displayName = "SidebarGroupLabel"
-
-const SidebarGroupAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & { asChild?: boolean }
->(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="group-action"
-      className={cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarGroupAction.displayName = "SidebarGroupAction"
-
-const SidebarGroupContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-sidebar="group-content"
-    className={cn("w-full text-sm", className)}
-    {...props}
-  />
-))
-SidebarGroupContent.displayName = "SidebarGroupContent"
-
-const SidebarMenu = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    data-sidebar="menu"
-    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
-    {...props}
-  />
-))
-SidebarMenu.displayName = "SidebarMenu"
-
-const SidebarMenuItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    data-sidebar="menu-item"
-    className={cn("group/menu-item relative", className)}
-    {...props}
-  />
-))
-SidebarMenuItem.displayName = "SidebarMenuItem"
-
-const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
-      },
-      size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-const SidebarMenuButton = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & {
-    asChild?: boolean
-    isActive?: boolean
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>
-  } & VariantProps<typeof sidebarMenuButtonVariants>
->(
-  (
-    {
-      asChild = false,
-      isActive = false,
-      variant = "default",
-      size = "default",
-      tooltip,
-      className,
-      ...props
-    },
-    ref
-  ) => {
-    const Comp = asChild ? Slot : "button"
-    const { isMobile, state } = useSidebar()
-
-    const button = (
-      <Comp
-        ref={ref}
-        data-sidebar="menu-button"
-        data-size={size}
-        data-active={isActive}
-        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-        {...props}
-      />
-    )
-
-    if (!tooltip) {
-      return button
-    }
-
-    if (typeof tooltip === "string") {
-      tooltip = {
-        children: tooltip,
-      }
-    }
-
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>{button}</TooltipTrigger>
-        <TooltipContent
-          side="right"
-          align="center"
-          hidden={state !== "collapsed" || isMobile}
-          {...tooltip}
-        />
-      </Tooltip>
-    )
-  }
-)
-SidebarMenuButton.displayName = "SidebarMenuButton"
-
-const SidebarMenuAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & {
-    asChild?: boolean
-    showOnHover?: boolean
-  }
->(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="menu-action"
-      className={cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        showOnHover &&
-          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarMenuAction.displayName = "SidebarMenuAction"
-
-const SidebarMenuBadge = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-sidebar="menu-badge"
-    className={cn(
-      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
-      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-      "peer-data-[size=sm]/menu-button:top-1",
-      "peer-data-[size=default]/menu-button:top-1.5",
-      "peer-data-[size=lg]/menu-button:top-2.5",
-      "group-data-[collapsible=icon]:hidden",
-      className
-    )}
-    {...props}
-  />
-))
-SidebarMenuBadge.displayName = "SidebarMenuBadge"
-
-const SidebarMenuSkeleton = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    showIcon?: boolean
-  }
->(({ className, showIcon = false, ...props }, ref) => {
-  // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`
-  }, [])
-
-  return (
-    <div
-      ref={ref}
-      data-sidebar="menu-skeleton"
-      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
-      {...props}
-    >
-      {showIcon && (
-        <Skeleton
-          className="size-4 rounded-md"
-          data-sidebar="menu-skeleton-icon"
-        />
-      )}
-      <Skeleton
-        className="h-4 flex-1 max-w-[--skeleton-width]"
-        data-sidebar="menu-skeleton-text"
-        style={
-          {
-            "--skeleton-width": width,
-          } as React.CSSProperties
-        }
-      />
-    </div>
-  )
-})
-SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
-
-const SidebarMenuSub = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    data-sidebar="menu-sub"
-    className={cn(
-      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
-      "group-data-[collapsible=icon]:hidden",
-      className
-    )}
-    {...props}
-  />
-))
-SidebarMenuSub.displayName = "SidebarMenuSub"
-
-const SidebarMenuSubItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ ...props }, ref) => <li ref={ref} {...props} />)
-SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
-
-const SidebarMenuSubButton = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentProps<"a"> & {
-    asChild?: boolean
-    size?: "sm" | "md"
-    isActive?: boolean
-  }
->(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="menu-sub-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
-
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-}
diff --git a/samples/teamspace-nextjs/components/ui/skeleton.tsx b/samples/teamspace-nextjs/components/ui/skeleton.tsx
deleted file mode 100644
index 01b8b6d4f..000000000
--- a/samples/teamspace-nextjs/components/ui/skeleton.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { cn } from "@/lib/utils"
-
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("animate-pulse rounded-md bg-muted", className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }
diff --git a/samples/teamspace-nextjs/components/ui/slider.tsx b/samples/teamspace-nextjs/components/ui/slider.tsx
deleted file mode 100644
index c31c2b3bc..000000000
--- a/samples/teamspace-nextjs/components/ui/slider.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SliderPrimitive from "@radix-ui/react-slider"
-
-import { cn } from "@/lib/utils"
-
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex w-full touch-none select-none items-center",
-      className
-    )}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
-  </SliderPrimitive.Root>
-))
-Slider.displayName = SliderPrimitive.Root.displayName
-
-export { Slider }
diff --git a/samples/teamspace-nextjs/components/ui/sonner.tsx b/samples/teamspace-nextjs/components/ui/sonner.tsx
deleted file mode 100644
index 452f4d9f0..000000000
--- a/samples/teamspace-nextjs/components/ui/sonner.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client"
-
-import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
-
-type ToasterProps = React.ComponentProps<typeof Sonner>
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      {...props}
-    />
-  )
-}
-
-export { Toaster }
diff --git a/samples/teamspace-nextjs/components/ui/switch.tsx b/samples/teamspace-nextjs/components/ui/switch.tsx
deleted file mode 100644
index bc69cf2db..000000000
--- a/samples/teamspace-nextjs/components/ui/switch.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
-
-import { cn } from "@/lib/utils"
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
-      )}
-    />
-  </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
-
-export { Switch }
diff --git a/samples/teamspace-nextjs/components/ui/table.tsx b/samples/teamspace-nextjs/components/ui/table.tsx
deleted file mode 100644
index 7f3502f8b..000000000
--- a/samples/teamspace-nextjs/components/ui/table.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
-))
-Table.displayName = "Table"
-
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
-
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-))
-TableBody.displayName = "TableBody"
-
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
-    )}
-    {...props}
-  />
-))
-TableFooter.displayName = "TableFooter"
-
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
-TableRow.displayName = "TableRow"
-
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className
-    )}
-    {...props}
-  />
-))
-TableHead.displayName = "TableHead"
-
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
-    {...props}
-  />
-))
-TableCell.displayName = "TableCell"
-
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-TableCaption.displayName = "TableCaption"
-
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
diff --git a/samples/teamspace-nextjs/components/ui/tabs.tsx b/samples/teamspace-nextjs/components/ui/tabs.tsx
deleted file mode 100644
index 26eb10912..000000000
--- a/samples/teamspace-nextjs/components/ui/tabs.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
-
-import { cn } from "@/lib/utils"
-
-const Tabs = TabsPrimitive.Root
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className
-    )}
-    {...props}
-  />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
-    )}
-    {...props}
-  />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
-
-export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/samples/teamspace-nextjs/components/ui/textarea.tsx b/samples/teamspace-nextjs/components/ui/textarea.tsx
deleted file mode 100644
index f0c9320d2..000000000
--- a/samples/teamspace-nextjs/components/ui/textarea.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  )
-})
-Textarea.displayName = "Textarea"
-
-export { Textarea }
diff --git a/samples/teamspace-nextjs/components/ui/toast.tsx b/samples/teamspace-nextjs/components/ui/toast.tsx
deleted file mode 100644
index 521b94b07..000000000
--- a/samples/teamspace-nextjs/components/ui/toast.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const ToastProvider = ToastPrimitives.Provider
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
-    )}
-    {...props}
-  />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
-
-const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className
-    )}
-    {...props}
-  />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold", className)}
-    {...props}
-  />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-  />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-}
diff --git a/samples/teamspace-nextjs/components/ui/toaster.tsx b/samples/teamspace-nextjs/components/ui/toaster.tsx
deleted file mode 100644
index 171beb46d..000000000
--- a/samples/teamspace-nextjs/components/ui/toaster.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-"use client"
-
-import { useToast } from "@/hooks/use-toast"
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "@/components/ui/toast"
-
-export function Toaster() {
-  const { toasts } = useToast()
-
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        )
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  )
-}
diff --git a/samples/teamspace-nextjs/components/ui/toggle-group.tsx b/samples/teamspace-nextjs/components/ui/toggle-group.tsx
deleted file mode 100644
index 1c876bbee..000000000
--- a/samples/teamspace-nextjs/components/ui/toggle-group.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
-import { type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-import { toggleVariants } from "@/components/ui/toggle"
-
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants>
->({
-  size: "default",
-  variant: "default",
-})
-
-const ToggleGroup = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, variant, size, children, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root
-    ref={ref}
-    className={cn("flex items-center justify-center gap-1", className)}
-    {...props}
-  >
-    <ToggleGroupContext.Provider value={{ variant, size }}>
-      {children}
-    </ToggleGroupContext.Provider>
-  </ToggleGroupPrimitive.Root>
-))
-
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
-
-const ToggleGroupItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-    VariantProps<typeof toggleVariants>
->(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext)
-
-  return (
-    <ToggleGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  )
-})
-
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
-
-export { ToggleGroup, ToggleGroupItem }
diff --git a/samples/teamspace-nextjs/components/ui/toggle.tsx b/samples/teamspace-nextjs/components/ui/toggle.tsx
deleted file mode 100644
index c19bea373..000000000
--- a/samples/teamspace-nextjs/components/ui/toggle.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
-      },
-      size: {
-        default: "h-10 px-3 min-w-10",
-        sm: "h-9 px-2.5 min-w-9",
-        lg: "h-11 px-5 min-w-11",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root
-    ref={ref}
-    className={cn(toggleVariants({ variant, size, className }))}
-    {...props}
-  />
-))
-
-Toggle.displayName = TogglePrimitive.Root.displayName
-
-export { Toggle, toggleVariants }
diff --git a/samples/teamspace-nextjs/components/ui/tooltip.tsx b/samples/teamspace-nextjs/components/ui/tooltip.tsx
deleted file mode 100644
index 30fc44d90..000000000
--- a/samples/teamspace-nextjs/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-
-import { cn } from "@/lib/utils"
-
-const TooltipProvider = TooltipPrimitive.Provider
-
-const Tooltip = TooltipPrimitive.Root
-
-const TooltipTrigger = TooltipPrimitive.Trigger
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/samples/teamspace-nextjs/components/ui/use-mobile.tsx b/samples/teamspace-nextjs/components/ui/use-mobile.tsx
deleted file mode 100644
index 2b0fe1dfe..000000000
--- a/samples/teamspace-nextjs/components/ui/use-mobile.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from "react"
-
-const MOBILE_BREAKPOINT = 768
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
-
-  return !!isMobile
-}
diff --git a/samples/teamspace-nextjs/components/ui/use-toast.ts b/samples/teamspace-nextjs/components/ui/use-toast.ts
deleted file mode 100644
index 02e111d81..000000000
--- a/samples/teamspace-nextjs/components/ui/use-toast.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-"use client"
-
-// Inspired by react-hot-toast library
-import * as React from "react"
-
-import type {
-  ToastActionElement,
-  ToastProps,
-} from "@/components/ui/toast"
-
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
-
-type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
-
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const
-
-let count = 0
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
-}
-
-type ActionType = typeof actionTypes
-
-type Action =
-  | {
-      type: ActionType["ADD_TOAST"]
-      toast: ToasterToast
-    }
-  | {
-      type: ActionType["UPDATE_TOAST"]
-      toast: Partial<ToasterToast>
-    }
-  | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-  | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-
-interface State {
-  toasts: ToasterToast[]
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId: toastId,
-    })
-  }, TOAST_REMOVE_DELAY)
-
-  toastTimeouts.set(toastId, timeout)
-}
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
-
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
-        ),
-      }
-
-    case "DISMISS_TOAST": {
-      const { toastId } = action
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId)
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t
-        ),
-      }
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        }
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
-  }
-}
-
-const listeners: Array<(state: State) => void> = []
-
-let memoryState: State = { toasts: [] }
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
-  listeners.forEach((listener) => {
-    listener(memoryState)
-  })
-}
-
-type Toast = Omit<ToasterToast, "id">
-
-function toast({ ...props }: Toast) {
-  const id = genId()
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
-
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss()
-      },
-    },
-  })
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  }
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
-
-  React.useEffect(() => {
-    listeners.push(setState)
-    return () => {
-      const index = listeners.indexOf(setState)
-      if (index > -1) {
-        listeners.splice(index, 1)
-      }
-    }
-  }, [state])
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
-}
-
-export { useToast, toast }
diff --git a/samples/teamspace-nextjs/env.local.example b/samples/teamspace-nextjs/env.local.example
deleted file mode 100644
index 8b5f755d9..000000000
--- a/samples/teamspace-nextjs/env.local.example
+++ /dev/null
@@ -1,6 +0,0 @@
-# This file is an example of the .env.local file.
-# DO NOT modify the sample values.
-
-NEXT_PUBLIC_ASGARDEO_BASE_URL='https://api.asgardeo.io/t/<ORGANIZATION>'
-NEXT_PUBLIC_ASGARDEO_CLIENT_ID='<CLIENT_ID>'
-ASGARDEO_CLIENT_SECRET='<CLIENT_SECRET>'
diff --git a/samples/teamspace-nextjs/hooks/use-mobile.tsx b/samples/teamspace-nextjs/hooks/use-mobile.tsx
deleted file mode 100644
index 2b0fe1dfe..000000000
--- a/samples/teamspace-nextjs/hooks/use-mobile.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from "react"
-
-const MOBILE_BREAKPOINT = 768
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
-
-  return !!isMobile
-}
diff --git a/samples/teamspace-nextjs/hooks/use-toast.ts b/samples/teamspace-nextjs/hooks/use-toast.ts
deleted file mode 100644
index 02e111d81..000000000
--- a/samples/teamspace-nextjs/hooks/use-toast.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-"use client"
-
-// Inspired by react-hot-toast library
-import * as React from "react"
-
-import type {
-  ToastActionElement,
-  ToastProps,
-} from "@/components/ui/toast"
-
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
-
-type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
-
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const
-
-let count = 0
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
-}
-
-type ActionType = typeof actionTypes
-
-type Action =
-  | {
-      type: ActionType["ADD_TOAST"]
-      toast: ToasterToast
-    }
-  | {
-      type: ActionType["UPDATE_TOAST"]
-      toast: Partial<ToasterToast>
-    }
-  | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-  | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-
-interface State {
-  toasts: ToasterToast[]
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId: toastId,
-    })
-  }, TOAST_REMOVE_DELAY)
-
-  toastTimeouts.set(toastId, timeout)
-}
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
-
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
-        ),
-      }
-
-    case "DISMISS_TOAST": {
-      const { toastId } = action
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId)
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t
-        ),
-      }
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        }
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
-  }
-}
-
-const listeners: Array<(state: State) => void> = []
-
-let memoryState: State = { toasts: [] }
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
-  listeners.forEach((listener) => {
-    listener(memoryState)
-  })
-}
-
-type Toast = Omit<ToasterToast, "id">
-
-function toast({ ...props }: Toast) {
-  const id = genId()
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
-
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss()
-      },
-    },
-  })
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  }
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
-
-  React.useEffect(() => {
-    listeners.push(setState)
-    return () => {
-      const index = listeners.indexOf(setState)
-      if (index > -1) {
-        listeners.splice(index, 1)
-      }
-    }
-  }, [state])
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
-}
-
-export { useToast, toast }
diff --git a/samples/teamspace-nextjs/lib/utils.ts b/samples/teamspace-nextjs/lib/utils.ts
index d084ccade..bd0c391dd 100644
--- a/samples/teamspace-nextjs/lib/utils.ts
+++ b/samples/teamspace-nextjs/lib/utils.ts
@@ -1,4 +1,4 @@
-import { type ClassValue, clsx } from "clsx"
+import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {
diff --git a/samples/teamspace-nextjs/middleware.ts b/samples/teamspace-nextjs/middleware.ts
deleted file mode 100644
index 3baabc0ad..000000000
--- a/samples/teamspace-nextjs/middleware.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import {AsgardeoNext} from '@asgardeo/nextjs';
-import {NextRequest} from 'next/server';
-
-const asgardeo = new AsgardeoNext();
-
-asgardeo.initialize({
-  baseUrl: process.env.NEXT_PUBLIC_ASGARDEO_BASE_URL,
-  clientId: process.env.NEXT_PUBLIC_ASGARDEO_CLIENT_ID,
-  clientSecret: process.env.NEXT_PUBLIC_ASGARDEO_CLIENT_SECRET,
-  afterSignInUrl: 'http://localhost:3000',
-  scopes: 'openid profile email',
-});
-
-export async function middleware(request: NextRequest) {
-  return await asgardeo.middleware(request);
-}
-
-export const config = {
-  matcher: [
-    // Skip Next.js internals and all static files, unless found in search params
-    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
-    // Always run for API routes
-    '/(api|trpc)(.*)',
-  ],
-};
diff --git a/samples/teamspace-nextjs/next.config.js b/samples/teamspace-nextjs/next.config.js
deleted file mode 100644
index d4aab3dd5..000000000
--- a/samples/teamspace-nextjs/next.config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const nextConfig = {
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
-  typescript: {
-    ignoreBuildErrors: true,
-  },
-  images: {
-    unoptimized: true,
-  },
-}
-
-module.exports = nextConfig
diff --git a/samples/teamspace-nextjs/next.config.ts b/samples/teamspace-nextjs/next.config.ts
new file mode 100644
index 000000000..e9ffa3083
--- /dev/null
+++ b/samples/teamspace-nextjs/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
diff --git a/samples/teamspace-nextjs/package.json b/samples/teamspace-nextjs/package.json
index e8319267b..934128c52 100644
--- a/samples/teamspace-nextjs/package.json
+++ b/samples/teamspace-nextjs/package.json
@@ -1,39 +1,32 @@
 {
-  "name": "teamspace",
+  "name": "@asgardeo/teamspace-nextjs",
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
-    "@asgardeo/nextjs": "workspace:^",
-    "@radix-ui/react-avatar": "^1.0.4",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-slot": "^1.0.2",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "lucide-react": "^0.294.0",
-    "next": "14.0.4",
-    "react": "^18",
-    "react-dom": "^18",
-    "tailwind-merge": "^2.0.0",
-    "tailwindcss-animate": "^1.0.7"
+    "next": "15.3.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^3.3.0"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.10",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "autoprefixer": "^10.0.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.4",
-    "postcss": "^8.5.3",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.3.3",
     "tailwindcss": "^4",
+    "tw-animate-css": "^1.3.4",
     "typescript": "^5"
   }
 }
diff --git a/samples/teamspace-nextjs/pages.tsx b/samples/teamspace-nextjs/pages.tsx
deleted file mode 100644
index a609578b4..000000000
--- a/samples/teamspace-nextjs/pages.tsx
+++ /dev/null
@@ -1,458 +0,0 @@
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import {
-  Users,
-  MessageSquare,
-  Calendar,
-  FileText,
-  Shield,
-  Zap,
-  CheckCircle,
-  Star,
-  ArrowRight,
-  Play,
-  Github,
-  Twitter,
-  Linkedin,
-} from "lucide-react"
-import Link from "next/link"
-import Image from "next/image"
-import { Header } from "@/components/header"
-
-const features = [
-  {
-    icon: MessageSquare,
-    title: "Real-time Communication",
-    description: "Stay connected with instant messaging, video calls, and threaded discussions.",
-    color: "text-blue-600",
-    bgColor: "bg-blue-50",
-  },
-  {
-    icon: Calendar,
-    title: "Project Management",
-    description: "Plan, track, and deliver projects on time with intuitive task management.",
-    color: "text-green-600",
-    bgColor: "bg-green-50",
-  },
-  {
-    icon: FileText,
-    title: "Document Collaboration",
-    description: "Create, edit, and share documents in real-time with version control.",
-    color: "text-purple-600",
-    bgColor: "bg-purple-50",
-  },
-  {
-    icon: Shield,
-    title: "Enterprise Security",
-    description: "Keep your data safe with enterprise-grade security and compliance.",
-    color: "text-red-600",
-    bgColor: "bg-red-50",
-  },
-  {
-    icon: Zap,
-    title: "Workflow Automation",
-    description: "Automate repetitive tasks and streamline processes with custom workflows.",
-    color: "text-yellow-600",
-    bgColor: "bg-yellow-50",
-  },
-  {
-    icon: Users,
-    title: "Team Analytics",
-    description: "Gain insights into team performance and project progress with detailed analytics.",
-    color: "text-indigo-600",
-    bgColor: "bg-indigo-50",
-  },
-]
-
-const testimonials = [
-  {
-    quote: "Teamspace transformed how our remote team collaborates. We're 40% more productive since switching.",
-    author: "Sarah Chen",
-    role: "VP of Engineering",
-    company: "TechCorp",
-    avatar: "/placeholder.svg?height=48&width=48",
-  },
-  {
-    quote: "The best investment we've made for our team. The ROI was clear within the first month.",
-    author: "Michael Rodriguez",
-    role: "Project Manager",
-    company: "InnovateLab",
-    avatar: "/placeholder.svg?height=48&width=48",
-  },
-  {
-    quote: "Finally, a platform that brings everything together. Our team loves the intuitive interface.",
-    author: "Emily Johnson",
-    role: "Creative Director",
-    company: "DesignStudio",
-    avatar: "/placeholder.svg?height=48&width=48",
-  },
-]
-
-const pricingPlans = [
-  {
-    name: "Starter",
-    price: "Free",
-    description: "Perfect for small teams getting started",
-    features: ["Up to 5 team members", "Basic project management", "5GB storage", "Community support"],
-    cta: "Get Started",
-    popular: false,
-  },
-  {
-    name: "Professional",
-    price: "$12",
-    period: "/user/month",
-    description: "For growing teams that need more power",
-    features: [
-      "Unlimited team members",
-      "Advanced project management",
-      "100GB storage",
-      "Priority support",
-      "Advanced integrations",
-      "Team analytics",
-    ],
-    cta: "Start Free Trial",
-    popular: true,
-  },
-  {
-    name: "Enterprise",
-    price: "Custom",
-    description: "For large organizations with custom needs",
-    features: [
-      "Everything in Professional",
-      "SSO & advanced security",
-      "Unlimited storage",
-      "Dedicated support",
-      "Custom integrations",
-      "On-premise deployment",
-    ],
-    cta: "Contact Sales",
-    popular: false,
-  },
-]
-
-export default function LandingPage() {
-  return (
-    <div className="min-h-screen bg-background">
-      <Header />
-
-      {/* Hero Section */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-background to-purple-50 py-20 lg:py-32">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="grid lg:grid-cols-2 gap-12 items-center">
-            <div className="space-y-8">
-              <Badge variant="secondary" className="w-fit">
-                🚀 New: AI-powered insights now available
-              </Badge>
-
-              <h1 className="text-4xl lg:text-6xl font-bold text-foreground leading-tight">
-                Where teams
-                <span className="text-primary"> collaborate</span> and ideas come to life
-              </h1>
-
-              <p className="text-xl text-muted-foreground leading-relaxed">
-                Streamline your team's workflow with our all-in-one collaboration platform. Chat, plan, share, and
-                deliver exceptional results together.
-              </p>
-
-              <div className="flex flex-col sm:flex-row gap-4">
-                <Button asChild size="lg" className="h-12 px-8">
-                  <Link href="/auth/signup">
-                    Start Free Trial
-                    <ArrowRight className="ml-2 h-5 w-5" />
-                  </Link>
-                </Button>
-                <Button variant="outline" size="lg" className="h-12 px-8">
-                  <Play className="mr-2 h-5 w-5" />
-                  Watch Demo
-                </Button>
-              </div>
-
-              <div className="flex items-center space-x-6 text-sm text-muted-foreground">
-                <div className="flex items-center">
-                  <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
-                  Free 14-day trial
-                </div>
-                <div className="flex items-center">
-                  <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
-                  No credit card required
-                </div>
-              </div>
-            </div>
-
-            <div className="relative">
-              <Image
-                src="/placeholder.svg?height=500&width=600"
-                alt="Teamspace Dashboard"
-                width={600}
-                height={500}
-                className="w-full rounded-2xl shadow-2xl"
-              />
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Features Section */}
-      <section id="features" className="py-20">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <Badge variant="outline" className="mb-4">
-              Features
-            </Badge>
-            <h2 className="text-3xl lg:text-5xl font-bold text-foreground mb-4">
-              Everything your team needs to succeed
-            </h2>
-            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
-              From real-time collaboration to project management, Teamspace provides all the tools your team needs.
-            </p>
-          </div>
-
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {features.map((feature, index) => {
-              const Icon = feature.icon
-              return (
-                <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-shadow">
-                  <CardHeader>
-                    <div className={`w-12 h-12 ${feature.bgColor} rounded-lg flex items-center justify-center mb-4`}>
-                      <Icon className={`h-6 w-6 ${feature.color}`} />
-                    </div>
-                    <CardTitle className="text-xl">{feature.title}</CardTitle>
-                    <CardDescription className="text-base leading-relaxed">{feature.description}</CardDescription>
-                  </CardHeader>
-                </Card>
-              )
-            })}
-          </div>
-        </div>
-      </section>
-
-      {/* Testimonials Section */}
-      <section id="testimonials" className="bg-muted/50 py-20">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <Badge variant="outline" className="mb-4">
-              Testimonials
-            </Badge>
-            <h2 className="text-3xl lg:text-5xl font-bold text-foreground mb-4">What our customers say</h2>
-          </div>
-
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {testimonials.map((testimonial, index) => (
-              <Card key={index} className="border-0 shadow-lg">
-                <CardContent className="pt-6">
-                  <div className="flex mb-4">
-                    {[...Array(5)].map((_, i) => (
-                      <Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
-                    ))}
-                  </div>
-                  <blockquote className="text-foreground mb-6 text-lg leading-relaxed">
-                    "{testimonial.quote}"
-                  </blockquote>
-                  <div className="flex items-center">
-                    <Image
-                      src={testimonial.avatar || "/placeholder.svg"}
-                      alt={testimonial.author}
-                      width={48}
-                      height={48}
-                      className="w-12 h-12 rounded-full mr-4"
-                    />
-                    <div>
-                      <div className="font-semibold text-foreground">{testimonial.author}</div>
-                      <div className="text-muted-foreground text-sm">
-                        {testimonial.role}, {testimonial.company}
-                      </div>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Pricing Section */}
-      <section id="pricing" className="py-20">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <Badge variant="outline" className="mb-4">
-              Pricing
-            </Badge>
-            <h2 className="text-3xl lg:text-5xl font-bold text-foreground mb-4">Simple, transparent pricing</h2>
-            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
-              Choose the plan that's right for your team. Start free and scale as you grow.
-            </p>
-          </div>
-
-          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
-            {pricingPlans.map((plan, index) => (
-              <Card key={index} className={`relative ${plan.popular ? "border-primary shadow-lg scale-105" : ""}`}>
-                {plan.popular && (
-                  <Badge className="absolute -top-3 left-1/2 transform -translate-x-1/2">Most Popular</Badge>
-                )}
-
-                <CardHeader className="text-center">
-                  <CardTitle className="text-xl">{plan.name}</CardTitle>
-                  <CardDescription>{plan.description}</CardDescription>
-                  <div className="mt-4">
-                    <span className="text-4xl font-bold text-foreground">{plan.price}</span>
-                    {plan.period && <span className="text-muted-foreground">{plan.period}</span>}
-                  </div>
-                </CardHeader>
-
-                <CardContent>
-                  <ul className="space-y-3 mb-8">
-                    {plan.features.map((feature, featureIndex) => (
-                      <li key={featureIndex} className="flex items-center">
-                        <CheckCircle className="h-5 w-5 text-green-500 mr-3 flex-shrink-0" />
-                        <span className="text-muted-foreground">{feature}</span>
-                      </li>
-                    ))}
-                  </ul>
-
-                  <Button asChild className="w-full" variant={plan.popular ? "default" : "outline"}>
-                    <Link href="/auth/signup">{plan.cta}</Link>
-                  </Button>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* CTA Section */}
-      <section className="bg-primary py-20">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <h2 className="text-3xl lg:text-5xl font-bold text-primary-foreground mb-6">
-            Ready to transform your team's productivity?
-          </h2>
-          <p className="text-xl text-primary-foreground/80 mb-8 max-w-2xl mx-auto">
-            Join thousands of teams already using Teamspace to collaborate better and achieve more.
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Button asChild size="lg" variant="secondary" className="h-12 px-8">
-              <Link href="/auth/signup">
-                Start Free Trial
-                <ArrowRight className="ml-2 h-5 w-5" />
-              </Link>
-            </Button>
-            <Button
-              size="lg"
-              variant="outline"
-              className="h-12 px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary"
-            >
-              Schedule Demo
-            </Button>
-          </div>
-        </div>
-      </section>
-
-      {/* Footer */}
-      <footer className="bg-muted py-16">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="grid md:grid-cols-2 lg:grid-cols-5 gap-8">
-            <div className="lg:col-span-2">
-              <div className="flex items-center mb-4">
-                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-                  <Users className="h-5 w-5 text-primary-foreground" />
-                </div>
-                <span className="ml-2 text-xl font-bold">Teamspace</span>
-              </div>
-              <p className="text-muted-foreground mb-6 max-w-md">
-                Empowering teams to collaborate better and achieve more together.
-              </p>
-              <div className="flex space-x-4">
-                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
-                  <Twitter className="h-5 w-5" />
-                </Link>
-                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
-                  <Github className="h-5 w-5" />
-                </Link>
-                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
-                  <Linkedin className="h-5 w-5" />
-                </Link>
-              </div>
-            </div>
-
-            <div>
-              <h4 className="font-semibold mb-4">Product</h4>
-              <ul className="space-y-2 text-muted-foreground">
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Features
-                  </Link>
-                </li>
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Pricing
-                  </Link>
-                </li>
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    API
-                  </Link>
-                </li>
-              </ul>
-            </div>
-
-            <div>
-              <h4 className="font-semibold mb-4">Company</h4>
-              <ul className="space-y-2 text-muted-foreground">
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    About
-                  </Link>
-                </li>
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Blog
-                  </Link>
-                </li>
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Careers
-                  </Link>
-                </li>
-              </ul>
-            </div>
-
-            <div>
-              <h4 className="font-semibold mb-4">Support</h4>
-              <ul className="space-y-2 text-muted-foreground">
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Help Center
-                  </Link>
-                </li>
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Documentation
-                  </Link>
-                </li>
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Contact
-                  </Link>
-                </li>
-              </ul>
-            </div>
-          </div>
-
-          <div className="border-t border-border mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
-            <p className="text-muted-foreground text-sm">
-              © {new Date().getFullYear()} Teamspace. All rights reserved.
-            </p>
-            <div className="flex space-x-6 mt-4 md:mt-0">
-              <Link href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
-                Privacy Policy
-              </Link>
-              <Link href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
-                Terms of Service
-              </Link>
-            </div>
-          </div>
-        </div>
-      </footer>
-    </div>
-  )
-}
diff --git a/samples/teamspace-nextjs/postcss.config.mjs b/samples/teamspace-nextjs/postcss.config.mjs
index 95d885ee9..c7bcb4b1e 100644
--- a/samples/teamspace-nextjs/postcss.config.mjs
+++ b/samples/teamspace-nextjs/postcss.config.mjs
@@ -1,6 +1,5 @@
 const config = {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
+  plugins: ["@tailwindcss/postcss"],
 };
+
 export default config;
diff --git a/samples/teamspace-nextjs/public/file.svg b/samples/teamspace-nextjs/public/file.svg
new file mode 100644
index 000000000..004145cdd
--- /dev/null
+++ b/samples/teamspace-nextjs/public/file.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/samples/teamspace-nextjs/public/globe.svg b/samples/teamspace-nextjs/public/globe.svg
new file mode 100644
index 000000000..567f17b0d
--- /dev/null
+++ b/samples/teamspace-nextjs/public/globe.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/samples/teamspace-nextjs/public/next.svg b/samples/teamspace-nextjs/public/next.svg
new file mode 100644
index 000000000..5174b28c5
--- /dev/null
+++ b/samples/teamspace-nextjs/public/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/samples/teamspace-nextjs/public/placeholder-logo.png b/samples/teamspace-nextjs/public/placeholder-logo.png
deleted file mode 100644
index 8a792ac2ddfbe047639f7907c82f14c73e3de3d9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 568
zcmeAS@N?(olHy`uVBq!ia0y~yU<5K5Ca^FANm1Vwi-43tfKP}kNR$*1WiP`GRL@@$
z<QL3vU!lR_fWZ6t2>}KL6V^XjP|gFiXN9MWV@SoVw>S2B83zimJup|_^-FbrjeV<v
z*lw|=xs0x-S#nsL%^x(0FVKj%;qsQ{U_)>3it>ba2M!&I{-9Oz_xPcYF3oFZ=eo>b
ztd*bf%*2|<`prCX7bFlbJSYChhATpnZHm_gDmxOE$M3Ov^QCh;k9GZ#-G|g`wsZ1y
zY-hCA6Y*4%kP@8PzH+9qgqG>UuX7G~Jv3yxb4X!L$WkVer)+Lao)20%*YwyPoNauk
zS!$0_-Kr#3+3w{V4Ccu^47H4DY>j<sazVM=;K3pHk{C5Z9+CU(_C~D2hB~a*&VI>P
zOx?nl+kWZD?x4qFw+?-2Jz{$0yTXmVj$U6an>Gc>YVI}tW1#2eCg2#H$RT;W`9jE4
z<(d!P-_Kw0oV0yf*RuH&47YRnuIuc%FZkt*pVIL&DpPv8{<u#M`yJBCefwlcT-?&n
zjxSV#cP<yr(CFAcO<MeKYtwf3*yMaAuj@PF;;yRSvlUx1ZJp{~pm)R1n_XBvJ$&o^
z@|B67@3(7p1LcJx-KQrXz4I$U-A#P^e%a;@1bFc|j=?m3v(EJ3b*iA~_jL7hS?83{
F1OR^s+sXg{

diff --git a/samples/teamspace-nextjs/public/placeholder-logo.svg b/samples/teamspace-nextjs/public/placeholder-logo.svg
deleted file mode 100644
index b1695aafc..000000000
--- a/samples/teamspace-nextjs/public/placeholder-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/samples/teamspace-nextjs/public/placeholder-user.jpg b/samples/teamspace-nextjs/public/placeholder-user.jpg
deleted file mode 100644
index 6fa7543d38ed8fdb38f03b5c0f40ad2d66827d4a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1635
zcmex=<NpH&0WUXCHwH#V1_nkTWcYuZ!I^=Jot=}Njf<0mlbf51hhI{FpO24UPE1@#
zQbj>cRarq<NkiAtKtsz+TS?i-#mLOs*1^F+&A`pu)y~V(-oX}R2qQN)H$N}Gtbl;5
zt){Z3Ey>{jAqGJXh7$}Ym>C5bm;@P_1sVSzVUPwol9>?*7~p`Fjh%&&i5Vy<f-DS?
z|9^{thnbOqNq|`ZC~&g@u8VX=&D0{3NxJM8pgPZVC{;A7_ZmRB%rg%6?s#L-<8jAt
z0z{;6M(1w%g+C<%x63v_L_Qop_vlnupKyXLgwOCqL#0qDzHbAR3#0hCCI(yZ^Dhe6
zF%4q6JX@HXcv8TZpNd?b`6dvt1)_(e?F$%`&(vJvb^z&QR@8F^nq++Vvq=Gn&*oGp
ztH8i`B#KuC#AReE29iQ7J3t)rfIKjWodp;enVA?_x!E~6A*KL>o`r#xP0%qgXfnHy
zn7E>$Lug{-LIb0a!ifhj3W%7RB^MNLx}>0_tP&7BY4IaqjBo(siP4_n_ky5FEmL(`
zmhdc@Jb`OxUUPQK!#s<ks4a^p%H4WwDH~SypW$=Z+Y7nHVuC7`f>q(C`ZJd3YCA-U
zh)gnS;tOzhJ@#Yf$<H#|T_Xi0EycfeiDqs%zjsG4=iCqeb2guta$W3tyl3m%@RzH%
zw$)BNFmug&r#)BuLRM|CQ!V1T5}m5A6W-@iJL|m54!fk=sdn?qW<?z@Q0vqR3!XAL
zY<6+j>SRGl2DVF#R;SL@d2ijhdh5m?{S3~XPpnp*$)2k2D4JJuYTMD;n0K36=Y8OJ
z-mS1ZZC1<AQ;7$xFJ;KI$coB-@#?w#R%S(^Vy12TlL^0+jun3QbGz*s)t|7a{K#C>
z49BdqoLo<WB68%O^mTUSWN*BC$H7x@u4>M_v$9v)Hm?5W<`Stp{n4{)u7wjb{~fvi
z!T;47&))dGMoGtVj(5+GENxwrz4z{INB>V}1-4JUxp@DgJ8LKAUAQWhoR~X5%Wp!~
z<DEyIh54}GuHDORee^nG{=GJ{6F;tQFYa8gBi;RW!?hOKPp@w0bZ55BxNw^zr`q$9
z|Cgg0imF};Dm+VO?a6Cq6V!EZKX>=~v%IB`XWv<uso3&rOQXBsJ*#tZSFUs9{Y^K{
zS>>j>XTei(%h-3q0fm1bY5udCHKmu^f&G@&$==-St!-gGk?J$~inXs)aj#q07WR4-
zM=rxkFUy8C!QJtD_bgKux*|B+dhW6{-z2Xe?@~0Ks(ijMro-3a&Mj#N$xpGBRnmWt
zTsUxz-_bhtPj<sMeuw`I#q*`&SU0SnCF#EM>F={K-%Z^<th=u9Px?QDVDQ^dYbW_s
zu35R9EqP8RyTuy$o@<vb=I^oyx%njXt>57b<}UkWR&Lo)qWhnrV2yD?(SL?Q-l9d;
zHS6^j9!_Ejaqqemoyn}=@ptvvS-S7I7N7FZ5}(WNv3l;#-@XTLOmcJGRz1a7FhcBC
z-nPY(UsETGE4&Rdme=pC+jj2j;!j+6o-!m}7oD?jz2dGcAvK4%qSmfE=U+z7Z+`#j
z$Mx4a@1yJ$R+zt@y0z(yW_ISH^4k|<^!Al@?-M=r`gz3ehXgqVyM1>}k-Q}GF<-;)
z*LLGyVd)Qk|Ji$(J?dTY-07-((_=n&#1_`3T&d5FiH|guzja;wny>q}tw+C34*a{8
zfJ9i0DbumfeTVp1E#|(wudjdSJE%AnL@H&$nSBB{^D;34Gp|fN9u>e68m!_b0O__-
AD*ylh

diff --git a/samples/teamspace-nextjs/public/placeholder.jpg b/samples/teamspace-nextjs/public/placeholder.jpg
deleted file mode 100644
index 6bfe96336dbe567f5f1e9129f5bccdc78b114bba..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1064
zcmb7@Nla5w6o$`zL;Ko7c&|)~7+MC)5J;K9giwZ-mWToZDl29|7tA;;v?z!g5*b9%
zRSP(-1ZOwO;J6Z;05{Ybq6y%HZtA^{7Ghj^Zu0K`Ud}o9eCM5OpR~^apJ^}|03iS)
zUSPLDyMAv~1wd97gaQBuEK&lE6~YUU53r&J$VBT_bS?^Z_)q|CRlqoW3h_=1XC~2(
zowlIWj23Fe8(HX8O~UM7AR)W5x}mzhvbshU9ifGUR8tm1vSSl<kSO`*>)WSJzz{QQ
zmi2yKN<Cm70f8eW(?|eHK(v7DW8jCYV3BBI7ywN%hy{t1lgSm>VU))a_#4eg7^#He
zB=v{_T40oFHqzanm!#xGc@)<MNSjrish-x{=)u4et=Dkfcv@G?A<ni{7gXvUJKtU3
zmz_Rzcws|cT-nKnk)nx~{xvmkH2V1RtND!sJ)^CQ&kRlGw;2T$*JSdwKEWZO35gqx
zrp#^IcNFfdtlG6_@4o#<+KwJO-f`-5@0qifbLTHyyma}>^&2;D-M({g?EZs?j~+jH
z`uxSqSCdoIGw<Gi`1omd?(4VjKYlL#`b{Wtcb6gYQ{*HN47*B+TS8$@nxa{Xr5L6S
z;U3YvQq8C$Q`}jte^ic#P7)nZoa$Md8`GQ}*lA50^pcjuZk-<wDjH6=)h&1*Dvhhz
zpwH{l^iAOAtr0omF^C}pqvRJ5n6mN;!c*VS*hHAjhg({gxw=pGETi=gIN*k^UUTq`
zj5-OQIT7EybwDnzP`-vVP;i`_lPcsgxvPu9Rq#~`Zf=7AS|1PJkif9e;6RNgJW3ZI
zu1(TvGzps$lhX7?lQArAOa5j<o-V_vx8o$p#nn}C6VytjS|6c_(EqpDr@@65+b7`R
zn%j-vIox%`QU^te2QL{dOFV{7i9nK!9mXJ<Cs%<YhW{A=rNHy5j!elZu5IqL4i3+c
z^R@+*R+n8=WA3nAx%YI&c|fxI?q6r~ek7ehemM<@V)2~gYb`?{s3UotPgOhL*=!vg
XAGR(0la3V0lXM&+MLHyoCvxf!Qm;2N

diff --git a/samples/teamspace-nextjs/public/placeholder.svg b/samples/teamspace-nextjs/public/placeholder.svg
deleted file mode 100644
index e763910b2..000000000
--- a/samples/teamspace-nextjs/public/placeholder.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/samples/teamspace-nextjs/public/vercel.svg b/samples/teamspace-nextjs/public/vercel.svg
new file mode 100644
index 000000000..770539603
--- /dev/null
+++ b/samples/teamspace-nextjs/public/vercel.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/samples/teamspace-nextjs/public/window.svg b/samples/teamspace-nextjs/public/window.svg
new file mode 100644
index 000000000..b2b2a44f6
--- /dev/null
+++ b/samples/teamspace-nextjs/public/window.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file
diff --git a/samples/teamspace-nextjs/tsconfig.json b/samples/teamspace-nextjs/tsconfig.json
index 5d2b7e671..d8b93235f 100644
--- a/samples/teamspace-nextjs/tsconfig.json
+++ b/samples/teamspace-nextjs/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "es6"],
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,7 +18,6 @@
         "name": "next"
       }
     ],
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./*"]
     }

From 8a3d1c12c770539d0f245dd18505132abe0aab8b Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 04:10:51 +0530
Subject: [PATCH 116/131] chore(next): update components

---
 packages/nextjs/src/AsgardeoNextClient.ts     | 17 +++-
 .../actions/SignInButton/SignInButton.tsx     | 59 +++++++-------
 .../actions/SignOutButton/SignOutButton.tsx   | 15 ++--
 .../actions/SignUpButton/SignUpButton.tsx     | 15 ++--
 .../components/presentation/User/User.tsx     | 77 +++++++++++++++++++
 .../configs/InternalAuthAPIRoutesConfig.ts    |  1 +
 packages/nextjs/src/index.ts                  |  3 +
 packages/nextjs/src/models/api.ts             |  5 ++
 8 files changed, 142 insertions(+), 50 deletions(-)
 create mode 100644 packages/nextjs/src/client/components/presentation/User/User.tsx

diff --git a/packages/nextjs/src/AsgardeoNextClient.ts b/packages/nextjs/src/AsgardeoNextClient.ts
index 8ed65de81..7e863d527 100644
--- a/packages/nextjs/src/AsgardeoNextClient.ts
+++ b/packages/nextjs/src/AsgardeoNextClient.ts
@@ -60,8 +60,10 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
     } as any);
   }
 
-  override getUser(): Promise<User> {
-    throw new Error('Method not implemented.');
+  override async getUser(userId?: string): Promise<User> {
+    let resolvedSessionId: string = userId || ((await getSessionId()) as string);
+
+    return this.asgardeo.getUser(resolvedSessionId);
   }
 
   override getUserProfile(): Promise<UserProfile> {
@@ -161,6 +163,17 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
       }
     }
 
+    if (method === 'GET' && sanitizedPathname === InternalAuthAPIRoutesConfig.user) {
+      try {
+        const user: User = await this.getUser();
+
+        return NextResponse.json(user);
+      } catch (error) {
+        console.error('[AsgardeoNextClient] Failed to get user:', error);
+        return NextResponse.json({error: 'Failed to get user'}, {status: 500});
+      }
+    }
+
     if (method === 'GET' && sanitizedPathname === InternalAuthAPIRoutesConfig.signOut) {
       try {
         const afterSignOutUrl: string = await this.signOut();
diff --git a/packages/nextjs/src/client/components/actions/SignInButton/SignInButton.tsx b/packages/nextjs/src/client/components/actions/SignInButton/SignInButton.tsx
index 262ad09dd..b2732d72c 100644
--- a/packages/nextjs/src/client/components/actions/SignInButton/SignInButton.tsx
+++ b/packages/nextjs/src/client/components/actions/SignInButton/SignInButton.tsx
@@ -18,46 +18,49 @@
 
 'use client';
 
-import {FC, forwardRef, HTMLAttributes, PropsWithChildren, ReactElement, Ref} from 'react';
+import {forwardRef, ForwardRefExoticComponent, ReactElement, Ref, RefAttributes} from 'react';
 import InternalAuthAPIRoutesConfig from '../../../../configs/InternalAuthAPIRoutesConfig';
-import {BaseSignInButton} from '@asgardeo/react';
+import {BaseSignInButton, BaseSignInButtonProps} from '@asgardeo/react';
 
 /**
  * Props interface of {@link SignInButton}
  */
-export type SignInButtonProps = HTMLAttributes<HTMLButtonElement>;
+export type SignInButtonProps = BaseSignInButtonProps;
 
 /**
- * SignInButton component. This button initiates the sign-in process when clicked.
+ * SignInButton component that supports both render props and traditional props patterns for Next.js.
  *
- * @example
+ * @example Using render props
  * ```tsx
- * import { SignInButton } from '@asgardeo/auth-react';
+ * <SignInButton>
+ *   {({isLoading}) => (
+ *     <button type="submit" disabled={isLoading}>
+ *       {isLoading ? 'Signing in...' : 'Sign In'}
+ *     </button>
+ *   )}
+ * </SignInButton>
+ * ```
  *
- * const App = () => {
- *   const buttonRef = useRef<HTMLButtonElement>(null);
- *   return (
- *     <SignInButton ref={buttonRef} className="custom-class" style={{ backgroundColor: 'blue' }}>
- *       Sign In
- *     </SignInButton>
- *   );
- * }
+ * @example Using traditional props
+ * ```tsx
+ * <SignInButton className="custom-button">Sign In</SignInButton>
  * ```
+ *
+ * @remarks
+ * In Next.js with server actions, the sign-in is handled via form submission.
+ * When using render props, the custom button should use `type="submit"` instead of `onClick={signIn}`.
+ * The `signIn` function in render props is provided for API consistency but should not be used directly.
  */
-const SignInButton: FC<PropsWithChildren<SignInButtonProps>> = forwardRef<
-  HTMLButtonElement,
-  PropsWithChildren<SignInButtonProps>
->(
-  (
-    {children = 'Sign In', className, style, ...rest}: PropsWithChildren<SignInButtonProps>,
-    ref: Ref<HTMLButtonElement>,
-  ): ReactElement => (
-    <form action={InternalAuthAPIRoutesConfig.signIn}>
-      <BaseSignInButton className={className} style={style} ref={ref} type="submit" {...rest}>
-        {children}
-      </BaseSignInButton>
-    </form>
-  ),
+const SignInButton = forwardRef<HTMLButtonElement, SignInButtonProps>(
+  ({className, style, ...rest}: SignInButtonProps, ref: Ref<HTMLButtonElement>): ReactElement => {
+    return (
+      <form action={InternalAuthAPIRoutesConfig.signIn}>
+        <BaseSignInButton className={className} style={style} ref={ref} type="submit" {...rest} />
+      </form>
+    );
+  },
 );
 
+SignInButton.displayName = 'SignInButton';
+
 export default SignInButton;
diff --git a/packages/nextjs/src/client/components/actions/SignOutButton/SignOutButton.tsx b/packages/nextjs/src/client/components/actions/SignOutButton/SignOutButton.tsx
index 4ac4a59f3..5954c0f2c 100644
--- a/packages/nextjs/src/client/components/actions/SignOutButton/SignOutButton.tsx
+++ b/packages/nextjs/src/client/components/actions/SignOutButton/SignOutButton.tsx
@@ -18,14 +18,14 @@
 
 'use client';
 
-import {FC, forwardRef, HTMLAttributes, PropsWithChildren, ReactElement, Ref} from 'react';
+import {FC, forwardRef, PropsWithChildren, ReactElement, Ref} from 'react';
 import InternalAuthAPIRoutesConfig from '../../../../configs/InternalAuthAPIRoutesConfig';
-import {BaseSignOutButton} from '@asgardeo/react';
+import {BaseSignOutButton, BaseSignOutButtonProps} from '@asgardeo/react';
 
 /**
  * Interface for SignInButton component props.
  */
-export type SignOutButtonProps = HTMLAttributes<HTMLButtonElement>;
+export type SignOutButtonProps = BaseSignOutButtonProps;
 
 /**
  * SignInButton component. This button initiates the sign-in process when clicked.
@@ -48,14 +48,9 @@ const SignOutButton: FC<PropsWithChildren<SignOutButtonProps>> = forwardRef<
   HTMLButtonElement,
   PropsWithChildren<SignOutButtonProps>
 >(
-  (
-    {children = 'Sign Out', className, style, ...rest}: PropsWithChildren<SignOutButtonProps>,
-    ref: Ref<HTMLButtonElement>,
-  ): ReactElement => (
+  ({className, style, ...rest}: PropsWithChildren<SignOutButtonProps>, ref: Ref<HTMLButtonElement>): ReactElement => (
     <form action={InternalAuthAPIRoutesConfig.signOut}>
-      <BaseSignOutButton className={className} style={style} ref={ref} type="submit" {...rest}>
-        {children}
-      </BaseSignOutButton>
+      <BaseSignOutButton className={className} style={style} ref={ref} type="submit" {...rest} />
     </form>
   ),
 );
diff --git a/packages/nextjs/src/client/components/actions/SignUpButton/SignUpButton.tsx b/packages/nextjs/src/client/components/actions/SignUpButton/SignUpButton.tsx
index 821e952ba..cfd0d65b0 100644
--- a/packages/nextjs/src/client/components/actions/SignUpButton/SignUpButton.tsx
+++ b/packages/nextjs/src/client/components/actions/SignUpButton/SignUpButton.tsx
@@ -18,14 +18,14 @@
 
 'use client';
 
-import {FC, forwardRef, HTMLAttributes, PropsWithChildren, ReactElement, Ref} from 'react';
+import {FC, forwardRef, PropsWithChildren, ReactElement, Ref} from 'react';
 import InternalAuthAPIRoutesConfig from '../../../../configs/InternalAuthAPIRoutesConfig';
-import {BaseSignUpButton} from '@asgardeo/react';
+import {BaseSignUpButton, BaseSignUpButtonProps} from '@asgardeo/react';
 
 /**
  * Interface for SignInButton component props.
  */
-export type SignUpButtonProps = HTMLAttributes<HTMLButtonElement>;
+export type SignUpButtonProps = BaseSignUpButtonProps;
 
 /**
  * SignInButton component. This button initiates the sign-in process when clicked.
@@ -48,14 +48,9 @@ const SignUpButton: FC<PropsWithChildren<SignUpButtonProps>> = forwardRef<
   HTMLButtonElement,
   PropsWithChildren<SignUpButtonProps>
 >(
-  (
-    {children = 'Sign Up', className, style, ...rest}: PropsWithChildren<SignUpButtonProps>,
-    ref: Ref<HTMLButtonElement>,
-  ): ReactElement => (
+  ({className, style, ...rest}: PropsWithChildren<SignUpButtonProps>, ref: Ref<HTMLButtonElement>): ReactElement => (
     <form action={InternalAuthAPIRoutesConfig.signUp}>
-      <BaseSignUpButton className={className} style={style} ref={ref} type="submit" {...rest}>
-        {children}
-      </BaseSignUpButton>
+      <BaseSignUpButton className={className} style={style} ref={ref} type="submit" {...rest} />
     </form>
   ),
 );
diff --git a/packages/nextjs/src/client/components/presentation/User/User.tsx b/packages/nextjs/src/client/components/presentation/User/User.tsx
new file mode 100644
index 000000000..bec144084
--- /dev/null
+++ b/packages/nextjs/src/client/components/presentation/User/User.tsx
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+'use client';
+
+import {FC, ReactElement, ReactNode} from 'react';
+import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
+import {BaseUser, BaseUserProps} from '@asgardeo/react';
+
+/**
+ * Props for the User component.
+ * Extends BaseUserProps but makes the user prop optional since it will be obtained from useAsgardeo
+ */
+export interface UserProps extends Omit<BaseUserProps, 'user'> {
+  /**
+   * Render prop that takes the user object and returns a ReactNode.
+   * @param user - The authenticated user object from Asgardeo.
+   * @returns A ReactNode to render.
+   */
+  children: (user: any | null) => ReactNode;
+
+  /**
+   * Optional element to render when no user is signed in.
+   */
+  fallback?: ReactNode;
+}
+
+/**
+ * A component that uses render props to expose the authenticated user object.
+ * This component automatically retrieves the user from Asgardeo context.
+ *
+ * @remarks This component is only supported in browser based React applications (CSR).
+ *
+ * @example
+ * ```tsx
+ * import { User } from '@asgardeo/auth-react';
+ *
+ * const App = () => {
+ *   return (
+ *     <User fallback={<p>Please sign in</p>}>
+ *       {(user) => (
+ *         <div>
+ *           <h1>Welcome, {user.displayName}!</h1>
+ *           <p>Email: {user.email}</p>
+ *         </div>
+ *       )}
+ *     </User>
+ *   );
+ * }
+ * ```
+ */
+const User: FC<UserProps> = ({children, fallback = null}): ReactElement => {
+  return (
+    <BaseUser user={user} fallback={fallback}>
+      {children}
+    </BaseUser>
+  );
+};
+
+User.displayName = 'User';
+
+export default User;
diff --git a/packages/nextjs/src/configs/InternalAuthAPIRoutesConfig.ts b/packages/nextjs/src/configs/InternalAuthAPIRoutesConfig.ts
index e36514673..a0dd32cbd 100644
--- a/packages/nextjs/src/configs/InternalAuthAPIRoutesConfig.ts
+++ b/packages/nextjs/src/configs/InternalAuthAPIRoutesConfig.ts
@@ -19,6 +19,7 @@
 import {InternalAuthAPIRoutes} from '../models/api';
 
 const InternalAuthAPIRoutesConfig: InternalAuthAPIRoutes = {
+  user: '/api/auth/user',
   session: '/api/auth/session',
   signIn: '/api/auth/signin',
   signOut: '/api/auth/signout',
diff --git a/packages/nextjs/src/index.ts b/packages/nextjs/src/index.ts
index 46f0ab2ac..2ba4b280f 100644
--- a/packages/nextjs/src/index.ts
+++ b/packages/nextjs/src/index.ts
@@ -33,4 +33,7 @@ export type {SignInButtonProps} from './client/components/actions/SignInButton/S
 export {default as SignOutButton} from './client/components/actions/SignOutButton/SignOutButton';
 export type {SignOutButtonProps} from './client/components/actions/SignOutButton/SignOutButton';
 
+export {default as User} from './client/components/presentation/User/User';
+export type {UserProps} from './client/components/presentation/User/User';
+
 export {default as AsgardeoNext} from './AsgardeoNextClient';
diff --git a/packages/nextjs/src/models/api.ts b/packages/nextjs/src/models/api.ts
index 7242edb3b..c9d5ae7ee 100644
--- a/packages/nextjs/src/models/api.ts
+++ b/packages/nextjs/src/models/api.ts
@@ -21,6 +21,11 @@
  * These routes are used internally by the Asgardeo Next.js SDK for handling authentication flows.
  */
 export interface InternalAuthAPIRoutes {
+  /**
+   * Route for handling user information retrieval.
+   * This route should return the current user's information, such as username, email, etc.
+   */
+  user: string;
   /**
    * Route for handling session management.
    * This route should return the current signed-in status.

From e7f3c1c19cceec19031fcad6e7ad6ded9d343efb Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 04:11:03 +0530
Subject: [PATCH 117/131] chore(samples): update samples

---
 pnpm-lock.yaml                                | 842 ++++++------------
 samples/teamspace-nextjs-1/app/page.tsx       |  20 +-
 samples/teamspace-nextjs/README.md            |  47 +-
 .../teamspace-nextjs/app/dashboard/page.tsx   | 242 +++++
 samples/teamspace-nextjs/app/globals.css      | 173 ++--
 samples/teamspace-nextjs/app/layout.tsx       |  46 +-
 .../app/organizations/new/page.tsx            | 185 ++++
 .../app/organizations/page.tsx                | 154 ++++
 samples/teamspace-nextjs/app/page.tsx         | 579 ++++++++++--
 samples/teamspace-nextjs/app/profile/page.tsx | 238 +++++
 .../teamspace-nextjs/components/header.tsx    | 139 +++
 .../components/theme-provider.tsx             |   7 +
 .../teamspace-nextjs/components/ui/alert.tsx  |  43 +
 .../teamspace-nextjs/components/ui/avatar.tsx |  53 ++
 .../teamspace-nextjs/components/ui/badge.tsx  |  46 +
 .../teamspace-nextjs/components/ui/button.tsx |  59 ++
 .../teamspace-nextjs/components/ui/card.tsx   |  92 ++
 .../components/ui/checkbox.tsx                |  28 +
 .../components/ui/dropdown-menu.tsx           | 257 ++++++
 .../teamspace-nextjs/components/ui/input.tsx  |  21 +
 .../teamspace-nextjs/components/ui/label.tsx  |  24 +
 .../components/ui/textarea.tsx                |  18 +
 samples/teamspace-nextjs/hooks/use-auth.tsx   |  93 ++
 samples/teamspace-nextjs/lib/utils.ts         |   2 +-
 samples/teamspace-nextjs/next.config.js       |  13 +
 samples/teamspace-nextjs/package.json         |  39 +-
 samples/teamspace-nextjs/postcss.config.mjs   |   5 +-
 samples/teamspace-nextjs/tsconfig.json        |   3 +-
 28 files changed, 2599 insertions(+), 869 deletions(-)
 create mode 100644 samples/teamspace-nextjs/app/dashboard/page.tsx
 create mode 100644 samples/teamspace-nextjs/app/organizations/new/page.tsx
 create mode 100644 samples/teamspace-nextjs/app/organizations/page.tsx
 create mode 100644 samples/teamspace-nextjs/app/profile/page.tsx
 create mode 100644 samples/teamspace-nextjs/components/header.tsx
 create mode 100644 samples/teamspace-nextjs/components/theme-provider.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/alert.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/avatar.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/badge.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/button.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/card.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/checkbox.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/dropdown-menu.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/input.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/label.tsx
 create mode 100644 samples/teamspace-nextjs/components/ui/textarea.tsx
 create mode 100644 samples/teamspace-nextjs/hooks/use-auth.tsx
 create mode 100644 samples/teamspace-nextjs/next.config.js

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 74ec3f6b9..38d473eb9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -550,78 +550,72 @@ importers:
 
   samples/teamspace-nextjs:
     dependencies:
-      '@asgardeo/nextjs':
-        specifier: workspace:^
-        version: link:../../packages/nextjs
       '@radix-ui/react-avatar':
-        specifier: ^1.0.4
-        version: 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^1.1.1
+        version: 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-checkbox':
-        specifier: ^1.0.4
-        version: 1.3.2(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^1.1.2
+        version: 1.3.2(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-dropdown-menu':
-        specifier: ^2.0.6
-        version: 2.1.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^2.1.2
+        version: 2.1.15(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-label':
-        specifier: ^2.0.2
-        version: 2.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^2.1.0
+        version: 2.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-slot':
-        specifier: ^1.0.2
-        version: 1.2.3(@types/react@18.3.23)(react@18.3.1)
+        specifier: ^1.1.0
+        version: 1.2.3(@types/react@19.1.5)(react@19.1.0)
       class-variance-authority:
-        specifier: ^0.7.0
+        specifier: ^0.7.1
         version: 0.7.1
       clsx:
-        specifier: ^2.0.0
+        specifier: ^2.1.1
         version: 2.1.1
       lucide-react:
-        specifier: ^0.294.0
-        version: 0.294.0(react@18.3.1)
+        specifier: ^0.460.0
+        version: 0.460.0(react@19.1.0)
       next:
-        specifier: 14.0.4
-        version: 14.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.89.0)
+        specifier: ^15.1.0
+        version: 15.3.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.89.0)
+      next-themes:
+        specifier: ^0.4.3
+        version: 0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       react:
-        specifier: ^18
-        version: 18.3.1
+        specifier: ^19
+        version: 19.1.0
       react-dom:
-        specifier: ^18
-        version: 18.3.1(react@18.3.1)
+        specifier: ^19
+        version: 19.1.0(react@19.1.0)
       tailwind-merge:
-        specifier: ^2.0.0
+        specifier: ^2.5.4
         version: 2.6.0
-      tailwindcss-animate:
-        specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@4.1.10)
     devDependencies:
       '@tailwindcss/postcss':
-        specifier: ^4.1.10
+        specifier: ^4.0.0-alpha.30
         version: 4.1.10
       '@types/node':
-        specifier: ^20
-        version: 20.17.50
+        specifier: ^22.9.0
+        version: 22.15.30
       '@types/react':
-        specifier: ^18
-        version: 18.3.23
+        specifier: ^19.0.0
+        version: 19.1.5
       '@types/react-dom':
-        specifier: ^18
-        version: 18.3.7(@types/react@18.3.23)
-      autoprefixer:
-        specifier: ^10.0.1
-        version: 10.4.21(postcss@8.5.3)
+        specifier: ^19.0.0
+        version: 19.1.5(@types/react@19.1.5)
       eslint:
-        specifier: ^8
-        version: 8.57.0
+        specifier: ^9.15.0
+        version: 9.28.0(jiti@2.4.2)
       eslint-config-next:
-        specifier: 14.0.4
-        version: 14.0.4(eslint-plugin-import-x@4.12.2(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)
+        specifier: ^15.1.0
+        version: 15.3.2(eslint-plugin-import-x@4.12.2(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
       postcss:
-        specifier: ^8.5.3
+        specifier: ^8.4.49
         version: 8.5.3
       tailwindcss:
-        specifier: ^4
+        specifier: ^4.0.0-alpha.30
         version: 4.1.10
       typescript:
-        specifier: ^5
+        specifier: ^5.6.0
         version: 5.8.3
 
   samples/teamspace-nextjs-1:
@@ -1783,117 +1777,57 @@ packages:
     engines: {node: '>=18.14.0'}
     hasBin: true
 
-  '@next/env@14.0.4':
-    resolution: {integrity: sha512-irQnbMLbUNQpP1wcE5NstJtbuA/69kRfzBrpAD7Gsn8zm/CY6YQYc3HQBz8QPxwISG26tIm5afvvVbu508oBeQ==}
-
   '@next/env@15.3.2':
     resolution: {integrity: sha512-xURk++7P7qR9JG1jJtLzPzf0qEvqCN0A/T3DXf8IPMKo9/6FfjxtEffRJIIew/bIL4T3C2jLLqBor8B/zVlx6g==}
 
   '@next/eslint-plugin-next@13.5.11':
     resolution: {integrity: sha512-0qjDhes9UTSxirt/dYzrv20hs8SUhcIOvlEioj5+XucVrBHihnAk6Om7Vzk+VZ2nRE7tcShm/6lH1xSkJ3XMpg==}
 
-  '@next/eslint-plugin-next@14.0.4':
-    resolution: {integrity: sha512-U3qMNHmEZoVmHA0j/57nRfi3AscXNvkOnxDmle/69Jz/G0o/gWjXTDdlgILZdrxQ0Lw/jv2mPW8PGy0EGIHXhQ==}
-
   '@next/eslint-plugin-next@15.3.2':
     resolution: {integrity: sha512-ijVRTXBgnHT33aWnDtmlG+LJD+5vhc9AKTJPquGG5NKXjpKNjc62woIhFtrAcWdBobt8kqjCoaJ0q6sDQoX7aQ==}
 
-  '@next/swc-darwin-arm64@14.0.4':
-    resolution: {integrity: sha512-mF05E/5uPthWzyYDyptcwHptucf/jj09i2SXBPwNzbgBNc+XnwzrL0U6BmPjQeOL+FiB+iG1gwBeq7mlDjSRPg==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-
   '@next/swc-darwin-arm64@15.3.2':
     resolution: {integrity: sha512-2DR6kY/OGcokbnCsjHpNeQblqCZ85/1j6njYSkzRdpLn5At7OkSdmk7WyAmB9G0k25+VgqVZ/u356OSoQZ3z0g==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@14.0.4':
-    resolution: {integrity: sha512-IZQ3C7Bx0k2rYtrZZxKKiusMTM9WWcK5ajyhOZkYYTCc8xytmwSzR1skU7qLgVT/EY9xtXDG0WhY6fyujnI3rw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-
   '@next/swc-darwin-x64@15.3.2':
     resolution: {integrity: sha512-ro/fdqaZWL6k1S/5CLv1I0DaZfDVJkWNaUU3un8Lg6m0YENWlDulmIWzV96Iou2wEYyEsZq51mwV8+XQXqMp3w==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-linux-arm64-gnu@14.0.4':
-    resolution: {integrity: sha512-VwwZKrBQo/MGb1VOrxJ6LrKvbpo7UbROuyMRvQKTFKhNaXjUmKTu7wxVkIuCARAfiI8JpaWAnKR+D6tzpCcM4w==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-
   '@next/swc-linux-arm64-gnu@15.3.2':
     resolution: {integrity: sha512-covwwtZYhlbRWK2HlYX9835qXum4xYZ3E2Mra1mdQ+0ICGoMiw1+nVAn4d9Bo7R3JqSmK1grMq/va+0cdh7bJA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-arm64-musl@14.0.4':
-    resolution: {integrity: sha512-8QftwPEW37XxXoAwsn+nXlodKWHfpMaSvt81W43Wh8dv0gkheD+30ezWMcFGHLI71KiWmHK5PSQbTQGUiidvLQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-
   '@next/swc-linux-arm64-musl@15.3.2':
     resolution: {integrity: sha512-KQkMEillvlW5Qk5mtGA/3Yz0/tzpNlSw6/3/ttsV1lNtMuOHcGii3zVeXZyi4EJmmLDKYcTcByV2wVsOhDt/zg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-x64-gnu@14.0.4':
-    resolution: {integrity: sha512-/s/Pme3VKfZAfISlYVq2hzFS8AcAIOTnoKupc/j4WlvF6GQ0VouS2Q2KEgPuO1eMBwakWPB1aYFIA4VNVh667A==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-
   '@next/swc-linux-x64-gnu@15.3.2':
     resolution: {integrity: sha512-uRBo6THWei0chz+Y5j37qzx+BtoDRFIkDzZjlpCItBRXyMPIg079eIkOCl3aqr2tkxL4HFyJ4GHDes7W8HuAUg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-linux-x64-musl@14.0.4':
-    resolution: {integrity: sha512-m8z/6Fyal4L9Bnlxde5g2Mfa1Z7dasMQyhEhskDATpqr+Y0mjOBZcXQ7G5U+vgL22cI4T7MfvgtrM2jdopqWaw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-
   '@next/swc-linux-x64-musl@15.3.2':
     resolution: {integrity: sha512-+uxFlPuCNx/T9PdMClOqeE8USKzj8tVz37KflT3Kdbx/LOlZBRI2yxuIcmx1mPNK8DwSOMNCr4ureSet7eyC0w==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-win32-arm64-msvc@14.0.4':
-    resolution: {integrity: sha512-7Wv4PRiWIAWbm5XrGz3D8HUkCVDMMz9igffZG4NB1p4u1KoItwx9qjATHz88kwCEal/HXmbShucaslXCQXUM5w==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-
   '@next/swc-win32-arm64-msvc@15.3.2':
     resolution: {integrity: sha512-LLTKmaI5cfD8dVzh5Vt7+OMo+AIOClEdIU/TSKbXXT2iScUTSxOGoBhfuv+FU8R9MLmrkIL1e2fBMkEEjYAtPQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-ia32-msvc@14.0.4':
-    resolution: {integrity: sha512-zLeNEAPULsl0phfGb4kdzF/cAVIfaC7hY+kt0/d+y9mzcZHsMS3hAS829WbJ31DkSlVKQeHEjZHIdhN+Pg7Gyg==}
-    engines: {node: '>= 10'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@next/swc-win32-x64-msvc@14.0.4':
-    resolution: {integrity: sha512-yEh2+R8qDlDCjxVpzOTEpBLQTEFAcP2A8fUFLaWNap9GitYKkKv1//y2S6XY6zsR4rCOPRpU7plYDR+az2n30A==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-
   '@next/swc-win32-x64-msvc@15.3.2':
     resolution: {integrity: sha512-aW5B8wOPioJ4mBdMDXkt5f3j8pUr9W8AnlX0Df35uRWNT1Y6RIybxjnSUe+PhM+M1bwgyY8PHLmXZC6zT1o5tA==}
     engines: {node: '>= 10'}
@@ -2880,9 +2814,6 @@ packages:
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
-  '@swc/helpers@0.5.2':
-    resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==}
-
   '@tailwindcss/node@4.1.10':
     resolution: {integrity: sha512-2ACf1znY5fpRBwRhMgj9ZXvb2XZW8qs+oTfotJ2C5xR0/WNL7UHZ7zXl6s+rUqedL1mNi+0O+WQr5awGowS3PQ==}
 
@@ -3149,11 +3080,6 @@ packages:
   '@types/prop-types@15.7.15':
     resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
 
-  '@types/react-dom@18.3.7':
-    resolution: {integrity: sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==}
-    peerDependencies:
-      '@types/react': ^18.0.0
-
   '@types/react-dom@19.1.5':
     resolution: {integrity: sha512-CMCjrWucUBZvohgZxkjd6S9h0nZxXjzus6yDfUb+xLxYM7VvjKNH1tQrE9GWLql1XoOP4/Ds3bwFqShHUYraGg==}
     peerDependencies:
@@ -5046,15 +4972,6 @@ packages:
     peerDependencies:
       eslint: ^9.5.0
 
-  eslint-config-next@14.0.4:
-    resolution: {integrity: sha512-9/xbOHEQOmQtqvQ1UsTQZpnA7SlDMBtuKJ//S4JnoyK3oGLhILKXdBgu/UO7lQo/2xOykQULS1qQ6p2+EpHgAQ==}
-    peerDependencies:
-      eslint: ^7.23.0 || ^8.0.0
-      typescript: '>=3.3.1'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   eslint-config-next@15.3.2:
     resolution: {integrity: sha512-FerU4DYccO4FgeYFFglz0SnaKRe1ejXQrDb8kWUkTAg036YWi+jUsgg4sIGNCDhAsDITsZaL4MzBWKB6f4G1Dg==}
     peerDependencies:
@@ -5687,9 +5604,6 @@ packages:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
-  glob-to-regexp@0.4.1:
-    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
-
   glob@10.4.5:
     resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
     hasBin: true
@@ -6577,6 +6491,11 @@ packages:
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0
 
+  lucide-react@0.460.0:
+    resolution: {integrity: sha512-BVtq/DykVeIvRTJvRAgCsOwaGL8Un3Bxh8MbDxMhEWlZay3T4IpEKDEpwt5KZ0KJMHzgm6jrltxlT5eXOWXDHg==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
+
   luxon@3.6.1:
     resolution: {integrity: sha512-tJLxrKJhO2ukZ5z0gyjY1zPh3Rh88Ej9P7jNrZiHMUXHae1yvI2imgOZtL1TO8TW6biMMKfTtAOoEJANgtWBMQ==}
     engines: {node: '>=12'}
@@ -6865,20 +6784,11 @@ packages:
     resolution: {integrity: sha512-Nc3loyVASW59W+8fLDZT1lncpG7llffyZ2o0UQLx/Fr20i7P8oP+lE7+TEcFvXj9IUWU6LjB9P3BH+iFGyp+mg==}
     engines: {node: ^14.16.0 || >=16.0.0}
 
-  next@14.0.4:
-    resolution: {integrity: sha512-qbwypnM7327SadwFtxXnQdGiKpkuhaRLE2uq62/nRul9cj9KhQ5LhHmlziTNqUidZotw/Q1I9OjirBROdUJNgA==}
-    engines: {node: '>=18.17.0'}
-    hasBin: true
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
     peerDependencies:
-      '@opentelemetry/api': ^1.1.0
-      react: ^18.2.0
-      react-dom: ^18.2.0
-      sass: ^1.3.0
-    peerDependenciesMeta:
-      '@opentelemetry/api':
-        optional: true
-      sass:
-        optional: true
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
 
   next@15.3.2:
     resolution: {integrity: sha512-CA3BatMyHkxZ48sgOCLdVHjFU36N7TF1HhqAHLFOkV6buwZnvMI84Cug8xD56B9mCuKrqXnLn94417GrZ/jjCQ==}
@@ -8486,19 +8396,6 @@ packages:
   style-search@0.1.0:
     resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
 
-  styled-jsx@5.1.1:
-    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
-    engines: {node: '>= 12.0.0'}
-    peerDependencies:
-      '@babel/core': '*'
-      babel-plugin-macros: '*'
-      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      babel-plugin-macros:
-        optional: true
-
   styled-jsx@5.1.6:
     resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
     engines: {node: '>= 12.0.0'}
@@ -8619,11 +8516,6 @@ packages:
   tailwind-merge@3.3.0:
     resolution: {integrity: sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ==}
 
-  tailwindcss-animate@1.0.7:
-    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
-    peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders'
-
   tailwindcss@4.1.10:
     resolution: {integrity: sha512-P3nr6WkvKV/ONsTzj6Gb57sWPMX29EPNPopo7+FcpkQaNsrNpZ1pv8QmrYI2RqEKD7mlGqLnGovlcYnBK0IqUA==}
 
@@ -9366,10 +9258,6 @@ packages:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
     engines: {node: '>=18'}
 
-  watchpack@2.4.0:
-    resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==}
-    engines: {node: '>=10.13.0'}
-
   wcwidth@1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
 
@@ -10400,12 +10288,6 @@ snapshots:
       '@floating-ui/core': 1.7.1
       '@floating-ui/utils': 0.2.9
 
-  '@floating-ui/react-dom@2.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@floating-ui/dom': 1.7.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
   '@floating-ui/react-dom@2.1.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@floating-ui/dom': 1.7.1
@@ -10723,70 +10605,37 @@ snapshots:
       - rollup
       - supports-color
 
-  '@next/env@14.0.4': {}
-
   '@next/env@15.3.2': {}
 
   '@next/eslint-plugin-next@13.5.11':
     dependencies:
       glob: 7.1.7
 
-  '@next/eslint-plugin-next@14.0.4':
-    dependencies:
-      glob: 7.1.7
-
   '@next/eslint-plugin-next@15.3.2':
     dependencies:
       fast-glob: 3.3.1
 
-  '@next/swc-darwin-arm64@14.0.4':
-    optional: true
-
   '@next/swc-darwin-arm64@15.3.2':
     optional: true
 
-  '@next/swc-darwin-x64@14.0.4':
-    optional: true
-
   '@next/swc-darwin-x64@15.3.2':
     optional: true
 
-  '@next/swc-linux-arm64-gnu@14.0.4':
-    optional: true
-
   '@next/swc-linux-arm64-gnu@15.3.2':
     optional: true
 
-  '@next/swc-linux-arm64-musl@14.0.4':
-    optional: true
-
   '@next/swc-linux-arm64-musl@15.3.2':
     optional: true
 
-  '@next/swc-linux-x64-gnu@14.0.4':
-    optional: true
-
   '@next/swc-linux-x64-gnu@15.3.2':
     optional: true
 
-  '@next/swc-linux-x64-musl@14.0.4':
-    optional: true
-
   '@next/swc-linux-x64-musl@15.3.2':
     optional: true
 
-  '@next/swc-win32-arm64-msvc@14.0.4':
-    optional: true
-
   '@next/swc-win32-arm64-msvc@15.3.2':
     optional: true
 
-  '@next/swc-win32-ia32-msvc@14.0.4':
-    optional: true
-
-  '@next/swc-win32-x64-msvc@14.0.4':
-    optional: true
-
   '@next/swc-win32-x64-msvc@15.3.2':
     optional: true
 
@@ -11285,61 +11134,55 @@ snapshots:
 
   '@radix-ui/primitive@1.1.2': {}
 
-  '@radix-ui/react-arrow@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
     optionalDependencies:
-      '@types/react': 18.3.23
-      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+      '@types/react': 19.1.5
+      '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
-  '@radix-ui/react-avatar@1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-avatar@1.1.10(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
     optionalDependencies:
-      '@types/react': 18.3.23
-      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+      '@types/react': 19.1.5
+      '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
-  '@radix-ui/react-checkbox@1.3.2(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-checkbox@1.3.2(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.23
-      '@types/react-dom': 18.3.7(@types/react@18.3.23)
-
-  '@radix-ui/react-collection@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.23)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
     optionalDependencies:
-      '@types/react': 18.3.23
-      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+      '@types/react': 19.1.5
+      '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
-  '@radix-ui/react-compose-refs@1.1.2(@types/react@18.3.23)(react@18.3.1)':
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      react: 18.3.1
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.5)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
     optionalDependencies:
-      '@types/react': 18.3.23
+      '@types/react': 19.1.5
+      '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
   '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.5)(react@19.1.0)':
     dependencies:
@@ -11347,78 +11190,69 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.5
 
-  '@radix-ui/react-context@1.1.2(@types/react@18.3.23)(react@18.3.1)':
+  '@radix-ui/react-context@1.1.2(@types/react@19.1.5)(react@19.1.0)':
     dependencies:
-      react: 18.3.1
+      react: 19.1.0
     optionalDependencies:
-      '@types/react': 18.3.23
+      '@types/react': 19.1.5
 
-  '@radix-ui/react-direction@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+  '@radix-ui/react-direction@1.1.1(@types/react@19.1.5)(react@19.1.0)':
     dependencies:
-      react: 18.3.1
+      react: 19.1.0
     optionalDependencies:
-      '@types/react': 18.3.23
+      '@types/react': 19.1.5
 
-  '@radix-ui/react-dismissable-layer@1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-dismissable-layer@1.1.10(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
     optionalDependencies:
-      '@types/react': 18.3.23
-      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+      '@types/react': 19.1.5
+      '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
-  '@radix-ui/react-dropdown-menu@2.1.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-dropdown-menu@2.1.15(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-menu': 2.1.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.23
-      '@types/react-dom': 18.3.7(@types/react@18.3.23)
-
-  '@radix-ui/react-focus-guards@1.1.2(@types/react@18.3.23)(react@18.3.1)':
-    dependencies:
-      react: 18.3.1
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-menu': 2.1.15(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.5)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
     optionalDependencies:
-      '@types/react': 18.3.23
+      '@types/react': 19.1.5
+      '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
-  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-focus-guards@1.1.2(@types/react@19.1.5)(react@19.1.0)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.1.0
     optionalDependencies:
-      '@types/react': 18.3.23
-      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+      '@types/react': 19.1.5
 
-  '@radix-ui/react-id@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      react: 18.3.1
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
     optionalDependencies:
-      '@types/react': 18.3.23
+      '@types/react': 19.1.5
+      '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
-  '@radix-ui/react-label@2.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-id@1.1.1(@types/react@19.1.5)(react@19.1.0)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      react: 19.1.0
     optionalDependencies:
-      '@types/react': 18.3.23
-      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+      '@types/react': 19.1.5
 
   '@radix-ui/react-label@2.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
@@ -11429,78 +11263,69 @@ snapshots:
       '@types/react': 19.1.5
       '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
-  '@radix-ui/react-menu@2.1.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-menu@2.1.15(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-popper': 1.2.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.5)(react@19.1.0)
       aria-hidden: 1.2.6
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-remove-scroll: 2.7.1(@types/react@18.3.23)(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.23
-      '@types/react-dom': 18.3.7(@types/react@18.3.23)
-
-  '@radix-ui/react-popper@1.2.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@floating-ui/react-dom': 2.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-use-rect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/rect': 1.1.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-remove-scroll: 2.7.1(@types/react@19.1.5)(react@19.1.0)
     optionalDependencies:
-      '@types/react': 18.3.23
-      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+      '@types/react': 19.1.5
+      '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
-  '@radix-ui/react-portal@1.1.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-popper@1.2.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@floating-ui/react-dom': 2.1.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/rect': 1.1.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
     optionalDependencies:
-      '@types/react': 18.3.23
-      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+      '@types/react': 19.1.5
+      '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
-  '@radix-ui/react-presence@1.1.4(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
     optionalDependencies:
-      '@types/react': 18.3.23
-      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+      '@types/react': 19.1.5
+      '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
-  '@radix-ui/react-primitive@2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-presence@1.1.4(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.23)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
     optionalDependencies:
-      '@types/react': 18.3.23
-      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+      '@types/react': 19.1.5
+      '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
   '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
@@ -11511,29 +11336,22 @@ snapshots:
       '@types/react': 19.1.5
       '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
-  '@radix-ui/react-roving-focus@1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-roving-focus@1.1.10(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.23
-      '@types/react-dom': 18.3.7(@types/react@18.3.23)
-
-  '@radix-ui/react-slot@1.2.3(@types/react@18.3.23)(react@18.3.1)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@18.3.1)
-      react: 18.3.1
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.5)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
     optionalDependencies:
-      '@types/react': 18.3.23
+      '@types/react': 19.1.5
+      '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
   '@radix-ui/react-slot@1.2.3(@types/react@19.1.5)(react@19.1.0)':
     dependencies:
@@ -11542,66 +11360,66 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.5
 
-  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.5)(react@19.1.0)':
     dependencies:
-      react: 18.3.1
+      react: 19.1.0
     optionalDependencies:
-      '@types/react': 18.3.23
+      '@types/react': 19.1.5
 
-  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@18.3.23)(react@18.3.1)':
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.1.5)(react@19.1.0)':
     dependencies:
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.3.23)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      react: 18.3.1
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      react: 19.1.0
     optionalDependencies:
-      '@types/react': 18.3.23
+      '@types/react': 19.1.5
 
-  '@radix-ui/react-use-effect-event@0.0.2(@types/react@18.3.23)(react@18.3.1)':
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.1.5)(react@19.1.0)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      react: 18.3.1
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      react: 19.1.0
     optionalDependencies:
-      '@types/react': 18.3.23
+      '@types/react': 19.1.5
 
-  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.1.5)(react@19.1.0)':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      react: 18.3.1
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      react: 19.1.0
     optionalDependencies:
-      '@types/react': 18.3.23
+      '@types/react': 19.1.5
 
-  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@18.3.23)(react@18.3.1)':
+  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.1.5)(react@19.1.0)':
     dependencies:
-      react: 18.3.1
-      use-sync-external-store: 1.5.0(react@18.3.1)
+      react: 19.1.0
+      use-sync-external-store: 1.5.0(react@19.1.0)
     optionalDependencies:
-      '@types/react': 18.3.23
+      '@types/react': 19.1.5
 
-  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.5)(react@19.1.0)':
     dependencies:
-      react: 18.3.1
+      react: 19.1.0
     optionalDependencies:
-      '@types/react': 18.3.23
+      '@types/react': 19.1.5
 
-  '@radix-ui/react-use-previous@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.1.5)(react@19.1.0)':
     dependencies:
-      react: 18.3.1
+      react: 19.1.0
     optionalDependencies:
-      '@types/react': 18.3.23
+      '@types/react': 19.1.5
 
-  '@radix-ui/react-use-rect@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.1.5)(react@19.1.0)':
     dependencies:
       '@radix-ui/rect': 1.1.1
-      react: 18.3.1
+      react: 19.1.0
     optionalDependencies:
-      '@types/react': 18.3.23
+      '@types/react': 19.1.5
 
-  '@radix-ui/react-use-size@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.1.5)(react@19.1.0)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@18.3.1)
-      react: 18.3.1
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      react: 19.1.0
     optionalDependencies:
-      '@types/react': 18.3.23
+      '@types/react': 19.1.5
 
   '@radix-ui/rect@1.1.1': {}
 
@@ -11844,10 +11662,6 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@swc/helpers@0.5.2':
-    dependencies:
-      tslib: 2.8.1
-
   '@tailwindcss/node@4.1.10':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -12088,11 +11902,8 @@ snapshots:
     dependencies:
       parse-path: 7.1.0
 
-  '@types/prop-types@15.7.15': {}
-
-  '@types/react-dom@18.3.7(@types/react@18.3.23)':
-    dependencies:
-      '@types/react': 18.3.23
+  '@types/prop-types@15.7.15':
+    optional: true
 
   '@types/react-dom@19.1.5(@types/react@19.1.5)':
     dependencies:
@@ -12102,6 +11913,7 @@ snapshots:
     dependencies:
       '@types/prop-types': 15.7.15
       csstype: 3.1.3
+    optional: true
 
   '@types/react@19.1.5':
     dependencies:
@@ -12119,7 +11931,7 @@ snapshots:
 
   '@types/yauzl@2.10.3':
     dependencies:
-      '@types/node': 20.17.50
+      '@types/node': 22.15.30
     optional: true
 
   '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6)':
@@ -12267,19 +12079,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 6.21.0
-      '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.8.3)
-      '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.4.1
-      eslint: 8.57.0
-    optionalDependencies:
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/parser@8.32.1(eslint@8.57.0)(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.32.1
@@ -12446,21 +12245,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@6.21.0(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.4.1
-      globby: 11.1.0
-      is-glob: 4.0.3
-      minimatch: 9.0.3
-      semver: 7.7.2
-      ts-api-utils: 1.4.3(typescript@5.8.3)
-    optionalDependencies:
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/typescript-estree@8.32.1(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/types': 8.32.1
@@ -14660,25 +14444,6 @@ snapshots:
       '@eslint/compat': 1.2.9(eslint@8.57.0)
       eslint: 8.57.0
 
-  eslint-config-next@14.0.4(eslint-plugin-import-x@4.12.2(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3):
-    dependencies:
-      '@next/eslint-plugin-next': 14.0.4
-      '@rushstack/eslint-patch': 1.11.0
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.8.3)
-      eslint: 8.57.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import-x@4.12.2(eslint@8.57.0)(typescript@5.8.3))(eslint-plugin-import@2.31.0(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.0)
-      eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.0)
-      eslint-plugin-react: 7.37.5(eslint@8.57.0)
-      eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0)
-    optionalDependencies:
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - eslint-import-resolver-webpack
-      - eslint-plugin-import-x
-      - supports-color
-
   eslint-config-next@15.3.2(eslint-plugin-import-x@4.12.2(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3):
     dependencies:
       '@next/eslint-plugin-next': 15.3.2
@@ -14715,22 +14480,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import-x@4.12.2(eslint@8.57.0)(typescript@5.8.3))(eslint-plugin-import@2.31.0(eslint@8.57.0))(eslint@8.57.0):
-    dependencies:
-      '@nolyfill/is-core-module': 1.0.39
-      debug: 4.4.1
-      eslint: 8.57.0
-      get-tsconfig: 4.10.1
-      is-bun-module: 2.0.0
-      stable-hash: 0.0.5
-      tinyglobby: 0.2.13
-      unrs-resolver: 1.7.2
-    optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.0)
-      eslint-plugin-import-x: 4.12.2(eslint@8.57.0)(typescript@5.8.3)
-    transitivePeerDependencies:
-      - supports-color
-
   eslint-import-resolver-typescript@3.10.1(eslint-plugin-import-x@4.12.2(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-plugin-import@2.31.0)(eslint@9.28.0(jiti@2.4.2)):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
@@ -14771,17 +14520,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import-x@4.12.2(eslint@8.57.0)(typescript@5.8.3))(eslint-plugin-import@2.31.0(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0):
-    dependencies:
-      debug: 3.2.7
-    optionalDependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.8.3)
-      eslint: 8.57.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import-x@4.12.2(eslint@8.57.0)(typescript@5.8.3))(eslint-plugin-import@2.31.0(eslint@8.57.0))(eslint@8.57.0)
-    transitivePeerDependencies:
-      - supports-color
-
   eslint-module-utils@2.12.0(@typescript-eslint/parser@8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.28.0(jiti@2.4.2)):
     dependencies:
       debug: 3.2.7
@@ -14904,35 +14642,6 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.0):
-    dependencies:
-      '@rtsao/scc': 1.1.0
-      array-includes: 3.1.8
-      array.prototype.findlastindex: 1.2.6
-      array.prototype.flat: 1.3.3
-      array.prototype.flatmap: 1.3.3
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 8.57.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import-x@4.12.2(eslint@8.57.0)(typescript@5.8.3))(eslint-plugin-import@2.31.0(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
-      hasown: 2.0.2
-      is-core-module: 2.16.1
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.fromentries: 2.0.8
-      object.groupby: 1.0.3
-      object.values: 1.2.1
-      semver: 6.3.1
-      string.prototype.trimend: 1.0.9
-      tsconfig-paths: 3.15.0
-    optionalDependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.8.3)
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-
   eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.28.0(jiti@2.4.2)):
     dependencies:
       '@rtsao/scc': 1.1.0
@@ -15734,8 +15443,6 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob-to-regexp@0.4.1: {}
-
   glob@10.4.5:
     dependencies:
       foreground-child: 3.3.1
@@ -16608,11 +16315,11 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
-  lucide-react@0.294.0(react@18.3.1):
+  lucide-react@0.294.0(react@19.1.0):
     dependencies:
-      react: 18.3.1
+      react: 19.1.0
 
-  lucide-react@0.294.0(react@19.1.0):
+  lucide-react@0.460.0(react@19.1.0):
     dependencies:
       react: 19.1.0
 
@@ -16883,32 +16590,10 @@ snapshots:
       p-wait-for: 5.0.2
       qs: 6.14.0
 
-  next@14.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.89.0):
+  next-themes@0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
-      '@next/env': 14.0.4
-      '@swc/helpers': 0.5.2
-      busboy: 1.6.0
-      caniuse-lite: 1.0.30001718
-      graceful-fs: 4.2.11
-      postcss: 8.4.31
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      styled-jsx: 5.1.1(react@18.3.1)
-      watchpack: 2.4.0
-    optionalDependencies:
-      '@next/swc-darwin-arm64': 14.0.4
-      '@next/swc-darwin-x64': 14.0.4
-      '@next/swc-linux-arm64-gnu': 14.0.4
-      '@next/swc-linux-arm64-musl': 14.0.4
-      '@next/swc-linux-x64-gnu': 14.0.4
-      '@next/swc-linux-x64-musl': 14.0.4
-      '@next/swc-win32-arm64-msvc': 14.0.4
-      '@next/swc-win32-ia32-msvc': 14.0.4
-      '@next/swc-win32-x64-msvc': 14.0.4
-      sass: 1.89.0
-    transitivePeerDependencies:
-      - '@babel/core'
-      - babel-plugin-macros
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
 
   next@15.3.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.89.0):
     dependencies:
@@ -18140,6 +17825,7 @@ snapshots:
       loose-envify: 1.4.0
       react: 18.3.1
       scheduler: 0.23.2
+    optional: true
 
   react-dom@19.1.0(react@19.1.0):
     dependencies:
@@ -18154,24 +17840,24 @@ snapshots:
 
   react-refresh@0.17.0: {}
 
-  react-remove-scroll-bar@2.3.8(@types/react@18.3.23)(react@18.3.1):
+  react-remove-scroll-bar@2.3.8(@types/react@19.1.5)(react@19.1.0):
     dependencies:
-      react: 18.3.1
-      react-style-singleton: 2.2.3(@types/react@18.3.23)(react@18.3.1)
+      react: 19.1.0
+      react-style-singleton: 2.2.3(@types/react@19.1.5)(react@19.1.0)
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 18.3.23
+      '@types/react': 19.1.5
 
-  react-remove-scroll@2.7.1(@types/react@18.3.23)(react@18.3.1):
+  react-remove-scroll@2.7.1(@types/react@19.1.5)(react@19.1.0):
     dependencies:
-      react: 18.3.1
-      react-remove-scroll-bar: 2.3.8(@types/react@18.3.23)(react@18.3.1)
-      react-style-singleton: 2.2.3(@types/react@18.3.23)(react@18.3.1)
+      react: 19.1.0
+      react-remove-scroll-bar: 2.3.8(@types/react@19.1.5)(react@19.1.0)
+      react-style-singleton: 2.2.3(@types/react@19.1.5)(react@19.1.0)
       tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@18.3.23)(react@18.3.1)
-      use-sidecar: 1.1.3(@types/react@18.3.23)(react@18.3.1)
+      use-callback-ref: 1.3.3(@types/react@19.1.5)(react@19.1.0)
+      use-sidecar: 1.1.3(@types/react@19.1.5)(react@19.1.0)
     optionalDependencies:
-      '@types/react': 18.3.23
+      '@types/react': 19.1.5
 
   react-router-dom@6.30.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
@@ -18185,17 +17871,18 @@ snapshots:
       '@remix-run/router': 1.23.0
       react: 19.1.0
 
-  react-style-singleton@2.2.3(@types/react@18.3.23)(react@18.3.1):
+  react-style-singleton@2.2.3(@types/react@19.1.5)(react@19.1.0):
     dependencies:
       get-nonce: 1.0.1
-      react: 18.3.1
+      react: 19.1.0
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 18.3.23
+      '@types/react': 19.1.5
 
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
+    optional: true
 
   react@19.1.0: {}
 
@@ -18519,6 +18206,7 @@ snapshots:
   scheduler@0.23.2:
     dependencies:
       loose-envify: 1.4.0
+    optional: true
 
   scheduler@0.26.0: {}
 
@@ -18900,11 +18588,6 @@ snapshots:
 
   style-search@0.1.0: {}
 
-  styled-jsx@5.1.1(react@18.3.1):
-    dependencies:
-      client-only: 0.0.1
-      react: 18.3.1
-
   styled-jsx@5.1.6(react@19.1.0):
     dependencies:
       client-only: 0.0.1
@@ -19066,10 +18749,6 @@ snapshots:
 
   tailwind-merge@3.3.0: {}
 
-  tailwindcss-animate@1.0.7(tailwindcss@4.1.10):
-    dependencies:
-      tailwindcss: 4.1.10
-
   tailwindcss@4.1.10: {}
 
   tailwindcss@4.1.8: {}
@@ -19191,10 +18870,6 @@ snapshots:
     dependencies:
       typescript: 5.1.6
 
-  ts-api-utils@1.4.3(typescript@5.8.3):
-    dependencies:
-      typescript: 5.8.3
-
   ts-api-utils@2.1.0(typescript@5.8.3):
     dependencies:
       typescript: 5.8.3
@@ -19542,24 +19217,24 @@ snapshots:
 
   urlpattern-polyfill@8.0.2: {}
 
-  use-callback-ref@1.3.3(@types/react@18.3.23)(react@18.3.1):
+  use-callback-ref@1.3.3(@types/react@19.1.5)(react@19.1.0):
     dependencies:
-      react: 18.3.1
+      react: 19.1.0
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 18.3.23
+      '@types/react': 19.1.5
 
-  use-sidecar@1.1.3(@types/react@18.3.23)(react@18.3.1):
+  use-sidecar@1.1.3(@types/react@19.1.5)(react@19.1.0):
     dependencies:
       detect-node-es: 1.1.0
-      react: 18.3.1
+      react: 19.1.0
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 18.3.23
+      '@types/react': 19.1.5
 
-  use-sync-external-store@1.5.0(react@18.3.1):
+  use-sync-external-store@1.5.0(react@19.1.0):
     dependencies:
-      react: 18.3.1
+      react: 19.1.0
 
   util-deprecate@1.0.2: {}
 
@@ -20089,11 +19764,6 @@ snapshots:
       xml-name-validator: 5.0.0
     optional: true
 
-  watchpack@2.4.0:
-    dependencies:
-      glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.11
-
   wcwidth@1.0.1:
     dependencies:
       defaults: 1.0.4
diff --git a/samples/teamspace-nextjs-1/app/page.tsx b/samples/teamspace-nextjs-1/app/page.tsx
index 3c8a82f3e..67ddfc1f3 100644
--- a/samples/teamspace-nextjs-1/app/page.tsx
+++ b/samples/teamspace-nextjs-1/app/page.tsx
@@ -1,5 +1,8 @@
+'use client';
+
+import Link from 'next/link';
 import styles from './page.module.css';
-import {SignInButton, SignedIn, SignOutButton, SignedOut} from '@asgardeo/nextjs';
+import {SignInButton, SignedIn, SignOutButton, SignedOut, User} from '@asgardeo/nextjs';
 
 export default function Home() {
   return (
@@ -8,17 +11,26 @@ export default function Home() {
         <div className={styles.ctas}>
           <SignedOut>
             <SignInButton>
-              {({isLoading}) => (
-                <button type="submit" disabled={isLoading} className={styles.primary}>
+              {({signIn, isLoading}) => (
+                <button onClick={signIn} disabled={isLoading}>
                   {isLoading ? 'Signing in...' : 'Sign In'}
                 </button>
               )}
             </SignInButton>
           </SignedOut>
           <SignedOut>
-            <SignInButton className={styles.primary}>Sign In</SignInButton>
+            <SignInButton className={styles.primary}>Sign In with Redirect</SignInButton>
           </SignedOut>
           <SignedIn>
+            <User>
+              {({user}) => (
+                <div className={styles.user}>
+                  <img src={user?.profilePicture} alt="User Profile" className={styles.profilePicture} />
+                  <h2>{user?.displayName}</h2>
+                  <p>{user?.email}</p>
+                </div>
+              )}
+            </User>
             <SignOutButton className={styles.secondary}>Sign Out</SignOutButton>
           </SignedIn>
         </div>
diff --git a/samples/teamspace-nextjs/README.md b/samples/teamspace-nextjs/README.md
index e215bc4cc..ef699be7e 100644
--- a/samples/teamspace-nextjs/README.md
+++ b/samples/teamspace-nextjs/README.md
@@ -1,36 +1,27 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Teamspace
 
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+A modern B2B collaboration platform built with Next.js 15, React 19, and Tailwind CSS 4.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## Features
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+- 🚀 **Modern Stack**: Next.js 15 with App Router, React 19, TypeScript
+- 🎨 **Beautiful UI**: Tailwind CSS 4 with shadcn/ui components
+- 📱 **Responsive Design**: Mobile-first approach with modern layouts
+- 🏢 **Organization Management**: Multi-organization support with role-based access
+- 👤 **User Profiles**: Comprehensive profile management
+- 📊 **Dashboard**: Team analytics and activity tracking
+- 🎯 **Mock Data**: Complete demo experience with realistic data
 
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## Getting Started
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+### Prerequisites
 
-## Deploy on Vercel
+- Node.js 18+ 
+- npm, yarn, or pnpm
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+### Installation
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+1. Clone the repository:
+```bash
+git clone <repository-url>
+cd teamspace
diff --git a/samples/teamspace-nextjs/app/dashboard/page.tsx b/samples/teamspace-nextjs/app/dashboard/page.tsx
new file mode 100644
index 000000000..add508e3c
--- /dev/null
+++ b/samples/teamspace-nextjs/app/dashboard/page.tsx
@@ -0,0 +1,242 @@
+"use client"
+
+import { useAuth } from "@/hooks/use-auth"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Users, MessageSquare, Calendar, FileText, TrendingUp, Clock, CheckCircle2, AlertCircle } from "lucide-react"
+import { Header } from "@/components/header"
+
+export default function DashboardPage() {
+  const { user, currentOrg } = useAuth()
+
+  const stats = [
+    {
+      name: "Active Projects",
+      value: "12",
+      change: "+2.1%",
+      changeType: "positive" as const,
+      icon: FileText,
+    },
+    {
+      name: "Team Members",
+      value: currentOrg?.memberCount.toString() || "0",
+      change: "+5.4%",
+      changeType: "positive" as const,
+      icon: Users,
+    },
+    {
+      name: "Messages Today",
+      value: "89",
+      change: "+12.5%",
+      changeType: "positive" as const,
+      icon: MessageSquare,
+    },
+    {
+      name: "Meetings This Week",
+      value: "7",
+      change: "-2.3%",
+      changeType: "negative" as const,
+      icon: Calendar,
+    },
+  ]
+
+  const recentActivity = [
+    {
+      id: 1,
+      user: "Sarah Chen",
+      action: 'completed task "Design Review"',
+      time: "2 hours ago",
+      type: "completed",
+    },
+    {
+      id: 2,
+      user: "Mike Johnson",
+      action: 'created new project "Mobile App"',
+      time: "4 hours ago",
+      type: "created",
+    },
+    {
+      id: 3,
+      user: "Emily Davis",
+      action: "scheduled team meeting",
+      time: "6 hours ago",
+      type: "scheduled",
+    },
+    {
+      id: 4,
+      user: "Alex Rodriguez",
+      action: 'uploaded 3 files to "Q4 Planning"',
+      time: "1 day ago",
+      type: "uploaded",
+    },
+  ]
+
+  const upcomingTasks = [
+    {
+      id: 1,
+      title: "Review quarterly reports",
+      dueDate: "Today, 3:00 PM",
+      priority: "high" as const,
+      project: "Q4 Planning",
+    },
+    {
+      id: 2,
+      title: "Team standup meeting",
+      dueDate: "Tomorrow, 9:00 AM",
+      priority: "medium" as const,
+      project: "Daily Operations",
+    },
+    {
+      id: 3,
+      title: "Client presentation prep",
+      dueDate: "Friday, 2:00 PM",
+      priority: "high" as const,
+      project: "Client Work",
+    },
+  ]
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-foreground">Welcome back, {user?.name}!</h1>
+          <p className="text-muted-foreground mt-2">Here's what's happening with {currentOrg?.name} today.</p>
+        </div>
+
+        {/* Stats Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+          {stats.map((stat) => {
+            const Icon = stat.icon
+            return (
+              <Card key={stat.name}>
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium">{stat.name}</CardTitle>
+                  <Icon className="h-4 w-4 text-muted-foreground" />
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold">{stat.value}</div>
+                  <div className="flex items-center text-xs text-muted-foreground">
+                    <TrendingUp
+                      className={`h-3 w-3 mr-1 ${stat.changeType === "positive" ? "text-green-500" : "text-red-500"}`}
+                    />
+                    <span className={stat.changeType === "positive" ? "text-green-600" : "text-red-600"}>
+                      {stat.change}
+                    </span>
+                    <span className="ml-1">from last month</span>
+                  </div>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          {/* Recent Activity */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Recent Activity</CardTitle>
+              <CardDescription>Latest updates from your team</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                {recentActivity.map((activity) => (
+                  <div key={activity.id} className="flex items-start space-x-3">
+                    <div className="flex-shrink-0">
+                      {activity.type === "completed" && (
+                        <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
+                          <CheckCircle2 className="h-4 w-4 text-green-600" />
+                        </div>
+                      )}
+                      {activity.type === "created" && (
+                        <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
+                          <FileText className="h-4 w-4 text-blue-600" />
+                        </div>
+                      )}
+                      {activity.type === "scheduled" && (
+                        <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
+                          <Calendar className="h-4 w-4 text-purple-600" />
+                        </div>
+                      )}
+                      {activity.type === "uploaded" && (
+                        <div className="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center">
+                          <FileText className="h-4 w-4 text-orange-600" />
+                        </div>
+                      )}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm text-foreground">
+                        <span className="font-medium">{activity.user}</span> {activity.action}
+                      </p>
+                      <p className="text-xs text-muted-foreground mt-1">{activity.time}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Upcoming Tasks */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Upcoming Tasks</CardTitle>
+              <CardDescription>Your tasks and deadlines</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                {upcomingTasks.map((task) => (
+                  <div key={task.id} className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
+                    <div className="flex-1">
+                      <h3 className="text-sm font-medium text-foreground">{task.title}</h3>
+                      <p className="text-xs text-muted-foreground mt-1">{task.project}</p>
+                    </div>
+                    <div className="flex items-center space-x-3">
+                      <div className="flex items-center text-xs text-muted-foreground">
+                        <Clock className="h-3 w-3 mr-1" />
+                        {task.dueDate}
+                      </div>
+                      <Badge variant={task.priority === "high" ? "destructive" : "secondary"} className="text-xs">
+                        {task.priority === "high" && <AlertCircle className="h-3 w-3 mr-1" />}
+                        {task.priority}
+                      </Badge>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Quick Actions */}
+        <Card className="mt-8">
+          <CardHeader>
+            <CardTitle>Quick Actions</CardTitle>
+            <CardDescription>Get started with common tasks</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <Button variant="outline" className="h-20 flex-col">
+                <MessageSquare className="h-6 w-6 mb-2" />
+                Start Chat
+              </Button>
+              <Button variant="outline" className="h-20 flex-col">
+                <FileText className="h-6 w-6 mb-2" />
+                New Project
+              </Button>
+              <Button variant="outline" className="h-20 flex-col">
+                <Calendar className="h-6 w-6 mb-2" />
+                Schedule Meeting
+              </Button>
+              <Button variant="outline" className="h-20 flex-col">
+                <Users className="h-6 w-6 mb-2" />
+                Invite Members
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/samples/teamspace-nextjs/app/globals.css b/samples/teamspace-nextjs/app/globals.css
index dc98be74c..1e6bcd2b3 100644
--- a/samples/teamspace-nextjs/app/globals.css
+++ b/samples/teamspace-nextjs/app/globals.css
@@ -1,122 +1,75 @@
 @import "tailwindcss";
-@import "tw-animate-css";
 
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 84% 4.9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.75rem;
+  }
 
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 84% 4.9%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 94.1%;
+  }
 }
 
 @layer base {
   * {
-    @apply border-border outline-ring/50;
+    @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
   }
 }
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: hsl(var(--muted));
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground));
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--foreground));
+}
diff --git a/samples/teamspace-nextjs/app/layout.tsx b/samples/teamspace-nextjs/app/layout.tsx
index f7fa87eb8..9b3b87084 100644
--- a/samples/teamspace-nextjs/app/layout.tsx
+++ b/samples/teamspace-nextjs/app/layout.tsx
@@ -1,34 +1,34 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import type React from "react"
+import type { Metadata } from "next"
+import { Inter } from "next/font/google"
+import "./globals.css"
+import { ThemeProvider } from "@/components/theme-provider"
+import { AuthProvider } from "@/hooks/use-auth"
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const inter = Inter({
   subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+  variable: "--font-sans",
+})
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+  title: "Teamspace - Where teams collaborate",
+  description: "Streamline your team's workflow with our all-in-one collaboration platform.",
+}
 
 export default function RootLayout({
   children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+}: {
+  children: React.ReactNode
+}) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${inter.variable} font-sans`}>
+        <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
+          <AuthProvider>
+            <div className="min-h-screen bg-background">{children}</div>
+          </AuthProvider>
+        </ThemeProvider>
       </body>
     </html>
-  );
+  )
 }
diff --git a/samples/teamspace-nextjs/app/organizations/new/page.tsx b/samples/teamspace-nextjs/app/organizations/new/page.tsx
new file mode 100644
index 000000000..69b20d60c
--- /dev/null
+++ b/samples/teamspace-nextjs/app/organizations/new/page.tsx
@@ -0,0 +1,185 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Building2, Upload, ArrowLeft } from "lucide-react"
+import Link from "next/link"
+import { Header } from "@/components/header"
+
+export default function CreateOrganizationPage() {
+  const router = useRouter()
+  const [formData, setFormData] = useState({
+    name: "",
+    slug: "",
+    description: "",
+    website: "",
+    avatar: "/placeholder.svg?height=64&width=64",
+  })
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const name = e.target.value
+    const slug = name
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-|-$/g, "")
+    setFormData({ ...formData, name, slug })
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+
+    // Simulate API call
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+
+    console.log("Creating organization:", formData)
+    router.push("/organizations")
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-2xl">
+        {/* Header */}
+        <div className="mb-8">
+          <Button variant="ghost" asChild className="mb-4">
+            <Link href="/organizations">
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back to organizations
+            </Link>
+          </Button>
+          <h1 className="text-3xl font-bold text-foreground">Create a new organization</h1>
+          <p className="text-muted-foreground mt-2">
+            Organizations are shared accounts where teams can collaborate across many projects at once.
+          </p>
+        </div>
+
+        {/* Form */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Organization Details</CardTitle>
+            <CardDescription>Set up your new organization with basic information</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-6">
+              {/* Organization Avatar */}
+              <div>
+                <Label className="text-sm font-medium">Organization avatar</Label>
+                <div className="flex items-center space-x-4 mt-2">
+                  <Avatar className="w-16 h-16">
+                    <AvatarImage src={formData.avatar || "/placeholder.svg"} alt="Organization avatar" />
+                    <AvatarFallback>
+                      <Building2 className="h-8 w-8" />
+                    </AvatarFallback>
+                  </Avatar>
+                  <Button type="button" variant="outline">
+                    <Upload className="h-4 w-4 mr-2" />
+                    Upload image
+                  </Button>
+                </div>
+                <p className="text-xs text-muted-foreground mt-2">
+                  We recommend an image that's at least 64×64 pixels.
+                </p>
+              </div>
+
+              {/* Organization Name */}
+              <div>
+                <Label htmlFor="name">Organization name *</Label>
+                <Input
+                  id="name"
+                  required
+                  value={formData.name}
+                  onChange={handleNameChange}
+                  placeholder="Enter organization name"
+                  className="mt-2"
+                />
+              </div>
+
+              {/* Organization Slug */}
+              <div>
+                <Label htmlFor="slug">Organization slug *</Label>
+                <div className="flex mt-2">
+                  <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-input bg-muted text-muted-foreground text-sm">
+                    teamspace.com/
+                  </span>
+                  <Input
+                    id="slug"
+                    required
+                    value={formData.slug}
+                    onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
+                    placeholder="organization-slug"
+                    className="rounded-l-none"
+                  />
+                </div>
+                <p className="text-xs text-muted-foreground mt-2">
+                  This will be your organization's URL. Only lowercase letters, numbers, and hyphens are allowed.
+                </p>
+              </div>
+
+              {/* Description */}
+              <div>
+                <Label htmlFor="description">Description</Label>
+                <Textarea
+                  id="description"
+                  rows={3}
+                  value={formData.description}
+                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                  placeholder="Tell us about your organization..."
+                  className="mt-2"
+                />
+              </div>
+
+              {/* Website */}
+              <div>
+                <Label htmlFor="website">Website</Label>
+                <Input
+                  id="website"
+                  type="url"
+                  value={formData.website}
+                  onChange={(e) => setFormData({ ...formData, website: e.target.value })}
+                  placeholder="https://example.com"
+                  className="mt-2"
+                />
+              </div>
+
+              {/* Terms */}
+              <div className="bg-muted rounded-lg p-4">
+                <div className="flex items-start">
+                  <Building2 className="h-5 w-5 text-muted-foreground mt-0.5 mr-3" />
+                  <div className="text-sm text-muted-foreground">
+                    <p className="font-medium mb-2">By creating an organization, you agree to:</p>
+                    <ul className="space-y-1 text-xs">
+                      <li>• Follow our Terms of Service and Community Guidelines</li>
+                      <li>• Take responsibility for all activity under this organization</li>
+                      <li>• Ensure all members comply with our policies</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              {/* Submit Button */}
+              <div className="flex justify-end space-x-3 pt-6 border-t border-border">
+                <Button type="button" variant="outline" asChild>
+                  <Link href="/organizations">Cancel</Link>
+                </Button>
+                <Button type="submit" disabled={isSubmitting || !formData.name || !formData.slug}>
+                  {isSubmitting ? "Creating..." : "Create organization"}
+                </Button>
+              </div>
+            </form>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/samples/teamspace-nextjs/app/organizations/page.tsx b/samples/teamspace-nextjs/app/organizations/page.tsx
new file mode 100644
index 000000000..93abe771c
--- /dev/null
+++ b/samples/teamspace-nextjs/app/organizations/page.tsx
@@ -0,0 +1,154 @@
+"use client"
+
+import { useAuth } from "@/hooks/use-auth"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Building2, Users, Settings, Crown, Shield, User, Plus, ExternalLink } from "lucide-react"
+import Link from "next/link"
+import { Header } from "@/components/header"
+
+export default function OrganizationsPage() {
+  const { organizations, currentOrg, setCurrentOrg } = useAuth()
+
+  const getRoleIcon = (role: string) => {
+    switch (role) {
+      case "owner":
+        return <Crown className="h-4 w-4 text-yellow-500" />
+      case "admin":
+        return <Shield className="h-4 w-4 text-blue-500" />
+      default:
+        return <User className="h-4 w-4 text-muted-foreground" />
+    }
+  }
+
+  const getRoleBadge = (role: string) => {
+    switch (role) {
+      case "owner":
+        return "default"
+      case "admin":
+        return "secondary"
+      default:
+        return "outline"
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-4xl">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-3xl font-bold text-foreground">Organizations</h1>
+            <p className="text-muted-foreground mt-2">Manage your organizations and switch between them</p>
+          </div>
+          <Button asChild>
+            <Link href="/organizations/new">
+              <Plus className="h-4 w-4 mr-2" />
+              New Organization
+            </Link>
+          </Button>
+        </div>
+
+        {/* Current Organization */}
+        <div className="mb-8">
+          <h2 className="text-lg font-semibold text-foreground mb-4">Current Organization</h2>
+          <Card className="border-primary/50 bg-primary/5">
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-4">
+                  <Avatar className="w-12 h-12">
+                    <AvatarImage src={currentOrg?.avatar || "/placeholder.svg"} alt={currentOrg?.name} />
+                    <AvatarFallback>{currentOrg?.name?.charAt(0)}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <h3 className="text-lg font-medium text-foreground">{currentOrg?.name}</h3>
+                    <div className="flex items-center space-x-2 mt-1">
+                      <Badge variant={getRoleBadge(currentOrg?.role || "member")}>
+                        {getRoleIcon(currentOrg?.role || "member")}
+                        <span className="ml-1 capitalize">{currentOrg?.role}</span>
+                      </Badge>
+                      <span className="text-sm text-muted-foreground">{currentOrg?.memberCount} members</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Button variant="outline" size="sm">
+                    <Settings className="h-4 w-4 mr-2" />
+                    Settings
+                  </Button>
+                  <Button variant="outline" size="sm">
+                    <ExternalLink className="h-4 w-4 mr-2" />
+                    View
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* All Organizations */}
+        <div>
+          <h2 className="text-lg font-semibold text-foreground mb-4">All Organizations</h2>
+          <div className="space-y-4">
+            {organizations?.map((org) => (
+              <Card key={org.id} className={currentOrg?.id === org.id ? "border-primary/50 bg-primary/5" : ""}>
+                <CardContent className="pt-6">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-4">
+                      <Avatar className="w-12 h-12">
+                        <AvatarImage src={org.avatar || "/placeholder.svg"} alt={org.name} />
+                        <AvatarFallback>{org.name.charAt(0)}</AvatarFallback>
+                      </Avatar>
+                      <div>
+                        <h3 className="text-lg font-medium text-foreground">{org.name}</h3>
+                        <div className="flex items-center space-x-2 mt-1">
+                          <Badge variant={getRoleBadge(org.role)}>
+                            {getRoleIcon(org.role)}
+                            <span className="ml-1 capitalize">{org.role}</span>
+                          </Badge>
+                          <span className="text-sm text-muted-foreground">
+                            <Users className="h-3 w-3 inline mr-1" />
+                            {org.memberCount} members
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      {currentOrg?.id !== org.id && (
+                        <Button onClick={() => setCurrentOrg(org)} variant="outline" size="sm">
+                          Switch to
+                        </Button>
+                      )}
+                      {currentOrg?.id === org.id && <Badge variant="default">Current</Badge>}
+                      <Button variant="outline" size="sm">
+                        <Settings className="h-4 w-4 mr-2" />
+                        Manage
+                      </Button>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+
+        {/* Organization Invitations */}
+        <div className="mt-8">
+          <h2 className="text-lg font-semibold text-foreground mb-4">Pending Invitations</h2>
+          <Card>
+            <CardContent className="pt-6">
+              <div className="text-center py-8">
+                <Building2 className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+                <p className="text-muted-foreground">No pending invitations</p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/samples/teamspace-nextjs/app/page.tsx b/samples/teamspace-nextjs/app/page.tsx
index 88f0cc9b5..70c76ba84 100644
--- a/samples/teamspace-nextjs/app/page.tsx
+++ b/samples/teamspace-nextjs/app/page.tsx
@@ -1,103 +1,488 @@
-import Image from "next/image";
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  Users,
+  MessageSquare,
+  Calendar,
+  FileText,
+  Shield,
+  Zap,
+  CheckCircle,
+  Star,
+  ArrowRight,
+  Play,
+  Github,
+  Twitter,
+  Linkedin,
+} from "lucide-react"
+import Link from "next/link"
+import Image from "next/image"
 
-export default function Home() {
+const features = [
+  {
+    icon: MessageSquare,
+    title: "Real-time Communication",
+    description: "Stay connected with instant messaging, video calls, and threaded discussions.",
+    color: "text-blue-600",
+    bgColor: "bg-blue-50",
+  },
+  {
+    icon: Calendar,
+    title: "Project Management",
+    description: "Plan, track, and deliver projects on time with intuitive task management.",
+    color: "text-green-600",
+    bgColor: "bg-green-50",
+  },
+  {
+    icon: FileText,
+    title: "Document Collaboration",
+    description: "Create, edit, and share documents in real-time with version control.",
+    color: "text-purple-600",
+    bgColor: "bg-purple-50",
+  },
+  {
+    icon: Shield,
+    title: "Enterprise Security",
+    description: "Keep your data safe with enterprise-grade security and compliance.",
+    color: "text-red-600",
+    bgColor: "bg-red-50",
+  },
+  {
+    icon: Zap,
+    title: "Workflow Automation",
+    description: "Automate repetitive tasks and streamline processes with custom workflows.",
+    color: "text-yellow-600",
+    bgColor: "bg-yellow-50",
+  },
+  {
+    icon: Users,
+    title: "Team Analytics",
+    description: "Gain insights into team performance and project progress with detailed analytics.",
+    color: "text-indigo-600",
+    bgColor: "bg-indigo-50",
+  },
+]
+
+const testimonials = [
+  {
+    quote: "Teamspace transformed how our remote team collaborates. We're 40% more productive since switching.",
+    author: "Sarah Chen",
+    role: "VP of Engineering",
+    company: "TechCorp",
+    avatar: "/placeholder.svg?height=48&width=48",
+  },
+  {
+    quote: "The best investment we've made for our team. The ROI was clear within the first month.",
+    author: "Michael Rodriguez",
+    role: "Project Manager",
+    company: "InnovateLab",
+    avatar: "/placeholder.svg?height=48&width=48",
+  },
+  {
+    quote: "Finally, a platform that brings everything together. Our team loves the intuitive interface.",
+    author: "Emily Johnson",
+    role: "Creative Director",
+    company: "DesignStudio",
+    avatar: "/placeholder.svg?height=48&width=48",
+  },
+]
+
+const pricingPlans = [
+  {
+    name: "Starter",
+    price: "Free",
+    description: "Perfect for small teams getting started",
+    features: ["Up to 5 team members", "Basic project management", "5GB storage", "Community support"],
+    cta: "Get Started",
+    popular: false,
+  },
+  {
+    name: "Professional",
+    price: "$12",
+    period: "/user/month",
+    description: "For growing teams that need more power",
+    features: [
+      "Unlimited team members",
+      "Advanced project management",
+      "100GB storage",
+      "Priority support",
+      "Advanced integrations",
+      "Team analytics",
+    ],
+    cta: "Start Free Trial",
+    popular: true,
+  },
+  {
+    name: "Enterprise",
+    price: "Custom",
+    description: "For large organizations with custom needs",
+    features: [
+      "Everything in Professional",
+      "SSO & advanced security",
+      "Unlimited storage",
+      "Dedicated support",
+      "Custom integrations",
+      "On-premise deployment",
+    ],
+    cta: "Contact Sales",
+    popular: false,
+  },
+]
+
+export default function LandingPage() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container mx-auto flex h-16 items-center justify-between px-4">
+          <Link href="/" className="flex items-center space-x-2">
+            <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+              <Users className="h-5 w-5 text-primary-foreground" />
+            </div>
+            <span className="text-xl font-bold">Teamspace</span>
+          </Link>
+
+          <nav className="hidden md:flex items-center space-x-6">
+            <a href="#features" className="text-muted-foreground hover:text-foreground transition-colors">
+              Features
+            </a>
+            <a href="#testimonials" className="text-muted-foreground hover:text-foreground transition-colors">
+              Testimonials
+            </a>
+            <a href="#pricing" className="text-muted-foreground hover:text-foreground transition-colors">
+              Pricing
+            </a>
+          </nav>
+
+          <div className="flex items-center space-x-4">
+            <Button variant="ghost" asChild>
+              <Link href="/dashboard">Dashboard</Link>
+            </Button>
+            <Button asChild>
+              <Link href="/dashboard">Get Started</Link>
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      {/* Hero Section */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-background to-purple-50 py-20 lg:py-32">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <div className="space-y-8">
+              <Badge variant="secondary" className="w-fit">
+                🚀 New: AI-powered insights now available
+              </Badge>
+
+              <h1 className="text-4xl lg:text-6xl font-bold text-foreground leading-tight">
+                Where teams
+                <span className="text-primary"> collaborate</span> and ideas come to life
+              </h1>
+
+              <p className="text-xl text-muted-foreground leading-relaxed">
+                Streamline your team's workflow with our all-in-one collaboration platform. Chat, plan, share, and
+                deliver exceptional results together.
+              </p>
+
+              <div className="flex flex-col sm:flex-row gap-4">
+                <Button asChild size="lg" className="h-12 px-8">
+                  <Link href="/dashboard">
+                    Start Free Trial
+                    <ArrowRight className="ml-2 h-5 w-5" />
+                  </Link>
+                </Button>
+                <Button variant="outline" size="lg" className="h-12 px-8">
+                  <Play className="mr-2 h-5 w-5" />
+                  Watch Demo
+                </Button>
+              </div>
+
+              <div className="flex items-center space-x-6 text-sm text-muted-foreground">
+                <div className="flex items-center">
+                  <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
+                  Free 14-day trial
+                </div>
+                <div className="flex items-center">
+                  <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
+                  No credit card required
+                </div>
+              </div>
+            </div>
+
+            <div className="relative">
+              <Image
+                src="/placeholder.svg?height=500&width=600"
+                alt="Teamspace Dashboard"
+                width={600}
+                height={500}
+                className="w-full rounded-2xl shadow-2xl"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section id="features" className="py-20">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <Badge variant="outline" className="mb-4">
+              Features
+            </Badge>
+            <h2 className="text-3xl lg:text-5xl font-bold text-foreground mb-4">
+              Everything your team needs to succeed
+            </h2>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+              From real-time collaboration to project management, Teamspace provides all the tools your team needs.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {features.map((feature, index) => {
+              const Icon = feature.icon
+              return (
+                <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-shadow">
+                  <CardHeader>
+                    <div className={`w-12 h-12 ${feature.bgColor} rounded-lg flex items-center justify-center mb-4`}>
+                      <Icon className={`h-6 w-6 ${feature.color}`} />
+                    </div>
+                    <CardTitle className="text-xl">{feature.title}</CardTitle>
+                    <CardDescription className="text-base leading-relaxed">{feature.description}</CardDescription>
+                  </CardHeader>
+                </Card>
+              )
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonials Section */}
+      <section id="testimonials" className="bg-muted/50 py-20">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <Badge variant="outline" className="mb-4">
+              Testimonials
+            </Badge>
+            <h2 className="text-3xl lg:text-5xl font-bold text-foreground mb-4">What our customers say</h2>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {testimonials.map((testimonial, index) => (
+              <Card key={index} className="border-0 shadow-lg">
+                <CardContent className="pt-6">
+                  <div className="flex mb-4">
+                    {[...Array(5)].map((_, i) => (
+                      <Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
+                    ))}
+                  </div>
+                  <blockquote className="text-foreground mb-6 text-lg leading-relaxed">
+                    "{testimonial.quote}"
+                  </blockquote>
+                  <div className="flex items-center">
+                    <Image
+                      src={testimonial.avatar || "/placeholder.svg"}
+                      alt={testimonial.author}
+                      width={48}
+                      height={48}
+                      className="w-12 h-12 rounded-full mr-4"
+                    />
+                    <div>
+                      <div className="font-semibold text-foreground">{testimonial.author}</div>
+                      <div className="text-muted-foreground text-sm">
+                        {testimonial.role}, {testimonial.company}
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Pricing Section */}
+      <section id="pricing" className="py-20">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <Badge variant="outline" className="mb-4">
+              Pricing
+            </Badge>
+            <h2 className="text-3xl lg:text-5xl font-bold text-foreground mb-4">Simple, transparent pricing</h2>
+            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+              Choose the plan that's right for your team. Start free and scale as you grow.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+            {pricingPlans.map((plan, index) => (
+              <Card key={index} className={`relative ${plan.popular ? "border-primary shadow-lg scale-105" : ""}`}>
+                {plan.popular && (
+                  <Badge className="absolute -top-3 left-1/2 transform -translate-x-1/2">Most Popular</Badge>
+                )}
+
+                <CardHeader className="text-center">
+                  <CardTitle className="text-xl">{plan.name}</CardTitle>
+                  <CardDescription>{plan.description}</CardDescription>
+                  <div className="mt-4">
+                    <span className="text-4xl font-bold text-foreground">{plan.price}</span>
+                    {plan.period && <span className="text-muted-foreground">{plan.period}</span>}
+                  </div>
+                </CardHeader>
+
+                <CardContent>
+                  <ul className="space-y-3 mb-8">
+                    {plan.features.map((feature, featureIndex) => (
+                      <li key={featureIndex} className="flex items-center">
+                        <CheckCircle className="h-5 w-5 text-green-500 mr-3 flex-shrink-0" />
+                        <span className="text-muted-foreground">{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
+
+                  <Button asChild className="w-full" variant={plan.popular ? "default" : "outline"}>
+                    <Link href="/dashboard">{plan.cta}</Link>
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="bg-primary py-20">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h2 className="text-3xl lg:text-5xl font-bold text-primary-foreground mb-6">
+            Ready to transform your team's productivity?
+          </h2>
+          <p className="text-xl text-primary-foreground/80 mb-8 max-w-2xl mx-auto">
+            Join thousands of teams already using Teamspace to collaborate better and achieve more.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button asChild size="lg" variant="secondary" className="h-12 px-8">
+              <Link href="/dashboard">
+                Start Free Trial
+                <ArrowRight className="ml-2 h-5 w-5" />
+              </Link>
+            </Button>
+            <Button
+              size="lg"
+              variant="outline"
+              className="h-12 px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary"
+            >
+              Schedule Demo
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="bg-muted py-16">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid md:grid-cols-2 lg:grid-cols-5 gap-8">
+            <div className="lg:col-span-2">
+              <div className="flex items-center mb-4">
+                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+                  <Users className="h-5 w-5 text-primary-foreground" />
+                </div>
+                <span className="ml-2 text-xl font-bold">Teamspace</span>
+              </div>
+              <p className="text-muted-foreground mb-6 max-w-md">
+                Empowering teams to collaborate better and achieve more together.
+              </p>
+              <div className="flex space-x-4">
+                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
+                  <Twitter className="h-5 w-5" />
+                </Link>
+                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
+                  <Github className="h-5 w-5" />
+                </Link>
+                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
+                  <Linkedin className="h-5 w-5" />
+                </Link>
+              </div>
+            </div>
+
+            <div>
+              <h4 className="font-semibold mb-4">Product</h4>
+              <ul className="space-y-2 text-muted-foreground">
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Features
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Pricing
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    API
+                  </Link>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h4 className="font-semibold mb-4">Company</h4>
+              <ul className="space-y-2 text-muted-foreground">
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    About
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Blog
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Careers
+                  </Link>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h4 className="font-semibold mb-4">Support</h4>
+              <ul className="space-y-2 text-muted-foreground">
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Help Center
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Documentation
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-foreground transition-colors">
+                    Contact
+                  </Link>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="border-t border-border mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+            <p className="text-muted-foreground text-sm">
+              © {new Date().getFullYear()} Teamspace. All rights reserved.
+            </p>
+            <div className="flex space-x-6 mt-4 md:mt-0">
+              <Link href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
+                Privacy Policy
+              </Link>
+              <Link href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
+                Terms of Service
+              </Link>
+            </div>
+          </div>
         </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
       </footer>
     </div>
-  );
+  )
 }
diff --git a/samples/teamspace-nextjs/app/profile/page.tsx b/samples/teamspace-nextjs/app/profile/page.tsx
new file mode 100644
index 000000000..a37d8d309
--- /dev/null
+++ b/samples/teamspace-nextjs/app/profile/page.tsx
@@ -0,0 +1,238 @@
+"use client"
+
+import { useState } from "react"
+import { useAuth } from "@/hooks/use-auth"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { User, Mail, Calendar, MapPin, LinkIcon, Edit3, Save, X } from "lucide-react"
+import { Header } from "@/components/header"
+
+export default function ProfilePage() {
+  const { user } = useAuth()
+  const [isEditing, setIsEditing] = useState(false)
+  const [formData, setFormData] = useState({
+    name: user?.name || "",
+    email: user?.email || "",
+    bio: "Full-stack developer passionate about building great user experiences.",
+    location: "San Francisco, CA",
+    website: "https://johndoe.dev",
+    company: "Acme Corp",
+  })
+
+  const handleSave = () => {
+    console.log("Saving profile:", formData)
+    setIsEditing(false)
+  }
+
+  const handleCancel = () => {
+    setFormData({
+      name: user?.name || "",
+      email: user?.email || "",
+      bio: "Full-stack developer passionate about building great user experiences.",
+      location: "San Francisco, CA",
+      website: "https://johndoe.dev",
+      company: "Acme Corp",
+    })
+    setIsEditing(false)
+  }
+
+  const stats = [
+    { label: "Projects", value: "24" },
+    { label: "Organizations", value: "3" },
+    { label: "Contributions", value: "1,247" },
+    { label: "Followers", value: "89" },
+  ]
+
+  const recentProjects = [
+    {
+      id: 1,
+      name: "Mobile App Redesign",
+      description: "Complete UI/UX overhaul for mobile application",
+      status: "In Progress",
+      lastUpdated: "2 days ago",
+    },
+    {
+      id: 2,
+      name: "API Documentation",
+      description: "Comprehensive API documentation and examples",
+      status: "Completed",
+      lastUpdated: "1 week ago",
+    },
+    {
+      id: 3,
+      name: "Team Dashboard",
+      description: "Analytics dashboard for team performance metrics",
+      status: "Planning",
+      lastUpdated: "3 days ago",
+    },
+  ]
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-4xl">
+        {/* Profile Header */}
+        <Card className="mb-8">
+          <div className="h-32 bg-gradient-to-r from-blue-500 to-purple-600 rounded-t-lg"></div>
+          <CardContent className="relative pt-0 pb-6">
+            <div className="flex items-end justify-between -mt-16 mb-6">
+              <div className="flex items-end space-x-4">
+                <Avatar className="w-24 h-24 border-4 border-background">
+                  <AvatarImage src={user?.avatar || "/placeholder.svg"} alt={user?.name} />
+                  <AvatarFallback className="text-2xl">{user?.name?.charAt(0)}</AvatarFallback>
+                </Avatar>
+                <div className="pb-2">
+                  {isEditing ? (
+                    <Input
+                      value={formData.name}
+                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                      className="text-2xl font-bold bg-transparent border-b border-border focus:border-primary"
+                    />
+                  ) : (
+                    <h1 className="text-2xl font-bold text-foreground">{formData.name}</h1>
+                  )}
+                  <p className="text-muted-foreground">@{user?.username}</p>
+                </div>
+              </div>
+              <div className="pb-2">
+                {isEditing ? (
+                  <div className="flex space-x-2">
+                    <Button onClick={handleSave} size="sm">
+                      <Save className="h-4 w-4 mr-2" />
+                      Save
+                    </Button>
+                    <Button onClick={handleCancel} variant="outline" size="sm">
+                      <X className="h-4 w-4 mr-2" />
+                      Cancel
+                    </Button>
+                  </div>
+                ) : (
+                  <Button onClick={() => setIsEditing(true)} variant="outline" size="sm">
+                    <Edit3 className="h-4 w-4 mr-2" />
+                    Edit Profile
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            {/* Bio and Details */}
+            <div className="space-y-4">
+              {isEditing ? (
+                <Textarea
+                  value={formData.bio}
+                  onChange={(e) => setFormData({ ...formData, bio: e.target.value })}
+                  rows={3}
+                  placeholder="Tell us about yourself..."
+                />
+              ) : (
+                <p className="text-foreground">{formData.bio}</p>
+              )}
+
+              <div className="flex flex-wrap gap-6 text-sm text-muted-foreground">
+                <div className="flex items-center">
+                  <User className="h-4 w-4 mr-2" />
+                  {isEditing ? (
+                    <Input
+                      value={formData.company}
+                      onChange={(e) => setFormData({ ...formData, company: e.target.value })}
+                      className="h-6 text-sm bg-transparent border-b border-border focus:border-primary"
+                    />
+                  ) : (
+                    formData.company
+                  )}
+                </div>
+                <div className="flex items-center">
+                  <MapPin className="h-4 w-4 mr-2" />
+                  {isEditing ? (
+                    <Input
+                      value={formData.location}
+                      onChange={(e) => setFormData({ ...formData, location: e.target.value })}
+                      className="h-6 text-sm bg-transparent border-b border-border focus:border-primary"
+                    />
+                  ) : (
+                    formData.location
+                  )}
+                </div>
+                <div className="flex items-center">
+                  <LinkIcon className="h-4 w-4 mr-2" />
+                  {isEditing ? (
+                    <Input
+                      type="url"
+                      value={formData.website}
+                      onChange={(e) => setFormData({ ...formData, website: e.target.value })}
+                      className="h-6 text-sm bg-transparent border-b border-border focus:border-primary"
+                    />
+                  ) : (
+                    <a href={formData.website} className="text-primary hover:underline">
+                      {formData.website}
+                    </a>
+                  )}
+                </div>
+                <div className="flex items-center">
+                  <Mail className="h-4 w-4 mr-2" />
+                  {formData.email}
+                </div>
+                <div className="flex items-center">
+                  <Calendar className="h-4 w-4 mr-2" />
+                  Joined March 2023
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Stats */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+          {stats.map((stat) => (
+            <Card key={stat.label} className="text-center">
+              <CardContent className="pt-6">
+                <div className="text-2xl font-bold text-foreground">{stat.value}</div>
+                <div className="text-sm text-muted-foreground">{stat.label}</div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        {/* Recent Projects */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Recent Projects</CardTitle>
+            <CardDescription>Your latest work and contributions</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {recentProjects.map((project) => (
+                <div
+                  key={project.id}
+                  className="flex items-center justify-between p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors"
+                >
+                  <div className="flex-1">
+                    <h3 className="font-medium text-foreground">{project.name}</h3>
+                    <p className="text-sm text-muted-foreground mt-1">{project.description}</p>
+                    <p className="text-xs text-muted-foreground mt-2">Updated {project.lastUpdated}</p>
+                  </div>
+                  <Badge
+                    variant={
+                      project.status === "Completed"
+                        ? "default"
+                        : project.status === "In Progress"
+                          ? "secondary"
+                          : "outline"
+                    }
+                  >
+                    {project.status}
+                  </Badge>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/samples/teamspace-nextjs/components/header.tsx b/samples/teamspace-nextjs/components/header.tsx
new file mode 100644
index 000000000..a16a6a3bf
--- /dev/null
+++ b/samples/teamspace-nextjs/components/header.tsx
@@ -0,0 +1,139 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Users, ChevronDown, Settings, User, LogOut, Plus, Check, Building2 } from "lucide-react"
+import { useAuth } from "@/hooks/use-auth"
+
+export function Header() {
+  const { user, currentOrg, organizations, setCurrentOrg } = useAuth()
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container mx-auto flex h-16 items-center justify-between px-4">
+        <div className="flex items-center space-x-8">
+          <Link href="/dashboard" className="flex items-center space-x-2">
+            <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+              <Users className="h-5 w-5 text-primary-foreground" />
+            </div>
+            <span className="text-xl font-bold">Teamspace</span>
+          </Link>
+
+          <nav className="hidden md:flex space-x-6">
+            <Link href="/dashboard" className="text-muted-foreground hover:text-foreground transition-colors">
+              Dashboard
+            </Link>
+            <Link href="/projects" className="text-muted-foreground hover:text-foreground transition-colors">
+              Projects
+            </Link>
+            <Link href="/teams" className="text-muted-foreground hover:text-foreground transition-colors">
+              Teams
+            </Link>
+          </nav>
+        </div>
+
+        <div className="flex items-center space-x-4">
+          {/* Organization Switcher */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" className="flex items-center space-x-2">
+                <Avatar className="w-5 h-5">
+                  <AvatarImage src={currentOrg?.avatar || "/placeholder.svg"} alt={currentOrg?.name} />
+                  <AvatarFallback className="text-xs">{currentOrg?.name?.charAt(0)}</AvatarFallback>
+                </Avatar>
+                <span className="max-w-32 truncate">{currentOrg?.name}</span>
+                <ChevronDown className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-64" align="end">
+              <DropdownMenuLabel>Switch organization</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              {organizations?.map((org) => (
+                <DropdownMenuItem
+                  key={org.id}
+                  onClick={() => setCurrentOrg(org)}
+                  className="flex items-center justify-between"
+                >
+                  <div className="flex items-center space-x-3">
+                    <Avatar className="w-6 h-6">
+                      <AvatarImage src={org.avatar || "/placeholder.svg"} alt={org.name} />
+                      <AvatarFallback className="text-xs">{org.name.charAt(0)}</AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <div className="font-medium">{org.name}</div>
+                      <div className="text-xs text-muted-foreground">{org.memberCount} members</div>
+                    </div>
+                  </div>
+                  {currentOrg?.id === org.id && <Check className="h-4 w-4 text-green-600" />}
+                </DropdownMenuItem>
+              ))}
+              <DropdownMenuSeparator />
+              <DropdownMenuItem asChild>
+                <Link href="/organizations" className="flex items-center">
+                  <Building2 className="h-4 w-4 mr-2" />
+                  Manage organizations
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuItem asChild>
+                <Link href="/organizations/new" className="flex items-center">
+                  <Plus className="h-4 w-4 mr-2" />
+                  New organization
+                </Link>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {/* User Dropdown */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="flex items-center space-x-2 p-2">
+                <Avatar className="w-8 h-8">
+                  <AvatarImage src={user?.avatar || "/placeholder.svg"} alt={user?.name} />
+                  <AvatarFallback>{user?.name?.charAt(0)}</AvatarFallback>
+                </Avatar>
+                <ChevronDown className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56" align="end">
+              <DropdownMenuLabel>
+                <div>
+                  <div className="font-medium">{user?.name}</div>
+                  <div className="text-sm text-muted-foreground">@{user?.username}</div>
+                </div>
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem asChild>
+                <Link href="/profile" className="flex items-center">
+                  <User className="h-4 w-4 mr-2" />
+                  Your profile
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuItem asChild>
+                <Link href="/settings" className="flex items-center">
+                  <Settings className="h-4 w-4 mr-2" />
+                  Settings
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem className="flex items-center text-destructive">
+                <LogOut className="h-4 w-4 mr-2" />
+                Sign out
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/samples/teamspace-nextjs/components/theme-provider.tsx b/samples/teamspace-nextjs/components/theme-provider.tsx
new file mode 100644
index 000000000..1cd216d6d
--- /dev/null
+++ b/samples/teamspace-nextjs/components/theme-provider.tsx
@@ -0,0 +1,7 @@
+"use client"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import type { ThemeProviderProps } from "next-themes"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
diff --git a/samples/teamspace-nextjs/components/ui/alert.tsx b/samples/teamspace-nextjs/components/ui/alert.tsx
new file mode 100644
index 000000000..a0de44914
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/alert.tsx
@@ -0,0 +1,43 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
+  ),
+)
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+  ),
+)
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/samples/teamspace-nextjs/components/ui/avatar.tsx b/samples/teamspace-nextjs/components/ui/avatar.tsx
new file mode 100644
index 000000000..71e428b4c
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/avatar.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/samples/teamspace-nextjs/components/ui/badge.tsx b/samples/teamspace-nextjs/components/ui/badge.tsx
new file mode 100644
index 000000000..02054139a
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/samples/teamspace-nextjs/components/ui/button.tsx b/samples/teamspace-nextjs/components/ui/button.tsx
new file mode 100644
index 000000000..a2df8dce6
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/button.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/samples/teamspace-nextjs/components/ui/card.tsx b/samples/teamspace-nextjs/components/ui/card.tsx
new file mode 100644
index 000000000..d05bbc6c7
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/samples/teamspace-nextjs/components/ui/checkbox.tsx b/samples/teamspace-nextjs/components/ui/checkbox.tsx
new file mode 100644
index 000000000..5c40f159d
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/checkbox.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/samples/teamspace-nextjs/components/ui/dropdown-menu.tsx b/samples/teamspace-nextjs/components/ui/dropdown-menu.tsx
new file mode 100644
index 000000000..ec51e9cc9
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/dropdown-menu.tsx
@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/samples/teamspace-nextjs/components/ui/input.tsx b/samples/teamspace-nextjs/components/ui/input.tsx
new file mode 100644
index 000000000..03295ca6a
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/samples/teamspace-nextjs/components/ui/label.tsx b/samples/teamspace-nextjs/components/ui/label.tsx
new file mode 100644
index 000000000..fb5fbc3ee
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/samples/teamspace-nextjs/components/ui/textarea.tsx b/samples/teamspace-nextjs/components/ui/textarea.tsx
new file mode 100644
index 000000000..7f21b5e78
--- /dev/null
+++ b/samples/teamspace-nextjs/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/samples/teamspace-nextjs/hooks/use-auth.tsx b/samples/teamspace-nextjs/hooks/use-auth.tsx
new file mode 100644
index 000000000..9cd47dc5e
--- /dev/null
+++ b/samples/teamspace-nextjs/hooks/use-auth.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import { createContext, useContext, type ReactNode } from "react"
+
+interface User {
+  id: string
+  name: string
+  email: string
+  avatar: string
+  username: string
+}
+
+interface Organization {
+  id: string
+  name: string
+  slug: string
+  avatar: string
+  role: "owner" | "admin" | "member"
+  memberCount: number
+}
+
+interface AuthContextType {
+  user: User
+  currentOrg: Organization
+  organizations: Organization[]
+  setCurrentOrg: (org: Organization) => void
+}
+
+const AuthContext = createContext<AuthContextType | null>(null)
+
+// Mock data
+const mockUser: User = {
+  id: "1",
+  name: "John Doe",
+  email: "john@teamspace.com",
+  avatar: "/placeholder.svg?height=32&width=32",
+  username: "johndoe",
+}
+
+const mockOrganizations: Organization[] = [
+  {
+    id: "1",
+    name: "Acme Corp",
+    slug: "acme-corp",
+    avatar: "/placeholder.svg?height=32&width=32",
+    role: "owner",
+    memberCount: 12,
+  },
+  {
+    id: "2",
+    name: "Tech Startup",
+    slug: "tech-startup",
+    avatar: "/placeholder.svg?height=32&width=32",
+    role: "admin",
+    memberCount: 8,
+  },
+  {
+    id: "3",
+    name: "Design Agency",
+    slug: "design-agency",
+    avatar: "/placeholder.svg?height=32&width=32",
+    role: "member",
+    memberCount: 15,
+  },
+]
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const setCurrentOrg = (org: Organization) => {
+    // In a real app, this would update state
+    console.log("Switching to organization:", org.name)
+  }
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user: mockUser,
+        currentOrg: mockOrganizations[0],
+        organizations: mockOrganizations,
+        setCurrentOrg,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext)
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider")
+  }
+  return context
+}
diff --git a/samples/teamspace-nextjs/lib/utils.ts b/samples/teamspace-nextjs/lib/utils.ts
index bd0c391dd..d084ccade 100644
--- a/samples/teamspace-nextjs/lib/utils.ts
+++ b/samples/teamspace-nextjs/lib/utils.ts
@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from "clsx"
+import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {
diff --git a/samples/teamspace-nextjs/next.config.js b/samples/teamspace-nextjs/next.config.js
new file mode 100644
index 000000000..b307b2760
--- /dev/null
+++ b/samples/teamspace-nextjs/next.config.js
@@ -0,0 +1,13 @@
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  images: {
+    unoptimized: true,
+  },
+}
+
+export default nextConfig
diff --git a/samples/teamspace-nextjs/package.json b/samples/teamspace-nextjs/package.json
index 934128c52..4715cea34 100644
--- a/samples/teamspace-nextjs/package.json
+++ b/samples/teamspace-nextjs/package.json
@@ -1,32 +1,37 @@
 {
-  "name": "@asgardeo/teamspace-nextjs",
+  "name": "teamspace",
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "^15.1.0",
+    "react": "^19",
+    "react-dom": "^19",
+    "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.294.0",
-    "next": "15.3.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "tailwind-merge": "^3.3.0"
+    "lucide-react": "^0.460.0",
+    "tailwind-merge": "^2.5.4",
+    "next-themes": "^0.4.3"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3",
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "15.3.3",
-    "tailwindcss": "^4",
-    "tw-animate-css": "^1.3.4",
-    "typescript": "^5"
+    "typescript": "^5.6.0",
+    "@types/node": "^22.9.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0-alpha.30",
+    "@tailwindcss/postcss": "^4.0.0-alpha.30",
+    "postcss": "^8.4.49",
+    "eslint": "^9.15.0",
+    "eslint-config-next": "^15.1.0"
   }
 }
diff --git a/samples/teamspace-nextjs/postcss.config.mjs b/samples/teamspace-nextjs/postcss.config.mjs
index c7bcb4b1e..7059fe95a 100644
--- a/samples/teamspace-nextjs/postcss.config.mjs
+++ b/samples/teamspace-nextjs/postcss.config.mjs
@@ -1,5 +1,6 @@
 const config = {
-  plugins: ["@tailwindcss/postcss"],
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
 };
-
 export default config;
diff --git a/samples/teamspace-nextjs/tsconfig.json b/samples/teamspace-nextjs/tsconfig.json
index d8b93235f..4f3b7b8e5 100644
--- a/samples/teamspace-nextjs/tsconfig.json
+++ b/samples/teamspace-nextjs/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": ["dom", "dom.iterable", "ES6"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,6 +18,7 @@
         "name": "next"
       }
     ],
+    "baseUrl": ".",
     "paths": {
       "@/*": ["./*"]
     }

From ef1775a2aa15871c2f498af30020b0d93a497492 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 04:50:22 +0530
Subject: [PATCH 118/131] fix(javascript): handle potential undefined idToken
 in decodeIdToken method

---
 packages/javascript/src/IsomorphicCrypto.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/javascript/src/IsomorphicCrypto.ts b/packages/javascript/src/IsomorphicCrypto.ts
index aba1d9fd4..09cfc567b 100644
--- a/packages/javascript/src/IsomorphicCrypto.ts
+++ b/packages/javascript/src/IsomorphicCrypto.ts
@@ -138,7 +138,7 @@ export class IsomorphicCrypto<T = any> {
    */
   public decodeIdToken(idToken: string): IdTokenPayload {
     try {
-      const utf8String: string = this._cryptoUtils.base64URLDecode(idToken.split('.')[1]);
+      const utf8String: string = this._cryptoUtils.base64URLDecode(idToken?.split('.')[1]);
       const payload: IdTokenPayload = JSON.parse(utf8String);
 
       return payload;

From a77312548eddcc9667595ab565c65f38edf989f5 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 04:52:17 +0530
Subject: [PATCH 119/131] feat: enhance user context and update user display in
 the Home component

---
 packages/nextjs/src/AsgardeoNextClient.ts     |  7 ++-
 .../components/presentation/User/User.tsx     |  2 +
 .../contexts/Asgardeo/AsgardeoContext.ts      |  9 +++-
 .../contexts/Asgardeo/AsgardeoProvider.tsx    | 52 +++++++++++++++++--
 samples/teamspace-nextjs-1/app/page.tsx       |  6 +--
 5 files changed, 67 insertions(+), 9 deletions(-)

diff --git a/packages/nextjs/src/AsgardeoNextClient.ts b/packages/nextjs/src/AsgardeoNextClient.ts
index 7e863d527..77479de32 100644
--- a/packages/nextjs/src/AsgardeoNextClient.ts
+++ b/packages/nextjs/src/AsgardeoNextClient.ts
@@ -28,6 +28,7 @@ import {NextRequest, NextResponse} from 'next/server';
 import {AsgardeoNextConfig} from './models/config';
 import deleteSessionId from './server/actions/deleteSessionId';
 import getSessionId from './server/actions/getSessionId';
+import getIsSignedIn from './server/actions/isSignedIn';
 import setSessionId from './server/actions/setSessionId';
 import decorateConfigWithNextEnv from './utils/decorateConfigWithNextEnv';
 import InternalAuthAPIRoutesConfig from './configs/InternalAuthAPIRoutesConfig';
@@ -155,7 +156,7 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
 
     if (method === 'GET' && sanitizedPathname === InternalAuthAPIRoutesConfig.session) {
       try {
-        const isSignedIn: boolean = await this.isSignedIn();
+        const isSignedIn: boolean = await getIsSignedIn();
 
         return NextResponse.json({isSignedIn: isSignedIn});
       } catch (error) {
@@ -167,7 +168,9 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
       try {
         const user: User = await this.getUser();
 
-        return NextResponse.json(user);
+        console.log('[AsgardeoNextClient] User fetched successfully:', user);
+
+        return NextResponse.json({user});
       } catch (error) {
         console.error('[AsgardeoNextClient] Failed to get user:', error);
         return NextResponse.json({error: 'Failed to get user'}, {status: 500});
diff --git a/packages/nextjs/src/client/components/presentation/User/User.tsx b/packages/nextjs/src/client/components/presentation/User/User.tsx
index bec144084..6cf743df6 100644
--- a/packages/nextjs/src/client/components/presentation/User/User.tsx
+++ b/packages/nextjs/src/client/components/presentation/User/User.tsx
@@ -65,6 +65,8 @@ export interface UserProps extends Omit<BaseUserProps, 'user'> {
  * ```
  */
 const User: FC<UserProps> = ({children, fallback = null}): ReactElement => {
+  const {user} = useAsgardeo();
+
   return (
     <BaseUser user={user} fallback={fallback}>
       {children}
diff --git a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoContext.ts b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoContext.ts
index d4c27b6c2..139e8439e 100644
--- a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoContext.ts
+++ b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoContext.ts
@@ -19,12 +19,19 @@
 'use client';
 
 import {AsgardeoContextProps as AsgardeoReactContextProps} from '@asgardeo/react';
+import {User} from '@asgardeo/node';
 import {Context, createContext} from 'react';
 
 /**
  * Props interface of {@link AsgardeoContext}
  */
-export type AsgardeoContextProps = Partial<AsgardeoReactContextProps>;
+export type AsgardeoContextProps = Partial<AsgardeoReactContextProps> & {
+  user?: User | null;
+  isSignedIn?: boolean;
+  isLoading?: boolean;
+  signIn?: () => void;
+  signOut?: () => void;
+};
 
 /**
  * Context object for managing the Authentication flow builder core context.
diff --git a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
index d463955b1..0d4c79768 100644
--- a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -20,7 +20,9 @@
 
 import {FC, PropsWithChildren, useEffect, useMemo, useState} from 'react';
 import {I18nProvider, FlowProvider, UserProvider, ThemeProvider} from '@asgardeo/react';
+import {User} from '@asgardeo/node';
 import AsgardeoContext from './AsgardeoContext';
+import InternalAuthAPIRoutesConfig from '../../../configs/InternalAuthAPIRoutesConfig';
 
 /**
  * Props interface of {@link AsgardeoClientProvider}
@@ -37,6 +39,9 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
   preferences,
 }: PropsWithChildren<AsgardeoClientProviderProps>) => {
   const [isDarkMode, setIsDarkMode] = useState(false);
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSignedIn, setIsSignedIn] = useState(false);
 
   useEffect(() => {
     if (!preferences?.theme?.mode || preferences.theme.mode === 'system') {
@@ -46,16 +51,57 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
     }
   }, [preferences?.theme?.mode]);
 
+  useEffect(() => {
+    const fetchUserData = async () => {
+      try {
+        setIsLoading(true);
+
+        const sessionResponse = await fetch(InternalAuthAPIRoutesConfig.session);
+        const sessionData = await sessionResponse.json();
+        setIsSignedIn(sessionData.isSignedIn);
+
+        if (sessionData.isSignedIn) {
+          const userResponse = await fetch(InternalAuthAPIRoutesConfig.user);
+
+          if (userResponse.ok) {
+            const userData = await userResponse.json();
+            setUser(userData);
+          }
+        } else {
+          setUser(null);
+        }
+      } catch (error) {
+        setUser(null);
+        setIsSignedIn(false);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchUserData();
+  }, []);
+
+  const contextValue = useMemo(
+    () => ({
+      user,
+      isSignedIn,
+      isLoading,
+      signIn: () => (window.location.href = InternalAuthAPIRoutesConfig.signIn),
+      signOut: () => (window.location.href = InternalAuthAPIRoutesConfig.signOut),
+    }),
+    [user, isSignedIn, isLoading],
+  );
+
   return (
-    <AsgardeoContext.Provider value={{}}>
+    <AsgardeoContext.Provider value={contextValue}>
       <I18nProvider preferences={preferences?.i18n}>
         <ThemeProvider theme={preferences?.theme?.overrides} defaultColorScheme={isDarkMode ? 'dark' : 'light'}>
           <FlowProvider>
             <UserProvider
               profile={{
                 schemas: [],
-                profile: {},
-                flattenedProfile: {},
+                profile: user || {},
+                flattenedProfile: user || {},
               }}
             >
               {children}
diff --git a/samples/teamspace-nextjs-1/app/page.tsx b/samples/teamspace-nextjs-1/app/page.tsx
index 67ddfc1f3..5f97c435f 100644
--- a/samples/teamspace-nextjs-1/app/page.tsx
+++ b/samples/teamspace-nextjs-1/app/page.tsx
@@ -25,9 +25,9 @@ export default function Home() {
             <User>
               {({user}) => (
                 <div className={styles.user}>
-                  <img src={user?.profilePicture} alt="User Profile" className={styles.profilePicture} />
-                  <h2>{user?.displayName}</h2>
-                  <p>{user?.email}</p>
+                  <img src={user?.profileUrl} alt="User Profile" className={styles.profilePicture} />
+                  <h2>{user?.orgName}</h2>
+                  <p>{user?.username}</p>
                 </div>
               )}
             </User>

From 2c1fb5a78cd676b03e0b1c1d0bde08c9f1b5afb0 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 09:41:47 +0530
Subject: [PATCH 120/131] fix(react): make profile and schemas optional in
 BaseUserProfileProps interface

---
 packages/react/src/__temp__/models.ts                         | 2 +-
 .../components/presentation/UserProfile/BaseUserProfile.tsx   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/__temp__/models.ts b/packages/react/src/__temp__/models.ts
index 54800c149..4ff057e71 100644
--- a/packages/react/src/__temp__/models.ts
+++ b/packages/react/src/__temp__/models.ts
@@ -20,7 +20,6 @@ import {
   AsgardeoAuthException,
   AuthClientConfig,
   AuthSPAClientConfig,
-  User,
   Config,
   TokenExchangeRequestConfig,
   IdTokenPayload,
@@ -30,6 +29,7 @@ import {
   HttpResponse,
   OIDCEndpoints,
   SignInConfig,
+  User,
 } from '@asgardeo/browser';
 
 export interface ReactConfig {
diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index d6b2a47db..e31b51a8d 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -53,9 +53,9 @@ export interface BaseUserProfileProps {
   fallback?: ReactElement;
   className?: string;
   cardLayout?: boolean;
-  profile: User;
+  profile?: User;
   flattenedProfile?: User;
-  schemas: Schema[];
+  schemas?: Schema[];
   mode?: 'inline' | 'popup';
   title?: string;
   attributeMapping?: {

From e4932a37f90e22de60ff8bbc3e48526aef81f65f Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 09:42:02 +0530
Subject: [PATCH 121/131] chore(samples): remove unused components and files,
 implement Asgardeo authentication middleware

- Deleted unused UI components including Alert, Avatar, Badge, Button, Card, Checkbox, DropdownMenu, Input, Label, and Textarea.
- Removed the ThemeProvider and Header components.
- Deleted the mock authentication context and utility functions.
- Added Asgardeo authentication middleware for handling user authentication.
- Updated package.json to include Asgardeo dependencies and adjusted versions for other packages.
- Created an example .env.local file for configuration.
- Removed old Next.js configuration files and updated TypeScript configuration.
---
 samples/teamspace-nextjs-1/.gitignore         |  43 --
 samples/teamspace-nextjs-1/README.md          |  36 --
 samples/teamspace-nextjs-1/app/favicon.ico    | Bin 25931 -> 0 bytes
 samples/teamspace-nextjs-1/app/globals.css    |  42 --
 samples/teamspace-nextjs-1/app/layout.tsx     |  33 --
 samples/teamspace-nextjs-1/app/page.tsx       |  40 --
 samples/teamspace-nextjs-1/eslint.config.mjs  |  16 -
 samples/teamspace-nextjs-1/next.config.ts     |   7 -
 samples/teamspace-nextjs-1/package.json       |  26 -
 samples/teamspace-nextjs-1/public/file.svg    |   1 -
 samples/teamspace-nextjs-1/public/globe.svg   |   1 -
 samples/teamspace-nextjs-1/public/next.svg    |   1 -
 samples/teamspace-nextjs-1/public/vercel.svg  |   1 -
 samples/teamspace-nextjs-1/public/window.svg  |   1 -
 samples/teamspace-nextjs-1/tsconfig.json      |  27 -
 samples/teamspace-nextjs/.gitignore           |   2 +
 samples/teamspace-nextjs/README.md            |  47 +-
 .../teamspace-nextjs/app/dashboard/page.tsx   | 242 ---------
 samples/teamspace-nextjs/app/globals.css      |  89 +--
 samples/teamspace-nextjs/app/layout.tsx       |  47 +-
 .../app/organizations/new/page.tsx            | 185 -------
 .../app/organizations/page.tsx                | 154 ------
 .../app/page.module.css                       |   0
 samples/teamspace-nextjs/app/page.tsx         | 514 ++----------------
 samples/teamspace-nextjs/app/profile/page.tsx | 238 --------
 samples/teamspace-nextjs/components.json      |  21 -
 .../teamspace-nextjs/components/header.tsx    | 139 -----
 .../components/theme-provider.tsx             |   7 -
 .../teamspace-nextjs/components/ui/alert.tsx  |  43 --
 .../teamspace-nextjs/components/ui/avatar.tsx |  53 --
 .../teamspace-nextjs/components/ui/badge.tsx  |  46 --
 .../teamspace-nextjs/components/ui/button.tsx |  59 --
 .../teamspace-nextjs/components/ui/card.tsx   |  92 ----
 .../components/ui/checkbox.tsx                |  28 -
 .../components/ui/dropdown-menu.tsx           | 257 ---------
 .../teamspace-nextjs/components/ui/input.tsx  |  21 -
 .../teamspace-nextjs/components/ui/label.tsx  |  24 -
 .../components/ui/textarea.tsx                |  18 -
 .../env.local.example                         |   0
 samples/teamspace-nextjs/hooks/use-auth.tsx   |  93 ----
 samples/teamspace-nextjs/lib/utils.ts         |   6 -
 .../middleware.ts                             |   0
 samples/teamspace-nextjs/next.config.js       |  13 -
 samples/teamspace-nextjs/package.json         |  39 +-
 samples/teamspace-nextjs/postcss.config.mjs   |   6 -
 samples/teamspace-nextjs/tsconfig.json        |   3 +-
 .../src/components/header/UserDropdown.tsx    |   1 -
 47 files changed, 129 insertions(+), 2633 deletions(-)
 delete mode 100644 samples/teamspace-nextjs-1/.gitignore
 delete mode 100644 samples/teamspace-nextjs-1/README.md
 delete mode 100644 samples/teamspace-nextjs-1/app/favicon.ico
 delete mode 100644 samples/teamspace-nextjs-1/app/globals.css
 delete mode 100644 samples/teamspace-nextjs-1/app/layout.tsx
 delete mode 100644 samples/teamspace-nextjs-1/app/page.tsx
 delete mode 100644 samples/teamspace-nextjs-1/eslint.config.mjs
 delete mode 100644 samples/teamspace-nextjs-1/next.config.ts
 delete mode 100644 samples/teamspace-nextjs-1/package.json
 delete mode 100644 samples/teamspace-nextjs-1/public/file.svg
 delete mode 100644 samples/teamspace-nextjs-1/public/globe.svg
 delete mode 100644 samples/teamspace-nextjs-1/public/next.svg
 delete mode 100644 samples/teamspace-nextjs-1/public/vercel.svg
 delete mode 100644 samples/teamspace-nextjs-1/public/window.svg
 delete mode 100644 samples/teamspace-nextjs-1/tsconfig.json
 delete mode 100644 samples/teamspace-nextjs/app/dashboard/page.tsx
 delete mode 100644 samples/teamspace-nextjs/app/organizations/new/page.tsx
 delete mode 100644 samples/teamspace-nextjs/app/organizations/page.tsx
 rename samples/{teamspace-nextjs-1 => teamspace-nextjs}/app/page.module.css (100%)
 delete mode 100644 samples/teamspace-nextjs/app/profile/page.tsx
 delete mode 100644 samples/teamspace-nextjs/components.json
 delete mode 100644 samples/teamspace-nextjs/components/header.tsx
 delete mode 100644 samples/teamspace-nextjs/components/theme-provider.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/alert.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/avatar.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/badge.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/button.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/card.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/checkbox.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/dropdown-menu.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/input.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/label.tsx
 delete mode 100644 samples/teamspace-nextjs/components/ui/textarea.tsx
 rename samples/{teamspace-nextjs-1 => teamspace-nextjs}/env.local.example (100%)
 delete mode 100644 samples/teamspace-nextjs/hooks/use-auth.tsx
 delete mode 100644 samples/teamspace-nextjs/lib/utils.ts
 rename samples/{teamspace-nextjs-1 => teamspace-nextjs}/middleware.ts (100%)
 delete mode 100644 samples/teamspace-nextjs/next.config.js
 delete mode 100644 samples/teamspace-nextjs/postcss.config.mjs

diff --git a/samples/teamspace-nextjs-1/.gitignore b/samples/teamspace-nextjs-1/.gitignore
deleted file mode 100644
index af1db0d2d..000000000
--- a/samples/teamspace-nextjs-1/.gitignore
+++ /dev/null
@@ -1,43 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/versions
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# env files (can opt-in for committing if needed)
-.env*
-# allow .env.local.example to be committed with sample values. 
-!.env.local.example
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
diff --git a/samples/teamspace-nextjs-1/README.md b/samples/teamspace-nextjs-1/README.md
deleted file mode 100644
index e215bc4cc..000000000
--- a/samples/teamspace-nextjs-1/README.md
+++ /dev/null
@@ -1,36 +0,0 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/samples/teamspace-nextjs-1/app/favicon.ico b/samples/teamspace-nextjs-1/app/favicon.ico
deleted file mode 100644
index 718d6fea4835ec2d246af9800eddb7ffb276240c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 25931
zcmeHv30#a{`}aL_*G&7qml|y<+KVaDM2m#dVr!KsA!#An?kSQM(q<_dDNCpjEux83
zLb9Z^XxbDl(w>%i@8hT6>)&Gu{h#Oeyszu?xtw#Zb1mO<?sK2}EE5RAKnxHU7lft+
zNRAPL3?T?25I&drAjl1ssi=G|D?(7bFsgtO(2o>{pgX9699l+Qppw7jXaYf~-84xW
z)w4x8?=youko|}Vr~(D$UX<xm7|19n6Hxvd5m6xx<*9a4%RmR{en}E&p$X-wy5A}T
zU0^dwXVA>IbiXABHh`p1?nn8Po~fxRJv}|0e(BPs|G`(TT%kKVJAdg5*Z|x0leQq0
zkdUBvb#>9F()jo|T~kx@OM8$9wzs~t2l;K=woNssA3l6|sx2r3+kdfVW@e^8e*E}v
zA1y5{bRi+3Z`uD3{F7LgFJDdvm;nJilkzDku>BwXH(8ItVCXk*-lSJnR?-2UN%<G)
zWdETe=&R39RaKR)udn|#TOgZ!e!yM=<=+`Uz{l^5UtkZ2fHDQ;UwMB}v%l$A-`~F-
z{Qr^x^CSUf63Sry{6y#+`<sMA?dPFvg)$lC_RkFRKnCi7&P<a6>hJ){&rlvg`CDTj
z)Bzo!3v7Ou#83zEDEFcKt(f1E0~=rqeEbTnMvWR#{+9pg%7G8y>u1OVRUSoox-ovF
z2Ydma(;=YuBY(eI|04{hXzZD6_f(v~H;C~y5=DhAC{MMS>2fm~1H_t2$56pc$NH8(
z5bH|<)71dV-_oCHIrzrT`2s-5w_+2CM0$95I6X8p^r!gHp+j_gd;9O<1~CEQQGS8)
zS9Qh3#p&JM-G8rHekNmKVewU;pJRcTAog68KYo^dRo}(M<!8cv(gkb9@A>>36U4Us
zfgYWSiHZL3;lpWT=<n~R&zm>zNAW>Dh#mB!_@Lg%$ms8N-;aPqMn+C2HqZgz&9~Eu
z4|Kp<`$q)Uw1R?y(~S>ePdonHxpV1#eSP1B;Ogo+-Pk}6#0GsZZ5!||ev2MGdh}_m
z{DeR7?0-1^zVs&`AV6<!ZvGbtU{7FdY&`9DeD(=q|M30$GCs(E?S0J1$e@G0#Z=wz
zl)*a>Vt;r3`I`OI_wgs*w=eO%_#7Kepl{B<UyBc9U%rn&@xFZ-e{%i>@xiyCANc(l
zzIyd4y|c6PXWq9-|KM8(zIk8LPk(>a)zyFWjhT!$HJ$qX1vo@d25W<<x-(q{Yn-pG
zKTz?fwGmh&&2-F3f57**)?Xk#p#S9h^DhK{VVKE&0KR^-_MMD9nf@pDACnmVll!kp
z3?Tha?LWW70P;AL{}cP~sW|?W|MbA09{7Kt2f!i(y>fvZQ2zUz5WRc(UnFMKHwe1|
zWmlB1qdbiA(C0jmnV<}GfbKtmcu^2*P^O?<jWWPHxu*D53Uq)j1!ZtH3Vi&#Nd^rV
zj`B>MBLZKt|As~ge8&AAO~2K@zbXelK|4T<{|y4`raF{=72kC2Kn(L4YyenWgrPiv
z@^mr$t{#X5VuIMeL!7Ab6_kG$&#&5p*Z{+?5U|TZ`B!7llpVmp@skYz&n^8QfPJzL
z0G6K_OJM9x+Wu2gfN45phANGt{7=C>i34CV{Xqlx(fWpeAoj^N0Biu`w+MVcCUyU*
zDZuzO0>4Z6fbu^T_arWW5n!E45vX8N=bxTVeFoep_G#VmNlQzAI_KTIc{6>c+04vr
zx@W}zE5JNSU>!THJ{J=cqjz+4{L4A{Ob9$ZJ*S1?Ggg3klFp!+Y1@K+pK1DqI|_gq
z5ZDXVpge8-cs!o|;K73#YXZ3AShj50wBvuq3NTOZ`M&qtjj#GOFfgExjg8Gn8>Vq5
z`85n+9|!iLCZF5$HJ$Iu($dm?8~-ofu}tEc+-pyke=3!im#6pk_Wo8IA|fJwD&~~F
zc16osQ)EBo58U7XDuMexaPRjU@h8tXe%S{fA0NH3vGJFhuyyO!Uyl2^&EOpX{9As0
zWj+P>{@}jxH)8|r;2HdupP!vie{sJ28b&bo!8`D^x}TE$%zXNb^X1p@0PJ86`dZyj
z%ce7*{^oo+6%&~I!8hQy-vQ7E)0t0ybH4l%KltWOo~8cO`T=157JqL(oq_rC%ea&4
z2NcTJe-HgFjNg-gZ$6!Y`SMHrlj}Etf7<Kk?_r;;``Uc^3+u}-v3@Q8<@$Nr`<F?K
z-%F>?r!zQTPPSv}{so2e>Fjs1{<qUF=hGRSFDG$<z3x<+@%{Vd%a`e+qodRP&D<om
zAEn>gzk~LGeesX%r(Lh6rbhSo_n)@@G-FTQy93;l#E)hgP@d_SGvyCp0~o(Y;Ee8{
zdVUDbHm5`2taPUOY^MAGOw*<R_VaVlPH<<CgYr!E->>=s7=Gst=D+p+2yON!0%Hk`
zz5mAhyT4lS*T3LS^WSxUy86q&GnoHxzQ6vm8)VS}_zuqG?+3td68_x;etQAdu@sc6
zQJ&5|4(I?~3d-QOAODHpZ=hlSg(lBZ!JZWCtHHSj`0Wh93-Uk)_S%zsJ~aD>{`A0~
z9{AG(e|q3g5B%wYKRxiL2Y$8(4w<boVrLOyLG9R$m+7N>6bzchKuloQW#e&S3n+P-
z8!ds-%f;TJ1>)v)##>gd{PdS2Oc3VaR`fr=`O8QIO(6(N!A?pr5C#6fc~Ge@N%Vvu
zaoAX2&(a6eWy_q&UwOhU)|P3J0Qc%OdhzW=F4D|pt0E4osw;%<%Dn58hAWD^XnZD=
z>9~H(3bmLtxpF?a7su6J7M*x1By7YSUbxGi)Ot0P77`}P<HJ;%@cvfCkvm6xcMjdY
zed_u6xK)F%|1Hy`)`e~K(f*MqTJ?92I+4lga{A5`-U@Cab35G6unNk<*dpB|Rtkp;
z?32o^yBlJsuA-^abQ~7;%<oa^k<DbKc{lOW2!yM#nEALvv)IhY7b|Wfg(UhtiurTM
zY-B6L26$JQo&Kt3nh3JTJ)garEgw^{uEM3__%b$U5{~+aMO*k)6R#grkER2`U6KS-
z=j1=QhCkuy%iiHWrqH8CeGNw*C?epTpl2Bo@ugUPKRFeiVHOpL7PHu-SAgX@qmTGH
z_%ePz1`io8XDfwLmip;Rn;1yo+3>3{)&5Un{KD?`-e?r21!4vTTnN(4Y6Lin?UkSM
z`MXCTC1@4A4~mvz%Rh2&EwY))LeoT=*`tMoqcEXI>TZU9WTP#l?uFv+@Dn~b(>xh2
z;>B?;Tz2SR&KVb>vGiBSB`@U7VIWFSo=LDSb9F{GF^DbmWAfpms8Sx9OX4CnBJca3
zlj9(x!dIjN?OG1X4l*imJNvRCk}F%!?SOfiOq5y^mZW)jFL@<gIi}tCXee1<sGV$i
z4r_`X#mEQbiDh!Efji0GjM9z-0bF}p0(*s(OzMJ|;K&OJBar<ARLp}T>a|r-@d#f7
z2gmU8L3IZq0ynIws=}~m^#@&C%J6QFo~Mo4V`>v7MI-_!EBMMtb%_M&kvAaN)@ZVw
z+`toz&WG#HkWDjnZE!6nk{e-oFdL^$YnbOCN}JC&{$#$O27@|Tn-skXr)2ml2~O!5
zX+gYoxhoc7qoU?C^3~&!U?kRFtnSEecWuH0B0OvLodgUAi}8p1<ZO0#U-k07ifx!>
zrO6RSXHH}D<I*>Mc$&|?D004<Y&c6)m74d`LOLU@ruR+Um4>DiOVMHV8kXCP@7NKB
zgaZq^^O<7PoKEp72kby@W0Z!Y*A<g|TlOeriuPP`vK2IntATvs?Iv|J14j&;NFSFo
zyJ+sca?G+8C%!b{Sq=6cJJqS>y{&vfg#C&gG@YVR9g?FEocMUi1gSN$+V+ayF45{a
zuDZDT<?u;)RfLQwg>N}mS|;BO%gEf}pjBfN2-gIrU#G5~cucA;dokXW89%>AyXJJI
z9X4Ul<x{xc_m~`mWBP0<g-{#wm}Vv~Ef3pKWC&N_<~88zSbEk;;+{DnJ9-u&Zc74s
zJ6TCQyl_^|5cY;wmDdrU@LTL-3v0H#Ui?8ICQV{imof1MHuM$`e*ux>IWA|ZYHgbI
z5?oFk@A=Ik7lrEQPDH!H+b`7_Y~aDb_qa=B2^Y&Ow41cU=4WDd40dp5(QS-WMN-=Y
z9g;6_-JdNU;|6cPwf$ak*aJIcwL@1n$#l~zi{c{EW?T;DaW*E8DYq?Umtz{nJ&w-M
zEMyT<MDk{HKbd#ckg5-pS_?QUVhZv?&Q-ioBS}$nvBd)nE7YO0deN~G(#zCJAbY$E
z!)g3Ytl=_NDUV%pykcE+Q<{EoZ_4FR@&#d<hqs%N>DrC&9K$d|kZe2#ws6)L=7K+{
zQw{XnV6UC$6-rW0emqm8wJoeZK)wJIcV?dST}Z;G0Arq{dVDu0&4kd%N!3F1*;*pW
zR&qUiFzK=@44#QGw7k1`3t_d8&*kBV->O##t|tonFc2YWrL7_eqg+=+k;!F-`^b8>
z#KWCE8%u4k@EprxqiV$VmmtiWxDLgnGu$Vs<8rppV5E<MCr+anDo)-{XRlCJ;D#M(
zT=3WgR02;Nm!54biUb^FtzPh8iGrf412epnki-k+G4mdkzC|lJqaRMbb0~Jjp-{}I
z5Do5afZi>ajBXL4nyyZM$SWVm!wnCj-B!Wjqj5-5dNXukI2$$|Bu3Lrw}z65Lc=1G
z^-#WuQOj$hwNGG?*CM_TO8Bg-1+qc>J7k5c51U8g?ZU5n?HYor;~JIjoWH-G>AoUP
ztrWWLbRNqIjW#RT*WqZgPJXU7C)VaW5}MiijYbABmzoru6EmQ*N8cVK7a3|aOB#O&
zBl8JY2WKfmj;h#Q!pN%9o@VNLv{OUL?rixHwOZuvX7{IJ{(EdPpuVFoQqIOa7gi<U
zTpbX&UCeYeNu>LVkBOKL@^smUA!tZ1CKRK}#SSM)iQHk)*R~?M!qkCruaS!#oIL1c
z<cK@1=jX>?J<BS8bpdt^R+}%A_DEhF^%o}8e!!lc`Y!qU>;U~&FfH#*98^G?i}pA{
z9Jg36t4=%6mhY(quYq*vSxptes9qy|7xSlH?G=S@>u>Ebe;|LVhs~@+06N<4CViBk
zUiY$thvX;>Tby6z9Y1e<Q<iIG*|o$r?OTFp`s)@_nHs4LeWbGvg7^}NK)>dAMQaiH
zm^r3v#$Q#2T=X>bsY#D%s!bhs^M9PMAcHbCc0FMHV{u-dwlL;a1eJ63v5U*?Q_8JO
zT#50!RD619#j_Uf))0ooADz~*9&lN!bBDRUgE>Vud-i5ck%vT=r^yD*^?Mp@Q^v+V
zG#-?gKlr}Eeqifb{|So?HM&g91<J5P5=Ly{?(NNY{6`O~L5r@sJe3rNZn06%SLk);
z9?hvE^Hr{!*G$<_doyzGn#*z*#}?)8dH=eYTgvc)T~}Jw!kCv68<+KL5{5?EXtDAZ
zWeNqp8%KIuBi&icn5s815Vho<+99VW1~m@L8l0=$c`t-L{q))~<!p*~vCdUcBcPz`
zyUi}!-k_`G{>P8|av8hQoCmQXkd?7wIJw<dY^{|7OQJUHKB~nksN_|Xy;DL?xjxU^
zbMa`WdfTBnr<wTd$mY&SgJ4U|X``k`#`gN@M+0x2W{YgC3kbLk<uYFJWglkx_)2#b
ztRiuA!EK9o)f`I2k)l;Of%E`ff91WlZh8yfRi6#N-mC`Ma(yr~U82SyAhc9B+ur!f
zP-3igg*KeYs9mGOAw@OaXYy9DnGjn0<m`JH&Q^h}^!h+uS9Ct*o-oEy(?iT6Yco>b
z_^v8bbg`<ZOL)a;i=IdfK0Zvw4nXsoC?eTOMpY)_ptiORm%J(1CD3dE0Z%Vy<2iHp
zcp>SAn{I*4bH$u(RZ6*x<DqKJ+5;a6Jq~=Y8V&c?Vsyq88!2nD?H?Eww58Mqt$7R8
z5BMjmKx>UhuA~hc=8czK8SHEKTzSxgbwi~9(OqJB&gwb^l4+m`k*Q;_?>Y-APi1{k
zAHQ)P)G)f|AyjSgcCFps)Fh6Bca*Xznq3<?y%xNvu0N78_R?~<RDFQx0ynlRG(E|j
zvEGN3bF<E_9p-I!UwQXFqcSGV#e^98tgFqLp+z9eP}y!jNA{)r*a+%M-_20xg?94<
zzmM{}syi0cd&P)zywMdS&Y_9k5JDtOM!L)b^2WP!+fHYGv>6!pV6Az&m{O8$wGFD?
zY&O*3*J0;_EqM#jh6^gMQKpXV?#1?>$ml1xvh8nSN>-?H=V;nJIwB07YX$e6vLxH(
zqYwQ>qxwR(i4f)DLd)-$P>T-no_c!LsN@)8`e;W@)-Hj0>nJ-}Kla4-ZdPJzI&Mce
zv)V_j;(3ERN3_@I$N<^|4Lf`B;8n+bX@bHbcZTopEmDI*Jfl)-pFDvo6svPRoo@(x
z);_{lY<;);XzT`dBFpRmGrr}z5u1=p<K1~3>C^<jVp}L(pzgMB_Vs-O?{Z?y$8M;)
zi@7zwpzV9#m72%En~(9@E)GWV^(~J*@^*K*TE0mynAnGJ5YSLCEnC42H-`tr4L=oW
zI}N{xQ$HT8Q6CVHf%RY&xw7!Zj(0xmg(K#UQ4u!ej95z7V4phlcTJ2&AR}$)zV-s!
zO7bqY6(=?1t+JCOW_z%HRE>S-{ce6iXQlLGcItwJ^mZx{m$&DA_oEZ)B{_bYPq-HA
zcH8WGoBG(aBU_j)vEy+_71T34@4dmSg!|M8Vf92Zj6WH7Q7t#OHQqWgFE3ARt+%!T
z?oLovLVlnf?2c7pTc)~cc^($_8nyKwsN`RA-23ed3sdj(ys%pjjM+9JrctL;dy8a(
z@en&CQmnV(()bu|Y%G1-4a(6x{aLytn$T-;(&{QIJB9vMox11U-1HpD@d(QkaJdEb
zG{)+6Dos_L+O3NpWo^=gR?evp|CqEG?L&Ut#D*KLaRFOgOEK(Kq1@!EGcTfo+%A&I
z=dLbB+d$u{sh?u)xP{PF8L%;YPPW53+@{>5W=Jt#wQpN;0_HYdw1{ksf_XhO4#2F=
zyPx6Lx2<92L-;L5PD`zn6zwIH`Jk(<gsVPionpJ-imI56$j4P0!br@ny3=!{x2TY^
zCD=)8_PgmN)E!^nczcDGc9Wm7oo5O3@fh=k=kh8J?_3KqEp7JHdv8z_iZ5#KmbiPt
z2Bt8Ro^p$7pS!xL3mtj<iN3f}#r6_&$Es0PnJTE?c;0#$%cGdu`T%~`gW;c^VD-S=
zrAatMf^%Lzr*wQ4kHSOb?WOUuEsJQ3xr{Imf1t{~iNmRwb_SP9!?FFN=b-E){!8P2
ztWCT~262O8`%?3<W4Wg+ovWY<re)?^kZ|Yi>$?Qw({erA$^bC;q33hv!d!>%wRhj#
zal^hk+WGNg;rJtb-EB(?czvOM=H7dl=vblBwAv>}%1@{}mnpUznfq1cE^sgsL0*4I
zJ##!*B?=vI_OEVis5o+_IwMIRrpQyT_Sq~ZU%oY7c5JMIADzpD!Upz9h@iWg_>>~j
zOLS;wp^i$-E?4<_cp?RiS%Rd?i;f*mOz=~(&3lo<=@(nR!_Rqiprh@weZlL!t#NCc
zO!QTcInq|%#>OVgobj{~ixEUec`E25zJ~*DofsQdzIa@5^nOXj2T;8O`l--(QyU<o
zeu8G~Z>^$t?TGY^7#&FQ+2SS3B#qK*k3`ye?8jUYSajE5iBbJls75CCc(m3dk{t?-
zopcER9{Z?TC)mk~gpi^kbbu>b-+a{m#8-y2^p$ka4n60w;Sc2}HMf<8JUvh<G@KZw
z+<GL!lpeahq2+nO{>CL0B&Btk)T`ctE$*qNW8L$`7!r^9T+>=<=2qaq-;ll2{`{Rg
zc5a0ZUI$oG&j-qVOuKa=*v4aY#IsoM+1|c4Z)<}lEDvy;5huB@1RJPquU2U*U-;gu
z=En2m+qjBzR#DEJDO`WU)hdd{Vj%^0V*KoyZ|5lzV87&g_j~NCjwv0uQVqXOb*QrQ
zy|Qn`hxx(58c<SELWpDAg~83oY-J_WoDiI6d7>70$E;L(X0uZZ72M1!6oeg)(cdKO
ze0gDaTz+ohR-#d)NbAH4x{I(21yjwvBQfmpLu$)|m{XolbgF!pmsqJ#D}(ylp6uC>
z{bqtcI#hT#HW=wl7>p!38sKsJ`r8}lt-q%Keqy%u(xk=yiIJiUw6|5IvkS+#?JTBl
z8H5(Q?l#wzazujH!8o>1xtn8#_w+397*<wp?Ryt$UFh41$qd}LyNJ7Oao(Aw2g|wy
zH_nZ+R#~EUME^#j4$@^5&>_cy8!pQGP%K(Ga3pAjsaTbbXJlQF_+m+-UpUUent@xM
zg%jqLUExj~o^vQ3Gl*>wh=_gOr2*|U64_iXb+-111a<qXXnUI&{l`dM&{4Gw)jZn;
zlj{VxW@#OcVE1Y%J*u^Z@H+XSqL6SwA|^jv2RU_+d;O!mk)dw7-m9B4{6*G1zRdR6
zQ}6v&Xt7R2h3Xp}EQk4nF2TULG{Ri=D|JC<a+K7dldN1}CY_f!vK#u}K3`g#TpO&W
z;!;64`0$d9raD!VbYP`kuFUasaMh!;&81y}LHS(SuGRxwEn4LZb4DS1j9iAq$MXd@
z(Ebka7_Gc(ljGaJqtI-OzmA@c@sYB$)Vg!RP4~``vaVyRq$rJXRjIPwtepN;(B%wy
zmU>H}$TjeajM+I20xw(((>fej-@CIz4S1pi$(#}P7`4({6QS2CaQS4NPENDp>sAqD
z$bH4KGzXGffkJ7R>V>)>tC)uax{UsN*dbeNC*v}#8Y#OWYwL4t$ePR?VTyIs!wea+
z5Urmc)X|^`MG~*dS6pGSbU+gPJoq*^a=_>$n4|P^w$sMBBy@f*Z^Jg6?n5?oId6f{
z$LW4M|4m502z0t7g<#Bx%X;9<=)smFolV&(V^(7Cv2-sxbxopQ!)*#ZRhTBpx1)Fc
zNm1T%bONzv6@#|dz(w02AH8OXe>kQ#1FMCzO}2J_mST)+ExmBr9cva-@?;wnmWMOk
z{3_~EX_xadgJGv&H@zK_8{(x84`}+c?oSBX*Ge3VdfTt&F}yCpFP?CpW+BE^cWY0^
zb&uBN!Ja3UzYHK-CTyA5=L<c0d<h!DNBIa<xax8W3(Ru8L0cVXQ18|Y^|*S%)R96z
zBT$(=zQ}2vmt6LzN~Oyf_Y92%P@QOx{7~}5!UIqCdfu?VwC0Nb!2@iiit8-5zUWFG
z*G&+GLIU#J;}hvowNJWnglvb^<2q~lS#?ixVtYT@(O3{TC|4kFJYLB*jni-4YZi0>
zEMW{l3Usky#ly=7px648W31UNV@K)&Ub&zP1c7%)`{);I4b0Q<)B}3;NMG2JH=X$U
zfIW4)4n9ZM`-yRj67I)YSLDK)qfUJ_ij}a#aZN~9EXrh8eZY2&=uY%2N0UFF7<~%M
zsB8=erOWZ>Ct_#^tHZ|*q`H;A)5;ycw*I<Cd*bZlOJ9YmRUK2<qXkpRR3nr6r~%Jz
z*(8tA&DYO)etdgVmoonqD{*<5Fog4ClIs-~_uhjuZOI}#Wy+ce${%#oyHloXelqfz
z8)?D3Y_>cmVxi8_0Xk}aJA^ath+E;xg!x+As(M#0=)3!NJR6H&9+zd#iP(m0PIW8$
z1Y^VX`>jm`W!=WpF*{ioM?C9`yOR>@0q=u7o>BP-eSHqCgMDj!2anwH?s%i2p+Q7D
zzszIf5XJpE)IG4;d_(La-xenmF(tgAxK`Y4sQ}BSJEPs6N_U2vI{8=0C_F?@7<(G;
zo$~G=8p+076G;`}>{MQ>t>7cm=zGtfbdDXm6||jUU|?X?CaE?(<6bKDYKeHlz}DA8
zXT={X=yp_R;HfJ9h%?eWvQ!dRgz&Su*JfNt!Wu>|XfU<MM~gB&J0gc}IH}?|B4WRK
zWPL0FhctFGdMucOFdhrVunIe5)4K^H9IjB#eA)p5w?c#v7kp8jx^~bxxJB{;hPFL9
zkR9Dbpj+T5ZMgHQg|oj*DS;x&jK}1rn&}Shp9sgOI*7puQD-w?3H*cg72;5H(_zW*
zApJBIM-p2~F;qWDj!n|Kd=5|T8OPkQ_G;ujgvKybr5@~eci2{8WAz+%NUSp-&eoG!
zOGLNLJewWl&1*NT467W3god~fYgX?!f0?NCFnjD$qE-fyQ)|Q_DLc*{olmXSVl$g_
z$vj}o?RatMy(o*j8?q1Mgw{OUOgVR6_qvS<Co*&!cR`ROi|*I`ajyG5s@L8agnX2J
zF=DLkMG`z{RP&996y0yAtvJcb<cba?TV#j4VYFPC>&68iRikRrHRW|ZxzRR^`eIGt
zIeiDgVS>IeExKVRWW8-=<xUfo0v~z=RA=cFWKXgcMECd}xHp7iqkBanH}TZ0h0rA=
zqxUZ>A=<k-RjTtwbJkkep{8z*173wY^e%-U0{Ue!n@wbg^2q)Vx5c(_RfvuR4}XXn
z+JE>yA`}`)ZkWBrZD`hpWIxBGkh&f#ijr449~m`j6{4jiJ*C!oVA8ZC?$1RM#K(_b
zL9TW)kN*Y4%^-qPpMP7d4)o?Nk#>aoYHT(*g)qmRUb?**F@pnNiy6Fv9rEiUqD(^O
zzyS?nBrX63BTRYduaG(0VVG2yJRe%o&rVrLjbxTaAFTd8s;<<@Qs>u(<193R8>}2_
zuwp{7;H2a*X7_jryzriZXMg?bTuegABb^87@SsKkr2)0Gyiax8KQWstw^v<oS3Xw7
zu51m`3~hoyxErcHymdFTZd#AO59{EkuFTcpAR33(3xc{zRnn1~1Ei(i*^HdCvM~;;
za&}Uip|u>#ix45EVrcEhr>!NMhprl<CqZuKa#zuI&@zymVzIicetS0bq#u?m(r_@S
zJ79bl%4EyHCQ3fK@en+A1@)e}HWLP|gr_zuoA{}Z<(-*53Zu@k+=^%~5F(z$EFLI;
z-TQTS8$W|GRbZq93Ha1?lu+`O;rn>$InQMzjSFH54x5k9qHc`@9uKQzvL4ihcq{^B
zPrVR=o_ic%Y>6&rMN)hTZsI7I<3&`#(nl+3y3ys9A~<Ao%ZuW})CJ)6^(aRV(gGxR
z89#(FDW;GZEAf;rI$+PU)rEV|rASrwP0_mr^Ldv)IuUf1M>&^=4?PL&nd8)`OfG#n
zwAMN$1&>K++c{^|7<<q5KGu)u(OEfEJJw2aEi(;x-i=Y=j3ram9H2n-Fuqv0dVlXJ
z&WgG5X({!vJFDrEbm+CWDca^zIe2@s1@a;;Y3!U9Q)&P0UXFmCP51_!wvTfAIyR^M
z7^R*O@yz1b-s4VC>4P=2y(B{jJsQ0a#U;HTo4ZmWZYvI{+s;Td{Yzem%0*k#)vjpB
zia;J&>}ICate44SFYY3vEelqStQWFihx%^vQ@Do(sOy7yR2@WNv7Y9I^yL=nZr3mb
zXKV5t@=?-Sk|b{XMhA7ZGB@2hqsx}4xwCW!in#C<kr{U&JG{9FhoZ<aTve_lLz39>
zI@}sc<h3gsW}hp-`WUywKA>Zlr3-NFJ@NFaJlhyfcw{k^vvtGl`N9xSo**rDW4S}i
zM9{fMPWo%4wYDG~BZ18BD+}h|GQKc-g^{++3MY>}W_uq7jGHx{mwE9fZiPCoxN$+7
zrODGGJrOkcPQUB(FD5aoS4g~7#6NR^ma7-!>mHuJfY5kTe6PpNNKC9GGRiu^L31uG
z$7v`*JknQHsYB!Tm_W{a32TM099djW%5e+j0Ve_ct}IM>XLF1Ap+YvcrLV=|CKo6S
zb+<Td{{5RWR}u2f(q<b(D$9JsF0OOzJ*+z0P5kc1t}CXlYgua%x*2lSgp|*WS3H-#
zdYr7?GQOL18zUS<2|;+vi4|4sQBM2Gs&WVS!D`q5Lz;XR@5rEfa{uG-!q?R8Ncz%(
z5K6~LQ@d2wp#)5q4u<ENlFbS)U4o1t9{-d>9Nl3_YdKP6%Cxy@6TxZ>;4&nTneadr
z_ES90ydCev)LV!dN=#(*f}|ZORFdvkYBni^aLbUk>BajeWIOcmHP#8S)*2U~QKI%S
zyrLmtPqb&TphJ;>yAxri#;{uyk`JJqODDw%(Z=2<VfJZemI(PFAD{6Sm|uE%BTbkl
zROsg*MOh20YgGs3H7?@pmQ>`1uc}br^V%>j!gS)D*q*f_-qf8&D;W1dJgQMlaH5er
zN2U<%Smb7==vE}dDI8K7cKz!vs^73o9f>2sgiTzWcwY|BMYHH5%Vn7#kiw&eItCqa
zIkR2~Q}>X=Ar8W|^Ms41Fm8o6IB2_j60eOeBB1Br!boW7JnoeX6Gs)?7rW0^5psc-
zjS16yb>dFn>KPOF;imD}e!enuIniFzv}n$m2#gCCv4jM#ArwlzZ$7@9&XkFxZ4n!V
zj3dyiwW4Ki2QG{@i>yuZXQizw_OkZI^-3otXC{!(lUpJF33gI60ak;Uqitp74|B6I
zgg{b=Iz}WkhCGj1M<xTd?60J5qsr1Cg7F~~U2N!(@lC<>=hu4#Aw173YxIVbISaoc
z-nLZC*6Tgivd5V`K%GxhBsp@SUU60-rfc$=wb>zdJzXS&-5(NRRodFk;Kxk!S(<ov
z$YXcI9;^grAyiJ4dWTv3b}K~Ww09(;mLY4+kj|$A?IMr}`7q?mIS1>O(a0e7oY=E(
zAyS;Ow?6Q&XA+cnkCb{28_1N8H#?J!*$MmIwLq^*T_9-z^&UE@A(z9oGYtFy6EZef
LrJugUA?W`A8`#=m

diff --git a/samples/teamspace-nextjs-1/app/globals.css b/samples/teamspace-nextjs-1/app/globals.css
deleted file mode 100644
index e3734be15..000000000
--- a/samples/teamspace-nextjs-1/app/globals.css
+++ /dev/null
@@ -1,42 +0,0 @@
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}
diff --git a/samples/teamspace-nextjs-1/app/layout.tsx b/samples/teamspace-nextjs-1/app/layout.tsx
deleted file mode 100644
index 7786670cd..000000000
--- a/samples/teamspace-nextjs-1/app/layout.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import type {Metadata} from 'next';
-import {Geist, Geist_Mono} from 'next/font/google';
-import './globals.css';
-import {AsgardeoProvider} from '@asgardeo/nextjs';
-
-const geistSans = Geist({
-  variable: '--font-geist-sans',
-  subsets: ['latin'],
-});
-
-const geistMono = Geist_Mono({
-  variable: '--font-geist-mono',
-  subsets: ['latin'],
-});
-
-export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        <AsgardeoProvider>{children}</AsgardeoProvider>
-      </body>
-    </html>
-  );
-}
diff --git a/samples/teamspace-nextjs-1/app/page.tsx b/samples/teamspace-nextjs-1/app/page.tsx
deleted file mode 100644
index 5f97c435f..000000000
--- a/samples/teamspace-nextjs-1/app/page.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import styles from './page.module.css';
-import {SignInButton, SignedIn, SignOutButton, SignedOut, User} from '@asgardeo/nextjs';
-
-export default function Home() {
-  return (
-    <div className={styles.page}>
-      <main className={styles.main}>
-        <div className={styles.ctas}>
-          <SignedOut>
-            <SignInButton>
-              {({signIn, isLoading}) => (
-                <button onClick={signIn} disabled={isLoading}>
-                  {isLoading ? 'Signing in...' : 'Sign In'}
-                </button>
-              )}
-            </SignInButton>
-          </SignedOut>
-          <SignedOut>
-            <SignInButton className={styles.primary}>Sign In with Redirect</SignInButton>
-          </SignedOut>
-          <SignedIn>
-            <User>
-              {({user}) => (
-                <div className={styles.user}>
-                  <img src={user?.profileUrl} alt="User Profile" className={styles.profilePicture} />
-                  <h2>{user?.orgName}</h2>
-                  <p>{user?.username}</p>
-                </div>
-              )}
-            </User>
-            <SignOutButton className={styles.secondary}>Sign Out</SignOutButton>
-          </SignedIn>
-        </div>
-      </main>
-    </div>
-  );
-}
diff --git a/samples/teamspace-nextjs-1/eslint.config.mjs b/samples/teamspace-nextjs-1/eslint.config.mjs
deleted file mode 100644
index c85fb67c4..000000000
--- a/samples/teamspace-nextjs-1/eslint.config.mjs
+++ /dev/null
@@ -1,16 +0,0 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-});
-
-const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
-];
-
-export default eslintConfig;
diff --git a/samples/teamspace-nextjs-1/next.config.ts b/samples/teamspace-nextjs-1/next.config.ts
deleted file mode 100644
index e9ffa3083..000000000
--- a/samples/teamspace-nextjs-1/next.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  /* config options here */
-};
-
-export default nextConfig;
diff --git a/samples/teamspace-nextjs-1/package.json b/samples/teamspace-nextjs-1/package.json
deleted file mode 100644
index e53529ded..000000000
--- a/samples/teamspace-nextjs-1/package.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "private": true,
-  "name": "@asgardeo/create-next-app-ts-app-router",
-  "version": "0.0.0",
-  "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@asgardeo/nextjs": "workspace:^",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "15.3.2"
-  },
-  "devDependencies": {
-    "typescript": "^5",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "15.3.2",
-    "@eslint/eslintrc": "^3"
-  }
-}
\ No newline at end of file
diff --git a/samples/teamspace-nextjs-1/public/file.svg b/samples/teamspace-nextjs-1/public/file.svg
deleted file mode 100644
index 004145cdd..000000000
--- a/samples/teamspace-nextjs-1/public/file.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/samples/teamspace-nextjs-1/public/globe.svg b/samples/teamspace-nextjs-1/public/globe.svg
deleted file mode 100644
index 567f17b0d..000000000
--- a/samples/teamspace-nextjs-1/public/globe.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/samples/teamspace-nextjs-1/public/next.svg b/samples/teamspace-nextjs-1/public/next.svg
deleted file mode 100644
index 5174b28c5..000000000
--- a/samples/teamspace-nextjs-1/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/samples/teamspace-nextjs-1/public/vercel.svg b/samples/teamspace-nextjs-1/public/vercel.svg
deleted file mode 100644
index 770539603..000000000
--- a/samples/teamspace-nextjs-1/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/samples/teamspace-nextjs-1/public/window.svg b/samples/teamspace-nextjs-1/public/window.svg
deleted file mode 100644
index b2b2a44f6..000000000
--- a/samples/teamspace-nextjs-1/public/window.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file
diff --git a/samples/teamspace-nextjs-1/tsconfig.json b/samples/teamspace-nextjs-1/tsconfig.json
deleted file mode 100644
index d8b93235f..000000000
--- a/samples/teamspace-nextjs-1/tsconfig.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
diff --git a/samples/teamspace-nextjs/.gitignore b/samples/teamspace-nextjs/.gitignore
index 5ef6a5207..af1db0d2d 100644
--- a/samples/teamspace-nextjs/.gitignore
+++ b/samples/teamspace-nextjs/.gitignore
@@ -32,6 +32,8 @@ yarn-error.log*
 
 # env files (can opt-in for committing if needed)
 .env*
+# allow .env.local.example to be committed with sample values. 
+!.env.local.example
 
 # vercel
 .vercel
diff --git a/samples/teamspace-nextjs/README.md b/samples/teamspace-nextjs/README.md
index ef699be7e..e215bc4cc 100644
--- a/samples/teamspace-nextjs/README.md
+++ b/samples/teamspace-nextjs/README.md
@@ -1,27 +1,36 @@
-# Teamspace
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
-A modern B2B collaboration platform built with Next.js 15, React 19, and Tailwind CSS 4.
+## Getting Started
 
-## Features
+First, run the development server:
 
-- 🚀 **Modern Stack**: Next.js 15 with App Router, React 19, TypeScript
-- 🎨 **Beautiful UI**: Tailwind CSS 4 with shadcn/ui components
-- 📱 **Responsive Design**: Mobile-first approach with modern layouts
-- 🏢 **Organization Management**: Multi-organization support with role-based access
-- 👤 **User Profiles**: Comprehensive profile management
-- 📊 **Dashboard**: Team analytics and activity tracking
-- 🎯 **Mock Data**: Complete demo experience with realistic data
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
 
-## Getting Started
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-### Prerequisites
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-- Node.js 18+ 
-- npm, yarn, or pnpm
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
-### Installation
+## Learn More
 
-1. Clone the repository:
-```bash
-git clone <repository-url>
-cd teamspace
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/samples/teamspace-nextjs/app/dashboard/page.tsx b/samples/teamspace-nextjs/app/dashboard/page.tsx
deleted file mode 100644
index add508e3c..000000000
--- a/samples/teamspace-nextjs/app/dashboard/page.tsx
+++ /dev/null
@@ -1,242 +0,0 @@
-"use client"
-
-import { useAuth } from "@/hooks/use-auth"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Users, MessageSquare, Calendar, FileText, TrendingUp, Clock, CheckCircle2, AlertCircle } from "lucide-react"
-import { Header } from "@/components/header"
-
-export default function DashboardPage() {
-  const { user, currentOrg } = useAuth()
-
-  const stats = [
-    {
-      name: "Active Projects",
-      value: "12",
-      change: "+2.1%",
-      changeType: "positive" as const,
-      icon: FileText,
-    },
-    {
-      name: "Team Members",
-      value: currentOrg?.memberCount.toString() || "0",
-      change: "+5.4%",
-      changeType: "positive" as const,
-      icon: Users,
-    },
-    {
-      name: "Messages Today",
-      value: "89",
-      change: "+12.5%",
-      changeType: "positive" as const,
-      icon: MessageSquare,
-    },
-    {
-      name: "Meetings This Week",
-      value: "7",
-      change: "-2.3%",
-      changeType: "negative" as const,
-      icon: Calendar,
-    },
-  ]
-
-  const recentActivity = [
-    {
-      id: 1,
-      user: "Sarah Chen",
-      action: 'completed task "Design Review"',
-      time: "2 hours ago",
-      type: "completed",
-    },
-    {
-      id: 2,
-      user: "Mike Johnson",
-      action: 'created new project "Mobile App"',
-      time: "4 hours ago",
-      type: "created",
-    },
-    {
-      id: 3,
-      user: "Emily Davis",
-      action: "scheduled team meeting",
-      time: "6 hours ago",
-      type: "scheduled",
-    },
-    {
-      id: 4,
-      user: "Alex Rodriguez",
-      action: 'uploaded 3 files to "Q4 Planning"',
-      time: "1 day ago",
-      type: "uploaded",
-    },
-  ]
-
-  const upcomingTasks = [
-    {
-      id: 1,
-      title: "Review quarterly reports",
-      dueDate: "Today, 3:00 PM",
-      priority: "high" as const,
-      project: "Q4 Planning",
-    },
-    {
-      id: 2,
-      title: "Team standup meeting",
-      dueDate: "Tomorrow, 9:00 AM",
-      priority: "medium" as const,
-      project: "Daily Operations",
-    },
-    {
-      id: 3,
-      title: "Client presentation prep",
-      dueDate: "Friday, 2:00 PM",
-      priority: "high" as const,
-      project: "Client Work",
-    },
-  ]
-
-  return (
-    <div className="min-h-screen bg-background">
-      <Header />
-
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold text-foreground">Welcome back, {user?.name}!</h1>
-          <p className="text-muted-foreground mt-2">Here's what's happening with {currentOrg?.name} today.</p>
-        </div>
-
-        {/* Stats Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-          {stats.map((stat) => {
-            const Icon = stat.icon
-            return (
-              <Card key={stat.name}>
-                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                  <CardTitle className="text-sm font-medium">{stat.name}</CardTitle>
-                  <Icon className="h-4 w-4 text-muted-foreground" />
-                </CardHeader>
-                <CardContent>
-                  <div className="text-2xl font-bold">{stat.value}</div>
-                  <div className="flex items-center text-xs text-muted-foreground">
-                    <TrendingUp
-                      className={`h-3 w-3 mr-1 ${stat.changeType === "positive" ? "text-green-500" : "text-red-500"}`}
-                    />
-                    <span className={stat.changeType === "positive" ? "text-green-600" : "text-red-600"}>
-                      {stat.change}
-                    </span>
-                    <span className="ml-1">from last month</span>
-                  </div>
-                </CardContent>
-              </Card>
-            )
-          })}
-        </div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-          {/* Recent Activity */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Recent Activity</CardTitle>
-              <CardDescription>Latest updates from your team</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-4">
-                {recentActivity.map((activity) => (
-                  <div key={activity.id} className="flex items-start space-x-3">
-                    <div className="flex-shrink-0">
-                      {activity.type === "completed" && (
-                        <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
-                          <CheckCircle2 className="h-4 w-4 text-green-600" />
-                        </div>
-                      )}
-                      {activity.type === "created" && (
-                        <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
-                          <FileText className="h-4 w-4 text-blue-600" />
-                        </div>
-                      )}
-                      {activity.type === "scheduled" && (
-                        <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
-                          <Calendar className="h-4 w-4 text-purple-600" />
-                        </div>
-                      )}
-                      {activity.type === "uploaded" && (
-                        <div className="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center">
-                          <FileText className="h-4 w-4 text-orange-600" />
-                        </div>
-                      )}
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm text-foreground">
-                        <span className="font-medium">{activity.user}</span> {activity.action}
-                      </p>
-                      <p className="text-xs text-muted-foreground mt-1">{activity.time}</p>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Upcoming Tasks */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Upcoming Tasks</CardTitle>
-              <CardDescription>Your tasks and deadlines</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-4">
-                {upcomingTasks.map((task) => (
-                  <div key={task.id} className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
-                    <div className="flex-1">
-                      <h3 className="text-sm font-medium text-foreground">{task.title}</h3>
-                      <p className="text-xs text-muted-foreground mt-1">{task.project}</p>
-                    </div>
-                    <div className="flex items-center space-x-3">
-                      <div className="flex items-center text-xs text-muted-foreground">
-                        <Clock className="h-3 w-3 mr-1" />
-                        {task.dueDate}
-                      </div>
-                      <Badge variant={task.priority === "high" ? "destructive" : "secondary"} className="text-xs">
-                        {task.priority === "high" && <AlertCircle className="h-3 w-3 mr-1" />}
-                        {task.priority}
-                      </Badge>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Quick Actions */}
-        <Card className="mt-8">
-          <CardHeader>
-            <CardTitle>Quick Actions</CardTitle>
-            <CardDescription>Get started with common tasks</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-              <Button variant="outline" className="h-20 flex-col">
-                <MessageSquare className="h-6 w-6 mb-2" />
-                Start Chat
-              </Button>
-              <Button variant="outline" className="h-20 flex-col">
-                <FileText className="h-6 w-6 mb-2" />
-                New Project
-              </Button>
-              <Button variant="outline" className="h-20 flex-col">
-                <Calendar className="h-6 w-6 mb-2" />
-                Schedule Meeting
-              </Button>
-              <Button variant="outline" className="h-20 flex-col">
-                <Users className="h-6 w-6 mb-2" />
-                Invite Members
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-}
diff --git a/samples/teamspace-nextjs/app/globals.css b/samples/teamspace-nextjs/app/globals.css
index 1e6bcd2b3..e3734be15 100644
--- a/samples/teamspace-nextjs/app/globals.css
+++ b/samples/teamspace-nextjs/app/globals.css
@@ -1,75 +1,42 @@
-@import "tailwindcss";
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
 
-@layer base {
+@media (prefers-color-scheme: dark) {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96%;
-    --secondary-foreground: 222.2 84% 4.9%;
-    --muted: 210 40% 96%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96%;
-    --accent-foreground: 222.2 84% 4.9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 221.2 83.2% 53.3%;
-    --radius: 0.75rem;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 84% 4.9%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 224.3 76.3% 94.1%;
+    --background: #0a0a0a;
+    --foreground: #ededed;
   }
 }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
 }
 
-/* Custom scrollbar */
-::-webkit-scrollbar {
-  width: 6px;
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-::-webkit-scrollbar-track {
-  background: hsl(var(--muted));
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
 }
 
-::-webkit-scrollbar-thumb {
-  background: hsl(var(--muted-foreground));
-  border-radius: 3px;
+a {
+  color: inherit;
+  text-decoration: none;
 }
 
-::-webkit-scrollbar-thumb:hover {
-  background: hsl(var(--foreground));
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
 }
diff --git a/samples/teamspace-nextjs/app/layout.tsx b/samples/teamspace-nextjs/app/layout.tsx
index 9b3b87084..7786670cd 100644
--- a/samples/teamspace-nextjs/app/layout.tsx
+++ b/samples/teamspace-nextjs/app/layout.tsx
@@ -1,34 +1,33 @@
-import type React from "react"
-import type { Metadata } from "next"
-import { Inter } from "next/font/google"
-import "./globals.css"
-import { ThemeProvider } from "@/components/theme-provider"
-import { AuthProvider } from "@/hooks/use-auth"
+import type {Metadata} from 'next';
+import {Geist, Geist_Mono} from 'next/font/google';
+import './globals.css';
+import {AsgardeoProvider} from '@asgardeo/nextjs';
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
-})
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+});
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+});
 
 export const metadata: Metadata = {
-  title: "Teamspace - Where teams collaborate",
-  description: "Streamline your team's workflow with our all-in-one collaboration platform.",
-}
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
 
 export default function RootLayout({
   children,
-}: {
-  children: React.ReactNode
-}) {
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={`${inter.variable} font-sans`}>
-        <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
-          <AuthProvider>
-            <div className="min-h-screen bg-background">{children}</div>
-          </AuthProvider>
-        </ThemeProvider>
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        <AsgardeoProvider>{children}</AsgardeoProvider>
       </body>
     </html>
-  )
+  );
 }
diff --git a/samples/teamspace-nextjs/app/organizations/new/page.tsx b/samples/teamspace-nextjs/app/organizations/new/page.tsx
deleted file mode 100644
index 69b20d60c..000000000
--- a/samples/teamspace-nextjs/app/organizations/new/page.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-"use client"
-
-import type React from "react"
-
-import { useState } from "react"
-import { useRouter } from "next/navigation"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Textarea } from "@/components/ui/textarea"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Building2, Upload, ArrowLeft } from "lucide-react"
-import Link from "next/link"
-import { Header } from "@/components/header"
-
-export default function CreateOrganizationPage() {
-  const router = useRouter()
-  const [formData, setFormData] = useState({
-    name: "",
-    slug: "",
-    description: "",
-    website: "",
-    avatar: "/placeholder.svg?height=64&width=64",
-  })
-  const [isSubmitting, setIsSubmitting] = useState(false)
-
-  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const name = e.target.value
-    const slug = name
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, "-")
-      .replace(/^-|-$/g, "")
-    setFormData({ ...formData, name, slug })
-  }
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setIsSubmitting(true)
-
-    // Simulate API call
-    await new Promise((resolve) => setTimeout(resolve, 1000))
-
-    console.log("Creating organization:", formData)
-    router.push("/organizations")
-  }
-
-  return (
-    <div className="min-h-screen bg-background">
-      <Header />
-
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-2xl">
-        {/* Header */}
-        <div className="mb-8">
-          <Button variant="ghost" asChild className="mb-4">
-            <Link href="/organizations">
-              <ArrowLeft className="h-4 w-4 mr-2" />
-              Back to organizations
-            </Link>
-          </Button>
-          <h1 className="text-3xl font-bold text-foreground">Create a new organization</h1>
-          <p className="text-muted-foreground mt-2">
-            Organizations are shared accounts where teams can collaborate across many projects at once.
-          </p>
-        </div>
-
-        {/* Form */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Organization Details</CardTitle>
-            <CardDescription>Set up your new organization with basic information</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <form onSubmit={handleSubmit} className="space-y-6">
-              {/* Organization Avatar */}
-              <div>
-                <Label className="text-sm font-medium">Organization avatar</Label>
-                <div className="flex items-center space-x-4 mt-2">
-                  <Avatar className="w-16 h-16">
-                    <AvatarImage src={formData.avatar || "/placeholder.svg"} alt="Organization avatar" />
-                    <AvatarFallback>
-                      <Building2 className="h-8 w-8" />
-                    </AvatarFallback>
-                  </Avatar>
-                  <Button type="button" variant="outline">
-                    <Upload className="h-4 w-4 mr-2" />
-                    Upload image
-                  </Button>
-                </div>
-                <p className="text-xs text-muted-foreground mt-2">
-                  We recommend an image that's at least 64×64 pixels.
-                </p>
-              </div>
-
-              {/* Organization Name */}
-              <div>
-                <Label htmlFor="name">Organization name *</Label>
-                <Input
-                  id="name"
-                  required
-                  value={formData.name}
-                  onChange={handleNameChange}
-                  placeholder="Enter organization name"
-                  className="mt-2"
-                />
-              </div>
-
-              {/* Organization Slug */}
-              <div>
-                <Label htmlFor="slug">Organization slug *</Label>
-                <div className="flex mt-2">
-                  <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-input bg-muted text-muted-foreground text-sm">
-                    teamspace.com/
-                  </span>
-                  <Input
-                    id="slug"
-                    required
-                    value={formData.slug}
-                    onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
-                    placeholder="organization-slug"
-                    className="rounded-l-none"
-                  />
-                </div>
-                <p className="text-xs text-muted-foreground mt-2">
-                  This will be your organization's URL. Only lowercase letters, numbers, and hyphens are allowed.
-                </p>
-              </div>
-
-              {/* Description */}
-              <div>
-                <Label htmlFor="description">Description</Label>
-                <Textarea
-                  id="description"
-                  rows={3}
-                  value={formData.description}
-                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-                  placeholder="Tell us about your organization..."
-                  className="mt-2"
-                />
-              </div>
-
-              {/* Website */}
-              <div>
-                <Label htmlFor="website">Website</Label>
-                <Input
-                  id="website"
-                  type="url"
-                  value={formData.website}
-                  onChange={(e) => setFormData({ ...formData, website: e.target.value })}
-                  placeholder="https://example.com"
-                  className="mt-2"
-                />
-              </div>
-
-              {/* Terms */}
-              <div className="bg-muted rounded-lg p-4">
-                <div className="flex items-start">
-                  <Building2 className="h-5 w-5 text-muted-foreground mt-0.5 mr-3" />
-                  <div className="text-sm text-muted-foreground">
-                    <p className="font-medium mb-2">By creating an organization, you agree to:</p>
-                    <ul className="space-y-1 text-xs">
-                      <li>• Follow our Terms of Service and Community Guidelines</li>
-                      <li>• Take responsibility for all activity under this organization</li>
-                      <li>• Ensure all members comply with our policies</li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-
-              {/* Submit Button */}
-              <div className="flex justify-end space-x-3 pt-6 border-t border-border">
-                <Button type="button" variant="outline" asChild>
-                  <Link href="/organizations">Cancel</Link>
-                </Button>
-                <Button type="submit" disabled={isSubmitting || !formData.name || !formData.slug}>
-                  {isSubmitting ? "Creating..." : "Create organization"}
-                </Button>
-              </div>
-            </form>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-}
diff --git a/samples/teamspace-nextjs/app/organizations/page.tsx b/samples/teamspace-nextjs/app/organizations/page.tsx
deleted file mode 100644
index 93abe771c..000000000
--- a/samples/teamspace-nextjs/app/organizations/page.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-"use client"
-
-import { useAuth } from "@/hooks/use-auth"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent } from "@/components/ui/card"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Badge } from "@/components/ui/badge"
-import { Building2, Users, Settings, Crown, Shield, User, Plus, ExternalLink } from "lucide-react"
-import Link from "next/link"
-import { Header } from "@/components/header"
-
-export default function OrganizationsPage() {
-  const { organizations, currentOrg, setCurrentOrg } = useAuth()
-
-  const getRoleIcon = (role: string) => {
-    switch (role) {
-      case "owner":
-        return <Crown className="h-4 w-4 text-yellow-500" />
-      case "admin":
-        return <Shield className="h-4 w-4 text-blue-500" />
-      default:
-        return <User className="h-4 w-4 text-muted-foreground" />
-    }
-  }
-
-  const getRoleBadge = (role: string) => {
-    switch (role) {
-      case "owner":
-        return "default"
-      case "admin":
-        return "secondary"
-      default:
-        return "outline"
-    }
-  }
-
-  return (
-    <div className="min-h-screen bg-background">
-      <Header />
-
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-4xl">
-        {/* Header */}
-        <div className="flex items-center justify-between mb-8">
-          <div>
-            <h1 className="text-3xl font-bold text-foreground">Organizations</h1>
-            <p className="text-muted-foreground mt-2">Manage your organizations and switch between them</p>
-          </div>
-          <Button asChild>
-            <Link href="/organizations/new">
-              <Plus className="h-4 w-4 mr-2" />
-              New Organization
-            </Link>
-          </Button>
-        </div>
-
-        {/* Current Organization */}
-        <div className="mb-8">
-          <h2 className="text-lg font-semibold text-foreground mb-4">Current Organization</h2>
-          <Card className="border-primary/50 bg-primary/5">
-            <CardContent className="pt-6">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center space-x-4">
-                  <Avatar className="w-12 h-12">
-                    <AvatarImage src={currentOrg?.avatar || "/placeholder.svg"} alt={currentOrg?.name} />
-                    <AvatarFallback>{currentOrg?.name?.charAt(0)}</AvatarFallback>
-                  </Avatar>
-                  <div>
-                    <h3 className="text-lg font-medium text-foreground">{currentOrg?.name}</h3>
-                    <div className="flex items-center space-x-2 mt-1">
-                      <Badge variant={getRoleBadge(currentOrg?.role || "member")}>
-                        {getRoleIcon(currentOrg?.role || "member")}
-                        <span className="ml-1 capitalize">{currentOrg?.role}</span>
-                      </Badge>
-                      <span className="text-sm text-muted-foreground">{currentOrg?.memberCount} members</span>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex items-center space-x-2">
-                  <Button variant="outline" size="sm">
-                    <Settings className="h-4 w-4 mr-2" />
-                    Settings
-                  </Button>
-                  <Button variant="outline" size="sm">
-                    <ExternalLink className="h-4 w-4 mr-2" />
-                    View
-                  </Button>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* All Organizations */}
-        <div>
-          <h2 className="text-lg font-semibold text-foreground mb-4">All Organizations</h2>
-          <div className="space-y-4">
-            {organizations?.map((org) => (
-              <Card key={org.id} className={currentOrg?.id === org.id ? "border-primary/50 bg-primary/5" : ""}>
-                <CardContent className="pt-6">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center space-x-4">
-                      <Avatar className="w-12 h-12">
-                        <AvatarImage src={org.avatar || "/placeholder.svg"} alt={org.name} />
-                        <AvatarFallback>{org.name.charAt(0)}</AvatarFallback>
-                      </Avatar>
-                      <div>
-                        <h3 className="text-lg font-medium text-foreground">{org.name}</h3>
-                        <div className="flex items-center space-x-2 mt-1">
-                          <Badge variant={getRoleBadge(org.role)}>
-                            {getRoleIcon(org.role)}
-                            <span className="ml-1 capitalize">{org.role}</span>
-                          </Badge>
-                          <span className="text-sm text-muted-foreground">
-                            <Users className="h-3 w-3 inline mr-1" />
-                            {org.memberCount} members
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      {currentOrg?.id !== org.id && (
-                        <Button onClick={() => setCurrentOrg(org)} variant="outline" size="sm">
-                          Switch to
-                        </Button>
-                      )}
-                      {currentOrg?.id === org.id && <Badge variant="default">Current</Badge>}
-                      <Button variant="outline" size="sm">
-                        <Settings className="h-4 w-4 mr-2" />
-                        Manage
-                      </Button>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </div>
-
-        {/* Organization Invitations */}
-        <div className="mt-8">
-          <h2 className="text-lg font-semibold text-foreground mb-4">Pending Invitations</h2>
-          <Card>
-            <CardContent className="pt-6">
-              <div className="text-center py-8">
-                <Building2 className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
-                <p className="text-muted-foreground">No pending invitations</p>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/samples/teamspace-nextjs-1/app/page.module.css b/samples/teamspace-nextjs/app/page.module.css
similarity index 100%
rename from samples/teamspace-nextjs-1/app/page.module.css
rename to samples/teamspace-nextjs/app/page.module.css
diff --git a/samples/teamspace-nextjs/app/page.tsx b/samples/teamspace-nextjs/app/page.tsx
index 70c76ba84..5f97c435f 100644
--- a/samples/teamspace-nextjs/app/page.tsx
+++ b/samples/teamspace-nextjs/app/page.tsx
@@ -1,488 +1,40 @@
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import {
-  Users,
-  MessageSquare,
-  Calendar,
-  FileText,
-  Shield,
-  Zap,
-  CheckCircle,
-  Star,
-  ArrowRight,
-  Play,
-  Github,
-  Twitter,
-  Linkedin,
-} from "lucide-react"
-import Link from "next/link"
-import Image from "next/image"
+'use client';
 
-const features = [
-  {
-    icon: MessageSquare,
-    title: "Real-time Communication",
-    description: "Stay connected with instant messaging, video calls, and threaded discussions.",
-    color: "text-blue-600",
-    bgColor: "bg-blue-50",
-  },
-  {
-    icon: Calendar,
-    title: "Project Management",
-    description: "Plan, track, and deliver projects on time with intuitive task management.",
-    color: "text-green-600",
-    bgColor: "bg-green-50",
-  },
-  {
-    icon: FileText,
-    title: "Document Collaboration",
-    description: "Create, edit, and share documents in real-time with version control.",
-    color: "text-purple-600",
-    bgColor: "bg-purple-50",
-  },
-  {
-    icon: Shield,
-    title: "Enterprise Security",
-    description: "Keep your data safe with enterprise-grade security and compliance.",
-    color: "text-red-600",
-    bgColor: "bg-red-50",
-  },
-  {
-    icon: Zap,
-    title: "Workflow Automation",
-    description: "Automate repetitive tasks and streamline processes with custom workflows.",
-    color: "text-yellow-600",
-    bgColor: "bg-yellow-50",
-  },
-  {
-    icon: Users,
-    title: "Team Analytics",
-    description: "Gain insights into team performance and project progress with detailed analytics.",
-    color: "text-indigo-600",
-    bgColor: "bg-indigo-50",
-  },
-]
+import Link from 'next/link';
+import styles from './page.module.css';
+import {SignInButton, SignedIn, SignOutButton, SignedOut, User} from '@asgardeo/nextjs';
 
-const testimonials = [
-  {
-    quote: "Teamspace transformed how our remote team collaborates. We're 40% more productive since switching.",
-    author: "Sarah Chen",
-    role: "VP of Engineering",
-    company: "TechCorp",
-    avatar: "/placeholder.svg?height=48&width=48",
-  },
-  {
-    quote: "The best investment we've made for our team. The ROI was clear within the first month.",
-    author: "Michael Rodriguez",
-    role: "Project Manager",
-    company: "InnovateLab",
-    avatar: "/placeholder.svg?height=48&width=48",
-  },
-  {
-    quote: "Finally, a platform that brings everything together. Our team loves the intuitive interface.",
-    author: "Emily Johnson",
-    role: "Creative Director",
-    company: "DesignStudio",
-    avatar: "/placeholder.svg?height=48&width=48",
-  },
-]
-
-const pricingPlans = [
-  {
-    name: "Starter",
-    price: "Free",
-    description: "Perfect for small teams getting started",
-    features: ["Up to 5 team members", "Basic project management", "5GB storage", "Community support"],
-    cta: "Get Started",
-    popular: false,
-  },
-  {
-    name: "Professional",
-    price: "$12",
-    period: "/user/month",
-    description: "For growing teams that need more power",
-    features: [
-      "Unlimited team members",
-      "Advanced project management",
-      "100GB storage",
-      "Priority support",
-      "Advanced integrations",
-      "Team analytics",
-    ],
-    cta: "Start Free Trial",
-    popular: true,
-  },
-  {
-    name: "Enterprise",
-    price: "Custom",
-    description: "For large organizations with custom needs",
-    features: [
-      "Everything in Professional",
-      "SSO & advanced security",
-      "Unlimited storage",
-      "Dedicated support",
-      "Custom integrations",
-      "On-premise deployment",
-    ],
-    cta: "Contact Sales",
-    popular: false,
-  },
-]
-
-export default function LandingPage() {
+export default function Home() {
   return (
-    <div className="min-h-screen bg-background">
-      {/* Header */}
-      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <div className="container mx-auto flex h-16 items-center justify-between px-4">
-          <Link href="/" className="flex items-center space-x-2">
-            <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-              <Users className="h-5 w-5 text-primary-foreground" />
-            </div>
-            <span className="text-xl font-bold">Teamspace</span>
-          </Link>
-
-          <nav className="hidden md:flex items-center space-x-6">
-            <a href="#features" className="text-muted-foreground hover:text-foreground transition-colors">
-              Features
-            </a>
-            <a href="#testimonials" className="text-muted-foreground hover:text-foreground transition-colors">
-              Testimonials
-            </a>
-            <a href="#pricing" className="text-muted-foreground hover:text-foreground transition-colors">
-              Pricing
-            </a>
-          </nav>
-
-          <div className="flex items-center space-x-4">
-            <Button variant="ghost" asChild>
-              <Link href="/dashboard">Dashboard</Link>
-            </Button>
-            <Button asChild>
-              <Link href="/dashboard">Get Started</Link>
-            </Button>
-          </div>
-        </div>
-      </header>
-
-      {/* Hero Section */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-background to-purple-50 py-20 lg:py-32">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="grid lg:grid-cols-2 gap-12 items-center">
-            <div className="space-y-8">
-              <Badge variant="secondary" className="w-fit">
-                🚀 New: AI-powered insights now available
-              </Badge>
-
-              <h1 className="text-4xl lg:text-6xl font-bold text-foreground leading-tight">
-                Where teams
-                <span className="text-primary"> collaborate</span> and ideas come to life
-              </h1>
-
-              <p className="text-xl text-muted-foreground leading-relaxed">
-                Streamline your team's workflow with our all-in-one collaboration platform. Chat, plan, share, and
-                deliver exceptional results together.
-              </p>
-
-              <div className="flex flex-col sm:flex-row gap-4">
-                <Button asChild size="lg" className="h-12 px-8">
-                  <Link href="/dashboard">
-                    Start Free Trial
-                    <ArrowRight className="ml-2 h-5 w-5" />
-                  </Link>
-                </Button>
-                <Button variant="outline" size="lg" className="h-12 px-8">
-                  <Play className="mr-2 h-5 w-5" />
-                  Watch Demo
-                </Button>
-              </div>
-
-              <div className="flex items-center space-x-6 text-sm text-muted-foreground">
-                <div className="flex items-center">
-                  <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
-                  Free 14-day trial
-                </div>
-                <div className="flex items-center">
-                  <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
-                  No credit card required
+    <div className={styles.page}>
+      <main className={styles.main}>
+        <div className={styles.ctas}>
+          <SignedOut>
+            <SignInButton>
+              {({signIn, isLoading}) => (
+                <button onClick={signIn} disabled={isLoading}>
+                  {isLoading ? 'Signing in...' : 'Sign In'}
+                </button>
+              )}
+            </SignInButton>
+          </SignedOut>
+          <SignedOut>
+            <SignInButton className={styles.primary}>Sign In with Redirect</SignInButton>
+          </SignedOut>
+          <SignedIn>
+            <User>
+              {({user}) => (
+                <div className={styles.user}>
+                  <img src={user?.profileUrl} alt="User Profile" className={styles.profilePicture} />
+                  <h2>{user?.orgName}</h2>
+                  <p>{user?.username}</p>
                 </div>
-              </div>
-            </div>
-
-            <div className="relative">
-              <Image
-                src="/placeholder.svg?height=500&width=600"
-                alt="Teamspace Dashboard"
-                width={600}
-                height={500}
-                className="w-full rounded-2xl shadow-2xl"
-              />
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Features Section */}
-      <section id="features" className="py-20">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <Badge variant="outline" className="mb-4">
-              Features
-            </Badge>
-            <h2 className="text-3xl lg:text-5xl font-bold text-foreground mb-4">
-              Everything your team needs to succeed
-            </h2>
-            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
-              From real-time collaboration to project management, Teamspace provides all the tools your team needs.
-            </p>
-          </div>
-
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {features.map((feature, index) => {
-              const Icon = feature.icon
-              return (
-                <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-shadow">
-                  <CardHeader>
-                    <div className={`w-12 h-12 ${feature.bgColor} rounded-lg flex items-center justify-center mb-4`}>
-                      <Icon className={`h-6 w-6 ${feature.color}`} />
-                    </div>
-                    <CardTitle className="text-xl">{feature.title}</CardTitle>
-                    <CardDescription className="text-base leading-relaxed">{feature.description}</CardDescription>
-                  </CardHeader>
-                </Card>
-              )
-            })}
-          </div>
-        </div>
-      </section>
-
-      {/* Testimonials Section */}
-      <section id="testimonials" className="bg-muted/50 py-20">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <Badge variant="outline" className="mb-4">
-              Testimonials
-            </Badge>
-            <h2 className="text-3xl lg:text-5xl font-bold text-foreground mb-4">What our customers say</h2>
-          </div>
-
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {testimonials.map((testimonial, index) => (
-              <Card key={index} className="border-0 shadow-lg">
-                <CardContent className="pt-6">
-                  <div className="flex mb-4">
-                    {[...Array(5)].map((_, i) => (
-                      <Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
-                    ))}
-                  </div>
-                  <blockquote className="text-foreground mb-6 text-lg leading-relaxed">
-                    "{testimonial.quote}"
-                  </blockquote>
-                  <div className="flex items-center">
-                    <Image
-                      src={testimonial.avatar || "/placeholder.svg"}
-                      alt={testimonial.author}
-                      width={48}
-                      height={48}
-                      className="w-12 h-12 rounded-full mr-4"
-                    />
-                    <div>
-                      <div className="font-semibold text-foreground">{testimonial.author}</div>
-                      <div className="text-muted-foreground text-sm">
-                        {testimonial.role}, {testimonial.company}
-                      </div>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Pricing Section */}
-      <section id="pricing" className="py-20">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <Badge variant="outline" className="mb-4">
-              Pricing
-            </Badge>
-            <h2 className="text-3xl lg:text-5xl font-bold text-foreground mb-4">Simple, transparent pricing</h2>
-            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
-              Choose the plan that's right for your team. Start free and scale as you grow.
-            </p>
-          </div>
-
-          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
-            {pricingPlans.map((plan, index) => (
-              <Card key={index} className={`relative ${plan.popular ? "border-primary shadow-lg scale-105" : ""}`}>
-                {plan.popular && (
-                  <Badge className="absolute -top-3 left-1/2 transform -translate-x-1/2">Most Popular</Badge>
-                )}
-
-                <CardHeader className="text-center">
-                  <CardTitle className="text-xl">{plan.name}</CardTitle>
-                  <CardDescription>{plan.description}</CardDescription>
-                  <div className="mt-4">
-                    <span className="text-4xl font-bold text-foreground">{plan.price}</span>
-                    {plan.period && <span className="text-muted-foreground">{plan.period}</span>}
-                  </div>
-                </CardHeader>
-
-                <CardContent>
-                  <ul className="space-y-3 mb-8">
-                    {plan.features.map((feature, featureIndex) => (
-                      <li key={featureIndex} className="flex items-center">
-                        <CheckCircle className="h-5 w-5 text-green-500 mr-3 flex-shrink-0" />
-                        <span className="text-muted-foreground">{feature}</span>
-                      </li>
-                    ))}
-                  </ul>
-
-                  <Button asChild className="w-full" variant={plan.popular ? "default" : "outline"}>
-                    <Link href="/dashboard">{plan.cta}</Link>
-                  </Button>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* CTA Section */}
-      <section className="bg-primary py-20">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <h2 className="text-3xl lg:text-5xl font-bold text-primary-foreground mb-6">
-            Ready to transform your team's productivity?
-          </h2>
-          <p className="text-xl text-primary-foreground/80 mb-8 max-w-2xl mx-auto">
-            Join thousands of teams already using Teamspace to collaborate better and achieve more.
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Button asChild size="lg" variant="secondary" className="h-12 px-8">
-              <Link href="/dashboard">
-                Start Free Trial
-                <ArrowRight className="ml-2 h-5 w-5" />
-              </Link>
-            </Button>
-            <Button
-              size="lg"
-              variant="outline"
-              className="h-12 px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary"
-            >
-              Schedule Demo
-            </Button>
-          </div>
-        </div>
-      </section>
-
-      {/* Footer */}
-      <footer className="bg-muted py-16">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="grid md:grid-cols-2 lg:grid-cols-5 gap-8">
-            <div className="lg:col-span-2">
-              <div className="flex items-center mb-4">
-                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-                  <Users className="h-5 w-5 text-primary-foreground" />
-                </div>
-                <span className="ml-2 text-xl font-bold">Teamspace</span>
-              </div>
-              <p className="text-muted-foreground mb-6 max-w-md">
-                Empowering teams to collaborate better and achieve more together.
-              </p>
-              <div className="flex space-x-4">
-                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
-                  <Twitter className="h-5 w-5" />
-                </Link>
-                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
-                  <Github className="h-5 w-5" />
-                </Link>
-                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
-                  <Linkedin className="h-5 w-5" />
-                </Link>
-              </div>
-            </div>
-
-            <div>
-              <h4 className="font-semibold mb-4">Product</h4>
-              <ul className="space-y-2 text-muted-foreground">
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Features
-                  </Link>
-                </li>
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Pricing
-                  </Link>
-                </li>
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    API
-                  </Link>
-                </li>
-              </ul>
-            </div>
-
-            <div>
-              <h4 className="font-semibold mb-4">Company</h4>
-              <ul className="space-y-2 text-muted-foreground">
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    About
-                  </Link>
-                </li>
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Blog
-                  </Link>
-                </li>
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Careers
-                  </Link>
-                </li>
-              </ul>
-            </div>
-
-            <div>
-              <h4 className="font-semibold mb-4">Support</h4>
-              <ul className="space-y-2 text-muted-foreground">
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Help Center
-                  </Link>
-                </li>
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Documentation
-                  </Link>
-                </li>
-                <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Contact
-                  </Link>
-                </li>
-              </ul>
-            </div>
-          </div>
-
-          <div className="border-t border-border mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
-            <p className="text-muted-foreground text-sm">
-              © {new Date().getFullYear()} Teamspace. All rights reserved.
-            </p>
-            <div className="flex space-x-6 mt-4 md:mt-0">
-              <Link href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
-                Privacy Policy
-              </Link>
-              <Link href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
-                Terms of Service
-              </Link>
-            </div>
-          </div>
+              )}
+            </User>
+            <SignOutButton className={styles.secondary}>Sign Out</SignOutButton>
+          </SignedIn>
         </div>
-      </footer>
+      </main>
     </div>
-  )
+  );
 }
diff --git a/samples/teamspace-nextjs/app/profile/page.tsx b/samples/teamspace-nextjs/app/profile/page.tsx
deleted file mode 100644
index a37d8d309..000000000
--- a/samples/teamspace-nextjs/app/profile/page.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { useAuth } from "@/hooks/use-auth"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Badge } from "@/components/ui/badge"
-import { User, Mail, Calendar, MapPin, LinkIcon, Edit3, Save, X } from "lucide-react"
-import { Header } from "@/components/header"
-
-export default function ProfilePage() {
-  const { user } = useAuth()
-  const [isEditing, setIsEditing] = useState(false)
-  const [formData, setFormData] = useState({
-    name: user?.name || "",
-    email: user?.email || "",
-    bio: "Full-stack developer passionate about building great user experiences.",
-    location: "San Francisco, CA",
-    website: "https://johndoe.dev",
-    company: "Acme Corp",
-  })
-
-  const handleSave = () => {
-    console.log("Saving profile:", formData)
-    setIsEditing(false)
-  }
-
-  const handleCancel = () => {
-    setFormData({
-      name: user?.name || "",
-      email: user?.email || "",
-      bio: "Full-stack developer passionate about building great user experiences.",
-      location: "San Francisco, CA",
-      website: "https://johndoe.dev",
-      company: "Acme Corp",
-    })
-    setIsEditing(false)
-  }
-
-  const stats = [
-    { label: "Projects", value: "24" },
-    { label: "Organizations", value: "3" },
-    { label: "Contributions", value: "1,247" },
-    { label: "Followers", value: "89" },
-  ]
-
-  const recentProjects = [
-    {
-      id: 1,
-      name: "Mobile App Redesign",
-      description: "Complete UI/UX overhaul for mobile application",
-      status: "In Progress",
-      lastUpdated: "2 days ago",
-    },
-    {
-      id: 2,
-      name: "API Documentation",
-      description: "Comprehensive API documentation and examples",
-      status: "Completed",
-      lastUpdated: "1 week ago",
-    },
-    {
-      id: 3,
-      name: "Team Dashboard",
-      description: "Analytics dashboard for team performance metrics",
-      status: "Planning",
-      lastUpdated: "3 days ago",
-    },
-  ]
-
-  return (
-    <div className="min-h-screen bg-background">
-      <Header />
-
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-4xl">
-        {/* Profile Header */}
-        <Card className="mb-8">
-          <div className="h-32 bg-gradient-to-r from-blue-500 to-purple-600 rounded-t-lg"></div>
-          <CardContent className="relative pt-0 pb-6">
-            <div className="flex items-end justify-between -mt-16 mb-6">
-              <div className="flex items-end space-x-4">
-                <Avatar className="w-24 h-24 border-4 border-background">
-                  <AvatarImage src={user?.avatar || "/placeholder.svg"} alt={user?.name} />
-                  <AvatarFallback className="text-2xl">{user?.name?.charAt(0)}</AvatarFallback>
-                </Avatar>
-                <div className="pb-2">
-                  {isEditing ? (
-                    <Input
-                      value={formData.name}
-                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                      className="text-2xl font-bold bg-transparent border-b border-border focus:border-primary"
-                    />
-                  ) : (
-                    <h1 className="text-2xl font-bold text-foreground">{formData.name}</h1>
-                  )}
-                  <p className="text-muted-foreground">@{user?.username}</p>
-                </div>
-              </div>
-              <div className="pb-2">
-                {isEditing ? (
-                  <div className="flex space-x-2">
-                    <Button onClick={handleSave} size="sm">
-                      <Save className="h-4 w-4 mr-2" />
-                      Save
-                    </Button>
-                    <Button onClick={handleCancel} variant="outline" size="sm">
-                      <X className="h-4 w-4 mr-2" />
-                      Cancel
-                    </Button>
-                  </div>
-                ) : (
-                  <Button onClick={() => setIsEditing(true)} variant="outline" size="sm">
-                    <Edit3 className="h-4 w-4 mr-2" />
-                    Edit Profile
-                  </Button>
-                )}
-              </div>
-            </div>
-
-            {/* Bio and Details */}
-            <div className="space-y-4">
-              {isEditing ? (
-                <Textarea
-                  value={formData.bio}
-                  onChange={(e) => setFormData({ ...formData, bio: e.target.value })}
-                  rows={3}
-                  placeholder="Tell us about yourself..."
-                />
-              ) : (
-                <p className="text-foreground">{formData.bio}</p>
-              )}
-
-              <div className="flex flex-wrap gap-6 text-sm text-muted-foreground">
-                <div className="flex items-center">
-                  <User className="h-4 w-4 mr-2" />
-                  {isEditing ? (
-                    <Input
-                      value={formData.company}
-                      onChange={(e) => setFormData({ ...formData, company: e.target.value })}
-                      className="h-6 text-sm bg-transparent border-b border-border focus:border-primary"
-                    />
-                  ) : (
-                    formData.company
-                  )}
-                </div>
-                <div className="flex items-center">
-                  <MapPin className="h-4 w-4 mr-2" />
-                  {isEditing ? (
-                    <Input
-                      value={formData.location}
-                      onChange={(e) => setFormData({ ...formData, location: e.target.value })}
-                      className="h-6 text-sm bg-transparent border-b border-border focus:border-primary"
-                    />
-                  ) : (
-                    formData.location
-                  )}
-                </div>
-                <div className="flex items-center">
-                  <LinkIcon className="h-4 w-4 mr-2" />
-                  {isEditing ? (
-                    <Input
-                      type="url"
-                      value={formData.website}
-                      onChange={(e) => setFormData({ ...formData, website: e.target.value })}
-                      className="h-6 text-sm bg-transparent border-b border-border focus:border-primary"
-                    />
-                  ) : (
-                    <a href={formData.website} className="text-primary hover:underline">
-                      {formData.website}
-                    </a>
-                  )}
-                </div>
-                <div className="flex items-center">
-                  <Mail className="h-4 w-4 mr-2" />
-                  {formData.email}
-                </div>
-                <div className="flex items-center">
-                  <Calendar className="h-4 w-4 mr-2" />
-                  Joined March 2023
-                </div>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Stats */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-          {stats.map((stat) => (
-            <Card key={stat.label} className="text-center">
-              <CardContent className="pt-6">
-                <div className="text-2xl font-bold text-foreground">{stat.value}</div>
-                <div className="text-sm text-muted-foreground">{stat.label}</div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-
-        {/* Recent Projects */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Recent Projects</CardTitle>
-            <CardDescription>Your latest work and contributions</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              {recentProjects.map((project) => (
-                <div
-                  key={project.id}
-                  className="flex items-center justify-between p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors"
-                >
-                  <div className="flex-1">
-                    <h3 className="font-medium text-foreground">{project.name}</h3>
-                    <p className="text-sm text-muted-foreground mt-1">{project.description}</p>
-                    <p className="text-xs text-muted-foreground mt-2">Updated {project.lastUpdated}</p>
-                  </div>
-                  <Badge
-                    variant={
-                      project.status === "Completed"
-                        ? "default"
-                        : project.status === "In Progress"
-                          ? "secondary"
-                          : "outline"
-                    }
-                  >
-                    {project.status}
-                  </Badge>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-}
diff --git a/samples/teamspace-nextjs/components.json b/samples/teamspace-nextjs/components.json
deleted file mode 100644
index 335484f94..000000000
--- a/samples/teamspace-nextjs/components.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": true,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "app/globals.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide"
-}
\ No newline at end of file
diff --git a/samples/teamspace-nextjs/components/header.tsx b/samples/teamspace-nextjs/components/header.tsx
deleted file mode 100644
index a16a6a3bf..000000000
--- a/samples/teamspace-nextjs/components/header.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import Link from "next/link"
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Users, ChevronDown, Settings, User, LogOut, Plus, Check, Building2 } from "lucide-react"
-import { useAuth } from "@/hooks/use-auth"
-
-export function Header() {
-  const { user, currentOrg, organizations, setCurrentOrg } = useAuth()
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
-
-  return (
-    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container mx-auto flex h-16 items-center justify-between px-4">
-        <div className="flex items-center space-x-8">
-          <Link href="/dashboard" className="flex items-center space-x-2">
-            <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-              <Users className="h-5 w-5 text-primary-foreground" />
-            </div>
-            <span className="text-xl font-bold">Teamspace</span>
-          </Link>
-
-          <nav className="hidden md:flex space-x-6">
-            <Link href="/dashboard" className="text-muted-foreground hover:text-foreground transition-colors">
-              Dashboard
-            </Link>
-            <Link href="/projects" className="text-muted-foreground hover:text-foreground transition-colors">
-              Projects
-            </Link>
-            <Link href="/teams" className="text-muted-foreground hover:text-foreground transition-colors">
-              Teams
-            </Link>
-          </nav>
-        </div>
-
-        <div className="flex items-center space-x-4">
-          {/* Organization Switcher */}
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" className="flex items-center space-x-2">
-                <Avatar className="w-5 h-5">
-                  <AvatarImage src={currentOrg?.avatar || "/placeholder.svg"} alt={currentOrg?.name} />
-                  <AvatarFallback className="text-xs">{currentOrg?.name?.charAt(0)}</AvatarFallback>
-                </Avatar>
-                <span className="max-w-32 truncate">{currentOrg?.name}</span>
-                <ChevronDown className="h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-64" align="end">
-              <DropdownMenuLabel>Switch organization</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              {organizations?.map((org) => (
-                <DropdownMenuItem
-                  key={org.id}
-                  onClick={() => setCurrentOrg(org)}
-                  className="flex items-center justify-between"
-                >
-                  <div className="flex items-center space-x-3">
-                    <Avatar className="w-6 h-6">
-                      <AvatarImage src={org.avatar || "/placeholder.svg"} alt={org.name} />
-                      <AvatarFallback className="text-xs">{org.name.charAt(0)}</AvatarFallback>
-                    </Avatar>
-                    <div>
-                      <div className="font-medium">{org.name}</div>
-                      <div className="text-xs text-muted-foreground">{org.memberCount} members</div>
-                    </div>
-                  </div>
-                  {currentOrg?.id === org.id && <Check className="h-4 w-4 text-green-600" />}
-                </DropdownMenuItem>
-              ))}
-              <DropdownMenuSeparator />
-              <DropdownMenuItem asChild>
-                <Link href="/organizations" className="flex items-center">
-                  <Building2 className="h-4 w-4 mr-2" />
-                  Manage organizations
-                </Link>
-              </DropdownMenuItem>
-              <DropdownMenuItem asChild>
-                <Link href="/organizations/new" className="flex items-center">
-                  <Plus className="h-4 w-4 mr-2" />
-                  New organization
-                </Link>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-
-          {/* User Dropdown */}
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="flex items-center space-x-2 p-2">
-                <Avatar className="w-8 h-8">
-                  <AvatarImage src={user?.avatar || "/placeholder.svg"} alt={user?.name} />
-                  <AvatarFallback>{user?.name?.charAt(0)}</AvatarFallback>
-                </Avatar>
-                <ChevronDown className="h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-56" align="end">
-              <DropdownMenuLabel>
-                <div>
-                  <div className="font-medium">{user?.name}</div>
-                  <div className="text-sm text-muted-foreground">@{user?.username}</div>
-                </div>
-              </DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem asChild>
-                <Link href="/profile" className="flex items-center">
-                  <User className="h-4 w-4 mr-2" />
-                  Your profile
-                </Link>
-              </DropdownMenuItem>
-              <DropdownMenuItem asChild>
-                <Link href="/settings" className="flex items-center">
-                  <Settings className="h-4 w-4 mr-2" />
-                  Settings
-                </Link>
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem className="flex items-center text-destructive">
-                <LogOut className="h-4 w-4 mr-2" />
-                Sign out
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </div>
-    </header>
-  )
-}
diff --git a/samples/teamspace-nextjs/components/theme-provider.tsx b/samples/teamspace-nextjs/components/theme-provider.tsx
deleted file mode 100644
index 1cd216d6d..000000000
--- a/samples/teamspace-nextjs/components/theme-provider.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-"use client"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
-import type { ThemeProviderProps } from "next-themes"
-
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
-}
diff --git a/samples/teamspace-nextjs/components/ui/alert.tsx b/samples/teamspace-nextjs/components/ui/alert.tsx
deleted file mode 100644
index a0de44914..000000000
--- a/samples/teamspace-nextjs/components/ui/alert.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-)
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
-))
-Alert.displayName = "Alert"
-
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
-  ),
-)
-AlertTitle.displayName = "AlertTitle"
-
-const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
-  ),
-)
-AlertDescription.displayName = "AlertDescription"
-
-export { Alert, AlertTitle, AlertDescription }
diff --git a/samples/teamspace-nextjs/components/ui/avatar.tsx b/samples/teamspace-nextjs/components/ui/avatar.tsx
deleted file mode 100644
index 71e428b4c..000000000
--- a/samples/teamspace-nextjs/components/ui/avatar.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-
-import { cn } from "@/lib/utils"
-
-function Avatar({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  )
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Avatar, AvatarImage, AvatarFallback }
diff --git a/samples/teamspace-nextjs/components/ui/badge.tsx b/samples/teamspace-nextjs/components/ui/badge.tsx
deleted file mode 100644
index 02054139a..000000000
--- a/samples/teamspace-nextjs/components/ui/badge.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
-
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-export { Badge, badgeVariants }
diff --git a/samples/teamspace-nextjs/components/ui/button.tsx b/samples/teamspace-nextjs/components/ui/button.tsx
deleted file mode 100644
index a2df8dce6..000000000
--- a/samples/teamspace-nextjs/components/ui/button.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }
diff --git a/samples/teamspace-nextjs/components/ui/card.tsx b/samples/teamspace-nextjs/components/ui/card.tsx
deleted file mode 100644
index d05bbc6c7..000000000
--- a/samples/teamspace-nextjs/components/ui/card.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}
diff --git a/samples/teamspace-nextjs/components/ui/checkbox.tsx b/samples/teamspace-nextjs/components/ui/checkbox.tsx
deleted file mode 100644
index 5c40f159d..000000000
--- a/samples/teamspace-nextjs/components/ui/checkbox.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className,
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
-
-export { Checkbox }
diff --git a/samples/teamspace-nextjs/components/ui/dropdown-menu.tsx b/samples/teamspace-nextjs/components/ui/dropdown-menu.tsx
deleted file mode 100644
index ec51e9cc9..000000000
--- a/samples/teamspace-nextjs/components/ui/dropdown-menu.tsx
+++ /dev/null
@@ -1,257 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
-}
-
-function DropdownMenuPortal({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
-}
-
-function DropdownMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  )
-}
-
-function DropdownMenuGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
-}
-
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <DropdownMenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
-  return (
-    <DropdownMenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  )
-}
-
-function DropdownMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  )
-}
-
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.Label
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
-}
-
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubTrigger>
-  )
-}
-
-function DropdownMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-}
diff --git a/samples/teamspace-nextjs/components/ui/input.tsx b/samples/teamspace-nextjs/components/ui/input.tsx
deleted file mode 100644
index 03295ca6a..000000000
--- a/samples/teamspace-nextjs/components/ui/input.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Input }
diff --git a/samples/teamspace-nextjs/components/ui/label.tsx b/samples/teamspace-nextjs/components/ui/label.tsx
deleted file mode 100644
index fb5fbc3ee..000000000
--- a/samples/teamspace-nextjs/components/ui/label.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-
-import { cn } from "@/lib/utils"
-
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Label }
diff --git a/samples/teamspace-nextjs/components/ui/textarea.tsx b/samples/teamspace-nextjs/components/ui/textarea.tsx
deleted file mode 100644
index 7f21b5e78..000000000
--- a/samples/teamspace-nextjs/components/ui/textarea.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Textarea }
diff --git a/samples/teamspace-nextjs-1/env.local.example b/samples/teamspace-nextjs/env.local.example
similarity index 100%
rename from samples/teamspace-nextjs-1/env.local.example
rename to samples/teamspace-nextjs/env.local.example
diff --git a/samples/teamspace-nextjs/hooks/use-auth.tsx b/samples/teamspace-nextjs/hooks/use-auth.tsx
deleted file mode 100644
index 9cd47dc5e..000000000
--- a/samples/teamspace-nextjs/hooks/use-auth.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-"use client"
-
-import { createContext, useContext, type ReactNode } from "react"
-
-interface User {
-  id: string
-  name: string
-  email: string
-  avatar: string
-  username: string
-}
-
-interface Organization {
-  id: string
-  name: string
-  slug: string
-  avatar: string
-  role: "owner" | "admin" | "member"
-  memberCount: number
-}
-
-interface AuthContextType {
-  user: User
-  currentOrg: Organization
-  organizations: Organization[]
-  setCurrentOrg: (org: Organization) => void
-}
-
-const AuthContext = createContext<AuthContextType | null>(null)
-
-// Mock data
-const mockUser: User = {
-  id: "1",
-  name: "John Doe",
-  email: "john@teamspace.com",
-  avatar: "/placeholder.svg?height=32&width=32",
-  username: "johndoe",
-}
-
-const mockOrganizations: Organization[] = [
-  {
-    id: "1",
-    name: "Acme Corp",
-    slug: "acme-corp",
-    avatar: "/placeholder.svg?height=32&width=32",
-    role: "owner",
-    memberCount: 12,
-  },
-  {
-    id: "2",
-    name: "Tech Startup",
-    slug: "tech-startup",
-    avatar: "/placeholder.svg?height=32&width=32",
-    role: "admin",
-    memberCount: 8,
-  },
-  {
-    id: "3",
-    name: "Design Agency",
-    slug: "design-agency",
-    avatar: "/placeholder.svg?height=32&width=32",
-    role: "member",
-    memberCount: 15,
-  },
-]
-
-export function AuthProvider({ children }: { children: ReactNode }) {
-  const setCurrentOrg = (org: Organization) => {
-    // In a real app, this would update state
-    console.log("Switching to organization:", org.name)
-  }
-
-  return (
-    <AuthContext.Provider
-      value={{
-        user: mockUser,
-        currentOrg: mockOrganizations[0],
-        organizations: mockOrganizations,
-        setCurrentOrg,
-      }}
-    >
-      {children}
-    </AuthContext.Provider>
-  )
-}
-
-export function useAuth() {
-  const context = useContext(AuthContext)
-  if (!context) {
-    throw new Error("useAuth must be used within an AuthProvider")
-  }
-  return context
-}
diff --git a/samples/teamspace-nextjs/lib/utils.ts b/samples/teamspace-nextjs/lib/utils.ts
deleted file mode 100644
index d084ccade..000000000
--- a/samples/teamspace-nextjs/lib/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
diff --git a/samples/teamspace-nextjs-1/middleware.ts b/samples/teamspace-nextjs/middleware.ts
similarity index 100%
rename from samples/teamspace-nextjs-1/middleware.ts
rename to samples/teamspace-nextjs/middleware.ts
diff --git a/samples/teamspace-nextjs/next.config.js b/samples/teamspace-nextjs/next.config.js
deleted file mode 100644
index b307b2760..000000000
--- a/samples/teamspace-nextjs/next.config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const nextConfig = {
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
-  typescript: {
-    ignoreBuildErrors: true,
-  },
-  images: {
-    unoptimized: true,
-  },
-}
-
-export default nextConfig
diff --git a/samples/teamspace-nextjs/package.json b/samples/teamspace-nextjs/package.json
index 4715cea34..11f9f223f 100644
--- a/samples/teamspace-nextjs/package.json
+++ b/samples/teamspace-nextjs/package.json
@@ -1,37 +1,26 @@
 {
-  "name": "teamspace",
-  "version": "0.1.0",
   "private": true,
+  "name": "@asgardeo/teamspace-nextjs",
+  "version": "0.0.0",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "^15.1.0",
-    "react": "^19",
-    "react-dom": "^19",
-    "@radix-ui/react-avatar": "^1.1.1",
-    "@radix-ui/react-checkbox": "^1.1.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-slot": "^1.1.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.460.0",
-    "tailwind-merge": "^2.5.4",
-    "next-themes": "^0.4.3"
+    "@asgardeo/nextjs": "workspace:^",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "next": "15.3.2"
   },
   "devDependencies": {
-    "typescript": "^5.6.0",
-    "@types/node": "^22.9.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "tailwindcss": "^4.0.0-alpha.30",
-    "@tailwindcss/postcss": "^4.0.0-alpha.30",
-    "postcss": "^8.4.49",
-    "eslint": "^9.15.0",
-    "eslint-config-next": "^15.1.0"
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.3.2",
+    "@eslint/eslintrc": "^3"
   }
 }
diff --git a/samples/teamspace-nextjs/postcss.config.mjs b/samples/teamspace-nextjs/postcss.config.mjs
deleted file mode 100644
index 7059fe95a..000000000
--- a/samples/teamspace-nextjs/postcss.config.mjs
+++ /dev/null
@@ -1,6 +0,0 @@
-const config = {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};
-export default config;
diff --git a/samples/teamspace-nextjs/tsconfig.json b/samples/teamspace-nextjs/tsconfig.json
index 4f3b7b8e5..d8b93235f 100644
--- a/samples/teamspace-nextjs/tsconfig.json
+++ b/samples/teamspace-nextjs/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "ES6"],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,7 +18,6 @@
         "name": "next"
       }
     ],
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./*"]
     }
diff --git a/samples/teamspace-react/src/components/header/UserDropdown.tsx b/samples/teamspace-react/src/components/header/UserDropdown.tsx
index 0574fb69a..bef0425ca 100644
--- a/samples/teamspace-react/src/components/header/UserDropdown.tsx
+++ b/samples/teamspace-react/src/components/header/UserDropdown.tsx
@@ -12,7 +12,6 @@ export default function UserDropdown() {
   const [showUserProfile, setShowUserProfile] = useState(false);
   const userDropdownRef = useRef<HTMLDivElement>(null);
 
-  // Close dropdown when clicking outside
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (userDropdownRef.current && !userDropdownRef.current.contains(event.target as Node)) {

From 4c32a23048b0d6a5e2fc97272bfe5b613b9fe04e Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 09:50:48 +0530
Subject: [PATCH 122/131] fix(react): fix build

---
 .../react/src/components/presentation/User/BaseUser.tsx    | 6 +++---
 packages/react/src/components/presentation/User/User.tsx   | 6 +++---
 samples/teamspace-react/package.json                       | 6 +++---
 samples/teamspace-react/vite.config.ts                     | 7 ++-----
 4 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/components/presentation/User/BaseUser.tsx b/packages/react/src/components/presentation/User/BaseUser.tsx
index e9f87c802..50c9e210e 100644
--- a/packages/react/src/components/presentation/User/BaseUser.tsx
+++ b/packages/react/src/components/presentation/User/BaseUser.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import type {User} from '@asgardeo/browser';
+import {User as IUser} from '@asgardeo/browser';
 import {FC, ReactElement, ReactNode} from 'react';
 
 /**
@@ -26,14 +26,14 @@ export interface BaseUserProps {
   /**
    * The user object to display. If not provided, the component will render the fallback.
    */
-  user: User | null;
+  user: IUser | null;
 
   /**
    * Render prop that takes the user object and returns a ReactNode.
    * @param user - The authenticated user object from Asgardeo.
    * @returns A ReactNode to render.
    */
-  children: (user: User | null) => ReactNode;
+  children: (user: IUser | null) => ReactNode;
 
   /**
    * Optional element to render when no user is provided.
diff --git a/packages/react/src/components/presentation/User/User.tsx b/packages/react/src/components/presentation/User/User.tsx
index ed0bb09fc..217db3365 100644
--- a/packages/react/src/components/presentation/User/User.tsx
+++ b/packages/react/src/components/presentation/User/User.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import type {User} from '@asgardeo/browser';
+import {User as IUser} from '@asgardeo/browser';
 import {FC, ReactElement, ReactNode} from 'react';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
 import BaseUser, {BaseUserProps} from './BaseUser';
@@ -31,7 +31,7 @@ export interface UserProps extends Omit<BaseUserProps, 'user'> {
    * @param user - The authenticated user object from Asgardeo.
    * @returns A ReactNode to render.
    */
-  children: (user: User | null) => ReactNode;
+  children: (user: IUser | null) => ReactNode;
 
   /**
    * Optional element to render when no user is signed in.
@@ -47,7 +47,7 @@ export interface UserProps extends Omit<BaseUserProps, 'user'> {
  *
  * @example
  * ```tsx
- * import { User } from '@asgardeo/auth-react';
+ * import { IUser } from '@asgardeo/auth-react';
  *
  * const App = () => {
  *   return (
diff --git a/samples/teamspace-react/package.json b/samples/teamspace-react/package.json
index 1a2d9db06..b2427936a 100644
--- a/samples/teamspace-react/package.json
+++ b/samples/teamspace-react/package.json
@@ -25,6 +25,7 @@
     "@tailwindcss/vite": "^4.1.8",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-basic-ssl": "^2.0.0",
     "@vitejs/plugin-react": "^4.4.1",
     "autoprefixer": "^10.4.16",
     "eslint": "^9.25.0",
@@ -36,7 +37,6 @@
     "tw-animate-css": "^1.3.4",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.30.1",
-    "vite": "^6.3.5",
-    "vite-plugin-mkcert": "^1.17.8"
+    "vite": "^6.3.5"
   }
-}
\ No newline at end of file
+}
diff --git a/samples/teamspace-react/vite.config.ts b/samples/teamspace-react/vite.config.ts
index 7fb657bc2..3a083341c 100644
--- a/samples/teamspace-react/vite.config.ts
+++ b/samples/teamspace-react/vite.config.ts
@@ -2,17 +2,14 @@ import path from 'path';
 import {defineConfig} from 'vite';
 import react from '@vitejs/plugin-react';
 import tailwindcss from '@tailwindcss/vite';
-import mkcert from 'vite-plugin-mkcert';
+import basicSsl from '@vitejs/plugin-basic-ssl';
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [tailwindcss(), react(), mkcert()],
+  plugins: [tailwindcss(), react(), basicSsl()],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),
     },
   },
-  server: {
-    https: true,
-  },
 });

From 775f95332d43d9503d3abfbc713a7e9cad79b2f6 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 10:14:43 +0530
Subject: [PATCH 123/131] chore(react): code structure for improved readability
 and maintainability

---
 packages/javascript/src/i18n/en-US.ts         |   19 +-
 packages/javascript/src/models/i18n.ts        |   17 +
 .../presentation/SignIn/BaseSignIn.tsx        |   37 +-
 .../components/presentation/SignIn/SignIn.tsx |    5 -
 .../SignIn/options/FacebookButton.tsx         |    1 -
 .../SignIn/options/GitHubButton.tsx           |    1 -
 .../SignIn/options/GoogleButton.tsx           |    1 -
 .../SignIn/options/LinkedInButton.tsx         |    1 -
 .../SignIn/options/MicrosoftButton.tsx        |    1 -
 .../SignIn/options/MultiOptionButton.tsx      |    1 -
 .../options/SignInWithEthereumButton.tsx      |    1 -
 .../SignIn/options/SocialButton.tsx           |    1 -
 .../components/primitives/Button/Button.tsx   |   45 +-
 .../components/primitives/Spinner/Spinner.tsx |  101 ++
 packages/react/src/index.ts                   |    3 +
 pnpm-lock.yaml                                | 1102 ++---------------
 16 files changed, 251 insertions(+), 1086 deletions(-)
 create mode 100644 packages/react/src/components/primitives/Spinner/Spinner.tsx

diff --git a/packages/javascript/src/i18n/en-US.ts b/packages/javascript/src/i18n/en-US.ts
index bd60e9c69..163f5f405 100644
--- a/packages/javascript/src/i18n/en-US.ts
+++ b/packages/javascript/src/i18n/en-US.ts
@@ -35,7 +35,7 @@ const translations: I18nTranslations = {
   'elements.buttons.ethereum': 'Continue with Sign In Ethereum',
   'elements.buttons.multi.option': 'Continue with {connection}',
   'elements.buttons.social': 'Continue with {connection}',
-  
+
   /* Fields */
   'elements.fields.placeholder': 'Enter your {field}',
 
@@ -70,6 +70,23 @@ const translations: I18nTranslations = {
   'username.password.submit.button': 'Continue',
   'username.password.title': 'Sign In',
   'username.password.subtitle': 'Enter your username and password to continue.',
+
+  /* |---------------------------------------------------------------| */
+  /* |                        Messages                               | */
+  /* |---------------------------------------------------------------| */
+
+  'messages.loading': 'Loading...',
+
+  /* |---------------------------------------------------------------| */
+  /* |                        Errors                                 | */
+  /* |---------------------------------------------------------------| */
+
+  'errors.title': 'Error',
+  'errors.sign.in.initialization': 'An error occurred while initializing. Please try again later.',
+  'errors.sign.in.flow.failure': 'An error occurred during the sign-in flow. Please try again later.',
+  'errors.sign.in.flow.completion.failure': 'An error occurred while completing the sign-in flow. Please try again later.',
+  'errors.sign.in.flow.passkeys.failure': 'An error occurred while signing in with passkeys. Please try again later.',
+  'errors.sign.in.flow.passkeys.completion.failure': 'An error occurred while completing the passkeys sign-in flow. Please try again later.',
 };
 
 const metadata: I18nMetadata = {
diff --git a/packages/javascript/src/models/i18n.ts b/packages/javascript/src/models/i18n.ts
index ff58d2946..321f0767e 100644
--- a/packages/javascript/src/models/i18n.ts
+++ b/packages/javascript/src/models/i18n.ts
@@ -68,6 +68,23 @@ export interface I18nTranslations {
   'username.password.submit.button': string;
   'username.password.title': string;
   'username.password.subtitle': string;
+
+  /* |---------------------------------------------------------------| */
+  /* |                        Messages                               | */
+  /* |---------------------------------------------------------------| */
+
+  'messages.loading': string;
+
+  /* |---------------------------------------------------------------| */
+  /* |                        Errors                                 | */
+  /* |---------------------------------------------------------------| */
+
+  'errors.title': string;
+  'errors.sign.in.initialization': string;
+  'errors.sign.in.flow.failure': string;
+  'errors.sign.in.flow.completion.failure': string;
+  'errors.sign.in.flow.passkeys.failure': string;
+  'errors.sign.in.flow.passkeys.completion.failure': string;
 }
 
 export type I18nTextDirection = 'ltr' | 'rtl';
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index ea9f4d262..ef6161cdb 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -33,6 +33,7 @@ import Card from '../../primitives/Card/Card';
 import Alert from '../../primitives/Alert/Alert';
 import Divider from '../../primitives/Divider/Divider';
 import Typography from '../../primitives/Typography/Typography';
+import Spinner from '../../primitives/Spinner/Spinner';
 import useTranslation from '../../../hooks/useTranslation';
 import {useForm, FormField} from '../../../hooks/useForm';
 import FlowProvider from '../../../contexts/Flow/FlowProvider';
@@ -283,11 +284,6 @@ export interface BaseSignInProps {
    */
   messageClassName?: string;
 
-  /**
-   * Custom loading text.
-   */
-  loadingText?: string;
-
   /**
    * Size variant for the component.
    */
@@ -355,7 +351,6 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
   buttonClassName = '',
   errorClassName = '',
   messageClassName = '',
-  loadingText,
   size = 'medium',
   variant = 'default',
 }) => {
@@ -659,7 +654,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
         response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
         response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
       ) {
-        setError(t('errors.authenticationFailedDetail'));
+        setError(t('errors.sign.in.flow.completion.failure'));
         return;
       }
 
@@ -695,7 +690,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
         }
       }
     } catch (err) {
-      const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.authenticationFailed');
+      const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.sign.in.flow.failure');
       setError(errorMessage);
       onError?.(err as Error);
     } finally {
@@ -762,7 +757,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
             response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
             response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
           ) {
-            setError(t('errors.passkeyAuthenticationFailed'));
+            setError(t('errors.sign.in.flow.passkeys.completion.failure'));
             return;
           }
 
@@ -806,7 +801,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
           // Provide more context for common errors
           let errorMessage =
-            passkeyError instanceof Error ? passkeyError.message : t('errors.passkeyAuthenticationFailed');
+            passkeyError instanceof Error ? passkeyError.message : t('errors.sign.in.flow.passkeys.failure');
 
           // Add additional context for security errors
           if (passkeyError instanceof Error && passkeyError.message.includes('security')) {
@@ -1095,12 +1090,12 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
           setIsInitialized(true);
           onFlowChange?.(response);
 
-          if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+          if (response?.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
             onSuccess?.((response as any).authData || {});
             return;
           }
 
-          if (response.nextStep?.authenticators?.length > 0) {
+          if (response?.nextStep?.authenticators?.length > 0) {
             if (response.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' && response.nextStep.authenticators.length > 1) {
               setCurrentAuthenticator(null);
             } else {
@@ -1110,7 +1105,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
             }
           }
 
-          if ('nextStep' in response && response.nextStep && 'messages' in response.nextStep) {
+          if (response && 'nextStep' in response && response.nextStep && 'messages' in response.nextStep) {
             const stepMessages = (response.nextStep as any).messages || [];
             setMessages(
               stepMessages.map((msg: any) => ({
@@ -1120,7 +1115,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
             );
           }
         } catch (err) {
-          const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.initializationFailed');
+          const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.sign.in.initialization');
           setError(errorMessage);
           onError?.(err as Error);
         } finally {
@@ -1141,7 +1136,12 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
     return (
       <Card className={containerClasses}>
         <Card.Content>
-          <Typography variant="body1">{loadingText ?? t('messages.loading')}</Typography>
+          <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '2rem'}}>
+            <Spinner size="medium" />
+            <Typography variant="body1" style={{marginTop: '1rem'}}>
+              {t('messages.loading')}
+            </Typography>
+          </div>
         </Card.Content>
       </Card>
     );
@@ -1305,12 +1305,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
         <Card.Content>
           <div style={{textAlign: 'center', padding: '2rem'}}>
             <div style={{marginBottom: '1rem'}}>
-              <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <path
-                  fill="currentColor"
-                  d="M7 14c1.66 0 3-1.34 3-3S8.66 8 7 8s-3 1.34-3 3s1.34 3 3 3m0-4c.55 0 1 .45 1 1s-.45 1-1 1s-1-.45-1-1s.45-1 1-1m12-3h-8l1.5 1.5L9 12l1.5 1.5L8 16h8c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2m-1 5h-1v-1h1v1m0-2h-1V9h1v1"
-                />
-              </svg>
+              <Spinner size="large" />
             </div>
             <Typography variant="body1">{t('passkey.authenticating') || 'Authenticating with passkey...'}</Typography>
             <Typography variant="body2" style={{marginTop: '0.5rem', color: '#666'}}>
diff --git a/packages/react/src/components/presentation/SignIn/SignIn.tsx b/packages/react/src/components/presentation/SignIn/SignIn.tsx
index 2f426ea82..2504b023f 100644
--- a/packages/react/src/components/presentation/SignIn/SignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/SignIn.tsx
@@ -43,11 +43,6 @@ export interface SignInProps {
    * Theme variant for the component.
    */
   variant?: 'default' | 'outlined' | 'filled';
-
-  /**
-   * Custom loading text.
-   */
-  loadingText?: string;
 }
 
 /**
diff --git a/packages/react/src/components/presentation/SignIn/options/FacebookButton.tsx b/packages/react/src/components/presentation/SignIn/options/FacebookButton.tsx
index 6371e5c1f..3bfd5f404 100644
--- a/packages/react/src/components/presentation/SignIn/options/FacebookButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/FacebookButton.tsx
@@ -48,7 +48,6 @@ const FacebookButton: FC<BaseSignInOptionProps> = ({
       color="primary"
       fullWidth
       disabled={isLoading}
-      loading={isLoading}
       onClick={handleClick}
       className={buttonClassName}
       startIcon={
diff --git a/packages/react/src/components/presentation/SignIn/options/GitHubButton.tsx b/packages/react/src/components/presentation/SignIn/options/GitHubButton.tsx
index 8834d20b2..a59e05c35 100644
--- a/packages/react/src/components/presentation/SignIn/options/GitHubButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/GitHubButton.tsx
@@ -47,7 +47,6 @@ const GitHubButton: FC<BaseSignInOptionProps> = ({
       color="secondary"
       fullWidth
       disabled={isLoading}
-      loading={isLoading}
       onClick={handleClick}
       className={buttonClassName}
       startIcon={
diff --git a/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx b/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx
index fedfd0e36..e242e3423 100644
--- a/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx
@@ -47,7 +47,6 @@ const GoogleButton: FC<BaseSignInOptionProps> = ({
       color="secondary"
       fullWidth
       disabled={isLoading}
-      loading={isLoading}
       onClick={handleClick}
       className={buttonClassName}
       startIcon={
diff --git a/packages/react/src/components/presentation/SignIn/options/LinkedInButton.tsx b/packages/react/src/components/presentation/SignIn/options/LinkedInButton.tsx
index 68fb6a451..24ae3c102 100644
--- a/packages/react/src/components/presentation/SignIn/options/LinkedInButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/LinkedInButton.tsx
@@ -47,7 +47,6 @@ const LinkedInButton: FC<BaseSignInOptionProps> = ({
       color="primary"
       fullWidth
       disabled={isLoading}
-      loading={isLoading}
       onClick={handleClick}
       className={buttonClassName}
       startIcon={
diff --git a/packages/react/src/components/presentation/SignIn/options/MicrosoftButton.tsx b/packages/react/src/components/presentation/SignIn/options/MicrosoftButton.tsx
index f8403831b..ac3f6b6c1 100644
--- a/packages/react/src/components/presentation/SignIn/options/MicrosoftButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/MicrosoftButton.tsx
@@ -47,7 +47,6 @@ const MicrosoftButton: FC<BaseSignInOptionProps> = ({
       color="primary"
       fullWidth
       disabled={isLoading}
-      loading={isLoading}
       onClick={handleClick}
       className={buttonClassName}
       startIcon={
diff --git a/packages/react/src/components/presentation/SignIn/options/MultiOptionButton.tsx b/packages/react/src/components/presentation/SignIn/options/MultiOptionButton.tsx
index 059eb3931..fafb78477 100644
--- a/packages/react/src/components/presentation/SignIn/options/MultiOptionButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/MultiOptionButton.tsx
@@ -142,7 +142,6 @@ const MultiOptionButton: FC<BaseSignInOptionProps> = ({
       color="primary"
       fullWidth
       disabled={isLoading}
-      loading={isLoading}
       onClick={handleClick}
       className={buttonClassName}
       startIcon={getIcon()}
diff --git a/packages/react/src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx b/packages/react/src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx
index bad1c6dc2..d39a7b122 100644
--- a/packages/react/src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx
@@ -48,7 +48,6 @@ const SignInWithEthereumButton: FC<BaseSignInOptionProps> = ({
       color="secondary"
       fullWidth
       disabled={isLoading}
-      loading={isLoading}
       onClick={handleClick}
       className={buttonClassName}
       startIcon={
diff --git a/packages/react/src/components/presentation/SignIn/options/SocialButton.tsx b/packages/react/src/components/presentation/SignIn/options/SocialButton.tsx
index 882588ce0..bc660d29d 100644
--- a/packages/react/src/components/presentation/SignIn/options/SocialButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/SocialButton.tsx
@@ -56,7 +56,6 @@ const SocialLogin: FC<BaseSignInOptionProps> = ({
       color="secondary"
       fullWidth
       disabled={isLoading}
-      loading={isLoading}
       onClick={handleClick}
       className={buttonClassName}
       startIcon={
diff --git a/packages/react/src/components/primitives/Button/Button.tsx b/packages/react/src/components/primitives/Button/Button.tsx
index ce4ad5515..0559b4e0c 100644
--- a/packages/react/src/components/primitives/Button/Button.tsx
+++ b/packages/react/src/components/primitives/Button/Button.tsx
@@ -20,6 +20,7 @@ import {CSSProperties, FC, ButtonHTMLAttributes, forwardRef, useMemo} from 'reac
 import useTheme from '../../../contexts/Theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
+import Spinner, {SpinnerSize} from '../Spinner/Spinner';
 
 export type ButtonColor = 'primary' | 'secondary' | 'tertiary' | string;
 export type ButtonVariant = 'solid' | 'outline' | 'text';
@@ -257,39 +258,6 @@ const useButtonStyles = (
   }, [theme, color, variant, size, fullWidth, disabled, loading]);
 };
 
-const LoadingSpinner: FC<{size: ButtonSize}> = ({size}) => {
-  const {theme} = useTheme();
-
-  const spinnerSize = {
-    small: '12px',
-    medium: '16px',
-    large: '20px',
-  }[size];
-
-  const spinnerStyle: CSSProperties = {
-    width: spinnerSize,
-    height: spinnerSize,
-    border: '2px solid transparent',
-    borderTop: '2px solid currentColor',
-    borderRadius: '50%',
-    animation: 'asgardeo-button-spin 1s linear infinite',
-  };
-
-  return (
-    <>
-      <style>
-        {`
-          @keyframes asgardeo-button-spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-          }
-        `}
-      </style>
-      <span style={spinnerStyle} />
-    </>
-  );
-};
-
 /**
  * Button component with multiple variants and types.
  *
@@ -358,7 +326,16 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         disabled={disabled || loading}
         {...rest}
       >
-        {loading && <LoadingSpinner size={size} />}
+        {loading && (
+          <Spinner 
+            size={size as SpinnerSize} 
+            color="currentColor" 
+            style={{
+              width: size === 'small' ? '12px' : size === 'medium' ? '16px' : '20px',
+              height: size === 'small' ? '12px' : size === 'medium' ? '16px' : '20px'
+            }}
+          />
+        )}
         {!loading && startIcon && <span>{startIcon}</span>}
         {children && <span>{children}</span>}
         {!loading && endIcon && <span>{endIcon}</span>}
diff --git a/packages/react/src/components/primitives/Spinner/Spinner.tsx b/packages/react/src/components/primitives/Spinner/Spinner.tsx
new file mode 100644
index 000000000..d56ac803d
--- /dev/null
+++ b/packages/react/src/components/primitives/Spinner/Spinner.tsx
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {FC, CSSProperties} from 'react';
+import {withVendorCSSClassPrefix} from '@asgardeo/browser';
+import {clsx} from 'clsx';
+import useTheme from '../../../contexts/Theme/useTheme';
+
+export type SpinnerSize = 'small' | 'medium' | 'large';
+
+export interface SpinnerProps {
+  /**
+   * Size of the spinner
+   */
+  size?: SpinnerSize;
+  /**
+   * Custom color for the spinner
+   */
+  color?: string;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Custom styles
+   */
+  style?: CSSProperties;
+}
+
+/**
+ * Spinner component for loading states
+ *
+ * @example
+ * ```tsx
+ * // Basic spinner
+ * <Spinner />
+ *
+ * // Large spinner with custom color
+ * <Spinner size="large" color="#3b82f6" />
+ *
+ * // Small spinner
+ * <Spinner size="small" />
+ * ```
+ */
+const Spinner: FC<SpinnerProps> = ({size = 'medium', color, className, style}) => {
+  const {theme} = useTheme();
+
+  const spinnerSize = {
+    small: '16px',
+    medium: '20px',
+    large: '32px',
+  }[size];
+
+  const spinnerColor = color || theme.colors.primary.main;
+
+  const spinnerStyle: CSSProperties = {
+    width: spinnerSize,
+    height: spinnerSize,
+    border: '2px solid transparent',
+    borderTop: `2px solid ${spinnerColor}`,
+    borderRadius: '50%',
+    animation: 'asgardeo-spinner-spin 1s linear infinite',
+    ...style,
+  };
+
+  return (
+    <>
+      <style>
+        {`
+          @keyframes asgardeo-spinner-spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        `}
+      </style>
+      <span
+        className={clsx(withVendorCSSClassPrefix('spinner'), className)}
+        style={spinnerStyle}
+        role="status"
+        aria-label="Loading"
+      />
+    </>
+  );
+};
+
+export default Spinner;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 30560ac5e..3de2b0b45 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -173,6 +173,9 @@ export * from './components/primitives/Typography/Typography';
 export {default as Divider} from './components/primitives/Divider/Divider';
 export * from './components/primitives/Divider/Divider';
 
+export {default as Spinner} from './components/primitives/Spinner/Spinner';
+export * from './components/primitives/Spinner/Spinner';
+
 export {default as Eye} from './components/primitives/Icons/Eye';
 export {default as EyeOff} from './components/primitives/Icons/EyeOff';
 export {default as CircleCheck} from './components/primitives/Icons/CircleCheck';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 38d473eb9..5f634fd25 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -549,76 +549,6 @@ importers:
         version: 2.2.10(typescript@5.1.6)
 
   samples/teamspace-nextjs:
-    dependencies:
-      '@radix-ui/react-avatar':
-        specifier: ^1.1.1
-        version: 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-checkbox':
-        specifier: ^1.1.2
-        version: 1.3.2(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-dropdown-menu':
-        specifier: ^2.1.2
-        version: 2.1.15(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-label':
-        specifier: ^2.1.0
-        version: 2.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slot':
-        specifier: ^1.1.0
-        version: 1.2.3(@types/react@19.1.5)(react@19.1.0)
-      class-variance-authority:
-        specifier: ^0.7.1
-        version: 0.7.1
-      clsx:
-        specifier: ^2.1.1
-        version: 2.1.1
-      lucide-react:
-        specifier: ^0.460.0
-        version: 0.460.0(react@19.1.0)
-      next:
-        specifier: ^15.1.0
-        version: 15.3.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.89.0)
-      next-themes:
-        specifier: ^0.4.3
-        version: 0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react:
-        specifier: ^19
-        version: 19.1.0
-      react-dom:
-        specifier: ^19
-        version: 19.1.0(react@19.1.0)
-      tailwind-merge:
-        specifier: ^2.5.4
-        version: 2.6.0
-    devDependencies:
-      '@tailwindcss/postcss':
-        specifier: ^4.0.0-alpha.30
-        version: 4.1.10
-      '@types/node':
-        specifier: ^22.9.0
-        version: 22.15.30
-      '@types/react':
-        specifier: ^19.0.0
-        version: 19.1.5
-      '@types/react-dom':
-        specifier: ^19.0.0
-        version: 19.1.5(@types/react@19.1.5)
-      eslint:
-        specifier: ^9.15.0
-        version: 9.28.0(jiti@2.4.2)
-      eslint-config-next:
-        specifier: ^15.1.0
-        version: 15.3.2(eslint-plugin-import-x@4.12.2(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
-      postcss:
-        specifier: ^8.4.49
-        version: 8.5.3
-      tailwindcss:
-        specifier: ^4.0.0-alpha.30
-        version: 4.1.10
-      typescript:
-        specifier: ^5.6.0
-        version: 5.8.3
-
-  samples/teamspace-nextjs-1:
     dependencies:
       '@asgardeo/nextjs':
         specifier: workspace:^
@@ -697,6 +627,9 @@ importers:
       '@types/react-dom':
         specifier: ^19.1.2
         version: 19.1.5(@types/react@19.1.5)
+      '@vitejs/plugin-basic-ssl':
+        specifier: ^2.0.0
+        version: 2.0.0(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
       '@vitejs/plugin-react':
         specifier: ^4.4.1
         version: 4.5.1(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
@@ -733,9 +666,6 @@ importers:
       vite:
         specifier: ^6.3.5
         version: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-plugin-mkcert:
-        specifier: ^1.17.8
-        version: 1.17.8(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
 
 packages:
 
@@ -811,10 +741,6 @@ packages:
     resolution: {integrity: sha512-ZO0UKvDyEFvyeJQX0gmZDQEvhLZ2X10K+ps6hViMo1HgE2V8em00SwNsQ+7E/52a+YiBkVWX61pJJJE44juDMQ==}
     engines: {node: '>= 14.0.0'}
 
-  '@alloc/quick-lru@5.2.0':
-    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
-    engines: {node: '>=10'}
-
   '@ampproject/remapping@2.3.0':
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
@@ -2212,61 +2138,6 @@ packages:
     resolution: {integrity: sha512-aQypoot0HPSJa6gDPEPTntc1GT6QINrSbgRlRhadGW2WaYqUK3tK4Bw9SBMZXhmxd3GeAlZjVcODHgiu+THY7A==}
     engines: {node: '>=18'}
 
-  '@radix-ui/primitive@1.1.2':
-    resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
-
-  '@radix-ui/react-arrow@1.1.7':
-    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-avatar@1.1.10':
-    resolution: {integrity: sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-checkbox@1.3.2':
-    resolution: {integrity: sha512-yd+dI56KZqawxKZrJ31eENUwqc1QSqg4OZ15rybGjF2ZNwMO+wCyHzAVLRp9qoYJf7kYy0YpZ2b0JCzJ42HZpA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-collection@1.1.7':
-    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-compose-refs@1.1.2':
     resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
     peerDependencies:
@@ -2276,81 +2147,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-context@1.1.2':
-    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-direction@1.1.1':
-    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-dismissable-layer@1.1.10':
-    resolution: {integrity: sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-dropdown-menu@2.1.15':
-    resolution: {integrity: sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-focus-guards@1.1.2':
-    resolution: {integrity: sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-focus-scope@1.1.7':
-    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-id@1.1.1':
-    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@radix-ui/react-label@2.1.7':
     resolution: {integrity: sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==}
     peerDependencies:
@@ -2364,58 +2160,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-menu@2.1.15':
-    resolution: {integrity: sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-popper@1.2.7':
-    resolution: {integrity: sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-portal@1.1.9':
-    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-presence@1.1.4':
-    resolution: {integrity: sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-primitive@2.1.3':
     resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
     peerDependencies:
@@ -2429,102 +2173,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-roving-focus@1.1.10':
-    resolution: {integrity: sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-slot@1.2.3':
-    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-callback-ref@1.1.1':
-    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-controllable-state@1.2.2':
-    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-effect-event@0.0.2':
-    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-escape-keydown@1.1.1':
-    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-is-hydrated@0.1.0':
-    resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-layout-effect@1.1.1':
-    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-previous@1.1.1':
-    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-rect@1.1.1':
-    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-size@1.1.1':
-    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
@@ -2532,9 +2182,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/rect@1.1.1':
-    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
-
   '@remix-run/router@1.23.0':
     resolution: {integrity: sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==}
     engines: {node: '>=14.0.0'}
@@ -2814,132 +2461,63 @@ packages:
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
-  '@tailwindcss/node@4.1.10':
-    resolution: {integrity: sha512-2ACf1znY5fpRBwRhMgj9ZXvb2XZW8qs+oTfotJ2C5xR0/WNL7UHZ7zXl6s+rUqedL1mNi+0O+WQr5awGowS3PQ==}
-
   '@tailwindcss/node@4.1.8':
     resolution: {integrity: sha512-OWwBsbC9BFAJelmnNcrKuf+bka2ZxCE2A4Ft53Tkg4uoiE67r/PMEYwCsourC26E+kmxfwE0hVzMdxqeW+xu7Q==}
 
-  '@tailwindcss/oxide-android-arm64@4.1.10':
-    resolution: {integrity: sha512-VGLazCoRQ7rtsCzThaI1UyDu/XRYVyH4/EWiaSX6tFglE+xZB5cvtC5Omt0OQ+FfiIVP98su16jDVHDEIuH4iQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [android]
-
   '@tailwindcss/oxide-android-arm64@4.1.8':
     resolution: {integrity: sha512-Fbz7qni62uKYceWYvUjRqhGfZKwhZDQhlrJKGtnZfuNtHFqa8wmr+Wn74CTWERiW2hn3mN5gTpOoxWKk0jRxjg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [android]
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.10':
-    resolution: {integrity: sha512-ZIFqvR1irX2yNjWJzKCqTCcHZbgkSkSkZKbRM3BPzhDL/18idA8uWCoopYA2CSDdSGFlDAxYdU2yBHwAwx8euQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-
   '@tailwindcss/oxide-darwin-arm64@4.1.8':
     resolution: {integrity: sha512-RdRvedGsT0vwVVDztvyXhKpsU2ark/BjgG0huo4+2BluxdXo8NDgzl77qh0T1nUxmM11eXwR8jA39ibvSTbi7A==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@tailwindcss/oxide-darwin-x64@4.1.10':
-    resolution: {integrity: sha512-eCA4zbIhWUFDXoamNztmS0MjXHSEJYlvATzWnRiTqJkcUteSjO94PoRHJy1Xbwp9bptjeIxxBHh+zBWFhttbrQ==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-
   '@tailwindcss/oxide-darwin-x64@4.1.8':
     resolution: {integrity: sha512-t6PgxjEMLp5Ovf7uMb2OFmb3kqzVTPPakWpBIFzppk4JE4ix0yEtbtSjPbU8+PZETpaYMtXvss2Sdkx8Vs4XRw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.10':
-    resolution: {integrity: sha512-8/392Xu12R0cc93DpiJvNpJ4wYVSiciUlkiOHOSOQNH3adq9Gi/dtySK7dVQjXIOzlpSHjeCL89RUUI8/GTI6g==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [freebsd]
-
   '@tailwindcss/oxide-freebsd-x64@4.1.8':
     resolution: {integrity: sha512-g8C8eGEyhHTqwPStSwZNSrOlyx0bhK/V/+zX0Y+n7DoRUzyS8eMbVshVOLJTDDC+Qn9IJnilYbIKzpB9n4aBsg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [freebsd]
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.10':
-    resolution: {integrity: sha512-t9rhmLT6EqeuPT+MXhWhlRYIMSfh5LZ6kBrC4FS6/+M1yXwfCtp24UumgCWOAJVyjQwG+lYva6wWZxrfvB+NhQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm]
-    os: [linux]
-
   '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.8':
     resolution: {integrity: sha512-Jmzr3FA4S2tHhaC6yCjac3rGf7hG9R6Gf2z9i9JFcuyy0u79HfQsh/thifbYTF2ic82KJovKKkIB6Z9TdNhCXQ==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.10':
-    resolution: {integrity: sha512-3oWrlNlxLRxXejQ8zImzrVLuZ/9Z2SeKoLhtCu0hpo38hTO2iL86eFOu4sVR8cZc6n3z7eRXXqtHJECa6mFOvA==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-
   '@tailwindcss/oxide-linux-arm64-gnu@4.1.8':
     resolution: {integrity: sha512-qq7jXtO1+UEtCmCeBBIRDrPFIVI4ilEQ97qgBGdwXAARrUqSn/L9fUrkb1XP/mvVtoVeR2bt/0L77xx53bPZ/Q==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.10':
-    resolution: {integrity: sha512-saScU0cmWvg/Ez4gUmQWr9pvY9Kssxt+Xenfx1LG7LmqjcrvBnw4r9VjkFcqmbBb7GCBwYNcZi9X3/oMda9sqQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-
   '@tailwindcss/oxide-linux-arm64-musl@4.1.8':
     resolution: {integrity: sha512-O6b8QesPbJCRshsNApsOIpzKt3ztG35gfX9tEf4arD7mwNinsoCKxkj8TgEE0YRjmjtO3r9FlJnT/ENd9EVefQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.10':
-    resolution: {integrity: sha512-/G3ao/ybV9YEEgAXeEg28dyH6gs1QG8tvdN9c2MNZdUXYBaIY/Gx0N6RlJzfLy/7Nkdok4kaxKPHKJUlAaoTdA==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-
   '@tailwindcss/oxide-linux-x64-gnu@4.1.8':
     resolution: {integrity: sha512-32iEXX/pXwikshNOGnERAFwFSfiltmijMIAbUhnNyjFr3tmWmMJWQKU2vNcFX0DACSXJ3ZWcSkzNbaKTdngH6g==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.10':
-    resolution: {integrity: sha512-LNr7X8fTiKGRtQGOerSayc2pWJp/9ptRYAa4G+U+cjw9kJZvkopav1AQc5HHD+U364f71tZv6XamaHKgrIoVzA==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-
   '@tailwindcss/oxide-linux-x64-musl@4.1.8':
     resolution: {integrity: sha512-s+VSSD+TfZeMEsCaFaHTaY5YNj3Dri8rST09gMvYQKwPphacRG7wbuQ5ZJMIJXN/puxPcg/nU+ucvWguPpvBDg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@tailwindcss/oxide-wasm32-wasi@4.1.10':
-    resolution: {integrity: sha512-d6ekQpopFQJAcIK2i7ZzWOYGZ+A6NzzvQ3ozBvWFdeyqfOZdYHU66g5yr+/HC4ipP1ZgWsqa80+ISNILk+ae/Q==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-    bundledDependencies:
-      - '@napi-rs/wasm-runtime'
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-      - '@tybys/wasm-util'
-      - '@emnapi/wasi-threads'
-      - tslib
-
   '@tailwindcss/oxide-wasm32-wasi@4.1.8':
     resolution: {integrity: sha512-CXBPVFkpDjM67sS1psWohZ6g/2/cd+cq56vPxK4JeawelxwK4YECgl9Y9TjkE2qfF+9/s1tHHJqrC4SS6cVvSg==}
     engines: {node: '>=14.0.0'}
@@ -2952,41 +2530,22 @@ packages:
       - '@emnapi/wasi-threads'
       - tslib
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.10':
-    resolution: {integrity: sha512-i1Iwg9gRbwNVOCYmnigWCCgow8nDWSFmeTUU5nbNx3rqbe4p0kRbEqLwLJbYZKmSSp23g4N6rCDmm7OuPBXhDA==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-
   '@tailwindcss/oxide-win32-arm64-msvc@4.1.8':
     resolution: {integrity: sha512-7GmYk1n28teDHUjPlIx4Z6Z4hHEgvP5ZW2QS9ygnDAdI/myh3HTHjDqtSqgu1BpRoI4OiLx+fThAyA1JePoENA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.10':
-    resolution: {integrity: sha512-sGiJTjcBSfGq2DVRtaSljq5ZgZS2SDHSIfhOylkBvHVjwOsodBhnb3HdmiKkVuUGKD0I7G63abMOVaskj1KpOA==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-
   '@tailwindcss/oxide-win32-x64-msvc@4.1.8':
     resolution: {integrity: sha512-fou+U20j+Jl0EHwK92spoWISON2OBnCazIc038Xj2TdweYV33ZRkS9nwqiUi2d/Wba5xg5UoHfvynnb/UB49cQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
 
-  '@tailwindcss/oxide@4.1.10':
-    resolution: {integrity: sha512-v0C43s7Pjw+B9w21htrQwuFObSkio2aV/qPx/mhrRldbqxbWJK6KizM+q7BF1/1CmuLqZqX3CeYF7s7P9fbA8Q==}
-    engines: {node: '>= 10'}
-
   '@tailwindcss/oxide@4.1.8':
     resolution: {integrity: sha512-d7qvv9PsM5N3VNKhwVUhpK6r4h9wtLkJ6lz9ZY9aeZgrUWk1Z8VPyqyDT9MZlem7GTGseRQHkeB1j3tC7W1P+A==}
     engines: {node: '>= 10'}
 
-  '@tailwindcss/postcss@4.1.10':
-    resolution: {integrity: sha512-B+7r7ABZbkXJwpvt2VMnS6ujcDoR2OOcFaqrLIo1xbcdxje4Vf+VgJdBzNNbrAjBj/rLZ66/tlQ1knIGNLKOBQ==}
-
   '@tailwindcss/vite@4.1.8':
     resolution: {integrity: sha512-CQ+I8yxNV5/6uGaJjiuymgw0kEQiNKRinYbZXPdx1fk5WgiyReG0VaUx/Xq6aVNSUNJFzxm6o8FNKS5aMaim5A==}
     peerDependencies:
@@ -3435,6 +2994,12 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  '@vitejs/plugin-basic-ssl@2.0.0':
+    resolution: {integrity: sha512-gc9Tjg8bUxBVSTzeWT3Njc0Cl3PakHFKdNfABnZWiUgbxqmHDEn7uECv3fHVylxoYgNzAcmU7ZrILz+BwSo3sA==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    peerDependencies:
+      vite: ^6.0.0
+
   '@vitejs/plugin-react@4.5.1':
     resolution: {integrity: sha512-uPZBqSI0YD4lpkIru6M35sIfylLGTyhGHvDZbNLuMA73lMlwJKz5xweH7FajfcCAc2HnINciejA9qTz0dr0M7A==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -3836,10 +3401,6 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
-  aria-hidden@1.2.6:
-    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
-    engines: {node: '>=10'}
-
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
@@ -4653,9 +4214,6 @@ packages:
     resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
     engines: {node: '>=8'}
 
-  detect-node-es@1.1.0:
-    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
-
   detective-amd@6.0.1:
     resolution: {integrity: sha512-TtyZ3OhwUoEEIhTFoc1C9IyJIud3y+xYkSRjmvCt65+ycQuc3VcBrPRTMWoO/AnuCyOB8T5gky+xf7Igxtjd3g==}
     engines: {node: '>=18'}
@@ -5556,10 +5114,6 @@ packages:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
-  get-nonce@1.0.1:
-    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
-    engines: {node: '>=6'}
-
   get-port-please@3.1.2:
     resolution: {integrity: sha512-Gxc29eLs1fbn6LQ4jSU4vXjlwyZhF5HsGuMAa7gqBP4Rw4yxxltyDUuF5MBclFzDTXO+ACchGQoeela4DSfzdQ==}
 
@@ -6491,11 +6045,6 @@ packages:
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0
 
-  lucide-react@0.460.0:
-    resolution: {integrity: sha512-BVtq/DykVeIvRTJvRAgCsOwaGL8Un3Bxh8MbDxMhEWlZay3T4IpEKDEpwt5KZ0KJMHzgm6jrltxlT5eXOWXDHg==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
-
   luxon@3.6.1:
     resolution: {integrity: sha512-tJLxrKJhO2ukZ5z0gyjY1zPh3Rh88Ej9P7jNrZiHMUXHae1yvI2imgOZtL1TO8TW6biMMKfTtAOoEJANgtWBMQ==}
     engines: {node: '>=12'}
@@ -6784,12 +6333,6 @@ packages:
     resolution: {integrity: sha512-Nc3loyVASW59W+8fLDZT1lncpG7llffyZ2o0UQLx/Fr20i7P8oP+lE7+TEcFvXj9IUWU6LjB9P3BH+iFGyp+mg==}
     engines: {node: ^14.16.0 || >=16.0.0}
 
-  next-themes@0.4.6:
-    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
-    peerDependencies:
-      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
-
   next@15.3.2:
     resolution: {integrity: sha512-CA3BatMyHkxZ48sgOCLdVHjFU36N7TF1HhqAHLFOkV6buwZnvMI84Cug8xD56B9mCuKrqXnLn94417GrZ/jjCQ==}
     engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
@@ -7801,26 +7344,6 @@ packages:
     resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
     engines: {node: '>=0.10.0'}
 
-  react-remove-scroll-bar@2.3.8:
-    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  react-remove-scroll@2.7.1:
-    resolution: {integrity: sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   react-router-dom@6.30.1:
     resolution: {integrity: sha512-llKsgOkZdbPU1Eg3zK8lCn+sjD9wMRZZPuzmdWWX5SUs8OFkN5HnFVC0u5KMeMaC9aoancFI/KoLuKPqN+hxHw==}
     engines: {node: '>=14.0.0'}
@@ -7834,16 +7357,6 @@ packages:
     peerDependencies:
       react: '>=16.8'
 
-  react-style-singleton@2.2.3:
-    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -8510,15 +8023,9 @@ packages:
     resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
     engines: {node: '>=10.0.0'}
 
-  tailwind-merge@2.6.0:
-    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
-
   tailwind-merge@3.3.0:
     resolution: {integrity: sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ==}
 
-  tailwindcss@4.1.10:
-    resolution: {integrity: sha512-P3nr6WkvKV/ONsTzj6Gb57sWPMX29EPNPopo7+FcpkQaNsrNpZ1pv8QmrYI2RqEKD7mlGqLnGovlcYnBK0IqUA==}
-
   tailwindcss@4.1.8:
     resolution: {integrity: sha512-kjeW8gjdxasbmFKpVGrGd5T4i40mV5J2Rasw48QARfYeQ8YS9x02ON9SFWax3Qf616rt4Cp3nVNIj6Hd1mP3og==}
 
@@ -8949,31 +8456,6 @@ packages:
   urlpattern-polyfill@8.0.2:
     resolution: {integrity: sha512-Qp95D4TPJl1kC9SKigDcqgyM2VDVO4RiJc2d4qe5GrYm+zbIQCWWKAFaJNQ4BhdFeDGwBmAxqJBwWSJDb9T3BQ==}
 
-  use-callback-ref@1.3.3:
-    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  use-sidecar@1.1.3:
-    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  use-sync-external-store@1.5.0:
-    resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -9061,12 +8543,6 @@ packages:
       '@nuxt/kit':
         optional: true
 
-  vite-plugin-mkcert@1.17.8:
-    resolution: {integrity: sha512-S+4tNEyGqdZQ3RLAG54ETeO2qyURHWrVjUWKYikLAbmhh/iJ+36gDEja4OWwFyXNuvyXcZwNt5TZZR9itPeG5Q==}
-    engines: {node: '>=v16.7.0'}
-    peerDependencies:
-      vite: '>=3'
-
   vite-plugin-vue-tracer@0.1.3:
     resolution: {integrity: sha512-+fN6oo0//dwZP9Ax9gRKeUroCqpQ43P57qlWgL0ljCIxAs+Rpqn/L4anIPZPgjDPga5dZH+ZJsshbF0PNJbm3Q==}
     peerDependencies:
@@ -9550,8 +9026,6 @@ snapshots:
     dependencies:
       '@algolia/client-common': 5.25.0
 
-  '@alloc/quick-lru@5.2.0': {}
-
   '@ampproject/remapping@2.3.0':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.8
@@ -11061,368 +10535,108 @@ snapshots:
     optional: true
 
   '@parcel/watcher-linux-arm-glibc@2.5.1':
-    optional: true
-
-  '@parcel/watcher-linux-arm-musl@2.5.1':
-    optional: true
-
-  '@parcel/watcher-linux-arm64-glibc@2.5.1':
-    optional: true
-
-  '@parcel/watcher-linux-arm64-musl@2.5.1':
-    optional: true
-
-  '@parcel/watcher-linux-x64-glibc@2.5.1':
-    optional: true
-
-  '@parcel/watcher-linux-x64-musl@2.5.1':
-    optional: true
-
-  '@parcel/watcher-wasm@2.5.1':
-    dependencies:
-      is-glob: 4.0.3
-      micromatch: 4.0.8
-
-  '@parcel/watcher-win32-arm64@2.5.1':
-    optional: true
-
-  '@parcel/watcher-win32-ia32@2.5.1':
-    optional: true
-
-  '@parcel/watcher-win32-x64@2.5.1':
-    optional: true
-
-  '@parcel/watcher@2.5.1':
-    dependencies:
-      detect-libc: 1.0.3
-      is-glob: 4.0.3
-      micromatch: 4.0.8
-      node-addon-api: 7.1.1
-    optionalDependencies:
-      '@parcel/watcher-android-arm64': 2.5.1
-      '@parcel/watcher-darwin-arm64': 2.5.1
-      '@parcel/watcher-darwin-x64': 2.5.1
-      '@parcel/watcher-freebsd-x64': 2.5.1
-      '@parcel/watcher-linux-arm-glibc': 2.5.1
-      '@parcel/watcher-linux-arm-musl': 2.5.1
-      '@parcel/watcher-linux-arm64-glibc': 2.5.1
-      '@parcel/watcher-linux-arm64-musl': 2.5.1
-      '@parcel/watcher-linux-x64-glibc': 2.5.1
-      '@parcel/watcher-linux-x64-musl': 2.5.1
-      '@parcel/watcher-win32-arm64': 2.5.1
-      '@parcel/watcher-win32-ia32': 2.5.1
-      '@parcel/watcher-win32-x64': 2.5.1
-
-  '@pkgjs/parseargs@0.11.0':
-    optional: true
-
-  '@pkgr/core@0.2.4': {}
-
-  '@polka/url@1.0.0-next.29': {}
-
-  '@poppinss/colors@4.1.4':
-    dependencies:
-      kleur: 4.1.5
-
-  '@poppinss/dumper@0.6.3':
-    dependencies:
-      '@poppinss/colors': 4.1.4
-      '@sindresorhus/is': 7.0.1
-      supports-color: 10.0.0
-
-  '@poppinss/exception@1.2.1': {}
-
-  '@radix-ui/primitive@1.1.2': {}
-
-  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.5
-      '@types/react-dom': 19.1.5(@types/react@19.1.5)
-
-  '@radix-ui/react-avatar@1.1.10(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.5
-      '@types/react-dom': 19.1.5(@types/react@19.1.5)
-
-  '@radix-ui/react-checkbox@1.3.2(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.5
-      '@types/react-dom': 19.1.5(@types/react@19.1.5)
-
-  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.5)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.5
-      '@types/react-dom': 19.1.5(@types/react@19.1.5)
-
-  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.5)(react@19.1.0)':
-    dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.5
-
-  '@radix-ui/react-context@1.1.2(@types/react@19.1.5)(react@19.1.0)':
-    dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.5
-
-  '@radix-ui/react-direction@1.1.1(@types/react@19.1.5)(react@19.1.0)':
-    dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.5
-
-  '@radix-ui/react-dismissable-layer@1.1.10(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.5
-      '@types/react-dom': 19.1.5(@types/react@19.1.5)
-
-  '@radix-ui/react-dropdown-menu@2.1.15(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-menu': 2.1.15(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.5)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.5
-      '@types/react-dom': 19.1.5(@types/react@19.1.5)
+    optional: true
 
-  '@radix-ui/react-focus-guards@1.1.2(@types/react@19.1.5)(react@19.1.0)':
-    dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.5
+  '@parcel/watcher-linux-arm-musl@2.5.1':
+    optional: true
 
-  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.5
-      '@types/react-dom': 19.1.5(@types/react@19.1.5)
+  '@parcel/watcher-linux-arm64-glibc@2.5.1':
+    optional: true
 
-  '@radix-ui/react-id@1.1.1(@types/react@19.1.5)(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.5
+  '@parcel/watcher-linux-arm64-musl@2.5.1':
+    optional: true
 
-  '@radix-ui/react-label@2.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.5
-      '@types/react-dom': 19.1.5(@types/react@19.1.5)
+  '@parcel/watcher-linux-x64-glibc@2.5.1':
+    optional: true
 
-  '@radix-ui/react-menu@2.1.15(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      aria-hidden: 1.2.6
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-      react-remove-scroll: 2.7.1(@types/react@19.1.5)(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.5
-      '@types/react-dom': 19.1.5(@types/react@19.1.5)
+  '@parcel/watcher-linux-x64-musl@2.5.1':
+    optional: true
 
-  '@radix-ui/react-popper@1.2.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@parcel/watcher-wasm@2.5.1':
     dependencies:
-      '@floating-ui/react-dom': 2.1.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/rect': 1.1.1
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.5
-      '@types/react-dom': 19.1.5(@types/react@19.1.5)
+      is-glob: 4.0.3
+      micromatch: 4.0.8
 
-  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.5
-      '@types/react-dom': 19.1.5(@types/react@19.1.5)
+  '@parcel/watcher-win32-arm64@2.5.1':
+    optional: true
 
-  '@radix-ui/react-presence@1.1.4(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.5
-      '@types/react-dom': 19.1.5(@types/react@19.1.5)
+  '@parcel/watcher-win32-ia32@2.5.1':
+    optional: true
 
-  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.5)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.5
-      '@types/react-dom': 19.1.5(@types/react@19.1.5)
+  '@parcel/watcher-win32-x64@2.5.1':
+    optional: true
 
-  '@radix-ui/react-roving-focus@1.1.10(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@parcel/watcher@2.5.1':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.5)(react@19.1.0)
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      detect-libc: 1.0.3
+      is-glob: 4.0.3
+      micromatch: 4.0.8
+      node-addon-api: 7.1.1
     optionalDependencies:
-      '@types/react': 19.1.5
-      '@types/react-dom': 19.1.5(@types/react@19.1.5)
+      '@parcel/watcher-android-arm64': 2.5.1
+      '@parcel/watcher-darwin-arm64': 2.5.1
+      '@parcel/watcher-darwin-x64': 2.5.1
+      '@parcel/watcher-freebsd-x64': 2.5.1
+      '@parcel/watcher-linux-arm-glibc': 2.5.1
+      '@parcel/watcher-linux-arm-musl': 2.5.1
+      '@parcel/watcher-linux-arm64-glibc': 2.5.1
+      '@parcel/watcher-linux-arm64-musl': 2.5.1
+      '@parcel/watcher-linux-x64-glibc': 2.5.1
+      '@parcel/watcher-linux-x64-musl': 2.5.1
+      '@parcel/watcher-win32-arm64': 2.5.1
+      '@parcel/watcher-win32-ia32': 2.5.1
+      '@parcel/watcher-win32-x64': 2.5.1
 
-  '@radix-ui/react-slot@1.2.3(@types/react@19.1.5)(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.5
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
 
-  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.5)(react@19.1.0)':
-    dependencies:
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.5
+  '@pkgr/core@0.2.4': {}
 
-  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.1.5)(react@19.1.0)':
-    dependencies:
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.5)(react@19.1.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.5
+  '@polka/url@1.0.0-next.29': {}
 
-  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.1.5)(react@19.1.0)':
+  '@poppinss/colors@4.1.4':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.5
+      kleur: 4.1.5
 
-  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.1.5)(react@19.1.0)':
+  '@poppinss/dumper@0.6.3':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.5)(react@19.1.0)
-      react: 19.1.0
-    optionalDependencies:
-      '@types/react': 19.1.5
+      '@poppinss/colors': 4.1.4
+      '@sindresorhus/is': 7.0.1
+      supports-color: 10.0.0
 
-  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.1.5)(react@19.1.0)':
-    dependencies:
-      react: 19.1.0
-      use-sync-external-store: 1.5.0(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.5
+  '@poppinss/exception@1.2.1': {}
 
-  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.5)(react@19.1.0)':
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.5)(react@19.1.0)':
     dependencies:
       react: 19.1.0
     optionalDependencies:
       '@types/react': 19.1.5
 
-  '@radix-ui/react-use-previous@1.1.1(@types/react@19.1.5)(react@19.1.0)':
+  '@radix-ui/react-label@2.1.7(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
     optionalDependencies:
       '@types/react': 19.1.5
+      '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
-  '@radix-ui/react-use-rect@1.1.1(@types/react@19.1.5)(react@19.1.0)':
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@radix-ui/rect': 1.1.1
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.5)(react@19.1.0)
       react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
     optionalDependencies:
       '@types/react': 19.1.5
+      '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
-  '@radix-ui/react-use-size@1.1.1(@types/react@19.1.5)(react@19.1.0)':
+  '@radix-ui/react-slot@1.2.3(@types/react@19.1.5)(react@19.1.0)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.5)(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.5)(react@19.1.0)
       react: 19.1.0
     optionalDependencies:
       '@types/react': 19.1.5
 
-  '@radix-ui/rect@1.1.1': {}
-
   '@remix-run/router@1.23.0': {}
 
   '@rolldown/pluginutils@1.0.0-beta.9': {}
@@ -11662,16 +10876,6 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@tailwindcss/node@4.1.10':
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      enhanced-resolve: 5.18.1
-      jiti: 2.4.2
-      lightningcss: 1.30.1
-      magic-string: 0.30.17
-      source-map-js: 1.2.1
-      tailwindcss: 4.1.10
-
   '@tailwindcss/node@4.1.8':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -11682,96 +10886,42 @@ snapshots:
       source-map-js: 1.2.1
       tailwindcss: 4.1.8
 
-  '@tailwindcss/oxide-android-arm64@4.1.10':
-    optional: true
-
   '@tailwindcss/oxide-android-arm64@4.1.8':
     optional: true
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.10':
-    optional: true
-
   '@tailwindcss/oxide-darwin-arm64@4.1.8':
     optional: true
 
-  '@tailwindcss/oxide-darwin-x64@4.1.10':
-    optional: true
-
   '@tailwindcss/oxide-darwin-x64@4.1.8':
     optional: true
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.10':
-    optional: true
-
   '@tailwindcss/oxide-freebsd-x64@4.1.8':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.10':
-    optional: true
-
   '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.8':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.10':
-    optional: true
-
   '@tailwindcss/oxide-linux-arm64-gnu@4.1.8':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.10':
-    optional: true
-
   '@tailwindcss/oxide-linux-arm64-musl@4.1.8':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.10':
-    optional: true
-
   '@tailwindcss/oxide-linux-x64-gnu@4.1.8':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.10':
-    optional: true
-
   '@tailwindcss/oxide-linux-x64-musl@4.1.8':
     optional: true
 
-  '@tailwindcss/oxide-wasm32-wasi@4.1.10':
-    optional: true
-
   '@tailwindcss/oxide-wasm32-wasi@4.1.8':
     optional: true
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.10':
-    optional: true
-
   '@tailwindcss/oxide-win32-arm64-msvc@4.1.8':
     optional: true
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.10':
-    optional: true
-
   '@tailwindcss/oxide-win32-x64-msvc@4.1.8':
     optional: true
 
-  '@tailwindcss/oxide@4.1.10':
-    dependencies:
-      detect-libc: 2.0.4
-      tar: 7.4.3
-    optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.1.10
-      '@tailwindcss/oxide-darwin-arm64': 4.1.10
-      '@tailwindcss/oxide-darwin-x64': 4.1.10
-      '@tailwindcss/oxide-freebsd-x64': 4.1.10
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.10
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.10
-      '@tailwindcss/oxide-linux-arm64-musl': 4.1.10
-      '@tailwindcss/oxide-linux-x64-gnu': 4.1.10
-      '@tailwindcss/oxide-linux-x64-musl': 4.1.10
-      '@tailwindcss/oxide-wasm32-wasi': 4.1.10
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.10
-      '@tailwindcss/oxide-win32-x64-msvc': 4.1.10
-
   '@tailwindcss/oxide@4.1.8':
     dependencies:
       detect-libc: 2.0.4
@@ -11790,14 +10940,6 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.1.8
       '@tailwindcss/oxide-win32-x64-msvc': 4.1.8
 
-  '@tailwindcss/postcss@4.1.10':
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      '@tailwindcss/node': 4.1.10
-      '@tailwindcss/oxide': 4.1.10
-      postcss: 8.5.3
-      tailwindcss: 4.1.10
-
   '@tailwindcss/vite@4.1.8(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       '@tailwindcss/node': 4.1.8
@@ -11931,7 +11073,7 @@ snapshots:
 
   '@types/yauzl@2.10.3':
     dependencies:
-      '@types/node': 22.15.30
+      '@types/node': 20.17.50
     optional: true
 
   '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6)':
@@ -12453,6 +11595,10 @@ snapshots:
       - rollup
       - supports-color
 
+  '@vitejs/plugin-basic-ssl@2.0.0(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
+    dependencies:
+      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+
   '@vitejs/plugin-react@4.5.1(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       '@babel/core': 7.27.1
@@ -12827,7 +11973,7 @@ snapshots:
       '@vueuse/shared': 12.8.2(typescript@5.8.3)
       vue: 3.5.14(typescript@5.8.3)
     optionalDependencies:
-      axios: 1.9.0(debug@4.4.1)
+      axios: 1.9.0
       focus-trap: 7.6.4
       fuse.js: 7.1.0
       jwt-decode: 4.0.0
@@ -13077,10 +12223,6 @@ snapshots:
 
   argparse@2.0.1: {}
 
-  aria-hidden@1.2.6:
-    dependencies:
-      tslib: 2.8.1
-
   aria-query@5.3.0:
     dependencies:
       dequal: 2.0.3
@@ -13208,13 +12350,13 @@ snapshots:
 
   axios@0.26.1:
     dependencies:
-      follow-redirects: 1.15.9(debug@4.4.1)
+      follow-redirects: 1.15.9
     transitivePeerDependencies:
       - debug
 
-  axios@1.9.0(debug@4.4.1):
+  axios@1.9.0:
     dependencies:
-      follow-redirects: 1.15.9(debug@4.4.1)
+      follow-redirects: 1.15.9
       form-data: 4.0.2
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
@@ -13980,8 +13122,6 @@ snapshots:
 
   detect-libc@2.0.4: {}
 
-  detect-node-es@1.1.0: {}
-
   detective-amd@6.0.1:
     dependencies:
       ast-module-types: 6.0.1
@@ -14453,7 +13593,7 @@ snapshots:
       eslint: 9.28.0(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import-x@4.12.2(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-plugin-import@2.31.0)(eslint@9.28.0(jiti@2.4.2))
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.28.0(jiti@2.4.2))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.28.0(jiti@2.4.2))
       eslint-plugin-jsx-a11y: 6.10.2(eslint@9.28.0(jiti@2.4.2))
       eslint-plugin-react: 7.37.5(eslint@9.28.0(jiti@2.4.2))
       eslint-plugin-react-hooks: 5.2.0(eslint@9.28.0(jiti@2.4.2))
@@ -14491,7 +13631,7 @@ snapshots:
       tinyglobby: 0.2.13
       unrs-resolver: 1.7.2
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.28.0(jiti@2.4.2))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.28.0(jiti@2.4.2))
       eslint-plugin-import-x: 4.12.2(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
     transitivePeerDependencies:
       - supports-color
@@ -14642,7 +13782,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.28.0(jiti@2.4.2)):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.28.0(jiti@2.4.2)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -15289,9 +14429,7 @@ snapshots:
     dependencies:
       tabbable: 6.2.0
 
-  follow-redirects@1.15.9(debug@4.4.1):
-    optionalDependencies:
-      debug: 4.4.1
+  follow-redirects@1.15.9: {}
 
   for-each@0.3.5:
     dependencies:
@@ -15388,8 +14526,6 @@ snapshots:
       hasown: 2.0.2
       math-intrinsics: 1.1.0
 
-  get-nonce@1.0.1: {}
-
   get-port-please@3.1.2: {}
 
   get-proto@1.0.1:
@@ -16319,10 +15455,6 @@ snapshots:
     dependencies:
       react: 19.1.0
 
-  lucide-react@0.460.0(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-
   luxon@3.6.1: {}
 
   lz-string@1.5.0: {}
@@ -16590,11 +15722,6 @@ snapshots:
       p-wait-for: 5.0.2
       qs: 6.14.0
 
-  next-themes@0.4.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-
   next@15.3.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.89.0):
     dependencies:
       '@next/env': 15.3.2
@@ -16935,7 +16062,7 @@ snapshots:
       '@yarnpkg/lockfile': 1.1.0
       '@yarnpkg/parsers': 3.0.2
       '@zkochan/js-yaml': 0.0.7
-      axios: 1.9.0(debug@4.4.1)
+      axios: 1.9.0
       chalk: 4.1.2
       cli-cursor: 3.1.0
       cli-spinners: 2.6.1
@@ -17840,25 +16967,6 @@ snapshots:
 
   react-refresh@0.17.0: {}
 
-  react-remove-scroll-bar@2.3.8(@types/react@19.1.5)(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-      react-style-singleton: 2.2.3(@types/react@19.1.5)(react@19.1.0)
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.1.5
-
-  react-remove-scroll@2.7.1(@types/react@19.1.5)(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-      react-remove-scroll-bar: 2.3.8(@types/react@19.1.5)(react@19.1.0)
-      react-style-singleton: 2.2.3(@types/react@19.1.5)(react@19.1.0)
-      tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@19.1.5)(react@19.1.0)
-      use-sidecar: 1.1.3(@types/react@19.1.5)(react@19.1.0)
-    optionalDependencies:
-      '@types/react': 19.1.5
-
   react-router-dom@6.30.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       '@remix-run/router': 1.23.0
@@ -17871,14 +16979,6 @@ snapshots:
       '@remix-run/router': 1.23.0
       react: 19.1.0
 
-  react-style-singleton@2.2.3(@types/react@19.1.5)(react@19.1.0):
-    dependencies:
-      get-nonce: 1.0.1
-      react: 19.1.0
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.1.5
-
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
@@ -18745,12 +17845,8 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
-  tailwind-merge@2.6.0: {}
-
   tailwind-merge@3.3.0: {}
 
-  tailwindcss@4.1.10: {}
-
   tailwindcss@4.1.8: {}
 
   tapable@2.2.2: {}
@@ -19217,25 +18313,6 @@ snapshots:
 
   urlpattern-polyfill@8.0.2: {}
 
-  use-callback-ref@1.3.3(@types/react@19.1.5)(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.1.5
-
-  use-sidecar@1.1.3(@types/react@19.1.5)(react@19.1.0):
-    dependencies:
-      detect-node-es: 1.1.0
-      react: 19.1.0
-      tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.1.5
-
-  use-sync-external-store@1.5.0(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-
   util-deprecate@1.0.2: {}
 
   uuid@11.1.0: {}
@@ -19388,15 +18465,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-mkcert@1.17.8(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
-    dependencies:
-      axios: 1.9.0(debug@4.4.1)
-      debug: 4.4.1
-      picocolors: 1.1.1
-      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-    transitivePeerDependencies:
-      - supports-color
-
   vite-plugin-vue-tracer@0.1.3(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3)):
     dependencies:
       estree-walker: 3.0.3

From 1c4c7a619e01605c4b80c44b00c8b06bf5b1ce18 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 10:33:24 +0530
Subject: [PATCH 124/131] docs: update README

---
 packages/react/API.md    | 504 +++++++++++++++++++++++++++++++++++++++
 packages/react/README.md |   6 +-
 2 files changed, 509 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/API.md

diff --git a/packages/react/API.md b/packages/react/API.md
new file mode 100644
index 000000000..97b06e41d
--- /dev/null
+++ b/packages/react/API.md
@@ -0,0 +1,504 @@
+# `@asgardeo/react` API Documentation
+
+This document provides complete API documentation for the Asgardeo React SDK, including all components, hooks, and customization options.
+
+## Table of Contents
+
+- [Components](#components)
+  - [AsgardeoProvider](#asgardeyprovider)
+  - [SignedIn](#signedin)
+  - [SignedOut](#signedout)
+  - [SignIn](#signin)
+  - [SignInButton](#signinbutton)
+  - [SignOutButton](#signoutbutton)
+  - [User](#user)
+  - [UserProfile](#userprofile)
+- [Hooks](#hooks)
+  - [useAsgardeo](#useasgardeo)
+- [Customization](#customization)
+
+## Components
+
+### AsgardeoProvider
+
+The root provider component that configures the Asgardeo SDK and provides authentication context to your React application.
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `baseUrl` | `string` | Yes | Your Asgardeo organization URL |
+| `clientId` | `string` | Yes | Your application's client ID |
+| `afterSignInUrl` | `string` | No | URL to redirect after sign in (defaults to current URL) |
+| `afterSignOutUrl` | `string` | No | URL to redirect after sign out (defaults to current URL) |
+| `scopes` | `string[] | string` | No | OAuth scopes to request (defaults to `['openid', 'profile']`) |
+| `storage` | `'localStorage' \| 'sessionStorage'` | No | Storage mechanism for tokens (defaults to `'localStorage'`) |
+
+#### Example
+
+```tsx
+<AsgardeoProvider
+  baseUrl="https://api.asgardeo.io/t/your-org"
+  clientId="your-client-id"
+>
+  <App />
+</AsgardeoProvider>
+```
+
+**Customization:** See [Customization](#customization) section for theming and styling options. The provider doesn't render any visual elements but can be styled through CSS custom properties.
+
+#### Available CSS Classes
+This component doesn't render any HTML elements with CSS classes. Configuration is handled through props and CSS custom properties.
+
+---
+
+### SignIn
+
+A comprehensive sign-in component that renders a complete sign-in interface with customizable styling and behavior.
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `className` | `string` | No | CSS class name for styling the sign-in container |
+| `redirectUrl` | `string` | No | URL to redirect after successful sign-in |
+| `onSignInStart` | `() => void` | No | Callback fired when sign-in process starts |
+| `onSignInSuccess` | `(user: User) => void` | No | Callback fired when sign-in is successful |
+| `onSignInError` | `(error: Error) => void` | No | Callback fired when sign-in fails |
+| `buttonText` | `string` | No | Custom text for the sign-in button (defaults to "Sign In") |
+| `loadingText` | `string` | No | Text to show while signing in (defaults to "Signing in...") |
+| `disabled` | `boolean` | No | Whether the sign-in interface is disabled |
+
+#### Example
+
+```tsx
+<SignIn />
+```
+
+**Customization:** See [Customization](#customization) for comprehensive styling and theming options.
+
+#### Available CSS Classes
+- `.asgardeo-signin` - Main sign-in container
+- `.asgardeo-signin--small` - Small size variant
+- `.asgardeo-signin--large` - Large size variant  
+- `.asgardeo-signin--outlined` - Outlined variant
+- `.asgardeo-signin--filled` - Filled variant
+- `.asgardeo-signin__input` - Input field elements
+- `.asgardeo-signin__input--small` - Small input variant
+- `.asgardeo-signin__input--large` - Large input variant
+- `.asgardeo-signin__button` - Sign-in button element
+- `.asgardeo-signin__button--small` - Small button variant
+- `.asgardeo-signin__button--large` - Large button variant
+- `.asgardeo-signin__button--outlined` - Outlined button variant
+- `.asgardeo-signin__button--filled` - Filled button variant
+- `.asgardeo-signin__error` - Error message container
+- `.asgardeo-signin__messages` - Messages container
+
+---
+
+### SignedIn
+
+A conditional rendering component that only displays its children when the user is authenticated.
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `children` | `React.ReactNode` | Yes | Content to render when user is signed in |
+| `fallback` | `React.ReactNode` | No | Content to render while loading |
+
+#### Example
+
+```tsx
+<SignedIn fallback={<div>Checking authentication...</div>}>
+  <Dashboard />
+</SignedIn>
+```
+
+**Customization:** See [Customization](#customization) for styling the fallback loading state.
+
+#### Available CSS Classes
+This component doesn't render any HTML elements with CSS classes. It conditionally renders children or fallback content.
+
+---
+
+### SignedOut
+
+A conditional rendering component that only displays its children when the user is not authenticated.
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `children` | `React.ReactNode` | Yes | Content to render when user is signed out |
+
+#### Example
+
+```tsx
+<SignedOut>
+  <LandingPage />
+</SignedOut>
+```
+
+**Customization:** See [Customization](#customization) for styling options.
+
+#### Available CSS Classes
+This component doesn't render any HTML elements with CSS classes. It conditionally renders children when user is signed out.
+
+---
+
+### SignInButton
+
+A pre-built button component that triggers the sign-in flow when clicked.
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `children` | `React.ReactNode` | No | Custom button content (defaults to "Sign In") |
+| `className` | `string` | No | CSS class name for styling |
+| `disabled` | `boolean` | No | Whether the button is disabled |
+| `onClick` | `() => void` | No | Additional click handler |
+
+#### Example
+
+```tsx
+<SignInButton className="custom-signin-btn">
+  Log In to Continue
+</SignInButton>
+```
+
+**Customization:** See [Customization](#customization) for theming and styling the sign-in button.
+
+#### Available CSS Classes
+- `.asgardeo-sign-in-button` - Main sign-in button element
+
+---
+
+### SignOutButton
+
+A pre-built button component that triggers the sign-out flow when clicked.
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `children` | `React.ReactNode` | No | Custom button content (defaults to "Sign Out") |
+| `className` | `string` | No | CSS class name for styling |
+| `disabled` | `boolean` | No | Whether the button is disabled |
+| `onClick` | `() => void` | No | Additional click handler |
+
+#### Example
+
+```tsx
+<SignOutButton className="custom-signout-btn">
+  Logout
+</SignOutButton>
+```
+
+**Customization:** See [Customization](#customization) for theming and styling the sign-out button.
+
+#### Available CSS Classes
+- `.asgardeo-sign-out-button` - Main sign-out button element
+
+---
+
+### User
+
+A render prop component that provides access to the current user's information.
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `children` | `({ user, isLoading, error }) => React.ReactNode` | Yes | Render function that receives user data |
+
+**Render Props:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `user` | `User \| null` | Current user object |
+| `isLoading` | `boolean` | Whether user data is being loaded |
+| `error` | `Error \| null` | Any error that occurred while fetching user data |
+
+**User Object Properties:**
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `sub` | `string` | User's unique identifier |
+| `username` | `string` | Username |
+| `email` | `string` | Email address |
+| `givenname` | `string` | First name |
+| `familyname` | `string` | Last name |
+| `photourl` | `string` | Profile picture URL |
+
+**Example:**
+
+```tsx
+<User>
+  {({ user, isLoading, error }) => {
+    if (isLoading) return <div>Loading user...</div>
+    if (error) return <div>Error: {error.message}</div>
+    if (!user) return <div>No user data</div>
+    
+    return (
+      <div>
+        <img src={user.photourl} alt={user.username} />
+        <h2>{user.givenname} {user.familyname}</h2>
+        <p>{user.email}</p>
+      </div>
+    )
+  }}
+</User>
+```
+
+**Customization:** See [Customization](#customization) for styling user information displays.
+
+#### Available CSS Classes
+This component doesn't render any HTML elements with CSS classes. It uses render props to provide user data to children.
+
+---
+
+### UserProfile
+
+A pre-built component that displays a formatted user profile card.
+
+**Props:**
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `className` | `string` | No | CSS class name for styling |
+| `showEmail` | `boolean` | No | Whether to display email (defaults to `true`) |
+| `showAvatar` | `boolean` | No | Whether to display profile picture (defaults to `true`) |
+| `avatarSize` | `'sm' \| 'md' \| 'lg'` | No | Size of the avatar (defaults to `'md'`) |
+
+**Example:**
+
+```tsx
+<UserProfile 
+  className="custom-profile"
+  showEmail={false}
+  avatarSize="lg"
+/>
+```
+
+**Customization:** See [Customization](#customization) for comprehensive styling options for the user profile component.
+
+#### Available CSS Classes
+- `.asgardeo-user-profile` - Main user profile container element
+
+---
+
+## Hooks
+
+### useAsgardeo
+
+The main hook that provides access to all authentication functionality and state.
+
+**Returns:**
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `user` | `User \| null` | Current user object |
+| `isSignedIn` | `boolean` | Whether user is authenticated |
+| `isLoading` | `boolean` | Whether authentication state is being determined |
+| `error` | `Error \| null` | Any authentication error |
+| `signIn` | `(redirectUrl?: string) => Promise<void>` | Function to initiate sign in |
+| `signOut` | `(redirectUrl?: string) => Promise<void>` | Function to sign out |
+| `getAccessToken` | `() => Promise<string \| null>` | Get current access token |
+| `getIdToken` | `() => Promise<string \| null>` | Get current ID token |
+| `refreshTokens` | `() => Promise<void>` | Refresh authentication tokens |
+
+**Example:**
+
+```tsx
+import { useAsgardeo } from '@asgardeo/react'
+
+function MyComponent() {
+  const { 
+    user, 
+    isSignedIn, 
+    isLoading, 
+    error,
+    signIn, 
+    signOut,
+    getAccessToken 
+  } = useAsgardeo()
+
+  const handleApiCall = async () => {
+    const token = await getAccessToken()
+    // Use token for API calls
+  }
+
+  if (isLoading) return <div>Loading...</div>
+  if (error) return <div>Error: {error.message}</div>
+
+  return (
+    <div>
+      {isSignedIn ? (
+        <div>
+          <h1>Welcome, {user?.givenname}!</h1>
+          <button onClick={() => signOut()}>Sign Out</button>
+          <button onClick={handleApiCall}>Call API</button>
+        </div>
+      ) : (
+        <button onClick={() => signIn()}>Sign In</button>
+      )}
+    </div>
+  )
+}
+```
+
+---
+
+## Customization
+
+The Asgardeo React SDK provides multiple ways to customize the appearance and behavior of components to match your application's design system.
+
+### CSS Classes and Styling
+
+All components accept a `className` prop that allows you to apply custom CSS styles:
+
+```tsx
+<SignInButton className="btn btn-primary">
+  Sign In
+</SignInButton>
+
+<UserProfile className="user-card shadow-lg" />
+```
+
+### Default CSS Classes
+
+Components come with default CSS classes that you can target for styling:
+
+- `.asgardeo-signin-button` - Sign in button
+- `.asgardeo-signout-button` - Sign out button  
+- `.asgardeo-user-profile` - User profile container
+- `.asgardeo-user-avatar` - User avatar image
+- `.asgardeo-user-info` - User information container
+
+### CSS Custom Properties (CSS Variables)
+
+The SDK supports CSS custom properties for consistent theming:
+
+```css
+:root {
+  --asgardeo-primary-color: #007bff;
+  --asgardeo-primary-hover: #0056b3;
+  --asgardeo-border-radius: 8px;
+  --asgardeo-font-family: 'Inter', sans-serif;
+  --asgardeo-button-padding: 12px 24px;
+  --asgardeo-avatar-size-sm: 32px;
+  --asgardeo-avatar-size-md: 48px;
+  --asgardeo-avatar-size-lg: 64px;
+}
+```
+
+### Custom Button Content
+
+Replace default button text with custom content:
+
+```tsx
+<SignInButton>
+  <span className="icon">🔐</span>
+  Login with Asgardeo
+</SignInButton>
+
+<SignOutButton>
+  <LogoutIcon />
+  Sign Out
+</SignOutButton>
+```
+
+### Theme Integration
+
+For applications using popular UI libraries, you can easily integrate Asgardeo components:
+
+**Material-UI Integration:**
+```tsx
+import { Button } from '@mui/material'
+import { useAsgardeo } from '@asgardeo/react'
+
+function CustomSignInButton() {
+  const { signIn } = useAsgardeo()
+  
+  return (
+    <Button 
+      variant="contained" 
+      color="primary"
+      onClick={() => signIn()}
+    >
+      Sign In with Asgardeo
+    </Button>
+  )
+}
+```
+
+**Tailwind CSS Integration:**
+```tsx
+<SignInButton className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+  Sign In
+</SignInButton>
+```
+
+### Custom Loading States
+
+Customize loading indicators for better user experience:
+
+```tsx
+<SignedIn fallback={
+  <div className="flex items-center justify-center">
+    <Spinner />
+    <span>Authenticating...</span>
+  </div>
+}>
+  <Dashboard />
+</SignedIn>
+```
+
+### Advanced Customization with Render Props
+
+Use the `User` component for complete control over user data presentation:
+
+```tsx
+<User>
+  {({ user, isLoading }) => (
+    <div className="custom-user-card">
+      {isLoading ? (
+        <SkeletonLoader />
+      ) : (
+        <div className="user-details">
+          <Avatar src={user?.photourl} size="large" />
+          <div>
+            <h3>{user?.givenname} {user?.familyname}</h3>
+            <Badge>{user?.email}</Badge>
+          </div>
+        </div>
+      )}
+    </div>
+  )}
+</User>
+```
+
+### Configuration-Based Customization
+
+Customize behavior through the `AsgardeoProvider` configuration:
+
+```tsx
+<AsgardeoProvider
+  baseUrl="https://api.asgardeo.io/t/your-org"
+  clientId="your-client-id"
+  // Customize redirect URLs
+  afterSignInUrl="/dashboard"
+  // Customize sign-out URL
+  afterSignOutUrl="/goodbye"
+  // Specify OAuth scopes
+  scopes={['openid', 'profile', 'email', 'groups']}
+  // Customize storage
+  storage="sessionStorage"
+>
+  <App />
+</AsgardeoProvider>
+```
+
+This comprehensive customization approach ensures that Asgardeo components can seamlessly integrate with any design system or UI framework while maintaining functionality and accessibility standards.
diff --git a/packages/react/README.md b/packages/react/README.md
index c224c2600..5568f3eb2 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -124,6 +124,10 @@ function App() {
 }
 ```
 
+## Documentation
+
+For complete API documentation including all components, hooks, and customization options, see [API.md](./API.md).
+
 ## License
 
-Apache-2.0
+Licenses this source under the Apache License, Version 2.0 [LICENSE](../../LICENSE), You may not use this file except in compliance with the License.

From 83452029d8a05a6475952353c80b2b9d0d336b70 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 10:35:15 +0530
Subject: [PATCH 125/131] docs: update API documentation for User component
 render props and example

---
 packages/react/API.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/react/API.md b/packages/react/API.md
index 97b06e41d..534a68064 100644
--- a/packages/react/API.md
+++ b/packages/react/API.md
@@ -213,7 +213,7 @@ A render prop component that provides access to the current user's information.
 |------|------|----------|-------------|
 | `children` | `({ user, isLoading, error }) => React.ReactNode` | Yes | Render function that receives user data |
 
-**Render Props:**
+#### Render Props
 
 | Prop | Type | Description |
 |------|------|-------------|
@@ -221,7 +221,7 @@ A render prop component that provides access to the current user's information.
 | `isLoading` | `boolean` | Whether user data is being loaded |
 | `error` | `Error \| null` | Any error that occurred while fetching user data |
 
-**User Object Properties:**
+#### User Object Properties
 
 | Property | Type | Description |
 |----------|------|-------------|
@@ -232,7 +232,7 @@ A render prop component that provides access to the current user's information.
 | `familyname` | `string` | Last name |
 | `photourl` | `string` | Profile picture URL |
 
-**Example:**
+#### Example
 
 ```tsx
 <User>
@@ -263,7 +263,7 @@ This component doesn't render any HTML elements with CSS classes. It uses render
 
 A pre-built component that displays a formatted user profile card.
 
-**Props:**
+#### Props
 
 | Prop | Type | Required | Description |
 |------|------|----------|-------------|
@@ -272,7 +272,7 @@ A pre-built component that displays a formatted user profile card.
 | `showAvatar` | `boolean` | No | Whether to display profile picture (defaults to `true`) |
 | `avatarSize` | `'sm' \| 'md' \| 'lg'` | No | Size of the avatar (defaults to `'md'`) |
 
-**Example:**
+#### Example
 
 ```tsx
 <UserProfile 
@@ -295,7 +295,7 @@ A pre-built component that displays a formatted user profile card.
 
 The main hook that provides access to all authentication functionality and state.
 
-**Returns:**
+#### Returns
 
 | Property | Type | Description |
 |----------|------|-------------|
@@ -309,7 +309,7 @@ The main hook that provides access to all authentication functionality and state
 | `getIdToken` | `() => Promise<string \| null>` | Get current ID token |
 | `refreshTokens` | `() => Promise<void>` | Refresh authentication tokens |
 
-**Example:**
+#### Example
 
 ```tsx
 import { useAsgardeo } from '@asgardeo/react'
@@ -414,7 +414,7 @@ Replace default button text with custom content:
 
 For applications using popular UI libraries, you can easily integrate Asgardeo components:
 
-**Material-UI Integration:**
+#### Material-UI Integration
 ```tsx
 import { Button } from '@mui/material'
 import { useAsgardeo } from '@asgardeo/react'
@@ -434,7 +434,7 @@ function CustomSignInButton() {
 }
 ```
 
-**Tailwind CSS Integration:**
+#### Tailwind CSS Integration
 ```tsx
 <SignInButton className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
   Sign In

From 8bff9ae39e99c90c3fa5efdbd7861ba158d17cc0 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 10:45:50 +0530
Subject: [PATCH 126/131] docs: enhance API documentation with new components
 and examples for improved clarity

---
 packages/react/API.md | 399 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 324 insertions(+), 75 deletions(-)

diff --git a/packages/react/API.md b/packages/react/API.md
index 534a68064..b76f0f650 100644
--- a/packages/react/API.md
+++ b/packages/react/API.md
@@ -6,9 +6,9 @@ This document provides complete API documentation for the Asgardeo React SDK, in
 
 - [Components](#components)
   - [AsgardeoProvider](#asgardeyprovider)
+  - [SignIn](#signin)
   - [SignedIn](#signedin)
   - [SignedOut](#signedout)
-  - [SignIn](#signin)
   - [SignInButton](#signinbutton)
   - [SignOutButton](#signoutbutton)
   - [User](#user)
@@ -36,13 +36,27 @@ The root provider component that configures the Asgardeo SDK and provides authen
 
 #### Example
 
-```tsx
-<AsgardeoProvider
-  baseUrl="https://api.asgardeo.io/t/your-org"
-  clientId="your-client-id"
->
-  <App />
-</AsgardeoProvider>
+```diff
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
++ import { AsgardeoProvider } from '@asgardeo/react';
+import App from './App';
+
+const root = createRoot(document.getElementById('root'));
+
+root.render(
+  <StrictMode>
++     <AsgardeoProvider
++       baseUrl="https://api.asgardeo.io/t/your-org"
++       clientId="your-client-id"
++       afterSignInUrl="/dashboard"
++       afterSignOutUrl="/"
++       scopes={['openid', 'profile', 'email']}
++     >
+        <App />
++     </AsgardeoProvider>
+  </StrictMode>
+);
 ```
 
 **Customization:** See [Customization](#customization) section for theming and styling options. The provider doesn't render any visual elements but can be styled through CSS custom properties.
@@ -71,8 +85,35 @@ A comprehensive sign-in component that renders a complete sign-in interface with
 
 #### Example
 
-```tsx
-<SignIn />
+```diff
++ import { SignIn } from '@asgardeo/react';
+
+const SignInPage = () => {
+  const handleSignInSuccess = (user) => {
+    console.log('User signed in:', user.username);
+    // Redirect to dashboard or update UI
+  };
+
+  const handleSignInError = (error) => {
+    console.error('Sign-in failed:', error.message);
+    // Show error message to user
+  };
+
+  return (
+    <div className="signin-container">
+      <h1>Welcome Back</h1>
++       <SignIn 
++         className="custom-signin"
++         redirectUrl="/dashboard"
++         buttonText="Login with Asgardeo"
++         onSignInSuccess={handleSignInSuccess}
++         onSignInError={handleSignInError}
++       />
+    </div>
+  );
+};
+
+export default SignInPage;
 ```
 
 **Customization:** See [Customization](#customization) for comprehensive styling and theming options.
@@ -109,10 +150,27 @@ A conditional rendering component that only displays its children when the user
 
 #### Example
 
-```tsx
-<SignedIn fallback={<div>Checking authentication...</div>}>
-  <Dashboard />
-</SignedIn>
+```diff
++ import { SignedIn } from '@asgardeo/react';
+import Dashboard from './components/Dashboard';
+import LoadingSpinner from './components/LoadingSpinner';
+
+const App = () => {
+  return (
+    <div className="app">
++       <SignedIn fallback={
++         <div className="loading-container">
++           <LoadingSpinner />
++           <p>Checking authentication...</p>
++         </div>
++       }>
+        <Dashboard />
++       </SignedIn>
+    </div>
+  );
+};
+
+export default App;
 ```
 
 **Customization:** See [Customization](#customization) for styling the fallback loading state.
@@ -134,10 +192,23 @@ A conditional rendering component that only displays its children when the user
 
 #### Example
 
-```tsx
-<SignedOut>
-  <LandingPage />
-</SignedOut>
+```diff
++ import { SignedOut } from '@asgardeo/react';
+import LandingPage from './components/LandingPage';
+import Hero from './components/Hero';
+
+const App = () => {
+  return (
+    <div className="app">
++       <SignedOut>
+        <Hero />
+        <LandingPage />
++       </SignedOut>
+    </div>
+  );
+};
+
+export default App;
 ```
 
 **Customization:** See [Customization](#customization) for styling options.
@@ -162,10 +233,30 @@ A pre-built button component that triggers the sign-in flow when clicked.
 
 #### Example
 
-```tsx
-<SignInButton className="custom-signin-btn">
-  Log In to Continue
-</SignInButton>
+```diff
++ import { SignInButton } from '@asgardeo/react';
+
+const LoginPage = () => {
+  const handleClick = () => {
+    console.log('Sign-in button clicked');
+  };
+
+  return (
+    <div className="login-page">
+      <h1>Welcome to Our App</h1>
+      <p>Please sign in to continue</p>
+      
++       <SignInButton 
++         className="custom-signin-btn"
++         onClick={handleClick}
++       >
++         🔐 Log In to Continue
++       </SignInButton>
+    </div>
+  );
+};
+
+export default LoginPage;
 ```
 
 **Customization:** See [Customization](#customization) for theming and styling the sign-in button.
@@ -190,10 +281,30 @@ A pre-built button component that triggers the sign-out flow when clicked.
 
 #### Example
 
-```tsx
-<SignOutButton className="custom-signout-btn">
-  Logout
-</SignOutButton>
+```diff
++ import { SignOutButton } from '@asgardeo/react';
+
+const UserMenu = () => {
+  const handleSignOut = () => {
+    console.log('User signed out');
+    // Additional cleanup logic
+  };
+
+  return (
+    <div className="user-menu">
+      <h3>Account Settings</h3>
+      
++       <SignOutButton 
++         className="custom-signout-btn"
++         onClick={handleSignOut}
++       >
++         🚪 Logout
++       </SignOutButton>
+    </div>
+  );
+};
+
+export default UserMenu;
 ```
 
 **Customization:** See [Customization](#customization) for theming and styling the sign-out button.
@@ -234,22 +345,59 @@ A render prop component that provides access to the current user's information.
 
 #### Example
 
-```tsx
-<User>
-  {({ user, isLoading, error }) => {
-    if (isLoading) return <div>Loading user...</div>
-    if (error) return <div>Error: {error.message}</div>
-    if (!user) return <div>No user data</div>
-    
-    return (
-      <div>
-        <img src={user.photourl} alt={user.username} />
-        <h2>{user.givenname} {user.familyname}</h2>
-        <p>{user.email}</p>
-      </div>
-    )
-  }}
-</User>
+```diff
++ import { User } from '@asgardeo/react';
+
+const UserProfile = () => {
+  return (
+    <div className="profile-page">
+      <h1>User Profile</h1>
+      
++       <User>
++         {({ user, isLoading, error }) => {
+          if (isLoading) {
+            return (
+              <div className="loading">
+                <div className="spinner" />
+                <p>Loading user information...</p>
+              </div>
+            );
+          }
+          
+          if (error) {
+            return (
+              <div className="error">
+                <p>Error loading user: {error.message}</p>
+                <button onClick={() => window.location.reload()}>
+                  Try Again
+                </button>
+              </div>
+            );
+          }
+          
+          if (!user) {
+            return <div className="no-user">No user data available</div>;
+          }
+          
+          return (
+            <div className="user-card">
+              <img 
+                src={user.photourl || '/default-avatar.png'} 
+                alt={user.username}
+                className="avatar"
+              />
+              <h2>{user.givenname} {user.familyname}</h2>
+              <p className="username">@{user.username}</p>
+              <p className="email">{user.email}</p>
+            </div>
+          );
++         }}
++       </User>
+    </div>
+  );
+};
+
+export default UserProfile;
 ```
 
 **Customization:** See [Customization](#customization) for styling user information displays.
@@ -274,12 +422,42 @@ A pre-built component that displays a formatted user profile card.
 
 #### Example
 
-```tsx
-<UserProfile 
-  className="custom-profile"
-  showEmail={false}
-  avatarSize="lg"
-/>
+```diff
++ import { UserProfile } from '@asgardeo/react';
+
+const Header = () => {
+  return (
+    <header className="app-header">
+      <div className="header-content">
+        <h1>My Dashboard</h1>
+        
+        <div className="user-section">
++           <UserProfile 
++             className="header-profile"
++             showEmail={false}
++             avatarSize="sm"
++           />
+        </div>
+      </div>
+    </header>
+  );
+};
+
+const ProfileCard = () => {
+  return (
+    <div className="profile-card-container">
+      <h2>Profile Information</h2>
+      
++       <UserProfile 
++         className="detailed-profile"
++         showEmail={true}
++         avatarSize="lg"
++       />
+    </div>
+  );
+};
+
+export { Header, ProfileCard };
 ```
 
 **Customization:** See [Customization](#customization) for comprehensive styling options for the user profile component.
@@ -311,42 +489,113 @@ The main hook that provides access to all authentication functionality and state
 
 #### Example
 
-```tsx
-import { useAsgardeo } from '@asgardeo/react'
-
-function MyComponent() {
-  const { 
-    user, 
-    isSignedIn, 
-    isLoading, 
-    error,
-    signIn, 
-    signOut,
-    getAccessToken 
-  } = useAsgardeo()
+```diff
++ import { useAsgardeo } from '@asgardeo/react';
+import { useState } from 'react';
+
+const AuthenticatedApp = () => {
++   const { 
++     user, 
++     isSignedIn, 
++     isLoading, 
++     error,
++     signIn, 
++     signOut,
++     getAccessToken 
++   } = useAsgardeo();
+  
+  const [apiData, setApiData] = useState(null);
+  const [apiLoading, setApiLoading] = useState(false);
 
   const handleApiCall = async () => {
-    const token = await getAccessToken()
-    // Use token for API calls
+    try {
+      setApiLoading(true);
+      const token = await getAccessToken();
+      
+      const response = await fetch('/api/protected-data', {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+      });
+      
+      const data = await response.json();
+      setApiData(data);
+    } catch (err) {
+      console.error('API call failed:', err);
+    } finally {
+      setApiLoading(false);
+    }
+  };
+
+  const handleSignOut = async () => {
+    await signOut('/goodbye');
+  };
+
+  if (isLoading) {
+    return (
+      <div className="loading-screen">
+        <div className="spinner" />
+        <p>Initializing authentication...</p>
+      </div>
+    );
+  }
+  
+  if (error) {
+    return (
+      <div className="error-screen">
+        <h2>Authentication Error</h2>
+        <p>{error.message}</p>
+        <button onClick={() => window.location.reload()}>
+          Retry
+        </button>
+      </div>
+    );
   }
-
-  if (isLoading) return <div>Loading...</div>
-  if (error) return <div>Error: {error.message}</div>
 
   return (
-    <div>
+    <div className="app">
       {isSignedIn ? (
-        <div>
-          <h1>Welcome, {user?.givenname}!</h1>
-          <button onClick={() => signOut()}>Sign Out</button>
-          <button onClick={handleApiCall}>Call API</button>
+        <div className="authenticated-content">
+          <header className="app-header">
+            <h1>Welcome, {user?.givenname}!</h1>
+            <button className="sign-out-btn" onClick={handleSignOut}>
+              Sign Out
+            </button>
+          </header>
+          
+          <main className="main-content">
+            <div className="api-section">
+              <button 
+                className="api-btn" 
+                onClick={handleApiCall}
+                disabled={apiLoading}
+              >
+                {apiLoading ? 'Loading...' : 'Fetch Protected Data'}
+              </button>
+              
+              {apiData && (
+                <pre className="api-response">
+                  {JSON.stringify(apiData, null, 2)}
+                </pre>
+              )}
+            </div>
+          </main>
         </div>
       ) : (
-        <button onClick={() => signIn()}>Sign In</button>
+        <div className="landing-page">
+          <h1>Welcome to Our App</h1>
+          <p>Please sign in to access your dashboard</p>
+          <button className="sign-in-btn" onClick={() => signIn('/dashboard')}>
+            Sign In
+          </button>
+        </div>
       )}
     </div>
-  )
-}
+  );
+};
+
+export default AuthenticatedApp;
 ```
 
 ---
@@ -410,7 +659,7 @@ Replace default button text with custom content:
 </SignOutButton>
 ```
 
-### Theme Integration
+### Bring your own UI Library
 
 For applications using popular UI libraries, you can easily integrate Asgardeo components:
 

From 3754d9ba19fbba6692a4c046701eae661a0c5d74 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 10:46:11 +0530
Subject: [PATCH 127/131] fix: update package.json files to correct homepage
 and repository URLs

---
 package.json                     | 8 ++++----
 packages/browser/package.json    | 8 ++++----
 packages/express/package.json    | 6 +++---
 packages/javascript/package.json | 8 ++++----
 packages/nextjs/package.json     | 8 ++++----
 packages/node/package.json       | 8 ++++----
 packages/react/package.json      | 8 ++++----
 7 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index 2d08546be..0cdb32de1 100644
--- a/package.json
+++ b/package.json
@@ -5,13 +5,13 @@
   "description": "Workspace to hold the Asgardeo JavaScript SDKs.",
   "author": "WSO2",
   "license": "Apache-2.0",
-  "homepage": "https://github.com/asgardeo/javascript#readme",
+  "homepage": "https://github.com/asgardeo/web-ui-sdks#readme",
   "bugs": {
-    "url": "https://github.com/asgardeo/javascript/issues"
+    "url": "https://github.com/asgardeo/web-ui-sdks/issues"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/asgardeo/javascript"
+    "url": "https://github.com/asgardeo/web-ui-sdks"
   },
   "keywords": [
     "asgardeo",
@@ -39,4 +39,4 @@
   "publishConfig": {
     "access": "restricted"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/browser/package.json b/packages/browser/package.json
index edb5091fe..436ae0185 100644
--- a/packages/browser/package.json
+++ b/packages/browser/package.json
@@ -7,9 +7,9 @@
     "browser",
     "spa"
   ],
-  "homepage": "https://github.com/asgardeo/javascript/tree/main/packages/browser#readme",
+  "homepage": "https://github.com/asgardeo/web-ui-sdks/tree/main/packages/browser#readme",
   "bugs": {
-    "url": "https://github.com/asgardeo/javascript/issues"
+    "url": "https://github.com/asgardeo/web-ui-sdks/issues"
   },
   "author": "WSO2",
   "license": "Apache-2.0",
@@ -28,7 +28,7 @@
   "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/asgardeo/javascript",
+    "url": "https://github.com/asgardeo/web-ui-sdks",
     "directory": "packages/browser"
   },
   "scripts": {
@@ -73,4 +73,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/express/package.json b/packages/express/package.json
index d0d655a5c..cd6f5bf91 100644
--- a/packages/express/package.json
+++ b/packages/express/package.json
@@ -7,9 +7,9 @@
     "express.js",
     "server"
   ],
-  "homepage": "https://github.com/asgardeo/javascript/tree/main/packages/express#readme",
+  "homepage": "https://github.com/asgardeo/web-ui-sdks/tree/main/packages/express#readme",
   "bugs": {
-    "url": "https://github.com/asgardeo/javascript/issues"
+    "url": "https://github.com/asgardeo/web-ui-sdks/issues"
   },
   "author": "WSO2",
   "license": "Apache-2.0",
@@ -29,7 +29,7 @@
   "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/asgardeo/javascript",
+    "url": "https://github.com/asgardeo/web-ui-sdks",
     "directory": "packages/express"
   },
   "scripts": {
diff --git a/packages/javascript/package.json b/packages/javascript/package.json
index 69d4a8810..87f0e1455 100644
--- a/packages/javascript/package.json
+++ b/packages/javascript/package.json
@@ -9,9 +9,9 @@
     "agnostic",
     "js"
   ],
-  "homepage": "https://github.com/asgardeo/javascript/tree/main/packages/javascript#readme",
+  "homepage": "https://github.com/asgardeo/web-ui-sdks/tree/main/packages/javascript#readme",
   "bugs": {
-    "url": "https://github.com/asgardeo/javascript/issues"
+    "url": "https://github.com/asgardeo/web-ui-sdks/issues"
   },
   "author": "WSO2",
   "license": "Apache-2.0",
@@ -30,7 +30,7 @@
   "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/asgardeo/javascript",
+    "url": "https://github.com/asgardeo/web-ui-sdks",
     "directory": "packages/javascript"
   },
   "scripts": {
@@ -58,4 +58,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
index b633568db..f6d8600e6 100644
--- a/packages/nextjs/package.json
+++ b/packages/nextjs/package.json
@@ -8,9 +8,9 @@
     "react",
     "ssr"
   ],
-  "homepage": "https://github.com/asgardeo/javascript/tree/main/packages/next#readme",
+  "homepage": "https://github.com/asgardeo/web-ui-sdks/tree/main/packages/next#readme",
   "bugs": {
-    "url": "https://github.com/asgardeo/javascript/issues"
+    "url": "https://github.com/asgardeo/web-ui-sdks/issues"
   },
   "author": "WSO2",
   "license": "Apache-2.0",
@@ -30,7 +30,7 @@
   "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/asgardeo/javascript",
+    "url": "https://github.com/asgardeo/web-ui-sdks",
     "directory": "packages/next"
   },
   "scripts": {
@@ -67,4 +67,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/node/package.json b/packages/node/package.json
index 6cda86ed6..d2971fc94 100644
--- a/packages/node/package.json
+++ b/packages/node/package.json
@@ -8,9 +8,9 @@
     "node",
     "server"
   ],
-  "homepage": "https://github.com/asgardeo/javascript/tree/main/packages/node#readme",
+  "homepage": "https://github.com/asgardeo/web-ui-sdks/tree/main/packages/node#readme",
   "bugs": {
-    "url": "https://github.com/asgardeo/javascript/issues"
+    "url": "https://github.com/asgardeo/web-ui-sdks/issues"
   },
   "author": "WSO2",
   "license": "Apache-2.0",
@@ -29,7 +29,7 @@
   "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/asgardeo/javascript",
+    "url": "https://github.com/asgardeo/web-ui-sdks",
     "directory": "packages/node"
   },
   "scripts": {
@@ -65,4 +65,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/react/package.json b/packages/react/package.json
index b23e23bf3..3129f4436 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -7,9 +7,9 @@
     "react",
     "spa"
   ],
-  "homepage": "https://github.com/asgardeo/javascript/tree/main/packages/react#readme",
+  "homepage": "https://github.com/asgardeo/web-ui-sdks/tree/main/packages/react#readme",
   "bugs": {
-    "url": "https://github.com/asgardeo/javascript/issues"
+    "url": "https://github.com/asgardeo/web-ui-sdks/issues"
   },
   "author": "WSO2",
   "license": "Apache-2.0",
@@ -28,7 +28,7 @@
   "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/asgardeo/javascript",
+    "url": "https://github.com/asgardeo/web-ui-sdks",
     "directory": "packages/react"
   },
   "scripts": {
@@ -73,4 +73,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
\ No newline at end of file
+}

From 2a0c6b9182fec370b30d845e70d1157b9a134194 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 11:08:27 +0530
Subject: [PATCH 128/131] chore: exclude nuxt package from pnpm workspace

---
 package.json                                  |    1 +
 .../runtime/composables/asgardeo/useAuth.ts   |    8 +-
 .../runtime/server/services/asgardeo/index.ts |    2 +-
 packages/nuxt/src/runtime/types.ts            |    6 +-
 pnpm-lock.yaml                                | 5306 +----------------
 pnpm-workspace.yaml                           |    1 +
 6 files changed, 90 insertions(+), 5234 deletions(-)

diff --git a/package.json b/package.json
index 0cdb32de1..e73152ebd 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "lint": "nx run-many --target=lint --all --parallel",
     "publish:packages": "changeset publish",
     "test": "nx run-many --target=test --all --parallel",
+    "typecheck": "nx run-many --target=typecheck --all --parallel",
     "version:packages": "changeset version && pnpm install --lockfile-only"
   },
   "devDependencies": {
diff --git a/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts b/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
index dfdf584d5..456377ebd 100644
--- a/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
+++ b/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import type {BasicUserInfo, StorageManager, IdTokenPayload, OIDCEndpoints} from '@asgardeo/node';
+import type {User, StorageManager, IdTokenPayload, OIDCEndpoints} from '@asgardeo/node';
 import type {AuthInterface} from '../../types';
 import {navigateTo} from '#imports';
 
@@ -172,11 +172,11 @@ export const useAuth = (): AuthInterface => {
    * from the server-side '/api/auth/user' endpoint.
    * Updates the internal state variables with the result.
    *
-   * @returns {Promise<BasicUserInfo | null>} A promise resolving to user info or null.
+   * @returns {Promise<User | null>} A promise resolving to user info or null.
    */
-  const getUser = async (): Promise<BasicUserInfo | null> => {
+  const getUser = async (): Promise<User | null> => {
     try {
-      const userInfo: BasicUserInfo = await $fetch<BasicUserInfo>('/api/auth/user', {
+      const userInfo: User = await $fetch<User>('/api/auth/user', {
         method: 'GET',
       });
 
diff --git a/packages/nuxt/src/runtime/server/services/asgardeo/index.ts b/packages/nuxt/src/runtime/server/services/asgardeo/index.ts
index fb8a17969..dc87fd515 100644
--- a/packages/nuxt/src/runtime/server/services/asgardeo/index.ts
+++ b/packages/nuxt/src/runtime/server/services/asgardeo/index.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {AsgardeoNodeClient, type AuthClientConfig} from '@asgardeo/auth-node';
+import {AsgardeoNodeClient, type AuthClientConfig} from '@asgardeo/node';
 
 let authClientInstance: AsgardeoNodeClient<any> | null = null;
 
diff --git a/packages/nuxt/src/runtime/types.ts b/packages/nuxt/src/runtime/types.ts
index 4a6a0398f..0300cf3d8 100644
--- a/packages/nuxt/src/runtime/types.ts
+++ b/packages/nuxt/src/runtime/types.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import type {BasicUserInfo, StorageManager, IdTokenPayload, OIDCEndpoints} from '@asgardeo/node';
+import type {User, StorageManager, IdTokenPayload, OIDCEndpoints} from '@asgardeo/node';
 
 export interface ModuleOptions {
   /**
@@ -59,7 +59,7 @@ export interface ModuleOptions {
 
 export interface AuthInterface {
   getAccessToken: () => Promise<string | null>;
-  getUser: () => Promise<BasicUserInfo | null>;
+  getUser: () => Promise<User | null>;
   getStorageManager: () => Promise<StorageManager<any> | null>;
   getDecodedIdToken: () => Promise<IdTokenPayload | null>;
   getIdToken: () => Promise<string | null>;
@@ -74,4 +74,4 @@ export type SessionLastRefreshedAt = Date | undefined;
 
 export type SessionStatus = 'authenticated' | 'unauthenticated' | 'loading';
 
-export type {BasicUserInfo};
+export type {User};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5f634fd25..bd376ef67 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -317,58 +317,6 @@ importers:
         specifier: ^3.1.3
         version: 3.1.3(@types/node@22.15.30)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
-  packages/nuxt:
-    dependencies:
-      '@asgardeo/node':
-        specifier: workspace:^
-        version: link:../node
-      '@nuxt/kit':
-        specifier: ^3.16.2
-        version: 3.17.4(magicast@0.3.5)
-      defu:
-        specifier: ^6.1.4
-        version: 6.1.4
-    devDependencies:
-      '@nuxt/devtools':
-        specifier: ^2.4.0
-        version: 2.4.1(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
-      '@nuxt/eslint-config':
-        specifier: ^1.3.0
-        version: 1.4.1(@vue/compiler-sfc@3.5.14)(eslint@8.57.0)(typescript@5.8.3)
-      '@nuxt/module-builder':
-        specifier: ^1.0.1
-        version: 1.0.1(@nuxt/cli@3.25.1(magicast@0.3.5))(@vue/compiler-core@3.5.14)(esbuild@0.25.4)(sass@1.89.0)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3))
-      '@nuxt/schema':
-        specifier: ^3.16.2
-        version: 3.17.4
-      '@nuxt/test-utils':
-        specifier: ^3.17.2
-        version: 3.19.0(@types/node@24.0.3)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
-      '@types/node':
-        specifier: latest
-        version: 24.0.3
-      changelogen:
-        specifier: ^0.6.1
-        version: 0.6.1(magicast@0.3.5)
-      cookie-es:
-        specifier: ^2.0.0
-        version: 2.0.0
-      eslint:
-        specifier: 8.57.0
-        version: 8.57.0
-      nuxt:
-        specifier: ^3.16.2
-        version: 3.17.4(@parcel/watcher@2.5.1)(@types/node@24.0.3)(db0@0.3.2)(eslint@8.57.0)(ioredis@5.6.1)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))(yaml@2.8.0)
-      typescript:
-        specifier: ~5.8.3
-        version: 5.8.3
-      vitest:
-        specifier: ^3.1.1
-        version: 3.1.3(@types/node@24.0.3)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vue-tsc:
-        specifier: ^2.2.8
-        version: 2.2.10(typescript@5.8.3)
-
   packages/react:
     dependencies:
       '@asgardeo/browser':
@@ -745,9 +693,6 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
-  '@antfu/install-pkg@1.1.0':
-    resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
-
   '@asamuzakjp/css-color@3.1.7':
     resolution: {integrity: sha512-Ok5fYhtwdyJQmU1PpEv6Si7Y+A4cYb8yNM9oiIJC9TzXPMuN9fvdonKJqcnz9TbFqV6bQ8z0giRq0iaOpGZV2g==}
 
@@ -783,24 +728,10 @@ packages:
     resolution: {integrity: sha512-UnJfnIpc/+JO0/+KRVQNGU+y5taA5vCbwN8+azkX6beii/ZF+enZJSOKo11ZSzGJjlNfJHfQtmQT8H+9TXPG2w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-annotate-as-pure@7.27.1':
-    resolution: {integrity: sha512-WnuuDILl9oOBbKnb4L+DyODx7iC47XfzmNCpTttFsSp6hTG7XZxu60+4IO+2/hPfcGOoKbFiwoI/+zwARbNQow==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-compilation-targets@7.27.2':
     resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-create-class-features-plugin@7.27.1':
-    resolution: {integrity: sha512-QwGAmuvM17btKU5VqXfb+Giw4JcN0hjuufz3DYnpeVDvZLAObloM77bhMXiqry3Iio+Ai4phVRDwl6WU10+r5A==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-
-  '@babel/helper-member-expression-to-functions@7.27.1':
-    resolution: {integrity: sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-module-imports@7.27.1':
     resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
     engines: {node: '>=6.9.0'}
@@ -811,24 +742,10 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-optimise-call-expression@7.27.1':
-    resolution: {integrity: sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-plugin-utils@7.27.1':
     resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-replace-supers@7.27.1':
-    resolution: {integrity: sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-
-  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
-    resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-string-parser@7.27.1':
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
@@ -850,18 +767,6 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/plugin-syntax-jsx@7.27.1':
-    resolution: {integrity: sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-syntax-typescript@7.27.1':
-    resolution: {integrity: sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
   '@babel/plugin-transform-react-jsx-self@7.27.1':
     resolution: {integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==}
     engines: {node: '>=6.9.0'}
@@ -874,12 +779,6 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-typescript@7.27.1':
-    resolution: {integrity: sha512-Q5sT5+O4QUebHdbwKedFBEwRLb02zJ7r4A5Gg2hUoLuU3FjdMcyqcywqUrLCaDsFCxzokf7u9kuy7qz51YUuAg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
   '@babel/runtime@7.27.1':
     resolution: {integrity: sha512-1x3D2xEk2fRo3PAhwQwu5UubzgiVWSXTBfWpVd2Mx2AzRqJuDJCsgaDVZ7HB5iGzDW1Hl1sWN2mFyKjmR9uAog==}
     engines: {node: '>=6.9.0'}
@@ -961,20 +860,6 @@ packages:
   '@changesets/write@0.4.0':
     resolution: {integrity: sha512-CdTLvIOPiCNuH71pyDu3rA+Q0n65cmAbXnwWH84rKGiFumFzkmHNT8KHTMEchcxN+Kl8I54xGUhJ7l3E7X396Q==}
 
-  '@clack/core@0.4.2':
-    resolution: {integrity: sha512-NYQfcEy8MWIxrT5Fj8nIVchfRFA26yYKJcvBS7WlUIlw2OmQOY9DhGGXMovyI5J5PpxrCPGkgUi207EBrjpBvg==}
-
-  '@clack/prompts@0.10.1':
-    resolution: {integrity: sha512-Q0T02vx8ZM9XSv9/Yde0jTmmBQufZhPJfYAg2XrrrxWWaZgq1rr8nU8Hv710BQ1dhoP8rtY7YUdpGej2Qza/cw==}
-
-  '@cloudflare/kv-asset-handler@0.4.0':
-    resolution: {integrity: sha512-+tv3z+SPp+gqTIcImN9o0hqE9xyfQjI1XD9pL6NuKjua9B1y7mNYv0S9cP+QEbA4ppVgGZEmKOvHX5G5Ei1CVA==}
-    engines: {node: '>=18.0.0'}
-
-  '@colors/colors@1.6.0':
-    resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
-    engines: {node: '>=0.1.90'}
-
   '@csstools/color-helpers@5.0.2':
     resolution: {integrity: sha512-JqWH1vsgdGcw2RR6VliXXdA0/59LttzlU8UlRT/iUUsEeWfYq8I+K0yhihEUTTHLRm1EXvpsCx3083EU15ecsA==}
     engines: {node: '>=18'}
@@ -1026,13 +911,6 @@ packages:
     peerDependencies:
       postcss-selector-parser: ^6.0.10
 
-  '@dabh/diagnostics@2.0.3':
-    resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}
-
-  '@dependents/detective-less@5.0.1':
-    resolution: {integrity: sha512-Y6+WUMsTFWE5jb20IFP4YGa5IrGY/+a/FbOSjDF/wz9gepU2hwCYSXRHP/vPwBvwcY3SVMASt4yXxbXNXigmZQ==}
-    engines: {node: '>=18'}
-
   '@docsearch/css@3.8.2':
     resolution: {integrity: sha512-y05ayQFyUmCXze79+56v/4HpycYF3uFqB78pLPrSV5ZKAlDuIAAJNhaRi8tTdRNXh05yxX/TyNnzD6LwSM89vQ==}
 
@@ -1065,10 +943,6 @@ packages:
   '@emnapi/wasi-threads@1.0.2':
     resolution: {integrity: sha512-5n3nTJblwRi8LlXkJ9eBzu+kZR8Yxcc7ubakyQTFzPMtIhFpUBRbsnc2Dv88IZDIbCDlBiWrknhB4Lsz7mg6BA==}
 
-  '@es-joy/jsdoccomment@0.50.2':
-    resolution: {integrity: sha512-YAdE/IJSpwbOTiaURNCKECdAwqrJuFiZhylmesBcIRawtYKnBR2wxPhoIewMg+Yu+QuYvHfJNReWpoxGBKOChA==}
-    engines: {node: '>=18'}
-
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -1367,15 +1241,6 @@ packages:
     resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/compat@1.2.9':
-    resolution: {integrity: sha512-gCdSY54n7k+driCadyMNv8JSPzYLeDVM/ikZRtvtROBpRdFSkS8W9A82MqsaY7lZuwL0wiapgD0NT1xT0hyJsA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^9.10.0
-    peerDependenciesMeta:
-      eslint:
-        optional: true
-
   '@eslint/config-array@0.20.0':
     resolution: {integrity: sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1384,10 +1249,6 @@ packages:
     resolution: {integrity: sha512-+GPzk8PlG0sPpzdU5ZvIRMPidzAnZDl/s9L+y13iodqvb8leL53bTannOrQ/Im7UkpsmFU5Ily5U60LWixnmLg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/core@0.13.0':
-    resolution: {integrity: sha512-yfkgDw1KR66rkT5A8ci4irzDysN7FRpq3ttJolR88OqQikAWqwA8j5VZyas+vjyBNFIJ7MfybJ9plMILI2UrCw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@eslint/core@0.14.0':
     resolution: {integrity: sha512-qIbV0/JZr7iSDjqAc60IqbLdsj9GDt16xQtWD+B78d/HAlvysGdZZ6rpJHGAc2T0FQx1X6thsSPdnoiGKdNtdg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1404,10 +1265,6 @@ packages:
     resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  '@eslint/js@9.27.0':
-    resolution: {integrity: sha512-G5JD9Tu5HJEu4z2Uo4aHY2sLV64B7CDMXxFzqzjl3NKd6RVzSXNoE80jk7Y0lJkTTkjiIhBAqmlYwjuBY3tvpA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@eslint/js@9.28.0':
     resolution: {integrity: sha512-fnqSjGWd/CoIp4EXIxWVK/sHA6DOHN4+8Ix2cX5ycOY7LG0UY8nHCU5pIp2eaE1Mc7Qd8kHspYNzYXT2ojPLzg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1416,17 +1273,10 @@ packages:
     resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/plugin-kit@0.2.8':
-    resolution: {integrity: sha512-ZAoA40rNMPwSm+AeHpCq8STiNAwzWLJuP8Xv4CHIc9wv/PSuExjMrmjfYNj682vW0OOiZ1HKxzvjQr9XZIisQA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@eslint/plugin-kit@0.3.1':
     resolution: {integrity: sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@fastify/busboy@3.1.1':
-    resolution: {integrity: sha512-5DGmA8FTdB2XbDeEwc/5ZXBl6UbBAyBOOLlPuBnZ/N1SwdH9Ii+cOX3tBROlDgcTXxjOYnLMVoKk9+FXAw0CJw==}
-
   '@floating-ui/core@1.7.1':
     resolution: {integrity: sha512-azI0DrjMMfIug/ExbBaeDVJXcY0a7EPvPjb2xAJPa4HeimBX+Z18HK8QQR3jb6356SnDDdxx+hinMLcJEDdOjw==}
 
@@ -1599,9 +1449,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@ioredis/commands@1.2.0':
-    resolution: {integrity: sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg==}
-
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -1642,23 +1489,12 @@ packages:
   '@jspm/core@2.1.0':
     resolution: {integrity: sha512-3sRl+pkyFY/kLmHl0cgHiFp2xEqErA8N3ECjMs7serSUBmoJ70lBa0PG5t0IM6WJgdZNyyI0R8YFfi5wM8+mzg==}
 
-  '@kwsites/file-exists@1.1.1':
-    resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==}
-
-  '@kwsites/promise-deferred@1.1.1':
-    resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==}
-
   '@manypkg/find-root@1.1.0':
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
 
   '@manypkg/get-packages@1.1.3':
     resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==}
 
-  '@mapbox/node-pre-gyp@2.0.0':
-    resolution: {integrity: sha512-llMXd39jtP0HpQLVI37Bf1m2ADlEb35GYSh1SDSLsBhR+5iCxiNGlT31yqbNtVHygHAtMy6dWFERpU2JgufhPg==}
-    engines: {node: '>=18'}
-    hasBin: true
-
   '@microsoft/tsdoc-config@0.16.2':
     resolution: {integrity: sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==}
 
@@ -1671,38 +1507,6 @@ packages:
   '@napi-rs/wasm-runtime@0.2.4':
     resolution: {integrity: sha512-9zESzOO5aDByvhIAsOy9TbpZ0Ur2AJbUI7UT73kcUTS2mxAMHOBaa1st/jAymNoCtvrit99kkzT1FZuXVcgfIQ==}
 
-  '@netlify/binary-info@1.0.0':
-    resolution: {integrity: sha512-4wMPu9iN3/HL97QblBsBay3E1etIciR84izI3U+4iALY+JHCrI+a2jO0qbAZ/nxKoegypYEaiiqWXylm+/zfrw==}
-
-  '@netlify/blobs@9.1.2':
-    resolution: {integrity: sha512-7dMjExSH4zj4ShvLem49mE3mf0K171Tx2pV4WDWhJbRUWW3SJIR2qntz0LvUGS97N5HO1SmnzrgWUhEXCsApiw==}
-    engines: {node: ^14.16.0 || >=16.0.0}
-
-  '@netlify/dev-utils@2.2.0':
-    resolution: {integrity: sha512-5XUvZuffe3KetyhbWwd4n2ktd7wraocCYw10tlM+/u/95iAz29GjNiuNxbCD1T6Bn1MyGc4QLVNKOWhzJkVFAw==}
-    engines: {node: ^14.16.0 || >=16.0.0}
-
-  '@netlify/functions@3.1.9':
-    resolution: {integrity: sha512-mbmQIylPzOTDicMFbJF839W3bywJVR0Fm77uvjS6AkDl000VlLwQb+4eO3p0BV7j8+l5IgN/3ltQ/Byi/esTEQ==}
-    engines: {node: '>=14.0.0'}
-
-  '@netlify/open-api@2.37.0':
-    resolution: {integrity: sha512-zXnRFkxgNsalSgU8/vwTWnav3R+8KG8SsqHxqaoJdjjJtnZR7wo3f+qqu4z+WtZ/4V7fly91HFUwZ6Uz2OdW7w==}
-    engines: {node: '>=14.8.0'}
-
-  '@netlify/runtime-utils@1.3.1':
-    resolution: {integrity: sha512-7/vIJlMYrPJPlEW84V2yeRuG3QBu66dmlv9neTmZ5nXzwylhBEOhy11ai+34A8mHCSZI4mKns25w3HM9kaDdJg==}
-    engines: {node: '>=16.0.0'}
-
-  '@netlify/serverless-functions-api@1.41.2':
-    resolution: {integrity: sha512-pfCkH50JV06SGMNsNPjn8t17hOcId4fA881HeYQgMBOrewjsw4csaYgHEnCxCEu24Y5x75E2ULbFpqm9CvRCqw==}
-    engines: {node: '>=18.0.0'}
-
-  '@netlify/zip-it-and-ship-it@12.1.0':
-    resolution: {integrity: sha512-+ND2fNnfeOZwnho79aMQ5rreFpI9tu/l4N9/F5H8t9rKYwVHHlv5Zi9o6g/gxZHDLfSbGC9th7Z46CihV8JaZw==}
-    engines: {node: '>=18.14.0'}
-    hasBin: true
-
   '@next/env@15.3.2':
     resolution: {integrity: sha512-xURk++7P7qR9JG1jJtLzPzf0qEvqCN0A/T3DXf8IPMKo9/6FfjxtEffRJIIew/bIL4T3C2jLLqBor8B/zVlx6g==}
 
@@ -1779,106 +1583,6 @@ packages:
     resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
     engines: {node: '>=12.4.0'}
 
-  '@nuxt/cli@3.25.1':
-    resolution: {integrity: sha512-7+Ut7IvAD4b5piikJFSgIqSPbHKFT5gq05JvCsEHRM0MPA5QR9QHkicklyMqSj0D/oEkDohen8qRgdxRie3oUA==}
-    engines: {node: ^16.10.0 || >=18.0.0}
-    hasBin: true
-
-  '@nuxt/devalue@2.0.2':
-    resolution: {integrity: sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==}
-
-  '@nuxt/devtools-kit@2.4.1':
-    resolution: {integrity: sha512-taA2Nm03JiV3I+SEYS/u1AfjvLm3V9PO8lh0xLsUk/2mlUnL6GZ9xLXrp8VRg11HHt7EPXERGQh8h4iSPU2bSQ==}
-    peerDependencies:
-      vite: '>=6.0'
-
-  '@nuxt/devtools-wizard@2.4.1':
-    resolution: {integrity: sha512-2BaryhfribzQ95UxR7vLLV17Pk1Otxg9ryqH71M1Yp0mybBFs6Z3b0v+RXfCb4BwA10s/tXBhfF13DHSSJF1+A==}
-    hasBin: true
-
-  '@nuxt/devtools@2.4.1':
-    resolution: {integrity: sha512-2gwjUF1J1Bp/V9ZTsYJe8sS9O3eg80gdf01fT8aEBcilR3wf0PSIxjEyYk+YENtrHPLXcnnUko89jHGq23MHPQ==}
-    hasBin: true
-    peerDependencies:
-      vite: '>=6.0'
-
-  '@nuxt/eslint-config@1.4.1':
-    resolution: {integrity: sha512-ubVHUZlOAJsSlnHWI3TO0b1w6sz7sS5wjQyslO98rgxjqbaI7yw6aIB3loQrjiSAS0jxzfzZTnXxC6ysPkXqvw==}
-    peerDependencies:
-      eslint: ^9.0.0
-      eslint-plugin-format: '*'
-    peerDependenciesMeta:
-      eslint-plugin-format:
-        optional: true
-
-  '@nuxt/eslint-plugin@1.4.1':
-    resolution: {integrity: sha512-1d/1GjQBlk7naGrq+ipvWj2CJkIMrM6BkIXIkRo+v1ohx8reQE7sU2SFnxN4HtQGZefSuwriudcUp4ABeXdYTQ==}
-    peerDependencies:
-      eslint: ^9.0.0
-
-  '@nuxt/kit@3.17.4':
-    resolution: {integrity: sha512-l+hY8sy2XFfg3PigZj+PTu6+KIJzmbACTRimn1ew/gtCz+F38f6KTF4sMRTN5CUxiB8TRENgEonASmkAWfpO9Q==}
-    engines: {node: '>=18.12.0'}
-
-  '@nuxt/module-builder@1.0.1':
-    resolution: {integrity: sha512-PmxiKKbwJ32EpASyrgX9XxD/8cZyRCZBx/A6/eSUb5PmqtEVM8QFIBZDN5+oDhAZKB1ayI+ukQNNu4kzbd292Q==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    hasBin: true
-    peerDependencies:
-      '@nuxt/cli': ^3.24.1
-      typescript: ^5.8.3
-
-  '@nuxt/schema@3.17.4':
-    resolution: {integrity: sha512-bsfJdWjKNYLkVQt7Ykr9YsAql1u8Tuo6iecSUOltTIhsvAIYsknRFPHoNKNmaiv/L6FgCQgUgQppPTPUAXiJQQ==}
-    engines: {node: ^14.18.0 || >=16.10.0}
-
-  '@nuxt/telemetry@2.6.6':
-    resolution: {integrity: sha512-Zh4HJLjzvm3Cq9w6sfzIFyH9ozK5ePYVfCUzzUQNiZojFsI2k1QkSBrVI9BGc6ArKXj/O6rkI6w7qQ+ouL8Cag==}
-    engines: {node: '>=18.12.0'}
-    hasBin: true
-
-  '@nuxt/test-utils@3.19.0':
-    resolution: {integrity: sha512-rhy01aH1Gioh1uCiiESpeI5m6ZCk4k+0FHwooV01NAGtIY2hJaFxgKf0s+6vjiSvHqoIDMzjaQ9g3SoccDJ4kA==}
-    engines: {node: ^18.20.5 || ^20.9.0 || ^22.0.0 || >=23.0.0}
-    peerDependencies:
-      '@cucumber/cucumber': ^10.3.1 || ^11.0.0
-      '@jest/globals': ^29.5.0
-      '@playwright/test': ^1.43.1
-      '@testing-library/vue': ^7.0.0 || ^8.0.1
-      '@vitest/ui': '*'
-      '@vue/test-utils': ^2.4.2
-      happy-dom: ^9.10.9 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
-      jsdom: ^22.0.0 || ^23.0.0 || ^24.0.0 || ^25.0.0 || ^26.0.0
-      playwright-core: ^1.43.1
-      vitest: ^0.34.6 || ^1.0.0 || ^2.0.0 || ^3.0.0
-    peerDependenciesMeta:
-      '@cucumber/cucumber':
-        optional: true
-      '@jest/globals':
-        optional: true
-      '@playwright/test':
-        optional: true
-      '@testing-library/vue':
-        optional: true
-      '@vitest/ui':
-        optional: true
-      '@vue/test-utils':
-        optional: true
-      happy-dom:
-        optional: true
-      jsdom:
-        optional: true
-      playwright-core:
-        optional: true
-      vitest:
-        optional: true
-
-  '@nuxt/vite-builder@3.17.4':
-    resolution: {integrity: sha512-MRcGe02nEDpu+MnRJcmgVfHdzgt9tWvxVdJbhfd6oyX19plw/CANjgHedlpUNUxqeWXC6CQfGvoVJXn3bQlEqA==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0.0}
-    peerDependencies:
-      vue: ^3.3.4
-
   '@nx/nx-darwin-arm64@20.8.1':
     resolution: {integrity: sha512-Gat4Io66cV70Oa1CjrMJPsEx5ICpAGayv9hejOtBUEDb6XjR12L2e4wV+4EHliF0UbEcuZAr8/lTROEPk0RGWQ==}
     engines: {node: '>= 10'}
@@ -1942,92 +1646,6 @@ packages:
   '@one-ini/wasm@0.1.1':
     resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
 
-  '@oxc-parser/binding-darwin-arm64@0.71.0':
-    resolution: {integrity: sha512-7R7TuHWL2hZ8BbRdxXlVJTE0os7TM6LL2EX2OkIz41B3421JeIU+2YH+IV55spIUy5E5ynesLk0IdpSSPVZ25Q==}
-    engines: {node: '>=14.0.0'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@oxc-parser/binding-darwin-x64@0.71.0':
-    resolution: {integrity: sha512-Q7QshRy7cDvpvWAH+qy2U8O9PKo5yEKFqPruD2OSOM8igy/GLIC21dAd6iCcqXRZxaqzN9c4DaXFtEZfq4NWsw==}
-    engines: {node: '>=14.0.0'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@oxc-parser/binding-freebsd-x64@0.71.0':
-    resolution: {integrity: sha512-z8NNBBseLriz2p+eJ8HWC+A8P+MsO8HCtXie9zaVlVcXSiUuBroRWeXopvHN4r+tLzmN2iLXlXprJdNhXNgobQ==}
-    engines: {node: '>=14.0.0'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.71.0':
-    resolution: {integrity: sha512-QZQcWMduFRWddqvjgLvsWoeellFjvWqvdI0O1m5hoMEykv2/Ag8d7IZbBwRwFqKBuK4UzpBNt4jZaYzRsv1irg==}
-    engines: {node: '>=14.0.0'}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-arm-musleabihf@0.71.0':
-    resolution: {integrity: sha512-lTDc2WCzllVFXugUHQGR904CksA5BiHc35mcH6nJm6h0FCdoyn9zefW8Pelku5ET39JgO1OENEm/AyNvf/FzIw==}
-    engines: {node: '>=14.0.0'}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-arm64-gnu@0.71.0':
-    resolution: {integrity: sha512-mAA6JGS+MB+gbN5y/KuQ095EHYGF7a/FaznM7klk5CaCap/UdiRWCVinVV6xXmejOPZMnrkr6R5Kqi6dHRsm2g==}
-    engines: {node: '>=14.0.0'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-arm64-musl@0.71.0':
-    resolution: {integrity: sha512-PaPmIEM0yldXSrO1Icrx6/DwnMXpEOv0bDVa0LFtwy2I+aiTiX7OVRB3pJCg8FEV9P+L48s9XW0Oaz+Dz3o3sQ==}
-    engines: {node: '>=14.0.0'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-riscv64-gnu@0.71.0':
-    resolution: {integrity: sha512-+AEGO6gOSSEqWTrCCYayNMMPe/qi83o1czQ5bytEFQtyvWdgLwliqqShpJtgSLj1SNWi94HiA/VOfqqZnGE1AQ==}
-    engines: {node: '>=14.0.0'}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-s390x-gnu@0.71.0':
-    resolution: {integrity: sha512-zqFnheBACFzrRl401ylXufNl1YsOdVa8jwS2iSCwJFx4/JdQhE6Y4YWoEjQ/pzeRZXwI5FX4C607rQe2YdhggQ==}
-    engines: {node: '>=14.0.0'}
-    cpu: [s390x]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-x64-gnu@0.71.0':
-    resolution: {integrity: sha512-steSQTwv3W+/hpES4/9E3vNohou1FXJLNWLDbYHDaBI9gZdYJp6zwALC8EShCz0NoQvCu4THD3IBsTBHvFBNyw==}
-    engines: {node: '>=14.0.0'}
-    cpu: [x64]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-x64-musl@0.71.0':
-    resolution: {integrity: sha512-mV8j/haQBZRU2QnwZe0UIpnhpPBL9dFk1tgNVSH9tV7cV4xUZPn7pFDqMriAmpD7GLfmxbZMInDkujokd63M7Q==}
-    engines: {node: '>=14.0.0'}
-    cpu: [x64]
-    os: [linux]
-
-  '@oxc-parser/binding-wasm32-wasi@0.71.0':
-    resolution: {integrity: sha512-P8ScINpuihkkBX8BrN/4x4ka2+izncHh7/hHxxuPZDZTVMyNNnL1uSoI80tN9yN7NUtUKoi9aQUaF4h22RQcIA==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-
-  '@oxc-parser/binding-win32-arm64-msvc@0.71.0':
-    resolution: {integrity: sha512-4jrJSdBXHmLYaghi1jvbuJmWu117wxqCpzHHgpEV9xFiRSngtClqZkNqyvcD4907e/VriEwluZ3PO3Mlp0y9cw==}
-    engines: {node: '>=14.0.0'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@oxc-parser/binding-win32-x64-msvc@0.71.0':
-    resolution: {integrity: sha512-zF7xF19DOoANym/xwVClYH1tiW3S70W8ZDrMHdrEB7gZiTYLCIKIRMrpLVKaRia6LwEo7X0eduwdBa5QFawxOw==}
-    engines: {node: '>=14.0.0'}
-    cpu: [x64]
-    os: [win32]
-
-  '@oxc-project/types@0.71.0':
-    resolution: {integrity: sha512-5CwQ4MI+P4MQbjLWXgNurA+igGwu/opNetIE13LBs9+V93R64MLvDKOOLZIXSzEfovU3Zef3q3GjPnMTgJTn2w==}
-
   '@parcel/watcher-android-arm64@2.5.1':
     resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
     engines: {node: '>= 10.0.0'}
@@ -2088,12 +1706,6 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@parcel/watcher-wasm@2.5.1':
-    resolution: {integrity: sha512-RJxlQQLkaMMIuWRozy+z2vEqbaQlCuaCgVZIUCzQLYggY22LZbP5Y1+ia+FD724Ids9e+XIyOLXLrLgQSHIthw==}
-    engines: {node: '>= 10.0.0'}
-    bundledDependencies:
-      - napi-wasm
-
   '@parcel/watcher-win32-arm64@2.5.1':
     resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
     engines: {node: '>= 10.0.0'}
@@ -2127,17 +1739,6 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
-  '@poppinss/colors@4.1.4':
-    resolution: {integrity: sha512-FA+nTU8p6OcSH4tLDY5JilGYr1bVWHpNmcLr7xmMEdbWmKHa+3QZ+DqefrXKmdjO/brHTnQZo20lLSjaO7ydog==}
-    engines: {node: '>=18.16.0'}
-
-  '@poppinss/dumper@0.6.3':
-    resolution: {integrity: sha512-iombbn8ckOixMtuV1p3f8jN6vqhXefNjJttoPaJDMeIk/yIGhkkL3OrHkEjE9SRsgoAx1vBUU2GtgggjvA5hCA==}
-
-  '@poppinss/exception@1.2.1':
-    resolution: {integrity: sha512-aQypoot0HPSJa6gDPEPTntc1GT6QINrSbgRlRhadGW2WaYqUK3tK4Bw9SBMZXhmxd3GeAlZjVcODHgiu+THY7A==}
-    engines: {node: '>=18'}
-
   '@radix-ui/react-compose-refs@1.1.2':
     resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
     peerDependencies:
@@ -2189,15 +1790,6 @@ packages:
   '@rolldown/pluginutils@1.0.0-beta.9':
     resolution: {integrity: sha512-e9MeMtVWo186sgvFFJOPGy7/d2j2mZhLJIdVW0C/xDluuOvymEATqz6zKsP0ZmXGzQtqlyjz5sC1sYQUoJG98w==}
 
-  '@rollup/plugin-alias@5.1.1':
-    resolution: {integrity: sha512-PR9zDb+rOzkRb2VD+EuKB7UC41vU5DIwZ5qqCpk0KJudcWAyi8rvYOhS7+L5aZCspw1stTViLgN5v6FF1p5cgQ==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
   '@rollup/plugin-commonjs@25.0.8':
     resolution: {integrity: sha512-ZEZWTK5n6Qde0to4vS9Mr5x/0UZoqCxPVR9KRUjU4kA2sO7GEUn1fop0DAwpO6z0Nw/kJON9bDmSxdWxO/TT1A==}
     engines: {node: '>=14.0.0'}
@@ -2207,15 +1799,6 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/plugin-commonjs@28.0.3':
-    resolution: {integrity: sha512-pyltgilam1QPdn+Zd9gaCfOLcnjMEJ9gV+bTw6/r73INdvzf1ah9zLIJBm+kW7R6IUFIQ1YO+VqZtYxZNWFPEQ==}
-    engines: {node: '>=16.0.0 || 14 >= 14.17'}
-    peerDependencies:
-      rollup: ^2.68.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
   '@rollup/plugin-image@3.0.3':
     resolution: {integrity: sha512-qXWQwsXpvD4trSb8PeFPFajp8JLpRtqqOeNYRUKnEQNHm7e5UP7fuSRcbjQAJ7wDZBbnJvSdY5ujNBQd9B1iFg==}
     engines: {node: '>=14.0.0'}
@@ -2234,15 +1817,6 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/plugin-json@6.1.0':
-    resolution: {integrity: sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
   '@rollup/plugin-node-resolve@15.3.1':
     resolution: {integrity: sha512-tgg6b91pAybXHJQMAAwW9VuWBO6Thi+q7BCNARLwSqlmsHz0XYURtGvh/AuwSADXSI4h/2uHbs7s4FzlZDGSGA==}
     engines: {node: '>=14.0.0'}
@@ -2252,33 +1826,6 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/plugin-node-resolve@16.0.1':
-    resolution: {integrity: sha512-tk5YCxJWIG81umIvNkSod2qK5KyQW19qcBF/B78n1bjtOON6gzKoVeSzAE8yHCZEDmqkHKkxplExA8KzdJLJpA==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^2.78.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
-  '@rollup/plugin-replace@6.0.2':
-    resolution: {integrity: sha512-7QaYCf8bqF04dOy7w/eHmJeNExxTYwvKAmlSAH/EaWWUzbT0h5sbF6bktFoX/0F/0qwng5/dWFMyf3gzaM8DsQ==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
-  '@rollup/plugin-terser@0.4.4':
-    resolution: {integrity: sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
   '@rollup/plugin-typescript@11.1.6':
     resolution: {integrity: sha512-R92yOmIACgYdJ7dJ97p4K69I8gg6IEHt8M7dUBxN3W6nrO8uUxX5ixl0yU/N3aZTi8WhPuICvOHXQvF6FaykAA==}
     engines: {node: '>=14.0.0'}
@@ -2438,23 +1985,6 @@ packages:
   '@sinclair/typebox@0.27.8':
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
 
-  '@sindresorhus/is@7.0.1':
-    resolution: {integrity: sha512-QWLl2P+rsCJeofkDNIT3WFmb6NrRud1SUYW8dIhXK/46XFV8Q/g7Bsvib0Askb0reRLe+WYPeeE+l5cH7SlkuQ==}
-    engines: {node: '>=18'}
-
-  '@sindresorhus/merge-streams@2.3.0':
-    resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
-    engines: {node: '>=18'}
-
-  '@speed-highlight/core@1.2.7':
-    resolution: {integrity: sha512-0dxmVj4gxg3Jg879kvFS/msl4s9F3T9UXC1InxgOf7t5NvcPD97u/WTA5vL/IxWHMn7qSxBozqrnnE2wvl1m8g==}
-
-  '@stylistic/eslint-plugin@4.4.0':
-    resolution: {integrity: sha512-bIh/d9X+OQLCAMdhHtps+frvyjvAM4B1YlSJzcEEhl7wXLIqPar3ngn9DrHhkBOrTA/z9J0bUMtctAspe0dxdQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: '>=9.0.0'
-
   '@swc/counter@0.1.3':
     resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
 
@@ -2632,10 +2162,6 @@ packages:
   '@types/parse-json@4.0.2':
     resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
 
-  '@types/parse-path@7.1.0':
-    resolution: {integrity: sha512-EULJ8LApcVEPbrfND0cRQqutIOdiIgJ1Mgrhpy755r14xMohPTEpkV/k28SJvuOs9bHRFW8x+KeDAEPiGQPB9Q==}
-    deprecated: This is a stub types definition. parse-path provides its own type definitions, so you do not need this installed.
-
   '@types/prop-types@15.7.15':
     resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
 
@@ -2656,18 +2182,12 @@ packages:
   '@types/semver@7.7.0':
     resolution: {integrity: sha512-k107IF4+Xr7UHjwDc7Cfd6PRQfbdkiRabXGRjo07b4WyPahFBZCZ1sE+BNxYIJPPg73UkfOsVOLwqVc/6ETrIA==}
 
-  '@types/triple-beam@1.3.5':
-    resolution: {integrity: sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==}
-
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
   '@types/web-bluetooth@0.0.21':
     resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
 
-  '@types/yauzl@2.10.3':
-    resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
-
   '@typescript-eslint/eslint-plugin@5.62.0':
     resolution: {integrity: sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2690,14 +2210,6 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/eslint-plugin@8.32.1':
-    resolution: {integrity: sha512-6u6Plg9nP/J1GRpe/vcjjabo6Uc5YQPAMxsgQyGC/I0RuukiG1wIe3+Vtg3IrSCVJDmqK3j8adrtzXSENRtFgg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
-
   '@typescript-eslint/eslint-plugin@8.33.1':
     resolution: {integrity: sha512-TDCXj+YxLgtvxvFlAvpoRv9MAncDLBV2oT9Bd7YBGC/b/sEURoOYuIwLI99rjWOfY3QtDzO+mk0n4AmdFExW8A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2732,15 +2244,8 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/parser@8.32.1':
-    resolution: {integrity: sha512-LKMrmwCPoLhM45Z00O1ulb6jwyVr2kr3XJp+G+tSEZcbauNnScewcQwtJqXDhXeYPDEjZ8C1SjXm015CirEmGg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
-
-  '@typescript-eslint/parser@8.33.1':
-    resolution: {integrity: sha512-qwxv6dq682yVvgKKp2qWwLgRbscDAYktPptK4JPojCwwi3R9cwrvIxS4lvBpzmcqzR4bdn54Z0IG1uHFskW4dA==}
+  '@typescript-eslint/parser@8.33.1':
+    resolution: {integrity: sha512-qwxv6dq682yVvgKKp2qWwLgRbscDAYktPptK4JPojCwwi3R9cwrvIxS4lvBpzmcqzR4bdn54Z0IG1uHFskW4dA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -2760,10 +2265,6 @@ packages:
     resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
     engines: {node: ^16.0.0 || >=18.0.0}
 
-  '@typescript-eslint/scope-manager@8.32.1':
-    resolution: {integrity: sha512-7IsIaIDeZn7kffk7qXC3o6Z4UblZJKV3UBpkvRNpr5NSyLji7tvTcvmnMNYuYLyh26mN8W723xpo3i4MlD33vA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/scope-manager@8.33.1':
     resolution: {integrity: sha512-dM4UBtgmzHR9bS0Rv09JST0RcHYearoEoo3pG5B6GoTR9XcyeqX87FEhPo+5kTvVfKCvfHaHrcgeJQc6mrDKrA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2794,13 +2295,6 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/type-utils@8.32.1':
-    resolution: {integrity: sha512-mv9YpQGA8iIsl5KyUPi+FGLm7+bA4fgXaeRcFKRDRwDMu4iwrSHeDPipwueNXhdIIZltwCJv+NkxftECbIZWfA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
-
   '@typescript-eslint/type-utils@8.33.1':
     resolution: {integrity: sha512-1cG37d9xOkhlykom55WVwG2QRNC7YXlxMaMzqw2uPeJixBFfKWZgaP/hjAObqMN/u3fr5BrTwTnc31/L9jQ2ww==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2816,10 +2310,6 @@ packages:
     resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
     engines: {node: ^16.0.0 || >=18.0.0}
 
-  '@typescript-eslint/types@8.32.1':
-    resolution: {integrity: sha512-YmybwXUJcgGqgAp6bEsgpPXEg6dcCyPyCSr0CAAueacR/CCBi25G3V8gGQ2kRzQRBNol7VQknxMs9HvVa9Rvfg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/types@8.33.1':
     resolution: {integrity: sha512-xid1WfizGhy/TKMTwhtVOgalHwPtV8T32MS9MaH50Cwvz6x6YqRIPdD2WvW0XaqOzTV9p5xdLY0h/ZusU5Lokg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2842,12 +2332,6 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/typescript-estree@8.32.1':
-    resolution: {integrity: sha512-Y3AP9EIfYwBb4kWGb+simvPaqQoT5oJuzzj9m0i6FCY6SPvlomY2Ei4UEMm7+FXtlNJbor80ximyslzaQF6xhg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <5.9.0'
-
   '@typescript-eslint/typescript-estree@8.33.1':
     resolution: {integrity: sha512-+s9LYcT8LWjdYWu7IWs7FvUxpQ/DGkdjZeE/GGulHvv8rvYwQvVaUZ6DE+j5x/prADUgSbbCWZ2nPI3usuVeOA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2866,13 +2350,6 @@ packages:
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
 
-  '@typescript-eslint/utils@8.32.1':
-    resolution: {integrity: sha512-DsSFNIgLSrc89gpq1LJB7Hm1YpuhK086DRDJSNrewcGvYloWW1vZLHBTIvarKZDcAORIy/uWNx8Gad+4oMpkSA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
-
   '@typescript-eslint/utils@8.33.1':
     resolution: {integrity: sha512-52HaBiEQUaRYqAXpfzWSR2U3gxk92Kw006+xZpElaPMg3C4PgM+A5LqwoQI1f9E5aZ/qlxAZxzm42WX+vn92SQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2888,10 +2365,6 @@ packages:
     resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
     engines: {node: ^16.0.0 || >=18.0.0}
 
-  '@typescript-eslint/visitor-keys@8.32.1':
-    resolution: {integrity: sha512-ar0tjQfObzhSaW3C3QNmTc5ofj0hDoNQ5XWrCy6zDyabdr0TWhCkClp+rywGNj/odAFBVzzJrK4tEq5M4Hmu4w==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/visitor-keys@8.33.1':
     resolution: {integrity: sha512-3i8NrFcZeeDHJ+7ZUuDkGT+UHq+XoFGsymNK2jZCOHcfEzRQ0BdpRtdpSx/Iyf3MHLWIcLS0COuOPibKQboIiQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2899,11 +2372,6 @@ packages:
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
-  '@unhead/vue@2.0.10':
-    resolution: {integrity: sha512-lV7E1sXX6/te8+IiUwlMysBAyJT/WM5Je47cRnpU5hsvDRziSIGfim9qMWbsTouH+paavRJz1i8gk5hRzjvkcw==}
-    peerDependencies:
-      vue: '>=3.5.13'
-
   '@unrs/resolver-binding-darwin-arm64@1.7.2':
     resolution: {integrity: sha512-vxtBno4xvowwNmO/ASL0Y45TpHqmNkAaDtz4Jqb+clmcVSSl8XCG/PNFFkGsXXXS6AMjP+ja/TtNCFFa1QwLRg==}
     cpu: [arm64]
@@ -2989,11 +2457,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@vercel/nft@0.29.3':
-    resolution: {integrity: sha512-aVV0E6vJpuvImiMwU1/5QKkw2N96BRFE7mBYGS7FhXUoS6V7SarQ+8tuj33o7ofECz8JtHpmQ9JW+oVzOoB7MA==}
-    engines: {node: '>=18'}
-    hasBin: true
-
   '@vitejs/plugin-basic-ssl@2.0.0':
     resolution: {integrity: sha512-gc9Tjg8bUxBVSTzeWT3Njc0Cl3PakHFKdNfABnZWiUgbxqmHDEn7uECv3fHVylxoYgNzAcmU7ZrILz+BwSo3sA==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
@@ -3006,13 +2469,6 @@ packages:
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0 || ^6.0.0
 
-  '@vitejs/plugin-vue-jsx@4.2.0':
-    resolution: {integrity: sha512-DSTrmrdLp+0LDNF77fqrKfx7X0ErRbOcUAgJL/HbSesqQwoUvUQ4uYQqaex+rovqgGcoPqVk+AwUh3v9CuiYIw==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    peerDependencies:
-      vite: ^5.0.0 || ^6.0.0
-      vue: ^3.0.0
-
   '@vitejs/plugin-vue@5.2.4':
     resolution: {integrity: sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -3087,31 +2543,6 @@ packages:
   '@volar/typescript@2.4.14':
     resolution: {integrity: sha512-p8Z6f/bZM3/HyCdRNFZOEEzts51uV8WHeN8Tnfnm2EBv6FDB2TQLzfVx7aJvnl8ofKAOnS64B2O8bImBFaauRw==}
 
-  '@vue-macros/common@1.16.1':
-    resolution: {integrity: sha512-Pn/AWMTjoMYuquepLZP813BIcq8DTZiNCoaceuNlvaYuOTd8DqBZWc5u0uOMQZMInwME1mdSmmBAcTluiV9Jtg==}
-    engines: {node: '>=16.14.0'}
-    peerDependencies:
-      vue: ^2.7.0 || ^3.2.25
-    peerDependenciesMeta:
-      vue:
-        optional: true
-
-  '@vue/babel-helper-vue-transform-on@1.4.0':
-    resolution: {integrity: sha512-mCokbouEQ/ocRce/FpKCRItGo+013tHg7tixg3DUNS+6bmIchPt66012kBMm476vyEIJPafrvOf4E5OYj3shSw==}
-
-  '@vue/babel-plugin-jsx@1.4.0':
-    resolution: {integrity: sha512-9zAHmwgMWlaN6qRKdrg1uKsBKHvnUU+Py+MOCTuYZBoZsopa90Di10QRjB+YPnVss0BZbG/H5XFwJY1fTxJWhA==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-
-  '@vue/babel-plugin-resolve-type@1.4.0':
-    resolution: {integrity: sha512-4xqDRRbQQEWHQyjlYSgZsWj44KfiF6D+ktCuXyZ8EnVDYV3pztmXJDf1HveAjUAXxAnR8daCQT51RneWWxtTyQ==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
   '@vue/compiler-core@3.5.14':
     resolution: {integrity: sha512-k7qMHMbKvoCXIxPhquKQVw3Twid3Kg4s7+oYURxLGRd56LiuHJVrvFKI4fm2AM3c8apqODPfVJGoh8nePbXMRA==}
 
@@ -3127,17 +2558,9 @@ packages:
   '@vue/compiler-vue2@2.7.16':
     resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
 
-  '@vue/devtools-api@6.6.4':
-    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
-
   '@vue/devtools-api@7.7.6':
     resolution: {integrity: sha512-b2Xx0KvXZObePpXPYHvBRRJLDQn5nhKjXh7vUhMEtWxz1AYNFOVIsh5+HLP8xDGL7sy+Q7hXeUxPHB/KgbtsPw==}
 
-  '@vue/devtools-core@7.7.6':
-    resolution: {integrity: sha512-ghVX3zjKPtSHu94Xs03giRIeIWlb9M+gvDRVpIZ/cRIxKHdW6HE/sm1PT3rUYS3aV92CazirT93ne+7IOvGUWg==}
-    peerDependencies:
-      vue: ^3.0.0
-
   '@vue/devtools-kit@7.7.6':
     resolution: {integrity: sha512-geu7ds7tem2Y7Wz+WgbnbZ6T5eadOvozHZ23Atk/8tksHMFOFylKi1xgGlQlVn0wlkEf4hu+vd5ctj1G4kFtwA==}
 
@@ -3239,26 +2662,6 @@ packages:
   '@vueuse/shared@12.8.2':
     resolution: {integrity: sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==}
 
-  '@whatwg-node/disposablestack@0.0.6':
-    resolution: {integrity: sha512-LOtTn+JgJvX8WfBVJtF08TGrdjuFzGJc4mkP8EdDI8ADbvO7kiexYep1o8dwnt0okb0jYclCDXF13xU7Ge4zSw==}
-    engines: {node: '>=18.0.0'}
-
-  '@whatwg-node/fetch@0.10.8':
-    resolution: {integrity: sha512-Rw9z3ctmeEj8QIB9MavkNJqekiu9usBCSMZa+uuAvM0lF3v70oQVCXNppMIqaV6OTZbdaHF1M2HLow58DEw+wg==}
-    engines: {node: '>=18.0.0'}
-
-  '@whatwg-node/node-fetch@0.7.21':
-    resolution: {integrity: sha512-QC16IdsEyIW7kZd77aodrMO7zAoDyyqRCTLg+qG4wqtP4JV9AA+p7/lgqMdD29XyiYdVvIdFrfI9yh7B1QvRvw==}
-    engines: {node: '>=18.0.0'}
-
-  '@whatwg-node/promise-helpers@1.3.2':
-    resolution: {integrity: sha512-Nst5JdK47VIl9UcGwtv2Rcgyn5lWtZ0/mhRQ4G8NN2isxpq2TO30iqHzmwoJycjWuyUfg3GFXqP/gFHXeV57IA==}
-    engines: {node: '>=16.0.0'}
-
-  '@whatwg-node/server@0.9.71':
-    resolution: {integrity: sha512-ueFCcIPaMgtuYDS9u0qlUoEvj6GiSsKrwnOLPp9SshqjtcRaR1IEHRjoReq3sXNydsF5i0ZnmuYgXq9dV53t0g==}
-    engines: {node: '>=18.0.0'}
-
   '@wso2/eslint-plugin@https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391':
     resolution: {tarball: https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391}
     version: 0.1.0
@@ -3307,23 +2710,10 @@ packages:
     resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  abbrev@3.0.1:
-    resolution: {integrity: sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-
-  abort-controller@3.0.0:
-    resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
-    engines: {node: '>=6.5'}
-
   accepts@2.0.0:
     resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
     engines: {node: '>= 0.6'}
 
-  acorn-import-attributes@1.9.5:
-    resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
-    peerDependencies:
-      acorn: ^8
-
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -3375,26 +2765,6 @@ packages:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
 
-  ansis@3.17.0:
-    resolution: {integrity: sha512-0qWUglt9JEqLFr3w1I1pbrChn1grhaiAR2ocX1PP/flRmxgtwTzPFFFnfIlD6aMOLQZgSuCRlidD70lvx8yhzg==}
-    engines: {node: '>=14'}
-
-  anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
-    engines: {node: '>= 8'}
-
-  archiver-utils@5.0.2:
-    resolution: {integrity: sha512-wuLJMmIBQYCsGZgYLTy5FIB2pF6Lfb6cXMSF8Qywwk3t20zWnAi7zLcQFdKQmIB8wyZpY5ER38x08GbwtR2cLA==}
-    engines: {node: '>= 14'}
-
-  archiver@7.0.1:
-    resolution: {integrity: sha512-ZcbTaIqJOfCc03QwD468Unz/5Ir8ATtvAHsK+FdXbDIbGfihqh9mrvdcYunQzqn4HrvWWaFyaxJhGZagaJJpPQ==}
-    engines: {node: '>= 14'}
-
-  are-docs-informative@0.0.2:
-    resolution: {integrity: sha512-ixiS0nLNNG5jNQzgZJNoUpBKdo9yTYZMGJ+QgT2jmjR7G7+QHRCc4v6LQ3NgE7EBJq+o0ams3waJwkrlBom8Ig==}
-    engines: {node: '>=14'}
-
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
@@ -3455,21 +2825,9 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
-  ast-kit@1.4.3:
-    resolution: {integrity: sha512-MdJqjpodkS5J149zN0Po+HPshkTdUyrvF7CKTafUgv69vBSPtncrj+3IiUgqdd7ElIEkbeXCsEouBUwLrw9Ilg==}
-    engines: {node: '>=16.14.0'}
-
-  ast-module-types@6.0.1:
-    resolution: {integrity: sha512-WHw67kLXYbZuHTmcdbIrVArCq5wxo6NEuj3hiYAWr8mwJeC+C2mMCIBIWCiDoCye/OF/xelc+teJ1ERoWmnEIA==}
-    engines: {node: '>=18'}
-
   ast-types-flow@0.0.8:
     resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
 
-  ast-walker-scope@0.6.2:
-    resolution: {integrity: sha512-1UWOyC50xI3QZkRuDj6PqDtpm1oHWtYs+NQGwqL/2R11eN3Q81PHAHPM0SWW3BNQm53UDwS//Jv8L4CCVLM1bQ==}
-    engines: {node: '>=16.14.0'}
-
   astral-regex@2.0.0:
     resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
     engines: {node: '>=8'}
@@ -3478,12 +2836,6 @@ packages:
     resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
     engines: {node: '>= 0.4'}
 
-  async-sema@3.1.1:
-    resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
-
-  async@3.2.6:
-    resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
-
   asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
@@ -3515,18 +2867,12 @@ packages:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
     engines: {node: '>= 0.4'}
 
-  b4a@1.6.7:
-    resolution: {integrity: sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==}
-
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
   balanced-match@2.0.0:
     resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
 
-  bare-events@2.5.4:
-    resolution: {integrity: sha512-+gFfDkR8pj4/TrWCGUGWmJIkBwuxPS5F+a5yWjOHQt2hHvNZd5YLzadjmDUtFmMM4y429bnKLa8bYBMHcYdnQA==}
-
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
@@ -3538,9 +2884,6 @@ packages:
     resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==}
     engines: {node: '>=4'}
 
-  bindings@1.5.0:
-    resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
-
   birpc@2.3.0:
     resolution: {integrity: sha512-ijbtkn/F3Pvzb6jHypHRyve2QApOCZDR25D/VnkY2G/lBNcXCTsnsCxgY4k4PkVB7zfwzYbY3O9Lcqe3xufS5g==}
 
@@ -3595,13 +2938,6 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
-  buffer-crc32@0.2.13:
-    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
-
-  buffer-crc32@1.0.0:
-    resolution: {integrity: sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==}
-    engines: {node: '>=8.0.0'}
-
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
@@ -3614,18 +2950,6 @@ packages:
   buffer@6.0.3:
     resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
 
-  builtin-modules@3.3.0:
-    resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
-    engines: {node: '>=6'}
-
-  builtin-modules@5.0.0:
-    resolution: {integrity: sha512-bkXY9WsVpY7CvMhKSR6pZilZu9Ln5WDrKVBUXf2S443etkmEO4V58heTecXcUIsNsi4Rx8JUO4NfX1IcQl4deg==}
-    engines: {node: '>=18.20'}
-
-  bundle-name@4.1.0:
-    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
-    engines: {node: '>=18'}
-
   busboy@1.6.0:
     resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
     engines: {node: '>=10.16.0'}
@@ -3634,14 +2958,6 @@ packages:
     resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
     engines: {node: '>= 0.8'}
 
-  c12@3.0.4:
-    resolution: {integrity: sha512-t5FaZTYbbCtvxuZq9xxIruYydrAGsJ+8UdP0pZzMiK2xl/gNiSOy0OxhLzHUEEb0m1QXYqfzfvyIFEmz/g9lqg==}
-    peerDependencies:
-      magicast: ^0.3.5
-    peerDependenciesMeta:
-      magicast:
-        optional: true
-
   cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -3658,9 +2974,6 @@ packages:
     resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
     engines: {node: '>= 0.4'}
 
-  callsite@1.0.0:
-    resolution: {integrity: sha512-0vdNRFXn5q+dtOqjfFtmtlI9N2eVZ7LMyEV2iKC5mEEFvSg/69Ml6b/WU2qF8W1nLRa0wiSrDT3Y5jOHZCwKPQ==}
-
   callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
@@ -3690,10 +3003,6 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
-  changelogen@0.6.1:
-    resolution: {integrity: sha512-rTw2bZgiEHMgyYzWFMH+qTMFOSpCf4qwmd8LyxLDUKCtL4T/7O7978tPPtKYpjiFbPoHG64y4ugdF0Mt/l+lQg==}
-    hasBin: true
-
   character-entities-html4@2.1.0:
     resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
 
@@ -3719,24 +3028,13 @@ packages:
     resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
     engines: {node: '>=8'}
 
-  ci-info@4.2.0:
-    resolution: {integrity: sha512-cYY9mypksY8NRqgDB1XD1RiJL338v/551niynFTGkZOO2LHuB2OmOYxDIe/ttN9AHwrqdum1360G3ald0W9kCg==}
-    engines: {node: '>=8'}
-
   cipher-base@1.0.6:
     resolution: {integrity: sha512-3Ek9H3X6pj5TgenXYtNWdaBon1tgYCaebd+XPg0keyjEbEfkD4KkmAxkQ/i1vYvxdcT5nscLBfq9VJRmCBcFSw==}
     engines: {node: '>= 0.10'}
 
-  citty@0.1.6:
-    resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
-
   class-variance-authority@0.7.1:
     resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
-  clean-regexp@1.0.0:
-    resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
-    engines: {node: '>=4'}
-
   cli-cursor@3.1.0:
     resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
     engines: {node: '>=8'}
@@ -3748,10 +3046,6 @@ packages:
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
-  clipboardy@4.0.0:
-    resolution: {integrity: sha512-5mOlNS0mhX0707P2I0aZ2V/cmHUEO/fL7VFLqszkhUsxt7RwnmrInf/eEQKlf5GzvYeHIjT+Ov1HRfNmymlG0w==}
-    engines: {node: '>=18'}
-
   cliui@8.0.1:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
@@ -3764,29 +3058,16 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
-  cluster-key-slot@1.1.2:
-    resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
-    engines: {node: '>=0.10.0'}
-
-  color-convert@1.9.3:
-    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
-
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
 
-  color-name@1.1.3:
-    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
-
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
   color-string@1.9.1:
     resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
 
-  color@3.2.1:
-    resolution: {integrity: sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==}
-
   color@4.2.3:
     resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
     engines: {node: '>=12.5.0'}
@@ -3794,9 +3075,6 @@ packages:
   colord@2.9.3:
     resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
 
-  colorspace@1.1.4:
-    resolution: {integrity: sha512-BgvKJiuVu1igBUF2kEjRCZXol6wiiGbY5ipL/oVPwm0BL9sIpMIzM8IK7vwuxIIzOXMV3Ey5w+vxhm0rR/TN8w==}
-
   combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
@@ -3808,10 +3086,6 @@ packages:
     resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
     engines: {node: '>=14'}
 
-  commander@12.1.0:
-    resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
-    engines: {node: '>=18'}
-
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -3823,19 +3097,9 @@ packages:
     resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
     engines: {node: '>= 12.0.0'}
 
-  common-path-prefix@3.0.0:
-    resolution: {integrity: sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==}
-
   commondir@1.0.1:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
 
-  compatx@0.2.0:
-    resolution: {integrity: sha512-6gLRNt4ygsi5NyMVhceOCFv14CIdDFN7fQjX1U4+47qVE/+kjPoXMK65KWK+dWxmFzMTuKazoQ9sch6pM0p5oA==}
-
-  compress-commons@6.0.2:
-    resolution: {integrity: sha512-6FqVXeETqWPoGcfzrXb37E50NP0LXT8kAMu5ooZayhWWdgEY4lBEEcbQNXtkuKQsGduxiIcI4gOTsxTmuq/bSg==}
-    engines: {node: '>= 14'}
-
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -3851,10 +3115,6 @@ packages:
   confusing-browser-globals@1.0.11:
     resolution: {integrity: sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==}
 
-  consola@3.4.2:
-    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
-    engines: {node: ^14.18.0 || >=16.10.0}
-
   content-disposition@1.0.0:
     resolution: {integrity: sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg==}
     engines: {node: '>= 0.6'}
@@ -3863,18 +3123,9 @@ packages:
     resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
     engines: {node: '>= 0.6'}
 
-  convert-gitmoji@0.1.5:
-    resolution: {integrity: sha512-4wqOafJdk2tqZC++cjcbGcaJ13BZ3kwldf06PTiAQRAB76Z1KJwZNL1SaRZMi2w1FM9RYTgZ6QErS8NUl/GBmQ==}
-
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
-  cookie-es@1.2.2:
-    resolution: {integrity: sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg==}
-
-  cookie-es@2.0.0:
-    resolution: {integrity: sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg==}
-
   cookie-signature@1.2.2:
     resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
     engines: {node: '>=6.6.0'}
@@ -3883,21 +3134,10 @@ packages:
     resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
     engines: {node: '>= 0.6'}
 
-  cookie@1.0.2:
-    resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
-    engines: {node: '>=18'}
-
   copy-anything@3.0.5:
     resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
     engines: {node: '>=12.13'}
 
-  copy-file@11.0.0:
-    resolution: {integrity: sha512-mFsNh/DIANLqFt5VHZoGirdg7bK5+oTWlhnGu6tgRhzBlnEKWaPX2xrFaLltii/6rmhqFMJqffUgknuRdpYlHw==}
-    engines: {node: '>=18'}
-
-  core-js-compat@3.42.0:
-    resolution: {integrity: sha512-bQasjMfyDGyaeWKBIu33lHh9qlSR0MFE/Nmc6nMjf/iU9b3rSMdAYz1Baxrv4lPdGUsTqZudHA4jIGSJy0SWZQ==}
-
   core-js@3.42.0:
     resolution: {integrity: sha512-Sz4PP4ZA+Rq4II21qkNqOEDTDrCvcANId3xpIgB34NDkWc3UduWj2dqEtN9yZIq8Dk3HyPI33x9sqqU5C8sr0g==}
 
@@ -3917,15 +3157,6 @@ packages:
       typescript:
         optional: true
 
-  crc-32@1.2.2:
-    resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
-    engines: {node: '>=0.8'}
-    hasBin: true
-
-  crc32-stream@6.0.0:
-    resolution: {integrity: sha512-piICUB6ei4IlTv1+653yq5+KoqfBYmj9bw6LqXoOneTMDXk5nM1qt12mFW1caG3LlJXEKW1Bp0WggEmIfQB34g==}
-    engines: {node: '>= 14'}
-
   create-ecdh@4.0.4:
     resolution: {integrity: sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==}
 
@@ -3935,14 +3166,6 @@ packages:
   create-hmac@1.1.7:
     resolution: {integrity: sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==}
 
-  cron-parser@4.9.0:
-    resolution: {integrity: sha512-p0SaNjrHOnQeR8/VnfGbmg9te2kfyYSQ7Sc/j/6DtPL3JQvKxmjO9TSjNFpujqV3vEYYBvNNvXSxzyksBWAx1Q==}
-    engines: {node: '>=12.0.0'}
-
-  croner@9.0.0:
-    resolution: {integrity: sha512-onMB0OkDjkXunhdW9htFjEhqrD54+M94i6ackoUkjHKbRnXdyEyKRelp4nJ1kAz32+s27jP1FsebpJCVl0BsvA==}
-    engines: {node: '>=18.0'}
-
   cross-fetch@4.1.0:
     resolution: {integrity: sha512-uKm5PU+MHTootlWEY+mZ4vvXoCn4fLQxT9dSc1sXVMSFkINTJVN8cAQROpwcKm8bJ/c7rgZVIBWzH5T78sNZZw==}
 
@@ -3950,9 +3173,6 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
-  crossws@0.3.5:
-    resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==}
-
   crypto-browserify@3.12.1:
     resolution: {integrity: sha512-r4ESw/IlusD17lgQi1O20Fa3qNnsckR126TdUuBgAu7GBYSIPvdNyONd3Zrxh0xCwA4+6w/TDArBPsMvhur+KQ==}
     engines: {node: '>= 0.10'}
@@ -3963,12 +3183,6 @@ packages:
     peerDependencies:
       postcss: ^8.0.9
 
-  css-declaration-sorter@7.2.0:
-    resolution: {integrity: sha512-h70rUM+3PNFuaBDTLe8wF/cdWu+dOZmb7pJt8Z2sedYbAcQVQV/tEchueg3GWxwqS0cxtbxmaHEdkNACqcvsow==}
-    engines: {node: ^14 || ^16 || >=18}
-    peerDependencies:
-      postcss: ^8.0.9
-
   css-functions-list@3.2.3:
     resolution: {integrity: sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==}
     engines: {node: '>=12 || >=16'}
@@ -3976,17 +3190,10 @@ packages:
   css-select@4.3.0:
     resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
 
-  css-select@5.1.0:
-    resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
-
   css-tree@1.1.3:
     resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
     engines: {node: '>=8.0.0'}
 
-  css-tree@2.2.1:
-    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
-
   css-tree@2.3.1:
     resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
@@ -4006,44 +3213,22 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
 
-  cssnano-preset-default@7.0.7:
-    resolution: {integrity: sha512-jW6CG/7PNB6MufOrlovs1TvBTEVmhY45yz+bd0h6nw3h6d+1e+/TX+0fflZ+LzvZombbT5f+KC063w9VoHeHow==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   cssnano-utils@3.1.0:
     resolution: {integrity: sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  cssnano-utils@5.0.1:
-    resolution: {integrity: sha512-ZIP71eQgG9JwjVZsTPSqhc6GHgEr53uJ7tK5///VfyWj6Xp2DBmixWHqJgPno+PqATzn48pL42ww9x5SSGmhZg==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   cssnano@5.1.15:
     resolution: {integrity: sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  cssnano@7.0.7:
-    resolution: {integrity: sha512-evKu7yiDIF7oS+EIpwFlMF730ijRyLFaM2o5cTxRGJR9OKHKkc+qP443ZEVR9kZG0syaAJJCPJyfv5pbrxlSng==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   csso@4.2.0:
     resolution: {integrity: sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==}
     engines: {node: '>=8.0.0'}
 
-  csso@5.0.5:
-    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
-
   cssstyle@4.3.1:
     resolution: {integrity: sha512-ZgW+Jgdd7i52AaLYCriF8Mxqft0gD/R9i9wi6RWBhs1pqdPEzPjym7rvRKi397WmQFf3SlyUsszhw+VVCbx79Q==}
     engines: {node: '>=18'}
@@ -4054,10 +3239,6 @@ packages:
   damerau-levenshtein@1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
 
-  data-uri-to-buffer@4.0.1:
-    resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
-    engines: {node: '>= 12'}
-
   data-urls@5.0.0:
     resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
     engines: {node: '>=18'}
@@ -4077,29 +3258,6 @@ packages:
   dataloader@1.4.0:
     resolution: {integrity: sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==}
 
-  db0@0.3.2:
-    resolution: {integrity: sha512-xzWNQ6jk/+NtdfLyXEipbX55dmDSeteLFt/ayF+wZUU5bzKgmrDOxmInUTbyVRp46YwnJdkDA1KhB7WIXFofJw==}
-    peerDependencies:
-      '@electric-sql/pglite': '*'
-      '@libsql/client': '*'
-      better-sqlite3: '*'
-      drizzle-orm: '*'
-      mysql2: '*'
-      sqlite3: '*'
-    peerDependenciesMeta:
-      '@electric-sql/pglite':
-        optional: true
-      '@libsql/client':
-        optional: true
-      better-sqlite3:
-        optional: true
-      drizzle-orm:
-        optional: true
-      mysql2:
-        optional: true
-      sqlite3:
-        optional: true
-
   de-indent@1.0.2:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
 
@@ -4120,9 +3278,6 @@ packages:
       supports-color:
         optional: true
 
-  decache@4.6.2:
-    resolution: {integrity: sha512-2LPqkLeu8XWHU8qNCS3kcF6sCcb5zIzvWaAHYSvPfwhdd7mHuah29NssMzrTYyHN4F5oFy2ko9OBYxegtU0FEw==}
-
   decamelize-keys@1.1.1:
     resolution: {integrity: sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==}
     engines: {node: '>=0.10.0'}
@@ -4149,14 +3304,6 @@ packages:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
-  default-browser-id@5.0.0:
-    resolution: {integrity: sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==}
-    engines: {node: '>=18'}
-
-  default-browser@5.2.1:
-    resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==}
-    engines: {node: '>=18'}
-
   defaults@1.0.4:
     resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
 
@@ -4168,25 +3315,14 @@ packages:
     resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
     engines: {node: '>=8'}
 
-  define-lazy-prop@3.0.0:
-    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
-    engines: {node: '>=12'}
-
   define-properties@1.2.1:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
-  defu@6.1.4:
-    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
-
   delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
 
-  denque@2.1.0:
-    resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
-    engines: {node: '>=0.10'}
-
   depd@2.0.0:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
@@ -4198,9 +3334,6 @@ packages:
   des.js@1.1.0:
     resolution: {integrity: sha512-r17GxjhUCjSRy8aiJpr8/UadFIzMzJGexI3Nmz4ADi9LYSFx4gTBp80+NaX/YsXWWLhpZ7v/v/ubEc/bCNfKwg==}
 
-  destr@2.0.5:
-    resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
-
   detect-indent@6.1.0:
     resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
     engines: {node: '>=8'}
@@ -4214,52 +3347,6 @@ packages:
     resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
     engines: {node: '>=8'}
 
-  detective-amd@6.0.1:
-    resolution: {integrity: sha512-TtyZ3OhwUoEEIhTFoc1C9IyJIud3y+xYkSRjmvCt65+ycQuc3VcBrPRTMWoO/AnuCyOB8T5gky+xf7Igxtjd3g==}
-    engines: {node: '>=18'}
-    hasBin: true
-
-  detective-cjs@6.0.1:
-    resolution: {integrity: sha512-tLTQsWvd2WMcmn/60T2inEJNhJoi7a//PQ7DwRKEj1yEeiQs4mrONgsUtEJKnZmrGWBBmE0kJ1vqOG/NAxwaJw==}
-    engines: {node: '>=18'}
-
-  detective-es6@5.0.1:
-    resolution: {integrity: sha512-XusTPuewnSUdoxRSx8OOI6xIA/uld/wMQwYsouvFN2LAg7HgP06NF1lHRV3x6BZxyL2Kkoih4ewcq8hcbGtwew==}
-    engines: {node: '>=18'}
-
-  detective-postcss@7.0.1:
-    resolution: {integrity: sha512-bEOVpHU9picRZux5XnwGsmCN4+8oZo7vSW0O0/Enq/TO5R2pIAP2279NsszpJR7ocnQt4WXU0+nnh/0JuK4KHQ==}
-    engines: {node: ^14.0.0 || >=16.0.0}
-    peerDependencies:
-      postcss: ^8.4.47
-
-  detective-sass@6.0.1:
-    resolution: {integrity: sha512-jSGPO8QDy7K7pztUmGC6aiHkexBQT4GIH+mBAL9ZyBmnUIOFbkfZnO8wPRRJFP/QP83irObgsZHCoDHZ173tRw==}
-    engines: {node: '>=18'}
-
-  detective-scss@5.0.1:
-    resolution: {integrity: sha512-MAyPYRgS6DCiS6n6AoSBJXLGVOydsr9huwXORUlJ37K3YLyiN0vYHpzs3AdJOgHobBfispokoqrEon9rbmKacg==}
-    engines: {node: '>=18'}
-
-  detective-stylus@5.0.1:
-    resolution: {integrity: sha512-Dgn0bUqdGbE3oZJ+WCKf8Dmu7VWLcmRJGc6RCzBgG31DLIyai9WAoEhYRgIHpt/BCRMrnXLbGWGPQuBUrnF0TA==}
-    engines: {node: '>=18'}
-
-  detective-typescript@14.0.0:
-    resolution: {integrity: sha512-pgN43/80MmWVSEi5LUuiVvO/0a9ss5V7fwVfrJ4QzAQRd3cwqU1SfWGXJFcNKUqoD5cS+uIovhw5t/0rSeC5Mw==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      typescript: ^5.4.4
-
-  detective-vue2@2.2.0:
-    resolution: {integrity: sha512-sVg/t6O2z1zna8a/UIV6xL5KUa2cMTQbdTIIvqNM0NIPswp52fe43Nwmbahzj3ww4D844u/vC2PYfiGLvD3zFA==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      typescript: ^5.4.4
-
-  devalue@5.1.1:
-    resolution: {integrity: sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==}
-
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
@@ -4267,10 +3354,6 @@ packages:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  diff@7.0.0:
-    resolution: {integrity: sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==}
-    engines: {node: '>=0.3.1'}
-
   diffie-hellman@5.0.3:
     resolution: {integrity: sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==}
 
@@ -4292,9 +3375,6 @@ packages:
   dom-serializer@1.4.1:
     resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
 
-  dom-serializer@2.0.0:
-    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
-
   dom-walk@0.1.2:
     resolution: {integrity: sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==}
 
@@ -4305,20 +3385,9 @@ packages:
     resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
     engines: {node: '>= 4'}
 
-  domhandler@5.0.3:
-    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
-    engines: {node: '>= 4'}
-
   domutils@2.8.0:
     resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
 
-  domutils@3.2.2:
-    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
-
-  dot-prop@9.0.0:
-    resolution: {integrity: sha512-1gxPBJpI/pcjQhKgIU91II6Wkay+dLcN3M6rf2uwP8hRur3HtQXjVrdAK3sjC0piaEuxzMwjXChcETiJl47lAQ==}
-    engines: {node: '>=18'}
-
   dotenv-expand@11.0.7:
     resolution: {integrity: sha512-zIHwmZPRshsCdpMDyVsqGmgyP0yT8GAgXUnkdAoJisxvf33k7yO6OuoKmcTGuXPWSsm8Oh88nZicRLA9Y0rUeA==}
     engines: {node: '>=12'}
@@ -4327,10 +3396,6 @@ packages:
     resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==}
     engines: {node: '>=12'}
 
-  dotenv@16.5.0:
-    resolution: {integrity: sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==}
-    engines: {node: '>=12'}
-
   dotenv@8.6.0:
     resolution: {integrity: sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==}
     engines: {node: '>=10'}
@@ -4339,9 +3404,6 @@ packages:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
-  duplexer@0.1.2:
-    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
-
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
@@ -4368,9 +3430,6 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
-  enabled@2.0.0:
-    resolution: {integrity: sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ==}
-
   encodeurl@2.0.0:
     resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
     engines: {node: '>= 0.8'}
@@ -4401,19 +3460,9 @@ packages:
     resolution: {integrity: sha512-aKstq2TDOndCn4diEyp9Uq/Flu2i1GlLkc6XIDQSDMuaFE3OPW5OphLCyQ5SpSJZTb4reN+kTcYru5yIfXoRPw==}
     engines: {node: '>=0.12'}
 
-  env-paths@3.0.0:
-    resolution: {integrity: sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
 
-  error-stack-parser-es@1.0.5:
-    resolution: {integrity: sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==}
-
-  errx@0.1.0:
-    resolution: {integrity: sha512-fZmsRiDNv07K6s2KkKFTiD2aIvECa7++PKyD5NC32tpRw46qZA3sOz+aM+/V9V0GDHxVTKLziveV4JhzBHDp9Q==}
-
   es-abstract@1.23.9:
     resolution: {integrity: sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==}
     engines: {node: '>= 0.4'}
@@ -4491,15 +3540,6 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  escape-string-regexp@5.0.0:
-    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
-    engines: {node: '>=12'}
-
-  escodegen@2.1.0:
-    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
-    engines: {node: '>=6.0'}
-    hasBin: true
-
   eslint-config-airbnb-base@15.0.0:
     resolution: {integrity: sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -4525,11 +3565,6 @@ packages:
       eslint-plugin-react: ^7.28.0
       eslint-plugin-react-hooks: ^4.3.0
 
-  eslint-config-flat-gitignore@2.1.0:
-    resolution: {integrity: sha512-cJzNJ7L+psWp5mXM7jBX+fjHtBvvh06RBlcweMhKD8jWqQw0G78hOW5tpVALGHGFPsBV+ot2H+pdDGJy6CV8pA==}
-    peerDependencies:
-      eslint: ^9.5.0
-
   eslint-config-next@15.3.2:
     resolution: {integrity: sha512-FerU4DYccO4FgeYFFglz0SnaKRe1ejXQrDb8kWUkTAg036YWi+jUsgg4sIGNCDhAsDITsZaL4MzBWKB6f4G1Dg==}
     peerDependencies:
@@ -4545,9 +3580,6 @@ packages:
     peerDependencies:
       eslint: '>=7.0.0'
 
-  eslint-flat-config-utils@2.1.0:
-    resolution: {integrity: sha512-6fjOJ9tS0k28ketkUcQ+kKptB4dBZY2VijMZ9rGn8Cwnn1SH0cZBoPXT8AHBFHxmHcLFQK9zbELDinZ2Mr1rng==}
-
   eslint-import-resolver-node@0.3.9:
     resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
 
@@ -4564,11 +3596,6 @@ packages:
       eslint-plugin-import-x:
         optional: true
 
-  eslint-merge-processors@2.0.0:
-    resolution: {integrity: sha512-sUuhSf3IrJdGooquEUB5TNpGNpBoQccbnaLHsb1XkBLUPPqCNivCpY05ZcpCOiV9uHwO2yxXEWVczVclzMxYlA==}
-    peerDependencies:
-      eslint: '*'
-
   eslint-module-utils@2.12.0:
     resolution: {integrity: sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==}
     engines: {node: '>=4'}
@@ -4636,12 +3663,6 @@ packages:
       jest:
         optional: true
 
-  eslint-plugin-jsdoc@50.6.17:
-    resolution: {integrity: sha512-hq+VQylhd12l8qjexyriDsejZhqiP33WgMTy2AmaGZ9+MrMWVqPECsM87GPxgHfQn0zw+YTuhqjUfk1f+q67aQ==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
-
   eslint-plugin-jsx-a11y@6.10.2:
     resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==}
     engines: {node: '>=4.0'}
@@ -4702,12 +3723,6 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
 
-  eslint-plugin-regexp@2.7.0:
-    resolution: {integrity: sha512-U8oZI77SBtH8U3ulZ05iu0qEzIizyEDXd+BWHvyVxTOjGwcDcvy/kEpgFG4DYca2ByRLiVPFZ2GeH7j1pdvZTA==}
-    engines: {node: ^18 || >=20}
-    peerDependencies:
-      eslint: '>=8.44.0'
-
   eslint-plugin-testing-library@5.11.1:
     resolution: {integrity: sha512-5eX9e1Kc2PqVRed3taaLnAAqPZGEX75C+M/rXzUAI3wIg/ZxzUm1OVAwfe/O+vE+6YXOLetSe9g5GKD2ecXipw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0, npm: '>=6'}
@@ -4725,12 +3740,6 @@ packages:
       eslint: ^5 || ^6 || ^7 || ^8
       typescript: ^3 || ^4 || ^5
 
-  eslint-plugin-unicorn@59.0.1:
-    resolution: {integrity: sha512-EtNXYuWPUmkgSU2E7Ttn57LbRREQesIP1BiLn7OZLKodopKfDXfBUkC/0j6mpw2JExwf43Uf3qLSvrSvppgy8Q==}
-    engines: {node: ^18.20.0 || ^20.10.0 || >=21.0.0}
-    peerDependencies:
-      eslint: '>=9.22.0'
-
   eslint-plugin-vue@10.1.0:
     resolution: {integrity: sha512-/VTiJ1eSfNLw6lvG9ENySbGmcVvz6wZ9nA7ZqXlLBY2RkaF15iViYKxglWiIch12KiLAj0j1iXPYU6W4wTROFA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -4738,12 +3747,6 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       vue-eslint-parser: ^10.0.0
 
-  eslint-processor-vue-blocks@2.0.0:
-    resolution: {integrity: sha512-u4W0CJwGoWY3bjXAuFpc/b6eK3NQEI8MoeW7ritKj3G3z/WtHrKjkqf+wk8mPEy5rlMGS+k6AZYOw2XBoN/02Q==}
-    peerDependencies:
-      '@vue/compiler-sfc': ^3.3.0
-      eslint: '>=9.0.0'
-
   eslint-scope@5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
@@ -4841,24 +3844,12 @@ packages:
     resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
     engines: {node: '>= 0.6'}
 
-  event-target-shim@5.0.1:
-    resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
-    engines: {node: '>=6'}
-
   eventemitter3@4.0.7:
     resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
 
-  events@3.3.0:
-    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
-    engines: {node: '>=0.8.x'}
-
   evp_bytestokey@1.0.3:
     resolution: {integrity: sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==}
 
-  execa@8.0.1:
-    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
-    engines: {node: '>=16.17'}
-
   expect-type@1.2.1:
     resolution: {integrity: sha512-/kP8CAwxzLVEeFrMm4kMmy4CCDlpipyA7MYLVrdJIkV0fYF0UaigQHRsxHiuY/GEea+bh4KSv3TIlgr+2UL6bw==}
     engines: {node: '>=12.0.0'}
@@ -4877,27 +3868,12 @@ packages:
     resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
     engines: {node: '>=4'}
 
-  externality@1.0.2:
-    resolution: {integrity: sha512-LyExtJWKxtgVzmgtEHyQtLFpw1KFhQphF9nTG8TpAIVkiI/xQ3FJh75tRFLYl4hkn7BNIIdLJInuDAavX35pMw==}
-
-  extract-zip@2.0.1:
-    resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
-    engines: {node: '>= 10.17.0'}
-    hasBin: true
-
-  fake-indexeddb@6.0.1:
-    resolution: {integrity: sha512-He2AjQGHe46svIFq5+L2Nx/eHDTI1oKgoevBP+TthnjymXiKkeJQ3+ITeWey99Y5+2OaPFbI1qEsx/5RsGtWnQ==}
-    engines: {node: '>=18'}
-
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
   fast-diff@1.3.0:
     resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
 
-  fast-fifo@1.3.2:
-    resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
-
   fast-glob@3.3.1:
     resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
     engines: {node: '>=8.6.0'}
@@ -4912,9 +3888,6 @@ packages:
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
-  fast-npm-meta@0.4.3:
-    resolution: {integrity: sha512-eUzR/uVx61fqlHBjG/eQx5mQs7SQObehMTTdq8FAkdCB4KuZSQ6DiZMIrAq4kcibB3WFLQ9c4dT26Vwkix1RKg==}
-
   fast-sha256@1.3.0:
     resolution: {integrity: sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ==}
 
@@ -4928,9 +3901,6 @@ packages:
   fastq@1.19.1:
     resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
 
-  fd-slicer@1.1.0:
-    resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
-
   fdir@6.4.4:
     resolution: {integrity: sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==}
     peerDependencies:
@@ -4939,13 +3909,6 @@ packages:
       picomatch:
         optional: true
 
-  fecha@4.2.3:
-    resolution: {integrity: sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==}
-
-  fetch-blob@3.2.0:
-    resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
-    engines: {node: ^12.20 || >= 14.13}
-
   figures@3.2.0:
     resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
     engines: {node: '>=8'}
@@ -4958,9 +3921,6 @@ packages:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
 
-  file-uri-to-path@1.0.0:
-    resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
-
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
@@ -4969,18 +3929,10 @@ packages:
     resolution: {integrity: sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==}
     engines: {node: '>=0.10.0'}
 
-  filter-obj@6.1.0:
-    resolution: {integrity: sha512-xdMtCAODmPloU9qtmPcdBV9Kd27NtMse+4ayThxqIHUES5Z2S6bGpap5PpdmNM56ub7y3i1eyr+vJJIIgWGKmA==}
-    engines: {node: '>=18'}
-
   finalhandler@2.1.0:
     resolution: {integrity: sha512-/t88Ty3d5JWQbWYgaOGCCYfXRwV1+be02WqYYlL6h0lEiUAMPM8o8qKGO01YIkOHzka2up08wvgYD0mDiI+q3Q==}
     engines: {node: '>= 0.8'}
 
-  find-up-simple@1.0.1:
-    resolution: {integrity: sha512-afd4O7zpqHeRyg4PfDQsXmlDe2PfdHtJt6Akt8jOWaApLOZk5JXs6VMR29lz03pRe9mpykrRCYIYxaJYcfpncQ==}
-    engines: {node: '>=18'}
-
   find-up@4.1.0:
     resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
     engines: {node: '>=8'}
@@ -4989,13 +3941,6 @@ packages:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
 
-  find-up@7.0.0:
-    resolution: {integrity: sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g==}
-    engines: {node: '>=18'}
-
-  fix-dts-default-cjs-exports@1.0.1:
-    resolution: {integrity: sha512-pVIECanWFC61Hzl2+oOCtoJ3F17kglZC/6N94eRWycFgBH35hHx0Li604ZIzhseh97mf2p0cv7vVrOZGoqhlEg==}
-
   flat-cache@3.2.0:
     resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -5011,9 +3956,6 @@ packages:
   flatted@3.3.3:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
-  fn.name@1.1.0:
-    resolution: {integrity: sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==}
-
   focus-trap@7.6.4:
     resolution: {integrity: sha512-xx560wGBk7seZ6y933idtjJQc1l+ck+pI3sKvhKozdBV1dRZoKhkW5xoCaFv9tQiX5RH1xfSxjuNu6g+lmN/gw==}
 
@@ -5038,10 +3980,6 @@ packages:
     resolution: {integrity: sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==}
     engines: {node: '>= 6'}
 
-  formdata-polyfill@4.0.10:
-    resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
-    engines: {node: '>=12.20.0'}
-
   forwarded@0.2.0:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
@@ -5102,10 +4040,6 @@ packages:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
 
-  get-amd-module-type@6.0.1:
-    resolution: {integrity: sha512-MtjsmYiCXcYDDrGqtNbeIYdAl85n+5mSv2r3FbzER/YV3ZILw4HNNIw34HuV5pyl0jzs6GFYU1VHVEefhgcNHQ==}
-    engines: {node: '>=18'}
-
   get-caller-file@2.0.5:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -5114,9 +4048,6 @@ packages:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
-  get-port-please@3.1.2:
-    resolution: {integrity: sha512-Gxc29eLs1fbn6LQ4jSU4vXjlwyZhF5HsGuMAa7gqBP4Rw4yxxltyDUuF5MBclFzDTXO+ACchGQoeela4DSfzdQ==}
-
   get-proto@1.0.1:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
@@ -5125,14 +4056,6 @@ packages:
     resolution: {integrity: sha512-mNznaBdYcpz7UAdnOtDGcLdNwAa79mXl5htEyyZ51YaeAWNf2g4x/2yCVBdNNTbi35wX0Stc2PJXM7G6rcONOA==}
     engines: {node: 18 || >=20}
 
-  get-stream@5.2.0:
-    resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
-    engines: {node: '>=8'}
-
-  get-stream@8.0.1:
-    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
-    engines: {node: '>=16'}
-
   get-symbol-description@1.1.0:
     resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
     engines: {node: '>= 0.4'}
@@ -5140,16 +4063,6 @@ packages:
   get-tsconfig@4.10.1:
     resolution: {integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==}
 
-  giget@2.0.0:
-    resolution: {integrity: sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==}
-    hasBin: true
-
-  git-up@8.1.1:
-    resolution: {integrity: sha512-FDenSF3fVqBYSaJoYy1KSc2wosx0gCvKP+c+PRBht7cAaiCeQlBtfBDX9vgnNOHmdePlSFITVcn4pFfcgNvx3g==}
-
-  git-url-parse@16.1.0:
-    resolution: {integrity: sha512-cPLz4HuK86wClEW7iDdeAKcCVlWXmrLpb2L+G9goW0Z1dtpNS6BXXSOckUTlJT/LDQViE1QZKstNORzHsLnobw==}
-
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -5180,10 +4093,6 @@ packages:
     engines: {node: '>=12'}
     deprecated: Glob versions prior to v9 are no longer supported
 
-  global-directory@4.0.1:
-    resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
-    engines: {node: '>=18'}
-
   global-modules@2.0.0:
     resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==}
     engines: {node: '>=6'}
@@ -5219,18 +4128,9 @@ packages:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
 
-  globby@14.1.0:
-    resolution: {integrity: sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==}
-    engines: {node: '>=18'}
-
   globjoin@0.1.4:
     resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
 
-  gonzales-pe@4.3.0:
-    resolution: {integrity: sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ==}
-    engines: {node: '>=0.6.0'}
-    hasBin: true
-
   gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
@@ -5241,13 +4141,6 @@ packages:
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
-  gzip-size@7.0.0:
-    resolution: {integrity: sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
-  h3@1.15.3:
-    resolution: {integrity: sha512-z6GknHqyX0h9aQaTx22VZDf6QyZn+0Nh+Ym8O/u0SGSkyF5cuTJYKlc8MkzW3Nzf9LE1ivcpmYC3FUGpywhuUQ==}
-
   hard-rejection@2.1.0:
     resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==}
     engines: {node: '>=6'}
@@ -5309,10 +4202,6 @@ packages:
     resolution: {integrity: sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==}
     engines: {node: '>=10'}
 
-  hosted-git-info@7.0.2:
-    resolution: {integrity: sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
   html-encoding-sniffer@4.0.0:
     resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
     engines: {node: '>=18'}
@@ -5335,25 +4224,14 @@ packages:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
 
-  http-shutdown@1.2.2:
-    resolution: {integrity: sha512-S9wWkJ/VSY9/k4qcjG318bqJNruzE4HySUhFYknwmu6LBP97KLLfwNf+n4V1BHurvFNkSKLFnK/RsuUnRTf9Vw==}
-    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
-
   https-proxy-agent@7.0.6:
     resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
 
-  httpxy@0.1.7:
-    resolution: {integrity: sha512-pXNx8gnANKAndgga5ahefxc++tJvNL87CXoRwxn1cJE2ZkWEojF3tNfQIEhZX/vfpt+wzeAzpUI4qkediX1MLQ==}
-
   human-id@4.1.1:
     resolution: {integrity: sha512-3gKm/gCSUipeLsRYZbbdA1BD83lBoWUkZ7G9VFrhWPAU76KwYo5KR8V28bpoPm/ygy0x5/GCbpRQdY7VLYCoIg==}
     hasBin: true
 
-  human-signals@5.0.0:
-    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
-    engines: {node: '>=16.17.0'}
-
   iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -5379,9 +4257,6 @@ packages:
     resolution: {integrity: sha512-gJzzk+PQNznz8ysRrC0aOkBNVRBDtE1n53IqyqEf3PXrYwomFs5q4pGMizBMJF+ykh03insJ27hB8gSrD2Hn8A==}
     engines: {node: '>= 4'}
 
-  image-meta@0.2.1:
-    resolution: {integrity: sha512-K6acvFaelNxx8wc2VjbIzXKDVB0Khs0QT35U6NkGfTdCmjLNcO2945m7RFNR9/RPVFm48hq7QPzK8uGH18HCGw==}
-
   immutable@5.1.2:
     resolution: {integrity: sha512-qHKXW1q6liAk1Oys6umoaZbDRqjcjgSrbnrifHsfsttza7zcvRAsL7mMV6xWcyhwQy7Xj5v4hhbr6b+iDYwlmQ==}
 
@@ -5396,9 +4271,6 @@ packages:
   import-meta-resolve@3.1.1:
     resolution: {integrity: sha512-qeywsE/KC3w9Fd2ORrRDUw6nS/nLwZpXgfrOc2IILvZYnCaEMd+D56Vfg9k4G29gIeVi3XKql1RQatME8iYsiw==}
 
-  impound@1.0.0:
-    resolution: {integrity: sha512-8lAJ+1Arw2sMaZ9HE2ZmL5zOcMnt18s6+7Xqgq2aUVy4P1nlzAyPtzCDxsk51KVFwHEEdc6OWvUyqwHwhRYaug==}
-
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
@@ -5407,14 +4279,6 @@ packages:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
 
-  indent-string@5.0.0:
-    resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
-    engines: {node: '>=12'}
-
-  index-to-position@1.1.0:
-    resolution: {integrity: sha512-XPdx9Dq4t9Qk1mTMbWONJqU7boCoumEH7fRET37HX5+khDUl3J2W6PdALxhILYlIYx2amlwYcRPp28p0tSiojg==}
-    engines: {node: '>=18'}
-
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
@@ -5425,25 +4289,14 @@ packages:
   ini@1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
 
-  ini@4.1.1:
-    resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-
   internal-slot@1.1.0:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
 
-  ioredis@5.6.1:
-    resolution: {integrity: sha512-UxC0Yv1Y4WRJiGQxQkP0hfdL0/5/6YvdfOOClRgJ0qppSarkhneSa6UvkMkms0AkdGimSH3Ikqm+6mkMmX7vGA==}
-    engines: {node: '>=12.22.0'}
-
   ipaddr.js@1.9.1:
     resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
     engines: {node: '>= 0.10'}
 
-  iron-webcrypto@1.2.1:
-    resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
-
   is-array-buffer@3.0.5:
     resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
     engines: {node: '>= 0.4'}
@@ -5466,14 +4319,6 @@ packages:
     resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
     engines: {node: '>= 0.4'}
 
-  is-builtin-module@3.2.1:
-    resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
-    engines: {node: '>=6'}
-
-  is-builtin-module@5.0.0:
-    resolution: {integrity: sha512-f4RqJKBUe5rQkJ2eJEJBXSticB3hGbN9j0yxxMQFqIW89Jp9WYFtzfTcRlstDKVUTRzSOTLKRfO9vIztenwtxA==}
-    engines: {node: '>=18.20'}
-
   is-bun-module@2.0.0:
     resolution: {integrity: sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==}
 
@@ -5498,11 +4343,6 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
-  is-docker@3.0.0:
-    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    hasBin: true
-
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -5523,15 +4363,6 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
-  is-inside-container@1.0.0:
-    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
-    engines: {node: '>=14.16'}
-    hasBin: true
-
-  is-installed-globally@1.0.0:
-    resolution: {integrity: sha512-K55T22lfpQ63N4KEN57jZUAaAYqYHEe8veb/TycJRk9DdSCLLcovXz/mL6mOnhQaZsQGwPhuFopdQIlqGSEjiQ==}
-    engines: {node: '>=18'}
-
   is-interactive@1.0.0:
     resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
     engines: {node: '>=8'}
@@ -5555,18 +4386,10 @@ packages:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
     engines: {node: '>=8'}
 
-  is-path-inside@4.0.0:
-    resolution: {integrity: sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==}
-    engines: {node: '>=12'}
-
   is-plain-obj@1.1.0:
     resolution: {integrity: sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==}
     engines: {node: '>=0.10.0'}
 
-  is-plain-obj@2.1.0:
-    resolution: {integrity: sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==}
-    engines: {node: '>=8'}
-
   is-plain-object@5.0.0:
     resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
     engines: {node: '>=0.10.0'}
@@ -5592,21 +4415,6 @@ packages:
     resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
     engines: {node: '>= 0.4'}
 
-  is-ssh@1.4.1:
-    resolution: {integrity: sha512-JNeu1wQsHjyHgn9NcWTaXq6zWSR6hqE0++zhfZlkFBbScNkyvxCdeV8sRkSBaeLKxmbpR21brail63ACNxJ0Tg==}
-
-  is-stream@2.0.1:
-    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
-    engines: {node: '>=8'}
-
-  is-stream@3.0.0:
-    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
-  is-stream@4.0.1:
-    resolution: {integrity: sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==}
-    engines: {node: '>=18'}
-
   is-string@1.1.1:
     resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
     engines: {node: '>= 0.4'}
@@ -5627,13 +4435,6 @@ packages:
     resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
     engines: {node: '>=10'}
 
-  is-url-superb@4.0.0:
-    resolution: {integrity: sha512-GI+WjezhPPcbM+tqE9LnmsY5qqjwHzTvjJ36wxYX5ujNXefSUJ/T17r5bqDV8yLhcgB59KTPNOc9O9cmHTPWsA==}
-    engines: {node: '>=10'}
-
-  is-url@1.2.4:
-    resolution: {integrity: sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==}
-
   is-weakmap@2.0.2:
     resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
     engines: {node: '>= 0.4'}
@@ -5658,14 +4459,6 @@ packages:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
 
-  is-wsl@3.1.0:
-    resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
-    engines: {node: '>=16'}
-
-  is64bit@2.0.0:
-    resolution: {integrity: sha512-jv+8jaWCl0g2lSBkNSVXdzfBA0npK1HGC2KtWM9FumFRoGS94g3NbCCLVnCYHLjp4GrW2KZeeSTMo5ddtznmGw==}
-    engines: {node: '>=18'}
-
   isarray@1.0.0:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
 
@@ -5675,10 +4468,6 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
-  isexe@3.1.1:
-    resolution: {integrity: sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==}
-    engines: {node: '>=16'}
-
   istanbul-lib-coverage@3.2.2:
     resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
     engines: {node: '>=8'}
@@ -5714,10 +4503,6 @@ packages:
     resolution: {integrity: sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jiti@1.21.7:
-    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
-    hasBin: true
-
   jiti@2.4.2:
     resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
@@ -5746,9 +4531,6 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  js-tokens@9.0.1:
-    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
-
   js-yaml@3.14.1:
     resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
     hasBin: true
@@ -5757,10 +4539,6 @@ packages:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
 
-  jsdoc-type-pratt-parser@4.1.0:
-    resolution: {integrity: sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==}
-    engines: {node: '>=12.0.0'}
-
   jsdom@26.1.0:
     resolution: {integrity: sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==}
     engines: {node: '>=18'}
@@ -5770,11 +4548,6 @@ packages:
       canvas:
         optional: true
 
-  jsesc@3.0.2:
-    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
-    engines: {node: '>=6'}
-    hasBin: true
-
   jsesc@3.1.0:
     resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
     engines: {node: '>=6'}
@@ -5820,10 +4593,6 @@ packages:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
 
-  junk@4.0.1:
-    resolution: {integrity: sha512-Qush0uP+G8ZScpGMZvHUiRfI0YBWuB3gVBYlI0v0vvOJt5FLicco+IkP0a50LqTTQhmts/m6tP5SWE+USyIvcQ==}
-    engines: {node: '>=12.20'}
-
   jwt-decode@4.0.0:
     resolution: {integrity: sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==}
     engines: {node: '>=18'}
@@ -5835,32 +4604,9 @@ packages:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
 
-  kleur@3.0.3:
-    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
-    engines: {node: '>=6'}
-
-  kleur@4.1.5:
-    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
-    engines: {node: '>=6'}
-
-  klona@2.0.6:
-    resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==}
-    engines: {node: '>= 8'}
-
-  knitwork@1.2.0:
-    resolution: {integrity: sha512-xYSH7AvuQ6nXkq42x0v5S8/Iry+cfulBz/DJQzhIyESdLD7425jXsPy4vn5cCXU+HhRN2kVw51Vd1K6/By4BQg==}
-
   known-css-properties@0.26.0:
     resolution: {integrity: sha512-5FZRzrZzNTBruuurWpvZnvP9pum+fe0HcK8z/ooo+U+Hmp4vtbyp1/QDsqmufirXy4egGzbaH/y2uCZf+6W5Kg==}
 
-  kuler@2.0.0:
-    resolution: {integrity: sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==}
-
-  lambda-local@2.2.0:
-    resolution: {integrity: sha512-bPcgpIXbHnVGfI/omZIlgucDqlf4LrsunwoKue5JdZeGybt8L6KyJz2Zu19ffuZwIwLj2NAI2ZyaqNT6/cetcg==}
-    engines: {node: '>=8'}
-    hasBin: true
-
   language-subtag-registry@0.3.23:
     resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
 
@@ -5868,13 +4614,6 @@ packages:
     resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
     engines: {node: '>=0.10'}
 
-  launch-editor@2.10.0:
-    resolution: {integrity: sha512-D7dBRJo/qcGX9xlvt/6wUYzQxjh5G1RvZPgPv8vi4KRU99DVQL/oW7tnVOCCTm2HGeo3C5HvGE5Yrh6UBoZ0vA==}
-
-  lazystream@1.0.1:
-    resolution: {integrity: sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==}
-    engines: {node: '>= 0.6.3'}
-
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -5947,10 +4686,6 @@ packages:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
 
-  lilconfig@3.1.3:
-    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
-    engines: {node: '>=14'}
-
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
@@ -5958,10 +4693,6 @@ packages:
     resolution: {integrity: sha512-cNOjgCnLB+FnvWWtyRTzmB3POJ+cXxTA81LoW7u8JdmhfXzriropYwpjShnz1QLLWsQwY7nIxoDmcPTwphDK9w==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  listhen@1.9.0:
-    resolution: {integrity: sha512-I8oW2+QL5KJo8zXNWX046M134WchxsXC7SawLPvRQpogCbkyQIaFxPE89A2HiwR7vAK2Dm2ERBAmyjTYGYEpBg==}
-    hasBin: true
-
   local-pkg@1.1.1:
     resolution: {integrity: sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==}
     engines: {node: '>=14'}
@@ -5974,22 +4705,6 @@ packages:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
 
-  locate-path@7.2.0:
-    resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
-  lodash-es@4.17.21:
-    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
-
-  lodash.debounce@4.0.8:
-    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
-
-  lodash.defaults@4.2.0:
-    resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
-
-  lodash.isarguments@3.1.0:
-    resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
-
   lodash.isempty@4.4.0:
     resolution: {integrity: sha512-oKMuF3xEeqDltrGMfDxAPGIVMSSRv8tbRSODbrs4KGsRRLEhrW8N8Rd4DRgB2+621hY8A8XwwrTVhXWpxFvMzg==}
 
@@ -6015,10 +4730,6 @@ packages:
     resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
     engines: {node: '>=10'}
 
-  logform@2.7.0:
-    resolution: {integrity: sha512-TFYA4jnP7PVbmlBIfhlSe+WKxs9dklXMTEGcBCIvLhE/Tn3H6Gk1norupVW7m5Cnd4bLcr08AytbyV/xj7f/kQ==}
-    engines: {node: '>= 12.0.0'}
-
   loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
@@ -6045,21 +4756,10 @@ packages:
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0
 
-  luxon@3.6.1:
-    resolution: {integrity: sha512-tJLxrKJhO2ukZ5z0gyjY1zPh3Rh88Ej9P7jNrZiHMUXHae1yvI2imgOZtL1TO8TW6biMMKfTtAOoEJANgtWBMQ==}
-    engines: {node: '>=12'}
-
   lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
 
-  magic-regexp@0.8.0:
-    resolution: {integrity: sha512-lOSLWdE156csDYwCTIGiAymOLN7Epu/TU5e/oAnISZfU6qP+pgjkE+xbVjVn3yLPKN8n1G2yIAYTAM5KRk6/ow==}
-
-  magic-string-ast@0.7.1:
-    resolution: {integrity: sha512-ub9iytsEbT7Yw/Pd29mSo/cNQpaEu67zR1VVcXDiYjSFwzeBxNdTd0FMnSslLQXiRj8uGPzwsaoefrMD5XAmdw==}
-    engines: {node: '>=16.14.0'}
-
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
@@ -6097,9 +4797,6 @@ packages:
   mdn-data@2.0.14:
     resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
 
-  mdn-data@2.0.28:
-    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
-
   mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
@@ -6118,20 +4815,10 @@ packages:
     resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
     engines: {node: '>=18'}
 
-  merge-options@3.0.4:
-    resolution: {integrity: sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==}
-    engines: {node: '>=10'}
-
-  merge-stream@2.0.0:
-    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
-
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
-  micro-api-client@3.3.0:
-    resolution: {integrity: sha512-y0y6CUB9RLVsy3kfgayU28746QrNMpSm9O/AYGNsBgOkJr/X/Jk0VLGoO8Ude7Bpa8adywzF+MzXNZRFRsNPhg==}
-
   micromark-util-character@2.1.1:
     resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
 
@@ -6171,24 +4858,10 @@ packages:
     resolution: {integrity: sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==}
     engines: {node: '>= 0.6'}
 
-  mime@3.0.0:
-    resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
-    engines: {node: '>=10.0.0'}
-    hasBin: true
-
-  mime@4.0.7:
-    resolution: {integrity: sha512-2OfDPL+e03E0LrXaGYOtTFIYhiuzep94NSsuhrNULq+stylcJedcHdzHtz0atMUuGwJfFYs0YL5xeC/Ca2x0eQ==}
-    engines: {node: '>=16'}
-    hasBin: true
-
   mimic-fn@2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
 
-  mimic-fn@4.0.0:
-    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
-    engines: {node: '>=12'}
-
   min-document@2.19.0:
     resolution: {integrity: sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==}
 
@@ -6255,38 +4928,9 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  mkdist@2.3.0:
-    resolution: {integrity: sha512-thkRk+pHdudjdZT3FJpPZ2+pncI6mGlH/B+KBVddlZj4MrFGW41sRIv1wZawZUHU8v7cttGaj+5nx8P+dG664A==}
-    hasBin: true
-    peerDependencies:
-      sass: ^1.85.0
-      typescript: '>=5.7.3'
-      vue: ^3.5.13
-      vue-sfc-transformer: ^0.1.1
-      vue-tsc: ^1.8.27 || ^2.0.21
-    peerDependenciesMeta:
-      sass:
-        optional: true
-      typescript:
-        optional: true
-      vue:
-        optional: true
-      vue-sfc-transformer:
-        optional: true
-      vue-tsc:
-        optional: true
-
   mlly@1.7.4:
     resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
 
-  mocked-exports@0.1.1:
-    resolution: {integrity: sha512-aF7yRQr/Q0O2/4pIXm6PZ5G+jAd7QS4Yu8m+WEeEHGnbo+7mE36CbLSDQiXYV8bVL3NfmdeqPJct0tUlnjVSnA==}
-
-  module-definition@6.0.1:
-    resolution: {integrity: sha512-FeVc50FTfVVQnolk/WQT8MX+2WVcDnTGiq6Wo+/+lJ2ET1bRVi3HG3YlJUfqagNMc/kUlFSoR96AJkxGpKz13g==}
-    engines: {node: '>=18'}
-    hasBin: true
-
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -6306,14 +4950,6 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  nanoid@5.1.5:
-    resolution: {integrity: sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==}
-    engines: {node: ^18 || >=20}
-    hasBin: true
-
-  nanotar@0.2.0:
-    resolution: {integrity: sha512-9ca1h0Xjvo9bEkE4UOxgAzLV0jHKe6LMaxo37ND2DAhhAtd0j8pR1Wxz+/goMrZO8AEZTWCmyaOsFI/W5AdpCQ==}
-
   napi-postinstall@0.2.4:
     resolution: {integrity: sha512-ZEzHJwBhZ8qQSbknHqYcdtQVr8zUgGyM/q6h6qAyhtyVMNrSgDhrC4disf03dYW0e+czXyLnZINnCTEkWy0eJg==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
@@ -6329,10 +4965,6 @@ packages:
     resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
     engines: {node: '>= 0.6'}
 
-  netlify@13.3.5:
-    resolution: {integrity: sha512-Nc3loyVASW59W+8fLDZT1lncpG7llffyZ2o0UQLx/Fr20i7P8oP+lE7+TEcFvXj9IUWU6LjB9P3BH+iFGyp+mg==}
-    engines: {node: ^14.16.0 || >=16.0.0}
-
   next@15.3.2:
     resolution: {integrity: sha512-CA3BatMyHkxZ48sgOCLdVHjFU36N7TF1HhqAHLFOkV6buwZnvMI84Cug8xD56B9mCuKrqXnLn94417GrZ/jjCQ==}
     engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
@@ -6354,27 +4986,9 @@ packages:
       sass:
         optional: true
 
-  nitropack@2.11.12:
-    resolution: {integrity: sha512-e2AdQrEY1IVoNTdyjfEQV93xkqz4SQxAMR0xWF8mZUUHxMLm6S4nPzpscjksmT4OdUxl0N8/DCaGjKQ9ghdodA==}
-    engines: {node: ^16.11.0 || >=17.0.0}
-    hasBin: true
-    peerDependencies:
-      xml2js: ^0.6.2
-    peerDependenciesMeta:
-      xml2js:
-        optional: true
-
   node-addon-api@7.1.1:
     resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
 
-  node-domexception@1.0.0:
-    resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
-    engines: {node: '>=10.5.0'}
-    deprecated: Use your platform's native DOMException instead
-
-  node-fetch-native@1.6.6:
-    resolution: {integrity: sha512-8Mc2HhqPdlIfedsuZoc3yioPuzp6b+L5jRCRY1QzuWZh2EGJVQrGppC6V6cF0bLdbW0+O2YpqCA25aF/1lvipQ==}
-
   node-fetch@2.7.0:
     resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
     engines: {node: 4.x || >=6.0.0}
@@ -6384,41 +4998,17 @@ packages:
       encoding:
         optional: true
 
-  node-fetch@3.3.2:
-    resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
-  node-forge@1.3.1:
-    resolution: {integrity: sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==}
-    engines: {node: '>= 6.13.0'}
-
-  node-gyp-build@4.8.4:
-    resolution: {integrity: sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==}
-    hasBin: true
-
   node-machine-id@1.1.12:
     resolution: {integrity: sha512-QNABxbrPa3qEIfrE6GOJ7BYIuignnJw7iQ2YPbc3Nla1HzRJjXzZOiikfF8m7eAMfichLt3M4VgLOetqgDmgGQ==}
 
-  node-mock-http@1.0.0:
-    resolution: {integrity: sha512-0uGYQ1WQL1M5kKvGRXWQ3uZCHtLTO8hln3oBjIusM75WoesZ909uQJs/Hb946i2SS+Gsrhkaa6iAO17jRIv6DQ==}
-
   node-releases@2.0.19:
     resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
 
-  node-source-walk@7.0.1:
-    resolution: {integrity: sha512-3VW/8JpPqPvnJvseXowjZcirPisssnBuDikk6JIZ8jQzF7KJQX52iPFX4RYYxLycYH7IbMRSPUOga/esVjy5Yg==}
-    engines: {node: '>=18'}
-
   nopt@7.2.1:
     resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     hasBin: true
 
-  nopt@8.1.0:
-    resolution: {integrity: sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-    hasBin: true
-
   normalize-package-data@2.5.0:
     resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
 
@@ -6426,14 +5016,6 @@ packages:
     resolution: {integrity: sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==}
     engines: {node: '>=10'}
 
-  normalize-package-data@6.0.2:
-    resolution: {integrity: sha512-V6gygoYb/5EmNI+MEGrWkC+e6+Rr7mTmfHrxDbLzxQogBkgzo76rkok0Am6thgSF7Mv2nLOajAJj5vDJZEFn7g==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-
-  normalize-path@2.1.1:
-    resolution: {integrity: sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==}
-    engines: {node: '>=0.10.0'}
-
   normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
@@ -6450,30 +5032,9 @@ packages:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
 
-  npm-run-path@5.3.0:
-    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
-  npm-run-path@6.0.0:
-    resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
-    engines: {node: '>=18'}
-
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
-  nuxt@3.17.4:
-    resolution: {integrity: sha512-49tkp7/+QVhuEOFoTDVvNV6Pc5+aI7wWjZHXzLUrt3tlWLPFh0yYbNXOc3kaxir1FuhRQHHyHZ7azCPmGukfFg==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0.0}
-    hasBin: true
-    peerDependencies:
-      '@parcel/watcher': ^2.1.0
-      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
-    peerDependenciesMeta:
-      '@parcel/watcher':
-        optional: true
-      '@types/node':
-        optional: true
-
   nwsapi@2.2.20:
     resolution: {integrity: sha512-/ieB+mDe4MrrKMT8z+mQL8klXydZWGR5Dowt4RAGKbJ3kIGEx3X4ljUo+6V73IXtUPWgfOlU5B9MlGxFO5T+cA==}
 
@@ -6489,11 +5050,6 @@ packages:
       '@swc/core':
         optional: true
 
-  nypm@0.6.0:
-    resolution: {integrity: sha512-mn8wBFV9G9+UFHIrq+pZ2r2zL4aPau/by3kJb3cM7+5tQHMt6HGQB8FDIeKFYp8o0D2pnH6nVsO88N4AmUxIWg==}
-    engines: {node: ^14.16.0 || >=16.10.0}
-    hasBin: true
-
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -6526,16 +5082,6 @@ packages:
     resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
     engines: {node: '>= 0.4'}
 
-  ofetch@1.4.1:
-    resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==}
-
-  ohash@2.0.11:
-    resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
-
-  on-change@5.0.1:
-    resolution: {integrity: sha512-n7THCP7RkyReRSLkJb8kUWoNsxUIBxTkIp3JKno+sEz6o/9AJ3w3P9fzQkITEkMwyTKJjZciF3v/pVoouxZZMg==}
-    engines: {node: '>=18'}
-
   on-finished@2.4.1:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
     engines: {node: '>= 0.8'}
@@ -6543,24 +5089,13 @@ packages:
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
-  one-time@1.0.0:
-    resolution: {integrity: sha512-5DXOiRKwuSEcQ/l0kGCF6Q3jcADFv5tSmRaJck/OqkVFcOzutB134KRSfF0xDrL39MNnqxbHBbUUcjZIhTgb2g==}
-
   onetime@5.1.2:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
 
-  onetime@6.0.0:
-    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
-    engines: {node: '>=12'}
-
   oniguruma-to-es@3.1.1:
     resolution: {integrity: sha512-bUH8SDvPkH3ho3dvwJwfonjlQ4R80vjyvrU8YpxuROddv55vAEJrTuCuCVUhhsHbtlD9tGGbaNApGQckXhS8iQ==}
 
-  open@10.1.2:
-    resolution: {integrity: sha512-cxN6aIDPz6rm8hbebcP7vrQNhvRcveZoJU72Y7vskh4oIm+BZwBECnx5nTmrlres1Qapvx27Qo1Auukpf8PKXw==}
-    engines: {node: '>=18'}
-
   open@8.4.2:
     resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
     engines: {node: '>=12'}
@@ -6584,14 +5119,6 @@ packages:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
 
-  oxc-parser@0.71.0:
-    resolution: {integrity: sha512-RXmu7qi+67RJ8E5UhKZJdliTI+AqD3gncsJecjujcYvjsCZV9KNIfu42fQAnAfLaYZuzOMRdUYh7LzV3F1C0Gw==}
-    engines: {node: '>=14.0.0'}
-
-  p-event@6.0.1:
-    resolution: {integrity: sha512-Q6Bekk5wpzW5qIyUP4gdMEujObYstZl6DMMOSenwBvV0BlE5LkDwkjs5yHbZmdCEq2o4RJx4tE1vwxFVf2FG1w==}
-    engines: {node: '>=16.17'}
-
   p-filter@2.1.0:
     resolution: {integrity: sha512-ZBxxZ5sL2HghephhpGAQdoskxplTwr7ICaehZwLIlfL6acuVgZPm8yBNuRAFBGEqtD/hmUeq9eqLg2ys9Xr/yw==}
     engines: {node: '>=8'}
@@ -6608,10 +5135,6 @@ packages:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
 
-  p-limit@4.0.0:
-    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   p-locate@4.1.0:
     resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
     engines: {node: '>=8'}
@@ -6620,18 +5143,10 @@ packages:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
-  p-locate@6.0.0:
-    resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   p-map@2.1.0:
     resolution: {integrity: sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==}
     engines: {node: '>=6'}
 
-  p-map@7.0.3:
-    resolution: {integrity: sha512-VkndIv2fIB99swvQoA65bm+fsmt6UNdGeIB0oxBs+WhAhdh08QA04JXpI7rbB9r08/nkbysKoya9rtDERYOYMA==}
-    engines: {node: '>=18'}
-
   p-queue@6.6.2:
     resolution: {integrity: sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==}
     engines: {node: '>=8'}
@@ -6640,27 +5155,16 @@ packages:
     resolution: {integrity: sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==}
     engines: {node: '>=8'}
 
-  p-timeout@6.1.4:
-    resolution: {integrity: sha512-MyIV3ZA/PmyBN/ud8vV9XzwTrNtR4jFrObymZYnZqMmW0zA8Z17vnT0rBgFE/TlohB+YCHqXMgZzb3Csp49vqg==}
-    engines: {node: '>=14.16'}
-
   p-try@2.2.0:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
 
-  p-wait-for@5.0.2:
-    resolution: {integrity: sha512-lwx6u1CotQYPVju77R+D0vFomni/AqRfqLmqQ8hekklqZ6gAY9rONh7lBQ0uxWMkC2AuX9b2DVAl8To0NyP1JA==}
-    engines: {node: '>=12'}
-
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
   package-manager-detector@0.2.11:
     resolution: {integrity: sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==}
 
-  package-manager-detector@1.3.0:
-    resolution: {integrity: sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==}
-
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -6669,31 +5173,10 @@ packages:
     resolution: {integrity: sha512-CTM5kuWR3sx9IFamcl5ErfPl6ea/N8IYwiJ+vpeB2g+1iknv7zBl5uPwbMbRVznRVbrNY6lGuDoE5b30grmbqg==}
     engines: {node: '>= 0.10'}
 
-  parse-gitignore@2.0.0:
-    resolution: {integrity: sha512-RmVuCHWsfu0QPNW+mraxh/xjQVw/lhUCUru8Zni3Ctq3AoMhpDTq0OVdKS6iesd6Kqb7viCV3isAL43dciOSog==}
-    engines: {node: '>=14'}
-
-  parse-imports-exports@0.2.4:
-    resolution: {integrity: sha512-4s6vd6dx1AotCx/RCI2m7t7GCh5bDRUtGNvRfHSP2wbBQdMi67pPe7mtzmgwcaQ8VKK/6IB7Glfyu3qdZJPybQ==}
-
   parse-json@5.2.0:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
 
-  parse-json@8.3.0:
-    resolution: {integrity: sha512-ybiGyvspI+fAoRQbIPRddCcSTV9/LsJbf0e/S85VLowVGzRmokfneg2kwVW/KU5rOXrPSbF1qAKPMgNTqqROQQ==}
-    engines: {node: '>=18'}
-
-  parse-path@7.1.0:
-    resolution: {integrity: sha512-EuCycjZtfPcjWk7KTksnJ5xPMvWGA/6i4zrLYhRG0hGvC3GPU/jGUj3Cy+ZR0v30duV3e23R95T1lE2+lsndSw==}
-
-  parse-statements@1.0.11:
-    resolution: {integrity: sha512-HlsyYdMBnbPQ9Jr/VgJ1YF4scnldvJpJxCVx6KgqPL4dxppsWrJHCIIxQXMJrqGnsRkNPATbeMJ8Yxu7JMsYcA==}
-
-  parse-url@9.2.0:
-    resolution: {integrity: sha512-bCgsFI+GeGWPAvAiUv63ZorMeif3/U0zaXABGJbOWt5OH2KCaPHF6S+0ok4aqM9RuIPGyZdx9tR9l13PsW4AYQ==}
-    engines: {node: '>=14.13.0'}
-
   parse5@7.3.0:
     resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
 
@@ -6708,10 +5191,6 @@ packages:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
 
-  path-exists@5.0.0:
-    resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   path-is-absolute@1.0.1:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
@@ -6720,10 +5199,6 @@ packages:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
-  path-key@4.0.0:
-    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
-    engines: {node: '>=12'}
-
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
@@ -6743,13 +5218,6 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
-  path-type@6.0.0:
-    resolution: {integrity: sha512-Vj7sf++t5pBD637NSfkxpHSMfWaeig5+DKWLhcqIYx6mWQz5hdJTGDVMQiJcw1ZYkhs7AazKDGpRVji1LJCZUQ==}
-    engines: {node: '>=18'}
-
-  pathe@1.1.2:
-    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
-
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
@@ -6761,9 +5229,6 @@ packages:
     resolution: {integrity: sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==}
     engines: {node: '>=0.12'}
 
-  pend@1.2.0:
-    resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
-
   perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
 
@@ -6798,20 +5263,10 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  pluralize@8.0.0:
-    resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
-    engines: {node: '>=4'}
-
   possible-typed-array-names@1.1.0:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
 
-  postcss-calc@10.1.1:
-    resolution: {integrity: sha512-NYEsLHh8DgG/PRH2+G9BTuUdtf9ViS+vdoQ0YA5OQdGsfN4ztiwtDWNtBl9EKeqNMFnIu8IKZ0cLxEQ5r5KVMw==}
-    engines: {node: ^18.12 || ^20.9 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.38
-
   postcss-calc@8.2.4:
     resolution: {integrity: sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==}
     peerDependencies:
@@ -6823,72 +5278,36 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-colormin@7.0.3:
-    resolution: {integrity: sha512-xZxQcSyIVZbSsl1vjoqZAcMYYdnJsIyG8OvqShuuqf12S88qQboxxEy0ohNCOLwVPXTU+hFHvJPACRL2B5ohTA==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-convert-values@5.1.3:
     resolution: {integrity: sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-convert-values@7.0.5:
-    resolution: {integrity: sha512-0VFhH8nElpIs3uXKnVtotDJJNX0OGYSZmdt4XfSfvOMrFw1jKfpwpZxfC4iN73CTM/MWakDEmsHQXkISYj4BXw==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-discard-comments@5.1.2:
     resolution: {integrity: sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-discard-comments@7.0.4:
-    resolution: {integrity: sha512-6tCUoql/ipWwKtVP/xYiFf1U9QgJ0PUvxN7pTcsQ8Ns3Fnwq1pU5D5s1MhT/XySeLq6GXNvn37U46Ded0TckWg==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-discard-duplicates@5.1.0:
     resolution: {integrity: sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-discard-duplicates@7.0.2:
-    resolution: {integrity: sha512-eTonaQvPZ/3i1ASDHOKkYwAybiM45zFIc7KXils4mQmHLqIswXD9XNOKEVxtTFnsmwYzF66u4LMgSr0abDlh5w==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-discard-empty@5.1.1:
     resolution: {integrity: sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-discard-empty@7.0.1:
-    resolution: {integrity: sha512-cFrJKZvcg/uxB6Ijr4l6qmn3pXQBna9zyrPC+sK0zjbkDUZew+6xDltSF7OeB7rAtzaaMVYSdbod+sZOCWnMOg==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-discard-overridden@5.1.0:
     resolution: {integrity: sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-discard-overridden@7.0.1:
-    resolution: {integrity: sha512-7c3MMjjSZ/qYrx3uc1940GSOzN1Iqjtlqe8uoSg+qdVPYyRb0TILSqqmtlSFuE4mTDECwsm397Ya7iXGzfF7lg==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-media-query-parser@0.2.3:
     resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
 
@@ -6898,72 +5317,36 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-merge-longhand@7.0.5:
-    resolution: {integrity: sha512-Kpu5v4Ys6QI59FxmxtNB/iHUVDn9Y9sYw66D6+SZoIk4QTz1prC4aYkhIESu+ieG1iylod1f8MILMs1Em3mmIw==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-merge-rules@5.1.4:
     resolution: {integrity: sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-merge-rules@7.0.5:
-    resolution: {integrity: sha512-ZonhuSwEaWA3+xYbOdJoEReKIBs5eDiBVLAGpYZpNFPzXZcEE5VKR7/qBEQvTZpiwjqhhqEQ+ax5O3VShBj9Wg==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-minify-font-values@5.1.0:
     resolution: {integrity: sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-minify-font-values@7.0.1:
-    resolution: {integrity: sha512-2m1uiuJeTplll+tq4ENOQSzB8LRnSUChBv7oSyFLsJRtUgAAJGP6LLz0/8lkinTgxrmJSPOEhgY1bMXOQ4ZXhQ==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-minify-gradients@5.1.1:
     resolution: {integrity: sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-minify-gradients@7.0.1:
-    resolution: {integrity: sha512-X9JjaysZJwlqNkJbUDgOclyG3jZEpAMOfof6PUZjPnPrePnPG62pS17CjdM32uT1Uq1jFvNSff9l7kNbmMSL2A==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-minify-params@5.1.4:
     resolution: {integrity: sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-minify-params@7.0.3:
-    resolution: {integrity: sha512-vUKV2+f5mtjewYieanLX0xemxIp1t0W0H/D11u+kQV/MWdygOO7xPMkbK+r9P6Lhms8MgzKARF/g5OPXhb8tgg==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-minify-selectors@5.2.1:
     resolution: {integrity: sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-minify-selectors@7.0.5:
-    resolution: {integrity: sha512-x2/IvofHcdIrAm9Q+p06ZD1h6FPcQ32WtCRVodJLDR+WMn8EVHI1kvLxZuGKz/9EY5nAmI6lIQIrpo4tBy5+ug==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-modules-extract-imports@3.1.0:
     resolution: {integrity: sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==}
     engines: {node: ^10 || ^12 || >= 14}
@@ -6988,156 +5371,78 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
-  postcss-nested@7.0.2:
-    resolution: {integrity: sha512-5osppouFc0VR9/VYzYxO03VaDa3e8F23Kfd6/9qcZTUI8P58GIYlArOET2Wq0ywSl2o2PjELhYOFI4W7l5QHKw==}
-    engines: {node: '>=18.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-
   postcss-normalize-charset@5.1.0:
     resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-normalize-charset@7.0.1:
-    resolution: {integrity: sha512-sn413ofhSQHlZFae//m9FTOfkmiZ+YQXsbosqOWRiVQncU2BA3daX3n0VF3cG6rGLSFVc5Di/yns0dFfh8NFgQ==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-normalize-display-values@5.1.0:
     resolution: {integrity: sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-normalize-display-values@7.0.1:
-    resolution: {integrity: sha512-E5nnB26XjSYz/mGITm6JgiDpAbVuAkzXwLzRZtts19jHDUBFxZ0BkXAehy0uimrOjYJbocby4FVswA/5noOxrQ==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-normalize-positions@5.1.1:
     resolution: {integrity: sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-normalize-positions@7.0.1:
-    resolution: {integrity: sha512-pB/SzrIP2l50ZIYu+yQZyMNmnAcwyYb9R1fVWPRxm4zcUFCY2ign7rcntGFuMXDdd9L2pPNUgoODDk91PzRZuQ==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-normalize-repeat-style@5.1.1:
     resolution: {integrity: sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-normalize-repeat-style@7.0.1:
-    resolution: {integrity: sha512-NsSQJ8zj8TIDiF0ig44Byo3Jk9e4gNt9x2VIlJudnQQ5DhWAHJPF4Tr1ITwyHio2BUi/I6Iv0HRO7beHYOloYQ==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-normalize-string@5.1.0:
     resolution: {integrity: sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-normalize-string@7.0.1:
-    resolution: {integrity: sha512-QByrI7hAhsoze992kpbMlJSbZ8FuCEc1OT9EFbZ6HldXNpsdpZr+YXC5di3UEv0+jeZlHbZcoCADgb7a+lPmmQ==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-normalize-timing-functions@5.1.0:
     resolution: {integrity: sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-normalize-timing-functions@7.0.1:
-    resolution: {integrity: sha512-bHifyuuSNdKKsnNJ0s8fmfLMlvsQwYVxIoUBnowIVl2ZAdrkYQNGVB4RxjfpvkMjipqvbz0u7feBZybkl/6NJg==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-normalize-unicode@5.1.1:
     resolution: {integrity: sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-normalize-unicode@7.0.3:
-    resolution: {integrity: sha512-EcoA29LvG3F+EpOh03iqu+tJY3uYYKzArqKJHxDhUYLa2u58aqGq16K6/AOsXD9yqLN8O6y9mmePKN5cx6krOw==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-normalize-url@5.1.0:
     resolution: {integrity: sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-normalize-url@7.0.1:
-    resolution: {integrity: sha512-sUcD2cWtyK1AOL/82Fwy1aIVm/wwj5SdZkgZ3QiUzSzQQofrbq15jWJ3BA7Z+yVRwamCjJgZJN0I9IS7c6tgeQ==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-normalize-whitespace@5.1.1:
     resolution: {integrity: sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-normalize-whitespace@7.0.1:
-    resolution: {integrity: sha512-vsbgFHMFQrJBJKrUFJNZ2pgBeBkC2IvvoHjz1to0/0Xk7sII24T0qFOiJzG6Fu3zJoq/0yI4rKWi7WhApW+EFA==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-ordered-values@5.1.3:
     resolution: {integrity: sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-ordered-values@7.0.2:
-    resolution: {integrity: sha512-AMJjt1ECBffF7CEON/Y0rekRLS6KsePU6PRP08UqYW4UGFRnTXNrByUzYK1h8AC7UWTZdQ9O3Oq9kFIhm0SFEw==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-reduce-initial@5.1.2:
     resolution: {integrity: sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-reduce-initial@7.0.3:
-    resolution: {integrity: sha512-RFvkZaqiWtGMlVjlUHpaxGqEL27lgt+Q2Ixjf83CRAzqdo+TsDyGPtJUbPx2MuYIJ+sCQc2TrOvRnhcXQfgIVA==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-reduce-transforms@5.1.0:
     resolution: {integrity: sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-reduce-transforms@7.0.1:
-    resolution: {integrity: sha512-MhyEbfrm+Mlp/36hvZ9mT9DaO7dbncU0CvWI8V93LRkY6IYlu38OPg3FObnuKTUxJ4qA8HpurdQOo5CyqqO76g==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-resolve-nested-selector@0.1.6:
     resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==}
 
@@ -7167,33 +5472,15 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-svgo@7.0.2:
-    resolution: {integrity: sha512-5Dzy66JlnRM6pkdOTF8+cGsB1fnERTE8Nc+Eed++fOWo1hdsBptCsbG8UuJkgtZt75bRtMJIrPeZmtfANixdFA==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >= 18}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-unique-selectors@5.1.1:
     resolution: {integrity: sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-unique-selectors@7.0.4:
-    resolution: {integrity: sha512-pmlZjsmEAG7cHd7uK3ZiNSW6otSZ13RHuZ/4cDN/bVglS5EpF2r2oxY99SuOHa8m7AWoBCelTS3JPpzsIs8skQ==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  postcss-values-parser@6.0.2:
-    resolution: {integrity: sha512-YLJpK0N1brcNJrs9WatuJFtHaV9q5aAOj+S4DI5S7jgHlRfm0PIbDCAFRYMQD5SHq7Fy6xsDhyutgS0QOAs0qw==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      postcss: ^8.2.9
-
   postcss@8.4.31:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -7205,11 +5492,6 @@ packages:
   preact@10.26.7:
     resolution: {integrity: sha512-43xS+QYc1X1IPbw03faSgY6I6OYWcLrJRv3hU0+qMOfh/XCHcP0MX2CVjNARYR2cC/guu975sta4OcjlczxD7g==}
 
-  precinct@12.2.0:
-    resolution: {integrity: sha512-NFBMuwIfaJ4SocE9YXPU/n4AcNSoFMVFjP72nvl3cx69j/ke61/hPOWFREVxLkFhhEGnA8ZuVfTqJBa+PK3b5w==}
-    engines: {node: '>=18'}
-    hasBin: true
-
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -7228,10 +5510,6 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
-  pretty-bytes@6.1.1:
-    resolution: {integrity: sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==}
-    engines: {node: ^14.13.1 || >=16.0.0}
-
   pretty-format@27.5.1:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -7247,10 +5525,6 @@ packages:
     resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
     engines: {node: '>= 0.6.0'}
 
-  prompts@2.4.2:
-    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
-    engines: {node: '>= 6'}
-
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
@@ -7260,9 +5534,6 @@ packages:
   proto-list@1.2.4:
     resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
 
-  protocols@2.0.2:
-    resolution: {integrity: sha512-hHVTzba3wboROl0/aWRRG9dMytgH6ow//STBZh43l/wQgmMhYhOFi0EHWAPtoCz9IAUymsyP0TSBHkhgMEGNnQ==}
-
   proxy-addr@2.0.7:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
@@ -7273,9 +5544,6 @@ packages:
   public-encrypt@4.0.3:
     resolution: {integrity: sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==}
 
-  pump@3.0.2:
-    resolution: {integrity: sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==}
-
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -7298,12 +5566,6 @@ packages:
     resolution: {integrity: sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==}
     engines: {node: '>=8'}
 
-  quote-unquote@1.0.0:
-    resolution: {integrity: sha512-twwRO/ilhlG/FIgYeKGFqyHhoEhqgnKVkcmqMKi2r524gz3ZbDTcyFt38E9xjJI2vT+KbRNHVbnJ/e0I25Azwg==}
-
-  radix3@1.1.2:
-    resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
-
   randombytes@2.1.0:
     resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
 
@@ -7318,9 +5580,6 @@ packages:
     resolution: {integrity: sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==}
     engines: {node: '>= 0.8'}
 
-  rc9@2.1.2:
-    resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
-
   react-dom@18.3.1:
     resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
     peerDependencies:
@@ -7365,10 +5624,6 @@ packages:
     resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
     engines: {node: '>=0.10.0'}
 
-  read-package-up@11.0.0:
-    resolution: {integrity: sha512-MbgfoNPANMdb4oRBNg5eqLbB2t2r+o5Ua1pNt8BqGp4I0FJZhuVSOj3PaBPni4azWuSzEdNn2evevzVmEk1ohQ==}
-    engines: {node: '>=18'}
-
   read-pkg-up@7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
     engines: {node: '>=8'}
@@ -7377,10 +5632,6 @@ packages:
     resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
     engines: {node: '>=8'}
 
-  read-pkg@9.0.1:
-    resolution: {integrity: sha512-9viLL4/n1BJUCT1NXVTdS1jtm80yDEgR5T4yCelII49Mbj0v1rZdKqj7zCiYdbB0CuCgdrvHcNogAKTFPBocFA==}
-    engines: {node: '>=18'}
-
   read-yaml-file@1.1.0:
     resolution: {integrity: sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA==}
     engines: {node: '>=6'}
@@ -7392,13 +5643,6 @@ packages:
     resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
     engines: {node: '>= 6'}
 
-  readable-stream@4.7.0:
-    resolution: {integrity: sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  readdir-glob@1.1.3:
-    resolution: {integrity: sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==}
-
   readdirp@4.1.2:
     resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
     engines: {node: '>= 14.18.0'}
@@ -7407,18 +5651,6 @@ packages:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
 
-  redis-errors@1.2.0:
-    resolution: {integrity: sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==}
-    engines: {node: '>=4'}
-
-  redis-parser@3.0.0:
-    resolution: {integrity: sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==}
-    engines: {node: '>=4'}
-
-  refa@0.12.1:
-    resolution: {integrity: sha512-J8rn6v4DBb2nnFqkqwy6/NnTYMcgLA+sLr0iIO41qpv0n+ngb7ksag2tMRl0inb1bbO/esUwzW1vbJi7K0sI0g==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-
   reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
@@ -7432,14 +5664,6 @@ packages:
   regex@6.0.1:
     resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==}
 
-  regexp-ast-analysis@0.7.1:
-    resolution: {integrity: sha512-sZuz1dYW/ZsfG17WSAG7eS85r5a0dDsvg+7BiiYR5o6lKCAtUrEwdmRmaGF6rwVj3LcmAeYkOWKEPlbPzN3Y3A==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-
-  regexp-tree@0.1.27:
-    resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
-    hasBin: true
-
   regexp.prototype.flags@1.5.4:
     resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
@@ -7448,13 +5672,6 @@ packages:
     resolution: {integrity: sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==}
     engines: {node: '>=8'}
 
-  regjsparser@0.12.0:
-    resolution: {integrity: sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==}
-    hasBin: true
-
-  remove-trailing-separator@1.1.0:
-    resolution: {integrity: sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==}
-
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -7463,9 +5680,6 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
-  require-package-name@2.0.1:
-    resolution: {integrity: sha512-uuoJ1hU/k6M0779t3VMVIYpb2VMJk05cehCaABFhXaibcbvfgR8wKiozLjVFSzJPmQMRqIcO0HMyTFqfV09V6Q==}
-
   requireindex@1.2.0:
     resolution: {integrity: sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==}
     engines: {node: '>=0.10.5'}
@@ -7539,19 +5753,6 @@ packages:
     peerDependencies:
       rollup: ^2.63.0
 
-  rollup-plugin-visualizer@5.14.0:
-    resolution: {integrity: sha512-VlDXneTDaKsHIw8yzJAFWtrzguoJ/LnQ+lMpoVfYJ3jJF4Ihe5oYLAqLklIK/35lgUY+1yEzCkHyZ1j4A5w5fA==}
-    engines: {node: '>=18'}
-    hasBin: true
-    peerDependencies:
-      rolldown: 1.x
-      rollup: 2.x || 3.x || 4.x
-    peerDependenciesMeta:
-      rolldown:
-        optional: true
-      rollup:
-        optional: true
-
   rollup@4.40.2:
     resolution: {integrity: sha512-tfUOg6DTP4rhQ3VjOO6B4wyrJnGOX85requAXvqYTHsOgb2TFJdZ3aWpT8W2kPoypSGP7dZUyzxJ9ee4buM5Fg==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -7564,10 +5765,6 @@ packages:
   rrweb-cssom@0.8.0:
     resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
 
-  run-applescript@7.0.0:
-    resolution: {integrity: sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==}
-    engines: {node: '>=18'}
-
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
@@ -7589,10 +5786,6 @@ packages:
     resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
     engines: {node: '>= 0.4'}
 
-  safe-stable-stringify@2.5.0:
-    resolution: {integrity: sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==}
-    engines: {node: '>=10'}
-
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
@@ -7611,13 +5804,6 @@ packages:
   scheduler@0.26.0:
     resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
 
-  scslre@0.3.0:
-    resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
-    engines: {node: ^14.0.0 || >=16.0.0}
-
-  scule@1.3.0:
-    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
-
   search-insights@2.17.3:
     resolution: {integrity: sha512-RQPdCYTa8A68uM2jwxoY842xDhvx3E5LFL1LxvxCNMev4o5mLuokczhzjAgGwUZBAmOKZknArSxLKmXtIi2AxQ==}
 
@@ -7646,12 +5832,6 @@ packages:
     resolution: {integrity: sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==}
     engines: {node: '>= 18'}
 
-  serialize-javascript@6.0.2:
-    resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
-
-  serve-placeholder@2.0.2:
-    resolution: {integrity: sha512-/TMG8SboeiQbZJWRlfTCqMs2DD3SZgWp0kDQePz9yUuCnDfDh/92gf7/PxGhzXTKBIPASIHxFcZndoNbp6QOLQ==}
-
   serve-static@2.2.0:
     resolution: {integrity: sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==}
     engines: {node: '>= 18'}
@@ -7687,10 +5867,6 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  shell-quote@1.8.2:
-    resolution: {integrity: sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==}
-    engines: {node: '>= 0.4'}
-
   shiki@2.5.0:
     resolution: {integrity: sha512-mI//trrsaiCIPsja5CNfsyNOqgAZUb6VpJA+340toL42UpzQlXpwRV9nch69X6gaUxrr9kaOOa6e3y3uAkGFxQ==}
 
@@ -7720,9 +5896,6 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
-  simple-git@3.27.0:
-    resolution: {integrity: sha512-ivHoFS9Yi9GY49ogc6/YAi3Fl9ROnF4VyubNylgCkA+RVqLaKWnDSzXOVzya8csELIaWaYNutsEuAhZrtOjozA==}
-
   simple-swizzle@0.2.2:
     resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
 
@@ -7730,24 +5903,14 @@ packages:
     resolution: {integrity: sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==}
     engines: {node: '>=18'}
 
-  sisteransi@1.0.5:
-    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
-
   slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
 
-  slash@5.1.0:
-    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
-    engines: {node: '>=14.16'}
-
   slice-ansi@4.0.0:
     resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
     engines: {node: '>=10'}
 
-  smob@1.5.0:
-    resolution: {integrity: sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==}
-
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -7759,10 +5922,6 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
-  source-map@0.7.4:
-    resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
-    engines: {node: '>= 8'}
-
   space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
 
@@ -7778,9 +5937,6 @@ packages:
   spdx-expression-parse@3.0.1:
     resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
 
-  spdx-expression-parse@4.0.0:
-    resolution: {integrity: sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==}
-
   spdx-license-ids@3.0.21:
     resolution: {integrity: sha512-Bvg/8F5XephndSK3JffaRqdT+gyhfqIPwDHpX80tJrF8QQRYMo8sNMeaZ2Dp5+jhwKnUmIOyFFQfHRkjJm5nXg==}
 
@@ -7802,15 +5958,9 @@ packages:
     resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==}
     deprecated: 'Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility'
 
-  stack-trace@0.0.10:
-    resolution: {integrity: sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg==}
-
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
-  standard-as-callback@2.1.0:
-    resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
-
   statuses@2.0.1:
     resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
     engines: {node: '>= 0.8'}
@@ -7825,9 +5975,6 @@ packages:
     resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
     engines: {node: '>=10.0.0'}
 
-  streamx@2.22.0:
-    resolution: {integrity: sha512-sLh1evHOzBy/iWRiR6d1zRcLao4gGZr3C1kzNz4fopCOKJb6xD9ub8Mpi9Mr1R6id5o43S+d93fI48UC5uM9aw==}
-
   strict-uri-encode@2.0.0:
     resolution: {integrity: sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==}
     engines: {node: '>=4'}
@@ -7884,28 +6031,14 @@ packages:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
 
-  strip-final-newline@3.0.0:
-    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
-    engines: {node: '>=12'}
-
   strip-indent@3.0.0:
     resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
     engines: {node: '>=8'}
 
-  strip-indent@4.0.0:
-    resolution: {integrity: sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==}
-    engines: {node: '>=12'}
-
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
-  strip-literal@3.0.0:
-    resolution: {integrity: sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==}
-
-  structured-clone-es@1.0.0:
-    resolution: {integrity: sha512-FL8EeKFFyNQv5cMnXI31CIMCsFarSVI2bF0U0ImeNE3g/F1IvJQyqzOXxPBRXiwQfyBTlbNe88jh1jFW0O/jiQ==}
-
   style-search@0.1.0:
     resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
 
@@ -7928,12 +6061,6 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
 
-  stylehacks@7.0.5:
-    resolution: {integrity: sha512-5kNb7V37BNf0Q3w+1pxfa+oiNPS++/b4Jil9e/kPDgrk1zjEd6uR7SZeJiYaLYH6RRSC1XX2/37OTeU/4FvuIA==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.32
-
   stylelint-config-recommended-scss@8.0.0:
     resolution: {integrity: sha512-BxjxEzRaZoQb7Iinc3p92GS6zRdRAkIuEu2ZFLTxJK2e1AIcCb5B5MXY9KOXdGTnYFZ+KKx6R4Fv9zU6CtMYPQ==}
     peerDependencies:
@@ -7976,10 +6103,6 @@ packages:
     resolution: {integrity: sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==}
     engines: {node: '>=16'}
 
-  supports-color@10.0.0:
-    resolution: {integrity: sha512-HRVVSbCCMbj7/kdWF9Q+bbckjBHLtHMEoJWlkmYzzdwhYMkjkOwubLM6t7NbWKjgKamGDrWL1++KrjUO1t9oAQ==}
-    engines: {node: '>=18'}
-
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -8000,11 +6123,6 @@ packages:
     engines: {node: '>=10.13.0'}
     hasBin: true
 
-  svgo@3.3.2:
-    resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
@@ -8012,10 +6130,6 @@ packages:
     resolution: {integrity: sha512-2pR2ubZSV64f/vqm9eLPz/KOvR9Dm+Co/5ChLgeHl0yEDRc6h5hXHoxEQH8Y5Ljycozd3p1k5TTSVdzYGkPvLw==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
-  system-architecture@0.1.0:
-    resolution: {integrity: sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==}
-    engines: {node: '>=18'}
-
   tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
 
@@ -8037,9 +6151,6 @@ packages:
     resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
     engines: {node: '>=6'}
 
-  tar-stream@3.1.7:
-    resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
-
   tar@7.4.3:
     resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
     engines: {node: '>=18'}
@@ -8057,27 +6168,15 @@ packages:
     resolution: {integrity: sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==}
     engines: {node: '>=18'}
 
-  text-decoder@1.2.3:
-    resolution: {integrity: sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==}
-
-  text-hex@1.0.0:
-    resolution: {integrity: sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==}
-
   text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
-  tiny-invariant@1.3.3:
-    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
-
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
   tinyexec@0.3.2:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
-  tinyexec@1.0.1:
-    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
-
   tinyglobby@0.2.13:
     resolution: {integrity: sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==}
     engines: {node: '>=12.0.0'}
@@ -8101,9 +6200,6 @@ packages:
     resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
     hasBin: true
 
-  tmp-promise@3.0.3:
-    resolution: {integrity: sha512-RwM7MoPojPxsOBYnyd2hy0bxtIlVrihNs9pj5SUvY8Zz1sQcQG2tG1hSr8PDxfgEB8RNKDhqbIlroIarSNDNsQ==}
-
   tmp@0.0.33:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
     engines: {node: '>=0.6.0'}
@@ -8120,9 +6216,6 @@ packages:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
 
-  toml@3.0.0:
-    resolution: {integrity: sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==}
-
   totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
@@ -8145,10 +6238,6 @@ packages:
     resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
     engines: {node: '>=8'}
 
-  triple-beam@1.4.1:
-    resolution: {integrity: sha512-aZbgViZrg1QNcG+LULa7nhZpJTZSLm/mXnHXnbAbjmN5aSa0y7V+wvv6+4WaBtpISJzThKy+PIPxc1Nq1EJ9mg==}
-    engines: {node: '>= 14.0.0'}
-
   ts-api-utils@1.4.3:
     resolution: {integrity: sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==}
     engines: {node: '>=16'}
@@ -8161,16 +6250,6 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
-  tsconfck@3.1.6:
-    resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==}
-    engines: {node: ^18 || >=20}
-    hasBin: true
-    peerDependencies:
-      typescript: ^5.0.0
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
 
@@ -8213,17 +6292,10 @@ packages:
     resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
     engines: {node: '>=8'}
 
-  type-fest@4.41.0:
-    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
-    engines: {node: '>=16'}
-
   type-is@2.0.1:
     resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==}
     engines: {node: '>= 0.6'}
 
-  type-level-regexp@0.1.17:
-    resolution: {integrity: sha512-wTk4DH3cxwk196uGLK/E9pE45aLfeKJacKmcEgEOA/q5dnPGNxXt0cfYdFxb57L+sEpf1oJH4Dnx/pnRcku9jg==}
-
   typed-array-buffer@1.0.3:
     resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
     engines: {node: '>= 0.4'}
@@ -8265,28 +6337,10 @@ packages:
   ufo@1.6.1:
     resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
 
-  ultrahtml@1.6.0:
-    resolution: {integrity: sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw==}
-
   unbox-primitive@1.1.0:
     resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
     engines: {node: '>= 0.4'}
 
-  unbuild@3.5.0:
-    resolution: {integrity: sha512-DPFttsiADnHRb/K+yJ9r9jdn6JyXlsmdT0S12VFC14DFSJD+cxBnHq+v0INmqqPVPxOoUjvJFYUVIb02rWnVeA==}
-    hasBin: true
-    peerDependencies:
-      typescript: ^5.7.3
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  uncrypto@0.1.3:
-    resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==}
-
-  unctx@2.4.1:
-    resolution: {integrity: sha512-AbaYw0Nm4mK4qjhns67C+kgxR2YWiwlDBPzxrN8h8C6VtAdCgditAY5Dezu3IJy4XVqAnbrXt9oQJvsn3fyozg==}
-
   undici-types@6.19.8:
     resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
 
@@ -8296,24 +6350,6 @@ packages:
   undici-types@7.8.0:
     resolution: {integrity: sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==}
 
-  unenv@2.0.0-rc.17:
-    resolution: {integrity: sha512-B06u0wXkEd+o5gOCMl/ZHl5cfpYbDZKAT+HWTL+Hws6jWu7dCiqBBXXXzMFcFVJb8D4ytAnYmxJA83uwOQRSsg==}
-
-  unhead@2.0.10:
-    resolution: {integrity: sha512-GT188rzTCeSKt55tYyQlHHKfUTtZvgubrXiwzGeXg6UjcKO3FsagaMzQp6TVDrpDY++3i7Qt0t3pnCc/ebg5yQ==}
-
-  unicorn-magic@0.1.0:
-    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
-    engines: {node: '>=18'}
-
-  unicorn-magic@0.3.0:
-    resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
-    engines: {node: '>=18'}
-
-  unimport@5.0.1:
-    resolution: {integrity: sha512-1YWzPj6wYhtwHE+9LxRlyqP4DiRrhGfJxdtH475im8ktyZXO3jHj/3PZ97zDdvkYoovFdi0K4SKl3a7l92v3sQ==}
-    engines: {node: '>=18.12.0'}
-
   unist-util-is@6.0.0:
     resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
 
@@ -8337,125 +6373,22 @@ packages:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
-  unixify@1.0.0:
-    resolution: {integrity: sha512-6bc58dPYhCMHHuwxldQxO3RRNZ4eCogZ/st++0+fcC1nr0jiGUtAdBJ2qzmLQWSxbtz42pWt4QQMiZ9HvZf5cg==}
-    engines: {node: '>=0.10.0'}
-
   unpipe@1.0.0:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
-  unplugin-utils@0.2.4:
-    resolution: {integrity: sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA==}
-    engines: {node: '>=18.12.0'}
-
-  unplugin-vue-router@0.12.0:
-    resolution: {integrity: sha512-xjgheKU0MegvXQcy62GVea0LjyOdMxN0/QH+ijN29W62ZlMhG7o7K+0AYqfpprvPwpWtuRjiyC5jnV2SxWye2w==}
-    peerDependencies:
-      vue-router: ^4.4.0
-    peerDependenciesMeta:
-      vue-router:
-        optional: true
-
-  unplugin@1.16.1:
-    resolution: {integrity: sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==}
-    engines: {node: '>=14.0.0'}
-
-  unplugin@2.3.4:
-    resolution: {integrity: sha512-m4PjxTurwpWfpMomp8AptjD5yj8qEZN5uQjjGM3TAs9MWWD2tXSSNNj6jGR2FoVGod4293ytyV6SwBbertfyJg==}
-    engines: {node: '>=18.12.0'}
-
   unrs-resolver@1.7.2:
     resolution: {integrity: sha512-BBKpaylOW8KbHsu378Zky/dGh4ckT/4NW/0SHRABdqRLcQJ2dAOjDo9g97p04sWflm0kqPqpUatxReNV/dqI5A==}
 
-  unstorage@1.16.0:
-    resolution: {integrity: sha512-WQ37/H5A7LcRPWfYOrDa1Ys02xAbpPJq6q5GkO88FBXVSQzHd7+BjEwfRqyaSWCv9MbsJy058GWjjPjcJ16GGA==}
-    peerDependencies:
-      '@azure/app-configuration': ^1.8.0
-      '@azure/cosmos': ^4.2.0
-      '@azure/data-tables': ^13.3.0
-      '@azure/identity': ^4.6.0
-      '@azure/keyvault-secrets': ^4.9.0
-      '@azure/storage-blob': ^12.26.0
-      '@capacitor/preferences': ^6.0.3 || ^7.0.0
-      '@deno/kv': '>=0.9.0'
-      '@netlify/blobs': ^6.5.0 || ^7.0.0 || ^8.1.0
-      '@planetscale/database': ^1.19.0
-      '@upstash/redis': ^1.34.3
-      '@vercel/blob': '>=0.27.1'
-      '@vercel/kv': ^1.0.1
-      aws4fetch: ^1.0.20
-      db0: '>=0.2.1'
-      idb-keyval: ^6.2.1
-      ioredis: ^5.4.2
-      uploadthing: ^7.4.4
-    peerDependenciesMeta:
-      '@azure/app-configuration':
-        optional: true
-      '@azure/cosmos':
-        optional: true
-      '@azure/data-tables':
-        optional: true
-      '@azure/identity':
-        optional: true
-      '@azure/keyvault-secrets':
-        optional: true
-      '@azure/storage-blob':
-        optional: true
-      '@capacitor/preferences':
-        optional: true
-      '@deno/kv':
-        optional: true
-      '@netlify/blobs':
-        optional: true
-      '@planetscale/database':
-        optional: true
-      '@upstash/redis':
-        optional: true
-      '@vercel/blob':
-        optional: true
-      '@vercel/kv':
-        optional: true
-      aws4fetch:
-        optional: true
-      db0:
-        optional: true
-      idb-keyval:
-        optional: true
-      ioredis:
-        optional: true
-      uploadthing:
-        optional: true
-
-  untun@0.1.3:
-    resolution: {integrity: sha512-4luGP9LMYszMRZwsvyUd9MrxgEGZdZuZgpVQHEEX0lCYFESasVRvZd0EYpCkOIbJKHMuv0LskpXc/8Un+MJzEQ==}
-    hasBin: true
-
-  untyped@2.0.0:
-    resolution: {integrity: sha512-nwNCjxJTjNuLCgFr42fEak5OcLuB3ecca+9ksPFNvtfYSLpjf+iJqSIaSnIile6ZPbKYxI5k2AfXqeopGudK/g==}
-    hasBin: true
-
-  unwasm@0.3.9:
-    resolution: {integrity: sha512-LDxTx/2DkFURUd+BU1vUsF/moj0JsoTvl+2tcg2AUOiEzVturhGGx17/IMgGvKUYdZwr33EJHtChCJuhu9Ouvg==}
-
   update-browserslist-db@1.1.3:
     resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
 
-  uqr@0.1.2:
-    resolution: {integrity: sha512-MJu7ypHq6QasgF5YRTjqscSzQp/W11zoUk6kvmlH+fmWEs63Y0Eib13hYFwAzagRJcVY8WVnlV+eBDUGMJ5IbA==}
-
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
-  urlpattern-polyfill@10.1.0:
-    resolution: {integrity: sha512-IGjKp/o0NL3Bso1PymYURCJxMPNAf/ILOpendP9f5B6e1rTJgdgiOvgfoT8VxCAdY+Wisb9uhGaJJf3yZ2V9nw==}
-
-  urlpattern-polyfill@8.0.2:
-    resolution: {integrity: sha512-Qp95D4TPJl1kC9SKigDcqgyM2VDVO4RiJc2d4qe5GrYm+zbIQCWWKAFaJNQ4BhdFeDGwBmAxqJBwWSJDb9T3BQ==}
-
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -8479,76 +6412,11 @@ packages:
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
-  vite-dev-rpc@1.0.7:
-    resolution: {integrity: sha512-FxSTEofDbUi2XXujCA+hdzCDkXFG1PXktMjSk1efq9Qb5lOYaaM9zNSvKvPPF7645Bak79kSp1PTooMW2wktcA==}
-    peerDependencies:
-      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1
-
-  vite-hot-client@2.0.4:
-    resolution: {integrity: sha512-W9LOGAyGMrbGArYJN4LBCdOC5+Zwh7dHvOHC0KmGKkJhsOzaKbpo/jEjpPKVHIW0/jBWj8RZG0NUxfgA8BxgAg==}
-    peerDependencies:
-      vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0
-
   vite-node@3.1.3:
     resolution: {integrity: sha512-uHV4plJ2IxCl4u1up1FQRrqclylKAogbtBfOTwcuJ28xFi+89PZ57BRh+naIRvH70HPwxy5QHYzg1OrEaC7AbA==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
 
-  vite-node@3.1.4:
-    resolution: {integrity: sha512-6enNwYnpyDo4hEgytbmc6mYWHXDHYEn0D1/rw4Q+tnHUGtKTJsn8T1YkX6Q18wI5LCrS8CTYlBaiCqxOy2kvUA==}
-    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
-    hasBin: true
-
-  vite-plugin-checker@0.9.3:
-    resolution: {integrity: sha512-Tf7QBjeBtG7q11zG0lvoF38/2AVUzzhMNu+Wk+mcsJ00Rk/FpJ4rmUviVJpzWkagbU13cGXvKpt7CMiqtxVTbQ==}
-    engines: {node: '>=14.16'}
-    peerDependencies:
-      '@biomejs/biome': '>=1.7'
-      eslint: '>=7'
-      meow: ^13.2.0
-      optionator: ^0.9.4
-      stylelint: '>=16'
-      typescript: '*'
-      vite: '>=2.0.0'
-      vls: '*'
-      vti: '*'
-      vue-tsc: ~2.2.10
-    peerDependenciesMeta:
-      '@biomejs/biome':
-        optional: true
-      eslint:
-        optional: true
-      meow:
-        optional: true
-      optionator:
-        optional: true
-      stylelint:
-        optional: true
-      typescript:
-        optional: true
-      vls:
-        optional: true
-      vti:
-        optional: true
-      vue-tsc:
-        optional: true
-
-  vite-plugin-inspect@11.1.0:
-    resolution: {integrity: sha512-r3Nx8xGQ08bSoNu7gJGfP5H/wNOROHtv0z3tWspplyHZJlABwNoPOdFEmcVh+lVMDyk/Be4yt8oS596ZHoYhOg==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@nuxt/kit': '*'
-      vite: ^6.0.0
-    peerDependenciesMeta:
-      '@nuxt/kit':
-        optional: true
-
-  vite-plugin-vue-tracer@0.1.3:
-    resolution: {integrity: sha512-+fN6oo0//dwZP9Ax9gRKeUroCqpQ43P57qlWgL0ljCIxAs+Rpqn/L4anIPZPgjDPga5dZH+ZJsshbF0PNJbm3Q==}
-    peerDependencies:
-      vite: ^6.0.0
-      vue: ^3.5.0
-
   vite@5.4.19:
     resolution: {integrity: sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -8648,9 +6516,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  vitest-environment-nuxt@1.0.1:
-    resolution: {integrity: sha512-eBCwtIQriXW5/M49FjqNKfnlJYlG2LWMSNFsRVKomc8CaMqmhQPBS5LZ9DlgYL9T8xIVsiA6RZn2lk7vxov3Ow==}
-
   vitest@3.1.3:
     resolution: {integrity: sha512-188iM4hAHQ0km23TN/adso1q5hhwKqUpv+Sd6p5sOuh6FhQnRNW3IsiIpvxqahtBabsJ2SLZgmGSpcYK4wQYJw==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
@@ -8682,15 +6547,9 @@ packages:
   vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
-  vue-bundle-renderer@2.1.1:
-    resolution: {integrity: sha512-+qALLI5cQncuetYOXp4yScwYvqh8c6SMXee3B+M7oTZxOgtESP0l4j/fXdEJoZ+EdMxkGWIj+aSEyjXkOdmd7g==}
-
   vue-component-type-helpers@2.2.10:
     resolution: {integrity: sha512-iDUO7uQK+Sab2tYuiP9D1oLujCWlhHELHMgV/cB13cuGbG4qwkLHvtfWb6FzvxrIOPDnU0oHsz2MlQjhYDeaHA==}
 
-  vue-devtools-stub@0.1.0:
-    resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
-
   vue-eslint-parser@10.1.3:
     resolution: {integrity: sha512-dbCBnd2e02dYWsXoqX5yKUZlOt+ExIpq7hmHKPb5ZqKcjf++Eo0hMseFTZMLKThrUk61m+Uv6A2YSBve6ZvuDQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -8703,19 +6562,6 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
-  vue-router@4.5.1:
-    resolution: {integrity: sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==}
-    peerDependencies:
-      vue: ^3.2.0
-
-  vue-sfc-transformer@0.1.16:
-    resolution: {integrity: sha512-pXx4pkHigOJCzGPXhGA9Rdou1oIuNiF9n4n5GQ7C4QehTXFEpKUjcpvc3PZ6LvC6ccUL021qor8j1153Y7/6Ig==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      '@vue/compiler-core': ^3.5.13
-      esbuild: '*'
-      vue: ^3.5.13
-
   vue-tsc@2.2.10:
     resolution: {integrity: sha512-jWZ1xSaNbabEV3whpIDMbjVSVawjAyW+x1n3JeGQo7S0uv2n9F/JMgWW90tGWNFRKya4YwKMZgCtr0vRAM7DeQ==}
     hasBin: true
@@ -8737,10 +6583,6 @@ packages:
   wcwidth@1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
 
-  web-streams-polyfill@3.3.3:
-    resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
-    engines: {node: '>= 8'}
-
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
@@ -8748,9 +6590,6 @@ packages:
     resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
     engines: {node: '>=12'}
 
-  webpack-virtual-modules@0.6.2:
-    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
-
   whatwg-encoding@3.1.1:
     resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
     engines: {node: '>=18'}
@@ -8791,24 +6630,11 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
-  which@5.0.0:
-    resolution: {integrity: sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-    hasBin: true
-
   why-is-node-running@2.3.0:
     resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
     engines: {node: '>=8'}
     hasBin: true
 
-  winston-transport@4.9.0:
-    resolution: {integrity: sha512-8drMJ4rkgaPo1Me4zD/3WLfI/zPdA9o2IipKODunnGDcuqbHwjsbB79ylv04LCGGzU0xQ6vTznOMpQGaLhhm6A==}
-    engines: {node: '>= 12.0.0'}
-
-  winston@3.17.0:
-    resolution: {integrity: sha512-DLiFIXYC5fMPxaRg832S6F5mJYvePtmO5G9v9IgUFPhXm9/GkXarH/TUrBAVzhTCzAj9anE/+GjrgXp/54nOgw==}
-    engines: {node: '>= 12.0.0'}
-
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
@@ -8828,10 +6654,6 @@ packages:
     resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  write-file-atomic@6.0.0:
-    resolution: {integrity: sha512-GmqrO8WJ1NuzJ2DrziEI2o57jKAVIQNf8a18W3nCYU3H7PNWqCCVTeH6/NQE93CIllIgQS98rrmVkYgTX9fFJQ==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-
   ws@8.18.2:
     resolution: {integrity: sha512-DMricUmwGZUVr++AEAe2uiVM7UoO9MAVZMDu05UQOaUII0lp+zOzLLU4Xqh/JvTqklB1T4uELaaPBKyjE1r4fQ==}
     engines: {node: '>=10.0.0'}
@@ -8890,32 +6712,10 @@ packages:
     resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
     engines: {node: '>=12'}
 
-  yauzl@2.10.0:
-    resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
-
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
-  yocto-queue@1.2.1:
-    resolution: {integrity: sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==}
-    engines: {node: '>=12.20'}
-
-  youch-core@0.3.2:
-    resolution: {integrity: sha512-fusrlIMLeRvTFYLUjJ9KzlGC3N+6MOPJ68HNj/yJv2nz7zq8t4HEviLms2gkdRPUS7F5rZ5n+pYx9r88m6IE1g==}
-    engines: {node: '>=18'}
-
-  youch@4.1.0-beta.7:
-    resolution: {integrity: sha512-HUn0M24AUTMvjdkoMtH8fJz2FEd+k1xvtR9EoTrDUoVUi6o7xl5X+pST/vjk4T3GEQo2mJ9FlAvhWBm8dIdD4g==}
-    engines: {node: '>=18'}
-
-  zip-stream@6.0.1:
-    resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
-    engines: {node: '>= 14'}
-
-  zod@3.25.28:
-    resolution: {integrity: sha512-/nt/67WYKnr5by3YS7LroZJbtcCBurDKKPBPWWzaxvVCGuG/NOsiKkrjoOhI8mJ+SQUXEbUzeB3S+6XDUEEj7Q==}
-
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
@@ -9031,11 +6831,6 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@antfu/install-pkg@1.1.0':
-    dependencies:
-      package-manager-detector: 1.3.0
-      tinyexec: 1.0.1
-
   '@asamuzakjp/css-color@3.1.7':
     dependencies:
       '@csstools/css-calc': 2.1.3(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
@@ -9111,10 +6906,6 @@ snapshots:
       '@jridgewell/trace-mapping': 0.3.25
       jsesc: 3.1.0
 
-  '@babel/helper-annotate-as-pure@7.27.1':
-    dependencies:
-      '@babel/types': 7.27.1
-
   '@babel/helper-compilation-targets@7.27.2':
     dependencies:
       '@babel/compat-data': 7.27.2
@@ -9123,26 +6914,6 @@ snapshots:
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  '@babel/helper-create-class-features-plugin@7.27.1(@babel/core@7.27.1)':
-    dependencies:
-      '@babel/core': 7.27.1
-      '@babel/helper-annotate-as-pure': 7.27.1
-      '@babel/helper-member-expression-to-functions': 7.27.1
-      '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.27.1)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/traverse': 7.27.1
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-member-expression-to-functions@7.27.1':
-    dependencies:
-      '@babel/traverse': 7.27.1
-      '@babel/types': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-module-imports@7.27.1':
     dependencies:
       '@babel/traverse': 7.27.1
@@ -9159,53 +6930,23 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-optimise-call-expression@7.27.1':
+  '@babel/helper-plugin-utils@7.27.1': {}
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.27.1': {}
+
+  '@babel/helper-validator-option@7.27.1': {}
+
+  '@babel/helpers@7.27.1':
     dependencies:
+      '@babel/template': 7.27.2
       '@babel/types': 7.27.1
 
-  '@babel/helper-plugin-utils@7.27.1': {}
-
-  '@babel/helper-replace-supers@7.27.1(@babel/core@7.27.1)':
-    dependencies:
-      '@babel/core': 7.27.1
-      '@babel/helper-member-expression-to-functions': 7.27.1
-      '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/traverse': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
-    dependencies:
-      '@babel/traverse': 7.27.1
-      '@babel/types': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-string-parser@7.27.1': {}
-
-  '@babel/helper-validator-identifier@7.27.1': {}
-
-  '@babel/helper-validator-option@7.27.1': {}
-
-  '@babel/helpers@7.27.1':
-    dependencies:
-      '@babel/template': 7.27.2
-      '@babel/types': 7.27.1
-
-  '@babel/parser@7.27.2':
+  '@babel/parser@7.27.2':
     dependencies:
       '@babel/types': 7.27.1
 
-  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.27.1)':
-    dependencies:
-      '@babel/core': 7.27.1
-      '@babel/helper-plugin-utils': 7.27.1
-
-  '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.27.1)':
-    dependencies:
-      '@babel/core': 7.27.1
-      '@babel/helper-plugin-utils': 7.27.1
-
   '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.27.1)':
     dependencies:
       '@babel/core': 7.27.1
@@ -9216,17 +6957,6 @@ snapshots:
       '@babel/core': 7.27.1
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-typescript@7.27.1(@babel/core@7.27.1)':
-    dependencies:
-      '@babel/core': 7.27.1
-      '@babel/helper-annotate-as-pure': 7.27.1
-      '@babel/helper-create-class-features-plugin': 7.27.1(@babel/core@7.27.1)
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.27.1)
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/runtime@7.27.1': {}
 
   '@babel/template@7.27.2':
@@ -9411,23 +7141,6 @@ snapshots:
       human-id: 4.1.1
       prettier: 2.8.8
 
-  '@clack/core@0.4.2':
-    dependencies:
-      picocolors: 1.1.1
-      sisteransi: 1.0.5
-
-  '@clack/prompts@0.10.1':
-    dependencies:
-      '@clack/core': 0.4.2
-      picocolors: 1.1.1
-      sisteransi: 1.0.5
-
-  '@cloudflare/kv-asset-handler@0.4.0':
-    dependencies:
-      mime: 3.0.0
-
-  '@colors/colors@1.6.0': {}
-
   '@csstools/color-helpers@5.0.2':
     optional: true
 
@@ -9468,17 +7181,6 @@ snapshots:
     dependencies:
       postcss-selector-parser: 6.1.2
 
-  '@dabh/diagnostics@2.0.3':
-    dependencies:
-      colorspace: 1.1.4
-      enabled: 2.0.0
-      kuler: 2.0.0
-
-  '@dependents/detective-less@5.0.1':
-    dependencies:
-      gonzales-pe: 4.3.0
-      node-source-walk: 7.0.1
-
   '@docsearch/css@3.8.2': {}
 
   '@docsearch/js@3.8.2(@algolia/client-search@5.25.0)(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)':
@@ -9519,14 +7221,6 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@es-joy/jsdoccomment@0.50.2':
-    dependencies:
-      '@types/estree': 1.0.7
-      '@typescript-eslint/types': 8.33.1
-      comment-parser: 1.4.1
-      esquery: 1.6.0
-      jsdoc-type-pratt-parser: 4.1.0
-
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
@@ -9683,10 +7377,6 @@ snapshots:
 
   '@eslint-community/regexpp@4.12.1': {}
 
-  '@eslint/compat@1.2.9(eslint@8.57.0)':
-    optionalDependencies:
-      eslint: 8.57.0
-
   '@eslint/config-array@0.20.0':
     dependencies:
       '@eslint/object-schema': 2.1.6
@@ -9697,10 +7387,6 @@ snapshots:
 
   '@eslint/config-helpers@0.2.2': {}
 
-  '@eslint/core@0.13.0':
-    dependencies:
-      '@types/json-schema': 7.0.15
-
   '@eslint/core@0.14.0':
     dependencies:
       '@types/json-schema': 7.0.15
@@ -9735,24 +7421,15 @@ snapshots:
 
   '@eslint/js@8.57.0': {}
 
-  '@eslint/js@9.27.0': {}
-
   '@eslint/js@9.28.0': {}
 
   '@eslint/object-schema@2.1.6': {}
 
-  '@eslint/plugin-kit@0.2.8':
-    dependencies:
-      '@eslint/core': 0.13.0
-      levn: 0.4.1
-
   '@eslint/plugin-kit@0.3.1':
     dependencies:
       '@eslint/core': 0.14.0
       levn: 0.4.1
 
-  '@fastify/busboy@3.1.1': {}
-
   '@floating-ui/core@1.7.1':
     dependencies:
       '@floating-ui/utils': 0.2.9
@@ -9888,8 +7565,6 @@ snapshots:
   '@img/sharp-win32-x64@0.34.2':
     optional: true
 
-  '@ioredis/commands@1.2.0': {}
-
   '@isaacs/cliui@8.0.2':
     dependencies:
       string-width: 5.1.2
@@ -9923,6 +7598,7 @@ snapshots:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
+    optional: true
 
   '@jridgewell/sourcemap-codec@1.5.0': {}
 
@@ -9933,14 +7609,6 @@ snapshots:
 
   '@jspm/core@2.1.0': {}
 
-  '@kwsites/file-exists@1.1.1':
-    dependencies:
-      debug: 4.4.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@kwsites/promise-deferred@1.1.1': {}
-
   '@manypkg/find-root@1.1.0':
     dependencies:
       '@babel/runtime': 7.27.1
@@ -9957,19 +7625,6 @@ snapshots:
       globby: 11.1.0
       read-yaml-file: 1.1.0
 
-  '@mapbox/node-pre-gyp@2.0.0':
-    dependencies:
-      consola: 3.4.2
-      detect-libc: 2.0.4
-      https-proxy-agent: 7.0.6
-      node-fetch: 2.7.0
-      nopt: 8.1.0
-      semver: 7.7.2
-      tar: 7.4.3
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-
   '@microsoft/tsdoc-config@0.16.2':
     dependencies:
       '@microsoft/tsdoc': 0.14.2
@@ -9992,93 +7647,6 @@ snapshots:
       '@emnapi/runtime': 1.4.3
       '@tybys/wasm-util': 0.9.0
 
-  '@netlify/binary-info@1.0.0': {}
-
-  '@netlify/blobs@9.1.2':
-    dependencies:
-      '@netlify/dev-utils': 2.2.0
-      '@netlify/runtime-utils': 1.3.1
-
-  '@netlify/dev-utils@2.2.0':
-    dependencies:
-      '@whatwg-node/server': 0.9.71
-      chokidar: 4.0.3
-      decache: 4.6.2
-      dot-prop: 9.0.0
-      env-paths: 3.0.0
-      find-up: 7.0.0
-      lodash.debounce: 4.0.8
-      netlify: 13.3.5
-      parse-gitignore: 2.0.0
-      uuid: 11.1.0
-      write-file-atomic: 6.0.0
-
-  '@netlify/functions@3.1.9(rollup@4.40.2)':
-    dependencies:
-      '@netlify/blobs': 9.1.2
-      '@netlify/dev-utils': 2.2.0
-      '@netlify/serverless-functions-api': 1.41.2
-      '@netlify/zip-it-and-ship-it': 12.1.0(rollup@4.40.2)
-      cron-parser: 4.9.0
-      decache: 4.6.2
-      extract-zip: 2.0.1
-      is-stream: 4.0.1
-      jwt-decode: 4.0.0
-      lambda-local: 2.2.0
-      read-package-up: 11.0.0
-      source-map-support: 0.5.21
-    transitivePeerDependencies:
-      - encoding
-      - rollup
-      - supports-color
-
-  '@netlify/open-api@2.37.0': {}
-
-  '@netlify/runtime-utils@1.3.1': {}
-
-  '@netlify/serverless-functions-api@1.41.2': {}
-
-  '@netlify/zip-it-and-ship-it@12.1.0(rollup@4.40.2)':
-    dependencies:
-      '@babel/parser': 7.27.2
-      '@babel/types': 7.27.1
-      '@netlify/binary-info': 1.0.0
-      '@netlify/serverless-functions-api': 1.41.2
-      '@vercel/nft': 0.29.3(rollup@4.40.2)
-      archiver: 7.0.1
-      common-path-prefix: 3.0.0
-      copy-file: 11.0.0
-      es-module-lexer: 1.7.0
-      esbuild: 0.25.4
-      execa: 8.0.1
-      fast-glob: 3.3.3
-      filter-obj: 6.1.0
-      find-up: 7.0.0
-      glob: 8.1.0
-      is-builtin-module: 3.2.1
-      is-path-inside: 4.0.0
-      junk: 4.0.1
-      locate-path: 7.2.0
-      merge-options: 3.0.4
-      minimatch: 9.0.5
-      normalize-path: 3.0.0
-      p-map: 7.0.3
-      path-exists: 5.0.0
-      precinct: 12.2.0
-      require-package-name: 2.0.1
-      resolve: 2.0.0-next.5
-      semver: 7.7.2
-      tmp-promise: 3.0.3
-      toml: 3.0.0
-      unixify: 1.0.0
-      urlpattern-polyfill: 8.0.2
-      yargs: 17.7.2
-      zod: 3.25.28
-    transitivePeerDependencies:
-      - encoding
-      - rollup
-      - supports-color
-
   '@next/env@15.3.2': {}
 
   '@next/eslint-plugin-next@13.5.11':
@@ -10131,399 +7699,40 @@ snapshots:
 
   '@nolyfill/is-core-module@1.0.39': {}
 
-  '@nuxt/cli@3.25.1(magicast@0.3.5)':
-    dependencies:
-      c12: 3.0.4(magicast@0.3.5)
-      chokidar: 4.0.3
-      citty: 0.1.6
-      clipboardy: 4.0.0
-      consola: 3.4.2
-      defu: 6.1.4
-      fuse.js: 7.1.0
-      giget: 2.0.0
-      h3: 1.15.3
-      httpxy: 0.1.7
-      jiti: 2.4.2
-      listhen: 1.9.0
-      nypm: 0.6.0
-      ofetch: 1.4.1
-      ohash: 2.0.11
-      pathe: 2.0.3
-      perfect-debounce: 1.0.0
-      pkg-types: 2.1.0
-      scule: 1.3.0
-      semver: 7.7.2
-      std-env: 3.9.0
-      tinyexec: 1.0.1
-      ufo: 1.6.1
-      youch: 4.1.0-beta.7
-    transitivePeerDependencies:
-      - magicast
+  '@nx/nx-darwin-arm64@20.8.1':
+    optional: true
 
-  '@nuxt/devalue@2.0.2': {}
+  '@nx/nx-darwin-x64@20.8.1':
+    optional: true
 
-  '@nuxt/devtools-kit@2.4.1(magicast@0.3.5)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
-    dependencies:
-      '@nuxt/kit': 3.17.4(magicast@0.3.5)
-      '@nuxt/schema': 3.17.4
-      execa: 8.0.1
-      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-    transitivePeerDependencies:
-      - magicast
+  '@nx/nx-freebsd-x64@20.8.1':
+    optional: true
 
-  '@nuxt/devtools-wizard@2.4.1':
-    dependencies:
-      consola: 3.4.2
-      diff: 7.0.0
-      execa: 8.0.1
-      magicast: 0.3.5
-      pathe: 2.0.3
-      pkg-types: 2.1.0
-      prompts: 2.4.2
-      semver: 7.7.2
+  '@nx/nx-linux-arm-gnueabihf@20.8.1':
+    optional: true
 
-  '@nuxt/devtools@2.4.1(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
-    dependencies:
-      '@nuxt/devtools-kit': 2.4.1(magicast@0.3.5)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
-      '@nuxt/devtools-wizard': 2.4.1
-      '@nuxt/kit': 3.17.4(magicast@0.3.5)
-      '@vue/devtools-core': 7.7.6(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
-      '@vue/devtools-kit': 7.7.6
-      birpc: 2.3.0
-      consola: 3.4.2
-      destr: 2.0.5
-      error-stack-parser-es: 1.0.5
-      execa: 8.0.1
-      fast-npm-meta: 0.4.3
-      get-port-please: 3.1.2
-      hookable: 5.5.3
-      image-meta: 0.2.1
-      is-installed-globally: 1.0.0
-      launch-editor: 2.10.0
-      local-pkg: 1.1.1
-      magicast: 0.3.5
-      nypm: 0.6.0
-      ohash: 2.0.11
-      pathe: 2.0.3
-      perfect-debounce: 1.0.0
-      pkg-types: 2.1.0
-      semver: 7.7.2
-      simple-git: 3.27.0
-      sirv: 3.0.1
-      structured-clone-es: 1.0.0
-      tinyglobby: 0.2.13
-      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-plugin-inspect: 11.1.0(@nuxt/kit@3.17.4(magicast@0.3.5))(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
-      vite-plugin-vue-tracer: 0.1.3(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
-      which: 5.0.0
-      ws: 8.18.2
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - utf-8-validate
-      - vue
+  '@nx/nx-linux-arm64-gnu@20.8.1':
+    optional: true
 
-  '@nuxt/eslint-config@1.4.1(@vue/compiler-sfc@3.5.14)(eslint@8.57.0)(typescript@5.8.3)':
-    dependencies:
-      '@antfu/install-pkg': 1.1.0
-      '@clack/prompts': 0.10.1
-      '@eslint/js': 9.27.0
-      '@nuxt/eslint-plugin': 1.4.1(eslint@8.57.0)(typescript@5.8.3)
-      '@stylistic/eslint-plugin': 4.4.0(eslint@8.57.0)(typescript@5.8.3)
-      '@typescript-eslint/eslint-plugin': 8.32.1(@typescript-eslint/parser@8.32.1(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)
-      '@typescript-eslint/parser': 8.32.1(eslint@8.57.0)(typescript@5.8.3)
-      eslint: 8.57.0
-      eslint-config-flat-gitignore: 2.1.0(eslint@8.57.0)
-      eslint-flat-config-utils: 2.1.0
-      eslint-merge-processors: 2.0.0(eslint@8.57.0)
-      eslint-plugin-import-x: 4.12.2(eslint@8.57.0)(typescript@5.8.3)
-      eslint-plugin-jsdoc: 50.6.17(eslint@8.57.0)
-      eslint-plugin-regexp: 2.7.0(eslint@8.57.0)
-      eslint-plugin-unicorn: 59.0.1(eslint@8.57.0)
-      eslint-plugin-vue: 10.1.0(eslint@8.57.0)(vue-eslint-parser@10.1.3(eslint@8.57.0))
-      eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.14)(eslint@8.57.0)
-      globals: 16.1.0
-      local-pkg: 1.1.1
-      pathe: 2.0.3
-      vue-eslint-parser: 10.1.3(eslint@8.57.0)
-    transitivePeerDependencies:
-      - '@vue/compiler-sfc'
-      - supports-color
-      - typescript
+  '@nx/nx-linux-arm64-musl@20.8.1':
+    optional: true
 
-  '@nuxt/eslint-plugin@1.4.1(eslint@8.57.0)(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.32.1
-      '@typescript-eslint/utils': 8.32.1(eslint@8.57.0)(typescript@5.8.3)
-      eslint: 8.57.0
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
+  '@nx/nx-linux-x64-gnu@20.8.1':
+    optional: true
 
-  '@nuxt/kit@3.17.4(magicast@0.3.5)':
-    dependencies:
-      c12: 3.0.4(magicast@0.3.5)
-      consola: 3.4.2
-      defu: 6.1.4
-      destr: 2.0.5
-      errx: 0.1.0
-      exsolve: 1.0.5
-      ignore: 7.0.4
-      jiti: 2.4.2
-      klona: 2.0.6
-      knitwork: 1.2.0
-      mlly: 1.7.4
-      ohash: 2.0.11
-      pathe: 2.0.3
-      pkg-types: 2.1.0
-      scule: 1.3.0
-      semver: 7.7.2
-      std-env: 3.9.0
-      tinyglobby: 0.2.13
-      ufo: 1.6.1
-      unctx: 2.4.1
-      unimport: 5.0.1
-      untyped: 2.0.0
-    transitivePeerDependencies:
-      - magicast
+  '@nx/nx-linux-x64-musl@20.8.1':
+    optional: true
 
-  '@nuxt/module-builder@1.0.1(@nuxt/cli@3.25.1(magicast@0.3.5))(@vue/compiler-core@3.5.14)(esbuild@0.25.4)(sass@1.89.0)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3))':
-    dependencies:
-      '@nuxt/cli': 3.25.1(magicast@0.3.5)
-      citty: 0.1.6
-      consola: 3.4.2
-      defu: 6.1.4
-      jiti: 2.4.2
-      magic-regexp: 0.8.0
-      mkdist: 2.3.0(sass@1.89.0)(typescript@5.8.3)(vue-sfc-transformer@0.1.16(@vue/compiler-core@3.5.14)(esbuild@0.25.4)(vue@3.5.14(typescript@5.8.3)))(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3))
-      mlly: 1.7.4
-      pathe: 2.0.3
-      pkg-types: 2.1.0
-      tsconfck: 3.1.6(typescript@5.8.3)
-      typescript: 5.8.3
-      unbuild: 3.5.0(sass@1.89.0)(typescript@5.8.3)(vue-sfc-transformer@0.1.16(@vue/compiler-core@3.5.14)(esbuild@0.25.4)(vue@3.5.14(typescript@5.8.3)))(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3))
-      vue-sfc-transformer: 0.1.16(@vue/compiler-core@3.5.14)(esbuild@0.25.4)(vue@3.5.14(typescript@5.8.3))
-    transitivePeerDependencies:
-      - '@vue/compiler-core'
-      - esbuild
-      - sass
-      - vue
-      - vue-tsc
+  '@nx/nx-win32-arm64-msvc@20.8.1':
+    optional: true
 
-  '@nuxt/schema@3.17.4':
-    dependencies:
-      '@vue/shared': 3.5.14
-      consola: 3.4.2
-      defu: 6.1.4
-      pathe: 2.0.3
-      std-env: 3.9.0
+  '@nx/nx-win32-x64-msvc@20.8.1':
+    optional: true
 
-  '@nuxt/telemetry@2.6.6(magicast@0.3.5)':
-    dependencies:
-      '@nuxt/kit': 3.17.4(magicast@0.3.5)
-      citty: 0.1.6
-      consola: 3.4.2
-      destr: 2.0.5
-      dotenv: 16.4.7
-      git-url-parse: 16.1.0
-      is-docker: 3.0.0
-      ofetch: 1.4.1
-      package-manager-detector: 1.3.0
-      pathe: 2.0.3
-      rc9: 2.1.2
-      std-env: 3.9.0
-    transitivePeerDependencies:
-      - magicast
+  '@one-ini/wasm@0.1.1': {}
 
-  '@nuxt/test-utils@3.19.0(@types/node@24.0.3)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)':
-    dependencies:
-      '@nuxt/kit': 3.17.4(magicast@0.3.5)
-      '@nuxt/schema': 3.17.4
-      c12: 3.0.4(magicast@0.3.5)
-      consola: 3.4.2
-      defu: 6.1.4
-      destr: 2.0.5
-      estree-walker: 3.0.3
-      fake-indexeddb: 6.0.1
-      get-port-please: 3.1.2
-      h3: 1.15.3
-      local-pkg: 1.1.1
-      magic-string: 0.30.17
-      node-fetch-native: 1.6.6
-      node-mock-http: 1.0.0
-      ofetch: 1.4.1
-      pathe: 2.0.3
-      perfect-debounce: 1.0.0
-      radix3: 1.1.2
-      scule: 1.3.0
-      std-env: 3.9.0
-      tinyexec: 1.0.1
-      ufo: 1.6.1
-      unplugin: 2.3.4
-      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vitest-environment-nuxt: 1.0.1(@types/node@24.0.3)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
-      vue: 3.5.14(typescript@5.8.3)
-    optionalDependencies:
-      '@vue/test-utils': 2.4.6
-      jsdom: 26.1.0
-      playwright-core: 1.52.0
-      vitest: 3.1.3(@types/node@24.0.3)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-    transitivePeerDependencies:
-      - '@types/node'
-      - jiti
-      - less
-      - lightningcss
-      - magicast
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - terser
-      - tsx
-      - typescript
-      - yaml
-
-  '@nuxt/vite-builder@3.17.4(@types/node@24.0.3)(eslint@8.57.0)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3))(yaml@2.8.0)':
-    dependencies:
-      '@nuxt/kit': 3.17.4(magicast@0.3.5)
-      '@rollup/plugin-replace': 6.0.2(rollup@4.40.2)
-      '@vitejs/plugin-vue': 5.2.4(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
-      '@vitejs/plugin-vue-jsx': 4.2.0(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
-      autoprefixer: 10.4.21(postcss@8.5.3)
-      consola: 3.4.2
-      cssnano: 7.0.7(postcss@8.5.3)
-      defu: 6.1.4
-      esbuild: 0.25.4
-      escape-string-regexp: 5.0.0
-      exsolve: 1.0.5
-      externality: 1.0.2
-      get-port-please: 3.1.2
-      h3: 1.15.3
-      jiti: 2.4.2
-      knitwork: 1.2.0
-      magic-string: 0.30.17
-      mlly: 1.7.4
-      mocked-exports: 0.1.1
-      ohash: 2.0.11
-      pathe: 2.0.3
-      perfect-debounce: 1.0.0
-      pkg-types: 2.1.0
-      postcss: 8.5.3
-      rollup-plugin-visualizer: 5.14.0(rollup@4.40.2)
-      std-env: 3.9.0
-      ufo: 1.6.1
-      unenv: 2.0.0-rc.17
-      unplugin: 2.3.4
-      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-node: 3.1.4(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-plugin-checker: 0.9.3(eslint@8.57.0)(optionator@0.9.4)(typescript@5.8.3)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))
-      vue: 3.5.14(typescript@5.8.3)
-      vue-bundle-renderer: 2.1.1
-    transitivePeerDependencies:
-      - '@biomejs/biome'
-      - '@types/node'
-      - eslint
-      - less
-      - lightningcss
-      - magicast
-      - meow
-      - optionator
-      - rolldown
-      - rollup
-      - sass
-      - sass-embedded
-      - stylelint
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - tsx
-      - typescript
-      - vls
-      - vti
-      - vue-tsc
-      - yaml
-
-  '@nx/nx-darwin-arm64@20.8.1':
-    optional: true
-
-  '@nx/nx-darwin-x64@20.8.1':
-    optional: true
-
-  '@nx/nx-freebsd-x64@20.8.1':
-    optional: true
-
-  '@nx/nx-linux-arm-gnueabihf@20.8.1':
-    optional: true
-
-  '@nx/nx-linux-arm64-gnu@20.8.1':
-    optional: true
-
-  '@nx/nx-linux-arm64-musl@20.8.1':
-    optional: true
-
-  '@nx/nx-linux-x64-gnu@20.8.1':
-    optional: true
-
-  '@nx/nx-linux-x64-musl@20.8.1':
-    optional: true
-
-  '@nx/nx-win32-arm64-msvc@20.8.1':
-    optional: true
-
-  '@nx/nx-win32-x64-msvc@20.8.1':
-    optional: true
-
-  '@one-ini/wasm@0.1.1': {}
-
-  '@oxc-parser/binding-darwin-arm64@0.71.0':
-    optional: true
-
-  '@oxc-parser/binding-darwin-x64@0.71.0':
-    optional: true
-
-  '@oxc-parser/binding-freebsd-x64@0.71.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.71.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-arm-musleabihf@0.71.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-arm64-gnu@0.71.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-arm64-musl@0.71.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-riscv64-gnu@0.71.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-s390x-gnu@0.71.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-x64-gnu@0.71.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-x64-musl@0.71.0':
-    optional: true
-
-  '@oxc-parser/binding-wasm32-wasi@0.71.0':
-    dependencies:
-      '@napi-rs/wasm-runtime': 0.2.10
-    optional: true
-
-  '@oxc-parser/binding-win32-arm64-msvc@0.71.0':
-    optional: true
-
-  '@oxc-parser/binding-win32-x64-msvc@0.71.0':
-    optional: true
-
-  '@oxc-project/types@0.71.0': {}
-
-  '@parcel/watcher-android-arm64@2.5.1':
-    optional: true
+  '@parcel/watcher-android-arm64@2.5.1':
+    optional: true
 
   '@parcel/watcher-darwin-arm64@2.5.1':
     optional: true
@@ -10552,11 +7761,6 @@ snapshots:
   '@parcel/watcher-linux-x64-musl@2.5.1':
     optional: true
 
-  '@parcel/watcher-wasm@2.5.1':
-    dependencies:
-      is-glob: 4.0.3
-      micromatch: 4.0.8
-
   '@parcel/watcher-win32-arm64@2.5.1':
     optional: true
 
@@ -10586,6 +7790,7 @@ snapshots:
       '@parcel/watcher-win32-arm64': 2.5.1
       '@parcel/watcher-win32-ia32': 2.5.1
       '@parcel/watcher-win32-x64': 2.5.1
+    optional: true
 
   '@pkgjs/parseargs@0.11.0':
     optional: true
@@ -10594,18 +7799,6 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
-  '@poppinss/colors@4.1.4':
-    dependencies:
-      kleur: 4.1.5
-
-  '@poppinss/dumper@0.6.3':
-    dependencies:
-      '@poppinss/colors': 4.1.4
-      '@sindresorhus/is': 7.0.1
-      supports-color: 10.0.0
-
-  '@poppinss/exception@1.2.1': {}
-
   '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.5)(react@19.1.0)':
     dependencies:
       react: 19.1.0
@@ -10641,10 +7834,6 @@ snapshots:
 
   '@rolldown/pluginutils@1.0.0-beta.9': {}
 
-  '@rollup/plugin-alias@5.1.1(rollup@4.40.2)':
-    optionalDependencies:
-      rollup: 4.40.2
-
   '@rollup/plugin-commonjs@25.0.8(rollup@4.40.2)':
     dependencies:
       '@rollup/pluginutils': 5.1.4(rollup@4.40.2)
@@ -10656,18 +7845,6 @@ snapshots:
     optionalDependencies:
       rollup: 4.40.2
 
-  '@rollup/plugin-commonjs@28.0.3(rollup@4.40.2)':
-    dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.40.2)
-      commondir: 1.0.1
-      estree-walker: 2.0.2
-      fdir: 6.4.4(picomatch@4.0.2)
-      is-reference: 1.2.1
-      magic-string: 0.30.17
-      picomatch: 4.0.2
-    optionalDependencies:
-      rollup: 4.40.2
-
   '@rollup/plugin-image@3.0.3(rollup@4.40.2)':
     dependencies:
       '@rollup/pluginutils': 5.1.4(rollup@4.40.2)
@@ -10683,12 +7860,6 @@ snapshots:
     optionalDependencies:
       rollup: 4.40.2
 
-  '@rollup/plugin-json@6.1.0(rollup@4.40.2)':
-    dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.40.2)
-    optionalDependencies:
-      rollup: 4.40.2
-
   '@rollup/plugin-node-resolve@15.3.1(rollup@4.40.2)':
     dependencies:
       '@rollup/pluginutils': 5.1.4(rollup@4.40.2)
@@ -10699,31 +7870,6 @@ snapshots:
     optionalDependencies:
       rollup: 4.40.2
 
-  '@rollup/plugin-node-resolve@16.0.1(rollup@4.40.2)':
-    dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.40.2)
-      '@types/resolve': 1.20.2
-      deepmerge: 4.3.1
-      is-module: 1.0.0
-      resolve: 1.22.10
-    optionalDependencies:
-      rollup: 4.40.2
-
-  '@rollup/plugin-replace@6.0.2(rollup@4.40.2)':
-    dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.40.2)
-      magic-string: 0.30.17
-    optionalDependencies:
-      rollup: 4.40.2
-
-  '@rollup/plugin-terser@0.4.4(rollup@4.40.2)':
-    dependencies:
-      serialize-javascript: 6.0.2
-      smob: 1.5.0
-      terser: 5.39.2
-    optionalDependencies:
-      rollup: 4.40.2
-
   '@rollup/plugin-typescript@11.1.6(rollup@4.40.2)(tslib@2.8.1)(typescript@5.1.6)':
     dependencies:
       '@rollup/pluginutils': 5.1.4(rollup@4.40.2)
@@ -10852,24 +7998,6 @@ snapshots:
 
   '@sinclair/typebox@0.27.8': {}
 
-  '@sindresorhus/is@7.0.1': {}
-
-  '@sindresorhus/merge-streams@2.3.0': {}
-
-  '@speed-highlight/core@1.2.7': {}
-
-  '@stylistic/eslint-plugin@4.4.0(eslint@8.57.0)(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/utils': 8.32.1(eslint@8.57.0)(typescript@5.8.3)
-      eslint: 8.57.0
-      eslint-visitor-keys: 4.2.0
-      espree: 10.3.0
-      estraverse: 5.3.0
-      picomatch: 4.0.2
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
   '@swc/counter@0.1.3': {}
 
   '@swc/helpers@0.5.15':
@@ -11035,15 +8163,12 @@ snapshots:
   '@types/node@24.0.3':
     dependencies:
       undici-types: 7.8.0
+    optional: true
 
   '@types/normalize-package-data@2.4.4': {}
 
   '@types/parse-json@4.0.2': {}
 
-  '@types/parse-path@7.1.0':
-    dependencies:
-      parse-path: 7.1.0
-
   '@types/prop-types@15.7.15':
     optional: true
 
@@ -11065,17 +8190,10 @@ snapshots:
 
   '@types/semver@7.7.0': {}
 
-  '@types/triple-beam@1.3.5': {}
-
   '@types/unist@3.0.3': {}
 
   '@types/web-bluetooth@0.0.21': {}
 
-  '@types/yauzl@2.10.3':
-    dependencies:
-      '@types/node': 20.17.50
-    optional: true
-
   '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)(typescript@5.1.6)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -11134,23 +8252,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.32.1(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)':
-    dependencies:
-      '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.32.1(eslint@8.57.0)(typescript@5.8.3)
-      '@typescript-eslint/scope-manager': 8.32.1
-      '@typescript-eslint/type-utils': 8.32.1(eslint@8.57.0)(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.32.1(eslint@8.57.0)(typescript@5.8.3)
-      '@typescript-eslint/visitor-keys': 8.32.1
-      eslint: 8.57.0
-      graphemer: 1.4.0
-      ignore: 7.0.4
-      natural-compare: 1.4.0
-      ts-api-utils: 2.1.0(typescript@5.8.3)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/eslint-plugin@8.33.1(@typescript-eslint/parser@8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -11221,18 +8322,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.32.1(eslint@8.57.0)(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.32.1
-      '@typescript-eslint/types': 8.32.1
-      '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.8.3)
-      '@typescript-eslint/visitor-keys': 8.32.1
-      debug: 4.4.1
-      eslint: 8.57.0
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/parser@8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.33.1
@@ -11264,11 +8353,6 @@ snapshots:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/visitor-keys': 6.21.0
 
-  '@typescript-eslint/scope-manager@8.32.1':
-    dependencies:
-      '@typescript-eslint/types': 8.32.1
-      '@typescript-eslint/visitor-keys': 8.32.1
-
   '@typescript-eslint/scope-manager@8.33.1':
     dependencies:
       '@typescript-eslint/types': 8.33.1
@@ -11314,17 +8398,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/type-utils@8.32.1(eslint@8.57.0)(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.32.1(eslint@8.57.0)(typescript@5.8.3)
-      debug: 4.4.1
-      eslint: 8.57.0
-      ts-api-utils: 2.1.0(typescript@5.8.3)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/type-utils@8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/typescript-estree': 8.33.1(typescript@5.8.3)
@@ -11340,8 +8413,6 @@ snapshots:
 
   '@typescript-eslint/types@6.21.0': {}
 
-  '@typescript-eslint/types@8.32.1': {}
-
   '@typescript-eslint/types@8.33.1': {}
 
   '@typescript-eslint/typescript-estree@5.62.0(typescript@5.1.6)':
@@ -11387,20 +8458,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@8.32.1(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.32.1
-      '@typescript-eslint/visitor-keys': 8.32.1
-      debug: 4.4.1
-      fast-glob: 3.3.3
-      is-glob: 4.0.3
-      minimatch: 9.0.5
-      semver: 7.7.2
-      ts-api-utils: 2.1.0(typescript@5.8.3)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/typescript-estree@8.33.1(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/project-service': 8.33.1(typescript@5.8.3)
@@ -11461,29 +8518,6 @@ snapshots:
       - supports-color
       - typescript
 
-  '@typescript-eslint/utils@8.32.1(eslint@8.57.0)(typescript@5.8.3)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@8.57.0)
-      '@typescript-eslint/scope-manager': 8.32.1
-      '@typescript-eslint/types': 8.32.1
-      '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.8.3)
-      eslint: 8.57.0
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/utils@8.32.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.28.0(jiti@2.4.2))
-      '@typescript-eslint/scope-manager': 8.32.1
-      '@typescript-eslint/types': 8.32.1
-      '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.8.3)
-      eslint: 9.28.0(jiti@2.4.2)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@typescript-eslint/utils@8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.7.0(eslint@9.28.0(jiti@2.4.2))
@@ -11505,11 +8539,6 @@ snapshots:
       '@typescript-eslint/types': 6.21.0
       eslint-visitor-keys: 3.4.3
 
-  '@typescript-eslint/visitor-keys@8.32.1':
-    dependencies:
-      '@typescript-eslint/types': 8.32.1
-      eslint-visitor-keys: 4.2.0
-
   '@typescript-eslint/visitor-keys@8.33.1':
     dependencies:
       '@typescript-eslint/types': 8.33.1
@@ -11517,12 +8546,6 @@ snapshots:
 
   '@ungap/structured-clone@1.3.0': {}
 
-  '@unhead/vue@2.0.10(vue@3.5.14(typescript@5.8.3))':
-    dependencies:
-      hookable: 5.5.3
-      unhead: 2.0.10
-      vue: 3.5.14(typescript@5.8.3)
-
   '@unrs/resolver-binding-darwin-arm64@1.7.2':
     optional: true
 
@@ -11576,25 +8599,6 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.7.2':
     optional: true
 
-  '@vercel/nft@0.29.3(rollup@4.40.2)':
-    dependencies:
-      '@mapbox/node-pre-gyp': 2.0.0
-      '@rollup/pluginutils': 5.1.4(rollup@4.40.2)
-      acorn: 8.14.1
-      acorn-import-attributes: 1.9.5(acorn@8.14.1)
-      async-sema: 3.1.1
-      bindings: 1.5.0
-      estree-walker: 2.0.2
-      glob: 10.4.5
-      graceful-fs: 4.2.11
-      node-gyp-build: 4.8.4
-      picomatch: 4.0.2
-      resolve-from: 5.0.0
-    transitivePeerDependencies:
-      - encoding
-      - rollup
-      - supports-color
-
   '@vitejs/plugin-basic-ssl@2.0.0(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
@@ -11611,17 +8615,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@4.2.0(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
-    dependencies:
-      '@babel/core': 7.27.1
-      '@babel/plugin-transform-typescript': 7.27.1(@babel/core@7.27.1)
-      '@rolldown/pluginutils': 1.0.0-beta.9
-      '@vue/babel-plugin-jsx': 1.4.0(@babel/core@7.27.1)
-      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vue: 3.5.14(typescript@5.8.3)
-    transitivePeerDependencies:
-      - supports-color
-
   '@vitejs/plugin-vue@5.2.4(vite@5.4.19(@types/node@24.0.3)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2))(vue@3.5.14(typescript@5.8.3))':
     dependencies:
       vite: 5.4.19(@types/node@24.0.3)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)
@@ -11632,11 +8625,6 @@ snapshots:
       vite: 6.3.5(@types/node@20.17.50)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
       vue: 3.5.14(typescript@5.1.6)
 
-  '@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
-    dependencies:
-      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vue: 3.5.14(typescript@5.8.3)
-
   '@vitest/browser@3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)':
     dependencies:
       '@testing-library/dom': 10.4.0
@@ -11656,26 +8644,6 @@ snapshots:
       - utf-8-validate
       - vite
 
-  '@vitest/browser@3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)':
-    dependencies:
-      '@testing-library/dom': 10.4.0
-      '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.0)
-      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
-      '@vitest/utils': 3.1.3
-      magic-string: 0.30.17
-      sirv: 3.0.1
-      tinyrainbow: 2.0.0
-      vitest: 3.1.3(@types/node@24.0.3)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      ws: 8.18.2
-    optionalDependencies:
-      playwright: 1.52.0
-    transitivePeerDependencies:
-      - bufferutil
-      - msw
-      - utf-8-validate
-      - vite
-    optional: true
-
   '@vitest/coverage-v8@3.0.8(vitest@3.1.3(@types/node@20.17.50)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -11717,14 +8685,6 @@ snapshots:
     optionalDependencies:
       vite: 6.3.5(@types/node@22.15.30)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
 
-  '@vitest/mocker@3.1.3(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))':
-    dependencies:
-      '@vitest/spy': 3.1.3
-      estree-walker: 3.0.3
-      magic-string: 0.30.17
-    optionalDependencies:
-      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-
   '@vitest/pretty-format@3.1.3':
     dependencies:
       tinyrainbow: 2.0.0
@@ -11769,46 +8729,6 @@ snapshots:
       path-browserify: 1.0.1
       vscode-uri: 3.1.0
 
-  '@vue-macros/common@1.16.1(vue@3.5.14(typescript@5.8.3))':
-    dependencies:
-      '@vue/compiler-sfc': 3.5.14
-      ast-kit: 1.4.3
-      local-pkg: 1.1.1
-      magic-string-ast: 0.7.1
-      pathe: 2.0.3
-      picomatch: 4.0.2
-    optionalDependencies:
-      vue: 3.5.14(typescript@5.8.3)
-
-  '@vue/babel-helper-vue-transform-on@1.4.0': {}
-
-  '@vue/babel-plugin-jsx@1.4.0(@babel/core@7.27.1)':
-    dependencies:
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.27.1)
-      '@babel/template': 7.27.2
-      '@babel/traverse': 7.27.1
-      '@babel/types': 7.27.1
-      '@vue/babel-helper-vue-transform-on': 1.4.0
-      '@vue/babel-plugin-resolve-type': 1.4.0(@babel/core@7.27.1)
-      '@vue/shared': 3.5.14
-    optionalDependencies:
-      '@babel/core': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@vue/babel-plugin-resolve-type@1.4.0(@babel/core@7.27.1)':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/core': 7.27.1
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/parser': 7.27.2
-      '@vue/compiler-sfc': 3.5.14
-    transitivePeerDependencies:
-      - supports-color
-
   '@vue/compiler-core@3.5.14':
     dependencies:
       '@babel/parser': 7.27.2
@@ -11844,24 +8764,10 @@ snapshots:
       de-indent: 1.0.2
       he: 1.2.0
 
-  '@vue/devtools-api@6.6.4': {}
-
   '@vue/devtools-api@7.7.6':
     dependencies:
       '@vue/devtools-kit': 7.7.6
 
-  '@vue/devtools-core@7.7.6(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))':
-    dependencies:
-      '@vue/devtools-kit': 7.7.6
-      '@vue/devtools-shared': 7.7.6
-      mitt: 3.0.1
-      nanoid: 5.1.5
-      pathe: 2.0.3
-      vite-hot-client: 2.0.4(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
-      vue: 3.5.14(typescript@5.8.3)
-    transitivePeerDependencies:
-      - vite
-
   '@vue/devtools-kit@7.7.6':
     dependencies:
       '@vue/devtools-shared': 7.7.6
@@ -11910,19 +8816,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.1.6
 
-  '@vue/language-core@2.2.10(typescript@5.8.3)':
-    dependencies:
-      '@volar/language-core': 2.4.14
-      '@vue/compiler-dom': 3.5.14
-      '@vue/compiler-vue2': 2.7.16
-      '@vue/shared': 3.5.14
-      alien-signals: 1.0.13
-      minimatch: 9.0.5
-      muggle-string: 0.4.1
-      path-browserify: 1.0.1
-    optionalDependencies:
-      typescript: 5.8.3
-
   '@vue/reactivity@3.5.14':
     dependencies:
       '@vue/shared': 3.5.14
@@ -11988,34 +8881,6 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  '@whatwg-node/disposablestack@0.0.6':
-    dependencies:
-      '@whatwg-node/promise-helpers': 1.3.2
-      tslib: 2.8.1
-
-  '@whatwg-node/fetch@0.10.8':
-    dependencies:
-      '@whatwg-node/node-fetch': 0.7.21
-      urlpattern-polyfill: 10.1.0
-
-  '@whatwg-node/node-fetch@0.7.21':
-    dependencies:
-      '@fastify/busboy': 3.1.1
-      '@whatwg-node/disposablestack': 0.0.6
-      '@whatwg-node/promise-helpers': 1.3.2
-      tslib: 2.8.1
-
-  '@whatwg-node/promise-helpers@1.3.2':
-    dependencies:
-      tslib: 2.8.1
-
-  '@whatwg-node/server@0.9.71':
-    dependencies:
-      '@whatwg-node/disposablestack': 0.0.6
-      '@whatwg-node/fetch': 0.10.8
-      '@whatwg-node/promise-helpers': 1.3.2
-      tslib: 2.8.1
-
   '@wso2/eslint-plugin@https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?a1fc6eb570653c999828aea9f5027cba06af4391(eslint@8.57.0)(typescript@5.1.6)':
     dependencies:
       '@babel/core': 7.27.1
@@ -12119,28 +8984,19 @@ snapshots:
 
   abbrev@2.0.0: {}
 
-  abbrev@3.0.1: {}
-
-  abort-controller@3.0.0:
-    dependencies:
-      event-target-shim: 5.0.1
-
   accepts@2.0.0:
     dependencies:
       mime-types: 3.0.1
       negotiator: 1.0.0
 
-  acorn-import-attributes@1.9.5(acorn@8.14.1):
-    dependencies:
-      acorn: 8.14.1
-
   acorn-jsx@5.3.2(acorn@8.14.1):
     dependencies:
       acorn: 8.14.1
 
   acorn@8.14.1: {}
 
-  agent-base@7.1.3: {}
+  agent-base@7.1.3:
+    optional: true
 
   ajv@6.12.6:
     dependencies:
@@ -12188,35 +9044,6 @@ snapshots:
 
   ansi-styles@6.2.1: {}
 
-  ansis@3.17.0: {}
-
-  anymatch@3.1.3:
-    dependencies:
-      normalize-path: 3.0.0
-      picomatch: 2.3.1
-
-  archiver-utils@5.0.2:
-    dependencies:
-      glob: 10.4.5
-      graceful-fs: 4.2.11
-      is-stream: 2.0.1
-      lazystream: 1.0.1
-      lodash: 4.17.21
-      normalize-path: 3.0.0
-      readable-stream: 4.7.0
-
-  archiver@7.0.1:
-    dependencies:
-      archiver-utils: 5.0.2
-      async: 3.2.6
-      buffer-crc32: 1.0.0
-      readable-stream: 4.7.0
-      readdir-glob: 1.1.3
-      tar-stream: 3.1.7
-      zip-stream: 6.0.1
-
-  are-docs-informative@0.0.2: {}
-
   argparse@1.0.10:
     dependencies:
       sprintf-js: 1.0.3
@@ -12306,28 +9133,12 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
-  ast-kit@1.4.3:
-    dependencies:
-      '@babel/parser': 7.27.2
-      pathe: 2.0.3
-
-  ast-module-types@6.0.1: {}
-
   ast-types-flow@0.0.8: {}
 
-  ast-walker-scope@0.6.2:
-    dependencies:
-      '@babel/parser': 7.27.2
-      ast-kit: 1.4.3
-
   astral-regex@2.0.0: {}
 
   async-function@1.0.0: {}
 
-  async-sema@3.1.1: {}
-
-  async@3.2.6: {}
-
   asynckit@0.4.0: {}
 
   autoprefixer@10.4.21(postcss@8.5.3):
@@ -12364,15 +9175,10 @@ snapshots:
 
   axobject-query@4.1.0: {}
 
-  b4a@1.6.7: {}
-
   balanced-match@1.0.2: {}
 
   balanced-match@2.0.0: {}
 
-  bare-events@2.5.4:
-    optional: true
-
   base64-js@1.5.1: {}
 
   base64url@3.0.1: {}
@@ -12381,10 +9187,6 @@ snapshots:
     dependencies:
       is-windows: 1.0.2
 
-  bindings@1.5.0:
-    dependencies:
-      file-uri-to-path: 1.0.0
-
   birpc@2.3.0: {}
 
   bl@4.1.0:
@@ -12476,11 +9278,8 @@ snapshots:
       node-releases: 2.0.19
       update-browserslist-db: 1.1.3(browserslist@4.24.5)
 
-  buffer-crc32@0.2.13: {}
-
-  buffer-crc32@1.0.0: {}
-
-  buffer-from@1.1.2: {}
+  buffer-from@1.1.2:
+    optional: true
 
   buffer-xor@1.0.3: {}
 
@@ -12494,37 +9293,12 @@ snapshots:
       base64-js: 1.5.1
       ieee754: 1.2.1
 
-  builtin-modules@3.3.0: {}
-
-  builtin-modules@5.0.0: {}
-
-  bundle-name@4.1.0:
-    dependencies:
-      run-applescript: 7.0.0
-
   busboy@1.6.0:
     dependencies:
       streamsearch: 1.1.0
 
   bytes@3.1.2: {}
 
-  c12@3.0.4(magicast@0.3.5):
-    dependencies:
-      chokidar: 4.0.3
-      confbox: 0.2.2
-      defu: 6.1.4
-      dotenv: 16.5.0
-      exsolve: 1.0.5
-      giget: 2.0.0
-      jiti: 2.4.2
-      ohash: 2.0.11
-      pathe: 2.0.3
-      perfect-debounce: 1.0.0
-      pkg-types: 2.1.0
-      rc9: 2.1.2
-    optionalDependencies:
-      magicast: 0.3.5
-
   cac@6.7.14: {}
 
   call-bind-apply-helpers@1.0.2:
@@ -12544,8 +9318,6 @@ snapshots:
       call-bind-apply-helpers: 1.0.2
       get-intrinsic: 1.3.0
 
-  callsite@1.0.0: {}
-
   callsites@3.1.0: {}
 
   camelcase-keys@6.2.2:
@@ -12580,24 +9352,6 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
-  changelogen@0.6.1(magicast@0.3.5):
-    dependencies:
-      c12: 3.0.4(magicast@0.3.5)
-      confbox: 0.2.2
-      consola: 3.4.2
-      convert-gitmoji: 0.1.5
-      mri: 1.2.0
-      node-fetch-native: 1.6.6
-      ofetch: 1.4.1
-      open: 10.1.2
-      pathe: 2.0.3
-      pkg-types: 2.1.0
-      scule: 1.3.0
-      semver: 7.7.2
-      std-env: 3.9.0
-    transitivePeerDependencies:
-      - magicast
-
   character-entities-html4@2.1.0: {}
 
   character-entities-legacy@3.0.0: {}
@@ -12614,25 +9368,15 @@ snapshots:
 
   ci-info@3.9.0: {}
 
-  ci-info@4.2.0: {}
-
   cipher-base@1.0.6:
     dependencies:
       inherits: 2.0.4
       safe-buffer: 5.2.1
 
-  citty@0.1.6:
-    dependencies:
-      consola: 3.4.2
-
   class-variance-authority@0.7.1:
     dependencies:
       clsx: 2.1.1
 
-  clean-regexp@1.0.0:
-    dependencies:
-      escape-string-regexp: 1.0.5
-
   cli-cursor@3.1.0:
     dependencies:
       restore-cursor: 3.1.0
@@ -12641,12 +9385,6 @@ snapshots:
 
   client-only@0.0.1: {}
 
-  clipboardy@4.0.0:
-    dependencies:
-      execa: 8.0.1
-      is-wsl: 3.1.0
-      is64bit: 2.0.0
-
   cliui@8.0.1:
     dependencies:
       string-width: 4.2.3
@@ -12657,29 +9395,17 @@ snapshots:
 
   clsx@2.1.1: {}
 
-  cluster-key-slot@1.1.2: {}
-
-  color-convert@1.9.3:
-    dependencies:
-      color-name: 1.1.3
-
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
 
-  color-name@1.1.3: {}
-
   color-name@1.1.4: {}
 
   color-string@1.9.1:
     dependencies:
       color-name: 1.1.4
       simple-swizzle: 0.2.2
-
-  color@3.2.1:
-    dependencies:
-      color-convert: 1.9.3
-      color-string: 1.9.1
+    optional: true
 
   color@4.2.3:
     dependencies:
@@ -12689,11 +9415,6 @@ snapshots:
 
   colord@2.9.3: {}
 
-  colorspace@1.1.4:
-    dependencies:
-      color: 3.2.1
-      text-hex: 1.0.0
-
   combined-stream@1.0.8:
     dependencies:
       delayed-stream: 1.0.0
@@ -12702,28 +9423,16 @@ snapshots:
 
   commander@10.0.1: {}
 
-  commander@12.1.0: {}
-
-  commander@2.20.3: {}
+  commander@2.20.3:
+    optional: true
 
   commander@7.2.0: {}
 
-  comment-parser@1.4.1: {}
-
-  common-path-prefix@3.0.0: {}
+  comment-parser@1.4.1:
+    optional: true
 
   commondir@1.0.1: {}
 
-  compatx@0.2.0: {}
-
-  compress-commons@6.0.2:
-    dependencies:
-      crc-32: 1.2.2
-      crc32-stream: 6.0.0
-      is-stream: 2.0.1
-      normalize-path: 3.0.0
-      readable-stream: 4.7.0
-
   concat-map@0.0.1: {}
 
   confbox@0.1.8: {}
@@ -12737,41 +9446,22 @@ snapshots:
 
   confusing-browser-globals@1.0.11: {}
 
-  consola@3.4.2: {}
-
   content-disposition@1.0.0:
     dependencies:
       safe-buffer: 5.2.1
 
   content-type@1.0.5: {}
 
-  convert-gitmoji@0.1.5: {}
-
   convert-source-map@2.0.0: {}
 
-  cookie-es@1.2.2: {}
-
-  cookie-es@2.0.0: {}
-
   cookie-signature@1.2.2: {}
 
   cookie@0.7.2: {}
 
-  cookie@1.0.2: {}
-
   copy-anything@3.0.5:
     dependencies:
       is-what: 4.1.16
 
-  copy-file@11.0.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      p-event: 6.0.1
-
-  core-js-compat@3.42.0:
-    dependencies:
-      browserslist: 4.24.5
-
   core-js@3.42.0: {}
 
   core-util-is@1.0.3: {}
@@ -12793,13 +9483,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.1.6
 
-  crc-32@1.2.2: {}
-
-  crc32-stream@6.0.0:
-    dependencies:
-      crc-32: 1.2.2
-      readable-stream: 4.7.0
-
   create-ecdh@4.0.4:
     dependencies:
       bn.js: 4.12.2
@@ -12822,12 +9505,6 @@ snapshots:
       safe-buffer: 5.2.1
       sha.js: 2.4.11
 
-  cron-parser@4.9.0:
-    dependencies:
-      luxon: 3.6.1
-
-  croner@9.0.0: {}
-
   cross-fetch@4.1.0:
     dependencies:
       node-fetch: 2.7.0
@@ -12840,10 +9517,6 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
-  crossws@0.3.5:
-    dependencies:
-      uncrypto: 0.1.3
-
   crypto-browserify@3.12.1:
     dependencies:
       browserify-cipher: 1.0.1
@@ -12863,10 +9536,6 @@ snapshots:
     dependencies:
       postcss: 8.5.3
 
-  css-declaration-sorter@7.2.0(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-
   css-functions-list@3.2.3: {}
 
   css-select@4.3.0:
@@ -12877,24 +9546,11 @@ snapshots:
       domutils: 2.8.0
       nth-check: 2.1.1
 
-  css-select@5.1.0:
-    dependencies:
-      boolbase: 1.0.0
-      css-what: 6.1.0
-      domhandler: 5.0.3
-      domutils: 3.2.2
-      nth-check: 2.1.1
-
   css-tree@1.1.3:
     dependencies:
       mdn-data: 2.0.14
       source-map: 0.6.1
 
-  css-tree@2.2.1:
-    dependencies:
-      mdn-data: 2.0.28
-      source-map-js: 1.2.1
-
   css-tree@2.3.1:
     dependencies:
       mdn-data: 2.0.30
@@ -12937,48 +9593,10 @@ snapshots:
       postcss-svgo: 5.1.0(postcss@8.5.3)
       postcss-unique-selectors: 5.1.1(postcss@8.5.3)
 
-  cssnano-preset-default@7.0.7(postcss@8.5.3):
-    dependencies:
-      browserslist: 4.24.5
-      css-declaration-sorter: 7.2.0(postcss@8.5.3)
-      cssnano-utils: 5.0.1(postcss@8.5.3)
-      postcss: 8.5.3
-      postcss-calc: 10.1.1(postcss@8.5.3)
-      postcss-colormin: 7.0.3(postcss@8.5.3)
-      postcss-convert-values: 7.0.5(postcss@8.5.3)
-      postcss-discard-comments: 7.0.4(postcss@8.5.3)
-      postcss-discard-duplicates: 7.0.2(postcss@8.5.3)
-      postcss-discard-empty: 7.0.1(postcss@8.5.3)
-      postcss-discard-overridden: 7.0.1(postcss@8.5.3)
-      postcss-merge-longhand: 7.0.5(postcss@8.5.3)
-      postcss-merge-rules: 7.0.5(postcss@8.5.3)
-      postcss-minify-font-values: 7.0.1(postcss@8.5.3)
-      postcss-minify-gradients: 7.0.1(postcss@8.5.3)
-      postcss-minify-params: 7.0.3(postcss@8.5.3)
-      postcss-minify-selectors: 7.0.5(postcss@8.5.3)
-      postcss-normalize-charset: 7.0.1(postcss@8.5.3)
-      postcss-normalize-display-values: 7.0.1(postcss@8.5.3)
-      postcss-normalize-positions: 7.0.1(postcss@8.5.3)
-      postcss-normalize-repeat-style: 7.0.1(postcss@8.5.3)
-      postcss-normalize-string: 7.0.1(postcss@8.5.3)
-      postcss-normalize-timing-functions: 7.0.1(postcss@8.5.3)
-      postcss-normalize-unicode: 7.0.3(postcss@8.5.3)
-      postcss-normalize-url: 7.0.1(postcss@8.5.3)
-      postcss-normalize-whitespace: 7.0.1(postcss@8.5.3)
-      postcss-ordered-values: 7.0.2(postcss@8.5.3)
-      postcss-reduce-initial: 7.0.3(postcss@8.5.3)
-      postcss-reduce-transforms: 7.0.1(postcss@8.5.3)
-      postcss-svgo: 7.0.2(postcss@8.5.3)
-      postcss-unique-selectors: 7.0.4(postcss@8.5.3)
-
   cssnano-utils@3.1.0(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
 
-  cssnano-utils@5.0.1(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-
   cssnano@5.1.15(postcss@8.5.3):
     dependencies:
       cssnano-preset-default: 5.2.14(postcss@8.5.3)
@@ -12986,20 +9604,10 @@ snapshots:
       postcss: 8.5.3
       yaml: 1.10.2
 
-  cssnano@7.0.7(postcss@8.5.3):
-    dependencies:
-      cssnano-preset-default: 7.0.7(postcss@8.5.3)
-      lilconfig: 3.1.3
-      postcss: 8.5.3
-
   csso@4.2.0:
     dependencies:
       css-tree: 1.1.3
 
-  csso@5.0.5:
-    dependencies:
-      css-tree: 2.2.1
-
   cssstyle@4.3.1:
     dependencies:
       '@asamuzakjp/css-color': 3.1.7
@@ -13010,8 +9618,6 @@ snapshots:
 
   damerau-levenshtein@1.0.8: {}
 
-  data-uri-to-buffer@4.0.1: {}
-
   data-urls@5.0.0:
     dependencies:
       whatwg-mimetype: 4.0.0
@@ -13038,8 +9644,6 @@ snapshots:
 
   dataloader@1.4.0: {}
 
-  db0@0.3.2: {}
-
   de-indent@1.0.2: {}
 
   debug@3.2.7:
@@ -13050,10 +9654,6 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
-  decache@4.6.2:
-    dependencies:
-      callsite: 1.0.0
-
   decamelize-keys@1.1.1:
     dependencies:
       decamelize: 1.2.0
@@ -13072,13 +9672,6 @@ snapshots:
 
   deepmerge@4.3.1: {}
 
-  default-browser-id@5.0.0: {}
-
-  default-browser@5.2.1:
-    dependencies:
-      bundle-name: 4.1.0
-      default-browser-id: 5.0.0
-
   defaults@1.0.4:
     dependencies:
       clone: 1.0.4
@@ -13091,20 +9684,14 @@ snapshots:
 
   define-lazy-prop@2.0.0: {}
 
-  define-lazy-prop@3.0.0: {}
-
   define-properties@1.2.1:
     dependencies:
       define-data-property: 1.1.4
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
-  defu@6.1.4: {}
-
   delayed-stream@1.0.0: {}
 
-  denque@2.1.0: {}
-
   depd@2.0.0: {}
 
   dequal@2.0.3: {}
@@ -13114,80 +9701,19 @@ snapshots:
       inherits: 2.0.4
       minimalistic-assert: 1.0.1
 
-  destr@2.0.5: {}
-
   detect-indent@6.1.0: {}
 
-  detect-libc@1.0.3: {}
+  detect-libc@1.0.3:
+    optional: true
 
   detect-libc@2.0.4: {}
 
-  detective-amd@6.0.1:
-    dependencies:
-      ast-module-types: 6.0.1
-      escodegen: 2.1.0
-      get-amd-module-type: 6.0.1
-      node-source-walk: 7.0.1
-
-  detective-cjs@6.0.1:
-    dependencies:
-      ast-module-types: 6.0.1
-      node-source-walk: 7.0.1
-
-  detective-es6@5.0.1:
-    dependencies:
-      node-source-walk: 7.0.1
-
-  detective-postcss@7.0.1(postcss@8.5.3):
-    dependencies:
-      is-url: 1.2.4
-      postcss: 8.5.3
-      postcss-values-parser: 6.0.2(postcss@8.5.3)
-
-  detective-sass@6.0.1:
-    dependencies:
-      gonzales-pe: 4.3.0
-      node-source-walk: 7.0.1
-
-  detective-scss@5.0.1:
-    dependencies:
-      gonzales-pe: 4.3.0
-      node-source-walk: 7.0.1
-
-  detective-stylus@5.0.1: {}
-
-  detective-typescript@14.0.0(typescript@5.8.3):
-    dependencies:
-      '@typescript-eslint/typescript-estree': 8.33.1(typescript@5.8.3)
-      ast-module-types: 6.0.1
-      node-source-walk: 7.0.1
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
-  detective-vue2@2.2.0(typescript@5.8.3):
-    dependencies:
-      '@dependents/detective-less': 5.0.1
-      '@vue/compiler-sfc': 3.5.14
-      detective-es6: 5.0.1
-      detective-sass: 6.0.1
-      detective-scss: 5.0.1
-      detective-stylus: 5.0.1
-      detective-typescript: 14.0.0(typescript@5.8.3)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
-  devalue@5.1.1: {}
-
   devlop@1.1.0:
     dependencies:
       dequal: 2.0.3
 
   diff-sequences@29.6.3: {}
 
-  diff@7.0.0: {}
-
   diffie-hellman@5.0.3:
     dependencies:
       bn.js: 4.12.2
@@ -13214,12 +9740,6 @@ snapshots:
       domhandler: 4.3.1
       entities: 2.2.0
 
-  dom-serializer@2.0.0:
-    dependencies:
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-      entities: 4.5.0
-
   dom-walk@0.1.2: {}
 
   domelementtype@2.3.0: {}
@@ -13228,34 +9748,18 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
-  domhandler@5.0.3:
-    dependencies:
-      domelementtype: 2.3.0
-
-  domutils@2.8.0:
+  domutils@2.8.0:
     dependencies:
       dom-serializer: 1.4.1
       domelementtype: 2.3.0
       domhandler: 4.3.1
 
-  domutils@3.2.2:
-    dependencies:
-      dom-serializer: 2.0.0
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-
-  dot-prop@9.0.0:
-    dependencies:
-      type-fest: 4.41.0
-
   dotenv-expand@11.0.7:
     dependencies:
       dotenv: 16.4.7
 
   dotenv@16.4.7: {}
 
-  dotenv@16.5.0: {}
-
   dotenv@8.6.0: {}
 
   dunder-proto@1.0.1:
@@ -13264,8 +9768,6 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
-  duplexer@0.1.2: {}
-
   eastasianwidth@0.2.0: {}
 
   editorconfig@1.0.4:
@@ -13295,8 +9797,6 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
-  enabled@2.0.0: {}
-
   encodeurl@2.0.0: {}
 
   end-of-stream@1.4.4:
@@ -13324,16 +9824,10 @@ snapshots:
   entities@6.0.0:
     optional: true
 
-  env-paths@3.0.0: {}
-
   error-ex@1.3.2:
     dependencies:
       is-arrayish: 0.2.1
 
-  error-stack-parser-es@1.0.5: {}
-
-  errx@0.1.0: {}
-
   es-abstract@1.23.9:
     dependencies:
       array-buffer-byte-length: 1.0.2
@@ -13513,16 +10007,6 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
-  escape-string-regexp@5.0.0: {}
-
-  escodegen@2.1.0:
-    dependencies:
-      esprima: 4.0.1
-      estraverse: 5.3.0
-      esutils: 2.0.3
-    optionalDependencies:
-      source-map: 0.6.1
-
   eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
       confusing-browser-globals: 1.0.11
@@ -13579,11 +10063,6 @@ snapshots:
       object.assign: 4.1.7
       object.entries: 1.1.9
 
-  eslint-config-flat-gitignore@2.1.0(eslint@8.57.0):
-    dependencies:
-      '@eslint/compat': 1.2.9(eslint@8.57.0)
-      eslint: 8.57.0
-
   eslint-config-next@15.3.2(eslint-plugin-import-x@4.12.2(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3):
     dependencies:
       '@next/eslint-plugin-next': 15.3.2
@@ -13608,10 +10087,6 @@ snapshots:
     dependencies:
       eslint: 8.57.0
 
-  eslint-flat-config-utils@2.1.0:
-    dependencies:
-      pathe: 2.0.3
-
   eslint-import-resolver-node@0.3.9:
     dependencies:
       debug: 3.2.7
@@ -13636,10 +10111,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-merge-processors@2.0.0(eslint@8.57.0):
-    dependencies:
-      eslint: 8.57.0
-
   eslint-module-utils@2.12.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint@8.57.0):
     dependencies:
       debug: 3.2.7
@@ -13687,27 +10158,9 @@ snapshots:
     dependencies:
       eslint: 8.57.0
 
-  eslint-plugin-import-x@4.12.2(eslint@8.57.0)(typescript@5.8.3):
-    dependencies:
-      '@typescript-eslint/utils': 8.32.1(eslint@8.57.0)(typescript@5.8.3)
-      comment-parser: 1.4.1
-      debug: 4.4.1
-      eslint: 8.57.0
-      eslint-import-resolver-node: 0.3.9
-      get-tsconfig: 4.10.1
-      is-glob: 4.0.3
-      minimatch: 10.0.1
-      semver: 7.7.2
-      stable-hash: 0.0.5
-      tslib: 2.8.1
-      unrs-resolver: 1.7.2
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
   eslint-plugin-import-x@4.12.2(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3):
     dependencies:
-      '@typescript-eslint/utils': 8.32.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.33.1(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3)
       comment-parser: 1.4.1
       debug: 4.4.1
       eslint: 9.28.0(jiti@2.4.2)
@@ -13831,22 +10284,6 @@ snapshots:
       - supports-color
       - typescript
 
-  eslint-plugin-jsdoc@50.6.17(eslint@8.57.0):
-    dependencies:
-      '@es-joy/jsdoccomment': 0.50.2
-      are-docs-informative: 0.0.2
-      comment-parser: 1.4.1
-      debug: 4.4.1
-      escape-string-regexp: 4.0.0
-      eslint: 8.57.0
-      espree: 10.3.0
-      esquery: 1.6.0
-      parse-imports-exports: 0.2.4
-      semver: 7.7.2
-      spdx-expression-parse: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-
   eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.0):
     dependencies:
       aria-query: 5.3.2
@@ -13968,17 +10405,6 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-regexp@2.7.0(eslint@8.57.0):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@8.57.0)
-      '@eslint-community/regexpp': 4.12.1
-      comment-parser: 1.4.1
-      eslint: 8.57.0
-      jsdoc-type-pratt-parser: 4.1.0
-      refa: 0.12.1
-      regexp-ast-analysis: 0.7.1
-      scslre: 0.3.0
-
   eslint-plugin-testing-library@5.11.1(eslint@8.57.0)(typescript@5.1.6):
     dependencies:
       '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.1.6)
@@ -14022,27 +10448,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-unicorn@59.0.1(eslint@8.57.0):
-    dependencies:
-      '@babel/helper-validator-identifier': 7.27.1
-      '@eslint-community/eslint-utils': 4.7.0(eslint@8.57.0)
-      '@eslint/plugin-kit': 0.2.8
-      ci-info: 4.2.0
-      clean-regexp: 1.0.0
-      core-js-compat: 3.42.0
-      eslint: 8.57.0
-      esquery: 1.6.0
-      find-up-simple: 1.0.1
-      globals: 16.1.0
-      indent-string: 5.0.0
-      is-builtin-module: 5.0.0
-      jsesc: 3.1.0
-      pluralize: 8.0.0
-      regexp-tree: 0.1.27
-      regjsparser: 0.12.0
-      semver: 7.7.2
-      strip-indent: 4.0.0
-
   eslint-plugin-vue@10.1.0(eslint@8.57.0)(vue-eslint-parser@10.1.3(eslint@8.57.0)):
     dependencies:
       '@eslint-community/eslint-utils': 4.7.0(eslint@8.57.0)
@@ -14054,11 +10459,6 @@ snapshots:
       vue-eslint-parser: 10.1.3(eslint@8.57.0)
       xml-name-validator: 4.0.0
 
-  eslint-processor-vue-blocks@2.0.0(@vue/compiler-sfc@3.5.14)(eslint@8.57.0):
-    dependencies:
-      '@vue/compiler-sfc': 3.5.14
-      eslint: 8.57.0
-
   eslint-scope@5.1.1:
     dependencies:
       esrecurse: 4.3.0
@@ -14212,29 +10612,13 @@ snapshots:
 
   etag@1.8.1: {}
 
-  event-target-shim@5.0.1: {}
-
   eventemitter3@4.0.7: {}
 
-  events@3.3.0: {}
-
   evp_bytestokey@1.0.3:
     dependencies:
       md5.js: 1.3.5
       safe-buffer: 5.2.1
 
-  execa@8.0.1:
-    dependencies:
-      cross-spawn: 7.0.6
-      get-stream: 8.0.1
-      human-signals: 5.0.0
-      is-stream: 3.0.0
-      merge-stream: 2.0.0
-      npm-run-path: 5.3.0
-      onetime: 6.0.0
-      signal-exit: 4.1.0
-      strip-final-newline: 3.0.0
-
   expect-type@1.2.1: {}
 
   express@5.1.0:
@@ -14279,31 +10663,10 @@ snapshots:
       iconv-lite: 0.4.24
       tmp: 0.0.33
 
-  externality@1.0.2:
-    dependencies:
-      enhanced-resolve: 5.18.1
-      mlly: 1.7.4
-      pathe: 1.1.2
-      ufo: 1.6.1
-
-  extract-zip@2.0.1:
-    dependencies:
-      debug: 4.4.1
-      get-stream: 5.2.0
-      yauzl: 2.10.0
-    optionalDependencies:
-      '@types/yauzl': 2.10.3
-    transitivePeerDependencies:
-      - supports-color
-
-  fake-indexeddb@6.0.1: {}
-
   fast-deep-equal@3.1.3: {}
 
   fast-diff@1.3.0: {}
 
-  fast-fifo@1.3.2: {}
-
   fast-glob@3.3.1:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -14324,8 +10687,6 @@ snapshots:
 
   fast-levenshtein@2.0.6: {}
 
-  fast-npm-meta@0.4.3: {}
-
   fast-sha256@1.3.0: {}
 
   fast-uri@3.0.6: {}
@@ -14336,21 +10697,10 @@ snapshots:
     dependencies:
       reusify: 1.1.0
 
-  fd-slicer@1.1.0:
-    dependencies:
-      pend: 1.2.0
-
   fdir@6.4.4(picomatch@4.0.2):
     optionalDependencies:
       picomatch: 4.0.2
 
-  fecha@4.2.3: {}
-
-  fetch-blob@3.2.0:
-    dependencies:
-      node-domexception: 1.0.0
-      web-streams-polyfill: 3.3.3
-
   figures@3.2.0:
     dependencies:
       escape-string-regexp: 1.0.5
@@ -14363,16 +10713,12 @@ snapshots:
     dependencies:
       flat-cache: 4.0.1
 
-  file-uri-to-path@1.0.0: {}
-
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
 
   filter-obj@1.1.0: {}
 
-  filter-obj@6.1.0: {}
-
   finalhandler@2.1.0:
     dependencies:
       debug: 4.4.1
@@ -14384,8 +10730,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  find-up-simple@1.0.1: {}
-
   find-up@4.1.0:
     dependencies:
       locate-path: 5.0.0
@@ -14396,18 +10740,6 @@ snapshots:
       locate-path: 6.0.0
       path-exists: 4.0.0
 
-  find-up@7.0.0:
-    dependencies:
-      locate-path: 7.2.0
-      path-exists: 5.0.0
-      unicorn-magic: 0.1.0
-
-  fix-dts-default-cjs-exports@1.0.1:
-    dependencies:
-      magic-string: 0.30.17
-      mlly: 1.7.4
-      rollup: 4.40.2
-
   flat-cache@3.2.0:
     dependencies:
       flatted: 3.3.3
@@ -14423,8 +10755,6 @@ snapshots:
 
   flatted@3.3.3: {}
 
-  fn.name@1.1.0: {}
-
   focus-trap@7.6.4:
     dependencies:
       tabbable: 6.2.0
@@ -14447,10 +10777,6 @@ snapshots:
       es-set-tostringtag: 2.1.0
       mime-types: 2.1.35
 
-  formdata-polyfill@4.0.10:
-    dependencies:
-      fetch-blob: 3.2.0
-
   forwarded@0.2.0: {}
 
   fraction.js@4.3.7: {}
@@ -14502,15 +10828,11 @@ snapshots:
 
   functions-have-names@1.2.3: {}
 
-  fuse.js@7.1.0: {}
+  fuse.js@7.1.0:
+    optional: true
 
   gensync@1.0.0-beta.2: {}
 
-  get-amd-module-type@6.0.1:
-    dependencies:
-      ast-module-types: 6.0.1
-      node-source-walk: 7.0.1
-
   get-caller-file@2.0.5: {}
 
   get-intrinsic@1.3.0:
@@ -14526,8 +10848,6 @@ snapshots:
       hasown: 2.0.2
       math-intrinsics: 1.1.0
 
-  get-port-please@3.1.2: {}
-
   get-proto@1.0.1:
     dependencies:
       dunder-proto: 1.0.1
@@ -14537,12 +10857,6 @@ snapshots:
     dependencies:
       global: 4.4.0
 
-  get-stream@5.2.0:
-    dependencies:
-      pump: 3.0.2
-
-  get-stream@8.0.1: {}
-
   get-symbol-description@1.1.0:
     dependencies:
       call-bound: 1.0.4
@@ -14553,24 +10867,6 @@ snapshots:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
-  giget@2.0.0:
-    dependencies:
-      citty: 0.1.6
-      consola: 3.4.2
-      defu: 6.1.4
-      node-fetch-native: 1.6.6
-      nypm: 0.6.0
-      pathe: 2.0.3
-
-  git-up@8.1.1:
-    dependencies:
-      is-ssh: 1.4.1
-      parse-url: 9.2.0
-
-  git-url-parse@16.1.0:
-    dependencies:
-      git-up: 8.1.1
-
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -14623,10 +10919,6 @@ snapshots:
       minimatch: 5.1.6
       once: 1.4.0
 
-  global-directory@4.0.1:
-    dependencies:
-      ini: 4.1.1
-
   global-modules@2.0.0:
     dependencies:
       global-prefix: 3.0.0
@@ -14666,43 +10958,14 @@ snapshots:
       merge2: 1.4.1
       slash: 3.0.0
 
-  globby@14.1.0:
-    dependencies:
-      '@sindresorhus/merge-streams': 2.3.0
-      fast-glob: 3.3.3
-      ignore: 7.0.4
-      path-type: 6.0.0
-      slash: 5.1.0
-      unicorn-magic: 0.3.0
-
   globjoin@0.1.4: {}
 
-  gonzales-pe@4.3.0:
-    dependencies:
-      minimist: 1.2.8
-
   gopd@1.2.0: {}
 
   graceful-fs@4.2.11: {}
 
   graphemer@1.4.0: {}
 
-  gzip-size@7.0.0:
-    dependencies:
-      duplexer: 0.1.2
-
-  h3@1.15.3:
-    dependencies:
-      cookie-es: 1.2.2
-      crossws: 0.3.5
-      defu: 6.1.4
-      destr: 2.0.5
-      iron-webcrypto: 1.2.1
-      node-mock-http: 1.0.0
-      radix3: 1.1.2
-      ufo: 1.6.1
-      uncrypto: 0.1.3
-
   hard-rejection@2.1.0: {}
 
   has-bigints@1.1.0: {}
@@ -14771,10 +11034,6 @@ snapshots:
     dependencies:
       lru-cache: 6.0.0
 
-  hosted-git-info@7.0.2:
-    dependencies:
-      lru-cache: 10.4.3
-
   html-encoding-sniffer@4.0.0:
     dependencies:
       whatwg-encoding: 3.1.1
@@ -14802,21 +11061,16 @@ snapshots:
       - supports-color
     optional: true
 
-  http-shutdown@1.2.2: {}
-
   https-proxy-agent@7.0.6:
     dependencies:
       agent-base: 7.1.3
       debug: 4.4.1
     transitivePeerDependencies:
       - supports-color
-
-  httpxy@0.1.7: {}
+    optional: true
 
   human-id@4.1.1: {}
 
-  human-signals@5.0.0: {}
-
   iconv-lite@0.4.24:
     dependencies:
       safer-buffer: 2.1.2
@@ -14835,8 +11089,6 @@ snapshots:
 
   ignore@7.0.4: {}
 
-  image-meta@0.2.1: {}
-
   immutable@5.1.2: {}
 
   import-fresh@3.3.1:
@@ -14848,22 +11100,10 @@ snapshots:
 
   import-meta-resolve@3.1.1: {}
 
-  impound@1.0.0:
-    dependencies:
-      exsolve: 1.0.5
-      mocked-exports: 0.1.1
-      pathe: 2.0.3
-      unplugin: 2.3.4
-      unplugin-utils: 0.2.4
-
   imurmurhash@0.1.4: {}
 
   indent-string@4.0.0: {}
 
-  indent-string@5.0.0: {}
-
-  index-to-position@1.1.0: {}
-
   inflight@1.0.6:
     dependencies:
       once: 1.4.0
@@ -14873,32 +11113,14 @@ snapshots:
 
   ini@1.3.8: {}
 
-  ini@4.1.1: {}
-
   internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0
       hasown: 2.0.2
       side-channel: 1.1.0
 
-  ioredis@5.6.1:
-    dependencies:
-      '@ioredis/commands': 1.2.0
-      cluster-key-slot: 1.1.2
-      debug: 4.4.1
-      denque: 2.1.0
-      lodash.defaults: 4.2.0
-      lodash.isarguments: 3.1.0
-      redis-errors: 1.2.0
-      redis-parser: 3.0.0
-      standard-as-callback: 2.1.0
-    transitivePeerDependencies:
-      - supports-color
-
   ipaddr.js@1.9.1: {}
 
-  iron-webcrypto@1.2.1: {}
-
   is-array-buffer@3.0.5:
     dependencies:
       call-bind: 1.0.8
@@ -14907,7 +11129,8 @@ snapshots:
 
   is-arrayish@0.2.1: {}
 
-  is-arrayish@0.3.2: {}
+  is-arrayish@0.3.2:
+    optional: true
 
   is-async-function@2.1.1:
     dependencies:
@@ -14926,14 +11149,6 @@ snapshots:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
-  is-builtin-module@3.2.1:
-    dependencies:
-      builtin-modules: 3.3.0
-
-  is-builtin-module@5.0.0:
-    dependencies:
-      builtin-modules: 5.0.0
-
   is-bun-module@2.0.0:
     dependencies:
       semver: 7.7.2
@@ -14957,8 +11172,6 @@ snapshots:
 
   is-docker@2.2.1: {}
 
-  is-docker@3.0.0: {}
-
   is-extglob@2.1.1: {}
 
   is-finalizationregistry@1.1.1:
@@ -14978,15 +11191,6 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
-  is-inside-container@1.0.0:
-    dependencies:
-      is-docker: 3.0.0
-
-  is-installed-globally@1.0.0:
-    dependencies:
-      global-directory: 4.0.1
-      is-path-inside: 4.0.0
-
   is-interactive@1.0.0: {}
 
   is-map@2.0.3: {}
@@ -15002,12 +11206,8 @@ snapshots:
 
   is-path-inside@3.0.3: {}
 
-  is-path-inside@4.0.0: {}
-
   is-plain-obj@1.1.0: {}
 
-  is-plain-obj@2.1.0: {}
-
   is-plain-object@5.0.0: {}
 
   is-potential-custom-element-name@1.0.1:
@@ -15032,16 +11232,6 @@ snapshots:
     dependencies:
       call-bound: 1.0.4
 
-  is-ssh@1.4.1:
-    dependencies:
-      protocols: 2.0.2
-
-  is-stream@2.0.1: {}
-
-  is-stream@3.0.0: {}
-
-  is-stream@4.0.1: {}
-
   is-string@1.1.1:
     dependencies:
       call-bound: 1.0.4
@@ -15063,10 +11253,6 @@ snapshots:
 
   is-unicode-supported@0.1.0: {}
 
-  is-url-superb@4.0.0: {}
-
-  is-url@1.2.4: {}
-
   is-weakmap@2.0.2: {}
 
   is-weakref@1.1.1:
@@ -15086,22 +11272,12 @@ snapshots:
     dependencies:
       is-docker: 2.2.1
 
-  is-wsl@3.1.0:
-    dependencies:
-      is-inside-container: 1.0.0
-
-  is64bit@2.0.0:
-    dependencies:
-      system-architecture: 0.1.0
-
   isarray@1.0.0: {}
 
   isarray@2.0.5: {}
 
   isexe@2.0.0: {}
 
-  isexe@3.1.1: {}
-
   istanbul-lib-coverage@3.2.2: {}
 
   istanbul-lib-report@3.0.1:
@@ -15151,8 +11327,6 @@ snapshots:
 
   jest-get-type@29.6.3: {}
 
-  jiti@1.21.7: {}
-
   jiti@2.4.2: {}
 
   jju@1.4.0: {}
@@ -15175,8 +11349,6 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
-  js-tokens@9.0.1: {}
-
   js-yaml@3.14.1:
     dependencies:
       argparse: 1.0.10
@@ -15186,8 +11358,6 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
-  jsdoc-type-pratt-parser@4.1.0: {}
-
   jsdom@26.1.0:
     dependencies:
       cssstyle: 4.3.1
@@ -15216,8 +11386,6 @@ snapshots:
       - utf-8-validate
     optional: true
 
-  jsesc@3.0.2: {}
-
   jsesc@3.1.0: {}
 
   json-buffer@3.0.1: {}
@@ -15257,9 +11425,8 @@ snapshots:
       object.assign: 4.1.7
       object.values: 1.2.1
 
-  junk@4.0.1: {}
-
-  jwt-decode@4.0.0: {}
+  jwt-decode@4.0.0:
+    optional: true
 
   keyv@4.5.4:
     dependencies:
@@ -15267,39 +11434,14 @@ snapshots:
 
   kind-of@6.0.3: {}
 
-  kleur@3.0.3: {}
-
-  kleur@4.1.5: {}
-
-  klona@2.0.6: {}
-
-  knitwork@1.2.0: {}
-
   known-css-properties@0.26.0: {}
 
-  kuler@2.0.0: {}
-
-  lambda-local@2.2.0:
-    dependencies:
-      commander: 10.0.1
-      dotenv: 16.4.7
-      winston: 3.17.0
-
   language-subtag-registry@0.3.23: {}
 
   language-tags@1.0.9:
     dependencies:
       language-subtag-registry: 0.3.23
 
-  launch-editor@2.10.0:
-    dependencies:
-      picocolors: 1.1.1
-      shell-quote: 1.8.2
-
-  lazystream@1.0.1:
-    dependencies:
-      readable-stream: 2.3.8
-
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
@@ -15352,33 +11494,10 @@ snapshots:
 
   lilconfig@2.1.0: {}
 
-  lilconfig@3.1.3: {}
-
   lines-and-columns@1.2.4: {}
 
   lines-and-columns@2.0.3: {}
 
-  listhen@1.9.0:
-    dependencies:
-      '@parcel/watcher': 2.5.1
-      '@parcel/watcher-wasm': 2.5.1
-      citty: 0.1.6
-      clipboardy: 4.0.0
-      consola: 3.4.2
-      crossws: 0.3.5
-      defu: 6.1.4
-      get-port-please: 3.1.2
-      h3: 1.15.3
-      http-shutdown: 1.2.2
-      jiti: 2.4.2
-      mlly: 1.7.4
-      node-forge: 1.3.1
-      pathe: 1.1.2
-      std-env: 3.9.0
-      ufo: 1.6.1
-      untun: 0.1.3
-      uqr: 0.1.2
-
   local-pkg@1.1.1:
     dependencies:
       mlly: 1.7.4
@@ -15393,18 +11512,6 @@ snapshots:
     dependencies:
       p-locate: 5.0.0
 
-  locate-path@7.2.0:
-    dependencies:
-      p-locate: 6.0.0
-
-  lodash-es@4.17.21: {}
-
-  lodash.debounce@4.0.8: {}
-
-  lodash.defaults@4.2.0: {}
-
-  lodash.isarguments@3.1.0: {}
-
   lodash.isempty@4.4.0: {}
 
   lodash.memoize@4.1.2: {}
@@ -15424,15 +11531,6 @@ snapshots:
       chalk: 4.1.2
       is-unicode-supported: 0.1.0
 
-  logform@2.7.0:
-    dependencies:
-      '@colors/colors': 1.6.0
-      '@types/triple-beam': 1.3.5
-      fecha: 4.2.3
-      ms: 2.1.3
-      safe-stable-stringify: 2.5.0
-      triple-beam: 1.4.1
-
   loose-envify@1.4.0:
     dependencies:
       js-tokens: 4.0.0
@@ -15455,24 +11553,8 @@ snapshots:
     dependencies:
       react: 19.1.0
 
-  luxon@3.6.1: {}
-
   lz-string@1.5.0: {}
 
-  magic-regexp@0.8.0:
-    dependencies:
-      estree-walker: 3.0.3
-      magic-string: 0.30.17
-      mlly: 1.7.4
-      regexp-tree: 0.1.27
-      type-level-regexp: 0.1.17
-      ufo: 1.6.1
-      unplugin: 1.16.1
-
-  magic-string-ast@0.7.1:
-    dependencies:
-      magic-string: 0.30.17
-
   magic-string@0.30.17:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -15517,8 +11599,6 @@ snapshots:
 
   mdn-data@2.0.14: {}
 
-  mdn-data@2.0.28: {}
-
   mdn-data@2.0.30: {}
 
   media-typer@1.1.0: {}
@@ -15542,16 +11622,8 @@ snapshots:
 
   merge-descriptors@2.0.0: {}
 
-  merge-options@3.0.4:
-    dependencies:
-      is-plain-obj: 2.1.0
-
-  merge-stream@2.0.0: {}
-
   merge2@1.4.1: {}
 
-  micro-api-client@3.3.0: {}
-
   micromark-util-character@2.1.1:
     dependencies:
       micromark-util-symbol: 2.0.1
@@ -15591,14 +11663,8 @@ snapshots:
     dependencies:
       mime-db: 1.54.0
 
-  mime@3.0.0: {}
-
-  mime@4.0.7: {}
-
   mimic-fn@2.1.0: {}
 
-  mimic-fn@4.0.0: {}
-
   min-document@2.19.0:
     dependencies:
       dom-walk: 0.1.2
@@ -15655,42 +11721,13 @@ snapshots:
 
   mkdirp@3.0.1: {}
 
-  mkdist@2.3.0(sass@1.89.0)(typescript@5.8.3)(vue-sfc-transformer@0.1.16(@vue/compiler-core@3.5.14)(esbuild@0.25.4)(vue@3.5.14(typescript@5.8.3)))(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3)):
+  mlly@1.7.4:
     dependencies:
-      autoprefixer: 10.4.21(postcss@8.5.3)
-      citty: 0.1.6
-      cssnano: 7.0.7(postcss@8.5.3)
-      defu: 6.1.4
-      esbuild: 0.25.4
-      jiti: 1.21.7
-      mlly: 1.7.4
-      pathe: 2.0.3
-      pkg-types: 2.1.0
-      postcss: 8.5.3
-      postcss-nested: 7.0.2(postcss@8.5.3)
-      semver: 7.7.2
-      tinyglobby: 0.2.13
-    optionalDependencies:
-      sass: 1.89.0
-      typescript: 5.8.3
-      vue: 3.5.14(typescript@5.8.3)
-      vue-sfc-transformer: 0.1.16(@vue/compiler-core@3.5.14)(esbuild@0.25.4)(vue@3.5.14(typescript@5.8.3))
-      vue-tsc: 2.2.10(typescript@5.8.3)
-
-  mlly@1.7.4:
-    dependencies:
-      acorn: 8.14.1
+      acorn: 8.14.1
       pathe: 2.0.3
       pkg-types: 1.3.1
       ufo: 1.6.1
 
-  mocked-exports@0.1.1: {}
-
-  module-definition@6.0.1:
-    dependencies:
-      ast-module-types: 6.0.1
-      node-source-walk: 7.0.1
-
   mri@1.2.0: {}
 
   mrmime@2.0.1: {}
@@ -15701,10 +11738,6 @@ snapshots:
 
   nanoid@3.3.11: {}
 
-  nanoid@5.1.5: {}
-
-  nanotar@0.2.0: {}
-
   napi-postinstall@0.2.4: {}
 
   natural-compare-lite@1.4.0: {}
@@ -15713,15 +11746,6 @@ snapshots:
 
   negotiator@1.0.0: {}
 
-  netlify@13.3.5:
-    dependencies:
-      '@netlify/open-api': 2.37.0
-      lodash-es: 4.17.21
-      micro-api-client: 3.3.0
-      node-fetch: 3.3.2
-      p-wait-for: 5.0.2
-      qs: 6.14.0
-
   next@15.3.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.89.0):
     dependencies:
       '@next/env': 15.3.2
@@ -15748,144 +11772,21 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
-  nitropack@2.11.12:
-    dependencies:
-      '@cloudflare/kv-asset-handler': 0.4.0
-      '@netlify/functions': 3.1.9(rollup@4.40.2)
-      '@rollup/plugin-alias': 5.1.1(rollup@4.40.2)
-      '@rollup/plugin-commonjs': 28.0.3(rollup@4.40.2)
-      '@rollup/plugin-inject': 5.0.5(rollup@4.40.2)
-      '@rollup/plugin-json': 6.1.0(rollup@4.40.2)
-      '@rollup/plugin-node-resolve': 16.0.1(rollup@4.40.2)
-      '@rollup/plugin-replace': 6.0.2(rollup@4.40.2)
-      '@rollup/plugin-terser': 0.4.4(rollup@4.40.2)
-      '@vercel/nft': 0.29.3(rollup@4.40.2)
-      archiver: 7.0.1
-      c12: 3.0.4(magicast@0.3.5)
-      chokidar: 4.0.3
-      citty: 0.1.6
-      compatx: 0.2.0
-      confbox: 0.2.2
-      consola: 3.4.2
-      cookie-es: 2.0.0
-      croner: 9.0.0
-      crossws: 0.3.5
-      db0: 0.3.2
-      defu: 6.1.4
-      destr: 2.0.5
-      dot-prop: 9.0.0
-      esbuild: 0.25.4
-      escape-string-regexp: 5.0.0
-      etag: 1.8.1
-      exsolve: 1.0.5
-      globby: 14.1.0
-      gzip-size: 7.0.0
-      h3: 1.15.3
-      hookable: 5.5.3
-      httpxy: 0.1.7
-      ioredis: 5.6.1
-      jiti: 2.4.2
-      klona: 2.0.6
-      knitwork: 1.2.0
-      listhen: 1.9.0
-      magic-string: 0.30.17
-      magicast: 0.3.5
-      mime: 4.0.7
-      mlly: 1.7.4
-      node-fetch-native: 1.6.6
-      node-mock-http: 1.0.0
-      ofetch: 1.4.1
-      ohash: 2.0.11
-      pathe: 2.0.3
-      perfect-debounce: 1.0.0
-      pkg-types: 2.1.0
-      pretty-bytes: 6.1.1
-      radix3: 1.1.2
-      rollup: 4.40.2
-      rollup-plugin-visualizer: 5.14.0(rollup@4.40.2)
-      scule: 1.3.0
-      semver: 7.7.2
-      serve-placeholder: 2.0.2
-      serve-static: 2.2.0
-      source-map: 0.7.4
-      std-env: 3.9.0
-      ufo: 1.6.1
-      ultrahtml: 1.6.0
-      uncrypto: 0.1.3
-      unctx: 2.4.1
-      unenv: 2.0.0-rc.17
-      unimport: 5.0.1
-      unplugin-utils: 0.2.4
-      unstorage: 1.16.0(db0@0.3.2)(ioredis@5.6.1)
-      untyped: 2.0.0
-      unwasm: 0.3.9
-      youch: 4.1.0-beta.7
-      youch-core: 0.3.2
-    transitivePeerDependencies:
-      - '@azure/app-configuration'
-      - '@azure/cosmos'
-      - '@azure/data-tables'
-      - '@azure/identity'
-      - '@azure/keyvault-secrets'
-      - '@azure/storage-blob'
-      - '@capacitor/preferences'
-      - '@deno/kv'
-      - '@electric-sql/pglite'
-      - '@libsql/client'
-      - '@netlify/blobs'
-      - '@planetscale/database'
-      - '@upstash/redis'
-      - '@vercel/blob'
-      - '@vercel/kv'
-      - aws4fetch
-      - better-sqlite3
-      - drizzle-orm
-      - encoding
-      - idb-keyval
-      - mysql2
-      - rolldown
-      - sqlite3
-      - supports-color
-      - uploadthing
-
-  node-addon-api@7.1.1: {}
-
-  node-domexception@1.0.0: {}
-
-  node-fetch-native@1.6.6: {}
+  node-addon-api@7.1.1:
+    optional: true
 
   node-fetch@2.7.0:
     dependencies:
       whatwg-url: 5.0.0
 
-  node-fetch@3.3.2:
-    dependencies:
-      data-uri-to-buffer: 4.0.1
-      fetch-blob: 3.2.0
-      formdata-polyfill: 4.0.10
-
-  node-forge@1.3.1: {}
-
-  node-gyp-build@4.8.4: {}
-
   node-machine-id@1.1.12: {}
 
-  node-mock-http@1.0.0: {}
-
   node-releases@2.0.19: {}
 
-  node-source-walk@7.0.1:
-    dependencies:
-      '@babel/parser': 7.27.2
-
   nopt@7.2.1:
     dependencies:
       abbrev: 2.0.0
 
-  nopt@8.1.0:
-    dependencies:
-      abbrev: 3.0.1
-
   normalize-package-data@2.5.0:
     dependencies:
       hosted-git-info: 2.8.9
@@ -15900,16 +11801,6 @@ snapshots:
       semver: 7.7.2
       validate-npm-package-license: 3.0.4
 
-  normalize-package-data@6.0.2:
-    dependencies:
-      hosted-git-info: 7.0.2
-      semver: 7.7.2
-      validate-npm-package-license: 3.0.4
-
-  normalize-path@2.1.1:
-    dependencies:
-      remove-trailing-separator: 1.1.0
-
   normalize-path@3.0.0: {}
 
   normalize-range@0.1.2: {}
@@ -15920,139 +11811,10 @@ snapshots:
     dependencies:
       path-key: 3.1.1
 
-  npm-run-path@5.3.0:
-    dependencies:
-      path-key: 4.0.0
-
-  npm-run-path@6.0.0:
-    dependencies:
-      path-key: 4.0.0
-      unicorn-magic: 0.3.0
-
   nth-check@2.1.1:
     dependencies:
       boolbase: 1.0.0
 
-  nuxt@3.17.4(@parcel/watcher@2.5.1)(@types/node@24.0.3)(db0@0.3.2)(eslint@8.57.0)(ioredis@5.6.1)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3))(yaml@2.8.0):
-    dependencies:
-      '@nuxt/cli': 3.25.1(magicast@0.3.5)
-      '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 2.4.1(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3))
-      '@nuxt/kit': 3.17.4(magicast@0.3.5)
-      '@nuxt/schema': 3.17.4
-      '@nuxt/telemetry': 2.6.6(magicast@0.3.5)
-      '@nuxt/vite-builder': 3.17.4(@types/node@24.0.3)(eslint@8.57.0)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3))(yaml@2.8.0)
-      '@unhead/vue': 2.0.10(vue@3.5.14(typescript@5.8.3))
-      '@vue/shared': 3.5.14
-      c12: 3.0.4(magicast@0.3.5)
-      chokidar: 4.0.3
-      compatx: 0.2.0
-      consola: 3.4.2
-      cookie-es: 2.0.0
-      defu: 6.1.4
-      destr: 2.0.5
-      devalue: 5.1.1
-      errx: 0.1.0
-      esbuild: 0.25.4
-      escape-string-regexp: 5.0.0
-      estree-walker: 3.0.3
-      exsolve: 1.0.5
-      globby: 14.1.0
-      h3: 1.15.3
-      hookable: 5.5.3
-      ignore: 7.0.4
-      impound: 1.0.0
-      jiti: 2.4.2
-      klona: 2.0.6
-      knitwork: 1.2.0
-      magic-string: 0.30.17
-      mlly: 1.7.4
-      mocked-exports: 0.1.1
-      nanotar: 0.2.0
-      nitropack: 2.11.12
-      nypm: 0.6.0
-      ofetch: 1.4.1
-      ohash: 2.0.11
-      on-change: 5.0.1
-      oxc-parser: 0.71.0
-      pathe: 2.0.3
-      perfect-debounce: 1.0.0
-      pkg-types: 2.1.0
-      radix3: 1.1.2
-      scule: 1.3.0
-      semver: 7.7.2
-      std-env: 3.9.0
-      strip-literal: 3.0.0
-      tinyglobby: 0.2.13
-      ufo: 1.6.1
-      ultrahtml: 1.6.0
-      uncrypto: 0.1.3
-      unctx: 2.4.1
-      unimport: 5.0.1
-      unplugin: 2.3.4
-      unplugin-vue-router: 0.12.0(vue-router@4.5.1(vue@3.5.14(typescript@5.8.3)))(vue@3.5.14(typescript@5.8.3))
-      unstorage: 1.16.0(db0@0.3.2)(ioredis@5.6.1)
-      untyped: 2.0.0
-      vue: 3.5.14(typescript@5.8.3)
-      vue-bundle-renderer: 2.1.1
-      vue-devtools-stub: 0.1.0
-      vue-router: 4.5.1(vue@3.5.14(typescript@5.8.3))
-    optionalDependencies:
-      '@parcel/watcher': 2.5.1
-      '@types/node': 24.0.3
-    transitivePeerDependencies:
-      - '@azure/app-configuration'
-      - '@azure/cosmos'
-      - '@azure/data-tables'
-      - '@azure/identity'
-      - '@azure/keyvault-secrets'
-      - '@azure/storage-blob'
-      - '@biomejs/biome'
-      - '@capacitor/preferences'
-      - '@deno/kv'
-      - '@electric-sql/pglite'
-      - '@libsql/client'
-      - '@netlify/blobs'
-      - '@planetscale/database'
-      - '@upstash/redis'
-      - '@vercel/blob'
-      - '@vercel/kv'
-      - aws4fetch
-      - better-sqlite3
-      - bufferutil
-      - db0
-      - drizzle-orm
-      - encoding
-      - eslint
-      - idb-keyval
-      - ioredis
-      - less
-      - lightningcss
-      - magicast
-      - meow
-      - mysql2
-      - optionator
-      - rolldown
-      - rollup
-      - sass
-      - sass-embedded
-      - sqlite3
-      - stylelint
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - tsx
-      - typescript
-      - uploadthing
-      - utf-8-validate
-      - vite
-      - vls
-      - vti
-      - vue-tsc
-      - xml2js
-      - yaml
-
   nwsapi@2.2.20:
     optional: true
 
@@ -16106,14 +11868,6 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
-  nypm@0.6.0:
-    dependencies:
-      citty: 0.1.6
-      consola: 3.4.2
-      pathe: 2.0.3
-      pkg-types: 2.1.0
-      tinyexec: 0.3.2
-
   object-assign@4.1.1: {}
 
   object-inspect@1.13.4: {}
@@ -16156,16 +11910,6 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
-  ofetch@1.4.1:
-    dependencies:
-      destr: 2.0.5
-      node-fetch-native: 1.6.6
-      ufo: 1.6.1
-
-  ohash@2.0.11: {}
-
-  on-change@5.0.1: {}
-
   on-finished@2.4.1:
     dependencies:
       ee-first: 1.1.1
@@ -16174,31 +11918,16 @@ snapshots:
     dependencies:
       wrappy: 1.0.2
 
-  one-time@1.0.0:
-    dependencies:
-      fn.name: 1.1.0
-
   onetime@5.1.2:
     dependencies:
       mimic-fn: 2.1.0
 
-  onetime@6.0.0:
-    dependencies:
-      mimic-fn: 4.0.0
-
   oniguruma-to-es@3.1.1:
     dependencies:
       emoji-regex-xs: 1.0.0
       regex: 6.0.1
       regex-recursion: 6.0.2
 
-  open@10.1.2:
-    dependencies:
-      default-browser: 5.2.1
-      define-lazy-prop: 3.0.0
-      is-inside-container: 1.0.0
-      is-wsl: 3.1.0
-
   open@8.4.2:
     dependencies:
       define-lazy-prop: 2.0.0
@@ -16235,29 +11964,6 @@ snapshots:
       object-keys: 1.1.1
       safe-push-apply: 1.0.0
 
-  oxc-parser@0.71.0:
-    dependencies:
-      '@oxc-project/types': 0.71.0
-    optionalDependencies:
-      '@oxc-parser/binding-darwin-arm64': 0.71.0
-      '@oxc-parser/binding-darwin-x64': 0.71.0
-      '@oxc-parser/binding-freebsd-x64': 0.71.0
-      '@oxc-parser/binding-linux-arm-gnueabihf': 0.71.0
-      '@oxc-parser/binding-linux-arm-musleabihf': 0.71.0
-      '@oxc-parser/binding-linux-arm64-gnu': 0.71.0
-      '@oxc-parser/binding-linux-arm64-musl': 0.71.0
-      '@oxc-parser/binding-linux-riscv64-gnu': 0.71.0
-      '@oxc-parser/binding-linux-s390x-gnu': 0.71.0
-      '@oxc-parser/binding-linux-x64-gnu': 0.71.0
-      '@oxc-parser/binding-linux-x64-musl': 0.71.0
-      '@oxc-parser/binding-wasm32-wasi': 0.71.0
-      '@oxc-parser/binding-win32-arm64-msvc': 0.71.0
-      '@oxc-parser/binding-win32-x64-msvc': 0.71.0
-
-  p-event@6.0.1:
-    dependencies:
-      p-timeout: 6.1.4
-
   p-filter@2.1.0:
     dependencies:
       p-map: 2.1.0
@@ -16272,10 +11978,6 @@ snapshots:
     dependencies:
       yocto-queue: 0.1.0
 
-  p-limit@4.0.0:
-    dependencies:
-      yocto-queue: 1.2.1
-
   p-locate@4.1.0:
     dependencies:
       p-limit: 2.3.0
@@ -16284,14 +11986,8 @@ snapshots:
     dependencies:
       p-limit: 3.1.0
 
-  p-locate@6.0.0:
-    dependencies:
-      p-limit: 4.0.0
-
   p-map@2.1.0: {}
 
-  p-map@7.0.3: {}
-
   p-queue@6.6.2:
     dependencies:
       eventemitter3: 4.0.7
@@ -16301,22 +11997,14 @@ snapshots:
     dependencies:
       p-finally: 1.0.0
 
-  p-timeout@6.1.4: {}
-
   p-try@2.2.0: {}
 
-  p-wait-for@5.0.2:
-    dependencies:
-      p-timeout: 6.1.4
-
   package-json-from-dist@1.0.1: {}
 
   package-manager-detector@0.2.11:
     dependencies:
       quansync: 0.2.10
 
-  package-manager-detector@1.3.0: {}
-
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -16330,12 +12018,6 @@ snapshots:
       pbkdf2: 3.1.2
       safe-buffer: 5.2.1
 
-  parse-gitignore@2.0.0: {}
-
-  parse-imports-exports@0.2.4:
-    dependencies:
-      parse-statements: 1.0.11
-
   parse-json@5.2.0:
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -16343,23 +12025,6 @@ snapshots:
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
 
-  parse-json@8.3.0:
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      index-to-position: 1.1.0
-      type-fest: 4.41.0
-
-  parse-path@7.1.0:
-    dependencies:
-      protocols: 2.0.2
-
-  parse-statements@1.0.11: {}
-
-  parse-url@9.2.0:
-    dependencies:
-      '@types/parse-path': 7.1.0
-      parse-path: 7.1.0
-
   parse5@7.3.0:
     dependencies:
       entities: 6.0.0
@@ -16371,14 +12036,10 @@ snapshots:
 
   path-exists@4.0.0: {}
 
-  path-exists@5.0.0: {}
-
   path-is-absolute@1.0.1: {}
 
   path-key@3.1.1: {}
 
-  path-key@4.0.0: {}
-
   path-parse@1.0.7: {}
 
   path-scurry@1.11.1:
@@ -16395,10 +12056,6 @@ snapshots:
 
   path-type@4.0.0: {}
 
-  path-type@6.0.0: {}
-
-  pathe@1.1.2: {}
-
   pathe@2.0.3: {}
 
   pathval@2.0.0: {}
@@ -16411,8 +12068,6 @@ snapshots:
       safe-buffer: 5.2.1
       sha.js: 2.4.11
 
-  pend@1.2.0: {}
-
   perfect-debounce@1.0.0: {}
 
   picocolors@1.1.1: {}
@@ -16443,16 +12098,8 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.2
 
-  pluralize@8.0.0: {}
-
   possible-typed-array-names@1.1.0: {}
 
-  postcss-calc@10.1.1(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-selector-parser: 7.1.0
-      postcss-value-parser: 4.2.0
-
   postcss-calc@8.2.4(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
@@ -16467,59 +12114,28 @@ snapshots:
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
-  postcss-colormin@7.0.3(postcss@8.5.3):
-    dependencies:
-      browserslist: 4.24.5
-      caniuse-api: 3.0.0
-      colord: 2.9.3
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-
   postcss-convert-values@5.1.3(postcss@8.5.3):
     dependencies:
       browserslist: 4.24.5
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
-  postcss-convert-values@7.0.5(postcss@8.5.3):
-    dependencies:
-      browserslist: 4.24.5
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-
   postcss-discard-comments@5.1.2(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
 
-  postcss-discard-comments@7.0.4(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-selector-parser: 7.1.0
-
   postcss-discard-duplicates@5.1.0(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
 
-  postcss-discard-duplicates@7.0.2(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-
   postcss-discard-empty@5.1.1(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
 
-  postcss-discard-empty@7.0.1(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-
   postcss-discard-overridden@5.1.0(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
 
-  postcss-discard-overridden@7.0.1(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-
   postcss-media-query-parser@0.2.3: {}
 
   postcss-merge-longhand@5.1.7(postcss@8.5.3):
@@ -16528,12 +12144,6 @@ snapshots:
       postcss-value-parser: 4.2.0
       stylehacks: 5.1.1(postcss@8.5.3)
 
-  postcss-merge-longhand@7.0.5(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-      stylehacks: 7.0.5(postcss@8.5.3)
-
   postcss-merge-rules@5.1.4(postcss@8.5.3):
     dependencies:
       browserslist: 4.24.5
@@ -16542,24 +12152,11 @@ snapshots:
       postcss: 8.5.3
       postcss-selector-parser: 6.1.2
 
-  postcss-merge-rules@7.0.5(postcss@8.5.3):
-    dependencies:
-      browserslist: 4.24.5
-      caniuse-api: 3.0.0
-      cssnano-utils: 5.0.1(postcss@8.5.3)
-      postcss: 8.5.3
-      postcss-selector-parser: 7.1.0
-
   postcss-minify-font-values@5.1.0(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
-  postcss-minify-font-values@7.0.1(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-
   postcss-minify-gradients@5.1.1(postcss@8.5.3):
     dependencies:
       colord: 2.9.3
@@ -16567,13 +12164,6 @@ snapshots:
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
-  postcss-minify-gradients@7.0.1(postcss@8.5.3):
-    dependencies:
-      colord: 2.9.3
-      cssnano-utils: 5.0.1(postcss@8.5.3)
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-
   postcss-minify-params@5.1.4(postcss@8.5.3):
     dependencies:
       browserslist: 4.24.5
@@ -16581,24 +12171,11 @@ snapshots:
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
-  postcss-minify-params@7.0.3(postcss@8.5.3):
-    dependencies:
-      browserslist: 4.24.5
-      cssnano-utils: 5.0.1(postcss@8.5.3)
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-
   postcss-minify-selectors@5.2.1(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
       postcss-selector-parser: 6.1.2
 
-  postcss-minify-selectors@7.0.5(postcss@8.5.3):
-    dependencies:
-      cssesc: 3.0.0
-      postcss: 8.5.3
-      postcss-selector-parser: 7.1.0
-
   postcss-modules-extract-imports@3.1.0(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
@@ -16620,136 +12197,69 @@ snapshots:
       icss-utils: 5.1.0(postcss@8.5.3)
       postcss: 8.5.3
 
-  postcss-nested@7.0.2(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-selector-parser: 7.1.0
-
   postcss-normalize-charset@5.1.0(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
 
-  postcss-normalize-charset@7.0.1(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-
   postcss-normalize-display-values@5.1.0(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-display-values@7.0.1(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-
   postcss-normalize-positions@5.1.1(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-positions@7.0.1(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-
   postcss-normalize-repeat-style@5.1.1(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-repeat-style@7.0.1(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-
   postcss-normalize-string@5.1.0(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-string@7.0.1(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-
   postcss-normalize-timing-functions@5.1.0(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-timing-functions@7.0.1(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-
   postcss-normalize-unicode@5.1.1(postcss@8.5.3):
     dependencies:
       browserslist: 4.24.5
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-unicode@7.0.3(postcss@8.5.3):
-    dependencies:
-      browserslist: 4.24.5
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-
   postcss-normalize-url@5.1.0(postcss@8.5.3):
     dependencies:
       normalize-url: 6.1.0
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-url@7.0.1(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-
   postcss-normalize-whitespace@5.1.1(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-whitespace@7.0.1(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-
   postcss-ordered-values@5.1.3(postcss@8.5.3):
     dependencies:
       cssnano-utils: 3.1.0(postcss@8.5.3)
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
-  postcss-ordered-values@7.0.2(postcss@8.5.3):
-    dependencies:
-      cssnano-utils: 5.0.1(postcss@8.5.3)
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-
   postcss-reduce-initial@5.1.2(postcss@8.5.3):
     dependencies:
       browserslist: 4.24.5
       caniuse-api: 3.0.0
       postcss: 8.5.3
 
-  postcss-reduce-initial@7.0.3(postcss@8.5.3):
-    dependencies:
-      browserslist: 4.24.5
-      caniuse-api: 3.0.0
-      postcss: 8.5.3
-
   postcss-reduce-transforms@5.1.0(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
-  postcss-reduce-transforms@7.0.1(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-
   postcss-resolve-nested-selector@0.1.6: {}
 
   postcss-safe-parser@6.0.0(postcss@8.5.3):
@@ -16776,31 +12286,13 @@ snapshots:
       postcss-value-parser: 4.2.0
       svgo: 2.8.0
 
-  postcss-svgo@7.0.2(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-      svgo: 3.3.2
-
   postcss-unique-selectors@5.1.1(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
       postcss-selector-parser: 6.1.2
 
-  postcss-unique-selectors@7.0.4(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-selector-parser: 7.1.0
-
   postcss-value-parser@4.2.0: {}
 
-  postcss-values-parser@6.0.2(postcss@8.5.3):
-    dependencies:
-      color-name: 1.1.4
-      is-url-superb: 4.0.0
-      postcss: 8.5.3
-      quote-unquote: 1.0.0
-
   postcss@8.4.31:
     dependencies:
       nanoid: 3.3.11
@@ -16815,26 +12307,6 @@ snapshots:
 
   preact@10.26.7: {}
 
-  precinct@12.2.0:
-    dependencies:
-      '@dependents/detective-less': 5.0.1
-      commander: 12.1.0
-      detective-amd: 6.0.1
-      detective-cjs: 6.0.1
-      detective-es6: 5.0.1
-      detective-postcss: 7.0.1(postcss@8.5.3)
-      detective-sass: 6.0.1
-      detective-scss: 5.0.1
-      detective-stylus: 5.0.1
-      detective-typescript: 14.0.0(typescript@5.8.3)
-      detective-vue2: 2.2.0(typescript@5.8.3)
-      module-definition: 6.0.1
-      node-source-walk: 7.0.1
-      postcss: 8.5.3
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
   prelude-ls@1.2.1: {}
 
   prettier-linter-helpers@1.0.0:
@@ -16845,8 +12317,6 @@ snapshots:
 
   prettier@3.5.3: {}
 
-  pretty-bytes@6.1.1: {}
-
   pretty-format@27.5.1:
     dependencies:
       ansi-regex: 5.0.1
@@ -16863,11 +12333,6 @@ snapshots:
 
   process@0.11.10: {}
 
-  prompts@2.4.2:
-    dependencies:
-      kleur: 3.0.3
-      sisteransi: 1.0.5
-
   prop-types@15.8.1:
     dependencies:
       loose-envify: 1.4.0
@@ -16878,8 +12343,6 @@ snapshots:
 
   proto-list@1.2.4: {}
 
-  protocols@2.0.2: {}
-
   proxy-addr@2.0.7:
     dependencies:
       forwarded: 0.2.0
@@ -16896,11 +12359,6 @@ snapshots:
       randombytes: 2.1.0
       safe-buffer: 5.2.1
 
-  pump@3.0.2:
-    dependencies:
-      end-of-stream: 1.4.4
-      once: 1.4.0
-
   punycode@2.3.1: {}
 
   qs@6.14.0:
@@ -16920,10 +12378,6 @@ snapshots:
 
   quick-lru@4.0.1: {}
 
-  quote-unquote@1.0.0: {}
-
-  radix3@1.1.2: {}
-
   randombytes@2.1.0:
     dependencies:
       safe-buffer: 5.2.1
@@ -16942,11 +12396,6 @@ snapshots:
       iconv-lite: 0.6.3
       unpipe: 1.0.0
 
-  rc9@2.1.2:
-    dependencies:
-      defu: 6.1.4
-      destr: 2.0.5
-
   react-dom@18.3.1(react@18.3.1):
     dependencies:
       loose-envify: 1.4.0
@@ -16986,12 +12435,6 @@ snapshots:
 
   react@19.1.0: {}
 
-  read-package-up@11.0.0:
-    dependencies:
-      find-up-simple: 1.0.1
-      read-pkg: 9.0.1
-      type-fest: 4.41.0
-
   read-pkg-up@7.0.1:
     dependencies:
       find-up: 4.1.0
@@ -17005,14 +12448,6 @@ snapshots:
       parse-json: 5.2.0
       type-fest: 0.6.0
 
-  read-pkg@9.0.1:
-    dependencies:
-      '@types/normalize-package-data': 2.4.4
-      normalize-package-data: 6.0.2
-      parse-json: 8.3.0
-      type-fest: 4.41.0
-      unicorn-magic: 0.1.0
-
   read-yaml-file@1.1.0:
     dependencies:
       graceful-fs: 4.2.11
@@ -17036,18 +12471,6 @@ snapshots:
       string_decoder: 1.3.0
       util-deprecate: 1.0.2
 
-  readable-stream@4.7.0:
-    dependencies:
-      abort-controller: 3.0.0
-      buffer: 6.0.3
-      events: 3.3.0
-      process: 0.11.10
-      string_decoder: 1.3.0
-
-  readdir-glob@1.1.3:
-    dependencies:
-      minimatch: 5.1.6
-
   readdirp@4.1.2: {}
 
   redent@3.0.0:
@@ -17055,16 +12478,6 @@ snapshots:
       indent-string: 4.0.0
       strip-indent: 3.0.0
 
-  redis-errors@1.2.0: {}
-
-  redis-parser@3.0.0:
-    dependencies:
-      redis-errors: 1.2.0
-
-  refa@0.12.1:
-    dependencies:
-      '@eslint-community/regexpp': 4.12.1
-
   reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.8
@@ -17086,13 +12499,6 @@ snapshots:
     dependencies:
       regex-utilities: 2.3.0
 
-  regexp-ast-analysis@0.7.1:
-    dependencies:
-      '@eslint-community/regexpp': 4.12.1
-      refa: 0.12.1
-
-  regexp-tree@0.1.27: {}
-
   regexp.prototype.flags@1.5.4:
     dependencies:
       call-bind: 1.0.8
@@ -17104,18 +12510,10 @@ snapshots:
 
   regexpp@3.2.0: {}
 
-  regjsparser@0.12.0:
-    dependencies:
-      jsesc: 3.0.2
-
-  remove-trailing-separator@1.1.0: {}
-
   require-directory@2.1.1: {}
 
   require-from-string@2.0.2: {}
 
-  require-package-name@2.0.1: {}
-
   requireindex@1.2.0: {}
 
   resolve-from@4.0.0: {}
@@ -17174,14 +12572,6 @@ snapshots:
     optionalDependencies:
       '@babel/code-frame': 7.27.1
 
-  rollup-plugin-dts@6.2.1(rollup@4.40.2)(typescript@5.8.3):
-    dependencies:
-      magic-string: 0.30.17
-      rollup: 4.40.2
-      typescript: 5.8.3
-    optionalDependencies:
-      '@babel/code-frame': 7.27.1
-
   rollup-plugin-polyfill-node@0.13.0(rollup@4.40.2):
     dependencies:
       '@rollup/plugin-inject': 5.0.5(rollup@4.40.2)
@@ -17209,15 +12599,6 @@ snapshots:
       source-map-js: 1.2.1
       tslib: 2.8.1
 
-  rollup-plugin-visualizer@5.14.0(rollup@4.40.2):
-    dependencies:
-      open: 8.4.2
-      picomatch: 4.0.2
-      source-map: 0.7.4
-      yargs: 17.7.2
-    optionalDependencies:
-      rollup: 4.40.2
-
   rollup@4.40.2:
     dependencies:
       '@types/estree': 1.0.7
@@ -17257,8 +12638,6 @@ snapshots:
   rrweb-cssom@0.8.0:
     optional: true
 
-  run-applescript@7.0.0: {}
-
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
@@ -17286,8 +12665,6 @@ snapshots:
       es-errors: 1.3.0
       is-regex: 1.2.1
 
-  safe-stable-stringify@2.5.0: {}
-
   safer-buffer@2.1.2: {}
 
   sass@1.89.0:
@@ -17310,14 +12687,6 @@ snapshots:
 
   scheduler@0.26.0: {}
 
-  scslre@0.3.0:
-    dependencies:
-      '@eslint-community/regexpp': 4.12.1
-      refa: 0.12.1
-      regexp-ast-analysis: 0.7.1
-
-  scule@1.3.0: {}
-
   search-insights@2.17.3: {}
 
   secure-random-bytes@5.0.1:
@@ -17350,14 +12719,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  serialize-javascript@6.0.2:
-    dependencies:
-      randombytes: 2.1.0
-
-  serve-placeholder@2.0.2:
-    dependencies:
-      defu: 6.1.4
-
   serve-static@2.2.0:
     dependencies:
       encodeurl: 2.0.0
@@ -17431,8 +12792,6 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
-  shell-quote@1.8.2: {}
-
   shiki@2.5.0:
     dependencies:
       '@shikijs/core': 2.5.0
@@ -17478,17 +12837,10 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
-  simple-git@3.27.0:
-    dependencies:
-      '@kwsites/file-exists': 1.1.1
-      '@kwsites/promise-deferred': 1.1.1
-      debug: 4.4.1
-    transitivePeerDependencies:
-      - supports-color
-
   simple-swizzle@0.2.2:
     dependencies:
       is-arrayish: 0.3.2
+    optional: true
 
   sirv@3.0.1:
     dependencies:
@@ -17496,31 +12848,24 @@ snapshots:
       mrmime: 2.0.1
       totalist: 3.0.1
 
-  sisteransi@1.0.5: {}
-
   slash@3.0.0: {}
 
-  slash@5.1.0: {}
-
   slice-ansi@4.0.0:
     dependencies:
       ansi-styles: 4.3.0
       astral-regex: 2.0.0
       is-fullwidth-code-point: 3.0.0
 
-  smob@1.5.0: {}
-
   source-map-js@1.2.1: {}
 
   source-map-support@0.5.21:
     dependencies:
       buffer-from: 1.1.2
       source-map: 0.6.1
+    optional: true
 
   source-map@0.6.1: {}
 
-  source-map@0.7.4: {}
-
   space-separated-tokens@2.0.2: {}
 
   spawndamnit@3.0.1:
@@ -17540,11 +12885,6 @@ snapshots:
       spdx-exceptions: 2.5.0
       spdx-license-ids: 3.0.21
 
-  spdx-expression-parse@4.0.0:
-    dependencies:
-      spdx-exceptions: 2.5.0
-      spdx-license-ids: 3.0.21
-
   spdx-license-ids@3.0.21: {}
 
   speakingurl@14.0.1: {}
@@ -17557,12 +12897,8 @@ snapshots:
 
   stable@0.1.8: {}
 
-  stack-trace@0.0.10: {}
-
   stackback@0.0.2: {}
 
-  standard-as-callback@2.1.0: {}
-
   statuses@2.0.1: {}
 
   std-env@3.9.0: {}
@@ -17574,13 +12910,6 @@ snapshots:
 
   streamsearch@1.1.0: {}
 
-  streamx@2.22.0:
-    dependencies:
-      fast-fifo: 1.3.2
-      text-decoder: 1.2.3
-    optionalDependencies:
-      bare-events: 2.5.4
-
   strict-uri-encode@2.0.0: {}
 
   string-width@4.2.3:
@@ -17668,24 +12997,12 @@ snapshots:
 
   strip-bom@3.0.0: {}
 
-  strip-final-newline@3.0.0: {}
-
   strip-indent@3.0.0:
     dependencies:
       min-indent: 1.0.1
 
-  strip-indent@4.0.0:
-    dependencies:
-      min-indent: 1.0.1
-
   strip-json-comments@3.1.1: {}
 
-  strip-literal@3.0.0:
-    dependencies:
-      js-tokens: 9.0.1
-
-  structured-clone-es@1.0.0: {}
-
   style-search@0.1.0: {}
 
   styled-jsx@5.1.6(react@19.1.0):
@@ -17699,12 +13016,6 @@ snapshots:
       postcss: 8.5.3
       postcss-selector-parser: 6.1.2
 
-  stylehacks@7.0.5(postcss@8.5.3):
-    dependencies:
-      browserslist: 4.24.5
-      postcss: 8.5.3
-      postcss-selector-parser: 7.1.0
-
   stylelint-config-recommended-scss@8.0.0(postcss@8.5.3)(stylelint@15.1.0(typescript@5.1.6)):
     dependencies:
       postcss-scss: 4.0.9(postcss@8.5.3)
@@ -17791,8 +13102,6 @@ snapshots:
     dependencies:
       copy-anything: 3.0.5
 
-  supports-color@10.0.0: {}
-
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
@@ -17816,16 +13125,6 @@ snapshots:
       picocolors: 1.1.1
       stable: 0.1.8
 
-  svgo@3.3.2:
-    dependencies:
-      '@trysound/sax': 0.2.0
-      commander: 7.2.0
-      css-select: 5.1.0
-      css-tree: 2.3.1
-      css-what: 6.1.0
-      csso: 5.0.5
-      picocolors: 1.1.1
-
   symbol-tree@3.2.4:
     optional: true
 
@@ -17833,8 +13132,6 @@ snapshots:
     dependencies:
       '@pkgr/core': 0.2.4
 
-  system-architecture@0.1.0: {}
-
   tabbable@6.2.0: {}
 
   table@6.9.0:
@@ -17859,12 +13156,6 @@ snapshots:
       inherits: 2.0.4
       readable-stream: 3.6.2
 
-  tar-stream@3.1.7:
-    dependencies:
-      b4a: 1.6.7
-      fast-fifo: 1.3.2
-      streamx: 2.22.0
-
   tar@7.4.3:
     dependencies:
       '@isaacs/fs-minipass': 4.0.1
@@ -17882,6 +13173,7 @@ snapshots:
       acorn: 8.14.1
       commander: 2.20.3
       source-map-support: 0.5.21
+    optional: true
 
   test-exclude@7.0.1:
     dependencies:
@@ -17889,22 +13181,12 @@ snapshots:
       glob: 10.4.5
       minimatch: 9.0.5
 
-  text-decoder@1.2.3:
-    dependencies:
-      b4a: 1.6.7
-
-  text-hex@1.0.0: {}
-
   text-table@0.2.0: {}
 
-  tiny-invariant@1.3.3: {}
-
   tinybench@2.9.0: {}
 
   tinyexec@0.3.2: {}
 
-  tinyexec@1.0.1: {}
-
   tinyglobby@0.2.13:
     dependencies:
       fdir: 6.4.4(picomatch@4.0.2)
@@ -17924,10 +13206,6 @@ snapshots:
       tldts-core: 6.1.86
     optional: true
 
-  tmp-promise@3.0.3:
-    dependencies:
-      tmp: 0.2.3
-
   tmp@0.0.33:
     dependencies:
       os-tmpdir: 1.0.2
@@ -17940,8 +13218,6 @@ snapshots:
 
   toidentifier@1.0.1: {}
 
-  toml@3.0.0: {}
-
   totalist@3.0.1: {}
 
   tough-cookie@5.1.2:
@@ -17960,8 +13236,6 @@ snapshots:
 
   trim-newlines@3.0.1: {}
 
-  triple-beam@1.4.1: {}
-
   ts-api-utils@1.4.3(typescript@5.1.6):
     dependencies:
       typescript: 5.1.6
@@ -17970,10 +13244,6 @@ snapshots:
     dependencies:
       typescript: 5.8.3
 
-  tsconfck@3.1.6(typescript@5.8.3):
-    optionalDependencies:
-      typescript: 5.8.3
-
   tsconfig-paths@3.15.0:
     dependencies:
       '@types/json5': 0.0.29
@@ -18015,16 +13285,12 @@ snapshots:
 
   type-fest@0.8.1: {}
 
-  type-fest@4.41.0: {}
-
   type-is@2.0.1:
     dependencies:
       content-type: 1.0.5
       media-typer: 1.1.0
       mime-types: 3.0.1
 
-  type-level-regexp@0.1.17: {}
-
   typed-array-buffer@1.0.3:
     dependencies:
       call-bound: 1.0.4
@@ -18066,106 +13332,29 @@ snapshots:
       eslint: 9.28.0(jiti@2.4.2)
       typescript: 5.8.3
     transitivePeerDependencies:
-      - supports-color
-
-  typescript@5.1.6: {}
-
-  typescript@5.7.3: {}
-
-  typescript@5.8.3: {}
-
-  ufo@1.6.1: {}
-
-  ultrahtml@1.6.0: {}
-
-  unbox-primitive@1.1.0:
-    dependencies:
-      call-bound: 1.0.4
-      has-bigints: 1.1.0
-      has-symbols: 1.1.0
-      which-boxed-primitive: 1.1.1
-
-  unbuild@3.5.0(sass@1.89.0)(typescript@5.8.3)(vue-sfc-transformer@0.1.16(@vue/compiler-core@3.5.14)(esbuild@0.25.4)(vue@3.5.14(typescript@5.8.3)))(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3)):
-    dependencies:
-      '@rollup/plugin-alias': 5.1.1(rollup@4.40.2)
-      '@rollup/plugin-commonjs': 28.0.3(rollup@4.40.2)
-      '@rollup/plugin-json': 6.1.0(rollup@4.40.2)
-      '@rollup/plugin-node-resolve': 16.0.1(rollup@4.40.2)
-      '@rollup/plugin-replace': 6.0.2(rollup@4.40.2)
-      '@rollup/pluginutils': 5.1.4(rollup@4.40.2)
-      citty: 0.1.6
-      consola: 3.4.2
-      defu: 6.1.4
-      esbuild: 0.25.4
-      fix-dts-default-cjs-exports: 1.0.1
-      hookable: 5.5.3
-      jiti: 2.4.2
-      magic-string: 0.30.17
-      mkdist: 2.3.0(sass@1.89.0)(typescript@5.8.3)(vue-sfc-transformer@0.1.16(@vue/compiler-core@3.5.14)(esbuild@0.25.4)(vue@3.5.14(typescript@5.8.3)))(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.14(typescript@5.8.3))
-      mlly: 1.7.4
-      pathe: 2.0.3
-      pkg-types: 2.1.0
-      pretty-bytes: 6.1.1
-      rollup: 4.40.2
-      rollup-plugin-dts: 6.2.1(rollup@4.40.2)(typescript@5.8.3)
-      scule: 1.3.0
-      tinyglobby: 0.2.13
-      untyped: 2.0.0
-    optionalDependencies:
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - sass
-      - vue
-      - vue-sfc-transformer
-      - vue-tsc
-
-  uncrypto@0.1.3: {}
-
-  unctx@2.4.1:
-    dependencies:
-      acorn: 8.14.1
-      estree-walker: 3.0.3
-      magic-string: 0.30.17
-      unplugin: 2.3.4
+      - supports-color
 
-  undici-types@6.19.8: {}
+  typescript@5.1.6: {}
 
-  undici-types@6.21.0: {}
+  typescript@5.7.3: {}
 
-  undici-types@7.8.0: {}
+  typescript@5.8.3: {}
 
-  unenv@2.0.0-rc.17:
-    dependencies:
-      defu: 6.1.4
-      exsolve: 1.0.5
-      ohash: 2.0.11
-      pathe: 2.0.3
-      ufo: 1.6.1
+  ufo@1.6.1: {}
 
-  unhead@2.0.10:
+  unbox-primitive@1.1.0:
     dependencies:
-      hookable: 5.5.3
+      call-bound: 1.0.4
+      has-bigints: 1.1.0
+      has-symbols: 1.1.0
+      which-boxed-primitive: 1.1.1
 
-  unicorn-magic@0.1.0: {}
+  undici-types@6.19.8: {}
 
-  unicorn-magic@0.3.0: {}
+  undici-types@6.21.0: {}
 
-  unimport@5.0.1:
-    dependencies:
-      acorn: 8.14.1
-      escape-string-regexp: 5.0.0
-      estree-walker: 3.0.3
-      local-pkg: 1.1.1
-      magic-string: 0.30.17
-      mlly: 1.7.4
-      pathe: 2.0.3
-      picomatch: 4.0.2
-      pkg-types: 2.1.0
-      scule: 1.3.0
-      strip-literal: 3.0.0
-      tinyglobby: 0.2.13
-      unplugin: 2.3.4
-      unplugin-utils: 0.2.4
+  undici-types@7.8.0:
+    optional: true
 
   unist-util-is@6.0.0:
     dependencies:
@@ -18194,50 +13383,8 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  unixify@1.0.0:
-    dependencies:
-      normalize-path: 2.1.1
-
   unpipe@1.0.0: {}
 
-  unplugin-utils@0.2.4:
-    dependencies:
-      pathe: 2.0.3
-      picomatch: 4.0.2
-
-  unplugin-vue-router@0.12.0(vue-router@4.5.1(vue@3.5.14(typescript@5.8.3)))(vue@3.5.14(typescript@5.8.3)):
-    dependencies:
-      '@babel/types': 7.27.1
-      '@vue-macros/common': 1.16.1(vue@3.5.14(typescript@5.8.3))
-      ast-walker-scope: 0.6.2
-      chokidar: 4.0.3
-      fast-glob: 3.3.3
-      json5: 2.2.3
-      local-pkg: 1.1.1
-      magic-string: 0.30.17
-      micromatch: 4.0.8
-      mlly: 1.7.4
-      pathe: 2.0.3
-      scule: 1.3.0
-      unplugin: 2.3.4
-      unplugin-utils: 0.2.4
-      yaml: 2.8.0
-    optionalDependencies:
-      vue-router: 4.5.1(vue@3.5.14(typescript@5.8.3))
-    transitivePeerDependencies:
-      - vue
-
-  unplugin@1.16.1:
-    dependencies:
-      acorn: 8.14.1
-      webpack-virtual-modules: 0.6.2
-
-  unplugin@2.3.4:
-    dependencies:
-      acorn: 8.14.1
-      picomatch: 4.0.2
-      webpack-virtual-modules: 0.6.2
-
   unrs-resolver@1.7.2:
     dependencies:
       napi-postinstall: 0.2.4
@@ -18260,59 +13407,16 @@ snapshots:
       '@unrs/resolver-binding-win32-ia32-msvc': 1.7.2
       '@unrs/resolver-binding-win32-x64-msvc': 1.7.2
 
-  unstorage@1.16.0(db0@0.3.2)(ioredis@5.6.1):
-    dependencies:
-      anymatch: 3.1.3
-      chokidar: 4.0.3
-      destr: 2.0.5
-      h3: 1.15.3
-      lru-cache: 10.4.3
-      node-fetch-native: 1.6.6
-      ofetch: 1.4.1
-      ufo: 1.6.1
-    optionalDependencies:
-      db0: 0.3.2
-      ioredis: 5.6.1
-
-  untun@0.1.3:
-    dependencies:
-      citty: 0.1.6
-      consola: 3.4.2
-      pathe: 1.1.2
-
-  untyped@2.0.0:
-    dependencies:
-      citty: 0.1.6
-      defu: 6.1.4
-      jiti: 2.4.2
-      knitwork: 1.2.0
-      scule: 1.3.0
-
-  unwasm@0.3.9:
-    dependencies:
-      knitwork: 1.2.0
-      magic-string: 0.30.17
-      mlly: 1.7.4
-      pathe: 1.1.2
-      pkg-types: 1.3.1
-      unplugin: 1.16.1
-
   update-browserslist-db@1.1.3(browserslist@4.24.5):
     dependencies:
       browserslist: 4.24.5
       escalade: 3.2.0
       picocolors: 1.1.1
 
-  uqr@0.1.2: {}
-
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
 
-  urlpattern-polyfill@10.1.0: {}
-
-  urlpattern-polyfill@8.0.2: {}
-
   util-deprecate@1.0.2: {}
 
   uuid@11.1.0: {}
@@ -18336,16 +13440,6 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite-dev-rpc@1.0.7(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
-    dependencies:
-      birpc: 2.3.0
-      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-hot-client: 2.0.4(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
-
-  vite-hot-client@2.0.4(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
-    dependencies:
-      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-
   vite-node@3.1.3(@types/node@20.17.50)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
     dependencies:
       cac: 6.7.14
@@ -18388,93 +13482,6 @@ snapshots:
       - tsx
       - yaml
 
-  vite-node@3.1.3(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
-    dependencies:
-      cac: 6.7.14
-      debug: 4.4.1
-      es-module-lexer: 1.7.0
-      pathe: 2.0.3
-      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-    transitivePeerDependencies:
-      - '@types/node'
-      - jiti
-      - less
-      - lightningcss
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - tsx
-      - yaml
-
-  vite-node@3.1.4(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
-    dependencies:
-      cac: 6.7.14
-      debug: 4.4.1
-      es-module-lexer: 1.7.0
-      pathe: 2.0.3
-      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-    transitivePeerDependencies:
-      - '@types/node'
-      - jiti
-      - less
-      - lightningcss
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - tsx
-      - yaml
-
-  vite-plugin-checker@0.9.3(eslint@8.57.0)(optionator@0.9.4)(typescript@5.8.3)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue-tsc@2.2.10(typescript@5.8.3)):
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      chokidar: 4.0.3
-      npm-run-path: 6.0.0
-      picocolors: 1.1.1
-      picomatch: 4.0.2
-      strip-ansi: 7.1.0
-      tiny-invariant: 1.3.3
-      tinyglobby: 0.2.13
-      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vscode-uri: 3.1.0
-    optionalDependencies:
-      eslint: 8.57.0
-      optionator: 0.9.4
-      typescript: 5.8.3
-      vue-tsc: 2.2.10(typescript@5.8.3)
-
-  vite-plugin-inspect@11.1.0(@nuxt/kit@3.17.4(magicast@0.3.5))(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)):
-    dependencies:
-      ansis: 3.17.0
-      debug: 4.4.1
-      error-stack-parser-es: 1.0.5
-      ohash: 2.0.11
-      open: 10.1.2
-      perfect-debounce: 1.0.0
-      sirv: 3.0.1
-      unplugin-utils: 0.2.4
-      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-dev-rpc: 1.0.7(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
-    optionalDependencies:
-      '@nuxt/kit': 3.17.4(magicast@0.3.5)
-    transitivePeerDependencies:
-      - supports-color
-
-  vite-plugin-vue-tracer@0.1.3(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vue@3.5.14(typescript@5.8.3)):
-    dependencies:
-      estree-walker: 3.0.3
-      exsolve: 1.0.5
-      magic-string: 0.30.17
-      pathe: 2.0.3
-      source-map-js: 1.2.1
-      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vue: 3.5.14(typescript@5.8.3)
-
   vite@5.4.19(@types/node@24.0.3)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2):
     dependencies:
       esbuild: 0.21.5
@@ -18597,34 +13604,6 @@ snapshots:
       '@types/react': 19.1.5
       '@types/react-dom': 19.1.5(@types/react@19.1.5)
 
-  vitest-environment-nuxt@1.0.1(@types/node@24.0.3)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0):
-    dependencies:
-      '@nuxt/test-utils': 3.19.0(@types/node@24.0.3)(@vue/test-utils@2.4.6)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(magicast@0.3.5)(playwright-core@1.52.0)(sass@1.89.0)(terser@5.39.2)(typescript@5.8.3)(vitest@3.1.3)(yaml@2.8.0)
-    transitivePeerDependencies:
-      - '@cucumber/cucumber'
-      - '@jest/globals'
-      - '@playwright/test'
-      - '@testing-library/vue'
-      - '@types/node'
-      - '@vitest/ui'
-      - '@vue/test-utils'
-      - happy-dom
-      - jiti
-      - jsdom
-      - less
-      - lightningcss
-      - magicast
-      - playwright-core
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - terser
-      - tsx
-      - typescript
-      - vitest
-      - yaml
-
   vitest@3.1.3(@types/node@20.17.50)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
     dependencies:
       '@vitest/expect': 3.1.3
@@ -18706,57 +13685,10 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@3.1.3(@types/node@24.0.3)(@vitest/browser@3.1.3)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0):
-    dependencies:
-      '@vitest/expect': 3.1.3
-      '@vitest/mocker': 3.1.3(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
-      '@vitest/pretty-format': 3.1.3
-      '@vitest/runner': 3.1.3
-      '@vitest/snapshot': 3.1.3
-      '@vitest/spy': 3.1.3
-      '@vitest/utils': 3.1.3
-      chai: 5.2.0
-      debug: 4.4.1
-      expect-type: 1.2.1
-      magic-string: 0.30.17
-      pathe: 2.0.3
-      std-env: 3.9.0
-      tinybench: 2.9.0
-      tinyexec: 0.3.2
-      tinyglobby: 0.2.13
-      tinypool: 1.0.2
-      tinyrainbow: 2.0.0
-      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      vite-node: 3.1.3(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-      why-is-node-running: 2.3.0
-    optionalDependencies:
-      '@types/node': 24.0.3
-      '@vitest/browser': 3.1.3(playwright@1.52.0)(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))(vitest@3.1.3)
-      jsdom: 26.1.0
-    transitivePeerDependencies:
-      - jiti
-      - less
-      - lightningcss
-      - msw
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - tsx
-      - yaml
-
   vscode-uri@3.1.0: {}
 
-  vue-bundle-renderer@2.1.1:
-    dependencies:
-      ufo: 1.6.1
-
   vue-component-type-helpers@2.2.10: {}
 
-  vue-devtools-stub@0.1.0: {}
-
   vue-eslint-parser@10.1.3(eslint@8.57.0):
     dependencies:
       debug: 4.4.1
@@ -18783,30 +13715,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-router@4.5.1(vue@3.5.14(typescript@5.8.3)):
-    dependencies:
-      '@vue/devtools-api': 6.6.4
-      vue: 3.5.14(typescript@5.8.3)
-
-  vue-sfc-transformer@0.1.16(@vue/compiler-core@3.5.14)(esbuild@0.25.4)(vue@3.5.14(typescript@5.8.3)):
-    dependencies:
-      '@babel/parser': 7.27.2
-      '@vue/compiler-core': 3.5.14
-      esbuild: 0.25.4
-      vue: 3.5.14(typescript@5.8.3)
-
   vue-tsc@2.2.10(typescript@5.1.6):
     dependencies:
       '@volar/typescript': 2.4.14
       '@vue/language-core': 2.2.10(typescript@5.1.6)
       typescript: 5.1.6
 
-  vue-tsc@2.2.10(typescript@5.8.3):
-    dependencies:
-      '@volar/typescript': 2.4.14
-      '@vue/language-core': 2.2.10(typescript@5.8.3)
-      typescript: 5.8.3
-
   vue@3.5.14(typescript@5.1.6):
     dependencies:
       '@vue/compiler-dom': 3.5.14
@@ -18836,15 +13750,11 @@ snapshots:
     dependencies:
       defaults: 1.0.4
 
-  web-streams-polyfill@3.3.3: {}
-
   webidl-conversions@3.0.1: {}
 
   webidl-conversions@7.0.0:
     optional: true
 
-  webpack-virtual-modules@0.6.2: {}
-
   whatwg-encoding@3.1.1:
     dependencies:
       iconv-lite: 0.6.3
@@ -18913,35 +13823,11 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
-  which@5.0.0:
-    dependencies:
-      isexe: 3.1.1
-
   why-is-node-running@2.3.0:
     dependencies:
       siginfo: 2.0.0
       stackback: 0.0.2
 
-  winston-transport@4.9.0:
-    dependencies:
-      logform: 2.7.0
-      readable-stream: 3.6.2
-      triple-beam: 1.4.1
-
-  winston@3.17.0:
-    dependencies:
-      '@colors/colors': 1.6.0
-      '@dabh/diagnostics': 2.0.3
-      async: 3.2.6
-      is-stream: 2.0.1
-      logform: 2.7.0
-      one-time: 1.0.0
-      readable-stream: 3.6.2
-      safe-stable-stringify: 2.5.0
-      stack-trace: 0.0.10
-      triple-beam: 1.4.1
-      winston-transport: 4.9.0
-
   word-wrap@1.2.5: {}
 
   wrap-ansi@7.0.0:
@@ -18963,11 +13849,6 @@ snapshots:
       imurmurhash: 0.1.4
       signal-exit: 4.1.0
 
-  write-file-atomic@6.0.0:
-    dependencies:
-      imurmurhash: 0.1.4
-      signal-exit: 4.1.0
-
   ws@8.18.2: {}
 
   xml-name-validator@4.0.0: {}
@@ -19004,33 +13885,6 @@ snapshots:
       y18n: 5.0.8
       yargs-parser: 21.1.1
 
-  yauzl@2.10.0:
-    dependencies:
-      buffer-crc32: 0.2.13
-      fd-slicer: 1.1.0
-
   yocto-queue@0.1.0: {}
 
-  yocto-queue@1.2.1: {}
-
-  youch-core@0.3.2:
-    dependencies:
-      '@poppinss/exception': 1.2.1
-      error-stack-parser-es: 1.0.5
-
-  youch@4.1.0-beta.7:
-    dependencies:
-      '@poppinss/dumper': 0.6.3
-      '@speed-highlight/core': 1.2.7
-      cookie: 1.0.2
-      youch-core: 0.3.2
-
-  zip-stream@6.0.1:
-    dependencies:
-      archiver-utils: 5.0.2
-      compress-commons: 6.0.2
-      readable-stream: 4.7.0
-
-  zod@3.25.28: {}
-
   zwitch@2.0.4: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index c6169035a..37fdcd688 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,6 +1,7 @@
 packages:
   - 'docs'
   - 'packages/*'
+  - '!packages/nuxt'
   - '!packages/__legacy__'
   - 'samples/*'
   - '!samples/__legacy__/*'

From 5a9afbdde74b0a0a05996acd1d92bb8d290c0527 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 11:15:05 +0530
Subject: [PATCH 129/131] fix: update package versions to 0.0.1 for browser,
 javascript, nextjs, and node packages; bump react package version to 0.3.0

---
 packages/browser/package.json    | 2 +-
 packages/javascript/package.json | 2 +-
 packages/nextjs/package.json     | 2 +-
 packages/node/package.json       | 2 +-
 packages/react/package.json      | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/browser/package.json b/packages/browser/package.json
index 436ae0185..a75d80044 100644
--- a/packages/browser/package.json
+++ b/packages/browser/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@asgardeo/browser",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Browser-specific implementation of Asgardeo JavaScript SDK.",
   "keywords": [
     "asgardeo",
diff --git a/packages/javascript/package.json b/packages/javascript/package.json
index 87f0e1455..7af770e77 100644
--- a/packages/javascript/package.json
+++ b/packages/javascript/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@asgardeo/javascript",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Framework agnostic JavaScript SDK for Asgardeo.",
   "keywords": [
     "asgardeo",
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
index f6d8600e6..f9ccb68c6 100644
--- a/packages/nextjs/package.json
+++ b/packages/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@asgardeo/nextjs",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Next.js implementation of Asgardeo JavaScript SDK.",
   "keywords": [
     "asgardeo",
diff --git a/packages/node/package.json b/packages/node/package.json
index d2971fc94..8a0b4d8a0 100644
--- a/packages/node/package.json
+++ b/packages/node/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@asgardeo/node",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Node.js runtime specific implementation of Asgardeo JavaScript SDK.",
   "keywords": [
     "asgardeo",
diff --git a/packages/react/package.json b/packages/react/package.json
index 3129f4436..b60eb8e52 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@asgardeo/react",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "React implementation of Asgardeo JavaScript SDK.",
   "keywords": [
     "asgardeo",

From efe951f3dd45a477360b5a3a16990a78dc26982f Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 11:16:01 +0530
Subject: [PATCH 130/131] =?UTF-8?q?chore:=20add=20changeset=20=F0=9F=A6=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/smart-spiders-film.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/smart-spiders-film.md

diff --git a/.changeset/smart-spiders-film.md b/.changeset/smart-spiders-film.md
new file mode 100644
index 000000000..505389c3b
--- /dev/null
+++ b/.changeset/smart-spiders-film.md
@@ -0,0 +1,7 @@
+---
+'@asgardeo/browser': minor
+'@asgardeo/javascript': minor
+'@asgardeo/react': minor
+---
+
+Support `SignIn` component in `@asgardeo/react`.

From cdcc723712794157d84fb81b84e4def48b730010 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 11:28:12 +0530
Subject: [PATCH 131/131] refactor: remove obsolete greet test files from
 nextjs, node, and react packages

---
 packages/nextjs/src/__tests__/greet.test.ts | 26 ------------------
 packages/node/src/__tests__/greet.test.ts   | 26 ------------------
 packages/react/src/__tests__/greet.test.tsx | 29 ---------------------
 3 files changed, 81 deletions(-)
 delete mode 100644 packages/nextjs/src/__tests__/greet.test.ts
 delete mode 100644 packages/node/src/__tests__/greet.test.ts
 delete mode 100644 packages/react/src/__tests__/greet.test.tsx

diff --git a/packages/nextjs/src/__tests__/greet.test.ts b/packages/nextjs/src/__tests__/greet.test.ts
deleted file mode 100644
index c3ad90eef..000000000
--- a/packages/nextjs/src/__tests__/greet.test.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import {describe, expect, it} from 'vitest';
-import greet from '../greet';
-
-describe('greet', () => {
-  it('should return the proper greeting', () => {
-    expect(greet('World')).toBe('Hello, World!');
-  });
-});
diff --git a/packages/node/src/__tests__/greet.test.ts b/packages/node/src/__tests__/greet.test.ts
deleted file mode 100644
index c3ad90eef..000000000
--- a/packages/node/src/__tests__/greet.test.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import {describe, expect, it} from 'vitest';
-import greet from '../greet';
-
-describe('greet', () => {
-  it('should return the proper greeting', () => {
-    expect(greet('World')).toBe('Hello, World!');
-  });
-});
diff --git a/packages/react/src/__tests__/greet.test.tsx b/packages/react/src/__tests__/greet.test.tsx
deleted file mode 100644
index 75aaf494d..000000000
--- a/packages/react/src/__tests__/greet.test.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import {describe, expect, test} from 'vitest';
-import {render} from 'vitest-browser-react';
-import Greet from '../Greet';
-
-describe('Greet', () => {
-  test('should return the proper greeting', async () => {
-    const {getByText, getByRole} = render(<Greet greeting="World" />);
-
-    await expect.element(getByText('Hello World!')).toBeInTheDocument();
-  });
-});