From 4f42f36e8d09c88cc10ce7160b06ebe5e9d17c5d Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 11:50:57 +0530
Subject: [PATCH 01/96] fix: simplify SignIn component usage in API
 documentation

---
 packages/react/API.md | 141 +++++++++++++++++++++++++++++++++++-------
 1 file changed, 117 insertions(+), 24 deletions(-)

diff --git a/packages/react/API.md b/packages/react/API.md
index b76f0f650..6ac507565 100644
--- a/packages/react/API.md
+++ b/packages/react/API.md
@@ -102,13 +102,7 @@ const SignInPage = () => {
   return (
     <div className="signin-container">
       <h1>Welcome Back</h1>
-+       <SignIn 
-+         className="custom-signin"
-+         redirectUrl="/dashboard"
-+         buttonText="Login with Asgardeo"
-+         onSignInSuccess={handleSignInSuccess}
-+         onSignInError={handleSignInError}
-+       />
++       <SignIn />
     </div>
   );
 };
@@ -661,33 +655,132 @@ Replace default button text with custom content:
 
 ### Bring your own UI Library
 
-For applications using popular UI libraries, you can easily integrate Asgardeo components:
+For applications using popular UI libraries, you can leverage render props for maximum flexibility and control:
 
-#### Material-UI Integration
+#### Material-UI Integration with Render Props
 ```tsx
-import { Button } from '@mui/material'
-import { useAsgardeo } from '@asgardeo/react'
+import { Button, CircularProgress } from '@mui/material'
+import { SignIn } from '@asgardeo/react'
 
 function CustomSignInButton() {
-  const { signIn } = useAsgardeo()
-  
   return (
-    <Button 
-      variant="contained" 
-      color="primary"
-      onClick={() => signIn()}
-    >
-      Sign In with Asgardeo
-    </Button>
+    <SignIn>
+      {({ signIn, isLoading, error }) => (
+        <Button 
+          variant="contained" 
+          color="primary"
+          onClick={signIn}
+          disabled={isLoading}
+          startIcon={isLoading ? <CircularProgress size={20} /> : null}
+        >
+          {isLoading ? 'Signing In...' : 'Sign In with Asgardeo'}
+        </Button>
+      )}
+    </SignIn>
   )
 }
 ```
 
-#### Tailwind CSS Integration
+#### Tailwind CSS Integration with Render Props
 ```tsx
-<SignInButton className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
-  Sign In
-</SignInButton>
+import { SignIn } from '@asgardeo/react'
+
+function TailwindSignInButton() {
+  return (
+    <SignIn>
+      {({ signIn, isLoading, error }) => (
+        <div className="space-y-2">
+          <button 
+            onClick={signIn}
+            disabled={isLoading}
+            className={`
+              bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded
+              ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}
+            `}
+          >
+            {isLoading ? (
+              <div className="flex items-center space-x-2">
+                <div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></div>
+                <span>Signing in...</span>
+              </div>
+            ) : (
+              'Sign In'
+            )}
+          </button>
+          {error && (
+            <p className="text-red-500 text-sm">{error.message}</p>
+          )}
+        </div>
+      )}
+    </SignIn>
+  )
+}
+```
+
+#### Ant Design Integration with Render Props
+```tsx
+import { Button, Alert } from 'antd'
+import { SignIn } from '@asgardeo/react'
+
+function AntdSignInButton() {
+  return (
+    <SignIn>
+      {({ signIn, isLoading, error }) => (
+        <div>
+          <Button 
+            type="primary"
+            onClick={signIn}
+            loading={isLoading}
+            size="large"
+          >
+            Sign In with Asgardeo
+          </Button>
+          {error && (
+            <Alert 
+              message="Sign In Failed" 
+              description={error.message}
+              type="error" 
+              showIcon 
+              style={{ marginTop: 8 }}
+            />
+          )}
+        </div>
+      )}
+    </SignIn>
+  )
+}
+```
+
+#### Chakra UI Integration with Render Props
+```tsx
+import { Button, Alert, AlertIcon, Spinner } from '@chakra-ui/react'
+import { SignIn } from '@asgardeo/react'
+
+function ChakraSignInButton() {
+  return (
+    <SignIn>
+      {({ signIn, isLoading, error }) => (
+        <div>
+          <Button 
+            colorScheme="blue"
+            onClick={signIn}
+            isLoading={isLoading}
+            loadingText="Signing in..."
+            leftIcon={isLoading ? <Spinner size="sm" /> : undefined}
+          >
+            Sign In with Asgardeo
+          </Button>
+          {error && (
+            <Alert status="error" mt={2}>
+              <AlertIcon />
+              {error.message}
+            </Alert>
+          )}
+        </div>
+      )}
+    </SignIn>
+  )
+}
 ```
 
 ### Custom Loading States

From 5d28d1c2a3203bb3422c1490b679911605b49cca Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 12:04:58 +0530
Subject: [PATCH 02/96] ci(samples): add initial vercel configuration for
 rewrites

---
 samples/teamspace-react/vercel.json | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 samples/teamspace-react/vercel.json

diff --git a/samples/teamspace-react/vercel.json b/samples/teamspace-react/vercel.json
new file mode 100644
index 000000000..1323cdac3
--- /dev/null
+++ b/samples/teamspace-react/vercel.json
@@ -0,0 +1,8 @@
+{
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
+}

From 02f4bff9f86965316e2c0543320c20d3b3c42191 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 13:17:41 +0530
Subject: [PATCH 03/96] chore(react): enhance UserDropdown and BaseUserDropdown
 with loading state and improve API documentation

---
 packages/react/API.md                         |  35 ++++-
 .../UserDropdown/BaseUserDropdown.tsx         | 144 +++++++++++-------
 .../UserDropdown/UserDropdown.tsx             |   4 +-
 .../presentation/UserProfile/UserProfile.tsx  |   4 +-
 .../components/primitives/Avatar/Avatar.tsx   |   1 -
 .../primitives/Checkbox/Checkbox.tsx          |   2 +-
 .../primitives/DatePicker/DatePicker.tsx      |   2 +-
 .../primitives/OtpField/OtpField.tsx          |   2 +-
 .../components/primitives/Select/Select.tsx   |   2 +-
 .../primitives/TextField/TextField.tsx        |   2 +-
 samples/teamspace-react/src/App.tsx           |   6 +-
 .../src/components/header/UserDropdown.tsx    |   7 +-
 12 files changed, 137 insertions(+), 74 deletions(-)

diff --git a/packages/react/API.md b/packages/react/API.md
index 6ac507565..eacae61e1 100644
--- a/packages/react/API.md
+++ b/packages/react/API.md
@@ -5,7 +5,7 @@ This document provides complete API documentation for the Asgardeo React SDK, in
 ## Table of Contents
 
 - [Components](#components)
-  - [AsgardeoProvider](#asgardeyprovider)
+  - [AsgardeoProvider](#asgardeoprovider)
   - [SignIn](#signin)
   - [SignedIn](#signedin)
   - [SignedOut](#signedout)
@@ -36,6 +36,10 @@ The root provider component that configures the Asgardeo SDK and provides authen
 
 #### Example
 
+##### Minimal Setup
+
+Following is a minimal setup with the mandatory configuration for the `AsgardeoProvider` in your main application file (e.g., `index.tsx`):
+
 ```diff
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
@@ -49,8 +53,32 @@ root.render(
 +     <AsgardeoProvider
 +       baseUrl="https://api.asgardeo.io/t/your-org"
 +       clientId="your-client-id"
-+       afterSignInUrl="/dashboard"
-+       afterSignOutUrl="/"
++     >
+        <App />
++     </AsgardeoProvider>
+  </StrictMode>
+);
+```
+
+##### Advanced Usage
+
+For more advanced configurations, you can specify additional props like `afterSignInUrl`, `afterSignOutUrl`, and `scopes`:
+
+```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="https://localhost:5173/dashboard"
++       afterSignOutUrl="https://localhost:5173"
 +       scopes={['openid', 'profile', 'email']}
 +     >
         <App />
@@ -59,6 +87,7 @@ root.render(
 );
 ```
 
+
 **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
diff --git a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
index 981a73652..bbae95bfe 100644
--- a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
+++ b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
@@ -35,6 +35,7 @@ import {
 import useTheme from '../../../contexts/Theme/useTheme';
 import {Avatar} from '../../primitives/Avatar/Avatar';
 import Button from '../../primitives/Button/Button';
+import Spinner from '../../primitives/Spinner/Spinner';
 import getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';
 
 const useStyles = () => {
@@ -120,6 +121,17 @@ const useStyles = () => {
         fontSize: '0.875rem',
         margin: 0,
       } as CSSProperties,
+      loadingContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '80px',
+        gap: theme.spacing.unit + 'px',
+      } as CSSProperties,
+      loadingText: {
+        color: theme.colors.text.secondary,
+        fontSize: '0.875rem',
+      } as CSSProperties,
     }),
     [theme, colorScheme],
   );
@@ -145,6 +157,10 @@ export interface BaseUserDropdownProps {
    * The user object containing profile information
    */
   user: any;
+  /**
+   * Whether the user data is currently loading
+   */
+  isLoading?: boolean;
   /**
    * The HTML element ID where the portal should be mounted
    */
@@ -187,10 +203,10 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
   fallback = null,
   className = '',
   user,
+  isLoading = false,
   portalId = 'asgardeo-user-dropdown',
   menuItems = [],
   showTriggerLabel = false,
-  showDropdownHeader = true,
   avatarSize = 32,
   attributeMapping = {},
 }): ReactElement => {
@@ -231,7 +247,7 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
     return getMappedUserProfileValue('username', mergedMappings, user) || '';
   };
 
-  if (!user) {
+  if (fallback && !user && !isLoading) {
     return fallback;
   }
 
@@ -246,7 +262,7 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
     <div className={clsx(withVendorCSSClassPrefix('user-dropdown'), className)}>
       <Button
         ref={refs.setReference}
-        className={withVendorCSSClassPrefix('user-dropdown-trigger')}
+        className={withVendorCSSClassPrefix('user-dropdown__trigger')}
         style={styles.trigger}
         color="tertiary"
         variant="text"
@@ -259,7 +275,11 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
           size={avatarSize}
           alt={`${getDisplayName()}'s avatar`}
         />
-        {showTriggerLabel && <span style={styles.userName}>{getDisplayName()}</span>}
+        {showTriggerLabel && (
+          <span className={withVendorCSSClassPrefix('user-dropdown__trigger-label')} style={styles.userName}>
+            {getDisplayName()}
+          </span>
+        )}
       </Button>
 
       {isOpen && (
@@ -267,63 +287,77 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
           <FloatingFocusManager context={context} modal={false}>
             <div
               ref={refs.setFloating}
-              className={withVendorCSSClassPrefix('user-dropdown-content')}
+              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>
+              {isLoading ? (
+                <div className={withVendorCSSClassPrefix('user-dropdown__loading')} style={styles.loadingContainer}>
+                  <Spinner size="small" />
                 </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')}
+              ) : (
+                <>
+                  <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}
                       >
-                        {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} />}
+                        {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')}
+                          >
+                            {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
+                            className={withVendorCSSClassPrefix('user-dropdown__menu-divider')}
+                            style={styles.divider}
+                          />
+                        )}
+                      </div>
+                    ))}
                   </div>
-                ))}
-              </div>
+                </>
+              )}
             </div>
           </FloatingFocusManager>
         </FloatingPortal>
diff --git a/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx b/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx
index f3fe9296e..0bf8000ab 100644
--- a/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx
+++ b/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx
@@ -50,9 +50,9 @@ export type UserDropdownProps = Omit<BaseUserDropdownProps, 'user'>;
  * ```
  */
 const UserDropdown: FC<UserDropdownProps> = ({...rest}: UserDropdownProps): ReactElement => {
-  const {user} = useAsgardeo();
+  const {user, isLoading} = useAsgardeo();
 
-  return <BaseUserDropdown user={user} {...rest} />;
+  return <BaseUserDropdown user={user} isLoading={isLoading} {...rest} />;
 };
 
 export default UserDropdown;
diff --git a/packages/react/src/components/presentation/UserProfile/UserProfile.tsx b/packages/react/src/components/presentation/UserProfile/UserProfile.tsx
index 1f792d4f9..2a420ef00 100644
--- a/packages/react/src/components/presentation/UserProfile/UserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/UserProfile.tsx
@@ -20,8 +20,8 @@ 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';
+import updateMeProfile from '../../../api/scim2/updateMeProfile';
+import getMeProfile from '../../..//api/scim2/getMeProfile';
 
 /**
  * Props for the UserProfile component.
diff --git a/packages/react/src/components/primitives/Avatar/Avatar.tsx b/packages/react/src/components/primitives/Avatar/Avatar.tsx
index 899c479f3..947819b6c 100644
--- a/packages/react/src/components/primitives/Avatar/Avatar.tsx
+++ b/packages/react/src/components/primitives/Avatar/Avatar.tsx
@@ -62,7 +62,6 @@ const useStyles = ({size}) => {
         fontWeight: 500,
         color: theme.colors.text.primary,
         border: `1px solid ${theme.colors.border}`,
-        boxShadow: colorScheme === 'dark' ? 'none' : '0 2px 4px rgba(0, 0, 0, 0.1)',
       } as CSSProperties,
       image: {
         width: '100%',
diff --git a/packages/react/src/components/primitives/Checkbox/Checkbox.tsx b/packages/react/src/components/primitives/Checkbox/Checkbox.tsx
index 9628f97c4..ab01a1b10 100644
--- a/packages/react/src/components/primitives/Checkbox/Checkbox.tsx
+++ b/packages/react/src/components/primitives/Checkbox/Checkbox.tsx
@@ -21,7 +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';
+import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 
 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 b74d7d95b..5f4696ba6 100644
--- a/packages/react/src/components/primitives/DatePicker/DatePicker.tsx
+++ b/packages/react/src/components/primitives/DatePicker/DatePicker.tsx
@@ -21,7 +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';
+import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 
 export interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {
   /**
diff --git a/packages/react/src/components/primitives/OtpField/OtpField.tsx b/packages/react/src/components/primitives/OtpField/OtpField.tsx
index c87fbcbaf..8f2010379 100644
--- a/packages/react/src/components/primitives/OtpField/OtpField.tsx
+++ b/packages/react/src/components/primitives/OtpField/OtpField.tsx
@@ -21,7 +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';
+import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 
 export interface OtpInputProps {
   /**
diff --git a/packages/react/src/components/primitives/Select/Select.tsx b/packages/react/src/components/primitives/Select/Select.tsx
index acdad0cac..128001814 100644
--- a/packages/react/src/components/primitives/Select/Select.tsx
+++ b/packages/react/src/components/primitives/Select/Select.tsx
@@ -21,7 +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';
+import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 
 export interface SelectOption {
   /**
diff --git a/packages/react/src/components/primitives/TextField/TextField.tsx b/packages/react/src/components/primitives/TextField/TextField.tsx
index 0401cc473..8682c2419 100644
--- a/packages/react/src/components/primitives/TextField/TextField.tsx
+++ b/packages/react/src/components/primitives/TextField/TextField.tsx
@@ -21,7 +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';
+import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 
 export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {
   /**
diff --git a/samples/teamspace-react/src/App.tsx b/samples/teamspace-react/src/App.tsx
index fcf836b5f..da49113a9 100644
--- a/samples/teamspace-react/src/App.tsx
+++ b/samples/teamspace-react/src/App.tsx
@@ -52,7 +52,7 @@ const mockUser: User = {
   id: '1',
   name: 'John Doe',
   email: 'john@example.com',
-  avatar: '/placeholder.svg?height=32&width=32',
+  avatar: 'https://avatar.vercel.sh/john?size=30',
   username: 'johndoe',
 };
 
@@ -61,7 +61,7 @@ const mockOrganizations: Organization[] = [
     id: '1',
     name: 'Acme Corp',
     slug: 'acme-corp',
-    avatar: '/placeholder.svg?height=32&width=32',
+    avatar: 'https://avatar.vercel.sh/acme-corp?size=32',
     role: 'owner',
     memberCount: 12,
   },
@@ -69,7 +69,7 @@ const mockOrganizations: Organization[] = [
     id: '2',
     name: 'Tech Startup',
     slug: 'tech-startup',
-    avatar: '/placeholder.svg?height=32&width=32',
+    avatar: 'https://avatar.vercel.sh/tech-startup?size=30',
     role: 'admin',
     memberCount: 8,
   },
diff --git a/samples/teamspace-react/src/components/header/UserDropdown.tsx b/samples/teamspace-react/src/components/header/UserDropdown.tsx
index bef0425ca..3b71148b5 100644
--- a/samples/teamspace-react/src/components/header/UserDropdown.tsx
+++ b/samples/teamspace-react/src/components/header/UserDropdown.tsx
@@ -3,7 +3,7 @@
 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 {SignOutButton, User, UserProfile, UserDropdown as ReactUserDropdown} from '@asgardeo/react';
 import {useApp} from '../../App';
 
 export default function UserDropdown() {
@@ -26,13 +26,14 @@ export default function UserDropdown() {
   return (
     <>
       <div className="relative" ref={userDropdownRef}>
-        <button
+        {/* <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>
+        </button> */}
+        <ReactUserDropdown />
 
         {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 0530089042a044bffb5b2552dae1115eac0ce82f Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 13:32:53 +0530
Subject: [PATCH 04/96] fix(react): update BaseUserDropdown to use Typography
 component and improve loading state handling

---
 .../UserDropdown/BaseUserDropdown.tsx         | 122 ++++++++----------
 1 file changed, 56 insertions(+), 66 deletions(-)

diff --git a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
index bbae95bfe..211291cc7 100644
--- a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
+++ b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
@@ -35,7 +35,7 @@ import {
 import useTheme from '../../../contexts/Theme/useTheme';
 import {Avatar} from '../../primitives/Avatar/Avatar';
 import Button from '../../primitives/Button/Button';
-import Spinner from '../../primitives/Spinner/Spinner';
+import Typography from '../../primitives/Typography/Typography';
 import getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';
 
 const useStyles = () => {
@@ -108,7 +108,7 @@ const useStyles = () => {
       headerInfo: {
         display: 'flex',
         flexDirection: 'column',
-        gap: theme.spacing.unit / 2 + 'px',
+        gap: theme.spacing.unit / 4 + 'px',
       } as CSSProperties,
       headerName: {
         color: theme.colors.text.primary,
@@ -232,6 +232,7 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
     firstName: 'name.givenName',
     lastName: 'name.familyName',
     email: 'emails',
+    username: 'userName',
   };
 
   const mergedMappings = {...defaultAttributeMappings, ...attributeMapping};
@@ -291,73 +292,62 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
               style={{...floatingStyles, ...styles.dropdownContent}}
               {...getFloatingProps()}
             >
-              {isLoading ? (
-                <div className={withVendorCSSClassPrefix('user-dropdown__loading')} style={styles.loadingContainer}>
-                  <Spinner size="small" />
+              <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}>
+                  <Typography
+                    className={withVendorCSSClassPrefix('user-dropdown__header-name')}
+                    variant="body1"
+                    fontWeight="medium"
+                  >
+                    {getDisplayName()}
+                  </Typography>
+                  <Typography
+                    className={withVendorCSSClassPrefix('user-dropdown__header-email')}
+                    variant="caption"
+                    color="secondary"
+                  >
+                    {getMappedUserProfileValue('username', mergedMappings, user) ||
+                      getMappedUserProfileValue('email', mergedMappings, user)}
+                  </Typography>
                 </div>
-              ) : (
-                <>
-                  <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}
+              </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')}
                       >
-                        {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')}
-                          >
-                            {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
-                            className={withVendorCSSClassPrefix('user-dropdown__menu-divider')}
-                            style={styles.divider}
-                          />
-                        )}
-                      </div>
-                    ))}
+                        {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 className={withVendorCSSClassPrefix('user-dropdown__menu-divider')} style={styles.divider} />
+                    )}
                   </div>
-                </>
-              )}
+                ))}
+              </div>
             </div>
           </FloatingFocusManager>
         </FloatingPortal>

From 6bd4f01e143a3fe90363cbe61afd28a7975540f2 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 14:15:39 +0530
Subject: [PATCH 05/96] feat(react): enhance BaseUserDropdown with profile
 management and sign-out options

---
 .../UserDropdown/BaseUserDropdown.tsx         | 81 ++++++++++++++++---
 .../UserDropdown/UserDropdown.tsx             | 31 +++++--
 .../components/primitives/Button/Button.tsx   | 10 +--
 .../components/primitives/Icons/LogOut.tsx    | 43 ++++++++++
 .../src/components/primitives/Icons/User.tsx  | 42 ++++++++++
 .../contexts/Asgardeo/AsgardeoProvider.tsx    |  8 +-
 packages/react/src/index.ts                   |  2 +
 7 files changed, 196 insertions(+), 21 deletions(-)
 create mode 100644 packages/react/src/components/primitives/Icons/LogOut.tsx
 create mode 100644 packages/react/src/components/primitives/Icons/User.tsx

diff --git a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
index 211291cc7..c375216eb 100644
--- a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
+++ b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
@@ -36,6 +36,8 @@ import useTheme from '../../../contexts/Theme/useTheme';
 import {Avatar} from '../../primitives/Avatar/Avatar';
 import Button from '../../primitives/Button/Button';
 import Typography from '../../primitives/Typography/Typography';
+import User from '../../primitives/Icons/User';
+import LogOut from '../../primitives/Icons/LogOut';
 import getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';
 
 const useStyles = () => {
@@ -58,8 +60,11 @@ const useStyles = () => {
       } as CSSProperties,
       userName: {
         color: theme.colors.text.primary,
-        fontSize: '1rem',
         fontWeight: 500,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        maxWidth: '120px',
       } as CSSProperties,
       dropdownContent: {
         minWidth: '200px',
@@ -81,6 +86,7 @@ const useStyles = () => {
       menuItem: {
         display: 'flex',
         alignItems: 'center',
+        justifyContent: 'flex-start',
         gap: theme.spacing.unit + 'px',
         padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px`,
         width: '100%',
@@ -90,6 +96,7 @@ const useStyles = () => {
         background: 'none',
         cursor: 'pointer',
         fontSize: '0.875rem',
+        textAlign: 'left',
         '&:hover': {
           backgroundColor: theme.colors.background,
         },
@@ -109,17 +116,28 @@ const useStyles = () => {
         display: 'flex',
         flexDirection: 'column',
         gap: theme.spacing.unit / 4 + 'px',
+        flex: 1,
+        minWidth: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
       } as CSSProperties,
       headerName: {
         color: theme.colors.text.primary,
         fontSize: '1rem',
         fontWeight: 500,
         margin: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
       } as CSSProperties,
       headerEmail: {
         color: theme.colors.text.secondary,
         fontSize: '0.875rem',
         margin: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
       } as CSSProperties,
       loadingContainer: {
         display: 'flex',
@@ -181,6 +199,14 @@ export interface BaseUserDropdownProps {
    * Optional size for the avatar
    */
   avatarSize?: number;
+  /**
+   * Callback function for "Manage Profile" action
+   */
+  onManageProfile?: () => void;
+  /**
+   * Callback function for "Sign Out" action
+   */
+  onSignOut?: () => void;
   /**
    * Mapping of component attribute names to identity provider field names.
    * Allows customizing which user profile fields should be used for each attribute.
@@ -206,8 +232,10 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
   isLoading = false,
   portalId = 'asgardeo-user-dropdown',
   menuItems = [],
-  showTriggerLabel = false,
+  showTriggerLabel = true,
   avatarSize = 32,
+  onManageProfile,
+  onSignOut,
   attributeMapping = {},
 }): ReactElement => {
   const styles = useStyles();
@@ -259,6 +287,35 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
     setIsOpen(false);
   };
 
+  // Create default menu items
+  const defaultMenuItems: MenuItem[] = [];
+
+  if (onManageProfile) {
+    defaultMenuItems.push({
+      label: 'Manage Profile',
+      onClick: onManageProfile,
+      icon: <User width="16" height="16" />,
+    });
+  }
+
+  if (onSignOut) {
+    defaultMenuItems.push({
+      label: 'Sign Out',
+      onClick: onSignOut,
+      icon: <LogOut width="16" height="16" />,
+    });
+  }
+
+  // Merge custom menu items with default ones
+  const allMenuItems = [...menuItems];
+  if (defaultMenuItems.length > 0) {
+    // Add divider before default items if there are custom items
+    if (menuItems.length > 0) {
+      allMenuItems.push({label: '', onClick: undefined}); // Divider placeholder
+    }
+    allMenuItems.push(...defaultMenuItems);
+  }
+
   return (
     <div className={clsx(withVendorCSSClassPrefix('user-dropdown'), className)}>
       <Button
@@ -277,9 +334,13 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
           alt={`${getDisplayName()}'s avatar`}
         />
         {showTriggerLabel && (
-          <span className={withVendorCSSClassPrefix('user-dropdown__trigger-label')} style={styles.userName}>
+          <Typography
+            variant="body2"
+            className={withVendorCSSClassPrefix('user-dropdown__trigger-label')}
+            style={styles.userName}
+          >
             {getDisplayName()}
-          </span>
+          </Typography>
         )}
       </Button>
 
@@ -301,6 +362,7 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
                 />
                 <div className={withVendorCSSClassPrefix('user-dropdown__header-info')} style={styles.headerInfo}>
                   <Typography
+                    noWrap
                     className={withVendorCSSClassPrefix('user-dropdown__header-name')}
                     variant="body1"
                     fontWeight="medium"
@@ -308,6 +370,7 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
                     {getDisplayName()}
                   </Typography>
                   <Typography
+                    noWrap
                     className={withVendorCSSClassPrefix('user-dropdown__header-email')}
                     variant="caption"
                     color="secondary"
@@ -318,9 +381,12 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
                 </div>
               </div>
               <div className={withVendorCSSClassPrefix('user-dropdown__menu')} style={styles.dropdownMenu}>
-                {menuItems.map((item, index) => (
+                {allMenuItems.map((item, index) => (
                   <div key={index}>
-                    {item.href ? (
+                    {item.label === '' ? (
+                      // Render divider for empty label placeholder
+                      <div className={withVendorCSSClassPrefix('user-dropdown__menu-divider')} style={styles.divider} />
+                    ) : item.href ? (
                       <a
                         href={item.href}
                         style={styles.menuItem}
@@ -342,9 +408,6 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
                         {item.label}
                       </Button>
                     )}
-                    {index < menuItems.length - 1 && (
-                      <div className={withVendorCSSClassPrefix('user-dropdown__menu-divider')} style={styles.divider} />
-                    )}
                   </div>
                 ))}
               </div>
diff --git a/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx b/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx
index 0bf8000ab..78fe3cc56 100644
--- a/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx
+++ b/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx
@@ -16,15 +16,17 @@
  * under the License.
  */
 
-import {FC, ReactElement} from 'react';
+import {FC, ReactElement, useState} from 'react';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
 import BaseUserDropdown, {BaseUserDropdownProps} from './BaseUserDropdown';
+import UserProfile from '../UserProfile/UserProfile';
+import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Popover';
 
 /**
  * Props for the UserDropdown component.
- * Extends BaseUserDropdownProps but makes the user prop optional since it will be obtained from useAsgardeo
+ * Extends BaseUserDropdownProps but excludes user, onManageProfile, and onSignOut since they're handled internally
  */
-export type UserDropdownProps = Omit<BaseUserDropdownProps, 'user'>;
+export type UserDropdownProps = Omit<BaseUserDropdownProps, 'user' | 'onManageProfile' | 'onSignOut'>;
 
 /**
  * UserDropdown component displays a user avatar with a dropdown menu.
@@ -50,9 +52,28 @@ export type UserDropdownProps = Omit<BaseUserDropdownProps, 'user'>;
  * ```
  */
 const UserDropdown: FC<UserDropdownProps> = ({...rest}: UserDropdownProps): ReactElement => {
-  const {user, isLoading} = useAsgardeo();
+  const {user, isLoading, signOut} = useAsgardeo();
+  const [isProfileOpen, setIsProfileOpen] = useState(false);
 
-  return <BaseUserDropdown user={user} isLoading={isLoading} {...rest} />;
+  const handleManageProfile = () => {
+    setIsProfileOpen(true);
+  };
+
+  const handleSignOut = () => {
+    signOut();
+  };
+
+  return (
+    <>
+      <BaseUserDropdown
+        user={user}
+        isLoading={isLoading}
+        onManageProfile={handleManageProfile}
+        onSignOut={handleSignOut}
+        {...rest}
+      />
+    </>
+  );
 };
 
 export default UserDropdown;
diff --git a/packages/react/src/components/primitives/Button/Button.tsx b/packages/react/src/components/primitives/Button/Button.tsx
index 0559b4e0c..7b27ab89c 100644
--- a/packages/react/src/components/primitives/Button/Button.tsx
+++ b/packages/react/src/components/primitives/Button/Button.tsx
@@ -327,17 +327,17 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {...rest}
       >
         {loading && (
-          <Spinner 
-            size={size as SpinnerSize} 
-            color="currentColor" 
+          <Spinner
+            size={size as SpinnerSize}
+            color="currentColor"
             style={{
               width: size === 'small' ? '12px' : size === 'medium' ? '16px' : '20px',
-              height: size === 'small' ? '12px' : size === 'medium' ? '16px' : '20px'
+              height: size === 'small' ? '12px' : size === 'medium' ? '16px' : '20px',
             }}
           />
         )}
         {!loading && startIcon && <span>{startIcon}</span>}
-        {children && <span>{children}</span>}
+        {children && <>{children}</>}
         {!loading && endIcon && <span>{endIcon}</span>}
       </button>
     );
diff --git a/packages/react/src/components/primitives/Icons/LogOut.tsx b/packages/react/src/components/primitives/Icons/LogOut.tsx
new file mode 100644
index 000000000..95445326e
--- /dev/null
+++ b/packages/react/src/components/primitives/Icons/LogOut.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';
+
+/**
+ * LogOut icon component.
+ */
+const LogOut: 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="m16 17 5-5-5-5" />
+    <path d="M21 12H9" />
+    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+  </svg>
+);
+
+export default LogOut;
diff --git a/packages/react/src/components/primitives/Icons/User.tsx b/packages/react/src/components/primitives/Icons/User.tsx
new file mode 100644
index 000000000..94f7c3d09
--- /dev/null
+++ b/packages/react/src/components/primitives/Icons/User.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';
+
+/**
+ * User icon component.
+ */
+const User: 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="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+    <circle cx="12" cy="7" r="4" />
+  </svg>
+);
+
+export default User;
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index ff14085c0..92197a40f 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -142,7 +142,11 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   const signIn = async (options?: SignInOptions): Promise<User> => {
     try {
       const response = await asgardeo.signIn(options);
-      // setUser(await asgardeo.getUser());
+
+      if (await asgardeo.isSignedIn()) {
+        setUser(await asgardeo.getUser());
+        setUserProfile(await asgardeo.getUserProfile());
+      }
 
       return response;
     } catch (error) {
@@ -177,7 +181,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
         },
         user,
         baseUrl,
-        afterSignInUrl
+        afterSignInUrl,
       }}
     >
       <I18nProvider preferences={preferences?.i18n}>
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 3de2b0b45..567332f62 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -182,6 +182,8 @@ 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 {default as UserIcon} from './components/primitives/Icons/User';
+export {default as LogOut} from './components/primitives/Icons/LogOut';
 
 export {
   createField,

From 36077d8b1662041ecc42c1df7b551bbd55d2cad3 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 14:29:37 +0530
Subject: [PATCH 06/96] feat(react): enhance UserDropdown with additional menu
 items and icons

---
 .../UserDropdown/BaseUserDropdown.tsx         | 50 +++++++++++++++----
 .../src/components/header/UserDropdown.tsx    | 26 +++++++++-
 2 files changed, 65 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
index c375216eb..024ba143a 100644
--- a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
+++ b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
@@ -88,7 +88,7 @@ const useStyles = () => {
         alignItems: 'center',
         justifyContent: 'flex-start',
         gap: theme.spacing.unit + 'px',
-        padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px`,
+        padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit * 2}px`,
         width: '100%',
         color: theme.colors.text.primary,
         textDecoration: 'none',
@@ -97,9 +97,25 @@ const useStyles = () => {
         cursor: 'pointer',
         fontSize: '0.875rem',
         textAlign: 'left',
-        '&:hover': {
-          backgroundColor: theme.colors.background,
-        },
+        borderRadius: theme.borderRadius.small,
+        transition: 'background-color 0.15s ease-in-out',
+      } as CSSProperties,
+      menuItemAnchor: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        gap: theme.spacing.unit + 'px',
+        padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit * 2}px`,
+        width: '100%',
+        color: theme.colors.text.primary,
+        textDecoration: 'none',
+        border: 'none',
+        background: 'none',
+        cursor: 'pointer',
+        fontSize: '0.875rem',
+        textAlign: 'left',
+        borderRadius: theme.borderRadius.small,
+        transition: 'background-color 0.15s ease-in-out',
       } as CSSProperties,
       divider: {
         margin: `${theme.spacing.unit * 0.5}px 0`,
@@ -156,7 +172,7 @@ const useStyles = () => {
 };
 
 export interface MenuItem {
-  label: string;
+  label: ReactNode;
   icon?: ReactNode;
   onClick?: () => void;
   href?: string;
@@ -232,7 +248,7 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
   isLoading = false,
   portalId = 'asgardeo-user-dropdown',
   menuItems = [],
-  showTriggerLabel = true,
+  showTriggerLabel = false,
   avatarSize = 32,
   onManageProfile,
   onSignOut,
@@ -240,6 +256,10 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
 }): ReactElement => {
   const styles = useStyles();
   const [isOpen, setIsOpen] = useState(false);
+  const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
+  const {theme, colorScheme} = useTheme();
+
+  const hoverBackgroundColor = colorScheme === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.04)';
 
   const {refs, floatingStyles, context} = useFloating({
     open: isOpen,
@@ -389,21 +409,33 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
                     ) : item.href ? (
                       <a
                         href={item.href}
-                        style={styles.menuItem}
+                        style={{
+                          ...styles.menuItemAnchor,
+                          backgroundColor: hoveredItemIndex === index ? hoverBackgroundColor : 'transparent',
+                        }}
                         className={withVendorCSSClassPrefix('user-dropdown__menu-item')}
+                        onMouseEnter={() => setHoveredItemIndex(index)}
+                        onMouseLeave={() => setHoveredItemIndex(null)}
+                        onFocus={() => setHoveredItemIndex(index)}
+                        onBlur={() => setHoveredItemIndex(null)}
                       >
                         {item.icon}
-                        {item.label}
+                        <span>{item.label}</span>
                       </a>
                     ) : (
                       <Button
                         onClick={() => handleMenuItemClick(item)}
-                        style={styles.menuItem}
+                        style={{
+                          ...styles.menuItem,
+                          backgroundColor: hoveredItemIndex === index ? hoverBackgroundColor : 'transparent',
+                        }}
                         className={withVendorCSSClassPrefix('user-dropdown__menu-item')}
                         color="tertiary"
                         variant="text"
                         size="small"
                         startIcon={item.icon}
+                        onMouseEnter={() => setHoveredItemIndex(index)}
+                        onMouseLeave={() => setHoveredItemIndex(null)}
                       >
                         {item.label}
                       </Button>
diff --git a/samples/teamspace-react/src/components/header/UserDropdown.tsx b/samples/teamspace-react/src/components/header/UserDropdown.tsx
index 3b71148b5..19b14d761 100644
--- a/samples/teamspace-react/src/components/header/UserDropdown.tsx
+++ b/samples/teamspace-react/src/components/header/UserDropdown.tsx
@@ -2,8 +2,9 @@
 
 import {useState, useRef, useEffect} from 'react';
 import {Link} from 'react-router-dom';
-import {ChevronDown, Settings, User as UserIcon, LogOut} from 'lucide-react';
+import {ChevronDown, Settings, User as UserIcon, LogOut, CogIcon} from 'lucide-react';
 import {SignOutButton, User, UserProfile, UserDropdown as ReactUserDropdown} from '@asgardeo/react';
+import {PoundSterling} from 'lucide-react';
 import {useApp} from '../../App';
 
 export default function UserDropdown() {
@@ -33,7 +34,28 @@ export default function UserDropdown() {
           <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> */}
-        <ReactUserDropdown />
+        <ReactUserDropdown
+          menuItems={[
+            {
+              label: (
+                <span className="flex items-center">
+                  <PoundSterling className="h-4 w-4 mr-3" />
+                  Your profile
+                </span>
+              ),
+              onClick: () => null,
+            },
+            {
+              label: (
+                <span className="flex items-center">
+                  <CogIcon className="h-4 w-4 mr-3" />
+                  Settings
+                </span>
+              ),
+              href: '/settings',
+            },
+          ]}
+        />
 
         {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 0e05c939f46ba50101450838ab2b5b3242d46074 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 15:04:34 +0530
Subject: [PATCH 07/96] feat(react): enhance UserDropdown with custom rendering
 options and improved user profile display

---
 .../UserDropdown/UserDropdown.tsx             | 133 ++++++++++++-
 .../src/components/header/UserDropdown.tsx    | 188 +++++++++---------
 2 files changed, 228 insertions(+), 93 deletions(-)

diff --git a/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx b/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx
index 78fe3cc56..1fcd7da50 100644
--- a/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx
+++ b/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx
@@ -16,17 +16,51 @@
  * under the License.
  */
 
-import {FC, ReactElement, useState} from 'react';
+import {FC, ReactElement, ReactNode, useState} from 'react';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
 import BaseUserDropdown, {BaseUserDropdownProps} from './BaseUserDropdown';
 import UserProfile from '../UserProfile/UserProfile';
 import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Popover';
 
+/**
+ * Render props data passed to the children function
+ */
+export interface UserDropdownRenderProps {
+  /** The authenticated user object */
+  user: any;
+  /** Whether user data is currently loading */
+  isLoading: boolean;
+  /** Function to open the user profile dialog */
+  openProfile: () => void;
+  /** Function to sign out the user */
+  signOut: () => void;
+  /** Whether the profile dialog is currently open */
+  isProfileOpen: boolean;
+  /** Function to close the profile dialog */
+  closeProfile: () => void;
+}
+
 /**
  * Props for the UserDropdown component.
  * Extends BaseUserDropdownProps but excludes user, onManageProfile, and onSignOut since they're handled internally
  */
-export type UserDropdownProps = Omit<BaseUserDropdownProps, 'user' | 'onManageProfile' | 'onSignOut'>;
+export type UserDropdownProps = Omit<BaseUserDropdownProps, 'user' | 'onManageProfile' | 'onSignOut'> & {
+  /**
+   * Render prop function that receives user state and actions.
+   * When provided, this completely replaces the default dropdown rendering.
+   */
+  children?: (props: UserDropdownRenderProps) => ReactNode;
+  /**
+   * Custom render function for the trigger button.
+   * When provided, this replaces just the trigger button while keeping the dropdown.
+   */
+  renderTrigger?: (props: UserDropdownRenderProps) => ReactNode;
+  /**
+   * Custom render function for the dropdown content.
+   * When provided, this replaces just the dropdown content while keeping the trigger.
+   */
+  renderDropdown?: (props: UserDropdownRenderProps) => ReactNode;
+};
 
 /**
  * UserDropdown component displays a user avatar with a dropdown menu.
@@ -34,6 +68,8 @@ export type UserDropdownProps = Omit<BaseUserDropdownProps, 'user' | 'onManagePr
  * This component is the React-specific implementation that uses the BaseUserDropdown
  * and automatically retrieves the user data from Asgardeo context.
  *
+ * Supports render props for complete customization of the dropdown appearance and behavior.
+ *
  * @example
  * ```tsx
  * // Basic usage - will use user from Asgardeo context
@@ -45,13 +81,39 @@ export type UserDropdownProps = Omit<BaseUserDropdownProps, 'user' | 'onManagePr
  *
  * // With custom configuration
  * <UserDropdown
- *   showUsername={false}
+ *   showTriggerLabel={true}
  *   avatarSize={40}
  *   fallback={<div>Please sign in</div>}
  * />
+ *
+ * // Using render props for complete customization
+ * <UserDropdown>
+ *   {({ user, isLoading, openProfile, signOut }) => (
+ *     <div>
+ *       <button onClick={openProfile}>
+ *         {user?.name || 'Loading...'}
+ *       </button>
+ *       <button onClick={signOut}>Logout</button>
+ *     </div>
+ *   )}
+ * </UserDropdown>
+ *
+ * // Using partial render props
+ * <UserDropdown
+ *   renderTrigger={({ user, openProfile }) => (
+ *     <button onClick={openProfile} className="custom-trigger">
+ *       Welcome, {user?.name}!
+ *     </button>
+ *   )}
+ * />
  * ```
  */
-const UserDropdown: FC<UserDropdownProps> = ({...rest}: UserDropdownProps): ReactElement => {
+const UserDropdown: FC<UserDropdownProps> = ({
+  children,
+  renderTrigger,
+  renderDropdown,
+  ...rest
+}: UserDropdownProps): ReactElement => {
   const {user, isLoading, signOut} = useAsgardeo();
   const [isProfileOpen, setIsProfileOpen] = useState(false);
 
@@ -63,6 +125,68 @@ const UserDropdown: FC<UserDropdownProps> = ({...rest}: UserDropdownProps): Reac
     signOut();
   };
 
+  const closeProfile = () => {
+    setIsProfileOpen(false);
+  };
+
+  // Prepare render props data
+  const renderProps: UserDropdownRenderProps = {
+    user,
+    isLoading,
+    openProfile: handleManageProfile,
+    signOut: handleSignOut,
+    isProfileOpen,
+    closeProfile,
+  };
+
+  // If children render prop is provided, use it for complete customization
+  if (children) {
+    return (
+      <>
+        {children(renderProps)}
+        {isProfileOpen && (
+          <Dialog open={isProfileOpen} onOpenChange={setIsProfileOpen}>
+            <DialogContent>
+              <DialogHeading>User Profile</DialogHeading>
+              <UserProfile />
+            </DialogContent>
+          </Dialog>
+        )}
+      </>
+    );
+  }
+
+  // If partial render props are provided, customize specific parts
+  if (renderTrigger || renderDropdown) {
+    // This would require significant changes to BaseUserDropdown to support partial customization
+    // For now, we'll provide a simple implementation that shows how it could work
+    return (
+      <>
+        {renderTrigger ? (
+          renderTrigger(renderProps)
+        ) : (
+          <BaseUserDropdown
+            user={user}
+            isLoading={isLoading}
+            onManageProfile={handleManageProfile}
+            onSignOut={handleSignOut}
+            {...rest}
+          />
+        )}
+        {/* Note: renderDropdown would need BaseUserDropdown modifications to implement properly */}
+        {isProfileOpen && (
+          <Dialog open={isProfileOpen} onOpenChange={setIsProfileOpen}>
+            <DialogContent>
+              <DialogHeading>User Profile</DialogHeading>
+              <UserProfile />
+            </DialogContent>
+          </Dialog>
+        )}
+      </>
+    );
+  }
+
+  // Default behavior - use BaseUserDropdown as before
   return (
     <>
       <BaseUserDropdown
@@ -72,6 +196,7 @@ const UserDropdown: FC<UserDropdownProps> = ({...rest}: UserDropdownProps): Reac
         onSignOut={handleSignOut}
         {...rest}
       />
+      {isProfileOpen && <UserProfile mode="popup" />}
     </>
   );
 };
diff --git a/samples/teamspace-react/src/components/header/UserDropdown.tsx b/samples/teamspace-react/src/components/header/UserDropdown.tsx
index 19b14d761..2aecf33d6 100644
--- a/samples/teamspace-react/src/components/header/UserDropdown.tsx
+++ b/samples/teamspace-react/src/components/header/UserDropdown.tsx
@@ -1,109 +1,119 @@
 'use client';
 
-import {useState, useRef, useEffect} from 'react';
-import {Link} from 'react-router-dom';
-import {ChevronDown, Settings, User as UserIcon, LogOut, CogIcon} from 'lucide-react';
-import {SignOutButton, User, UserProfile, UserDropdown as ReactUserDropdown} from '@asgardeo/react';
+import {ChevronDown, CogIcon, LogOut, Settings} from 'lucide-react';
+import {UserDropdown as _UserDropdown, SignOutButton, UserIcon, UserProfile} from '@asgardeo/react';
 import {PoundSterling} from 'lucide-react';
-import {useApp} from '../../App';
+import {useState, useRef} from 'react';
+import {Link} from 'react-router-dom';
+
+export type UserDropdownProps = {
+  mode?: 'custom' | 'default';
+};
 
-export default function UserDropdown() {
-  const {user} = useApp();
+export default function UserDropdown({mode = 'custom'}: UserDropdownProps) {
   const [showUserDropdown, setShowUserDropdown] = useState(false);
   const [showUserProfile, setShowUserProfile] = useState(false);
   const userDropdownRef = useRef<HTMLDivElement>(null);
 
-  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> */}
-        <ReactUserDropdown
-          menuItems={[
-            {
-              label: (
-                <span className="flex items-center">
-                  <PoundSterling className="h-4 w-4 mr-3" />
-                  Your profile
-                </span>
-              ),
-              onClick: () => null,
-            },
-            {
-              label: (
-                <span className="flex items-center">
-                  <CogIcon className="h-4 w-4 mr-3" />
-                  Settings
-                </span>
-              ),
-              href: '/settings',
-            },
-          ]}
-        />
-
-        {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>
+  if (mode === 'custom') {
+    return (
+      <_UserDropdown>
+        {({user, isLoading}) => (
+          <>
+            <div className="relative" ref={userDropdownRef}>
+              <button
+                onClick={() => setShowUserDropdown(!showUserDropdown)}
+                className="flex items-center space-x-2 p-1 rounded-full hover:bg-gray-50"
+              >
+                {isLoading ? (
+                  <div className="w-8 h-8 rounded-full bg-gray-200 animate-pulse" />
+                ) : user?.profileUrl ? (
+                  <img src={user.profileUrl} alt={user.userName} className="w-8 h-8 rounded-full" />
+                ) : (
+                  <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
+                    <span className="text-white text-sm font-medium">{user?.userName?.charAt(0)?.toUpperCase()}</span>
+                  </div>
+                )}
+                <ChevronDown className="h-4 w-4 text-gray-500" />
+              </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>
+              {showUserDropdown && (
+                <div className="absolute right-0 mt-2 w-75 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?.givenName} {user?.name?.familyName}
+                    </div>
+                    <div className="text-sm text-gray-500">@{user?.userName}</div>
+                  </div>
 
-            <div className="border-t border-gray-100 mt-1">
-              <SignOutButton>
-                {({signOut}) => (
                   <button
+                    className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                     onClick={() => {
-                      signOut();
+                      setShowUserProfile(true);
+                      setShowUserDropdown(false);
                     }}
-                    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
+                    <UserIcon className="h-4 w-4 mr-3" />
+                    Your profile
                   </button>
-                )}
-              </SignOutButton>
+
+                  <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>
+
+            {showUserProfile && <UserProfile mode="popup" />}
+          </>
         )}
-      </div>
+      </_UserDropdown>
+    );
+  }
 
-      {showUserProfile && <UserProfile mode="popup" />}
-    </>
+  return (
+    <_UserDropdown
+      menuItems={[
+        {
+          label: (
+            <span className="flex items-center">
+              <PoundSterling className="h-4 w-4 mr-3" />
+              Billing
+            </span>
+          ),
+          onClick: () => null,
+        },
+        {
+          label: (
+            <span className="flex items-center">
+              <CogIcon className="h-4 w-4 mr-3" />
+              Settings
+            </span>
+          ),
+          href: '/settings',
+        },
+      ]}
+    />
   );
 }

From 7812d5ee8f1057b8017d2602317f82f90efb2c03 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 16:01:29 +0530
Subject: [PATCH 08/96] feat(react): add error code convention documentation
 and implement embedded signup flow types and interfaces

---
 ERROR_CODES.md                                | 154 ++++++++++++++++++
 .../src/api/executeEmbeddedSignUpFlow.ts      | 125 ++++++++++++++
 packages/javascript/src/index.ts              |  10 ++
 .../javascript/src/models/embedded-flow.ts    |  54 ++++++
 4 files changed, 343 insertions(+)
 create mode 100644 ERROR_CODES.md
 create mode 100644 packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
 create mode 100644 packages/javascript/src/models/embedded-flow.ts

diff --git a/ERROR_CODES.md b/ERROR_CODES.md
new file mode 100644
index 000000000..0525b1b50
--- /dev/null
+++ b/ERROR_CODES.md
@@ -0,0 +1,154 @@
+# Error Code Convention
+
+## Overview
+This document defines the error code convention used throughout the Asgardeo JavaScript SDK to ensure consistency and maintainability.
+
+## Format
+Error codes follow this format:
+```
+[{packageName}-]{functionName}-{ErrorCategory}-{SequentialNumber}
+```
+
+### Components
+
+#### 1. Package Name (Optional)
+- Use when the function might exist in multiple packages or when disambiguation is needed
+- Use the package identifier (e.g., "javascript", "react", "node")
+- Examples: `javascript-`, `react-`, `node-`
+
+#### 2. Function Name
+- Use the exact function name as defined in the code
+- Use camelCase format matching the function declaration
+- Examples: `getUserInfo`, `executeEmbeddedSignUpFlow`, `initializeApplicationNativeAuthentication`
+
+#### 3. Error Category
+Categories represent the type of error:
+
+- **ValidationError**: Input validation failures, missing required parameters, invalid parameter values
+- **ResponseError**: HTTP response errors, network failures, server errors
+- **ConfigurationError**: Configuration-related errors, missing configuration, invalid settings
+- **AuthenticationError**: Authentication-specific errors, token issues, credential problems
+- **AuthorizationError**: Authorization-specific errors, permission denied, access control
+- **NetworkError**: Network connectivity issues, timeout errors
+- **ParseError**: JSON parsing errors, response format issues
+
+#### 4. Sequential Number
+- Three-digit zero-padded format: `001`, `002`, `003`, etc.
+- Start from `001` for each function
+- Increment sequentially within each function
+- Group by error category for readability
+
+## Numbering Strategy
+
+For each function, allocate number ranges by category:
+- **001-099**: ValidationError
+- **100-199**: ResponseError  
+- **200-299**: ConfigurationError
+- **300-399**: AuthenticationError
+- **400-499**: AuthorizationError
+- **500-599**: NetworkError
+- **600-699**: ParseError
+
+## Package Prefix Guidelines
+
+Use the package prefix when:
+1. **Multi-package scenarios**: When the same function name exists across different packages
+2. **Public APIs**: For functions that are part of the public API and might be referenced externally
+3. **Complex projects**: In large codebases where disambiguation aids debugging and maintenance
+
+Examples of when to use prefixes:
+- `javascript-executeEmbeddedSignUpFlow-ValidationError-001` (public API function)
+- `react-useAuth-ConfigurationError-201` (React-specific hook)
+- `node-createServer-NetworkError-501` (Node.js-specific function)
+
+## Examples
+
+### With Package Prefix (Recommended for Public APIs)
+```typescript
+// executeEmbeddedSignUpFlow Function (JavaScript package)
+'javascript-executeEmbeddedSignUpFlow-ValidationError-001'  // Missing payload
+'javascript-executeEmbeddedSignUpFlow-ValidationError-002'  // Invalid flowType
+'javascript-executeEmbeddedSignUpFlow-ResponseError-100'    // HTTP error response
+```
+
+### Without Package Prefix (Internal/Simple Functions)
+```typescript
+// getUserInfo Function (internal utility)
+'getUserInfo-ValidationError-001'  // Invalid URL
+'getUserInfo-ValidationError-002'  // Missing access token
+'getUserInfo-ResponseError-100'    // HTTP error response
+'getUserInfo-ResponseError-101'    // Invalid response format
+```
+
+## Implementation Guidelines
+
+1. **Consistency**: Always use the exact function name in error codes
+2. **Package Prefix**: Use package prefixes for public APIs and when disambiguation is needed
+3. **Documentation**: Document each error code with clear description
+4. **Categorization**: Choose the most appropriate category for each error
+5. **Numbering**: Use the range-based numbering system for better organization
+6. **Future-proofing**: Leave gaps in numbering for future error codes
+
+## Current Implementation Status
+
+### Updated Functions (Following New Convention)
+- ✅ `executeEmbeddedSignUpFlow` - Uses `javascript-` prefix with range-based numbering
+
+### Functions Needing Updates
+- ⏳ `getUserInfo` - Currently uses simple format, needs prefix evaluation
+- ⏳ `initializeApplicationNativeAuthentication` - Currently uses simple format, needs prefix evaluation  
+- ⏳ `handleApplicationNativeAuthentication` - Currently uses simple format, needs prefix evaluation
+
+## Migration Notes
+
+When updating existing error codes:
+1. **Evaluate prefix necessity**: Determine if the function needs a package prefix
+2. **Update numbering**: Move to range-based numbering (ValidationError: 001-099, ResponseError: 100-199, etc.)
+3. **Update tests**: Ensure all tests use the new error codes
+4. **Update documentation**: Document the new error codes
+5. **Consider backward compatibility**: If codes are exposed in public APIs, plan migration strategy
+
+## Example Migration
+
+### Before (Old Convention)
+```typescript
+'getUserInfo-ValidationError-001'
+'getUserInfo-ResponseError-001'
+```
+
+### After (New Convention)
+```typescript
+// Option 1: With prefix (for public API)
+'javascript-getUserInfo-ValidationError-001'
+'javascript-getUserInfo-ResponseError-100'
+
+// Option 2: Without prefix (for internal use)
+'getUserInfo-ValidationError-001'
+'getUserInfo-ResponseError-100'
+```
+
+## Current Error Code Registry
+
+### executeEmbeddedSignUpFlow (Updated - New Convention)
+- `javascript-executeEmbeddedSignUpFlow-ValidationError-001` - Missing payload
+- `javascript-executeEmbeddedSignUpFlow-ValidationError-002` - Invalid flowType  
+- `javascript-executeEmbeddedSignUpFlow-ResponseError-100` - HTTP error response
+
+### getUserInfo (Legacy Format)
+- `getUserInfo-ValidationError-001` - Invalid endpoint URL
+- `getUserInfo-ResponseError-001` - Failed to fetch user info
+
+### initializeApplicationNativeAuthentication (Legacy Format)
+- `initializeApplicationNativeAuthentication-ValidationError-002` - Missing authorization payload
+- `initializeApplicationNativeAuthentication-ResponseError-001` - Authorization request failed
+
+### handleApplicationNativeAuthentication (Legacy Format)
+- `handleApplicationNativeAuthentication-ValidationError-002` - Missing required parameter
+- `initializeApplicationNativeAuthentication-ResponseError-001` - Response error (Note: incorrect function name reference)
+
+## Recommended Actions
+
+1. **Standardize numbering**: Update legacy functions to use range-based numbering
+2. **Fix inconsistencies**: Correct the error code in `handleApplicationNativeAuthentication` that references the wrong function
+3. **Add prefixes**: Evaluate which functions need package prefixes based on their public API status
+4. **Document usage**: Add inline documentation in each file listing the error codes used
diff --git a/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts b/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
new file mode 100644
index 000000000..a7fcf01ec
--- /dev/null
+++ b/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
@@ -0,0 +1,125 @@
+import {EmbeddedFlowExecuteResponse} from './../models/embedded-flows';
+/**
+ * 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 {EmbeddedFlowType} from '../models/embedded-flows';
+
+/**
+ * Represents the embedded signup flow execution request payload.
+ */
+export interface EmbeddedSignUpFlowExecuteRequestPayload {
+  /**
+   * The type of flow to execute.
+   */
+  flowType: EmbeddedFlowType;
+}
+
+/**
+ * Request configuration for the embedded signup flow execution function.
+ */
+export interface EmbeddedSignUpFlowExecuteRequestConfig extends Partial<Request> {
+  url?: string;
+  /**
+   * The base URL of the Asgardeo server.
+   */
+  baseUrl?: string;
+  /**
+   * The embedded signup flow execution request payload.
+   */
+  payload: EmbeddedSignUpFlowExecuteRequestPayload;
+}
+
+/**
+ * Executes an embedded signup flow by sending a request to the specified flow execution endpoint.
+ *
+ * @param requestConfig - Request configuration object containing URL and payload.
+ * @returns A promise that resolves with the flow execution response.
+ * @throws AsgardeoAPIError when the request fails or URL is invalid.
+ *
+ * @example
+ * ```typescript
+ * try {
+ *   const embeddedSignUpResponse = await executeEmbeddedSignUpFlow({
+ *     url: "https://api.asgardeo.io/t/<ORGANIZATION>/api/server/v1/flow/execute",
+ *     payload: {
+ *       flowType: "REGISTRATION"
+ *     }
+ *   });
+ *   console.log(embeddedSignUpResponse);
+ * } catch (error) {
+ *   if (error instanceof AsgardeoAPIError) {
+ *     console.error('Embedded SignUp flow execution failed:', error.message);
+ *   }
+ * }
+ * ```
+ */
+const executeEmbeddedSignUpFlow = async ({
+  url,
+  baseUrl,
+  payload,
+  ...requestConfig
+}: EmbeddedSignUpFlowExecuteRequestConfig): Promise<EmbeddedFlowExecuteResponse> => {
+  if (!payload) {
+    throw new AsgardeoAPIError(
+      'Embedded SignUp flow payload is required',
+      'javascript-executeEmbeddedSignUpFlow-ValidationError-001',
+      'javascript',
+      400,
+      'If an embedded signup flow payload is not provided, the request cannot be constructed correctly.',
+    );
+  }
+
+  if (!payload.flowType || payload.flowType !== 'REGISTRATION') {
+    throw new AsgardeoAPIError(
+      'Invalid flowType. Must be "REGISTRATION"',
+      'javascript-executeEmbeddedSignUpFlow-ValidationError-002',
+      'javascript',
+      400,
+      'The flowType must be set to "REGISTRATION" for embedded signup flows.',
+    );
+  }
+
+  const {headers: customHeaders, ...otherConfig} = requestConfig;
+  const response: Response = await fetch(url ?? `${baseUrl}/api/server/v1/flow/execute`, {
+    method: requestConfig.method || 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+      ...customHeaders,
+    },
+    body: JSON.stringify(payload),
+    ...otherConfig,
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+
+    throw new AsgardeoAPIError(
+      `Embedded SignUp flow execution failed: ${errorText}`,
+      'javascript-executeEmbeddedSignUpFlow-ResponseError-100',
+      'javascript',
+      response.status,
+      response.statusText,
+    );
+  }
+
+  return (await response.json()) as EmbeddedFlowExecuteResponse;
+};
+
+export default executeEmbeddedSignUpFlow;
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 348ac76da..90b7ef5f4 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -23,6 +23,8 @@ export * from './IsomorphicCrypto';
 
 export {default as initializeApplicationNativeAuthentication} from './api/initializeApplicationNativeAuthentication';
 export {default as handleApplicationNativeAuthentication} from './api/handleApplicationNativeAuthentication';
+export {default as executeEmbeddedSignUpFlow} from './api/executeEmbeddedSignUpFlow';
+export {default as handleEmbeddedSignUpFlow} from './api/handleEmbeddedSignUpFlow';
 export {default as getUserInfo} from './api/getUserInfo';
 
 export {default as ApplicationNativeAuthenticationConstants} from './constants/ApplicationNativeAuthenticationConstants';
@@ -46,7 +48,15 @@ export {
   ApplicationNativeAuthenticationAuthenticatorParamType,
   ApplicationNativeAuthenticationAuthenticatorPromptType,
   ApplicationNativeAuthenticationAuthenticatorKnownIdPType,
+  EmbeddedSignUpFlowInitiateResponse,
+  EmbeddedSignUpFlowResponseType,
+  EmbeddedSignUpFlowViewData,
+  EmbeddedSignUpFlowComponent,
+  EmbeddedSignUpFlowComponentType,
+  EmbeddedSignUpFlowHandleRequest,
+  EmbeddedSignUpFlowHandleResponse,
 } from './models/application-native-authentication';
+export {EmbeddedFlowType} from './models/embedded-flows';
 export {AsgardeoClient, SignInOptions, SignOutOptions} from './models/client';
 export {BaseConfig, Config, Preferences, ThemePreferences, I18nPreferences, WithPreferences} from './models/config';
 export {TokenResponse, IdTokenPayload, TokenExchangeRequestConfig} from './models/token';
diff --git a/packages/javascript/src/models/embedded-flow.ts b/packages/javascript/src/models/embedded-flow.ts
new file mode 100644
index 000000000..d828b077e
--- /dev/null
+++ b/packages/javascript/src/models/embedded-flow.ts
@@ -0,0 +1,54 @@
+/**
+ * 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 EmbeddedFlowType {
+  Registration = 'REGISTRATION',
+}
+
+export interface EmbeddedFlowExecuteResponse {
+  flowId: string;
+  flowStatus: ApplicationNativeAuthenticationFlowStatus;
+  type: EmbeddedFlowResponseType;
+  data: EmbeddedSignUpFlowData;
+}
+
+export enum EmbeddedFlowResponseType {
+  View = 'VIEW',
+}
+
+export interface EmbeddedSignUpFlowData {
+  components: EmbeddedFlowComponent[];
+}
+
+export interface EmbeddedFlowComponent {
+  id: string;
+  type: EmbeddedFlowComponentType;
+  variant?: string;
+  components: EmbeddedFlowComponent[];
+  config: Record<string, any>;
+}
+
+export enum EmbeddedFlowComponentType {
+  Typography = 'TYPOGRAPHY',
+  Form = 'FORM',
+  Button = 'BUTTON',
+  Input = 'INPUT',
+  Select = 'SELECT',
+  Checkbox = 'CHECKBOX',
+  Radio = 'RADIO',
+}

From cd1f24cce0c0704dd1edba4234d196fbc741ad1e Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 22:19:45 +0530
Subject: [PATCH 09/96] feat(react): refactor embedded flow types and update
 response handling in executeEmbeddedSignUpFlow

---
 .../src/api/executeEmbeddedSignUpFlow.ts      |  3 +--
 packages/javascript/src/index.ts              | 19 +++++++++----------
 .../javascript/src/models/embedded-flow.ts    |  7 ++++++-
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts b/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
index a7fcf01ec..f04ed9e5c 100644
--- a/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
+++ b/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
@@ -1,4 +1,3 @@
-import {EmbeddedFlowExecuteResponse} from './../models/embedded-flows';
 /**
  * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
  *
@@ -18,7 +17,7 @@ import {EmbeddedFlowExecuteResponse} from './../models/embedded-flows';
  */
 
 import AsgardeoAPIError from '../errors/AsgardeoAPIError';
-import {EmbeddedFlowType} from '../models/embedded-flows';
+import {EmbeddedFlowType, EmbeddedFlowExecuteResponse} from '../models/embedded-flow';
 
 /**
  * Represents the embedded signup flow execution request payload.
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 90b7ef5f4..d293297c9 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -24,7 +24,6 @@ export * from './IsomorphicCrypto';
 export {default as initializeApplicationNativeAuthentication} from './api/initializeApplicationNativeAuthentication';
 export {default as handleApplicationNativeAuthentication} from './api/handleApplicationNativeAuthentication';
 export {default as executeEmbeddedSignUpFlow} from './api/executeEmbeddedSignUpFlow';
-export {default as handleEmbeddedSignUpFlow} from './api/handleEmbeddedSignUpFlow';
 export {default as getUserInfo} from './api/getUserInfo';
 
 export {default as ApplicationNativeAuthenticationConstants} from './constants/ApplicationNativeAuthenticationConstants';
@@ -47,16 +46,16 @@ export {
   ApplicationNativeAuthenticationHandleResponse,
   ApplicationNativeAuthenticationAuthenticatorParamType,
   ApplicationNativeAuthenticationAuthenticatorPromptType,
-  ApplicationNativeAuthenticationAuthenticatorKnownIdPType,
-  EmbeddedSignUpFlowInitiateResponse,
-  EmbeddedSignUpFlowResponseType,
-  EmbeddedSignUpFlowViewData,
-  EmbeddedSignUpFlowComponent,
-  EmbeddedSignUpFlowComponentType,
-  EmbeddedSignUpFlowHandleRequest,
-  EmbeddedSignUpFlowHandleResponse,
+  ApplicationNativeAuthenticationAuthenticatorKnownIdPType
 } from './models/application-native-authentication';
-export {EmbeddedFlowType} from './models/embedded-flows';
+export {
+  EmbeddedFlowType,
+  EmbeddedFlowExecuteResponse,
+  EmbeddedFlowResponseType,
+  EmbeddedSignUpFlowData,
+  EmbeddedFlowComponent,
+  EmbeddedFlowComponentType,
+} from './models/embedded-flow';
 export {AsgardeoClient, SignInOptions, SignOutOptions} from './models/client';
 export {BaseConfig, Config, Preferences, ThemePreferences, I18nPreferences, WithPreferences} from './models/config';
 export {TokenResponse, IdTokenPayload, TokenExchangeRequestConfig} from './models/token';
diff --git a/packages/javascript/src/models/embedded-flow.ts b/packages/javascript/src/models/embedded-flow.ts
index d828b077e..95dd1f41d 100644
--- a/packages/javascript/src/models/embedded-flow.ts
+++ b/packages/javascript/src/models/embedded-flow.ts
@@ -22,11 +22,16 @@ export enum EmbeddedFlowType {
 
 export interface EmbeddedFlowExecuteResponse {
   flowId: string;
-  flowStatus: ApplicationNativeAuthenticationFlowStatus;
+  flowStatus: EmbeddedFlowStatus;
   type: EmbeddedFlowResponseType;
   data: EmbeddedSignUpFlowData;
 }
 
+export enum EmbeddedFlowStatus {
+  Complete = 'COMPLETE',
+  Incomplete = 'INCOMPLETE',
+}
+
 export enum EmbeddedFlowResponseType {
   View = 'VIEW',
 }

From a73fbe5fc875ffe454cd24dc06bd8b92b13646be Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 17 Jun 2025 22:20:56 +0530
Subject: [PATCH 10/96] feat(react): implement embedded sign-up flow with error
 handling and update client interfaces

---
 .../src/AsgardeoJavaScriptClient.ts           | 54 +++----------------
 .../src/api/executeEmbeddedSignUpFlow.ts      | 39 +++++---------
 packages/javascript/src/index.ts              |  5 +-
 packages/javascript/src/models/client.ts      | 18 +++++++
 .../javascript/src/models/embedded-flow.ts    |  6 +++
 packages/react/src/AsgardeoReactClient.ts     | 40 +++++++++++++-
 .../contexts/Asgardeo/AsgardeoProvider.tsx    | 27 +++++++---
 7 files changed, 104 insertions(+), 85 deletions(-)

diff --git a/packages/javascript/src/AsgardeoJavaScriptClient.ts b/packages/javascript/src/AsgardeoJavaScriptClient.ts
index 5d46f7b1a..730a87c7d 100644
--- a/packages/javascript/src/AsgardeoJavaScriptClient.ts
+++ b/packages/javascript/src/AsgardeoJavaScriptClient.ts
@@ -16,9 +16,10 @@
  * under the License.
  */
 
-import {AsgardeoClient, SignInOptions, SignOutOptions} from './models/client';
+import {AsgardeoClient, SignInOptions, SignOutOptions, SignUpOptions} from './models/client';
 import {User, UserProfile} from './models/user';
 import {Config} from './models/config';
+import {EmbeddedFlowExecuteRequestPayload, EmbeddedFlowExecuteResponse} from './models/embedded-flow';
 
 /**
  * Base class for implementing Asgardeo clients.
@@ -27,70 +28,27 @@ import {Config} from './models/config';
  * @typeParam T - Configuration type that extends Config.
  */
 abstract class AsgardeoJavaScriptClient<T = Config> implements AsgardeoClient<T> {
-  /**
-   * Initializes the authentication client with provided configuration.
-   *
-   * @param config - SDK Client instance configuration options.
-   * @returns Promise resolving to boolean indicating success.
-   */
   abstract initialize(config: T): Promise<boolean>;
 
-  /**
-   * Gets user information from the session.
-   *
-   * @returns User object containing user details.
-   */
   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.
-   *
-   * @returns Boolean indicating if the client is loading.
-   */
   abstract isLoading(): boolean;
 
-  /**
-   * Checks if a user is signed in.
-   * FIXME: Check if this should return a boolean or a Promise<boolean>.
-   *
-   * @returns Promise resolving to boolean indicating sign-in status.
-   */
   abstract isSignedIn(): Promise<boolean>;
 
-  /**
-   * Initiates the sign-in process for the user.
-   *
-   * @param options - Optional sign-in options like additional parameters to be sent in the authorize request, etc.
-   * @returns Promise resolving the user upon successful sign in.
-   */
   abstract signIn(options?: SignInOptions): Promise<User>;
-
-  /**
-   * Signs out the currently signed-in user.
-   *
-   * @param options - Optional sign-out options like additional parameters to be sent in the sign-out request, etc.
-   * @param afterSignOut - Callback function to be executed after sign-out is complete.
-   * @returns A promise that resolves to true if sign-out is successful
-   */
   abstract signOut(options?: SignOutOptions, afterSignOut?: (redirectUrl: string) => void): Promise<string>;
-
-  /**
-   * Signs out the currently signed-in user with an optional session ID.
-   *
-   * @param options - Optional sign-out options like additional parameters to be sent in the sign-out request, etc.
-   * @param sessionId - Optional session ID to be used for sign-out.
-   *                    This can be useful in scenarios where multiple sessions are managed.
-   * @param afterSignOut - Callback function to be executed after sign-out is complete.
-   * @returns A promise that resolves to true if sign-out is successful
-   */
   abstract signOut(
     options?: SignOutOptions,
     sessionId?: string,
     afterSignOut?: (redirectUrl: string) => void,
   ): Promise<string>;
+
+  abstract signUp(options?: SignUpOptions): Promise<void>;
+  abstract signUp(payload: EmbeddedFlowExecuteRequestPayload): Promise<EmbeddedFlowExecuteResponse>;
+  abstract signUp(payload?: unknown): Promise<void> | Promise<EmbeddedFlowExecuteResponse>;
 }
 
 export default AsgardeoJavaScriptClient;
diff --git a/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts b/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
index f04ed9e5c..22aabe8da 100644
--- a/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
+++ b/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
@@ -17,17 +17,11 @@
  */
 
 import AsgardeoAPIError from '../errors/AsgardeoAPIError';
-import {EmbeddedFlowType, EmbeddedFlowExecuteResponse} from '../models/embedded-flow';
-
-/**
- * Represents the embedded signup flow execution request payload.
- */
-export interface EmbeddedSignUpFlowExecuteRequestPayload {
-  /**
-   * The type of flow to execute.
-   */
-  flowType: EmbeddedFlowType;
-}
+import {
+  EmbeddedFlowType,
+  EmbeddedFlowExecuteResponse,
+  EmbeddedFlowExecuteRequestPayload,
+} from '../models/embedded-flow';
 
 /**
  * Request configuration for the embedded signup flow execution function.
@@ -41,7 +35,7 @@ export interface EmbeddedSignUpFlowExecuteRequestConfig extends Partial<Request>
   /**
    * The embedded signup flow execution request payload.
    */
-  payload: EmbeddedSignUpFlowExecuteRequestPayload;
+  payload?: EmbeddedFlowExecuteRequestPayload;
 }
 
 /**
@@ -74,23 +68,13 @@ const executeEmbeddedSignUpFlow = async ({
   payload,
   ...requestConfig
 }: EmbeddedSignUpFlowExecuteRequestConfig): Promise<EmbeddedFlowExecuteResponse> => {
-  if (!payload) {
+  if (!baseUrl || !url) {
     throw new AsgardeoAPIError(
-      'Embedded SignUp flow payload is required',
+      'Embedded SignUp flow execution failed: Base URL or URL is not provided.',
       'javascript-executeEmbeddedSignUpFlow-ValidationError-001',
       'javascript',
       400,
-      'If an embedded signup flow payload is not provided, the request cannot be constructed correctly.',
-    );
-  }
-
-  if (!payload.flowType || payload.flowType !== 'REGISTRATION') {
-    throw new AsgardeoAPIError(
-      'Invalid flowType. Must be "REGISTRATION"',
-      'javascript-executeEmbeddedSignUpFlow-ValidationError-002',
-      'javascript',
-      400,
-      'The flowType must be set to "REGISTRATION" for embedded signup flows.',
+      'At least one of the baseUrl or url must be provided to execute the embedded sign up flow.',
     );
   }
 
@@ -102,7 +86,10 @@ const executeEmbeddedSignUpFlow = async ({
       Accept: 'application/json',
       ...customHeaders,
     },
-    body: JSON.stringify(payload),
+    body: JSON.stringify({
+      ...(payload ?? {}),
+      flowType: EmbeddedFlowType.Registration,
+    }),
     ...otherConfig,
   });
 
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index d293297c9..cc15d5ec9 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -46,7 +46,7 @@ export {
   ApplicationNativeAuthenticationHandleResponse,
   ApplicationNativeAuthenticationAuthenticatorParamType,
   ApplicationNativeAuthenticationAuthenticatorPromptType,
-  ApplicationNativeAuthenticationAuthenticatorKnownIdPType
+  ApplicationNativeAuthenticationAuthenticatorKnownIdPType,
 } from './models/application-native-authentication';
 export {
   EmbeddedFlowType,
@@ -55,8 +55,9 @@ export {
   EmbeddedSignUpFlowData,
   EmbeddedFlowComponent,
   EmbeddedFlowComponentType,
+  EmbeddedFlowExecuteRequestPayload,
 } from './models/embedded-flow';
-export {AsgardeoClient, SignInOptions, SignOutOptions} from './models/client';
+export {AsgardeoClient, SignInOptions, SignOutOptions, SignUpOptions} from './models/client';
 export {BaseConfig, Config, Preferences, ThemePreferences, I18nPreferences, WithPreferences} from './models/config';
 export {TokenResponse, IdTokenPayload, TokenExchangeRequestConfig} from './models/token';
 export {Crypto, JWKInterface} from './models/crypto';
diff --git a/packages/javascript/src/models/client.ts b/packages/javascript/src/models/client.ts
index bc7545b6c..f9fd45a35 100644
--- a/packages/javascript/src/models/client.ts
+++ b/packages/javascript/src/models/client.ts
@@ -16,10 +16,12 @@
  * under the License.
  */
 
+import {EmbeddedFlowExecuteRequestPayload, EmbeddedFlowExecuteResponse} from './embedded-flow';
 import {User, UserProfile} from './user';
 
 export type SignInOptions = Record<string, unknown>;
 export type SignOutOptions = Record<string, unknown>;
+export type SignUpOptions = Record<string, unknown>;
 
 /**
  * Interface defining the core functionality for Asgardeo authentication clients.
@@ -78,6 +80,22 @@ export interface AsgardeoClient<T> {
    */
   signIn(options?: SignInOptions): Promise<User>;
 
+  /**
+   * Initiates a redirection-based sign-up process for the user.
+   *
+   * @param options - Optional sign-up options like additional parameters to be sent in the sign-up request, etc.
+   * @returns Promise resolving to the user upon successful sign up.
+   */
+  signUp(options?: SignUpOptions): Promise<void>;
+
+  /**
+   * Initiates an embedded (App-Native) sign-up flow for the user.
+   *
+   * @param payload - The payload containing the necessary information to execute the embedded sign-up flow.
+   * @returns A promise that resolves to an EmbeddedFlowExecuteResponse containing the flow execution details.
+   */
+  signUp(payload: EmbeddedFlowExecuteRequestPayload): Promise<EmbeddedFlowExecuteResponse>;
+
   /**
    * Signs out the currently signed-in user.
    *
diff --git a/packages/javascript/src/models/embedded-flow.ts b/packages/javascript/src/models/embedded-flow.ts
index 95dd1f41d..7bf982b27 100644
--- a/packages/javascript/src/models/embedded-flow.ts
+++ b/packages/javascript/src/models/embedded-flow.ts
@@ -20,6 +20,12 @@ export enum EmbeddedFlowType {
   Registration = 'REGISTRATION',
 }
 
+export interface EmbeddedFlowExecuteRequestPayload {
+  actionId?: string;
+  flowType: EmbeddedFlowType;
+  inputs?: Record<string, any>;
+}
+
 export interface EmbeddedFlowExecuteResponse {
   flowId: string;
   flowStatus: EmbeddedFlowStatus;
diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index 5dae4ecde..674162298 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -25,6 +25,11 @@ import {
   SignOutOptions,
   User,
   generateUserProfile,
+  EmbeddedFlowExecuteResponse,
+  SignUpOptions,
+  EmbeddedFlowExecuteRequestPayload,
+  AsgardeoRuntimeError,
+  executeEmbeddedSignUpFlow,
 } from '@asgardeo/browser';
 import AuthAPI from './__temp__/api';
 import {AsgardeoReactConfig} from './models/config';
@@ -71,11 +76,11 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
 
     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 {
@@ -112,6 +117,37 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
 
     return Promise.resolve(String(response));
   }
+
+  override async signUp(options?: SignUpOptions): Promise<void>;
+  override async signUp(payload: EmbeddedFlowExecuteRequestPayload): Promise<EmbeddedFlowExecuteResponse>;
+  override async signUp(...args: any[]): Promise<void | EmbeddedFlowExecuteResponse> {
+    if (args.length === 0) {
+      throw new AsgardeoRuntimeError(
+        'No arguments provided for signUp method.',
+        'react-AsgardeoReactClient-ValidationError-001',
+        'react',
+        'The signUp method requires at least one argument, either a SignUpOptions object or an EmbeddedFlowExecuteRequestPayload.',
+      );
+    }
+
+    const firstArg = args[0];
+
+    if (typeof firstArg === 'object' && 'flowType' in firstArg) {
+      const baseUrl = await (await this.asgardeo.getConfigData()).baseUrl;
+
+      return executeEmbeddedSignUpFlow({
+        baseUrl,
+        payload: firstArg as EmbeddedFlowExecuteRequestPayload,
+      });
+    } else {
+      throw new AsgardeoRuntimeError(
+        'Not implemented',
+        'react-AsgardeoReactClient-ValidationError-002',
+        'react',
+        'The signUp method with SignUpOptions is not implemented in the React client.',
+      );
+    }
+  }
 }
 
 export default AsgardeoReactClient;
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index 92197a40f..73961d609 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -16,7 +16,14 @@
  * under the License.
  */
 
-import {SignInOptions, SignOutOptions, User, UserProfile} from '@asgardeo/browser';
+import {
+  AsgardeoRuntimeError,
+  EmbeddedFlowExecuteRequestPayload,
+  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';
@@ -154,8 +161,17 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
     }
   };
 
-  const signUp = (): void => {
-    throw new Error('Not implemented');
+  const signUp = async (payload?: EmbeddedFlowExecuteRequestPayload): Promise<void> => {
+    try {
+      await asgardeo.signUp(payload);
+    } catch (error) {
+      throw new AsgardeoRuntimeError(
+        `Error while signing up: ${error.message || error}`,
+        'asgardeo-signUp-Error',
+        'react',
+        'An error occurred while trying to sign up.',
+      );
+    }
   };
 
   const signOut = async (options?: SignOutOptions, afterSignOut?: () => void): Promise<string> =>
@@ -175,10 +191,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
         isSignedIn: isSignedInSync,
         signIn,
         signOut,
-        signUp: () => {
-          // TODO: Implement signUp functionality
-          throw new Error('Sign up functionality not implemented yet');
-        },
+        signUp,
         user,
         baseUrl,
         afterSignInUrl,

From 33f1cf59452e1161da1686b8d547ad2b3b49c33a Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 18 Jun 2025 00:19:47 +0530
Subject: [PATCH 11/96] feat(react): add BaseSignUp and SignUp components for
 embedded sign-up flow, enhance AsgardeoProvider with response handling, and
 update routing in the sample app

---
 .gitignore                                    |   4 +-
 .vscode/settings.json                         |  31 +-
 .../src/api/executeEmbeddedSignUpFlow.ts      |   2 +-
 packages/javascript/src/index.ts              |   1 +
 packages/react/src/AsgardeoReactClient.ts     |   2 +-
 .../presentation/SignUp/BaseSignUp.tsx        | 545 ++++++++++++++++++
 .../components/presentation/SignUp/SignUp.tsx | 144 +++++
 .../contexts/Asgardeo/AsgardeoProvider.tsx    |   7 +-
 packages/react/src/index.ts                   |   6 +
 samples/teamspace-react/src/App.tsx           |   9 +
 .../teamspace-react/src/pages/SignUpPage.tsx  |  30 +
 11 files changed, 755 insertions(+), 26 deletions(-)
 create mode 100644 packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
 create mode 100644 packages/react/src/components/presentation/SignUp/SignUp.tsx
 create mode 100644 samples/teamspace-react/src/pages/SignUpPage.tsx

diff --git a/.gitignore b/.gitignore
index cf3dd4a4b..9b89913dd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,4 +43,6 @@ Thumbs.db
 
 # Environment files
 *.env
-.env*
\ No newline at end of file
+.env*
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1ed1b3fab..8c6c7b13e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,22 +1,13 @@
 {
-    "conventionalCommits.scopes": [
-        "workspace",
-        "core",
-        "react",
-        "auth-components",
-        "sample-app",
-        "docs"
-    ],
-    "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": "explicit"
-    },
-    "css.validate": false,
-    "less.validate": false,
-    "scss.validate": false,
-    "stylelint.validate": [
-        "css",
-        "scss"
-    ],
-    "typescript.tsdk": "node_modules/typescript/lib",
-    "editor.formatOnSave": true
+  "conventionalCommits.scopes": ["workspace", "core", "react", "auth-components", "sample-app", "docs"],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false,
+  "stylelint.validate": ["css", "scss"],
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.formatOnSave": true,
+  "nxConsole.generateAiAgentRules": true
 }
diff --git a/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts b/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
index 22aabe8da..ced448de8 100644
--- a/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
+++ b/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
@@ -68,7 +68,7 @@ const executeEmbeddedSignUpFlow = async ({
   payload,
   ...requestConfig
 }: EmbeddedSignUpFlowExecuteRequestConfig): Promise<EmbeddedFlowExecuteResponse> => {
-  if (!baseUrl || !url) {
+  if (!baseUrl && !url) {
     throw new AsgardeoAPIError(
       'Embedded SignUp flow execution failed: Base URL or URL is not provided.',
       'javascript-executeEmbeddedSignUpFlow-ValidationError-001',
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index cc15d5ec9..b7b70e981 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -50,6 +50,7 @@ export {
 } from './models/application-native-authentication';
 export {
   EmbeddedFlowType,
+  EmbeddedFlowStatus,
   EmbeddedFlowExecuteResponse,
   EmbeddedFlowResponseType,
   EmbeddedSignUpFlowData,
diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index 674162298..12fc48d18 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -133,7 +133,7 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
     const firstArg = args[0];
 
     if (typeof firstArg === 'object' && 'flowType' in firstArg) {
-      const baseUrl = await (await this.asgardeo.getConfigData()).baseUrl;
+      const baseUrl: string = (await this.asgardeo.getConfigData())?.baseUrl;
 
       return executeEmbeddedSignUpFlow({
         baseUrl,
diff --git a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
new file mode 100644
index 000000000..0c7f7b6ad
--- /dev/null
+++ b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
@@ -0,0 +1,545 @@
+/**
+ * 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 {
+  EmbeddedFlowExecuteRequestPayload,
+  EmbeddedFlowExecuteResponse,
+  EmbeddedFlowStatus,
+  EmbeddedFlowComponentType,
+  withVendorCSSClassPrefix,
+  AsgardeoAPIError,
+} from '@asgardeo/browser';
+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';
+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';
+import useFlow from '../../../contexts/Flow/useFlow';
+import {createField} from '../../factories/FieldFactory';
+import Button from '../../primitives/Button/Button';
+
+/**
+ * Props for the BaseSignUp component.
+ */
+export interface BaseSignUpProps {
+  /**
+   * Function to initialize sign-up flow.
+   * @returns Promise resolving to the initial sign-up response.
+   */
+  onInitialize: (payload?: EmbeddedFlowExecuteRequestPayload) => Promise<EmbeddedFlowExecuteResponse>;
+
+  /**
+   * Function to handle sign-up steps.
+   * @param payload - The sign-up payload.
+   * @returns Promise resolving to the sign-up response.
+   */
+  onSubmit: (payload: EmbeddedFlowExecuteRequestPayload) => Promise<EmbeddedFlowExecuteResponse>;
+
+  /**
+   * Callback function called when sign-up is successful.
+   * @param response - The sign-up response data returned upon successful completion.
+   */
+  onSuccess?: (response: EmbeddedFlowExecuteResponse) => void;
+
+  /**
+   * Callback function called when sign-up fails.
+   * @param error - The error that occurred during sign-up.
+   */
+  onError?: (error: Error) => void;
+
+  /**
+   * Callback function called when sign-up flow status changes.
+   * @param response - The current sign-up response.
+   */
+  onFlowChange?: (response: EmbeddedFlowExecuteResponse) => 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;
+
+  /**
+   * Size variant for the component.
+   */
+  size?: 'small' | 'medium' | 'large';
+
+  /**
+   * Theme variant for the component.
+   */
+  variant?: 'default' | 'outlined' | 'filled';
+
+  /**
+   * URL to redirect after successful sign-up.
+   */
+  afterSignUpUrl?: string;
+}
+
+/**
+ * Base SignUp component that provides embedded sign-up flow.
+ * This component handles both the presentation layer and sign-up flow logic.
+ * It accepts API functions as props to maintain framework independence.
+ *
+ * @example
+ * ```tsx
+ * import { BaseSignUp } from '@asgardeo/react';
+ *
+ * const MySignUp = () => {
+ *   return (
+ *     <BaseSignUp
+ *       onInitialize={async (payload) => {
+ *         // Your API call to initialize sign-up
+ *         return await initializeSignUp(payload);
+ *       }}
+ *       onSubmit={async (payload) => {
+ *         // Your API call to handle sign-up
+ *         return await handleSignUp(payload);
+ *       }}
+ *       onSuccess={(response) => {
+ *         console.log('Success:', response);
+ *       }}
+ *       onError={(error) => {
+ *         console.error('Error:', error);
+ *       }}
+ *       className="max-w-md mx-auto"
+ *     />
+ *   );
+ * };
+ * ```
+ */
+const BaseSignUp: FC<BaseSignUpProps> = props => {
+  return (
+    <FlowProvider>
+      <BaseSignUpContent {...props} />
+    </FlowProvider>
+  );
+};
+
+/**
+ * Internal component that consumes FlowContext and renders the sign-up UI.
+ */
+const BaseSignUpContent: FC<BaseSignUpProps> = ({
+  afterSignUpUrl,
+  onInitialize,
+  onSubmit,
+  onSuccess,
+  onError,
+  onFlowChange,
+  className = '',
+  inputClassName = '',
+  buttonClassName = '',
+  errorClassName = '',
+  messageClassName = '',
+  size = 'medium',
+  variant = 'default',
+}) => {
+  const {t} = useTranslation();
+  const {subtitle: flowSubtitle, title: flowTitle, messages: flowMessages} = useFlow();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [currentFlow, setCurrentFlow] = useState<EmbeddedFlowExecuteResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [formData, setFormData] = useState<Record<string, any>>({});
+
+  // Ref to track if initialization has been attempted to prevent multiple calls
+  const initializationAttemptedRef = useRef(false);
+
+  /**
+   * Extract form fields from flow components
+   */
+  const extractFormFields = useCallback(
+    (components: any[]): FormField[] => {
+      const fields: FormField[] = [];
+
+      const processComponents = (comps: any[]) => {
+        comps.forEach(component => {
+          if (component.type === EmbeddedFlowComponentType.Input) {
+            const config = component.config || {};
+            fields.push({
+              name: config.name || component.id,
+              required: config.required || false,
+              initialValue: config.defaultValue || '',
+              validator: (value: string) => {
+                if (config.required && (!value || value.trim() === '')) {
+                  return t('field.required');
+                }
+                // Add email validation if it's an email field
+                if (config.type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+                  return t('field.email.invalid');
+                }
+                // Add password strength validation if it's a password field
+                if (config.type === 'password' && value && value.length < 8) {
+                  return t('field.password.weak');
+                }
+                return null;
+              },
+            });
+          }
+
+          if (component.components && Array.isArray(component.components)) {
+            processComponents(component.components);
+          }
+        });
+      };
+
+      processComponents(components);
+      return fields;
+    },
+    [t],
+  );
+
+  const formFields = currentFlow?.data?.components ? extractFormFields(currentFlow.data.components) : [];
+
+  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 flow.
+   */
+  const setupFormFields = useCallback(
+    (flowResponse: EmbeddedFlowExecuteResponse) => {
+      const fields = extractFormFields(flowResponse.data?.components || []);
+      const initialValues: Record<string, string> = {};
+
+      fields.forEach(field => {
+        initialValues[field.name] = field.initialValue || '';
+      });
+
+      // Reset form with new values
+      resetForm();
+
+      // Set initial values for all fields
+      Object.keys(initialValues).forEach(key => {
+        setFormValue(key, initialValues[key]);
+      });
+    },
+    [extractFormFields, resetForm, setFormValue],
+  );
+
+  /**
+   * Handle form submission.
+   */
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+
+    if (!currentFlow) {
+      return;
+    }
+
+    // Mark all fields as touched before validation
+    touchAllFields();
+
+    const validation = validateForm();
+    if (!validation.isValid) {
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const payload: EmbeddedFlowExecuteRequestPayload = {
+        flowType: currentFlow.data ? (currentFlow.data as any) : undefined,
+        inputs: formValues,
+        actionId: 'submit', // This might need to be dynamic based on the flow
+      };
+
+      const response = await onSubmit(payload);
+      onFlowChange?.(response);
+
+      if (response.flowStatus === EmbeddedFlowStatus.Complete) {
+        onSuccess?.(response);
+
+        // Handle redirect if afterSignUpUrl is provided
+        if (afterSignUpUrl) {
+          window.location.href = afterSignUpUrl;
+        }
+        return;
+      }
+
+      if (response.flowStatus === EmbeddedFlowStatus.Incomplete) {
+        // Continue with the next step
+        setCurrentFlow(response);
+        setupFormFields(response);
+      }
+    } catch (err) {
+      const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.sign.up.flow.failure');
+      setError(errorMessage);
+      onError?.(err as Error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  /**
+   * Handle input value changes.
+   */
+  const handleInputChange = (name: string, value: string) => {
+    setFormValue(name, value);
+    setFormTouched(name, true);
+  };
+
+  /**
+   * Render form components based on flow data
+   */
+  const renderComponents = useCallback(
+    (components: any[]): ReactElement[] => {
+      return components
+        .map((component, index) => {
+          const config = component.config || {};
+
+          switch (component.type) {
+            case EmbeddedFlowComponentType.Typography:
+              return (
+                <Typography key={component.id || index} variant={config.variant || 'body1'} className={messageClasses}>
+                  {config.text || config.content}
+                </Typography>
+              );
+
+            case EmbeddedFlowComponentType.Input:
+              const fieldName = config.name || component.id;
+              return createField({
+                type: config.type || 'text',
+                name: fieldName,
+                label: config.label || fieldName,
+                placeholder: config.placeholder,
+                required: config.required || false,
+                value: formValues[fieldName] || '',
+                error: touchedFields[fieldName] ? formErrors[fieldName] : undefined,
+                onChange: (value: string) => handleInputChange(fieldName, value),
+                className: inputClasses,
+              });
+
+            case EmbeddedFlowComponentType.Button:
+              return (
+                <Button
+                  key={component.id || index}
+                  type={config.type === 'submit' ? 'submit' : 'button'}
+                  variant={config.variant || 'contained'}
+                  size={size}
+                  disabled={isLoading || !isFormValid}
+                  className={buttonClasses}
+                >
+                  {isLoading ? <Spinner size="small" /> : config.text || config.label || 'Submit'}
+                </Button>
+              );
+
+            case EmbeddedFlowComponentType.Form:
+              return (
+                <div key={component.id || index}>{component.components && renderComponents(component.components)}</div>
+              );
+
+            default:
+              if (component.components && Array.isArray(component.components)) {
+                return <div key={component.id || index}>{renderComponents(component.components)}</div>;
+              }
+              return null;
+          }
+        })
+        .filter(Boolean) as ReactElement[];
+    },
+    [formValues, touchedFields, formErrors, isFormValid, isLoading, size],
+  );
+
+  // Generate CSS classes
+  const containerClasses = clsx(
+    [
+      withVendorCSSClassPrefix('signup'),
+      withVendorCSSClassPrefix(`signup--${size}`),
+      withVendorCSSClassPrefix(`signup--${variant}`),
+    ],
+    className,
+  );
+
+  const inputClasses = clsx(
+    [
+      withVendorCSSClassPrefix('signup__input'),
+      size === 'small' && withVendorCSSClassPrefix('signup__input--small'),
+      size === 'large' && withVendorCSSClassPrefix('signup__input--large'),
+    ],
+    inputClassName,
+  );
+
+  const buttonClasses = clsx(
+    [
+      withVendorCSSClassPrefix('signup__button'),
+      size === 'small' && withVendorCSSClassPrefix('signup__button--small'),
+      size === 'large' && withVendorCSSClassPrefix('signup__button--large'),
+      variant === 'outlined' && withVendorCSSClassPrefix('signup__button--outlined'),
+      variant === 'filled' && withVendorCSSClassPrefix('signup__button--filled'),
+    ],
+    buttonClassName,
+  );
+
+  const errorClasses = clsx([withVendorCSSClassPrefix('signup__error')], errorClassName);
+
+  const messageClasses = clsx([withVendorCSSClassPrefix('signup__messages')], messageClassName);
+
+  // Initialize the flow on component mount
+  useEffect(() => {
+    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);
+
+          debugger;
+
+          if (response.flowStatus === EmbeddedFlowStatus.Complete) {
+            onSuccess?.(response);
+
+            if (afterSignUpUrl) {
+              window.location.href = afterSignUpUrl;
+            }
+            return;
+          }
+
+          if (response.flowStatus === EmbeddedFlowStatus.Incomplete) {
+            setupFormFields(response);
+          }
+        } catch (err) {
+          const errorMessage = err instanceof Error ? err.message : t('errors.sign.up.flow.initialization.failure');
+          setError(errorMessage);
+          onError?.(err as Error);
+        } finally {
+          setIsLoading(false);
+        }
+      };
+
+      performInitialization();
+    }
+  }, [isInitialized, onInitialize, onSuccess, onError, onFlowChange, setupFormFields, afterSignUpUrl, t]);
+
+  if (!isInitialized && isLoading) {
+    return (
+      <Card className={containerClasses}>
+        <div style={{display: 'flex', justifyContent: 'center', padding: '2rem'}}>
+          <Spinner size="medium" />
+        </div>
+      </Card>
+    );
+  }
+
+  if (!currentFlow) {
+    return (
+      <Card className={containerClasses}>
+        <Alert variant="error" className={errorClasses}>
+          <Alert.Description>{error || t('errors.sign.up.flow.initialization.failure')}</Alert.Description>
+        </Alert>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className={containerClasses}>
+      {(flowTitle || flowSubtitle) && (
+        <div style={{marginBottom: '1.5rem', textAlign: 'center'}}>
+          {flowTitle && (
+            <Typography variant="h4" component="h1" style={{marginBottom: '0.5rem'}}>
+              {flowTitle}
+            </Typography>
+          )}
+          {flowSubtitle && (
+            <Typography variant="body2" color="textSecondary">
+              {flowSubtitle}
+            </Typography>
+          )}
+        </div>
+      )}
+
+      {error && (
+        <Alert variant="error" className={errorClasses} style={{marginBottom: '1rem'}}>
+          <Alert.Description>{error}</Alert.Description>
+        </Alert>
+      )}
+
+      {flowMessages && flowMessages.length > 0 && (
+        <div className={messageClasses} style={{marginBottom: '1rem'}}>
+          {flowMessages.map((message, index) => (
+            <Alert
+              key={index}
+              variant={message.type?.toLowerCase() === 'error' ? 'error' : 'info'}
+              style={{marginBottom: '0.5rem'}}
+            >
+              <Alert.Description>{message.message}</Alert.Description>
+            </Alert>
+          ))}
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit}>
+        {currentFlow.data?.components && renderComponents(currentFlow.data.components)}
+      </form>
+    </Card>
+  );
+};
+
+export default BaseSignUp;
diff --git a/packages/react/src/components/presentation/SignUp/SignUp.tsx b/packages/react/src/components/presentation/SignUp/SignUp.tsx
new file mode 100644
index 000000000..b23067629
--- /dev/null
+++ b/packages/react/src/components/presentation/SignUp/SignUp.tsx
@@ -0,0 +1,144 @@
+/**
+ * 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 {EmbeddedFlowExecuteRequestPayload, EmbeddedFlowExecuteResponse, EmbeddedFlowType} from '@asgardeo/browser';
+import {FC} from 'react';
+import BaseSignUp from './BaseSignUp';
+import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
+
+/**
+ * Props for the SignUp component.
+ */
+export interface SignUpProps {
+  /**
+   * Additional CSS class names for customization.
+   */
+  className?: string;
+
+  /**
+   * Size variant for the component.
+   */
+  size?: 'small' | 'medium' | 'large';
+
+  /**
+   * Theme variant for the component.
+   */
+  variant?: 'default' | 'outlined' | 'filled';
+
+  /**
+   * URL to redirect after successful sign-up.
+   */
+  afterSignUpUrl?: string;
+
+  /**
+   * Callback function called when sign-up is successful.
+   * @param response - The sign-up response data returned upon successful completion.
+   */
+  onSuccess?: (response: EmbeddedFlowExecuteResponse) => void;
+
+  /**
+   * Callback function called when sign-up fails.
+   * @param error - The error that occurred during sign-up.
+   */
+  onError?: (error: Error) => void;
+}
+
+/**
+ * A styled SignUp component that provides embedded sign-up flow with pre-built styling.
+ * This component handles the API calls for sign-up and delegates UI logic to BaseSignUp.
+ *
+ * @example
+ * ```tsx
+ * import { SignUp } from '@asgardeo/react';
+ *
+ * const App = () => {
+ *   return (
+ *     <SignUp
+ *       onSuccess={(response) => {
+ *         console.log('Sign-up successful:', response);
+ *         // Handle successful sign-up (e.g., redirect, show confirmation)
+ *       }}
+ *       onError={(error) => {
+ *         console.error('Sign-up failed:', error);
+ *       }}
+ *       size="medium"
+ *       variant="outlined"
+ *       afterSignUpUrl="/welcome"
+ *     />
+ *   );
+ * };
+ * ```
+ */
+const SignUp: FC<SignUpProps> = ({
+  className,
+  size = 'medium',
+  variant = 'default',
+  afterSignUpUrl,
+  onSuccess,
+  onError,
+}) => {
+  const {signUp} = useAsgardeo();
+
+  /**
+   * Initialize the sign-up flow.
+   */
+  const handleInitialize = async (
+    payload?: EmbeddedFlowExecuteRequestPayload,
+  ): Promise<EmbeddedFlowExecuteResponse> => {
+    return await signUp(
+      payload || {
+        flowType: EmbeddedFlowType.Registration,
+      },
+    );
+  };
+
+  /**
+   * Handle sign-up steps.
+   */
+  const handleOnSubmit = async (payload: EmbeddedFlowExecuteRequestPayload): Promise<EmbeddedFlowExecuteResponse> => {
+    return await signUp(payload);
+  };
+
+  /**
+   * Handle successful sign-up and redirect.
+   */
+  const handleSuccess = (response: EmbeddedFlowExecuteResponse) => {
+    // Call the provided onSuccess callback first
+    onSuccess?.(response);
+
+    // Handle redirect if afterSignUpUrl is provided
+    if (afterSignUpUrl) {
+      window.location.href = afterSignUpUrl;
+    }
+  };
+
+  return (
+    <BaseSignUp
+      afterSignUpUrl={afterSignUpUrl}
+      onInitialize={handleInitialize}
+      onSubmit={handleOnSubmit}
+      onSuccess={handleSuccess}
+      onError={onError}
+      className={className}
+      size={size}
+      variant={variant}
+    />
+  );
+};
+
+export default SignUp;
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index 73961d609..dfc1c2329 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -19,6 +19,7 @@
 import {
   AsgardeoRuntimeError,
   EmbeddedFlowExecuteRequestPayload,
+  EmbeddedFlowExecuteResponse,
   SignInOptions,
   SignOutOptions,
   User,
@@ -161,9 +162,9 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
     }
   };
 
-  const signUp = async (payload?: EmbeddedFlowExecuteRequestPayload): Promise<void> => {
+  const signUp = async (payload?: EmbeddedFlowExecuteRequestPayload): Promise<void | EmbeddedFlowExecuteResponse> => {
     try {
-      await asgardeo.signUp(payload);
+      return await asgardeo.signUp(payload);
     } catch (error) {
       throw new AsgardeoRuntimeError(
         `Error while signing up: ${error.message || error}`,
@@ -187,7 +188,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   return (
     <AsgardeoContext.Provider
       value={{
-        isLoading: false,
+        isLoading: asgardeo.isLoading(),
         isSignedIn: isSignedInSync,
         signIn,
         signOut,
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 567332f62..0c00aac73 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -100,6 +100,12 @@ export * from './components/presentation/SignIn/BaseSignIn';
 export {default as SignIn} from './components/presentation/SignIn/SignIn';
 export * from './components/presentation/SignIn/SignIn';
 
+export {default as BaseSignUp} from './components/presentation/SignUp/BaseSignUp';
+export * from './components/presentation/SignUp/BaseSignUp';
+
+export {default as SignUp} from './components/presentation/SignUp/SignUp';
+export * from './components/presentation/SignUp/SignUp';
+
 // Sign-In Options
 export {default as IdentifierFirst} from './components/presentation/SignIn/options/IdentifierFirst';
 export {default as UsernamePassword} from './components/presentation/SignIn/options/UsernamePassword';
diff --git a/samples/teamspace-react/src/App.tsx b/samples/teamspace-react/src/App.tsx
index da49113a9..4d93f67c8 100644
--- a/samples/teamspace-react/src/App.tsx
+++ b/samples/teamspace-react/src/App.tsx
@@ -11,6 +11,7 @@ import LandingPage from './pages/LandingPage';
 import LandingLayout from './layouts/LandingLayout';
 import DashboardLayout from './layouts/DashboardLayout';
 import AuthenticatedLayout from './layouts/AuthenticatedLayout';
+import SignUpPage from './pages/SignUpPage';
 
 // Types
 export interface User {
@@ -115,6 +116,14 @@ function App() {
               </AuthenticatedLayout>
             }
           />
+          <Route
+            path="/signup"
+            element={
+              <AuthenticatedLayout>
+                <SignUpPage />
+              </AuthenticatedLayout>
+            }
+          />
 
           {/* Dashboard/Protected Routes */}
           <Route
diff --git a/samples/teamspace-react/src/pages/SignUpPage.tsx b/samples/teamspace-react/src/pages/SignUpPage.tsx
new file mode 100644
index 000000000..fafdf6cb2
--- /dev/null
+++ b/samples/teamspace-react/src/pages/SignUpPage.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import {Users} from 'lucide-react';
+import {SignUp} from '@asgardeo/react';
+
+export default function SignUpPage() {
+  return (
+    <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">
+          <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>
+        </div>
+
+        <SignUp />
+
+        <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>
+  );
+}

From 53e5d76ba62403309e1750b2c715fcb44d24a555 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 18 Jun 2025 02:27:45 +0530
Subject: [PATCH 12/96] feat(react): implement SignIn component for native
 authentication flow, enhance AsgardeoProvider with sign-in logic, and update
 Dashboard to display user information

---
 .../src/components/header/UserDropdown.tsx       |  2 +-
 samples/teamspace-react/src/pages/Dashboard.tsx  | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/samples/teamspace-react/src/components/header/UserDropdown.tsx b/samples/teamspace-react/src/components/header/UserDropdown.tsx
index 2aecf33d6..50b7a314a 100644
--- a/samples/teamspace-react/src/components/header/UserDropdown.tsx
+++ b/samples/teamspace-react/src/components/header/UserDropdown.tsx
@@ -10,7 +10,7 @@ export type UserDropdownProps = {
   mode?: 'custom' | 'default';
 };
 
-export default function UserDropdown({mode = 'custom'}: UserDropdownProps) {
+export default function UserDropdown({mode = 'default'}: UserDropdownProps) {
   const [showUserDropdown, setShowUserDropdown] = useState(false);
   const [showUserProfile, setShowUserProfile] = useState(false);
   const userDropdownRef = useRef<HTMLDivElement>(null);
diff --git a/samples/teamspace-react/src/pages/Dashboard.tsx b/samples/teamspace-react/src/pages/Dashboard.tsx
index 5104232e0..91d9ad9fa 100644
--- a/samples/teamspace-react/src/pages/Dashboard.tsx
+++ b/samples/teamspace-react/src/pages/Dashboard.tsx
@@ -1,8 +1,9 @@
+import {User} from '@asgardeo/react';
 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 {currentOrg} = useApp();
 
   const stats = [
     {
@@ -94,7 +95,18 @@ export default function Dashboard() {
     <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>
+        <h1 className="text-3xl font-bold text-gray-900">
+          Welcome back{' '}
+          <User>
+            {(user) => (
+              <span>
+                {user?.name?.givenName} {user?.name?.familyName}
+              </span>
+            )}
+          </User>
+          !
+        </h1>
+
         <p className="text-gray-600 mt-2">Here's what's happening with {currentOrg?.name} today.</p>
       </div>
 

From ecdc6d68b474b30c7c56e1f140e6cc189b5dee92 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 18 Jun 2025 02:57:16 +0530
Subject: [PATCH 13/96] chore: add `afterSignOutUrl`

---
 samples/teamspace-react/src/main.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/samples/teamspace-react/src/main.tsx b/samples/teamspace-react/src/main.tsx
index c7be31c44..9e6dd5214 100644
--- a/samples/teamspace-react/src/main.tsx
+++ b/samples/teamspace-react/src/main.tsx
@@ -9,6 +9,7 @@ createRoot(document.getElementById('root')!).render(
     <AsgardeoProvider
       baseUrl={import.meta.env.VITE_ASGARDEO_BASE_URL}
       afterSignInUrl={import.meta.env.VITE_ASGARDEO_AFTER_SIGN_IN_URL}
+      afterSignOutUrl={import.meta.env.VITE_ASGARDEO_AFTER_SIGN_OUT_URL}
       clientId={import.meta.env.VITE_ASGARDEO_CLIENT_ID}
       scopes={['openid', 'address', 'email', 'profile']}
       preferences={{

From 8f4aa22e40ab1e467ebf1c2448bb36929deb827e Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 18 Jun 2025 03:00:10 +0530
Subject: [PATCH 14/96] feat(react): add afterSignOutUrl to configuration and
 update related components for sign-out handling

---
 packages/javascript/src/models/config.ts      | 36 ++++++++++++-------
 packages/react/src/AsgardeoReactClient.ts     | 21 +++++------
 .../UserDropdown/UserDropdown.tsx             | 30 ++++++++--------
 .../contexts/Asgardeo/AsgardeoProvider.tsx    | 10 ++++--
 4 files changed, 58 insertions(+), 39 deletions(-)

diff --git a/packages/javascript/src/models/config.ts b/packages/javascript/src/models/config.ts
index cbf3652da..c24106148 100644
--- a/packages/javascript/src/models/config.ts
+++ b/packages/javascript/src/models/config.ts
@@ -16,9 +16,9 @@
  * under the License.
  */
 
-import {ThemeConfig, ThemeMode} from '../theme/types';
 import {I18nBundle} from './i18n';
 import {RecursivePartial} from './utility-types';
+import {ThemeConfig, ThemeMode} from '../theme/types';
 
 export interface BaseConfig<T = unknown> extends WithPreferences {
   /**
@@ -32,6 +32,18 @@ export interface BaseConfig<T = unknown> extends WithPreferences {
    */
   afterSignInUrl?: string | undefined;
 
+  /**
+   * Optional URL where the authorization server should redirect after sign out.
+   * This must match one of the allowed post logout redirect URIs configured in your IdP
+   * and is used to redirect the user after they have signed out.
+   * If not provided, the framework layer will use the default sign out URL based on the
+   *
+   * @example
+   * For development: "http://localhost:3000/api/auth/signout"
+   * For production: "https://your-app.com/api/auth/signout"
+   */
+  afterSignOutUrl?: string | undefined;
+
   /**
    * The base URL of the Asgardeo identity server.
    * Example: "https://api.asgardeo.io/t/{org_name}"
@@ -88,30 +100,30 @@ export interface ThemePreferences {
 
 export interface I18nPreferences {
   /**
-   * The language to use for translations.
-   * Defaults to the browser's default language.
+   * Custom translations to override default ones.
    */
-  language?: string;
+  bundles?: {
+    [key: string]: I18nBundle;
+  };
   /**
    * 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.
+   * The language to use for translations.
+   * Defaults to the browser's default language.
    */
-  bundles?: {
-    [key: string]: I18nBundle;
-  };
+  language?: string;
 }
 
 export interface Preferences {
-  /**
-   * Theme preferences for the Asgardeo UI components
-   */
-  theme?: ThemePreferences;
   /**
    * Internationalization preferences for the Asgardeo UI components
    */
   i18n?: I18nPreferences;
+  /**
+   * Theme preferences for the Asgardeo UI components
+   */
+  theme?: ThemePreferences;
 }
diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index 12fc48d18..4b584dfc5 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -32,9 +32,9 @@ import {
   executeEmbeddedSignUpFlow,
 } from '@asgardeo/browser';
 import AuthAPI from './__temp__/api';
-import {AsgardeoReactConfig} from './models/config';
 import getMeProfile from './api/scim2/getMeProfile';
 import getSchemas from './api/scim2/getSchemas';
+import {AsgardeoReactConfig} from './models/config';
 
 /**
  * Client for mplementing Asgardeo in React applications.
@@ -56,10 +56,12 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
     const scopes: string[] = Array.isArray(config.scopes) ? config.scopes : config.scopes.split(' ');
 
     return this.asgardeo.init({
+      afterSignInUrl: config.afterSignInUrl,
+      afterSignOutUrl: config.afterSignOutUrl,
       baseUrl: config.baseUrl,
       clientId: config.clientId,
-      afterSignInUrl: config.afterSignInUrl,
       scopes: [...scopes, 'internal_login'],
+      ...config,
     });
   }
 
@@ -72,7 +74,7 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
   }
 
   async getUserProfile(): Promise<UserProfile> {
-    const baseUrl: string = (await this.asgardeo.getConfigData()).baseUrl;
+    const {baseUrl} = await this.asgardeo.getConfigData();
 
     const profile = await getMeProfile({url: `${baseUrl}/scim2/Me`});
     const schemas = await getSchemas({url: `${baseUrl}/scim2/Schemas`});
@@ -139,14 +141,13 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
         baseUrl,
         payload: firstArg as EmbeddedFlowExecuteRequestPayload,
       });
-    } else {
-      throw new AsgardeoRuntimeError(
-        'Not implemented',
-        'react-AsgardeoReactClient-ValidationError-002',
-        'react',
-        'The signUp method with SignUpOptions is not implemented in the React client.',
-      );
     }
+    throw new AsgardeoRuntimeError(
+      'Not implemented',
+      'react-AsgardeoReactClient-ValidationError-002',
+      'react',
+      'The signUp method with SignUpOptions is not implemented in the React client.',
+    );
   }
 }
 
diff --git a/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx b/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx
index 1fcd7da50..3f8f898d2 100644
--- a/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx
+++ b/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx
@@ -17,49 +17,49 @@
  */
 
 import {FC, ReactElement, ReactNode, useState} from 'react';
-import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
 import BaseUserDropdown, {BaseUserDropdownProps} from './BaseUserDropdown';
-import UserProfile from '../UserProfile/UserProfile';
+import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
 import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Popover';
+import UserProfile from '../UserProfile/UserProfile';
 
 /**
  * Render props data passed to the children function
  */
 export interface UserDropdownRenderProps {
-  /** The authenticated user object */
-  user: any;
+  /** Function to close the profile dialog */
+  closeProfile: () => void;
   /** Whether user data is currently loading */
   isLoading: boolean;
+  /** Whether the profile dialog is currently open */
+  isProfileOpen: boolean;
   /** Function to open the user profile dialog */
   openProfile: () => void;
   /** Function to sign out the user */
   signOut: () => void;
-  /** Whether the profile dialog is currently open */
-  isProfileOpen: boolean;
-  /** Function to close the profile dialog */
-  closeProfile: () => void;
+  /** The authenticated user object */
+  user: any;
 }
 
 /**
  * Props for the UserDropdown component.
  * Extends BaseUserDropdownProps but excludes user, onManageProfile, and onSignOut since they're handled internally
  */
-export type UserDropdownProps = Omit<BaseUserDropdownProps, 'user' | 'onManageProfile' | 'onSignOut'> & {
+export type UserDropdownProps = Omit<BaseUserDropdownProps, 'user' | 'onManageProfile'> & {
   /**
    * Render prop function that receives user state and actions.
    * When provided, this completely replaces the default dropdown rendering.
    */
   children?: (props: UserDropdownRenderProps) => ReactNode;
-  /**
-   * Custom render function for the trigger button.
-   * When provided, this replaces just the trigger button while keeping the dropdown.
-   */
-  renderTrigger?: (props: UserDropdownRenderProps) => ReactNode;
   /**
    * Custom render function for the dropdown content.
    * When provided, this replaces just the dropdown content while keeping the trigger.
    */
   renderDropdown?: (props: UserDropdownRenderProps) => ReactNode;
+  /**
+   * Custom render function for the trigger button.
+   * When provided, this replaces just the trigger button while keeping the dropdown.
+   */
+  renderTrigger?: (props: UserDropdownRenderProps) => ReactNode;
 };
 
 /**
@@ -112,6 +112,7 @@ const UserDropdown: FC<UserDropdownProps> = ({
   children,
   renderTrigger,
   renderDropdown,
+  onSignOut,
   ...rest
 }: UserDropdownProps): ReactElement => {
   const {user, isLoading, signOut} = useAsgardeo();
@@ -123,6 +124,7 @@ const UserDropdown: FC<UserDropdownProps> = ({
 
   const handleSignOut = () => {
     signOut();
+    onSignOut();
   };
 
   const closeProfile = () => {
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index dfc1c2329..c9166d817 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -26,13 +26,13 @@ import {
   UserProfile,
 } from '@asgardeo/browser';
 import {FC, RefObject, PropsWithChildren, ReactElement, useEffect, useMemo, useRef, useState, use} from 'react';
-import AsgardeoReactClient from '../../AsgardeoReactClient';
 import AsgardeoContext from './AsgardeoContext';
+import AsgardeoReactClient from '../../AsgardeoReactClient';
 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';
+import I18nProvider from '../I18n/I18nProvider';
+import ThemeProvider from '../Theme/ThemeProvider';
 import UserProvider from '../User/UserProvider';
 
 /**
@@ -42,11 +42,13 @@ export type AsgardeoProviderProps = AsgardeoReactConfig;
 
 const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   afterSignInUrl = window.location.origin,
+  afterSignOutUrl = window.location.origin,
   baseUrl,
   clientId,
   children,
   scopes,
   preferences,
+  ...rest
 }: PropsWithChildren<AsgardeoProviderProps>): ReactElement => {
   const reRenderCheckRef: RefObject<boolean> = useRef(false);
   const asgardeo: AsgardeoReactClient = useMemo(() => new AsgardeoReactClient(), []);
@@ -61,9 +63,11 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
     (async (): Promise<void> => {
       await asgardeo.initialize({
         afterSignInUrl,
+        afterSignOutUrl,
         baseUrl,
         clientId,
         scopes,
+        ...rest,
       });
     })();
   }, []);

From cf2d066cefcb2d74dedd63f65fbb8130d25c1e90 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 18 Jun 2025 03:04:45 +0530
Subject: [PATCH 15/96] feat(react): update scopes in AsgardeoProvider for
 enhanced user permissions

---
 samples/teamspace-react/src/main.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/samples/teamspace-react/src/main.tsx b/samples/teamspace-react/src/main.tsx
index 9e6dd5214..e28444a79 100644
--- a/samples/teamspace-react/src/main.tsx
+++ b/samples/teamspace-react/src/main.tsx
@@ -11,7 +11,7 @@ createRoot(document.getElementById('root')!).render(
       afterSignInUrl={import.meta.env.VITE_ASGARDEO_AFTER_SIGN_IN_URL}
       afterSignOutUrl={import.meta.env.VITE_ASGARDEO_AFTER_SIGN_OUT_URL}
       clientId={import.meta.env.VITE_ASGARDEO_CLIENT_ID}
-      scopes={['openid', 'address', 'email', 'profile']}
+      scopes={['openid', 'address', 'email', 'profile', 'user:email', 'read:user']}
       preferences={{
         theme: {
           mode: 'light',

From ed2eb72a098548a0dcbeb526b443d9d9afd384f2 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 18 Jun 2025 03:30:43 +0530
Subject: [PATCH 16/96] feat(react): enhance user profile handling and improve
 attribute mapping in BaseUserDropdown and BaseUserProfile components

---
 packages/react/src/AsgardeoReactClient.ts     |  52 +++++----
 .../UserDropdown/BaseUserDropdown.tsx         |  92 ++++++++--------
 .../UserProfile/BaseUserProfile.tsx           | 101 +++++++++---------
 .../teamspace-react/src/pages/Dashboard.tsx   |   5 +-
 4 files changed, 131 insertions(+), 119 deletions(-)

diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index 4b584dfc5..354f0688b 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -60,36 +60,44 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
       afterSignOutUrl: config.afterSignOutUrl,
       baseUrl: config.baseUrl,
       clientId: config.clientId,
-      scopes: [...scopes, 'internal_login'],
       ...config,
+      scopes: [...scopes, 'internal_login'],
     });
   }
 
   override async getUser(): Promise<User> {
-    const baseUrl = await (await this.asgardeo.getConfigData()).baseUrl;
-    const profile = await getMeProfile({url: `${baseUrl}/scim2/Me`});
-    const schemas = await getSchemas({url: `${baseUrl}/scim2/Schemas`});
-
-    return generateUserProfile(profile, flattenUserSchema(schemas));
+    try {
+      const baseUrl = await (await this.asgardeo.getConfigData()).baseUrl;
+      const profile = await getMeProfile({url: `${baseUrl}/scim2/Me`});
+      const schemas = await getSchemas({url: `${baseUrl}/scim2/Schemas`});
+
+      return generateUserProfile(profile, flattenUserSchema(schemas));
+    } catch (error) {
+      return this.asgardeo.getDecodedIdToken();
+    }
   }
 
   async getUserProfile(): Promise<UserProfile> {
-    const {baseUrl} = await this.asgardeo.getConfigData();
-
-    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 {
-      schemas: processedSchemas,
-      flattenedProfile: generateFlattenedUserProfile(profile, processedSchemas),
-      profile,
-    };
+    try {
+      const {baseUrl} = await this.asgardeo.getConfigData();
+
+      const profile = await getMeProfile({url: `${baseUrl}/scim2/Me`});
+      const schemas = await getSchemas({url: `${baseUrl}/scim2/Schemas`});
+
+      const processedSchemas = flattenUserSchema(schemas);
+
+      return {
+        schemas: processedSchemas,
+        flattenedProfile: generateFlattenedUserProfile(profile, processedSchemas),
+        profile,
+      };
+    } catch (error) {
+      return {
+        schemas: [],
+        flattenedProfile: await this.asgardeo.getDecodedIdToken(),
+        profile: await this.asgardeo.getDecodedIdToken(),
+      };
+    }
   }
 
   override isLoading(): boolean {
diff --git a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
index 024ba143a..876281e6d 100644
--- a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
+++ b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
@@ -16,9 +16,7 @@
  * under the License.
  */
 
-import {CSSProperties, FC, ReactElement, ReactNode, useMemo, useRef, useState} from 'react';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
-import clsx from 'clsx';
 import {
   useFloating,
   autoUpdate,
@@ -32,13 +30,15 @@ import {
   FloatingFocusManager,
   FloatingPortal,
 } from '@floating-ui/react';
+import clsx from 'clsx';
+import {CSSProperties, FC, ReactElement, ReactNode, useMemo, useRef, useState} from 'react';
 import useTheme from '../../../contexts/Theme/useTheme';
+import getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';
 import {Avatar} from '../../primitives/Avatar/Avatar';
 import Button from '../../primitives/Button/Button';
-import Typography from '../../primitives/Typography/Typography';
-import User from '../../primitives/Icons/User';
 import LogOut from '../../primitives/Icons/LogOut';
-import getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';
+import User from '../../primitives/Icons/User';
+import Typography from '../../primitives/Typography/Typography';
 
 const useStyles = () => {
   const {theme, colorScheme} = useTheme();
@@ -48,8 +48,8 @@ const useStyles = () => {
       trigger: {
         display: 'inline-flex',
         alignItems: 'center',
-        gap: theme.spacing.unit + 'px',
-        padding: theme.spacing.unit * 0.5 + 'px',
+        gap: `${theme.spacing.unit}px`,
+        padding: `${theme.spacing.unit * 0.5}px`,
         border: 'none',
         background: 'none',
         cursor: 'pointer',
@@ -87,7 +87,7 @@ const useStyles = () => {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'flex-start',
-        gap: theme.spacing.unit + 'px',
+        gap: `${theme.spacing.unit}px`,
         padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit * 2}px`,
         width: '100%',
         color: theme.colors.text.primary,
@@ -104,7 +104,7 @@ const useStyles = () => {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'flex-start',
-        gap: theme.spacing.unit + 'px',
+        gap: `${theme.spacing.unit}px`,
         padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit * 2}px`,
         width: '100%',
         color: theme.colors.text.primary,
@@ -124,14 +124,14 @@ const useStyles = () => {
       dropdownHeader: {
         display: 'flex',
         alignItems: 'center',
-        gap: theme.spacing.unit + 'px',
+        gap: `${theme.spacing.unit}px`,
         padding: `${theme.spacing.unit * 1.5}px`,
         borderBottom: `1px solid ${theme.colors.border}`,
       } as CSSProperties,
       headerInfo: {
         display: 'flex',
         flexDirection: 'column',
-        gap: theme.spacing.unit / 4 + 'px',
+        gap: `${theme.spacing.unit / 4}px`,
         flex: 1,
         minWidth: 0,
         overflow: 'hidden',
@@ -160,7 +160,7 @@ const useStyles = () => {
         alignItems: 'center',
         justifyContent: 'center',
         minHeight: '80px',
-        gap: theme.spacing.unit + 'px',
+        gap: `${theme.spacing.unit}px`,
       } as CSSProperties,
       loadingText: {
         color: theme.colors.text.secondary,
@@ -172,68 +172,68 @@ const useStyles = () => {
 };
 
 export interface MenuItem {
-  label: ReactNode;
+  href?: string;
   icon?: ReactNode;
+  label: ReactNode;
   onClick?: () => void;
-  href?: string;
 }
 
 export interface BaseUserDropdownProps {
   /**
-   * Optional element to render when no user is signed in.
+   * Mapping of component attribute names to identity provider field names.
+   * Allows customizing which user profile fields should be used for each attribute.
    */
-  fallback?: ReactElement;
+  attributeMapping?: {
+    [key: string]: string | string[] | undefined;
+    firstName?: string | string[];
+    lastName?: string | string[];
+    picture?: string | string[];
+    username?: string | string[];
+  };
+  /**
+   * Optional size for the avatar
+   */
+  avatarSize?: number;
   /**
    * Optional className for the dropdown container.
    */
   className?: string;
   /**
-   * The user object containing profile information
+   * Optional element to render when no user is signed in.
    */
-  user: any;
+  fallback?: ReactElement;
   /**
    * Whether the user data is currently loading
    */
   isLoading?: boolean;
-  /**
-   * The HTML element ID where the portal should be mounted
-   */
-  portalId?: string;
   /**
    * Menu items to display in the dropdown
    */
   menuItems?: MenuItem[];
   /**
-   * Show user's display name next to avatar in the trigger button
+   * Callback function for "Manage Profile" action
    */
-  showTriggerLabel?: boolean;
+  onManageProfile?: () => void;
   /**
-   * Show dropdown header with user information
+   * Callback function for "Sign Out" action
    */
-  showDropdownHeader?: boolean;
+  onSignOut?: () => void;
   /**
-   * Optional size for the avatar
+   * The HTML element ID where the portal should be mounted
    */
-  avatarSize?: number;
+  portalId?: string;
   /**
-   * Callback function for "Manage Profile" action
+   * Show dropdown header with user information
    */
-  onManageProfile?: () => void;
+  showDropdownHeader?: boolean;
   /**
-   * Callback function for "Sign Out" action
+   * Show user's display name next to avatar in the trigger button
    */
-  onSignOut?: () => void;
+  showTriggerLabel?: boolean;
   /**
-   * Mapping of component attribute names to identity provider field names.
-   * Allows customizing which user profile fields should be used for each attribute.
+   * The user object containing profile information
    */
-  attributeMapping?: {
-    picture?: string | string[];
-    firstName?: string | string[];
-    lastName?: string | string[];
-    username?: string | string[];
-    [key: string]: string | string[] | undefined;
-  };
+  user: any;
 }
 
 /**
@@ -276,11 +276,11 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
   const {getReferenceProps, getFloatingProps} = useInteractions([click, dismiss, role]);
 
   const defaultAttributeMappings = {
-    picture: ['profile', 'profileUrl'],
-    firstName: 'name.givenName',
-    lastName: 'name.familyName',
-    email: 'emails',
-    username: 'userName',
+    picture: ['profile', 'profileUrl', 'picture', 'URL'],
+    firstName: ['name.givenName', 'given_name'],
+    lastName: ['name.familyName', 'family_name'],
+    email: ['emails'],
+    username: ['userName', 'username', 'user_name'],
   };
 
   const mergedMappings = {...defaultAttributeMappings, ...attributeMapping};
diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index e31b51a8d..af8e73927 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -16,21 +16,21 @@
  * under the License.
  */
 
-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';
-import Checkbox from '../../primitives/Checkbox/Checkbox';
-import Button from '../../primitives/Button/Button';
-import useTheme from '../../../contexts/Theme/useTheme';
 import {User, withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
+import {CSSProperties, FC, ReactElement, useMemo, useState, useCallback, useRef} from 'react';
+import useTheme from '../../../contexts/Theme/useTheme';
 import getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';
+import {Avatar} from '../../primitives/Avatar/Avatar';
+import Button from '../../primitives/Button/Button';
+import Checkbox from '../../primitives/Checkbox/Checkbox';
+import DatePicker from '../../primitives/DatePicker/DatePicker';
+import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Popover';
+import TextField from '../../primitives/TextField/TextField';
 
 interface ExtendedFlatSchema {
-  schemaId?: string;
   path?: string;
+  schemaId?: string;
 }
 
 interface Schema extends ExtendedFlatSchema {
@@ -43,34 +43,34 @@ interface Schema extends ExtendedFlatSchema {
   name?: string;
   required?: boolean;
   returned?: string;
+  subAttributes?: Schema[];
   type?: string;
   uniqueness?: string;
   value?: any;
-  subAttributes?: Schema[];
 }
 
 export interface BaseUserProfileProps {
-  fallback?: ReactElement;
-  className?: string;
-  cardLayout?: boolean;
-  profile?: User;
-  flattenedProfile?: User;
-  schemas?: Schema[];
-  mode?: 'inline' | 'popup';
-  title?: string;
   attributeMapping?: {
-    picture?: string | string[];
+    [key: string]: string | string[] | undefined;
     firstName?: string | string[];
     lastName?: string | string[];
+    picture?: string | string[];
     username?: string | string[];
-    [key: string]: string | string[] | undefined;
   };
+  cancelButtonText?: string;
+  cardLayout?: boolean;
+  className?: string;
   editable?: boolean;
+  fallback?: ReactElement;
+  flattenedProfile?: User;
+  mode?: 'inline' | 'popup';
   onChange?: (field: string, value: any) => void;
   onSubmit?: (data: any) => void;
-  saveButtonText?: string;
-  cancelButtonText?: string;
   onUpdate?: (payload: any) => Promise<void>;
+  profile?: User;
+  saveButtonText?: string;
+  schemas?: Schema[];
+  title?: string;
 }
 
 const BaseUserProfile: FC<BaseUserProfileProps> = ({
@@ -142,7 +142,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
     (schema: Schema) => {
       if (!onUpdate || !schema.name) return;
 
-      let payload = {};
+      const payload = {};
       const fieldName = schema.name;
       const fieldValue =
         editedUser && fieldName && editedUser[fieldName] !== undefined
@@ -172,12 +172,14 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
     [flattenedProfile, profile, toggleFieldEdit],
   );
 
-  const formatLabel = useCallback((key: string): string => {
-    return key
-      .split(/(?=[A-Z])|_/)
-      .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-      .join(' ');
-  }, []);
+  const formatLabel = useCallback(
+    (key: string): string =>
+      key
+        .split(/(?=[A-Z])|_/)
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(' '),
+    [],
+  );
 
   const styles = useStyles();
   const buttonStyle = useMemo(
@@ -212,10 +214,11 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
   );
 
   const defaultAttributeMappings = {
-    picture: 'profileUrl',
-    firstName: 'name.givenName',
-    lastName: 'name.familyName',
-    username: 'userName',
+    picture: ['profile', 'profileUrl', 'picture', 'URL'],
+    firstName: ['name.givenName', 'given_name'],
+    lastName: ['name.familyName', 'family_name'],
+    email: ['emails'],
+    username: ['userName', 'username', 'user_name'],
   };
 
   const mergedMappings = {...defaultAttributeMappings, ...attributeMapping};
@@ -278,7 +281,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
 
       const commonProps = {
         label: undefined, // Don't show label in field, we render it outside
-        required: required,
+        required,
         value: fieldValue,
         onChange: (e: any) => onEditValue(e.target ? e.target.value : e),
         style: {
@@ -353,12 +356,12 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
       ...styles.field,
       display: 'flex',
       alignItems: 'center',
-      gap: theme.spacing.unit + 'px',
+      gap: `${theme.spacing.unit}px`,
     };
 
     return (
       <div style={fieldStyle}>
-        <div style={{flex: 1, display: 'flex', alignItems: 'center', gap: theme.spacing.unit + 'px'}}>
+        <div style={{flex: 1, display: 'flex', alignItems: 'center', gap: `${theme.spacing.unit}px`}}>
           {renderSchemaField(schema, isFieldEditing, value => {
             const tempEditedUser = {...editedUser};
             tempEditedUser[schema.name!] = value;
@@ -369,9 +372,9 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
           <div
             style={{
               display: 'flex',
-              gap: theme.spacing.unit / 2 + 'px',
+              gap: `${theme.spacing.unit / 2}px`,
               alignItems: 'center',
-              marginLeft: theme.spacing.unit + 'px',
+              marginLeft: `${theme.spacing.unit}px`,
             }}
           >
             {isFieldEditing ? (
@@ -396,7 +399,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
                 onClick={() => toggleFieldEdit(schema.name!)}
                 title="Edit"
                 style={{
-                  padding: theme.spacing.unit / 2 + 'px',
+                  padding: `${theme.spacing.unit / 2}px`,
                 }}
               >
                 <PencilIcon />
@@ -416,10 +419,10 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
         <tbody>
           {Object.entries(data).map(([key, value]) => (
             <tr key={key} style={{borderBottom: `1px solid ${theme.colors.border}`}}>
-              <td style={{padding: theme.spacing.unit + 'px', verticalAlign: 'top'}}>
+              <td style={{padding: `${theme.spacing.unit}px`, verticalAlign: 'top'}}>
                 <strong>{formatLabel(key)}:</strong>
               </td>
-              <td style={{padding: theme.spacing.unit + 'px', verticalAlign: 'top'}}>
+              <td style={{padding: `${theme.spacing.unit}px`, verticalAlign: 'top'}}>
                 {typeof value === 'object' ? <ObjectDisplay data={value} /> : String(value)}
               </td>
             </tr>
@@ -488,7 +491,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
             const value = flattenedProfile && schema.name ? flattenedProfile[schema.name] : undefined;
             const schemaWithValue = {
               ...schema,
-              value: value,
+              value,
             };
             return <div key={schema.name || index}>{renderUserInfo(schemaWithValue)}</div>;
           })}
@@ -516,7 +519,7 @@ const useStyles = () => {
   return useMemo(
     () => ({
       root: {
-        padding: theme.spacing.unit * 4 + 'px',
+        padding: `${theme.spacing.unit * 4}px`,
         minWidth: '600px',
         margin: '0 auto',
       } as CSSProperties,
@@ -527,8 +530,8 @@ const useStyles = () => {
       header: {
         display: 'flex',
         alignItems: 'center',
-        gap: theme.spacing.unit * 1.5 + 'px',
-        marginBottom: theme.spacing.unit * 1.5 + 'px',
+        gap: `${theme.spacing.unit * 1.5}px`,
+        marginBottom: `${theme.spacing.unit * 1.5}px`,
       } as CSSProperties,
       profileInfo: {
         flex: 1,
@@ -542,12 +545,12 @@ const useStyles = () => {
       infoContainer: {
         display: 'flex',
         flexDirection: 'column' as const,
-        gap: theme.spacing.unit + 'px',
+        gap: `${theme.spacing.unit}px`,
       } as CSSProperties,
       field: {
         display: 'flex',
         alignItems: 'center',
-        padding: theme.spacing.unit + 'px 0',
+        padding: `${theme.spacing.unit}px 0`,
         borderBottom: `1px solid ${theme.colors.border}`,
         minHeight: '32px',
       } as CSSProperties,
@@ -567,7 +570,7 @@ const useStyles = () => {
         flex: 1,
         display: 'flex',
         alignItems: 'center',
-        gap: theme.spacing.unit + 'px',
+        gap: `${theme.spacing.unit}px`,
         overflow: 'hidden',
         minHeight: '32px',
         '& input, & .MuiInputBase-root': {
@@ -585,7 +588,7 @@ const useStyles = () => {
         },
       } as CSSProperties,
       popup: {
-        padding: theme.spacing.unit * 2 + 'px',
+        padding: `${theme.spacing.unit * 2}px`,
       } as CSSProperties,
     }),
     [theme, colorScheme],
diff --git a/samples/teamspace-react/src/pages/Dashboard.tsx b/samples/teamspace-react/src/pages/Dashboard.tsx
index 91d9ad9fa..13ed46408 100644
--- a/samples/teamspace-react/src/pages/Dashboard.tsx
+++ b/samples/teamspace-react/src/pages/Dashboard.tsx
@@ -98,9 +98,10 @@ export default function Dashboard() {
         <h1 className="text-3xl font-bold text-gray-900">
           Welcome back{' '}
           <User>
-            {(user) => (
+            {user => (
               <span>
-                {user?.name?.givenName} {user?.name?.familyName}
+                {user?.givenName || user?.name?.givenName || user?.given_name}{' '}
+                {user?.name?.familyName || user?.familyName || user?.family_name}
               </span>
             )}
           </User>

From 48c311be49687ba3a7526a3e8c5a32979a4b6fe9 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 08:09:56 +0530
Subject: [PATCH 17/96] feat(react): implement SignIn component for native
 authentication flow and update AsgardeoProvider for sign-in handling

---
 ...itializeApplicationNativeAuthentication.ts |  42 ++---
 packages/nextjs/src/AsgardeoNextClient.ts     |  50 +++++-
 .../components/presentation/SignIn/SignIn.tsx | 144 ++++++++++++++++++
 .../contexts/Asgardeo/AsgardeoProvider.tsx    |  14 +-
 packages/nextjs/src/index.ts                  |   3 +
 packages/node/src/__legacy__/client.ts        |  14 +-
 samples/teamspace-nextjs/app/page.tsx         |   8 +-
 samples/teamspace-nextjs/app/signin/page.tsx  |   7 +
 8 files changed, 237 insertions(+), 45 deletions(-)
 create mode 100644 packages/nextjs/src/client/components/presentation/SignIn/SignIn.tsx
 create mode 100644 samples/teamspace-nextjs/app/signin/page.tsx

diff --git a/packages/javascript/src/api/initializeApplicationNativeAuthentication.ts b/packages/javascript/src/api/initializeApplicationNativeAuthentication.ts
index 6f093be0e..0e563ee4d 100644
--- a/packages/javascript/src/api/initializeApplicationNativeAuthentication.ts
+++ b/packages/javascript/src/api/initializeApplicationNativeAuthentication.ts
@@ -24,60 +24,59 @@ import {ApplicationNativeAuthenticationInitiateResponse} from '../models/applica
  */
 export interface AuthorizationRequest {
   /**
-   * The response type (e.g., 'code', 'token', 'id_token').
+   * Additional authorization parameters.
    */
-  response_type?: string;
+  [key: string]: any;
   /**
    * The client identifier.
    */
   client_id?: string;
   /**
-   * The redirection URI after authorization.
+   * PKCE code challenge.
    */
-  redirect_uri?: string;
+  code_challenge?: string;
   /**
-   * The scope of the access request.
+   * PKCE code challenge method.
    */
-  scope?: string;
+  code_challenge_method?: string;
   /**
-   * An unguessable random string to prevent CSRF attacks.
+   * The allowable elapsed time in seconds since the last time the End-User was actively authenticated.
    */
-  state?: string;
+  max_age?: number;
   /**
    * 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.
+   * The redirection URI after authorization.
    */
-  max_age?: number;
+  redirect_uri?: string;
   /**
-   * PKCE code challenge.
+   * How the authorization response should be returned.
    */
-  code_challenge?: string;
+  response_mode?: string;
   /**
-   * PKCE code challenge method.
+   * The response type (e.g., 'code', 'token', 'id_token').
    */
-  code_challenge_method?: string;
+  response_type?: string;
   /**
-   * Additional authorization parameters.
+   * The scope of the access request.
    */
-  [key: string]: any;
+  scope?: string;
+  /**
+   * An unguessable random string to prevent CSRF attacks.
+   */
+  state?: string;
 }
 
 /**
  * Request configuration for the authorize function.
  */
 export interface AuthorizeRequestConfig extends Partial<Request> {
-  url?: string;
   /**
    * The base URL of the Asgardeo server.
    */
@@ -86,6 +85,7 @@ export interface AuthorizeRequestConfig extends Partial<Request> {
    * The authorization request payload.
    */
   payload: AuthorizationRequest;
+  url?: string;
 }
 
 /**
diff --git a/packages/nextjs/src/AsgardeoNextClient.ts b/packages/nextjs/src/AsgardeoNextClient.ts
index 77479de32..68646f293 100644
--- a/packages/nextjs/src/AsgardeoNextClient.ts
+++ b/packages/nextjs/src/AsgardeoNextClient.ts
@@ -18,20 +18,25 @@
 
 import {
   AsgardeoNodeClient,
+  AsgardeoRuntimeError,
+  EmbeddedFlowExecuteRequestPayload,
+  EmbeddedFlowExecuteResponse,
   LegacyAsgardeoNodeClient,
   SignInOptions,
   SignOutOptions,
+  SignUpOptions,
   User,
   UserProfile,
+  initializeApplicationNativeAuthentication,
 } from '@asgardeo/node';
 import {NextRequest, NextResponse} from 'next/server';
+import InternalAuthAPIRoutesConfig from './configs/InternalAuthAPIRoutesConfig';
 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';
 
 const removeTrailingSlash = (path: string): string => (path.endsWith('/') ? path.slice(0, -1) : path);
 /**
@@ -54,15 +59,15 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
 
     return this.asgardeo.initialize({
       baseUrl,
-      clientId: clientId,
+      clientId,
       clientSecret,
-      afterSignInUrl: afterSignInUrl,
+      afterSignInUrl,
       ...rest,
     } as any);
   }
 
   override async getUser(userId?: string): Promise<User> {
-    let resolvedSessionId: string = userId || ((await getSessionId()) as string);
+    const resolvedSessionId: string = userId || ((await getSessionId()) as string);
 
     return this.asgardeo.getUser(resolvedSessionId);
   }
@@ -118,20 +123,49 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
     return Promise.resolve(await this.asgardeo.signOut(resolvedSessionId));
   }
 
+  override async signUp(options?: SignUpOptions): Promise<void>;
+  override async signUp(payload: EmbeddedFlowExecuteRequestPayload): Promise<EmbeddedFlowExecuteResponse>;
+  override async signUp(...args: any[]): Promise<void | EmbeddedFlowExecuteResponse> {
+    throw new AsgardeoRuntimeError(
+      'Not implemented',
+      'react-AsgardeoReactClient-ValidationError-002',
+      'react',
+      'The signUp method with SignUpOptions is not implemented in the React client.',
+    );
+  }
+
   async handler(req: NextRequest): Promise<NextResponse> {
     const {pathname, searchParams} = req.nextUrl;
     const sanitizedPathname: string = removeTrailingSlash(pathname);
     const {method} = req;
 
+    if ((method === 'POST' && sanitizedPathname === InternalAuthAPIRoutesConfig.signIn) || searchParams.get('code')) {
+      let response;
+
+      const userId: string | undefined = await getSessionId();
+
+      const signInUrl: URL = new URL(await this.asgardeo.getSignInUrl({response_mode: 'direct'}, userId));
+      const {pathname, origin, searchParams} = signInUrl;
+
+      try {
+        response = await initializeApplicationNativeAuthentication({
+          url: `${origin}${pathname}`,
+          payload: Object.fromEntries(searchParams.entries()),
+        });
+      } catch (error) {
+        throw new Error(`Failed to initialize application native authentication`);
+      }
+
+      return NextResponse.json(response);
+    }
+
     if ((method === 'GET' && sanitizedPathname === InternalAuthAPIRoutesConfig.signIn) || searchParams.get('code')) {
       let response: NextResponse | undefined;
 
       await this.signIn(
         {},
         undefined,
-        (redirectUrl: string) => {
-          return (response = NextResponse.redirect(redirectUrl, 302));
-        },
+        (redirectUrl: string) => (response = NextResponse.redirect(redirectUrl, 302)),
         searchParams.get('code') as string,
         searchParams.get('session_state') as string,
         searchParams.get('state') as string,
@@ -158,7 +192,7 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
       try {
         const isSignedIn: boolean = await getIsSignedIn();
 
-        return NextResponse.json({isSignedIn: isSignedIn});
+        return NextResponse.json({isSignedIn});
       } catch (error) {
         return NextResponse.json({error: 'Failed to check session'}, {status: 500});
       }
diff --git a/packages/nextjs/src/client/components/presentation/SignIn/SignIn.tsx b/packages/nextjs/src/client/components/presentation/SignIn/SignIn.tsx
new file mode 100644
index 000000000..9a3fa00fc
--- /dev/null
+++ b/packages/nextjs/src/client/components/presentation/SignIn/SignIn.tsx
@@ -0,0 +1,144 @@
+/**
+ * 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 {ApplicationNativeAuthenticationInitiateResponse} from '@asgardeo/node';
+import {BaseSignIn, BaseSignInProps} from '@asgardeo/react';
+import {FC} from 'react';
+import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
+
+/**
+ * Props for the SignIn component.
+ * Extends BaseSignInProps for full compatibility with the React BaseSignIn component
+ */
+export interface SignInProps extends BaseSignInProps {
+  /**
+   * URL to redirect to after successful sign-in.
+   * If not provided, will use the current window location.
+   */
+  afterSignInUrl?: string;
+
+  /**
+   * Additional CSS class names for customization.
+   */
+  className?: string;
+
+  /**
+   * Size variant for the component.
+   */
+  size?: 'small' | 'medium' | 'large';
+
+  /**
+   * Theme variant for the component.
+   */
+  variant?: 'default' | 'outlined' | 'filled';
+}
+
+/**
+ * A SignIn component for Next.js that provides native authentication flow.
+ * This component delegates to the BaseSignIn from @asgardeo/react and requires
+ * the API functions to be provided as props.
+ *
+ * @remarks This component requires the authentication API functions to be provided
+ * as props. For a complete working example, you'll need to implement the server-side
+ * authentication endpoints or use the traditional OAuth flow with SignInButton.
+ *
+ * @example
+ * ```tsx
+ * import { SignIn } from '@asgardeo/nextjs';
+ * import { handleApplicationNativeAuthentication } from '@asgardeo/browser';
+ *
+ * const LoginPage = () => {
+ *   const handleInitialize = async () => {
+ *     return await handleApplicationNativeAuthentication({
+ *       response_mode: 'direct',
+ *     });
+ *   };
+ *
+ *   const handleSubmit = async (flow) => {
+ *     return await handleApplicationNativeAuthentication({ flow });
+ *   };
+ *
+ *   return (
+ *     <SignIn
+ *       onInitialize={handleInitialize}
+ *       onSubmit={handleSubmit}
+ *       onSuccess={(authData) => {
+ *         console.log('Authentication successful:', authData);
+ *       }}
+ *       onError={(error) => {
+ *         console.error('Authentication failed:', error);
+ *       }}
+ *       size="medium"
+ *       variant="outlined"
+ *       afterSignInUrl="/dashboard"
+ *     />
+ *   );
+ * };
+ * ```
+ */
+const SignIn: FC<SignInProps> = ({
+  afterSignInUrl,
+  className,
+  onError,
+  onFlowChange,
+  onInitialize,
+  onSubmit,
+  onSuccess,
+  size = 'medium',
+  variant = 'default',
+  ...rest
+}: SignInProps) => {
+  const {signIn} = useAsgardeo();
+
+  /**
+   * Handle successful authentication and redirect with query params.
+   */
+  /**
+   * Initialize the authentication flow.
+   */
+  const handleInitialize = async (): Promise<ApplicationNativeAuthenticationInitiateResponse> =>
+    await signIn({response_mode: 'direct'});
+
+  /**
+   * Handle authentication errors
+   */
+  const handleError = (error: Error): void => {
+    onError?.(error);
+  };
+
+  return (
+    <BaseSignIn
+      afterSignInUrl={afterSignInUrl}
+      onInitialize={handleInitialize}
+      onSubmit={onSubmit}
+      onSuccess={onSuccess}
+      onError={handleError}
+      onFlowChange={onFlowChange}
+      className={className}
+      size={size}
+      variant={variant}
+      {...rest}
+    />
+  );
+};
+
+SignIn.displayName = 'SignIn';
+
+export default SignIn;
diff --git a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
index 0d4c79768..a9de91783 100644
--- a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -18,9 +18,9 @@
 
 'use client';
 
-import {FC, PropsWithChildren, useEffect, useMemo, useState} from 'react';
-import {I18nProvider, FlowProvider, UserProvider, ThemeProvider} from '@asgardeo/react';
 import {User} from '@asgardeo/node';
+import {I18nProvider, FlowProvider, UserProvider, ThemeProvider} from '@asgardeo/react';
+import {FC, PropsWithChildren, useEffect, useMemo, useState} from 'react';
 import AsgardeoContext from './AsgardeoContext';
 import InternalAuthAPIRoutesConfig from '../../../configs/InternalAuthAPIRoutesConfig';
 
@@ -81,12 +81,20 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
     fetchUserData();
   }, []);
 
+  const signIn = async () => {
+    const response = await fetch(InternalAuthAPIRoutesConfig.signIn, {
+      method: 'POST',
+    });
+
+    return response.json();
+  };
+
   const contextValue = useMemo(
     () => ({
       user,
       isSignedIn,
       isLoading,
-      signIn: () => (window.location.href = InternalAuthAPIRoutesConfig.signIn),
+      signIn,
       signOut: () => (window.location.href = InternalAuthAPIRoutesConfig.signOut),
     }),
     [user, isSignedIn, isLoading],
diff --git a/packages/nextjs/src/index.ts b/packages/nextjs/src/index.ts
index 2ba4b280f..4cbfbb733 100644
--- a/packages/nextjs/src/index.ts
+++ b/packages/nextjs/src/index.ts
@@ -30,6 +30,9 @@ 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';
 
+export {default as SignIn} from './client/components/presentation/SignIn/SignIn';
+export type {SignInProps} from './client/components/presentation/SignIn/SignIn';
+
 export {default as SignOutButton} from './client/components/actions/SignOutButton/SignOutButton';
 export type {SignOutButtonProps} from './client/components/actions/SignOutButton/SignOutButton';
 
diff --git a/packages/node/src/__legacy__/client.ts b/packages/node/src/__legacy__/client.ts
index 00406486a..eb76cf02c 100644
--- a/packages/node/src/__legacy__/client.ts
+++ b/packages/node/src/__legacy__/client.ts
@@ -1,7 +1,7 @@
 /**
- * Copyright (c) 2022, WSO2 Inc. (http://www.wso2.com) All Rights Reserved.
+ * Copyright (c) {{year}}, WSO2 LLC. (https://www.wso2.com).
  *
- * WSO2 Inc. licenses this file to you under the Apache License,
+ * 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
@@ -25,6 +25,7 @@ import {
   Storage,
   TokenResponse,
   User,
+  ExtendedAuthorizeRequestUrlParams,
 } from '@asgardeo/javascript';
 import {AsgardeoNodeCore} from './core';
 import {AuthURLCallback} from './models';
@@ -298,10 +299,7 @@ export class AsgardeoNodeClient<T> {
      * @memberof AsgardeoNodeClient
      *
      */
-  public async exchangeToken(
-    config: TokenExchangeRequestConfig,
-    userId?: string,
-  ): Promise<TokenResponse | Response> {
+  public async exchangeToken(config: TokenExchangeRequestConfig, userId?: string): Promise<TokenResponse | Response> {
     return this._authCore.exchangeToken(config, userId);
   }
 
@@ -328,6 +326,10 @@ export class AsgardeoNodeClient<T> {
     return this._authCore.reInitialize(config);
   }
 
+  public async getSignInUrl(requestConfig?: ExtendedAuthorizeRequestUrlParams, userId?: string): Promise<string> {
+    return this._authCore.getAuthURL(userId, requestConfig);
+  }
+
   /**
    * This method returns a Promise that resolves with the response returned by the server.
    * @param {string} userId - The userId of the user.
diff --git a/samples/teamspace-nextjs/app/page.tsx b/samples/teamspace-nextjs/app/page.tsx
index 5f97c435f..78ef68c25 100644
--- a/samples/teamspace-nextjs/app/page.tsx
+++ b/samples/teamspace-nextjs/app/page.tsx
@@ -10,13 +10,7 @@ export default function Home() {
       <main className={styles.main}>
         <div className={styles.ctas}>
           <SignedOut>
-            <SignInButton>
-              {({signIn, isLoading}) => (
-                <button onClick={signIn} disabled={isLoading}>
-                  {isLoading ? 'Signing in...' : 'Sign In'}
-                </button>
-              )}
-            </SignInButton>
+            <Link href="/signin" className={styles.primary} />
           </SignedOut>
           <SignedOut>
             <SignInButton className={styles.primary}>Sign In with Redirect</SignInButton>
diff --git a/samples/teamspace-nextjs/app/signin/page.tsx b/samples/teamspace-nextjs/app/signin/page.tsx
new file mode 100644
index 000000000..3fca357fd
--- /dev/null
+++ b/samples/teamspace-nextjs/app/signin/page.tsx
@@ -0,0 +1,7 @@
+'use client';
+
+import {SignIn} from '@asgardeo/nextjs';
+
+export default function SignInPage() {
+  return <SignIn />;
+}

From 925ced104f051e3cb5702be4cee83022dbb3a718 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 08:31:59 +0530
Subject: [PATCH 18/96] fix: reorder url property in
 EmbeddedSignUpFlowExecuteRequestConfig for clarity

---
 packages/javascript/src/api/executeEmbeddedSignUpFlow.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts b/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
index ced448de8..4c25a9dfc 100644
--- a/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
+++ b/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
@@ -27,7 +27,6 @@ import {
  * Request configuration for the embedded signup flow execution function.
  */
 export interface EmbeddedSignUpFlowExecuteRequestConfig extends Partial<Request> {
-  url?: string;
   /**
    * The base URL of the Asgardeo server.
    */
@@ -36,6 +35,10 @@ export interface EmbeddedSignUpFlowExecuteRequestConfig extends Partial<Request>
    * The embedded signup flow execution request payload.
    */
   payload?: EmbeddedFlowExecuteRequestPayload;
+  /**
+   *  The URL to which the request should be sent.
+   */
+  url?: string;
 }
 
 /**

From 02952d5617fc38308f0a37231f1b0853fbf325b4 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 08:32:53 +0530
Subject: [PATCH 19/96] feat(react): make onInitialize and onSubmit props
 optional in BaseSignInProps interface

---
 .../react/src/components/presentation/SignIn/BaseSignIn.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index ef6161cdb..6d24b3806 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -218,14 +218,14 @@ export interface BaseSignInProps {
    * Function to initialize authentication flow.
    * @returns Promise resolving to the initial authentication response.
    */
-  onInitialize: () => Promise<ApplicationNativeAuthenticationInitiateResponse>;
+  onInitialize?: () => Promise<ApplicationNativeAuthenticationInitiateResponse>;
 
   /**
    * Function to handle authentication steps.
    * @param payload - The authentication payload.
    * @returns Promise resolving to the authentication response.
    */
-  onSubmit: (flow: {
+  onSubmit?: (flow: {
     requestConfig?: {
       method: string;
       url: string;

From 56421256e5dd58bfc4014553e39b5561cf516d6e Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 08:59:29 +0530
Subject: [PATCH 20/96] feat(react): enhance Asgardeo context and components
 with initialization handling and improved prop management

---
 packages/react/src/AsgardeoReactClient.ts     |  14 +-
 packages/react/src/__temp__/api.ts            |  38 +++---
 .../presentation/SignUp/BaseSignUp.tsx        | 125 +++++++++---------
 .../components/presentation/SignUp/SignUp.tsx |  43 +++---
 .../src/contexts/Asgardeo/AsgardeoContext.ts  |   8 +-
 .../contexts/Asgardeo/AsgardeoProvider.tsx    |  14 +-
 6 files changed, 134 insertions(+), 108 deletions(-)

diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index 354f0688b..d67d880c2 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -67,7 +67,9 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
 
   override async getUser(): Promise<User> {
     try {
-      const baseUrl = await (await this.asgardeo.getConfigData()).baseUrl;
+      const configData = await this.asgardeo.getConfigData();
+      const baseUrl = configData?.baseUrl;
+
       const profile = await getMeProfile({url: `${baseUrl}/scim2/Me`});
       const schemas = await getSchemas({url: `${baseUrl}/scim2/Schemas`});
 
@@ -79,7 +81,8 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
 
   async getUserProfile(): Promise<UserProfile> {
     try {
-      const {baseUrl} = await this.asgardeo.getConfigData();
+      const configData = await this.asgardeo.getConfigData();
+      const baseUrl = configData?.baseUrl;
 
       const profile = await getMeProfile({url: `${baseUrl}/scim2/Me`});
       const schemas = await getSchemas({url: `${baseUrl}/scim2/Schemas`});
@@ -104,6 +107,10 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
     return this.asgardeo.isLoading();
   }
 
+  async isInitialized(): Promise<boolean> {
+    return this.asgardeo.isInitialized();
+  }
+
   override isSignedIn(): Promise<boolean> {
     return this.asgardeo.isSignedIn();
   }
@@ -143,7 +150,8 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
     const firstArg = args[0];
 
     if (typeof firstArg === 'object' && 'flowType' in firstArg) {
-      const baseUrl: string = (await this.asgardeo.getConfigData())?.baseUrl;
+      const configData = await this.asgardeo.getConfigData();
+      const baseUrl: string = configData?.baseUrl;
 
       return executeEmbeddedSignUpFlow({
         baseUrl,
diff --git a/packages/react/src/__temp__/api.ts b/packages/react/src/__temp__/api.ts
index 279ebcb81..5e972d35b 100644
--- a/packages/react/src/__temp__/api.ts
+++ b/packages/react/src/__temp__/api.ts
@@ -1,7 +1,7 @@
 /**
- * Copyright (c) 2025, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
  *
- * WSO2 Inc. licenses this file to you under the Apache License,
+ * 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
@@ -79,7 +79,7 @@ class AuthAPI {
    * @param {Config} config - `dispatch` function from React Auth Context.
    */
   public async init(config: AuthClientConfig<Config>): Promise<boolean> {
-    return await this._client.initialize(config);
+    return this._client.initialize(config);
   }
 
   /**
@@ -88,7 +88,17 @@ class AuthAPI {
    * @returns {Promise<AuthClientConfig<Config>>} - A promise that resolves with the configuration data.
    */
   public async getConfigData(): Promise<AuthClientConfig<Config>> {
-    return await this._client.getConfigData();
+    return this._client.getConfigData();
+  }
+
+  /**
+   * Method to get the configuration data.
+   *
+   * @returns {Promise<AuthClientConfig<Config>>} - A promise that resolves with the configuration data.
+   */
+  public async isInitialized(): Promise<boolean> {
+    // Wait for initialization to complete
+    return this._client.isInitialized();
   }
 
   /**
@@ -139,9 +149,7 @@ class AuthAPI {
 
         return response;
       })
-      .catch(error => {
-        return Promise.reject(error);
-      });
+      .catch(error => Promise.reject(error));
   }
 
   /**
@@ -161,9 +169,7 @@ class AuthAPI {
 
         return response;
       })
-      .catch(error => {
-        return Promise.reject(error);
-      });
+      .catch(error => Promise.reject(error));
   }
 
   /**
@@ -247,9 +253,7 @@ class AuthAPI {
 
         return response;
       })
-      .catch(error => {
-        return Promise.reject(error);
-      });
+      .catch(error => Promise.reject(error));
   }
 
   /**
@@ -265,9 +269,7 @@ class AuthAPI {
         dispatch(AuthAPI.DEFAULT_STATE);
         return true;
       })
-      .catch(error => {
-        return Promise.reject(error);
-      });
+      .catch(error => Promise.reject(error));
   }
 
   /**
@@ -461,9 +463,7 @@ class AuthAPI {
 
         return response;
       })
-      .catch(error => {
-        return Promise.reject(error);
-      });
+      .catch(error => Promise.reject(error));
   }
 }
 
diff --git a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
index 0c7f7b6ad..80fb4bc70 100644
--- a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
+++ b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
@@ -24,94 +24,95 @@ import {
   withVendorCSSClassPrefix,
   AsgardeoAPIError,
 } from '@asgardeo/browser';
-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';
-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 {FC, ReactElement, FormEvent, useEffect, useState, useCallback, useRef} from 'react';
 import FlowProvider from '../../../contexts/Flow/FlowProvider';
 import useFlow from '../../../contexts/Flow/useFlow';
+import {useForm, FormField} from '../../../hooks/useForm';
+import useTranslation from '../../../hooks/useTranslation';
 import {createField} from '../../factories/FieldFactory';
+import Alert from '../../primitives/Alert/Alert';
 import Button from '../../primitives/Button/Button';
+import Card from '../../primitives/Card/Card';
+import Divider from '../../primitives/Divider/Divider';
+import Spinner from '../../primitives/Spinner/Spinner';
+import Typography from '../../primitives/Typography/Typography';
 
 /**
  * Props for the BaseSignUp component.
  */
 export interface BaseSignUpProps {
   /**
-   * Function to initialize sign-up flow.
-   * @returns Promise resolving to the initial sign-up response.
+   * URL to redirect after successful sign-up.
    */
-  onInitialize: (payload?: EmbeddedFlowExecuteRequestPayload) => Promise<EmbeddedFlowExecuteResponse>;
+  afterSignUpUrl?: string;
 
   /**
-   * Function to handle sign-up steps.
-   * @param payload - The sign-up payload.
-   * @returns Promise resolving to the sign-up response.
+   * Custom CSS class name for the submit button.
    */
-  onSubmit: (payload: EmbeddedFlowExecuteRequestPayload) => Promise<EmbeddedFlowExecuteResponse>;
+  buttonClassName?: string;
 
   /**
-   * Callback function called when sign-up is successful.
-   * @param response - The sign-up response data returned upon successful completion.
+   * Custom CSS class name for the form container.
    */
-  onSuccess?: (response: EmbeddedFlowExecuteResponse) => void;
+  className?: string;
 
   /**
-   * Callback function called when sign-up fails.
-   * @param error - The error that occurred during sign-up.
+   * Custom CSS class name for error messages.
    */
-  onError?: (error: Error) => void;
+  errorClassName?: string;
 
   /**
-   * Callback function called when sign-up flow status changes.
-   * @param response - The current sign-up response.
+   * Custom CSS class name for form inputs.
    */
-  onFlowChange?: (response: EmbeddedFlowExecuteResponse) => void;
+  inputClassName?: string;
+
+  isInitialized?: boolean;
 
   /**
-   * Custom CSS class name for the form container.
+   * Custom CSS class name for info messages.
    */
-  className?: string;
+  messageClassName?: string;
 
   /**
-   * Custom CSS class name for form inputs.
+   * Callback function called when sign-up fails.
+   * @param error - The error that occurred during sign-up.
    */
-  inputClassName?: string;
+  onError?: (error: Error) => void;
 
   /**
-   * Custom CSS class name for the submit button.
+   * Callback function called when sign-up flow status changes.
+   * @param response - The current sign-up response.
    */
-  buttonClassName?: string;
+  onFlowChange?: (response: EmbeddedFlowExecuteResponse) => void;
 
   /**
-   * Custom CSS class name for error messages.
+   * Function to initialize sign-up flow.
+   * @returns Promise resolving to the initial sign-up response.
    */
-  errorClassName?: string;
+  onInitialize: (payload?: EmbeddedFlowExecuteRequestPayload) => Promise<EmbeddedFlowExecuteResponse>;
 
   /**
-   * Custom CSS class name for info messages.
+   * Function to handle sign-up steps.
+   * @param payload - The sign-up payload.
+   * @returns Promise resolving to the sign-up response.
    */
-  messageClassName?: string;
+  onSubmit: (payload: EmbeddedFlowExecuteRequestPayload) => Promise<EmbeddedFlowExecuteResponse>;
+
+  /**
+   * Callback function called when sign-up is successful.
+   * @param response - The sign-up response data returned upon successful completion.
+   */
+  onSuccess?: (response: EmbeddedFlowExecuteResponse) => void;
 
   /**
    * Size variant for the component.
    */
   size?: 'small' | 'medium' | 'large';
-
   /**
    * Theme variant for the component.
    */
   variant?: 'default' | 'outlined' | 'filled';
-
-  /**
-   * URL to redirect after successful sign-up.
-   */
-  afterSignUpUrl?: string;
 }
 
 /**
@@ -146,13 +147,11 @@ export interface BaseSignUpProps {
  * };
  * ```
  */
-const BaseSignUp: FC<BaseSignUpProps> = props => {
-  return (
-    <FlowProvider>
-      <BaseSignUpContent {...props} />
-    </FlowProvider>
-  );
-};
+const BaseSignUp: FC<BaseSignUpProps> = props => (
+  <FlowProvider>
+    <BaseSignUpContent {...props} />
+  </FlowProvider>
+);
 
 /**
  * Internal component that consumes FlowContext and renders the sign-up UI.
@@ -171,12 +170,13 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
   messageClassName = '',
   size = 'medium',
   variant = 'default',
+  isInitialized,
 }) => {
   const {t} = useTranslation();
   const {subtitle: flowSubtitle, title: flowTitle, messages: flowMessages} = useFlow();
 
   const [isLoading, setIsLoading] = useState(false);
-  const [isInitialized, setIsInitialized] = useState(false);
+  const [isFlowInitialized, setIsFlowInitialized] = useState(false);
   const [currentFlow, setCurrentFlow] = useState<EmbeddedFlowExecuteResponse | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [formData, setFormData] = useState<Record<string, any>>({});
@@ -342,8 +342,8 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
    * Render form components based on flow data
    */
   const renderComponents = useCallback(
-    (components: any[]): ReactElement[] => {
-      return components
+    (components: any[]): ReactElement[] =>
+      components
         .map((component, index) => {
           const config = component.config || {};
 
@@ -395,8 +395,7 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
               return null;
           }
         })
-        .filter(Boolean) as ReactElement[];
-    },
+        .filter(Boolean) as ReactElement[],
     [formValues, touchedFields, formErrors, isFormValid, isLoading, size],
   );
 
@@ -436,7 +435,7 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
 
   // Initialize the flow on component mount
   useEffect(() => {
-    if (!isInitialized && !initializationAttemptedRef.current) {
+    if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {
       initializationAttemptedRef.current = true;
 
       // Inline initialization to avoid dependency issues
@@ -448,11 +447,9 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
           const response = await onInitialize();
 
           setCurrentFlow(response);
-          setIsInitialized(true);
+          setIsFlowInitialized(true);
           onFlowChange?.(response);
 
-          debugger;
-
           if (response.flowStatus === EmbeddedFlowStatus.Complete) {
             onSuccess?.(response);
 
@@ -476,9 +473,19 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
 
       performInitialization();
     }
-  }, [isInitialized, onInitialize, onSuccess, onError, onFlowChange, setupFormFields, afterSignUpUrl, t]);
-
-  if (!isInitialized && isLoading) {
+  }, [
+    isInitialized,
+    isFlowInitialized,
+    onInitialize,
+    onSuccess,
+    onError,
+    onFlowChange,
+    setupFormFields,
+    afterSignUpUrl,
+    t,
+  ]);
+
+  if (!isFlowInitialized && isLoading) {
     return (
       <Card className={containerClasses}>
         <div style={{display: 'flex', justifyContent: 'center', padding: '2rem'}}>
diff --git a/packages/react/src/components/presentation/SignUp/SignUp.tsx b/packages/react/src/components/presentation/SignUp/SignUp.tsx
index b23067629..26c025d2a 100644
--- a/packages/react/src/components/presentation/SignUp/SignUp.tsx
+++ b/packages/react/src/components/presentation/SignUp/SignUp.tsx
@@ -26,24 +26,20 @@ import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
  */
 export interface SignUpProps {
   /**
-   * Additional CSS class names for customization.
-   */
-  className?: string;
-
-  /**
-   * Size variant for the component.
+   * URL to redirect after successful sign-up.
    */
-  size?: 'small' | 'medium' | 'large';
+  afterSignUpUrl?: string;
 
   /**
-   * Theme variant for the component.
+   * Additional CSS class names for customization.
    */
-  variant?: 'default' | 'outlined' | 'filled';
+  className?: string;
 
   /**
-   * URL to redirect after successful sign-up.
+   * Callback function called when sign-up fails.
+   * @param error - The error that occurred during sign-up.
    */
-  afterSignUpUrl?: string;
+  onError?: (error: Error) => void;
 
   /**
    * Callback function called when sign-up is successful.
@@ -52,10 +48,14 @@ export interface SignUpProps {
   onSuccess?: (response: EmbeddedFlowExecuteResponse) => void;
 
   /**
-   * Callback function called when sign-up fails.
-   * @param error - The error that occurred during sign-up.
+   * Size variant for the component.
    */
-  onError?: (error: Error) => void;
+  size?: 'small' | 'medium' | 'large';
+
+  /**
+   * Theme variant for the component.
+   */
+  variant?: 'default' | 'outlined' | 'filled';
 }
 
 /**
@@ -92,27 +92,23 @@ const SignUp: FC<SignUpProps> = ({
   onSuccess,
   onError,
 }) => {
-  const {signUp} = useAsgardeo();
+  const {signUp, isInitialized} = useAsgardeo();
 
   /**
    * Initialize the sign-up flow.
    */
-  const handleInitialize = async (
-    payload?: EmbeddedFlowExecuteRequestPayload,
-  ): Promise<EmbeddedFlowExecuteResponse> => {
-    return await signUp(
+  const handleInitialize = async (payload?: EmbeddedFlowExecuteRequestPayload): Promise<EmbeddedFlowExecuteResponse> =>
+    await signUp(
       payload || {
         flowType: EmbeddedFlowType.Registration,
       },
     );
-  };
 
   /**
    * Handle sign-up steps.
    */
-  const handleOnSubmit = async (payload: EmbeddedFlowExecuteRequestPayload): Promise<EmbeddedFlowExecuteResponse> => {
-    return await signUp(payload);
-  };
+  const handleOnSubmit = async (payload: EmbeddedFlowExecuteRequestPayload): Promise<EmbeddedFlowExecuteResponse> =>
+    await signUp(payload);
 
   /**
    * Handle successful sign-up and redirect.
@@ -137,6 +133,7 @@ const SignUp: FC<SignUpProps> = ({
       className={className}
       size={size}
       variant={variant}
+      isInitialized={isInitialized}
     />
   );
 };
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoContext.ts b/packages/react/src/contexts/Asgardeo/AsgardeoContext.ts
index 0d2f0e418..c70a8c66b 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoContext.ts
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoContext.ts
@@ -16,13 +16,16 @@
  * under the License.
  */
 
-import {Context, createContext} from 'react';
 import {User} from '@asgardeo/browser';
+import {Context, createContext} from 'react';
 
 /**
  * Props interface of {@link AsgardeoContext}
  */
 export type AsgardeoContextProps = {
+  afterSignInUrl: string;
+  baseUrl: string;
+  isInitialized: boolean;
   /**
    * Flag indicating whether the SDK is working in the background.
    */
@@ -50,8 +53,6 @@ export type AsgardeoContextProps = {
    */
   signUp: any;
   user: any;
-  baseUrl: string;
-  afterSignInUrl: string;
 };
 
 /**
@@ -66,6 +67,7 @@ const AsgardeoContext: Context<AsgardeoContextProps | null> = createContext<null
   user: null,
   baseUrl: '',
   afterSignInUrl: '',
+  isInitialized: false,
 });
 
 AsgardeoContext.displayName = 'AsgardeoContext';
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index c9166d817..5fe9afa07 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -56,6 +56,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   const [user, setUser] = useState<any | null>(null);
 
   const [isSignedInSync, setIsSignedInSync] = useState<boolean>(false);
+  const [isInitializedSync, setIsInitializedSync] = useState<boolean>(false);
 
   const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
 
@@ -108,7 +109,6 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
 
           // setError(null);
         } catch (error) {
-          debugger;
           if (error && Object.prototype.hasOwnProperty.call(error, 'code')) {
             // setError(error);
           }
@@ -151,6 +151,17 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
     };
   }, [asgardeo]);
 
+  useEffect(() => {
+    (async () => {
+      try {
+        const status = await asgardeo.isInitialized();
+        setIsInitializedSync(status);
+      } catch (error) {
+        setIsInitializedSync(false);
+      }
+    })();
+  }, [asgardeo]);
+
   const signIn = async (options?: SignInOptions): Promise<User> => {
     try {
       const response = await asgardeo.signIn(options);
@@ -200,6 +211,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
         user,
         baseUrl,
         afterSignInUrl,
+        isInitialized: isInitializedSync,
       }}
     >
       <I18nProvider preferences={preferences?.i18n}>

From 3d91761f4058b4dd817aff52850c2c1f2940fd12 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 09:26:22 +0530
Subject: [PATCH 21/96] feat(react): implement sign-up flow components
 including EmailInput, PasswordInput, and FormContainer; enhance translations
 and add new UI elements

---
 packages/javascript/src/i18n/en-US.ts         |  11 +-
 packages/javascript/src/models/i18n.ts        |   7 +
 .../presentation/SignUp/BaseSignUp.tsx        | 179 +++++++---------
 .../SignUp/options/EmailInput.tsx             |  53 +++++
 .../SignUp/options/FormContainer.tsx          |  46 +++++
 .../SignUp/options/PasswordInput.tsx          |  89 ++++++++
 .../SignUp/options/SignUpOptionFactory.tsx    | 194 ++++++++++++++++++
 .../SignUp/options/SubmitButton.tsx           |  55 +++++
 .../presentation/SignUp/options/TextInput.tsx |  53 +++++
 .../SignUp/options/Typography.tsx             |  76 +++++++
 .../presentation/SignUp/options/index.ts      |  31 +++
 11 files changed, 684 insertions(+), 110 deletions(-)
 create mode 100644 packages/react/src/components/presentation/SignUp/options/EmailInput.tsx
 create mode 100644 packages/react/src/components/presentation/SignUp/options/FormContainer.tsx
 create mode 100644 packages/react/src/components/presentation/SignUp/options/PasswordInput.tsx
 create mode 100644 packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
 create mode 100644 packages/react/src/components/presentation/SignUp/options/SubmitButton.tsx
 create mode 100644 packages/react/src/components/presentation/SignUp/options/TextInput.tsx
 create mode 100644 packages/react/src/components/presentation/SignUp/options/Typography.tsx
 create mode 100644 packages/react/src/components/presentation/SignUp/options/index.ts

diff --git a/packages/javascript/src/i18n/en-US.ts b/packages/javascript/src/i18n/en-US.ts
index 163f5f405..666826064 100644
--- a/packages/javascript/src/i18n/en-US.ts
+++ b/packages/javascript/src/i18n/en-US.ts
@@ -45,6 +45,11 @@ const translations: I18nTranslations = {
 
   /* Base Sign In */
   'signin.title': 'Sign In',
+  'signin.subtitle': 'Enter your credentials to continue.',
+
+  /* Base Sign Up */
+  'signup.title': 'Sign Up',
+  'signup.subtitle': 'Create a new account to get started.',
 
   /* Email OTP */
   'email.otp.title': 'OTP Verification',
@@ -84,9 +89,11 @@ const translations: I18nTranslations = {
   '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.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.',
+  '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 321f0767e..9fc22a833 100644
--- a/packages/javascript/src/models/i18n.ts
+++ b/packages/javascript/src/models/i18n.ts
@@ -16,6 +16,8 @@
  * under the License.
  */
 
+/* eslint-disable typescript-sort-keys/interface */
+
 export interface I18nTranslations {
   /* |---------------------------------------------------------------| */
   /* |                        Elements                               | */
@@ -43,6 +45,11 @@ export interface I18nTranslations {
 
   /* Base Sign In */
   'signin.title': string;
+  'signin.subtitle': string;
+
+  /* Base Sign Up */
+  'signup.title': string;
+  'signup.subtitle': string;
 
   /* Email OTP */
   'email.otp.title': string;
diff --git a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
index 80fb4bc70..5ea1aa4f4 100644
--- a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
+++ b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
@@ -26,15 +26,13 @@ import {
 } from '@asgardeo/browser';
 import {clsx} from 'clsx';
 import {FC, ReactElement, FormEvent, useEffect, useState, useCallback, useRef} from 'react';
+import {renderSignUpComponents} from './options/SignUpOptionFactory';
 import FlowProvider from '../../../contexts/Flow/FlowProvider';
 import useFlow from '../../../contexts/Flow/useFlow';
 import {useForm, FormField} from '../../../hooks/useForm';
 import useTranslation from '../../../hooks/useTranslation';
-import {createField} from '../../factories/FieldFactory';
 import Alert from '../../primitives/Alert/Alert';
-import Button from '../../primitives/Button/Button';
 import Card from '../../primitives/Card/Card';
-import Divider from '../../primitives/Divider/Divider';
 import Spinner from '../../primitives/Spinner/Spinner';
 import Typography from '../../primitives/Typography/Typography';
 
@@ -338,67 +336,6 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
     setFormTouched(name, true);
   };
 
-  /**
-   * Render form components based on flow data
-   */
-  const renderComponents = useCallback(
-    (components: any[]): ReactElement[] =>
-      components
-        .map((component, index) => {
-          const config = component.config || {};
-
-          switch (component.type) {
-            case EmbeddedFlowComponentType.Typography:
-              return (
-                <Typography key={component.id || index} variant={config.variant || 'body1'} className={messageClasses}>
-                  {config.text || config.content}
-                </Typography>
-              );
-
-            case EmbeddedFlowComponentType.Input:
-              const fieldName = config.name || component.id;
-              return createField({
-                type: config.type || 'text',
-                name: fieldName,
-                label: config.label || fieldName,
-                placeholder: config.placeholder,
-                required: config.required || false,
-                value: formValues[fieldName] || '',
-                error: touchedFields[fieldName] ? formErrors[fieldName] : undefined,
-                onChange: (value: string) => handleInputChange(fieldName, value),
-                className: inputClasses,
-              });
-
-            case EmbeddedFlowComponentType.Button:
-              return (
-                <Button
-                  key={component.id || index}
-                  type={config.type === 'submit' ? 'submit' : 'button'}
-                  variant={config.variant || 'contained'}
-                  size={size}
-                  disabled={isLoading || !isFormValid}
-                  className={buttonClasses}
-                >
-                  {isLoading ? <Spinner size="small" /> : config.text || config.label || 'Submit'}
-                </Button>
-              );
-
-            case EmbeddedFlowComponentType.Form:
-              return (
-                <div key={component.id || index}>{component.components && renderComponents(component.components)}</div>
-              );
-
-            default:
-              if (component.components && Array.isArray(component.components)) {
-                return <div key={component.id || index}>{renderComponents(component.components)}</div>;
-              }
-              return null;
-          }
-        })
-        .filter(Boolean) as ReactElement[],
-    [formValues, touchedFields, formErrors, isFormValid, isLoading, size],
-  );
-
   // Generate CSS classes
   const containerClasses = clsx(
     [
@@ -433,6 +370,30 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
 
   const messageClasses = clsx([withVendorCSSClassPrefix('signup__messages')], messageClassName);
 
+  /**
+   * Render form components based on flow data using the factory
+   */
+  const renderComponents = useCallback(
+    (components: any[]): ReactElement[] =>
+      renderSignUpComponents(
+        components,
+        formValues,
+        touchedFields,
+        formErrors,
+        isLoading,
+        isFormValid,
+        handleInputChange,
+        {
+          buttonClassName: buttonClasses,
+          error,
+          inputClassName: inputClasses,
+          size,
+          variant,
+        },
+      ),
+    [formValues, touchedFields, formErrors, isFormValid, isLoading, size, variant, error, inputClasses, buttonClasses],
+  );
+
   // Initialize the flow on component mount
   useEffect(() => {
     if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {
@@ -488,9 +449,11 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
   if (!isFlowInitialized && isLoading) {
     return (
       <Card className={containerClasses}>
-        <div style={{display: 'flex', justifyContent: 'center', padding: '2rem'}}>
-          <Spinner size="medium" />
-        </div>
+        <Card.Content>
+          <div style={{display: 'flex', justifyContent: 'center', padding: '2rem'}}>
+            <Spinner size="medium" />
+          </div>
+        </Card.Content>
       </Card>
     );
   }
@@ -498,53 +461,53 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
   if (!currentFlow) {
     return (
       <Card className={containerClasses}>
-        <Alert variant="error" className={errorClasses}>
-          <Alert.Description>{error || t('errors.sign.up.flow.initialization.failure')}</Alert.Description>
-        </Alert>
+        <Card.Content>
+          <Alert variant="error" className={errorClasses}>
+            <Alert.Title>{t('errors.title') || 'Error'}</Alert.Title>
+            <Alert.Description>{error || t('errors.sign.up.flow.initialization.failure')}</Alert.Description>
+          </Alert>
+        </Card.Content>
       </Card>
     );
   }
 
   return (
     <Card className={containerClasses}>
-      {(flowTitle || flowSubtitle) && (
-        <div style={{marginBottom: '1.5rem', textAlign: 'center'}}>
-          {flowTitle && (
-            <Typography variant="h4" component="h1" style={{marginBottom: '0.5rem'}}>
-              {flowTitle}
-            </Typography>
-          )}
-          {flowSubtitle && (
-            <Typography variant="body2" color="textSecondary">
-              {flowSubtitle}
-            </Typography>
-          )}
-        </div>
-      )}
-
-      {error && (
-        <Alert variant="error" className={errorClasses} style={{marginBottom: '1rem'}}>
-          <Alert.Description>{error}</Alert.Description>
-        </Alert>
-      )}
-
-      {flowMessages && flowMessages.length > 0 && (
-        <div className={messageClasses} style={{marginBottom: '1rem'}}>
-          {flowMessages.map((message, index) => (
-            <Alert
-              key={index}
-              variant={message.type?.toLowerCase() === 'error' ? 'error' : 'info'}
-              style={{marginBottom: '0.5rem'}}
-            >
-              <Alert.Description>{message.message}</Alert.Description>
-            </Alert>
-          ))}
-        </div>
-      )}
-
-      <form onSubmit={handleSubmit}>
-        {currentFlow.data?.components && renderComponents(currentFlow.data.components)}
-      </form>
+      <Card.Header>
+        <Card.Title level={2}>{flowTitle || t('signup.title')}</Card.Title>
+        {flowSubtitle && (
+          <Typography variant="body1" style={{marginTop: '0.5rem'}}>
+            {flowSubtitle || t('signup.subtitle')}
+          </Typography>
+        )}
+        {flowMessages && flowMessages.length > 0 && (
+          <div style={{marginTop: '1rem'}}>
+            {flowMessages.map((message: any, index: number) => (
+              <Alert
+                key={message.id || index}
+                variant={message.type?.toLowerCase() === 'error' ? 'error' : 'info'}
+                style={{marginBottom: '0.5rem'}}
+                className={messageClasses}
+              >
+                <Alert.Description>{message.message}</Alert.Description>
+              </Alert>
+            ))}
+          </div>
+        )}
+      </Card.Header>
+
+      <Card.Content>
+        {error && (
+          <Alert variant="error" className={errorClasses} style={{marginBottom: '1rem'}}>
+            <Alert.Title>{t('errors.title') || 'Error'}</Alert.Title>
+            <Alert.Description>{error}</Alert.Description>
+          </Alert>
+        )}
+
+        <form onSubmit={handleSubmit}>
+          {currentFlow.data?.components && renderComponents(currentFlow.data.components)}
+        </form>
+      </Card.Content>
     </Card>
   );
 };
diff --git a/packages/react/src/components/presentation/SignUp/options/EmailInput.tsx b/packages/react/src/components/presentation/SignUp/options/EmailInput.tsx
new file mode 100644
index 000000000..1fe24075b
--- /dev/null
+++ b/packages/react/src/components/presentation/SignUp/options/EmailInput.tsx
@@ -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 {FC} from 'react';
+import {FieldType} from '@asgardeo/browser';
+import {createField} from '../../../factories/FieldFactory';
+import {BaseSignUpOptionProps} from './SignUpOptionFactory';
+
+/**
+ * Email input component for sign-up forms.
+ */
+const EmailInput: FC<BaseSignUpOptionProps> = ({
+  component,
+  formValues,
+  touchedFields,
+  formErrors,
+  onInputChange,
+  inputClassName,
+}) => {
+  const config = component.config || {};
+  const fieldName = config['identifier'] || config['name'] || component.id;
+  const value = formValues[fieldName] || '';
+  const error = touchedFields[fieldName] ? formErrors[fieldName] : undefined;
+
+  return createField({
+    type: FieldType.Email,
+    name: fieldName,
+    label: config['label'] || 'Email',
+    placeholder: config['placeholder'] || 'Enter your email',
+    required: config['required'] || false,
+    value,
+    error,
+    onChange: (newValue: string) => onInputChange(fieldName, newValue),
+    className: inputClassName,
+  });
+};
+
+export default EmailInput;
diff --git a/packages/react/src/components/presentation/SignUp/options/FormContainer.tsx b/packages/react/src/components/presentation/SignUp/options/FormContainer.tsx
new file mode 100644
index 000000000..066a376cc
--- /dev/null
+++ b/packages/react/src/components/presentation/SignUp/options/FormContainer.tsx
@@ -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 {FC} from 'react';
+import {createSignUpComponent, BaseSignUpOptionProps} from './SignUpOptionFactory';
+
+/**
+ * Form container component that renders child components.
+ */
+const FormContainer: FC<BaseSignUpOptionProps> = props => {
+  const {component} = props;
+
+  // If the form has child components, render them
+  if (component.components && component.components.length > 0) {
+    return (
+      <div key={component.id} style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
+        {component.components.map((childComponent, index) =>
+          createSignUpComponent({
+            ...props,
+            component: childComponent,
+          }),
+        )}
+      </div>
+    );
+  }
+
+  // Empty form container
+  return <div key={component.id} />;
+};
+
+export default FormContainer;
diff --git a/packages/react/src/components/presentation/SignUp/options/PasswordInput.tsx b/packages/react/src/components/presentation/SignUp/options/PasswordInput.tsx
new file mode 100644
index 000000000..725152252
--- /dev/null
+++ b/packages/react/src/components/presentation/SignUp/options/PasswordInput.tsx
@@ -0,0 +1,89 @@
+/**
+ * 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} from 'react';
+import {FieldType} from '@asgardeo/browser';
+import {BaseSignUpOptionProps} from './SignUpOptionFactory';
+import {createField} from '../../../factories/FieldFactory';
+
+/**
+ * Password input component for sign-up forms.
+ */
+const PasswordInput: FC<BaseSignUpOptionProps> = ({
+  component,
+  formValues,
+  touchedFields,
+  formErrors,
+  onInputChange,
+  inputClassName,
+}) => {
+  const config = component.config || {};
+  const fieldName = config['identifier'] || config['name'] || component.id;
+  const value = formValues[fieldName] || '';
+  const error = touchedFields[fieldName] ? formErrors[fieldName] : undefined;
+
+  // Extract validation rules from the component config if available
+  const validations = config['validations'] || [];
+  const validationHints: string[] = [];
+
+  validations.forEach((validation: any) => {
+    if (validation.name === 'LengthValidator') {
+      const minLength = validation.conditions?.find((c: any) => c.key === 'min.length')?.value;
+      const maxLength = validation.conditions?.find((c: any) => c.key === 'max.length')?.value;
+      if (minLength || maxLength) {
+        validationHints.push(`Length: ${minLength || '0'}-${maxLength || '∞'} characters`);
+      }
+    } else if (validation.name === 'UpperCaseValidator') {
+      const minLength = validation.conditions?.find((c: any) => c.key === 'min.length')?.value;
+      if (minLength && parseInt(minLength, 10) > 0) {
+        validationHints.push('Must contain uppercase letter(s)');
+      }
+    } else if (validation.name === 'LowerCaseValidator') {
+      const minLength = validation.conditions?.find((c: any) => c.key === 'min.length')?.value;
+      if (minLength && parseInt(minLength, 10) > 0) {
+        validationHints.push('Must contain lowercase letter(s)');
+      }
+    } else if (validation.name === 'NumeralValidator') {
+      const minLength = validation.conditions?.find((c: any) => c.key === 'min.length')?.value;
+      if (minLength && parseInt(minLength, 10) > 0) {
+        validationHints.push('Must contain number(s)');
+      }
+    } else if (validation.name === 'SpecialCharacterValidator') {
+      const minLength = validation.conditions?.find((c: any) => c.key === 'min.length')?.value;
+      if (minLength && parseInt(minLength, 10) > 0) {
+        validationHints.push('Must contain special character(s)');
+      }
+    }
+  });
+
+  const hint = validationHints.length > 0 ? validationHints.join(', ') : config['hint'] || '';
+
+  return createField({
+    type: FieldType.Password,
+    name: fieldName,
+    label: config['label'] || 'Password',
+    placeholder: config['placeholder'] || 'Enter your password',
+    required: config['required'] || false,
+    value,
+    error,
+    onChange: (newValue: string) => onInputChange(fieldName, newValue),
+    className: inputClassName,
+  });
+};
+
+export default PasswordInput;
diff --git a/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx b/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
new file mode 100644
index 000000000..0adc483c5
--- /dev/null
+++ b/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
@@ -0,0 +1,194 @@
+/**
+ * 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 {EmbeddedFlowComponent, EmbeddedFlowComponentType, WithPreferences} from '@asgardeo/browser';
+import {ReactElement} from 'react';
+import EmailInput from './EmailInput';
+import FormContainer from './FormContainer';
+import PasswordInput from './PasswordInput';
+import SubmitButton from './SubmitButton';
+import TextInput from './TextInput';
+import Typography from './Typography';
+
+/**
+ * Base props that all sign-up option components share.
+ */
+export interface BaseSignUpOptionProps extends WithPreferences {
+  /**
+   * Custom CSS class name for buttons.
+   */
+  buttonClassName?: string;
+
+  /**
+   * The component configuration from the flow response.
+   */
+  component: EmbeddedFlowComponent;
+
+  /**
+   * Global error message to display.
+   */
+  error?: string | null;
+
+  /**
+   * Form validation errors.
+   */
+  formErrors: Record<string, string>;
+
+  /**
+   * Current form values.
+   */
+  formValues: Record<string, string>;
+
+  /**
+   * Custom CSS class name for form inputs.
+   */
+  inputClassName?: string;
+
+  /**
+   * Whether the form is valid.
+   */
+  isFormValid: boolean;
+
+  /**
+   * Whether the component is in loading state.
+   */
+  isLoading: boolean;
+
+  /**
+   * Callback function called when input values change.
+   */
+  onInputChange: (name: string, value: string) => void;
+
+  /**
+   * Component size variant.
+   */
+  size?: 'small' | 'medium' | 'large';
+
+  /**
+   * Touched state for form fields.
+   */
+  touchedFields: Record<string, boolean>;
+
+  /**
+   * Component theme variant.
+   */
+  variant?: 'default' | 'outlined' | 'filled';
+}
+
+/**
+ * Creates the appropriate sign-up component based on the component type.
+ */
+export const createSignUpComponent = (props: BaseSignUpOptionProps): ReactElement => {
+  const {component} = props;
+
+  switch (component.type) {
+    case EmbeddedFlowComponentType.Typography:
+      return <Typography {...props} />;
+
+    case EmbeddedFlowComponentType.Input:
+      // Determine input type based on variant or config
+      const inputVariant = component.variant?.toUpperCase();
+      const inputType = component.config['type']?.toLowerCase();
+
+      if (inputVariant === 'EMAIL' || inputType === 'email') {
+        return <EmailInput {...props} />;
+      }
+      if (inputVariant === 'PASSWORD' || inputType === 'password') {
+        return <PasswordInput {...props} />;
+      }
+      return <TextInput {...props} />;
+
+    case EmbeddedFlowComponentType.Button:
+      return <SubmitButton {...props} />;
+
+    case EmbeddedFlowComponentType.Form:
+      return <FormContainer {...props} />;
+
+    default:
+      return <div />;
+  }
+};
+
+/**
+ * Convenience function that creates the appropriate sign-up component from flow component data.
+ */
+export const createSignUpOptionFromComponent = (
+  component: EmbeddedFlowComponent,
+  formValues: Record<string, string>,
+  touchedFields: Record<string, boolean>,
+  formErrors: Record<string, string>,
+  isLoading: boolean,
+  isFormValid: boolean,
+  onInputChange: (name: string, value: string) => void,
+  options?: {
+    buttonClassName?: string;
+    error?: string | null;
+    inputClassName?: string;
+    key?: string | number;
+    size?: 'small' | 'medium' | 'large';
+    variant?: 'default' | 'outlined' | 'filled';
+  },
+): ReactElement =>
+  createSignUpComponent({
+    component,
+    formValues,
+    touchedFields,
+    formErrors,
+    isLoading,
+    isFormValid,
+    onInputChange,
+    ...options,
+  });
+
+/**
+ * Processes an array of components and renders them as React elements.
+ */
+export const renderSignUpComponents = (
+  components: EmbeddedFlowComponent[],
+  formValues: Record<string, string>,
+  touchedFields: Record<string, boolean>,
+  formErrors: Record<string, string>,
+  isLoading: boolean,
+  isFormValid: boolean,
+  onInputChange: (name: string, value: string) => void,
+  options?: {
+    buttonClassName?: string;
+    error?: string | null;
+    inputClassName?: string;
+    size?: 'small' | 'medium' | 'large';
+    variant?: 'default' | 'outlined' | 'filled';
+  },
+): ReactElement[] =>
+  components
+    .map((component, index) =>
+      createSignUpOptionFromComponent(
+        component,
+        formValues,
+        touchedFields,
+        formErrors,
+        isLoading,
+        isFormValid,
+        onInputChange,
+        {
+          ...options,
+          // Use component id as key, fallback to index
+          key: component.id || index,
+        },
+      ),
+    )
+    .filter(Boolean);
diff --git a/packages/react/src/components/presentation/SignUp/options/SubmitButton.tsx b/packages/react/src/components/presentation/SignUp/options/SubmitButton.tsx
new file mode 100644
index 000000000..95809beb8
--- /dev/null
+++ b/packages/react/src/components/presentation/SignUp/options/SubmitButton.tsx
@@ -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 {FC} from 'react';
+
+import {BaseSignUpOptionProps} from './SignUpOptionFactory';
+import Button from '../../../primitives/Button/Button';
+import Spinner from '../../../primitives/Spinner/Spinner';
+
+/**
+ * Submit button component for sign-up forms.
+ */
+const SubmitButton: FC<BaseSignUpOptionProps> = ({
+  component,
+  isLoading,
+  isFormValid,
+  buttonClassName,
+  size = 'medium',
+}) => {
+  const config = component.config || {};
+  const buttonText = config['text'] || config['label'] || 'Continue';
+  const buttonType = config['type'] || 'submit';
+  const buttonVariant = config['variant']?.toLowerCase() === 'primary' ? 'solid' : 'outline';
+
+  return (
+    <Button
+      key={component.id}
+      type={buttonType === 'submit' ? 'submit' : 'button'}
+      variant={buttonVariant}
+      size={size}
+      disabled={isLoading || !isFormValid}
+      className={buttonClassName}
+      style={{width: '100%'}}
+    >
+      {isLoading ? <Spinner size="small" /> : buttonText}
+    </Button>
+  );
+};
+
+export default SubmitButton;
diff --git a/packages/react/src/components/presentation/SignUp/options/TextInput.tsx b/packages/react/src/components/presentation/SignUp/options/TextInput.tsx
new file mode 100644
index 000000000..e8e792362
--- /dev/null
+++ b/packages/react/src/components/presentation/SignUp/options/TextInput.tsx
@@ -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 {FC} from 'react';
+import {FieldType} from '@asgardeo/browser';
+import {createField} from '../../../factories/FieldFactory';
+import {BaseSignUpOptionProps} from './SignUpOptionFactory';
+
+/**
+ * Text input component for sign-up forms.
+ */
+const TextInput: FC<BaseSignUpOptionProps> = ({
+  component,
+  formValues,
+  touchedFields,
+  formErrors,
+  onInputChange,
+  inputClassName,
+}) => {
+  const config = component.config || {};
+  const fieldName = config['identifier'] || config['name'] || component.id;
+  const value = formValues[fieldName] || '';
+  const error = touchedFields[fieldName] ? formErrors[fieldName] : undefined;
+
+  return createField({
+    type: FieldType.Text,
+    name: fieldName,
+    label: config['label'] || '',
+    placeholder: config['placeholder'] || '',
+    required: config['required'] || false,
+    value,
+    error,
+    onChange: (newValue: string) => onInputChange(fieldName, newValue),
+    className: inputClassName,
+  });
+};
+
+export default TextInput;
diff --git a/packages/react/src/components/presentation/SignUp/options/Typography.tsx b/packages/react/src/components/presentation/SignUp/options/Typography.tsx
new file mode 100644
index 000000000..566648d56
--- /dev/null
+++ b/packages/react/src/components/presentation/SignUp/options/Typography.tsx
@@ -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 {FC} from 'react';
+import {BaseSignUpOptionProps} from './SignUpOptionFactory';
+import Typography from '../../../primitives/Typography/Typography';
+
+/**
+ * Typography component for sign-up forms (titles, descriptions, etc.).
+ */
+const TypographyComponent: FC<BaseSignUpOptionProps> = ({component}) => {
+  const config = component.config || {};
+  const text = config['text'] || config['content'] || '';
+  const variant = component.variant?.toLowerCase() || 'body1';
+
+  // Map component variants to Typography variants
+  let typographyVariant: any = 'body1';
+
+  switch (variant) {
+    case 'h1':
+      typographyVariant = 'h1';
+      break;
+    case 'h2':
+      typographyVariant = 'h2';
+      break;
+    case 'h3':
+      typographyVariant = 'h3';
+      break;
+    case 'h4':
+      typographyVariant = 'h4';
+      break;
+    case 'h5':
+      typographyVariant = 'h5';
+      break;
+    case 'h6':
+      typographyVariant = 'h6';
+      break;
+    case 'subtitle1':
+      typographyVariant = 'subtitle1';
+      break;
+    case 'subtitle2':
+      typographyVariant = 'subtitle2';
+      break;
+    case 'body2':
+      typographyVariant = 'body2';
+      break;
+    case 'caption':
+      typographyVariant = 'caption';
+      break;
+    default:
+      typographyVariant = 'body1';
+  }
+
+  return (
+    <Typography key={component.id} variant={typographyVariant} style={{marginBottom: '1rem'}}>
+      {text}
+    </Typography>
+  );
+};
+
+export default TypographyComponent;
diff --git a/packages/react/src/components/presentation/SignUp/options/index.ts b/packages/react/src/components/presentation/SignUp/options/index.ts
new file mode 100644
index 000000000..ae1c85f37
--- /dev/null
+++ b/packages/react/src/components/presentation/SignUp/options/index.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 {default as TextInput} from './TextInput';
+export {default as EmailInput} from './EmailInput';
+export {default as PasswordInput} from './PasswordInput';
+export {default as SubmitButton} from './SubmitButton';
+export {default as Typography} from './Typography';
+export {default as FormContainer} from './FormContainer';
+
+export {
+  createSignUpComponent,
+  createSignUpOptionFromComponent,
+  renderSignUpComponents,
+  type BaseSignUpOptionProps,
+} from './SignUpOptionFactory';

From aa88400a5104b6114e183c4b34562b09f71fc9b0 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 09:26:57 +0530
Subject: [PATCH 22/96] fix: reorder import statements in EmailInput,
 PasswordInput, and TextInput components for consistency

---
 .../src/components/presentation/SignUp/options/EmailInput.tsx | 4 ++--
 .../components/presentation/SignUp/options/PasswordInput.tsx  | 2 +-
 .../src/components/presentation/SignUp/options/TextInput.tsx  | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/presentation/SignUp/options/EmailInput.tsx b/packages/react/src/components/presentation/SignUp/options/EmailInput.tsx
index 1fe24075b..3f49117a3 100644
--- a/packages/react/src/components/presentation/SignUp/options/EmailInput.tsx
+++ b/packages/react/src/components/presentation/SignUp/options/EmailInput.tsx
@@ -16,10 +16,10 @@
  * under the License.
  */
 
-import {FC} from 'react';
 import {FieldType} from '@asgardeo/browser';
-import {createField} from '../../../factories/FieldFactory';
+import {FC} from 'react';
 import {BaseSignUpOptionProps} from './SignUpOptionFactory';
+import {createField} from '../../../factories/FieldFactory';
 
 /**
  * Email input component for sign-up forms.
diff --git a/packages/react/src/components/presentation/SignUp/options/PasswordInput.tsx b/packages/react/src/components/presentation/SignUp/options/PasswordInput.tsx
index 725152252..ee4424d2c 100644
--- a/packages/react/src/components/presentation/SignUp/options/PasswordInput.tsx
+++ b/packages/react/src/components/presentation/SignUp/options/PasswordInput.tsx
@@ -16,8 +16,8 @@
  * under the License.
  */
 
-import {FC} from 'react';
 import {FieldType} from '@asgardeo/browser';
+import {FC} from 'react';
 import {BaseSignUpOptionProps} from './SignUpOptionFactory';
 import {createField} from '../../../factories/FieldFactory';
 
diff --git a/packages/react/src/components/presentation/SignUp/options/TextInput.tsx b/packages/react/src/components/presentation/SignUp/options/TextInput.tsx
index e8e792362..43e5887d8 100644
--- a/packages/react/src/components/presentation/SignUp/options/TextInput.tsx
+++ b/packages/react/src/components/presentation/SignUp/options/TextInput.tsx
@@ -16,10 +16,10 @@
  * under the License.
  */
 
-import {FC} from 'react';
 import {FieldType} from '@asgardeo/browser';
-import {createField} from '../../../factories/FieldFactory';
+import {FC} from 'react';
 import {BaseSignUpOptionProps} from './SignUpOptionFactory';
+import {createField} from '../../../factories/FieldFactory';
 
 /**
  * Text input component for sign-up forms.

From dc23c0eae27df765b3a7647d52f04c397c0622ca Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 09:34:15 +0530
Subject: [PATCH 23/96] feat(react): add SocialButton component for sign-up
 options and update exports

---
 .../SignUp/options/SignUpOptionFactory.tsx    | 11 ++-
 .../SignUp/options/SocialButton.tsx           | 69 +++++++++++++++++++
 .../presentation/SignUp/options/index.ts      |  1 +
 3 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/src/components/presentation/SignUp/options/SocialButton.tsx

diff --git a/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx b/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
index 0adc483c5..9f33fb723 100644
--- a/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
+++ b/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
@@ -21,6 +21,7 @@ import {ReactElement} from 'react';
 import EmailInput from './EmailInput';
 import FormContainer from './FormContainer';
 import PasswordInput from './PasswordInput';
+import SocialButton from './SocialButton';
 import SubmitButton from './SubmitButton';
 import TextInput from './TextInput';
 import Typography from './Typography';
@@ -74,6 +75,8 @@ export interface BaseSignUpOptionProps extends WithPreferences {
    */
   onInputChange: (name: string, value: string) => void;
 
+  onSubmit?: (payload) => void;
+
   /**
    * Component size variant.
    */
@@ -113,8 +116,14 @@ export const createSignUpComponent = (props: BaseSignUpOptionProps): ReactElemen
       }
       return <TextInput {...props} />;
 
-    case EmbeddedFlowComponentType.Button:
+    case EmbeddedFlowComponentType.Button: {
+      const buttonVariant: string | undefined = component.variant?.toUpperCase();
+
+      if (buttonVariant === 'SOCIAL') {
+        return <SocialButton {...props} />;
+      }
       return <SubmitButton {...props} />;
+    }
 
     case EmbeddedFlowComponentType.Form:
       return <FormContainer {...props} />;
diff --git a/packages/react/src/components/presentation/SignUp/options/SocialButton.tsx b/packages/react/src/components/presentation/SignUp/options/SocialButton.tsx
new file mode 100644
index 000000000..c51968d7a
--- /dev/null
+++ b/packages/react/src/components/presentation/SignUp/options/SocialButton.tsx
@@ -0,0 +1,69 @@
+/**
+ * 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} from 'react';
+
+import {BaseSignUpOptionProps} from './SignUpOptionFactory';
+import Button from '../../../primitives/Button/Button';
+
+/**
+ * Social button component for sign-up forms.
+ */
+const SocialButton: FC<BaseSignUpOptionProps> = ({
+  component,
+  isLoading,
+  buttonClassName,
+  size = 'medium',
+  onSubmit,
+}) => {
+  const config = component.config || {};
+  const buttonText: string = config['text'] || config['label'] || 'Continue with Social';
+
+  const handleClick = (): void => {
+    if (onSubmit) {
+      onSubmit({
+        actionId: component.id,
+      });
+    }
+  };
+
+  return (
+    <Button
+      key={component.id}
+      type="button"
+      variant="outline"
+      size={size}
+      disabled={isLoading}
+      onClick={handleClick}
+      className={buttonClassName}
+      style={{width: '100%'}}
+      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>
+      }
+    >
+      {buttonText}
+    </Button>
+  );
+};
+
+export default SocialButton;
diff --git a/packages/react/src/components/presentation/SignUp/options/index.ts b/packages/react/src/components/presentation/SignUp/options/index.ts
index ae1c85f37..325d7e3ff 100644
--- a/packages/react/src/components/presentation/SignUp/options/index.ts
+++ b/packages/react/src/components/presentation/SignUp/options/index.ts
@@ -20,6 +20,7 @@ export {default as TextInput} from './TextInput';
 export {default as EmailInput} from './EmailInput';
 export {default as PasswordInput} from './PasswordInput';
 export {default as SubmitButton} from './SubmitButton';
+export {default as SocialButton} from './SocialButton';
 export {default as Typography} from './Typography';
 export {default as FormContainer} from './FormContainer';
 

From b4225940310422c813ebdbd6ba3fca6cac8d8ddb Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 09:38:44 +0530
Subject: [PATCH 24/96] feat(react): add GoogleButton component and integrate
 it into sign-up options

---
 .../SignUp/options/GoogleButton.tsx           | 90 +++++++++++++++++++
 .../SignUp/options/SignUpOptionFactory.tsx    |  6 ++
 .../presentation/SignUp/options/index.ts      |  1 +
 3 files changed, 97 insertions(+)
 create mode 100644 packages/react/src/components/presentation/SignUp/options/GoogleButton.tsx

diff --git a/packages/react/src/components/presentation/SignUp/options/GoogleButton.tsx b/packages/react/src/components/presentation/SignUp/options/GoogleButton.tsx
new file mode 100644
index 000000000..6ffc97705
--- /dev/null
+++ b/packages/react/src/components/presentation/SignUp/options/GoogleButton.tsx
@@ -0,0 +1,90 @@
+/**
+ * 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} from 'react';
+
+import {BaseSignUpOptionProps} from './SignUpOptionFactory';
+import Button from '../../../primitives/Button/Button';
+
+/**
+ * Google Sign-Up Button Component.
+ * Handles registration with Google identity provider.
+ */
+const GoogleButton: FC<BaseSignUpOptionProps> = ({
+  component,
+  isLoading,
+  buttonClassName = '',
+  size = 'medium',
+  onSubmit,
+}) => {
+  const config = component.config || {};
+  const buttonText: string = config['text'] || config['label'] || 'Continue with Google';
+
+  /**
+   * Handle button click.
+   */
+  const handleClick = (): void => {
+    if (onSubmit) {
+      onSubmit({
+        actionId: component.id,
+      });
+    }
+  };
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      size={size}
+      disabled={isLoading}
+      onClick={handleClick}
+      className={buttonClassName}
+      style={{width: '100%'}}
+      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>
+      }
+    >
+      {buttonText}
+    </Button>
+  );
+};
+
+export default GoogleButton;
diff --git a/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx b/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
index 9f33fb723..4d31aaed5 100644
--- a/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
+++ b/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
@@ -20,6 +20,7 @@ import {EmbeddedFlowComponent, EmbeddedFlowComponentType, WithPreferences} from
 import {ReactElement} from 'react';
 import EmailInput from './EmailInput';
 import FormContainer from './FormContainer';
+import GoogleButton from './GoogleButton';
 import PasswordInput from './PasswordInput';
 import SocialButton from './SocialButton';
 import SubmitButton from './SubmitButton';
@@ -118,8 +119,13 @@ export const createSignUpComponent = (props: BaseSignUpOptionProps): ReactElemen
 
     case EmbeddedFlowComponentType.Button: {
       const buttonVariant: string | undefined = component.variant?.toUpperCase();
+      const buttonText: string = component.config['text'] || component.config['label'] || '';
 
       if (buttonVariant === 'SOCIAL') {
+        // Check if it's a Google button based on text content
+        if (buttonText.toLowerCase().includes('google')) {
+          return <GoogleButton {...props} />;
+        }
         return <SocialButton {...props} />;
       }
       return <SubmitButton {...props} />;
diff --git a/packages/react/src/components/presentation/SignUp/options/index.ts b/packages/react/src/components/presentation/SignUp/options/index.ts
index 325d7e3ff..361077b89 100644
--- a/packages/react/src/components/presentation/SignUp/options/index.ts
+++ b/packages/react/src/components/presentation/SignUp/options/index.ts
@@ -21,6 +21,7 @@ export {default as EmailInput} from './EmailInput';
 export {default as PasswordInput} from './PasswordInput';
 export {default as SubmitButton} from './SubmitButton';
 export {default as SocialButton} from './SocialButton';
+export {default as GoogleButton} from './GoogleButton';
 export {default as Typography} from './Typography';
 export {default as FormContainer} from './FormContainer';
 

From aa6a0596c433ef22471a4a9eb1405002ca707c10 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 09:51:16 +0530
Subject: [PATCH 25/96] feat(react): refactor form submission handling in
 sign-up components for improved structure and clarity

---
 .../presentation/SignUp/BaseSignUp.tsx        | 53 ++++++++++---------
 .../SignUp/options/FormContainer.tsx          | 24 +++++++--
 .../SignUp/options/GoogleButton.tsx           |  4 +-
 .../SignUp/options/SignUpOptionFactory.tsx    | 10 ++--
 .../SignUp/options/SocialButton.tsx           |  4 +-
 5 files changed, 56 insertions(+), 39 deletions(-)

diff --git a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
index 5ea1aa4f4..373d52ce3 100644
--- a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
+++ b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
@@ -274,31 +274,29 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
   );
 
   /**
-   * Handle form submission.
+   * Handle input value changes.
    */
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
+  const handleInputChange = (name: string, value: string) => {
+    setFormValue(name, value);
+    setFormTouched(name, true);
+  };
 
+  /**
+   * Handle component submission (for buttons outside forms).
+   */
+  const handleSubmit = async (component: any, data?: Record<string, any>) => {
     if (!currentFlow) {
       return;
     }
 
-    // Mark all fields as touched before validation
-    touchAllFields();
-
-    const validation = validateForm();
-    if (!validation.isValid) {
-      return;
-    }
-
     setIsLoading(true);
     setError(null);
 
     try {
       const payload: EmbeddedFlowExecuteRequestPayload = {
         flowType: currentFlow.data ? (currentFlow.data as any) : undefined,
-        inputs: formValues,
-        actionId: 'submit', // This might need to be dynamic based on the flow
+        inputs: data || {},
+        actionId: component.id,
       };
 
       const response = await onSubmit(payload);
@@ -307,7 +305,6 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
       if (response.flowStatus === EmbeddedFlowStatus.Complete) {
         onSuccess?.(response);
 
-        // Handle redirect if afterSignUpUrl is provided
         if (afterSignUpUrl) {
           window.location.href = afterSignUpUrl;
         }
@@ -315,7 +312,6 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
       }
 
       if (response.flowStatus === EmbeddedFlowStatus.Incomplete) {
-        // Continue with the next step
         setCurrentFlow(response);
         setupFormFields(response);
       }
@@ -328,14 +324,6 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
     }
   };
 
-  /**
-   * Handle input value changes.
-   */
-  const handleInputChange = (name: string, value: string) => {
-    setFormValue(name, value);
-    setFormTouched(name, true);
-  };
-
   // Generate CSS classes
   const containerClasses = clsx(
     [
@@ -387,11 +375,24 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
           buttonClassName: buttonClasses,
           error,
           inputClassName: inputClasses,
+          onSubmit: handleSubmit,
           size,
           variant,
         },
       ),
-    [formValues, touchedFields, formErrors, isFormValid, isLoading, size, variant, error, inputClasses, buttonClasses],
+    [
+      formValues,
+      touchedFields,
+      formErrors,
+      isFormValid,
+      isLoading,
+      size,
+      variant,
+      error,
+      inputClasses,
+      buttonClasses,
+      handleSubmit,
+    ],
   );
 
   // Initialize the flow on component mount
@@ -504,9 +505,9 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
           </Alert>
         )}
 
-        <form onSubmit={handleSubmit}>
+        <div style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
           {currentFlow.data?.components && renderComponents(currentFlow.data.components)}
-        </form>
+        </div>
       </Card.Content>
     </Card>
   );
diff --git a/packages/react/src/components/presentation/SignUp/options/FormContainer.tsx b/packages/react/src/components/presentation/SignUp/options/FormContainer.tsx
index 066a376cc..5f56aa1b8 100644
--- a/packages/react/src/components/presentation/SignUp/options/FormContainer.tsx
+++ b/packages/react/src/components/presentation/SignUp/options/FormContainer.tsx
@@ -25,17 +25,35 @@ import {createSignUpComponent, BaseSignUpOptionProps} from './SignUpOptionFactor
 const FormContainer: FC<BaseSignUpOptionProps> = props => {
   const {component} = props;
 
-  // If the form has child components, render them
+  // If the form has child components, render them wrapped in a form element
   if (component.components && component.components.length > 0) {
+    const handleFormSubmit = (e: React.FormEvent): void => {
+      e.preventDefault();
+
+      // Find submit button in child components and trigger its submission
+      const submitButton = component.components?.find(
+        child => child.type === 'BUTTON' &&
+        (child.variant === 'PRIMARY' || child.config?.['type'] === 'submit')
+      );
+
+      if (submitButton && props.onSubmit) {
+        props.onSubmit(submitButton, props.formValues);
+      }
+    };
+
     return (
-      <div key={component.id} style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
+      <form
+        key={component.id}
+        onSubmit={handleFormSubmit}
+        style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}
+      >
         {component.components.map((childComponent, index) =>
           createSignUpComponent({
             ...props,
             component: childComponent,
           }),
         )}
-      </div>
+      </form>
     );
   }
 
diff --git a/packages/react/src/components/presentation/SignUp/options/GoogleButton.tsx b/packages/react/src/components/presentation/SignUp/options/GoogleButton.tsx
index 6ffc97705..c0390083a 100644
--- a/packages/react/src/components/presentation/SignUp/options/GoogleButton.tsx
+++ b/packages/react/src/components/presentation/SignUp/options/GoogleButton.tsx
@@ -40,9 +40,7 @@ const GoogleButton: FC<BaseSignUpOptionProps> = ({
    */
   const handleClick = (): void => {
     if (onSubmit) {
-      onSubmit({
-        actionId: component.id,
-      });
+      onSubmit(component, {});
     }
   };
 
diff --git a/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx b/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
index 4d31aaed5..e59a8f67b 100644
--- a/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
+++ b/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
@@ -76,7 +76,7 @@ export interface BaseSignUpOptionProps extends WithPreferences {
    */
   onInputChange: (name: string, value: string) => void;
 
-  onSubmit?: (payload) => void;
+  onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>) => void;
 
   /**
    * Component size variant.
@@ -155,18 +155,19 @@ export const createSignUpOptionFromComponent = (
     error?: string | null;
     inputClassName?: string;
     key?: string | number;
+    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>) => void;
     size?: 'small' | 'medium' | 'large';
     variant?: 'default' | 'outlined' | 'filled';
   },
 ): ReactElement =>
   createSignUpComponent({
     component,
-    formValues,
-    touchedFields,
     formErrors,
-    isLoading,
+    formValues,
     isFormValid,
+    isLoading,
     onInputChange,
+    touchedFields,
     ...options,
   });
 
@@ -185,6 +186,7 @@ export const renderSignUpComponents = (
     buttonClassName?: string;
     error?: string | null;
     inputClassName?: string;
+    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>) => void;
     size?: 'small' | 'medium' | 'large';
     variant?: 'default' | 'outlined' | 'filled';
   },
diff --git a/packages/react/src/components/presentation/SignUp/options/SocialButton.tsx b/packages/react/src/components/presentation/SignUp/options/SocialButton.tsx
index c51968d7a..80038530f 100644
--- a/packages/react/src/components/presentation/SignUp/options/SocialButton.tsx
+++ b/packages/react/src/components/presentation/SignUp/options/SocialButton.tsx
@@ -36,9 +36,7 @@ const SocialButton: FC<BaseSignUpOptionProps> = ({
 
   const handleClick = (): void => {
     if (onSubmit) {
-      onSubmit({
-        actionId: component.id,
-      });
+      onSubmit(component, {});
     }
   };
 

From a9ee1661feb0f52eab10b2fe70b9c9d919566865 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 09:52:53 +0530
Subject: [PATCH 26/96] fix: simplify formatting of submit button search logic
 in FormContainer component

---
 .../components/presentation/SignUp/options/FormContainer.tsx   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react/src/components/presentation/SignUp/options/FormContainer.tsx b/packages/react/src/components/presentation/SignUp/options/FormContainer.tsx
index 5f56aa1b8..f24fccb1a 100644
--- a/packages/react/src/components/presentation/SignUp/options/FormContainer.tsx
+++ b/packages/react/src/components/presentation/SignUp/options/FormContainer.tsx
@@ -32,8 +32,7 @@ const FormContainer: FC<BaseSignUpOptionProps> = props => {
 
       // Find submit button in child components and trigger its submission
       const submitButton = component.components?.find(
-        child => child.type === 'BUTTON' &&
-        (child.variant === 'PRIMARY' || child.config?.['type'] === 'submit')
+        child => child.type === 'BUTTON' && (child.variant === 'PRIMARY' || child.config?.['type'] === 'submit'),
       );
 
       if (submitButton && props.onSubmit) {

From f7f3d6f85f25f0a64bbc988c0ffe1d76d646b399 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 10:43:07 +0530
Subject: [PATCH 27/96] feat(react): update typography styles and simplify form
 layout in sign-up components

---
 .../src/components/presentation/SignIn/BaseSignIn.tsx  |  2 +-
 .../src/components/presentation/SignUp/BaseSignUp.tsx  |  6 ------
 .../presentation/SignUp/options/FormContainer.tsx      |  2 +-
 .../components/primitives/Typography/Typography.tsx    | 10 +++++-----
 4 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index 6d24b3806..14aa2d5d9 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -1162,7 +1162,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
     return (
       <Card className={containerClasses}>
         <Card.Header>
-          <Card.Title level={2}>{flowTitle || t('signin.title')}</Card.Title>
+          <Card.Title level={3}>{flowTitle || t('signin.title')}</Card.Title>
           {flowSubtitle && (
             <Typography variant="body1" style={{marginTop: '0.5rem'}}>
               {flowSubtitle || t('signin.subtitle')}
diff --git a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
index 373d52ce3..d2132e938 100644
--- a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
+++ b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
@@ -475,12 +475,6 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
   return (
     <Card className={containerClasses}>
       <Card.Header>
-        <Card.Title level={2}>{flowTitle || t('signup.title')}</Card.Title>
-        {flowSubtitle && (
-          <Typography variant="body1" style={{marginTop: '0.5rem'}}>
-            {flowSubtitle || t('signup.subtitle')}
-          </Typography>
-        )}
         {flowMessages && flowMessages.length > 0 && (
           <div style={{marginTop: '1rem'}}>
             {flowMessages.map((message: any, index: number) => (
diff --git a/packages/react/src/components/presentation/SignUp/options/FormContainer.tsx b/packages/react/src/components/presentation/SignUp/options/FormContainer.tsx
index f24fccb1a..fbfb21380 100644
--- a/packages/react/src/components/presentation/SignUp/options/FormContainer.tsx
+++ b/packages/react/src/components/presentation/SignUp/options/FormContainer.tsx
@@ -44,7 +44,7 @@ const FormContainer: FC<BaseSignUpOptionProps> = props => {
       <form
         key={component.id}
         onSubmit={handleFormSubmit}
-        style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}
+        style={{display: 'flex', flexDirection: 'column'}}
       >
         {component.components.map((childComponent, index) =>
           createSignUpComponent({
diff --git a/packages/react/src/components/primitives/Typography/Typography.tsx b/packages/react/src/components/primitives/Typography/Typography.tsx
index bdb799e60..f386e0383 100644
--- a/packages/react/src/components/primitives/Typography/Typography.tsx
+++ b/packages/react/src/components/primitives/Typography/Typography.tsx
@@ -174,35 +174,35 @@ const Typography: FC<TypographyProps> = ({
       case 'h1':
         return {
           fontSize: '2.125rem', // 34px
-          fontWeight: 400,
+          fontWeight: 600,
           lineHeight: 1.235,
           letterSpacing: '-0.00735em',
         };
       case 'h2':
         return {
           fontSize: '1.5rem', // 24px
-          fontWeight: 400,
+          fontWeight: 600,
           lineHeight: 1.334,
           letterSpacing: '0em',
         };
       case 'h3':
         return {
           fontSize: '1.25rem', // 20px
-          fontWeight: 400,
+          fontWeight: 600,
           lineHeight: 1.6,
           letterSpacing: '0.0075em',
         };
       case 'h4':
         return {
           fontSize: '1.125rem', // 18px
-          fontWeight: 400,
+          fontWeight: 600,
           lineHeight: 1.5,
           letterSpacing: '0.00938em',
         };
       case 'h5':
         return {
           fontSize: '1rem', // 16px
-          fontWeight: 400,
+          fontWeight: 600,
           lineHeight: 1.334,
           letterSpacing: '0em',
         };

From ac2d6924639b5b55af4dcd59ef7266d87580e9b0 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 10:57:32 +0530
Subject: [PATCH 28/96] feat(react): add new input components (Checkbox, Date,
 Number, Telephone) and update SignUpOptionFactory for integration

---
 .../javascript/src/models/embedded-flow.ts    |  2 +
 .../src/components/factories/FieldFactory.tsx |  9 +++
 .../SignUp/options/CheckboxInput.tsx          | 53 +++++++++++++++++
 .../presentation/SignUp/options/DateInput.tsx | 53 +++++++++++++++++
 .../SignUp/options/DividerComponent.tsx       | 42 ++++++++++++++
 .../SignUp/options/ImageComponent.tsx         | 58 +++++++++++++++++++
 .../SignUp/options/NumberInput.tsx            | 53 +++++++++++++++++
 .../SignUp/options/SignUpOptionFactory.tsx    | 24 ++++++++
 .../SignUp/options/TelephoneInput.tsx         | 56 ++++++++++++++++++
 9 files changed, 350 insertions(+)
 create mode 100644 packages/react/src/components/presentation/SignUp/options/CheckboxInput.tsx
 create mode 100644 packages/react/src/components/presentation/SignUp/options/DateInput.tsx
 create mode 100644 packages/react/src/components/presentation/SignUp/options/DividerComponent.tsx
 create mode 100644 packages/react/src/components/presentation/SignUp/options/ImageComponent.tsx
 create mode 100644 packages/react/src/components/presentation/SignUp/options/NumberInput.tsx
 create mode 100644 packages/react/src/components/presentation/SignUp/options/TelephoneInput.tsx

diff --git a/packages/javascript/src/models/embedded-flow.ts b/packages/javascript/src/models/embedded-flow.ts
index 7bf982b27..639600770 100644
--- a/packages/javascript/src/models/embedded-flow.ts
+++ b/packages/javascript/src/models/embedded-flow.ts
@@ -62,4 +62,6 @@ export enum EmbeddedFlowComponentType {
   Select = 'SELECT',
   Checkbox = 'CHECKBOX',
   Radio = 'RADIO',
+  Divider = 'DIVIDER',
+  Image = 'IMAGE',
 }
diff --git a/packages/react/src/components/factories/FieldFactory.tsx b/packages/react/src/components/factories/FieldFactory.tsx
index 6c2109c73..dbb1c728e 100644
--- a/packages/react/src/components/factories/FieldFactory.tsx
+++ b/packages/react/src/components/factories/FieldFactory.tsx
@@ -22,6 +22,8 @@ import Select from '../primitives/Select/Select';
 import {SelectOption} from '../primitives/Select/Select';
 import OtpField from '../primitives/OtpField/OtpField';
 import PasswordField from '../primitives/PasswordField/PasswordField';
+import DatePicker from '../primitives/DatePicker/DatePicker';
+import Checkbox from '../primitives/Checkbox/Checkbox';
 import {FieldType} from '@asgardeo/browser';
 
 /**
@@ -178,6 +180,13 @@ export const createField = (config: FieldConfig): ReactElement => {
       return <PasswordField {...commonProps} onChange={onChange} />;
     case FieldType.Text:
       return <TextField {...commonProps} type="text" onChange={e => onChange(e.target.value)} autoComplete="off" />;
+    case FieldType.Email:
+      return <TextField {...commonProps} type="email" onChange={e => onChange(e.target.value)} autoComplete="email" />;
+    case FieldType.Date:
+      return <DatePicker {...commonProps} onChange={e => onChange(e.target.value)} />;
+    case FieldType.Checkbox:
+      const isChecked = value === 'true' || (value as any) === true;
+      return <Checkbox {...commonProps} checked={isChecked} onChange={e => onChange(e.target.checked.toString())} />;
     case FieldType.Otp:
       return <OtpField {...commonProps} onChange={e => onChange(e.target.value)} />;
     case FieldType.Number:
diff --git a/packages/react/src/components/presentation/SignUp/options/CheckboxInput.tsx b/packages/react/src/components/presentation/SignUp/options/CheckboxInput.tsx
new file mode 100644
index 000000000..5eb4164d3
--- /dev/null
+++ b/packages/react/src/components/presentation/SignUp/options/CheckboxInput.tsx
@@ -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 {FieldType} from '@asgardeo/browser';
+import {FC} from 'react';
+import {BaseSignUpOptionProps} from './SignUpOptionFactory';
+import {createField} from '../../../factories/FieldFactory';
+
+/**
+ * Checkbox input component for sign-up forms.
+ */
+const CheckboxInput: FC<BaseSignUpOptionProps> = ({
+  component,
+  formValues,
+  touchedFields,
+  formErrors,
+  onInputChange,
+  inputClassName,
+}) => {
+  const config = component.config || {};
+  const fieldName = config['identifier'] || config['name'] || component.id;
+  const value = formValues[fieldName] || '';
+  const error = touchedFields[fieldName] ? formErrors[fieldName] : undefined;
+
+  return createField({
+    type: FieldType.Checkbox,
+    name: fieldName,
+    label: config['label'] || '',
+    placeholder: config['placeholder'] || '',
+    required: config['required'] || false,
+    value,
+    error,
+    onChange: (newValue: string) => onInputChange(fieldName, newValue),
+    className: inputClassName,
+  });
+};
+
+export default CheckboxInput;
diff --git a/packages/react/src/components/presentation/SignUp/options/DateInput.tsx b/packages/react/src/components/presentation/SignUp/options/DateInput.tsx
new file mode 100644
index 000000000..781415ce0
--- /dev/null
+++ b/packages/react/src/components/presentation/SignUp/options/DateInput.tsx
@@ -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 {FieldType} from '@asgardeo/browser';
+import {FC} from 'react';
+import {BaseSignUpOptionProps} from './SignUpOptionFactory';
+import {createField} from '../../../factories/FieldFactory';
+
+/**
+ * Date input component for sign-up forms.
+ */
+const DateInput: FC<BaseSignUpOptionProps> = ({
+  component,
+  formValues,
+  touchedFields,
+  formErrors,
+  onInputChange,
+  inputClassName,
+}) => {
+  const config = component.config || {};
+  const fieldName = config['identifier'] || config['name'] || component.id;
+  const value = formValues[fieldName] || '';
+  const error = touchedFields[fieldName] ? formErrors[fieldName] : undefined;
+
+  return createField({
+    type: FieldType.Date,
+    name: fieldName,
+    label: config['label'] || '',
+    placeholder: config['placeholder'] || '',
+    required: config['required'] || false,
+    value,
+    error,
+    onChange: (newValue: string) => onInputChange(fieldName, newValue),
+    className: inputClassName,
+  });
+};
+
+export default DateInput;
diff --git a/packages/react/src/components/presentation/SignUp/options/DividerComponent.tsx b/packages/react/src/components/presentation/SignUp/options/DividerComponent.tsx
new file mode 100644
index 000000000..57c497116
--- /dev/null
+++ b/packages/react/src/components/presentation/SignUp/options/DividerComponent.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} from 'react';
+import {BaseSignUpOptionProps} from './SignUpOptionFactory';
+import Divider from '../../../primitives/Divider/Divider';
+
+/**
+ * Divider component for sign-up forms.
+ */
+const DividerComponent: FC<BaseSignUpOptionProps> = ({component}) => {
+  const config = component.config || {};
+  const text = config['text'] || '';
+  const variant = component.variant?.toLowerCase() || 'horizontal';
+
+  return (
+    <Divider
+      key={component.id}
+      orientation={variant === 'vertical' ? 'vertical' : 'horizontal'}
+      style={{margin: '1rem 0'}}
+    >
+      {text}
+    </Divider>
+  );
+};
+
+export default DividerComponent;
diff --git a/packages/react/src/components/presentation/SignUp/options/ImageComponent.tsx b/packages/react/src/components/presentation/SignUp/options/ImageComponent.tsx
new file mode 100644
index 000000000..5ed54f86f
--- /dev/null
+++ b/packages/react/src/components/presentation/SignUp/options/ImageComponent.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 {FC} from 'react';
+import {BaseSignUpOptionProps} from './SignUpOptionFactory';
+
+/**
+ * Image component for sign-up forms.
+ */
+const ImageComponent: FC<BaseSignUpOptionProps> = ({component}) => {
+  const config = component.config || {};
+  const src = config['src'] || '';
+  const alt = config['alt'] || config['label'] || 'Image';
+  const variant = component.variant?.toLowerCase() || 'image_block';
+
+  const imageStyle: React.CSSProperties = {
+    maxWidth: '100%',
+    height: 'auto',
+    display: 'block',
+    margin: variant === 'image_block' ? '1rem auto' : '0',
+    borderRadius: '4px',
+  };
+
+  if (!src) {
+    return null;
+  }
+
+  return (
+    <div key={component.id} style={{textAlign: 'center'}}>
+      <img
+        src={src}
+        alt={alt}
+        style={imageStyle}
+        onError={e => {
+          // Hide broken images
+          e.currentTarget.style.display = 'none';
+        }}
+      />
+    </div>
+  );
+};
+
+export default ImageComponent;
diff --git a/packages/react/src/components/presentation/SignUp/options/NumberInput.tsx b/packages/react/src/components/presentation/SignUp/options/NumberInput.tsx
new file mode 100644
index 000000000..f03ddbaa9
--- /dev/null
+++ b/packages/react/src/components/presentation/SignUp/options/NumberInput.tsx
@@ -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 {FieldType} from '@asgardeo/browser';
+import {FC} from 'react';
+import {BaseSignUpOptionProps} from './SignUpOptionFactory';
+import {createField} from '../../../factories/FieldFactory';
+
+/**
+ * Number input component for sign-up forms.
+ */
+const NumberInput: FC<BaseSignUpOptionProps> = ({
+  component,
+  formValues,
+  touchedFields,
+  formErrors,
+  onInputChange,
+  inputClassName,
+}) => {
+  const config = component.config || {};
+  const fieldName = config['identifier'] || config['name'] || component.id;
+  const value = formValues[fieldName] || '';
+  const error = touchedFields[fieldName] ? formErrors[fieldName] : undefined;
+
+  return createField({
+    type: FieldType.Number,
+    name: fieldName,
+    label: config['label'] || '',
+    placeholder: config['placeholder'] || '',
+    required: config['required'] || false,
+    value,
+    error,
+    onChange: (newValue: string) => onInputChange(fieldName, newValue),
+    className: inputClassName,
+  });
+};
+
+export default NumberInput;
diff --git a/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx b/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
index e59a8f67b..be3119e3b 100644
--- a/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
+++ b/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
@@ -18,12 +18,18 @@
 
 import {EmbeddedFlowComponent, EmbeddedFlowComponentType, WithPreferences} from '@asgardeo/browser';
 import {ReactElement} from 'react';
+import CheckboxInput from './CheckboxInput';
+import DateInput from './DateInput';
+import DividerComponent from './DividerComponent';
 import EmailInput from './EmailInput';
 import FormContainer from './FormContainer';
 import GoogleButton from './GoogleButton';
+import ImageComponent from './ImageComponent';
+import NumberInput from './NumberInput';
 import PasswordInput from './PasswordInput';
 import SocialButton from './SocialButton';
 import SubmitButton from './SubmitButton';
+import TelephoneInput from './TelephoneInput';
 import TextInput from './TextInput';
 import Typography from './Typography';
 
@@ -115,6 +121,18 @@ export const createSignUpComponent = (props: BaseSignUpOptionProps): ReactElemen
       if (inputVariant === 'PASSWORD' || inputType === 'password') {
         return <PasswordInput {...props} />;
       }
+      if (inputVariant === 'TELEPHONE' || inputType === 'tel') {
+        return <TelephoneInput {...props} />;
+      }
+      if (inputVariant === 'NUMBER' || inputType === 'number') {
+        return <NumberInput {...props} />;
+      }
+      if (inputVariant === 'DATE' || inputType === 'date') {
+        return <DateInput {...props} />;
+      }
+      if (inputVariant === 'CHECKBOX' || inputType === 'checkbox') {
+        return <CheckboxInput {...props} />;
+      }
       return <TextInput {...props} />;
 
     case EmbeddedFlowComponentType.Button: {
@@ -134,6 +152,12 @@ export const createSignUpComponent = (props: BaseSignUpOptionProps): ReactElemen
     case EmbeddedFlowComponentType.Form:
       return <FormContainer {...props} />;
 
+    case EmbeddedFlowComponentType.Divider:
+      return <DividerComponent {...props} />;
+
+    case EmbeddedFlowComponentType.Image:
+      return <ImageComponent {...props} />;
+
     default:
       return <div />;
   }
diff --git a/packages/react/src/components/presentation/SignUp/options/TelephoneInput.tsx b/packages/react/src/components/presentation/SignUp/options/TelephoneInput.tsx
new file mode 100644
index 000000000..604241114
--- /dev/null
+++ b/packages/react/src/components/presentation/SignUp/options/TelephoneInput.tsx
@@ -0,0 +1,56 @@
+/**
+ * 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} from 'react';
+import {BaseSignUpOptionProps} from './SignUpOptionFactory';
+import TextField from '../../../primitives/TextField/TextField';
+
+/**
+ * Telephone input component for sign-up forms.
+ */
+const TelephoneInput: FC<BaseSignUpOptionProps> = ({
+  component,
+  formValues,
+  touchedFields,
+  formErrors,
+  onInputChange,
+  inputClassName,
+}) => {
+  const config = component.config || {};
+  const fieldName = config['identifier'] || config['name'] || component.id;
+  const value = formValues[fieldName] || '';
+  const error = touchedFields[fieldName] ? formErrors[fieldName] : undefined;
+
+  return (
+    <TextField
+      key={component.id}
+      name={fieldName}
+      type="tel"
+      label={config['label'] || ''}
+      placeholder={config['placeholder'] || ''}
+      required={config['required'] || false}
+      value={value}
+      error={error}
+      onChange={e => onInputChange(fieldName, e.target.value)}
+      className={inputClassName}
+      helperText={config['hint'] || ''}
+    />
+  );
+};
+
+export default TelephoneInput;

From c77dd0614b3aad582f52c2b1c7aa2a5bc553c7fa Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 11:08:09 +0530
Subject: [PATCH 29/96] feat(react): refactor button handling in sign-up
 components to use a generic ButtonComponent for improved variant management

---
 .../SignUp/options/FormContainer.tsx          | 10 ++---
 .../SignUp/options/SignUpOptionFactory.tsx    | 16 ++++----
 .../SignUp/options/SubmitButton.tsx           | 39 ++++++++++++++++---
 3 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/packages/react/src/components/presentation/SignUp/options/FormContainer.tsx b/packages/react/src/components/presentation/SignUp/options/FormContainer.tsx
index fbfb21380..453a8fe8a 100644
--- a/packages/react/src/components/presentation/SignUp/options/FormContainer.tsx
+++ b/packages/react/src/components/presentation/SignUp/options/FormContainer.tsx
@@ -32,7 +32,9 @@ const FormContainer: FC<BaseSignUpOptionProps> = props => {
 
       // Find submit button in child components and trigger its submission
       const submitButton = component.components?.find(
-        child => child.type === 'BUTTON' && (child.variant === 'PRIMARY' || child.config?.['type'] === 'submit'),
+        child =>
+          child.type === 'BUTTON' &&
+          (child.variant === 'PRIMARY' || child.variant === 'SECONDARY' || child.config?.['type'] === 'submit'),
       );
 
       if (submitButton && props.onSubmit) {
@@ -41,11 +43,7 @@ const FormContainer: FC<BaseSignUpOptionProps> = props => {
     };
 
     return (
-      <form
-        key={component.id}
-        onSubmit={handleFormSubmit}
-        style={{display: 'flex', flexDirection: 'column'}}
-      >
+      <form key={component.id} onSubmit={handleFormSubmit} style={{display: 'flex', flexDirection: 'column'}}>
         {component.components.map((childComponent, index) =>
           createSignUpComponent({
             ...props,
diff --git a/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx b/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
index be3119e3b..df22078dc 100644
--- a/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
+++ b/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
@@ -28,7 +28,7 @@ import ImageComponent from './ImageComponent';
 import NumberInput from './NumberInput';
 import PasswordInput from './PasswordInput';
 import SocialButton from './SocialButton';
-import SubmitButton from './SubmitButton';
+import ButtonComponent from './SubmitButton';
 import TelephoneInput from './TelephoneInput';
 import TextInput from './TextInput';
 import Typography from './Typography';
@@ -139,14 +139,14 @@ export const createSignUpComponent = (props: BaseSignUpOptionProps): ReactElemen
       const buttonVariant: string | undefined = component.variant?.toUpperCase();
       const buttonText: string = component.config['text'] || component.config['label'] || '';
 
-      if (buttonVariant === 'SOCIAL') {
-        // Check if it's a Google button based on text content
-        if (buttonText.toLowerCase().includes('google')) {
-          return <GoogleButton {...props} />;
-        }
-        return <SocialButton {...props} />;
+      // TODO: The connection type should come as metadata.
+      if (buttonVariant === 'SOCIAL' && buttonText.toLowerCase().includes('google')) {
+        return <GoogleButton {...props} />;
       }
-      return <SubmitButton {...props} />;
+
+      // Use the generic ButtonComponent for all other button variants
+      // It will handle PRIMARY, SECONDARY, TEXT, SOCIAL mappings internally
+      return <ButtonComponent {...props} />;
     }
 
     case EmbeddedFlowComponentType.Form:
diff --git a/packages/react/src/components/presentation/SignUp/options/SubmitButton.tsx b/packages/react/src/components/presentation/SignUp/options/SubmitButton.tsx
index 95809beb8..610d05987 100644
--- a/packages/react/src/components/presentation/SignUp/options/SubmitButton.tsx
+++ b/packages/react/src/components/presentation/SignUp/options/SubmitButton.tsx
@@ -23,27 +23,54 @@ import Button from '../../../primitives/Button/Button';
 import Spinner from '../../../primitives/Spinner/Spinner';
 
 /**
- * Submit button component for sign-up forms.
+ * Button component for sign-up forms that handles all button variants.
  */
-const SubmitButton: FC<BaseSignUpOptionProps> = ({
+const ButtonComponent: FC<BaseSignUpOptionProps> = ({
   component,
   isLoading,
   isFormValid,
   buttonClassName,
+  onSubmit,
   size = 'medium',
 }) => {
   const config = component.config || {};
   const buttonText = config['text'] || config['label'] || 'Continue';
   const buttonType = config['type'] || 'submit';
-  const buttonVariant = config['variant']?.toLowerCase() === 'primary' ? 'solid' : 'outline';
+  const componentVariant = component.variant?.toUpperCase() || 'PRIMARY';
+
+  // Map component variants to Button primitive props
+  const getButtonProps = () => {
+    switch (componentVariant) {
+      case 'PRIMARY':
+        return {variant: 'solid' as const, color: 'primary' as const};
+      case 'SECONDARY':
+        return {variant: 'solid' as const, color: 'secondary' as const};
+      case 'TEXT':
+        return {variant: 'text' as const, color: 'primary' as const};
+      case 'SOCIAL':
+        return {variant: 'outline' as const, color: 'primary' as const};
+      default:
+        return {variant: 'solid' as const, color: 'primary' as const};
+    }
+  };
+
+  const {variant, color} = getButtonProps();
+
+  const handleClick = () => {
+    if (onSubmit && buttonType !== 'submit') {
+      onSubmit(component);
+    }
+  };
 
   return (
     <Button
       key={component.id}
       type={buttonType === 'submit' ? 'submit' : 'button'}
-      variant={buttonVariant}
+      variant={variant}
+      color={color}
       size={size}
-      disabled={isLoading || !isFormValid}
+      disabled={isLoading || (buttonType === 'submit' && !isFormValid)}
+      onClick={buttonType !== 'submit' ? handleClick : undefined}
       className={buttonClassName}
       style={{width: '100%'}}
     >
@@ -52,4 +79,4 @@ const SubmitButton: FC<BaseSignUpOptionProps> = ({
   );
 };
 
-export default SubmitButton;
+export default ButtonComponent;

From a035655443ab052f38dea1644c27ebba5bebeb99 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 11:20:25 +0530
Subject: [PATCH 30/96] feat(react): update sign-in and landing pages to use
 SignInButton and SignUpButton components for improved user experience

---
 samples/teamspace-react/src/App.tsx           |  2 +-
 .../src/components/header/PublicActions.tsx   | 54 ++++++++++++-------
 .../teamspace-react/src/pages/LandingPage.tsx | 26 +++++----
 .../src/pages/{SignIn.tsx => SignInPage.tsx}  |  0
 4 files changed, 50 insertions(+), 32 deletions(-)
 rename samples/teamspace-react/src/pages/{SignIn.tsx => SignInPage.tsx} (100%)

diff --git a/samples/teamspace-react/src/App.tsx b/samples/teamspace-react/src/App.tsx
index 4d93f67c8..42a70afe7 100644
--- a/samples/teamspace-react/src/App.tsx
+++ b/samples/teamspace-react/src/App.tsx
@@ -6,7 +6,7 @@ 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 SignInPage from './pages/SignInPage';
 import LandingPage from './pages/LandingPage';
 import LandingLayout from './layouts/LandingLayout';
 import DashboardLayout from './layouts/DashboardLayout';
diff --git a/samples/teamspace-react/src/components/header/PublicActions.tsx b/samples/teamspace-react/src/components/header/PublicActions.tsx
index 6bf1c009f..115b3bbd7 100644
--- a/samples/teamspace-react/src/components/header/PublicActions.tsx
+++ b/samples/teamspace-react/src/components/header/PublicActions.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import {Link} from 'react-router-dom';
-import {SignInButton} from '@asgardeo/react';
+import {Link, useNavigate} from 'react-router-dom';
+import {SignInButton, SignUpButton} from '@asgardeo/react';
 import {Button} from '../ui/button';
 
 interface PublicActionsProps {
@@ -10,19 +10,27 @@ interface PublicActionsProps {
 }
 
 export default function PublicActions({className = '', showMobileActions = false}: PublicActionsProps) {
+  const navigate = useNavigate();
+
   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>
+        <SignInButton>
+          {({isLoading}) => (
+            <Button
+              onClick={() => {
+                navigate('/signin');
+              }}
+              disabled={isLoading}
+              size="lg"
+              color="primary"
+              variant="secondary"
+            >
+              {isLoading ? 'Signing in...' : 'Sign In'}
+            </Button>
+          )}
+        </SignInButton>
       </div>
     );
   }
@@ -31,15 +39,21 @@ export default function PublicActions({className = '', showMobileActions = false
     <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>
+        <SignInButton>
+          {({isLoading}) => (
+            <Button
+              onClick={() => {
+                navigate('/signin');
+              }}
+              disabled={isLoading}
+              size="lg"
+              color="primary"
+              variant="secondary"
+            >
+              {isLoading ? 'Signing in...' : 'Sign In'}
+            </Button>
+          )}
+        </SignInButton>
       </div>
 
       {/* Mobile CTA - shown in mobile menu */}
diff --git a/samples/teamspace-react/src/pages/LandingPage.tsx b/samples/teamspace-react/src/pages/LandingPage.tsx
index aa6be30e6..ff0c7b583 100644
--- a/samples/teamspace-react/src/pages/LandingPage.tsx
+++ b/samples/teamspace-react/src/pages/LandingPage.tsx
@@ -17,6 +17,7 @@ import {
   Linkedin,
   Mail,
 } from 'lucide-react';
+import {SignUpButton} from '@asgardeo/react';
 
 export default function LandingPage() {
   const features = [
@@ -347,17 +348,20 @@ export default function LandingPage() {
                     </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>
+                <SignUpButton>
+                  {isLoading => (
+                    <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'
+                      }`}
+                    >
+                      {isLoading ? 'Loading...' : plan.cta}
+                    </Link>
+                  )}
+                </SignUpButton>
               </div>
             ))}
           </div>
diff --git a/samples/teamspace-react/src/pages/SignIn.tsx b/samples/teamspace-react/src/pages/SignInPage.tsx
similarity index 100%
rename from samples/teamspace-react/src/pages/SignIn.tsx
rename to samples/teamspace-react/src/pages/SignInPage.tsx

From a859677e3f9d4c4ac39aa9118229723003c1d56e Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 11:36:08 +0530
Subject: [PATCH 31/96] feat(react): enable validation on change in BaseSignUp
 component and update useForm hook for improved form handling

---
 .../presentation/SignUp/BaseSignUp.tsx        |   2 +-
 packages/react/src/hooks/useForm.ts           | 240 +++++++++---------
 2 files changed, 125 insertions(+), 117 deletions(-)

diff --git a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
index d2132e938..66369055a 100644
--- a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
+++ b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
@@ -232,7 +232,7 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
     initialValues: {},
     fields: formFields,
     validateOnBlur: true,
-    validateOnChange: false,
+    validateOnChange: true,
     requiredMessage: t('field.required'),
   });
 
diff --git a/packages/react/src/hooks/useForm.ts b/packages/react/src/hooks/useForm.ts
index 608c2c784..8cf685092 100644
--- a/packages/react/src/hooks/useForm.ts
+++ b/packages/react/src/hooks/useForm.ts
@@ -22,9 +22,9 @@ import {useState, useCallback} from 'react';
  * Generic form field configuration
  */
 export interface FormField {
+  initialValue?: string;
   name: string;
   required?: boolean;
-  initialValue?: string;
   validator?: (value: string) => string | null;
 }
 
@@ -32,38 +32,38 @@ export interface FormField {
  * Form validation result
  */
 export interface ValidationResult {
-  isValid: boolean;
   errors: Record<string, string>;
+  isValid: boolean;
 }
 
 /**
  * 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
+   * Initial form values
    */
-  validator?: (values: T) => Record<string, string>;
+  initialValues?: Partial<T>;
   /**
-   * Whether to validate on change (default: false)
+   * Custom required field validation message
    */
-  validateOnChange?: boolean;
+  requiredMessage?: string;
   /**
    * Whether to validate on blur (default: true)
    */
   validateOnBlur?: boolean;
   /**
-   * Custom required field validation message
+   * Whether to validate on change (default: false)
    */
-  requiredMessage?: string;
+  validateOnChange?: boolean;
+  /**
+   * Global form validator function
+   */
+  validator?: (values: T) => Record<string, string>;
 }
 
 /**
@@ -71,85 +71,85 @@ export interface UseFormConfig<T extends Record<string, string>> {
  */
 export interface UseFormReturn<T extends Record<string, string>> {
   /**
-   * Current form values
-   */
-  values: T;
-  /**
-   * Fields that have been touched by the user
+   * Clear all errors
    */
-  touched: Record<keyof T, boolean>;
+  clearErrors: () => void;
   /**
    * Current validation errors
    */
   errors: Record<keyof T, string>;
   /**
-   * Whether the form is currently valid
+   * Get field props for easy integration with form components
    */
-  isValid: boolean;
+  getFieldProps: (name: keyof T) => {
+    error: string | undefined;
+    name: keyof T;
+    onBlur: () => void;
+    onChange: (value: string) => void;
+    required: boolean;
+    touched: boolean;
+    value: string;
+  };
+  /**
+   * Handle form submission
+   */
+  handleSubmit: (onSubmit: (values: T) => void | Promise<void>) => (e?: React.FormEvent) => Promise<void>;
   /**
    * Whether the form has been submitted
    */
   isSubmitted: boolean;
   /**
-   * Set a single field value
+   * Whether the form is currently valid
    */
-  setValue: (name: keyof T, value: string) => void;
+  isValid: boolean;
   /**
-   * Set multiple field values
+   * Reset the form to initial values
    */
-  setValues: (values: Partial<T>) => void;
+  reset: () => void;
   /**
-   * Mark a field as touched
+   * Set a field error
    */
-  setTouched: (name: keyof T, touched?: boolean) => void;
+  setError: (name: keyof T, error: string) => void;
   /**
-   * Mark multiple fields as touched
+   * Set multiple field errors
    */
-  setTouchedFields: (touched: Partial<Record<keyof T, boolean>>) => void;
+  setErrors: (errors: Partial<Record<keyof T, string>>) => void;
   /**
-   * Mark all fields as touched
+   * Mark a field as touched
    */
-  touchAllFields: () => void;
+  setTouched: (name: keyof T, touched?: boolean) => void;
   /**
-   * Set a field error
+   * Mark multiple fields as touched
    */
-  setError: (name: keyof T, error: string) => void;
+  setTouchedFields: (touched: Partial<Record<keyof T, boolean>>) => void;
   /**
-   * Set multiple field errors
+   * Set a single field value
    */
-  setErrors: (errors: Partial<Record<keyof T, string>>) => void;
+  setValue: (name: keyof T, value: string) => void;
   /**
-   * Clear all errors
+   * Set multiple field values
    */
-  clearErrors: () => void;
+  setValues: (values: Partial<T>) => void;
   /**
-   * Validate a single field
+   * Mark all fields as touched
    */
-  validateField: (name: keyof T) => string | null;
+  touchAllFields: () => void;
   /**
    * Validate all fields
    */
   validateForm: () => ValidationResult;
   /**
-   * Reset the form to initial values
+   * Current form values
    */
-  reset: () => void;
+  values: T;
   /**
-   * Handle form submission
+   * Validate a single field
    */
-  handleSubmit: (onSubmit: (values: T) => void | Promise<void>) => (e?: React.FormEvent) => Promise<void>;
+  validateField: (name: keyof T) => string | null;
   /**
-   * Get field props for easy integration with form components
+   * Fields that have been touched by the user
    */
-  getFieldProps: (name: keyof T) => {
-    name: keyof T;
-    value: string;
-    onChange: (value: string) => void;
-    onBlur: () => void;
-    error: string | undefined;
-    touched: boolean;
-    required: boolean;
-  };
+  touched: Record<keyof T, boolean>;
 }
 
 /**
@@ -213,9 +213,7 @@ export const useForm = <T extends Record<string, string>>(config: UseFormConfig<
 
   // Get field configuration by name
   const getFieldConfig = useCallback(
-    (name: keyof T): FormField | undefined => {
-      return fields.find(field => field.name === name);
-    },
+    (name: keyof T): FormField | undefined => fields.find(field => field.name === name),
     [fields],
   );
 
@@ -274,8 +272,8 @@ export const useForm = <T extends Record<string, string>>(config: UseFormConfig<
 
   // Set a single field value
   const setValue = useCallback(
-    (name: keyof T, value: string) => {
-      setFormValues(prev => ({
+    (name: keyof T, value: string): void => {
+      setFormValues((prev: T) => ({
         ...prev,
         [name]: value,
       }));
@@ -283,18 +281,23 @@ export const useForm = <T extends Record<string, string>>(config: UseFormConfig<
       // Validate on change if enabled
       if (validateOnChange) {
         const error = validateField(name);
-        setFormErrors(prev => ({
-          ...prev,
-          [name]: error || '',
-        }));
+        setFormErrors((prev: Record<keyof T, string>) => {
+          const newErrors: Record<keyof T, string> = {...prev};
+          if (error) {
+            newErrors[name] = error;
+          } else {
+            delete newErrors[name];
+          }
+          return newErrors;
+        });
       }
     },
     [validateField, validateOnChange],
   );
 
   // Set multiple field values
-  const setValues = useCallback((newValues: Partial<T>) => {
-    setFormValues(prev => ({
+  const setValues = useCallback((newValues: Partial<T>): void => {
+    setFormValues((prev: T) => ({
       ...prev,
       ...newValues,
     }));
@@ -302,8 +305,8 @@ export const useForm = <T extends Record<string, string>>(config: UseFormConfig<
 
   // Mark a field as touched
   const setTouched = useCallback(
-    (name: keyof T, isTouched: boolean = true) => {
-      setFormTouched(prev => ({
+    (name: keyof T, isTouched: boolean = true): void => {
+      setFormTouched((prev: Record<keyof T, boolean>) => ({
         ...prev,
         [name]: isTouched,
       }));
@@ -311,26 +314,31 @@ export const useForm = <T extends Record<string, string>>(config: UseFormConfig<
       // Validate on blur if enabled and field is touched
       if (validateOnBlur && isTouched) {
         const error = validateField(name);
-        setFormErrors(prev => ({
-          ...prev,
-          [name]: error || '',
-        }));
+        setFormErrors((prev: Record<keyof T, string>) => {
+          const newErrors: Record<keyof T, string> = {...prev};
+          if (error) {
+            newErrors[name] = error;
+          } else {
+            delete newErrors[name];
+          }
+          return newErrors;
+        });
       }
     },
     [validateField, validateOnBlur],
   );
 
   // Set multiple touched fields
-  const setTouchedFields = useCallback((touchedFields: Partial<Record<keyof T, boolean>>) => {
-    setFormTouched(prev => ({
+  const setTouchedFields = useCallback((touchedFields: Partial<Record<keyof T, boolean>>): void => {
+    setFormTouched((prev: Record<keyof T, boolean>) => ({
       ...prev,
       ...touchedFields,
     }));
   }, []);
 
   // Mark all fields as touched
-  const touchAllFields = useCallback(() => {
-    const allTouched = fields.reduce((acc, field) => {
+  const touchAllFields = useCallback((): void => {
+    const allTouched: Record<keyof T, boolean> = fields.reduce((acc: Record<keyof T, boolean>, field: FormField) => {
       acc[field.name as keyof T] = true;
       return acc;
     }, {} as Record<keyof T, boolean>);
@@ -338,33 +346,33 @@ export const useForm = <T extends Record<string, string>>(config: UseFormConfig<
     setFormTouched(allTouched);
 
     // Validate all fields
-    const validation = validateForm();
+    const validation: ValidationResult = 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 => ({
+  const setError = useCallback((name: keyof T, error: string): void => {
+    setFormErrors((prev: Record<keyof T, string>) => ({
       ...prev,
       [name]: error,
     }));
   }, []);
 
   // Set multiple field errors
-  const setErrors = useCallback((newErrors: Partial<Record<keyof T, string>>) => {
-    setFormErrors(prev => ({
+  const setErrors = useCallback((newErrors: Partial<Record<keyof T, string>>): void => {
+    setFormErrors((prev: Record<keyof T, string>) => ({
       ...prev,
       ...newErrors,
     }));
   }, []);
 
   // Clear all errors
-  const clearErrors = useCallback(() => {
+  const clearErrors = useCallback((): void => {
     setFormErrors({} as Record<keyof T, string>);
   }, []);
 
   // Reset form to initial state
-  const reset = useCallback(() => {
+  const reset = useCallback((): void => {
     setFormValues({...initialValues} as T);
     setFormTouched({} as Record<keyof T, boolean>);
     setFormErrors({} as Record<keyof T, string>);
@@ -372,63 +380,63 @@ export const useForm = <T extends Record<string, string>>(config: UseFormConfig<
   }, [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: (onSubmit: (values: T) => void | Promise<void>) => (e?: React.FormEvent) => Promise<void> =
+    useCallback(
+      (onSubmit: (values: T) => void | Promise<void>) =>
+        async (e?: React.FormEvent): Promise<void> => {
+          if (e) {
+            e.preventDefault();
+          }
+
+          setIsSubmitted(true);
+          touchAllFields();
+
+          const validation: ValidationResult = 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);
+      const fieldConfig: FormField | undefined = 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,
+        name,
+        onBlur: (): void => setTouched(name, true),
+        onChange: (value: string): void => setValue(name, value),
         required: fieldConfig?.required || false,
+        touched: touched[name] || false,
+        value: values[name] || '',
       };
     },
     [values, errors, touched, setValue, setTouched, getFieldConfig],
   );
 
   return {
-    values,
-    touched,
+    clearErrors,
     errors,
-    isValid,
+    getFieldProps,
+    handleSubmit,
     isSubmitted,
-    setValue,
-    setValues,
+    isValid,
+    reset,
+    setError,
+    setErrors,
     setTouched,
     setTouchedFields,
+    setValue,
+    setValues,
     touchAllFields,
-    setError,
-    setErrors,
-    clearErrors,
+    touched,
     validateField,
     validateForm,
-    reset,
-    handleSubmit,
-    getFieldProps,
+    values,
   };
 };
 

From 1f479440086fa8768e26b38b9abf48779d67d809 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 11:40:57 +0530
Subject: [PATCH 32/96] feat(react): filter out empty or undefined input values
 in BaseSignUp component before submission

---
 .../presentation/SignUp/BaseSignUp.tsx          | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
index 66369055a..91172d2ab 100644
--- a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
+++ b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
@@ -293,11 +293,22 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
     setError(null);
 
     try {
+      // Filter out empty or undefined input values
+      const filteredInputs: Record<string, any> = {};
+      if (data) {
+        Object.entries(data).forEach(([key, value]) => {
+          if (value !== null && value !== undefined && value !== '') {
+            filteredInputs[key] = value;
+          }
+        });
+      }
+
       const payload: EmbeddedFlowExecuteRequestPayload = {
-        flowType: currentFlow.data ? (currentFlow.data as any) : undefined,
-        inputs: data || {},
+        ...(currentFlow.flowId && {flowId: currentFlow.flowId}),
+        flowType: (currentFlow as any).flowType || 'REGISTRATION',
+        inputs: filteredInputs,
         actionId: component.id,
-      };
+      } as any;
 
       const response = await onSubmit(payload);
       onFlowChange?.(response);

From bd65662820d9ee2f2cca5affc51b1f328d7a8c23 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 12:05:13 +0530
Subject: [PATCH 33/96] chore(react): update documentation comments in SignUp
 and BaseSignUp components for clarity

---
 .../javascript/src/models/embedded-flow.ts    | 20 ++++++------
 .../presentation/SignUp/BaseSignUp.tsx        | 28 ++++++++--------
 .../components/presentation/SignUp/SignUp.tsx | 32 ++++++++++++-------
 3 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/packages/javascript/src/models/embedded-flow.ts b/packages/javascript/src/models/embedded-flow.ts
index 639600770..64d67a9dc 100644
--- a/packages/javascript/src/models/embedded-flow.ts
+++ b/packages/javascript/src/models/embedded-flow.ts
@@ -27,10 +27,10 @@ export interface EmbeddedFlowExecuteRequestPayload {
 }
 
 export interface EmbeddedFlowExecuteResponse {
+  data: EmbeddedSignUpFlowData;
   flowId: string;
   flowStatus: EmbeddedFlowStatus;
   type: EmbeddedFlowResponseType;
-  data: EmbeddedSignUpFlowData;
 }
 
 export enum EmbeddedFlowStatus {
@@ -39,29 +39,31 @@ export enum EmbeddedFlowStatus {
 }
 
 export enum EmbeddedFlowResponseType {
+  Redirection = 'REDIRECTION',
   View = 'VIEW',
 }
 
 export interface EmbeddedSignUpFlowData {
-  components: EmbeddedFlowComponent[];
+  components?: EmbeddedFlowComponent[];
+  redirectURL?: string;
 }
 
 export interface EmbeddedFlowComponent {
+  components: EmbeddedFlowComponent[];
+  config: Record<string, any>;
   id: string;
   type: EmbeddedFlowComponentType;
   variant?: string;
-  components: EmbeddedFlowComponent[];
-  config: Record<string, any>;
 }
 
 export enum EmbeddedFlowComponentType {
-  Typography = 'TYPOGRAPHY',
-  Form = 'FORM',
   Button = 'BUTTON',
-  Input = 'INPUT',
-  Select = 'SELECT',
   Checkbox = 'CHECKBOX',
-  Radio = 'RADIO',
   Divider = 'DIVIDER',
+  Form = 'FORM',
   Image = 'IMAGE',
+  Input = 'INPUT',
+  Radio = 'RADIO',
+  Select = 'SELECT',
+  Typography = 'TYPOGRAPHY',
 }
diff --git a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
index 91172d2ab..37dbf71f8 100644
--- a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
+++ b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
@@ -98,10 +98,11 @@ export interface BaseSignUpProps {
   onSubmit: (payload: EmbeddedFlowExecuteRequestPayload) => Promise<EmbeddedFlowExecuteResponse>;
 
   /**
-   * Callback function called when sign-up is successful.
-   * @param response - The sign-up response data returned upon successful completion.
+   * Callback function called when the sign-up flow completes and requires redirection.
+   * This allows platform-specific handling of redirects (e.g., Next.js router.push).
+   * @param response - The response from the sign-up flow containing the redirect URL, etc.
    */
-  onSuccess?: (response: EmbeddedFlowExecuteResponse) => void;
+  onComplete?: (response: EmbeddedFlowExecuteResponse) => void;
 
   /**
    * Size variant for the component.
@@ -135,10 +136,13 @@ export interface BaseSignUpProps {
  *       }}
  *       onSuccess={(response) => {
  *         console.log('Success:', response);
- *       }}
- *       onError={(error) => {
+ *       }}       *       onError={(error) => {
  *         console.error('Error:', error);
  *       }}
+ *       onComplete={(redirectUrl) => {
+ *         // Platform-specific redirect handling (e.g., Next.js router.push)
+ *         router.push(redirectUrl); // or window.location.href = redirectUrl
+ *       }}
  *       className="max-w-md mx-auto"
  *     />
  *   );
@@ -158,9 +162,9 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
   afterSignUpUrl,
   onInitialize,
   onSubmit,
-  onSuccess,
   onError,
   onFlowChange,
+  onComplete,
   className = '',
   inputClassName = '',
   buttonClassName = '',
@@ -314,11 +318,8 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
       onFlowChange?.(response);
 
       if (response.flowStatus === EmbeddedFlowStatus.Complete) {
-        onSuccess?.(response);
+        onComplete?.(response);
 
-        if (afterSignUpUrl) {
-          window.location.href = afterSignUpUrl;
-        }
         return;
       }
 
@@ -424,11 +425,8 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
           onFlowChange?.(response);
 
           if (response.flowStatus === EmbeddedFlowStatus.Complete) {
-            onSuccess?.(response);
+            onComplete?.(response);
 
-            if (afterSignUpUrl) {
-              window.location.href = afterSignUpUrl;
-            }
             return;
           }
 
@@ -450,7 +448,7 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
     isInitialized,
     isFlowInitialized,
     onInitialize,
-    onSuccess,
+    onComplete,
     onError,
     onFlowChange,
     setupFormFields,
diff --git a/packages/react/src/components/presentation/SignUp/SignUp.tsx b/packages/react/src/components/presentation/SignUp/SignUp.tsx
index 26c025d2a..90f9e4320 100644
--- a/packages/react/src/components/presentation/SignUp/SignUp.tsx
+++ b/packages/react/src/components/presentation/SignUp/SignUp.tsx
@@ -16,7 +16,12 @@
  * under the License.
  */
 
-import {EmbeddedFlowExecuteRequestPayload, EmbeddedFlowExecuteResponse, EmbeddedFlowType} from '@asgardeo/browser';
+import {
+  EmbeddedFlowExecuteRequestPayload,
+  EmbeddedFlowExecuteResponse,
+  EmbeddedFlowResponseType,
+  EmbeddedFlowType,
+} from '@asgardeo/browser';
 import {FC} from 'react';
 import BaseSignUp from './BaseSignUp';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
@@ -42,10 +47,11 @@ export interface SignUpProps {
   onError?: (error: Error) => void;
 
   /**
-   * Callback function called when sign-up is successful.
-   * @param response - The sign-up response data returned upon successful completion.
+   * Callback function called when the sign-up flow completes and requires redirection.
+   * This allows platform-specific handling of redirects (e.g., Next.js router.push).
+   * @param response - The response from the sign-up flow containing the redirect URL, etc.
    */
-  onSuccess?: (response: EmbeddedFlowExecuteResponse) => void;
+  onComplete?: (response: EmbeddedFlowExecuteResponse) => void;
 
   /**
    * Size variant for the component.
@@ -76,6 +82,10 @@ export interface SignUpProps {
  *       onError={(error) => {
  *         console.error('Sign-up failed:', error);
  *       }}
+ *       onComplete={(redirectUrl) => {
+ *         // Platform-specific redirect handling (e.g., Next.js router.push)
+ *         router.push(redirectUrl); // or window.location.href = redirectUrl
+ *       }}
  *       size="medium"
  *       variant="outlined"
  *       afterSignUpUrl="/welcome"
@@ -89,8 +99,8 @@ const SignUp: FC<SignUpProps> = ({
   size = 'medium',
   variant = 'default',
   afterSignUpUrl,
-  onSuccess,
   onError,
+  onComplete,
 }) => {
   const {signUp, isInitialized} = useAsgardeo();
 
@@ -113,13 +123,11 @@ const SignUp: FC<SignUpProps> = ({
   /**
    * Handle successful sign-up and redirect.
    */
-  const handleSuccess = (response: EmbeddedFlowExecuteResponse) => {
-    // Call the provided onSuccess callback first
-    onSuccess?.(response);
+  const handleComplete = (response: EmbeddedFlowExecuteResponse) => {
+    onComplete?.(response);
 
-    // Handle redirect if afterSignUpUrl is provided
-    if (afterSignUpUrl) {
-      window.location.href = afterSignUpUrl;
+    if (response?.type === EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL) {
+      window.location.href = response.data.redirectURL;
     }
   };
 
@@ -128,8 +136,8 @@ const SignUp: FC<SignUpProps> = ({
       afterSignUpUrl={afterSignUpUrl}
       onInitialize={handleInitialize}
       onSubmit={handleOnSubmit}
-      onSuccess={handleSuccess}
       onError={onError}
+      onComplete={handleComplete}
       className={className}
       size={size}
       variant={variant}

From a47c831343a63819df67b36e52f0ae7a6a2d6900 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 12:20:47 +0530
Subject: [PATCH 34/96] chore(react): remove unused SignUpButton import in
 PublicActions component

---
 .../teamspace-react/src/components/header/PublicActions.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/samples/teamspace-react/src/components/header/PublicActions.tsx b/samples/teamspace-react/src/components/header/PublicActions.tsx
index 115b3bbd7..bb005b6ba 100644
--- a/samples/teamspace-react/src/components/header/PublicActions.tsx
+++ b/samples/teamspace-react/src/components/header/PublicActions.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import {Link, useNavigate} from 'react-router-dom';
-import {SignInButton, SignUpButton} from '@asgardeo/react';
+import {useNavigate} from 'react-router-dom';
+import {SignInButton} from '@asgardeo/react';
 import {Button} from '../ui/button';
 
 interface PublicActionsProps {

From b1ec9c024b2ead2c00b88cc254d0a3784686475e Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 13:16:36 +0530
Subject: [PATCH 35/96] feat(react): add X icon component and integrate it into
 Popover for close functionality

---
 .../src/components/primitives/Icons/X.tsx     | 42 +++++++++++++++++++
 .../components/primitives/Popover/Popover.tsx |  5 ++-
 packages/react/src/index.ts                   |  6 +++
 3 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 packages/react/src/components/primitives/Icons/X.tsx

diff --git a/packages/react/src/components/primitives/Icons/X.tsx b/packages/react/src/components/primitives/Icons/X.tsx
new file mode 100644
index 000000000..e5d154123
--- /dev/null
+++ b/packages/react/src/components/primitives/Icons/X.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';
+
+/**
+ * X (close) icon component.
+ */
+const X: 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="M18 6 6 18" />
+    <path d="m6 6 12 12" />
+  </svg>
+);
+
+export default X;
diff --git a/packages/react/src/components/primitives/Popover/Popover.tsx b/packages/react/src/components/primitives/Popover/Popover.tsx
index 0b717f6c0..36ae12f43 100644
--- a/packages/react/src/components/primitives/Popover/Popover.tsx
+++ b/packages/react/src/components/primitives/Popover/Popover.tsx
@@ -39,6 +39,7 @@ import useTheme from '../../../contexts/Theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
 import Button from '../Button/Button';
+import {X} from '../Icons';
 
 const useStyles = () => {
   const {theme, colorScheme} = useTheme();
@@ -400,7 +401,7 @@ export const PopoverHeading = React.forwardRef<HTMLHeadingElement, React.HTMLPro
           {children}
         </h2>
         <Button color="tertiary" variant="text" size="small" onClick={() => context.setOpen(false)} aria-label="Close">
-          ×
+          <X width={16} height={16} />
         </Button>
       </div>
     );
@@ -424,7 +425,7 @@ export const DialogHeading = React.forwardRef<HTMLHeadingElement, React.HTMLProp
           {children}
         </h2>
         <Button color="tertiary" variant="text" size="small" onClick={() => context.setOpen(false)} aria-label="Close">
-          ×
+          <X width={16} height={16} />
         </Button>
       </div>
     );
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 0c00aac73..6f0fb1a46 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -94,6 +94,12 @@ export * from './components/control/SignedIn';
 export {default as SignedOut} from './components/control/SignedOut';
 export * from './components/control/SignedOut';
 
+export {default as Loading} from './components/control/Loading';
+export * from './components/control/Loading';
+
+export {default as Loaded} from './components/control/Loaded';
+export * from './components/control/Loaded';
+
 export {default as BaseSignIn} from './components/presentation/SignIn/BaseSignIn';
 export * from './components/presentation/SignIn/BaseSignIn';
 

From 2fee1d0225ba605b41dbf29ff532a12183c59afe Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 13:16:47 +0530
Subject: [PATCH 36/96] feat(react): add Loaded and Loading components for
 handling loading states; update GoogleButton variant to solid; enhance
 DividerProps interface; add User and X icons to exports

---
 .../react/src/components/control/Loaded.tsx   | 60 +++++++++++++++++++
 .../react/src/components/control/Loading.tsx  | 60 +++++++++++++++++++
 .../SignIn/options/GoogleButton.tsx           |  4 +-
 .../SignUp/options/GoogleButton.tsx           |  3 +-
 .../components/primitives/Divider/Divider.tsx | 20 +++----
 .../src/components/primitives/Icons/index.ts  | 27 +++++++++
 6 files changed, 161 insertions(+), 13 deletions(-)
 create mode 100644 packages/react/src/components/control/Loaded.tsx
 create mode 100644 packages/react/src/components/control/Loading.tsx
 create mode 100644 packages/react/src/components/primitives/Icons/index.ts

diff --git a/packages/react/src/components/control/Loaded.tsx b/packages/react/src/components/control/Loaded.tsx
new file mode 100644
index 000000000..d7e7406f6
--- /dev/null
+++ b/packages/react/src/components/control/Loaded.tsx
@@ -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 {FC, PropsWithChildren, ReactNode} from 'react';
+import useAsgardeo from '../../contexts/Asgardeo/useAsgardeo';
+
+/**
+ * Props for the Loaded component.
+ */
+export interface LoadedProps {
+  /**
+   * Content to show when the user is not signed in.
+   */
+  fallback?: ReactNode;
+}
+
+/**
+ * A component that only renders its children when the Asgardeo has finished Loading.
+ *
+ * @example
+ * ```tsx
+ * import { Loaded } from '@asgardeo/auth-react';
+ *
+ * const App = () => {
+ *   return (
+ *     <Loaded fallback={<p>Loading...</p>}>
+ *       <p>Loaded</p>
+ *     </Loaded>
+ *   );
+ * }
+ * ```
+ */
+const Loaded: FC<PropsWithChildren<LoadedProps>> = ({children, fallback = null}: PropsWithChildren<LoadedProps>) => {
+  const {isLoading} = useAsgardeo();
+
+  if (isLoading) {
+    return <>{fallback}</>;
+  }
+
+  return <>{children}</>;
+};
+
+Loaded.displayName = 'Loaded';
+
+export default Loaded;
diff --git a/packages/react/src/components/control/Loading.tsx b/packages/react/src/components/control/Loading.tsx
new file mode 100644
index 000000000..31374c3d0
--- /dev/null
+++ b/packages/react/src/components/control/Loading.tsx
@@ -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 {FC, PropsWithChildren, ReactNode} from 'react';
+import useAsgardeo from '../../contexts/Asgardeo/useAsgardeo';
+
+/**
+ * Props for the Loading component.
+ */
+export interface LoadingProps {
+  /**
+   * Content to show when the user is not signed in.
+   */
+  fallback?: ReactNode;
+}
+
+/**
+ * A component that only renders its children when the Asgardeo is loading.
+ *
+ * @example
+ * ```tsx
+ * import { Loading } from '@asgardeo/auth-react';
+ *
+ * const App = () => {
+ *   return (
+ *     <Loading fallback={<p>Finished Loading...</p>}>
+ *       <p>Loading...</p>
+ *     </Loading>
+ *   );
+ * }
+ * ```
+ */
+const Loading: FC<PropsWithChildren<LoadingProps>> = ({children, fallback = null}: PropsWithChildren<LoadingProps>) => {
+  const {isLoading} = useAsgardeo();
+
+  if (!isLoading) {
+    return <>{fallback}</>;
+  }
+
+  return <>{children}</>;
+};
+
+Loading.displayName = 'Loading';
+
+export default Loading;
diff --git a/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx b/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx
index e242e3423..ca4f60d0c 100644
--- a/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/GoogleButton.tsx
@@ -17,9 +17,9 @@
  */
 
 import {FC} from 'react';
-import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
 import useTranslation from '../../../../hooks/useTranslation';
+import Button from '../../../primitives/Button/Button';
 
 /**
  * Google Sign-In Button Component.
@@ -43,7 +43,7 @@ const GoogleButton: FC<BaseSignInOptionProps> = ({
   return (
     <Button
       type="button"
-      variant="outline"
+      variant="solid"
       color="secondary"
       fullWidth
       disabled={isLoading}
diff --git a/packages/react/src/components/presentation/SignUp/options/GoogleButton.tsx b/packages/react/src/components/presentation/SignUp/options/GoogleButton.tsx
index c0390083a..4bf7dbf85 100644
--- a/packages/react/src/components/presentation/SignUp/options/GoogleButton.tsx
+++ b/packages/react/src/components/presentation/SignUp/options/GoogleButton.tsx
@@ -47,7 +47,8 @@ const GoogleButton: FC<BaseSignUpOptionProps> = ({
   return (
     <Button
       type="button"
-      variant="outline"
+      variant="solid"
+      color="secondary"
       size={size}
       disabled={isLoading}
       onClick={handleClick}
diff --git a/packages/react/src/components/primitives/Divider/Divider.tsx b/packages/react/src/components/primitives/Divider/Divider.tsx
index 3c955f4e9..25c2e5172 100644
--- a/packages/react/src/components/primitives/Divider/Divider.tsx
+++ b/packages/react/src/components/primitives/Divider/Divider.tsx
@@ -16,9 +16,9 @@
  * under the License.
  */
 
-import {FC, HTMLAttributes, useMemo} from 'react';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import {clsx} from 'clsx';
+import {FC, HTMLAttributes, useMemo} from 'react';
 import useTheme from '../../../contexts/Theme/useTheme';
 import Typography from '../Typography/Typography';
 
@@ -27,24 +27,24 @@ export type DividerVariant = 'solid' | 'dashed' | 'dotted';
 
 export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * The orientation of the divider
+   * Text to display in the center of the divider
    */
-  orientation?: DividerOrientation;
+  children?: React.ReactNode;
 
   /**
-   * The variant style of the divider
+   * Custom color for the divider
    */
-  variant?: DividerVariant;
+  color?: string;
 
   /**
-   * Text to display in the center of the divider
+   * The orientation of the divider
    */
-  children?: React.ReactNode;
+  orientation?: DividerOrientation;
 
   /**
-   * Custom color for the divider
+   * The variant style of the divider
    */
-  color?: string;
+  variant?: DividerVariant;
 }
 
 const useStyles = (orientation: DividerOrientation, variant: DividerVariant, color?: string, hasChildren?: boolean) => {
@@ -84,7 +84,7 @@ const useStyles = (orientation: DividerOrientation, variant: DividerVariant, col
           borderTop: `1px ${borderStyle} ${baseColor}`,
         },
         text: {
-          backgroundColor: 'var(--background-color, #fff)',
+          backgroundColor: theme.colors.background.surface,
           padding: `0 ${theme.spacing.unit}px`,
           whiteSpace: 'nowrap' as const,
         },
diff --git a/packages/react/src/components/primitives/Icons/index.ts b/packages/react/src/components/primitives/Icons/index.ts
new file mode 100644
index 000000000..619ec70d6
--- /dev/null
+++ b/packages/react/src/components/primitives/Icons/index.ts
@@ -0,0 +1,27 @@
+/**
+ * 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 CircleAlert} from './CircleAlert';
+export {default as CircleCheck} from './CircleCheck';
+export {default as Eye} from './Eye';
+export {default as EyeOff} from './EyeOff';
+export {default as Info} from './Info';
+export {default as LogOut} from './LogOut';
+export {default as TriangleAlert} from './TriangleAlert';
+export {default as User} from './User';
+export {default as X} from './X';

From b0dfd0b55d0521395f37ec513195a088059a5336 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 13:22:59 +0530
Subject: [PATCH 37/96] feat(react): refactor UserDropdown and UserProfile
 components to streamline profile display; replace Dialog with UserProfile in
 popup mode and enhance props for better state management

---
 .../UserDropdown/UserDropdown.tsx             | 21 +----
 .../UserProfile/BaseUserProfile.tsx           |  7 +-
 .../presentation/UserProfile/UserProfile.tsx  |  8 +-
 .../components/primitives/Popover/Popover.tsx | 76 +++++++++----------
 4 files changed, 47 insertions(+), 65 deletions(-)

diff --git a/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx b/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx
index 3f8f898d2..611762a04 100644
--- a/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx
+++ b/packages/react/src/components/presentation/UserDropdown/UserDropdown.tsx
@@ -19,7 +19,6 @@
 import {FC, ReactElement, ReactNode, useState} from 'react';
 import BaseUserDropdown, {BaseUserDropdownProps} from './BaseUserDropdown';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
-import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Popover';
 import UserProfile from '../UserProfile/UserProfile';
 
 /**
@@ -146,14 +145,7 @@ const UserDropdown: FC<UserDropdownProps> = ({
     return (
       <>
         {children(renderProps)}
-        {isProfileOpen && (
-          <Dialog open={isProfileOpen} onOpenChange={setIsProfileOpen}>
-            <DialogContent>
-              <DialogHeading>User Profile</DialogHeading>
-              <UserProfile />
-            </DialogContent>
-          </Dialog>
-        )}
+        <UserProfile mode="popup" open={isProfileOpen} onOpenChange={setIsProfileOpen} />
       </>
     );
   }
@@ -176,14 +168,7 @@ const UserDropdown: FC<UserDropdownProps> = ({
           />
         )}
         {/* Note: renderDropdown would need BaseUserDropdown modifications to implement properly */}
-        {isProfileOpen && (
-          <Dialog open={isProfileOpen} onOpenChange={setIsProfileOpen}>
-            <DialogContent>
-              <DialogHeading>User Profile</DialogHeading>
-              <UserProfile />
-            </DialogContent>
-          </Dialog>
-        )}
+        <UserProfile mode="popup" open={isProfileOpen} onOpenChange={setIsProfileOpen} />
       </>
     );
   }
@@ -198,7 +183,7 @@ const UserDropdown: FC<UserDropdownProps> = ({
         onSignOut={handleSignOut}
         {...rest}
       />
-      {isProfileOpen && <UserProfile mode="popup" />}
+      {isProfileOpen && <UserProfile mode="popup" open={isProfileOpen} onOpenChange={setIsProfileOpen} />}
     </>
   );
 };
diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index af8e73927..b4f32ca96 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -65,8 +65,10 @@ export interface BaseUserProfileProps {
   flattenedProfile?: User;
   mode?: 'inline' | 'popup';
   onChange?: (field: string, value: any) => void;
+  onOpenChange?: (open: boolean) => void;
   onSubmit?: (data: any) => void;
   onUpdate?: (payload: any) => Promise<void>;
+  open?: boolean;
   profile?: User;
   saveButtonText?: string;
   schemas?: Schema[];
@@ -85,13 +87,14 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
   attributeMapping = {},
   editable = true,
   onChange,
+  onOpenChange,
   onSubmit,
   onUpdate,
+  open = false,
   saveButtonText = 'Save Changes',
   cancelButtonText = 'Cancel',
 }): ReactElement => {
   const {theme} = useTheme();
-  const [isOpen, setIsOpen] = useState(mode === 'popup');
   const [editedUser, setEditedUser] = useState(flattenedProfile || profile);
   const [editingFields, setEditingFields] = useState<Record<string, boolean>>({});
   const triggerRef = useRef<HTMLButtonElement>(null);
@@ -501,7 +504,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
 
   if (mode === 'popup') {
     return (
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <Dialog open={open} onOpenChange={onOpenChange}>
         <DialogContent>
           <DialogHeading>{title}</DialogHeading>
           <div style={{padding: '1rem'}}>{profileContent}</div>
diff --git a/packages/react/src/components/presentation/UserProfile/UserProfile.tsx b/packages/react/src/components/presentation/UserProfile/UserProfile.tsx
index 2a420ef00..eec0d1c18 100644
--- a/packages/react/src/components/presentation/UserProfile/UserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/UserProfile.tsx
@@ -17,17 +17,17 @@
  */
 
 import {FC, ReactElement} from 'react';
-import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
-import useUser from '../../../contexts/User/useUser';
 import BaseUserProfile, {BaseUserProfileProps} from './BaseUserProfile';
+import getMeProfile from '../../../api/scim2/getMeProfile';
 import updateMeProfile from '../../../api/scim2/updateMeProfile';
-import getMeProfile from '../../..//api/scim2/getMeProfile';
+import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
+import useUser from '../../../contexts/User/useUser';
 
 /**
  * Props for the UserProfile component.
  * Extends BaseUserProfileProps but makes the user prop optional since it will be obtained from useAsgardeo
  */
-export type UserProfileProps = Omit<BaseUserProfileProps, 'user'>;
+export type UserProfileProps = Omit<BaseUserProfileProps, 'user' | 'profile' | 'flattenedProfile' | 'schemas'>;
 
 /**
  * UserProfile component displays the authenticated user's profile information in a
diff --git a/packages/react/src/components/primitives/Popover/Popover.tsx b/packages/react/src/components/primitives/Popover/Popover.tsx
index 36ae12f43..fe1753959 100644
--- a/packages/react/src/components/primitives/Popover/Popover.tsx
+++ b/packages/react/src/components/primitives/Popover/Popover.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import React, {CSSProperties, useMemo} from 'react';
+import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import {
   useFloating,
   autoUpdate,
@@ -35,9 +35,9 @@ import {
   UseFloatingReturn,
   UseInteractionsReturn,
 } from '@floating-ui/react';
-import useTheme from '../../../contexts/Theme/useTheme';
-import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
+import React, {CSSProperties, useMemo} from 'react';
+import useTheme from '../../../contexts/Theme/useTheme';
 import Button from '../Button/Button';
 import {X} from '../Icons';
 
@@ -97,18 +97,18 @@ const useStyles = () => {
 // Modal Dialog hook and components
 interface DialogOptions {
   initialOpen?: boolean;
-  open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  open?: boolean;
 }
 
 // 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>>;
+  labelId: string | undefined;
+  open: boolean;
   setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setOpen: (open: boolean) => void;
 }
 
 export function useDialog({
@@ -128,7 +128,7 @@ export function useDialog({
     onOpenChange: setOpen,
   });
 
-  const context = data.context;
+  const {context} = data;
 
   const click = useClick(context, {
     enabled: controlledOpen == null,
@@ -156,20 +156,20 @@ export function useDialog({
 // Dropdown Popover hook
 interface PopoverOptions {
   initialOpen?: boolean;
-  open?: boolean;
+  offset?: number;
   onOpenChange?: (open: boolean) => void;
+  open?: boolean;
   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>>;
+  labelId: string | undefined;
+  open: boolean;
   setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setOpen: (open: boolean) => void;
 }
 
 export function usePopover({
@@ -194,7 +194,7 @@ export function usePopover({
     placement,
   });
 
-  const context = data.context;
+  const {context} = data;
 
   const click = useClick(context);
   const dismiss = useDismiss(context, {outsidePressEvent: 'mousedown'});
@@ -220,15 +220,15 @@ export function usePopover({
 // Context types
 type DialogContextType =
   | (DialogHookReturn & {
-      setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
       setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+      setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
     })
   | null;
 
 type PopoverContextType =
   | (PopoverHookReturn & {
-      setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
       setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+      setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
     })
   | null;
 
@@ -258,12 +258,12 @@ export function Dialog({children, ...options}: {children: React.ReactNode} & Dia
 }
 
 interface DialogTriggerProps {
-  children: React.ReactNode;
   asChild?: boolean;
+  children: React.ReactNode;
 }
 
 export const DialogTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement> & DialogTriggerProps>(
-  function DialogTrigger({children, asChild = false, ...props}, propRef) {
+  ({children, asChild = false, ...props}, propRef) => {
     const context = useDialogContext();
     const childrenRef = (children as any).ref;
     const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
@@ -288,10 +288,7 @@ export const DialogTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLE
   },
 );
 
-export const DialogContent = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(function DialogContent(
-  props,
-  propRef,
-) {
+export const DialogContent = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>((props, propRef) => {
   const {context: floatingContext, ...context} = useDialogContext();
   const ref = useMergeRefs([context.refs.setFloating, propRef]);
   const styles = useStyles();
@@ -325,12 +322,12 @@ export function Popover({children, ...options}: {children: React.ReactNode} & Po
 }
 
 interface PopoverTriggerProps {
-  children: React.ReactNode;
   asChild?: boolean;
+  children: React.ReactNode;
 }
 
 export const PopoverTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement> & PopoverTriggerProps>(
-  function PopoverTrigger({children, asChild = false, ...props}, propRef) {
+  ({children, asChild = false, ...props}, propRef) => {
     const context = usePopoverContext();
     const childrenRef = (children as any).ref;
     const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
@@ -355,10 +352,7 @@ export const PopoverTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTML
   },
 );
 
-export const PopoverContent = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(function PopoverContent(
-  props,
-  propRef,
-) {
+export const PopoverContent = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>((props, propRef) => {
   const {context: floatingContext, ...context} = usePopoverContext();
   const ref = useMergeRefs([context.refs.setFloating, propRef]);
   const styles = useStyles();
@@ -385,7 +379,7 @@ export const PopoverContent = React.forwardRef<HTMLDivElement, React.HTMLProps<H
 
 // Shared components
 export const PopoverHeading = React.forwardRef<HTMLHeadingElement, React.HTMLProps<HTMLHeadingElement>>(
-  function PopoverHeading({children, ...props}, ref) {
+  ({children, ...props}, ref) => {
     const context = usePopoverContext();
     const styles = useStyles();
     const id = useId();
@@ -409,7 +403,7 @@ export const PopoverHeading = React.forwardRef<HTMLHeadingElement, React.HTMLPro
 );
 
 export const DialogHeading = React.forwardRef<HTMLHeadingElement, React.HTMLProps<HTMLHeadingElement>>(
-  function DialogHeading({children, ...props}, ref) {
+  ({children, ...props}, ref) => {
     const context = useDialogContext();
     const styles = useStyles();
     const id = useId();
@@ -433,7 +427,7 @@ export const DialogHeading = React.forwardRef<HTMLHeadingElement, React.HTMLProp
 );
 
 export const PopoverDescription = React.forwardRef<HTMLParagraphElement, React.HTMLProps<HTMLParagraphElement>>(
-  function PopoverDescription({children, ...props}, ref) {
+  ({children, ...props}, ref) => {
     const context = usePopoverContext();
     const id = useId();
 
@@ -451,7 +445,7 @@ export const PopoverDescription = React.forwardRef<HTMLParagraphElement, React.H
 );
 
 export const DialogDescription = React.forwardRef<HTMLParagraphElement, React.HTMLProps<HTMLParagraphElement>>(
-  function DialogDescription({children, ...props}, ref) {
+  ({children, ...props}, ref) => {
     const context = useDialogContext();
     const id = useId();
 
@@ -469,14 +463,14 @@ export const DialogDescription = React.forwardRef<HTMLParagraphElement, React.HT
 );
 
 export const PopoverClose = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
-  function PopoverClose(props, ref) {
+  (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) {
+  (props, ref) => {
     const context = useDialogContext();
     return <button type="button" {...props} ref={ref} onClick={() => context.setOpen(false)} />;
   },
@@ -484,14 +478,14 @@ export const DialogClose = React.forwardRef<HTMLButtonElement, React.ButtonHTMLA
 
 // Legacy API compatibility (for existing code)
 interface LegacyPopoverProps {
-  isOpen: boolean;
   children: React.ReactNode;
-  onClose: () => void;
   className?: string;
+  isOpen: boolean;
   mode?: 'modal' | 'dropdown';
-  trigger?: HTMLElement | null;
-  placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
   offset?: number;
+  onClose: () => void;
+  placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+  trigger?: HTMLElement | null;
 }
 
 // Legacy Header component for backward compatibility
@@ -509,8 +503,8 @@ const LegacyPopoverContent: React.FC<{children: React.ReactNode}> = ({children})
 
 // Legacy component for backward compatibility
 export const LegacyPopover: React.FC<LegacyPopoverProps> & {
-  Header: typeof LegacyPopoverHeader;
   Content: typeof LegacyPopoverContent;
+  Header: typeof LegacyPopoverHeader;
 } = ({isOpen, children, onClose, className = '', mode = 'modal', trigger, placement, offset}) => {
   if (mode === 'modal') {
     return (

From 9d0ee2190ef864c4033a9f90dfb68161a433df0f Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 13:32:20 +0530
Subject: [PATCH 38/96] feat(react): enhance BaseUserProfile with dynamic field
 placeholders and improved object display; add edit functionality for empty
 fields

---
 .../UserProfile/BaseUserProfile.tsx           | 147 ++++++++++++++----
 1 file changed, 116 insertions(+), 31 deletions(-)

diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index b4f32ca96..fbb52bca3 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -121,6 +121,47 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
     }));
   }, []);
 
+  const getFieldPlaceholder = useCallback((schema: Schema): string => {
+    const {type, displayName, description, name} = schema;
+
+    // Use the best available label for the field
+    const fieldLabel = displayName || description || name || 'value';
+
+    // Generate appropriate placeholder based on field type
+    switch (type) {
+      case 'DATE_TIME':
+        return `Enter your ${fieldLabel.toLowerCase()}`;
+      case 'BOOLEAN':
+        return `Select ${fieldLabel.toLowerCase()}`;
+      case 'COMPLEX':
+        return `Enter ${fieldLabel.toLowerCase()} details`;
+      default:
+        // For STRING and other types, use generic placeholder
+        return `Enter your ${fieldLabel.toLowerCase()}`;
+    }
+  }, []);
+
+  const ObjectDisplay: FC<{data: unknown}> = ({data}) => {
+    if (!data || typeof data !== 'object') return null;
+
+    return (
+      <table style={{width: '100%', borderCollapse: 'collapse'}}>
+        <tbody>
+          {Object.entries(data).map(([key, value]) => (
+            <tr key={key} style={{borderBottom: `1px solid ${theme.colors.border}`}}>
+              <td style={{padding: `${theme.spacing.unit}px`, verticalAlign: 'top'}}>
+                <strong>{formatLabel(key)}:</strong>
+              </td>
+              <td style={{padding: `${theme.spacing.unit}px`, verticalAlign: 'top'}}>
+                {typeof value === 'object' ? <ObjectDisplay data={value} /> : String(value)}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    );
+  };
+
   function set(obj: Record<string, any>, path: string, value: any): void {
     const keys = path.split('.');
     let current = obj;
@@ -231,6 +272,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
     schema: Schema,
     isEditing: boolean,
     onEditValue?: (value: any) => void,
+    onStartEdit?: () => void,
   ): ReactElement | null => {
     if (!schema) return null;
     const {value, displayName, description, name, type, required, mutability, subAttributes} = schema;
@@ -258,14 +300,44 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
       );
     }
     if (Array.isArray(value)) {
-      const displayValue =
-        value.length > 0
-          ? value.map(item => (typeof item === 'object' ? JSON.stringify(item) : String(item))).join(', ')
-          : '-';
+      const hasValues = value.length > 0;
+      const isEditable = editable && mutability !== 'READ_ONLY';
+
+      let displayValue: string;
+      if (hasValues) {
+        displayValue = value.map(item => (typeof item === 'object' ? JSON.stringify(item) : String(item))).join(', ');
+      } else if (isEditable) {
+        displayValue = getFieldPlaceholder(schema);
+      } else {
+        displayValue = '-';
+      }
+
       return (
         <>
           <span style={styles.label}>{label}</span>
-          <div style={styles.value}>{displayValue}</div>
+          <div style={{...styles.value, fontStyle: hasValues ? 'normal' : 'italic', opacity: hasValues ? 1 : 0.7}}>
+            {!hasValues && isEditable && onStartEdit ? (
+              <button
+                onClick={onStartEdit}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  color: 'inherit',
+                  cursor: 'pointer',
+                  padding: 0,
+                  font: 'inherit',
+                  fontStyle: 'italic',
+                  textDecoration: 'underline',
+                  opacity: 0.7,
+                }}
+                title="Click to edit"
+              >
+                {displayValue}
+              </button>
+            ) : (
+              displayValue
+            )}
+          </div>
         </>
       );
     }
@@ -332,11 +404,44 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
       );
     }
     // Default: view mode
-    const displayValue = value !== undefined && value !== null && value !== '' ? String(value) : '-';
+    const hasValue = value !== undefined && value !== null && value !== '';
+    const isEditable = editable && mutability !== 'READ_ONLY';
+
+    let displayValue: string;
+    if (hasValue) {
+      displayValue = String(value);
+    } else if (isEditable) {
+      displayValue = getFieldPlaceholder(schema);
+    } else {
+      displayValue = '-';
+    }
+
     return (
       <>
         <span style={styles.label}>{label}</span>
-        <div style={styles.value}>{displayValue}</div>
+        <div style={{...styles.value, fontStyle: hasValue ? 'normal' : 'italic', opacity: hasValue ? 1 : 0.7}}>
+          {!hasValue && isEditable && onStartEdit ? (
+            <button
+              onClick={onStartEdit}
+              style={{
+                background: 'none',
+                border: 'none',
+                color: 'inherit',
+                cursor: 'pointer',
+                padding: 0,
+                font: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'underline',
+                opacity: 0.7,
+              }}
+              title="Click to edit"
+            >
+              {displayValue}
+            </button>
+          ) : (
+            displayValue
+          )}
+        </div>
       </>
     );
   };
@@ -369,7 +474,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
             const tempEditedUser = {...editedUser};
             tempEditedUser[schema.name!] = value;
             setEditedUser(tempEditedUser);
-          })}
+          }, () => toggleFieldEdit(schema.name!))}
         </div>
         {editable && schema.mutability !== 'READ_ONLY' && (
           <div
@@ -380,7 +485,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
               marginLeft: `${theme.spacing.unit}px`,
             }}
           >
-            {isFieldEditing ? (
+            {isFieldEditing && (
               <>
                 <Button size="small" color="primary" variant="solid" onClick={() => handleFieldSave(schema)}>
                   Save
@@ -394,7 +499,8 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
                   Cancel
                 </Button>
               </>
-            ) : (
+            )}
+            {!isFieldEditing && hasValue && (
               <Button
                 size="small"
                 color="tertiary"
@@ -414,27 +520,6 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
     );
   };
 
-  const ObjectDisplay: FC<{data: unknown}> = ({data}) => {
-    if (!data || typeof data !== 'object') return null;
-
-    return (
-      <table style={{width: '100%', borderCollapse: 'collapse'}}>
-        <tbody>
-          {Object.entries(data).map(([key, value]) => (
-            <tr key={key} style={{borderBottom: `1px solid ${theme.colors.border}`}}>
-              <td style={{padding: `${theme.spacing.unit}px`, verticalAlign: 'top'}}>
-                <strong>{formatLabel(key)}:</strong>
-              </td>
-              <td style={{padding: `${theme.spacing.unit}px`, verticalAlign: 'top'}}>
-                {typeof value === 'object' ? <ObjectDisplay data={value} /> : String(value)}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    );
-  };
-
   const getDisplayName = () => {
     const currentUser = flattenedProfile || profile;
     const firstName = getMappedUserProfileValue('firstName', mergedMappings, currentUser);

From 8dcb5027ddeb7b07dac7cf66ca61b7e479f2e7d9 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 13:33:42 +0530
Subject: [PATCH 39/96] feat(react): add dynamic placeholders to input fields
 in BaseUserProfile for improved user experience

---
 .../src/components/presentation/UserProfile/BaseUserProfile.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index fbb52bca3..ca81ead40 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -359,6 +359,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
         required,
         value: fieldValue,
         onChange: (e: any) => onEditValue(e.target ? e.target.value : e),
+        placeholder: getFieldPlaceholder(schema),
         style: {
           marginBottom: 0,
         },
@@ -380,6 +381,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
             <textarea
               value={fieldValue}
               onChange={e => onEditValue(e.target.value)}
+              placeholder={getFieldPlaceholder(schema)}
               required={required}
               style={{
                 ...commonProps.style,

From 8b217f34d35bc8212deded2fe6b14b46cb916d5c Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 13:43:55 +0530
Subject: [PATCH 40/96] feat(react): integrate UserProfile component into
 Profile page; refactor user context and provider for profile revalidation;
 enhance header with loading states and sign-up functionality

---
 .../UserProfile/BaseUserProfile.tsx           |  15 +-
 .../presentation/UserProfile/UserProfile.tsx  |   4 +-
 .../contexts/Asgardeo/AsgardeoProvider.tsx    |   7 +-
 .../react/src/contexts/User/UserContext.ts    |   6 +-
 .../react/src/contexts/User/UserProvider.tsx  |   7 +-
 .../teamspace-react/src/components/Header.tsx |  28 ++-
 .../src/components/header/PublicActions.tsx   |  17 +-
 .../src/components/header/UserDropdown.tsx    |   2 +-
 .../src/components/ui/button.tsx              |  54 ++---
 samples/teamspace-react/src/main.tsx          |   2 +-
 samples/teamspace-react/src/pages/Profile.tsx | 229 +-----------------
 11 files changed, 86 insertions(+), 285 deletions(-)

diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index ca81ead40..ac75081ea 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -472,11 +472,16 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
     return (
       <div style={fieldStyle}>
         <div style={{flex: 1, display: 'flex', alignItems: 'center', gap: `${theme.spacing.unit}px`}}>
-          {renderSchemaField(schema, isFieldEditing, value => {
-            const tempEditedUser = {...editedUser};
-            tempEditedUser[schema.name!] = value;
-            setEditedUser(tempEditedUser);
-          }, () => toggleFieldEdit(schema.name!))}
+          {renderSchemaField(
+            schema,
+            isFieldEditing,
+            value => {
+              const tempEditedUser = {...editedUser};
+              tempEditedUser[schema.name!] = value;
+              setEditedUser(tempEditedUser);
+            },
+            () => toggleFieldEdit(schema.name!),
+          )}
         </div>
         {editable && schema.mutability !== 'READ_ONLY' && (
           <div
diff --git a/packages/react/src/components/presentation/UserProfile/UserProfile.tsx b/packages/react/src/components/presentation/UserProfile/UserProfile.tsx
index eec0d1c18..e64deb872 100644
--- a/packages/react/src/components/presentation/UserProfile/UserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/UserProfile.tsx
@@ -54,11 +54,11 @@ export type UserProfileProps = Omit<BaseUserProfileProps, 'user' | 'profile' | '
  */
 const UserProfile: FC<UserProfileProps> = ({...rest}: UserProfileProps): ReactElement => {
   const {baseUrl} = useAsgardeo();
-  const {profile, flattenedProfile, schemas} = useUser();
+  const {profile, flattenedProfile, schemas, revalidateProfile} = useUser();
 
   const handleProfileUpdate = async (payload: any): Promise<void> => {
     await updateMeProfile({url: `${baseUrl}/scim2/Me`, payload});
-    await getMeProfile({url: `${baseUrl}/scim2/Me`});
+    await revalidateProfile();
   };
 
   return (
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index 5fe9afa07..e7b2d6efb 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -217,7 +217,12 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
       <I18nProvider preferences={preferences?.i18n}>
         <ThemeProvider theme={preferences?.theme?.overrides} defaultColorScheme={isDarkMode ? 'dark' : 'light'}>
           <FlowProvider>
-            <UserProvider profile={userProfile}>{children}</UserProvider>
+            <UserProvider
+              profile={userProfile}
+              revalidateProfile={async () => setUserProfile(await asgardeo.getUserProfile())}
+            >
+              {children}
+            </UserProvider>
           </FlowProvider>
         </ThemeProvider>
       </I18nProvider>
diff --git a/packages/react/src/contexts/User/UserContext.ts b/packages/react/src/contexts/User/UserContext.ts
index d71eeba0a..d74928bbf 100644
--- a/packages/react/src/contexts/User/UserContext.ts
+++ b/packages/react/src/contexts/User/UserContext.ts
@@ -16,16 +16,17 @@
  * under the License.
  */
 
-import {Context, createContext} from 'react';
 import {User, Schema, FlattenedSchema} from '@asgardeo/browser';
+import {Context, createContext} from 'react';
 
 /**
  * Props interface of {@link UserContext}
  */
 export type UserContextProps = {
+  flattenedProfile: User | null;
   profile: User | null;
+  revalidateProfile: () => Promise<void>;
   schemas: Schema[] | null;
-  flattenedProfile: User | null;
 };
 
 /**
@@ -35,6 +36,7 @@ const UserContext: Context<UserContextProps | null> = createContext<null | UserC
   profile: null,
   schemas: null,
   flattenedProfile: null,
+  revalidateProfile: () => null,
 });
 
 UserContext.displayName = 'UserContext';
diff --git a/packages/react/src/contexts/User/UserProvider.tsx b/packages/react/src/contexts/User/UserProvider.tsx
index 42fe86057..fa36050fe 100644
--- a/packages/react/src/contexts/User/UserProvider.tsx
+++ b/packages/react/src/contexts/User/UserProvider.tsx
@@ -16,19 +16,20 @@
  * under the License.
  */
 
-import {FC, PropsWithChildren, ReactElement, useEffect, useState, useCallback, useMemo} from 'react';
 import {UserProfile} from '@asgardeo/browser';
+import {FC, PropsWithChildren, ReactElement, useEffect, useState, useCallback, useMemo} from 'react';
 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';
+import useAsgardeo from '../Asgardeo/useAsgardeo';
 
 /**
  * Props interface of {@link UserProvider}
  */
 export interface UserProviderProps {
   profile: UserProfile;
+  revalidateProfile: () => Promise<void>;
 }
 
 /**
@@ -62,12 +63,14 @@ export interface UserProviderProps {
 const UserProvider: FC<PropsWithChildren<UserProviderProps>> = ({
   children,
   profile,
+  revalidateProfile,
 }: PropsWithChildren<UserProviderProps>): ReactElement => {
   const contextValue = useMemo(
     () => ({
       schemas: profile?.schemas,
       profile: profile?.profile,
       flattenedProfile: profile?.flattenedProfile,
+      revalidateProfile,
     }),
     [profile],
   );
diff --git a/samples/teamspace-react/src/components/Header.tsx b/samples/teamspace-react/src/components/Header.tsx
index dc61c664f..af7e42f67 100644
--- a/samples/teamspace-react/src/components/Header.tsx
+++ b/samples/teamspace-react/src/components/Header.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import {SignedIn, SignedOut} from '@asgardeo/react';
+import {SignedIn, SignedOut, Loaded} from '@asgardeo/react';
 import Logo from './header/Logo';
 import PublicNavigation from './header/PublicNavigation';
 import AuthenticatedNavigation from './header/AuthenticatedNavigation';
@@ -17,7 +17,9 @@ export default function Header() {
           <div className="flex items-center space-x-8">
             <SignedIn>
               <Logo to="/dashboard" />
-              <AuthenticatedNavigation />
+              <Loaded>
+                <AuthenticatedNavigation />
+              </Loaded>
             </SignedIn>
             <SignedOut>
               <Logo to="/" />
@@ -25,16 +27,18 @@ export default function Header() {
             </SignedOut>
           </div>
 
-          {/* Right side - Actions based on auth state */}
-          <div className="flex items-center space-x-2">
-            <SignedOut>
-              <PublicActions showMobileActions={false} />
-            </SignedOut>
-            <SignedIn>
-              <AuthenticatedActions />
-              <AuthenticatedMobileMenu />
-            </SignedIn>
-          </div>
+          <Loaded>
+            {/* Right side - Actions based on auth state */}
+            <div className="flex items-center space-x-2">
+              <SignedOut>
+                <PublicActions showMobileActions={false} />
+              </SignedOut>
+              <SignedIn>
+                <AuthenticatedActions />
+                <AuthenticatedMobileMenu />
+              </SignedIn>
+            </div>
+          </Loaded>
         </div>
       </div>
     </header>
diff --git a/samples/teamspace-react/src/components/header/PublicActions.tsx b/samples/teamspace-react/src/components/header/PublicActions.tsx
index bb005b6ba..fce6f1b13 100644
--- a/samples/teamspace-react/src/components/header/PublicActions.tsx
+++ b/samples/teamspace-react/src/components/header/PublicActions.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import {useNavigate} from 'react-router-dom';
-import {SignInButton} from '@asgardeo/react';
+import {SignInButton, SignUpButton} from '@asgardeo/react';
 import {Button} from '../ui/button';
 
 interface PublicActionsProps {
@@ -54,6 +54,21 @@ export default function PublicActions({className = '', showMobileActions = false
             </Button>
           )}
         </SignInButton>
+        <SignUpButton>
+          {({isLoading}) => (
+            <Button
+              onClick={() => {
+                navigate('/signup');
+              }}
+              disabled={isLoading}
+              size="lg"
+              color="primary"
+              variant="default"
+            >
+              {isLoading ? 'Signing up...' : 'Sign Up'}
+            </Button>
+          )}
+        </SignUpButton>
       </div>
 
       {/* Mobile CTA - shown in mobile menu */}
diff --git a/samples/teamspace-react/src/components/header/UserDropdown.tsx b/samples/teamspace-react/src/components/header/UserDropdown.tsx
index 50b7a314a..179a2b806 100644
--- a/samples/teamspace-react/src/components/header/UserDropdown.tsx
+++ b/samples/teamspace-react/src/components/header/UserDropdown.tsx
@@ -85,7 +85,7 @@ export default function UserDropdown({mode = 'default'}: UserDropdownProps) {
               )}
             </div>
 
-            {showUserProfile && <UserProfile mode="popup" />}
+            {showUserProfile && <UserProfile mode="popup" open={showUserProfile} onOpenChange={setShowUserProfile} />}
           </>
         )}
       </_UserDropdown>
diff --git a/samples/teamspace-react/src/components/ui/button.tsx b/samples/teamspace-react/src/components/ui/button.tsx
index a2df8dce6..6485382dd 100644
--- a/samples/teamspace-react/src/components/ui/button.tsx
+++ b/samples/teamspace-react/src/components/ui/button.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+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"
+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",
@@ -10,30 +10,28 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+          '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',
         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",
+          '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",
+          '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",
+        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",
+      variant: 'default',
+      size: 'default',
     },
-  }
-)
+  },
+);
 
 function Button({
   className,
@@ -41,19 +39,13 @@ function Button({
   size,
   asChild = false,
   ...props
-}: React.ComponentProps<"button"> &
+}: React.ComponentProps<'button'> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
+    asChild?: boolean;
   }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : 'button';
 
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
+  return <Comp data-slot="button" className={cn(buttonVariants({variant, size, className}))} {...props} />;
 }
 
-export { Button, buttonVariants }
+export {Button, buttonVariants};
diff --git a/samples/teamspace-react/src/main.tsx b/samples/teamspace-react/src/main.tsx
index e28444a79..042b488b5 100644
--- a/samples/teamspace-react/src/main.tsx
+++ b/samples/teamspace-react/src/main.tsx
@@ -18,7 +18,7 @@ createRoot(document.getElementById('root')!).render(
           overrides: {
             colors: {
               primary: {
-                main: '#6200ea',
+                main: '#1976d2',
                 contrastText: '#ffffff',
               },
             },
diff --git a/samples/teamspace-react/src/pages/Profile.tsx b/samples/teamspace-react/src/pages/Profile.tsx
index ac7edb517..976ce6d59 100644
--- a/samples/teamspace-react/src/pages/Profile.tsx
+++ b/samples/teamspace-react/src/pages/Profile.tsx
@@ -1,236 +1,11 @@
 'use client';
 
-import {useState} from 'react';
-import {useApp} from '../App';
-import {User, Mail, Calendar, MapPin, LinkIcon, Edit3, Save, X} from 'lucide-react';
+import {UserProfile} from '@asgardeo/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>
+      <UserProfile />
     </div>
   );
 }

From 26d661a7323f8dbe054a075f26a4392f9e6404fa Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 13:47:48 +0530
Subject: [PATCH 41/96] feat(react): add fieldsToSkip array to BaseUserProfile
 for filtering out specific schema fields

---
 .../components/presentation/UserProfile/BaseUserProfile.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index ac75081ea..28c67878a 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -552,6 +552,9 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
   const avatarAttributes = ['picture'];
   const excludedProps = avatarAttributes.map(attr => mergedMappings[attr] || attr);
 
+  // Fields to skip based on schema.name
+  const fieldsToSkip: string[] = ['verifiedMobileNumbers', 'verifiedEmailAddresses'];
+
   const profileContent = (
     <div style={containerStyle} className={clsx(withVendorCSSClassPrefix('user-profile'), className)}>
       <div style={styles.header}>
@@ -568,6 +571,9 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
             // Filter out avatar-related fields and fields we don't want to show
             if (!schema.name || schema.name === 'profileUrl') return false;
 
+            // Skip fields that are in the fieldsToSkip array
+            if (fieldsToSkip.includes(schema.name)) return false;
+
             // For non-editable mode, only show fields with values
             if (!editable) {
               const value = flattenedProfile && schema.name ? flattenedProfile[schema.name] : undefined;

From a78ec536d5f42a1f4048aada6b6ffb9cc648fad9 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 13:56:07 +0530
Subject: [PATCH 42/96] feat(react): enhance BaseUserProfile to support SCIM
 patch operations for nested schema fields

---
 .../UserProfile/BaseUserProfile.tsx           | 31 ++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index 28c67878a..6ef0c0bd9 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {User, withVendorCSSClassPrefix} from '@asgardeo/browser';
+import {User, withVendorCSSClassPrefix, WellKnownSchemaIds} from '@asgardeo/browser';
 import clsx from 'clsx';
 import {CSSProperties, FC, ReactElement, useMemo, useState, useCallback, useRef} from 'react';
 import useTheme from '../../../contexts/Theme/useTheme';
@@ -183,22 +183,39 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
   }
 
   const handleFieldSave = useCallback(
-    (schema: Schema) => {
+    (schema: Schema): void => {
       if (!onUpdate || !schema.name) return;
 
-      const payload = {};
-      const fieldName = schema.name;
-      const fieldValue =
+      const fieldName: string = schema.name;
+      const fieldValue: any =
         editedUser && fieldName && editedUser[fieldName] !== undefined
           ? editedUser[fieldName]
           : flattenedProfile && flattenedProfile[fieldName] !== undefined
           ? flattenedProfile[fieldName]
           : '';
 
-      set(payload, fieldName, fieldValue);
+      let payload: Record<string, any> = {};
+
+      // SCIM Patch Operation Logic:
+      // - Fields from core schema (urn:ietf:params:scim:schemas:core:2.0:User)
+      //   should be sent directly: {"name":{"givenName":"John"}}
+      // - Fields from extension schemas (like urn:scim:wso2:schema)
+      //   should be nested under the schema namespace: {"urn:scim:wso2:schema":{"country":"Sri Lanka"}}
+      if (schema.schemaId && schema.schemaId !== WellKnownSchemaIds.User) {
+        // For non-core schemas, nest the field under the schema namespace
+        payload = {
+          [schema.schemaId]: {
+            [fieldName]: fieldValue,
+          },
+        };
+      } else {
+        // For core schema or fields without schemaId, use the field path directly
+        // This handles complex paths like "name.givenName" correctly
+        set(payload, fieldName, fieldValue);
+      }
 
       onUpdate(payload);
-      // Optionally, exit edit mode for this field after save
+      // Exit edit mode for this field after save
       toggleFieldEdit(fieldName);
     },
     [editedUser, flattenedProfile, onUpdate, toggleFieldEdit],

From bc05584792b0dab213468f5faf7b369876aa8dd0 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 14:06:38 +0530
Subject: [PATCH 43/96] feat(react): include additional fields in
 generateFlattenedUserProfile and log output in AsgardeoReactClient

---
 .../src/utils/generateFlattenedUserProfile.ts | 92 ++++++++++++++++---
 packages/react/src/AsgardeoReactClient.ts     |  4 +-
 .../react/src/contexts/User/UserProvider.tsx  |  2 +-
 3 files changed, 82 insertions(+), 16 deletions(-)

diff --git a/packages/javascript/src/utils/generateFlattenedUserProfile.ts b/packages/javascript/src/utils/generateFlattenedUserProfile.ts
index 3ea6d692d..a33edb7df 100644
--- a/packages/javascript/src/utils/generateFlattenedUserProfile.ts
+++ b/packages/javascript/src/utils/generateFlattenedUserProfile.ts
@@ -26,6 +26,9 @@ import {User} from '../models/user';
  * a flat object with dot notation keys instead of nested objects. Multi-valued
  * properties and type-specific defaults are handled appropriately.
  *
+ * Additionally, any fields present in the response but not defined in the schema
+ * will be included to ensure no user data is lost during flattening.
+ *
  * @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
@@ -40,17 +43,22 @@ import {User} from '../models/user';
  *   { name: 'name.givenName', type: 'STRING', multiValued: false },
  *   { name: 'emails', type: 'STRING', multiValued: true }
  * ];
- * const response = { name: { givenName: 'John' }, emails: 'john@example.com' };
+ * const response = {
+ *   name: { givenName: 'John' },
+ *   emails: 'john@example.com',
+ *   country: 'US' // This will be included even if not in schema
+ * };
  * const profile = generateFlattenedUserProfile(response, schemas);
- * // Result: { "name.givenName": 'John', emails: ['john@example.com'] }
+ * // Result: { "name.givenName": 'John', emails: ['john@example.com'], country: 'US' }
  * ```
  */
 const generateFlattenedUserProfile = (meResponse: any, processedSchemas: any[]): User => {
   const profile: User = {};
 
-  const allSchemaNames = processedSchemas.map(schema => schema.name).filter(Boolean);
+  const allSchemaNames: string[] = processedSchemas.map((schema: any) => schema.name).filter(Boolean);
 
-  processedSchemas.forEach(schema => {
+  // First, process all schema-defined fields
+  processedSchemas.forEach((schema: any) => {
     const {name, type, multiValued} = schema;
 
     if (!name) return;
@@ -58,8 +66,8 @@ const generateFlattenedUserProfile = (meResponse: any, processedSchemas: any[]):
     // 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 + '.'),
+    const hasChildProperties: boolean = allSchemaNames.some(
+      (schemaName: string) => schemaName !== name && schemaName.startsWith(`${name}.`),
     );
 
     if (hasChildProperties) {
@@ -67,25 +75,81 @@ const generateFlattenedUserProfile = (meResponse: any, processedSchemas: any[]):
       return;
     }
 
-    let value = get(meResponse, name);
+    let value: any = get(meResponse, name);
+
+    // If value not found at top level, check within schema namespaces
+    if (value === undefined) {
+      const schemaNamespaces: string[] = [
+        'urn:ietf:params:scim:schemas:core:2.0:User',
+        'urn:ietf:params:scim:schemas:extension:enterprise:2.0:User',
+        'urn:scim:wso2:schema',
+        'urn:scim:schemas:extension:custom:User',
+      ];
+
+      schemaNamespaces.some((namespace: string) => {
+        if (meResponse[namespace]) {
+          // Try the field name directly within the namespace
+          if (meResponse[namespace][name] !== undefined) {
+            value = meResponse[namespace][name];
+            return true; // Break out of some()
+          }
+          // Also try using get() for nested paths within the namespace
+          const nestedValue: any = get(meResponse[namespace], name);
+          if (nestedValue !== undefined) {
+            value = nestedValue;
+            return true; // Break out of some()
+          }
+        }
+        return false;
+      });
+    }
 
     if (value !== undefined) {
       if (multiValued && !Array.isArray(value)) {
         value = [value];
       }
+    } else if (multiValued) {
+      value = undefined;
+    } else if (type === 'STRING') {
+      value = '';
     } else {
-      if (multiValued) {
-        value = undefined;
-      } else if (type === 'STRING') {
-        value = '';
-      } else {
-        value = undefined;
-      }
+      value = undefined;
     }
 
     profile[name] = value;
   });
 
+  // Then, include any additional fields from meResponse that aren't in the schema
+  // This ensures fields like 'country' are not missed if they exist in the response
+  const flattenObject = (obj: any, prefix: string = ''): void => {
+    if (obj && typeof obj === 'object' && !Array.isArray(obj)) {
+      Object.keys(obj).forEach((key: string) => {
+        const fullKey: string = prefix ? `${prefix}.${key}` : key;
+        const value: any = obj[key];
+
+        // Skip if this field is already processed by schema
+        if (Object.prototype.hasOwnProperty.call(profile, fullKey)) {
+          return;
+        }
+
+        // Skip if this is a parent of schema-defined fields
+        const hasSchemaChildProperties: boolean = allSchemaNames.some((schemaName: string) =>
+          schemaName.startsWith(`${fullKey}.`),
+        );
+
+        if (hasSchemaChildProperties) {
+          // Recursively process child properties
+          flattenObject(value, fullKey);
+        } else {
+          // Include the field as-is
+          profile[fullKey] = value;
+        }
+      });
+    }
+  };
+
+  flattenObject(meResponse);
+
   return profile;
 };
 
diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index d67d880c2..92e18787a 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -89,11 +89,13 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
 
       const processedSchemas = flattenUserSchema(schemas);
 
-      return {
+      const output = {
         schemas: processedSchemas,
         flattenedProfile: generateFlattenedUserProfile(profile, processedSchemas),
         profile,
       };
+      console.log(JSON.stringify(output, null, 2));
+      return output;
     } catch (error) {
       return {
         schemas: [],
diff --git a/packages/react/src/contexts/User/UserProvider.tsx b/packages/react/src/contexts/User/UserProvider.tsx
index fa36050fe..0a33b04c0 100644
--- a/packages/react/src/contexts/User/UserProvider.tsx
+++ b/packages/react/src/contexts/User/UserProvider.tsx
@@ -29,7 +29,7 @@ import useAsgardeo from '../Asgardeo/useAsgardeo';
  */
 export interface UserProviderProps {
   profile: UserProfile;
-  revalidateProfile: () => Promise<void>;
+  revalidateProfile?: () => Promise<void>;
 }
 
 /**

From 647f6e6d978456206e34dd37997d1659066b8049 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 14:14:44 +0530
Subject: [PATCH 44/96] feat(react): add onComplete callback and
 shouldRedirectAfterSignUp prop to SignUp component

---
 .../components/presentation/SignUp/SignUp.tsx | 20 ++++++++++++++-----
 .../teamspace-react/src/pages/SignUpPage.tsx  |  5 ++++-
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/presentation/SignUp/SignUp.tsx b/packages/react/src/components/presentation/SignUp/SignUp.tsx
index 90f9e4320..c02f1eb2f 100644
--- a/packages/react/src/components/presentation/SignUp/SignUp.tsx
+++ b/packages/react/src/components/presentation/SignUp/SignUp.tsx
@@ -40,6 +40,13 @@ export interface SignUpProps {
    */
   className?: string;
 
+  /**
+   * Callback function called when the sign-up flow completes and requires redirection.
+   * This allows platform-specific handling of redirects (e.g., Next.js router.push).
+   * @param response - The response from the sign-up flow containing the redirect URL, etc.
+   */
+  onComplete?: (response: EmbeddedFlowExecuteResponse) => void;
+
   /**
    * Callback function called when sign-up fails.
    * @param error - The error that occurred during sign-up.
@@ -47,11 +54,9 @@ export interface SignUpProps {
   onError?: (error: Error) => void;
 
   /**
-   * Callback function called when the sign-up flow completes and requires redirection.
-   * This allows platform-specific handling of redirects (e.g., Next.js router.push).
-   * @param response - The response from the sign-up flow containing the redirect URL, etc.
+   *  Whether to redirect after sign-up.
    */
-  onComplete?: (response: EmbeddedFlowExecuteResponse) => void;
+  shouldRedirectAfterSignUp?: boolean;
 
   /**
    * Size variant for the component.
@@ -101,6 +106,7 @@ const SignUp: FC<SignUpProps> = ({
   afterSignUpUrl,
   onError,
   onComplete,
+  shouldRedirectAfterSignUp = true,
 }) => {
   const {signUp, isInitialized} = useAsgardeo();
 
@@ -126,7 +132,11 @@ const SignUp: FC<SignUpProps> = ({
   const handleComplete = (response: EmbeddedFlowExecuteResponse) => {
     onComplete?.(response);
 
-    if (response?.type === EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL) {
+    if (
+      shouldRedirectAfterSignUp &&
+      response?.type === EmbeddedFlowResponseType.Redirection &&
+      response?.data?.redirectURL
+    ) {
       window.location.href = response.data.redirectURL;
     }
   };
diff --git a/samples/teamspace-react/src/pages/SignUpPage.tsx b/samples/teamspace-react/src/pages/SignUpPage.tsx
index fafdf6cb2..18dbfc199 100644
--- a/samples/teamspace-react/src/pages/SignUpPage.tsx
+++ b/samples/teamspace-react/src/pages/SignUpPage.tsx
@@ -2,8 +2,11 @@
 
 import {Users} from 'lucide-react';
 import {SignUp} from '@asgardeo/react';
+import {useNavigate} from 'react-router-dom';
 
 export default function SignUpPage() {
+  const navigate = useNavigate();
+
   return (
     <div className="min-h-screen flex items-center justify-center p-4">
       <div className="w-full max-w-md">
@@ -17,7 +20,7 @@ export default function SignUpPage() {
           </a>
         </div>
 
-        <SignUp />
+        <SignUp shouldRedirectAfterSignUp={false} onComplete={() => navigate('/signin')} />
 
         <div className="mt-8 text-center">
           <a href="/" className="text-sm text-gray-500 hover:text-gray-700">

From 4529acd462d7dfc68e0db5e6e3a3445cf3233170 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 14:31:44 +0530
Subject: [PATCH 45/96] feat: add @asgardeo/react-router package with
 authentication components and hooks

- Implemented ProtectedRoute component for route protection based on authentication status.
- Created withAuthentication higher-order component for protecting any React component.
- Developed useAuthGuard and useReturnUrl hooks for managing authentication and redirecting users.
- Added esbuild configuration for building the package.
- Included TypeScript configuration files for library and testing.
- Set up Vitest for testing with initial test cases for exported components.
- Updated package.json with necessary dependencies and scripts.
- Added Prettier configuration for code formatting.
---
 packages/react-router/LICENSE                 | 201 ++++++++++
 packages/react-router/README.md               | 349 ++++++++++++++++++
 packages/react-router/esbuild.config.mjs      |  45 +++
 packages/react-router/package.json            |  71 ++++
 packages/react-router/prettier.config.cjs     |  19 +
 .../react-router/src/__tests__/index.test.ts  |  41 ++
 .../src/components/ProtectedRoute.tsx         | 183 +++++++++
 .../src/components/withAuthentication.tsx     | 163 ++++++++
 .../react-router/src/hooks/useAuthGuard.ts    | 218 +++++++++++
 packages/react-router/src/index.ts            |  28 ++
 packages/react-router/tsconfig.json           |  36 ++
 packages/react-router/tsconfig.lib.json       |  20 +
 packages/react-router/tsconfig.spec.json      |   9 +
 packages/react-router/vitest.config.ts        |  25 ++
 pnpm-lock.yaml                                | 123 ++++++
 15 files changed, 1531 insertions(+)
 create mode 100644 packages/react-router/LICENSE
 create mode 100644 packages/react-router/README.md
 create mode 100644 packages/react-router/esbuild.config.mjs
 create mode 100644 packages/react-router/package.json
 create mode 100644 packages/react-router/prettier.config.cjs
 create mode 100644 packages/react-router/src/__tests__/index.test.ts
 create mode 100644 packages/react-router/src/components/ProtectedRoute.tsx
 create mode 100644 packages/react-router/src/components/withAuthentication.tsx
 create mode 100644 packages/react-router/src/hooks/useAuthGuard.ts
 create mode 100644 packages/react-router/src/index.ts
 create mode 100644 packages/react-router/tsconfig.json
 create mode 100644 packages/react-router/tsconfig.lib.json
 create mode 100644 packages/react-router/tsconfig.spec.json
 create mode 100644 packages/react-router/vitest.config.ts

diff --git a/packages/react-router/LICENSE b/packages/react-router/LICENSE
new file mode 100644
index 000000000..261eeb9e9
--- /dev/null
+++ b/packages/react-router/LICENSE
@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed 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.
diff --git a/packages/react-router/README.md b/packages/react-router/README.md
new file mode 100644
index 000000000..f235d7e2f
--- /dev/null
+++ b/packages/react-router/README.md
@@ -0,0 +1,349 @@
+# @asgardeo/react-router
+
+React Router integration for Asgardeo React SDK with protected routes and authentication guards.
+
+[![npm version](https://img.shields.io/npm/v/@asgardeo/react-router.svg)](https://www.npmjs.com/package/@asgardeo/react-router)
+[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
+
+## Overview
+
+`@asgardeo/react-router` is a supplementary package that provides seamless integration between Asgardeo authentication and React Router. It offers components and hooks to easily protect routes and handle authentication flows in your React applications.
+
+## Features
+
+- 🛡️ **ProtectedRoute Component**: Drop-in replacement for React Router's Route with built-in authentication
+- 🔒 **withAuthentication HOC**: Higher-order component for protecting any React component
+- 🪝 **Authentication Hooks**: Powerful hooks for custom authentication logic
+- 🔄 **Return URL Handling**: Automatic redirect back to intended destination after sign-in
+- ⚡ **TypeScript Support**: Full TypeScript support with comprehensive type definitions
+- 🎨 **Customizable**: Flexible configuration options for different use cases
+
+## Installation
+
+```bash
+npm install @asgardeo/react-router
+# or
+yarn add @asgardeo/react-router
+# or
+pnpm add @asgardeo/react-router
+```
+
+### Peer Dependencies
+
+This package requires the following peer dependencies:
+
+```bash
+npm install @asgardeo/react react react-router-dom
+```
+
+## Quick Start
+
+### 1. Basic Setup with ProtectedRoute
+
+```tsx
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { AsgardeoProvider } from '@asgardeo/react';
+import { ProtectedRoute } from '@asgardeo/react-router';
+import Dashboard from './components/Dashboard';
+import Profile from './components/Profile';
+
+function App() {
+  return (
+    <AsgardeoProvider
+      baseUrl="https://api.asgardeo.io/t/your-org"
+      clientId="your-client-id"
+    >
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<div>Public Home Page</div>} />
+          <ProtectedRoute 
+            path="/dashboard" 
+            element={<Dashboard />} 
+          />
+          <ProtectedRoute 
+            path="/profile" 
+            element={<Profile />} 
+          />
+        </Routes>
+      </BrowserRouter>
+    </AsgardeoProvider>
+  );
+}
+
+export default App;
+```
+
+### 2. Custom Fallback and Redirects
+
+```tsx
+import { ProtectedRoute } from '@asgardeo/react-router';
+
+// Redirect to custom login page
+<ProtectedRoute 
+  path="/dashboard" 
+  element={<Dashboard />}
+  redirectTo="/login"
+/>
+
+// Custom fallback component
+<ProtectedRoute 
+  path="/dashboard" 
+  element={<Dashboard />}
+  fallback={
+    <div className="auth-required">
+      <h2>Please sign in</h2>
+      <p>You need to be signed in to access this page.</p>
+    </div>
+  }
+/>
+
+// Custom loading state
+<ProtectedRoute 
+  path="/dashboard" 
+  element={<Dashboard />}
+  loadingElement={<div className="spinner">Loading...</div>}
+/>
+```
+
+## API Reference
+
+### Components
+
+#### ProtectedRoute
+
+A wrapper around React Router's `Route` component that protects routes based on authentication status.
+
+```tsx
+interface ProtectedRouteProps extends Omit<RouteProps, 'element'> {
+  element: React.ReactElement;
+  fallback?: React.ReactElement;
+  redirectTo?: string;
+  showLoading?: boolean;
+  loadingElement?: React.ReactElement;
+}
+```
+
+**Props:**
+
+- `element` - The component to render when authenticated
+- `fallback` - Custom component to render when not authenticated
+- `redirectTo` - URL to redirect to when not authenticated
+- `showLoading` - Whether to show loading state (default: `true`)
+- `loadingElement` - Custom loading component
+
+#### withAuthentication
+
+Higher-order component that wraps any component with authentication protection.
+
+```tsx
+import { withAuthentication } from '@asgardeo/react-router';
+
+const Dashboard = () => <div>Protected Dashboard</div>;
+
+const ProtectedDashboard = withAuthentication(Dashboard, {
+  redirectTo: '/login'
+});
+
+// With role-based access
+const AdminPanel = withAuthentication(AdminPanelComponent, {
+  additionalCheck: (authContext) => {
+    return authContext.user?.groups?.includes('admin');
+  },
+  fallback: <div>Access denied</div>
+});
+```
+
+### Hooks
+
+#### useAuthGuard
+
+Hook that provides authentication guard functionality for routes.
+
+```tsx
+import { useAuthGuard } from '@asgardeo/react-router';
+
+function Dashboard() {
+  const { isAllowed, isLoading } = useAuthGuard({
+    redirectTo: '/login'
+  });
+
+  if (isLoading) return <div>Loading...</div>;
+  if (!isAllowed) return null; // Will redirect
+
+  return <div>Protected Dashboard Content</div>;
+}
+```
+
+**Options:**
+
+- `redirectTo` - Path to redirect when not authenticated (default: `'/login'`)
+- `preserveReturnUrl` - Whether to preserve current location as return URL (default: `true`)
+- `additionalCheck` - Additional authorization check function
+- `immediate` - Whether to check immediately on mount (default: `true`)
+
+**Returns:**
+
+- `isAllowed` - Whether user can access the route
+- `isLoading` - Whether authentication is being checked
+- `isAuthenticated` - Whether user is signed in
+- `meetsAdditionalChecks` - Whether additional checks pass
+- `authContext` - Full Asgardeo authentication context
+- `checkAuth()` - Function to manually trigger auth check
+
+#### useReturnUrl
+
+Hook for handling return URLs after authentication.
+
+```tsx
+import { useReturnUrl } from '@asgardeo/react-router';
+import { useAsgardeo } from '@asgardeo/react';
+
+function LoginPage() {
+  const { returnTo, navigateToReturnUrl } = useReturnUrl();
+  const { signIn } = useAsgardeo();
+
+  const handleSignIn = async () => {
+    await signIn();
+    navigateToReturnUrl(); // Redirects to original destination
+  };
+
+  return (
+    <div>
+      <button onClick={handleSignIn}>Sign In</button>
+      {returnTo && <p>You'll be redirected to: {returnTo}</p>}
+    </div>
+  );
+}
+```
+
+**Returns:**
+
+- `returnTo` - The URL to return to after authentication
+- `navigateToReturnUrl(fallback?)` - Function to navigate to return URL
+- `hasReturnUrl` - Whether a return URL is available
+
+## Advanced Usage
+
+### Role-Based Access Control
+
+```tsx
+import { withAuthentication } from '@asgardeo/react-router';
+
+const AdminPanel = withAuthentication(AdminPanelComponent, {
+  additionalCheck: (authContext) => {
+    const userRoles = authContext.user?.groups || [];
+    return userRoles.includes('admin') || userRoles.includes('moderator');
+  },
+  fallback: (
+    <div>
+      <h2>Access Denied</h2>
+      <p>You don't have permission to access this page.</p>
+    </div>
+  )
+});
+```
+
+### Custom Authentication Flow
+
+```tsx
+import { useAuthGuard } from '@asgardeo/react-router';
+
+function CustomProtectedPage() {
+  const { isAllowed, authContext, checkAuth } = useAuthGuard({
+    immediate: false, // Don't redirect immediately
+    additionalCheck: (auth) => auth.user?.email_verified === true
+  });
+
+  if (!authContext.isSignedIn) {
+    return (
+      <div>
+        <h2>Sign In Required</h2>
+        <button onClick={() => authContext.signIn()}>
+          Sign In
+        </button>
+      </div>
+    );
+  }
+
+  if (!authContext.user?.email_verified) {
+    return (
+      <div>
+        <h2>Email Verification Required</h2>
+        <p>Please verify your email before accessing this page.</p>
+      </div>
+    );
+  }
+
+  return <div>Protected Content</div>;
+}
+```
+
+### Integration with Layouts
+
+```tsx
+import { ProtectedRoute } from '@asgardeo/react-router';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        {/* Public routes */}
+        <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+        
+        {/* Protected routes with layout */}
+        <Route path="/app" element={<AppLayout />}>
+          <ProtectedRoute 
+            path="dashboard" 
+            element={<Dashboard />} 
+          />
+          <ProtectedRoute 
+            path="profile" 
+            element={<Profile />} 
+          />
+          <ProtectedRoute 
+            path="settings" 
+            element={<Settings />} 
+          />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
+```
+
+## Examples
+
+Check out our [examples directory](./examples) for complete working examples:
+
+- [Basic Protected Routes](./examples/basic)
+- [Role-Based Access Control](./examples/rbac)
+- [Custom Authentication Flow](./examples/custom-flow)
+- [Integration with Next.js](./examples/nextjs)
+
+## TypeScript Support
+
+This package is written in TypeScript and provides comprehensive type definitions. All components and hooks are fully typed for the best development experience.
+
+```tsx
+import type { ProtectedRouteProps, WithAuthenticationOptions } from '@asgardeo/react-router';
+```
+
+## Contributing
+
+We welcome contributions! Please see our [Contributing Guide](../../CONTRIBUTING.md) for details.
+
+## License
+
+This project is licensed under the Apache License 2.0. See the [LICENSE](LICENSE) file for details.
+
+## Support
+
+- 📖 [Documentation](https://wso2.com/asgardeo/docs/sdks/react/)
+- 💬 [Community Forum](https://stackoverflow.com/questions/tagged/asgardeo)
+- 🐛 [Issues](https://github.com/asgardeo/web-ui-sdks/issues)
+
+---
+
+Built with ❤️ by the [Asgardeo](https://wso2.com/asgardeo/) team.
diff --git a/packages/react-router/esbuild.config.mjs b/packages/react-router/esbuild.config.mjs
new file mode 100644
index 000000000..39b81fb6f
--- /dev/null
+++ b/packages/react-router/esbuild.config.mjs
@@ -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 {readFileSync} from 'fs';
+import {build} 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 || {})],
+  metafile: true,
+  platform: 'browser',
+  target: ['es2020'],
+};
+
+await build({
+  ...commonOptions,
+  format: 'esm',
+  outfile: 'dist/index.js',
+  sourcemap: true,
+});
+
+await build({
+  ...commonOptions,
+  format: 'cjs',
+  outfile: 'dist/cjs/index.js',
+  sourcemap: true,
+});
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
new file mode 100644
index 000000000..61a7cfc4c
--- /dev/null
+++ b/packages/react-router/package.json
@@ -0,0 +1,71 @@
+{
+  "name": "@asgardeo/react-router",
+  "version": "0.1.0",
+  "description": "React Router integration for Asgardeo React SDK with protected routes.",
+  "keywords": [
+    "asgardeo",
+    "react",
+    "react-router",
+    "protected-routes",
+    "authentication"
+  ],
+  "homepage": "https://github.com/asgardeo/web-ui-sdks/tree/main/packages/react-router#readme",
+  "bugs": {
+    "url": "https://github.com/asgardeo/web-ui-sdks/issues"
+  },
+  "author": "WSO2",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "dist/cjs/index.js",
+  "module": "dist/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/web-ui-sdks",
+    "directory": "packages/react-router"
+  },
+  "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",
+    "@types/react": "^19.1.4",
+    "@types/react-router-dom": "^5.3.3",
+    "@wso2/eslint-plugin": "catalog:",
+    "@wso2/prettier-config": "catalog:",
+    "esbuild": "^0.25.4",
+    "eslint": "8.57.0",
+    "prettier": "^2.6.2",
+    "react": "^19.1.0",
+    "react-router-dom": "^6.30.0",
+    "rimraf": "^6.0.1",
+    "typescript": "~5.7.2",
+    "vitest": "^3.1.3"
+  },
+  "peerDependencies": {
+    "@asgardeo/react": ">=0.3.0",
+    "@types/react": ">=16.8.0",
+    "react": ">=16.8.0",
+    "react-router-dom": ">=6.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.8.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
\ No newline at end of file
diff --git a/packages/react-router/prettier.config.cjs b/packages/react-router/prettier.config.cjs
new file mode 100644
index 000000000..929b9b15f
--- /dev/null
+++ b/packages/react-router/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/react-router/src/__tests__/index.test.ts b/packages/react-router/src/__tests__/index.test.ts
new file mode 100644
index 000000000..5f0247b7c
--- /dev/null
+++ b/packages/react-router/src/__tests__/index.test.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.
+ */
+
+import {describe, it, expect} from 'vitest';
+
+describe('@asgardeo/react-router', () => {
+  it('should export ProtectedRoute', async () => {
+    const {ProtectedRoute} = await import('../index');
+    expect(ProtectedRoute).toBeDefined();
+  });
+
+  it('should export withAuthentication', async () => {
+    const {withAuthentication} = await import('../index');
+    expect(withAuthentication).toBeDefined();
+  });
+
+  it('should export useAuthGuard', async () => {
+    const {useAuthGuard} = await import('../index');
+    expect(useAuthGuard).toBeDefined();
+  });
+
+  it('should export useReturnUrl', async () => {
+    const {useReturnUrl} = await import('../index');
+    expect(useReturnUrl).toBeDefined();
+  });
+});
diff --git a/packages/react-router/src/components/ProtectedRoute.tsx b/packages/react-router/src/components/ProtectedRoute.tsx
new file mode 100644
index 000000000..8cd1189cb
--- /dev/null
+++ b/packages/react-router/src/components/ProtectedRoute.tsx
@@ -0,0 +1,183 @@
+/**
+ * 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 React from 'react';
+import {Navigate, Route, RouteProps} from 'react-router-dom';
+import {useAsgardeo} from '@asgardeo/react';
+
+/**
+ * Props for the ProtectedRoute component.
+ */
+export interface ProtectedRouteProps {
+  /**
+   * The element to render when the user is authenticated.
+   */
+  element: React.ReactElement;
+  /**
+   * Custom fallback element to render when the user is not authenticated.
+   * If not provided, will redirect to the sign-in URL or a default fallback.
+   */
+  fallback?: React.ReactElement;
+  /**
+   * URL to redirect to when the user is not authenticated.
+   * If not provided and no fallback is specified, will use a default sign-in flow.
+   */
+  redirectTo?: string;
+  /**
+   * Whether to show a loading state while authentication status is being determined.
+   * @default true
+   */
+  showLoading?: boolean;
+  /**
+   * Custom loading element to render while authentication status is being determined.
+   */
+  loadingElement?: React.ReactElement;
+  /**
+   * The path prop for the route.
+   */
+  path?: string;
+  /**
+   * Additional route props that are safe to pass through.
+   */
+  caseSensitive?: boolean;
+  children?: React.ReactNode;
+  id?: string;
+}
+
+/**
+ * A wrapper around React Router's Route component that protects routes based on authentication status.
+ *
+ * This component integrates with the Asgardeo React SDK to automatically redirect
+ * unauthenticated users and render protected content only for authenticated users.
+ *
+ * @example
+ * ```tsx
+ * import { ProtectedRoute } from '@asgardeo/react-router';
+ * import { BrowserRouter, Routes } from 'react-router-dom';
+ * import Dashboard from './Dashboard';
+ *
+ * function App() {
+ *   return (
+ *     <BrowserRouter>
+ *       <Routes>
+ *         <ProtectedRoute
+ *           path="/dashboard"
+ *           element={<Dashboard />}
+ *         />
+ *       </Routes>
+ *     </BrowserRouter>
+ *   );
+ * }
+ * ```
+ *
+ * @example With custom fallback
+ * ```tsx
+ * <ProtectedRoute
+ *   path="/dashboard"
+ *   element={<Dashboard />}
+ *   fallback={<div>Please sign in to access this page</div>}
+ * />
+ * ```
+ *
+ * @example With redirect
+ * ```tsx
+ * <ProtectedRoute
+ *   path="/dashboard"
+ *   element={<Dashboard />}
+ *   redirectTo="/login"
+ * />
+ * ```
+ */
+const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
+  element,
+  fallback,
+  redirectTo,
+  showLoading = true,
+  loadingElement,
+  path,
+  caseSensitive,
+  children,
+  id,
+}) => {
+  // Create a wrapper component to use the hook within React Router context
+  const ProtectedElement: React.FC = () => {
+    const {isSignedIn, isLoading, signIn} = useAsgardeo();
+
+    // Show loading state while authentication status is being determined
+    if (isLoading && showLoading) {
+      if (loadingElement) {
+        return loadingElement;
+      }
+      return (
+        <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh'}}>
+          <div>Loading...</div>
+        </div>
+      );
+    }
+
+    // If user is authenticated, render the protected element
+    if (isSignedIn) {
+      return element;
+    }
+
+    // If user is not authenticated, handle fallback/redirect
+    if (fallback) {
+      return fallback;
+    }
+
+    if (redirectTo) {
+      return <Navigate to={redirectTo} replace />;
+    }
+
+    // Default behavior: trigger sign-in flow
+    return (
+      <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh'}}>
+        <div>
+          <h2>Authentication Required</h2>
+          <p>You need to sign in to access this page.</p>
+          <button
+            onClick={() => signIn()}
+            style={{
+              padding: '10px 20px',
+              backgroundColor: '#007bff',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+            }}
+          >
+            Sign In
+          </button>
+        </div>
+      </div>
+    );
+  };
+
+  // Pass only the safe props to Route
+  const routeProps: RouteProps = {
+    path,
+    element: <ProtectedElement />,
+    ...(caseSensitive !== undefined && {caseSensitive}),
+    ...(children && {children}),
+    ...(id && {id}),
+  };
+
+  return <Route {...routeProps} />;
+};
+
+export default ProtectedRoute;
diff --git a/packages/react-router/src/components/withAuthentication.tsx b/packages/react-router/src/components/withAuthentication.tsx
new file mode 100644
index 000000000..dd8e4e632
--- /dev/null
+++ b/packages/react-router/src/components/withAuthentication.tsx
@@ -0,0 +1,163 @@
+/**
+ * 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 React from 'react';
+import {Navigate} from 'react-router-dom';
+import {useAsgardeo} from '@asgardeo/react';
+
+/**
+ * Options for the withAuthentication higher-order component.
+ */
+export interface WithAuthenticationOptions {
+  /**
+   * Custom fallback element to render when the user is not authenticated.
+   */
+  fallback?: React.ReactElement;
+  /**
+   * URL to redirect to when the user is not authenticated.
+   */
+  redirectTo?: string;
+  /**
+   * Whether to show a loading state while authentication status is being determined.
+   * @default true
+   */
+  showLoading?: boolean;
+  /**
+   * Custom loading element to render while authentication status is being determined.
+   */
+  loadingElement?: React.ReactElement;
+  /**
+   * Additional condition that must be met for the user to access the component.
+   * This function receives the authentication context and should return true if access is allowed.
+   */
+  additionalCheck?: (authContext: ReturnType<typeof useAsgardeo>) => boolean;
+}
+
+/**
+ * Higher-order component that wraps a component with authentication protection.
+ *
+ * This HOC can be used to protect any React component, not just Route components.
+ * It provides more flexibility for complex authentication scenarios.
+ *
+ * @param WrappedComponent - The component to protect with authentication
+ * @param options - Configuration options for the authentication protection
+ *
+ * @example
+ * ```tsx
+ * import { withAuthentication } from '@asgardeo/react-router';
+ *
+ * const Dashboard = () => <div>Protected Dashboard</div>;
+ *
+ * const ProtectedDashboard = withAuthentication(Dashboard, {
+ *   redirectTo: '/login'
+ * });
+ * ```
+ *
+ * @example With additional checks
+ * ```tsx
+ * const AdminPanel = withAuthentication(AdminPanelComponent, {
+ *   additionalCheck: (authContext) => {
+ *     // Only allow users with admin role
+ *     return authContext.user?.groups?.includes('admin');
+ *   },
+ *   fallback: <div>You don't have permission to access this page</div>
+ * });
+ * ```
+ */
+const withAuthentication = <P extends object>(
+  WrappedComponent: React.ComponentType<P>,
+  options: WithAuthenticationOptions = {},
+): React.FC<P> => {
+  const {fallback, redirectTo, showLoading = true, loadingElement, additionalCheck} = options;
+
+  const AuthenticatedComponent: React.FC<P> = props => {
+    const authContext = useAsgardeo();
+    const {isSignedIn, isLoading, signIn} = authContext;
+
+    // Show loading state while authentication status is being determined
+    if (isLoading && showLoading) {
+      if (loadingElement) {
+        return loadingElement;
+      }
+      return (
+        <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh'}}>
+          <div>Loading...</div>
+        </div>
+      );
+    }
+
+    // Check if user is authenticated
+    if (!isSignedIn) {
+      if (fallback) {
+        return fallback;
+      }
+
+      if (redirectTo) {
+        return <Navigate to={redirectTo} replace />;
+      }
+
+      // Default behavior: show sign-in prompt
+      return (
+        <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh'}}>
+          <div>
+            <h2>Authentication Required</h2>
+            <p>You need to sign in to access this page.</p>
+            <button
+              onClick={() => signIn()}
+              style={{
+                padding: '10px 20px',
+                backgroundColor: '#007bff',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
+              }}
+            >
+              Sign In
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    // Check additional conditions if provided
+    if (additionalCheck && !additionalCheck(authContext)) {
+      if (fallback) {
+        return fallback;
+      }
+
+      return (
+        <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh'}}>
+          <div>
+            <h2>Access Denied</h2>
+            <p>You don't have permission to access this page.</p>
+          </div>
+        </div>
+      );
+    }
+
+    // User is authenticated and meets all conditions, render the wrapped component
+    return <WrappedComponent {...props} />;
+  };
+
+  AuthenticatedComponent.displayName = `withAuthentication(${WrappedComponent.displayName || WrappedComponent.name})`;
+
+  return AuthenticatedComponent;
+};
+
+export default withAuthentication;
diff --git a/packages/react-router/src/hooks/useAuthGuard.ts b/packages/react-router/src/hooks/useAuthGuard.ts
new file mode 100644
index 000000000..8858a35f0
--- /dev/null
+++ b/packages/react-router/src/hooks/useAuthGuard.ts
@@ -0,0 +1,218 @@
+/**
+ * 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 {useEffect} from 'react';
+import {useLocation, useNavigate} from 'react-router-dom';
+import {useAsgardeo} from '@asgardeo/react';
+
+/**
+ * Options for the useAuthGuard hook.
+ */
+export interface UseAuthGuardOptions {
+  /**
+   * Path to redirect to when the user is not authenticated.
+   * @default '/login'
+   */
+  redirectTo?: string;
+  /**
+   * Whether to preserve the current location as a return URL.
+   * When true, adds a 'returnTo' query parameter with the current path.
+   * @default true
+   */
+  preserveReturnUrl?: boolean;
+  /**
+   * Additional condition that must be met for the user to access the route.
+   * This function receives the authentication context and should return true if access is allowed.
+   */
+  additionalCheck?: (authContext: ReturnType<typeof useAsgardeo>) => boolean;
+  /**
+   * Whether to check authentication status immediately on mount.
+   * @default true
+   */
+  immediate?: boolean;
+}
+
+/**
+ * Hook that provides authentication guard functionality for routes.
+ *
+ * This hook can be used within any component to enforce authentication
+ * and optionally redirect unauthenticated users.
+ *
+ * @param options - Configuration options for the authentication guard
+ *
+ * @returns Object containing authentication status and helper functions
+ *
+ * @example
+ * ```tsx
+ * import { useAuthGuard } from '@asgardeo/react-router';
+ *
+ * function Dashboard() {
+ *   const { isAllowed, isLoading } = useAuthGuard({
+ *     redirectTo: '/login'
+ *   });
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *   if (!isAllowed) return null; // Will redirect
+ *
+ *   return <div>Protected Dashboard Content</div>;
+ * }
+ * ```
+ *
+ * @example With additional checks
+ * ```tsx
+ * function AdminPanel() {
+ *   const { isAllowed, authContext } = useAuthGuard({
+ *     additionalCheck: (auth) => auth.user?.groups?.includes('admin'),
+ *     redirectTo: '/unauthorized'
+ *   });
+ *
+ *   if (!isAllowed) return null;
+ *
+ *   return <div>Admin Panel</div>;
+ * }
+ * ```
+ */
+export const useAuthGuard = (options: UseAuthGuardOptions = {}) => {
+  const {redirectTo = '/login', preserveReturnUrl = true, additionalCheck, immediate = true} = options;
+
+  const authContext = useAsgardeo();
+  const {isSignedIn, isLoading} = authContext;
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const isAuthenticated = isSignedIn;
+  const meetsAdditionalChecks = additionalCheck ? additionalCheck(authContext) : true;
+  const isAllowed = isAuthenticated && meetsAdditionalChecks;
+
+  useEffect(() => {
+    if (!immediate || isLoading) {
+      return;
+    }
+
+    if (!isAuthenticated) {
+      const redirectUrl = preserveReturnUrl
+        ? `${redirectTo}?returnTo=${encodeURIComponent(location.pathname + location.search)}`
+        : redirectTo;
+
+      navigate(redirectUrl, {replace: true});
+      return;
+    }
+
+    if (!meetsAdditionalChecks) {
+      navigate(redirectTo, {replace: true});
+    }
+  }, [isAuthenticated, meetsAdditionalChecks, immediate, isLoading, navigate, redirectTo, preserveReturnUrl, location]);
+
+  return {
+    /**
+     * Whether the user is allowed to access the current route.
+     */
+    isAllowed,
+    /**
+     * Whether authentication status is still being determined.
+     */
+    isLoading,
+    /**
+     * Whether the user is authenticated.
+     */
+    isAuthenticated,
+    /**
+     * Whether the user meets additional authorization checks.
+     */
+    meetsAdditionalChecks,
+    /**
+     * The full authentication context from useAsgardeo.
+     */
+    authContext,
+    /**
+     * Function to manually trigger the authentication check and redirect.
+     */
+    checkAuth: () => {
+      if (!isAuthenticated) {
+        const redirectUrl = preserveReturnUrl
+          ? `${redirectTo}?returnTo=${encodeURIComponent(location.pathname + location.search)}`
+          : redirectTo;
+
+        navigate(redirectUrl, {replace: true});
+        return;
+      }
+
+      if (!meetsAdditionalChecks) {
+        navigate(redirectTo, {replace: true});
+      }
+    },
+  };
+};
+
+/**
+ * Hook that provides functionality for handling return URLs after authentication.
+ *
+ * This hook is typically used on login/authentication pages to redirect users
+ * back to where they were trying to go before being redirected to sign in.
+ *
+ * @example
+ * ```tsx
+ * import { useReturnUrl } from '@asgardeo/react-router';
+ *
+ * function LoginPage() {
+ *   const { returnTo, navigateToReturnUrl } = useReturnUrl();
+ *   const { signIn } = useAsgardeo();
+ *
+ *   const handleSignIn = async () => {
+ *     await signIn();
+ *     navigateToReturnUrl(); // Redirects to original destination
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleSignIn}>Sign In</button>
+ *       {returnTo && <p>You'll be redirected to: {returnTo}</p>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export const useReturnUrl = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const searchParams = new URLSearchParams(location.search);
+  const returnTo = searchParams.get('returnTo');
+
+  const navigateToReturnUrl = (fallbackPath = '/') => {
+    const destination = returnTo || fallbackPath;
+    navigate(destination, {replace: true});
+  };
+
+  return {
+    /**
+     * The URL to return to after authentication, if available.
+     */
+    returnTo,
+    /**
+     * Function to navigate to the return URL or a fallback path.
+     */
+    navigateToReturnUrl,
+    /**
+     * Whether a return URL is available.
+     */
+    hasReturnUrl: Boolean(returnTo),
+  };
+};
+
+export default useAuthGuard;
diff --git a/packages/react-router/src/index.ts b/packages/react-router/src/index.ts
new file mode 100644
index 000000000..ef47bf9c8
--- /dev/null
+++ b/packages/react-router/src/index.ts
@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+
+// Components
+export {default as ProtectedRoute} from './components/ProtectedRoute';
+export * from './components/ProtectedRoute';
+
+export {default as withAuthentication} from './components/withAuthentication';
+export * from './components/withAuthentication';
+
+// Hooks
+export {default as useAuthGuard, useReturnUrl} from './hooks/useAuthGuard';
+export * from './hooks/useAuthGuard';
diff --git a/packages/react-router/tsconfig.json b/packages/react-router/tsconfig.json
new file mode 100644
index 000000000..59084d66b
--- /dev/null
+++ b/packages/react-router/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "extends": "../../tsconfig.json",
+  "compileOnSave": false,
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "jsx": "react-jsx",
+    "lib": ["ESNext", "DOM"],
+    "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/react-router/tsconfig.lib.json b/packages/react-router/tsconfig.lib.json
new file mode 100644
index 000000000..8d37e00df
--- /dev/null
+++ b/packages/react-router/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", "src/**/*.jsx", "src/**/*.tsx", "types/**/*.d.ts"]
+}
diff --git a/packages/react-router/tsconfig.spec.json b/packages/react-router/tsconfig.spec.json
new file mode 100644
index 000000000..5f578704e
--- /dev/null
+++ b/packages/react-router/tsconfig.spec.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "commonjs",
+    "types": ["vitest", "node"]
+  },
+  "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.test.js", "**/*.spec.js", "**/*.d.ts"]
+}
diff --git a/packages/react-router/vitest.config.ts b/packages/react-router/vitest.config.ts
new file mode 100644
index 000000000..dad7e1452
--- /dev/null
+++ b/packages/react-router/vitest.config.ts
@@ -0,0 +1,25 @@
+/**
+ * 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: {
+    environment: 'jsdom',
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bd376ef67..8f2dda332 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -387,6 +387,55 @@ importers:
         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)
 
+  packages/react-router:
+    dependencies:
+      '@asgardeo/react':
+        specifier: '>=0.3.0'
+        version: 0.4.0(@types/react@19.1.5)(react@19.1.0)
+      tslib:
+        specifier: ^2.8.1
+        version: 2.8.1
+    devDependencies:
+      '@types/node':
+        specifier: ^22.15.3
+        version: 22.15.30
+      '@types/react':
+        specifier: ^19.1.4
+        version: 19.1.5
+      '@types/react-router-dom':
+        specifier: ^5.3.3
+        version: 5.3.3
+      '@wso2/eslint-plugin':
+        specifier: 'catalog:'
+        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.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
+      eslint:
+        specifier: 8.57.0
+        version: 8.57.0
+      prettier:
+        specifier: ^2.6.2
+        version: 2.8.8
+      react:
+        specifier: ^19.1.0
+        version: 19.1.0
+      react-router-dom:
+        specifier: ^6.30.0
+        version: 6.30.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      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/vue:
     dependencies:
       '@asgardeo/auth-spa':
@@ -538,6 +587,9 @@ importers:
       '@asgardeo/react':
         specifier: workspace:^
         version: link:../../packages/react
+      '@asgardeo/react-router':
+        specifier: workspace:^
+        version: link:../../packages/react-router
       '@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)
@@ -702,9 +754,21 @@ packages:
   '@asgardeo/auth-spa@3.2.0':
     resolution: {integrity: sha512-ptNeWyccApqpMVi9t1RYI95d0/jCS1Zs7qh9uU2c9FbTIquv2xMbJZhUCmU9Ana3IC+ouS53amxcUGZSVrh58g==}
 
+  '@asgardeo/browser@0.1.0':
+    resolution: {integrity: sha512-NnixHJogUn47vw8Csmw5jN79aHJd+JBwG9nmcZaW9tz/FPg0ZBbKCryDagLRqMdFNewNYNBbsZw1KQ87LnNRrg==}
+
+  '@asgardeo/javascript@0.1.0':
+    resolution: {integrity: sha512-FKyK4bdrBbAZLOu+GeWUyrXwHABJq/8RMyZivaf6JEFeMJx2ttDTzGyIGv0FZfIXrEQNkr3PBBRztoiYTYrimA==}
+
   '@asgardeo/js@0.1.3':
     resolution: {integrity: sha512-k7dtodvqqIXOcBUxqTPwm7ChdX5bWl2K70eFQDmnha4bNVcNrsNOzPt4rbIAntOjfUwJpg05YO/ZIV4lZwfB8Q==}
 
+  '@asgardeo/react@0.4.0':
+    resolution: {integrity: sha512-L6OrDo8uH/nAxdlALz0dTzSLudVTSFybSZezBHDi1R9+88g+/aCBEJfq+Z6CsEBd/ACu3HilgwN9QU2ZCCjF6g==}
+    peerDependencies:
+      '@types/react': '>=16.8.0'
+      react: '>=16.8.0'
+
   '@babel/code-frame@7.27.1':
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
@@ -2123,6 +2187,9 @@ packages:
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
+  '@types/history@4.7.11':
+    resolution: {integrity: sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -2170,6 +2237,12 @@ packages:
     peerDependencies:
       '@types/react': ^19.0.0
 
+  '@types/react-router-dom@5.3.3':
+    resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==}
+
+  '@types/react-router@5.1.20':
+    resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==}
+
   '@types/react@18.3.23':
     resolution: {integrity: sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==}
 
@@ -6855,6 +6928,29 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
+  '@asgardeo/browser@0.1.0(esbuild@0.25.4)':
+    dependencies:
+      '@asgardeo/javascript': 0.1.0
+      axios: 0.26.1
+      base64url: 3.0.1
+      buffer: 6.0.3
+      core-js: 3.42.0
+      crypto-browserify: 3.12.1
+      esbuild-plugin-polyfill-node: 0.3.0(esbuild@0.25.4)
+      fast-sha256: 1.3.0
+      jose: 6.0.11
+      process: 0.11.10
+      randombytes: 2.1.0
+      stream-browserify: 3.0.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - debug
+      - esbuild
+
+  '@asgardeo/javascript@0.1.0':
+    dependencies:
+      tslib: 2.8.1
+
   '@asgardeo/js@0.1.3':
     dependencies:
       '@asgardeo/auth-js': 5.1.2
@@ -6862,6 +6958,20 @@ snapshots:
       lodash.isempty: 4.4.0
       lodash.merge: 4.6.2
 
+  '@asgardeo/react@0.4.0(@types/react@19.1.5)(react@19.1.0)':
+    dependencies:
+      '@asgardeo/browser': 0.1.0(esbuild@0.25.4)
+      '@floating-ui/react': 0.27.12(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@types/react': 19.1.5
+      '@types/react-dom': 19.1.5(@types/react@19.1.5)
+      clsx: 2.1.1
+      esbuild: 0.25.4
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - debug
+
   '@babel/code-frame@7.27.1':
     dependencies:
       '@babel/helper-validator-identifier': 7.27.1
@@ -8131,6 +8241,8 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
+  '@types/history@4.7.11': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/json5@0.0.29': {}
@@ -8176,6 +8288,17 @@ snapshots:
     dependencies:
       '@types/react': 19.1.5
 
+  '@types/react-router-dom@5.3.3':
+    dependencies:
+      '@types/history': 4.7.11
+      '@types/react': 19.1.5
+      '@types/react-router': 5.1.20
+
+  '@types/react-router@5.1.20':
+    dependencies:
+      '@types/history': 4.7.11
+      '@types/react': 19.1.5
+
   '@types/react@18.3.23':
     dependencies:
       '@types/prop-types': 15.7.15

From 5d72d89325fff14c9cda0c6949346d06b993cd4d Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 14:58:33 +0530
Subject: [PATCH 46/96] feat(react): add SignIn route and enhance
 ProtectedRoute component for better authentication handling

---
 packages/react-router/README.md               |  95 +++++++----
 packages/react-router/esbuild.config.mjs      |   8 +
 packages/react-router/package.json            |   4 +-
 .../src/components/ProtectedRoute.tsx         | 156 ++++++------------
 packages/react-router/tsconfig.eslint.json    |   4 +
 packages/react-router/tsconfig.json           |   3 +-
 packages/react-router/tsconfig.lib.json       |  10 +-
 packages/react-router/tsconfig.spec.json      |  10 +-
 8 files changed, 149 insertions(+), 141 deletions(-)
 create mode 100644 packages/react-router/tsconfig.eslint.json

diff --git a/packages/react-router/README.md b/packages/react-router/README.md
index f235d7e2f..b72a7625b 100644
--- a/packages/react-router/README.md
+++ b/packages/react-router/README.md
@@ -47,6 +47,7 @@ import { AsgardeoProvider } from '@asgardeo/react';
 import { ProtectedRoute } from '@asgardeo/react-router';
 import Dashboard from './components/Dashboard';
 import Profile from './components/Profile';
+import SignIn from './components/SignIn';
 
 function App() {
   return (
@@ -57,13 +58,22 @@ function App() {
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<div>Public Home Page</div>} />
-          <ProtectedRoute 
+          <Route path="/signin" element={<SignIn />} />
+          <Route 
             path="/dashboard" 
-            element={<Dashboard />} 
+            element={
+              <ProtectedRoute redirectTo="/signin">
+                <Dashboard />
+              </ProtectedRoute>
+            } 
           />
-          <ProtectedRoute 
+          <Route 
             path="/profile" 
-            element={<Profile />} 
+            element={
+              <ProtectedRoute redirectTo="/signin">
+                <Profile />
+              </ProtectedRoute>
+            } 
           />
         </Routes>
       </BrowserRouter>
@@ -80,29 +90,41 @@ export default App;
 import { ProtectedRoute } from '@asgardeo/react-router';
 
 // Redirect to custom login page
-<ProtectedRoute 
+<Route 
   path="/dashboard" 
-  element={<Dashboard />}
-  redirectTo="/login"
+  element={
+    <ProtectedRoute redirectTo="/login">
+      <Dashboard />
+    </ProtectedRoute>
+  }
 />
 
 // Custom fallback component
-<ProtectedRoute 
+<Route 
   path="/dashboard" 
-  element={<Dashboard />}
-  fallback={
-    <div className="auth-required">
-      <h2>Please sign in</h2>
-      <p>You need to be signed in to access this page.</p>
-    </div>
+  element={
+    <ProtectedRoute fallback={
+      <div className="auth-required">
+        <h2>Please sign in</h2>
+        <p>You need to be signed in to access this page.</p>
+      </div>
+    }>
+      <Dashboard />
+    </ProtectedRoute>
   }
 />
 
 // Custom loading state
-<ProtectedRoute 
+<Route 
   path="/dashboard" 
-  element={<Dashboard />}
-  loadingElement={<div className="spinner">Loading...</div>}
+  element={
+    <ProtectedRoute 
+      redirectTo="/signin"
+      loadingElement={<div className="spinner">Loading...</div>}
+    >
+      <Dashboard />
+    </ProtectedRoute>
+  }
 />
 ```
 
@@ -112,11 +134,11 @@ import { ProtectedRoute } from '@asgardeo/react-router';
 
 #### ProtectedRoute
 
-A wrapper around React Router's `Route` component that protects routes based on authentication status.
+A component that protects routes based on authentication status. Should be used as the element prop of a Route component.
 
 ```tsx
-interface ProtectedRouteProps extends Omit<RouteProps, 'element'> {
-  element: React.ReactElement;
+interface ProtectedRouteProps {
+  children: React.ReactElement;
   fallback?: React.ReactElement;
   redirectTo?: string;
   showLoading?: boolean;
@@ -126,12 +148,14 @@ interface ProtectedRouteProps extends Omit<RouteProps, 'element'> {
 
 **Props:**
 
-- `element` - The component to render when authenticated
-- `fallback` - Custom component to render when not authenticated
-- `redirectTo` - URL to redirect to when not authenticated
+- `children` - The component to render when authenticated
+- `fallback` - Custom component to render when not authenticated (takes precedence over redirectTo)
+- `redirectTo` - URL to redirect to when not authenticated (required unless fallback is provided)
 - `showLoading` - Whether to show loading state (default: `true`)
 - `loadingElement` - Custom loading component
 
+**Note:** Either `fallback` or `redirectTo` must be provided to handle unauthenticated users.
+
 #### withAuthentication
 
 Higher-order component that wraps any component with authentication protection.
@@ -291,20 +315,33 @@ function App() {
         {/* Public routes */}
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
+        <Route path="/signin" element={<SignIn />} />
         
         {/* Protected routes with layout */}
         <Route path="/app" element={<AppLayout />}>
-          <ProtectedRoute 
+          <Route 
             path="dashboard" 
-            element={<Dashboard />} 
+            element={
+              <ProtectedRoute redirectTo="/signin">
+                <Dashboard />
+              </ProtectedRoute>
+            } 
           />
-          <ProtectedRoute 
+          <Route 
             path="profile" 
-            element={<Profile />} 
+            element={
+              <ProtectedRoute redirectTo="/signin">
+                <Profile />
+              </ProtectedRoute>
+            } 
           />
-          <ProtectedRoute 
+          <Route 
             path="settings" 
-            element={<Settings />} 
+            element={
+              <ProtectedRoute redirectTo="/signin">
+                <Settings />
+              </ProtectedRoute>
+            } 
           />
         </Route>
       </Routes>
diff --git a/packages/react-router/esbuild.config.mjs b/packages/react-router/esbuild.config.mjs
index 39b81fb6f..efecbbeb8 100644
--- a/packages/react-router/esbuild.config.mjs
+++ b/packages/react-router/esbuild.config.mjs
@@ -18,6 +18,7 @@
 
 import {readFileSync} from 'fs';
 import {build} from 'esbuild';
+import {preserveDirectivesPlugin} from 'esbuild-plugin-preserve-directives';
 
 const pkg = JSON.parse(readFileSync('./package.json', 'utf8'));
 
@@ -27,6 +28,13 @@ const commonOptions = {
   external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
   metafile: true,
   platform: 'browser',
+  plugins: [
+    preserveDirectivesPlugin({
+      directives: ['use client', 'use strict'],
+      include: /\.(js|ts|jsx|tsx)$/,
+      exclude: /node_modules/,
+    }),
+  ],
   target: ['es2020'],
 };
 
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index 61a7cfc4c..2ab25b12a 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -39,6 +39,7 @@
     "fix:lint": "eslint . --ext .js,.jsx,.ts,.tsx,.cjs,.mjs",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.cjs,.mjs",
     "test": "vitest",
+    "test:browser": "vitest --workspace=vitest.workspace.ts",
     "typecheck": "tsc -p tsconfig.lib.json"
   },
   "devDependencies": {
@@ -47,6 +48,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@wso2/eslint-plugin": "catalog:",
     "@wso2/prettier-config": "catalog:",
+    "esbuild-plugin-preserve-directives": "^0.0.11",
     "esbuild": "^0.25.4",
     "eslint": "8.57.0",
     "prettier": "^2.6.2",
@@ -57,7 +59,7 @@
     "vitest": "^3.1.3"
   },
   "peerDependencies": {
-    "@asgardeo/react": ">=0.3.0",
+    "@asgardeo/react": "workspace:^",
     "@types/react": ">=16.8.0",
     "react": ">=16.8.0",
     "react-router-dom": ">=6.0.0"
diff --git a/packages/react-router/src/components/ProtectedRoute.tsx b/packages/react-router/src/components/ProtectedRoute.tsx
index 8cd1189cb..6e4d9add3 100644
--- a/packages/react-router/src/components/ProtectedRoute.tsx
+++ b/packages/react-router/src/components/ProtectedRoute.tsx
@@ -17,7 +17,7 @@
  */
 
 import React from 'react';
-import {Navigate, Route, RouteProps} from 'react-router-dom';
+import {Navigate} from 'react-router-dom';
 import {useAsgardeo} from '@asgardeo/react';
 
 /**
@@ -27,15 +27,15 @@ export interface ProtectedRouteProps {
   /**
    * The element to render when the user is authenticated.
    */
-  element: React.ReactElement;
+  children: React.ReactElement;
   /**
    * Custom fallback element to render when the user is not authenticated.
-   * If not provided, will redirect to the sign-in URL or a default fallback.
+   * If provided, this takes precedence over redirectTo.
    */
   fallback?: React.ReactElement;
   /**
    * URL to redirect to when the user is not authenticated.
-   * If not provided and no fallback is specified, will use a default sign-in flow.
+   * Required unless a fallback element is provided.
    */
   redirectTo?: string;
   /**
@@ -47,137 +47,81 @@ export interface ProtectedRouteProps {
    * Custom loading element to render while authentication status is being determined.
    */
   loadingElement?: React.ReactElement;
-  /**
-   * The path prop for the route.
-   */
-  path?: string;
-  /**
-   * Additional route props that are safe to pass through.
-   */
-  caseSensitive?: boolean;
-  children?: React.ReactNode;
-  id?: string;
 }
 
 /**
- * A wrapper around React Router's Route component that protects routes based on authentication status.
+ * A protected route component that requires authentication to access.
  *
- * This component integrates with the Asgardeo React SDK to automatically redirect
- * unauthenticated users and render protected content only for authenticated users.
+ * This component should be used as the element prop of a Route component.
+ * It checks authentication status and either renders the protected content,
+ * shows a loading state, redirects, or shows a fallback.
  *
- * @example
- * ```tsx
- * import { ProtectedRoute } from '@asgardeo/react-router';
- * import { BrowserRouter, Routes } from 'react-router-dom';
- * import Dashboard from './Dashboard';
+ * Either a `redirectTo` prop or a `fallback` prop must be provided to handle
+ * unauthenticated users.
  *
- * function App() {
- *   return (
- *     <BrowserRouter>
- *       <Routes>
- *         <ProtectedRoute
- *           path="/dashboard"
- *           element={<Dashboard />}
- *         />
- *       </Routes>
- *     </BrowserRouter>
- *   );
- * }
- * ```
- *
- * @example With custom fallback
+ * @example Basic usage with redirect
  * ```tsx
- * <ProtectedRoute
+ * <Route
  *   path="/dashboard"
- *   element={<Dashboard />}
- *   fallback={<div>Please sign in to access this page</div>}
+ *   element={
+ *     <ProtectedRoute redirectTo="/signin">
+ *       <Dashboard />
+ *     </ProtectedRoute>
+ *   }
  * />
  * ```
  *
- * @example With redirect
+ * @example With custom fallback
  * ```tsx
- * <ProtectedRoute
- *   path="/dashboard"
- *   element={<Dashboard />}
- *   redirectTo="/login"
+ * <Route
+ *   path="/admin"
+ *   element={
+ *     <ProtectedRoute fallback={<div>Access denied</div>}>
+ *       <AdminPanel />
+ *     </ProtectedRoute>
+ *   }
  * />
  * ```
  */
 const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
-  element,
+  children,
   fallback,
   redirectTo,
   showLoading = true,
   loadingElement,
-  path,
-  caseSensitive,
-  children,
-  id,
 }) => {
-  // Create a wrapper component to use the hook within React Router context
-  const ProtectedElement: React.FC = () => {
-    const {isSignedIn, isLoading, signIn} = useAsgardeo();
-
-    // Show loading state while authentication status is being determined
-    if (isLoading && showLoading) {
-      if (loadingElement) {
-        return loadingElement;
-      }
-      return (
-        <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh'}}>
-          <div>Loading...</div>
-        </div>
-      );
-    }
-
-    // If user is authenticated, render the protected element
-    if (isSignedIn) {
-      return element;
-    }
+  const {isSignedIn, isLoading, signIn} = useAsgardeo();
 
-    // If user is not authenticated, handle fallback/redirect
-    if (fallback) {
-      return fallback;
+  // Show loading state while authentication status is being determined
+  if (isLoading && showLoading) {
+    if (loadingElement) {
+      return loadingElement;
     }
-
-    if (redirectTo) {
-      return <Navigate to={redirectTo} replace />;
-    }
-
-    // Default behavior: trigger sign-in flow
     return (
       <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh'}}>
-        <div>
-          <h2>Authentication Required</h2>
-          <p>You need to sign in to access this page.</p>
-          <button
-            onClick={() => signIn()}
-            style={{
-              padding: '10px 20px',
-              backgroundColor: '#007bff',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: 'pointer',
-            }}
-          >
-            Sign In
-          </button>
-        </div>
+        <div>Loading...</div>
       </div>
     );
-  };
+  }
+
+  // If user is authenticated, render the protected content
+  if (isSignedIn) {
+    return children;
+  }
+
+  // If user is not authenticated, handle fallback/redirect
+  if (fallback) {
+    return fallback;
+  }
 
-  // Pass only the safe props to Route
-  const routeProps: RouteProps = {
-    path,
-    element: <ProtectedElement />,
-    ...(caseSensitive !== undefined && {caseSensitive}),
-    ...(children && {children}),
-    ...(id && {id}),
-  };
+  if (redirectTo) {
+    return <Navigate to={redirectTo} replace />;
+  }
 
-  return <Route {...routeProps} />;
+  // If neither fallback nor redirectTo is provided, throw an error
+  throw new Error(
+    'ProtectedRoute: Either "fallback" or "redirectTo" prop must be provided to handle unauthenticated users.',
+  );
 };
 
 export default ProtectedRoute;
diff --git a/packages/react-router/tsconfig.eslint.json b/packages/react-router/tsconfig.eslint.json
new file mode 100644
index 000000000..d5eefbbbb
--- /dev/null
+++ b/packages/react-router/tsconfig.eslint.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["**/.*.js", "**/.*.cjs", "**/.*.ts", "**/*.js", "**/*.cjs", "**/*.ts"]
+}
diff --git a/packages/react-router/tsconfig.json b/packages/react-router/tsconfig.json
index 59084d66b..e9810e1f6 100644
--- a/packages/react-router/tsconfig.json
+++ b/packages/react-router/tsconfig.json
@@ -20,7 +20,8 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "paths": {}
   },
   "exclude": ["node_modules", "tmp", "dist"],
   "files": [],
diff --git a/packages/react-router/tsconfig.lib.json b/packages/react-router/tsconfig.lib.json
index 8d37e00df..ebe76743d 100644
--- a/packages/react-router/tsconfig.lib.json
+++ b/packages/react-router/tsconfig.lib.json
@@ -4,7 +4,9 @@
     "declaration": true,
     "outDir": "dist",
     "declarationDir": "dist",
-    "types": ["node"]
+    "types": ["node"],
+    "skipLibCheck": true,
+    "declarationMap": true
   },
   "exclude": [
     "**/*.spec.ts",
@@ -14,7 +16,9 @@
     "**/*.spec.js",
     "**/*.test.js",
     "**/*.spec.jsx",
-    "**/*.test.jsx"
+    "**/*.test.jsx",
+    "node_modules",
+    "dist"
   ],
-  "include": ["src/**/*.js", "src/**/*.ts", "src/**/*.jsx", "src/**/*.tsx", "types/**/*.d.ts"]
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
 }
diff --git a/packages/react-router/tsconfig.spec.json b/packages/react-router/tsconfig.spec.json
index 5f578704e..02752e3e6 100644
--- a/packages/react-router/tsconfig.spec.json
+++ b/packages/react-router/tsconfig.spec.json
@@ -5,5 +5,13 @@
     "module": "commonjs",
     "types": ["vitest", "node"]
   },
-  "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.test.js", "**/*.spec.js", "**/*.d.ts"]
+  "include": [
+    "test-configs",
+    "jest.config.js",
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.d.ts"
+  ]
 }

From 0aee96fd088b3bc04d52ea9cef69b1399db03e61 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 14:58:42 +0530
Subject: [PATCH 47/96] feat(react): integrate ProtectedRoute for secure access
 to dashboard and organization pages

---
 pnpm-lock.yaml                                | 56 ++-----------------
 samples/teamspace-react/package.json          |  3 +-
 samples/teamspace-react/src/App.tsx           | 33 +++++++----
 .../src/components/header/UserDropdown.tsx    |  4 +-
 4 files changed, 30 insertions(+), 66 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8f2dda332..cce7b048a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -390,8 +390,8 @@ importers:
   packages/react-router:
     dependencies:
       '@asgardeo/react':
-        specifier: '>=0.3.0'
-        version: 0.4.0(@types/react@19.1.5)(react@19.1.0)
+        specifier: workspace:^
+        version: link:../react
       tslib:
         specifier: ^2.8.1
         version: 2.8.1
@@ -414,6 +414,9 @@ importers:
       esbuild:
         specifier: ^0.25.4
         version: 0.25.4
+      esbuild-plugin-preserve-directives:
+        specifier: ^0.0.11
+        version: 0.0.11(esbuild@0.25.4)
       eslint:
         specifier: 8.57.0
         version: 8.57.0
@@ -754,21 +757,9 @@ packages:
   '@asgardeo/auth-spa@3.2.0':
     resolution: {integrity: sha512-ptNeWyccApqpMVi9t1RYI95d0/jCS1Zs7qh9uU2c9FbTIquv2xMbJZhUCmU9Ana3IC+ouS53amxcUGZSVrh58g==}
 
-  '@asgardeo/browser@0.1.0':
-    resolution: {integrity: sha512-NnixHJogUn47vw8Csmw5jN79aHJd+JBwG9nmcZaW9tz/FPg0ZBbKCryDagLRqMdFNewNYNBbsZw1KQ87LnNRrg==}
-
-  '@asgardeo/javascript@0.1.0':
-    resolution: {integrity: sha512-FKyK4bdrBbAZLOu+GeWUyrXwHABJq/8RMyZivaf6JEFeMJx2ttDTzGyIGv0FZfIXrEQNkr3PBBRztoiYTYrimA==}
-
   '@asgardeo/js@0.1.3':
     resolution: {integrity: sha512-k7dtodvqqIXOcBUxqTPwm7ChdX5bWl2K70eFQDmnha4bNVcNrsNOzPt4rbIAntOjfUwJpg05YO/ZIV4lZwfB8Q==}
 
-  '@asgardeo/react@0.4.0':
-    resolution: {integrity: sha512-L6OrDo8uH/nAxdlALz0dTzSLudVTSFybSZezBHDi1R9+88g+/aCBEJfq+Z6CsEBd/ACu3HilgwN9QU2ZCCjF6g==}
-    peerDependencies:
-      '@types/react': '>=16.8.0'
-      react: '>=16.8.0'
-
   '@babel/code-frame@7.27.1':
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
@@ -6928,29 +6919,6 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
-  '@asgardeo/browser@0.1.0(esbuild@0.25.4)':
-    dependencies:
-      '@asgardeo/javascript': 0.1.0
-      axios: 0.26.1
-      base64url: 3.0.1
-      buffer: 6.0.3
-      core-js: 3.42.0
-      crypto-browserify: 3.12.1
-      esbuild-plugin-polyfill-node: 0.3.0(esbuild@0.25.4)
-      fast-sha256: 1.3.0
-      jose: 6.0.11
-      process: 0.11.10
-      randombytes: 2.1.0
-      stream-browserify: 3.0.0
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - debug
-      - esbuild
-
-  '@asgardeo/javascript@0.1.0':
-    dependencies:
-      tslib: 2.8.1
-
   '@asgardeo/js@0.1.3':
     dependencies:
       '@asgardeo/auth-js': 5.1.2
@@ -6958,20 +6926,6 @@ snapshots:
       lodash.isempty: 4.4.0
       lodash.merge: 4.6.2
 
-  '@asgardeo/react@0.4.0(@types/react@19.1.5)(react@19.1.0)':
-    dependencies:
-      '@asgardeo/browser': 0.1.0(esbuild@0.25.4)
-      '@floating-ui/react': 0.27.12(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      '@types/react': 19.1.5
-      '@types/react-dom': 19.1.5(@types/react@19.1.5)
-      clsx: 2.1.1
-      esbuild: 0.25.4
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - debug
-
   '@babel/code-frame@7.27.1':
     dependencies:
       '@babel/helper-validator-identifier': 7.27.1
diff --git a/samples/teamspace-react/package.json b/samples/teamspace-react/package.json
index b2427936a..3a5588116 100644
--- a/samples/teamspace-react/package.json
+++ b/samples/teamspace-react/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@asgardeo/react": "workspace:^",
+    "@asgardeo/react-router": "workspace:^",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "class-variance-authority": "^0.7.1",
@@ -39,4 +40,4 @@
     "typescript-eslint": "^8.30.1",
     "vite": "^6.3.5"
   }
-}
+}
\ No newline at end of file
diff --git a/samples/teamspace-react/src/App.tsx b/samples/teamspace-react/src/App.tsx
index 42a70afe7..9bd3d46d3 100644
--- a/samples/teamspace-react/src/App.tsx
+++ b/samples/teamspace-react/src/App.tsx
@@ -2,6 +2,7 @@
 
 import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
 import {useState, createContext, useContext} from 'react';
+import {ProtectedRoute} from '@asgardeo/react-router';
 import DashboardPage from './pages/Dashboard';
 import ProfilePage from './pages/Profile';
 import OrganizationsPage from './pages/Organizations';
@@ -129,33 +130,41 @@ function App() {
           <Route
             path="/dashboard"
             element={
-              <DashboardLayout>
-                <DashboardPage />
-              </DashboardLayout>
+              <ProtectedRoute redirectTo="/signin">
+                <DashboardLayout>
+                  <DashboardPage />
+                </DashboardLayout>
+              </ProtectedRoute>
             }
           />
           <Route
             path="/profile"
             element={
-              <DashboardLayout>
-                <ProfilePage />
-              </DashboardLayout>
+              <ProtectedRoute redirectTo="/signin">
+                <DashboardLayout>
+                  <ProfilePage />
+                </DashboardLayout>
+              </ProtectedRoute>
             }
           />
           <Route
             path="/organizations"
             element={
-              <DashboardLayout>
-                <OrganizationsPage />
-              </DashboardLayout>
+              <ProtectedRoute redirectTo="/signin">
+                <DashboardLayout>
+                  <OrganizationsPage />
+                </DashboardLayout>
+              </ProtectedRoute>
             }
           />
           <Route
             path="/organizations/new"
             element={
-              <DashboardLayout>
-                <CreateOrganizationPage />
-              </DashboardLayout>
+              <ProtectedRoute redirectTo="/signin">
+                <DashboardLayout>
+                  <CreateOrganizationPage />
+                </DashboardLayout>
+              </ProtectedRoute>
             }
           />
         </Routes>
diff --git a/samples/teamspace-react/src/components/header/UserDropdown.tsx b/samples/teamspace-react/src/components/header/UserDropdown.tsx
index 179a2b806..c50f36501 100644
--- a/samples/teamspace-react/src/components/header/UserDropdown.tsx
+++ b/samples/teamspace-react/src/components/header/UserDropdown.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import {ChevronDown, CogIcon, LogOut, Settings} from 'lucide-react';
-import {UserDropdown as _UserDropdown, SignOutButton, UserIcon, UserProfile} from '@asgardeo/react';
+import {ChevronDown, CogIcon, LogOut, Settings, UserIcon} from 'lucide-react';
+import {UserDropdown as _UserDropdown, SignOutButton, UserProfile} from '@asgardeo/react';
 import {PoundSterling} from 'lucide-react';
 import {useState, useRef} from 'react';
 import {Link} from 'react-router-dom';

From 37d1a31dace22ca34406c1adc673ebb7351ab6f4 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 15:29:32 +0530
Subject: [PATCH 48/96] feat: add Vite + React + TypeScript sample

- Introduced a new sample project using Vite, React, and TypeScript.
- Configured ESLint with recommended rules for TypeScript and React.
- Added Tailwind CSS for styling.
- Created basic routing with landing, sign-in, and sign-up pages.
- Implemented Asgardeo authentication provider.
- Included necessary configuration files for TypeScript and Vite.
- Added .gitignore and README for project setup instructions.
---
 packages/react/API.md               |    2 +
 packages/react/COMPLETE GUIDE.md    | 1123 +++++++++++++++++++++++++++
 pnpm-lock.yaml                      |   61 ++
 samples/teamspace-react/src/App.tsx |   33 +-
 4 files changed, 1198 insertions(+), 21 deletions(-)
 create mode 100644 packages/react/COMPLETE GUIDE.md

diff --git a/packages/react/API.md b/packages/react/API.md
index eacae61e1..bd295764d 100644
--- a/packages/react/API.md
+++ b/packages/react/API.md
@@ -13,6 +13,8 @@ This document provides complete API documentation for the Asgardeo React SDK, in
   - [SignOutButton](#signoutbutton)
   - [User](#user)
   - [UserProfile](#userprofile)
+  - [Loaded](#loaded)
+  - [Loading](#loading)
 - [Hooks](#hooks)
   - [useAsgardeo](#useasgardeo)
 - [Customization](#customization)
diff --git a/packages/react/COMPLETE GUIDE.md b/packages/react/COMPLETE GUIDE.md
new file mode 100644
index 000000000..7d5c3cafb
--- /dev/null
+++ b/packages/react/COMPLETE GUIDE.md	
@@ -0,0 +1,1123 @@
+# @asgardeo/react - Complete Guide
+
+A comprehensive guide to building React applications with Asgardeo authentication using the official Asgardeo React SDK.
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Configuration](#configuration)
+- [Core Concepts](#core-concepts)
+- [Components](#components)
+- [Hooks](#hooks)
+- [Advanced Usage](#advanced-usage)
+- [Examples](#examples)
+- [Troubleshooting](#troubleshooting)
+- [API Reference](#api-reference)
+
+## Overview
+
+The `@asgardeo/react` SDK enables seamless authentication integration in React applications using Asgardeo Identity Server. It provides:
+
+- **Drop-in Components**: Pre-built UI components for authentication flows
+- **React Hooks**: Programmatic access to authentication state and methods
+- **Context Providers**: Global state management for authentication
+- **Customizable UI**: Theming and styling options
+- **TypeScript Support**: Full type safety and IntelliSense
+- **Modern React**: Support for React 16.8+ with hooks
+
+## Installation
+
+```bash
+# Using npm
+npm install @asgardeo/react
+
+# Using pnpm
+pnpm add @asgardeo/react
+
+# Using yarn
+yarn add @asgardeo/react
+```
+
+### Peer Dependencies
+
+The SDK requires the following peer dependencies:
+
+```json
+{
+  "@types/react": ">=16.8.0",
+  "react": ">=16.8.0"
+}
+```
+
+## Quick Start
+
+### 1. Set Up the Provider
+
+Wrap your application with `AsgardeoProvider` in your main entry file:
+
+#### Basic Setup
+
+```tsx
+// main.tsx or index.tsx
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { AsgardeoProvider } from '@asgardeo/react'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <AsgardeoProvider
+      baseUrl="https://api.asgardeo.io/t/your-org"
+      clientId="your-client-id"
+    >
+      <App />
+    </AsgardeoProvider>
+  </StrictMode>
+)
+```
+
+#### Advanced Setup
+
+```tsx
+// main.tsx or index.tsx
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { AsgardeoProvider } from '@asgardeo/react'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <AsgardeoProvider
+      baseUrl="https://api.asgardeo.io/t/your-org"
+      clientId="your-client-id"
+      afterSignInUrl="http://localhost:3000/dashboard"
+      afterSignOutUrl="http://localhost:3000"
+      scopes={['openid', 'profile', 'email']}
+    >
+      <App />
+    </AsgardeoProvider>
+  </StrictMode>
+)
+```
+
+### 2. Build Your App
+
+Use the authentication components and hooks in your application:
+
+```tsx
+// App.tsx
+import { SignedIn, SignedOut, SignInButton, SignOutButton, User } from '@asgardeo/react'
+
+function App() {
+  return (
+    <div className="app">
+      <SignedIn>
+        <div className="authenticated-content">
+          <User>
+            {({ user }) => (
+              <div className="welcome-message">
+                <h1>Welcome, {user.givenname}!</h1>
+                <p>{user.email}</p>
+              </div>
+            )}
+          </User>
+          <SignOutButton />
+        </div>
+      </SignedIn>
+      
+      <SignedOut>
+        <div className="public-content">
+          <h1>Welcome to Our App</h1>
+          <p>Please sign in to continue</p>
+          <SignInButton />
+        </div>
+      </SignedOut>
+    </div>
+  )
+}
+
+export default App
+```
+
+## Configuration
+
+### AsgardeoProvider Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `baseUrl` | `string` | ✅ | Your Asgardeo organization URL |
+| `clientId` | `string` | ✅ | Your application's client ID |
+| `afterSignInUrl` | `string` | ❌ | Redirect URL after successful sign-in |
+| `afterSignOutUrl` | `string` | ❌ | Redirect URL after sign-out |
+| `scopes` | `string[]` | ❌ | OAuth 2.0 scopes (default: `['openid', 'profile']`) |
+| `preferences` | `object` | ❌ | Theme and UI customization options |
+
+### Environment Variables
+
+For better security and flexibility, use environment variables:
+
+```tsx
+// .env
+VITE_ASGARDEO_BASE_URL=https://api.asgardeo.io/t/your-org
+VITE_ASGARDEO_CLIENT_ID=your-client-id
+VITE_ASGARDEO_AFTER_SIGN_IN_URL=http://localhost:3000/dashboard
+VITE_ASGARDEO_AFTER_SIGN_OUT_URL=http://localhost:3000
+
+// main.tsx
+<AsgardeoProvider
+  baseUrl={import.meta.env.VITE_ASGARDEO_BASE_URL}
+  clientId={import.meta.env.VITE_ASGARDEO_CLIENT_ID}
+  afterSignInUrl={import.meta.env.VITE_ASGARDEO_AFTER_SIGN_IN_URL}
+  afterSignOutUrl={import.meta.env.VITE_ASGARDEO_AFTER_SIGN_OUT_URL}
+  scopes={['openid', 'profile', 'email']}
+>
+  <App />
+</AsgardeoProvider>
+```
+
+## Core Concepts
+
+### Authentication State
+
+The SDK manages authentication state globally through React Context:
+
+- **Loading State**: While determining authentication status
+- **Signed In**: User is authenticated with valid tokens
+- **Signed Out**: User is not authenticated
+- **Error State**: Authentication errors or failures
+
+### Token Management
+
+Automatic handling of:
+- Access tokens for API calls
+- ID tokens for user information
+- Refresh tokens for session management
+- Token renewal and expiration
+
+### User Context
+
+Access to user information including:
+- Profile data (name, email, etc.)
+- Claims and attributes
+- Authentication metadata
+
+## Components
+
+### Control Components
+
+#### SignedIn
+
+Renders children only when the user is authenticated:
+
+```tsx
+import { SignedIn } from '@asgardeo/react'
+
+<SignedIn>
+  <div>This content is only visible to authenticated users</div>
+</SignedIn>
+```
+
+#### SignedOut
+
+Renders children only when the user is not authenticated:
+
+```tsx
+import { SignedOut } from '@asgardeo/react'
+
+<SignedOut>
+  <div>Please sign in to access this application</div>
+</SignedOut>
+```
+
+#### Loading
+
+Shows content while authentication state is being determined:
+
+```tsx
+import { Loading } from '@asgardeo/react'
+
+<Loading>
+  <div>Checking authentication status...</div>
+</Loading>
+```
+
+#### Loaded
+
+Shows content after authentication state has been determined:
+
+```tsx
+import { Loaded } from '@asgardeo/react'
+
+<Loaded>
+  <div>Authentication check complete</div>
+</Loaded>
+```
+
+### Action Components
+
+#### SignInButton
+
+Pre-built sign-in button:
+
+```tsx
+import { SignInButton } from '@asgardeo/react'
+
+// Basic usage
+<SignInButton />
+
+// With custom styling
+<SignInButton className="custom-signin-btn" />
+
+// With custom text
+<SignInButton>
+  Log In to Your Account
+</SignInButton>
+```
+
+#### SignOutButton
+
+Pre-built sign-out button:
+
+```tsx
+import { SignOutButton } from '@asgardeo/react'
+
+// Basic usage
+<SignOutButton />
+
+// With custom styling
+<SignOutButton className="custom-signout-btn" />
+
+// With custom text
+<SignOutButton>
+  Log Out
+</SignOutButton>
+```
+
+#### SignUpButton
+
+Pre-built sign-up button:
+
+```tsx
+import { SignUpButton } from '@asgardeo/react'
+
+<SignUpButton />
+```
+
+### Presentation Components
+
+#### User
+
+Access user information with render props:
+
+```tsx
+import { User } from '@asgardeo/react'
+
+<User>
+  {({ user, isLoading, error }) => {
+    if (isLoading) return <div>Loading user...</div>
+    if (error) return <div>Error: {error.message}</div>
+    
+    return (
+      <div>
+        <img src={user.photourl} alt={user.username} />
+        <h2>{user.givenname} {user.familyname}</h2>
+        <p>{user.email}</p>
+      </div>
+    )
+  }}
+</User>
+```
+
+#### UserProfile
+
+Complete user profile component:
+
+```tsx
+import { UserProfile } from '@asgardeo/react'
+
+// Basic usage
+<UserProfile />
+
+// With custom styling
+<UserProfile className="custom-profile" />
+```
+
+#### UserDropdown
+
+User menu dropdown component:
+
+```tsx
+import { UserDropdown } from '@asgardeo/react'
+
+<UserDropdown />
+```
+
+#### SignIn
+
+Complete sign-in form component:
+
+```tsx
+import { SignIn } from '@asgardeo/react'
+
+<SignIn 
+  onSuccess={(authData) => {
+    console.log('Sign-in successful:', authData)
+    // Handle successful sign-in
+  }}
+  onError={(error) => {
+    console.error('Sign-in failed:', error)
+    // Handle sign-in error
+  }}
+/>
+```
+
+#### SignUp
+
+Complete sign-up form component:
+
+```tsx
+import { SignUp } from '@asgardeo/react'
+
+<SignUp 
+  onSuccess={(authData) => {
+    console.log('Sign-up successful:', authData)
+  }}
+  onError={(error) => {
+    console.error('Sign-up failed:', error)
+  }}
+/>
+```
+
+### Primitive Components
+
+The SDK includes low-level UI primitives for building custom interfaces:
+
+- `Button` - Customizable button component
+- `TextField` - Text input field
+- `PasswordField` - Password input with visibility toggle
+- `Card` - Container component
+- `Alert` - Message display component
+- `Spinner` - Loading indicator
+- `Typography` - Text styling component
+
+```tsx
+import { Button, TextField, Card } from '@asgardeo/react'
+
+<Card>
+  <TextField placeholder="Enter your email" />
+  <Button>Submit</Button>
+</Card>
+```
+
+## Hooks
+
+### useAsgardeo
+
+Main hook for accessing authentication state and methods:
+
+```tsx
+import { useAsgardeo } from '@asgardeo/react'
+
+function MyComponent() {
+  const {
+    user,
+    isSignedIn,
+    isLoading,
+    error,
+    signIn,
+    signOut,
+    getAccessToken,
+    getIdToken,
+    refreshTokens
+  } = useAsgardeo()
+
+  const handleProtectedApiCall = async () => {
+    try {
+      const token = await getAccessToken()
+      const response = await fetch('/api/protected', {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      })
+      const data = await response.json()
+      console.log(data)
+    } catch (error) {
+      console.error('API call failed:', error)
+    }
+  }
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <div>
+      {isSignedIn ? (
+        <div>
+          <h1>Welcome, {user?.givenname}!</h1>
+          <button onClick={handleProtectedApiCall}>
+            Call Protected API
+          </button>
+          <button onClick={() => signOut()}>
+            Sign Out
+          </button>
+        </div>
+      ) : (
+        <button onClick={() => signIn()}>
+          Sign In
+        </button>
+      )}
+    </div>
+  )
+}
+```
+
+### useUser
+
+Access user-specific data and operations:
+
+```tsx
+import { useUser } from '@asgardeo/react'
+
+function UserComponent() {
+  const { user, isLoading, error, refreshUser } = useUser()
+
+  if (isLoading) return <div>Loading user data...</div>
+  if (error) return <div>Error: {error.message}</div>
+
+  return (
+    <div>
+      <h2>{user.givenname} {user.familyname}</h2>
+      <p>Email: {user.email}</p>
+      <p>Username: {user.username}</p>
+      <button onClick={refreshUser}>
+        Refresh User Data
+      </button>
+    </div>
+  )
+}
+```
+
+### useTheme
+
+Access and customize theme settings:
+
+```tsx
+import { useTheme } from '@asgardeo/react'
+
+function ThemedComponent() {
+  const { theme, setTheme } = useTheme()
+
+  return (
+    <div>
+      <p>Current theme mode: {theme.mode}</p>
+      <button onClick={() => setTheme({ mode: 'dark' })}>
+        Switch to Dark Mode
+      </button>
+    </div>
+  )
+}
+```
+
+### useI18n
+
+Internationalization support:
+
+```tsx
+import { useI18n } from '@asgardeo/react'
+
+function LocalizedComponent() {
+  const { t, language, setLanguage } = useI18n()
+
+  return (
+    <div>
+      <h1>{t('welcome.title')}</h1>
+      <p>{t('welcome.description')}</p>
+      <select 
+        value={language} 
+        onChange={(e) => setLanguage(e.target.value)}
+      >
+        <option value="en">English</option>
+        <option value="es">Español</option>
+      </select>
+    </div>
+  )
+}
+```
+
+## Advanced Usage
+
+### Custom Authentication Flow
+
+For advanced use cases, you can implement custom authentication flows:
+
+```tsx
+import { BaseSignIn } from '@asgardeo/react'
+
+function CustomSignIn() {
+  const handleInitialize = async () => {
+    // Custom initialization logic
+    return await initializeCustomAuth()
+  }
+
+  const handleSubmit = async (payload) => {
+    // Custom authentication handling
+    return await handleCustomAuth(payload)
+  }
+
+  const handleSuccess = (authData) => {
+    // Custom success handling
+    console.log('Authentication successful:', authData)
+    // Redirect or update UI
+  }
+
+  const handleError = (error) => {
+    // Custom error handling
+    console.error('Authentication failed:', error)
+    // Show error message
+  }
+
+  return (
+    <BaseSignIn
+      onInitialize={handleInitialize}
+      onSubmit={handleSubmit}
+      onSuccess={handleSuccess}
+      onError={handleError}
+      className="custom-signin-form"
+    />
+  )
+}
+```
+
+### Protected Routes
+
+Implement route protection with React Router:
+
+```tsx
+import { Navigate, useLocation } from 'react-router-dom'
+import { useAsgardeo } from '@asgardeo/react'
+
+function ProtectedRoute({ children }) {
+  const { isSignedIn, isLoading } = useAsgardeo()
+  const location = useLocation()
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (!isSignedIn) {
+    return <Navigate to="/login" state={{ from: location }} replace />
+  }
+
+  return children
+}
+
+// Usage
+<Routes>
+  <Route path="/login" element={<SignInPage />} />
+  <Route path="/dashboard" element={
+    <ProtectedRoute>
+      <Dashboard />
+    </ProtectedRoute>
+  } />
+</Routes>
+```
+
+### API Integration
+
+Integrate with protected APIs:
+
+```tsx
+import { useAsgardeo } from '@asgardeo/react'
+
+function useApi() {
+  const { getAccessToken } = useAsgardeo()
+
+  const apiCall = async (url, options = {}) => {
+    const token = await getAccessToken()
+    
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json',
+        ...options.headers
+      }
+    })
+
+    if (!response.ok) {
+      throw new Error(`API call failed: ${response.statusText}`)
+    }
+
+    return response.json()
+  }
+
+  return { apiCall }
+}
+
+// Usage in component
+function DataComponent() {
+  const { apiCall } = useApi()
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(false)
+
+  const fetchData = async () => {
+    setLoading(true)
+    try {
+      const result = await apiCall('/api/user-data')
+      setData(result)
+    } catch (error) {
+      console.error('Failed to fetch data:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div>
+      <button onClick={fetchData} disabled={loading}>
+        {loading ? 'Loading...' : 'Fetch Data'}
+      </button>
+      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
+    </div>
+  )
+}
+```
+
+### Theme Customization
+
+Customize the appearance of components:
+
+```tsx
+const customTheme = {
+  mode: 'light',
+  overrides: {
+    colors: {
+      primary: {
+        main: '#1976d2',
+        contrastText: '#ffffff'
+      },
+      secondary: {
+        main: '#dc004e',
+        contrastText: '#ffffff'
+      }
+    },
+    typography: {
+      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif'
+    },
+    spacing: {
+      unit: 8
+    }
+  }
+}
+
+<AsgardeoProvider
+  // ... other props
+  preferences={{
+    theme: customTheme
+  }}
+>
+  <App />
+</AsgardeoProvider>
+```
+
+### Error Handling
+
+Implement comprehensive error handling:
+
+```tsx
+import { useAsgardeo } from '@asgardeo/react'
+
+function ErrorBoundary({ children }) {
+  const { error, isLoading } = useAsgardeo()
+
+  if (error) {
+    return (
+      <div className="error-container">
+        <h2>Authentication Error</h2>
+        <p>{error.message}</p>
+        <button onClick={() => window.location.reload()}>
+          Retry
+        </button>
+      </div>
+    )
+  }
+
+  return children
+}
+
+function App() {
+  return (
+    <ErrorBoundary>
+      <div className="app">
+        {/* Your app content */}
+      </div>
+    </ErrorBoundary>
+  )
+}
+```
+
+## Examples
+
+### Complete Dashboard App
+
+```tsx
+import { 
+  AsgardeoProvider, 
+  SignedIn, 
+  SignedOut, 
+  useAsgardeo, 
+  User,
+  SignInButton,
+  SignOutButton 
+} from '@asgardeo/react'
+
+// Main App Component
+function App() {
+  return (
+    <AsgardeoProvider
+      baseUrl={import.meta.env.VITE_ASGARDEO_BASE_URL}
+      clientId={import.meta.env.VITE_ASGARDEO_CLIENT_ID}
+      afterSignInUrl="/dashboard"
+      afterSignOutUrl="/"
+      scopes={['openid', 'profile', 'email']}
+    >
+      <Layout />
+    </AsgardeoProvider>
+  )
+}
+
+// Layout Component
+function Layout() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header />
+      <main className="container mx-auto px-4 py-8">
+        <SignedIn>
+          <Dashboard />
+        </SignedIn>
+        <SignedOut>
+          <LandingPage />
+        </SignedOut>
+      </main>
+    </div>
+  )
+}
+
+// Header Component
+function Header() {
+  return (
+    <header className="bg-white shadow-sm border-b">
+      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
+        <h1 className="text-xl font-bold">My App</h1>
+        
+        <SignedIn>
+          <div className="flex items-center space-x-4">
+            <User>
+              {({ user }) => (
+                <span>Welcome, {user.givenname}!</span>
+              )}
+            </User>
+            <SignOutButton className="btn btn-outline" />
+          </div>
+        </SignedIn>
+        
+        <SignedOut>
+          <SignInButton className="btn btn-primary" />
+        </SignedOut>
+      </div>
+    </header>
+  )
+}
+
+// Dashboard Component
+function Dashboard() {
+  const { user, getAccessToken } = useAsgardeo()
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(false)
+
+  const fetchUserData = async () => {
+    setLoading(true)
+    try {
+      const token = await getAccessToken()
+      const response = await fetch('/api/user/profile', {
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      })
+      const userData = await response.json()
+      setData(userData)
+    } catch (error) {
+      console.error('Failed to fetch user data:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchUserData()
+  }, [])
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-2xl font-bold mb-4">Dashboard</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <h3 className="font-semibold mb-2">Profile Information</h3>
+            <p><strong>Name:</strong> {user?.givenname} {user?.familyname}</p>
+            <p><strong>Email:</strong> {user?.email}</p>
+            <p><strong>Username:</strong> {user?.username}</p>
+          </div>
+          
+          <div>
+            <h3 className="font-semibold mb-2">Additional Data</h3>
+            {loading ? (
+              <p>Loading...</p>
+            ) : data ? (
+              <pre className="text-sm bg-gray-100 p-2 rounded">
+                {JSON.stringify(data, null, 2)}
+              </pre>
+            ) : (
+              <p>No additional data available</p>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Landing Page Component
+function LandingPage() {
+  return (
+    <div className="text-center space-y-8">
+      <div className="space-y-4">
+        <h1 className="text-4xl font-bold text-gray-900">
+          Welcome to My App
+        </h1>
+        <p className="text-xl text-gray-600">
+          A secure application powered by Asgardeo
+        </p>
+      </div>
+      
+      <div className="space-y-4">
+        <SignInButton className="btn btn-primary btn-lg">
+          Get Started - Sign In
+        </SignInButton>
+        <p className="text-sm text-gray-500">
+          Don't have an account? Contact your administrator.
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default App
+```
+
+### Multi-Step Authentication Flow
+
+```tsx
+import { BaseSignIn, useFlow } from '@asgardeo/react'
+
+function MultiStepAuth() {
+  const { currentStep, messages } = useFlow()
+
+  const handleInitialize = async () => {
+    return await initializeAuthFlow()
+  }
+
+  const handleSubmit = async (payload) => {
+    return await processAuthStep(payload)
+  }
+
+  const handleSuccess = (authData) => {
+    // Redirect to dashboard
+    window.location.href = '/dashboard'
+  }
+
+  const handleError = (error) => {
+    console.error('Authentication error:', error)
+  }
+
+  return (
+    <div className="auth-container">
+      <div className="auth-card">
+        <h2>Sign In</h2>
+        
+        {messages.map((message, index) => (
+          <div key={index} className={`alert alert-${message.type.toLowerCase()}`}>
+            {message.message}
+          </div>
+        ))}
+        
+        <BaseSignIn
+          onInitialize={handleInitialize}
+          onSubmit={handleSubmit}
+          onSuccess={handleSuccess}
+          onError={handleError}
+          className="signin-form"
+        />
+        
+        <div className="auth-footer">
+          <p>Step {currentStep?.stepType || 1} of the authentication process</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+```
+
+## Troubleshooting
+
+### Common Issues
+
+#### 1. "useAsgardeo must be used within AsgardeoProvider"
+
+**Problem**: Hook is used outside of provider context.
+
+**Solution**: Ensure your component is wrapped with `AsgardeoProvider`:
+
+```tsx
+// ❌ Wrong
+function App() {
+  const { isSignedIn } = useAsgardeo() // Error!
+  return <div>App</div>
+}
+
+// ✅ Correct
+function App() {
+  return (
+    <AsgardeoProvider baseUrl="..." clientId="...">
+      <MyComponent />
+    </AsgardeoProvider>
+  )
+}
+
+function MyComponent() {
+  const { isSignedIn } = useAsgardeo() // Works!
+  return <div>Component</div>
+}
+```
+
+#### 2. Infinite loading state
+
+**Problem**: Authentication state never resolves.
+
+**Solution**: Check configuration and network connectivity:
+
+```tsx
+// Add error handling
+const { isLoading, error } = useAsgardeo()
+
+if (error) {
+  console.error('Auth error:', error)
+  // Handle error appropriately
+}
+```
+
+#### 3. CORS errors
+
+**Problem**: Cross-origin requests blocked.
+
+**Solution**: Configure CORS in your Asgardeo application settings or use a proxy during development.
+
+#### 4. Token expiration
+
+**Problem**: API calls fail due to expired tokens.
+
+**Solution**: Implement automatic token refresh:
+
+```tsx
+const { refreshTokens, getAccessToken } = useAsgardeo()
+
+const apiCall = async (url, options) => {
+  try {
+    const token = await getAccessToken()
+    return await fetch(url, {
+      ...options,
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        ...options.headers
+      }
+    })
+  } catch (error) {
+    if (error.status === 401) {
+      await refreshTokens()
+      const newToken = await getAccessToken()
+      return await fetch(url, {
+        ...options,
+        headers: {
+          'Authorization': `Bearer ${newToken}`,
+          ...options.headers
+        }
+      })
+    }
+    throw error
+  }
+}
+```
+
+### Debugging Tips
+
+1. **Enable Debug Logs**: Set up console logging for authentication events
+2. **Check Network Tab**: Verify API calls and responses
+3. **Validate Configuration**: Ensure all required props are provided
+4. **Test in Incognito**: Rule out cache/storage issues
+5. **Check Asgardeo Console**: Verify application configuration
+
+## API Reference
+
+For complete API documentation including all components, hooks, and customization options, see [API.md](./API.md).
+
+### Key Exports
+
+```typescript
+// Providers
+export { AsgardeoProvider } from '@asgardeo/react'
+
+// Hooks
+export { useAsgardeo, useUser, useTheme, useI18n } from '@asgardeo/react'
+
+// Control Components
+export { SignedIn, SignedOut, Loading, Loaded } from '@asgardeo/react'
+
+// Action Components
+export { SignInButton, SignOutButton, SignUpButton } from '@asgardeo/react'
+
+// Presentation Components
+export { SignIn, SignUp, User, UserProfile, UserDropdown } from '@asgardeo/react'
+
+// Primitive Components
+export { Button, TextField, Card, Alert, Spinner } from '@asgardeo/react'
+```
+
+### TypeScript Support
+
+The SDK is written in TypeScript and provides full type definitions:
+
+```typescript
+import type { 
+  AsgardeoProviderProps,
+  User,
+  AuthState,
+  SignInOptions,
+  ThemeConfig 
+} from '@asgardeo/react'
+```
+
+---
+
+## Support
+
+- **Documentation**: [Complete API Reference](./API.md)
+- **GitHub Issues**: [Report bugs or request features](https://github.com/asgardeo/web-ui-sdks/issues)
+- **Community**: [Join the discussion](https://github.com/asgardeo/web-ui-sdks/discussions)
+
+## License
+
+This project is licensed under the Apache License 2.0. See [LICENSE](../../LICENSE) for details.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cce7b048a..eeb3a70ab 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -670,6 +670,67 @@ importers:
         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)
 
+  samples/vite-react-ts:
+    dependencies:
+      '@asgardeo/react':
+        specifier: workspace:^
+        version: link:../../packages/react
+      '@asgardeo/react-router':
+        specifier: workspace:^
+        version: link:../../packages/react-router
+      '@tailwindcss/vite':
+        specifier: ^4.1.8
+        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))
+      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)
+      tailwindcss:
+        specifier: ^4.1.8
+        version: 4.1.8
+    devDependencies:
+      '@eslint/js':
+        specifier: ^9.25.0
+        version: 9.28.0
+      '@types/react':
+        specifier: ^19.1.2
+        version: 19.1.5
+      '@types/react-dom':
+        specifier: ^19.1.2
+        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@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
+      eslint:
+        specifier: ^9.25.0
+        version: 9.28.0(jiti@2.4.2)
+      eslint-plugin-react-hooks:
+        specifier: ^5.2.0
+        version: 5.2.0(eslint@9.28.0(jiti@2.4.2))
+      eslint-plugin-react-refresh:
+        specifier: ^0.4.19
+        version: 0.4.20(eslint@9.28.0(jiti@2.4.2))
+      globals:
+        specifier: ^16.0.0
+        version: 16.1.0
+      typescript:
+        specifier: ~5.8.3
+        version: 5.8.3
+      typescript-eslint:
+        specifier: ^8.30.1
+        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@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
+
 packages:
 
   '@algolia/autocomplete-core@1.17.7':
diff --git a/samples/teamspace-react/src/App.tsx b/samples/teamspace-react/src/App.tsx
index 9bd3d46d3..42a70afe7 100644
--- a/samples/teamspace-react/src/App.tsx
+++ b/samples/teamspace-react/src/App.tsx
@@ -2,7 +2,6 @@
 
 import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
 import {useState, createContext, useContext} from 'react';
-import {ProtectedRoute} from '@asgardeo/react-router';
 import DashboardPage from './pages/Dashboard';
 import ProfilePage from './pages/Profile';
 import OrganizationsPage from './pages/Organizations';
@@ -130,41 +129,33 @@ function App() {
           <Route
             path="/dashboard"
             element={
-              <ProtectedRoute redirectTo="/signin">
-                <DashboardLayout>
-                  <DashboardPage />
-                </DashboardLayout>
-              </ProtectedRoute>
+              <DashboardLayout>
+                <DashboardPage />
+              </DashboardLayout>
             }
           />
           <Route
             path="/profile"
             element={
-              <ProtectedRoute redirectTo="/signin">
-                <DashboardLayout>
-                  <ProfilePage />
-                </DashboardLayout>
-              </ProtectedRoute>
+              <DashboardLayout>
+                <ProfilePage />
+              </DashboardLayout>
             }
           />
           <Route
             path="/organizations"
             element={
-              <ProtectedRoute redirectTo="/signin">
-                <DashboardLayout>
-                  <OrganizationsPage />
-                </DashboardLayout>
-              </ProtectedRoute>
+              <DashboardLayout>
+                <OrganizationsPage />
+              </DashboardLayout>
             }
           />
           <Route
             path="/organizations/new"
             element={
-              <ProtectedRoute redirectTo="/signin">
-                <DashboardLayout>
-                  <CreateOrganizationPage />
-                </DashboardLayout>
-              </ProtectedRoute>
+              <DashboardLayout>
+                <CreateOrganizationPage />
+              </DashboardLayout>
             }
           />
         </Routes>

From 9b3536109e524792ed6871d576786a8c58e89228 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 20:12:09 +0530
Subject: [PATCH 49/96] feat: Enhance OIDC request handling and improve
 sign-in/sign-out components

- Added INTERNAL_LOGIN scope to OIDCRequestConstants for enhanced authentication options.
- Updated ScopeConstants to include INTERNAL_LOGIN scope.
- Refactored processOpenIDScopes utility to handle scope processing more robustly.
- Simplified AsgardeoReactClient initialization by directly passing config to AuthAPI.
- Improved BaseSignInButton and BaseSignOutButton components by reordering props for consistency.
- Enhanced SignIn and SignOut components to streamline authentication flow and error handling.
- Updated BaseSignIn and BaseSignOut components to include additional props for better customization.
- Refactored BaseSignInContent to improve readability and maintainability, including better error handling and flow management.
- Cleaned up imports and ensured consistent usage of TypeScript types across components.
---
 .../__legacy__/clients/main-thread-client.ts  | 220 +++++-------
 .../src/constants/OIDCRequestConstants.ts     |   4 +-
 .../src/constants/ScopeConstants.ts           |  14 +-
 .../src/utils/processOpenIDScopes.ts          |  24 +-
 packages/react/src/AsgardeoReactClient.ts     |  15 +-
 .../actions/SignInButton/BaseSignInButton.tsx |  14 +-
 .../actions/SignInButton/SignInButton.tsx     |   4 +-
 .../SignOutButton/BaseSignOutButton.tsx       |  14 +-
 .../actions/SignOutButton/SignOutButton.tsx   |   6 +-
 .../actions/SignUpButton/BaseSignUpButton.tsx |  14 +-
 .../actions/SignUpButton/SignUpButton.tsx     |   6 +-
 .../presentation/SignIn/BaseSignIn.tsx        | 326 ++++++++----------
 .../components/presentation/SignIn/SignIn.tsx |  29 +-
 .../src/contexts/Asgardeo/AsgardeoContext.ts  |   7 +-
 .../contexts/Asgardeo/AsgardeoProvider.tsx    |  25 +-
 15 files changed, 337 insertions(+), 385 deletions(-)

diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index 0abfa4451..23bc51376 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -1,7 +1,7 @@
 /**
- * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
  *
- * WSO2 Inc. licenses this file to you under the Apache License,
+ * 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
@@ -31,10 +31,11 @@ import {
   extractPkceStorageKeyFromState,
   initializeApplicationNativeAuthentication,
   handleApplicationNativeAuthentication,
-  TemporaryStore,
 } from '@asgardeo/javascript';
 import {SILENT_SIGN_IN_STATE, TOKEN_REQUEST_CONFIG_KEY} from '../constants';
-import {AuthenticationHelper, SPAHelper, SessionManagementHelper} from '../helpers';
+import {AuthenticationHelper} from '../helpers/authentication-helper';
+import {SessionManagementHelper} from '../helpers/session-management-helper';
+import {SPAHelper} from '../helpers/spa-helper';
 import {HttpClient, HttpClientInstance} from '../http-client';
 import {HttpError, HttpRequestConfig, HttpResponse, MainThreadClientConfig, MainThreadClientInterface} from '../models';
 import {SPACustomGrantConfig} from '../models/request-custom-grant';
@@ -72,9 +73,7 @@ export const MainThreadClient = async (
   const _spaHelper = new SPAHelper<MainThreadClientConfig>(_authenticationClient);
   const _dataLayer = _authenticationClient.getStorageManager();
   const _sessionManagementHelper = await SessionManagementHelper(
-    async () => {
-      return _authenticationClient.getSignOutUrl();
-    },
+    async () => _authenticationClient.getSignOutUrl(),
     (config.storage as BrowserStorage) ?? BrowserStorage.SessionStorage,
     (sessionState: string) =>
       _dataLayer.setSessionDataParameter(
@@ -114,29 +113,25 @@ export const MainThreadClient = async (
     _httpErrorCallback = callback;
   };
 
-  const httpRequest = async (requestConfig: HttpRequestConfig): Promise<HttpResponse> => {
-    return await _authenticationHelper.httpRequest(
+  const httpRequest = async (requestConfig: HttpRequestConfig): Promise<HttpResponse> =>
+    _authenticationHelper.httpRequest(
       _httpClient,
       requestConfig,
       _isHttpHandlerEnabled,
       _httpErrorCallback,
       _httpFinishCallback,
     );
-  };
 
-  const httpRequestAll = async (requestConfigs: HttpRequestConfig[]): Promise<HttpResponse[] | undefined> => {
-    return await _authenticationHelper.httpRequestAll(
+  const httpRequestAll = async (requestConfigs: HttpRequestConfig[]): Promise<HttpResponse[] | undefined> =>
+    _authenticationHelper.httpRequestAll(
       requestConfigs,
       _httpClient,
       _isHttpHandlerEnabled,
       _httpErrorCallback,
       _httpFinishCallback,
     );
-  };
 
-  const getHttpClient = (): HttpClientInstance => {
-    return _httpClient;
-  };
+  const getHttpClient = (): HttpClientInstance => _httpClient;
 
   const enableHttpHandler = (): boolean => {
     _authenticationHelper.enableHttpHandler(_httpClient);
@@ -165,15 +160,13 @@ export const MainThreadClient = async (
     );
   };
 
-  const shouldStopAuthn = async (): Promise<boolean> => {
-    return await _sessionManagementHelper.receivePromptNoneResponse(async (sessionState: string | null) => {
+  const shouldStopAuthn = async (): Promise<boolean> =>
+    _sessionManagementHelper.receivePromptNoneResponse(async (sessionState: string | null) => {
       await _dataLayer.setSessionDataParameter(
         OIDCRequestConstants.Params.SESSION_STATE as keyof SessionData,
         sessionState ?? '',
       );
-      return;
     });
-  };
 
   const setSessionStatus = async (sessionStatus: string): Promise<void> => {
     await _dataLayer.setSessionStatus(sessionStatus);
@@ -188,10 +181,10 @@ export const MainThreadClient = async (
       params: Record<string, unknown>;
     },
   ): Promise<User> => {
-    if (signInConfig['flow']) {
+    if (signInConfig && signInConfig['flow']) {
       return handleApplicationNativeAuthentication({
-        url: signInConfig['flow']['requestConfig']['url'],
         payload: signInConfig['flow']['payload'],
+        url: signInConfig['flow']['requestConfig']['url'],
       });
     }
 
@@ -199,77 +192,75 @@ export const MainThreadClient = async (
 
     if (basicUserInfo) {
       return basicUserInfo;
+    }
+    let resolvedAuthorizationCode: string;
+    let resolvedSessionState: string;
+    let resolvedState: string;
+    let resolvedTokenRequestConfig: {
+      params: Record<string, unknown>;
+    } = {params: {}};
+
+    if (config?.responseMode === 'form_post' && authorizationCode) {
+      resolvedAuthorizationCode = authorizationCode;
+      resolvedSessionState = sessionState ?? '';
+      resolvedState = state ?? '';
     } else {
-      let resolvedAuthorizationCode: string;
-      let resolvedSessionState: string;
-      let resolvedState: string;
-      let resolvedTokenRequestConfig: {
-        params: Record<string, unknown>;
-      } = {params: {}};
-
-      if (config?.responseMode === 'form_post' && authorizationCode) {
-        resolvedAuthorizationCode = authorizationCode;
-        resolvedSessionState = sessionState ?? '';
-        resolvedState = state ?? '';
-      } else {
-        resolvedAuthorizationCode =
-          new URL(window.location.href).searchParams.get(OIDCRequestConstants.Params.AUTHORIZATION_CODE) ?? '';
-        resolvedSessionState =
-          new URL(window.location.href).searchParams.get(OIDCRequestConstants.Params.SESSION_STATE) ?? '';
-        resolvedState = new URL(window.location.href).searchParams.get(OIDCRequestConstants.Params.STATE) ?? '';
-
-        SPAUtils.removeAuthorizationCode();
+      resolvedAuthorizationCode =
+        new URL(window.location.href).searchParams.get(OIDCRequestConstants.Params.AUTHORIZATION_CODE) ?? '';
+      resolvedSessionState =
+        new URL(window.location.href).searchParams.get(OIDCRequestConstants.Params.SESSION_STATE) ?? '';
+      resolvedState = new URL(window.location.href).searchParams.get(OIDCRequestConstants.Params.STATE) ?? '';
+
+      SPAUtils.removeAuthorizationCode();
+    }
+
+    if (resolvedAuthorizationCode && resolvedState) {
+      setSessionStatus('true');
+      const storedTokenRequestConfig = await _dataLayer.getTemporaryDataParameter(TOKEN_REQUEST_CONFIG_KEY);
+      if (storedTokenRequestConfig && typeof storedTokenRequestConfig === 'string') {
+        resolvedTokenRequestConfig = JSON.parse(storedTokenRequestConfig);
+      }
+      return requestAccessToken(
+        resolvedAuthorizationCode,
+        resolvedSessionState,
+        resolvedState,
+        resolvedTokenRequestConfig,
+      );
+    }
+
+    return _authenticationClient.getSignInUrl(signInConfig).then(async (url: string) => {
+      if (config.storage === BrowserStorage.BrowserMemory && config.enablePKCE) {
+        const pkceKey: string = extractPkceStorageKeyFromState(resolvedState);
+
+        SPAUtils.setPKCE(pkceKey, (await _authenticationClient.getPKCECode(resolvedState)) as string);
       }
 
-      if (resolvedAuthorizationCode && resolvedState) {
-        setSessionStatus('true');
-        const storedTokenRequestConfig = await _dataLayer.getTemporaryDataParameter(TOKEN_REQUEST_CONFIG_KEY);
-        if (storedTokenRequestConfig && typeof storedTokenRequestConfig === 'string') {
-          resolvedTokenRequestConfig = JSON.parse(storedTokenRequestConfig);
-        }
-        return requestAccessToken(
-          resolvedAuthorizationCode,
-          resolvedSessionState,
-          resolvedState,
-          resolvedTokenRequestConfig,
-        );
+      if (tokenRequestConfig) {
+        _dataLayer.setTemporaryDataParameter(TOKEN_REQUEST_CONFIG_KEY, JSON.stringify(tokenRequestConfig));
       }
 
-      return _authenticationClient.getSignInUrl(signInConfig).then(async (url: string) => {
-        if (config.storage === BrowserStorage.BrowserMemory && config.enablePKCE) {
-          const pkceKey: string = extractPkceStorageKeyFromState(resolvedState);
-
-          SPAUtils.setPKCE(pkceKey, (await _authenticationClient.getPKCECode(resolvedState)) as string);
-        }
-
-        if (tokenRequestConfig) {
-          _dataLayer.setTemporaryDataParameter(TOKEN_REQUEST_CONFIG_KEY, JSON.stringify(tokenRequestConfig));
-        }
-
-        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();
-
-        return Promise.resolve({
-          allowedScopes: '',
-          displayName: '',
-          email: '',
-          sessionState: '',
-          sub: '',
-          tenantDomain: '',
-          username: '',
+      if (signInConfig && signInConfig['response_mode'] === 'direct') {
+        const authorizeUrl: URL = new URL(url);
+
+        return initializeApplicationNativeAuthentication({
+          url: `${authorizeUrl.origin}${authorizeUrl.pathname}`,
+          payload: Object.fromEntries(authorizeUrl.searchParams.entries()),
         });
+      }
+      location.href = url;
+
+      await SPAUtils.waitTillPageRedirect();
+
+      return Promise.resolve({
+        allowedScopes: '',
+        displayName: '',
+        email: '',
+        sessionState: '',
+        sub: '',
+        tenantDomain: '',
+        username: '',
       });
-    }
+    });
   };
 
   const signOut = async (): Promise<boolean> => {
@@ -297,9 +288,8 @@ export const MainThreadClient = async (
     }
   };
 
-  const exchangeToken = async (config: SPACustomGrantConfig): Promise<User | Response> => {
-    return await _authenticationHelper.exchangeToken(config, enableRetrievingSignOutURLFromSession);
-  };
+  const exchangeToken = async (config: SPACustomGrantConfig): Promise<User | Response> =>
+    _authenticationHelper.exchangeToken(config, enableRetrievingSignOutURLFromSession);
 
   const refreshAccessToken = async (): Promise<User> => {
     try {
@@ -330,8 +320,8 @@ export const MainThreadClient = async (
     tokenRequestConfig?: {
       params: Record<string, unknown>;
     },
-  ): Promise<User> => {
-    return await _authenticationHelper.requestAccessToken(
+  ): Promise<User> =>
+    _authenticationHelper.requestAccessToken(
       resolvedAuthorizationCode,
       resolvedSessionState,
       checkSession,
@@ -339,7 +329,6 @@ export const MainThreadClient = async (
       resolvedState,
       tokenRequestConfig,
     );
-  };
 
   const constructSilentSignInUrl = async (additionalParams: Record<string, string | boolean> = {}): Promise<string> => {
     const config = await _dataLayer.getConfigData();
@@ -376,55 +365,36 @@ export const MainThreadClient = async (
   const trySignInSilently = async (
     additionalParams?: Record<string, string | boolean>,
     tokenRequestConfig?: {params: Record<string, unknown>},
-  ): Promise<User | boolean> => {
-    return await _authenticationHelper.trySignInSilently(
+  ): Promise<User | boolean> =>
+    _authenticationHelper.trySignInSilently(
       constructSilentSignInUrl,
       requestAccessToken,
       _sessionManagementHelper,
       additionalParams,
       tokenRequestConfig,
     );
-  };
 
-  const getUser = async (): Promise<User> => {
-    return _authenticationHelper.getUser();
-  };
+  const getUser = async (): Promise<User> => _authenticationHelper.getUser();
 
-  const getDecodedIdToken = async (): Promise<IdTokenPayload> => {
-    return _authenticationHelper.getDecodedIdToken();
-  };
+  const getDecodedIdToken = async (): Promise<IdTokenPayload> => _authenticationHelper.getDecodedIdToken();
 
-  const getCrypto = async (): Promise<IsomorphicCrypto> => {
-    return _authenticationHelper.getCrypto();
-  };
+  const getCrypto = async (): Promise<IsomorphicCrypto> => _authenticationHelper.getCrypto();
 
-  const getIdToken = async (): Promise<string> => {
-    return _authenticationHelper.getIdToken();
-  };
+  const getIdToken = async (): Promise<string> => _authenticationHelper.getIdToken();
 
-  const getOpenIDProviderEndpoints = async (): Promise<OIDCEndpoints> => {
-    return _authenticationHelper.getOpenIDProviderEndpoints();
-  };
+  const getOpenIDProviderEndpoints = async (): Promise<OIDCEndpoints> =>
+    _authenticationHelper.getOpenIDProviderEndpoints();
 
-  const getAccessToken = async (): Promise<string> => {
-    return _authenticationHelper.getAccessToken();
-  };
+  const getAccessToken = async (): Promise<string> => _authenticationHelper.getAccessToken();
 
-  const getStorageManager = async (): Promise<StorageManager<MainThreadClientConfig>> => {
-    return _authenticationHelper.getStorageManager();
-  };
+  const getStorageManager = async (): Promise<StorageManager<MainThreadClientConfig>> =>
+    _authenticationHelper.getStorageManager();
 
-  const getConfigData = async (): Promise<AuthClientConfig<MainThreadClientConfig>> => {
-    return await _dataLayer.getConfigData();
-  };
+  const getConfigData = async (): Promise<AuthClientConfig<MainThreadClientConfig>> => _dataLayer.getConfigData();
 
-  const isSignedIn = async (): Promise<boolean> => {
-    return _authenticationHelper.isSignedIn();
-  };
+  const isSignedIn = async (): Promise<boolean> => _authenticationHelper.isSignedIn();
 
-  const isSessionActive = async (): Promise<boolean> => {
-    return (await _dataLayer.getSessionStatus()) === 'true';
-  };
+  const isSessionActive = async (): Promise<boolean> => (await _dataLayer.getSessionStatus()) === 'true';
 
   const reInitialize = async (newConfig: Partial<AuthClientConfig<MainThreadClientConfig>>): Promise<void> => {
     const existingConfig = await _dataLayer.getConfigData();
diff --git a/packages/javascript/src/constants/OIDCRequestConstants.ts b/packages/javascript/src/constants/OIDCRequestConstants.ts
index 88b39a478..3a5e83199 100644
--- a/packages/javascript/src/constants/OIDCRequestConstants.ts
+++ b/packages/javascript/src/constants/OIDCRequestConstants.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import ScopeConstants from "./ScopeConstants";
+import ScopeConstants from './ScopeConstants';
 
 /**
  * Constants representing standard OpenID Connect (OIDC) request and response parameters.
@@ -59,7 +59,7 @@ const OIDCRequestConstants = {
       /**
        * The default scopes used in OIDC sign-in requests.
        */
-      DEFAULT_SCOPES: [ScopeConstants.OPENID],
+      DEFAULT_SCOPES: [ScopeConstants.OPENID, ScopeConstants.INTERNAL_LOGIN],
     },
   },
 
diff --git a/packages/javascript/src/constants/ScopeConstants.ts b/packages/javascript/src/constants/ScopeConstants.ts
index 5f9daeb9d..a54c696e0 100644
--- a/packages/javascript/src/constants/ScopeConstants.ts
+++ b/packages/javascript/src/constants/ScopeConstants.ts
@@ -30,12 +30,22 @@
  * ```typescript
  * // Requesting OpenID Connect authentication
  * const scope = [ScopeConstants.OPENID];
- * 
+ *
  * // Requesting profile information
  * const scopes = [ScopeConstants.OPENID, ScopeConstants.PROFILE];
  * ```
  */
-const ScopeConstants = {
+const ScopeConstants: {
+  INTERNAL_LOGIN: string;
+  OPENID: string;
+} = {
+  /**
+   * The scope for accessing the user's profile information from SCIM.
+   * This scope allows the client to retrieve basic user information such as
+   * name, email, profile picture, etc.
+   */
+  INTERNAL_LOGIN: 'internal_login',
+
   /**
    * The base OpenID Connect scope.
    * Required for all OpenID Connect flows. Indicates that the client
diff --git a/packages/javascript/src/utils/processOpenIDScopes.ts b/packages/javascript/src/utils/processOpenIDScopes.ts
index 2c55ab969..c57a8b6df 100644
--- a/packages/javascript/src/utils/processOpenIDScopes.ts
+++ b/packages/javascript/src/utils/processOpenIDScopes.ts
@@ -39,17 +39,19 @@ import AsgardeoRuntimeError from '../errors/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.',
-    );
+  if (scopes) {
+    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) => {
diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index 92e18787a..0c2a5cf18 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -52,17 +52,8 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
     this.asgardeo = new AuthAPI();
   }
 
-  override initialize(config: T): Promise<boolean> {
-    const scopes: string[] = Array.isArray(config.scopes) ? config.scopes : config.scopes.split(' ');
-
-    return this.asgardeo.init({
-      afterSignInUrl: config.afterSignInUrl,
-      afterSignOutUrl: config.afterSignOutUrl,
-      baseUrl: config.baseUrl,
-      clientId: config.clientId,
-      ...config,
-      scopes: [...scopes, 'internal_login'],
-    });
+  override initialize(config: AsgardeoReactConfig): Promise<boolean> {
+    return this.asgardeo.init(config as any);
   }
 
   override async getUser(): Promise<User> {
@@ -94,7 +85,7 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
         flattenedProfile: generateFlattenedUserProfile(profile, processedSchemas),
         profile,
       };
-      console.log(JSON.stringify(output, null, 2));
+
       return output;
     } catch (error) {
       return {
diff --git a/packages/react/src/components/actions/SignInButton/BaseSignInButton.tsx b/packages/react/src/components/actions/SignInButton/BaseSignInButton.tsx
index 737994f6d..0a09b290b 100644
--- a/packages/react/src/components/actions/SignInButton/BaseSignInButton.tsx
+++ b/packages/react/src/components/actions/SignInButton/BaseSignInButton.tsx
@@ -16,6 +16,8 @@
  * under the License.
  */
 
+import {WithPreferences, withVendorCSSClassPrefix} from '@asgardeo/browser';
+import clsx from 'clsx';
 import {
   ButtonHTMLAttributes,
   forwardRef,
@@ -25,22 +27,20 @@ import {
   Ref,
   RefAttributes,
 } from 'react';
-import {WithPreferences, withVendorCSSClassPrefix} from '@asgardeo/browser';
-import clsx from 'clsx';
 import Button from '../../primitives/Button/Button';
 
 /**
  * Common props shared by all {@link BaseSignInButton} components.
  */
 export interface CommonBaseSignInButtonProps {
-  /**
-   * Function to initiate the sign-in process
-   */
-  signIn: () => Promise<void>;
   /**
    * Loading state during sign-in process
    */
   isLoading?: boolean;
+  /**
+   * Function to initiate the sign-in process
+   */
+  signIn: () => Promise<void>;
 }
 
 /**
@@ -87,7 +87,7 @@ const BaseSignInButton: ForwardRefExoticComponent<BaseSignInButtonProps & RefAtt
       ref: Ref<HTMLButtonElement>,
     ): ReactElement => {
       if (typeof children === 'function') {
-        return <>{children({signIn, isLoading})}</>;
+        return <>{children({isLoading, signIn})}</>;
       }
 
       return (
diff --git a/packages/react/src/components/actions/SignInButton/SignInButton.tsx b/packages/react/src/components/actions/SignInButton/SignInButton.tsx
index 2ca4f1899..cb3268ccc 100644
--- a/packages/react/src/components/actions/SignInButton/SignInButton.tsx
+++ b/packages/react/src/components/actions/SignInButton/SignInButton.tsx
@@ -16,11 +16,11 @@
  * under the License.
  */
 
+import {AsgardeoRuntimeError} from '@asgardeo/browser';
 import {forwardRef, ForwardRefExoticComponent, MouseEvent, ReactElement, Ref, RefAttributes, useState} from 'react';
+import BaseSignInButton, {BaseSignInButtonProps} from './BaseSignInButton';
 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}
diff --git a/packages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsx b/packages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsx
index d8c18c178..4ca5fba3d 100644
--- a/packages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsx
+++ b/packages/react/src/components/actions/SignOutButton/BaseSignOutButton.tsx
@@ -16,6 +16,8 @@
  * under the License.
  */
 
+import {WithPreferences, withVendorCSSClassPrefix} from '@asgardeo/browser';
+import clsx from 'clsx';
 import {
   forwardRef,
   ForwardRefExoticComponent,
@@ -25,22 +27,20 @@ import {
   Ref,
   RefAttributes,
 } from 'react';
-import {WithPreferences, withVendorCSSClassPrefix} from '@asgardeo/browser';
-import clsx from 'clsx';
 import Button from '../../primitives/Button/Button';
 
 /**
  * Common props shared by all {@link BaseSignOutButton} components.
  */
 export interface CommonBaseSignOutButtonProps {
-  /**
-   * Function to initiate the sign-out process
-   */
-  signOut: () => Promise<void>;
   /**
    * Loading state during sign-out process
    */
   isLoading?: boolean;
+  /**
+   * Function to initiate the sign-out process
+   */
+  signOut: () => Promise<void>;
 }
 
 /**
@@ -87,7 +87,7 @@ const BaseSignOutButton: ForwardRefExoticComponent<BaseSignOutButtonProps & RefA
       ref: Ref<HTMLButtonElement>,
     ): ReactElement => {
       if (typeof children === 'function') {
-        return <>{children({signOut, isLoading})}</>;
+        return <>{children({isLoading, signOut})}</>;
       }
 
       return (
diff --git a/packages/react/src/components/actions/SignOutButton/SignOutButton.tsx b/packages/react/src/components/actions/SignOutButton/SignOutButton.tsx
index fc4f75695..632cac5a9 100644
--- a/packages/react/src/components/actions/SignOutButton/SignOutButton.tsx
+++ b/packages/react/src/components/actions/SignOutButton/SignOutButton.tsx
@@ -16,11 +16,11 @@
  * under the License.
  */
 
-import {FC, forwardRef, ForwardRefExoticComponent, MouseEvent, ReactElement, Ref, RefAttributes, useState} from 'react';
+import {AsgardeoRuntimeError} from '@asgardeo/browser';
+import {forwardRef, ForwardRefExoticComponent, MouseEvent, ReactElement, Ref, RefAttributes, useState} from 'react';
+import BaseSignOutButton, {BaseSignOutButtonProps} from './BaseSignOutButton';
 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}
diff --git a/packages/react/src/components/actions/SignUpButton/BaseSignUpButton.tsx b/packages/react/src/components/actions/SignUpButton/BaseSignUpButton.tsx
index 8e8711de9..9d554d819 100644
--- a/packages/react/src/components/actions/SignUpButton/BaseSignUpButton.tsx
+++ b/packages/react/src/components/actions/SignUpButton/BaseSignUpButton.tsx
@@ -16,6 +16,8 @@
  * under the License.
  */
 
+import {WithPreferences, withVendorCSSClassPrefix} from '@asgardeo/browser';
+import clsx from 'clsx';
 import {
   forwardRef,
   ForwardRefExoticComponent,
@@ -25,22 +27,20 @@ import {
   Ref,
   RefAttributes,
 } from 'react';
-import {WithPreferences, withVendorCSSClassPrefix} from '@asgardeo/browser';
-import clsx from 'clsx';
 import Button from '../../primitives/Button/Button';
 
 /**
  * Common props shared by all {@link BaseSignUpButton} components.
  */
 export interface CommonBaseSignUpButtonProps {
-  /**
-   * Function to initiate the sign-up process
-   */
-  signUp?: () => Promise<void>;
   /**
    * Loading state during sign-up process
    */
   isLoading?: boolean;
+  /**
+   * Function to initiate the sign-up process
+   */
+  signUp?: () => Promise<void>;
 }
 
 /**
@@ -87,7 +87,7 @@ const BaseSignUpButton: ForwardRefExoticComponent<BaseSignUpButtonProps & RefAtt
       ref: Ref<HTMLButtonElement>,
     ): ReactElement => {
       if (typeof children === 'function') {
-        return <>{children({signUp, isLoading})}</>;
+        return <>{children({isLoading, signUp})}</>;
       }
 
       return (
diff --git a/packages/react/src/components/actions/SignUpButton/SignUpButton.tsx b/packages/react/src/components/actions/SignUpButton/SignUpButton.tsx
index 548b591cf..3e05d4a75 100644
--- a/packages/react/src/components/actions/SignUpButton/SignUpButton.tsx
+++ b/packages/react/src/components/actions/SignUpButton/SignUpButton.tsx
@@ -16,11 +16,11 @@
  * under the License.
  */
 
-import {FC, forwardRef, ForwardRefExoticComponent, MouseEvent, ReactElement, Ref, RefAttributes, useState} from 'react';
+import {AsgardeoRuntimeError} from '@asgardeo/browser';
+import {forwardRef, ForwardRefExoticComponent, MouseEvent, ReactElement, Ref, RefAttributes, useState} from 'react';
+import BaseSignUpButton, {BaseSignUpButtonProps} from './BaseSignUpButton';
 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}
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index 14aa2d5d9..ba3f6844c 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -27,18 +27,18 @@ import {
   AsgardeoAPIError,
   withVendorCSSClassPrefix,
 } from '@asgardeo/browser';
-import {FC, ReactElement, FormEvent, useEffect, useState, useCallback, useRef} from 'react';
 import {clsx} from 'clsx';
-import Card from '../../primitives/Card/Card';
+import {FC, ReactElement, FormEvent, useEffect, useState, useCallback, useRef} from 'react';
+import {createSignInOptionFromAuthenticator} from './options/SignInOptionFactory';
+import FlowProvider from '../../../contexts/Flow/FlowProvider';
+import useFlow from '../../../contexts/Flow/useFlow';
+import {useForm, FormField} from '../../../hooks/useForm';
+import useTranslation from '../../../hooks/useTranslation';
 import Alert from '../../primitives/Alert/Alert';
+import Card from '../../primitives/Card/Card';
 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';
-import useFlow from '../../../contexts/Flow/useFlow';
-import {createSignInOptionFromAuthenticator} from './options/SignInOptionFactory';
+import Typography from '../../primitives/Typography/Typography';
 
 /**
  * Utility functions for WebAuthn/Passkey operations
@@ -128,7 +128,7 @@ const handleWebAuthnAuthentication = async (challengeData: string): Promise<stri
     console.log('WebAuthn authentication with options:', {
       originalRpId: challengeRpId,
       adjustedRpId: rpIdToUse,
-      currentDomain: currentDomain,
+      currentDomain,
     });
 
     // Convert challenge from base64url to ArrayBuffer
@@ -202,48 +202,41 @@ const handleWebAuthnAuthentication = async (challengeData: string): Promise<stri
 /**
  * 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
-  );
-};
+const isPasskeyAuthenticator = (authenticator: ApplicationNativeAuthenticationAuthenticator): boolean =>
+  authenticator.authenticatorId === ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Passkey &&
+  authenticator.metadata?.promptType === ApplicationNativeAuthenticationAuthenticatorPromptType.InternalPrompt &&
+  (authenticator.metadata as any)?.additionalData?.challengeData;
 
 /**
  * Props for the BaseSignIn component.
  */
 export interface BaseSignInProps {
+  afterSignInUrl?: string;
+
   /**
-   * Function to initialize authentication flow.
-   * @returns Promise resolving to the initial authentication response.
+   * Custom CSS class name for the submit button.
    */
-  onInitialize?: () => Promise<ApplicationNativeAuthenticationInitiateResponse>;
+  buttonClassName?: string;
 
   /**
-   * Function to handle authentication steps.
-   * @param payload - The authentication payload.
-   * @returns Promise resolving to the authentication response.
+   * Custom CSS class name for the form container.
    */
-  onSubmit?: (flow: {
-    requestConfig?: {
-      method: string;
-      url: string;
-    };
-    payload: {
-      flowId: string;
-      selectedAuthenticator: {
-        authenticatorId: string;
-        params: Record<string, string>;
-      };
-    };
-  }) => Promise<ApplicationNativeAuthenticationHandleResponse>;
+  className?: string;
 
   /**
-   * Callback function called when authentication is successful.
-   * @param authData - The authentication data returned upon successful completion.
+   * Custom CSS class name for error messages.
    */
-  onSuccess?: (authData: Record<string, any>) => void;
+  errorClassName?: string;
+
+  /**
+   * Custom CSS class name for form inputs.
+   */
+  inputClassName?: string;
+
+  /**
+   * Custom CSS class name for info messages.
+   */
+  messageClassName?: string;
 
   /**
    * Callback function called when authentication fails.
@@ -260,40 +253,44 @@ export interface BaseSignInProps {
   ) => 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.
+   * Function to initialize authentication flow.
+   * @returns Promise resolving to the initial authentication response.
    */
-  buttonClassName?: string;
+  onInitialize?: () => Promise<ApplicationNativeAuthenticationInitiateResponse>;
 
   /**
-   * Custom CSS class name for error messages.
+   * Function to handle authentication steps.
+   * @param payload - The authentication payload.
+   * @returns Promise resolving to the authentication response.
    */
-  errorClassName?: string;
+  onSubmit?: (flow: {
+    payload: {
+      flowId: string;
+      selectedAuthenticator: {
+        authenticatorId: string;
+        params: Record<string, string>;
+      };
+    };
+    requestConfig?: {
+      method: string;
+      url: string;
+    };
+  }) => Promise<ApplicationNativeAuthenticationHandleResponse>;
 
   /**
-   * Custom CSS class name for info messages.
+   * Callback function called when authentication is successful.
+   * @param authData - The authentication data returned upon successful completion.
    */
-  messageClassName?: string;
+  onSuccess?: (authData: Record<string, any>) => void;
 
   /**
    * Size variant for the component.
    */
   size?: 'small' | 'medium' | 'large';
-
   /**
    * Theme variant for the component.
    */
   variant?: 'default' | 'outlined' | 'filled';
-  afterSignInUrl?: string;
 }
 
 /**
@@ -328,13 +325,11 @@ export interface BaseSignInProps {
  * };
  * ```
  */
-const BaseSignIn: FC<BaseSignInProps> = props => {
-  return (
-    <FlowProvider>
-      <BaseSignInContent {...props} />
-    </FlowProvider>
-  );
-};
+const BaseSignIn: FC<BaseSignInProps> = props => (
+  <FlowProvider>
+    <BaseSignInContent {...props} />
+  </FlowProvider>
+);
 
 /**
  * Internal component that consumes FlowContext and renders the sign-in UI.
@@ -364,7 +359,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
     null,
   );
   const [error, setError] = useState<string | null>(null);
-  const [messages, setMessages] = useState<Array<{type: string; message: string}>>([]);
+  const [messages, setMessages] = useState<Array<{message: string; type: string}>>([]);
 
   // Ref to track if initialization has been attempted to prevent multiple calls
   const initializationAttemptedRef = useRef(false);
@@ -587,8 +582,6 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
                   if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
                     onSuccess?.(response.authData);
-
-                    return;
                   }
                 }
               }
@@ -780,10 +773,9 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
                   // Recursively handle the passkey authenticator without showing UI
                   handleAuthenticatorSelection(nextAuthenticator);
                   return;
-                } else {
-                  setCurrentAuthenticator(nextAuthenticator);
-                  setupFormFields(nextAuthenticator);
                 }
+                setCurrentAuthenticator(nextAuthenticator);
+                setupFormFields(nextAuthenticator);
               }
             }
 
@@ -810,7 +802,6 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
           }
 
           setError(errorMessage);
-          return;
         }
       } else if (
         authenticator.metadata?.promptType === ApplicationNativeAuthenticationAuthenticatorPromptType.RedirectionPrompt
@@ -839,20 +830,92 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
         // Check if the response contains a redirection URL and redirect if needed
         if (handleRedirectionIfNeeded(response)) {
+        }
+      } else if (formData) {
+        const validation = validateForm();
+        if (!validation.isValid) {
           return;
         }
-      } else {
-        if (formData) {
-          const validation = validateForm();
-          if (!validation.isValid) {
-            return;
+
+        const payload = {
+          flowId: currentFlow.flowId,
+          selectedAuthenticator: {
+            authenticatorId: authenticator.authenticatorId,
+            params: formData,
+          },
+        };
+
+        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('Authentication failed. Please check your credentials and try again.');
+          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);
+
+          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 a passkey - if so, auto-trigger it
+              if (isPasskeyAuthenticator(nextAuthenticator)) {
+                // Recursively handle the passkey authenticator without showing UI
+                handleAuthenticatorSelection(nextAuthenticator);
+                return;
+              }
+              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: {},
             },
           };
 
@@ -874,7 +937,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;
           }
 
@@ -901,10 +964,9 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
                   // Recursively handle the passkey authenticator without showing UI
                   handleAuthenticatorSelection(nextAuthenticator);
                   return;
-                } else {
-                  setCurrentAuthenticator(nextAuthenticator);
-                  setupFormFields(nextAuthenticator);
                 }
+                setCurrentAuthenticator(nextAuthenticator);
+                setupFormFields(nextAuthenticator);
               }
             }
 
@@ -918,85 +980,9 @@ 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 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('Authentication failed. Please try again.');
-              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);
-
-              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 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 || '',
-                  })),
-                );
-              }
-            }
-          } 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) {
@@ -1019,15 +1005,15 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
   /**
    * Check if current flow has multiple authenticator options.
    */
-  const hasMultipleOptions = useCallback((): boolean => {
-    return (
+  const hasMultipleOptions = useCallback(
+    (): boolean =>
       currentFlow &&
       'nextStep' in currentFlow &&
       currentFlow.nextStep?.stepType === 'MULTI_OPTIONS_PROMPT' &&
       currentFlow.nextStep?.authenticators &&
-      currentFlow.nextStep.authenticators.length > 1
-    );
-  }, [currentFlow]);
+      currentFlow.nextStep.authenticators.length > 1,
+    [currentFlow],
+  );
 
   /**
    * Get available authenticators for selection.
@@ -1233,9 +1219,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
                     touchedFields,
                     isLoading,
                     handleInputChange,
-                    (auth, formData) => {
-                      return handleAuthenticatorSelection(auth, formData);
-                    },
+                    (auth, formData) => handleAuthenticatorSelection(auth, formData),
                     {
                       inputClassName: inputClasses,
                       buttonClassName: buttonClasses,
@@ -1260,9 +1244,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
                   touchedFields,
                   isLoading,
                   handleInputChange,
-                  (auth, formData) => {
-                    return handleAuthenticatorSelection(auth, formData);
-                  },
+                  (auth, formData) => handleAuthenticatorSelection(auth, formData),
                   {
                     inputClassName: inputClasses,
                     buttonClassName: buttonClasses,
@@ -1384,9 +1366,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
             touchedFields,
             isLoading,
             handleInputChange,
-            (authenticator, formData) => {
-              return handleSubmit(formData || formValues);
-            },
+            (authenticator, formData) => handleSubmit(formData || formValues),
             {
               inputClassName: inputClasses,
               buttonClassName: buttonClasses,
diff --git a/packages/react/src/components/presentation/SignIn/SignIn.tsx b/packages/react/src/components/presentation/SignIn/SignIn.tsx
index 2504b023f..94be8af43 100644
--- a/packages/react/src/components/presentation/SignIn/SignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/SignIn.tsx
@@ -17,7 +17,6 @@
  */
 
 import {
-  handleApplicationNativeAuthentication,
   ApplicationNativeAuthenticationInitiateResponse,
   ApplicationNativeAuthenticationHandleResponse,
 } from '@asgardeo/browser';
@@ -70,24 +69,19 @@ export interface SignInProps {
  * };
  * ```
  */
-const SignIn: FC<SignInProps> = ({className, size = 'medium', variant = 'default'}) => {
-  const {signIn, baseUrl, afterSignInUrl} = useAsgardeo();
+const SignIn: FC<SignInProps> = ({className, size = 'medium', variant = 'default'}: SignInProps) => {
+  const {signIn, afterSignInUrl} = useAsgardeo();
 
   /**
    * Initialize the authentication flow.
    */
-  const handleInitialize = async (): Promise<ApplicationNativeAuthenticationInitiateResponse> => {
-    return await signIn({response_mode: 'direct'});
-  };
+  const handleInitialize = async (): Promise<ApplicationNativeAuthenticationInitiateResponse> =>
+    await signIn({response_mode: 'direct'});
 
   /**
    * Handle authentication steps.
    */
   const handleOnSubmit = async (flow: {
-    requestConfig?: {
-      method: string;
-      url: string;
-    };
     payload: {
       flowId: string;
       selectedAuthenticator: {
@@ -95,20 +89,23 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', variant = 'default
         params: Record<string, string>;
       };
     };
-  }): Promise<ApplicationNativeAuthenticationHandleResponse> => {
-    return await signIn({
+    requestConfig?: {
+      method: string;
+      url: string;
+    };
+  }): Promise<ApplicationNativeAuthenticationHandleResponse> =>
+    await signIn({
       flow,
     });
-  };
 
   /**
    * Handle successful authentication and redirect with query params.
    */
-  const handleSuccess = (authData: Record<string, any>) => {
+  const handleSuccess = (authData: Record<string, any>): void => {
     if (authData && afterSignInUrl) {
-      const url = new URL(afterSignInUrl, window.location.origin);
+      const url: URL = new URL(afterSignInUrl, window.location.origin);
 
-      Object.entries(authData).forEach(([key, value]) => {
+      Object.entries(authData).forEach(([key, value]: [string, any]) => {
         if (value !== undefined && value !== null) {
           url.searchParams.append(key, String(value));
         }
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoContext.ts b/packages/react/src/contexts/Asgardeo/AsgardeoContext.ts
index c70a8c66b..a9db341db 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoContext.ts
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoContext.ts
@@ -16,7 +16,6 @@
  * under the License.
  */
 
-import {User} from '@asgardeo/browser';
 import {Context, createContext} from 'react';
 
 /**
@@ -59,15 +58,15 @@ export type AsgardeoContextProps = {
  * Context object for managing the Authentication flow builder core context.
  */
 const AsgardeoContext: Context<AsgardeoContextProps | null> = createContext<null | AsgardeoContextProps>({
+  afterSignInUrl: '',
+  baseUrl: '',
+  isInitialized: false,
   isLoading: true,
   isSignedIn: false,
   signIn: null,
   signOut: null,
   signUp: null,
   user: null,
-  baseUrl: '',
-  afterSignInUrl: '',
-  isInitialized: false,
 });
 
 AsgardeoContext.displayName = 'AsgardeoContext';
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index e7b2d6efb..bc8d67bd0 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -125,14 +125,16 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   useEffect(() => {
     let interval: NodeJS.Timeout;
 
-    (async () => {
+    (async (): Promise<void> => {
       try {
-        const status = await asgardeo.isSignedIn();
+        const status: boolean = await asgardeo.isSignedIn();
+
         setIsSignedInSync(status);
 
         if (!status) {
           interval = setInterval(async () => {
-            const newStatus = await asgardeo.isSignedIn();
+            const newStatus: boolean = await asgardeo.isSignedIn();
+
             if (newStatus) {
               setIsSignedInSync(true);
               clearInterval(interval);
@@ -144,7 +146,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
       }
     })();
 
-    return () => {
+    return (): void => {
       if (interval) {
         clearInterval(interval);
       }
@@ -152,9 +154,10 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   }, [asgardeo]);
 
   useEffect(() => {
-    (async () => {
+    (async (): Promise<void> => {
       try {
-        const status = await asgardeo.isInitialized();
+        const status: boolean = await asgardeo.isInitialized();
+
         setIsInitializedSync(status);
       } catch (error) {
         setIsInitializedSync(false);
@@ -164,7 +167,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
 
   const signIn = async (options?: SignInOptions): Promise<User> => {
     try {
-      const response = await asgardeo.signIn(options);
+      const response: User = await asgardeo.signIn(options);
 
       if (await asgardeo.isSignedIn()) {
         setUser(await asgardeo.getUser());
@@ -193,7 +196,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   const signOut = async (options?: SignOutOptions, afterSignOut?: () => void): Promise<string> =>
     asgardeo.signOut(options, afterSignOut);
 
-  const isDarkMode = useMemo(() => {
+  const isDarkMode: boolean = useMemo(() => {
     if (!preferences?.theme?.mode || preferences.theme.mode === 'system') {
       return window.matchMedia('(prefers-color-scheme: dark)').matches;
     }
@@ -203,15 +206,15 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   return (
     <AsgardeoContext.Provider
       value={{
+        afterSignInUrl,
+        baseUrl,
+        isInitialized: isInitializedSync,
         isLoading: asgardeo.isLoading(),
         isSignedIn: isSignedInSync,
         signIn,
         signOut,
         signUp,
         user,
-        baseUrl,
-        afterSignInUrl,
-        isInitialized: isInitializedSync,
       }}
     >
       <I18nProvider preferences={preferences?.i18n}>

From 5a8d2f2b11816467b3b5f89726b929debe1a4345 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Thu, 19 Jun 2025 20:35:52 +0530
Subject: [PATCH 50/96] feat: refactor authentication flow to use Embedded
 Sign-In components and models

---
 .../handleApplicationNativeAuthentication.ts  |   2 +-
 ...itializeApplicationNativeAuthentication.ts |   6 +-
 packages/javascript/src/index.ts              |  20 ++--
 .../application-native-authentication.ts      |  93 ---------------
 .../src/models/embedded-signin-flow.ts        | 111 ++++++++++++++++++
 .../javascript/src/utils/resolveFieldName.ts  |   2 +-
 .../javascript/src/utils/resolveFieldType.ts  |  10 +-
 .../components/presentation/SignIn/SignIn.tsx |   4 +-
 .../src/components/factories/FieldFactory.tsx |   6 +-
 .../presentation/SignIn/BaseSignIn.tsx        |  88 +++++++-------
 .../components/presentation/SignIn/SignIn.tsx |   7 +-
 .../presentation/SignIn/options/EmailOtp.tsx  |   8 +-
 .../SignIn/options/IdentifierFirst.tsx        |   8 +-
 .../SignIn/options/MultiOptionButton.tsx      |   7 +-
 .../SignIn/options/SignInOptionFactory.tsx    |  14 +--
 .../presentation/SignIn/options/SmsOtp.tsx    |   8 +-
 .../presentation/SignIn/options/Totp.tsx      |   8 +-
 .../SignIn/options/UsernamePassword.tsx       |   8 +-
 .../components/presentation/SignIn/types.ts   |  18 +--
 19 files changed, 205 insertions(+), 223 deletions(-)
 delete mode 100644 packages/javascript/src/models/application-native-authentication.ts
 create mode 100644 packages/javascript/src/models/embedded-signin-flow.ts

diff --git a/packages/javascript/src/api/handleApplicationNativeAuthentication.ts b/packages/javascript/src/api/handleApplicationNativeAuthentication.ts
index 1688d4197..d74f6273d 100644
--- a/packages/javascript/src/api/handleApplicationNativeAuthentication.ts
+++ b/packages/javascript/src/api/handleApplicationNativeAuthentication.ts
@@ -20,7 +20,7 @@ import AsgardeoAPIError from '../errors/AsgardeoAPIError';
 import {
   ApplicationNativeAuthenticationHandleRequestPayload,
   ApplicationNativeAuthenticationHandleResponse,
-} from '../models/application-native-authentication';
+} from '../models/embedded-signin-flow';
 
 /**
  * Request configuration for the authorize function.
diff --git a/packages/javascript/src/api/initializeApplicationNativeAuthentication.ts b/packages/javascript/src/api/initializeApplicationNativeAuthentication.ts
index 0e563ee4d..dcc777747 100644
--- a/packages/javascript/src/api/initializeApplicationNativeAuthentication.ts
+++ b/packages/javascript/src/api/initializeApplicationNativeAuthentication.ts
@@ -17,7 +17,7 @@
  */
 
 import AsgardeoAPIError from '../errors/AsgardeoAPIError';
-import {ApplicationNativeAuthenticationInitiateResponse} from '../models/application-native-authentication';
+import {EmbeddedSignInFlowInitiateResponse} from '../models/embedded-signin-flow';
 
 /**
  * Represents the authorization request payload that can be sent to the authorization endpoint.
@@ -123,7 +123,7 @@ const initializeApplicationNativeAuthentication = async ({
   baseUrl,
   payload,
   ...requestConfig
-}: AuthorizeRequestConfig): Promise<ApplicationNativeAuthenticationInitiateResponse> => {
+}: AuthorizeRequestConfig): Promise<EmbeddedSignInFlowInitiateResponse> => {
   if (!payload) {
     throw new AsgardeoAPIError(
       'Authorization payload is required',
@@ -165,7 +165,7 @@ const initializeApplicationNativeAuthentication = async ({
     );
   }
 
-  return (await response.json()) as ApplicationNativeAuthenticationInitiateResponse;
+  return (await response.json()) as EmbeddedSignInFlowInitiateResponse;
 };
 
 export default initializeApplicationNativeAuthentication;
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index b7b70e981..4e411358a 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -36,18 +36,18 @@ export {default as AsgardeoRuntimeError} from './errors/AsgardeoRuntimeError';
 export {AsgardeoAuthException} from './errors/exception';
 
 export {
-  ApplicationNativeAuthenticationInitiateResponse,
-  ApplicationNativeAuthenticationFlowStatus,
-  ApplicationNativeAuthenticationFlowType,
-  ApplicationNativeAuthenticationStepType,
-  ApplicationNativeAuthenticationAuthenticator,
-  ApplicationNativeAuthenticationLink,
+  EmbeddedSignInFlowInitiateResponse,
+  EmbeddedSignInFlowStatus,
+  EmbeddedSignInFlowType,
+  EmbeddedSignInFlowStepType,
+  EmbeddedSignInFlowAuthenticator,
+  EmbeddedSignInFlowLink,
   ApplicationNativeAuthenticationHandleRequestPayload,
   ApplicationNativeAuthenticationHandleResponse,
-  ApplicationNativeAuthenticationAuthenticatorParamType,
-  ApplicationNativeAuthenticationAuthenticatorPromptType,
-  ApplicationNativeAuthenticationAuthenticatorKnownIdPType,
-} from './models/application-native-authentication';
+  EmbeddedSignInFlowAuthenticatorParamType,
+  EmbeddedSignInFlowAuthenticatorPromptType,
+  EmbeddedSignInFlowAuthenticatorKnownIdPType,
+} from './models/embedded-signin-flow';
 export {
   EmbeddedFlowType,
   EmbeddedFlowStatus,
diff --git a/packages/javascript/src/models/application-native-authentication.ts b/packages/javascript/src/models/application-native-authentication.ts
deleted file mode 100644
index 425913305..000000000
--- a/packages/javascript/src/models/application-native-authentication.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-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: ApplicationNativeAuthenticationAuthenticatorPromptType;
-    params: {
-      param: string;
-      type: ApplicationNativeAuthenticationAuthenticatorParamType;
-      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>;
-}
-
-export enum ApplicationNativeAuthenticationAuthenticatorParamType {
-  String = 'STRING',
-  Integer = 'INTEGER',
-  MultiValued = 'MULTI_VALUED',
-}
-
-export enum ApplicationNativeAuthenticationAuthenticatorExtendedParamType {
-  Otp = 'OTPCode',
-}
-
-export enum ApplicationNativeAuthenticationAuthenticatorKnownIdPType {
-  Local = 'LOCAL',
-}
-
-export enum ApplicationNativeAuthenticationAuthenticatorPromptType {
-  /**
-   * Prompt for user input, typically for username/password or similar credentials.
-   */
-  UserPrompt = 'USER_PROMPT',
-  /**
-   * Prompt for internal system use, such as API keys or tokens.
-   */
-  InternalPrompt = 'INTERNAL_PROMPT',
-  /**
-   * Prompt for redirection to another page or service.
-   */
-  RedirectionPrompt = 'REDIRECTION_PROMPT',
-}
diff --git a/packages/javascript/src/models/embedded-signin-flow.ts b/packages/javascript/src/models/embedded-signin-flow.ts
new file mode 100644
index 000000000..b60556895
--- /dev/null
+++ b/packages/javascript/src/models/embedded-signin-flow.ts
@@ -0,0 +1,111 @@
+/**
+ * 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 EmbeddedSignInFlowInitiateResponse {
+  flowId: string;
+  flowStatus: EmbeddedSignInFlowStatus;
+  flowType: EmbeddedSignInFlowType;
+  links: EmbeddedSignInFlowLink[];
+  nextStep: {
+    authenticators: EmbeddedSignInFlowAuthenticator[];
+    stepType: EmbeddedSignInFlowStepType;
+  };
+}
+
+export enum EmbeddedSignInFlowStatus {
+  FailCompleted = 'FAIL_COMPLETED',
+  FailIncomplete = 'FAIL_INCOMPLETE',
+  Incomplete = 'INCOMPLETE',
+  SuccessCompleted = 'SUCCESS_COMPLETED',
+}
+
+export enum EmbeddedSignInFlowType {
+  Authentication = 'AUTHENTICATION',
+}
+
+export enum EmbeddedSignInFlowStepType {
+  AuthenticatorPrompt = 'AUTHENTICATOR_PROMPT',
+  MultiOptionsPrompt = 'MULTI_OPTIONS_PROMPT',
+}
+
+export interface EmbeddedSignInFlowAuthenticator {
+  authenticator: string;
+  authenticatorId: string;
+  idp: string;
+  metadata: {
+    i18nKey: string;
+    params: {
+      confidential: boolean;
+      displayName: string;
+      i18nKey: string;
+      order: number;
+      param: string;
+      type: EmbeddedSignInFlowAuthenticatorParamType;
+    }[];
+    promptType: EmbeddedSignInFlowAuthenticatorPromptType;
+  };
+  requiredParams: string[];
+}
+
+export interface EmbeddedSignInFlowLink {
+  href: string;
+  method: string;
+  name: string;
+}
+
+export interface ApplicationNativeAuthenticationHandleRequestPayload {
+  flowId: string;
+  selectedAuthenticator: {
+    authenticatorId: string;
+    params: Record<string, string>;
+  };
+}
+
+export interface ApplicationNativeAuthenticationHandleResponse {
+  authData: Record<string, any>;
+  flowStatus: string;
+}
+
+export enum EmbeddedSignInFlowAuthenticatorParamType {
+  Integer = 'INTEGER',
+  MultiValued = 'MULTI_VALUED',
+  String = 'STRING',
+}
+
+export enum EmbeddedSignInFlowAuthenticatorExtendedParamType {
+  Otp = 'OTPCode',
+}
+
+export enum EmbeddedSignInFlowAuthenticatorKnownIdPType {
+  Local = 'LOCAL',
+}
+
+export enum EmbeddedSignInFlowAuthenticatorPromptType {
+  /**
+   * Prompt for internal system use, such as API keys or tokens.
+   */
+  InternalPrompt = 'INTERNAL_PROMPT',
+  /**
+   * Prompt for redirection to another page or service.
+   */
+  RedirectionPrompt = 'REDIRECTION_PROMPT',
+  /**
+   * Prompt for user input, typically for username/password or similar credentials.
+   */
+  UserPrompt = 'USER_PROMPT',
+}
diff --git a/packages/javascript/src/utils/resolveFieldName.ts b/packages/javascript/src/utils/resolveFieldName.ts
index e8572c919..4e01e3bd4 100644
--- a/packages/javascript/src/utils/resolveFieldName.ts
+++ b/packages/javascript/src/utils/resolveFieldName.ts
@@ -17,7 +17,7 @@
  */
 
 import AsgardeoRuntimeError from '../errors/AsgardeoRuntimeError';
-import {ApplicationNativeAuthenticationAuthenticatorExtendedParamType} from '../models/application-native-authentication';
+import {EmbeddedSignInFlowAuthenticatorExtendedParamType} from '../models/embedded-signin-flow';
 import {FieldType} from '../models/field';
 
 const resolveFieldName = (field: any): string => {
diff --git a/packages/javascript/src/utils/resolveFieldType.ts b/packages/javascript/src/utils/resolveFieldType.ts
index 29cd4ab03..5d0d333b3 100644
--- a/packages/javascript/src/utils/resolveFieldType.ts
+++ b/packages/javascript/src/utils/resolveFieldType.ts
@@ -18,15 +18,15 @@
 
 import AsgardeoRuntimeError from '../errors/AsgardeoRuntimeError';
 import {
-  ApplicationNativeAuthenticationAuthenticatorExtendedParamType,
-  ApplicationNativeAuthenticationAuthenticatorParamType,
-} from '../models/application-native-authentication';
+  EmbeddedSignInFlowAuthenticatorExtendedParamType,
+  EmbeddedSignInFlowAuthenticatorParamType,
+} from '../models/embedded-signin-flow';
 import {FieldType} from '../models/field';
 
 const resolveFieldType = (field: any): FieldType => {
-  if (field.type === ApplicationNativeAuthenticationAuthenticatorParamType.String) {
+  if (field.type === EmbeddedSignInFlowAuthenticatorParamType.String) {
     // Check if there's a `param` property and if it matches a known type.
-    if (field.param === ApplicationNativeAuthenticationAuthenticatorExtendedParamType.Otp) {
+    if (field.param === EmbeddedSignInFlowAuthenticatorExtendedParamType.Otp) {
       return FieldType.Otp;
     } else if (field?.confidential) {
       return FieldType.Password;
diff --git a/packages/nextjs/src/client/components/presentation/SignIn/SignIn.tsx b/packages/nextjs/src/client/components/presentation/SignIn/SignIn.tsx
index 9a3fa00fc..86e7df293 100644
--- a/packages/nextjs/src/client/components/presentation/SignIn/SignIn.tsx
+++ b/packages/nextjs/src/client/components/presentation/SignIn/SignIn.tsx
@@ -18,7 +18,7 @@
 
 'use client';
 
-import {ApplicationNativeAuthenticationInitiateResponse} from '@asgardeo/node';
+import {EmbeddedSignInFlowInitiateResponse} from '@asgardeo/node';
 import {BaseSignIn, BaseSignInProps} from '@asgardeo/react';
 import {FC} from 'react';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
@@ -113,7 +113,7 @@ const SignIn: FC<SignInProps> = ({
   /**
    * Initialize the authentication flow.
    */
-  const handleInitialize = async (): Promise<ApplicationNativeAuthenticationInitiateResponse> =>
+  const handleInitialize = async (): Promise<EmbeddedSignInFlowInitiateResponse> =>
     await signIn({response_mode: 'direct'});
 
   /**
diff --git a/packages/react/src/components/factories/FieldFactory.tsx b/packages/react/src/components/factories/FieldFactory.tsx
index dbb1c728e..bd0055831 100644
--- a/packages/react/src/components/factories/FieldFactory.tsx
+++ b/packages/react/src/components/factories/FieldFactory.tsx
@@ -32,7 +32,7 @@ import {FieldType} from '@asgardeo/browser';
 export interface FieldConfig {
   name: string;
   /**
-   * The field type based on ApplicationNativeAuthenticationAuthenticatorParamType.
+   * The field type based on EmbeddedSignInFlowAuthenticatorParamType.
    */
   type: FieldType;
   /**
@@ -127,7 +127,7 @@ export const validateFieldValue = (
 };
 
 /**
- * Factory function to create form fields based on the ApplicationNativeAuthenticationAuthenticatorParamType.
+ * Factory function to create form fields based on the EmbeddedSignInFlowAuthenticatorParamType.
  *
  * @param config - The field configuration
  * @returns The appropriate React component for the field type
@@ -136,7 +136,7 @@ export const validateFieldValue = (
  * ```tsx
  * const field = createField({
  *   param: 'username',
- *   type: ApplicationNativeAuthenticationAuthenticatorParamType.String,
+ *   type: EmbeddedSignInFlowAuthenticatorParamType.String,
  *   label: 'Username',
  *   confidential: false,
  *   required: true,
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index ba3f6844c..46e1b1461 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -17,12 +17,12 @@
  */
 
 import {
-  ApplicationNativeAuthenticationAuthenticator,
-  ApplicationNativeAuthenticationInitiateResponse,
+  EmbeddedSignInFlowAuthenticator,
+  EmbeddedSignInFlowInitiateResponse,
   ApplicationNativeAuthenticationHandleResponse,
-  ApplicationNativeAuthenticationStepType,
-  ApplicationNativeAuthenticationFlowStatus,
-  ApplicationNativeAuthenticationAuthenticatorPromptType,
+  EmbeddedSignInFlowStepType,
+  EmbeddedSignInFlowStatus,
+  EmbeddedSignInFlowAuthenticatorPromptType,
   ApplicationNativeAuthenticationConstants,
   AsgardeoAPIError,
   withVendorCSSClassPrefix,
@@ -202,9 +202,9 @@ const handleWebAuthnAuthentication = async (challengeData: string): Promise<stri
 /**
  * Check if the authenticator is a passkey/FIDO authenticator
  */
-const isPasskeyAuthenticator = (authenticator: ApplicationNativeAuthenticationAuthenticator): boolean =>
+const isPasskeyAuthenticator = (authenticator: EmbeddedSignInFlowAuthenticator): boolean =>
   authenticator.authenticatorId === ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Passkey &&
-  authenticator.metadata?.promptType === ApplicationNativeAuthenticationAuthenticatorPromptType.InternalPrompt &&
+  authenticator.metadata?.promptType === EmbeddedSignInFlowAuthenticatorPromptType.InternalPrompt &&
   (authenticator.metadata as any)?.additionalData?.challengeData;
 
 /**
@@ -248,15 +248,13 @@ export interface BaseSignInProps {
    * Callback function called when authentication flow status changes.
    * @param response - The current authentication response.
    */
-  onFlowChange?: (
-    response: ApplicationNativeAuthenticationInitiateResponse | ApplicationNativeAuthenticationHandleResponse,
-  ) => void;
+  onFlowChange?: (response: EmbeddedSignInFlowInitiateResponse | ApplicationNativeAuthenticationHandleResponse) => void;
 
   /**
    * Function to initialize authentication flow.
    * @returns Promise resolving to the initial authentication response.
    */
-  onInitialize?: () => Promise<ApplicationNativeAuthenticationInitiateResponse>;
+  onInitialize?: () => Promise<EmbeddedSignInFlowInitiateResponse>;
 
   /**
    * Function to handle authentication steps.
@@ -354,10 +352,8 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
   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 [currentFlow, setCurrentFlow] = useState<EmbeddedSignInFlowInitiateResponse | null>(null);
+  const [currentAuthenticator, setCurrentAuthenticator] = useState<EmbeddedSignInFlowAuthenticator | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [messages, setMessages] = useState<Array<{message: string; type: string}>>([]);
 
@@ -403,7 +399,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
    * Setup form fields based on the current authenticator.
    */
   const setupFormFields = useCallback(
-    (authenticator: ApplicationNativeAuthenticationAuthenticator) => {
+    (authenticator: EmbeddedSignInFlowAuthenticator) => {
       const initialValues: Record<string, string> = {};
       authenticator.metadata?.params?.forEach(param => {
         initialValues[param.param] = '';
@@ -436,14 +432,13 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
     if (
       'nextStep' in response &&
       response.nextStep &&
-      (response.nextStep as any).stepType === ApplicationNativeAuthenticationStepType.AuthenticatorPrompt &&
+      (response.nextStep as any).stepType === EmbeddedSignInFlowStepType.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?.promptType === EmbeddedSignInFlowAuthenticatorPromptType.RedirectionPrompt &&
         (responseAuthenticator.metadata as any)?.additionalData?.redirectUrl
       ) {
         /**
@@ -580,7 +575,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
                   onFlowChange?.(response);
 
-                  if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+                  if (response.flowStatus === EmbeddedSignInFlowStatus.SuccessCompleted) {
                     onSuccess?.(response.authData);
                   }
                 }
@@ -638,14 +633,14 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
       });
       onFlowChange?.(response);
 
-      if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+      if (response.flowStatus === EmbeddedSignInFlowStatus.SuccessCompleted) {
         onSuccess?.(response.authData);
         return;
       }
 
       if (
-        response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
-        response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
+        response.flowStatus === EmbeddedSignInFlowStatus.FailCompleted ||
+        response.flowStatus === EmbeddedSignInFlowStatus.FailIncomplete
       ) {
         setError(t('errors.sign.in.flow.completion.failure'));
         return;
@@ -662,7 +657,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
         if (nextStepResponse.nextStep?.authenticators?.length > 0) {
           if (
-            nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
+            nextStepResponse.nextStep.stepType === EmbeddedSignInFlowStepType.MultiOptionsPrompt &&
             nextStepResponse.nextStep.authenticators.length > 1
           ) {
             setCurrentAuthenticator(null);
@@ -695,7 +690,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
    * Handle authenticator selection for multi-option prompts.
    */
   const handleAuthenticatorSelection = async (
-    authenticator: ApplicationNativeAuthenticationAuthenticator,
+    authenticator: EmbeddedSignInFlowAuthenticator,
     formData?: Record<string, string>,
   ) => {
     if (!currentFlow) {
@@ -741,14 +736,14 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
           });
           onFlowChange?.(response);
 
-          if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+          if (response.flowStatus === EmbeddedSignInFlowStatus.SuccessCompleted) {
             onSuccess?.(response.authData);
             return;
           }
 
           if (
-            response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
-            response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
+            response.flowStatus === EmbeddedSignInFlowStatus.FailCompleted ||
+            response.flowStatus === EmbeddedSignInFlowStatus.FailIncomplete
           ) {
             setError(t('errors.sign.in.flow.passkeys.completion.failure'));
             return;
@@ -761,7 +756,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
             if (nextStepResponse.nextStep?.authenticators?.length > 0) {
               if (
-                nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
+                nextStepResponse.nextStep.stepType === EmbeddedSignInFlowStepType.MultiOptionsPrompt &&
                 nextStepResponse.nextStep.authenticators.length > 1
               ) {
                 setCurrentAuthenticator(null);
@@ -803,9 +798,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
           setError(errorMessage);
         }
-      } else if (
-        authenticator.metadata?.promptType === ApplicationNativeAuthenticationAuthenticatorPromptType.RedirectionPrompt
-      ) {
+      } else if (authenticator.metadata?.promptType === EmbeddedSignInFlowAuthenticatorPromptType.RedirectionPrompt) {
         const payload = {
           flowId: currentFlow.flowId,
           selectedAuthenticator: {
@@ -823,7 +816,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
         });
         onFlowChange?.(response);
 
-        if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+        if (response.flowStatus === EmbeddedSignInFlowStatus.SuccessCompleted) {
           onSuccess?.(response.authData);
           return;
         }
@@ -854,14 +847,14 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
         });
         onFlowChange?.(response);
 
-        if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+        if (response.flowStatus === EmbeddedSignInFlowStatus.SuccessCompleted) {
           onSuccess?.(response.authData);
           return;
         }
 
         if (
-          response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
-          response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
+          response.flowStatus === EmbeddedSignInFlowStatus.FailCompleted ||
+          response.flowStatus === EmbeddedSignInFlowStatus.FailIncomplete
         ) {
           setError('Authentication failed. Please check your credentials and try again.');
           return;
@@ -878,7 +871,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
           if (nextStepResponse.nextStep?.authenticators?.length > 0) {
             if (
-              nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
+              nextStepResponse.nextStep.stepType === EmbeddedSignInFlowStepType.MultiOptionsPrompt &&
               nextStepResponse.nextStep.authenticators.length > 1
             ) {
               setCurrentAuthenticator(null);
@@ -928,14 +921,14 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
           });
           onFlowChange?.(response);
 
-          if (response.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+          if (response.flowStatus === EmbeddedSignInFlowStatus.SuccessCompleted) {
             onSuccess?.(response.authData);
             return;
           }
 
           if (
-            response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailCompleted ||
-            response.flowStatus === ApplicationNativeAuthenticationFlowStatus.FailIncomplete
+            response.flowStatus === EmbeddedSignInFlowStatus.FailCompleted ||
+            response.flowStatus === EmbeddedSignInFlowStatus.FailIncomplete
           ) {
             setError('Authentication failed. Please try again.');
             return;
@@ -952,7 +945,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
             if (nextStepResponse.nextStep?.authenticators?.length > 0) {
               if (
-                nextStepResponse.nextStep.stepType === 'MULTI_OPTIONS_PROMPT' &&
+                nextStepResponse.nextStep.stepType === EmbeddedSignInFlowStepType.MultiOptionsPrompt &&
                 nextStepResponse.nextStep.authenticators.length > 1
               ) {
                 setCurrentAuthenticator(null);
@@ -1009,7 +1002,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
     (): boolean =>
       currentFlow &&
       'nextStep' in currentFlow &&
-      currentFlow.nextStep?.stepType === 'MULTI_OPTIONS_PROMPT' &&
+      currentFlow.nextStep?.stepType === EmbeddedSignInFlowStepType.MultiOptionsPrompt &&
       currentFlow.nextStep?.authenticators &&
       currentFlow.nextStep.authenticators.length > 1,
     [currentFlow],
@@ -1018,7 +1011,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
   /**
    * Get available authenticators for selection.
    */
-  const getAvailableAuthenticators = useCallback((): ApplicationNativeAuthenticationAuthenticator[] => {
+  const getAvailableAuthenticators = useCallback((): EmbeddedSignInFlowAuthenticator[] => {
     if (!currentFlow || !('nextStep' in currentFlow) || !currentFlow.nextStep?.authenticators) {
       return [];
     }
@@ -1076,13 +1069,16 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
           setIsInitialized(true);
           onFlowChange?.(response);
 
-          if (response?.flowStatus === ApplicationNativeAuthenticationFlowStatus.SuccessCompleted) {
+          if (response?.flowStatus === EmbeddedSignInFlowStatus.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) {
+            if (
+              response.nextStep.stepType === EmbeddedSignInFlowStepType.MultiOptionsPrompt &&
+              response.nextStep.authenticators.length > 1
+            ) {
               setCurrentAuthenticator(null);
             } else {
               const authenticator = response.nextStep.authenticators[0];
@@ -1138,7 +1134,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
     const userPromptAuthenticators = availableAuthenticators.filter(
       auth =>
-        auth.metadata?.promptType === ApplicationNativeAuthenticationAuthenticatorPromptType.UserPrompt ||
+        auth.metadata?.promptType === EmbeddedSignInFlowAuthenticatorPromptType.UserPrompt ||
         // Fallback: LOCAL authenticators with params are typically user prompts
         (auth.idp === 'LOCAL' && auth.metadata?.params && auth.metadata.params.length > 0),
     );
diff --git a/packages/react/src/components/presentation/SignIn/SignIn.tsx b/packages/react/src/components/presentation/SignIn/SignIn.tsx
index 94be8af43..3a12aa852 100644
--- a/packages/react/src/components/presentation/SignIn/SignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/SignIn.tsx
@@ -16,10 +16,7 @@
  * under the License.
  */
 
-import {
-  ApplicationNativeAuthenticationInitiateResponse,
-  ApplicationNativeAuthenticationHandleResponse,
-} from '@asgardeo/browser';
+import {EmbeddedSignInFlowInitiateResponse, ApplicationNativeAuthenticationHandleResponse} from '@asgardeo/browser';
 import {FC} from 'react';
 import BaseSignIn from './BaseSignIn';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
@@ -75,7 +72,7 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', variant = 'default
   /**
    * Initialize the authentication flow.
    */
-  const handleInitialize = async (): Promise<ApplicationNativeAuthenticationInitiateResponse> =>
+  const handleInitialize = async (): Promise<EmbeddedSignInFlowInitiateResponse> =>
     await signIn({response_mode: 'direct'});
 
   /**
diff --git a/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx b/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
index 75d575893..c542eaa85 100644
--- a/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx
@@ -16,11 +16,7 @@
  * under the License.
  */
 
-import {
-  ApplicationNativeAuthenticationAuthenticator,
-  ApplicationNativeAuthenticationAuthenticatorParamType,
-  FieldType,
-} from '@asgardeo/browser';
+import {EmbeddedSignInFlowAuthenticator, EmbeddedSignInFlowAuthenticatorParamType, FieldType} from '@asgardeo/browser';
 import {FC, useEffect} from 'react';
 import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
@@ -78,7 +74,7 @@ const EmailOtp: FC<BaseSignInOptionProps> = ({
               createField({
                 name: param.param,
                 type:
-                  param.type === ApplicationNativeAuthenticationAuthenticatorParamType.String
+                  param.type === EmbeddedSignInFlowAuthenticatorParamType.String
                     ? param.confidential
                       ? FieldType.Password
                       : FieldType.Text
diff --git a/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx b/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
index 4f1c1ae6a..aceadf88f 100644
--- a/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx
@@ -16,11 +16,7 @@
  * under the License.
  */
 
-import {
-  ApplicationNativeAuthenticationAuthenticator,
-  ApplicationNativeAuthenticationAuthenticatorParamType,
-  FieldType,
-} from '@asgardeo/browser';
+import {EmbeddedSignInFlowAuthenticator, EmbeddedSignInFlowAuthenticatorParamType, FieldType} from '@asgardeo/browser';
 import {FC, useEffect} from 'react';
 import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
@@ -60,7 +56,7 @@ const IdentifierFirst: FC<BaseSignInOptionProps> = ({
           {createField({
             name: param.param,
             type:
-              param.type === ApplicationNativeAuthenticationAuthenticatorParamType.String
+              param.type === EmbeddedSignInFlowAuthenticatorParamType.String
                 ? param.confidential
                   ? FieldType.Password
                   : FieldType.Text
diff --git a/packages/react/src/components/presentation/SignIn/options/MultiOptionButton.tsx b/packages/react/src/components/presentation/SignIn/options/MultiOptionButton.tsx
index fafb78477..97776733c 100644
--- a/packages/react/src/components/presentation/SignIn/options/MultiOptionButton.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/MultiOptionButton.tsx
@@ -19,10 +19,7 @@
 import {FC, JSX, ReactElement} from 'react';
 import Button from '../../../primitives/Button/Button';
 import {BaseSignInOptionProps} from './SignInOptionFactory';
-import {
-  ApplicationNativeAuthenticationConstants,
-  ApplicationNativeAuthenticationAuthenticatorKnownIdPType,
-} from '@asgardeo/browser';
+import {ApplicationNativeAuthenticationConstants, EmbeddedSignInFlowAuthenticatorKnownIdPType} from '@asgardeo/browser';
 import useTranslation from '../../../../hooks/useTranslation';
 
 /**
@@ -45,7 +42,7 @@ const MultiOptionButton: FC<BaseSignInOptionProps> = ({
   const getDisplayName = (): string => {
     let authenticatorName = authenticator.authenticator;
 
-    if (authenticator.idp !== ApplicationNativeAuthenticationAuthenticatorKnownIdPType.Local) {
+    if (authenticator.idp !== EmbeddedSignInFlowAuthenticatorKnownIdPType.Local) {
       authenticatorName = authenticator.idp;
     }
 
diff --git a/packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx b/packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx
index db68511e7..be73d3c1d 100644
--- a/packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/SignInOptionFactory.tsx
@@ -17,8 +17,8 @@
  */
 
 import {
-  ApplicationNativeAuthenticationAuthenticator,
-  ApplicationNativeAuthenticationAuthenticatorKnownIdPType,
+  EmbeddedSignInFlowAuthenticator,
+  EmbeddedSignInFlowAuthenticatorKnownIdPType,
   ApplicationNativeAuthenticationConstants,
   WithPreferences,
 } from '@asgardeo/browser';
@@ -44,7 +44,7 @@ export interface BaseSignInOptionProps extends WithPreferences {
   /**
    * The authenticator configuration.
    */
-  authenticator: ApplicationNativeAuthenticationAuthenticator;
+  authenticator: EmbeddedSignInFlowAuthenticator;
 
   /**
    * Current form values.
@@ -74,7 +74,7 @@ export interface BaseSignInOptionProps extends WithPreferences {
   /**
    * Callback function called when the option is submitted.
    */
-  onSubmit: (authenticator: ApplicationNativeAuthenticationAuthenticator, formData?: Record<string, string>) => void;
+  onSubmit: (authenticator: EmbeddedSignInFlowAuthenticator, formData?: Record<string, string>) => void;
 
   /**
    * Custom CSS class name for form inputs.
@@ -141,7 +141,7 @@ export const createSignInOption = (props: BaseSignInOptionProps): ReactElement =
 
     default:
       // Check if it's a federated authenticator (non-LOCAL idp)
-      if (authenticator.idp !== ApplicationNativeAuthenticationAuthenticatorKnownIdPType.Local) {
+      if (authenticator.idp !== EmbeddedSignInFlowAuthenticatorKnownIdPType.Local) {
         // For unknown federated authenticators, use generic social login
         return <SocialButton {...props} />;
       }
@@ -161,12 +161,12 @@ export const createSignInOption = (props: BaseSignInOptionProps): ReactElement =
  * Convenience function that creates the appropriate sign-in option component from an authenticator.
  */
 export const createSignInOptionFromAuthenticator = (
-  authenticator: ApplicationNativeAuthenticationAuthenticator,
+  authenticator: EmbeddedSignInFlowAuthenticator,
   formValues: Record<string, string>,
   touchedFields: Record<string, boolean>,
   isLoading: boolean,
   onInputChange: (param: string, value: string) => void,
-  onSubmit: (authenticator: ApplicationNativeAuthenticationAuthenticator, formData?: Record<string, string>) => void,
+  onSubmit: (authenticator: EmbeddedSignInFlowAuthenticator, formData?: Record<string, string>) => void,
   options?: {
     inputClassName?: string;
     buttonClassName?: string;
diff --git a/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx b/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
index 9b7f520a8..9b325cf28 100644
--- a/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/SmsOtp.tsx
@@ -16,11 +16,7 @@
  * under the License.
  */
 
-import {
-  ApplicationNativeAuthenticationAuthenticator,
-  ApplicationNativeAuthenticationAuthenticatorParamType,
-  FieldType,
-} from '@asgardeo/browser';
+import {EmbeddedSignInFlowAuthenticator, EmbeddedSignInFlowAuthenticatorParamType, FieldType} from '@asgardeo/browser';
 import {FC, useEffect} from 'react';
 import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
@@ -77,7 +73,7 @@ const SmsOtp: FC<BaseSignInOptionProps> = ({
               createField({
                 name: param.param,
                 type:
-                  param.type === ApplicationNativeAuthenticationAuthenticatorParamType.String
+                  param.type === EmbeddedSignInFlowAuthenticatorParamType.String
                     ? param.confidential
                       ? FieldType.Password
                       : FieldType.Text
diff --git a/packages/react/src/components/presentation/SignIn/options/Totp.tsx b/packages/react/src/components/presentation/SignIn/options/Totp.tsx
index ad03b0c54..b1d61328b 100644
--- a/packages/react/src/components/presentation/SignIn/options/Totp.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/Totp.tsx
@@ -16,11 +16,7 @@
  * under the License.
  */
 
-import {
-  ApplicationNativeAuthenticationAuthenticator,
-  ApplicationNativeAuthenticationAuthenticatorParamType,
-  FieldType,
-} from '@asgardeo/browser';
+import {EmbeddedSignInFlowAuthenticator, EmbeddedSignInFlowAuthenticatorParamType, FieldType} from '@asgardeo/browser';
 import {FC, useEffect} from 'react';
 import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
@@ -77,7 +73,7 @@ const Totp: FC<BaseSignInOptionProps> = ({
               createField({
                 name: param.param,
                 type:
-                  param.type === ApplicationNativeAuthenticationAuthenticatorParamType.String
+                  param.type === EmbeddedSignInFlowAuthenticatorParamType.String
                     ? param.confidential
                       ? FieldType.Password
                       : FieldType.Text
diff --git a/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx b/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
index 2f65e649a..602462d92 100644
--- a/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
+++ b/packages/react/src/components/presentation/SignIn/options/UsernamePassword.tsx
@@ -16,11 +16,7 @@
  * under the License.
  */
 
-import {
-  ApplicationNativeAuthenticationAuthenticator,
-  ApplicationNativeAuthenticationAuthenticatorParamType,
-  FieldType,
-} from '@asgardeo/browser';
+import {EmbeddedSignInFlowAuthenticator, EmbeddedSignInFlowAuthenticatorParamType, FieldType} from '@asgardeo/browser';
 import {FC, useEffect} from 'react';
 import {createField} from '../../../factories/FieldFactory';
 import Button from '../../../primitives/Button/Button';
@@ -61,7 +57,7 @@ const UsernamePassword: FC<BaseSignInOptionProps> = ({
           {createField({
             name: param.param,
             type:
-              param.type === ApplicationNativeAuthenticationAuthenticatorParamType.String
+              param.type === EmbeddedSignInFlowAuthenticatorParamType.String
                 ? param.confidential
                   ? FieldType.Password
                   : FieldType.Text
diff --git a/packages/react/src/components/presentation/SignIn/types.ts b/packages/react/src/components/presentation/SignIn/types.ts
index 0c27cb819..51f77b881 100644
--- a/packages/react/src/components/presentation/SignIn/types.ts
+++ b/packages/react/src/components/presentation/SignIn/types.ts
@@ -16,17 +16,14 @@
  * under the License.
  */
 
-import {
-  ApplicationNativeAuthenticationAuthenticator,
-  ApplicationNativeAuthenticationAuthenticatorParamType,
-} from '@asgardeo/browser';
+import {EmbeddedSignInFlowAuthenticator, EmbeddedSignInFlowAuthenticatorParamType} from '@asgardeo/browser';
 
 /**
  * Interface for form field state.
  */
 export interface FormField {
   param: string;
-  type: ApplicationNativeAuthenticationAuthenticatorParamType;
+  type: EmbeddedSignInFlowAuthenticatorParamType;
   displayName: string;
   confidential: boolean;
   required: boolean;
@@ -40,7 +37,7 @@ export interface BaseAuthenticatorProps {
   /**
    * The authenticator configuration.
    */
-  authenticator: ApplicationNativeAuthenticationAuthenticator;
+  authenticator: EmbeddedSignInFlowAuthenticator;
 
   /**
    * Current form values.
@@ -65,7 +62,7 @@ export interface BaseAuthenticatorProps {
   /**
    * Callback function called when the authenticator is submitted.
    */
-  onSubmit: (authenticator: ApplicationNativeAuthenticationAuthenticator, formData?: Record<string, string>) => void;
+  onSubmit: (authenticator: EmbeddedSignInFlowAuthenticator, formData?: Record<string, string>) => void;
 
   /**
    * Custom CSS class name for form inputs.
@@ -90,7 +87,7 @@ export interface AuthenticatorSelectorProps {
   /**
    * Available authenticators for selection.
    */
-  authenticators: ApplicationNativeAuthenticationAuthenticator[];
+  authenticators: EmbeddedSignInFlowAuthenticator[];
 
   /**
    * Current form values.
@@ -120,10 +117,7 @@ export interface AuthenticatorSelectorProps {
   /**
    * Callback function called when an authenticator is selected.
    */
-  onAuthenticatorSelection: (
-    authenticator: ApplicationNativeAuthenticationAuthenticator,
-    formData?: Record<string, string>,
-  ) => void;
+  onAuthenticatorSelection: (authenticator: EmbeddedSignInFlowAuthenticator, formData?: Record<string, string>) => void;
 
   /**
    * Custom CSS class names.

From 20d6b9f84708e37c444ef169ab1acbfa990bdfc9 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Fri, 20 Jun 2025 01:08:57 +0530
Subject: [PATCH 51/96] feat: refactor authentication flow to use embedded
 sign-in components and update related interfaces

---
 ERROR_CODES.md                                | 20 ++---
 .../__legacy__/clients/main-thread-client.ts  | 12 +--
 ...cation.ts => executeEmbeddedSignInFlow.ts} | 19 ++--
 ...ion.ts => initializeEmbeddedSignInFlow.ts} | 10 +--
 packages/javascript/src/index.ts              |  9 +-
 packages/javascript/src/models/client.ts      | 31 ++++---
 .../src/models/embedded-signin-flow.ts        |  4 +-
 packages/javascript/src/models/flow.ts        | 31 +++++++
 packages/nextjs/src/AsgardeoNextClient.ts     |  4 +-
 .../components/presentation/SignIn/SignIn.tsx |  6 +-
 packages/react/src/AsgardeoReactClient.ts     | 18 +++-
 packages/react/src/__temp__/api.ts            |  2 +-
 .../presentation/SignIn/BaseSignIn.tsx        | 89 +++++++------------
 .../components/presentation/SignIn/SignIn.tsx | 26 ++----
 .../contexts/Asgardeo/AsgardeoProvider.tsx    |  4 +-
 15 files changed, 146 insertions(+), 139 deletions(-)
 rename packages/javascript/src/api/{handleApplicationNativeAuthentication.ts => executeEmbeddedSignInFlow.ts} (74%)
 rename packages/javascript/src/api/{initializeApplicationNativeAuthentication.ts => initializeEmbeddedSignInFlow.ts} (93%)
 create mode 100644 packages/javascript/src/models/flow.ts

diff --git a/ERROR_CODES.md b/ERROR_CODES.md
index 0525b1b50..c277aa6e1 100644
--- a/ERROR_CODES.md
+++ b/ERROR_CODES.md
@@ -19,7 +19,7 @@ Error codes follow this format:
 #### 2. Function Name
 - Use the exact function name as defined in the code
 - Use camelCase format matching the function declaration
-- Examples: `getUserInfo`, `executeEmbeddedSignUpFlow`, `initializeApplicationNativeAuthentication`
+- Examples: `getUserInfo`, `executeEmbeddedSignUpFlow`, `initializeEmbeddedSignInFlow`
 
 #### 3. Error Category
 Categories represent the type of error:
@@ -96,8 +96,8 @@ Examples of when to use prefixes:
 
 ### Functions Needing Updates
 - ⏳ `getUserInfo` - Currently uses simple format, needs prefix evaluation
-- ⏳ `initializeApplicationNativeAuthentication` - Currently uses simple format, needs prefix evaluation  
-- ⏳ `handleApplicationNativeAuthentication` - Currently uses simple format, needs prefix evaluation
+- ⏳ `initializeEmbeddedSignInFlow` - Currently uses simple format, needs prefix evaluation  
+- ⏳ `executeEmbeddedSignInFlow` - Currently uses simple format, needs prefix evaluation
 
 ## Migration Notes
 
@@ -138,17 +138,17 @@ When updating existing error codes:
 - `getUserInfo-ValidationError-001` - Invalid endpoint URL
 - `getUserInfo-ResponseError-001` - Failed to fetch user info
 
-### initializeApplicationNativeAuthentication (Legacy Format)
-- `initializeApplicationNativeAuthentication-ValidationError-002` - Missing authorization payload
-- `initializeApplicationNativeAuthentication-ResponseError-001` - Authorization request failed
+### initializeEmbeddedSignInFlow (Legacy Format)
+- `initializeEmbeddedSignInFlow-ValidationError-002` - Missing authorization payload
+- `initializeEmbeddedSignInFlow-ResponseError-001` - Authorization request failed
 
-### handleApplicationNativeAuthentication (Legacy Format)
-- `handleApplicationNativeAuthentication-ValidationError-002` - Missing required parameter
-- `initializeApplicationNativeAuthentication-ResponseError-001` - Response error (Note: incorrect function name reference)
+### executeEmbeddedSignInFlow (Legacy Format)
+- `executeEmbeddedSignInFlow-ValidationError-002` - Missing required parameter
+- `initializeEmbeddedSignInFlow-ResponseError-001` - Response error (Note: incorrect function name reference)
 
 ## Recommended Actions
 
 1. **Standardize numbering**: Update legacy functions to use range-based numbering
-2. **Fix inconsistencies**: Correct the error code in `handleApplicationNativeAuthentication` that references the wrong function
+2. **Fix inconsistencies**: Correct the error code in `executeEmbeddedSignInFlow` that references the wrong function
 3. **Add prefixes**: Evaluate which functions need package prefixes based on their public API status
 4. **Document usage**: Add inline documentation in each file listing the error codes used
diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index 23bc51376..00a198689 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -29,8 +29,7 @@ import {
   SessionData,
   Storage,
   extractPkceStorageKeyFromState,
-  initializeApplicationNativeAuthentication,
-  handleApplicationNativeAuthentication,
+  initializeEmbeddedSignInFlow,
 } from '@asgardeo/javascript';
 import {SILENT_SIGN_IN_STATE, TOKEN_REQUEST_CONFIG_KEY} from '../constants';
 import {AuthenticationHelper} from '../helpers/authentication-helper';
@@ -181,13 +180,6 @@ export const MainThreadClient = async (
       params: Record<string, unknown>;
     },
   ): Promise<User> => {
-    if (signInConfig && signInConfig['flow']) {
-      return handleApplicationNativeAuthentication({
-        payload: signInConfig['flow']['payload'],
-        url: signInConfig['flow']['requestConfig']['url'],
-      });
-    }
-
     const basicUserInfo = await _authenticationHelper.handleSignIn(shouldStopAuthn, checkSession, undefined);
 
     if (basicUserInfo) {
@@ -242,7 +234,7 @@ export const MainThreadClient = async (
       if (signInConfig && signInConfig['response_mode'] === 'direct') {
         const authorizeUrl: URL = new URL(url);
 
-        return initializeApplicationNativeAuthentication({
+        return initializeEmbeddedSignInFlow({
           url: `${authorizeUrl.origin}${authorizeUrl.pathname}`,
           payload: Object.fromEntries(authorizeUrl.searchParams.entries()),
         });
diff --git a/packages/javascript/src/api/handleApplicationNativeAuthentication.ts b/packages/javascript/src/api/executeEmbeddedSignInFlow.ts
similarity index 74%
rename from packages/javascript/src/api/handleApplicationNativeAuthentication.ts
rename to packages/javascript/src/api/executeEmbeddedSignInFlow.ts
index d74f6273d..553615fd8 100644
--- a/packages/javascript/src/api/handleApplicationNativeAuthentication.ts
+++ b/packages/javascript/src/api/executeEmbeddedSignInFlow.ts
@@ -17,10 +17,7 @@
  */
 
 import AsgardeoAPIError from '../errors/AsgardeoAPIError';
-import {
-  ApplicationNativeAuthenticationHandleRequestPayload,
-  ApplicationNativeAuthenticationHandleResponse,
-} from '../models/embedded-signin-flow';
+import {EmbeddedSignInFlowHandleRequestPayload, EmbeddedSignInFlowHandleResponse} from '../models/embedded-signin-flow';
 
 /**
  * Request configuration for the authorize function.
@@ -33,19 +30,19 @@ export interface AuthorizeRequestConfig extends Partial<Request> {
   /**
    * The authorization request payload.
    */
-  payload: ApplicationNativeAuthenticationHandleRequestPayload;
+  payload: EmbeddedSignInFlowHandleRequestPayload;
 }
 
-const handleApplicationNativeAuthentication = async ({
+const executeEmbeddedSignInFlow = async ({
   url,
   baseUrl,
   payload,
   ...requestConfig
-}: AuthorizeRequestConfig): Promise<ApplicationNativeAuthenticationHandleResponse> => {
+}: AuthorizeRequestConfig): Promise<EmbeddedSignInFlowHandleResponse> => {
   if (!payload) {
     throw new AsgardeoAPIError(
       'Authorization payload is required',
-      'handleApplicationNativeAuthentication-ValidationError-002',
+      'executeEmbeddedSignInFlow-ValidationError-002',
       'javascript',
       400,
       'If an authorization payload is not provided, the request cannot be constructed correctly.',
@@ -69,14 +66,14 @@ const handleApplicationNativeAuthentication = async ({
 
     throw new AsgardeoAPIError(
       `Authorization request failed: ${errorText}`,
-      'initializeApplicationNativeAuthentication-ResponseError-001',
+      'initializeEmbeddedSignInFlow-ResponseError-001',
       'javascript',
       response.status,
       response.statusText,
     );
   }
 
-  return (await response.json()) as ApplicationNativeAuthenticationHandleResponse;
+  return (await response.json()) as EmbeddedSignInFlowHandleResponse;
 };
 
-export default handleApplicationNativeAuthentication;
+export default executeEmbeddedSignInFlow;
diff --git a/packages/javascript/src/api/initializeApplicationNativeAuthentication.ts b/packages/javascript/src/api/initializeEmbeddedSignInFlow.ts
similarity index 93%
rename from packages/javascript/src/api/initializeApplicationNativeAuthentication.ts
rename to packages/javascript/src/api/initializeEmbeddedSignInFlow.ts
index dcc777747..11d496373 100644
--- a/packages/javascript/src/api/initializeApplicationNativeAuthentication.ts
+++ b/packages/javascript/src/api/initializeEmbeddedSignInFlow.ts
@@ -98,7 +98,7 @@ export interface AuthorizeRequestConfig extends Partial<Request> {
  * @example
  * ```typescript
  * try {
- *   const authResponse = await initializeApplicationNativeAuthentication({
+ *   const authResponse = await initializeEmbeddedSignInFlow({
  *     url: "https://api.asgardeo.io/t/<ORGANIZATION>/oauth2/authorize",
  *     payload: {
  *       response_type: "code",
@@ -118,7 +118,7 @@ export interface AuthorizeRequestConfig extends Partial<Request> {
  * }
  * ```
  */
-const initializeApplicationNativeAuthentication = async ({
+const initializeEmbeddedSignInFlow = async ({
   url,
   baseUrl,
   payload,
@@ -127,7 +127,7 @@ const initializeApplicationNativeAuthentication = async ({
   if (!payload) {
     throw new AsgardeoAPIError(
       'Authorization payload is required',
-      'initializeApplicationNativeAuthentication-ValidationError-002',
+      'initializeEmbeddedSignInFlow-ValidationError-002',
       'javascript',
       400,
       'If an authorization payload is not provided, the request cannot be constructed correctly.',
@@ -158,7 +158,7 @@ const initializeApplicationNativeAuthentication = async ({
 
     throw new AsgardeoAPIError(
       `Authorization request failed: ${errorText}`,
-      'initializeApplicationNativeAuthentication-ResponseError-001',
+      'initializeEmbeddedSignInFlow-ResponseError-001',
       'javascript',
       response.status,
       response.statusText,
@@ -168,4 +168,4 @@ const initializeApplicationNativeAuthentication = async ({
   return (await response.json()) as EmbeddedSignInFlowInitiateResponse;
 };
 
-export default initializeApplicationNativeAuthentication;
+export default initializeEmbeddedSignInFlow;
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 4e411358a..a230e51ce 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -21,8 +21,8 @@ export * from './__legacy__/models';
 
 export * from './IsomorphicCrypto';
 
-export {default as initializeApplicationNativeAuthentication} from './api/initializeApplicationNativeAuthentication';
-export {default as handleApplicationNativeAuthentication} from './api/handleApplicationNativeAuthentication';
+export {default as initializeEmbeddedSignInFlow} from './api/initializeEmbeddedSignInFlow';
+export {default as executeEmbeddedSignInFlow} from './api/executeEmbeddedSignInFlow';
 export {default as executeEmbeddedSignUpFlow} from './api/executeEmbeddedSignUpFlow';
 export {default as getUserInfo} from './api/getUserInfo';
 
@@ -42,8 +42,8 @@ export {
   EmbeddedSignInFlowStepType,
   EmbeddedSignInFlowAuthenticator,
   EmbeddedSignInFlowLink,
-  ApplicationNativeAuthenticationHandleRequestPayload,
-  ApplicationNativeAuthenticationHandleResponse,
+  EmbeddedSignInFlowHandleRequestPayload,
+  EmbeddedSignInFlowHandleResponse,
   EmbeddedSignInFlowAuthenticatorParamType,
   EmbeddedSignInFlowAuthenticatorPromptType,
   EmbeddedSignInFlowAuthenticatorKnownIdPType,
@@ -58,6 +58,7 @@ export {
   EmbeddedFlowComponentType,
   EmbeddedFlowExecuteRequestPayload,
 } from './models/embedded-flow';
+export {FlowMode} from './models/flow';
 export {AsgardeoClient, SignInOptions, SignOutOptions, SignUpOptions} from './models/client';
 export {BaseConfig, Config, Preferences, ThemePreferences, I18nPreferences, WithPreferences} from './models/config';
 export {TokenResponse, IdTokenPayload, TokenExchangeRequestConfig} from './models/token';
diff --git a/packages/javascript/src/models/client.ts b/packages/javascript/src/models/client.ts
index f9fd45a35..351aed50f 100644
--- a/packages/javascript/src/models/client.ts
+++ b/packages/javascript/src/models/client.ts
@@ -81,20 +81,13 @@ export interface AsgardeoClient<T> {
   signIn(options?: SignInOptions): Promise<User>;
 
   /**
-   * Initiates a redirection-based sign-up process for the user.
-   *
-   * @param options - Optional sign-up options like additional parameters to be sent in the sign-up request, etc.
-   * @returns Promise resolving to the user upon successful sign up.
-   */
-  signUp(options?: SignUpOptions): Promise<void>;
-
-  /**
-   * Initiates an embedded (App-Native) sign-up flow for the user.
+   * Initiates an embedded (App-Native) sign-in flow for the user.
    *
-   * @param payload - The payload containing the necessary information to execute the embedded sign-up flow.
+   * @param payload - The payload containing the necessary information to execute the embedded sign-in flow.
+   * @param request - The request object containing URL and parameters for the sign-in flow HTTP request.
    * @returns A promise that resolves to an EmbeddedFlowExecuteResponse containing the flow execution details.
    */
-  signUp(payload: EmbeddedFlowExecuteRequestPayload): Promise<EmbeddedFlowExecuteResponse>;
+  signIn(payload: SignInOptions, request: globalThis.Request): Promise<User>;
 
   /**
    * Signs out the currently signed-in user.
@@ -115,4 +108,20 @@ export interface AsgardeoClient<T> {
    * @returns A promise that resolves to true if sign-out is successful
    */
   signOut(options?: SignOutOptions, sessionId?: string, afterSignOut?: (redirectUrl: string) => void): Promise<string>;
+
+  /**
+   * Initiates a redirection-based sign-up process for the user.
+   *
+   * @param options - Optional sign-up options like additional parameters to be sent in the sign-up request, etc.
+   * @returns Promise resolving to the user upon successful sign up.
+   */
+  signUp(options?: SignUpOptions): Promise<void>;
+
+  /**
+   * Initiates an embedded (App-Native) sign-up flow for the user.
+   *
+   * @param payload - The payload containing the necessary information to execute the embedded sign-up flow.
+   * @returns A promise that resolves to an EmbeddedFlowExecuteResponse containing the flow execution details.
+   */
+  signUp(payload: EmbeddedFlowExecuteRequestPayload): Promise<EmbeddedFlowExecuteResponse>;
 }
diff --git a/packages/javascript/src/models/embedded-signin-flow.ts b/packages/javascript/src/models/embedded-signin-flow.ts
index b60556895..116a24e5f 100644
--- a/packages/javascript/src/models/embedded-signin-flow.ts
+++ b/packages/javascript/src/models/embedded-signin-flow.ts
@@ -68,7 +68,7 @@ export interface EmbeddedSignInFlowLink {
   name: string;
 }
 
-export interface ApplicationNativeAuthenticationHandleRequestPayload {
+export interface EmbeddedSignInFlowHandleRequestPayload {
   flowId: string;
   selectedAuthenticator: {
     authenticatorId: string;
@@ -76,7 +76,7 @@ export interface ApplicationNativeAuthenticationHandleRequestPayload {
   };
 }
 
-export interface ApplicationNativeAuthenticationHandleResponse {
+export interface EmbeddedSignInFlowHandleResponse {
   authData: Record<string, any>;
   flowStatus: string;
 }
diff --git a/packages/javascript/src/models/flow.ts b/packages/javascript/src/models/flow.ts
new file mode 100644
index 000000000..14764f634
--- /dev/null
+++ b/packages/javascript/src/models/flow.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 FlowMode {
+  /**
+   * This mode is suitable for embedded sign-in, sign-up, etc. flows where the authentication
+   * UIs are rendered within the application.
+   * @see {@link https://is.docs.wso2.com/en/7.1.0/references/app-native-authentication/}
+   */
+  Embedded = 'DIRECT',
+  /**
+   * Traditional redirect based sign-in, sign-up, etc. flows where the authentication
+   * UIs are from a external Identity Provider (ex: WSO2 Identity Server or Asgardeo).
+   */
+  Redirect = 'REDIRECTION',
+}
diff --git a/packages/nextjs/src/AsgardeoNextClient.ts b/packages/nextjs/src/AsgardeoNextClient.ts
index 68646f293..750fd3288 100644
--- a/packages/nextjs/src/AsgardeoNextClient.ts
+++ b/packages/nextjs/src/AsgardeoNextClient.ts
@@ -27,7 +27,7 @@ import {
   SignUpOptions,
   User,
   UserProfile,
-  initializeApplicationNativeAuthentication,
+  initializeEmbeddedSignInFlow,
 } from '@asgardeo/node';
 import {NextRequest, NextResponse} from 'next/server';
 import InternalAuthAPIRoutesConfig from './configs/InternalAuthAPIRoutesConfig';
@@ -148,7 +148,7 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
       const {pathname, origin, searchParams} = signInUrl;
 
       try {
-        response = await initializeApplicationNativeAuthentication({
+        response = await initializeEmbeddedSignInFlow({
           url: `${origin}${pathname}`,
           payload: Object.fromEntries(searchParams.entries()),
         });
diff --git a/packages/nextjs/src/client/components/presentation/SignIn/SignIn.tsx b/packages/nextjs/src/client/components/presentation/SignIn/SignIn.tsx
index 86e7df293..cbb1c6675 100644
--- a/packages/nextjs/src/client/components/presentation/SignIn/SignIn.tsx
+++ b/packages/nextjs/src/client/components/presentation/SignIn/SignIn.tsx
@@ -62,17 +62,17 @@ export interface SignInProps extends BaseSignInProps {
  * @example
  * ```tsx
  * import { SignIn } from '@asgardeo/nextjs';
- * import { handleApplicationNativeAuthentication } from '@asgardeo/browser';
+ * import { executeEmbeddedSignInFlow } from '@asgardeo/browser';
  *
  * const LoginPage = () => {
  *   const handleInitialize = async () => {
- *     return await handleApplicationNativeAuthentication({
+ *     return await executeEmbeddedSignInFlow({
  *       response_mode: 'direct',
  *     });
  *   };
  *
  *   const handleSubmit = async (flow) => {
- *     return await handleApplicationNativeAuthentication({ flow });
+ *     return await executeEmbeddedSignInFlow({ flow });
  *   };
  *
  *   return (
diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index 0c2a5cf18..0ba63351d 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -30,6 +30,8 @@ import {
   EmbeddedFlowExecuteRequestPayload,
   AsgardeoRuntimeError,
   executeEmbeddedSignUpFlow,
+  EmbeddedSignInFlowHandleRequestPayload,
+  executeEmbeddedSignInFlow,
 } from '@asgardeo/browser';
 import AuthAPI from './__temp__/api';
 import getMeProfile from './api/scim2/getMeProfile';
@@ -108,8 +110,20 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
     return this.asgardeo.isSignedIn();
   }
 
-  override signIn(options?: SignInOptions): Promise<User> {
-    return this.asgardeo.signIn(options as any) as unknown as Promise<User>;
+  override signIn(options?: SignInOptions): Promise<User>;
+  override signIn(payload: EmbeddedSignInFlowHandleRequestPayload, request: Request): Promise<User>;
+  override async signIn(...args: any[]): Promise<User> {
+    const arg1 = args[0];
+    const arg2 = args[1];
+
+    if (typeof arg1 === 'object' && 'flowId' in arg1 && typeof arg1 === 'object' && 'url' in arg2) {
+      return executeEmbeddedSignInFlow({
+        payload: arg1,
+        url: (arg2 as Request).url,
+      });
+    }
+
+    return this.asgardeo.signIn(arg1 as any) as unknown as Promise<User>;
   }
 
   override signOut(options?: SignOutOptions, afterSignOut?: (redirectUrl: string) => void): Promise<string>;
diff --git a/packages/react/src/__temp__/api.ts b/packages/react/src/__temp__/api.ts
index 5e972d35b..03f2280e0 100644
--- a/packages/react/src/__temp__/api.ts
+++ b/packages/react/src/__temp__/api.ts
@@ -29,7 +29,7 @@ import {
   OIDCEndpoints,
   SignInConfig,
   SPACustomGrantConfig,
-  initializeApplicationNativeAuthentication,
+  initializeEmbeddedSignInFlow,
   processOpenIDScopes,
 } from '@asgardeo/browser';
 import {AuthStateInterface} from './models';
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index 46e1b1461..643fbc6df 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -19,13 +19,14 @@
 import {
   EmbeddedSignInFlowAuthenticator,
   EmbeddedSignInFlowInitiateResponse,
-  ApplicationNativeAuthenticationHandleResponse,
+  EmbeddedSignInFlowHandleResponse,
   EmbeddedSignInFlowStepType,
   EmbeddedSignInFlowStatus,
   EmbeddedSignInFlowAuthenticatorPromptType,
   ApplicationNativeAuthenticationConstants,
   AsgardeoAPIError,
   withVendorCSSClassPrefix,
+  EmbeddedSignInFlowHandleRequestPayload,
 } from '@asgardeo/browser';
 import {clsx} from 'clsx';
 import {FC, ReactElement, FormEvent, useEffect, useState, useCallback, useRef} from 'react';
@@ -248,7 +249,7 @@ export interface BaseSignInProps {
    * Callback function called when authentication flow status changes.
    * @param response - The current authentication response.
    */
-  onFlowChange?: (response: EmbeddedSignInFlowInitiateResponse | ApplicationNativeAuthenticationHandleResponse) => void;
+  onFlowChange?: (response: EmbeddedSignInFlowInitiateResponse | EmbeddedSignInFlowHandleResponse) => void;
 
   /**
    * Function to initialize authentication flow.
@@ -261,19 +262,10 @@ export interface BaseSignInProps {
    * @param payload - The authentication payload.
    * @returns Promise resolving to the authentication response.
    */
-  onSubmit?: (flow: {
-    payload: {
-      flowId: string;
-      selectedAuthenticator: {
-        authenticatorId: string;
-        params: Record<string, string>;
-      };
-    };
-    requestConfig?: {
-      method: string;
-      url: string;
-    };
-  }) => Promise<ApplicationNativeAuthenticationHandleResponse>;
+  onSubmit?: (
+    payload: EmbeddedSignInFlowHandleRequestPayload,
+    request: Partial<Request>,
+  ) => Promise<EmbeddedSignInFlowHandleResponse>;
 
   /**
    * Callback function called when authentication is successful.
@@ -346,7 +338,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
   messageClassName = '',
   size = 'medium',
   variant = 'default',
-}) => {
+}: BaseSignInProps) => {
   const {t} = useTranslation();
   const {subtitle: flowSubtitle, title: flowTitle, messages: flowMessages} = useFlow();
 
@@ -428,7 +420,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
    * @param response - The authentication response
    * @returns true if a redirect was performed, false otherwise
    */
-  const handleRedirectionIfNeeded = (response: ApplicationNativeAuthenticationHandleResponse): boolean => {
+  const handleRedirectionIfNeeded = (response: EmbeddedSignInFlowHandleResponse): boolean => {
     if (
       'nextStep' in response &&
       response.nextStep &&
@@ -489,12 +481,9 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
               },
             };
 
-            await onSubmit({
-              requestConfig: {
-                method: currentFlow?.links[0].method,
-                url: currentFlow?.links[0].href,
-              },
-              payload,
+            await onSubmit(payload, {
+              method: currentFlow?.links[0].method,
+              url: currentFlow?.links[0].href,
             });
 
             popup.close();
@@ -563,12 +552,9 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
                     },
                   };
 
-                  const response = await onSubmit({
-                    requestConfig: {
-                      method: currentFlow?.links[0].method,
-                      url: currentFlow?.links[0].href,
-                    },
-                    payload,
+                  const response = await onSubmit(payload, {
+                    method: currentFlow?.links[0].method,
+                    url: currentFlow?.links[0].href,
                   });
 
                   popup.close();
@@ -624,12 +610,9 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
         },
       };
 
-      const response = await onSubmit({
-        requestConfig: {
-          method: currentFlow?.links[0].method,
-          url: currentFlow?.links[0].href,
-        },
-        payload,
+      const response = await onSubmit(payload, {
+        method: currentFlow?.links[0].method,
+        url: currentFlow?.links[0].href,
       });
       onFlowChange?.(response);
 
@@ -727,12 +710,9 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
             },
           };
 
-          const response = await onSubmit({
-            requestConfig: {
-              method: currentFlow?.links[0].method,
-              url: currentFlow?.links[0].href,
-            },
-            payload,
+          const response = await onSubmit(payload, {
+            method: currentFlow?.links[0].method,
+            url: currentFlow?.links[0].href,
           });
           onFlowChange?.(response);
 
@@ -807,12 +787,9 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
           },
         };
 
-        const response = await onSubmit({
-          requestConfig: {
-            method: currentFlow?.links[0].method,
-            url: currentFlow?.links[0].href,
-          },
-          payload,
+        const response = await onSubmit(payload, {
+          method: currentFlow?.links[0].method,
+          url: currentFlow?.links[0].href,
         });
         onFlowChange?.(response);
 
@@ -838,12 +815,9 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
           },
         };
 
-        const response = await onSubmit({
-          requestConfig: {
-            method: currentFlow?.links[0].method,
-            url: currentFlow?.links[0].href,
-          },
-          payload,
+        const response = await onSubmit(payload, {
+          method: currentFlow?.links[0].method,
+          url: currentFlow?.links[0].href,
         });
         onFlowChange?.(response);
 
@@ -912,12 +886,9 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
             },
           };
 
-          const response = await onSubmit({
-            requestConfig: {
-              method: currentFlow?.links[0].method,
-              url: currentFlow?.links[0].href,
-            },
-            payload,
+          const response = await onSubmit(payload, {
+            method: currentFlow?.links[0].method,
+            url: currentFlow?.links[0].href,
           });
           onFlowChange?.(response);
 
diff --git a/packages/react/src/components/presentation/SignIn/SignIn.tsx b/packages/react/src/components/presentation/SignIn/SignIn.tsx
index 3a12aa852..05ab66d10 100644
--- a/packages/react/src/components/presentation/SignIn/SignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/SignIn.tsx
@@ -16,7 +16,11 @@
  * under the License.
  */
 
-import {EmbeddedSignInFlowInitiateResponse, ApplicationNativeAuthenticationHandleResponse} from '@asgardeo/browser';
+import {
+  EmbeddedSignInFlowInitiateResponse,
+  EmbeddedSignInFlowHandleResponse,
+  EmbeddedSignInFlowHandleRequestPayload,
+} from '@asgardeo/browser';
 import {FC} from 'react';
 import BaseSignIn from './BaseSignIn';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
@@ -78,22 +82,10 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', variant = 'default
   /**
    * Handle authentication steps.
    */
-  const handleOnSubmit = async (flow: {
-    payload: {
-      flowId: string;
-      selectedAuthenticator: {
-        authenticatorId: string;
-        params: Record<string, string>;
-      };
-    };
-    requestConfig?: {
-      method: string;
-      url: string;
-    };
-  }): Promise<ApplicationNativeAuthenticationHandleResponse> =>
-    await signIn({
-      flow,
-    });
+  const handleOnSubmit = async (
+    payload: EmbeddedSignInFlowHandleRequestPayload,
+    request: Request,
+  ): Promise<EmbeddedSignInFlowHandleResponse> => await signIn(payload, request);
 
   /**
    * Handle successful authentication and redirect with query params.
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index bc8d67bd0..a979724d2 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -165,9 +165,9 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
     })();
   }, [asgardeo]);
 
-  const signIn = async (options?: SignInOptions): Promise<User> => {
+  const signIn = async (...args: any): Promise<User> => {
     try {
-      const response: User = await asgardeo.signIn(options);
+      const response: User = await asgardeo.signIn(...args);
 
       if (await asgardeo.isSignedIn()) {
         setUser(await asgardeo.getUser());

From 7404f80967b80435cb416824c199a25eb5055cad Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Fri, 20 Jun 2025 01:16:24 +0530
Subject: [PATCH 52/96] feat: introduce AsgardeoLoading component and remove
 Loaded component from the library

---
 .../{Loading.tsx => AsgardeoLoading.tsx}      | 17 +++---
 .../react/src/components/control/Loaded.tsx   | 60 -------------------
 packages/react/src/index.ts                   |  7 +--
 .../teamspace-react/src/components/Header.tsx | 28 ++++-----
 4 files changed, 24 insertions(+), 88 deletions(-)
 rename packages/react/src/components/control/{Loading.tsx => AsgardeoLoading.tsx} (74%)
 delete mode 100644 packages/react/src/components/control/Loaded.tsx

diff --git a/packages/react/src/components/control/Loading.tsx b/packages/react/src/components/control/AsgardeoLoading.tsx
similarity index 74%
rename from packages/react/src/components/control/Loading.tsx
rename to packages/react/src/components/control/AsgardeoLoading.tsx
index 31374c3d0..8c49af891 100644
--- a/packages/react/src/components/control/Loading.tsx
+++ b/packages/react/src/components/control/AsgardeoLoading.tsx
@@ -22,7 +22,7 @@ import useAsgardeo from '../../contexts/Asgardeo/useAsgardeo';
 /**
  * Props for the Loading component.
  */
-export interface LoadingProps {
+export interface AsgardeoLoadingProps {
   /**
    * Content to show when the user is not signed in.
    */
@@ -34,18 +34,21 @@ export interface LoadingProps {
  *
  * @example
  * ```tsx
- * import { Loading } from '@asgardeo/auth-react';
+ * import { AsgardeoLoading } from '@asgardeo/auth-react';
  *
  * const App = () => {
  *   return (
- *     <Loading fallback={<p>Finished Loading...</p>}>
+ *     <AsgardeoLoading fallback={<p>Finished Loading...</p>}>
  *       <p>Loading...</p>
- *     </Loading>
+ *     </AsgardeoLoading>
  *   );
  * }
  * ```
  */
-const Loading: FC<PropsWithChildren<LoadingProps>> = ({children, fallback = null}: PropsWithChildren<LoadingProps>) => {
+const AsgardeoLoading: FC<PropsWithChildren<AsgardeoLoadingProps>> = ({
+  children,
+  fallback = null,
+}: PropsWithChildren<AsgardeoLoadingProps>) => {
   const {isLoading} = useAsgardeo();
 
   if (!isLoading) {
@@ -55,6 +58,6 @@ const Loading: FC<PropsWithChildren<LoadingProps>> = ({children, fallback = null
   return <>{children}</>;
 };
 
-Loading.displayName = 'Loading';
+AsgardeoLoading.displayName = 'Loading';
 
-export default Loading;
+export default AsgardeoLoading;
diff --git a/packages/react/src/components/control/Loaded.tsx b/packages/react/src/components/control/Loaded.tsx
deleted file mode 100644
index d7e7406f6..000000000
--- a/packages/react/src/components/control/Loaded.tsx
+++ /dev/null
@@ -1,60 +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 {FC, PropsWithChildren, ReactNode} from 'react';
-import useAsgardeo from '../../contexts/Asgardeo/useAsgardeo';
-
-/**
- * Props for the Loaded component.
- */
-export interface LoadedProps {
-  /**
-   * Content to show when the user is not signed in.
-   */
-  fallback?: ReactNode;
-}
-
-/**
- * A component that only renders its children when the Asgardeo has finished Loading.
- *
- * @example
- * ```tsx
- * import { Loaded } from '@asgardeo/auth-react';
- *
- * const App = () => {
- *   return (
- *     <Loaded fallback={<p>Loading...</p>}>
- *       <p>Loaded</p>
- *     </Loaded>
- *   );
- * }
- * ```
- */
-const Loaded: FC<PropsWithChildren<LoadedProps>> = ({children, fallback = null}: PropsWithChildren<LoadedProps>) => {
-  const {isLoading} = useAsgardeo();
-
-  if (isLoading) {
-    return <>{fallback}</>;
-  }
-
-  return <>{children}</>;
-};
-
-Loaded.displayName = 'Loaded';
-
-export default Loaded;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 6f0fb1a46..7ca573c0a 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -94,11 +94,8 @@ export * from './components/control/SignedIn';
 export {default as SignedOut} from './components/control/SignedOut';
 export * from './components/control/SignedOut';
 
-export {default as Loading} from './components/control/Loading';
-export * from './components/control/Loading';
-
-export {default as Loaded} from './components/control/Loaded';
-export * from './components/control/Loaded';
+export {default as AsgardeoLoading} from './components/control/AsgardeoLoading';
+export * from './components/control/AsgardeoLoading';
 
 export {default as BaseSignIn} from './components/presentation/SignIn/BaseSignIn';
 export * from './components/presentation/SignIn/BaseSignIn';
diff --git a/samples/teamspace-react/src/components/Header.tsx b/samples/teamspace-react/src/components/Header.tsx
index af7e42f67..dc61c664f 100644
--- a/samples/teamspace-react/src/components/Header.tsx
+++ b/samples/teamspace-react/src/components/Header.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import {SignedIn, SignedOut, Loaded} from '@asgardeo/react';
+import {SignedIn, SignedOut} from '@asgardeo/react';
 import Logo from './header/Logo';
 import PublicNavigation from './header/PublicNavigation';
 import AuthenticatedNavigation from './header/AuthenticatedNavigation';
@@ -17,9 +17,7 @@ export default function Header() {
           <div className="flex items-center space-x-8">
             <SignedIn>
               <Logo to="/dashboard" />
-              <Loaded>
-                <AuthenticatedNavigation />
-              </Loaded>
+              <AuthenticatedNavigation />
             </SignedIn>
             <SignedOut>
               <Logo to="/" />
@@ -27,18 +25,16 @@ export default function Header() {
             </SignedOut>
           </div>
 
-          <Loaded>
-            {/* Right side - Actions based on auth state */}
-            <div className="flex items-center space-x-2">
-              <SignedOut>
-                <PublicActions showMobileActions={false} />
-              </SignedOut>
-              <SignedIn>
-                <AuthenticatedActions />
-                <AuthenticatedMobileMenu />
-              </SignedIn>
-            </div>
-          </Loaded>
+          {/* Right side - Actions based on auth state */}
+          <div className="flex items-center space-x-2">
+            <SignedOut>
+              <PublicActions showMobileActions={false} />
+            </SignedOut>
+            <SignedIn>
+              <AuthenticatedActions />
+              <AuthenticatedMobileMenu />
+            </SignedIn>
+          </div>
         </div>
       </div>
     </header>

From 3c7cb0c671d411d5a74fd4ae8f7199939c1ae0ea Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Fri, 20 Jun 2025 12:01:50 +0530
Subject: [PATCH 53/96] feat: Add OrganizationSwitcher component with context
 integration

- Implemented OrganizationSwitcher component to allow users to switch between organizations.
- Created OrganizationContext and OrganizationProvider for managing organization data and state.
- Added useOrganization hook for easy access to organization context.
- Developed tests for OrganizationSwitcher to ensure proper rendering and functionality based on user authentication state.
- Introduced new icons: Building, Check, and ChevronDown for UI consistency.
- Updated AsgardeoProvider to include OrganizationProvider for context management.
- Refactored BaseUserDropdown to improve code structure.
---
 .../src/AsgardeoJavaScriptClient.ts           |   5 +-
 packages/javascript/src/index.ts              |   1 +
 packages/javascript/src/models/client.ts      |   8 +
 .../javascript/src/models/organization.ts     |  23 +
 packages/react/src/AsgardeoReactClient.ts     |  20 +
 .../react/src/api/scim2/getMeOrganizations.ts |  83 +++
 .../Organization/BaseOrganization.tsx         |  80 +++
 .../Organization/Organization.tsx             |  82 +++
 .../BaseOrganizationSwitcher.tsx              | 561 ++++++++++++++++++
 .../OrganizationSwitcher.test.tsx             | 112 ++++
 .../OrganizationSwitcher.tsx                  | 117 ++++
 .../UserDropdown/BaseUserDropdown.tsx         |   2 +-
 .../components/primitives/Icons/Building.tsx  |  62 ++
 .../src/components/primitives/Icons/Check.tsx |  50 ++
 .../primitives/Icons/ChevronDown.tsx          |  50 ++
 .../contexts/Asgardeo/AsgardeoProvider.tsx    |   5 +-
 .../Organization/OrganizationContext.ts       |  50 ++
 .../Organization/OrganizationProvider.tsx     | 211 +++++++
 .../contexts/Organization/useOrganization.ts  | 116 ++++
 packages/react/src/index.ts                   |  21 +
 20 files changed, 1656 insertions(+), 3 deletions(-)
 create mode 100644 packages/javascript/src/models/organization.ts
 create mode 100644 packages/react/src/api/scim2/getMeOrganizations.ts
 create mode 100644 packages/react/src/components/presentation/Organization/BaseOrganization.tsx
 create mode 100644 packages/react/src/components/presentation/Organization/Organization.tsx
 create mode 100644 packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
 create mode 100644 packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.test.tsx
 create mode 100644 packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
 create mode 100644 packages/react/src/components/primitives/Icons/Building.tsx
 create mode 100644 packages/react/src/components/primitives/Icons/Check.tsx
 create mode 100644 packages/react/src/components/primitives/Icons/ChevronDown.tsx
 create mode 100644 packages/react/src/contexts/Organization/OrganizationContext.ts
 create mode 100644 packages/react/src/contexts/Organization/OrganizationProvider.tsx
 create mode 100644 packages/react/src/contexts/Organization/useOrganization.ts

diff --git a/packages/javascript/src/AsgardeoJavaScriptClient.ts b/packages/javascript/src/AsgardeoJavaScriptClient.ts
index 730a87c7d..c9dccdb9d 100644
--- a/packages/javascript/src/AsgardeoJavaScriptClient.ts
+++ b/packages/javascript/src/AsgardeoJavaScriptClient.ts
@@ -17,9 +17,10 @@
  */
 
 import {AsgardeoClient, SignInOptions, SignOutOptions, SignUpOptions} from './models/client';
-import {User, UserProfile} from './models/user';
 import {Config} from './models/config';
 import {EmbeddedFlowExecuteRequestPayload, EmbeddedFlowExecuteResponse} from './models/embedded-flow';
+import {Organization} from './models/organization';
+import {User, UserProfile} from './models/user';
 
 /**
  * Base class for implementing Asgardeo clients.
@@ -32,6 +33,8 @@ abstract class AsgardeoJavaScriptClient<T = Config> implements AsgardeoClient<T>
 
   abstract getUser(): Promise<User>;
 
+  abstract getOrganizations(): Promise<Organization[]>;
+
   abstract getUserProfile(): Promise<UserProfile>;
 
   abstract isLoading(): boolean;
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index a230e51ce..fa1e02083 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -73,6 +73,7 @@ export {OIDCEndpoints} from './models/oidc-endpoints';
 export {Storage, TemporaryStore} from './models/store';
 export {User, UserProfile} from './models/user';
 export {SessionData} from './models/session';
+export {Organization} from './models/organization';
 export {Schema, SchemaAttribute, WellKnownSchemaIds, FlattenedSchema} from './models/scim2-schema';
 export {RecursivePartial} from './models/utility-types';
 export {FieldType} from './models/field';
diff --git a/packages/javascript/src/models/client.ts b/packages/javascript/src/models/client.ts
index 351aed50f..5201e5976 100644
--- a/packages/javascript/src/models/client.ts
+++ b/packages/javascript/src/models/client.ts
@@ -17,6 +17,7 @@
  */
 
 import {EmbeddedFlowExecuteRequestPayload, EmbeddedFlowExecuteResponse} from './embedded-flow';
+import {Organization} from './organization';
 import {User, UserProfile} from './user';
 
 export type SignInOptions = Record<string, unknown>;
@@ -34,6 +35,13 @@ export type SignUpOptions = Record<string, unknown>;
  * ```
  */
 export interface AsgardeoClient<T> {
+  /**
+   * Gets the users associated organizations.
+   *
+   * @returns Associated organizations.
+   */
+  getOrganizations(): Promise<Organization[]>;
+
   /**
    * Gets user information from the session.
    *
diff --git a/packages/javascript/src/models/organization.ts b/packages/javascript/src/models/organization.ts
new file mode 100644
index 000000000..aa77361b8
--- /dev/null
+++ b/packages/javascript/src/models/organization.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.
+ */
+
+export interface Organization {
+  id: string;
+  name: string;
+  orgHandle: string;
+}
diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index 0ba63351d..c44c47208 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -32,8 +32,10 @@ import {
   executeEmbeddedSignUpFlow,
   EmbeddedSignInFlowHandleRequestPayload,
   executeEmbeddedSignInFlow,
+  Organization,
 } from '@asgardeo/browser';
 import AuthAPI from './__temp__/api';
+import getMeOrganizations from './api/scim2/getMeOrganizations';
 import getMeProfile from './api/scim2/getMeProfile';
 import getSchemas from './api/scim2/getSchemas';
 import {AsgardeoReactConfig} from './models/config';
@@ -98,6 +100,24 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
     }
   }
 
+  override async getOrganizations(): Promise<Organization[]> {
+    try {
+      const configData = await this.asgardeo.getConfigData();
+      const baseUrl = configData?.baseUrl;
+
+      const organizations = await getMeOrganizations({baseUrl});
+
+      return organizations;
+    } catch (error) {
+      throw new AsgardeoRuntimeError(
+        'Failed to fetch organizations.',
+        'react-AsgardeoReactClient-GetOrganizationsError-001',
+        'react',
+        'An error occurred while fetching the organizations associated with the user.',
+      );
+    }
+  }
+
   override isLoading(): boolean {
     return this.asgardeo.isLoading();
   }
diff --git a/packages/react/src/api/scim2/getMeOrganizations.ts b/packages/react/src/api/scim2/getMeOrganizations.ts
new file mode 100644
index 000000000..b7972c27e
--- /dev/null
+++ b/packages/react/src/api/scim2/getMeOrganizations.ts
@@ -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 {AsgardeoAPIError, HttpInstance, AsgardeoSPAClient, HttpRequestConfig, Organization} from '@asgardeo/browser';
+
+const httpClient: HttpInstance = AsgardeoSPAClient.getInstance().httpRequest.bind(AsgardeoSPAClient.getInstance());
+
+/**
+ * Retrieves the organizations associated with the current user.
+ *
+ * @param config - Configuration object containing baseUrl and optional request config.
+ * @returns A promise that resolves with the organizations information.
+ * @example
+ * ```typescript
+ * try {
+ *   const organizations = await getMeOrganizations({
+ *     baseUrl: "https://api.asgardeo.io/t/<ORGANIZATION>",
+ *   });
+ *   console.log(organizations);
+ * } catch (error) {
+ *   if (error instanceof AsgardeoAPIError) {
+ *     console.error('Failed to get organizations:', error.message);
+ *   }
+ * }
+ * ```
+ */
+const getMeOrganizations = async ({
+  baseUrl,
+  ...requestConfig
+}: Partial<Request> & {
+  baseUrl: string;
+}): Promise<Organization[]> => {
+  if (!baseUrl) {
+    throw new AsgardeoAPIError(
+      'Base URL is required',
+      'getMeOrganizations-ValidationError-001',
+      'javascript',
+      400,
+      'Invalid Request',
+    );
+  }
+
+  const response: any = await httpClient({
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    },
+    method: 'GET',
+    url: `${baseUrl}/api/users/v1/me/organizations/root/descendants`,
+    ...requestConfig,
+  } as HttpRequestConfig);
+
+  if (!response.data) {
+    const errorText: string = await response.text();
+
+    throw new AsgardeoAPIError(
+      `Failed to fetch associated organizations of the user: ${errorText}`,
+      'getMeOrganizations-ResponseError-001',
+      'javascript',
+      response.status,
+      response.statusText,
+    );
+  }
+
+  return response.data;
+};
+
+export default getMeOrganizations;
diff --git a/packages/react/src/components/presentation/Organization/BaseOrganization.tsx b/packages/react/src/components/presentation/Organization/BaseOrganization.tsx
new file mode 100644
index 000000000..cbce4f43c
--- /dev/null
+++ b/packages/react/src/components/presentation/Organization/BaseOrganization.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 {Organization as IOrganization} from '@asgardeo/browser';
+import {FC, ReactElement, ReactNode} from 'react';
+
+/**
+ * Props for the BaseOrganization component.
+ */
+export interface BaseOrganizationProps {
+  /**
+   * Render prop that takes the organization object and returns a ReactNode.
+   * @param organization - The organization object from Asgardeo.
+   * @returns A ReactNode to render.
+   */
+  children: (organization: IOrganization | null) => ReactNode;
+
+  /**
+   * Optional element to render when no organization is provided.
+   */
+  fallback?: ReactNode;
+
+  /**
+   * The organization object to display. If not provided, the component will render the fallback.
+   */
+  organization: IOrganization | null;
+}
+
+/**
+ * Base Organization component that provides the core functionality for displaying organization information.
+ * This component takes an organization 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
+ * an organization object available. For React applications, use the Organization component which
+ * automatically retrieves the current organization from Organization context.
+ *
+ * @example
+ * ```tsx
+ * import { BaseOrganization } from '@asgardeo/auth-react';
+ *
+ * const MyComponent = ({ organization }) => {
+ *   return (
+ *     <BaseOrganization organization={organization} fallback={<p>No organization data</p>}>
+ *       {(org) => (
+ *         <div>
+ *           <h1>Organization: {org.name}</h1>
+ *           <p>ID: {org.id}</p>
+ *         </div>
+ *       )}
+ *     </BaseOrganization>
+ *   );
+ * }
+ * ```
+ */
+const BaseOrganization: FC<BaseOrganizationProps> = ({children, fallback = null, organization}): ReactElement => {
+  if (!organization) {
+    return <>{fallback}</>;
+  }
+
+  return <>{children(organization)}</>;
+};
+
+BaseOrganization.displayName = 'BaseOrganization';
+
+export default BaseOrganization;
diff --git a/packages/react/src/components/presentation/Organization/Organization.tsx b/packages/react/src/components/presentation/Organization/Organization.tsx
new file mode 100644
index 000000000..63017954c
--- /dev/null
+++ b/packages/react/src/components/presentation/Organization/Organization.tsx
@@ -0,0 +1,82 @@
+/**
+ * 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 {Organization as IOrganization} from '@asgardeo/browser';
+import {FC, ReactElement, ReactNode} from 'react';
+import BaseOrganization, {BaseOrganizationProps} from './BaseOrganization';
+import useOrganization from '../../../contexts/Organization/useOrganization';
+
+/**
+ * Props for the Organization component.
+ * Extends BaseOrganizationProps but makes the organization prop optional since it will be obtained from useOrganization
+ */
+export interface OrganizationProps extends Omit<BaseOrganizationProps, 'organization'> {
+  /**
+   * Render prop that takes the organization object and returns a ReactNode.
+   * @param organization - The current organization object from Organization context.
+   * @returns A ReactNode to render.
+   */
+  children: (organization: IOrganization | null) => ReactNode;
+
+  /**
+   * Optional element to render when no organization is selected.
+   */
+  fallback?: ReactNode;
+}
+
+/**
+ * A component that uses render props to expose the current organization object.
+ * This component automatically retrieves the current organization from Organization context.
+ *
+ * @remarks This component is only supported in browser based React applications (CSR).
+ *
+ * @example
+ * ```tsx
+ * import { Organization } from '@asgardeo/auth-react';
+ *
+ * const App = () => {
+ *   return (
+ *     <Organization fallback={<p>No organization selected</p>}>
+ *       {(organization) => (
+ *         <div>
+ *           <h1>Current Organization: {organization.name}!</h1>
+ *           <p>ID: {organization.id}</p>
+ *           <p>Role: {organization.role}</p>
+ *           {organization.memberCount && (
+ *             <p>Members: {organization.memberCount}</p>
+ *           )}
+ *         </div>
+ *       )}
+ *     </Organization>
+ *   );
+ * }
+ * ```
+ */
+const Organization: FC<OrganizationProps> = ({children, fallback = null}): ReactElement => {
+  const {currentOrganization} = useOrganization();
+
+  return (
+    <BaseOrganization organization={currentOrganization} fallback={fallback}>
+      {children}
+    </BaseOrganization>
+  );
+};
+
+Organization.displayName = 'Organization';
+
+export default Organization;
diff --git a/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx b/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
new file mode 100644
index 000000000..a08bcbe6a
--- /dev/null
+++ b/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
@@ -0,0 +1,561 @@
+/**
+ * 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 {withVendorCSSClassPrefix} from '@asgardeo/browser';
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  useClick,
+  useDismiss,
+  useRole,
+  useInteractions,
+  FloatingFocusManager,
+  FloatingPortal,
+} from '@floating-ui/react';
+import clsx from 'clsx';
+import {CSSProperties, FC, ReactElement, ReactNode, useMemo, useState} from 'react';
+import useTheme from '../../../contexts/Theme/useTheme';
+import {Avatar} from '../../primitives/Avatar/Avatar';
+import Button from '../../primitives/Button/Button';
+import Building from '../../primitives/Icons/Building';
+import Check from '../../primitives/Icons/Check';
+import ChevronDown from '../../primitives/Icons/ChevronDown';
+import Typography from '../../primitives/Typography/Typography';
+
+const useStyles = () => {
+  const {theme, colorScheme} = useTheme();
+
+  return useMemo(
+    () => ({
+      trigger: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: `${theme.spacing.unit}px`,
+        padding: `${theme.spacing.unit * 0.75}px ${theme.spacing.unit}px`,
+        border: `1px solid ${theme.colors.border}`,
+        background: theme.colors.background.surface,
+        cursor: 'pointer',
+        borderRadius: theme.borderRadius.small,
+        minWidth: '160px',
+        '&:hover': {
+          backgroundColor: theme.colors.background,
+        },
+      } as CSSProperties,
+      orgName: {
+        color: theme.colors.text.primary,
+        fontWeight: 500,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        flex: 1,
+      } as CSSProperties,
+      dropdownContent: {
+        minWidth: '280px',
+        maxWidth: '400px',
+        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',
+        flexDirection: 'column',
+        width: '100%',
+      } as CSSProperties,
+      menuItem: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        gap: `${theme.spacing.unit}px`,
+        padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit * 2}px`,
+        width: '100%',
+        color: theme.colors.text.primary,
+        textDecoration: 'none',
+        border: 'none',
+        background: 'none',
+        cursor: 'pointer',
+        fontSize: '0.875rem',
+        textAlign: 'left',
+        borderRadius: theme.borderRadius.small,
+        transition: 'background-color 0.15s ease-in-out',
+      } as CSSProperties,
+      organizationInfo: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: `${theme.spacing.unit / 4}px`,
+        flex: 1,
+        minWidth: 0,
+        overflow: 'hidden',
+      } as CSSProperties,
+      organizationName: {
+        color: theme.colors.text.primary,
+        fontSize: '0.875rem',
+        fontWeight: 500,
+        margin: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      } as CSSProperties,
+      organizationMeta: {
+        color: theme.colors.text.secondary,
+        fontSize: '0.75rem',
+        margin: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      } as CSSProperties,
+      divider: {
+        margin: `${theme.spacing.unit * 0.5}px 0`,
+        borderBottom: `1px solid ${theme.colors.border}`,
+      } as CSSProperties,
+      dropdownHeader: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: `${theme.spacing.unit}px`,
+        padding: `${theme.spacing.unit * 1.5}px`,
+        borderBottom: `1px solid ${theme.colors.border}`,
+      } as CSSProperties,
+      loadingContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '80px',
+        gap: `${theme.spacing.unit}px`,
+      } as CSSProperties,
+      loadingText: {
+        color: theme.colors.text.secondary,
+        fontSize: '0.875rem',
+      } as CSSProperties,
+      errorContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '80px',
+        padding: `${theme.spacing.unit * 2}px`,
+      } as CSSProperties,
+      errorText: {
+        color: theme.colors.text.secondary,
+        fontSize: '0.875rem',
+        textAlign: 'center',
+      } as CSSProperties,
+    }),
+    [theme, colorScheme],
+  );
+};
+
+interface MenuItem {
+  href?: string;
+  icon?: ReactNode;
+  label: ReactNode;
+  onClick?: () => void;
+}
+
+/**
+ * Interface for organization data.
+ */
+export interface Organization {
+  /**
+   * Avatar URL for the organization.
+   */
+  avatar?: string;
+  /**
+   * Unique identifier for the organization.
+   */
+  id: string;
+  /**
+   * Number of members in the organization.
+   */
+  memberCount?: number;
+  /**
+   * Additional metadata for the organization.
+   */
+  metadata?: Record<string, any>;
+  /**
+   * Display name of the organization.
+   */
+  name: string;
+  /**
+   * User's role in the organization.
+   */
+  role?: 'owner' | 'admin' | 'member';
+  /**
+   * URL slug for the organization.
+   */
+  slug?: string;
+}
+
+/**
+ * Props interface for the BaseOrganizationSwitcher component.
+ */
+export interface BaseOrganizationSwitcherProps {
+  /**
+   * Optional size for the avatar
+   */
+  avatarSize?: number;
+  /**
+   * Custom class name for styling.
+   */
+  className?: string;
+  /**
+   * Currently selected organization.
+   */
+  currentOrganization?: Organization;
+  /**
+   * Error message to display.
+   */
+  error?: string;
+  /**
+   * Optional element to render when no organization is selected.
+   */
+  fallback?: ReactElement;
+  /**
+   * Whether the component is in a loading state.
+   */
+  loading?: boolean;
+  /**
+   * Additional menu items to display at the bottom of the dropdown.
+   */
+  menuItems?: MenuItem[];
+  /**
+   * Handler for when an organization is selected.
+   */
+  onOrganizationSwitch: (organization: Organization) => void;
+  /**
+   * List of available organizations.
+   */
+  organizations: Organization[];
+  /**
+   * The HTML element ID where the portal should be mounted
+   */
+  portalId?: string;
+  /**
+   * Custom render function for the error state.
+   */
+  renderError?: (error: string) => ReactElement;
+  /**
+   * Custom render function for the loading state.
+   */
+  renderLoading?: () => ReactElement;
+  /**
+   * Custom render function for the organization item.
+   */
+  renderOrganization?: (organization: Organization, isSelected: boolean) => ReactElement;
+  /**
+   * Whether to show the member count.
+   */
+  showMemberCount?: boolean;
+  /**
+   * Show organization name next to avatar in the trigger button
+   */
+  showTriggerLabel?: boolean;
+  /**
+   * Whether to show the role badge.
+   */
+  showRole?: boolean;
+  /**
+   * Custom styles for the component.
+   */
+  style?: React.CSSProperties;
+}
+
+/**
+ * BaseOrganizationSwitcher component displays an organization selector with a dropdown menu.
+ * When clicked, it shows a popover with available organizations to switch between.
+ * This component serves as the base for framework-specific implementations.
+ */
+export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
+  organizations,
+  currentOrganization,
+  loading = false,
+  error,
+  onOrganizationSwitch,
+  className = '',
+  style,
+  renderOrganization,
+  renderLoading,
+  renderError,
+  showRole = false,
+  showMemberCount = true,
+  menuItems = [],
+  portalId = 'asgardeo-organization-switcher',
+  showTriggerLabel = true,
+  avatarSize = 24,
+  fallback = null,
+}): ReactElement => {
+  const styles = useStyles();
+  const [isOpen, setIsOpen] = useState(false);
+  const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
+  const {theme, colorScheme} = useTheme();
+
+  const hoverBackgroundColor = colorScheme === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.04)';
+
+  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]);
+
+  if (fallback && !currentOrganization && !loading && organizations.length === 0) {
+    return fallback;
+  }
+
+  const handleOrganizationSwitch = (organization: Organization) => {
+    onOrganizationSwitch(organization);
+    setIsOpen(false);
+  };
+
+  const handleMenuItemClick = (item: MenuItem) => {
+    if (item.onClick) {
+      item.onClick();
+    }
+    setIsOpen(false);
+  };
+
+  const defaultRenderOrganization = (organization: Organization, isSelected: boolean) => (
+    <>
+      <Avatar
+        imageUrl={organization.avatar}
+        name={organization.name}
+        size={avatarSize * 1.25}
+        alt={`${organization.name} avatar`}
+      />
+      <div style={styles.organizationInfo}>
+        <Typography variant="body2" fontWeight="medium" style={styles.organizationName}>
+          {organization.name}
+        </Typography>
+        <div style={styles.organizationMeta}>
+          {showMemberCount && organization.memberCount !== undefined && <span>{organization.memberCount} members</span>}
+          {showRole && organization.role && showMemberCount && organization.memberCount !== undefined && (
+            <span> • </span>
+          )}
+          {showRole && organization.role && <span style={{textTransform: 'capitalize'}}>{organization.role}</span>}
+        </div>
+      </div>
+      {isSelected && <Check width="16" height="16" color={theme.colors.text.primary} />}
+    </>
+  );
+
+  const defaultRenderLoading = () => (
+    <div style={styles.loadingContainer}>
+      <Typography variant="caption" style={styles.loadingText}>
+        Loading organizations...
+      </Typography>
+    </div>
+  );
+
+  const defaultRenderError = (errorMessage: string) => (
+    <div style={styles.errorContainer}>
+      <Typography variant="caption" style={styles.errorText}>
+        {errorMessage}
+      </Typography>
+    </div>
+  );
+
+  return (
+    <div className={clsx(withVendorCSSClassPrefix('organization-switcher'), className)} style={style}>
+      <Button
+        ref={refs.setReference}
+        className={withVendorCSSClassPrefix('organization-switcher__trigger')}
+        style={styles.trigger}
+        color="tertiary"
+        variant="outline"
+        size="medium"
+        {...getReferenceProps()}
+      >
+        {currentOrganization ? (
+          <>
+            <Avatar
+              imageUrl={currentOrganization.avatar}
+              name={currentOrganization.name}
+              size={avatarSize}
+              alt={`${currentOrganization.name} avatar`}
+            />
+            {showTriggerLabel && (
+              <Typography
+                variant="body2"
+                className={withVendorCSSClassPrefix('organization-switcher__trigger-label')}
+                style={styles.orgName}
+              >
+                {currentOrganization.name}
+              </Typography>
+            )}
+          </>
+        ) : (
+          <>
+            <Building width={avatarSize} height={avatarSize} />
+            {showTriggerLabel && (
+              <Typography
+                variant="body2"
+                className={withVendorCSSClassPrefix('organization-switcher__trigger-label')}
+                style={styles.orgName}
+              >
+                Select Organization
+              </Typography>
+            )}
+          </>
+        )}
+        <ChevronDown width="16" height="16" />
+      </Button>
+
+      {isOpen && (
+        <FloatingPortal id={portalId}>
+          <FloatingFocusManager context={context} modal={false}>
+            <div
+              ref={refs.setFloating}
+              className={withVendorCSSClassPrefix('organization-switcher__content')}
+              style={{...floatingStyles, ...styles.dropdownContent}}
+              {...getFloatingProps()}
+            >
+              {/* Header */}
+              <div className={withVendorCSSClassPrefix('organization-switcher__header')} style={styles.dropdownHeader}>
+                <Typography
+                  variant="caption"
+                  fontWeight="semibold"
+                  style={{
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.05em',
+                    color: theme.colors.text.secondary,
+                  }}
+                >
+                  Switch Organization
+                </Typography>
+              </div>
+
+              {/* Content */}
+              <div className={withVendorCSSClassPrefix('organization-switcher__menu')} style={styles.dropdownMenu}>
+                {loading ? (
+                  renderLoading ? (
+                    renderLoading()
+                  ) : (
+                    defaultRenderLoading()
+                  )
+                ) : error ? (
+                  renderError ? (
+                    renderError(error)
+                  ) : (
+                    defaultRenderError(error)
+                  )
+                ) : (
+                  <>
+                    {organizations.map(organization => {
+                      const isSelected = currentOrganization?.id === organization.id;
+                      return (
+                        <Button
+                          key={organization.id}
+                          onClick={() => handleOrganizationSwitch(organization)}
+                          className={withVendorCSSClassPrefix('organization-switcher__menu-item')}
+                          color="tertiary"
+                          variant="text"
+                          size="small"
+                          style={{
+                            ...styles.menuItem,
+                            backgroundColor:
+                              hoveredItemIndex === organizations.indexOf(organization)
+                                ? hoverBackgroundColor
+                                : 'transparent',
+                          }}
+                          onMouseEnter={() => setHoveredItemIndex(organizations.indexOf(organization))}
+                          onMouseLeave={() => setHoveredItemIndex(null)}
+                        >
+                          {renderOrganization
+                            ? renderOrganization(organization, isSelected)
+                            : defaultRenderOrganization(organization, isSelected)}
+                        </Button>
+                      );
+                    })}
+
+                    {/* Menu Items */}
+                    {menuItems.length > 0 && (
+                      <>
+                        <div
+                          className={withVendorCSSClassPrefix('organization-switcher__menu-divider')}
+                          style={styles.divider}
+                        />
+                        {menuItems.map((item, index) => (
+                          <div key={index}>
+                            {item.href ? (
+                              <a
+                                href={item.href}
+                                style={{
+                                  ...styles.menuItem,
+                                  backgroundColor:
+                                    hoveredItemIndex === organizations.length + index
+                                      ? hoverBackgroundColor
+                                      : 'transparent',
+                                }}
+                                className={withVendorCSSClassPrefix('organization-switcher__menu-item')}
+                                onMouseEnter={() => setHoveredItemIndex(organizations.length + index)}
+                                onMouseLeave={() => setHoveredItemIndex(null)}
+                                onFocus={() => setHoveredItemIndex(organizations.length + index)}
+                                onBlur={() => setHoveredItemIndex(null)}
+                              >
+                                {item.icon}
+                                <span>{item.label}</span>
+                              </a>
+                            ) : (
+                              <Button
+                                onClick={() => handleMenuItemClick(item)}
+                                style={{
+                                  ...styles.menuItem,
+                                  backgroundColor:
+                                    hoveredItemIndex === organizations.length + index
+                                      ? hoverBackgroundColor
+                                      : 'transparent',
+                                }}
+                                className={withVendorCSSClassPrefix('organization-switcher__menu-item')}
+                                color="tertiary"
+                                variant="text"
+                                size="small"
+                                startIcon={item.icon}
+                                onMouseEnter={() => setHoveredItemIndex(organizations.length + index)}
+                                onMouseLeave={() => setHoveredItemIndex(null)}
+                              >
+                                {item.label}
+                              </Button>
+                            )}
+                          </div>
+                        ))}
+                      </>
+                    )}
+                  </>
+                )}
+              </div>
+            </div>
+          </FloatingFocusManager>
+        </FloatingPortal>
+      )}
+    </div>
+  );
+};
+
+export default BaseOrganizationSwitcher;
diff --git a/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.test.tsx b/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.test.tsx
new file mode 100644
index 000000000..590758e12
--- /dev/null
+++ b/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.test.tsx
@@ -0,0 +1,112 @@
+/**
+ * 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 React from 'react';
+import {render} from '@testing-library/react';
+import OrganizationSwitcher from './OrganizationSwitcher';
+import {Organization} from './BaseOrganizationSwitcher';
+
+// Mock the hooks
+jest.mock('../../../contexts/Asgardeo/useAsgardeo');
+jest.mock('../../../contexts/Organization/useOrganization');
+
+const mockUseAsgardeo = require('../../../contexts/Asgardeo/useAsgardeo');
+const mockUseOrganization = require('../../../contexts/Organization/useOrganization');
+
+const mockOrganizations: Organization[] = [
+  {id: '1', name: 'Organization 1'},
+  {id: '2', name: 'Organization 2'},
+];
+
+describe('OrganizationSwitcher', () => {
+  beforeEach(() => {
+    mockUseAsgardeo.default.mockReturnValue({
+      isSignedIn: true,
+    });
+
+    mockUseOrganization.default.mockReturnValue({
+      currentOrganization: mockOrganizations[0],
+      organizations: mockOrganizations,
+      switchOrganization: jest.fn(),
+      isLoading: false,
+      error: null,
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders OrganizationSwitcher when user is signed in', () => {
+    const {container} = render(<OrganizationSwitcher />);
+    expect(container).not.toBeEmptyDOMElement();
+  });
+
+  it('renders fallback when user is not signed in and fallback is provided', () => {
+    mockUseAsgardeo.default.mockReturnValue({
+      isSignedIn: false,
+    });
+
+    const fallbackElement = <div data-testid="fallback">Please sign in</div>;
+    const {getByTestId} = render(<OrganizationSwitcher fallback={fallbackElement} />);
+
+    expect(getByTestId('fallback')).toBeInTheDocument();
+  });
+
+  it('renders empty when user is not signed in and no fallback provided', () => {
+    mockUseAsgardeo.default.mockReturnValue({
+      isSignedIn: false,
+    });
+
+    const {container} = render(<OrganizationSwitcher />);
+    expect(container.firstChild).toBeEmptyDOMElement();
+  });
+
+  it('uses context values when no props are provided', () => {
+    const mockSwitchOrganization = jest.fn();
+    mockUseOrganization.default.mockReturnValue({
+      currentOrganization: mockOrganizations[0],
+      organizations: mockOrganizations,
+      switchOrganization: mockSwitchOrganization,
+      isLoading: false,
+      error: null,
+    });
+
+    render(<OrganizationSwitcher />);
+
+    // Verify that the hook was called to get context values
+    expect(mockUseOrganization.default).toHaveBeenCalled();
+  });
+
+  it('uses prop values when provided', () => {
+    const propOrganizations: Organization[] = [{id: '3', name: 'Prop Organization'}];
+    const propCurrentOrganization = propOrganizations[0];
+    const propOnOrganizationSwitch = jest.fn();
+
+    render(
+      <OrganizationSwitcher
+        organizations={propOrganizations}
+        currentOrganization={propCurrentOrganization}
+        onOrganizationSwitch={propOnOrganizationSwitch}
+      />,
+    );
+
+    // Component should still get context for loading/error states but use prop values for data
+    expect(mockUseOrganization.default).toHaveBeenCalled();
+  });
+});
diff --git a/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx b/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
new file mode 100644
index 000000000..2eb5aad22
--- /dev/null
+++ b/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
@@ -0,0 +1,117 @@
+/**
+ * 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, ReactElement} from 'react';
+import BaseOrganizationSwitcher, {BaseOrganizationSwitcherProps, Organization} from './BaseOrganizationSwitcher';
+import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
+import useOrganization from '../../../contexts/Organization/useOrganization';
+
+/**
+ * Props interface for the OrganizationSwitcher component.
+ * Makes organizations optional since they'll be retrieved from OrganizationContext.
+ */
+export interface OrganizationSwitcherProps
+  extends Omit<BaseOrganizationSwitcherProps, 'organizations' | 'currentOrganization' | 'onOrganizationSwitch'> {
+  /**
+   * Optional override for current organization (will use context if not provided)
+   */
+  currentOrganization?: Organization;
+  /**
+   * Fallback element to render when the user is not signed in.
+   */
+  fallback?: ReactElement;
+  /**
+   * Optional callback for organization switch (will use context if not provided)
+   */
+  onOrganizationSwitch?: (organization: Organization) => void;
+  /**
+   * Optional override for organizations list (will use context if not provided)
+   */
+  organizations?: Organization[];
+}
+
+/**
+ * OrganizationSwitcher component that provides organization switching functionality.
+ * This component automatically retrieves organizations from the OrganizationContext.
+ * You can also override the organizations, currentOrganization, and onOrganizationSwitch
+ * by passing them as props.
+ *
+ * @example
+ * ```tsx
+ * import { OrganizationSwitcher } from '@asgardeo/react';
+ *
+ * // Basic usage - uses OrganizationContext
+ * <OrganizationSwitcher />
+ *
+ * // With custom organization switch handler
+ * <OrganizationSwitcher
+ *   onOrganizationSwitch={(org) => {
+ *     console.log('Switching to:', org.name);
+ *     // Custom logic here
+ *   }}
+ * />
+ *
+ * // With fallback for unauthenticated users
+ * <OrganizationSwitcher
+ *   fallback={<div>Please sign in to view organizations</div>}
+ * />
+ * ```
+ */
+export const OrganizationSwitcher: FC<OrganizationSwitcherProps> = ({
+  currentOrganization: propCurrentOrganization,
+  fallback = null,
+  onOrganizationSwitch: propOnOrganizationSwitch,
+  organizations: propOrganizations,
+  ...props
+}: OrganizationSwitcherProps): ReactElement => {
+  const {isSignedIn} = useAsgardeo();
+  const {
+    currentOrganization: contextCurrentOrganization,
+    organizations: contextOrganizations,
+    switchOrganization,
+    isLoading,
+    error,
+  } = useOrganization();
+
+  // Don't render if not authenticated
+  if (!isSignedIn && fallback) {
+    return fallback;
+  }
+
+  if (!isSignedIn) {
+    return <></>;
+  }
+
+  // Use prop values if provided, otherwise use context values
+  const organizations: Organization[] = propOrganizations || contextOrganizations || [];
+  const currentOrganization: Organization | null = propCurrentOrganization || contextCurrentOrganization;
+  const onOrganizationSwitch: (organization: Organization) => void = propOnOrganizationSwitch || switchOrganization;
+
+  return (
+    <BaseOrganizationSwitcher
+      organizations={organizations}
+      currentOrganization={currentOrganization}
+      onOrganizationSwitch={onOrganizationSwitch}
+      loading={isLoading}
+      error={error}
+      {...props}
+    />
+  );
+};
+
+export default OrganizationSwitcher;
diff --git a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
index 876281e6d..10137ae2f 100644
--- a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
+++ b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
@@ -171,7 +171,7 @@ const useStyles = () => {
   );
 };
 
-export interface MenuItem {
+interface MenuItem {
   href?: string;
   icon?: ReactNode;
   label: ReactNode;
diff --git a/packages/react/src/components/primitives/Icons/Building.tsx b/packages/react/src/components/primitives/Icons/Building.tsx
new file mode 100644
index 000000000..08549259d
--- /dev/null
+++ b/packages/react/src/components/primitives/Icons/Building.tsx
@@ -0,0 +1,62 @@
+/**
+ * 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} from 'react';
+
+export interface BuildingProps {
+  /**
+   * Color of the icon.
+   */
+  color?: string;
+  /**
+   * Height of the icon.
+   */
+  height?: number | string;
+  /**
+   * Width of the icon.
+   */
+  width?: number | string;
+}
+
+/**
+ * Building Icon component.
+ *
+ * @param props - Props injected to the component.
+ * @returns Building Icon component.
+ */
+const Building: FC<BuildingProps> = ({color = 'currentColor', height = 24, width = 24}: BuildingProps) => (
+  <svg width={width} height={height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path d="M6 12h4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M6 8h4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M14 8h4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M14 12h4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M6 18h4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M14 18h4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+Building.displayName = 'Building';
+
+export default Building;
diff --git a/packages/react/src/components/primitives/Icons/Check.tsx b/packages/react/src/components/primitives/Icons/Check.tsx
new file mode 100644
index 000000000..e58586840
--- /dev/null
+++ b/packages/react/src/components/primitives/Icons/Check.tsx
@@ -0,0 +1,50 @@
+/**
+ * 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} from 'react';
+
+export interface CheckProps {
+  /**
+   * Color of the icon.
+   */
+  color?: string;
+  /**
+   * Height of the icon.
+   */
+  height?: number | string;
+  /**
+   * Width of the icon.
+   */
+  width?: number | string;
+}
+
+/**
+ * Check Icon component.
+ *
+ * @param props - Props injected to the component.
+ * @returns Check Icon component.
+ */
+const Check: FC<CheckProps> = ({color = 'currentColor', height = 24, width = 24}: CheckProps) => (
+  <svg width={width} height={height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M20 6 9 17l-5-5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+Check.displayName = 'Check';
+
+export default Check;
diff --git a/packages/react/src/components/primitives/Icons/ChevronDown.tsx b/packages/react/src/components/primitives/Icons/ChevronDown.tsx
new file mode 100644
index 000000000..bf7d934df
--- /dev/null
+++ b/packages/react/src/components/primitives/Icons/ChevronDown.tsx
@@ -0,0 +1,50 @@
+/**
+ * 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} from 'react';
+
+export interface ChevronDownProps {
+  /**
+   * Color of the icon.
+   */
+  color?: string;
+  /**
+   * Height of the icon.
+   */
+  height?: number | string;
+  /**
+   * Width of the icon.
+   */
+  width?: number | string;
+}
+
+/**
+ * ChevronDown Icon component.
+ *
+ * @param props - Props injected to the component.
+ * @returns ChevronDown Icon component.
+ */
+const ChevronDown: FC<ChevronDownProps> = ({color = 'currentColor', height = 24, width = 24}: ChevronDownProps) => (
+  <svg width={width} height={height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="m6 9 6 6 6-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+ChevronDown.displayName = 'ChevronDown';
+
+export default ChevronDown;
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index a979724d2..1137734da 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -32,6 +32,7 @@ import useBrowserUrl from '../../hooks/useBrowserUrl';
 import {AsgardeoReactConfig} from '../../models/config';
 import FlowProvider from '../Flow/FlowProvider';
 import I18nProvider from '../I18n/I18nProvider';
+import OrganizationProvider from '../Organization/OrganizationProvider';
 import ThemeProvider from '../Theme/ThemeProvider';
 import UserProvider from '../User/UserProvider';
 
@@ -224,7 +225,9 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
               profile={userProfile}
               revalidateProfile={async () => setUserProfile(await asgardeo.getUserProfile())}
             >
-              {children}
+              <OrganizationProvider getOrganizations={async () => asgardeo.getOrganizations()}>
+                {children}
+              </OrganizationProvider>
             </UserProvider>
           </FlowProvider>
         </ThemeProvider>
diff --git a/packages/react/src/contexts/Organization/OrganizationContext.ts b/packages/react/src/contexts/Organization/OrganizationContext.ts
new file mode 100644
index 000000000..87376de59
--- /dev/null
+++ b/packages/react/src/contexts/Organization/OrganizationContext.ts
@@ -0,0 +1,50 @@
+/**
+ * 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 {Organization} from '@asgardeo/browser';
+import {Context, createContext} from 'react';
+
+/**
+ * Props interface of {@link OrganizationContext}
+ */
+export type OrganizationContextProps = {
+  currentOrganization: Organization | null;
+  error: string | null;
+  getOrganizations: () => Promise<Organization[]>;
+  isLoading: boolean;
+  organizations: Organization[] | null;
+  revalidateOrganizations: () => Promise<void>;
+  switchOrganization: (organization: Organization) => void;
+};
+
+/**
+ * Context object for managing organization data and related operations.
+ */
+const OrganizationContext: Context<OrganizationContextProps | null> = createContext<null | OrganizationContextProps>({
+  currentOrganization: null,
+  error: null,
+  getOrganizations: () => Promise.resolve([]),
+  isLoading: false,
+  organizations: null,
+  revalidateOrganizations: () => Promise.resolve(),
+  switchOrganization: () => {},
+});
+
+OrganizationContext.displayName = 'OrganizationContext';
+
+export default OrganizationContext;
diff --git a/packages/react/src/contexts/Organization/OrganizationProvider.tsx b/packages/react/src/contexts/Organization/OrganizationProvider.tsx
new file mode 100644
index 000000000..71de3bf94
--- /dev/null
+++ b/packages/react/src/contexts/Organization/OrganizationProvider.tsx
@@ -0,0 +1,211 @@
+/**
+ * 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 {Organization} from '@asgardeo/browser';
+import {FC, PropsWithChildren, ReactElement, useCallback, useEffect, useMemo, useState} from 'react';
+import OrganizationContext, {OrganizationContextProps} from './OrganizationContext';
+import getMeOrganizations from '../../api/scim2/getMeOrganizations';
+import useAsgardeo from '../Asgardeo/useAsgardeo';
+
+/**
+ * Props interface of {@link OrganizationProvider}
+ */
+export interface OrganizationProviderProps {
+  /**
+   * Whether to automatically fetch organizations on mount
+   */
+  autoFetch?: boolean;
+  /**
+   * Initial current organization
+   */
+  currentOrganization?: Organization | null;
+  /**
+   * Function to fetch organizations
+   */
+  getOrganizations?: () => Promise<Organization[]>;
+  /**
+   * Callback function called when an error occurs
+   */
+  onError?: (error: string) => void;
+  /**
+   * Callback function called when switching organizations
+   */
+  onOrganizationSwitch?: (organization: Organization) => void;
+  /**
+   * Initial list of organizations
+   */
+  organizations?: Organization[] | null;
+}
+
+/**
+ * OrganizationProvider component that manages organization data and provides it through OrganizationContext.
+ *
+ * This provider:
+ * - Fetches organization data from the organizations endpoint
+ * - Manages current organization state
+ * - Provides functions for switching organizations and refreshing data
+ * - Handles loading states and errors
+ * - Accepts a custom getOrganizations function for flexible data fetching
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with auto-fetch (uses internal API)
+ * <OrganizationProvider>
+ *   <App />
+ * </OrganizationProvider>
+ *
+ * // With custom getOrganizations function
+ * <OrganizationProvider getOrganizations={async () => asgardeo.getOrganizations()}>
+ *   <App />
+ * </OrganizationProvider>
+ *
+ * // With custom error handling
+ * <OrganizationProvider onError={(error) => console.error('Organization error:', error)}>
+ *   <App />
+ * </OrganizationProvider>
+ *
+ * // With custom organization switch handler
+ * <OrganizationProvider
+ *   onOrganizationSwitch={(org) => console.log('Switched to:', org.name)}
+ * >
+ *   <App />
+ * </OrganizationProvider>
+ *
+ * // Disable auto-fetch (fetch manually using revalidateOrganizations)
+ * <OrganizationProvider autoFetch={false}>
+ *   <App />
+ * </OrganizationProvider>
+ * ```
+ */
+const OrganizationProvider: FC<PropsWithChildren<OrganizationProviderProps>> = ({
+  autoFetch = true,
+  children,
+  currentOrganization: initialCurrentOrganization = null,
+  getOrganizations,
+  onError,
+  onOrganizationSwitch,
+  organizations: initialOrganizations = null,
+}: PropsWithChildren<OrganizationProviderProps>): ReactElement => {
+  const {baseUrl, isSignedIn} = useAsgardeo();
+  const [organizations, setOrganizations] = useState<Organization[] | null>(initialOrganizations);
+  const [currentOrganization, setCurrentOrganization] = useState<Organization | null>(initialCurrentOrganization);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  /**
+   * Fetches organizations from the API
+   */
+  const fetchOrganizations: () => Promise<void> = useCallback(async (): Promise<void> => {
+    if (!isSignedIn) {
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      let organizationsData: Organization[];
+
+      if (getOrganizations) {
+        // Use the provided getOrganizations function
+        organizationsData = await getOrganizations();
+      } else {
+        // Fallback to the direct API call
+        if (!baseUrl) {
+          throw new Error('Base URL is required when getOrganizations is not provided');
+        }
+        organizationsData = await getMeOrganizations({baseUrl});
+      }
+
+      setOrganizations(organizationsData);
+
+      // Set current organization to the first one if none is set
+      if (!currentOrganization && organizationsData.length > 0) {
+        setCurrentOrganization(organizationsData[0]);
+      }
+    } catch (fetchError) {
+      const errorMessage: string = fetchError instanceof Error ? fetchError.message : 'Failed to fetch organizations';
+      setError(errorMessage);
+      if (onError) {
+        onError(errorMessage);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [baseUrl, currentOrganization, getOrganizations, isSignedIn, onError]);
+
+  /**
+   * Revalidates organizations by fetching fresh data
+   */
+  const revalidateOrganizations: () => Promise<void> = useCallback(async (): Promise<void> => {
+    await fetchOrganizations();
+  }, [fetchOrganizations]);
+
+  /**
+   * Switches to a different organization
+   */
+  const switchOrganization: (organization: Organization) => void = useCallback(
+    (organization: Organization): void => {
+      setCurrentOrganization(organization);
+      if (onOrganizationSwitch) {
+        onOrganizationSwitch(organization);
+      }
+    },
+    [onOrganizationSwitch],
+  );
+
+  // Auto-fetch organizations when component mounts or dependencies change
+  useEffect(() => {
+    if (autoFetch && isSignedIn) {
+      fetchOrganizations();
+    }
+  }, [autoFetch, fetchOrganizations, isSignedIn]);
+
+  const contextValue: OrganizationContextProps = useMemo(
+    () => ({
+      currentOrganization,
+      error,
+      getOrganizations:
+        getOrganizations ||
+        (async (): Promise<Organization[]> => {
+          if (!baseUrl) {
+            throw new Error('Base URL is required when getOrganizations is not provided');
+          }
+          return getMeOrganizations({baseUrl});
+        }),
+      isLoading,
+      organizations,
+      revalidateOrganizations,
+      switchOrganization,
+    }),
+    [
+      baseUrl,
+      currentOrganization,
+      error,
+      getOrganizations,
+      isLoading,
+      organizations,
+      revalidateOrganizations,
+      switchOrganization,
+    ],
+  );
+
+  return <OrganizationContext.Provider value={contextValue}>{children}</OrganizationContext.Provider>;
+};
+
+export default OrganizationProvider;
diff --git a/packages/react/src/contexts/Organization/useOrganization.ts b/packages/react/src/contexts/Organization/useOrganization.ts
new file mode 100644
index 000000000..3ccb480e0
--- /dev/null
+++ b/packages/react/src/contexts/Organization/useOrganization.ts
@@ -0,0 +1,116 @@
+/**
+ * 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 OrganizationContext, {OrganizationContextProps} from './OrganizationContext';
+
+/**
+ * Hook to access the Organization context.
+ *
+ * This hook provides access to organization data including:
+ * - List of organizations the user belongs to
+ * - Current organization
+ * - Functions to switch organizations and refresh data
+ * - Function to fetch organizations programmatically
+ * - Loading states and error handling
+ *
+ * @returns {OrganizationContextProps} The organization context value containing all organization-related data and functions
+ * @throws {Error} Throws an error if used outside of OrganizationProvider
+ *
+ * @example
+ * ```tsx
+ * import {useOrganization} from '@asgardeo/react';
+ *
+ * function OrganizationSelector() {
+ *   const {
+ *     organizations,
+ *     currentOrganization,
+ *     switchOrganization,
+ *     revalidateOrganizations,
+ *     getOrganizations,
+ *     isLoading,
+ *     error
+ *   } = useOrganization();
+ *
+ *   if (isLoading) {
+ *     return <div>Loading organizations...</div>;
+ *   }
+ *
+ *   if (error) {
+ *     return <div>Error: {error}</div>;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <h2>Current: {currentOrganization?.name}</h2>
+ *       <select
+ *         value={currentOrganization?.id || ''}
+ *         onChange={(e) => {
+ *           const org = organizations?.find(o => o.id === e.target.value);
+ *           if (org) switchOrganization(org);
+ *         }}
+ *       >
+ *         {organizations?.map(org => (
+ *           <option key={org.id} value={org.id}>
+ *             {org.name}
+ *           </option>
+ *         ))}
+ *       </select>
+ *       <button onClick={revalidateOrganizations}>
+ *         Refresh Organizations
+ *       </button>
+ *       <button onClick={async () => {
+ *         const fresh = await getOrganizations();
+ *         console.log('Fresh organizations:', fresh);
+ *       }}>
+ *         Get Organizations Manually
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ *
+ * // Switch to a specific organization
+ * function SwitchOrgButton() {
+ *   const {organizations, switchOrganization} = useOrganization();
+ *
+ *   const handleSwitch = (orgId: string) => {
+ *     const org = organizations?.find(o => o.id === orgId);
+ *     if (org) {
+ *       switchOrganization(org);
+ *     }
+ *   };
+ *
+ *   return (
+ *     <button onClick={() => handleSwitch('org-123')}>
+ *       Switch to Organization
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+const useOrganization = (): OrganizationContextProps => {
+  const context: OrganizationContextProps | null = useContext(OrganizationContext);
+
+  if (!context) {
+    throw new Error('useOrganization must be used within an OrganizationProvider');
+  }
+
+  return context;
+};
+
+export default useOrganization;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 7ca573c0a..f2daa9319 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -34,6 +34,15 @@ export * from './contexts/User/UserProvider';
 export {default as useUser} from './contexts/User/useUser';
 export * from './contexts/User/useUser';
 
+export {default as OrganizationContext} from './contexts/Organization/OrganizationContext';
+export * from './contexts/Organization/OrganizationContext';
+
+export {default as OrganizationProvider} from './contexts/Organization/OrganizationProvider';
+export * from './contexts/Organization/OrganizationProvider';
+
+export {default as useOrganization} from './contexts/Organization/useOrganization';
+export * from './contexts/Organization/useOrganization';
+
 export {default as FlowContext} from './contexts/Flow/FlowContext';
 export * from './contexts/Flow/FlowContext';
 
@@ -131,6 +140,12 @@ export * from './components/presentation/User/BaseUser';
 export {default as User} from './components/presentation/User/User';
 export * from './components/presentation/User/User';
 
+export {default as BaseOrganization} from './components/presentation/Organization/BaseOrganization';
+export * from './components/presentation/Organization/BaseOrganization';
+
+export {default as Organization} from './components/presentation/Organization/Organization';
+export * from './components/presentation/Organization/Organization';
+
 export {default as BaseUserProfile} from './components/presentation/UserProfile/BaseUserProfile';
 export * from './components/presentation/UserProfile/BaseUserProfile';
 
@@ -143,6 +158,12 @@ export * from './components/presentation/UserDropdown/BaseUserDropdown';
 export {default as UserDropdown} from './components/presentation/UserDropdown/UserDropdown';
 export * from './components/presentation/UserDropdown/UserDropdown';
 
+export {default as BaseOrganizationSwitcher} from './components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher';
+export * from './components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher';
+
+export {default as OrganizationSwitcher} from './components/presentation/OrganizationSwitcher/OrganizationSwitcher';
+export * from './components/presentation/OrganizationSwitcher/OrganizationSwitcher';
+
 export {default as Button} from './components/primitives/Button/Button';
 export * from './components/primitives/Button/Button';
 

From 49b41b3d98306db59d1a2c75da3ae38a374fee24 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Fri, 20 Jun 2025 13:31:11 +0530
Subject: [PATCH 54/96] feat(react): Update border radius to medium for various
 components

---
 .../BaseOrganizationSwitcher.tsx              | 12 +++++------
 .../UserDropdown/BaseUserDropdown.tsx         |  6 +++---
 .../UserProfile/BaseUserProfile.tsx           |  4 ++--
 .../components/primitives/Button/Button.tsx   |  2 +-
 .../src/components/primitives/Card/Card.tsx   | 21 +++++++++----------
 .../primitives/DatePicker/DatePicker.tsx      |  2 +-
 .../primitives/OtpField/OtpField.tsx          |  2 +-
 .../components/primitives/Select/Select.tsx   |  2 +-
 .../primitives/TextField/TextField.tsx        |  2 +-
 9 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx b/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
index a08bcbe6a..de510e6de 100644
--- a/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
+++ b/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
@@ -53,7 +53,7 @@ const useStyles = () => {
         border: `1px solid ${theme.colors.border}`,
         background: theme.colors.background.surface,
         cursor: 'pointer',
-        borderRadius: theme.borderRadius.small,
+        borderRadius: theme.borderRadius.medium,
         minWidth: '160px',
         '&:hover': {
           backgroundColor: theme.colors.background,
@@ -98,7 +98,7 @@ const useStyles = () => {
         cursor: 'pointer',
         fontSize: '0.875rem',
         textAlign: 'left',
-        borderRadius: theme.borderRadius.small,
+        borderRadius: theme.borderRadius.medium,
         transition: 'background-color 0.15s ease-in-out',
       } as CSSProperties,
       organizationInfo: {
@@ -266,14 +266,14 @@ export interface BaseOrganizationSwitcherProps {
    * Whether to show the member count.
    */
   showMemberCount?: boolean;
-  /**
-   * Show organization name next to avatar in the trigger button
-   */
-  showTriggerLabel?: boolean;
   /**
    * Whether to show the role badge.
    */
   showRole?: boolean;
+  /**
+   * Show organization name next to avatar in the trigger button
+   */
+  showTriggerLabel?: boolean;
   /**
    * Custom styles for the component.
    */
diff --git a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
index 10137ae2f..4d5cb3276 100644
--- a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
+++ b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
@@ -53,7 +53,7 @@ const useStyles = () => {
         border: 'none',
         background: 'none',
         cursor: 'pointer',
-        borderRadius: theme.borderRadius.small,
+        borderRadius: theme.borderRadius.medium,
         '&:hover': {
           backgroundColor: theme.colors.background,
         },
@@ -97,7 +97,7 @@ const useStyles = () => {
         cursor: 'pointer',
         fontSize: '0.875rem',
         textAlign: 'left',
-        borderRadius: theme.borderRadius.small,
+        borderRadius: theme.borderRadius.medium,
         transition: 'background-color 0.15s ease-in-out',
       } as CSSProperties,
       menuItemAnchor: {
@@ -114,7 +114,7 @@ const useStyles = () => {
         cursor: 'pointer',
         fontSize: '0.875rem',
         textAlign: 'left',
-        borderRadius: theme.borderRadius.small,
+        borderRadius: theme.borderRadius.medium,
         transition: 'background-color 0.15s ease-in-out',
       } as CSSProperties,
       divider: {
diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index 6ef0c0bd9..4b18314c4 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -247,7 +247,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
     () => ({
       padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
       margin: `${theme.spacing.unit}px`,
-      borderRadius: theme.borderRadius.small,
+      borderRadius: theme.borderRadius.medium,
       border: 'none',
       cursor: 'pointer',
       fontSize: '0.875rem',
@@ -698,7 +698,7 @@ const useStyles = () => {
         lineHeight: '32px',
         '& table': {
           backgroundColor: theme.colors.background,
-          borderRadius: theme.borderRadius.small,
+          borderRadius: theme.borderRadius.medium,
           whiteSpace: 'normal',
         },
         '& td': {
diff --git a/packages/react/src/components/primitives/Button/Button.tsx b/packages/react/src/components/primitives/Button/Button.tsx
index 7b27ab89c..d420f947c 100644
--- a/packages/react/src/components/primitives/Button/Button.tsx
+++ b/packages/react/src/components/primitives/Button/Button.tsx
@@ -241,7 +241,7 @@ const useButtonStyles = (
       alignItems: 'center',
       justifyContent: 'center',
       gap: `${theme.spacing.unit}px`,
-      borderRadius: theme.borderRadius.small,
+      borderRadius: theme.borderRadius.medium,
       fontWeight: 500,
       cursor: disabled || loading ? 'not-allowed' : 'pointer',
       transition: 'all 0.2s ease-in-out',
diff --git a/packages/react/src/components/primitives/Card/Card.tsx b/packages/react/src/components/primitives/Card/Card.tsx
index 663b35e28..7ed509d72 100644
--- a/packages/react/src/components/primitives/Card/Card.tsx
+++ b/packages/react/src/components/primitives/Card/Card.tsx
@@ -1,6 +1,5 @@
 /**
- * Copyright (import {CSSProperties, HTMLAttributes, forwardRef, useMemo, ReactNode, ForwardRefExoticComponent, Ref} from 'react';
-import useTheme from '../../../theme/useTheme'; 2025, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) {{year}}, 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
@@ -17,6 +16,8 @@ import useTheme from '../../../theme/useTheme'; 2025, WSO2 LLC. (https://www.wso
  * under the License.
  */
 
+import {withVendorCSSClassPrefix} from '@asgardeo/browser';
+import clsx from 'clsx';
 import {
   CSSProperties,
   HTMLAttributes,
@@ -27,25 +28,23 @@ import {
   RefAttributes,
 } from 'react';
 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';
 
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * The visual variant of the card
+   * Card content
    */
-  variant?: CardVariant;
+  children?: ReactNode;
   /**
    * Whether the card should be clickable (shows hover effects)
    */
   clickable?: boolean;
   /**
-   * Card content
+   * The visual variant of the card
    */
-  children?: ReactNode;
+  variant?: CardVariant;
 }
 
 export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
@@ -445,12 +444,12 @@ CardFooter.displayName = 'Card.Footer';
 
 // 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;
+  Description: typeof CardDescription;
   Footer: typeof CardFooter;
+  Header: typeof CardHeader;
+  Title: typeof CardTitle;
 }
 
 export default Card as CardComponent;
diff --git a/packages/react/src/components/primitives/DatePicker/DatePicker.tsx b/packages/react/src/components/primitives/DatePicker/DatePicker.tsx
index 5f4696ba6..2f138960f 100644
--- a/packages/react/src/components/primitives/DatePicker/DatePicker.tsx
+++ b/packages/react/src/components/primitives/DatePicker/DatePicker.tsx
@@ -71,7 +71,7 @@ const DatePicker: FC<DatePickerProps> = ({
     width: '100%',
     padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
     border: `1px solid ${error ? theme.colors.error.main : theme.colors.border}`,
-    borderRadius: theme.borderRadius.small,
+    borderRadius: theme.borderRadius.medium,
     fontSize: '1rem',
     color: theme.colors.text.primary,
     backgroundColor: disabled ? theme.colors.background.disabled : theme.colors.background.surface,
diff --git a/packages/react/src/components/primitives/OtpField/OtpField.tsx b/packages/react/src/components/primitives/OtpField/OtpField.tsx
index 8f2010379..c013ec3d3 100644
--- a/packages/react/src/components/primitives/OtpField/OtpField.tsx
+++ b/packages/react/src/components/primitives/OtpField/OtpField.tsx
@@ -147,7 +147,7 @@ const OtpField: FC<OtpInputProps> = ({
     fontSize: '1.25rem',
     fontWeight: 500,
     border: `2px solid ${error ? theme.colors.error.main : theme.colors.border}`,
-    borderRadius: theme.borderRadius.small,
+    borderRadius: theme.borderRadius.medium,
     color: theme.colors.text.primary,
     backgroundColor: disabled ? theme.colors.background.disabled : theme.colors.background.surface,
     outline: 'none',
diff --git a/packages/react/src/components/primitives/Select/Select.tsx b/packages/react/src/components/primitives/Select/Select.tsx
index 128001814..66b5c84a5 100644
--- a/packages/react/src/components/primitives/Select/Select.tsx
+++ b/packages/react/src/components/primitives/Select/Select.tsx
@@ -82,7 +82,7 @@ const Select: FC<SelectProps> = ({
     width: '100%',
     padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
     border: `1px solid ${error ? theme.colors.error.main : theme.colors.border}`,
-    borderRadius: theme.borderRadius.small,
+    borderRadius: theme.borderRadius.medium,
     fontSize: '1rem',
     color: theme.colors.text.primary,
     backgroundColor: disabled ? theme.colors.background.disabled : theme.colors.background.surface,
diff --git a/packages/react/src/components/primitives/TextField/TextField.tsx b/packages/react/src/components/primitives/TextField/TextField.tsx
index 8682c2419..48fc53b21 100644
--- a/packages/react/src/components/primitives/TextField/TextField.tsx
+++ b/packages/react/src/components/primitives/TextField/TextField.tsx
@@ -93,7 +93,7 @@ const TextField: FC<TextFieldProps> = ({
     width: '100%',
     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,
+    borderRadius: theme.borderRadius.medium,
     fontSize: '1rem',
     color: theme.colors.text.primary,
     backgroundColor: disabled ? theme.colors.background.disabled : theme.colors.background.surface,

From 584377f095d2e15e6926e3eae0369cef3150a87d Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Fri, 20 Jun 2025 13:38:51 +0530
Subject: [PATCH 55/96] feat: Refactor Avatar component to improve props
 structure and rendering logic

---
 .../components/primitives/Avatar/Avatar.tsx   | 84 +++++++++++++------
 1 file changed, 57 insertions(+), 27 deletions(-)

diff --git a/packages/react/src/components/primitives/Avatar/Avatar.tsx b/packages/react/src/components/primitives/Avatar/Avatar.tsx
index 947819b6c..9dacde037 100644
--- a/packages/react/src/components/primitives/Avatar/Avatar.tsx
+++ b/packages/react/src/components/primitives/Avatar/Avatar.tsx
@@ -16,78 +16,108 @@
  * under the License.
  */
 
-import {CSSProperties, FC, useMemo} from 'react';
-import useTheme from '../../../contexts/Theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
+import {CSSProperties, FC, JSX, useMemo} from 'react';
+import useTheme from '../../../contexts/Theme/useTheme';
 
 export interface AvatarProps {
-  /**
-   * The URL of the avatar image
-   */
-  imageUrl?: string;
   /**
    * Alternative text for the avatar image
    */
   alt?: string;
   /**
-   * The size of the avatar in pixels
+   * Optional className for the avatar
    */
-  size?: number;
+  className?: string;
+  /**
+   * The URL of the avatar image
+   */
+  imageUrl?: string;
   /**
    * The name to use for generating initials when no image is provided
    */
   name?: string;
   /**
-   * Optional className for the avatar
+   * The size of the avatar in pixels
    */
-  className?: string;
+  size?: number;
+  /**
+   * The variant of the avatar shape
+   * @default 'circular'
+   */
+  variant?: 'circular' | 'square';
 }
 
-const useStyles = ({size}) => {
+const useStyles = ({
+  size,
+  variant,
+}: {
+  size: number;
+  variant: 'circular' | 'square';
+}): {
+  avatar: CSSProperties;
+  image: CSSProperties;
+} => {
   const {theme, colorScheme} = useTheme();
 
   return useMemo(
     () => ({
       avatar: {
-        width: `${size}px`,
-        height: `${size}px`,
-        borderRadius: '50%',
-        overflow: 'hidden',
+        alignItems: 'center',
         backgroundColor: theme.colors.background.surface,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: variant === 'circular' ? '50%' : '8px',
+        color: theme.colors.text.primary,
         display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
         fontSize: `${size * 0.4}px`,
         fontWeight: 500,
-        color: theme.colors.text.primary,
-        border: `1px solid ${theme.colors.border}`,
+        height: `${size}px`,
+        justifyContent: 'center',
+        overflow: 'hidden',
+        width: `${size}px`,
       } as CSSProperties,
       image: {
-        width: '100%',
         height: '100%',
         objectFit: 'cover',
+        width: '100%',
       } as CSSProperties,
     }),
-    [size, theme, colorScheme],
+    [size, theme, colorScheme, variant],
   );
 };
 
-export const Avatar: FC<AvatarProps> = ({imageUrl, alt = 'User avatar', size = 64, name, className = ''}) => {
-  const styles = useStyles({size});
+export const Avatar: FC<AvatarProps> = ({
+  alt = 'User avatar',
+  className = '',
+  imageUrl,
+  name,
+  size = 64,
+  variant = 'circular',
+}): JSX.Element => {
+  const styles: {avatar: CSSProperties; image: CSSProperties} = useStyles({size, variant});
 
-  const getInitials = (name: string): string => {
-    return name
+  const getInitials = (fullName: string): string =>
+    fullName
       .split(' ')
-      .map(part => part[0])
+      .map((part: string) => part[0])
       .slice(0, 2)
       .join('')
       .toUpperCase();
+
+  const renderContent = (): JSX.Element | string => {
+    if (imageUrl) {
+      return <img src={imageUrl} alt={alt} style={styles.image} />;
+    }
+    if (name) {
+      return getInitials(name);
+    }
+    return '?';
   };
 
   return (
     <div style={styles.avatar} className={clsx(withVendorCSSClassPrefix('avatar'), className)}>
-      {imageUrl ? <img src={imageUrl} alt={alt} style={styles.image} /> : name ? getInitials(name) : '?'}
+      {renderContent()}
     </div>
   );
 };

From 2fcfbdbec30acc58dfb0f44c62bedcb7d23f37ca Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Fri, 20 Jun 2025 13:47:12 +0530
Subject: [PATCH 56/96] chore(javascript): add VendorConstants and
 withVendorCSSClassPrefix utility for vendor-specific configurations

---
 packages/browser/src/index.ts                 |  3 ---
 .../src/constants/VendorConstants.ts}         | 25 +++++++++++--------
 packages/javascript/src/index.ts              |  1 +
 .../src/utils/withVendorCSSClassPrefix.ts     |  6 ++---
 4 files changed, 18 insertions(+), 17 deletions(-)
 rename packages/{browser/src/constants/StyleConstants.ts => javascript/src/constants/VendorConstants.ts} (59%)
 rename packages/{browser => javascript}/src/utils/withVendorCSSClassPrefix.ts (89%)

diff --git a/packages/browser/src/index.ts b/packages/browser/src/index.ts
index 080f532ab..a3c19e5d8 100644
--- a/packages/browser/src/index.ts
+++ b/packages/browser/src/index.ts
@@ -43,12 +43,9 @@ export * from './__legacy__/helpers/spa-helper';
 // worker receiver
 export * from './__legacy__/worker/worker-receiver';
 
-export {default as StyleConstants} from './constants/StyleConstants';
-
 export {AsgardeoBrowserConfig} from './models/config';
 
 export {default as hasAuthParamsInUrl} from './utils/hasAuthParamsInUrl';
-export {default as withVendorCSSClassPrefix} from './utils/withVendorCSSClassPrefix';
 
 export {default as AsgardeoBrowserClient} from './AsgardeoBrowserClient';
 
diff --git a/packages/browser/src/constants/StyleConstants.ts b/packages/javascript/src/constants/VendorConstants.ts
similarity index 59%
rename from packages/browser/src/constants/StyleConstants.ts
rename to packages/javascript/src/constants/VendorConstants.ts
index 6b7bbf9ab..aff6bf6ef 100644
--- a/packages/browser/src/constants/StyleConstants.ts
+++ b/packages/javascript/src/constants/VendorConstants.ts
@@ -17,17 +17,22 @@
  */
 
 /**
- * Class defining style constants for the downstream libraries.
+ * Constants for vendor-specific configurations.
+ * By default, the vendor is inferred as Asgardeo.
+ *
+ * @example
+ * ```typescript
+ *  // Using the vendor prefix in a URL
+ * const apiUrl = `${VendorConstants.VENDOR_PREFIX}/api/v1/resource`;
+ * ```
  */
-class StyleConstants {
+const VendorConstants: {
+  VENDOR_PREFIX: string;
+} = {
   /**
-   * CSS class prefix for out of the box components.
+   * The prefix used for vendor-specific API endpoints, CSS classes, or other identifiers.
    */
-  static readonly VENDOR_CSS_CLASS_PREFIX: string = 'asgardeo';
-
-  protected constructor() {
-    // Protected constructor allows inheritance while still preventing direct instantiation
-  }
-}
+  VENDOR_PREFIX: 'asgardeo',
+} as const;
 
-export default StyleConstants;
+export default VendorConstants;
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index fa1e02083..65b2f8876 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -29,6 +29,7 @@ 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';
+export {default as VendorConstants} from './constants/VendorConstants';
 
 export {default as AsgardeoError} from './errors/AsgardeoError';
 export {default as AsgardeoAPIError} from './errors/AsgardeoAPIError';
diff --git a/packages/browser/src/utils/withVendorCSSClassPrefix.ts b/packages/javascript/src/utils/withVendorCSSClassPrefix.ts
similarity index 89%
rename from packages/browser/src/utils/withVendorCSSClassPrefix.ts
rename to packages/javascript/src/utils/withVendorCSSClassPrefix.ts
index 8d0f5297d..21b140685 100644
--- a/packages/browser/src/utils/withVendorCSSClassPrefix.ts
+++ b/packages/javascript/src/utils/withVendorCSSClassPrefix.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import StyleConstants from '../constants/StyleConstants';
+import VendorConstants from '../constants/VendorConstants';
 
 /**
  * Adds a vendor-specific prefix to a CSS class name.
@@ -31,8 +31,6 @@ import StyleConstants from '../constants/StyleConstants';
  * // Result: "wso2-sign-in-button"
  * ```
  */
-const withVendorCSSClassPrefix = (className: string): string => {
-  return `${StyleConstants.VENDOR_CSS_CLASS_PREFIX}-${className}`;
-};
+const withVendorCSSClassPrefix = (className: string): string => `${VendorConstants.VENDOR_PREFIX}-${className}`;
 
 export default withVendorCSSClassPrefix;

From aede0d77b8d7779a4565a34cf6f0d7d71258f270 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Fri, 20 Jun 2025 13:56:45 +0530
Subject: [PATCH 57/96] feat(nextjs): Add getOrganizations method to
 AsgardeoNextClient with unimplemented error

---
 packages/nextjs/src/AsgardeoNextClient.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/nextjs/src/AsgardeoNextClient.ts b/packages/nextjs/src/AsgardeoNextClient.ts
index 750fd3288..ad1446c2a 100644
--- a/packages/nextjs/src/AsgardeoNextClient.ts
+++ b/packages/nextjs/src/AsgardeoNextClient.ts
@@ -28,6 +28,7 @@ import {
   User,
   UserProfile,
   initializeEmbeddedSignInFlow,
+  Organization,
 } from '@asgardeo/node';
 import {NextRequest, NextResponse} from 'next/server';
 import InternalAuthAPIRoutesConfig from './configs/InternalAuthAPIRoutesConfig';
@@ -72,6 +73,10 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
     return this.asgardeo.getUser(resolvedSessionId);
   }
 
+  override async getOrganizations(): Promise<Organization[]> {
+    throw new Error('Method not implemented.');
+  }
+
   override getUserProfile(): Promise<UserProfile> {
     throw new Error('Method not implemented.');
   }

From 48d58b32fa86f7a90916140beda3cc976dc278d7 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Fri, 20 Jun 2025 14:12:20 +0530
Subject: [PATCH 58/96] feat: Add withVendorCSSClassPrefix utility to index
 exports

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

diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 65b2f8876..e621339b1 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -99,5 +99,6 @@ 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 withVendorCSSClassPrefix} from './utils/withVendorCSSClassPrefix';
 
 export {default as StorageManager} from './StorageManager';

From 60cdfdddc7b0bf1ab9bb4a09e4c279dbe4a0c897 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Fri, 20 Jun 2025 14:21:58 +0530
Subject: [PATCH 59/96] fix(react): Update placement of floating elements in
 BaseOrganizationSwitcher and BaseUserDropdown components

---
 .../BaseOrganizationSwitcher.tsx              |   2 +-
 .../OrganizationSwitcher.test.tsx             | 112 ------------------
 .../UserDropdown/BaseUserDropdown.tsx         |   2 +-
 3 files changed, 2 insertions(+), 114 deletions(-)
 delete mode 100644 packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.test.tsx

diff --git a/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx b/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
index de510e6de..fc3bea614 100644
--- a/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
+++ b/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
@@ -314,7 +314,7 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
   const {refs, floatingStyles, context} = useFloating({
     open: isOpen,
     onOpenChange: setIsOpen,
-    placement: 'bottom-start',
+    placement: 'bottom-end',
     middleware: [offset(5), flip({fallbackAxisSideDirection: 'end'}), shift({padding: 5})],
     whileElementsMounted: autoUpdate,
   });
diff --git a/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.test.tsx b/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.test.tsx
deleted file mode 100644
index 590758e12..000000000
--- a/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.test.tsx
+++ /dev/null
@@ -1,112 +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 React from 'react';
-import {render} from '@testing-library/react';
-import OrganizationSwitcher from './OrganizationSwitcher';
-import {Organization} from './BaseOrganizationSwitcher';
-
-// Mock the hooks
-jest.mock('../../../contexts/Asgardeo/useAsgardeo');
-jest.mock('../../../contexts/Organization/useOrganization');
-
-const mockUseAsgardeo = require('../../../contexts/Asgardeo/useAsgardeo');
-const mockUseOrganization = require('../../../contexts/Organization/useOrganization');
-
-const mockOrganizations: Organization[] = [
-  {id: '1', name: 'Organization 1'},
-  {id: '2', name: 'Organization 2'},
-];
-
-describe('OrganizationSwitcher', () => {
-  beforeEach(() => {
-    mockUseAsgardeo.default.mockReturnValue({
-      isSignedIn: true,
-    });
-
-    mockUseOrganization.default.mockReturnValue({
-      currentOrganization: mockOrganizations[0],
-      organizations: mockOrganizations,
-      switchOrganization: jest.fn(),
-      isLoading: false,
-      error: null,
-    });
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders OrganizationSwitcher when user is signed in', () => {
-    const {container} = render(<OrganizationSwitcher />);
-    expect(container).not.toBeEmptyDOMElement();
-  });
-
-  it('renders fallback when user is not signed in and fallback is provided', () => {
-    mockUseAsgardeo.default.mockReturnValue({
-      isSignedIn: false,
-    });
-
-    const fallbackElement = <div data-testid="fallback">Please sign in</div>;
-    const {getByTestId} = render(<OrganizationSwitcher fallback={fallbackElement} />);
-
-    expect(getByTestId('fallback')).toBeInTheDocument();
-  });
-
-  it('renders empty when user is not signed in and no fallback provided', () => {
-    mockUseAsgardeo.default.mockReturnValue({
-      isSignedIn: false,
-    });
-
-    const {container} = render(<OrganizationSwitcher />);
-    expect(container.firstChild).toBeEmptyDOMElement();
-  });
-
-  it('uses context values when no props are provided', () => {
-    const mockSwitchOrganization = jest.fn();
-    mockUseOrganization.default.mockReturnValue({
-      currentOrganization: mockOrganizations[0],
-      organizations: mockOrganizations,
-      switchOrganization: mockSwitchOrganization,
-      isLoading: false,
-      error: null,
-    });
-
-    render(<OrganizationSwitcher />);
-
-    // Verify that the hook was called to get context values
-    expect(mockUseOrganization.default).toHaveBeenCalled();
-  });
-
-  it('uses prop values when provided', () => {
-    const propOrganizations: Organization[] = [{id: '3', name: 'Prop Organization'}];
-    const propCurrentOrganization = propOrganizations[0];
-    const propOnOrganizationSwitch = jest.fn();
-
-    render(
-      <OrganizationSwitcher
-        organizations={propOrganizations}
-        currentOrganization={propCurrentOrganization}
-        onOrganizationSwitch={propOnOrganizationSwitch}
-      />,
-    );
-
-    // Component should still get context for loading/error states but use prop values for data
-    expect(mockUseOrganization.default).toHaveBeenCalled();
-  });
-});
diff --git a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
index 4d5cb3276..3ac927069 100644
--- a/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
+++ b/packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx
@@ -264,7 +264,7 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
   const {refs, floatingStyles, context} = useFloating({
     open: isOpen,
     onOpenChange: setIsOpen,
-    placement: 'bottom-start',
+    placement: 'bottom-end',
     middleware: [offset(5), flip({fallbackAxisSideDirection: 'end'}), shift({padding: 5})],
     whileElementsMounted: autoUpdate,
   });

From 658136407bd9156e93bb7ef217fdd4b30ac00bd5 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Fri, 20 Jun 2025 16:57:35 +0530
Subject: [PATCH 60/96] feat(i18n): Add organization switcher translations and
 integrate into BaseOrganizationSwitcher component

---
 packages/javascript/src/i18n/en-US.ts         | 12 ++++++++++++
 packages/javascript/src/models/i18n.ts        | 10 ++++++++++
 .../BaseOrganizationSwitcher.tsx              | 19 +++++++++++++------
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/packages/javascript/src/i18n/en-US.ts b/packages/javascript/src/i18n/en-US.ts
index 666826064..7d377bcc6 100644
--- a/packages/javascript/src/i18n/en-US.ts
+++ b/packages/javascript/src/i18n/en-US.ts
@@ -16,6 +16,8 @@
  * under the License.
  */
 
+/* eslint-disable sort-keys */
+
 import {I18nTranslations, I18nMetadata, I18nBundle} from '../models/i18n';
 
 const translations: I18nTranslations = {
@@ -76,6 +78,16 @@ const translations: I18nTranslations = {
   'username.password.title': 'Sign In',
   'username.password.subtitle': 'Enter your username and password to continue.',
 
+  /* |---------------------------------------------------------------| */
+  /* |                     Organization Switcher                     | */
+  /* |---------------------------------------------------------------| */
+
+  'organization.switcher.select.organization': 'Select Organization',
+  'organization.switcher.switch.organization': 'Switch Organization',
+  'organization.switcher.loading.organizations': 'Loading organizations...',
+  'organization.switcher.members': 'members',
+  'organization.switcher.member': 'member',
+
   /* |---------------------------------------------------------------| */
   /* |                        Messages                               | */
   /* |---------------------------------------------------------------| */
diff --git a/packages/javascript/src/models/i18n.ts b/packages/javascript/src/models/i18n.ts
index 9fc22a833..c75c3a80d 100644
--- a/packages/javascript/src/models/i18n.ts
+++ b/packages/javascript/src/models/i18n.ts
@@ -76,6 +76,16 @@ export interface I18nTranslations {
   'username.password.title': string;
   'username.password.subtitle': string;
 
+  /* |---------------------------------------------------------------| */
+  /* |                     Organization Switcher                     | */
+  /* |---------------------------------------------------------------| */
+
+  'organization.switcher.select.organization': string;
+  'organization.switcher.switch.organization': string;
+  'organization.switcher.loading.organizations': string;
+  'organization.switcher.members': string;
+  'organization.switcher.member': string;
+
   /* |---------------------------------------------------------------| */
   /* |                        Messages                               | */
   /* |---------------------------------------------------------------| */
diff --git a/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx b/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
index fc3bea614..49b84070a 100644
--- a/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
+++ b/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
@@ -33,6 +33,7 @@ import {
 import clsx from 'clsx';
 import {CSSProperties, FC, ReactElement, ReactNode, useMemo, useState} from 'react';
 import useTheme from '../../../contexts/Theme/useTheme';
+import useTranslation from '../../../hooks/useTranslation';
 import {Avatar} from '../../primitives/Avatar/Avatar';
 import Button from '../../primitives/Button/Button';
 import Building from '../../primitives/Icons/Building';
@@ -134,7 +135,7 @@ const useStyles = () => {
         display: 'flex',
         alignItems: 'center',
         gap: `${theme.spacing.unit}px`,
-        padding: `${theme.spacing.unit * 1.5}px`,
+        padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
         borderBottom: `1px solid ${theme.colors.border}`,
       } as CSSProperties,
       loadingContainer: {
@@ -308,6 +309,7 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
   const [isOpen, setIsOpen] = useState(false);
   const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
   const {theme, colorScheme} = useTheme();
+  const {t} = useTranslation();
 
   const hoverBackgroundColor = colorScheme === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.04)';
 
@@ -354,7 +356,12 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
           {organization.name}
         </Typography>
         <div style={styles.organizationMeta}>
-          {showMemberCount && organization.memberCount !== undefined && <span>{organization.memberCount} members</span>}
+          {showMemberCount && organization.memberCount !== undefined && (
+            <span>
+              {organization.memberCount}{' '}
+              {organization.memberCount === 1 ? t('organization.switcher.member') : t('organization.switcher.members')}
+            </span>
+          )}
           {showRole && organization.role && showMemberCount && organization.memberCount !== undefined && (
             <span> • </span>
           )}
@@ -368,7 +375,7 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
   const defaultRenderLoading = () => (
     <div style={styles.loadingContainer}>
       <Typography variant="caption" style={styles.loadingText}>
-        Loading organizations...
+        {t('organization.switcher.loading.organizations')}
       </Typography>
     </div>
   );
@@ -419,7 +426,7 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
                 className={withVendorCSSClassPrefix('organization-switcher__trigger-label')}
                 style={styles.orgName}
               >
-                Select Organization
+                {t('organization.switcher.select.organization')}
               </Typography>
             )}
           </>
@@ -440,14 +447,14 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
               <div className={withVendorCSSClassPrefix('organization-switcher__header')} style={styles.dropdownHeader}>
                 <Typography
                   variant="caption"
-                  fontWeight="semibold"
+                  fontWeight={600}
                   style={{
                     textTransform: 'uppercase',
                     letterSpacing: '0.05em',
                     color: theme.colors.text.secondary,
                   }}
                 >
-                  Switch Organization
+                  {t('organization.switcher.switch.organization')}
                 </Typography>
               </div>
 

From bf44d8083a35ca8ebd4d39f23c569366e0cf8686 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Fri, 20 Jun 2025 18:10:52 +0530
Subject: [PATCH 61/96] feat(react): Implement organization creation
 functionality with UI and API integration

---
 packages/javascript/src/i18n/en-US.ts         |  14 +
 packages/javascript/src/models/i18n.ts        |  18 +
 .../react/src/api/scim2/createOrganization.ts | 124 +++++++
 .../BaseCreateOrganization.tsx                | 348 ++++++++++++++++++
 .../CreateOrganization/CreateOrganization.tsx | 189 ++++++++++
 .../OrganizationSwitcher.tsx                  |  53 ++-
 packages/react/src/index.ts                   |  12 +
 7 files changed, 749 insertions(+), 9 deletions(-)
 create mode 100644 packages/react/src/api/scim2/createOrganization.ts
 create mode 100644 packages/react/src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
 create mode 100644 packages/react/src/components/presentation/CreateOrganization/CreateOrganization.tsx

diff --git a/packages/javascript/src/i18n/en-US.ts b/packages/javascript/src/i18n/en-US.ts
index 7d377bcc6..00fc79b8d 100644
--- a/packages/javascript/src/i18n/en-US.ts
+++ b/packages/javascript/src/i18n/en-US.ts
@@ -87,6 +87,20 @@ const translations: I18nTranslations = {
   'organization.switcher.loading.organizations': 'Loading organizations...',
   'organization.switcher.members': 'members',
   'organization.switcher.member': 'member',
+  'organization.switcher.create.organization': 'Create Organization',
+
+  'organization.create.title': 'Create Organization',
+  'organization.create.name.label': 'Organization Name',
+  'organization.create.name.placeholder': 'Enter organization name',
+  'organization.create.description.label': 'Description',
+  'organization.create.description.placeholder': 'Enter organization description',
+  'organization.create.type.label': 'Organization Type',
+  'organization.create.type.tenant': 'Tenant',
+  'organization.create.type.structural': 'Structural',
+  'organization.create.upload.logo': 'Upload Logo',
+  'organization.create.button': 'Create Organization',
+  'organization.create.creating': 'Creating...',
+  'organization.create.cancel': 'Cancel',
 
   /* |---------------------------------------------------------------| */
   /* |                        Messages                               | */
diff --git a/packages/javascript/src/models/i18n.ts b/packages/javascript/src/models/i18n.ts
index c75c3a80d..907944795 100644
--- a/packages/javascript/src/models/i18n.ts
+++ b/packages/javascript/src/models/i18n.ts
@@ -85,6 +85,24 @@ export interface I18nTranslations {
   'organization.switcher.loading.organizations': string;
   'organization.switcher.members': string;
   'organization.switcher.member': string;
+  'organization.switcher.create.organization': string;
+
+  /* |---------------------------------------------------------------| */
+  /* |                     Organization Creation                     | */
+  /* |---------------------------------------------------------------| */
+
+  'organization.create.title': string;
+  'organization.create.name.label': string;
+  'organization.create.name.placeholder': string;
+  'organization.create.description.label': string;
+  'organization.create.description.placeholder': string;
+  'organization.create.type.label': string;
+  'organization.create.type.tenant': string;
+  'organization.create.type.structural': string;
+  'organization.create.upload.logo': string;
+  'organization.create.button': string;
+  'organization.create.creating': string;
+  'organization.create.cancel': string;
 
   /* |---------------------------------------------------------------| */
   /* |                        Messages                               | */
diff --git a/packages/react/src/api/scim2/createOrganization.ts b/packages/react/src/api/scim2/createOrganization.ts
new file mode 100644
index 000000000..96ce7935f
--- /dev/null
+++ b/packages/react/src/api/scim2/createOrganization.ts
@@ -0,0 +1,124 @@
+/**
+ * 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, HttpInstance, AsgardeoSPAClient, HttpRequestConfig, Organization} from '@asgardeo/browser';
+
+const httpClient: HttpInstance = AsgardeoSPAClient.getInstance().httpRequest.bind(AsgardeoSPAClient.getInstance());
+
+/**
+ * Interface for organization creation payload.
+ */
+export interface CreateOrganizationPayload {
+  /**
+   * Organization description.
+   */
+  description: string;
+  /**
+   * Organization name.
+   */
+  name: string;
+  /**
+   * Parent organization ID.
+   */
+  parentId: string;
+  /**
+   * Organization type.
+   */
+  type: 'TENANT' | 'STRUCTURAL';
+}
+
+/**
+ * Creates a new organization.
+ *
+ * @param config - Configuration object containing baseUrl, payload and optional request config.
+ * @returns A promise that resolves with the created organization information.
+ * @example
+ * ```typescript
+ * try {
+ *   const organization = await createOrganization({
+ *     baseUrl: "https://api.asgardeo.io/t/<ORGANIZATION>",
+ *     payload: {
+ *       description: "Share your screens",
+ *       name: "Team Viewer",
+ *       parentId: "f4825104-4948-40d9-ab65-a960eee3e3d5",
+ *       type: "TENANT"
+ *     }
+ *   });
+ *   console.log(organization);
+ * } catch (error) {
+ *   if (error instanceof AsgardeoAPIError) {
+ *     console.error('Failed to create organization:', error.message);
+ *   }
+ * }
+ * ```
+ */
+const createOrganization = async ({
+  baseUrl,
+  payload,
+  ...requestConfig
+}: Partial<Request> & {
+  baseUrl: string;
+  payload: CreateOrganizationPayload;
+}): Promise<Organization> => {
+  if (!baseUrl) {
+    throw new AsgardeoAPIError(
+      'Base URL is required',
+      'createOrganization-ValidationError-001',
+      'javascript',
+      400,
+      'Invalid Request',
+    );
+  }
+
+  if (!payload) {
+    throw new AsgardeoAPIError(
+      'Organization payload is required',
+      'createOrganization-ValidationError-002',
+      'javascript',
+      400,
+      'Invalid Request',
+    );
+  }
+
+  const response: any = await httpClient({
+    data: JSON.stringify(payload),
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    url: `${baseUrl}/api/server/v1/organizations`,
+    ...requestConfig,
+  } as HttpRequestConfig);
+
+  if (!response.data) {
+    const errorText: string = await response.text();
+
+    throw new AsgardeoAPIError(
+      `Failed to create organization: ${errorText}`,
+      'createOrganization-ResponseError-001',
+      'javascript',
+      response.status,
+      response.statusText,
+    );
+  }
+
+  return response.data;
+};
+
+export default createOrganization;
diff --git a/packages/react/src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx b/packages/react/src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
new file mode 100644
index 000000000..7c7f3a8e7
--- /dev/null
+++ b/packages/react/src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
@@ -0,0 +1,348 @@
+/**
+ * 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 {withVendorCSSClassPrefix} from '@asgardeo/browser';
+import clsx from 'clsx';
+import {ChangeEvent, CSSProperties, FC, ReactElement, ReactNode, useMemo, useState} from 'react';
+
+import {CreateOrganizationPayload} from '../../../api/scim2/createOrganization';
+import useTheme from '../../../contexts/Theme/useTheme';
+import useTranslation from '../../../hooks/useTranslation';
+import {Avatar} from '../../primitives/Avatar/Avatar';
+import Button from '../../primitives/Button/Button';
+import Typography from '../../primitives/Typography/Typography';
+
+const useStyles = () => {
+  const {theme} = useTheme();
+
+  return useMemo(
+    () => ({
+      container: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: `${theme.spacing.unit * 3}px`,
+        maxWidth: '600px',
+        padding: `${theme.spacing.unit * 3}px`,
+      } as CSSProperties,
+      form: {
+        backgroundColor: theme.colors.background.surface,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.borderRadius.medium,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: `${theme.spacing.unit * 2}px`,
+        padding: `${theme.spacing.unit * 3}px`,
+      } as CSSProperties,
+      header: {
+        alignItems: 'center',
+        display: 'flex',
+        gap: `${theme.spacing.unit}px`,
+        marginBottom: `${theme.spacing.unit * 2}px`,
+      } as CSSProperties,
+      fieldGroup: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: `${theme.spacing.unit / 2}px`,
+      } as CSSProperties,
+      label: {
+        color: theme.colors.text.primary,
+        fontSize: '0.875rem',
+        fontWeight: 500,
+      } as CSSProperties,
+      input: {
+        backgroundColor: theme.colors.background.surface,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.borderRadius.small,
+        color: theme.colors.text.primary,
+        fontSize: '0.875rem',
+        padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
+        width: '100%',
+      } as CSSProperties,
+      textarea: {
+        backgroundColor: theme.colors.background.surface,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.borderRadius.small,
+        color: theme.colors.text.primary,
+        fontFamily: 'inherit',
+        fontSize: '0.875rem',
+        minHeight: '80px',
+        padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
+        resize: 'vertical',
+        width: '100%',
+      } as CSSProperties,
+      error: {
+        color: theme.colors.error.main,
+        fontSize: '0.75rem',
+        marginTop: `${theme.spacing.unit / 2}px`,
+      } as CSSProperties,
+      avatarContainer: {
+        alignItems: 'center',
+        display: 'flex',
+        gap: `${theme.spacing.unit}px`,
+      } as CSSProperties,
+      actions: {
+        borderTop: `1px solid ${theme.colors.border}`,
+        display: 'flex',
+        gap: `${theme.spacing.unit}px`,
+        justifyContent: 'flex-end',
+        paddingTop: `${theme.spacing.unit * 2}px`,
+      } as CSSProperties,
+    }),
+    [theme],
+  );
+};
+
+/**
+ * Interface for organization form data.
+ */
+export interface OrganizationFormData {
+  description: string;
+  name: string;
+  type: 'TENANT' | 'STRUCTURAL';
+}
+
+/**
+ * Props interface for the BaseCreateOrganization component.
+ */
+export interface BaseCreateOrganizationProps {
+  className?: string;
+  defaultParentId?: string;
+  error?: string | null;
+  initialValues?: Partial<OrganizationFormData>;
+  loading?: boolean;
+  onCancel?: () => void;
+  onSubmit?: (payload: CreateOrganizationPayload) => void | Promise<void>;
+  onSuccess?: (organization: any) => void;
+  renderAdditionalFields?: () => ReactNode;
+  renderAvatar?: (url?: string) => ReactNode;
+  renderHeader?: () => ReactNode;
+  style?: CSSProperties;
+}
+
+/**
+ * BaseCreateOrganization component provides the core functionality for creating organizations.
+ * This component serves as the base for framework-specific implementations.
+ */
+export const BaseCreateOrganization: FC<BaseCreateOrganizationProps> = ({
+  className = '',
+  defaultParentId = '',
+  error,
+  initialValues = {},
+  loading = false,
+  onCancel,
+  onSubmit,
+  onSuccess,
+  renderAdditionalFields,
+  renderAvatar,
+  renderHeader,
+  style,
+}): ReactElement => {
+  const styles = useStyles();
+  const {t} = useTranslation();
+  const [avatarUrl, setAvatarUrl] = useState<string>('');
+  const [formData, setFormData] = useState<OrganizationFormData>({
+    description: '',
+    name: '',
+    type: 'TENANT',
+    ...initialValues,
+  });
+  const [formErrors, setFormErrors] = useState<Partial<OrganizationFormData>>({});
+
+  const validateForm = (): boolean => {
+    const errors: Partial<OrganizationFormData> = {};
+
+    if (!formData.name.trim()) {
+      errors.name = 'Organization name is required';
+    }
+
+    if (!formData.description.trim()) {
+      errors.description = 'Organization description is required';
+    }
+
+    setFormErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const handleInputChange = (field: keyof OrganizationFormData, value: string): void => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value,
+    }));
+
+    // Clear error when user starts typing
+    if (formErrors[field]) {
+      setFormErrors(prev => ({
+        ...prev,
+        [field]: undefined,
+      }));
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault();
+
+    if (!validateForm() || loading) {
+      return;
+    }
+
+    const payload: CreateOrganizationPayload = {
+      description: formData.description.trim(),
+      name: formData.name.trim(),
+      parentId: defaultParentId,
+      type: formData.type,
+    };
+
+    try {
+      await onSubmit?.(payload);
+      if (onSuccess) {
+        onSuccess(payload);
+      }
+    } catch (submitError) {
+      // Error handling is done by parent component
+      console.error('Form submission error:', submitError);
+    }
+  };
+
+  const defaultRenderHeader = (): ReactElement => (
+    <div className={withVendorCSSClassPrefix('create-organization__header')} style={styles.header}>
+      <Typography variant="h6" component="h2">
+        {t('organization.create.title')}
+      </Typography>
+    </div>
+  );
+
+  const defaultRenderAvatar = (url?: string): ReactElement => (
+    <div className={withVendorCSSClassPrefix('create-organization__avatar-container')} style={styles.avatarContainer}>
+      <Avatar name={formData.name || 'Organization'} size={64} />
+      <Button
+        variant="text"
+        size="small"
+        onClick={() => {
+          // Avatar upload functionality can be implemented here
+          console.log('Avatar upload clicked');
+        }}
+      >
+        {t('organization.create.upload.logo')}
+      </Button>
+    </div>
+  );
+
+  return (
+    <div
+      className={clsx(withVendorCSSClassPrefix('create-organization'), className)}
+      style={{...styles.container, ...style}}
+    >
+      {renderHeader ? renderHeader() : defaultRenderHeader()}
+
+      <form
+        className={withVendorCSSClassPrefix('create-organization__form')}
+        style={styles.form}
+        onSubmit={handleSubmit}
+      >
+        {/* Avatar Section */}
+        {renderAvatar ? renderAvatar(avatarUrl) : defaultRenderAvatar(avatarUrl)}
+
+        {/* Organization Name */}
+        <div className={withVendorCSSClassPrefix('create-organization__field-group')} style={styles.fieldGroup}>
+          <label className={withVendorCSSClassPrefix('create-organization__label')} style={styles.label}>
+            {t('organization.create.name.label')} *
+          </label>
+          <input
+            type="text"
+            className={withVendorCSSClassPrefix('create-organization__input')}
+            style={styles.input}
+            placeholder={t('organization.create.name.placeholder')}
+            value={formData.name}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => handleInputChange('name', e.target.value)}
+            disabled={loading}
+            required
+          />
+          {formErrors.name && (
+            <div className={withVendorCSSClassPrefix('create-organization__error')} style={styles.error}>
+              {formErrors.name}
+            </div>
+          )}
+        </div>
+
+        {/* Organization Description */}
+        <div className={withVendorCSSClassPrefix('create-organization__field-group')} style={styles.fieldGroup}>
+          <label className={withVendorCSSClassPrefix('create-organization__label')} style={styles.label}>
+            {t('organization.create.description.label')} *
+          </label>
+          <textarea
+            className={withVendorCSSClassPrefix('create-organization__textarea')}
+            style={styles.textarea}
+            placeholder={t('organization.create.description.placeholder')}
+            value={formData.description}
+            onChange={(e: ChangeEvent<HTMLTextAreaElement>) => handleInputChange('description', e.target.value)}
+            disabled={loading}
+            required
+          />
+          {formErrors.description && (
+            <div className={withVendorCSSClassPrefix('create-organization__error')} style={styles.error}>
+              {formErrors.description}
+            </div>
+          )}
+        </div>
+
+        {/* Organization Type */}
+        <div className={withVendorCSSClassPrefix('create-organization__field-group')} style={styles.fieldGroup}>
+          <label className={withVendorCSSClassPrefix('create-organization__label')} style={styles.label}>
+            {t('organization.create.type.label')}
+          </label>
+          <select
+            className={withVendorCSSClassPrefix('create-organization__input')}
+            style={styles.input}
+            value={formData.type}
+            onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+              handleInputChange('type', e.target.value as 'TENANT' | 'STRUCTURAL')
+            }
+            disabled={loading}
+          >
+            <option value="TENANT">{t('organization.create.type.tenant')}</option>
+            <option value="STRUCTURAL">{t('organization.create.type.structural')}</option>
+          </select>
+        </div>
+
+        {/* Additional Fields */}
+        {renderAdditionalFields && renderAdditionalFields()}
+
+        {/* Error Message */}
+        {error && (
+          <div className={withVendorCSSClassPrefix('create-organization__error')} style={styles.error}>
+            {error}
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className={withVendorCSSClassPrefix('create-organization__actions')} style={styles.actions}>
+          {onCancel && (
+            <Button type="button" variant="outline" onClick={onCancel} disabled={loading}>
+              {t('organization.create.cancel')}
+            </Button>
+          )}
+          <Button type="submit" variant="solid" color="primary" disabled={loading}>
+            {loading ? t('organization.create.creating') : t('organization.create.button')}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default BaseCreateOrganization;
diff --git a/packages/react/src/components/presentation/CreateOrganization/CreateOrganization.tsx b/packages/react/src/components/presentation/CreateOrganization/CreateOrganization.tsx
new file mode 100644
index 000000000..aab43bc9a
--- /dev/null
+++ b/packages/react/src/components/presentation/CreateOrganization/CreateOrganization.tsx
@@ -0,0 +1,189 @@
+/**
+ * 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, ReactElement, useState} from 'react';
+
+import {BaseCreateOrganization, BaseCreateOrganizationProps} from './BaseCreateOrganization';
+import createOrganization, {CreateOrganizationPayload} from '../../../api/scim2/createOrganization';
+import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
+import useOrganization from '../../../contexts/Organization/useOrganization';
+import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Popover';
+
+/**
+ * Props interface for the CreateOrganization component.
+ */
+export interface CreateOrganizationProps extends Omit<BaseCreateOrganizationProps, 'onSubmit' | 'loading' | 'error'> {
+  /**
+   * Fallback element to render when the user is not signed in.
+   */
+  fallback?: ReactElement;
+  /**
+   * Display mode - inline renders within the parent, popup renders in a modal
+   */
+  mode?: 'inline' | 'popup';
+  /**
+   * Custom organization creation handler (will use default API if not provided).
+   */
+  onCreateOrganization?: (payload: CreateOrganizationPayload) => Promise<any>;
+  /**
+   * Callback for popup open state changes
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Whether the popup is open (only for popup mode)
+   */
+  open?: boolean;
+}
+
+/**
+ * CreateOrganization component that provides organization creation functionality.
+ * This component automatically integrates with the Asgardeo and Organization contexts.
+ *
+ * @example
+ * ```tsx
+ * import { CreateOrganization } from '@asgardeo/react';
+ *
+ * // Basic usage - uses default API and contexts
+ * <CreateOrganization
+ *   onSuccess={(org) => console.log('Created:', org)}
+ *   onCancel={() => navigate('/organizations')}
+ * />
+ *
+ * // Popup mode
+ * <CreateOrganization
+ *   mode="popup"
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ * />
+ *
+ * // With custom organization creation handler
+ * <CreateOrganization
+ *   onCreateOrganization={async (payload) => {
+ *     const result = await myCustomAPI.createOrganization(payload);
+ *     return result;
+ *   }}
+ *   onSuccess={(org) => {
+ *     console.log('Organization created:', org.name);
+ *     // Custom success logic here
+ *   }}
+ * />
+ *
+ * // With fallback for unauthenticated users
+ * <CreateOrganization
+ *   fallback={<div>Please sign in to create an organization</div>}
+ * />
+ * ```
+ */
+export const CreateOrganization: FC<CreateOrganizationProps> = ({
+  onCreateOrganization,
+  fallback = null,
+  onSuccess,
+  defaultParentId,
+  mode = 'inline',
+  onOpenChange,
+  open = false,
+  ...props
+}: CreateOrganizationProps): ReactElement => {
+  const {isSignedIn, baseUrl} = useAsgardeo();
+  const {currentOrganization, revalidateOrganizations} = useOrganization();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Don't render if not authenticated
+  if (!isSignedIn && fallback) {
+    return fallback;
+  }
+
+  if (!isSignedIn) {
+    return <></>;
+  }
+
+  // Use current organization as parent if no defaultParentId provided
+  const parentId: string = defaultParentId || currentOrganization?.id || '';
+
+  const handleSubmit = async (payload: CreateOrganizationPayload): Promise<void> => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      let result: any;
+
+      if (onCreateOrganization) {
+        // Use the provided custom creation function
+        result = await onCreateOrganization(payload);
+      } else {
+        // Use the default API
+        if (!baseUrl) {
+          throw new Error('Base URL is required for organization creation');
+        }
+        result = await createOrganization({
+          baseUrl,
+          payload: {
+            ...payload,
+            parentId,
+          },
+        });
+      }
+
+      // Refresh organizations list to include the new organization
+      await revalidateOrganizations();
+
+      // Call success callback if provided
+      if (onSuccess) {
+        onSuccess(result);
+      }
+
+      // Close popup if in popup mode
+      if (mode === 'popup' && onOpenChange) {
+        onOpenChange(false);
+      }
+    } catch (createError) {
+      const errorMessage: string = createError instanceof Error ? createError.message : 'Failed to create organization';
+      setError(errorMessage);
+      throw createError; // Re-throw to allow form to handle it
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const createOrgContent: ReactElement = (
+    <BaseCreateOrganization
+      onSubmit={handleSubmit}
+      loading={loading}
+      error={error}
+      defaultParentId={parentId}
+      onSuccess={onSuccess}
+      {...props}
+    />
+  );
+
+  if (mode === 'popup') {
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent>
+          <DialogHeading>Create Organization</DialogHeading>
+          <div style={{padding: '1rem'}}>{createOrgContent}</div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return createOrgContent;
+};
+
+export default CreateOrganization;
diff --git a/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx b/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
index 2eb5aad22..6b075d4a6 100644
--- a/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
+++ b/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
@@ -16,10 +16,13 @@
  * under the License.
  */
 
-import {FC, ReactElement} from 'react';
+import {FC, ReactElement, useState} from 'react';
+
 import BaseOrganizationSwitcher, {BaseOrganizationSwitcherProps, Organization} from './BaseOrganizationSwitcher';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
 import useOrganization from '../../../contexts/Organization/useOrganization';
+import useTranslation from '../../../hooks/useTranslation';
+import {CreateOrganization} from '../CreateOrganization/CreateOrganization';
 
 /**
  * Props interface for the OrganizationSwitcher component.
@@ -87,6 +90,8 @@ export const OrganizationSwitcher: FC<OrganizationSwitcherProps> = ({
     isLoading,
     error,
   } = useOrganization();
+  const [isCreateOrgOpen, setIsCreateOrgOpen] = useState(false);
+  const {t} = useTranslation();
 
   // Don't render if not authenticated
   if (!isSignedIn && fallback) {
@@ -102,15 +107,45 @@ export const OrganizationSwitcher: FC<OrganizationSwitcherProps> = ({
   const currentOrganization: Organization | null = propCurrentOrganization || contextCurrentOrganization;
   const onOrganizationSwitch: (organization: Organization) => void = propOnOrganizationSwitch || switchOrganization;
 
+  // Add "Create Organization" menu item
+  const defaultMenuItems = [
+    {
+      label: t('organization.switcher.create.organization'),
+      onClick: () => setIsCreateOrgOpen(true),
+      icon: (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M12 5v14m-7-7h14" />
+        </svg>
+      ),
+    },
+  ];
+
+  const menuItems = props.menuItems ? [...defaultMenuItems, ...props.menuItems] : defaultMenuItems;
+
   return (
-    <BaseOrganizationSwitcher
-      organizations={organizations}
-      currentOrganization={currentOrganization}
-      onOrganizationSwitch={onOrganizationSwitch}
-      loading={isLoading}
-      error={error}
-      {...props}
-    />
+    <>
+      <BaseOrganizationSwitcher
+        organizations={organizations}
+        currentOrganization={currentOrganization}
+        onOrganizationSwitch={onOrganizationSwitch}
+        loading={isLoading}
+        error={error}
+        menuItems={menuItems}
+        {...props}
+      />
+      <CreateOrganization
+        mode="popup"
+        open={isCreateOrgOpen}
+        onOpenChange={setIsCreateOrgOpen}
+        onSuccess={(org: Organization) => {
+          // Optionally switch to the newly created organization
+          if (org && onOrganizationSwitch) {
+            onOrganizationSwitch(org);
+          }
+          setIsCreateOrgOpen(false);
+        }}
+      />
+    </>
   );
 };
 
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index f2daa9319..473e4626d 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -164,6 +164,12 @@ export * from './components/presentation/OrganizationSwitcher/BaseOrganizationSw
 export {default as OrganizationSwitcher} from './components/presentation/OrganizationSwitcher/OrganizationSwitcher';
 export * from './components/presentation/OrganizationSwitcher/OrganizationSwitcher';
 
+export {BaseCreateOrganization} from './components/presentation/CreateOrganization/BaseCreateOrganization';
+export * from './components/presentation/CreateOrganization/BaseCreateOrganization';
+
+export {CreateOrganization} from './components/presentation/CreateOrganization/CreateOrganization';
+export * from './components/presentation/CreateOrganization/CreateOrganization';
+
 export {default as Button} from './components/primitives/Button/Button';
 export * from './components/primitives/Button/Button';
 
@@ -227,3 +233,9 @@ export * from './components/factories/FieldFactory';
 export type {FlowStep, FlowMessage, FlowContextValue} from './contexts/Flow/FlowContext';
 
 export type {FlowProviderProps} from './contexts/Flow/FlowProvider';
+
+// API Functions
+export {default as createOrganization} from './api/scim2/createOrganization';
+export * from './api/scim2/createOrganization';
+
+export {default as getMeOrganizations} from './api/scim2/getMeOrganizations';

From 98cb95b287caeffae9e4f3fdd20ee4693c7a48ef Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Sun, 22 Jun 2025 21:36:32 +0530
Subject: [PATCH 62/96] feat(i18n): Add organization handle translations and
 update CreateOrganization component

---
 packages/javascript/src/i18n/en-US.ts         |   6 +-
 packages/javascript/src/models/i18n.ts        |   6 +-
 .../react/src/api/scim2/createOrganization.ts |  15 +-
 .../BaseCreateOrganization.tsx                | 372 +++++++++++-------
 .../CreateOrganization/CreateOrganization.tsx |  43 +-
 .../BaseOrganizationSwitcher.tsx              |   2 +
 6 files changed, 245 insertions(+), 199 deletions(-)

diff --git a/packages/javascript/src/i18n/en-US.ts b/packages/javascript/src/i18n/en-US.ts
index 00fc79b8d..b345a360a 100644
--- a/packages/javascript/src/i18n/en-US.ts
+++ b/packages/javascript/src/i18n/en-US.ts
@@ -92,12 +92,10 @@ const translations: I18nTranslations = {
   'organization.create.title': 'Create Organization',
   'organization.create.name.label': 'Organization Name',
   'organization.create.name.placeholder': 'Enter organization name',
+  'organization.create.handle.label': 'Organization Handle',
+  'organization.create.handle.placeholder': 'my-organization',
   'organization.create.description.label': 'Description',
   'organization.create.description.placeholder': 'Enter organization description',
-  'organization.create.type.label': 'Organization Type',
-  'organization.create.type.tenant': 'Tenant',
-  'organization.create.type.structural': 'Structural',
-  'organization.create.upload.logo': 'Upload Logo',
   'organization.create.button': 'Create Organization',
   'organization.create.creating': 'Creating...',
   'organization.create.cancel': 'Cancel',
diff --git a/packages/javascript/src/models/i18n.ts b/packages/javascript/src/models/i18n.ts
index 907944795..328fd50ef 100644
--- a/packages/javascript/src/models/i18n.ts
+++ b/packages/javascript/src/models/i18n.ts
@@ -94,12 +94,10 @@ export interface I18nTranslations {
   'organization.create.title': string;
   'organization.create.name.label': string;
   'organization.create.name.placeholder': string;
+  'organization.create.handle.label': string;
+  'organization.create.handle.placeholder': string;
   'organization.create.description.label': string;
   'organization.create.description.placeholder': string;
-  'organization.create.type.label': string;
-  'organization.create.type.tenant': string;
-  'organization.create.type.structural': string;
-  'organization.create.upload.logo': string;
   'organization.create.button': string;
   'organization.create.creating': string;
   'organization.create.cancel': string;
diff --git a/packages/react/src/api/scim2/createOrganization.ts b/packages/react/src/api/scim2/createOrganization.ts
index 96ce7935f..e25daa59f 100644
--- a/packages/react/src/api/scim2/createOrganization.ts
+++ b/packages/react/src/api/scim2/createOrganization.ts
@@ -28,6 +28,10 @@ export interface CreateOrganizationPayload {
    * Organization description.
    */
   description: string;
+  /**
+   * Organization handle/slug.
+   */
+  orgHandle?: string;
   /**
    * Organization name.
    */
@@ -39,7 +43,7 @@ export interface CreateOrganizationPayload {
   /**
    * Organization type.
    */
-  type: 'TENANT' | 'STRUCTURAL';
+  type: 'TENANT';
 }
 
 /**
@@ -55,6 +59,7 @@ export interface CreateOrganizationPayload {
  *     payload: {
  *       description: "Share your screens",
  *       name: "Team Viewer",
+ *       orgHandle: "team-viewer",
  *       parentId: "f4825104-4948-40d9-ab65-a960eee3e3d5",
  *       type: "TENANT"
  *     }
@@ -95,8 +100,14 @@ const createOrganization = async ({
     );
   }
 
+  // Always set type to TENANT for now
+  const organizationPayload = {
+    ...payload,
+    type: 'TENANT' as const,
+  };
+
   const response: any = await httpClient({
-    data: JSON.stringify(payload),
+    data: JSON.stringify(organizationPayload),
     headers: {
       Accept: 'application/json',
       'Content-Type': 'application/json',
diff --git a/packages/react/src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx b/packages/react/src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
index 7c7f3a8e7..2884cf527 100644
--- a/packages/react/src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
+++ b/packages/react/src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
@@ -25,85 +25,105 @@ import useTheme from '../../../contexts/Theme/useTheme';
 import useTranslation from '../../../hooks/useTranslation';
 import {Avatar} from '../../primitives/Avatar/Avatar';
 import Button from '../../primitives/Button/Button';
+import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Popover';
+import FormControl from '../../primitives/FormControl/FormControl';
+import InputLabel from '../../primitives/InputLabel/InputLabel';
+import TextField from '../../primitives/TextField/TextField';
 import Typography from '../../primitives/Typography/Typography';
 
 const useStyles = () => {
-  const {theme} = useTheme();
+  const {theme, colorScheme} = useTheme();
 
   return useMemo(
     () => ({
-      container: {
+      root: {
+        padding: `${theme.spacing.unit * 4}px`,
+        minWidth: '600px',
+        margin: '0 auto',
+      } as CSSProperties,
+      card: {
+        background: theme.colors.background.surface,
+        borderRadius: theme.borderRadius.large,
+        padding: `${theme.spacing.unit * 4}px`,
+      } as CSSProperties,
+      content: {
         display: 'flex',
         flexDirection: 'column',
-        gap: `${theme.spacing.unit * 3}px`,
-        maxWidth: '600px',
-        padding: `${theme.spacing.unit * 3}px`,
+        gap: `${theme.spacing.unit * 2}px`,
       } as CSSProperties,
       form: {
-        backgroundColor: theme.colors.background.surface,
-        border: `1px solid ${theme.colors.border}`,
-        borderRadius: theme.borderRadius.medium,
         display: 'flex',
         flexDirection: 'column',
         gap: `${theme.spacing.unit * 2}px`,
-        padding: `${theme.spacing.unit * 3}px`,
+        width: '100%',
       } as CSSProperties,
       header: {
-        alignItems: 'center',
         display: 'flex',
-        gap: `${theme.spacing.unit}px`,
-        marginBottom: `${theme.spacing.unit * 2}px`,
+        alignItems: 'center',
+        gap: `${theme.spacing.unit * 1.5}px`,
+        marginBottom: `${theme.spacing.unit * 1.5}px`,
       } as CSSProperties,
-      fieldGroup: {
+      field: {
         display: 'flex',
-        flexDirection: 'column',
-        gap: `${theme.spacing.unit / 2}px`,
-      } as CSSProperties,
-      label: {
-        color: theme.colors.text.primary,
-        fontSize: '0.875rem',
-        fontWeight: 500,
-      } as CSSProperties,
-      input: {
-        backgroundColor: theme.colors.background.surface,
-        border: `1px solid ${theme.colors.border}`,
-        borderRadius: theme.borderRadius.small,
-        color: theme.colors.text.primary,
-        fontSize: '0.875rem',
-        padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
-        width: '100%',
+        alignItems: 'center',
+        padding: `${theme.spacing.unit}px 0`,
+        borderBottom: `1px solid ${theme.colors.border}`,
+        minHeight: '32px',
       } as CSSProperties,
       textarea: {
-        backgroundColor: theme.colors.background.surface,
+        width: '100%',
+        padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
         border: `1px solid ${theme.colors.border}`,
-        borderRadius: theme.borderRadius.small,
+        borderRadius: theme.borderRadius.medium,
+        fontSize: '1rem',
         color: theme.colors.text.primary,
+        backgroundColor: theme.colors.background.surface,
         fontFamily: 'inherit',
-        fontSize: '0.875rem',
         minHeight: '80px',
-        padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
         resize: 'vertical',
-        width: '100%',
-      } as CSSProperties,
-      error: {
-        color: theme.colors.error.main,
-        fontSize: '0.75rem',
-        marginTop: `${theme.spacing.unit / 2}px`,
+        outline: 'none',
+        '&:focus': {
+          borderColor: theme.colors.primary.main,
+          boxShadow: `0 0 0 2px ${theme.colors.primary.main}20`,
+        },
+        '&:disabled': {
+          backgroundColor: theme.colors.background.disabled,
+          color: theme.colors.text.secondary,
+          cursor: 'not-allowed',
+        },
       } as CSSProperties,
       avatarContainer: {
-        alignItems: 'center',
+        alignItems: 'flex-start',
         display: 'flex',
-        gap: `${theme.spacing.unit}px`,
+        gap: `${theme.spacing.unit * 2}px`,
+        marginBottom: `${theme.spacing.unit}px`,
       } as CSSProperties,
       actions: {
-        borderTop: `1px solid ${theme.colors.border}`,
         display: 'flex',
         gap: `${theme.spacing.unit}px`,
         justifyContent: 'flex-end',
         paddingTop: `${theme.spacing.unit * 2}px`,
       } as CSSProperties,
+      infoContainer: {
+        display: 'flex',
+        flexDirection: 'column' as const,
+        gap: `${theme.spacing.unit}px`,
+      } as CSSProperties,
+      value: {
+        color: theme.colors.text.primary,
+        flex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        gap: `${theme.spacing.unit}px`,
+        overflow: 'hidden',
+        minHeight: '32px',
+        lineHeight: '32px',
+      } as CSSProperties,
+      popup: {
+        padding: `${theme.spacing.unit * 2}px`,
+      } as CSSProperties,
     }),
-    [theme],
+    [theme, colorScheme],
   );
 };
 
@@ -112,26 +132,29 @@ const useStyles = () => {
  */
 export interface OrganizationFormData {
   description: string;
+  handle: string;
   name: string;
-  type: 'TENANT' | 'STRUCTURAL';
 }
 
 /**
  * Props interface for the BaseCreateOrganization component.
  */
 export interface BaseCreateOrganizationProps {
+  cardLayout?: boolean;
   className?: string;
   defaultParentId?: string;
   error?: string | null;
   initialValues?: Partial<OrganizationFormData>;
   loading?: boolean;
+  mode?: 'inline' | 'popup';
   onCancel?: () => void;
+  onOpenChange?: (open: boolean) => void;
   onSubmit?: (payload: CreateOrganizationPayload) => void | Promise<void>;
   onSuccess?: (organization: any) => void;
+  open?: boolean;
   renderAdditionalFields?: () => ReactNode;
-  renderAvatar?: (url?: string) => ReactNode;
-  renderHeader?: () => ReactNode;
   style?: CSSProperties;
+  title?: string;
 }
 
 /**
@@ -139,29 +162,34 @@ export interface BaseCreateOrganizationProps {
  * This component serves as the base for framework-specific implementations.
  */
 export const BaseCreateOrganization: FC<BaseCreateOrganizationProps> = ({
+  cardLayout = true,
   className = '',
   defaultParentId = '',
   error,
   initialValues = {},
   loading = false,
+  mode = 'inline',
   onCancel,
+  onOpenChange,
   onSubmit,
   onSuccess,
+  open = false,
   renderAdditionalFields,
-  renderAvatar,
-  renderHeader,
   style,
+  title = 'Create Organization',
 }): ReactElement => {
   const styles = useStyles();
+  const {theme} = useTheme();
   const {t} = useTranslation();
   const [avatarUrl, setAvatarUrl] = useState<string>('');
+  const [avatarFile, setAvatarFile] = useState<File | null>(null);
   const [formData, setFormData] = useState<OrganizationFormData>({
     description: '',
+    handle: '',
     name: '',
-    type: 'TENANT',
     ...initialValues,
   });
-  const [formErrors, setFormErrors] = useState<Partial<OrganizationFormData>>({});
+  const [formErrors, setFormErrors] = useState<Partial<OrganizationFormData> & {avatar?: string}>({});
 
   const validateForm = (): boolean => {
     const errors: Partial<OrganizationFormData> = {};
@@ -170,6 +198,12 @@ export const BaseCreateOrganization: FC<BaseCreateOrganizationProps> = ({
       errors.name = 'Organization name is required';
     }
 
+    if (!formData.handle.trim()) {
+      errors.handle = 'Organization handle is required';
+    } else if (!/^[a-z0-9-]+$/.test(formData.handle)) {
+      errors.handle = 'Handle can only contain lowercase letters, numbers, and hyphens';
+    }
+
     if (!formData.description.trim()) {
       errors.description = 'Organization description is required';
     }
@@ -193,6 +227,63 @@ export const BaseCreateOrganization: FC<BaseCreateOrganizationProps> = ({
     }
   };
 
+  const handleAvatarUpload = (event: ChangeEvent<HTMLInputElement>): void => {
+    const file = event.target.files?.[0];
+    if (file) {
+      // Validate file type
+      if (!file.type.startsWith('image/')) {
+        setFormErrors(prev => ({
+          ...prev,
+          avatar: 'Please select a valid image file',
+        }));
+        return;
+      }
+
+      // Validate file size (max 2MB)
+      if (file.size > 2 * 1024 * 1024) {
+        setFormErrors(prev => ({
+          ...prev,
+          avatar: 'Image size must be less than 2MB',
+        }));
+        return;
+      }
+
+      setAvatarFile(file);
+
+      // Create preview URL
+      const reader = new FileReader();
+      reader.onload = e => {
+        setAvatarUrl(e.target?.result as string);
+      };
+      reader.readAsDataURL(file);
+
+      // Clear any previous avatar errors
+      setFormErrors(prev => ({
+        ...prev,
+        avatar: undefined,
+      }));
+    }
+  };
+
+  const handleNameChange = (value: string): void => {
+    handleInputChange('name', value);
+
+    // Auto-generate handle from name if handle is empty or matches previous auto-generated value
+    if (!formData.handle || formData.handle === generateHandleFromName(formData.name)) {
+      const newHandle = generateHandleFromName(value);
+      handleInputChange('handle', newHandle);
+    }
+  };
+
+  const generateHandleFromName = (name: string): string => {
+    return name
+      .toLowerCase()
+      .replace(/[^a-z0-9\s-]/g, '') // Remove special characters except spaces and hyphens
+      .replace(/\s+/g, '-') // Replace spaces with hyphens
+      .replace(/-+/g, '-') // Replace multiple hyphens with single hyphen
+      .replace(/^-|-$/g, ''); // Remove leading/trailing hyphens
+  };
+
   const handleSubmit = async (e: React.FormEvent): Promise<void> => {
     e.preventDefault();
 
@@ -202,9 +293,10 @@ export const BaseCreateOrganization: FC<BaseCreateOrganizationProps> = ({
 
     const payload: CreateOrganizationPayload = {
       description: formData.description.trim(),
+      orgHandle: formData.handle.trim(),
       name: formData.name.trim(),
       parentId: defaultParentId,
-      type: formData.type,
+      type: 'TENANT',
     };
 
     try {
@@ -226,108 +318,81 @@ export const BaseCreateOrganization: FC<BaseCreateOrganizationProps> = ({
     </div>
   );
 
-  const defaultRenderAvatar = (url?: string): ReactElement => (
-    <div className={withVendorCSSClassPrefix('create-organization__avatar-container')} style={styles.avatarContainer}>
-      <Avatar name={formData.name || 'Organization'} size={64} />
-      <Button
-        variant="text"
-        size="small"
-        onClick={() => {
-          // Avatar upload functionality can be implemented here
-          console.log('Avatar upload clicked');
-        }}
-      >
-        {t('organization.create.upload.logo')}
-      </Button>
-    </div>
-  );
+  const containerStyle = {
+    ...styles.root,
+    ...(cardLayout ? styles.card : {}),
+  };
 
-  return (
+  const createOrganizationContent = (
     <div
       className={clsx(withVendorCSSClassPrefix('create-organization'), className)}
-      style={{...styles.container, ...style}}
+      style={{...containerStyle, ...style}}
     >
-      {renderHeader ? renderHeader() : defaultRenderHeader()}
-
-      <form
-        className={withVendorCSSClassPrefix('create-organization__form')}
-        style={styles.form}
-        onSubmit={handleSubmit}
-      >
-        {/* Avatar Section */}
-        {renderAvatar ? renderAvatar(avatarUrl) : defaultRenderAvatar(avatarUrl)}
-
-        {/* Organization Name */}
-        <div className={withVendorCSSClassPrefix('create-organization__field-group')} style={styles.fieldGroup}>
-          <label className={withVendorCSSClassPrefix('create-organization__label')} style={styles.label}>
-            {t('organization.create.name.label')} *
-          </label>
-          <input
-            type="text"
-            className={withVendorCSSClassPrefix('create-organization__input')}
-            style={styles.input}
-            placeholder={t('organization.create.name.placeholder')}
-            value={formData.name}
-            onChange={(e: ChangeEvent<HTMLInputElement>) => handleInputChange('name', e.target.value)}
-            disabled={loading}
-            required
-          />
-          {formErrors.name && (
-            <div className={withVendorCSSClassPrefix('create-organization__error')} style={styles.error}>
-              {formErrors.name}
-            </div>
-          )}
-        </div>
+      <div className={withVendorCSSClassPrefix('create-organization__content')} style={styles.content}>
+        <form
+          id="create-organization-form"
+          className={withVendorCSSClassPrefix('create-organization__form')}
+          style={styles.form}
+          onSubmit={handleSubmit}
+        >
+          {/* Organization Name */}
+          <div className={withVendorCSSClassPrefix('create-organization__field-group')}>
+            <TextField
+              label={`${t('organization.create.name.label')}`}
+              placeholder={t('organization.create.name.placeholder')}
+              value={formData.name}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => handleNameChange(e.target.value)}
+              disabled={loading}
+              required
+              error={formErrors.name}
+              className={withVendorCSSClassPrefix('create-organization__input')}
+            />
+          </div>
 
-        {/* Organization Description */}
-        <div className={withVendorCSSClassPrefix('create-organization__field-group')} style={styles.fieldGroup}>
-          <label className={withVendorCSSClassPrefix('create-organization__label')} style={styles.label}>
-            {t('organization.create.description.label')} *
-          </label>
-          <textarea
-            className={withVendorCSSClassPrefix('create-organization__textarea')}
-            style={styles.textarea}
-            placeholder={t('organization.create.description.placeholder')}
-            value={formData.description}
-            onChange={(e: ChangeEvent<HTMLTextAreaElement>) => handleInputChange('description', e.target.value)}
-            disabled={loading}
-            required
-          />
-          {formErrors.description && (
-            <div className={withVendorCSSClassPrefix('create-organization__error')} style={styles.error}>
-              {formErrors.description}
-            </div>
-          )}
-        </div>
+          {/* Organization Handle */}
+          <div className={withVendorCSSClassPrefix('create-organization__field-group')}>
+            <TextField
+              label={`${t('organization.create.handle.label') || 'Organization Handle'}`}
+              placeholder={t('organization.create.handle.placeholder') || 'my-organization'}
+              value={formData.handle}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => handleInputChange('handle', e.target.value)}
+              disabled={loading}
+              required
+              error={formErrors.handle}
+              helperText="This will be your organization's unique identifier. Only lowercase letters, numbers, and hyphens are allowed."
+              className={withVendorCSSClassPrefix('create-organization__input')}
+            />
+          </div>
 
-        {/* Organization Type */}
-        <div className={withVendorCSSClassPrefix('create-organization__field-group')} style={styles.fieldGroup}>
-          <label className={withVendorCSSClassPrefix('create-organization__label')} style={styles.label}>
-            {t('organization.create.type.label')}
-          </label>
-          <select
-            className={withVendorCSSClassPrefix('create-organization__input')}
-            style={styles.input}
-            value={formData.type}
-            onChange={(e: ChangeEvent<HTMLSelectElement>) =>
-              handleInputChange('type', e.target.value as 'TENANT' | 'STRUCTURAL')
-            }
-            disabled={loading}
-          >
-            <option value="TENANT">{t('organization.create.type.tenant')}</option>
-            <option value="STRUCTURAL">{t('organization.create.type.structural')}</option>
-          </select>
-        </div>
+          {/* Organization Description */}
+          <div className={withVendorCSSClassPrefix('create-organization__field-group')}>
+            <FormControl error={formErrors.description}>
+              <InputLabel required>{t('organization.create.description.label')}</InputLabel>
+              <textarea
+                className={withVendorCSSClassPrefix('create-organization__textarea')}
+                style={{
+                  ...styles.textarea,
+                  borderColor: formErrors.description ? theme.colors.error.main : theme.colors.border,
+                }}
+                placeholder={t('organization.create.description.placeholder')}
+                value={formData.description}
+                onChange={(e: ChangeEvent<HTMLTextAreaElement>) => handleInputChange('description', e.target.value)}
+                disabled={loading}
+                required
+              />
+            </FormControl>
+          </div>
 
-        {/* Additional Fields */}
-        {renderAdditionalFields && renderAdditionalFields()}
+          {/* Additional Fields */}
+          {renderAdditionalFields && renderAdditionalFields()}
 
-        {/* Error Message */}
-        {error && (
-          <div className={withVendorCSSClassPrefix('create-organization__error')} style={styles.error}>
-            {error}
-          </div>
-        )}
+          {/* Error Message */}
+          {error && (
+            <Typography variant="body2" style={{color: theme.colors.error.main, fontSize: '0.875rem'}}>
+              {error}
+            </Typography>
+          )}
+        </form>
 
         {/* Actions */}
         <div className={withVendorCSSClassPrefix('create-organization__actions')} style={styles.actions}>
@@ -336,13 +401,26 @@ export const BaseCreateOrganization: FC<BaseCreateOrganizationProps> = ({
               {t('organization.create.cancel')}
             </Button>
           )}
-          <Button type="submit" variant="solid" color="primary" disabled={loading}>
+          <Button type="submit" variant="solid" color="primary" disabled={loading} form="create-organization-form">
             {loading ? t('organization.create.creating') : t('organization.create.button')}
           </Button>
         </div>
-      </form>
+      </div>
     </div>
   );
+
+  if (mode === 'popup') {
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent>
+          <DialogHeading>{title}</DialogHeading>
+          <div style={{padding: '1rem'}}>{createOrganizationContent}</div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return createOrganizationContent;
 };
 
 export default BaseCreateOrganization;
diff --git a/packages/react/src/components/presentation/CreateOrganization/CreateOrganization.tsx b/packages/react/src/components/presentation/CreateOrganization/CreateOrganization.tsx
index aab43bc9a..8fb5aba04 100644
--- a/packages/react/src/components/presentation/CreateOrganization/CreateOrganization.tsx
+++ b/packages/react/src/components/presentation/CreateOrganization/CreateOrganization.tsx
@@ -22,7 +22,6 @@ import {BaseCreateOrganization, BaseCreateOrganizationProps} from './BaseCreateO
 import createOrganization, {CreateOrganizationPayload} from '../../../api/scim2/createOrganization';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
 import useOrganization from '../../../contexts/Organization/useOrganization';
-import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Popover';
 
 /**
  * Props interface for the CreateOrganization component.
@@ -32,22 +31,10 @@ export interface CreateOrganizationProps extends Omit<BaseCreateOrganizationProp
    * Fallback element to render when the user is not signed in.
    */
   fallback?: ReactElement;
-  /**
-   * Display mode - inline renders within the parent, popup renders in a modal
-   */
-  mode?: 'inline' | 'popup';
   /**
    * Custom organization creation handler (will use default API if not provided).
    */
   onCreateOrganization?: (payload: CreateOrganizationPayload) => Promise<any>;
-  /**
-   * Callback for popup open state changes
-   */
-  onOpenChange?: (open: boolean) => void;
-  /**
-   * Whether the popup is open (only for popup mode)
-   */
-  open?: boolean;
 }
 
 /**
@@ -64,13 +51,6 @@ export interface CreateOrganizationProps extends Omit<BaseCreateOrganizationProp
  *   onCancel={() => navigate('/organizations')}
  * />
  *
- * // Popup mode
- * <CreateOrganization
- *   mode="popup"
- *   open={isOpen}
- *   onOpenChange={setIsOpen}
- * />
- *
  * // With custom organization creation handler
  * <CreateOrganization
  *   onCreateOrganization={async (payload) => {
@@ -94,9 +74,6 @@ export const CreateOrganization: FC<CreateOrganizationProps> = ({
   fallback = null,
   onSuccess,
   defaultParentId,
-  mode = 'inline',
-  onOpenChange,
-  open = false,
   ...props
 }: CreateOrganizationProps): ReactElement => {
   const {isSignedIn, baseUrl} = useAsgardeo();
@@ -147,11 +124,6 @@ export const CreateOrganization: FC<CreateOrganizationProps> = ({
       if (onSuccess) {
         onSuccess(result);
       }
-
-      // Close popup if in popup mode
-      if (mode === 'popup' && onOpenChange) {
-        onOpenChange(false);
-      }
     } catch (createError) {
       const errorMessage: string = createError instanceof Error ? createError.message : 'Failed to create organization';
       setError(errorMessage);
@@ -161,7 +133,7 @@ export const CreateOrganization: FC<CreateOrganizationProps> = ({
     }
   };
 
-  const createOrgContent: ReactElement = (
+  return (
     <BaseCreateOrganization
       onSubmit={handleSubmit}
       loading={loading}
@@ -171,19 +143,6 @@ export const CreateOrganization: FC<CreateOrganizationProps> = ({
       {...props}
     />
   );
-
-  if (mode === 'popup') {
-    return (
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent>
-          <DialogHeading>Create Organization</DialogHeading>
-          <div style={{padding: '1rem'}}>{createOrgContent}</div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  return createOrgContent;
 };
 
 export default CreateOrganization;
diff --git a/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx b/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
index 49b84070a..14a36f09e 100644
--- a/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
+++ b/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
@@ -346,6 +346,7 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
   const defaultRenderOrganization = (organization: Organization, isSelected: boolean) => (
     <>
       <Avatar
+        variant="square"
         imageUrl={organization.avatar}
         name={organization.name}
         size={avatarSize * 1.25}
@@ -402,6 +403,7 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
         {currentOrganization ? (
           <>
             <Avatar
+              variant="square"
               imageUrl={currentOrganization.avatar}
               name={currentOrganization.name}
               size={avatarSize}

From 369875399c3d00299bbaf84f35f80ac1a54af53b Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Sun, 22 Jun 2025 21:45:54 +0530
Subject: [PATCH 63/96] feat(react): Enhance Avatar component with customizable
 background generation and styling

---
 .../components/primitives/Avatar/Avatar.tsx   | 69 +++++++++++++++++--
 1 file changed, 63 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/primitives/Avatar/Avatar.tsx b/packages/react/src/components/primitives/Avatar/Avatar.tsx
index 9dacde037..6d4471285 100644
--- a/packages/react/src/components/primitives/Avatar/Avatar.tsx
+++ b/packages/react/src/components/primitives/Avatar/Avatar.tsx
@@ -26,6 +26,14 @@ export interface AvatarProps {
    * Alternative text for the avatar image
    */
   alt?: string;
+  /**
+   * Background generation strategy
+   * - 'random': Generate background color based on ASCII values of the name
+   * - 'none': Use default theme background
+   * - string: Use custom background color
+   * @default 'random'
+   */
+  background?: 'random' | 'none' | string;
   /**
    * Optional className for the avatar
    */
@@ -52,9 +60,11 @@ export interface AvatarProps {
 const useStyles = ({
   size,
   variant,
+  backgroundColor,
 }: {
   size: number;
   variant: 'circular' | 'square';
+  backgroundColor?: string;
 }): {
   avatar: CSSProperties;
   image: CSSProperties;
@@ -65,16 +75,17 @@ const useStyles = ({
     () => ({
       avatar: {
         alignItems: 'center',
-        backgroundColor: theme.colors.background.surface,
-        border: `1px solid ${theme.colors.border}`,
+        background: backgroundColor || theme.colors.background.surface,
+        border: backgroundColor ? 'none' : `1px solid ${theme.colors.border}`,
         borderRadius: variant === 'circular' ? '50%' : '8px',
-        color: theme.colors.text.primary,
+        color: backgroundColor ? '#ffffff' : theme.colors.text.primary,
         display: 'flex',
         fontSize: `${size * 0.4}px`,
-        fontWeight: 500,
+        fontWeight: 600,
         height: `${size}px`,
         justifyContent: 'center',
         overflow: 'hidden',
+        textShadow: backgroundColor ? '0 1px 2px rgba(0, 0, 0, 0.1)' : 'none',
         width: `${size}px`,
       } as CSSProperties,
       image: {
@@ -83,19 +94,65 @@ const useStyles = ({
         width: '100%',
       } as CSSProperties,
     }),
-    [size, theme, colorScheme, variant],
+    [size, theme, colorScheme, variant, backgroundColor],
   );
 };
 
 export const Avatar: FC<AvatarProps> = ({
   alt = 'User avatar',
+  background = 'random',
   className = '',
   imageUrl,
   name,
   size = 64,
   variant = 'circular',
 }): JSX.Element => {
-  const styles: {avatar: CSSProperties; image: CSSProperties} = useStyles({size, variant});
+  const generateBackgroundColor = (inputString: string): string => {
+    const hash = inputString.split('').reduce((acc, char) => {
+      const charCode = char.charCodeAt(0);
+      return ((acc << 5) - acc + charCode) & 0xffffffff;
+    }, 0);
+
+    const seed = Math.abs(hash);
+
+    const generateColor = (offset: number): string => {
+      const hue1 = (seed + offset) % 360;
+      const hue2 = (hue1 + 60 + (seed % 120)) % 360;
+
+      const saturation = 70 + (seed % 20);
+      const lightness1 = 55 + (seed % 15);
+      const lightness2 = 60 + ((seed + offset) % 15);
+
+      return `hsl(${hue1}, ${saturation}%, ${lightness1}%), hsl(${hue2}, ${saturation}%, ${lightness2}%)`;
+    };
+
+    const angle = 45 + (seed % 91);
+
+    const colors = generateColor(seed);
+    return `linear-gradient(${angle}deg, ${colors})`;
+  };
+
+  const backgroundColor = useMemo(() => {
+    if (!name || imageUrl) {
+      return undefined;
+    }
+
+    if (background === 'random') {
+      return generateBackgroundColor(name);
+    }
+
+    if (background === 'none') {
+      return undefined;
+    }
+
+    return background;
+  }, [background, name, imageUrl]);
+
+  const styles: {avatar: CSSProperties; image: CSSProperties} = useStyles({
+    size,
+    variant,
+    backgroundColor,
+  });
 
   const getInitials = (fullName: string): string =>
     fullName

From 1ac1a730cbda343fa2c8b99ef06264a97f0cb63e Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 23 Jun 2025 14:04:31 +0530
Subject: [PATCH 64/96] feat(react): Update organization model and enhance
 getMeOrganizations API with additional query parameters

---
 .../javascript/src/models/organization.ts     |  2 ++
 .../react/src/api/scim2/getMeOrganizations.ts | 32 +++++++++++++++++--
 .../Organization/OrganizationProvider.tsx     | 27 ++++++----------
 3 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/packages/javascript/src/models/organization.ts b/packages/javascript/src/models/organization.ts
index aa77361b8..9ceca8f8c 100644
--- a/packages/javascript/src/models/organization.ts
+++ b/packages/javascript/src/models/organization.ts
@@ -20,4 +20,6 @@ export interface Organization {
   id: string;
   name: string;
   orgHandle: string;
+  ref: string;
+  status: string;
 }
diff --git a/packages/react/src/api/scim2/getMeOrganizations.ts b/packages/react/src/api/scim2/getMeOrganizations.ts
index b7972c27e..f1ca101a6 100644
--- a/packages/react/src/api/scim2/getMeOrganizations.ts
+++ b/packages/react/src/api/scim2/getMeOrganizations.ts
@@ -23,13 +23,18 @@ const httpClient: HttpInstance = AsgardeoSPAClient.getInstance().httpRequest.bin
 /**
  * Retrieves the organizations associated with the current user.
  *
- * @param config - Configuration object containing baseUrl and optional request config.
+ * @param config - Configuration object containing baseUrl, optional query parameters, and request config.
  * @returns A promise that resolves with the organizations information.
  * @example
  * ```typescript
  * try {
  *   const organizations = await getMeOrganizations({
  *     baseUrl: "https://api.asgardeo.io/t/<ORGANIZATION>",
+ *     after: "",
+ *     before: "",
+ *     filter: "",
+ *     limit: 10,
+ *     recursive: false
  *   });
  *   console.log(organizations);
  * } catch (error) {
@@ -41,9 +46,21 @@ const httpClient: HttpInstance = AsgardeoSPAClient.getInstance().httpRequest.bin
  */
 const getMeOrganizations = async ({
   baseUrl,
+  after = '',
+  authorizedAppName = '',
+  before = '',
+  filter = '',
+  limit = 10,
+  recursive = false,
   ...requestConfig
 }: Partial<Request> & {
   baseUrl: string;
+  after?: string;
+  authorizedAppName?: string;
+  before?: string;
+  filter?: string;
+  limit?: number;
+  recursive?: boolean;
 }): Promise<Organization[]> => {
   if (!baseUrl) {
     throw new AsgardeoAPIError(
@@ -55,13 +72,22 @@ const getMeOrganizations = async ({
     );
   }
 
+  const queryParams = new URLSearchParams({
+    after,
+    authorizedAppName,
+    before,
+    filter,
+    limit: limit.toString(),
+    recursive: recursive.toString(),
+  });
+
   const response: any = await httpClient({
     headers: {
       Accept: 'application/json',
       'Content-Type': 'application/json',
     },
     method: 'GET',
-    url: `${baseUrl}/api/users/v1/me/organizations/root/descendants`,
+    url: `${baseUrl}/api/users/v1/me/organizations?${queryParams.toString()}`,
     ...requestConfig,
   } as HttpRequestConfig);
 
@@ -77,7 +103,7 @@ const getMeOrganizations = async ({
     );
   }
 
-  return response.data;
+  return response.data.organizations || [];
 };
 
 export default getMeOrganizations;
diff --git a/packages/react/src/contexts/Organization/OrganizationProvider.tsx b/packages/react/src/contexts/Organization/OrganizationProvider.tsx
index 71de3bf94..ae7ee5971 100644
--- a/packages/react/src/contexts/Organization/OrganizationProvider.tsx
+++ b/packages/react/src/contexts/Organization/OrganizationProvider.tsx
@@ -16,10 +16,9 @@
  * under the License.
  */
 
-import {Organization} from '@asgardeo/browser';
+import {AsgardeoRuntimeError, Organization} from '@asgardeo/browser';
 import {FC, PropsWithChildren, ReactElement, useCallback, useEffect, useMemo, useState} from 'react';
 import OrganizationContext, {OrganizationContextProps} from './OrganizationContext';
-import getMeOrganizations from '../../api/scim2/getMeOrganizations';
 import useAsgardeo from '../Asgardeo/useAsgardeo';
 
 /**
@@ -37,7 +36,7 @@ export interface OrganizationProviderProps {
   /**
    * Function to fetch organizations
    */
-  getOrganizations?: () => Promise<Organization[]>;
+  getOrganizations: () => Promise<Organization[]>;
   /**
    * Callback function called when an error occurs
    */
@@ -122,19 +121,18 @@ const OrganizationProvider: FC<PropsWithChildren<OrganizationProviderProps>> = (
       let organizationsData: Organization[];
 
       if (getOrganizations) {
-        // Use the provided getOrganizations function
         organizationsData = await getOrganizations();
       } else {
-        // Fallback to the direct API call
-        if (!baseUrl) {
-          throw new Error('Base URL is required when getOrganizations is not provided');
-        }
-        organizationsData = await getMeOrganizations({baseUrl});
+        throw new AsgardeoRuntimeError(
+          'getOrganizations function is required',
+          'OrganizationProvider-ValidationError-001',
+          'react',
+          'The getOrganizations function must be provided to fetch organization data.',
+        );
       }
 
       setOrganizations(organizationsData);
 
-      // Set current organization to the first one if none is set
       if (!currentOrganization && organizationsData.length > 0) {
         setCurrentOrganization(organizationsData[0]);
       }
@@ -180,14 +178,7 @@ const OrganizationProvider: FC<PropsWithChildren<OrganizationProviderProps>> = (
     () => ({
       currentOrganization,
       error,
-      getOrganizations:
-        getOrganizations ||
-        (async (): Promise<Organization[]> => {
-          if (!baseUrl) {
-            throw new Error('Base URL is required when getOrganizations is not provided');
-          }
-          return getMeOrganizations({baseUrl});
-        }),
+      getOrganizations,
       isLoading,
       organizations,
       revalidateOrganizations,

From 8c67848f59568eed96b55abd8f74d652dbcdae52 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 23 Jun 2025 14:47:42 +0530
Subject: [PATCH 65/96] chore: replace IdTokenPayload with IdToken across the
 codebase

- Updated all instances of IdTokenPayload to IdToken in various files including client, authentication helper, and token models.
- Modified related methods to ensure compatibility with the new IdToken type.
- Enhanced the OrganizationProvider and AsgardeoProvider to manage current organization state.
- Improved utility functions for extracting claims from the IdToken.
- Updated tests to reflect changes in the IdToken structure and ensure proper functionality.
---
 packages/browser/src/__legacy__/client.ts     |  4 +-
 .../__legacy__/clients/main-thread-client.ts  |  4 +-
 .../__legacy__/clients/web-worker-client.ts   | 10 +--
 .../helpers/authentication-helper.ts          |  6 +-
 .../browser/src/__legacy__/models/client.ts   |  8 +-
 .../src/__legacy__/models/web-worker.ts       |  6 +-
 .../src/__legacy__/worker/worker-core.ts      |  6 +-
 packages/express/src/__legacy__/client.ts     |  9 +--
 .../src/AsgardeoJavaScriptClient.ts           |  2 +
 packages/javascript/src/IsomorphicCrypto.ts   |  6 +-
 packages/javascript/src/__legacy__/client.ts  | 11 +--
 .../helpers/authentication-helper.ts          |  4 +-
 packages/javascript/src/index.ts              |  2 +-
 packages/javascript/src/models/client.ts      |  7 ++
 .../javascript/src/models/organization.ts     |  4 +-
 packages/javascript/src/models/token.ts       | 79 +++++++++++--------
 ...ractTenantDomainFromIdTokenPayload.test.ts | 10 +--
 .../extractUserClaimsFromIdToken.test.ts      | 14 ++--
 .../extractTenantDomainFromIdTokenPayload.ts  |  4 +-
 .../src/utils/extractUserClaimsFromIdToken.ts |  8 +-
 packages/node/src/__legacy__/client.ts        |  6 +-
 .../src/__legacy__/core/authentication.ts     |  9 +--
 .../runtime/composables/asgardeo/useAuth.ts   |  6 +-
 packages/nuxt/src/runtime/types.ts            |  4 +-
 packages/react/src/AsgardeoReactClient.ts     | 11 +++
 packages/react/src/__temp__/api.ts            |  6 +-
 packages/react/src/__temp__/models.ts         |  6 +-
 .../react/src/api/scim2/getMeOrganizations.ts | 20 +++--
 .../contexts/Asgardeo/AsgardeoProvider.tsx    |  9 ++-
 .../Organization/OrganizationProvider.tsx     | 10 +--
 packages/vue/src/auth-api.ts                  |  6 +-
 packages/vue/src/plugins/AsgardeoPlugin.ts    |  4 +-
 packages/vue/src/tests/AsgardeoPlugin.test.ts |  6 +-
 packages/vue/src/tests/auth-api.test.ts       |  6 +-
 packages/vue/src/tests/useAsgardeo.test.ts    |  4 +-
 packages/vue/src/types.ts                     |  9 +--
 36 files changed, 177 insertions(+), 149 deletions(-)

diff --git a/packages/browser/src/__legacy__/client.ts b/packages/browser/src/__legacy__/client.ts
index 11190d60a..f25e14dd0 100755
--- a/packages/browser/src/__legacy__/client.ts
+++ b/packages/browser/src/__legacy__/client.ts
@@ -23,7 +23,7 @@ import {
   IsomorphicCrypto,
   TokenExchangeRequestConfig,
   StorageManager,
-  IdTokenPayload,
+  IdToken,
   OIDCEndpoints,
   User,
 } from '@asgardeo/javascript';
@@ -737,7 +737,7 @@ export class AsgardeoSPAClient {
    *
    * @preserve
    */
-  public async getDecodedIdToken(): Promise<IdTokenPayload | undefined> {
+  public async getDecodedIdToken(): Promise<IdToken | undefined> {
     await this._validateMethod();
 
     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 00a198689..e5cc9d201 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -22,7 +22,7 @@ import {
   User,
   IsomorphicCrypto,
   StorageManager,
-  IdTokenPayload,
+  IdToken,
   ExtendedAuthorizeRequestUrlParams,
   OIDCEndpoints,
   OIDCRequestConstants,
@@ -368,7 +368,7 @@ export const MainThreadClient = async (
 
   const getUser = async (): Promise<User> => _authenticationHelper.getUser();
 
-  const getDecodedIdToken = async (): Promise<IdTokenPayload> => _authenticationHelper.getDecodedIdToken();
+  const getDecodedIdToken = async (): Promise<IdToken> => _authenticationHelper.getDecodedIdToken();
 
   const getCrypto = async (): Promise<IsomorphicCrypto> => _authenticationHelper.getCrypto();
 
diff --git a/packages/browser/src/__legacy__/clients/web-worker-client.ts b/packages/browser/src/__legacy__/clients/web-worker-client.ts
index 84444cbd3..43ff679f7 100755
--- a/packages/browser/src/__legacy__/clients/web-worker-client.ts
+++ b/packages/browser/src/__legacy__/clients/web-worker-client.ts
@@ -23,7 +23,7 @@ import {
   User,
   IsomorphicCrypto,
   TokenExchangeRequestConfig,
-  IdTokenPayload,
+  IdToken,
   ExtendedAuthorizeRequestUrlParams,
   OIDCEndpoints,
   OIDCRequestConstants,
@@ -706,12 +706,12 @@ export const WebWorkerClient = async (
       });
   };
 
-  const getDecodedIdToken = (): Promise<IdTokenPayload> => {
+  const getDecodedIdToken = (): Promise<IdToken> => {
     const message: Message<null> = {
       type: GET_DECODED_ID_TOKEN,
     };
 
-    return communicate<null, IdTokenPayload>(message)
+    return communicate<null, IdToken>(message)
       .then(response => {
         return Promise.resolve(response);
       })
@@ -720,12 +720,12 @@ export const WebWorkerClient = async (
       });
   };
 
-  const getDecodedIDPIDToken = (): Promise<IdTokenPayload> => {
+  const getDecodedIDPIDToken = (): Promise<IdToken> => {
     const message: Message<null> = {
       type: GET_DECODED_IDP_ID_TOKEN,
     };
 
-    return communicate<null, IdTokenPayload>(message)
+    return communicate<null, IdToken>(message)
       .then(response => {
         return Promise.resolve(response);
       })
diff --git a/packages/browser/src/__legacy__/helpers/authentication-helper.ts b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
index 0763ba273..f04d692f7 100644
--- a/packages/browser/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/browser/src/__legacy__/helpers/authentication-helper.ts
@@ -24,7 +24,7 @@ import {
   IsomorphicCrypto,
   TokenExchangeRequestConfig,
   StorageManager,
-  IdTokenPayload,
+  IdToken,
   ExtendedAuthorizeRequestUrlParams,
   OIDCEndpoints,
   TokenResponse,
@@ -659,11 +659,11 @@ export class AuthenticationHelper<T extends MainThreadClientConfig | WebWorkerCl
     return this._authenticationClient.getUser();
   }
 
-  public async getDecodedIdToken(): Promise<IdTokenPayload> {
+  public async getDecodedIdToken(): Promise<IdToken> {
     return this._authenticationClient.getDecodedIdToken();
   }
 
-  public async getDecodedIDPIDToken(): Promise<IdTokenPayload> {
+  public async getDecodedIDPIDToken(): Promise<IdToken> {
     return this._authenticationClient.getDecodedIdToken();
   }
 
diff --git a/packages/browser/src/__legacy__/models/client.ts b/packages/browser/src/__legacy__/models/client.ts
index 3eac33889..1a766886e 100755
--- a/packages/browser/src/__legacy__/models/client.ts
+++ b/packages/browser/src/__legacy__/models/client.ts
@@ -22,7 +22,7 @@ import {
   IsomorphicCrypto,
   TokenExchangeRequestConfig,
   StorageManager,
-  IdTokenPayload,
+  IdToken,
   OIDCEndpoints,
 } from '@asgardeo/javascript';
 import {
@@ -59,7 +59,7 @@ export interface MainThreadClientInterface {
   refreshAccessToken(): Promise<User>;
   revokeAccessToken(): Promise<boolean>;
   getUser(): Promise<User>;
-  getDecodedIdToken(): Promise<IdTokenPayload>;
+  getDecodedIdToken(): Promise<IdToken>;
   getCrypto(): Promise<IsomorphicCrypto>;
   getConfigData(): Promise<AuthClientConfig<MainThreadClientConfig>>;
   getIdToken(): Promise<string>;
@@ -96,8 +96,8 @@ export interface WebWorkerClientInterface {
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   getUser(): Promise<User>;
   getConfigData(): Promise<AuthClientConfig<WebWorkerClientConfig>>;
-  getDecodedIdToken(): Promise<IdTokenPayload>;
-  getDecodedIDPIDToken(): Promise<IdTokenPayload>;
+  getDecodedIdToken(): Promise<IdToken>;
+  getDecodedIDPIDToken(): Promise<IdToken>;
   getCrypto(): Promise<IsomorphicCrypto>;
   getIdToken(): Promise<string>;
   isSignedIn(): Promise<boolean>;
diff --git a/packages/browser/src/__legacy__/models/web-worker.ts b/packages/browser/src/__legacy__/models/web-worker.ts
index 7abb33b61..97c5c1c6d 100755
--- a/packages/browser/src/__legacy__/models/web-worker.ts
+++ b/packages/browser/src/__legacy__/models/web-worker.ts
@@ -22,7 +22,7 @@ import {
   User,
   IsomorphicCrypto,
   TokenExchangeRequestConfig,
-  IdTokenPayload,
+  IdToken,
   OIDCEndpoints,
 } from '@asgardeo/javascript';
 import {HttpRequestConfig, HttpResponse, Message} from '.';
@@ -53,8 +53,8 @@ export interface WebWorkerCoreInterface {
   refreshAccessToken(): Promise<User>;
   revokeAccessToken(): Promise<boolean>;
   getUser(): Promise<User>;
-  getDecodedIdToken(): Promise<IdTokenPayload>;
-  getDecodedIDPIDToken(): Promise<IdTokenPayload>;
+  getDecodedIdToken(): Promise<IdToken>;
+  getDecodedIDPIDToken(): Promise<IdToken>;
   getCrypto(): Promise<IsomorphicCrypto>;
   getIdToken(): Promise<string>;
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
diff --git a/packages/browser/src/__legacy__/worker/worker-core.ts b/packages/browser/src/__legacy__/worker/worker-core.ts
index ec1ddc120..2444e4e6a 100755
--- a/packages/browser/src/__legacy__/worker/worker-core.ts
+++ b/packages/browser/src/__legacy__/worker/worker-core.ts
@@ -23,7 +23,7 @@ import {
   User,
   IsomorphicCrypto,
   TokenExchangeRequestConfig,
-  IdTokenPayload,
+  IdToken,
   OIDCEndpoints,
   OIDCRequestConstants,
   SessionData,
@@ -166,7 +166,7 @@ export const WebWorkerCore = async (
     return _authenticationHelper.getUser();
   };
 
-  const getDecodedIdToken = async (): Promise<IdTokenPayload> => {
+  const getDecodedIdToken = async (): Promise<IdToken> => {
     return _authenticationHelper.getDecodedIdToken();
   };
 
@@ -174,7 +174,7 @@ export const WebWorkerCore = async (
     return _authenticationHelper.getCrypto();
   };
 
-  const getDecodedIDPIDToken = async (): Promise<IdTokenPayload> => {
+  const getDecodedIDPIDToken = async (): Promise<IdToken> => {
     return _authenticationHelper.getDecodedIDPIDToken();
   };
 
diff --git a/packages/express/src/__legacy__/client.ts b/packages/express/src/__legacy__/client.ts
index ebd797022..fc196dace 100644
--- a/packages/express/src/__legacy__/client.ts
+++ b/packages/express/src/__legacy__/client.ts
@@ -24,7 +24,7 @@ import {
   Storage,
   User,
   OIDCEndpoints,
-  IdTokenPayload,
+  IdToken,
   TokenExchangeRequestConfig,
   AsgardeoAuthException,
   Logger,
@@ -173,7 +173,7 @@ export class AsgardeoExpressClient {
     return this._authClient.getOpenIDProviderEndpoints();
   }
 
-  public async getDecodedIdToken(userId?: string): Promise<IdTokenPayload> {
+  public async getDecodedIdToken(userId?: string): Promise<IdToken> {
     return this._authClient.getDecodedIdToken(userId);
   }
 
@@ -181,10 +181,7 @@ export class AsgardeoExpressClient {
     return this._authClient.getAccessToken(userId);
   }
 
-  public async exchangeToken(
-    config: TokenExchangeRequestConfig,
-    userId?: string,
-  ): Promise<TokenResponse | Response> {
+  public async exchangeToken(config: TokenExchangeRequestConfig, userId?: string): Promise<TokenResponse | Response> {
     return this._authClient.exchangeToken(config, userId);
   }
 
diff --git a/packages/javascript/src/AsgardeoJavaScriptClient.ts b/packages/javascript/src/AsgardeoJavaScriptClient.ts
index c9dccdb9d..fd4169a4d 100644
--- a/packages/javascript/src/AsgardeoJavaScriptClient.ts
+++ b/packages/javascript/src/AsgardeoJavaScriptClient.ts
@@ -35,6 +35,8 @@ abstract class AsgardeoJavaScriptClient<T = Config> implements AsgardeoClient<T>
 
   abstract getOrganizations(): Promise<Organization[]>;
 
+  abstract getCurrentOrganization(): Promise<Organization | null>;
+
   abstract getUserProfile(): Promise<UserProfile>;
 
   abstract isLoading(): boolean;
diff --git a/packages/javascript/src/IsomorphicCrypto.ts b/packages/javascript/src/IsomorphicCrypto.ts
index 09cfc567b..2ff20aed5 100644
--- a/packages/javascript/src/IsomorphicCrypto.ts
+++ b/packages/javascript/src/IsomorphicCrypto.ts
@@ -18,7 +18,7 @@
 
 import {AsgardeoAuthException} from './errors/exception';
 import {Crypto, JWKInterface} from './models/crypto';
-import {IdTokenPayload} from './models/token';
+import {IdToken} from './models/token';
 import TokenConstants from './constants/TokenConstants';
 
 export class IsomorphicCrypto<T = any> {
@@ -136,10 +136,10 @@ export class IsomorphicCrypto<T = any> {
    *
    * @throws
    */
-  public decodeIdToken(idToken: string): IdTokenPayload {
+  public decodeIdToken(idToken: string): IdToken {
     try {
       const utf8String: string = this._cryptoUtils.base64URLDecode(idToken?.split('.')[1]);
-      const payload: IdTokenPayload = JSON.parse(utf8String);
+      const payload: IdToken = JSON.parse(utf8String);
 
       return payload;
     } catch (error: any) {
diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 3de479fd0..6205f6bb0 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -20,7 +20,7 @@ import StorageManager from '../StorageManager';
 import {AuthClientConfig, StrictAuthClientConfig} from './models';
 import {ExtendedAuthorizeRequestUrlParams} from '../models/oauth-request';
 import {Crypto} from '../models/crypto';
-import {TokenResponse, IdTokenPayload, TokenExchangeRequestConfig} from '../models/token';
+import {TokenResponse, IdToken, TokenExchangeRequestConfig} from '../models/token';
 import {OIDCEndpoints} from '../models/oidc-endpoints';
 import {Storage} from '../models/store';
 import ScopeConstants from '../constants/ScopeConstants';
@@ -582,9 +582,9 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public async getDecodedIdToken(userId?: string): Promise<IdTokenPayload> {
+  public async getDecodedIdToken(userId?: string): Promise<IdToken> {
     const idToken: string = (await this._storageManager.getSessionData(userId)).id_token;
-    const payload: IdTokenPayload = this._cryptoHelper.decodeIdToken(idToken);
+    const payload: IdToken = this._cryptoHelper.decodeIdToken(idToken);
 
     return payload;
   }
@@ -891,10 +891,7 @@ export class AsgardeoAuthClient<T> {
    *
    * @preserve
    */
-  public async exchangeToken(
-    config: TokenExchangeRequestConfig,
-    userId?: string,
-  ): Promise<TokenResponse | Response> {
+  public async exchangeToken(config: TokenExchangeRequestConfig, userId?: string): Promise<TokenResponse | Response> {
     const oidcProviderMetadata: OIDCDiscoveryApiResponse = await this._oidcProviderMetaData();
     const configData: StrictAuthClientConfig = await this._config();
 
diff --git a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
index b3b2283f1..9911b7cef 100644
--- a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
@@ -24,7 +24,7 @@ import {User} from '../../models/user';
 import {SessionData} from '../../models/session';
 import {JWKInterface} from '../../models/crypto';
 import {TokenResponse, AccessTokenApiResponse} from '../../models/token';
-import {IdTokenPayload} from '../../models/token';
+import {IdToken} from '../../models/token';
 import PKCEConstants from '../../constants/PKCEConstants';
 import extractTenantDomainFromIdTokenPayload from '../../utils/extractTenantDomainFromIdTokenPayload';
 import extractUserClaimsFromIdToken from '../../utils/extractUserClaimsFromIdToken';
@@ -207,7 +207,7 @@ export class AuthenticationHelper<T> {
   }
 
   public getAuthenticatedUserInfo(idToken: string): User {
-    const payload: IdTokenPayload = this._cryptoHelper.decodeIdToken(idToken);
+    const payload: IdToken = this._cryptoHelper.decodeIdToken(idToken);
     const username: string = payload?.['username'] ?? '';
     const givenName: string = payload?.['given_name'] ?? '';
     const familyName: string = payload?.['family_name'] ?? '';
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index e621339b1..73a4910af 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -62,7 +62,7 @@ export {
 export {FlowMode} from './models/flow';
 export {AsgardeoClient, SignInOptions, SignOutOptions, SignUpOptions} from './models/client';
 export {BaseConfig, Config, Preferences, ThemePreferences, I18nPreferences, WithPreferences} from './models/config';
-export {TokenResponse, IdTokenPayload, TokenExchangeRequestConfig} from './models/token';
+export {TokenResponse, IdToken, TokenExchangeRequestConfig} from './models/token';
 export {Crypto, JWKInterface} from './models/crypto';
 export {OAuthResponseMode} from './models/oauth-response';
 export {
diff --git a/packages/javascript/src/models/client.ts b/packages/javascript/src/models/client.ts
index 5201e5976..2871039ab 100644
--- a/packages/javascript/src/models/client.ts
+++ b/packages/javascript/src/models/client.ts
@@ -42,6 +42,13 @@ export interface AsgardeoClient<T> {
    */
   getOrganizations(): Promise<Organization[]>;
 
+  /**
+   * Gets the current organization of the user.
+   *
+   * @returns The current organization if available, otherwise null.
+   */
+  getCurrentOrganization(): Promise<Organization | null>;
+
   /**
    * Gets user information from the session.
    *
diff --git a/packages/javascript/src/models/organization.ts b/packages/javascript/src/models/organization.ts
index 9ceca8f8c..b19a4ac99 100644
--- a/packages/javascript/src/models/organization.ts
+++ b/packages/javascript/src/models/organization.ts
@@ -20,6 +20,6 @@ export interface Organization {
   id: string;
   name: string;
   orgHandle: string;
-  ref: string;
-  status: string;
+  ref?: string;
+  status?: string;
 }
diff --git a/packages/javascript/src/models/token.ts b/packages/javascript/src/models/token.ts
index 5b95f4253..a77038f35 100644
--- a/packages/javascript/src/models/token.ts
+++ b/packages/javascript/src/models/token.ts
@@ -33,11 +33,11 @@ export interface TokenResponse {
   accessToken: string;
 
   /**
-   * JSON Web Token (JWT) containing user identity information.
-   * This token can be decoded to access user claims and metadata
-   * without additional server requests.
+   * Unix timestamp (in seconds) when the token was created.
+   * Used in combination with expiresIn to determine when
+   * the token needs to be refreshed.
    */
-  idToken: string;
+  createdAt: number;
 
   /**
    * Duration in seconds until the access token expires.
@@ -47,11 +47,11 @@ export interface TokenResponse {
   expiresIn: string;
 
   /**
-   * Space-separated list of OAuth scopes granted to the application.
-   * These scopes determine what resources and actions the application
-   * has permission to access.
+   * JSON Web Token (JWT) containing user identity information.
+   * This token can be decoded to access user claims and metadata
+   * without additional server requests.
    */
-  scope: string;
+  idToken: string;
 
   /**
    * Token used to obtain new access tokens without re-authentication.
@@ -60,19 +60,19 @@ export interface TokenResponse {
    */
   refreshToken: string;
 
+  /**
+   * Space-separated list of OAuth scopes granted to the application.
+   * These scopes determine what resources and actions the application
+   * has permission to access.
+   */
+  scope: string;
+
   /**
    * The type of token issued, typically "Bearer".
    * This indicates how the token should be used in
    * API request Authorization headers.
    */
   tokenType: string;
-
-  /**
-   * Unix timestamp (in seconds) when the token was created.
-   * Used in combination with expiresIn to determine when
-   * the token needs to be refreshed.
-   */
-  createdAt: number;
 }
 
 /**
@@ -91,13 +91,6 @@ export interface AccessTokenApiResponse {
    */
   access_token: string;
 
-  /**
-   * Raw expiration time in seconds.
-   * Indicates how long the access token will be valid
-   * from the time it was issued.
-   */
-  expires_in: string;
-
   /**
    * Server-provided creation timestamp in Unix seconds.
    * Used to track when the token was originally issued
@@ -105,6 +98,13 @@ export interface AccessTokenApiResponse {
    */
   created_at: number;
 
+  /**
+   * Raw expiration time in seconds.
+   * Indicates how long the access token will be valid
+   * from the time it was issued.
+   */
+  expires_in: string;
+
   /**
    * Raw ID token string containing encoded user information.
    * This JWT can be decoded to access standardized claims
@@ -137,16 +137,16 @@ export interface AccessTokenApiResponse {
 /**
  * Interface for the standard (required) claims of an ID Token payload.
  */
-export interface IdTokenPayloadStandardClaims {
+export interface KnownIdToken {
   /**
    * The audience for which this token is intended.
    */
   aud: string | string[];
 
   /**
-   * The unique identifier of the user to whom the ID token belongs.
+   * The email of the user.
    */
-  sub: string;
+  email?: string;
 
   /**
    * The issuer identifier for the issuer of the response.
@@ -154,15 +154,30 @@ export interface IdTokenPayloadStandardClaims {
   iss: string;
 
   /**
-   * The email of the user.
+   * The unique human readable slug of the organization to which the user belongs.
    */
-  email?: string;
+  org_handle?: string;
+
+  /**
+   * The unique identifier of the organization to which the user belongs.
+   */
+  org_id?: string;
+
+  /**
+   * The human readable name of the organization to which the user belongs.
+   */
+  org_name?: string;
 
   /**
    * The username the user prefers to be called.
    */
   preferred_username?: string;
 
+  /**
+   * The unique identifier of the user to whom the ID token belongs.
+   */
+  sub: string;
+
   /**
    * The tenant domain of the user.
    */
@@ -172,7 +187,7 @@ export interface IdTokenPayloadStandardClaims {
 /**
  * Interface for ID Token payload including custom claims.
  */
-export interface IdTokenPayload extends IdTokenPayloadStandardClaims {
+export interface IdToken extends KnownIdToken {
   /**
    * Other custom claims.
    */
@@ -180,11 +195,11 @@ export interface IdTokenPayload extends IdTokenPayloadStandardClaims {
 }
 
 export interface TokenExchangeRequestConfig {
-  id: string;
-  data: any;
-  signInRequired: boolean;
   attachToken: boolean;
+  data: any;
+  id: string;
   returnsSession: boolean;
-  tokenEndpoint?: string;
   shouldReplayAfterRefresh?: boolean;
+  signInRequired: boolean;
+  tokenEndpoint?: string;
 }
diff --git a/packages/javascript/src/utils/__tests__/extractTenantDomainFromIdTokenPayload.test.ts b/packages/javascript/src/utils/__tests__/extractTenantDomainFromIdTokenPayload.test.ts
index ce0096da1..b2a0e6a01 100644
--- a/packages/javascript/src/utils/__tests__/extractTenantDomainFromIdTokenPayload.test.ts
+++ b/packages/javascript/src/utils/__tests__/extractTenantDomainFromIdTokenPayload.test.ts
@@ -18,11 +18,11 @@
 
 import {describe, expect, it} from 'vitest';
 import extractTenantDomainFromIdTokenPayload from '../extractTenantDomainFromIdTokenPayload';
-import {IdTokenPayload} from '../../models/id-token';
+import {IdToken} from '../../models/id-token';
 
 describe('extractTenantDomainFromIdTokenPayload', (): void => {
   it('should extract tenant domain from sub claim with default separator', (): void => {
-    const payload: IdTokenPayload = {
+    const payload: IdToken = {
       sub: 'user@foo@tenant.com',
     };
 
@@ -30,7 +30,7 @@ describe('extractTenantDomainFromIdTokenPayload', (): void => {
   });
 
   it('should extract tenant domain with custom separator', (): void => {
-    const payload: IdTokenPayload = {
+    const payload: IdToken = {
       sub: 'user#foo#custom-tenant',
     };
 
@@ -38,13 +38,13 @@ describe('extractTenantDomainFromIdTokenPayload', (): void => {
   });
 
   it('should return empty string when sub claim is missing', (): void => {
-    const payload = {} as IdTokenPayload;
+    const payload = {} as IdToken;
 
     expect(extractTenantDomainFromIdTokenPayload(payload)).toBe('');
   });
 
   it('should return empty string when sub claim has insufficient parts', (): void => {
-    const payload: IdTokenPayload = {
+    const payload: IdToken = {
       sub: 'user@tenant',
     };
 
diff --git a/packages/javascript/src/utils/__tests__/extractUserClaimsFromIdToken.test.ts b/packages/javascript/src/utils/__tests__/extractUserClaimsFromIdToken.test.ts
index ac60be223..23e75d4a9 100644
--- a/packages/javascript/src/utils/__tests__/extractUserClaimsFromIdToken.test.ts
+++ b/packages/javascript/src/utils/__tests__/extractUserClaimsFromIdToken.test.ts
@@ -18,11 +18,11 @@
 
 import {describe, expect, it} from 'vitest';
 import extractUserClaimsFromIdToken from '../extractUserClaimsFromIdToken';
-import {IdTokenPayload} from '../../models/id-token';
+import {IdToken} from '../../models/id-token';
 
 describe('extractUserClaimsFromIdToken', (): void => {
   it('should remove protocol claims and keep user claims', (): void => {
-    const payload: IdTokenPayload = {
+    const payload: IdToken = {
       iss: 'https://example.com',
       aud: 'client_id',
       exp: 1712345678,
@@ -46,17 +46,17 @@ describe('extractUserClaimsFromIdToken', (): void => {
   });
 
   it('should handle empty payload', (): void => {
-    const payload = {} as IdTokenPayload;
+    const payload = {} as IdToken;
 
     expect(extractUserClaimsFromIdToken(payload)).toEqual({});
   });
 
   it('should convert snake_case to camelCase', (): void => {
-    const payload: IdTokenPayload = {
+    const payload: IdToken = {
       phone_number: '+1234567890',
       custom_claim_value: 'test',
       normalClaim: 'value',
-    } as IdTokenPayload;
+    } as IdToken;
 
     const expected: {
       phoneNumber: string;
@@ -72,7 +72,7 @@ describe('extractUserClaimsFromIdToken', (): void => {
   });
 
   it('should remove all protocol claims', (): void => {
-    const payload: IdTokenPayload = {
+    const payload: IdToken = {
       iss: 'https://example.com',
       aud: 'client_id',
       exp: 1712345678,
@@ -88,7 +88,7 @@ describe('extractUserClaimsFromIdToken', (): void => {
       isk: 'key1',
       sid: 'session1',
       custom_claim: 'value',
-    } as IdTokenPayload;
+    } as IdToken;
 
     expect(extractUserClaimsFromIdToken(payload)).toEqual({
       customClaim: 'value',
diff --git a/packages/javascript/src/utils/extractTenantDomainFromIdTokenPayload.ts b/packages/javascript/src/utils/extractTenantDomainFromIdTokenPayload.ts
index accc4f3ff..8f760c24f 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/token';
+import {IdToken} from '../models/token';
 
 /**
  * Extracts the tenant domain from the ID token payload.
@@ -29,7 +29,7 @@ import {IdTokenPayload} from '../models/token';
  *
  * Consider extracting the tenant domain using a dedicated claim (e.g., `tenant_domain`) when available.
  */
-const extractTenantDomainFromIdTokenPayload = (payload: IdTokenPayload, subjectSeparator: string = '@'): string => {
+const extractTenantDomainFromIdTokenPayload = (payload: IdToken, subjectSeparator: string = '@'): string => {
   const uid: string = payload.sub;
 
   if (!uid) return '';
diff --git a/packages/javascript/src/utils/extractUserClaimsFromIdToken.ts b/packages/javascript/src/utils/extractUserClaimsFromIdToken.ts
index 5927f051a..be9edcfcb 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/token';
+import {IdToken} from '../models/token';
 
 /**
  * Removes standard protocol-specific claims from the ID token payload
@@ -42,8 +42,8 @@ import {IdTokenPayload} from '../models/token';
  * // }
  * ```
  */
-const extractUserClaimsFromIdToken = (payload: IdTokenPayload): Record<string, unknown> => {
-  const filteredPayload: Partial<IdTokenPayload> = {...payload};
+const extractUserClaimsFromIdToken = (payload: IdToken): Record<string, unknown> => {
+  const filteredPayload: Partial<IdToken> = {...payload};
 
   const protocolClaims = [
     'iss',
@@ -65,7 +65,7 @@ const extractUserClaimsFromIdToken = (payload: IdTokenPayload): Record<string, u
   ];
 
   protocolClaims.forEach(claim => {
-    delete filteredPayload[claim as keyof IdTokenPayload];
+    delete filteredPayload[claim as keyof IdToken];
   });
 
   const userClaims: Record<string, unknown> = {};
diff --git a/packages/node/src/__legacy__/client.ts b/packages/node/src/__legacy__/client.ts
index eb76cf02c..98a1d3d2c 100644
--- a/packages/node/src/__legacy__/client.ts
+++ b/packages/node/src/__legacy__/client.ts
@@ -20,7 +20,7 @@ import {
   AuthClientConfig,
   TokenExchangeRequestConfig,
   StorageManager,
-  IdTokenPayload,
+  IdToken,
   OIDCEndpoints,
   Storage,
   TokenResponse,
@@ -220,7 +220,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<IdTokenPayload>} -A Promise that resolves with
+   * @return {Promise<IdToken>} -A Promise that resolves with
    * an object containing the decoded ID token payload.
    *
    * @example
@@ -233,7 +233,7 @@ export class AsgardeoNodeClient<T> {
    * @memberof AsgardeoNodeClient
    *
    */
-  public async getDecodedIdToken(userId?: string): Promise<IdTokenPayload> {
+  public async getDecodedIdToken(userId?: string): Promise<IdToken> {
     return this._authCore.getDecodedIdToken(userId);
   }
 
diff --git a/packages/node/src/__legacy__/core/authentication.ts b/packages/node/src/__legacy__/core/authentication.ts
index f4be26a7c..07987a5f7 100644
--- a/packages/node/src/__legacy__/core/authentication.ts
+++ b/packages/node/src/__legacy__/core/authentication.ts
@@ -23,7 +23,7 @@ import {
   Crypto,
   TokenExchangeRequestConfig,
   StorageManager,
-  IdTokenPayload,
+  IdToken,
   OIDCEndpoints,
   SessionData,
   Storage,
@@ -219,7 +219,7 @@ export class AsgardeoNodeCore<T> {
     return this._auth.getOpenIDProviderEndpoints() as Promise<OIDCEndpoints>;
   }
 
-  public async getDecodedIdToken(userId?: string): Promise<IdTokenPayload> {
+  public async getDecodedIdToken(userId?: string): Promise<IdToken> {
     return this._auth.getDecodedIdToken(userId);
   }
 
@@ -227,10 +227,7 @@ export class AsgardeoNodeCore<T> {
     return this._auth.getAccessToken(userId);
   }
 
-  public async exchangeToken(
-    config: TokenExchangeRequestConfig,
-    userId?: string,
-  ): Promise<TokenResponse | Response> {
+  public async exchangeToken(config: TokenExchangeRequestConfig, userId?: string): Promise<TokenResponse | Response> {
     return this._auth.exchangeToken(config, userId);
   }
 
diff --git a/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts b/packages/nuxt/src/runtime/composables/asgardeo/useAuth.ts
index 456377ebd..822e20645 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 {User, StorageManager, IdTokenPayload, OIDCEndpoints} from '@asgardeo/node';
+import type {User, StorageManager, IdToken, OIDCEndpoints} from '@asgardeo/node';
 import type {AuthInterface} from '../../types';
 import {navigateTo} from '#imports';
 
@@ -98,9 +98,9 @@ export const useAuth = (): AuthInterface => {
    * which expects a valid session cookie. If the session is valid, the function
    * returns the decoded ID token payload.
    *
-   * @returns {Promise<IdTokenPayload | null>} - A promise that resolves to the decoded ID token payload if available, or null if not.
+   * @returns {Promise<IdToken | 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<IdToken | null> => {
     try {
       const response: Response = await fetch(`/api/auth/get-decoded-id-token`, {
         credentials: 'include',
diff --git a/packages/nuxt/src/runtime/types.ts b/packages/nuxt/src/runtime/types.ts
index 0300cf3d8..f82e0613b 100644
--- a/packages/nuxt/src/runtime/types.ts
+++ b/packages/nuxt/src/runtime/types.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import type {User, StorageManager, IdTokenPayload, OIDCEndpoints} from '@asgardeo/node';
+import type {User, StorageManager, IdToken, OIDCEndpoints} from '@asgardeo/node';
 
 export interface ModuleOptions {
   /**
@@ -61,7 +61,7 @@ export interface AuthInterface {
   getAccessToken: () => Promise<string | null>;
   getUser: () => Promise<User | null>;
   getStorageManager: () => Promise<StorageManager<any> | null>;
-  getDecodedIdToken: () => Promise<IdTokenPayload | null>;
+  getDecodedIdToken: () => Promise<IdToken | null>;
   getIdToken: () => Promise<string | null>;
   getOpenIDProviderEndpoints: () => Promise<OIDCEndpoints | null>;
   isSignedIn: () => Promise<boolean>;
diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index c44c47208..cd65c0c33 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -33,6 +33,7 @@ import {
   EmbeddedSignInFlowHandleRequestPayload,
   executeEmbeddedSignInFlow,
   Organization,
+  IdToken,
 } from '@asgardeo/browser';
 import AuthAPI from './__temp__/api';
 import getMeOrganizations from './api/scim2/getMeOrganizations';
@@ -118,6 +119,16 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
     }
   }
 
+  override async getCurrentOrganization(): Promise<Organization | null> {
+    const idToken: IdToken = await this.asgardeo.getDecodedIdToken();
+
+    return {
+      orgHandle: idToken?.org_handle,
+      name: idToken?.org_name,
+      id: idToken?.org_id,
+    };
+  }
+
   override isLoading(): boolean {
     return this.asgardeo.isLoading();
   }
diff --git a/packages/react/src/__temp__/api.ts b/packages/react/src/__temp__/api.ts
index 03f2280e0..8db768dc5 100644
--- a/packages/react/src/__temp__/api.ts
+++ b/packages/react/src/__temp__/api.ts
@@ -21,7 +21,7 @@ import {
   AuthClientConfig,
   User,
   LegacyConfig as Config,
-  IdTokenPayload,
+  IdToken,
   Hooks,
   HttpClientInstance,
   HttpRequestConfig,
@@ -296,7 +296,7 @@ class AuthAPI {
    * @return {Promise<DecodedIDTokenPayloadInterface>} - A Promise that resolves with
    * the decoded payload of the id token.
    */
-  public async getDecodedIdToken(): Promise<IdTokenPayload> {
+  public async getDecodedIdToken(): Promise<IdToken> {
     return this._client.getDecodedIdToken();
   }
 
@@ -306,7 +306,7 @@ class AuthAPI {
    * @return {Promise<DecodedIDTokenPayloadInterface>} - A Promise that resolves with
    * the decoded payload of the idp id token.
    */
-  public async getDecodedIDPIDToken(): Promise<IdTokenPayload> {
+  public async getDecodedIDPIDToken(): Promise<IdToken> {
     return this._client.getDecodedIdToken();
   }
 
diff --git a/packages/react/src/__temp__/models.ts b/packages/react/src/__temp__/models.ts
index 4ff057e71..fc500cf45 100644
--- a/packages/react/src/__temp__/models.ts
+++ b/packages/react/src/__temp__/models.ts
@@ -22,7 +22,7 @@ import {
   AuthSPAClientConfig,
   Config,
   TokenExchangeRequestConfig,
-  IdTokenPayload,
+  IdToken,
   Hooks,
   HttpClientInstance,
   HttpRequestConfig,
@@ -95,8 +95,8 @@ export interface AuthContextInterface {
   revokeAccessToken(): Promise<boolean>;
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
   getHttpClient(): Promise<HttpClientInstance>;
-  getDecodedIDPIDToken(): Promise<IdTokenPayload>;
-  getDecodedIdToken(): Promise<IdTokenPayload>;
+  getDecodedIDPIDToken(): Promise<IdToken>;
+  getDecodedIdToken(): Promise<IdToken>;
   getIdToken(): Promise<string>;
   getAccessToken(): Promise<string>;
   refreshAccessToken(): Promise<User>;
diff --git a/packages/react/src/api/scim2/getMeOrganizations.ts b/packages/react/src/api/scim2/getMeOrganizations.ts
index f1ca101a6..601baa6dc 100644
--- a/packages/react/src/api/scim2/getMeOrganizations.ts
+++ b/packages/react/src/api/scim2/getMeOrganizations.ts
@@ -72,14 +72,18 @@ const getMeOrganizations = async ({
     );
   }
 
-  const queryParams = new URLSearchParams({
-    after,
-    authorizedAppName,
-    before,
-    filter,
-    limit: limit.toString(),
-    recursive: recursive.toString(),
-  });
+  const queryParams = new URLSearchParams(
+    Object.fromEntries(
+      Object.entries({
+        after,
+        authorizedAppName,
+        before,
+        filter,
+        limit: limit.toString(),
+        recursive: recursive.toString(),
+      }).filter(([, value]) => Boolean(value))
+    )
+  );
 
   const response: any = await httpClient({
     headers: {
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index 1137734da..4aa1807be 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -20,6 +20,7 @@ import {
   AsgardeoRuntimeError,
   EmbeddedFlowExecuteRequestPayload,
   EmbeddedFlowExecuteResponse,
+  Organization,
   SignInOptions,
   SignOutOptions,
   User,
@@ -55,6 +56,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   const asgardeo: AsgardeoReactClient = useMemo(() => new AsgardeoReactClient(), []);
   const {hasAuthParams} = useBrowserUrl();
   const [user, setUser] = useState<any | null>(null);
+  const [currentOrganization, setCurrentOrganization] = useState<Organization | null>(null);
 
   const [isSignedInSync, setIsSignedInSync] = useState<boolean>(false);
   const [isInitializedSync, setIsInitializedSync] = useState<boolean>(false);
@@ -95,6 +97,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
       if (await asgardeo.isSignedIn()) {
         setUser(await asgardeo.getUser());
         setUserProfile(await asgardeo.getUserProfile());
+        setCurrentOrganization(await asgardeo.getCurrentOrganization());
 
         return;
       }
@@ -173,6 +176,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
       if (await asgardeo.isSignedIn()) {
         setUser(await asgardeo.getUser());
         setUserProfile(await asgardeo.getUserProfile());
+        setCurrentOrganization(await asgardeo.getCurrentOrganization());
       }
 
       return response;
@@ -225,7 +229,10 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
               profile={userProfile}
               revalidateProfile={async () => setUserProfile(await asgardeo.getUserProfile())}
             >
-              <OrganizationProvider getOrganizations={async () => asgardeo.getOrganizations()}>
+              <OrganizationProvider
+                getOrganizations={async () => asgardeo.getOrganizations()}
+                currentOrganization={currentOrganization}
+              >
                 {children}
               </OrganizationProvider>
             </UserProvider>
diff --git a/packages/react/src/contexts/Organization/OrganizationProvider.tsx b/packages/react/src/contexts/Organization/OrganizationProvider.tsx
index ae7ee5971..ba8b092b6 100644
--- a/packages/react/src/contexts/Organization/OrganizationProvider.tsx
+++ b/packages/react/src/contexts/Organization/OrganizationProvider.tsx
@@ -94,7 +94,7 @@ export interface OrganizationProviderProps {
 const OrganizationProvider: FC<PropsWithChildren<OrganizationProviderProps>> = ({
   autoFetch = true,
   children,
-  currentOrganization: initialCurrentOrganization = null,
+  currentOrganization,
   getOrganizations,
   onError,
   onOrganizationSwitch,
@@ -102,7 +102,6 @@ const OrganizationProvider: FC<PropsWithChildren<OrganizationProviderProps>> = (
 }: PropsWithChildren<OrganizationProviderProps>): ReactElement => {
   const {baseUrl, isSignedIn} = useAsgardeo();
   const [organizations, setOrganizations] = useState<Organization[] | null>(initialOrganizations);
-  const [currentOrganization, setCurrentOrganization] = useState<Organization | null>(initialCurrentOrganization);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -132,10 +131,6 @@ const OrganizationProvider: FC<PropsWithChildren<OrganizationProviderProps>> = (
       }
 
       setOrganizations(organizationsData);
-
-      if (!currentOrganization && organizationsData.length > 0) {
-        setCurrentOrganization(organizationsData[0]);
-      }
     } catch (fetchError) {
       const errorMessage: string = fetchError instanceof Error ? fetchError.message : 'Failed to fetch organizations';
       setError(errorMessage);
@@ -145,7 +140,7 @@ const OrganizationProvider: FC<PropsWithChildren<OrganizationProviderProps>> = (
     } finally {
       setIsLoading(false);
     }
-  }, [baseUrl, currentOrganization, getOrganizations, isSignedIn, onError]);
+  }, [baseUrl, getOrganizations, isSignedIn, onError]);
 
   /**
    * Revalidates organizations by fetching fresh data
@@ -159,7 +154,6 @@ const OrganizationProvider: FC<PropsWithChildren<OrganizationProviderProps>> = (
    */
   const switchOrganization: (organization: Organization) => void = useCallback(
     (organization: Organization): void => {
-      setCurrentOrganization(organization);
       if (onOrganizationSwitch) {
         onOrganizationSwitch(organization);
       }
diff --git a/packages/vue/src/auth-api.ts b/packages/vue/src/auth-api.ts
index c417c4f09..903bccb41 100644
--- a/packages/vue/src/auth-api.ts
+++ b/packages/vue/src/auth-api.ts
@@ -22,7 +22,7 @@ import {
   AuthClientConfig,
   BasicUserInfo,
   Config,
-  IdTokenPayload,
+  IdToken,
   Hooks,
   HttpClientInstance,
   HttpRequestConfig,
@@ -246,7 +246,7 @@ class AuthAPI {
    * @return {Promise<DecodedIDTokenPayloadInterface>} - A Promise that resolves with
    * the decoded payload of the id token.
    */
-  public async getDecodedIdToken(): Promise<IdTokenPayload> {
+  public async getDecodedIdToken(): Promise<IdToken> {
     return this._client.getDecodedIdToken();
   }
 
@@ -258,7 +258,7 @@ class AuthAPI {
    * @return {Promise<DecodedIDTokenPayloadInterface>} - A Promise that resolves with
    * the decoded payload of the idp id token.
    */
-  public async getDecodedIDPIDToken(): Promise<IdTokenPayload> {
+  public async getDecodedIDPIDToken(): Promise<IdToken> {
     return this._client.getDecodedIdToken();
   }
 
diff --git a/packages/vue/src/plugins/AsgardeoPlugin.ts b/packages/vue/src/plugins/AsgardeoPlugin.ts
index 2abb03d0e..9c13aac23 100644
--- a/packages/vue/src/plugins/AsgardeoPlugin.ts
+++ b/packages/vue/src/plugins/AsgardeoPlugin.ts
@@ -21,7 +21,7 @@ import {
   AuthClientConfig,
   Config,
   TokenExchangeRequestConfig,
-  IdTokenPayload,
+  IdToken,
   Hooks,
   HttpClientInstance,
   HttpRequestConfig,
@@ -158,7 +158,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<IdToken> => 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 0fb32f5c1..240b76fc7 100644
--- a/packages/vue/src/tests/AsgardeoPlugin.test.ts
+++ b/packages/vue/src/tests/AsgardeoPlugin.test.ts
@@ -20,7 +20,7 @@ import {
   AuthClientConfig,
   BasicUserInfo,
   Config,
-  IdTokenPayload,
+  IdToken,
   Hooks,
   HttpClientInstance,
   SPACustomGrantConfig,
@@ -212,9 +212,9 @@ describe('asgardeoPlugin', () => {
     expect(mockAuthAPI.getAccessToken).toHaveBeenCalled();
     expect(accessTokenValue).toBe(accessToken);
 
-    const decodedIDToken: IdTokenPayload = {aud: 'client-id', iss: 'https://test.com', sub: 'user-id-123'};
+    const decodedIDToken: IdToken = {aud: 'client-id', iss: 'https://test.com', sub: 'user-id-123'};
     mockAuthAPI.getDecodedIdToken.mockResolvedValueOnce(decodedIDToken);
-    const idToken: IdTokenPayload = await authContext.getDecodedIdToken();
+    const idToken: IdToken = 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 fb9774dc4..31a3bbd78 100644
--- a/packages/vue/src/tests/auth-api.test.ts
+++ b/packages/vue/src/tests/auth-api.test.ts
@@ -21,7 +21,7 @@ import {
   type AuthClientConfig,
   type BasicUserInfo,
   type Config,
-  type IdTokenPayload,
+  type IdToken,
   Hooks,
   type HttpRequestConfig,
   type HttpResponse,
@@ -348,13 +348,13 @@ describe('AuthAPI', () => {
 
   describe('token related methods', () => {
     it('should call getDecodedIdToken on the client', async () => {
-      const result: IdTokenPayload = await authApi.getDecodedIdToken();
+      const result: IdToken = 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();
+      const result: IdToken = await authApi.getDecodedIDPIDToken();
       expect(mockClient.getDecodedIdToken).toHaveBeenCalled();
       expect(result).toEqual({sub: 'user-id-123'});
     });
diff --git a/packages/vue/src/tests/useAsgardeo.test.ts b/packages/vue/src/tests/useAsgardeo.test.ts
index 5a4ef8e55..25506686e 100644
--- a/packages/vue/src/tests/useAsgardeo.test.ts
+++ b/packages/vue/src/tests/useAsgardeo.test.ts
@@ -19,7 +19,7 @@
 import {
   AsgardeoAuthException,
   BasicUserInfo,
-  IdTokenPayload,
+  IdToken,
   HttpClientInstance,
   HttpResponse,
   OIDCEndpoints,
@@ -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 IdToken),
     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 eb5193879..4241a74c2 100644
--- a/packages/vue/src/types.ts
+++ b/packages/vue/src/types.ts
@@ -23,7 +23,7 @@ import {
   BasicUserInfo,
   Config,
   TokenExchangeRequestConfig,
-  IdTokenPayload,
+  IdToken,
   Hooks,
   HttpClientInstance,
   HttpRequestConfig,
@@ -95,7 +95,7 @@ export interface AuthContextInterface {
   error: AsgardeoAuthException;
   getAccessToken(): Promise<string>;
   getUser(): Promise<BasicUserInfo>;
-  getDecodedIdToken(): Promise<IdTokenPayload>;
+  getDecodedIdToken(): Promise<IdToken>;
   getHttpClient(): Promise<HttpClientInstance>;
   getIdToken(): Promise<string>;
   getOpenIDProviderEndpoints(): Promise<OIDCEndpoints>;
@@ -106,10 +106,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>;
-  exchangeToken(
-    config: TokenExchangeRequestConfig,
-    callback?: (response: BasicUserInfo | Response) => void,
-  ): void;
+  exchangeToken(config: TokenExchangeRequestConfig, callback?: (response: BasicUserInfo | Response) => void): void;
   revokeAccessToken(): Promise<boolean>;
   signIn: (
     config?: SignInConfig,

From 8dd06168e0aa3e933948e9fd0168a859856605c3 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 23 Jun 2025 17:02:42 +0530
Subject: [PATCH 66/96] feat(react): Implement organization switching
 functionality across the client and context components

---
 .../src/AsgardeoJavaScriptClient.ts           |  2 +
 .../helpers/authentication-helper.ts          | 84 +++++++++----------
 .../src/constants/TokenExchangeConstants.ts   |  4 +-
 packages/javascript/src/models/client.ts      |  7 ++
 packages/react/src/AsgardeoReactClient.ts     | 39 +++++++++
 .../OrganizationSwitcher.tsx                  |  5 +-
 .../contexts/Asgardeo/AsgardeoProvider.tsx    | 20 +++++
 .../Organization/OrganizationContext.ts       |  4 +-
 .../Organization/OrganizationProvider.tsx     | 35 ++++++--
 9 files changed, 145 insertions(+), 55 deletions(-)

diff --git a/packages/javascript/src/AsgardeoJavaScriptClient.ts b/packages/javascript/src/AsgardeoJavaScriptClient.ts
index fd4169a4d..dd8f21aab 100644
--- a/packages/javascript/src/AsgardeoJavaScriptClient.ts
+++ b/packages/javascript/src/AsgardeoJavaScriptClient.ts
@@ -29,6 +29,8 @@ import {User, UserProfile} from './models/user';
  * @typeParam T - Configuration type that extends Config.
  */
 abstract class AsgardeoJavaScriptClient<T = Config> implements AsgardeoClient<T> {
+  abstract switchOrganization(organization: Organization): Promise<void>;
+
   abstract initialize(config: T): Promise<boolean>;
 
   abstract getUser(): Promise<User>;
diff --git a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
index 9911b7cef..87cdcdb78 100644
--- a/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
+++ b/packages/javascript/src/__legacy__/helpers/authentication-helper.ts
@@ -16,23 +16,19 @@
  * under the License.
  */
 
-import {IsomorphicCrypto} from '../../IsomorphicCrypto';
-import StorageManager from '../../StorageManager';
-import {AsgardeoAuthException} from '../../errors/exception';
-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';
-import {IdToken} 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 {AsgardeoAuthException} from '../../errors/exception';
+import {IsomorphicCrypto} from '../../IsomorphicCrypto';
+import {JWKInterface} from '../../models/crypto';
 import {OIDCDiscoveryEndpointsApiResponse, OIDCDiscoveryApiResponse} from '../../models/oidc-discovery';
+import {SessionData} from '../../models/session';
+import {IdToken, TokenResponse, AccessTokenApiResponse} from '../../models/token';
+import {User} from '../../models/user';
+import StorageManager from '../../StorageManager';
+import extractUserClaimsFromIdToken from '../../utils/extractUserClaimsFromIdToken';
 import processOpenIDScopes from '../../utils/processOpenIDScopes';
+import {AuthClientConfig, StrictAuthClientConfig} from '../models';
 
 export class AuthenticationHelper<T> {
   private _storageManager: StorageManager<T>;
@@ -42,8 +38,8 @@ 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.loadOpenIDProviderConfiguration();
+    this._config = async () => this._storageManager.getConfigData();
+    this._oidcProviderMetaData = async () => this._storageManager.loadOpenIDProviderConfiguration();
     this._cryptoHelper = cryptoHelper;
   }
 
@@ -77,8 +73,8 @@ export class AuthenticationHelper<T> {
     ];
 
     const isRequiredEndpointsContains: boolean = configData.endpoints
-      ? requiredEndpoints.every((reqEndpointName: string) => {
-          return configData.endpoints
+      ? requiredEndpoints.every((reqEndpointName: string) =>
+          configData.endpoints
             ? Object.keys(configData.endpoints).some((endpointName: string) => {
                 const snakeCasedName: string = endpointName.replace(
                   /[A-Z]/g,
@@ -87,8 +83,8 @@ export class AuthenticationHelper<T> {
 
                 return snakeCasedName === reqEndpointName;
               })
-            : false;
-        })
+            : false,
+        )
       : false;
 
     if (!isRequiredEndpointsContains) {
@@ -114,7 +110,7 @@ export class AuthenticationHelper<T> {
     const oidcProviderMetaData: OIDCDiscoveryEndpointsApiResponse = {};
     const configData: StrictAuthClientConfig = await this._config();
 
-    const baseUrl: string = (configData as any).baseUrl;
+    const {baseUrl} = configData as any;
 
     if (!baseUrl) {
       throw new AsgardeoAuthException(
@@ -187,7 +183,7 @@ export class AuthenticationHelper<T> {
       );
     }
 
-    const issuer: string | undefined = (await this._oidcProviderMetaData()).issuer;
+    const {issuer} = await this._oidcProviderMetaData();
 
     const {keys}: {keys: JWKInterface[]} = (await response.json()) as {
       keys: JWKInterface[];
@@ -211,13 +207,12 @@ export class AuthenticationHelper<T> {
     const username: string = payload?.['username'] ?? '';
     const givenName: string = payload?.['given_name'] ?? '';
     const familyName: string = payload?.['family_name'] ?? '';
-    const fullName: string =
-      givenName && familyName ? `${givenName} ${familyName}` : givenName ? givenName : familyName ? familyName : '';
+    const fullName: string = givenName && familyName ? `${givenName} ${familyName}` : givenName || familyName || '';
     const displayName: string = payload.preferred_username ?? fullName;
 
     return {
-      displayName: displayName,
-      username: username,
+      displayName,
+      username,
       ...extractUserClaimsFromIdToken(payload),
     };
   }
@@ -226,15 +221,19 @@ export class AuthenticationHelper<T> {
     const configData: StrictAuthClientConfig = await this._config();
     const sessionData: SessionData = await this._storageManager.getSessionData(userId);
 
-    let scope: string = processOpenIDScopes(configData.scopes);
+    const scope: string = processOpenIDScopes(configData.scopes);
+
+    if (typeof text !== 'string') {
+      return text;
+    }
 
     return text
-      .replace(TokenExchangeConstants.Placeholders.TOKEN, sessionData.access_token)
+      .replace(TokenExchangeConstants.Placeholders.ACCESS_TOKEN, sessionData.access_token)
       .replace(
         TokenExchangeConstants.Placeholders.USERNAME,
         this.getAuthenticatedUserInfo(sessionData.id_token).username,
       )
-      .replace(TokenExchangeConstants.Placeholders.SCOPE, scope)
+      .replace(TokenExchangeConstants.Placeholders.SCOPES, scope)
       .replace(TokenExchangeConstants.Placeholders.CLIENT_ID, configData.clientId)
       .replace(TokenExchangeConstants.Placeholders.CLIENT_SECRET, configData.clientSecret ?? '');
   }
@@ -253,7 +252,7 @@ export class AuthenticationHelper<T> {
       );
     }
 
-    //Get the response in JSON
+    // Get the response in JSON
     const parsedResponse: AccessTokenApiResponse = (await response.json()) as AccessTokenApiResponse;
 
     parsedResponse.created_at = new Date().getTime();
@@ -276,20 +275,19 @@ export class AuthenticationHelper<T> {
 
         return Promise.resolve(tokenResponse);
       });
-    } else {
-      const tokenResponse: TokenResponse = {
-        accessToken: parsedResponse.access_token,
-        createdAt: parsedResponse.created_at,
-        expiresIn: parsedResponse.expires_in,
-        idToken: parsedResponse.id_token,
-        refreshToken: parsedResponse.refresh_token,
-        scope: parsedResponse.scope,
-        tokenType: parsedResponse.token_type,
-      };
-
-      await this._storageManager.setSessionData(parsedResponse, userId);
-
-      return Promise.resolve(tokenResponse);
     }
+    const tokenResponse: TokenResponse = {
+      accessToken: parsedResponse.access_token,
+      createdAt: parsedResponse.created_at,
+      expiresIn: parsedResponse.expires_in,
+      idToken: parsedResponse.id_token,
+      refreshToken: parsedResponse.refresh_token,
+      scope: parsedResponse.scope,
+      tokenType: parsedResponse.token_type,
+    };
+
+    await this._storageManager.setSessionData(parsedResponse, userId);
+
+    return Promise.resolve(tokenResponse);
   }
 }
diff --git a/packages/javascript/src/constants/TokenExchangeConstants.ts b/packages/javascript/src/constants/TokenExchangeConstants.ts
index efb731cfe..0c874f8a4 100644
--- a/packages/javascript/src/constants/TokenExchangeConstants.ts
+++ b/packages/javascript/src/constants/TokenExchangeConstants.ts
@@ -43,7 +43,7 @@ const TokenExchangeConstants = {
      * Placeholder for the token value in exchange requests.
      * Usually replaced with an access token or refresh token.
      */
-    TOKEN: '{{token}}',
+    ACCESS_TOKEN: '{{accessToken}}',
 
     /**
      * Placeholder for the username in token exchange operations.
@@ -55,7 +55,7 @@ const TokenExchangeConstants = {
      * Placeholder for OAuth scopes in token exchange requests.
      * Replaced with space-separated scope strings.
      */
-    SCOPE: '{{scope}}',
+    SCOPES: '{{scopes}}',
 
     /**
      * Placeholder for client ID in token exchange operations.
diff --git a/packages/javascript/src/models/client.ts b/packages/javascript/src/models/client.ts
index 2871039ab..e657683c3 100644
--- a/packages/javascript/src/models/client.ts
+++ b/packages/javascript/src/models/client.ts
@@ -49,6 +49,13 @@ export interface AsgardeoClient<T> {
    */
   getCurrentOrganization(): Promise<Organization | null>;
 
+  /**
+   * Switches the current organization to the specified one.
+   * @param organization - The organization to switch to.
+   * @returns A promise that resolves when the switch is complete.
+   */
+  switchOrganization(organization: Organization): Promise<void>;
+
   /**
    * Gets user information from the session.
    *
diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index cd65c0c33..3f0438137 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -129,6 +129,45 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
     };
   }
 
+  override async switchOrganization(organization: Organization): Promise<void> {
+    try {
+      const configData = await this.asgardeo.getConfigData();
+      const scopes = configData?.scopes;
+
+      if (!organization.id) {
+        throw new AsgardeoRuntimeError(
+          'Organization ID is required for switching organizations',
+          'react-AsgardeoReactClient-SwitchOrganizationError-001',
+          'react',
+          'The organization object must contain a valid ID to perform the organization switch.',
+        );
+      }
+
+      const exchangeConfig = {
+        attachToken: false,
+        data: {
+          client_id: '{{clientId}}',
+          grant_type: 'organization_switch',
+          scope: '{{scopes}}',
+          switching_organization: organization.id,
+          token: '{{accessToken}}',
+        },
+        id: 'organization-switch',
+        returnsSession: true,
+        signInRequired: true,
+      };
+
+      await this.asgardeo.exchangeToken(exchangeConfig, (user: User) => {}, () => null);
+    } catch (error) {
+      throw new AsgardeoRuntimeError(
+        `Failed to switch organization: ${error.message || error}`,
+        'react-AsgardeoReactClient-SwitchOrganizationError-003',
+        'react',
+        'An error occurred while switching to the specified organization. Please try again.',
+      );
+    }
+  }
+
   override isLoading(): boolean {
     return this.asgardeo.isLoading();
   }
diff --git a/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx b/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
index 6b075d4a6..9f648da26 100644
--- a/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
+++ b/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
@@ -41,7 +41,7 @@ export interface OrganizationSwitcherProps
   /**
    * Optional callback for organization switch (will use context if not provided)
    */
-  onOrganizationSwitch?: (organization: Organization) => void;
+  onOrganizationSwitch?: (organization: Organization) => Promise<void> | void;
   /**
    * Optional override for organizations list (will use context if not provided)
    */
@@ -105,7 +105,8 @@ export const OrganizationSwitcher: FC<OrganizationSwitcherProps> = ({
   // Use prop values if provided, otherwise use context values
   const organizations: Organization[] = propOrganizations || contextOrganizations || [];
   const currentOrganization: Organization | null = propCurrentOrganization || contextCurrentOrganization;
-  const onOrganizationSwitch: (organization: Organization) => void = propOnOrganizationSwitch || switchOrganization;
+  const onOrganizationSwitch: (organization: Organization) => Promise<void> | void =
+    propOnOrganizationSwitch || switchOrganization;
 
   // Add "Create Organization" menu item
   const defaultMenuItems = [
diff --git a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
index 4aa1807be..43a792eaf 100644
--- a/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -201,6 +201,25 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   const signOut = async (options?: SignOutOptions, afterSignOut?: () => void): Promise<string> =>
     asgardeo.signOut(options, afterSignOut);
 
+  const switchOrganization = async (organization: Organization): Promise<void> => {
+    try {
+      await asgardeo.switchOrganization(organization);
+
+      if (await asgardeo.isSignedIn()) {
+        setUser(await asgardeo.getUser());
+        setUserProfile(await asgardeo.getUserProfile());
+        setCurrentOrganization(await asgardeo.getCurrentOrganization());
+      }
+    } catch (error) {
+      throw new AsgardeoRuntimeError(
+        `Failed to switch organization: ${error.message || error}`,
+        'asgardeo-switchOrganization-Error',
+        'react',
+        'An error occurred while switching to the specified organization.',
+      );
+    }
+  };
+
   const isDarkMode: boolean = useMemo(() => {
     if (!preferences?.theme?.mode || preferences.theme.mode === 'system') {
       return window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -232,6 +251,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
               <OrganizationProvider
                 getOrganizations={async () => asgardeo.getOrganizations()}
                 currentOrganization={currentOrganization}
+                onOrganizationSwitch={switchOrganization}
               >
                 {children}
               </OrganizationProvider>
diff --git a/packages/react/src/contexts/Organization/OrganizationContext.ts b/packages/react/src/contexts/Organization/OrganizationContext.ts
index 87376de59..b0021dc17 100644
--- a/packages/react/src/contexts/Organization/OrganizationContext.ts
+++ b/packages/react/src/contexts/Organization/OrganizationContext.ts
@@ -29,7 +29,7 @@ export type OrganizationContextProps = {
   isLoading: boolean;
   organizations: Organization[] | null;
   revalidateOrganizations: () => Promise<void>;
-  switchOrganization: (organization: Organization) => void;
+  switchOrganization: (organization: Organization) => Promise<void>;
 };
 
 /**
@@ -42,7 +42,7 @@ const OrganizationContext: Context<OrganizationContextProps | null> = createCont
   isLoading: false,
   organizations: null,
   revalidateOrganizations: () => Promise.resolve(),
-  switchOrganization: () => {},
+  switchOrganization: () => Promise.resolve(),
 });
 
 OrganizationContext.displayName = 'OrganizationContext';
diff --git a/packages/react/src/contexts/Organization/OrganizationProvider.tsx b/packages/react/src/contexts/Organization/OrganizationProvider.tsx
index ba8b092b6..cb03655bd 100644
--- a/packages/react/src/contexts/Organization/OrganizationProvider.tsx
+++ b/packages/react/src/contexts/Organization/OrganizationProvider.tsx
@@ -44,7 +44,7 @@ export interface OrganizationProviderProps {
   /**
    * Callback function called when switching organizations
    */
-  onOrganizationSwitch?: (organization: Organization) => void;
+  onOrganizationSwitch?: (organization: Organization) => Promise<void>;
   /**
    * Initial list of organizations
    */
@@ -152,13 +152,36 @@ const OrganizationProvider: FC<PropsWithChildren<OrganizationProviderProps>> = (
   /**
    * Switches to a different organization
    */
-  const switchOrganization: (organization: Organization) => void = useCallback(
-    (organization: Organization): void => {
-      if (onOrganizationSwitch) {
-        onOrganizationSwitch(organization);
+  const switchOrganization: (organization: Organization) => Promise<void> = useCallback(
+    async (organization: Organization): Promise<void> => {
+      if (!onOrganizationSwitch) {
+        throw new AsgardeoRuntimeError(
+          'onOrganizationSwitch callback is required',
+          'OrganizationProvider-SwitchError-001',
+          'react',
+          'The onOrganizationSwitch callback must be provided to handle organization switching.',
+        );
+      }
+
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        await onOrganizationSwitch(organization);
+        // The organization state will be updated by the parent provider
+      } catch (switchError) {
+        const errorMessage: string =
+          switchError instanceof Error ? switchError.message : 'Failed to switch organization';
+        setError(errorMessage);
+        if (onError) {
+          onError(errorMessage);
+        }
+        throw switchError; // Re-throw so the UI can handle it
+      } finally {
+        setIsLoading(false);
       }
     },
-    [onOrganizationSwitch],
+    [onOrganizationSwitch, onError],
   );
 
   // Auto-fetch organizations when component mounts or dependencies change

From a0f95cbefad9f997e53aaec3e1423b3edb41ada2 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 23 Jun 2025 17:57:02 +0530
Subject: [PATCH 67/96] feat(react): Enhance sign-up flow with redirection
 handling for both regular and social sign-ups

---
 .../presentation/SignUp/BaseSignUp.tsx        | 187 +++++++++++++++++-
 .../components/presentation/SignUp/SignUp.tsx |  11 +-
 2 files changed, 189 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
index 37dbf71f8..2cebf43ae 100644
--- a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
+++ b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
@@ -21,6 +21,7 @@ import {
   EmbeddedFlowExecuteResponse,
   EmbeddedFlowStatus,
   EmbeddedFlowComponentType,
+  EmbeddedFlowResponseType,
   withVendorCSSClassPrefix,
   AsgardeoAPIError,
 } from '@asgardeo/browser';
@@ -72,6 +73,13 @@ export interface BaseSignUpProps {
    */
   messageClassName?: string;
 
+  /**
+   * Callback function called when the sign-up flow completes and requires redirection.
+   * This allows platform-specific handling of redirects (e.g., Next.js router.push).
+   * @param response - The response from the sign-up flow containing the redirect URL, etc.
+   */
+  onComplete?: (response: EmbeddedFlowExecuteResponse) => void;
+
   /**
    * Callback function called when sign-up fails.
    * @param error - The error that occurred during sign-up.
@@ -97,13 +105,6 @@ export interface BaseSignUpProps {
    */
   onSubmit: (payload: EmbeddedFlowExecuteRequestPayload) => Promise<EmbeddedFlowExecuteResponse>;
 
-  /**
-   * Callback function called when the sign-up flow completes and requires redirection.
-   * This allows platform-specific handling of redirects (e.g., Next.js router.push).
-   * @param response - The response from the sign-up flow containing the redirect URL, etc.
-   */
-  onComplete?: (response: EmbeddedFlowExecuteResponse) => void;
-
   /**
    * Size variant for the component.
    */
@@ -319,11 +320,15 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
 
       if (response.flowStatus === EmbeddedFlowStatus.Complete) {
         onComplete?.(response);
-
         return;
       }
 
       if (response.flowStatus === EmbeddedFlowStatus.Incomplete) {
+        // Check if the response contains a redirection URL and redirect if needed
+        if (handleRedirectionIfNeeded(response, component)) {
+          return;
+        }
+
         setCurrentFlow(response);
         setupFormFields(response);
       }
@@ -336,6 +341,172 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
     }
   };
 
+  /**
+   * Check if the response contains a redirection URL and perform the redirect if necessary.
+   * @param response - The sign-up response
+   * @param component - The component that triggered the submission (needed for actionId)
+   * @returns true if a redirect was performed, false otherwise
+   */
+  const handleRedirectionIfNeeded = (response: EmbeddedFlowExecuteResponse, component: any): boolean => {
+    if (response?.type === EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL) {
+      /**
+       * Open a popup window to handle redirection prompts for social sign-up
+       */
+      const redirectUrl = response.data.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) {
+          return;
+        }
+
+        /**
+         * Check the origin of the message to ensure it's from a trusted source
+         */
+        const expectedOrigin = afterSignUpUrl ? new URL(afterSignUpUrl).origin : window.location.origin;
+        if (event.origin !== expectedOrigin && event.origin !== window.location.origin) {
+          return;
+        }
+
+        const {code, state} = event.data;
+
+        if (code && state) {
+          const payload: EmbeddedFlowExecuteRequestPayload = {
+            ...(currentFlow.flowId && {flowId: currentFlow.flowId}),
+            flowType: (currentFlow as any).flowType || 'REGISTRATION',
+            inputs: {
+              code,
+              state,
+            },
+            actionId: component.id,
+          } as any;
+
+          try {
+            const continueResponse = await onSubmit(payload);
+            onFlowChange?.(continueResponse);
+
+            if (continueResponse.flowStatus === EmbeddedFlowStatus.Complete) {
+              onComplete?.(continueResponse);
+            } else if (continueResponse.flowStatus === EmbeddedFlowStatus.Incomplete) {
+              setCurrentFlow(continueResponse);
+              setupFormFields(continueResponse);
+            }
+
+            popup.close();
+            cleanup();
+          } catch (err) {
+            const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.sign.up.flow.failure');
+            setError(errorMessage);
+            onError?.(err as Error);
+            popup.close();
+            cleanup();
+          }
+        }
+      };
+
+      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: EmbeddedFlowExecuteRequestPayload = {
+                  ...(currentFlow.flowId && {flowId: currentFlow.flowId}),
+                  flowType: (currentFlow as any).flowType || 'REGISTRATION',
+                  inputs: {
+                    code,
+                    state,
+                  },
+                  actionId: component.id,
+                } as any;
+
+                try {
+                  const continueResponse = await onSubmit(payload);
+                  onFlowChange?.(continueResponse);
+
+                  if (continueResponse.flowStatus === EmbeddedFlowStatus.Complete) {
+                    onComplete?.(continueResponse);
+                  } else if (continueResponse.flowStatus === EmbeddedFlowStatus.Incomplete) {
+                    setCurrentFlow(continueResponse);
+                    setupFormFields(continueResponse);
+                  }
+
+                  popup.close();
+                } catch (err) {
+                  const errorMessage = err instanceof AsgardeoAPIError ? err.message : t('errors.sign.up.flow.failure');
+                  setError(errorMessage);
+                  onError?.(err as Error);
+                  popup.close();
+                }
+              }
+            }
+          } 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;
+    }
+
+    return false;
+  };
+
   // Generate CSS classes
   const containerClasses = clsx(
     [
diff --git a/packages/react/src/components/presentation/SignUp/SignUp.tsx b/packages/react/src/components/presentation/SignUp/SignUp.tsx
index c02f1eb2f..0e80e084e 100644
--- a/packages/react/src/components/presentation/SignUp/SignUp.tsx
+++ b/packages/react/src/components/presentation/SignUp/SignUp.tsx
@@ -132,10 +132,19 @@ const SignUp: FC<SignUpProps> = ({
   const handleComplete = (response: EmbeddedFlowExecuteResponse) => {
     onComplete?.(response);
 
+    // For non-redirection responses (regular sign-up completion), handle redirect if configured
+    if (shouldRedirectAfterSignUp && response?.type !== EmbeddedFlowResponseType.Redirection && afterSignUpUrl) {
+      window.location.href = afterSignUpUrl;
+    }
+
+    // For redirection responses (social sign-up), they are handled by BaseSignUp's popup mechanism
+    // and we only redirect after the OAuth flow is complete if shouldRedirectAfterSignUp is true
     if (
       shouldRedirectAfterSignUp &&
       response?.type === EmbeddedFlowResponseType.Redirection &&
-      response?.data?.redirectURL
+      response?.data?.redirectURL &&
+      !response.data.redirectURL.includes('oauth') && // Not a social provider redirect
+      !response.data.redirectURL.includes('auth') // Not an auth provider redirect
     ) {
       window.location.href = response.data.redirectURL;
     }

From d9d448c6028addc09c513f1451e2fc04eaa75d05 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 24 Jun 2025 01:22:59 +0530
Subject: [PATCH 68/96] feat(react): Enhance theme configuration with success
 and warning colors, add shadows, and implement organization profile
 components

---
 packages/javascript/src/theme/createTheme.ts  |  39 ++
 packages/javascript/src/theme/types.ts        |  13 +
 .../react/src/api/scim2/getOrganization.ts    | 115 ++++++
 .../BaseOrganizationProfile.tsx               | 334 ++++++++++++++++++
 .../OrganizationProfile.tsx                   | 119 +++++++
 .../presentation/OrganizationProfile/index.ts |  21 ++
 .../presentation/SignUp/BaseSignUp.tsx        |   4 +-
 packages/react/src/contexts/Theme/types.ts    |  35 +-
 8 files changed, 675 insertions(+), 5 deletions(-)
 create mode 100644 packages/react/src/api/scim2/getOrganization.ts
 create mode 100644 packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
 create mode 100644 packages/react/src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
 create mode 100644 packages/react/src/components/presentation/OrganizationProfile/index.ts

diff --git a/packages/javascript/src/theme/createTheme.ts b/packages/javascript/src/theme/createTheme.ts
index 7cac18a24..ee62482a0 100644
--- a/packages/javascript/src/theme/createTheme.ts
+++ b/packages/javascript/src/theme/createTheme.ts
@@ -40,6 +40,14 @@ const lightTheme: ThemeConfig = {
       main: '#d32f2f',
       contrastText: '#ffffff',
     },
+    success: {
+      main: '#4caf50',
+      contrastText: '#ffffff',
+    },
+    warning: {
+      main: '#ff9800',
+      contrastText: '#ffffff',
+    },
     text: {
       primary: '#1a1a1a',
       secondary: '#666666',
@@ -54,6 +62,11 @@ const lightTheme: ThemeConfig = {
     medium: '8px',
     large: '16px',
   },
+  shadows: {
+    small: '0 2px 8px rgba(0, 0, 0, 0.1)',
+    medium: '0 4px 16px rgba(0, 0, 0, 0.15)',
+    large: '0 8px 32px rgba(0, 0, 0, 0.2)',
+  },
 };
 
 const darkTheme: ThemeConfig = {
@@ -77,6 +90,14 @@ const darkTheme: ThemeConfig = {
       main: '#d32f2f',
       contrastText: '#ffffff',
     },
+    success: {
+      main: '#4caf50',
+      contrastText: '#ffffff',
+    },
+    warning: {
+      main: '#ff9800',
+      contrastText: '#ffffff',
+    },
     text: {
       primary: '#ffffff',
       secondary: '#b3b3b3',
@@ -91,6 +112,11 @@ const darkTheme: ThemeConfig = {
     medium: '8px',
     large: '16px',
   },
+  shadows: {
+    small: '0 2px 8px rgba(0, 0, 0, 0.3)',
+    medium: '0 4px 16px rgba(0, 0, 0, 0.4)',
+    large: '0 8px 32px rgba(0, 0, 0, 0.5)',
+  },
 };
 
 const toCssVariables = (theme: RecursivePartial<ThemeConfig>): Record<string, string> => {
@@ -106,6 +132,10 @@ 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-success-main'] = theme.colors.success.main;
+  cssVars['--asgardeo-color-success-contrastText'] = theme.colors.success.contrastText;
+  cssVars['--asgardeo-color-warning-main'] = theme.colors.warning.main;
+  cssVars['--asgardeo-color-warning-contrastText'] = theme.colors.warning.contrastText;
   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;
@@ -118,6 +148,11 @@ const toCssVariables = (theme: RecursivePartial<ThemeConfig>): Record<string, st
   cssVars['--asgardeo-border-radius-medium'] = theme.borderRadius.medium;
   cssVars['--asgardeo-border-radius-large'] = theme.borderRadius.large;
 
+  // Shadows
+  cssVars['--asgardeo-shadow-small'] = theme.shadows.small;
+  cssVars['--asgardeo-shadow-medium'] = theme.shadows.medium;
+  cssVars['--asgardeo-shadow-large'] = theme.shadows.large;
+
   return cssVars;
 };
 
@@ -142,6 +177,10 @@ const createTheme = (config: RecursivePartial<ThemeConfig> = {}, isDark = false)
       ...baseTheme.borderRadius,
       ...config.borderRadius,
     },
+    shadows: {
+      ...baseTheme.shadows,
+      ...config.shadows,
+    },
   } as ThemeConfig;
 
   return {
diff --git a/packages/javascript/src/theme/types.ts b/packages/javascript/src/theme/types.ts
index 78daff61c..7c4271e0a 100644
--- a/packages/javascript/src/theme/types.ts
+++ b/packages/javascript/src/theme/types.ts
@@ -41,6 +41,14 @@ export interface ThemeColors {
     main: string;
     contrastText: string;
   };
+  success: {
+    main: string;
+    contrastText: string;
+  };
+  warning: {
+    main: string;
+    contrastText: string;
+  };
 }
 
 export interface ThemeConfig {
@@ -53,6 +61,11 @@ export interface ThemeConfig {
     medium: string;
     large: string;
   };
+  shadows: {
+    small: string;
+    medium: string;
+    large: string;
+  };
 }
 
 export interface Theme extends ThemeConfig {
diff --git a/packages/react/src/api/scim2/getOrganization.ts b/packages/react/src/api/scim2/getOrganization.ts
new file mode 100644
index 000000000..a7b7ebb0c
--- /dev/null
+++ b/packages/react/src/api/scim2/getOrganization.ts
@@ -0,0 +1,115 @@
+/**
+ * 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, HttpInstance, AsgardeoSPAClient, HttpRequestConfig} from '@asgardeo/browser';
+
+const httpClient: HttpInstance = AsgardeoSPAClient.getInstance().httpRequest.bind(AsgardeoSPAClient.getInstance());
+
+/**
+ * Extended organization interface with additional properties
+ */
+export interface OrganizationDetails {
+  created?: string;
+  description?: string;
+  id: string;
+  lastModified?: string;
+  name: string;
+  orgHandle: string;
+  parent?: {
+    id: string;
+    ref: string;
+  };
+  permissions?: string[];
+  status?: string;
+  type?: string;
+}
+
+/**
+ * Retrieves detailed information for a specific organization.
+ *
+ * @param config - Configuration object containing baseUrl, organizationId, and request config.
+ * @returns A promise that resolves with the organization details.
+ * @example
+ * ```typescript
+ * try {
+ *   const organization = await getOrganization({
+ *     baseUrl: "https://api.asgardeo.io/t/dxlab",
+ *     organizationId: "0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
+ *   });
+ *   console.log(organization);
+ * } catch (error) {
+ *   if (error instanceof AsgardeoAPIError) {
+ *     console.error('Failed to get organization:', error.message);
+ *   }
+ * }
+ * ```
+ */
+const getOrganization = async ({
+  baseUrl,
+  organizationId,
+  ...requestConfig
+}: Partial<Request> & {
+  baseUrl: string;
+  organizationId: string;
+}): Promise<OrganizationDetails> => {
+  if (!baseUrl) {
+    throw new AsgardeoAPIError(
+      'Base URL is required',
+      'getOrganization-ValidationError-001',
+      'javascript',
+      400,
+      'Invalid Request',
+    );
+  }
+
+  if (!organizationId) {
+    throw new AsgardeoAPIError(
+      'Organization ID is required',
+      'getOrganization-ValidationError-002',
+      'javascript',
+      400,
+      'Invalid Request',
+    );
+  }
+
+  const response: any = await httpClient({
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    },
+    method: 'GET',
+    url: `${baseUrl}/api/server/v1/organizations/${organizationId}`,
+    ...requestConfig,
+  } as HttpRequestConfig);
+
+  if (!response.data) {
+    const errorText: string = await response.text();
+
+    throw new AsgardeoAPIError(
+      `Failed to fetch organization details: ${errorText}`,
+      'getOrganization-ResponseError-001',
+      'javascript',
+      response.status,
+      response.statusText,
+    );
+  }
+
+  return response.data;
+};
+
+export default getOrganization;
diff --git a/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx b/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
new file mode 100644
index 000000000..d730a65b0
--- /dev/null
+++ b/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
@@ -0,0 +1,334 @@
+/**
+ * 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 {withVendorCSSClassPrefix} from '@asgardeo/browser';
+import clsx from 'clsx';
+import {FC, ReactElement, useMemo, CSSProperties} from 'react';
+import {OrganizationDetails} from '../../../api/scim2/getOrganization';
+import useTheme from '../../../contexts/Theme/useTheme';
+import {Avatar} from '../../primitives/Avatar/Avatar';
+
+export interface BaseOrganizationProfileProps {
+  /**
+   * Whether to display the profile in a card layout.
+   */
+  cardLayout?: boolean;
+
+  /**
+   * CSS class name for styling the component.
+   */
+  className?: string;
+
+  /**
+   * Component to render when no organization data is available.
+   */
+  fallback?: ReactElement;
+
+  /**
+   * The organization details to display.
+   */
+  organization?: OrganizationDetails | null;
+
+  /**
+   * Custom title for the profile.
+   */
+  title?: string;
+}
+
+/**
+ * BaseOrganizationProfile component displays organization information in a
+ * structured and styled format. It shows organization details such as name,
+ * description, status, and other available information.
+ *
+ * This is the base component that can be used in any context where you have
+ * an organization object available.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <BaseOrganizationProfile organization={organizationData} />
+ *
+ * // With card layout and custom title
+ * <BaseOrganizationProfile
+ *   organization={organizationData}
+ *   cardLayout={true}
+ *   title="Organization Details"
+ *   fallback={<div>No organization data available</div>}
+ * />
+ * ```
+ */
+const BaseOrganizationProfile: FC<BaseOrganizationProfileProps> = ({
+  fallback = null,
+  className = '',
+  cardLayout = true,
+  organization,
+  title = 'Organization Profile',
+}): ReactElement => {
+  const {theme} = useTheme();
+
+  const formatDate = (dateString?: string): string => {
+    if (!dateString) return '-';
+    try {
+      return new Date(dateString).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      });
+    } catch {
+      return dateString;
+    }
+  };
+
+  const formatLabel = (key: string): string =>
+    key
+      .split(/(?=[A-Z])|_/)
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join(' ');
+
+  const getStatusColor = (status?: string): string => {
+    switch (status?.toUpperCase()) {
+      case 'ACTIVE':
+        return theme.colors.success.main;
+      case 'INACTIVE':
+        return theme.colors.warning.main;
+      case 'SUSPENDED':
+        return theme.colors.error.main;
+      default:
+        return theme.colors.text.secondary;
+    }
+  };
+
+  const getOrgInitials = (name?: string): string => {
+    if (!name) return 'ORG';
+    return name
+      .split(' ')
+      .map(word => word.charAt(0))
+      .join('')
+      .toUpperCase()
+      .slice(0, 2);
+  };
+
+  const styles = useStyles();
+
+  if (!organization) {
+    return fallback;
+  }
+
+  const containerStyle = {
+    ...styles.root,
+    ...(cardLayout ? styles.card : {}),
+  };
+
+  const orgFields = [
+    {
+      key: 'id',
+      label: 'Organization ID',
+      value: organization.id,
+    },
+    {
+      key: 'orgHandle',
+      label: 'Organization Handle',
+      value: organization.orgHandle,
+    },
+    {
+      key: 'description',
+      label: 'Description',
+      value: organization.description || '-',
+    },
+    {
+      key: 'status',
+      label: 'Status',
+      value: organization.status,
+      isStatus: true,
+    },
+    {
+      key: 'type',
+      label: 'Type',
+      value: organization.type || '-',
+    },
+    {
+      key: 'created',
+      label: 'Created',
+      value: formatDate(organization.created),
+    },
+    {
+      key: 'lastModified',
+      label: 'Last Modified',
+      value: formatDate(organization.lastModified),
+    },
+    {
+      key: 'parent',
+      label: 'Parent Organization',
+      value: organization.parent?.id || '-',
+    },
+  ];
+
+  return (
+    <div style={containerStyle} className={clsx(withVendorCSSClassPrefix('organization-profile'), className)}>
+      <div style={styles.header}>
+        <Avatar name={getOrgInitials(organization.name)} size={80} alt={`${organization.name} logo`} />
+        <div style={styles.orgInfo}>
+          <h2 style={styles.name}>{organization.name}</h2>
+          {organization.orgHandle && <p style={styles.handle}>@{organization.orgHandle}</p>}
+        </div>
+      </div>
+
+      <div style={styles.infoContainer}>
+        {orgFields.map((field, index) => (
+          <div
+            key={field.key}
+            style={{
+              ...styles.field,
+              ...(index === orgFields.length - 1 ? styles.lastField : {}),
+            }}
+          >
+            <span style={styles.label}>{field.label}:</span>
+            <span style={styles.value}>
+              {field.isStatus ? (
+                <span
+                  style={{
+                    ...styles.statusBadge,
+                    backgroundColor: getStatusColor(field.value),
+                  }}
+                >
+                  {field.value}
+                </span>
+              ) : (
+                field.value
+              )}
+            </span>
+          </div>
+        ))}
+
+        {organization.permissions && organization.permissions.length > 0 && (
+          <div style={styles.field}>
+            <span style={styles.label}>Permissions:</span>
+            <div style={styles.permissionsList}>
+              {organization.permissions.map((permission, index) => (
+                <span key={index} style={styles.permissionBadge}>
+                  {permission}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const useStyles = () => {
+  const {theme, colorScheme} = useTheme();
+
+  return useMemo(
+    () => ({
+      root: {
+        padding: `${theme.spacing.unit * 4}px`,
+        minWidth: '600px',
+        margin: '0 auto',
+      } as CSSProperties,
+      card: {
+        background: theme.colors.background.surface,
+        borderRadius: theme.borderRadius.large,
+        boxShadow: theme.shadows.small,
+      } as CSSProperties,
+      header: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: `${theme.spacing.unit * 2}px`,
+        marginBottom: `${theme.spacing.unit * 3}px`,
+        paddingBottom: `${theme.spacing.unit * 2}px`,
+        borderBottom: `1px solid ${theme.colors.border}`,
+      } as CSSProperties,
+      orgInfo: {
+        flex: 1,
+      } as CSSProperties,
+      name: {
+        fontSize: '1.5rem',
+        fontWeight: 600,
+        margin: '0 0 8px 0',
+        color: theme.colors.text.primary,
+      } as CSSProperties,
+      handle: {
+        fontSize: '1rem',
+        color: theme.colors.text.secondary,
+        margin: '0',
+        fontFamily: 'monospace',
+      } as CSSProperties,
+      infoContainer: {
+        display: 'flex',
+        flexDirection: 'column' as const,
+        gap: `${theme.spacing.unit}px`,
+      } as CSSProperties,
+      field: {
+        display: 'flex',
+        alignItems: 'flex-start',
+        padding: `${theme.spacing.unit}px 0`,
+        borderBottom: `1px solid ${theme.colors.border}`,
+        minHeight: '32px',
+      } as CSSProperties,
+      lastField: {
+        borderBottom: 'none',
+      } as CSSProperties,
+      label: {
+        fontSize: '0.875rem',
+        fontWeight: 500,
+        color: theme.colors.text.secondary,
+        width: '140px',
+        flexShrink: 0,
+        lineHeight: '32px',
+      } as CSSProperties,
+      value: {
+        color: theme.colors.text.primary,
+        flex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        gap: `${theme.spacing.unit}px`,
+        overflow: 'hidden',
+        minHeight: '32px',
+        lineHeight: '32px',
+        wordBreak: 'break-word' as const,
+      } as CSSProperties,
+      statusBadge: {
+        padding: '4px 8px',
+        borderRadius: theme.borderRadius.small,
+        fontSize: '0.75rem',
+        fontWeight: 500,
+        color: 'white',
+        textTransform: 'uppercase' as const,
+        letterSpacing: '0.5px',
+      } as CSSProperties,
+      permissionsList: {
+        display: 'flex',
+        flexWrap: 'wrap' as const,
+        gap: `${theme.spacing.unit / 2}px`,
+      } as CSSProperties,
+      permissionBadge: {
+        padding: '2px 8px',
+        borderRadius: theme.borderRadius.small,
+        fontSize: '0.75rem',
+        backgroundColor: theme.colors.primary.main,
+        color: theme.colors.primary.contrastText,
+        border: `1px solid ${theme.colors.border}`,
+      } as CSSProperties,
+    }),
+    [theme, colorScheme],
+  );
+};
+
+export default BaseOrganizationProfile;
diff --git a/packages/react/src/components/presentation/OrganizationProfile/OrganizationProfile.tsx b/packages/react/src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
new file mode 100644
index 000000000..94853c90b
--- /dev/null
+++ b/packages/react/src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
@@ -0,0 +1,119 @@
+/**
+ * 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, ReactElement, useEffect, useState} from 'react';
+import BaseOrganizationProfile, {BaseOrganizationProfileProps} from './BaseOrganizationProfile';
+import getOrganization, {OrganizationDetails} from '../../../api/scim2/getOrganization';
+import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
+
+/**
+ * Props for the OrganizationProfile component.
+ * Extends BaseOrganizationProfileProps but makes the organization prop optional
+ * since it will be fetched using the organizationId
+ */
+export type OrganizationProfileProps = Omit<BaseOrganizationProfileProps, 'organization'> & {
+  /**
+   * Component to show when there's an error loading organization data.
+   */
+  errorFallback?: ReactElement;
+
+  /**
+   * Component to show while loading organization data.
+   */
+  loadingFallback?: ReactElement;
+
+  /**
+   * The ID of the organization to fetch and display.
+   */
+  organizationId: string;
+};
+
+/**
+ * OrganizationProfile component displays organization information in a
+ * structured and styled format. It automatically fetches organization details
+ * using the provided organization ID and displays them using BaseOrganizationProfile.
+ *
+ * This component is the React-specific implementation that automatically
+ * retrieves the organization data from Asgardeo API.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <OrganizationProfile organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1" />
+ *
+ * // With card layout and custom fallbacks
+ * <OrganizationProfile
+ *   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
+ *   cardLayout={true}
+ *   loadingFallback={<div>Loading organization...</div>}
+ *   errorFallback={<div>Failed to load organization</div>}
+ *   fallback={<div>No organization data available</div>}
+ * />
+ * ```
+ */
+const OrganizationProfile: FC<OrganizationProfileProps> = ({
+  organizationId,
+  loadingFallback = <div>Loading organization...</div>,
+  errorFallback = <div>Failed to load organization data</div>,
+  ...rest
+}: OrganizationProfileProps): ReactElement => {
+  const {baseUrl} = useAsgardeo();
+  const [organization, setOrganization] = useState<OrganizationDetails | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<boolean>(false);
+
+  useEffect(() => {
+    const fetchOrganization = async () => {
+      if (!baseUrl || !organizationId) {
+        setLoading(false);
+        setError(true);
+        return;
+      }
+
+      try {
+        setLoading(true);
+        setError(false);
+        const orgData = await getOrganization({
+          baseUrl,
+          organizationId,
+        });
+        setOrganization(orgData);
+      } catch (err) {
+        console.error('Failed to fetch organization:', err);
+        setError(true);
+        setOrganization(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchOrganization();
+  }, [baseUrl, organizationId]);
+
+  if (loading) {
+    return loadingFallback;
+  }
+
+  if (error) {
+    return errorFallback;
+  }
+
+  return <BaseOrganizationProfile organization={organization} {...rest} />;
+};
+
+export default OrganizationProfile;
diff --git a/packages/react/src/components/presentation/OrganizationProfile/index.ts b/packages/react/src/components/presentation/OrganizationProfile/index.ts
new file mode 100644
index 000000000..7f5be7e25
--- /dev/null
+++ b/packages/react/src/components/presentation/OrganizationProfile/index.ts
@@ -0,0 +1,21 @@
+/**
+ * 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 BaseOrganizationProfile, type BaseOrganizationProfileProps} from './BaseOrganizationProfile.js';
+export {default as OrganizationProfile, type OrganizationProfileProps} from './OrganizationProfile.js';
+export {type OrganizationDetails} from '../../../api/scim2/getOrganization.js';
diff --git a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
index 2cebf43ae..1d5275cb8 100644
--- a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
+++ b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
@@ -389,7 +389,7 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
               code,
               state,
             },
-            actionId: component.id,
+            actionId: '',
           } as any;
 
           try {
@@ -469,7 +469,7 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
                     code,
                     state,
                   },
-                  actionId: component.id,
+                  actionId: '',
                 } as any;
 
                 try {
diff --git a/packages/react/src/contexts/Theme/types.ts b/packages/react/src/contexts/Theme/types.ts
index bc81f7e3d..4ba3a0e70 100644
--- a/packages/react/src/contexts/Theme/types.ts
+++ b/packages/react/src/contexts/Theme/types.ts
@@ -17,14 +17,38 @@
  */
 
 export interface ThemeColors {
-  primary: string;
-  background: string;
-  surface: string;
+  primary: {
+    main: string;
+    contrastText: string;
+  };
+  secondary: {
+    main: string;
+    contrastText: string;
+  };
+  background: {
+    surface: string;
+    disabled: string;
+    body: {
+      main: string;
+    };
+  };
   text: {
     primary: string;
     secondary: string;
   };
   border: string;
+  error: {
+    main: string;
+    contrastText: string;
+  };
+  success: {
+    main: string;
+    contrastText: string;
+  };
+  warning: {
+    main: string;
+    contrastText: string;
+  };
 }
 
 export interface ThemeConfig {
@@ -37,6 +61,11 @@ export interface ThemeConfig {
     medium: string;
     large: string;
   };
+  shadows: {
+    small: string;
+    medium: string;
+    large: string;
+  };
 }
 
 export interface Theme extends ThemeConfig {

From 5637352e01eb7b0d12249e77348fe7480854579d Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 24 Jun 2025 01:23:31 +0530
Subject: [PATCH 69/96] chore(javascript): Refactor theme types to improve
 structure and add missing properties

---
 packages/javascript/src/theme/createTheme.ts |  2 +-
 packages/javascript/src/theme/types.ts       | 48 ++++++++++----------
 packages/nextjs/src/AsgardeoNextClient.ts    |  8 ++++
 packages/react/src/contexts/Theme/types.ts   | 48 ++++++++++----------
 4 files changed, 57 insertions(+), 49 deletions(-)

diff --git a/packages/javascript/src/theme/createTheme.ts b/packages/javascript/src/theme/createTheme.ts
index ee62482a0..53fb38d98 100644
--- a/packages/javascript/src/theme/createTheme.ts
+++ b/packages/javascript/src/theme/createTheme.ts
@@ -16,8 +16,8 @@
  * under the License.
  */
 
-import { RecursivePartial } from '../models/utility-types';
 import {Theme, ThemeConfig} from './types';
+import {RecursivePartial} from '../models/utility-types';
 
 const lightTheme: ThemeConfig = {
   colors: {
diff --git a/packages/javascript/src/theme/types.ts b/packages/javascript/src/theme/types.ts
index 7c4271e0a..6d4cf5d61 100644
--- a/packages/javascript/src/theme/types.ts
+++ b/packages/javascript/src/theme/types.ts
@@ -17,54 +17,54 @@
  */
 
 export interface ThemeColors {
-  primary: {
-    main: string;
-    contrastText: string;
-  };
-  secondary: {
-    main: string;
-    contrastText: string;
-  };
   background: {
-    surface: string;
-    disabled: string;
     body: {
       main: string;
     };
-  };
-  text: {
-    primary: string;
-    secondary: string;
+    disabled: string;
+    surface: string;
   };
   border: string;
   error: {
+    contrastText: string;
     main: string;
+  };
+  primary: {
     contrastText: string;
+    main: string;
   };
-  success: {
+  secondary: {
+    contrastText: string;
     main: string;
+  };
+  success: {
     contrastText: string;
+    main: string;
+  };
+  text: {
+    primary: string;
+    secondary: string;
   };
   warning: {
-    main: string;
     contrastText: string;
+    main: string;
   };
 }
 
 export interface ThemeConfig {
-  colors: ThemeColors;
-  spacing: {
-    unit: number;
-  };
   borderRadius: {
-    small: string;
-    medium: string;
     large: string;
+    medium: string;
+    small: string;
   };
+  colors: ThemeColors;
   shadows: {
-    small: string;
-    medium: string;
     large: string;
+    medium: string;
+    small: string;
+  };
+  spacing: {
+    unit: number;
   };
 }
 
diff --git a/packages/nextjs/src/AsgardeoNextClient.ts b/packages/nextjs/src/AsgardeoNextClient.ts
index ad1446c2a..e48a5b3ac 100644
--- a/packages/nextjs/src/AsgardeoNextClient.ts
+++ b/packages/nextjs/src/AsgardeoNextClient.ts
@@ -81,6 +81,14 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
     throw new Error('Method not implemented.');
   }
 
+  override switchOrganization(organization: Organization): Promise<void> {
+    throw new Error('Method not implemented.');
+  }
+
+  override getCurrentOrganization(): Promise<Organization | null> {
+    throw new Error('Method not implemented.');
+  }
+
   override isLoading(): boolean {
     return false;
   }
diff --git a/packages/react/src/contexts/Theme/types.ts b/packages/react/src/contexts/Theme/types.ts
index 4ba3a0e70..8e9b5d157 100644
--- a/packages/react/src/contexts/Theme/types.ts
+++ b/packages/react/src/contexts/Theme/types.ts
@@ -17,54 +17,54 @@
  */
 
 export interface ThemeColors {
-  primary: {
-    main: string;
-    contrastText: string;
-  };
-  secondary: {
-    main: string;
-    contrastText: string;
-  };
   background: {
-    surface: string;
-    disabled: string;
     body: {
       main: string;
     };
-  };
-  text: {
-    primary: string;
-    secondary: string;
+    disabled: string;
+    surface: string;
   };
   border: string;
   error: {
+    contrastText: string;
     main: string;
+  };
+  primary: {
     contrastText: string;
+    main: string;
   };
-  success: {
+  secondary: {
+    contrastText: string;
     main: string;
+  };
+  success: {
     contrastText: string;
+    main: string;
+  };
+  text: {
+    primary: string;
+    secondary: string;
   };
   warning: {
-    main: string;
     contrastText: string;
+    main: string;
   };
 }
 
 export interface ThemeConfig {
-  colors: ThemeColors;
-  spacing: {
-    unit: number;
-  };
   borderRadius: {
-    small: string;
-    medium: string;
     large: string;
+    medium: string;
+    small: string;
   };
+  colors: ThemeColors;
   shadows: {
-    small: string;
-    medium: string;
     large: string;
+    medium: string;
+    small: string;
+  };
+  spacing: {
+    unit: number;
   };
 }
 

From 63b61b480ddcd4a6c7edfbebf52af47d779719df Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 24 Jun 2025 02:59:09 +0530
Subject: [PATCH 70/96] feat(react): Add organization management functionality
 and profile display in OrganizationSwitcher

---
 .../BaseOrganizationSwitcher.tsx              | 201 ++++++++++++------
 .../OrganizationSwitcher.tsx                  |  44 +++-
 2 files changed, 174 insertions(+), 71 deletions(-)

diff --git a/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx b/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
index 14a36f09e..b37fc6f98 100644
--- a/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
+++ b/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
@@ -331,18 +331,23 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
     return fallback;
   }
 
-  const handleOrganizationSwitch = (organization: Organization) => {
+  const handleOrganizationSwitch = (organization: Organization): void => {
     onOrganizationSwitch(organization);
     setIsOpen(false);
   };
 
-  const handleMenuItemClick = (item: MenuItem) => {
+  const handleMenuItemClick = (item: MenuItem): void => {
     if (item.onClick) {
       item.onClick();
     }
     setIsOpen(false);
   };
 
+  // Filter out current organization from switchable list
+  const switchableOrganizations: Organization[] = organizations.filter(
+    (org: Organization): boolean => org.id !== currentOrganization?.id,
+  );
+
   const defaultRenderOrganization = (organization: Organization, isSelected: boolean) => (
     <>
       <Avatar
@@ -445,20 +450,88 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
               style={{...floatingStyles, ...styles.dropdownContent}}
               {...getFloatingProps()}
             >
-              {/* Header */}
-              <div className={withVendorCSSClassPrefix('organization-switcher__header')} style={styles.dropdownHeader}>
-                <Typography
-                  variant="caption"
-                  fontWeight={600}
+              {/* Header - Current Organization */}
+              {currentOrganization && (
+                <div
+                  className={withVendorCSSClassPrefix('organization-switcher__header')}
+                  style={styles.dropdownHeader}
+                >
+                  <Avatar
+                    variant="square"
+                    imageUrl={currentOrganization.avatar}
+                    name={currentOrganization.name}
+                    size={avatarSize * 1.5}
+                    alt={`${currentOrganization.name} avatar`}
+                  />
+                  <div
+                    className={withVendorCSSClassPrefix('organization-switcher__header-info')}
+                    style={styles.organizationInfo}
+                  >
+                    <Typography
+                      noWrap
+                      className={withVendorCSSClassPrefix('organization-switcher__header-name')}
+                      variant="body1"
+                      fontWeight="medium"
+                      style={styles.organizationName}
+                    >
+                      {currentOrganization.name}
+                    </Typography>
+                    <div style={styles.organizationMeta}>
+                      {showMemberCount && currentOrganization.memberCount !== undefined && (
+                        <Typography
+                          noWrap
+                          className={withVendorCSSClassPrefix('organization-switcher__header-meta')}
+                          variant="caption"
+                          color="secondary"
+                        >
+                          {currentOrganization.memberCount}{' '}
+                          {currentOrganization.memberCount === 1
+                            ? t('organization.switcher.member')
+                            : t('organization.switcher.members')}
+                          {showRole && currentOrganization.role && <span> • {currentOrganization.role}</span>}
+                        </Typography>
+                      )}
+                      {showRole &&
+                        currentOrganization.role &&
+                        (!showMemberCount || currentOrganization.memberCount === undefined) && (
+                          <Typography
+                            noWrap
+                            className={withVendorCSSClassPrefix('organization-switcher__header-role')}
+                            variant="caption"
+                            color="secondary"
+                            style={{textTransform: 'capitalize'}}
+                          >
+                            {currentOrganization.role}
+                          </Typography>
+                        )}
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Section Header for Other Organizations */}
+              {organizations.length > 1 && (
+                <div
                   style={{
-                    textTransform: 'uppercase',
-                    letterSpacing: '0.05em',
-                    color: theme.colors.text.secondary,
+                    ...styles.dropdownHeader,
+                    borderTop: currentOrganization ? `1px solid ${theme.colors.border}` : 'none',
+                    borderBottom: 'none',
+                    paddingBottom: `${theme.spacing.unit / 2}px`,
                   }}
                 >
-                  {t('organization.switcher.switch.organization')}
-                </Typography>
-              </div>
+                  <Typography
+                    variant="caption"
+                    fontWeight={600}
+                    style={{
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.05em',
+                      color: theme.colors.text.secondary,
+                    }}
+                  >
+                    {t('organization.switcher.switch.organization')}
+                  </Typography>
+                </div>
+              )}
 
               {/* Content */}
               <div className={withVendorCSSClassPrefix('organization-switcher__menu')} style={styles.dropdownMenu}>
@@ -476,12 +549,12 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
                   )
                 ) : (
                   <>
-                    {organizations.map(organization => {
-                      const isSelected = currentOrganization?.id === organization.id;
+                    {switchableOrganizations.map((organization: Organization): ReactElement => {
+                      const isSelected: boolean = false; // Never selected since we exclude current org
                       return (
                         <Button
                           key={organization.id}
-                          onClick={() => handleOrganizationSwitch(organization)}
+                          onClick={(): void => handleOrganizationSwitch(organization)}
                           className={withVendorCSSClassPrefix('organization-switcher__menu-item')}
                           color="tertiary"
                           variant="text"
@@ -489,12 +562,12 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
                           style={{
                             ...styles.menuItem,
                             backgroundColor:
-                              hoveredItemIndex === organizations.indexOf(organization)
+                              hoveredItemIndex === switchableOrganizations.indexOf(organization)
                                 ? hoverBackgroundColor
                                 : 'transparent',
                           }}
-                          onMouseEnter={() => setHoveredItemIndex(organizations.indexOf(organization))}
-                          onMouseLeave={() => setHoveredItemIndex(null)}
+                          onMouseEnter={(): void => setHoveredItemIndex(switchableOrganizations.indexOf(organization))}
+                          onMouseLeave={(): void => setHoveredItemIndex(null)}
                         >
                           {renderOrganization
                             ? renderOrganization(organization, isSelected)
@@ -510,50 +583,52 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
                           className={withVendorCSSClassPrefix('organization-switcher__menu-divider')}
                           style={styles.divider}
                         />
-                        {menuItems.map((item, index) => (
-                          <div key={index}>
-                            {item.href ? (
-                              <a
-                                href={item.href}
-                                style={{
-                                  ...styles.menuItem,
-                                  backgroundColor:
-                                    hoveredItemIndex === organizations.length + index
-                                      ? hoverBackgroundColor
-                                      : 'transparent',
-                                }}
-                                className={withVendorCSSClassPrefix('organization-switcher__menu-item')}
-                                onMouseEnter={() => setHoveredItemIndex(organizations.length + index)}
-                                onMouseLeave={() => setHoveredItemIndex(null)}
-                                onFocus={() => setHoveredItemIndex(organizations.length + index)}
-                                onBlur={() => setHoveredItemIndex(null)}
-                              >
-                                {item.icon}
-                                <span>{item.label}</span>
-                              </a>
-                            ) : (
-                              <Button
-                                onClick={() => handleMenuItemClick(item)}
-                                style={{
-                                  ...styles.menuItem,
-                                  backgroundColor:
-                                    hoveredItemIndex === organizations.length + index
-                                      ? hoverBackgroundColor
-                                      : 'transparent',
-                                }}
-                                className={withVendorCSSClassPrefix('organization-switcher__menu-item')}
-                                color="tertiary"
-                                variant="text"
-                                size="small"
-                                startIcon={item.icon}
-                                onMouseEnter={() => setHoveredItemIndex(organizations.length + index)}
-                                onMouseLeave={() => setHoveredItemIndex(null)}
-                              >
-                                {item.label}
-                              </Button>
-                            )}
-                          </div>
-                        ))}
+                        {menuItems.map(
+                          (item, index: number): ReactElement => (
+                            <div key={index}>
+                              {item.href ? (
+                                <a
+                                  href={item.href}
+                                  style={{
+                                    ...styles.menuItem,
+                                    backgroundColor:
+                                      hoveredItemIndex === switchableOrganizations.length + index
+                                        ? hoverBackgroundColor
+                                        : 'transparent',
+                                  }}
+                                  className={withVendorCSSClassPrefix('organization-switcher__menu-item')}
+                                  onMouseEnter={(): void => setHoveredItemIndex(switchableOrganizations.length + index)}
+                                  onMouseLeave={(): void => setHoveredItemIndex(null)}
+                                  onFocus={(): void => setHoveredItemIndex(switchableOrganizations.length + index)}
+                                  onBlur={(): void => setHoveredItemIndex(null)}
+                                >
+                                  {item.icon}
+                                  <span>{item.label}</span>
+                                </a>
+                              ) : (
+                                <Button
+                                  onClick={(): void => handleMenuItemClick(item)}
+                                  style={{
+                                    ...styles.menuItem,
+                                    backgroundColor:
+                                      hoveredItemIndex === switchableOrganizations.length + index
+                                        ? hoverBackgroundColor
+                                        : 'transparent',
+                                  }}
+                                  className={withVendorCSSClassPrefix('organization-switcher__menu-item')}
+                                  color="tertiary"
+                                  variant="text"
+                                  size="small"
+                                  startIcon={item.icon}
+                                  onMouseEnter={(): void => setHoveredItemIndex(switchableOrganizations.length + index)}
+                                  onMouseLeave={(): void => setHoveredItemIndex(null)}
+                                >
+                                  {item.label}
+                                </Button>
+                              )}
+                            </div>
+                          ),
+                        )}
                       </>
                     )}
                   </>
diff --git a/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx b/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
index 9f648da26..5b1078d9a 100644
--- a/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
+++ b/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
@@ -23,6 +23,7 @@ import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
 import useOrganization from '../../../contexts/Organization/useOrganization';
 import useTranslation from '../../../hooks/useTranslation';
 import {CreateOrganization} from '../CreateOrganization/CreateOrganization';
+import OrganizationProfile from '../OrganizationProfile/OrganizationProfile';
 
 /**
  * Props interface for the OrganizationSwitcher component.
@@ -91,6 +92,7 @@ export const OrganizationSwitcher: FC<OrganizationSwitcherProps> = ({
     error,
   } = useOrganization();
   const [isCreateOrgOpen, setIsCreateOrgOpen] = useState(false);
+  const [isProfileOpen, setIsProfileOpen] = useState(false);
   const {t} = useTranslation();
 
   // Don't render if not authenticated
@@ -108,18 +110,36 @@ export const OrganizationSwitcher: FC<OrganizationSwitcherProps> = ({
   const onOrganizationSwitch: (organization: Organization) => Promise<void> | void =
     propOnOrganizationSwitch || switchOrganization;
 
-  // Add "Create Organization" menu item
-  const defaultMenuItems = [
-    {
-      label: t('organization.switcher.create.organization'),
-      onClick: () => setIsCreateOrgOpen(true),
+  const handleManageOrganization = (): void => {
+    setIsProfileOpen(true);
+  };
+
+  // Add menu items - using the same MenuItem interface from BaseOrganizationSwitcher
+  const defaultMenuItems: Array<{icon?: ReactElement; label: string; onClick: () => void}> = [];
+
+  // Add "Manage Organization" menu item if there's a current organization
+  if (currentOrganization) {
+    defaultMenuItems.push({
       icon: (
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <path d="M12 5v14m-7-7h14" />
+          <path 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>
       ),
-    },
-  ];
+      label: 'Manage Organization',
+      onClick: handleManageOrganization,
+    });
+  }
+
+  // Add "Create Organization" menu item
+  defaultMenuItems.push({
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M12 5v14m-7-7h14" />
+      </svg>
+    ),
+    label: t('organization.switcher.create.organization'),
+    onClick: (): void => setIsCreateOrgOpen(true),
+  });
 
   const menuItems = props.menuItems ? [...defaultMenuItems, ...props.menuItems] : defaultMenuItems;
 
@@ -146,6 +166,14 @@ export const OrganizationSwitcher: FC<OrganizationSwitcherProps> = ({
           setIsCreateOrgOpen(false);
         }}
       />
+      {currentOrganization && (
+        <OrganizationProfile
+          organizationId={currentOrganization.id}
+          cardLayout={true}
+          loadingFallback={<div>Loading organization...</div>}
+          errorFallback={<div>Failed to load organization</div>}
+        />
+      )}
     </>
   );
 };

From 118b1a97ee8ef019c08542efc080c5634bb36882 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 24 Jun 2025 03:00:13 +0530
Subject: [PATCH 71/96] feat(react): Refactor organization creation and profile
 pages, update imports, and enhance sign-in page layout

---
 samples/teamspace-react/src/App.tsx           |   2 +-
 .../header/AuthenticatedActions.tsx           |   2 +-
 .../src/components/header/PublicActions.tsx   |   1 +
 samples/teamspace-react/src/main.tsx          |  13 +-
 .../src/pages/CreateOrganization.tsx          | 197 ------------------
 .../src/pages/CreateOrganizationPage.tsx      |  33 +++
 samples/teamspace-react/src/pages/Profile.tsx |  24 ++-
 .../teamspace-react/src/pages/SignInPage.tsx  |  76 -------
 8 files changed, 70 insertions(+), 278 deletions(-)
 delete mode 100644 samples/teamspace-react/src/pages/CreateOrganization.tsx
 create mode 100644 samples/teamspace-react/src/pages/CreateOrganizationPage.tsx

diff --git a/samples/teamspace-react/src/App.tsx b/samples/teamspace-react/src/App.tsx
index 42a70afe7..a6c78f074 100644
--- a/samples/teamspace-react/src/App.tsx
+++ b/samples/teamspace-react/src/App.tsx
@@ -5,7 +5,7 @@ import {useState, createContext, useContext} from 'react';
 import DashboardPage from './pages/Dashboard';
 import ProfilePage from './pages/Profile';
 import OrganizationsPage from './pages/Organizations';
-import CreateOrganizationPage from './pages/CreateOrganization';
+import CreateOrganizationPage from './pages/CreateOrganizationPage';
 import SignInPage from './pages/SignInPage';
 import LandingPage from './pages/LandingPage';
 import LandingLayout from './layouts/LandingLayout';
diff --git a/samples/teamspace-react/src/components/header/AuthenticatedActions.tsx b/samples/teamspace-react/src/components/header/AuthenticatedActions.tsx
index fa284ccd1..fe2f822ca 100644
--- a/samples/teamspace-react/src/components/header/AuthenticatedActions.tsx
+++ b/samples/teamspace-react/src/components/header/AuthenticatedActions.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import OrganizationSwitcher from './OrganizationSwitcher';
+import {OrganizationSwitcher} from '@asgardeo/react';
 import UserDropdown from './UserDropdown';
 
 interface AuthenticatedActionsProps {
diff --git a/samples/teamspace-react/src/components/header/PublicActions.tsx b/samples/teamspace-react/src/components/header/PublicActions.tsx
index fce6f1b13..429cf8873 100644
--- a/samples/teamspace-react/src/components/header/PublicActions.tsx
+++ b/samples/teamspace-react/src/components/header/PublicActions.tsx
@@ -39,6 +39,7 @@ export default function PublicActions({className = '', showMobileActions = false
     <div className={`flex items-center space-x-4 ${className}`}>
       {/* Desktop CTA */}
       <div className="hidden md:flex items-center space-x-4">
+        <SignInButton>Sign In with Redirect</SignInButton>
         <SignInButton>
           {({isLoading}) => (
             <Button
diff --git a/samples/teamspace-react/src/main.tsx b/samples/teamspace-react/src/main.tsx
index 042b488b5..fad07e38f 100644
--- a/samples/teamspace-react/src/main.tsx
+++ b/samples/teamspace-react/src/main.tsx
@@ -11,7 +11,18 @@ createRoot(document.getElementById('root')!).render(
       afterSignInUrl={import.meta.env.VITE_ASGARDEO_AFTER_SIGN_IN_URL}
       afterSignOutUrl={import.meta.env.VITE_ASGARDEO_AFTER_SIGN_OUT_URL}
       clientId={import.meta.env.VITE_ASGARDEO_CLIENT_ID}
-      scopes={['openid', 'address', 'email', 'profile', 'user:email', 'read:user']}
+      scopes={[
+        'openid',
+        'address',
+        'email',
+        'profile',
+        'user:email',
+        'read:user',
+        'internal_organization_create',
+        'internal_organization_view',
+        'internal_organization_update',
+        'internal_organization_delete',
+      ]}
       preferences={{
         theme: {
           mode: 'light',
diff --git a/samples/teamspace-react/src/pages/CreateOrganization.tsx b/samples/teamspace-react/src/pages/CreateOrganization.tsx
deleted file mode 100644
index ba613075a..000000000
--- a/samples/teamspace-react/src/pages/CreateOrganization.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-'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/samples/teamspace-react/src/pages/CreateOrganizationPage.tsx b/samples/teamspace-react/src/pages/CreateOrganizationPage.tsx
new file mode 100644
index 000000000..6a2c32373
--- /dev/null
+++ b/samples/teamspace-react/src/pages/CreateOrganizationPage.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import {useNavigate} from 'react-router-dom';
+import {CreateOrganization} from '@asgardeo/react';
+import {ArrowLeft} from 'lucide-react';
+
+export default function CreateOrganizationPage() {
+  const navigate = useNavigate();
+
+  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">
+        <CreateOrganization />
+      </div>
+    </div>
+  );
+}
diff --git a/samples/teamspace-react/src/pages/Profile.tsx b/samples/teamspace-react/src/pages/Profile.tsx
index 976ce6d59..9b7805dba 100644
--- a/samples/teamspace-react/src/pages/Profile.tsx
+++ b/samples/teamspace-react/src/pages/Profile.tsx
@@ -1,11 +1,31 @@
 'use client';
 
 import {UserProfile} from '@asgardeo/react';
+import {ArrowLeft} from 'lucide-react';
+import {useNavigate} from 'react-router-dom';
 
 export default function Profile() {
+  const navigate = useNavigate();
+
   return (
-    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      <UserProfile />
+    <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('/dashboard')}
+          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 dashboard
+        </button>
+        <h1 className="text-3xl font-bold text-gray-900">Profile</h1>
+        <p className="text-gray-600 mt-2">
+          Manage your profile information, including your display name, email, and other details.
+        </p>
+      </div>
+      <div className="bg-white rounded-lg shadow-sm border border-gray-200">
+        <UserProfile />
+      </div>
     </div>
   );
 }
diff --git a/samples/teamspace-react/src/pages/SignInPage.tsx b/samples/teamspace-react/src/pages/SignInPage.tsx
index 4602e6652..8c561c524 100644
--- a/samples/teamspace-react/src/pages/SignInPage.tsx
+++ b/samples/teamspace-react/src/pages/SignInPage.tsx
@@ -19,82 +19,6 @@ export default function SignInPage() {
 
         <SignIn />
 
-        {/* <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>
-
-              <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

From e8edb2dc637475c2b4f5465460bc47754b1951a1 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 24 Jun 2025 11:17:28 +0530
Subject: [PATCH 72/96] feat(react): Implement organization management
 functionality with pagination support and enhance organization list
 components

---
 .../src/api/scim2/getAllOrganizations.ts      | 119 +++++++
 .../OrganizationList/BaseOrganizationList.tsx | 302 ++++++++++++++++++
 .../OrganizationList/OrganizationList.tsx     | 170 ++++++++++
 packages/react/src/hooks/useOrganizations.ts  | 263 +++++++++++++++
 packages/react/src/index.ts                   |   9 +
 5 files changed, 863 insertions(+)
 create mode 100644 packages/react/src/api/scim2/getAllOrganizations.ts
 create mode 100644 packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx
 create mode 100644 packages/react/src/components/presentation/OrganizationList/OrganizationList.tsx
 create mode 100644 packages/react/src/hooks/useOrganizations.ts

diff --git a/packages/react/src/api/scim2/getAllOrganizations.ts b/packages/react/src/api/scim2/getAllOrganizations.ts
new file mode 100644
index 000000000..df76918cd
--- /dev/null
+++ b/packages/react/src/api/scim2/getAllOrganizations.ts
@@ -0,0 +1,119 @@
+/**
+ * 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, HttpInstance, AsgardeoSPAClient, HttpRequestConfig, Organization} from '@asgardeo/browser';
+
+const httpClient: HttpInstance = AsgardeoSPAClient.getInstance().httpRequest.bind(AsgardeoSPAClient.getInstance());
+
+/**
+ * Interface for paginated organization response.
+ */
+export interface PaginatedOrganizationsResponse {
+  hasMore?: boolean;
+  nextCursor?: string;
+  organizations: Organization[];
+  totalCount?: number;
+}
+
+/**
+ * Retrieves all organizations with pagination support.
+ *
+ * @param config - Configuration object containing baseUrl, optional query parameters, and request config.
+ * @returns A promise that resolves with the paginated organizations information.
+ * @example
+ * ```typescript
+ * try {
+ *   const response = await getAllOrganizations({
+ *     baseUrl: "https://api.asgardeo.io/t/<ORGANIZATION>",
+ *     filter: "",
+ *     limit: 10,
+ *     recursive: false
+ *   });
+ *   console.log(response.organizations);
+ * } catch (error) {
+ *   if (error instanceof AsgardeoAPIError) {
+ *     console.error('Failed to get organizations:', error.message);
+ *   }
+ * }
+ * ```
+ */
+const getAllOrganizations = async ({
+  baseUrl,
+  filter = '',
+  limit = 10,
+  recursive = false,
+  ...requestConfig
+}: Partial<Request> & {
+  baseUrl: string;
+  filter?: string;
+  limit?: number;
+  recursive?: boolean;
+}): Promise<PaginatedOrganizationsResponse> => {
+  if (!baseUrl) {
+    throw new AsgardeoAPIError(
+      'Base URL is required',
+      'getAllOrganizations-ValidationError-001',
+      'javascript',
+      400,
+      'Invalid Request',
+    );
+  }
+
+  const queryParams: URLSearchParams = new URLSearchParams(
+    Object.fromEntries(
+      Object.entries({
+        filter,
+        limit: limit.toString(),
+        recursive: recursive.toString(),
+      }).filter(([, value]: [string, string]) => Boolean(value)),
+    ),
+  );
+
+  const response: any = await httpClient({
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    },
+    method: 'GET',
+    url: `${baseUrl}/api/server/v1/organizations?${queryParams.toString()}`,
+    ...requestConfig,
+  } as HttpRequestConfig);
+
+  if (!response.data) {
+    const errorText: string = await response.text();
+
+    throw new AsgardeoAPIError(
+      errorText || 'Failed to get organizations',
+      'getAllOrganizations-NetworkError-001',
+      'javascript',
+      response.status,
+      response.statusText,
+    );
+  }
+
+  const {data}: any = response;
+
+  return {
+    hasMore: data.hasMore,
+    nextCursor: data.nextCursor,
+    organizations: data.organizations || [],
+    totalCount: data.totalCount,
+  };
+};
+
+export default getAllOrganizations;
diff --git a/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx b/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx
new file mode 100644
index 000000000..8e1772c8e
--- /dev/null
+++ b/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx
@@ -0,0 +1,302 @@
+/**
+ * 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, ReactElement, ReactNode} from 'react';
+import {OrganizationWithSwitchAccess} from '../../../hooks/useOrganizations';
+
+/**
+ * Props interface for the BaseOrganizationList component.
+ */
+export interface BaseOrganizationListProps {
+  /**
+   * Additional CSS class names to apply to the container
+   */
+  className?: string;
+  /**
+   * List of organizations with switch access information
+   */
+  data: OrganizationWithSwitchAccess[];
+  /**
+   * Error message to display
+   */
+  error?: string | null;
+  /**
+   * Function called when "Load More" is clicked
+   */
+  fetchMore?: () => Promise<void>;
+  /**
+   * Whether there are more organizations to load
+   */
+  hasMore?: boolean;
+  /**
+   * Whether the initial data is loading
+   */
+  isLoading?: boolean;
+  /**
+   * Whether more data is being loaded
+   */
+  isLoadingMore?: boolean;
+  /**
+   * Function called when refresh is requested
+   */
+  onRefresh?: () => Promise<void>;
+  /**
+   * Custom renderer for each organization item
+   */
+  renderOrganization?: (organization: OrganizationWithSwitchAccess, index: number) => ReactNode;
+  /**
+   * Custom renderer for the error state
+   */
+  renderError?: (error: string) => ReactNode;
+  /**
+   * Custom renderer for the loading state
+   */
+  renderLoading?: () => ReactNode;
+  /**
+   * Custom renderer for the load more button
+   */
+  renderLoadMore?: (onLoadMore: () => Promise<void>, isLoading: boolean) => ReactNode;
+  /**
+   * Custom renderer for when no organizations are found
+   */
+  renderEmpty?: () => ReactNode;
+  /**
+   * Inline styles to apply to the container
+   */
+  style?: React.CSSProperties;
+  /**
+   * Total number of organizations
+   */
+  totalCount?: number;
+}
+
+/**
+ * Default organization item renderer
+ */
+const defaultRenderOrganization = (organization: OrganizationWithSwitchAccess): ReactNode => (
+  <div
+    key={organization.id}
+    style={{
+      border: '1px solid #e5e7eb',
+      borderRadius: '8px',
+      display: 'flex',
+      justifyContent: 'space-between',
+      padding: '16px',
+    }}
+  >
+    <div>
+      <h3 style={{fontSize: '18px', fontWeight: 'bold', margin: '0 0 8px 0'}}>{organization.name}</h3>
+      <p style={{color: '#6b7280', fontSize: '14px', margin: '0'}}>Handle: {organization.orgHandle}</p>
+      <p style={{color: '#6b7280', fontSize: '14px', margin: '4px 0 0 0'}}>
+        Status: <span style={{color: organization.status === 'ACTIVE' ? '#10b981' : '#ef4444'}}>{organization.status}</span>
+      </p>
+    </div>
+    <div style={{alignItems: 'center', display: 'flex'}}>
+      {organization.canSwitch ? (
+        <span
+          style={{
+            backgroundColor: '#dcfce7',
+            borderRadius: '16px',
+            color: '#16a34a',
+            fontSize: '12px',
+            fontWeight: 'medium',
+            padding: '4px 12px',
+          }}
+        >
+          Can Switch
+        </span>
+      ) : (
+        <span
+          style={{
+            backgroundColor: '#fee2e2',
+            borderRadius: '16px',
+            color: '#dc2626',
+            fontSize: '12px',
+            fontWeight: 'medium',
+            padding: '4px 12px',
+          }}
+        >
+          No Access
+        </span>
+      )}
+    </div>
+  </div>
+);
+
+/**
+ * Default loading renderer
+ */
+const defaultRenderLoading = (): ReactNode => (
+  <div style={{padding: '32px', textAlign: 'center'}}>
+    <div>Loading organizations...</div>
+  </div>
+);
+
+/**
+ * Default error renderer
+ */
+const defaultRenderError = (error: string): ReactNode => (
+  <div
+    style={{
+      backgroundColor: '#fef2f2',
+      border: '1px solid #fecaca',
+      borderRadius: '8px',
+      color: '#dc2626',
+      padding: '16px',
+    }}
+  >
+    <strong>Error:</strong> {error}
+  </div>
+);
+
+/**
+ * Default load more button renderer
+ */
+const defaultRenderLoadMore = (onLoadMore: () => Promise<void>, isLoading: boolean): ReactNode => (
+  <button
+    onClick={onLoadMore}
+    disabled={isLoading}
+    style={{
+      backgroundColor: isLoading ? '#d1d5db' : '#3b82f6',
+      border: 'none',
+      borderRadius: '8px',
+      color: 'white',
+      cursor: isLoading ? 'not-allowed' : 'pointer',
+      fontSize: '14px',
+      fontWeight: 'medium',
+      padding: '12px 24px',
+      width: '100%',
+    }}
+    type="button"
+  >
+    {isLoading ? 'Loading...' : 'Load More Organizations'}
+  </button>
+);
+
+/**
+ * Default empty state renderer
+ */
+const defaultRenderEmpty = (): ReactNode => (
+  <div style={{padding: '32px', textAlign: 'center'}}>
+    <div style={{color: '#6b7280', fontSize: '16px'}}>No organizations found</div>
+  </div>
+);
+
+/**
+ * BaseOrganizationList component displays a list of organizations with pagination support.
+ * This component serves as the base for framework-specific implementations.
+ *
+ * @example
+ * ```tsx
+ * <BaseOrganizationList
+ *   data={organizations}
+ *   isLoading={isLoading}
+ *   hasMore={hasMore}
+ *   fetchMore={fetchMore}
+ *   error={error}
+ * />
+ * ```
+ */
+export const BaseOrganizationList: FC<BaseOrganizationListProps> = ({
+  className = '',
+  data,
+  error,
+  fetchMore,
+  hasMore = false,
+  isLoading = false,
+  isLoadingMore = false,
+  onRefresh,
+  renderEmpty = defaultRenderEmpty,
+  renderError = defaultRenderError,
+  renderLoading = defaultRenderLoading,
+  renderLoadMore = defaultRenderLoadMore,
+  renderOrganization = defaultRenderOrganization,
+  style,
+  totalCount,
+}): ReactElement => {
+  // Show loading state
+  if (isLoading && data.length === 0) {
+    return <div className={className} style={style}>{renderLoading()}</div>;
+  }
+
+  // Show error state
+  if (error && data.length === 0) {
+    return <div className={className} style={style}>{renderError(error)}</div>;
+  }
+
+  // Show empty state
+  if (!isLoading && data.length === 0) {
+    return <div className={className} style={style}>{renderEmpty()}</div>;
+  }
+
+  return (
+    <div className={className} style={style}>
+      {/* Header with total count and refresh button */}
+      <div style={{alignItems: 'center', display: 'flex', justifyContent: 'space-between', marginBottom: '16px'}}>
+        <div>
+          <h2 style={{fontSize: '24px', fontWeight: 'bold', margin: '0'}}>Organizations</h2>
+          {totalCount !== undefined && (
+            <p style={{color: '#6b7280', fontSize: '14px', margin: '4px 0 0 0'}}>
+              Showing {data.length} of {totalCount} organizations
+            </p>
+          )}
+        </div>
+        {onRefresh && (
+          <button
+            onClick={onRefresh}
+            style={{
+              backgroundColor: '#f3f4f6',
+              border: '1px solid #d1d5db',
+              borderRadius: '6px',
+              color: '#374151',
+              cursor: 'pointer',
+              fontSize: '14px',
+              padding: '8px 16px',
+            }}
+            type="button"
+          >
+            Refresh
+          </button>
+        )}
+      </div>
+
+      {/* Organizations list */}
+      <div style={{display: 'flex', flexDirection: 'column', gap: '12px'}}>
+        {data.map((organization: OrganizationWithSwitchAccess, index: number) =>
+          renderOrganization(organization, index)
+        )}
+      </div>
+
+      {/* Error message for additional data */}
+      {error && data.length > 0 && (
+        <div style={{marginTop: '16px'}}>
+          {renderError(error)}
+        </div>
+      )}
+
+      {/* Load more button */}
+      {hasMore && fetchMore && (
+        <div style={{marginTop: '24px'}}>
+          {renderLoadMore(fetchMore, isLoadingMore)}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BaseOrganizationList;
diff --git a/packages/react/src/components/presentation/OrganizationList/OrganizationList.tsx b/packages/react/src/components/presentation/OrganizationList/OrganizationList.tsx
new file mode 100644
index 000000000..a3a2db322
--- /dev/null
+++ b/packages/react/src/components/presentation/OrganizationList/OrganizationList.tsx
@@ -0,0 +1,170 @@
+/**
+ * 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, ReactElement} from 'react';
+import BaseOrganizationList, {BaseOrganizationListProps} from './BaseOrganizationList';
+import useOrganizations, {UseOrganizationsConfig} from '../../../hooks/useOrganizations';
+
+/**
+ * Props interface for the OrganizationList component.
+ * Combines BaseOrganizationListProps with UseOrganizationsConfig.
+ */
+export interface OrganizationListProps
+  extends Omit<
+      BaseOrganizationListProps,
+      'data' | 'error' | 'fetchMore' | 'hasMore' | 'isLoading' | 'isLoadingMore' | 'totalCount'
+    >,
+    UseOrganizationsConfig {
+  /**
+   * Function called when an organization is selected/clicked
+   */
+  onOrganizationSelect?: (organization: any) => void;
+}
+
+/**
+ * OrganizationList component that provides organization listing functionality with pagination.
+ * This component automatically fetches organizations and handles pagination.
+ *
+ * @example
+ * ```tsx
+ * import { OrganizationList } from '@asgardeo/react';
+ *
+ * // Basic usage
+ * <OrganizationList />
+ *
+ * // With custom limit and filter
+ * <OrganizationList
+ *   limit={20}
+ *   filter="active"
+ *   onOrganizationSelect={(org) => {
+ *     console.log('Selected organization:', org.name);
+ *   }}
+ * />
+ *
+ * // With custom organization renderer
+ * <OrganizationList
+ *   renderOrganization={(org) => (
+ *     <div key={org.id}>
+ *       <h3>{org.name}</h3>
+ *       <p>Can switch: {org.canSwitch ? 'Yes' : 'No'}</p>
+ *     </div>
+ *   )}
+ * />
+ * ```
+ */
+export const OrganizationList: FC<OrganizationListProps> = ({
+  autoFetch = true,
+  filter,
+  limit = 10,
+  onOrganizationSelect,
+  recursive = false,
+  ...baseProps
+}: OrganizationListProps): ReactElement => {
+  const {data, error, fetchMore, hasMore, isLoading, isLoadingMore, refresh, totalCount} = useOrganizations({
+    autoFetch,
+    filter,
+    limit,
+    recursive,
+  });
+
+  // Enhanced organization renderer that includes selection handler
+  const enhancedRenderOrganization = baseProps.renderOrganization
+    ? baseProps.renderOrganization
+    : onOrganizationSelect
+    ? (organization: any, index: number) => (
+        <div
+          key={organization.id}
+          onClick={() => onOrganizationSelect(organization)}
+          style={{
+            border: '1px solid #e5e7eb',
+            borderRadius: '8px',
+            cursor: 'pointer',
+            display: 'flex',
+            justifyContent: 'space-between',
+            padding: '16px',
+            transition: 'all 0.2s',
+          }}
+          onMouseEnter={e => {
+            e.currentTarget.style.backgroundColor = '#f9fafb';
+            e.currentTarget.style.borderColor = '#d1d5db';
+          }}
+          onMouseLeave={e => {
+            e.currentTarget.style.backgroundColor = 'transparent';
+            e.currentTarget.style.borderColor = '#e5e7eb';
+          }}
+        >
+          <div>
+            <h3 style={{fontSize: '18px', fontWeight: 'bold', margin: '0 0 8px 0'}}>{organization.name}</h3>
+            <p style={{color: '#6b7280', fontSize: '14px', margin: '0'}}>Handle: {organization.orgHandle}</p>
+            <p style={{color: '#6b7280', fontSize: '14px', margin: '4px 0 0 0'}}>
+              Status:{' '}
+              <span style={{color: organization.status === 'ACTIVE' ? '#10b981' : '#ef4444'}}>
+                {organization.status}
+              </span>
+            </p>
+          </div>
+          <div style={{alignItems: 'center', display: 'flex'}}>
+            {organization.canSwitch ? (
+              <span
+                style={{
+                  backgroundColor: '#dcfce7',
+                  borderRadius: '16px',
+                  color: '#16a34a',
+                  fontSize: '12px',
+                  fontWeight: 'medium',
+                  padding: '4px 12px',
+                }}
+              >
+                Can Switch
+              </span>
+            ) : (
+              <span
+                style={{
+                  backgroundColor: '#fee2e2',
+                  borderRadius: '16px',
+                  color: '#dc2626',
+                  fontSize: '12px',
+                  fontWeight: 'medium',
+                  padding: '4px 12px',
+                }}
+              >
+                No Access
+              </span>
+            )}
+          </div>
+        </div>
+      )
+    : undefined;
+
+  return (
+    <BaseOrganizationList
+      data={data}
+      error={error}
+      fetchMore={fetchMore}
+      hasMore={hasMore}
+      isLoading={isLoading}
+      isLoadingMore={isLoadingMore}
+      onRefresh={refresh}
+      renderOrganization={enhancedRenderOrganization}
+      totalCount={totalCount}
+      {...baseProps}
+    />
+  );
+};
+
+export default OrganizationList;
diff --git a/packages/react/src/hooks/useOrganizations.ts b/packages/react/src/hooks/useOrganizations.ts
new file mode 100644
index 000000000..f6083f1af
--- /dev/null
+++ b/packages/react/src/hooks/useOrganizations.ts
@@ -0,0 +1,263 @@
+/**
+ * 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 {Organization} from '@asgardeo/browser';
+import {useCallback, useEffect, useState} from 'react';
+import getAllOrganizations, {PaginatedOrganizationsResponse} from '../api/scim2/getAllOrganizations';
+import getMeOrganizations from '../api/scim2/getMeOrganizations';
+import useAsgardeo from '../contexts/Asgardeo/useAsgardeo';
+
+/**
+ * Interface for organizations with switch access information.
+ */
+export interface OrganizationWithSwitchAccess extends Organization {
+  /**
+   * Whether the user has switch access to this organization
+   */
+  canSwitch: boolean;
+}
+
+/**
+ * Configuration options for the useOrganizations hook.
+ */
+export interface UseOrganizationsConfig {
+  /**
+   * Whether to automatically fetch organizations on mount
+   */
+  autoFetch?: boolean;
+  /**
+   * Filter string for organizations
+   */
+  filter?: string;
+  /**
+   * Number of organizations to fetch per page
+   */
+  limit?: number;
+  /**
+   * Whether to include recursive organizations
+   */
+  recursive?: boolean;
+}
+
+/**
+ * Return type for the useOrganizations hook.
+ */
+export interface UseOrganizationsReturn {
+  /**
+   * Current page of organizations with switch access information
+   */
+  data: OrganizationWithSwitchAccess[];
+  /**
+   * Error message if any
+   */
+  error: string | null;
+  /**
+   * Function to fetch more organizations (pagination)
+   */
+  fetchMore: () => Promise<void>;
+  /**
+   * Whether there are more organizations to fetch
+   */
+  hasMore: boolean;
+  /**
+   * Whether the initial fetch is loading
+   */
+  isLoading: boolean;
+  /**
+   * Whether more organizations are being fetched
+   */
+  isLoadingMore: boolean;
+  /**
+   * Function to refresh the organizations list
+   */
+  refresh: () => Promise<void>;
+  /**
+   * Total count of organizations
+   */
+  totalCount: number;
+}
+
+/**
+ * Hook for fetching and managing paginated organizations with switch access information.
+ *
+ * This hook combines data from two APIs:
+ * 1. All organizations endpoint - to get the complete list of organizations
+ * 2. User organizations endpoint - to determine which organizations the user can switch to
+ *
+ * @param config - Configuration options for the hook
+ * @returns Object containing organizations data, loading states, and utility functions
+ *
+ * @example
+ * ```tsx
+ * function OrganizationList() {
+ *   const {
+ *     data: organizations,
+ *     isLoading,
+ *     hasMore,
+ *     fetchMore,
+ *     refresh
+ *   } = useOrganizations({
+ *     limit: 10,
+ *     filter: 'active'
+ *   });
+ *
+ *   if (isLoading) {
+ *     return <div>Loading...</div>;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       {organizations.map(org => (
+ *         <div key={org.id}>
+ *           {org.name} {org.canSwitch && '(Can Switch)'}
+ *         </div>
+ *       ))}
+ *       {hasMore && (
+ *         <button onClick={fetchMore}>Load More</button>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export const useOrganizations = ({
+  autoFetch = true,
+  filter = '',
+  limit = 10,
+  recursive = false,
+}: UseOrganizationsConfig = {}): UseOrganizationsReturn => {
+  const {baseUrl} = useAsgardeo();
+  const [data, setData] = useState<OrganizationWithSwitchAccess[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [hasMore, setHasMore] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
+  const [totalCount, setTotalCount] = useState<number>(0);
+  const [switchableOrgIds, setSwitchableOrgIds] = useState<Set<string>>(new Set());
+
+  /**
+   * Fetch organizations with switch access information
+   */
+  const fetchOrganizations: (isLoadMore?: boolean) => Promise<void> = useCallback(
+    async (isLoadMore = false): Promise<void> => {
+      if (!baseUrl) {
+        setError('Base URL is required');
+        return;
+      }
+
+      try {
+        if (isLoadMore) {
+          setIsLoadingMore(true);
+        } else {
+          setIsLoading(true);
+          setError(null);
+        }
+
+        // Fetch user's switchable organizations first (only once, not on load more)
+        let switchableIds: Set<string> = switchableOrgIds;
+        if (!isLoadMore || switchableIds.size === 0) {
+          try {
+            const userOrgs: Organization[] = await getMeOrganizations({
+              authorizedAppName: 'Console',
+              baseUrl,
+              limit: 100, // Get all user organizations
+              recursive,
+            });
+            switchableIds = new Set(userOrgs.map((org: Organization) => org.id));
+            setSwitchableOrgIds(switchableIds);
+          } catch {
+            // Continue with empty switchable set if user organizations fetch fails
+          }
+        }
+
+        // Fetch all organizations
+        const response: PaginatedOrganizationsResponse = await getAllOrganizations({
+          baseUrl,
+          filter,
+          limit,
+          recursive,
+        });
+
+        // Combine organization data with switch access information
+        const organizationsWithAccess: OrganizationWithSwitchAccess[] = response.organizations.map(
+          (org: Organization) => ({
+            ...org,
+            canSwitch: switchableIds.has(org.id),
+          }),
+        );
+
+        if (isLoadMore) {
+          setData((prevData: OrganizationWithSwitchAccess[]) => [...prevData, ...organizationsWithAccess]);
+        } else {
+          setData(organizationsWithAccess);
+        }
+
+        setHasMore(response.hasMore || false);
+        setTotalCount(response.totalCount || organizationsWithAccess.length);
+      } catch (fetchError: any) {
+        const errorMessage: string = fetchError.message || 'Failed to fetch organizations';
+        setError(errorMessage);
+      } finally {
+        setIsLoading(false);
+        setIsLoadingMore(false);
+      }
+    },
+    [baseUrl, filter, limit, recursive, switchableOrgIds],
+  );
+
+  /**
+   * Fetch more organizations for pagination
+   */
+  const fetchMore: () => Promise<void> = useCallback(async (): Promise<void> => {
+    if (!hasMore || isLoadingMore) {
+      return;
+    }
+    await fetchOrganizations(true);
+  }, [fetchOrganizations, hasMore, isLoadingMore]);
+
+  /**
+   * Refresh the organizations list
+   */
+  const refresh: () => Promise<void> = useCallback(async (): Promise<void> => {
+    setData([]);
+    setSwitchableOrgIds(new Set());
+    await fetchOrganizations(false);
+  }, [fetchOrganizations]);
+
+  // Auto-fetch on mount if enabled
+  useEffect(() => {
+    if (autoFetch) {
+      fetchOrganizations(false).catch(() => {
+        // Error is handled within fetchOrganizations
+      });
+    }
+  }, [autoFetch, fetchOrganizations]);
+
+  return {
+    data,
+    error,
+    fetchMore,
+    hasMore,
+    isLoading,
+    isLoadingMore,
+    refresh,
+    totalCount,
+  };
+};
+
+export default useOrganizations;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 473e4626d..0533ed2a1 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -79,6 +79,9 @@ export * from './hooks/useTranslation';
 export {default as useForm} from './hooks/useForm';
 export * from './hooks/useForm';
 
+export {default as useOrganizations} from './hooks/useOrganizations';
+export * from './hooks/useOrganizations';
+
 export {default as BaseSignInButton} from './components/actions/SignInButton/BaseSignInButton';
 export * from './components/actions/SignInButton/BaseSignInButton';
 
@@ -164,6 +167,12 @@ export * from './components/presentation/OrganizationSwitcher/BaseOrganizationSw
 export {default as OrganizationSwitcher} from './components/presentation/OrganizationSwitcher/OrganizationSwitcher';
 export * from './components/presentation/OrganizationSwitcher/OrganizationSwitcher';
 
+export {default as BaseOrganizationList} from './components/presentation/OrganizationList/BaseOrganizationList';
+export * from './components/presentation/OrganizationList/BaseOrganizationList';
+
+export {default as OrganizationList} from './components/presentation/OrganizationList/OrganizationList';
+export * from './components/presentation/OrganizationList/OrganizationList';
+
 export {BaseCreateOrganization} from './components/presentation/CreateOrganization/BaseCreateOrganization';
 export * from './components/presentation/CreateOrganization/BaseCreateOrganization';
 

From e92d1e9e550719a2c941e0b796b5913bbc49262a Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 24 Jun 2025 11:19:21 +0530
Subject: [PATCH 73/96] chore(react): Refactor BaseOrganizationList props for
 improved organization rendering and remove unused OrganizationProfile
 component

---
 .../OrganizationList/BaseOrganizationList.tsx | 51 ++++++++++---------
 .../presentation/OrganizationProfile/index.ts | 21 --------
 2 files changed, 28 insertions(+), 44 deletions(-)
 delete mode 100644 packages/react/src/components/presentation/OrganizationProfile/index.ts

diff --git a/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx b/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx
index 8e1772c8e..e622e1d96 100644
--- a/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx
+++ b/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx
@@ -56,25 +56,25 @@ export interface BaseOrganizationListProps {
    */
   onRefresh?: () => Promise<void>;
   /**
-   * Custom renderer for each organization item
+   * Custom renderer for when no organizations are found
    */
-  renderOrganization?: (organization: OrganizationWithSwitchAccess, index: number) => ReactNode;
+  renderEmpty?: () => ReactNode;
   /**
    * Custom renderer for the error state
    */
   renderError?: (error: string) => ReactNode;
-  /**
-   * Custom renderer for the loading state
-   */
-  renderLoading?: () => ReactNode;
   /**
    * Custom renderer for the load more button
    */
   renderLoadMore?: (onLoadMore: () => Promise<void>, isLoading: boolean) => ReactNode;
   /**
-   * Custom renderer for when no organizations are found
+   * Custom renderer for the loading state
    */
-  renderEmpty?: () => ReactNode;
+  renderLoading?: () => ReactNode;
+  /**
+   * Custom renderer for each organization item
+   */
+  renderOrganization?: (organization: OrganizationWithSwitchAccess, index: number) => ReactNode;
   /**
    * Inline styles to apply to the container
    */
@@ -103,7 +103,8 @@ const defaultRenderOrganization = (organization: OrganizationWithSwitchAccess):
       <h3 style={{fontSize: '18px', fontWeight: 'bold', margin: '0 0 8px 0'}}>{organization.name}</h3>
       <p style={{color: '#6b7280', fontSize: '14px', margin: '0'}}>Handle: {organization.orgHandle}</p>
       <p style={{color: '#6b7280', fontSize: '14px', margin: '4px 0 0 0'}}>
-        Status: <span style={{color: organization.status === 'ACTIVE' ? '#10b981' : '#ef4444'}}>{organization.status}</span>
+        Status:{' '}
+        <span style={{color: organization.status === 'ACTIVE' ? '#10b981' : '#ef4444'}}>{organization.status}</span>
       </p>
     </div>
     <div style={{alignItems: 'center', display: 'flex'}}>
@@ -231,17 +232,29 @@ export const BaseOrganizationList: FC<BaseOrganizationListProps> = ({
 }): ReactElement => {
   // Show loading state
   if (isLoading && data.length === 0) {
-    return <div className={className} style={style}>{renderLoading()}</div>;
+    return (
+      <div className={className} style={style}>
+        {renderLoading()}
+      </div>
+    );
   }
 
   // Show error state
   if (error && data.length === 0) {
-    return <div className={className} style={style}>{renderError(error)}</div>;
+    return (
+      <div className={className} style={style}>
+        {renderError(error)}
+      </div>
+    );
   }
 
   // Show empty state
   if (!isLoading && data.length === 0) {
-    return <div className={className} style={style}>{renderEmpty()}</div>;
+    return (
+      <div className={className} style={style}>
+        {renderEmpty()}
+      </div>
+    );
   }
 
   return (
@@ -278,23 +291,15 @@ export const BaseOrganizationList: FC<BaseOrganizationListProps> = ({
       {/* Organizations list */}
       <div style={{display: 'flex', flexDirection: 'column', gap: '12px'}}>
         {data.map((organization: OrganizationWithSwitchAccess, index: number) =>
-          renderOrganization(organization, index)
+          renderOrganization(organization, index),
         )}
       </div>
 
       {/* Error message for additional data */}
-      {error && data.length > 0 && (
-        <div style={{marginTop: '16px'}}>
-          {renderError(error)}
-        </div>
-      )}
+      {error && data.length > 0 && <div style={{marginTop: '16px'}}>{renderError(error)}</div>}
 
       {/* Load more button */}
-      {hasMore && fetchMore && (
-        <div style={{marginTop: '24px'}}>
-          {renderLoadMore(fetchMore, isLoadingMore)}
-        </div>
-      )}
+      {hasMore && fetchMore && <div style={{marginTop: '24px'}}>{renderLoadMore(fetchMore, isLoadingMore)}</div>}
     </div>
   );
 };
diff --git a/packages/react/src/components/presentation/OrganizationProfile/index.ts b/packages/react/src/components/presentation/OrganizationProfile/index.ts
deleted file mode 100644
index 7f5be7e25..000000000
--- a/packages/react/src/components/presentation/OrganizationProfile/index.ts
+++ /dev/null
@@ -1,21 +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 BaseOrganizationProfile, type BaseOrganizationProfileProps} from './BaseOrganizationProfile.js';
-export {default as OrganizationProfile, type OrganizationProfileProps} from './OrganizationProfile.js';
-export {type OrganizationDetails} from '../../../api/scim2/getOrganization.js';

From 8a87a9e791fc0c9ab337b362f7c61bac1b110981 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 24 Jun 2025 11:32:23 +0530
Subject: [PATCH 74/96] feat(react): Add organization management translations
 and loading/error states in OrganizationSwitcher

---
 packages/javascript/src/i18n/en-US.ts         |  3 +
 packages/javascript/src/models/i18n.ts        |  3 +
 .../OrganizationSwitcher.tsx                  | 19 ++----
 .../primitives/Icons/BuildingAlt.tsx          | 66 +++++++++++++++++++
 4 files changed, 77 insertions(+), 14 deletions(-)
 create mode 100644 packages/react/src/components/primitives/Icons/BuildingAlt.tsx

diff --git a/packages/javascript/src/i18n/en-US.ts b/packages/javascript/src/i18n/en-US.ts
index b345a360a..ff7fa55b1 100644
--- a/packages/javascript/src/i18n/en-US.ts
+++ b/packages/javascript/src/i18n/en-US.ts
@@ -88,6 +88,9 @@ const translations: I18nTranslations = {
   'organization.switcher.members': 'members',
   'organization.switcher.member': 'member',
   'organization.switcher.create.organization': 'Create Organization',
+  'organization.switcher.manage.organization': 'Manage Organization',
+  'organization.profile.loading': 'Loading organization...',
+  'organization.profile.error': 'Failed to load organization',
 
   'organization.create.title': 'Create Organization',
   'organization.create.name.label': 'Organization Name',
diff --git a/packages/javascript/src/models/i18n.ts b/packages/javascript/src/models/i18n.ts
index 328fd50ef..e7f942105 100644
--- a/packages/javascript/src/models/i18n.ts
+++ b/packages/javascript/src/models/i18n.ts
@@ -86,6 +86,9 @@ export interface I18nTranslations {
   'organization.switcher.members': string;
   'organization.switcher.member': string;
   'organization.switcher.create.organization': string;
+  'organization.switcher.manage.organization': string;
+  'organization.profile.loading': string;
+  'organization.profile.error': string;
 
   /* |---------------------------------------------------------------| */
   /* |                     Organization Creation                     | */
diff --git a/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx b/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
index 5b1078d9a..f8de2095c 100644
--- a/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
+++ b/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
@@ -24,6 +24,7 @@ import useOrganization from '../../../contexts/Organization/useOrganization';
 import useTranslation from '../../../hooks/useTranslation';
 import {CreateOrganization} from '../CreateOrganization/CreateOrganization';
 import OrganizationProfile from '../OrganizationProfile/OrganizationProfile';
+import BuildingAlt from '../../primitives/Icons/BuildingAlt';
 
 /**
  * Props interface for the OrganizationSwitcher component.
@@ -95,7 +96,6 @@ export const OrganizationSwitcher: FC<OrganizationSwitcherProps> = ({
   const [isProfileOpen, setIsProfileOpen] = useState(false);
   const {t} = useTranslation();
 
-  // Don't render if not authenticated
   if (!isSignedIn && fallback) {
     return fallback;
   }
@@ -104,7 +104,6 @@ export const OrganizationSwitcher: FC<OrganizationSwitcherProps> = ({
     return <></>;
   }
 
-  // Use prop values if provided, otherwise use context values
   const organizations: Organization[] = propOrganizations || contextOrganizations || [];
   const currentOrganization: Organization | null = propCurrentOrganization || contextCurrentOrganization;
   const onOrganizationSwitch: (organization: Organization) => Promise<void> | void =
@@ -114,23 +113,16 @@ export const OrganizationSwitcher: FC<OrganizationSwitcherProps> = ({
     setIsProfileOpen(true);
   };
 
-  // Add menu items - using the same MenuItem interface from BaseOrganizationSwitcher
   const defaultMenuItems: Array<{icon?: ReactElement; label: string; onClick: () => void}> = [];
 
-  // Add "Manage Organization" menu item if there's a current organization
   if (currentOrganization) {
     defaultMenuItems.push({
-      icon: (
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <path 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>
-      ),
-      label: 'Manage Organization',
+      icon: <BuildingAlt />,
+      label: t('organization.switcher.manage.organization'),
       onClick: handleManageOrganization,
     });
   }
 
-  // Add "Create Organization" menu item
   defaultMenuItems.push({
     icon: (
       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
@@ -159,7 +151,6 @@ export const OrganizationSwitcher: FC<OrganizationSwitcherProps> = ({
         open={isCreateOrgOpen}
         onOpenChange={setIsCreateOrgOpen}
         onSuccess={(org: Organization) => {
-          // Optionally switch to the newly created organization
           if (org && onOrganizationSwitch) {
             onOrganizationSwitch(org);
           }
@@ -170,8 +161,8 @@ export const OrganizationSwitcher: FC<OrganizationSwitcherProps> = ({
         <OrganizationProfile
           organizationId={currentOrganization.id}
           cardLayout={true}
-          loadingFallback={<div>Loading organization...</div>}
-          errorFallback={<div>Failed to load organization</div>}
+          loadingFallback={<div>{t('organization.profile.loading')}</div>}
+          errorFallback={<div>{t('organization.profile.error')}</div>}
         />
       )}
     </>
diff --git a/packages/react/src/components/primitives/Icons/BuildingAlt.tsx b/packages/react/src/components/primitives/Icons/BuildingAlt.tsx
new file mode 100644
index 000000000..ba39223d0
--- /dev/null
+++ b/packages/react/src/components/primitives/Icons/BuildingAlt.tsx
@@ -0,0 +1,66 @@
+/**
+ * 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} from 'react';
+
+export interface BuildingAltProps {
+  /**
+   * Color of the icon.
+   */
+  color?: string;
+  /**
+   * Height of the icon.
+   */
+  height?: number | string;
+  /**
+   * Width of the icon.
+   */
+  width?: number | string;
+}
+
+/**
+ * Alternative Building Icon component.
+ *
+ * @param props - Props injected to the component.
+ * @returns Alternative Building Icon component.
+ */
+const BuildingAlt: FC<BuildingAltProps> = ({color = 'currentColor', height = 24, width = 24}: BuildingAltProps) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" />
+    <path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" />
+    <path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" />
+    <path d="M10 6h4" />
+    <path d="M10 10h4" />
+    <path d="M10 14h4" />
+    <path d="M10 18h4" />
+  </svg>
+);
+
+BuildingAlt.displayName = 'BuildingAlt';
+
+export default BuildingAlt;

From c5119d49ed7c18d16d986e1652b0bf8e5ea4b2f5 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 24 Jun 2025 11:59:44 +0530
Subject: [PATCH 75/96] feat(react): Enhance organization management with popup
 support in BaseOrganizationList and OrganizationProfile, and add manage
 profile functionality in BaseOrganizationSwitcher

---
 .../OrganizationList/BaseOrganizationList.tsx |  81 ++++++++-
 .../OrganizationList/OrganizationList.tsx     |   8 +
 .../OrganizationProfile.tsx                   |  73 +++++++-
 .../BaseOrganizationSwitcher.tsx              |  33 ++++
 .../OrganizationSwitcher.tsx                  |  26 ++-
 .../src/components/primitives/Icons/Plus.tsx  |   0
 .../components/primitives/Icons/Settings.tsx  |   0
 .../src/pages/CreateOrganizationPage.tsx      |   2 -
 .../src/pages/Organizations.tsx               | 161 +++---------------
 9 files changed, 237 insertions(+), 147 deletions(-)
 create mode 100644 packages/react/src/components/primitives/Icons/Plus.tsx
 create mode 100644 packages/react/src/components/primitives/Icons/Settings.tsx

diff --git a/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx b/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx
index e622e1d96..b69d26639 100644
--- a/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx
+++ b/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx
@@ -18,6 +18,7 @@
 
 import {FC, ReactElement, ReactNode} from 'react';
 import {OrganizationWithSwitchAccess} from '../../../hooks/useOrganizations';
+import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Popover';
 
 /**
  * Props interface for the BaseOrganizationList component.
@@ -83,6 +84,22 @@ export interface BaseOrganizationListProps {
    * Total number of organizations
    */
   totalCount?: number;
+  /**
+   * Display mode: 'inline' for normal display, 'popup' for modal dialog
+   */
+  mode?: 'inline' | 'popup';
+  /**
+   * Function called when popup open state changes (only used in popup mode)
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Whether the popup is open (only used in popup mode)
+   */
+  open?: boolean;
+  /**
+   * Title for the popup dialog (only used in popup mode)
+   */
+  title?: string;
 }
 
 /**
@@ -221,43 +238,86 @@ export const BaseOrganizationList: FC<BaseOrganizationListProps> = ({
   hasMore = false,
   isLoading = false,
   isLoadingMore = false,
+  mode = 'inline',
+  onOpenChange,
   onRefresh,
+  open = false,
   renderEmpty = defaultRenderEmpty,
   renderError = defaultRenderError,
   renderLoading = defaultRenderLoading,
   renderLoadMore = defaultRenderLoadMore,
   renderOrganization = defaultRenderOrganization,
   style,
+  title = 'Organizations',
   totalCount,
 }): ReactElement => {
   // Show loading state
   if (isLoading && data.length === 0) {
-    return (
+    const loadingContent = (
       <div className={className} style={style}>
         {renderLoading()}
       </div>
     );
+
+    if (mode === 'popup') {
+      return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+          <DialogContent>
+            <DialogHeading>{title}</DialogHeading>
+            <div style={{padding: '1rem'}}>{loadingContent}</div>
+          </DialogContent>
+        </Dialog>
+      );
+    }
+
+    return loadingContent;
   }
 
   // Show error state
   if (error && data.length === 0) {
-    return (
+    const errorContent = (
       <div className={className} style={style}>
         {renderError(error)}
       </div>
     );
+
+    if (mode === 'popup') {
+      return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+          <DialogContent>
+            <DialogHeading>{title}</DialogHeading>
+            <div style={{padding: '1rem'}}>{errorContent}</div>
+          </DialogContent>
+        </Dialog>
+      );
+    }
+
+    return errorContent;
   }
 
   // Show empty state
   if (!isLoading && data.length === 0) {
-    return (
+    const emptyContent = (
       <div className={className} style={style}>
         {renderEmpty()}
       </div>
     );
+
+    if (mode === 'popup') {
+      return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+          <DialogContent>
+            <DialogHeading>{title}</DialogHeading>
+            <div style={{padding: '1rem'}}>{emptyContent}</div>
+          </DialogContent>
+        </Dialog>
+      );
+    }
+
+    return emptyContent;
   }
 
-  return (
+  const organizationListContent = (
     <div className={className} style={style}>
       {/* Header with total count and refresh button */}
       <div style={{alignItems: 'center', display: 'flex', justifyContent: 'space-between', marginBottom: '16px'}}>
@@ -302,6 +362,19 @@ export const BaseOrganizationList: FC<BaseOrganizationListProps> = ({
       {hasMore && fetchMore && <div style={{marginTop: '24px'}}>{renderLoadMore(fetchMore, isLoadingMore)}</div>}
     </div>
   );
+
+  if (mode === 'popup') {
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent>
+          <DialogHeading>{title}</DialogHeading>
+          <div style={{padding: '1rem'}}>{organizationListContent}</div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return organizationListContent;
 };
 
 export default BaseOrganizationList;
diff --git a/packages/react/src/components/presentation/OrganizationList/OrganizationList.tsx b/packages/react/src/components/presentation/OrganizationList/OrganizationList.tsx
index a3a2db322..46e0ebdac 100644
--- a/packages/react/src/components/presentation/OrganizationList/OrganizationList.tsx
+++ b/packages/react/src/components/presentation/OrganizationList/OrganizationList.tsx
@@ -56,6 +56,14 @@ export interface OrganizationListProps
  *   }}
  * />
  *
+ * // As a popup dialog
+ * <OrganizationList
+ *   mode="popup"
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   title="Select Organization"
+ * />
+ *
  * // With custom organization renderer
  * <OrganizationList
  *   renderOrganization={(org) => (
diff --git a/packages/react/src/components/presentation/OrganizationProfile/OrganizationProfile.tsx b/packages/react/src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
index 94853c90b..e990990e3 100644
--- a/packages/react/src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
+++ b/packages/react/src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
@@ -20,6 +20,8 @@ import {FC, ReactElement, useEffect, useState} from 'react';
 import BaseOrganizationProfile, {BaseOrganizationProfileProps} from './BaseOrganizationProfile';
 import getOrganization, {OrganizationDetails} from '../../../api/scim2/getOrganization';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
+import useTranslation from '../../../hooks/useTranslation';
+import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Popover';
 
 /**
  * Props for the OrganizationProfile component.
@@ -37,10 +39,30 @@ export type OrganizationProfileProps = Omit<BaseOrganizationProfileProps, 'organ
    */
   loadingFallback?: ReactElement;
 
+  /**
+   * Display mode for the component.
+   */
+  mode?: 'default' | 'popup';
+
+  /**
+   * Callback fired when the popup should be closed (only used in popup mode).
+   */
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * Whether the popup is open (only used in popup mode).
+   */
+  open?: boolean;
+
   /**
    * The ID of the organization to fetch and display.
    */
   organizationId: string;
+
+  /**
+   * Custom title for the popup dialog (only used in popup mode).
+   */
+  popupTitle?: string;
 };
 
 /**
@@ -64,15 +86,29 @@ export type OrganizationProfileProps = Omit<BaseOrganizationProfileProps, 'organ
  *   errorFallback={<div>Failed to load organization</div>}
  *   fallback={<div>No organization data available</div>}
  * />
+ *
+ * // In popup mode
+ * <OrganizationProfile
+ *   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
+ *   mode="popup"
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   popupTitle="Organization Profile"
+ * />
  * ```
  */
 const OrganizationProfile: FC<OrganizationProfileProps> = ({
   organizationId,
+  mode = 'default',
+  open = false,
+  onOpenChange,
+  popupTitle,
   loadingFallback = <div>Loading organization...</div>,
   errorFallback = <div>Failed to load organization data</div>,
   ...rest
 }: OrganizationProfileProps): ReactElement => {
   const {baseUrl} = useAsgardeo();
+  const {t} = useTranslation();
   const [organization, setOrganization] = useState<OrganizationDetails | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<boolean>(false);
@@ -106,14 +142,45 @@ const OrganizationProfile: FC<OrganizationProfileProps> = ({
   }, [baseUrl, organizationId]);
 
   if (loading) {
-    return loadingFallback;
+    return mode === 'popup' ? (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent>
+          <DialogHeading>{popupTitle || t('organization.profile.title')}</DialogHeading>
+          <div style={{padding: '1rem'}}>{loadingFallback}</div>
+        </DialogContent>
+      </Dialog>
+    ) : (
+      loadingFallback
+    );
   }
 
   if (error) {
-    return errorFallback;
+    return mode === 'popup' ? (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent>
+          <DialogHeading>{popupTitle || t('organization.profile.title')}</DialogHeading>
+          <div style={{padding: '1rem'}}>{errorFallback}</div>
+        </DialogContent>
+      </Dialog>
+    ) : (
+      errorFallback
+    );
+  }
+
+  const profileContent = <BaseOrganizationProfile organization={organization} {...rest} />;
+
+  if (mode === 'popup') {
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent>
+          <DialogHeading>{popupTitle || t('organization.profile.title')}</DialogHeading>
+          <div style={{padding: '1rem'}}>{profileContent}</div>
+        </DialogContent>
+      </Dialog>
+    );
   }
 
-  return <BaseOrganizationProfile organization={organization} {...rest} />;
+  return profileContent;
 };
 
 export default OrganizationProfile;
diff --git a/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx b/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
index b37fc6f98..0768bc4b3 100644
--- a/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
+++ b/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
@@ -243,6 +243,10 @@ export interface BaseOrganizationSwitcherProps {
    * Handler for when an organization is selected.
    */
   onOrganizationSwitch: (organization: Organization) => void;
+  /**
+   * Handler for when the manage profile button is clicked.
+   */
+  onManageProfile?: () => void;
   /**
    * List of available organizations.
    */
@@ -292,6 +296,7 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
   loading = false,
   error,
   onOrganizationSwitch,
+  onManageProfile,
   className = '',
   style,
   renderOrganization,
@@ -506,6 +511,34 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
                         )}
                     </div>
                   </div>
+                  {onManageProfile && (
+                    <Button
+                      onClick={onManageProfile}
+                      color="tertiary"
+                      variant="text"
+                      size="small"
+                      aria-label="Manage organization profile"
+                      style={{
+                        minWidth: 'auto',
+                        padding: `${theme.spacing.unit / 2}px`,
+                        marginLeft: 'auto',
+                      }}
+                    >
+                      <svg
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      >
+                        <circle cx="12" cy="12" r="3" />
+                        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+                      </svg>
+                    </Button>
+                  )}
                 </div>
               )}
 
diff --git a/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx b/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
index f8de2095c..108c38952 100644
--- a/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
+++ b/packages/react/src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
@@ -24,6 +24,7 @@ import useOrganization from '../../../contexts/Organization/useOrganization';
 import useTranslation from '../../../hooks/useTranslation';
 import {CreateOrganization} from '../CreateOrganization/CreateOrganization';
 import OrganizationProfile from '../OrganizationProfile/OrganizationProfile';
+import OrganizationList from '../OrganizationList/OrganizationList';
 import BuildingAlt from '../../primitives/Icons/BuildingAlt';
 
 /**
@@ -94,6 +95,7 @@ export const OrganizationSwitcher: FC<OrganizationSwitcherProps> = ({
   } = useOrganization();
   const [isCreateOrgOpen, setIsCreateOrgOpen] = useState(false);
   const [isProfileOpen, setIsProfileOpen] = useState(false);
+  const [isOrganizationListOpen, setIsOrganizationListOpen] = useState(false);
   const {t} = useTranslation();
 
   if (!isSignedIn && fallback) {
@@ -109,6 +111,10 @@ export const OrganizationSwitcher: FC<OrganizationSwitcherProps> = ({
   const onOrganizationSwitch: (organization: Organization) => Promise<void> | void =
     propOnOrganizationSwitch || switchOrganization;
 
+  const handleManageOrganizations = (): void => {
+    setIsOrganizationListOpen(true);
+  };
+
   const handleManageOrganization = (): void => {
     setIsProfileOpen(true);
   };
@@ -118,8 +124,8 @@ export const OrganizationSwitcher: FC<OrganizationSwitcherProps> = ({
   if (currentOrganization) {
     defaultMenuItems.push({
       icon: <BuildingAlt />,
-      label: t('organization.switcher.manage.organization'),
-      onClick: handleManageOrganization,
+      label: t('organization.switcher.manage.organizations'),
+      onClick: handleManageOrganizations,
     });
   }
 
@@ -144,6 +150,7 @@ export const OrganizationSwitcher: FC<OrganizationSwitcherProps> = ({
         loading={isLoading}
         error={error}
         menuItems={menuItems}
+        onManageProfile={handleManageOrganization}
         {...props}
       />
       <CreateOrganization
@@ -160,11 +167,26 @@ export const OrganizationSwitcher: FC<OrganizationSwitcherProps> = ({
       {currentOrganization && (
         <OrganizationProfile
           organizationId={currentOrganization.id}
+          mode="popup"
+          open={isProfileOpen}
+          onOpenChange={setIsProfileOpen}
           cardLayout={true}
           loadingFallback={<div>{t('organization.profile.loading')}</div>}
           errorFallback={<div>{t('organization.profile.error')}</div>}
         />
       )}
+      <OrganizationList
+        mode="popup"
+        open={isOrganizationListOpen}
+        onOpenChange={setIsOrganizationListOpen}
+        title={t('organization.switcher.manage.organizations')}
+        onOrganizationSelect={(organization: Organization) => {
+          if (onOrganizationSwitch) {
+            onOrganizationSwitch(organization);
+          }
+          setIsOrganizationListOpen(false);
+        }}
+      />
     </>
   );
 };
diff --git a/packages/react/src/components/primitives/Icons/Plus.tsx b/packages/react/src/components/primitives/Icons/Plus.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/react/src/components/primitives/Icons/Settings.tsx b/packages/react/src/components/primitives/Icons/Settings.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/samples/teamspace-react/src/pages/CreateOrganizationPage.tsx b/samples/teamspace-react/src/pages/CreateOrganizationPage.tsx
index 6a2c32373..14ce72094 100644
--- a/samples/teamspace-react/src/pages/CreateOrganizationPage.tsx
+++ b/samples/teamspace-react/src/pages/CreateOrganizationPage.tsx
@@ -9,7 +9,6 @@ export default function CreateOrganizationPage() {
 
   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')}
@@ -24,7 +23,6 @@ export default function CreateOrganizationPage() {
         </p>
       </div>
 
-      {/* Form */}
       <div className="bg-white rounded-lg shadow-sm border border-gray-200">
         <CreateOrganization />
       </div>
diff --git a/samples/teamspace-react/src/pages/Organizations.tsx b/samples/teamspace-react/src/pages/Organizations.tsx
index 64047cdca..7a1aefd59 100644
--- a/samples/teamspace-react/src/pages/Organizations.tsx
+++ b/samples/teamspace-react/src/pages/Organizations.tsx
@@ -1,150 +1,39 @@
 'use client';
 
-import {Link} from 'react-router-dom';
-import {useApp} from '../App';
-import {Building2, Users, Settings, Crown, Shield, User, Plus, ExternalLink} from 'lucide-react';
+import {Link, useNavigate} from 'react-router-dom';
+import {ArrowLeft, Plus} from 'lucide-react';
+import {OrganizationList} from '@asgardeo/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`;
-    }
-  };
+  const navigate = useNavigate();
 
   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="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <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>
+        <button
+          onClick={() => navigate('/dashboard')}
+          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 dashboard
+        </button>
+        <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>
       </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 className="bg-white rounded-lg shadow-sm border border-gray-200">
+        <OrganizationList />
       </div>
     </div>
   );

From 5a872aa8dccf98c36535eea91e95e2610f0a07ee Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 24 Jun 2025 12:29:26 +0530
Subject: [PATCH 76/96] feat(react): Refactor organization management to use
 enhanced OrganizationContext, implement pagination, and remove deprecated
 useOrganizations hook

---
 .../OrganizationList/BaseOrganizationList.tsx |   2 +-
 .../OrganizationList/OrganizationList.tsx     |  84 ++++--
 .../Organization/OrganizationContext.ts       |  49 ++++
 .../Organization/OrganizationProvider.tsx     | 129 ++++++++-
 packages/react/src/hooks/useOrganizations.ts  | 263 ------------------
 packages/react/src/index.ts                   |   3 -
 6 files changed, 244 insertions(+), 286 deletions(-)
 delete mode 100644 packages/react/src/hooks/useOrganizations.ts

diff --git a/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx b/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx
index b69d26639..b2b56ab54 100644
--- a/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx
+++ b/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx
@@ -17,7 +17,7 @@
  */
 
 import {FC, ReactElement, ReactNode} from 'react';
-import {OrganizationWithSwitchAccess} from '../../../hooks/useOrganizations';
+import {OrganizationWithSwitchAccess} from '../../../contexts/Organization/OrganizationContext';
 import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Popover';
 
 /**
diff --git a/packages/react/src/components/presentation/OrganizationList/OrganizationList.tsx b/packages/react/src/components/presentation/OrganizationList/OrganizationList.tsx
index 46e0ebdac..9436b45bb 100644
--- a/packages/react/src/components/presentation/OrganizationList/OrganizationList.tsx
+++ b/packages/react/src/components/presentation/OrganizationList/OrganizationList.tsx
@@ -16,29 +16,54 @@
  * under the License.
  */
 
-import {FC, ReactElement} from 'react';
-import BaseOrganizationList, {BaseOrganizationListProps} from './BaseOrganizationList';
-import useOrganizations, {UseOrganizationsConfig} from '../../../hooks/useOrganizations';
+import {FC, ReactElement, useEffect} from 'react';
+import {BaseOrganizationListProps} from './BaseOrganizationList';
+import BaseOrganizationList from './BaseOrganizationList';
+import useOrganization from '../../../contexts/Organization/useOrganization';
+import {OrganizationWithSwitchAccess} from '../../../contexts/Organization/OrganizationContext';
+
+/**
+ * Configuration options for the OrganizationList component.
+ */
+export interface OrganizationListConfig {
+  /**
+   * Whether to automatically fetch organizations on mount
+   */
+  autoFetch?: boolean;
+  /**
+   * Filter string for organizations
+   */
+  filter?: string;
+  /**
+   * Number of organizations to fetch per page
+   */
+  limit?: number;
+  /**
+   * Whether to include recursive organizations
+   */
+  recursive?: boolean;
+}
 
 /**
  * Props interface for the OrganizationList component.
- * Combines BaseOrganizationListProps with UseOrganizationsConfig.
+ * Uses the enhanced OrganizationContext instead of the useOrganizations hook.
  */
 export interface OrganizationListProps
   extends Omit<
       BaseOrganizationListProps,
       'data' | 'error' | 'fetchMore' | 'hasMore' | 'isLoading' | 'isLoadingMore' | 'totalCount'
     >,
-    UseOrganizationsConfig {
+    OrganizationListConfig {
   /**
    * Function called when an organization is selected/clicked
    */
-  onOrganizationSelect?: (organization: any) => void;
+  onOrganizationSelect?: (organization: OrganizationWithSwitchAccess) => void;
 }
 
 /**
  * OrganizationList component that provides organization listing functionality with pagination.
- * This component automatically fetches organizations and handles pagination.
+ * This component uses the enhanced OrganizationContext, eliminating the polling issue and 
+ * providing better integration with the existing context system.
  *
  * @example
  * ```tsx
@@ -77,24 +102,40 @@ export interface OrganizationListProps
  */
 export const OrganizationList: FC<OrganizationListProps> = ({
   autoFetch = true,
-  filter,
+  filter = '',
   limit = 10,
   onOrganizationSelect,
   recursive = false,
   ...baseProps
 }: OrganizationListProps): ReactElement => {
-  const {data, error, fetchMore, hasMore, isLoading, isLoadingMore, refresh, totalCount} = useOrganizations({
-    autoFetch,
-    filter,
-    limit,
-    recursive,
-  });
+  const {
+    paginatedOrganizations,
+    error,
+    fetchMore,
+    hasMore,
+    isLoading,
+    isLoadingMore,
+    totalCount,
+    fetchPaginatedOrganizations,
+  } = useOrganization();
+
+  // Auto-fetch organizations on mount or when parameters change
+  useEffect(() => {
+    if (autoFetch) {
+      fetchPaginatedOrganizations({
+        filter,
+        limit,
+        recursive,
+        reset: true,
+      });
+    }
+  }, [autoFetch, filter, limit, recursive, fetchPaginatedOrganizations]);
 
   // Enhanced organization renderer that includes selection handler
   const enhancedRenderOrganization = baseProps.renderOrganization
     ? baseProps.renderOrganization
     : onOrganizationSelect
-    ? (organization: any, index: number) => (
+    ? (organization: OrganizationWithSwitchAccess, index: number) => (
         <div
           key={organization.id}
           onClick={() => onOrganizationSelect(organization)}
@@ -159,15 +200,24 @@ export const OrganizationList: FC<OrganizationListProps> = ({
       )
     : undefined;
 
+  const refreshHandler = async () => {
+    await fetchPaginatedOrganizations({
+      filter,
+      limit,
+      recursive,
+      reset: true,
+    });
+  };
+
   return (
     <BaseOrganizationList
-      data={data}
+      data={paginatedOrganizations}
       error={error}
       fetchMore={fetchMore}
       hasMore={hasMore}
       isLoading={isLoading}
       isLoadingMore={isLoadingMore}
-      onRefresh={refresh}
+      onRefresh={refreshHandler}
       renderOrganization={enhancedRenderOrganization}
       totalCount={totalCount}
       {...baseProps}
diff --git a/packages/react/src/contexts/Organization/OrganizationContext.ts b/packages/react/src/contexts/Organization/OrganizationContext.ts
index b0021dc17..0d3e8ca76 100644
--- a/packages/react/src/contexts/Organization/OrganizationContext.ts
+++ b/packages/react/src/contexts/Organization/OrganizationContext.ts
@@ -19,6 +19,16 @@
 import {Organization} from '@asgardeo/browser';
 import {Context, createContext} from 'react';
 
+/**
+ * Interface for organizations with switch access information.
+ */
+export interface OrganizationWithSwitchAccess extends Organization {
+  /**
+   * Whether the user has switch access to this organization
+   */
+  canSwitch: boolean;
+}
+
 /**
  * Props interface of {@link OrganizationContext}
  */
@@ -30,6 +40,37 @@ export type OrganizationContextProps = {
   organizations: Organization[] | null;
   revalidateOrganizations: () => Promise<void>;
   switchOrganization: (organization: Organization) => Promise<void>;
+
+  // Enhanced features for paginated organizations with switch access
+  /**
+   * Paginated organizations with switch access information
+   */
+  paginatedOrganizations: OrganizationWithSwitchAccess[];
+  /**
+   * Whether there are more organizations to load
+   */
+  hasMore: boolean;
+  /**
+   * Whether more data is being loaded
+   */
+  isLoadingMore: boolean;
+  /**
+   * Total number of organizations
+   */
+  totalCount: number;
+  /**
+   * Function to fetch more organizations (pagination)
+   */
+  fetchMore: () => Promise<void>;
+  /**
+   * Function to fetch paginated organizations with switch access
+   */
+  fetchPaginatedOrganizations: (config?: {
+    filter?: string;
+    limit?: number;
+    recursive?: boolean;
+    reset?: boolean;
+  }) => Promise<void>;
 };
 
 /**
@@ -43,6 +84,14 @@ const OrganizationContext: Context<OrganizationContextProps | null> = createCont
   organizations: null,
   revalidateOrganizations: () => Promise.resolve(),
   switchOrganization: () => Promise.resolve(),
+
+  // Enhanced features for paginated organizations with switch access
+  paginatedOrganizations: [],
+  hasMore: false,
+  isLoadingMore: false,
+  totalCount: 0,
+  fetchMore: () => Promise.resolve(),
+  fetchPaginatedOrganizations: () => Promise.resolve(),
 });
 
 OrganizationContext.displayName = 'OrganizationContext';
diff --git a/packages/react/src/contexts/Organization/OrganizationProvider.tsx b/packages/react/src/contexts/Organization/OrganizationProvider.tsx
index cb03655bd..9e9f1bcb5 100644
--- a/packages/react/src/contexts/Organization/OrganizationProvider.tsx
+++ b/packages/react/src/contexts/Organization/OrganizationProvider.tsx
@@ -18,8 +18,10 @@
 
 import {AsgardeoRuntimeError, Organization} from '@asgardeo/browser';
 import {FC, PropsWithChildren, ReactElement, useCallback, useEffect, useMemo, useState} from 'react';
-import OrganizationContext, {OrganizationContextProps} from './OrganizationContext';
+import OrganizationContext, {OrganizationContextProps, OrganizationWithSwitchAccess} from './OrganizationContext';
 import useAsgardeo from '../Asgardeo/useAsgardeo';
+import getAllOrganizations, {PaginatedOrganizationsResponse} from '../../api/scim2/getAllOrganizations';
+import getMeOrganizations from '../../api/scim2/getMeOrganizations';
 
 /**
  * Props interface of {@link OrganizationProvider}
@@ -105,6 +107,19 @@ const OrganizationProvider: FC<PropsWithChildren<OrganizationProviderProps>> = (
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
 
+  // Enhanced state for paginated organizations with switch access
+  const [paginatedOrganizations, setPaginatedOrganizations] = useState<OrganizationWithSwitchAccess[]>([]);
+  const [hasMore, setHasMore] = useState<boolean>(false);
+  const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
+  const [totalCount, setTotalCount] = useState<number>(0);
+  const [switchableOrgIds, setSwitchableOrgIds] = useState<Set<string>>(new Set());
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [currentFilter, setCurrentFilter] = useState<{
+    filter?: string;
+    limit?: number;
+    recursive?: boolean;
+  }>({});
+
   /**
    * Fetches organizations from the API
    */
@@ -184,6 +199,103 @@ const OrganizationProvider: FC<PropsWithChildren<OrganizationProviderProps>> = (
     [onOrganizationSwitch, onError],
   );
 
+  /**
+   * Fetches paginated organizations with switch access information
+   */
+  const fetchPaginatedOrganizations: (config?: {
+    filter?: string;
+    limit?: number;
+    recursive?: boolean;
+    reset?: boolean;
+  }) => Promise<void> = useCallback(
+    async (config = {}): Promise<void> => {
+      const {filter = '', limit = 10, recursive = false, reset = false} = config;
+
+      if (!isSignedIn || !baseUrl) {
+        return;
+      }
+
+      try {
+        if (reset) {
+          setIsLoading(true);
+          setError(null);
+          setCurrentPage(1);
+          setPaginatedOrganizations([]);
+          setCurrentFilter({filter, limit, recursive});
+        } else {
+          setIsLoadingMore(true);
+        }
+
+        // Fetch user's switchable organizations first (only once per session)
+        let switchableIds: Set<string> = switchableOrgIds;
+        if (switchableIds.size === 0) {
+          try {
+            const userOrgs: Organization[] = await getMeOrganizations({
+              authorizedAppName: 'Console',
+              baseUrl,
+              limit: 100, // Get all user organizations
+              recursive,
+            });
+            switchableIds = new Set(userOrgs.map((org: Organization) => org.id));
+            setSwitchableOrgIds(switchableIds);
+          } catch {
+            // Continue with empty switchable set if user organizations fetch fails
+          }
+        }
+
+        // Fetch all organizations with pagination
+        const response: PaginatedOrganizationsResponse = await getAllOrganizations({
+          baseUrl,
+          filter,
+          limit,
+          recursive,
+          ...(reset ? {} : {startIndex: (currentPage - 1) * limit}),
+        });
+
+        // Combine organization data with switch access information
+        const organizationsWithAccess: OrganizationWithSwitchAccess[] = response.organizations.map(
+          (org: Organization) => ({
+            ...org,
+            canSwitch: switchableIds.has(org.id),
+          }),
+        );
+
+        if (reset) {
+          setPaginatedOrganizations(organizationsWithAccess);
+        } else {
+          setPaginatedOrganizations((prevData: OrganizationWithSwitchAccess[]) => [
+            ...prevData,
+            ...organizationsWithAccess,
+          ]);
+          setCurrentPage(prev => prev + 1);
+        }
+
+        setHasMore(response.hasMore || false);
+        setTotalCount(response.totalCount || organizationsWithAccess.length);
+      } catch (fetchError: any) {
+        const errorMessage: string = fetchError.message || 'Failed to fetch paginated organizations';
+        setError(errorMessage);
+        if (onError) {
+          onError(errorMessage);
+        }
+      } finally {
+        setIsLoading(false);
+        setIsLoadingMore(false);
+      }
+    },
+    [baseUrl, isSignedIn, onError, switchableOrgIds, currentPage],
+  );
+
+  /**
+   * Fetch more organizations for pagination
+   */
+  const fetchMore: () => Promise<void> = useCallback(async (): Promise<void> => {
+    if (!hasMore || isLoadingMore) {
+      return;
+    }
+    await fetchPaginatedOrganizations(currentFilter);
+  }, [fetchPaginatedOrganizations, hasMore, isLoadingMore, currentFilter]);
+
   // Auto-fetch organizations when component mounts or dependencies change
   useEffect(() => {
     if (autoFetch && isSignedIn) {
@@ -200,9 +312,16 @@ const OrganizationProvider: FC<PropsWithChildren<OrganizationProviderProps>> = (
       organizations,
       revalidateOrganizations,
       switchOrganization,
+
+      // Enhanced features
+      paginatedOrganizations,
+      hasMore,
+      isLoadingMore,
+      totalCount,
+      fetchMore,
+      fetchPaginatedOrganizations,
     }),
     [
-      baseUrl,
       currentOrganization,
       error,
       getOrganizations,
@@ -210,6 +329,12 @@ const OrganizationProvider: FC<PropsWithChildren<OrganizationProviderProps>> = (
       organizations,
       revalidateOrganizations,
       switchOrganization,
+      paginatedOrganizations,
+      hasMore,
+      isLoadingMore,
+      totalCount,
+      fetchMore,
+      fetchPaginatedOrganizations,
     ],
   );
 
diff --git a/packages/react/src/hooks/useOrganizations.ts b/packages/react/src/hooks/useOrganizations.ts
deleted file mode 100644
index f6083f1af..000000000
--- a/packages/react/src/hooks/useOrganizations.ts
+++ /dev/null
@@ -1,263 +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 {Organization} from '@asgardeo/browser';
-import {useCallback, useEffect, useState} from 'react';
-import getAllOrganizations, {PaginatedOrganizationsResponse} from '../api/scim2/getAllOrganizations';
-import getMeOrganizations from '../api/scim2/getMeOrganizations';
-import useAsgardeo from '../contexts/Asgardeo/useAsgardeo';
-
-/**
- * Interface for organizations with switch access information.
- */
-export interface OrganizationWithSwitchAccess extends Organization {
-  /**
-   * Whether the user has switch access to this organization
-   */
-  canSwitch: boolean;
-}
-
-/**
- * Configuration options for the useOrganizations hook.
- */
-export interface UseOrganizationsConfig {
-  /**
-   * Whether to automatically fetch organizations on mount
-   */
-  autoFetch?: boolean;
-  /**
-   * Filter string for organizations
-   */
-  filter?: string;
-  /**
-   * Number of organizations to fetch per page
-   */
-  limit?: number;
-  /**
-   * Whether to include recursive organizations
-   */
-  recursive?: boolean;
-}
-
-/**
- * Return type for the useOrganizations hook.
- */
-export interface UseOrganizationsReturn {
-  /**
-   * Current page of organizations with switch access information
-   */
-  data: OrganizationWithSwitchAccess[];
-  /**
-   * Error message if any
-   */
-  error: string | null;
-  /**
-   * Function to fetch more organizations (pagination)
-   */
-  fetchMore: () => Promise<void>;
-  /**
-   * Whether there are more organizations to fetch
-   */
-  hasMore: boolean;
-  /**
-   * Whether the initial fetch is loading
-   */
-  isLoading: boolean;
-  /**
-   * Whether more organizations are being fetched
-   */
-  isLoadingMore: boolean;
-  /**
-   * Function to refresh the organizations list
-   */
-  refresh: () => Promise<void>;
-  /**
-   * Total count of organizations
-   */
-  totalCount: number;
-}
-
-/**
- * Hook for fetching and managing paginated organizations with switch access information.
- *
- * This hook combines data from two APIs:
- * 1. All organizations endpoint - to get the complete list of organizations
- * 2. User organizations endpoint - to determine which organizations the user can switch to
- *
- * @param config - Configuration options for the hook
- * @returns Object containing organizations data, loading states, and utility functions
- *
- * @example
- * ```tsx
- * function OrganizationList() {
- *   const {
- *     data: organizations,
- *     isLoading,
- *     hasMore,
- *     fetchMore,
- *     refresh
- *   } = useOrganizations({
- *     limit: 10,
- *     filter: 'active'
- *   });
- *
- *   if (isLoading) {
- *     return <div>Loading...</div>;
- *   }
- *
- *   return (
- *     <div>
- *       {organizations.map(org => (
- *         <div key={org.id}>
- *           {org.name} {org.canSwitch && '(Can Switch)'}
- *         </div>
- *       ))}
- *       {hasMore && (
- *         <button onClick={fetchMore}>Load More</button>
- *       )}
- *     </div>
- *   );
- * }
- * ```
- */
-export const useOrganizations = ({
-  autoFetch = true,
-  filter = '',
-  limit = 10,
-  recursive = false,
-}: UseOrganizationsConfig = {}): UseOrganizationsReturn => {
-  const {baseUrl} = useAsgardeo();
-  const [data, setData] = useState<OrganizationWithSwitchAccess[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [hasMore, setHasMore] = useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
-  const [totalCount, setTotalCount] = useState<number>(0);
-  const [switchableOrgIds, setSwitchableOrgIds] = useState<Set<string>>(new Set());
-
-  /**
-   * Fetch organizations with switch access information
-   */
-  const fetchOrganizations: (isLoadMore?: boolean) => Promise<void> = useCallback(
-    async (isLoadMore = false): Promise<void> => {
-      if (!baseUrl) {
-        setError('Base URL is required');
-        return;
-      }
-
-      try {
-        if (isLoadMore) {
-          setIsLoadingMore(true);
-        } else {
-          setIsLoading(true);
-          setError(null);
-        }
-
-        // Fetch user's switchable organizations first (only once, not on load more)
-        let switchableIds: Set<string> = switchableOrgIds;
-        if (!isLoadMore || switchableIds.size === 0) {
-          try {
-            const userOrgs: Organization[] = await getMeOrganizations({
-              authorizedAppName: 'Console',
-              baseUrl,
-              limit: 100, // Get all user organizations
-              recursive,
-            });
-            switchableIds = new Set(userOrgs.map((org: Organization) => org.id));
-            setSwitchableOrgIds(switchableIds);
-          } catch {
-            // Continue with empty switchable set if user organizations fetch fails
-          }
-        }
-
-        // Fetch all organizations
-        const response: PaginatedOrganizationsResponse = await getAllOrganizations({
-          baseUrl,
-          filter,
-          limit,
-          recursive,
-        });
-
-        // Combine organization data with switch access information
-        const organizationsWithAccess: OrganizationWithSwitchAccess[] = response.organizations.map(
-          (org: Organization) => ({
-            ...org,
-            canSwitch: switchableIds.has(org.id),
-          }),
-        );
-
-        if (isLoadMore) {
-          setData((prevData: OrganizationWithSwitchAccess[]) => [...prevData, ...organizationsWithAccess]);
-        } else {
-          setData(organizationsWithAccess);
-        }
-
-        setHasMore(response.hasMore || false);
-        setTotalCount(response.totalCount || organizationsWithAccess.length);
-      } catch (fetchError: any) {
-        const errorMessage: string = fetchError.message || 'Failed to fetch organizations';
-        setError(errorMessage);
-      } finally {
-        setIsLoading(false);
-        setIsLoadingMore(false);
-      }
-    },
-    [baseUrl, filter, limit, recursive, switchableOrgIds],
-  );
-
-  /**
-   * Fetch more organizations for pagination
-   */
-  const fetchMore: () => Promise<void> = useCallback(async (): Promise<void> => {
-    if (!hasMore || isLoadingMore) {
-      return;
-    }
-    await fetchOrganizations(true);
-  }, [fetchOrganizations, hasMore, isLoadingMore]);
-
-  /**
-   * Refresh the organizations list
-   */
-  const refresh: () => Promise<void> = useCallback(async (): Promise<void> => {
-    setData([]);
-    setSwitchableOrgIds(new Set());
-    await fetchOrganizations(false);
-  }, [fetchOrganizations]);
-
-  // Auto-fetch on mount if enabled
-  useEffect(() => {
-    if (autoFetch) {
-      fetchOrganizations(false).catch(() => {
-        // Error is handled within fetchOrganizations
-      });
-    }
-  }, [autoFetch, fetchOrganizations]);
-
-  return {
-    data,
-    error,
-    fetchMore,
-    hasMore,
-    isLoading,
-    isLoadingMore,
-    refresh,
-    totalCount,
-  };
-};
-
-export default useOrganizations;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 0533ed2a1..0610611e0 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -79,9 +79,6 @@ export * from './hooks/useTranslation';
 export {default as useForm} from './hooks/useForm';
 export * from './hooks/useForm';
 
-export {default as useOrganizations} from './hooks/useOrganizations';
-export * from './hooks/useOrganizations';
-
 export {default as BaseSignInButton} from './components/actions/SignInButton/BaseSignInButton';
 export * from './components/actions/SignInButton/BaseSignInButton';
 

From 5cd7d7bc5bbee247342d2cf11c115dcef7c5fd95 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 24 Jun 2025 12:35:14 +0530
Subject: [PATCH 77/96] feat(react): Update organization management
 translations and enhance BaseOrganizationList with styled components and
 improved rendering logic

---
 packages/javascript/src/i18n/en-US.ts         |   2 +-
 packages/javascript/src/models/i18n.ts        |   2 +-
 .../OrganizationList/BaseOrganizationList.tsx | 382 ++++++++++++------
 .../OrganizationList/OrganizationList.tsx     |   7 +-
 4 files changed, 276 insertions(+), 117 deletions(-)

diff --git a/packages/javascript/src/i18n/en-US.ts b/packages/javascript/src/i18n/en-US.ts
index ff7fa55b1..c3021c273 100644
--- a/packages/javascript/src/i18n/en-US.ts
+++ b/packages/javascript/src/i18n/en-US.ts
@@ -88,7 +88,7 @@ const translations: I18nTranslations = {
   'organization.switcher.members': 'members',
   'organization.switcher.member': 'member',
   'organization.switcher.create.organization': 'Create Organization',
-  'organization.switcher.manage.organization': 'Manage Organization',
+  'organization.switcher.manage.organizations': 'Manage Organization',
   'organization.profile.loading': 'Loading organization...',
   'organization.profile.error': 'Failed to load organization',
 
diff --git a/packages/javascript/src/models/i18n.ts b/packages/javascript/src/models/i18n.ts
index e7f942105..f0c543196 100644
--- a/packages/javascript/src/models/i18n.ts
+++ b/packages/javascript/src/models/i18n.ts
@@ -86,7 +86,7 @@ export interface I18nTranslations {
   'organization.switcher.members': string;
   'organization.switcher.member': string;
   'organization.switcher.create.organization': string;
-  'organization.switcher.manage.organization': string;
+  'organization.switcher.manage.organizations': string;
   'organization.profile.loading': string;
   'organization.profile.error': string;
 
diff --git a/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx b/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx
index b2b56ab54..c555c2275 100644
--- a/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx
+++ b/packages/react/src/components/presentation/OrganizationList/BaseOrganizationList.tsx
@@ -16,9 +16,13 @@
  * under the License.
  */
 
-import {FC, ReactElement, ReactNode} from 'react';
+import {withVendorCSSClassPrefix} from '@asgardeo/browser';
+import clsx from 'clsx';
+import {FC, ReactElement, ReactNode, useMemo, CSSProperties} from 'react';
 import {OrganizationWithSwitchAccess} from '../../../contexts/Organization/OrganizationContext';
+import useTheme from '../../../contexts/Theme/useTheme';
 import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Popover';
+import {Avatar} from '../../primitives/Avatar/Avatar';
 
 /**
  * Props interface for the BaseOrganizationList component.
@@ -105,79 +109,62 @@ export interface BaseOrganizationListProps {
 /**
  * Default organization item renderer
  */
-const defaultRenderOrganization = (organization: OrganizationWithSwitchAccess): ReactNode => (
-  <div
-    key={organization.id}
-    style={{
-      border: '1px solid #e5e7eb',
-      borderRadius: '8px',
-      display: 'flex',
-      justifyContent: 'space-between',
-      padding: '16px',
-    }}
-  >
-    <div>
-      <h3 style={{fontSize: '18px', fontWeight: 'bold', margin: '0 0 8px 0'}}>{organization.name}</h3>
-      <p style={{color: '#6b7280', fontSize: '14px', margin: '0'}}>Handle: {organization.orgHandle}</p>
-      <p style={{color: '#6b7280', fontSize: '14px', margin: '4px 0 0 0'}}>
-        Status:{' '}
-        <span style={{color: organization.status === 'ACTIVE' ? '#10b981' : '#ef4444'}}>{organization.status}</span>
-      </p>
-    </div>
-    <div style={{alignItems: 'center', display: 'flex'}}>
-      {organization.canSwitch ? (
-        <span
-          style={{
-            backgroundColor: '#dcfce7',
-            borderRadius: '16px',
-            color: '#16a34a',
-            fontSize: '12px',
-            fontWeight: 'medium',
-            padding: '4px 12px',
-          }}
-        >
-          Can Switch
-        </span>
-      ) : (
-        <span
-          style={{
-            backgroundColor: '#fee2e2',
-            borderRadius: '16px',
-            color: '#dc2626',
-            fontSize: '12px',
-            fontWeight: 'medium',
-            padding: '4px 12px',
-          }}
-        >
-          No Access
-        </span>
-      )}
+const defaultRenderOrganization = (organization: OrganizationWithSwitchAccess, styles: any): ReactNode => {
+  const getOrgInitials = (name?: string): string => {
+    if (!name) return 'ORG';
+    return name
+      .split(' ')
+      .map(word => word.charAt(0))
+      .join('')
+      .toUpperCase()
+      .slice(0, 2);
+  };
+
+  return (
+    <div key={organization.id} style={styles.organizationItem}>
+      <div style={styles.organizationContent}>
+        <Avatar name={getOrgInitials(organization.name)} size={48} alt={`${organization.name} logo`} />
+        <div style={styles.organizationInfo}>
+          <h3 style={styles.organizationName}>{organization.name}</h3>
+          <p style={styles.organizationHandle}>@{organization.orgHandle}</p>
+          <p style={styles.organizationStatus}>
+            Status:{' '}
+            <span
+              style={{
+                ...styles.statusText,
+                color: organization.status === 'ACTIVE' ? styles.activeColor : styles.inactiveColor,
+              }}
+            >
+              {organization.status}
+            </span>
+          </p>
+        </div>
+      </div>
+      <div style={styles.organizationActions}>
+        {organization.canSwitch ? (
+          <span style={{...styles.badge, ...styles.successBadge}}>Can Switch</span>
+        ) : (
+          <span style={{...styles.badge, ...styles.errorBadge}}>No Access</span>
+        )}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 /**
  * Default loading renderer
  */
-const defaultRenderLoading = (): ReactNode => (
-  <div style={{padding: '32px', textAlign: 'center'}}>
-    <div>Loading organizations...</div>
+const defaultRenderLoading = (styles: any): ReactNode => (
+  <div style={styles.loadingContainer}>
+    <div style={styles.loadingText}>Loading organizations...</div>
   </div>
 );
 
 /**
  * Default error renderer
  */
-const defaultRenderError = (error: string): ReactNode => (
-  <div
-    style={{
-      backgroundColor: '#fef2f2',
-      border: '1px solid #fecaca',
-      borderRadius: '8px',
-      color: '#dc2626',
-      padding: '16px',
-    }}
-  >
+const defaultRenderError = (error: string, styles: any): ReactNode => (
+  <div style={styles.errorContainer}>
     <strong>Error:</strong> {error}
   </div>
 );
@@ -185,20 +172,13 @@ const defaultRenderError = (error: string): ReactNode => (
 /**
  * Default load more button renderer
  */
-const defaultRenderLoadMore = (onLoadMore: () => Promise<void>, isLoading: boolean): ReactNode => (
+const defaultRenderLoadMore = (onLoadMore: () => Promise<void>, isLoading: boolean, styles: any): ReactNode => (
   <button
     onClick={onLoadMore}
     disabled={isLoading}
     style={{
-      backgroundColor: isLoading ? '#d1d5db' : '#3b82f6',
-      border: 'none',
-      borderRadius: '8px',
-      color: 'white',
-      cursor: isLoading ? 'not-allowed' : 'pointer',
-      fontSize: '14px',
-      fontWeight: 'medium',
-      padding: '12px 24px',
-      width: '100%',
+      ...styles.loadMoreButton,
+      ...(isLoading ? styles.loadMoreButtonDisabled : {}),
     }}
     type="button"
   >
@@ -209,9 +189,9 @@ const defaultRenderLoadMore = (onLoadMore: () => Promise<void>, isLoading: boole
 /**
  * Default empty state renderer
  */
-const defaultRenderEmpty = (): ReactNode => (
-  <div style={{padding: '32px', textAlign: 'center'}}>
-    <div style={{color: '#6b7280', fontSize: '16px'}}>No organizations found</div>
+const defaultRenderEmpty = (styles: any): ReactNode => (
+  <div style={styles.emptyContainer}>
+    <div style={styles.emptyText}>No organizations found</div>
   </div>
 );
 
@@ -242,20 +222,35 @@ export const BaseOrganizationList: FC<BaseOrganizationListProps> = ({
   onOpenChange,
   onRefresh,
   open = false,
-  renderEmpty = defaultRenderEmpty,
-  renderError = defaultRenderError,
-  renderLoading = defaultRenderLoading,
-  renderLoadMore = defaultRenderLoadMore,
-  renderOrganization = defaultRenderOrganization,
+  renderEmpty,
+  renderError,
+  renderLoading,
+  renderLoadMore,
+  renderOrganization,
   style,
   title = 'Organizations',
   totalCount,
 }): ReactElement => {
+  const styles = useStyles();
+
+  // Use custom renderers or defaults with styles
+  const renderLoadingWithStyles = renderLoading || (() => defaultRenderLoading(styles));
+  const renderErrorWithStyles = renderError || ((error: string) => defaultRenderError(error, styles));
+  const renderEmptyWithStyles = renderEmpty || (() => defaultRenderEmpty(styles));
+  const renderLoadMoreWithStyles =
+    renderLoadMore ||
+    ((onLoadMore: () => Promise<void>, isLoading: boolean) => defaultRenderLoadMore(onLoadMore, isLoading, styles));
+  const renderOrganizationWithStyles =
+    renderOrganization || ((org: OrganizationWithSwitchAccess) => defaultRenderOrganization(org, styles));
+
   // Show loading state
   if (isLoading && data.length === 0) {
     const loadingContent = (
-      <div className={className} style={style}>
-        {renderLoading()}
+      <div
+        className={clsx(withVendorCSSClassPrefix('organization-list'), className)}
+        style={{...styles.root, ...style}}
+      >
+        {renderLoadingWithStyles()}
       </div>
     );
 
@@ -264,7 +259,7 @@ export const BaseOrganizationList: FC<BaseOrganizationListProps> = ({
         <Dialog open={open} onOpenChange={onOpenChange}>
           <DialogContent>
             <DialogHeading>{title}</DialogHeading>
-            <div style={{padding: '1rem'}}>{loadingContent}</div>
+            <div style={styles.popupContent}>{loadingContent}</div>
           </DialogContent>
         </Dialog>
       );
@@ -276,8 +271,11 @@ export const BaseOrganizationList: FC<BaseOrganizationListProps> = ({
   // Show error state
   if (error && data.length === 0) {
     const errorContent = (
-      <div className={className} style={style}>
-        {renderError(error)}
+      <div
+        className={clsx(withVendorCSSClassPrefix('organization-list'), className)}
+        style={{...styles.root, ...style}}
+      >
+        {renderErrorWithStyles(error)}
       </div>
     );
 
@@ -286,7 +284,7 @@ export const BaseOrganizationList: FC<BaseOrganizationListProps> = ({
         <Dialog open={open} onOpenChange={onOpenChange}>
           <DialogContent>
             <DialogHeading>{title}</DialogHeading>
-            <div style={{padding: '1rem'}}>{errorContent}</div>
+            <div style={styles.popupContent}>{errorContent}</div>
           </DialogContent>
         </Dialog>
       );
@@ -298,8 +296,11 @@ export const BaseOrganizationList: FC<BaseOrganizationListProps> = ({
   // Show empty state
   if (!isLoading && data.length === 0) {
     const emptyContent = (
-      <div className={className} style={style}>
-        {renderEmpty()}
+      <div
+        className={clsx(withVendorCSSClassPrefix('organization-list'), className)}
+        style={{...styles.root, ...style}}
+      >
+        {renderEmptyWithStyles()}
       </div>
     );
 
@@ -308,7 +309,7 @@ export const BaseOrganizationList: FC<BaseOrganizationListProps> = ({
         <Dialog open={open} onOpenChange={onOpenChange}>
           <DialogContent>
             <DialogHeading>{title}</DialogHeading>
-            <div style={{padding: '1rem'}}>{emptyContent}</div>
+            <div style={styles.popupContent}>{emptyContent}</div>
           </DialogContent>
         </Dialog>
       );
@@ -318,48 +319,38 @@ export const BaseOrganizationList: FC<BaseOrganizationListProps> = ({
   }
 
   const organizationListContent = (
-    <div className={className} style={style}>
+    <div className={clsx(withVendorCSSClassPrefix('organization-list'), className)} style={{...styles.root, ...style}}>
       {/* Header with total count and refresh button */}
-      <div style={{alignItems: 'center', display: 'flex', justifyContent: 'space-between', marginBottom: '16px'}}>
-        <div>
-          <h2 style={{fontSize: '24px', fontWeight: 'bold', margin: '0'}}>Organizations</h2>
+      <div style={styles.header}>
+        <div style={styles.headerInfo}>
+          <h2 style={styles.title}>Organizations</h2>
           {totalCount !== undefined && (
-            <p style={{color: '#6b7280', fontSize: '14px', margin: '4px 0 0 0'}}>
+            <p style={styles.subtitle}>
               Showing {data.length} of {totalCount} organizations
             </p>
           )}
         </div>
         {onRefresh && (
-          <button
-            onClick={onRefresh}
-            style={{
-              backgroundColor: '#f3f4f6',
-              border: '1px solid #d1d5db',
-              borderRadius: '6px',
-              color: '#374151',
-              cursor: 'pointer',
-              fontSize: '14px',
-              padding: '8px 16px',
-            }}
-            type="button"
-          >
+          <button onClick={onRefresh} style={styles.refreshButton} type="button">
             Refresh
           </button>
         )}
       </div>
 
       {/* Organizations list */}
-      <div style={{display: 'flex', flexDirection: 'column', gap: '12px'}}>
+      <div style={styles.listContainer}>
         {data.map((organization: OrganizationWithSwitchAccess, index: number) =>
-          renderOrganization(organization, index),
+          renderOrganizationWithStyles(organization, index),
         )}
       </div>
 
       {/* Error message for additional data */}
-      {error && data.length > 0 && <div style={{marginTop: '16px'}}>{renderError(error)}</div>}
+      {error && data.length > 0 && <div style={styles.errorMargin}>{renderErrorWithStyles(error)}</div>}
 
       {/* Load more button */}
-      {hasMore && fetchMore && <div style={{marginTop: '24px'}}>{renderLoadMore(fetchMore, isLoadingMore)}</div>}
+      {hasMore && fetchMore && (
+        <div style={styles.loadMoreMargin}>{renderLoadMoreWithStyles(fetchMore, isLoadingMore)}</div>
+      )}
     </div>
   );
 
@@ -368,7 +359,7 @@ export const BaseOrganizationList: FC<BaseOrganizationListProps> = ({
       <Dialog open={open} onOpenChange={onOpenChange}>
         <DialogContent>
           <DialogHeading>{title}</DialogHeading>
-          <div style={{padding: '1rem'}}>{organizationListContent}</div>
+          <div style={styles.popupContent}>{organizationListContent}</div>
         </DialogContent>
       </Dialog>
     );
@@ -377,4 +368,169 @@ export const BaseOrganizationList: FC<BaseOrganizationListProps> = ({
   return organizationListContent;
 };
 
+const useStyles = () => {
+  const {theme, colorScheme} = useTheme();
+
+  return useMemo(
+    () => ({
+      root: {
+        padding: `${theme.spacing.unit * 4}px`,
+        minWidth: '600px',
+        margin: '0 auto',
+        background: theme.colors.background.surface,
+        borderRadius: theme.borderRadius.large,
+        boxShadow: theme.shadows.small,
+      } as CSSProperties,
+      header: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: `${theme.spacing.unit * 3}px`,
+        paddingBottom: `${theme.spacing.unit * 2}px`,
+        borderBottom: `1px solid ${theme.colors.border}`,
+      } as CSSProperties,
+      headerInfo: {
+        flex: 1,
+      } as CSSProperties,
+      title: {
+        fontSize: '1.5rem',
+        fontWeight: 600,
+        margin: '0 0 8px 0',
+        color: theme.colors.text.primary,
+      } as CSSProperties,
+      subtitle: {
+        color: theme.colors.text.secondary,
+        fontSize: '0.875rem',
+        margin: '0',
+      } as CSSProperties,
+      refreshButton: {
+        backgroundColor: theme.colors.background.surface,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.borderRadius.small,
+        color: theme.colors.text.primary,
+        cursor: 'pointer',
+        fontSize: '0.875rem',
+        padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+        transition: 'all 0.2s',
+      } as CSSProperties,
+      listContainer: {
+        display: 'flex',
+        flexDirection: 'column' as const,
+        gap: `${theme.spacing.unit * 1.5}px`,
+      } as CSSProperties,
+      organizationItem: {
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.borderRadius.medium,
+        display: 'flex',
+        justifyContent: 'space-between',
+        padding: `${theme.spacing.unit * 2}px`,
+        transition: 'all 0.2s',
+        cursor: 'pointer',
+        backgroundColor: theme.colors.background.surface,
+      } as CSSProperties,
+      organizationContent: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: `${theme.spacing.unit * 2}px`,
+        flex: 1,
+      } as CSSProperties,
+      organizationInfo: {
+        flex: 1,
+      } as CSSProperties,
+      organizationName: {
+        fontSize: '1.125rem',
+        fontWeight: 600,
+        margin: '0 0 4px 0',
+        color: theme.colors.text.primary,
+      } as CSSProperties,
+      organizationHandle: {
+        color: theme.colors.text.secondary,
+        fontSize: '0.875rem',
+        margin: '0 0 4px 0',
+        fontFamily: 'monospace',
+      } as CSSProperties,
+      organizationStatus: {
+        color: theme.colors.text.secondary,
+        fontSize: '0.875rem',
+        margin: '0',
+      } as CSSProperties,
+      statusText: {
+        fontWeight: 500,
+      } as CSSProperties,
+      activeColor: theme.colors.success.main,
+      inactiveColor: theme.colors.error.main,
+      organizationActions: {
+        display: 'flex',
+        alignItems: 'center',
+      } as CSSProperties,
+      badge: {
+        borderRadius: theme.borderRadius.large,
+        fontSize: '0.75rem',
+        fontWeight: 500,
+        padding: '4px 12px',
+        textTransform: 'uppercase' as const,
+        letterSpacing: '0.5px',
+      } as CSSProperties,
+      successBadge: {
+        backgroundColor: `${theme.colors.success.main}20`,
+        color: theme.colors.success.main,
+      } as CSSProperties,
+      errorBadge: {
+        backgroundColor: `${theme.colors.error.main}20`,
+        color: theme.colors.error.main,
+      } as CSSProperties,
+      loadingContainer: {
+        padding: `${theme.spacing.unit * 4}px`,
+        textAlign: 'center' as const,
+      } as CSSProperties,
+      loadingText: {
+        color: theme.colors.text.secondary,
+        fontSize: '1rem',
+      } as CSSProperties,
+      errorContainer: {
+        backgroundColor: `${theme.colors.error.main}20`,
+        border: `1px solid ${theme.colors.error.main}`,
+        borderRadius: theme.borderRadius.medium,
+        color: theme.colors.error.main,
+        padding: `${theme.spacing.unit * 2}px`,
+      } as CSSProperties,
+      emptyContainer: {
+        padding: `${theme.spacing.unit * 4}px`,
+        textAlign: 'center' as const,
+      } as CSSProperties,
+      emptyText: {
+        color: theme.colors.text.secondary,
+        fontSize: '1rem',
+      } as CSSProperties,
+      loadMoreButton: {
+        backgroundColor: theme.colors.primary.main,
+        border: 'none',
+        borderRadius: theme.borderRadius.medium,
+        color: theme.colors.primary.contrastText,
+        cursor: 'pointer',
+        fontSize: '0.875rem',
+        fontWeight: 500,
+        padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit * 3}px`,
+        width: '100%',
+        transition: 'all 0.2s',
+      } as CSSProperties,
+      loadMoreButtonDisabled: {
+        backgroundColor: theme.colors.text.secondary,
+        cursor: 'not-allowed',
+        opacity: 0.6,
+      } as CSSProperties,
+      errorMargin: {
+        marginTop: `${theme.spacing.unit * 2}px`,
+      } as CSSProperties,
+      loadMoreMargin: {
+        marginTop: `${theme.spacing.unit * 3}px`,
+      } as CSSProperties,
+      popupContent: {
+        padding: `${theme.spacing.unit}px`,
+      } as CSSProperties,
+    }),
+    [theme, colorScheme],
+  );
+};
+
 export default BaseOrganizationList;
diff --git a/packages/react/src/components/presentation/OrganizationList/OrganizationList.tsx b/packages/react/src/components/presentation/OrganizationList/OrganizationList.tsx
index 9436b45bb..9f7187405 100644
--- a/packages/react/src/components/presentation/OrganizationList/OrganizationList.tsx
+++ b/packages/react/src/components/presentation/OrganizationList/OrganizationList.tsx
@@ -16,11 +16,14 @@
  * under the License.
  */
 
-import {FC, ReactElement, useEffect} from 'react';
+import {withVendorCSSClassPrefix} from '@asgardeo/browser';
+import {FC, ReactElement, useEffect, useMemo, CSSProperties} from 'react';
 import {BaseOrganizationListProps} from './BaseOrganizationList';
 import BaseOrganizationList from './BaseOrganizationList';
 import useOrganization from '../../../contexts/Organization/useOrganization';
+import useTheme from '../../../contexts/Theme/useTheme';
 import {OrganizationWithSwitchAccess} from '../../../contexts/Organization/OrganizationContext';
+import {Avatar} from '../../primitives/Avatar/Avatar';
 
 /**
  * Configuration options for the OrganizationList component.
@@ -62,7 +65,7 @@ export interface OrganizationListProps
 
 /**
  * OrganizationList component that provides organization listing functionality with pagination.
- * This component uses the enhanced OrganizationContext, eliminating the polling issue and 
+ * This component uses the enhanced OrganizationContext, eliminating the polling issue and
  * providing better integration with the existing context system.
  *
  * @example

From a6d1c5d636b3b845ff339765a42c02ede32ce82f Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 24 Jun 2025 13:48:20 +0530
Subject: [PATCH 78/96] feat(react): Enhance organization management with new
 translations, improved profile rendering, and customizable fields in
 BaseOrganizationProfile

---
 packages/javascript/src/i18n/en-US.ts         |   2 +
 packages/javascript/src/models/i18n.ts        |   2 +
 .../react/src/api/scim2/getOrganization.ts    |   1 +
 .../BaseOrganizationProfile.tsx               | 221 ++++++++++--------
 .../OrganizationProfile.tsx                   |  15 +-
 .../BaseOrganizationSwitcher.tsx              |  73 +++---
 .../UserProfile/BaseUserProfile.tsx           |   5 +-
 .../src/components/primitives/Card/Card.tsx   |   3 +-
 packages/react/src/index.ts                   |   6 +
 9 files changed, 194 insertions(+), 134 deletions(-)

diff --git a/packages/javascript/src/i18n/en-US.ts b/packages/javascript/src/i18n/en-US.ts
index c3021c273..c327ea5ca 100644
--- a/packages/javascript/src/i18n/en-US.ts
+++ b/packages/javascript/src/i18n/en-US.ts
@@ -89,6 +89,8 @@ const translations: I18nTranslations = {
   'organization.switcher.member': 'member',
   'organization.switcher.create.organization': 'Create Organization',
   'organization.switcher.manage.organizations': 'Manage Organization',
+  'organization.switcher.manage.button': 'Manage',
+  'organization.profile.title': 'Organization Profile',
   'organization.profile.loading': 'Loading organization...',
   'organization.profile.error': 'Failed to load organization',
 
diff --git a/packages/javascript/src/models/i18n.ts b/packages/javascript/src/models/i18n.ts
index f0c543196..1df787845 100644
--- a/packages/javascript/src/models/i18n.ts
+++ b/packages/javascript/src/models/i18n.ts
@@ -87,6 +87,8 @@ export interface I18nTranslations {
   'organization.switcher.member': string;
   'organization.switcher.create.organization': string;
   'organization.switcher.manage.organizations': string;
+  'organization.switcher.manage.button': string;
+  'organization.profile.title': string;
   'organization.profile.loading': string;
   'organization.profile.error': string;
 
diff --git a/packages/react/src/api/scim2/getOrganization.ts b/packages/react/src/api/scim2/getOrganization.ts
index a7b7ebb0c..d2fc8cc8c 100644
--- a/packages/react/src/api/scim2/getOrganization.ts
+++ b/packages/react/src/api/scim2/getOrganization.ts
@@ -24,6 +24,7 @@ const httpClient: HttpInstance = AsgardeoSPAClient.getInstance().httpRequest.bin
  * Extended organization interface with additional properties
  */
 export interface OrganizationDetails {
+  attributes?: Record<string, any>;
   created?: string;
   description?: string;
   id: string;
diff --git a/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx b/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
index d730a65b0..f40d85b29 100644
--- a/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
+++ b/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
@@ -22,6 +22,23 @@ import {FC, ReactElement, useMemo, CSSProperties} from 'react';
 import {OrganizationDetails} from '../../../api/scim2/getOrganization';
 import useTheme from '../../../contexts/Theme/useTheme';
 import {Avatar} from '../../primitives/Avatar/Avatar';
+import Card from '../../primitives/Card/Card';
+
+/**
+ * Formats a date string to a human-readable format
+ */
+const formatDate = (dateString?: string): string => {
+  if (!dateString) return '-';
+  try {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  } catch {
+    return dateString;
+  }
+};
 
 export interface BaseOrganizationProfileProps {
   /**
@@ -39,6 +56,15 @@ export interface BaseOrganizationProfileProps {
    */
   fallback?: ReactElement;
 
+  /**
+   * Array of field configurations to display. Each field specifies what organization data to show.
+   */
+  fields?: Array<{
+    key: keyof OrganizationDetails | 'attributes';
+    label: string;
+    render?: (value: any, organization: OrganizationDetails) => React.ReactNode;
+  }>;
+
   /**
    * The organization details to display.
    */
@@ -70,6 +96,18 @@ export interface BaseOrganizationProfileProps {
  *   title="Organization Details"
  *   fallback={<div>No organization data available</div>}
  * />
+ *
+ * // With custom fields configuration
+ * <BaseOrganizationProfile
+ *   organization={organizationData}
+ *   fields={[
+ *     { key: 'id', label: 'Organization ID' },
+ *     { key: 'name', label: 'Organization Name' },
+ *     { key: 'description', label: 'Description', render: (value) => value || 'No description' },
+ *     { key: 'created', label: 'Created Date', render: (value) => new Date(value).toLocaleDateString() },
+ *     { key: 'attributes', label: 'Custom Attributes' }
+ *   ]}
+ * />
  * ```
  */
 const BaseOrganizationProfile: FC<BaseOrganizationProfileProps> = ({
@@ -78,22 +116,38 @@ const BaseOrganizationProfile: FC<BaseOrganizationProfileProps> = ({
   cardLayout = true,
   organization,
   title = 'Organization Profile',
+  fields = [
+    {
+      key: 'id',
+      label: 'Organization ID',
+    },
+    {
+      key: 'name',
+      label: 'Organization Name',
+    },
+    {
+      key: 'description',
+      label: 'Organization Description',
+      render: value => value || '-',
+    },
+    {
+      key: 'created',
+      label: 'Created Date',
+      render: value => formatDate(value),
+    },
+    {
+      key: 'lastModified',
+      label: 'Last Modified Date',
+      render: value => formatDate(value),
+    },
+    {
+      key: 'attributes',
+      label: 'Organization Attributes',
+    },
+  ],
 }): ReactElement => {
   const {theme} = useTheme();
 
-  const formatDate = (dateString?: string): string => {
-    if (!dateString) return '-';
-    try {
-      return new Date(dateString).toLocaleDateString('en-US', {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-      });
-    } catch {
-      return dateString;
-    }
-  };
-
   const formatLabel = (key: string): string =>
     key
       .split(/(?=[A-Z])|_/)
@@ -134,52 +188,8 @@ const BaseOrganizationProfile: FC<BaseOrganizationProfileProps> = ({
     ...(cardLayout ? styles.card : {}),
   };
 
-  const orgFields = [
-    {
-      key: 'id',
-      label: 'Organization ID',
-      value: organization.id,
-    },
-    {
-      key: 'orgHandle',
-      label: 'Organization Handle',
-      value: organization.orgHandle,
-    },
-    {
-      key: 'description',
-      label: 'Description',
-      value: organization.description || '-',
-    },
-    {
-      key: 'status',
-      label: 'Status',
-      value: organization.status,
-      isStatus: true,
-    },
-    {
-      key: 'type',
-      label: 'Type',
-      value: organization.type || '-',
-    },
-    {
-      key: 'created',
-      label: 'Created',
-      value: formatDate(organization.created),
-    },
-    {
-      key: 'lastModified',
-      label: 'Last Modified',
-      value: formatDate(organization.lastModified),
-    },
-    {
-      key: 'parent',
-      label: 'Parent Organization',
-      value: organization.parent?.id || '-',
-    },
-  ];
-
   return (
-    <div style={containerStyle} className={clsx(withVendorCSSClassPrefix('organization-profile'), className)}>
+    <Card style={containerStyle} className={clsx(withVendorCSSClassPrefix('organization-profile'), className)}>
       <div style={styles.header}>
         <Avatar name={getOrgInitials(organization.name)} size={80} alt={`${organization.name} logo`} />
         <div style={styles.orgInfo}>
@@ -189,46 +199,44 @@ const BaseOrganizationProfile: FC<BaseOrganizationProfileProps> = ({
       </div>
 
       <div style={styles.infoContainer}>
-        {orgFields.map((field, index) => (
-          <div
-            key={field.key}
-            style={{
-              ...styles.field,
-              ...(index === orgFields.length - 1 ? styles.lastField : {}),
-            }}
-          >
-            <span style={styles.label}>{field.label}:</span>
-            <span style={styles.value}>
-              {field.isStatus ? (
-                <span
-                  style={{
-                    ...styles.statusBadge,
-                    backgroundColor: getStatusColor(field.value),
-                  }}
-                >
-                  {field.value}
-                </span>
-              ) : (
-                field.value
-              )}
-            </span>
-          </div>
-        ))}
+        {fields.map((field, index) => {
+          const value =
+            field.key === 'attributes'
+              ? organization.attributes || {}
+              : organization[field.key as keyof OrganizationDetails];
 
-        {organization.permissions && organization.permissions.length > 0 && (
-          <div style={styles.field}>
-            <span style={styles.label}>Permissions:</span>
-            <div style={styles.permissionsList}>
-              {organization.permissions.map((permission, index) => (
-                <span key={index} style={styles.permissionBadge}>
-                  {permission}
-                </span>
-              ))}
+          const renderedValue = field.render ? field.render(value, organization) : value;
+
+          return (
+            <div
+              key={field.key}
+              style={{
+                ...styles.field,
+                ...(index === fields.length - 1 ? styles.lastField : {}),
+              }}
+            >
+              <span style={styles.label}>{field.label}:</span>
+              <span style={styles.value}>
+                {field.key === 'attributes' && typeof value === 'object' && value !== null ? (
+                  <div style={styles.attributesList}>
+                    {Object.entries(value).length > 0
+                      ? Object.entries(value).map(([key, val]) => (
+                          <div key={key} style={styles.attributeItem}>
+                            <span style={styles.attributeKey}>{key}:</span>
+                            <span style={styles.attributeValue}>{String(val)}</span>
+                          </div>
+                        ))
+                      : '-'}
+                  </div>
+                ) : (
+                  renderedValue || '-'
+                )}
+              </span>
             </div>
-          </div>
-        )}
+          );
+        })}
       </div>
-    </div>
+    </Card>
   );
 };
 
@@ -245,7 +253,6 @@ const useStyles = () => {
       card: {
         background: theme.colors.background.surface,
         borderRadius: theme.borderRadius.large,
-        boxShadow: theme.shadows.small,
       } as CSSProperties,
       header: {
         display: 'flex',
@@ -326,6 +333,28 @@ const useStyles = () => {
         color: theme.colors.primary.contrastText,
         border: `1px solid ${theme.colors.border}`,
       } as CSSProperties,
+      attributesList: {
+        display: 'flex',
+        flexDirection: 'column' as const,
+        gap: `${theme.spacing.unit / 2}px`,
+      } as CSSProperties,
+      attributeItem: {
+        display: 'flex',
+        gap: `${theme.spacing.unit}px`,
+        padding: `${theme.spacing.unit / 2}px 0`,
+      } as CSSProperties,
+      attributeKey: {
+        fontSize: '0.75rem',
+        fontWeight: 500,
+        color: theme.colors.text.secondary,
+        minWidth: '100px',
+        flexShrink: 0,
+      } as CSSProperties,
+      attributeValue: {
+        fontSize: '0.75rem',
+        color: theme.colors.text.primary,
+        wordBreak: 'break-word' as const,
+      } as CSSProperties,
     }),
     [theme, colorScheme],
   );
diff --git a/packages/react/src/components/presentation/OrganizationProfile/OrganizationProfile.tsx b/packages/react/src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
index e990990e3..4698985a2 100644
--- a/packages/react/src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
+++ b/packages/react/src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
@@ -87,6 +87,19 @@ export type OrganizationProfileProps = Omit<BaseOrganizationProfileProps, 'organ
  *   fallback={<div>No organization data available</div>}
  * />
  *
+ * // With custom fields configuration
+ * <OrganizationProfile
+ *   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
+ *   fields={[
+ *     { key: 'id', label: 'Organization ID' },
+ *     { key: 'name', label: 'Organization Name' },
+ *     { key: 'description', label: 'Description', render: (value) => value || 'No description' },
+ *     { key: 'created', label: 'Created Date', render: (value) => new Date(value).toLocaleDateString() },
+ *     { key: 'lastModified', label: 'Last Modified Date', render: (value) => new Date(value).toLocaleDateString() },
+ *     { key: 'attributes', label: 'Custom Attributes' }
+ *   ]}
+ * />
+ *
  * // In popup mode
  * <OrganizationProfile
  *   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
@@ -167,7 +180,7 @@ const OrganizationProfile: FC<OrganizationProfileProps> = ({
     );
   }
 
-  const profileContent = <BaseOrganizationProfile organization={organization} {...rest} />;
+  const profileContent = <BaseOrganizationProfile organization={organization} fields={rest.fields} {...rest} />;
 
   if (mode === 'popup') {
     return (
diff --git a/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx b/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
index 0768bc4b3..e26b7b54e 100644
--- a/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
+++ b/packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
@@ -161,6 +161,23 @@ const useStyles = () => {
         fontSize: '0.875rem',
         textAlign: 'center',
       } as CSSProperties,
+      manageButton: {
+        minWidth: 'auto',
+        marginLeft: 'auto',
+      } as CSSProperties,
+      roleCapitalized: {
+        textTransform: 'capitalize',
+      } as CSSProperties,
+      sectionHeader: {
+        textTransform: 'uppercase',
+        letterSpacing: '0.05em',
+        color: theme.colors.text.secondary,
+      } as CSSProperties,
+      sectionHeaderContainer: {
+        borderTop: 'none',
+        borderBottom: 'none',
+        paddingBottom: `${theme.spacing.unit / 2}px`,
+      } as CSSProperties,
     }),
     [theme, colorScheme],
   );
@@ -376,7 +393,7 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
           {showRole && organization.role && showMemberCount && organization.memberCount !== undefined && (
             <span> • </span>
           )}
-          {showRole && organization.role && <span style={{textTransform: 'capitalize'}}>{organization.role}</span>}
+          {showRole && organization.role && <span style={styles.roleCapitalized}>{organization.role}</span>}
         </div>
       </div>
       {isSelected && <Check width="16" height="16" color={theme.colors.text.primary} />}
@@ -504,7 +521,7 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
                             className={withVendorCSSClassPrefix('organization-switcher__header-role')}
                             variant="caption"
                             color="secondary"
-                            style={{textTransform: 'capitalize'}}
+                            style={styles.roleCapitalized}
                           >
                             {currentOrganization.role}
                           </Typography>
@@ -515,28 +532,27 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
                     <Button
                       onClick={onManageProfile}
                       color="tertiary"
-                      variant="text"
+                      variant="outline"
                       size="small"
-                      aria-label="Manage organization profile"
-                      style={{
-                        minWidth: 'auto',
-                        padding: `${theme.spacing.unit / 2}px`,
-                        marginLeft: 'auto',
-                      }}
+                      aria-label="Manage Organization Profile"
+                      style={styles.manageButton}
+                      endIcon={
+                        <svg
+                          width="16"
+                          height="16"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        >
+                          <circle cx="12" cy="12" r="3" />
+                          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+                        </svg>
+                      }
                     >
-                      <svg
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      >
-                        <circle cx="12" cy="12" r="3" />
-                        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
-                      </svg>
+                      {t('organization.switcher.manage.button')}
                     </Button>
                   )}
                 </div>
@@ -547,20 +563,11 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
                 <div
                   style={{
                     ...styles.dropdownHeader,
+                    ...styles.sectionHeaderContainer,
                     borderTop: currentOrganization ? `1px solid ${theme.colors.border}` : 'none',
-                    borderBottom: 'none',
-                    paddingBottom: `${theme.spacing.unit / 2}px`,
                   }}
                 >
-                  <Typography
-                    variant="caption"
-                    fontWeight={600}
-                    style={{
-                      textTransform: 'uppercase',
-                      letterSpacing: '0.05em',
-                      color: theme.colors.text.secondary,
-                    }}
-                  >
+                  <Typography variant="caption" fontWeight={600} style={styles.sectionHeader}>
                     {t('organization.switcher.switch.organization')}
                   </Typography>
                 </div>
diff --git a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
index 4b18314c4..6158b3ff5 100644
--- a/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
+++ b/packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx
@@ -27,6 +27,7 @@ import Checkbox from '../../primitives/Checkbox/Checkbox';
 import DatePicker from '../../primitives/DatePicker/DatePicker';
 import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Popover';
 import TextField from '../../primitives/TextField/TextField';
+import Card from '../../primitives/Card/Card';
 
 interface ExtendedFlatSchema {
   path?: string;
@@ -573,7 +574,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
   const fieldsToSkip: string[] = ['verifiedMobileNumbers', 'verifiedEmailAddresses'];
 
   const profileContent = (
-    <div style={containerStyle} className={clsx(withVendorCSSClassPrefix('user-profile'), className)}>
+    <Card style={containerStyle} className={clsx(withVendorCSSClassPrefix('user-profile'), className)}>
       <div style={styles.header}>
         <Avatar
           imageUrl={getMappedUserProfileValue('picture', mergedMappings, currentUser)}
@@ -614,7 +615,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
             return <div key={schema.name || index}>{renderUserInfo(schemaWithValue)}</div>;
           })}
       </div>
-    </div>
+    </Card>
   );
 
   if (mode === 'popup') {
diff --git a/packages/react/src/components/primitives/Card/Card.tsx b/packages/react/src/components/primitives/Card/Card.tsx
index 7ed509d72..5500ce812 100644
--- a/packages/react/src/components/primitives/Card/Card.tsx
+++ b/packages/react/src/components/primitives/Card/Card.tsx
@@ -100,7 +100,6 @@ const useCardStyles = (variant: CardVariant, clickable: boolean) => {
     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',
@@ -115,7 +114,7 @@ const useCardStyles = (variant: CardVariant, clickable: boolean) => {
       },
       outlined: {
         ...baseStyles,
-        border: `2px solid ${theme.colors.border}`,
+        border: `1px solid ${theme.colors.border}`,
         backgroundColor: 'transparent',
       },
       elevated: {
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 0610611e0..492675819 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -170,6 +170,12 @@ export * from './components/presentation/OrganizationList/BaseOrganizationList';
 export {default as OrganizationList} from './components/presentation/OrganizationList/OrganizationList';
 export * from './components/presentation/OrganizationList/OrganizationList';
 
+export {default as BaseOrganizationProfile} from './components/presentation/OrganizationProfile/BaseOrganizationProfile';
+export * from './components/presentation/OrganizationProfile/BaseOrganizationProfile';
+
+export {default as OrganizationProfile} from './components/presentation/OrganizationProfile/OrganizationProfile';
+export * from './components/presentation/OrganizationProfile/OrganizationProfile';
+
 export {BaseCreateOrganization} from './components/presentation/CreateOrganization/BaseCreateOrganization';
 export * from './components/presentation/CreateOrganization/BaseCreateOrganization';
 

From db9c4192e9da45e82f6a0bedf96bbcf18dd570e3 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 24 Jun 2025 14:33:27 +0530
Subject: [PATCH 79/96] feat(react): Add isEmpty utility function and update
 organization management with editable profile support

---
 packages/javascript/src/index.ts              |   1 +
 .../src/utils/__tests__/isEmpty.test.ts       |  95 ++++
 packages/javascript/src/utils/isEmpty.ts      |  68 +++
 .../react/src/api/scim2/updateOrganization.ts | 162 ++++++
 .../BaseOrganizationProfile.tsx               | 469 ++++++++++++++++--
 .../OrganizationProfile.tsx                   | 137 +++--
 6 files changed, 844 insertions(+), 88 deletions(-)
 create mode 100644 packages/javascript/src/utils/__tests__/isEmpty.test.ts
 create mode 100644 packages/javascript/src/utils/isEmpty.ts
 create mode 100644 packages/react/src/api/scim2/updateOrganization.ts

diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 73a4910af..7e51d8208 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -93,6 +93,7 @@ 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 isEmpty} from './utils/isEmpty';
 export {default as set} from './utils/set';
 export {default as get} from './utils/get';
 export {default as removeTrailingSlash} from './utils/removeTrailingSlash';
diff --git a/packages/javascript/src/utils/__tests__/isEmpty.test.ts b/packages/javascript/src/utils/__tests__/isEmpty.test.ts
new file mode 100644
index 000000000..268cc8b2d
--- /dev/null
+++ b/packages/javascript/src/utils/__tests__/isEmpty.test.ts
@@ -0,0 +1,95 @@
+/**
+ * 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 isEmpty from '../isEmpty';
+
+describe('isEmpty', () => {
+  it('should return true for null', () => {
+    expect(isEmpty(null)).toBe(true);
+  });
+
+  it('should return true for undefined', () => {
+    expect(isEmpty(undefined)).toBe(true);
+  });
+
+  it('should return true for empty string', () => {
+    expect(isEmpty('')).toBe(true);
+  });
+
+  it('should return true for whitespace-only string', () => {
+    expect(isEmpty('   ')).toBe(true);
+    expect(isEmpty('\t')).toBe(true);
+    expect(isEmpty('\n')).toBe(true);
+    expect(isEmpty(' \t\n ')).toBe(true);
+  });
+
+  it('should return false for non-empty string', () => {
+    expect(isEmpty('hello')).toBe(false);
+    expect(isEmpty(' hello ')).toBe(false);
+    expect(isEmpty('0')).toBe(false);
+  });
+
+  it('should return true for empty array', () => {
+    expect(isEmpty([])).toBe(true);
+  });
+
+  it('should return false for non-empty array', () => {
+    expect(isEmpty([1, 2, 3])).toBe(false);
+    expect(isEmpty([''])).toBe(false);
+    expect(isEmpty([null])).toBe(false);
+  });
+
+  it('should return true for empty object', () => {
+    expect(isEmpty({})).toBe(true);
+  });
+
+  it('should return false for non-empty object', () => {
+    expect(isEmpty({name: 'John'})).toBe(false);
+    expect(isEmpty({'': ''})).toBe(false);
+    expect(isEmpty({a: undefined})).toBe(false);
+  });
+
+  it('should return false for numbers', () => {
+    expect(isEmpty(0)).toBe(false);
+    expect(isEmpty(1)).toBe(false);
+    expect(isEmpty(-1)).toBe(false);
+    expect(isEmpty(3.14)).toBe(false);
+    expect(isEmpty(NaN)).toBe(false);
+    expect(isEmpty(Infinity)).toBe(false);
+  });
+
+  it('should return false for booleans', () => {
+    expect(isEmpty(true)).toBe(false);
+    expect(isEmpty(false)).toBe(false);
+  });
+
+  it('should return false for functions', () => {
+    expect(isEmpty(() => {})).toBe(false);
+    expect(isEmpty(function () {})).toBe(false);
+  });
+
+  it('should return false for dates', () => {
+    expect(isEmpty(new Date())).toBe(false);
+  });
+
+  it('should return false for other object types', () => {
+    expect(isEmpty(new Set())).toBe(false);
+    expect(isEmpty(new Map())).toBe(false);
+    expect(isEmpty(/regex/)).toBe(false);
+  });
+});
diff --git a/packages/javascript/src/utils/isEmpty.ts b/packages/javascript/src/utils/isEmpty.ts
new file mode 100644
index 000000000..f9b14ac55
--- /dev/null
+++ b/packages/javascript/src/utils/isEmpty.ts
@@ -0,0 +1,68 @@
+/**
+ * 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 considered empty.
+ *
+ * A value is considered empty if it is:
+ * - null
+ * - undefined
+ * - empty string ("")
+ * - string containing only whitespace characters
+ * - empty array ([])
+ * - empty object ({})
+ *
+ * @param value - The value to check
+ * @returns true if the value is empty, false otherwise
+ *
+ * @example
+ * ```typescript
+ * isEmpty(null);              // true
+ * isEmpty(undefined);         // true
+ * isEmpty("");                // true
+ * isEmpty("   ");             // true
+ * isEmpty("hello");           // false
+ * isEmpty([]);                // true
+ * isEmpty([1, 2, 3]);         // false
+ * isEmpty({});                // true
+ * isEmpty({ name: "John" });  // false
+ * isEmpty(0);                 // false
+ * isEmpty(false);             // false
+ * ```
+ */
+const isEmpty = (value: any): boolean => {
+  if (value === null || value === undefined) {
+    return true;
+  }
+
+  if (typeof value === 'string') {
+    return value.trim() === '';
+  }
+
+  if (Array.isArray(value)) {
+    return value.length === 0;
+  }
+
+  if (typeof value === 'object' && value.constructor === Object) {
+    return Object.keys(value).length === 0;
+  }
+
+  return false;
+};
+
+export default isEmpty;
diff --git a/packages/react/src/api/scim2/updateOrganization.ts b/packages/react/src/api/scim2/updateOrganization.ts
new file mode 100644
index 000000000..0214803e4
--- /dev/null
+++ b/packages/react/src/api/scim2/updateOrganization.ts
@@ -0,0 +1,162 @@
+/**
+ * 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, HttpInstance, AsgardeoSPAClient, HttpRequestConfig, isEmpty} from '@asgardeo/browser';
+import {OrganizationDetails} from './getOrganization';
+
+const httpClient: HttpInstance = AsgardeoSPAClient.getInstance().httpRequest.bind(AsgardeoSPAClient.getInstance());
+
+/**
+ * Updates the organization information using the Organizations Management API.
+ *
+ * @param baseUrl - The base URL for the API.
+ * @param organizationId - The ID of the organization to update.
+ * @param operations - Array of patch operations to apply.
+ * @param requestConfig - Additional request config if needed.
+ * @returns A promise that resolves with the updated organization information.
+ * @example
+ * ```typescript
+ * // Using the helper function to create operations automatically
+ * const operations = createPatchOperations({
+ *   name: "Updated Organization Name",      // Will use REPLACE
+ *   description: "",                        // Will use REMOVE (empty string)
+ *   customField: "Some value"              // Will use REPLACE
+ * });
+ *
+ * await updateOrganization({
+ *   baseUrl: "https://api.asgardeo.io/t/<ORG>",
+ *   organizationId: "0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1",
+ *   operations
+ * });
+ *
+ * // Or manually specify operations
+ * await updateOrganization({
+ *   baseUrl: "https://api.asgardeo.io/t/<ORG>",
+ *   organizationId: "0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1",
+ *   operations: [
+ *     { operation: "REPLACE", path: "/name", value: "Updated Organization Name" },
+ *     { operation: "REMOVE", path: "/description" }
+ *   ]
+ * });
+ * ```
+ */
+const updateOrganization = async ({
+  baseUrl,
+  organizationId,
+  operations,
+  ...requestConfig
+}: {
+  baseUrl: string;
+  organizationId: string;
+  operations: Array<{
+    operation: 'REPLACE' | 'ADD' | 'REMOVE';
+    path: string;
+    value?: any;
+  }>;
+} & Partial<Request>): Promise<OrganizationDetails> => {
+  try {
+    new URL(baseUrl);
+  } catch (error) {
+    throw new AsgardeoAPIError(
+      'Invalid base URL provided',
+      'updateOrganization-ValidationError-001',
+      'javascript',
+      400,
+      'Invalid Request',
+    );
+  }
+
+  if (!organizationId) {
+    throw new AsgardeoAPIError(
+      'Organization ID is required',
+      'updateOrganization-ValidationError-002',
+      'javascript',
+      400,
+      'Invalid Request',
+    );
+  }
+
+  if (!operations || !Array.isArray(operations) || operations.length === 0) {
+    throw new AsgardeoAPIError(
+      'Operations array is required and cannot be empty',
+      'updateOrganization-ValidationError-003',
+      'javascript',
+      400,
+      'Invalid Request',
+    );
+  }
+
+  const url = `${baseUrl}/api/server/v1/organizations/${organizationId}`;
+
+  const response: any = await httpClient({
+    url,
+    method: 'PATCH',
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+    },
+    data: operations,
+    ...requestConfig,
+  } as HttpRequestConfig);
+
+  if (!response.data) {
+    const errorText = await response.text();
+
+    throw new AsgardeoAPIError(
+      `Failed to update organization: ${errorText}`,
+      'updateOrganization-ResponseError-001',
+      'javascript',
+      response.status,
+      response.statusText,
+    );
+  }
+
+  return response.data;
+};
+
+/**
+ * Helper function to convert field updates to patch operations format.
+ * Uses REMOVE operation when the value is empty, otherwise uses REPLACE.
+ *
+ * @param payload - Object containing field updates
+ * @returns Array of patch operations
+ */
+export const createPatchOperations = (
+  payload: Record<string, any>,
+): Array<{
+  operation: 'REPLACE' | 'REMOVE';
+  path: string;
+  value?: any;
+}> => {
+  return Object.entries(payload).map(([key, value]) => {
+    if (isEmpty(value)) {
+      return {
+        operation: 'REMOVE' as const,
+        path: `/${key}`,
+      };
+    }
+
+    return {
+      operation: 'REPLACE' as const,
+      path: `/${key}`,
+      value,
+    };
+  });
+};
+
+export default updateOrganization;
diff --git a/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx b/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
index f40d85b29..d00aa073e 100644
--- a/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
+++ b/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
@@ -18,10 +18,15 @@
 
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
-import {FC, ReactElement, useMemo, CSSProperties} from 'react';
+import {FC, ReactElement, useMemo, CSSProperties, useState, useCallback, useRef} from 'react';
 import {OrganizationDetails} from '../../../api/scim2/getOrganization';
 import useTheme from '../../../contexts/Theme/useTheme';
 import {Avatar} from '../../primitives/Avatar/Avatar';
+import Button from '../../primitives/Button/Button';
+import Checkbox from '../../primitives/Checkbox/Checkbox';
+import DatePicker from '../../primitives/DatePicker/DatePicker';
+import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Popover';
+import TextField from '../../primitives/TextField/TextField';
 import Card from '../../primitives/Card/Card';
 
 /**
@@ -41,6 +46,11 @@ const formatDate = (dateString?: string): string => {
 };
 
 export interface BaseOrganizationProfileProps {
+  /**
+   * Callback fired when the cancel button is clicked (only used in editable mode).
+   */
+  cancelButtonText?: string;
+
   /**
    * Whether to display the profile in a card layout.
    */
@@ -51,6 +61,11 @@ export interface BaseOrganizationProfileProps {
    */
   className?: string;
 
+  /**
+   * Whether the organization profile is editable.
+   */
+  editable?: boolean;
+
   /**
    * Component to render when no organization data is available.
    */
@@ -62,14 +77,50 @@ export interface BaseOrganizationProfileProps {
   fields?: Array<{
     key: keyof OrganizationDetails | 'attributes';
     label: string;
+    editable?: boolean;
     render?: (value: any, organization: OrganizationDetails) => React.ReactNode;
   }>;
 
+  /**
+   * Display mode for the component.
+   */
+  mode?: 'inline' | 'popup';
+
+  /**
+   * Callback fired when a field value changes.
+   */
+  onChange?: (field: string, value: any) => void;
+
+  /**
+   * Callback fired when the popup should be closed (only used in popup mode).
+   */
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * Callback fired when the form is submitted (only used in editable mode).
+   */
+  onSubmit?: (data: any) => void;
+
+  /**
+   * Callback fired when the organization should be updated.
+   */
+  onUpdate?: (payload: any) => Promise<void>;
+
+  /**
+   * Whether the popup is open (only used in popup mode).
+   */
+  open?: boolean;
+
   /**
    * The organization details to display.
    */
   organization?: OrganizationDetails | null;
 
+  /**
+   * Text for the save button (only used in editable mode).
+   */
+  saveButtonText?: string;
+
   /**
    * Custom title for the profile.
    */
@@ -79,16 +130,26 @@ export interface BaseOrganizationProfileProps {
 /**
  * BaseOrganizationProfile component displays organization information in a
  * structured and styled format. It shows organization details such as name,
- * description, status, and other available information.
+ * description, status, and other available information with support for inline editing.
  *
  * This is the base component that can be used in any context where you have
- * an organization object available.
+ * an organization object available. It provides editing capabilities similar to
+ * the UserProfile component, allowing users to modify organization fields directly.
  *
  * @example
  * ```tsx
  * // Basic usage
  * <BaseOrganizationProfile organization={organizationData} />
  *
+ * // With editing enabled and update handler
+ * <BaseOrganizationProfile
+ *   organization={organizationData}
+ *   editable={true}
+ *   onUpdate={async (payload) => {
+ *     await updateOrganizationAPI(orgId, payload);
+ *   }}
+ * />
+ *
  * // With card layout and custom title
  * <BaseOrganizationProfile
  *   organization={organizationData}
@@ -101,6 +162,27 @@ export interface BaseOrganizationProfileProps {
  * <BaseOrganizationProfile
  *   organization={organizationData}
  *   fields={[
+ *     { key: 'id', label: 'Organization ID', editable: false },
+ *     { key: 'name', label: 'Organization Name', editable: true },
+ *     { key: 'description', label: 'Description', editable: true, render: (value) => value || 'No description' },
+ *     { key: 'created', label: 'Created Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },
+ *     { key: 'attributes', label: 'Custom Attributes', editable: true }
+ *   ]}
+ *   onUpdate={handleUpdate}
+ * />
+ *
+ * // In popup mode
+ * <BaseOrganizationProfile
+ *   organization={organizationData}
+ *   mode="popup"
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   title="Edit Organization"
+ * />
+ * ```
+ * <BaseOrganizationProfile
+ *   organization={organizationData}
+ *   fields={[
  *     { key: 'id', label: 'Organization ID' },
  *     { key: 'name', label: 'Organization Name' },
  *     { key: 'description', label: 'Description', render: (value) => value || 'No description' },
@@ -116,37 +198,123 @@ const BaseOrganizationProfile: FC<BaseOrganizationProfileProps> = ({
   cardLayout = true,
   organization,
   title = 'Organization Profile',
+  mode = 'inline',
+  editable = true,
+  onChange,
+  onOpenChange,
+  onSubmit,
+  onUpdate,
+  open = false,
+  saveButtonText = 'Save Changes',
+  cancelButtonText = 'Cancel',
   fields = [
     {
       key: 'id',
       label: 'Organization ID',
+      editable: false,
     },
     {
       key: 'name',
       label: 'Organization Name',
+      editable: true,
     },
     {
       key: 'description',
       label: 'Organization Description',
+      editable: true,
       render: value => value || '-',
     },
     {
       key: 'created',
       label: 'Created Date',
+      editable: false,
       render: value => formatDate(value),
     },
     {
       key: 'lastModified',
       label: 'Last Modified Date',
+      editable: false,
       render: value => formatDate(value),
     },
     {
       key: 'attributes',
       label: 'Organization Attributes',
+      editable: true,
     },
   ],
 }): ReactElement => {
   const {theme} = useTheme();
+  const [editedOrganization, setEditedOrganization] = useState(organization);
+  const [editingFields, setEditingFields] = useState<Record<string, boolean>>({});
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  const PencilIcon = () => (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" />
+    </svg>
+  );
+
+  const toggleFieldEdit = useCallback((fieldName: string) => {
+    setEditingFields(prev => ({
+      ...prev,
+      [fieldName]: !prev[fieldName],
+    }));
+  }, []);
+
+  const getFieldPlaceholder = useCallback((fieldKey: string): string => {
+    const fieldLabels: Record<string, string> = {
+      name: 'organization name',
+      description: 'organization description',
+      orgHandle: 'organization handle',
+      status: 'organization status',
+      type: 'organization type',
+    };
+
+    const fieldLabel = fieldLabels[fieldKey] || fieldKey.toLowerCase();
+    return `Enter ${fieldLabel}`;
+  }, []);
+
+  const handleFieldSave = useCallback(
+    (fieldKey: string): void => {
+      if (!onUpdate || !fieldKey) return;
+
+      const fieldValue: any =
+        editedOrganization && fieldKey && editedOrganization[fieldKey as keyof OrganizationDetails] !== undefined
+          ? editedOrganization[fieldKey as keyof OrganizationDetails]
+          : organization && organization[fieldKey as keyof OrganizationDetails] !== undefined
+          ? organization[fieldKey as keyof OrganizationDetails]
+          : '';
+
+      const payload: Record<string, any> = {
+        [fieldKey]: fieldValue,
+      };
+
+      onUpdate(payload);
+      // Exit edit mode for this field after save
+      toggleFieldEdit(fieldKey);
+    },
+    [editedOrganization, organization, onUpdate, toggleFieldEdit],
+  );
+
+  const handleFieldCancel = useCallback(
+    (fieldKey: string) => {
+      setEditedOrganization(prev => ({
+        ...prev,
+        [fieldKey]: organization?.[fieldKey as keyof OrganizationDetails],
+      }));
+      toggleFieldEdit(fieldKey);
+    },
+    [organization, toggleFieldEdit],
+  );
 
   const formatLabel = (key: string): string =>
     key
@@ -178,6 +346,247 @@ const BaseOrganizationProfile: FC<BaseOrganizationProfileProps> = ({
   };
 
   const styles = useStyles();
+  const buttonStyle = useMemo(
+    () => ({
+      padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+      margin: `${theme.spacing.unit}px`,
+      borderRadius: theme.borderRadius.medium,
+      border: 'none',
+      cursor: 'pointer',
+      fontSize: '0.875rem',
+      fontWeight: 500,
+    }),
+    [theme],
+  );
+
+  const saveButtonStyle = useMemo(
+    () => ({
+      ...buttonStyle,
+      backgroundColor: theme.colors.primary.main,
+      color: theme.colors.primary.contrastText,
+    }),
+    [theme, buttonStyle],
+  );
+
+  const cancelButtonStyle = useMemo(
+    () => ({
+      ...buttonStyle,
+      backgroundColor: theme.colors.secondary.main,
+      border: `1px solid ${theme.colors.border}`,
+    }),
+    [theme, buttonStyle],
+  );
+
+  // Renders individual field in view or edit mode
+  const renderField = (
+    field: any,
+    isEditing: boolean,
+    onEditValue?: (value: any) => void,
+    onStartEdit?: () => void,
+  ): ReactElement | null => {
+    if (!field) return null;
+
+    const {key, label, editable: fieldEditable = true} = field;
+    const value =
+      key === 'attributes' ? organization?.attributes || {} : organization?.[key as keyof OrganizationDetails];
+
+    const renderedValue = field.render ? field.render(value, organization) : value;
+
+    // If editing, show input field
+    if (isEditing && onEditValue && fieldEditable && editable) {
+      const fieldValue =
+        editedOrganization && key && editedOrganization[key as keyof OrganizationDetails] !== undefined
+          ? editedOrganization[key as keyof OrganizationDetails]
+          : value || '';
+
+      const commonProps = {
+        label: undefined,
+        value: typeof fieldValue === 'object' ? JSON.stringify(fieldValue) : String(fieldValue || ''),
+        onChange: (e: any) => onEditValue(e.target ? e.target.value : e),
+        placeholder: getFieldPlaceholder(key),
+        style: {
+          marginBottom: 0,
+        },
+      };
+
+      let fieldInput: ReactElement;
+
+      if (key === 'attributes') {
+        // For attributes, use a textarea
+        fieldInput = (
+          <textarea
+            value={typeof fieldValue === 'object' ? JSON.stringify(fieldValue, null, 2) : fieldValue}
+            onChange={e => {
+              try {
+                const parsed = JSON.parse(e.target.value);
+                onEditValue(parsed);
+              } catch {
+                onEditValue(e.target.value);
+              }
+            }}
+            placeholder="Enter attributes as JSON"
+            style={{
+              ...commonProps.style,
+              minHeight: '60px',
+              width: '100%',
+              padding: '8px',
+              border: '1px solid #ccc',
+              borderRadius: '4px',
+              resize: 'vertical',
+            }}
+          />
+        );
+      } else {
+        fieldInput = <TextField {...commonProps} />;
+      }
+
+      return (
+        <>
+          <span style={styles.label}>{label}</span>
+          <div style={styles.value}>{fieldInput}</div>
+        </>
+      );
+    }
+
+    // Default: view mode
+    const hasValue = value !== undefined && value !== null && value !== '';
+    const isFieldEditable = editable && fieldEditable;
+
+    let displayValue: string | ReactElement;
+    if (hasValue) {
+      displayValue =
+        key === 'attributes' && typeof value === 'object' && value !== null ? (
+          <div style={styles.attributesList}>
+            {Object.entries(value).length > 0
+              ? Object.entries(value).map(([attrKey, val]) => (
+                  <div key={attrKey} style={styles.attributeItem}>
+                    <span style={styles.attributeKey}>{attrKey}:</span>
+                    <span style={styles.attributeValue}>{String(val)}</span>
+                  </div>
+                ))
+              : '-'}
+          </div>
+        ) : (
+          String(renderedValue)
+        );
+    } else if (isFieldEditable) {
+      displayValue = getFieldPlaceholder(key);
+    } else {
+      displayValue = '-';
+    }
+
+    return (
+      <>
+        <span style={styles.label}>{label}</span>
+        <div
+          style={{
+            ...styles.value,
+            fontStyle: hasValue ? 'normal' : 'italic',
+            opacity: hasValue ? 1 : 0.7,
+          }}
+        >
+          {!hasValue && isFieldEditable && onStartEdit ? (
+            <button
+              onClick={onStartEdit}
+              style={{
+                background: 'none',
+                border: 'none',
+                color: 'inherit',
+                cursor: 'pointer',
+                padding: 0,
+                font: 'inherit',
+                fontStyle: 'italic',
+                textDecoration: 'underline',
+                opacity: 0.7,
+              }}
+              title="Click to edit"
+            >
+              {displayValue}
+            </button>
+          ) : (
+            displayValue
+          )}
+        </div>
+      </>
+    );
+  };
+
+  const renderOrganizationField = (field: any) => {
+    if (!field || !field.key) return null;
+
+    const hasValue =
+      organization?.[field.key as keyof OrganizationDetails] !== undefined &&
+      organization?.[field.key as keyof OrganizationDetails] !== '' &&
+      organization?.[field.key as keyof OrganizationDetails] !== null;
+    const isFieldEditing = editingFields[field.key];
+    const isFieldEditable = editable && field.editable !== false;
+
+    // Show field if: has value, currently editing, or is editable
+    const shouldShow = hasValue || isFieldEditing || isFieldEditable;
+
+    if (!shouldShow) {
+      return null;
+    }
+
+    const fieldStyle = {
+      ...styles.field,
+      display: 'flex',
+      alignItems: 'center',
+      gap: `${theme.spacing.unit}px`,
+    };
+
+    return (
+      <div style={fieldStyle} key={field.key}>
+        <div style={{flex: 1, display: 'flex', alignItems: 'center', gap: `${theme.spacing.unit}px`}}>
+          {renderField(
+            field,
+            isFieldEditing,
+            value => {
+              const tempEditedOrganization = {...editedOrganization};
+              tempEditedOrganization[field.key as keyof OrganizationDetails] = value;
+              setEditedOrganization(tempEditedOrganization);
+            },
+            () => toggleFieldEdit(field.key),
+          )}
+        </div>
+        {isFieldEditable && (
+          <div style={{display: 'flex', alignItems: 'center', gap: `${theme.spacing.unit / 2}px`}}>
+            {isFieldEditing ? (
+              <>
+                <button onClick={() => handleFieldSave(field.key)} style={saveButtonStyle} title="Save changes">
+                  {saveButtonText}
+                </button>
+                <button onClick={() => handleFieldCancel(field.key)} style={cancelButtonStyle} title="Cancel editing">
+                  {cancelButtonText}
+                </button>
+              </>
+            ) : (
+              // Only show pencil icon when there's a value
+              hasValue && (
+                <button
+                  onClick={() => toggleFieldEdit(field.key)}
+                  style={{
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    padding: `${theme.spacing.unit / 2}px`,
+                    borderRadius: theme.borderRadius.small,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    color: theme.colors.text.secondary,
+                  }}
+                  title="Edit field"
+                >
+                  <PencilIcon />
+                </button>
+              )
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
 
   if (!organization) {
     return fallback;
@@ -188,7 +597,7 @@ const BaseOrganizationProfile: FC<BaseOrganizationProfileProps> = ({
     ...(cardLayout ? styles.card : {}),
   };
 
-  return (
+  const profileContent = (
     <Card style={containerStyle} className={clsx(withVendorCSSClassPrefix('organization-profile'), className)}>
       <div style={styles.header}>
         <Avatar name={getOrgInitials(organization.name)} size={80} alt={`${organization.name} logo`} />
@@ -198,46 +607,22 @@ const BaseOrganizationProfile: FC<BaseOrganizationProfileProps> = ({
         </div>
       </div>
 
-      <div style={styles.infoContainer}>
-        {fields.map((field, index) => {
-          const value =
-            field.key === 'attributes'
-              ? organization.attributes || {}
-              : organization[field.key as keyof OrganizationDetails];
-
-          const renderedValue = field.render ? field.render(value, organization) : value;
-
-          return (
-            <div
-              key={field.key}
-              style={{
-                ...styles.field,
-                ...(index === fields.length - 1 ? styles.lastField : {}),
-              }}
-            >
-              <span style={styles.label}>{field.label}:</span>
-              <span style={styles.value}>
-                {field.key === 'attributes' && typeof value === 'object' && value !== null ? (
-                  <div style={styles.attributesList}>
-                    {Object.entries(value).length > 0
-                      ? Object.entries(value).map(([key, val]) => (
-                          <div key={key} style={styles.attributeItem}>
-                            <span style={styles.attributeKey}>{key}:</span>
-                            <span style={styles.attributeValue}>{String(val)}</span>
-                          </div>
-                        ))
-                      : '-'}
-                  </div>
-                ) : (
-                  renderedValue || '-'
-                )}
-              </span>
-            </div>
-          );
-        })}
-      </div>
+      <div style={styles.infoContainer}>{fields.map((field, index) => renderOrganizationField(field))}</div>
     </Card>
   );
+
+  if (mode === 'popup') {
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent>
+          <DialogHeading>{title}</DialogHeading>
+          <div style={{padding: '1rem'}}>{profileContent}</div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return profileContent;
 };
 
 const useStyles = () => {
diff --git a/packages/react/src/components/presentation/OrganizationProfile/OrganizationProfile.tsx b/packages/react/src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
index 4698985a2..921a1164b 100644
--- a/packages/react/src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
+++ b/packages/react/src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
@@ -19,6 +19,7 @@
 import {FC, ReactElement, useEffect, useState} from 'react';
 import BaseOrganizationProfile, {BaseOrganizationProfileProps} from './BaseOrganizationProfile';
 import getOrganization, {OrganizationDetails} from '../../../api/scim2/getOrganization';
+import updateOrganization, {createPatchOperations} from '../../../api/scim2/updateOrganization';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
 import useTranslation from '../../../hooks/useTranslation';
 import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Popover';
@@ -28,7 +29,7 @@ import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Pop
  * Extends BaseOrganizationProfileProps but makes the organization prop optional
  * since it will be fetched using the organizationId
  */
-export type OrganizationProfileProps = Omit<BaseOrganizationProfileProps, 'organization'> & {
+export type OrganizationProfileProps = Omit<BaseOrganizationProfileProps, 'organization' | 'mode'> & {
   /**
    * Component to show when there's an error loading organization data.
    */
@@ -49,6 +50,11 @@ export type OrganizationProfileProps = Omit<BaseOrganizationProfileProps, 'organ
    */
   onOpenChange?: (open: boolean) => void;
 
+  /**
+   * Callback fired when the organization should be updated.
+   */
+  onUpdate?: (payload: any) => Promise<void>;
+
   /**
    * Whether the popup is open (only used in popup mode).
    */
@@ -70,14 +76,23 @@ export type OrganizationProfileProps = Omit<BaseOrganizationProfileProps, 'organ
  * structured and styled format. It automatically fetches organization details
  * using the provided organization ID and displays them using BaseOrganizationProfile.
  *
+ * The component supports editing functionality, allowing users to modify organization
+ * fields inline. Updates are automatically synced with the backend via the SCIM2 API.
+ *
  * This component is the React-specific implementation that automatically
  * retrieves the organization data from Asgardeo API.
  *
  * @example
  * ```tsx
- * // Basic usage
+ * // Basic usage with editing enabled (default)
  * <OrganizationProfile organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1" />
  *
+ * // Read-only mode
+ * <OrganizationProfile
+ *   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
+ *   editable={false}
+ * />
+ *
  * // With card layout and custom fallbacks
  * <OrganizationProfile
  *   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
@@ -87,17 +102,22 @@ export type OrganizationProfileProps = Omit<BaseOrganizationProfileProps, 'organ
  *   fallback={<div>No organization data available</div>}
  * />
  *
- * // With custom fields configuration
+ * // With custom fields configuration and update callback
  * <OrganizationProfile
  *   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
  *   fields={[
- *     { key: 'id', label: 'Organization ID' },
- *     { key: 'name', label: 'Organization Name' },
- *     { key: 'description', label: 'Description', render: (value) => value || 'No description' },
- *     { key: 'created', label: 'Created Date', render: (value) => new Date(value).toLocaleDateString() },
- *     { key: 'lastModified', label: 'Last Modified Date', render: (value) => new Date(value).toLocaleDateString() },
- *     { key: 'attributes', label: 'Custom Attributes' }
+ *     { key: 'id', label: 'Organization ID', editable: false },
+ *     { key: 'name', label: 'Organization Name', editable: true },
+ *     { key: 'description', label: 'Description', editable: true, render: (value) => value || 'No description' },
+ *     { key: 'created', label: 'Created Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },
+ *     { key: 'lastModified', label: 'Last Modified Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },
+ *     { key: 'attributes', label: 'Custom Attributes', editable: true }
  *   ]}
+ *   onUpdate={async (payload) => {
+ *     console.log('Organization updated:', payload);
+ *     // payload contains the updated field values
+ *     // The component automatically converts these to patch operations
+ *   }}
  * />
  *
  * // In popup mode
@@ -106,7 +126,7 @@ export type OrganizationProfileProps = Omit<BaseOrganizationProfileProps, 'organ
  *   mode="popup"
  *   open={isOpen}
  *   onOpenChange={setIsOpen}
- *   popupTitle="Organization Profile"
+ *   popupTitle="Edit Organization Profile"
  * />
  * ```
  */
@@ -115,6 +135,7 @@ const OrganizationProfile: FC<OrganizationProfileProps> = ({
   mode = 'default',
   open = false,
   onOpenChange,
+  onUpdate,
   popupTitle,
   loadingFallback = <div>Loading organization...</div>,
   errorFallback = <div>Failed to load organization data</div>,
@@ -126,34 +147,59 @@ const OrganizationProfile: FC<OrganizationProfileProps> = ({
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<boolean>(false);
 
-  useEffect(() => {
-    const fetchOrganization = async () => {
-      if (!baseUrl || !organizationId) {
-        setLoading(false);
-        setError(true);
-        return;
-      }
-
-      try {
-        setLoading(true);
-        setError(false);
-        const orgData = await getOrganization({
-          baseUrl,
-          organizationId,
-        });
-        setOrganization(orgData);
-      } catch (err) {
-        console.error('Failed to fetch organization:', err);
-        setError(true);
-        setOrganization(null);
-      } finally {
-        setLoading(false);
-      }
-    };
+  const fetchOrganization = async () => {
+    if (!baseUrl || !organizationId) {
+      setLoading(false);
+      setError(true);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(false);
+      const orgData = await getOrganization({
+        baseUrl,
+        organizationId,
+      });
+      setOrganization(orgData);
+    } catch (err) {
+      console.error('Failed to fetch organization:', err);
+      setError(true);
+      setOrganization(null);
+    } finally {
+      setLoading(false);
+    }
+  };
 
+  useEffect(() => {
     fetchOrganization();
   }, [baseUrl, organizationId]);
 
+  const handleOrganizationUpdate = async (payload: any): Promise<void> => {
+    if (!baseUrl || !organizationId) return;
+
+    try {
+      // Convert payload to patch operations format
+      const operations = createPatchOperations(payload);
+
+      await updateOrganization({
+        baseUrl,
+        organizationId,
+        operations,
+      });
+      // Refetch organization data after update
+      await fetchOrganization();
+
+      // Call the optional onUpdate callback
+      if (onUpdate) {
+        await onUpdate(payload);
+      }
+    } catch (err) {
+      console.error('Failed to update organization:', err);
+      throw err;
+    }
+  };
+
   if (loading) {
     return mode === 'popup' ? (
       <Dialog open={open} onOpenChange={onOpenChange}>
@@ -180,18 +226,17 @@ const OrganizationProfile: FC<OrganizationProfileProps> = ({
     );
   }
 
-  const profileContent = <BaseOrganizationProfile organization={organization} fields={rest.fields} {...rest} />;
-
-  if (mode === 'popup') {
-    return (
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent>
-          <DialogHeading>{popupTitle || t('organization.profile.title')}</DialogHeading>
-          <div style={{padding: '1rem'}}>{profileContent}</div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
+  const profileContent = (
+    <BaseOrganizationProfile
+      organization={organization}
+      onUpdate={handleOrganizationUpdate}
+      mode={mode === 'popup' ? 'popup' : 'inline'}
+      open={open}
+      onOpenChange={onOpenChange}
+      title={popupTitle || t('organization.profile.title')}
+      {...rest}
+    />
+  );
 
   return profileContent;
 };

From 83bf5a4758a67d54dacaf40e85b118b9e8bf18f0 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 24 Jun 2025 15:25:30 +0530
Subject: [PATCH 80/96] feat(react): Implement KeyValueInput component for
 managing key-value pairs and integrate it into BaseOrganizationProfile

---
 .../BaseOrganizationProfile.tsx               |  88 ++--
 .../src/components/primitives/Icons/Plus.tsx  |  42 ++
 .../src/components/primitives/Icons/index.ts  |   1 +
 .../KeyValueInput/KeyValueInput.tsx           | 450 ++++++++++++++++++
 .../primitives/KeyValueInput/index.ts         |   0
 packages/react/src/index.ts                   |   3 +
 samples/teamspace-react/src/main.tsx          |  15 +-
 7 files changed, 548 insertions(+), 51 deletions(-)
 create mode 100644 packages/react/src/components/primitives/KeyValueInput/KeyValueInput.tsx
 create mode 100644 packages/react/src/components/primitives/KeyValueInput/index.ts

diff --git a/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx b/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
index d00aa073e..7669ea59e 100644
--- a/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
+++ b/packages/react/src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
@@ -25,6 +25,7 @@ import {Avatar} from '../../primitives/Avatar/Avatar';
 import Button from '../../primitives/Button/Button';
 import Checkbox from '../../primitives/Checkbox/Checkbox';
 import DatePicker from '../../primitives/DatePicker/DatePicker';
+import KeyValueInput from '../../primitives/KeyValueInput/KeyValueInput';
 import {Dialog, DialogContent, DialogHeading} from '../../primitives/Popover/Popover';
 import TextField from '../../primitives/TextField/TextField';
 import Card from '../../primitives/Card/Card';
@@ -236,11 +237,6 @@ const BaseOrganizationProfile: FC<BaseOrganizationProfileProps> = ({
       editable: false,
       render: value => formatDate(value),
     },
-    {
-      key: 'attributes',
-      label: 'Organization Attributes',
-      editable: true,
-    },
   ],
 }): ReactElement => {
   const {theme} = useTheme();
@@ -412,28 +408,42 @@ const BaseOrganizationProfile: FC<BaseOrganizationProfileProps> = ({
       let fieldInput: ReactElement;
 
       if (key === 'attributes') {
-        // For attributes, use a textarea
+        // For attributes, use KeyValueInput component
+        const attributesValue = typeof fieldValue === 'object' && fieldValue !== null ? fieldValue : {};
         fieldInput = (
-          <textarea
-            value={typeof fieldValue === 'object' ? JSON.stringify(fieldValue, null, 2) : fieldValue}
-            onChange={e => {
-              try {
-                const parsed = JSON.parse(e.target.value);
-                onEditValue(parsed);
-              } catch {
-                onEditValue(e.target.value);
+          <KeyValueInput
+            value={attributesValue}
+            onChange={pairs => {
+              const attributesObject = pairs.reduce((acc, pair) => {
+                acc[pair.key] = pair.value;
+                return acc;
+              }, {} as Record<string, any>);
+              onEditValue(attributesObject);
+            }}
+            onAdd={pair => {
+              if (onUpdate) {
+                const operation = {
+                  operation: 'ADD',
+                  path: `/attributes/${pair.key}`,
+                  value: pair.value,
+                };
+                onUpdate([operation]);
               }
             }}
-            placeholder="Enter attributes as JSON"
-            style={{
-              ...commonProps.style,
-              minHeight: '60px',
-              width: '100%',
-              padding: '8px',
-              border: '1px solid #ccc',
-              borderRadius: '4px',
-              resize: 'vertical',
+            onRemove={(pair, index) => {
+              if (onUpdate) {
+                const operation = {
+                  operation: 'REMOVE',
+                  path: `/attributes/${pair.key}`,
+                  value: '',
+                };
+                onUpdate([operation]);
+              }
             }}
+            label=""
+            keyPlaceholder="Attribute name"
+            valuePlaceholder="Attribute value"
+            helperText="Add custom attributes as key-value pairs"
           />
         );
       } else {
@@ -456,16 +466,7 @@ const BaseOrganizationProfile: FC<BaseOrganizationProfileProps> = ({
     if (hasValue) {
       displayValue =
         key === 'attributes' && typeof value === 'object' && value !== null ? (
-          <div style={styles.attributesList}>
-            {Object.entries(value).length > 0
-              ? Object.entries(value).map(([attrKey, val]) => (
-                  <div key={attrKey} style={styles.attributeItem}>
-                    <span style={styles.attributeKey}>{attrKey}:</span>
-                    <span style={styles.attributeValue}>{String(val)}</span>
-                  </div>
-                ))
-              : '-'}
-          </div>
+          <KeyValueInput value={value} readOnly={true} label="" />
         ) : (
           String(renderedValue)
         );
@@ -645,7 +646,6 @@ const useStyles = () => {
         gap: `${theme.spacing.unit * 2}px`,
         marginBottom: `${theme.spacing.unit * 3}px`,
         paddingBottom: `${theme.spacing.unit * 2}px`,
-        borderBottom: `1px solid ${theme.colors.border}`,
       } as CSSProperties,
       orgInfo: {
         flex: 1,
@@ -670,9 +670,9 @@ const useStyles = () => {
       field: {
         display: 'flex',
         alignItems: 'flex-start',
-        padding: `${theme.spacing.unit}px 0`,
+        padding: `${theme.spacing.unit / 2}px 0`,
         borderBottom: `1px solid ${theme.colors.border}`,
-        minHeight: '32px',
+        minHeight: '28px',
       } as CSSProperties,
       lastField: {
         borderBottom: 'none',
@@ -681,9 +681,9 @@ const useStyles = () => {
         fontSize: '0.875rem',
         fontWeight: 500,
         color: theme.colors.text.secondary,
-        width: '140px',
+        width: '120px',
         flexShrink: 0,
-        lineHeight: '32px',
+        lineHeight: '28px',
       } as CSSProperties,
       value: {
         color: theme.colors.text.primary,
@@ -692,8 +692,8 @@ const useStyles = () => {
         alignItems: 'center',
         gap: `${theme.spacing.unit}px`,
         overflow: 'hidden',
-        minHeight: '32px',
-        lineHeight: '32px',
+        minHeight: '28px',
+        lineHeight: '28px',
         wordBreak: 'break-word' as const,
       } as CSSProperties,
       statusBadge: {
@@ -721,24 +721,26 @@ const useStyles = () => {
       attributesList: {
         display: 'flex',
         flexDirection: 'column' as const,
-        gap: `${theme.spacing.unit / 2}px`,
+        gap: `${theme.spacing.unit / 4}px`,
       } as CSSProperties,
       attributeItem: {
         display: 'flex',
         gap: `${theme.spacing.unit}px`,
-        padding: `${theme.spacing.unit / 2}px 0`,
+        padding: `${theme.spacing.unit / 4}px 0`,
+        alignItems: 'center',
       } as CSSProperties,
       attributeKey: {
         fontSize: '0.75rem',
         fontWeight: 500,
         color: theme.colors.text.secondary,
-        minWidth: '100px',
+        minWidth: '80px',
         flexShrink: 0,
       } as CSSProperties,
       attributeValue: {
         fontSize: '0.75rem',
         color: theme.colors.text.primary,
         wordBreak: 'break-word' as const,
+        flex: 1,
       } as CSSProperties,
     }),
     [theme, colorScheme],
diff --git a/packages/react/src/components/primitives/Icons/Plus.tsx b/packages/react/src/components/primitives/Icons/Plus.tsx
index e69de29bb..51fbb4c2f 100644
--- a/packages/react/src/components/primitives/Icons/Plus.tsx
+++ b/packages/react/src/components/primitives/Icons/Plus.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';
+
+/**
+ * Plus (add) icon component.
+ */
+const Plus: 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="M5 12h14" />
+    <path d="M12 5v14" />
+  </svg>
+);
+
+export default Plus;
diff --git a/packages/react/src/components/primitives/Icons/index.ts b/packages/react/src/components/primitives/Icons/index.ts
index 619ec70d6..22e4f8ba1 100644
--- a/packages/react/src/components/primitives/Icons/index.ts
+++ b/packages/react/src/components/primitives/Icons/index.ts
@@ -22,6 +22,7 @@ export {default as Eye} from './Eye';
 export {default as EyeOff} from './EyeOff';
 export {default as Info} from './Info';
 export {default as LogOut} from './LogOut';
+export {default as Plus} from './Plus';
 export {default as TriangleAlert} from './TriangleAlert';
 export {default as User} from './User';
 export {default as X} from './X';
diff --git a/packages/react/src/components/primitives/KeyValueInput/KeyValueInput.tsx b/packages/react/src/components/primitives/KeyValueInput/KeyValueInput.tsx
new file mode 100644
index 000000000..c2a1aa90f
--- /dev/null
+++ b/packages/react/src/components/primitives/KeyValueInput/KeyValueInput.tsx
@@ -0,0 +1,450 @@
+/**
+ * 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 {withVendorCSSClassPrefix} from '@asgardeo/browser';
+import clsx from 'clsx';
+import {FC, ReactElement, useState, useCallback, CSSProperties} from 'react';
+import useTheme from '../../../contexts/Theme/useTheme';
+import Button from '../Button/Button';
+import TextField from '../TextField/TextField';
+import {Plus, X} from '../Icons';
+
+export interface KeyValuePair {
+  key: string;
+  value: string;
+}
+
+export interface KeyValueInputProps {
+  /**
+   * CSS class name for styling the component.
+   */
+  className?: string;
+
+  /**
+   * Whether the input is disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Error message to display.
+   */
+  error?: string;
+
+  /**
+   * Help text to display below the input.
+   */
+  helperText?: string;
+
+  /**
+   * Label for the key input field.
+   */
+  keyLabel?: string;
+
+  /**
+   * Placeholder text for the key input field.
+   */
+  keyPlaceholder?: string;
+
+  /**
+   * Label for the component.
+   */
+  label?: string;
+
+  /**
+   * Maximum number of key-value pairs allowed.
+   */
+  maxPairs?: number;
+  /**
+   * Callback fired when the key-value pairs change.
+   */
+  onChange?: (pairs: KeyValuePair[]) => void;
+
+  /**
+   * Callback fired when a pair is added.
+   */
+  onAdd?: (pair: KeyValuePair) => void;
+
+  /**
+   * Callback fired when a pair is removed.
+   */
+  onRemove?: (pair: KeyValuePair, index: number) => void;
+
+  /**
+   * Whether the component is in read-only mode.
+   */
+  readOnly?: boolean;
+
+  /**
+   * Text for the remove button.
+   */
+  removeButtonText?: string;
+
+  /**
+   * Whether the component is required.
+   */
+  required?: boolean;
+
+  /**
+   * Current key-value pairs.
+   */
+  value?: Record<string, any> | KeyValuePair[];
+
+  /**
+   * Label for the value input field.
+   */
+  valueLabel?: string;
+
+  /**
+   * Placeholder text for the value input field.
+   */
+  valuePlaceholder?: string;
+}
+
+/**
+ * KeyValueInput component allows users to manage key-value pairs with add/remove functionality.
+ * It provides a user-friendly interface for editing organization attributes or similar data structures.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <KeyValueInput
+ *   label="Organization Attributes"
+ *   onChange={(pairs) => console.log(pairs)}
+ * />
+ *
+ * // With initial values
+ * <KeyValueInput
+ *   label="Organization Attributes"
+ *   value={{department: 'IT', location: 'New York'}}
+ *   onChange={(pairs) => console.log(pairs)}
+ * />
+ *
+ * // With add/remove callbacks
+ * <KeyValueInput
+ *   label="Custom Attributes"
+ *   value={attributes}
+ *   onChange={(pairs) => setAttributes(pairs)}
+ *   onAdd={(pair) => console.log('Added:', pair)}
+ *   onRemove={(pair, index) => console.log('Removed:', pair, 'at index:', index)}
+ * />
+ * ```
+ */
+const KeyValueInput: FC<KeyValueInputProps> = ({
+  className = '',
+  disabled = false,
+  error,
+  helperText,
+  keyLabel = 'Key',
+  keyPlaceholder = 'Enter key',
+  label,
+  maxPairs,
+  onChange,
+  onAdd,
+  onRemove,
+  readOnly = false,
+  removeButtonText = 'Remove',
+  required = false,
+  value = {},
+  valueLabel = 'Value',
+  valuePlaceholder = 'Enter value',
+}): ReactElement => {
+  const {theme} = useTheme();
+
+  // Convert value to array format
+  const initialPairs: KeyValuePair[] = Array.isArray(value)
+    ? value
+    : Object.entries(value).map(([key, val]) => ({key, value: String(val)}));
+
+  const [pairs, setPairs] = useState<KeyValuePair[]>(initialPairs);
+  const [newKey, setNewKey] = useState('');
+  const [newValue, setNewValue] = useState('');
+
+  const handleAddPair = useCallback(() => {
+    if (!newKey.trim() || !newValue.trim()) return;
+    if (maxPairs && pairs.length >= maxPairs) return;
+
+    const newPair: KeyValuePair = {
+      key: newKey.trim(),
+      value: newValue.trim(),
+    };
+
+    const updatedPairs = [...pairs, newPair];
+    setPairs(updatedPairs);
+    setNewKey('');
+    setNewValue('');
+
+    if (onChange) {
+      onChange(updatedPairs);
+    }
+
+    if (onAdd) {
+      onAdd(newPair);
+    }
+  }, [newKey, newValue, pairs, maxPairs, onChange, onAdd]);
+
+  const handleRemovePair = useCallback(
+    (index: number) => {
+      const pairToRemove = pairs[index];
+      const updatedPairs = pairs.filter((_, i) => i !== index);
+      setPairs(updatedPairs);
+
+      if (onChange) {
+        onChange(updatedPairs);
+      }
+
+      if (onRemove) {
+        onRemove(pairToRemove, index);
+      }
+    },
+    [pairs, onChange, onRemove],
+  );
+
+  const handleUpdatePair = useCallback(
+    (index: number, field: 'key' | 'value', newVal: string) => {
+      const updatedPairs = pairs.map((pair, i) => {
+        if (i === index) {
+          return {...pair, [field]: newVal};
+        }
+        return pair;
+      });
+      setPairs(updatedPairs);
+
+      if (onChange) {
+        onChange(updatedPairs);
+      }
+    },
+    [pairs, onChange],
+  );
+
+  const canAddMore = !maxPairs || pairs.length < maxPairs;
+  const isAddDisabled = disabled || readOnly || !canAddMore || !newKey.trim() || !newValue.trim();
+
+  const styles = {
+    container: {
+      display: 'flex',
+      flexDirection: 'column' as const,
+      gap: `${theme.spacing.unit / 2}px`,
+    } as CSSProperties,
+    label: {
+      fontSize: '0.875rem',
+      fontWeight: 500,
+      color: theme.colors.text.primary,
+      marginBottom: `${theme.spacing.unit / 2}px`,
+    } as CSSProperties,
+    pairsList: {
+      display: 'flex',
+      flexDirection: 'column' as const,
+      gap: `${theme.spacing.unit / 4}px`,
+    } as CSSProperties,
+    pairRow: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: `${theme.spacing.unit / 2}px`,
+      padding: `${theme.spacing.unit / 2}px`,
+      borderRadius: theme.borderRadius.small,
+      backgroundColor: 'transparent',
+      border: 'none',
+      '&:hover': {
+        backgroundColor: theme.colors.background.surface,
+      },
+    } as CSSProperties,
+    pairInput: {
+      flex: 1,
+      minWidth: 0,
+    } as CSSProperties,
+    addRow: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: `${theme.spacing.unit / 2}px`,
+      padding: `${theme.spacing.unit / 2}px`,
+      border: 'none',
+      borderRadius: theme.borderRadius.small,
+      backgroundColor: 'transparent',
+      marginTop: `${theme.spacing.unit / 2}px`,
+    } as CSSProperties,
+    removeButton: {
+      minWidth: 'auto',
+      width: '24px',
+      height: '24px',
+      padding: '0',
+      backgroundColor: 'transparent',
+      color: theme.colors.text.secondary,
+      border: 'none',
+      borderRadius: theme.borderRadius.small,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      '&:hover': {
+        backgroundColor: theme.colors.background.surface,
+        color: theme.colors.error.main,
+      },
+    } as CSSProperties,
+    addButton: {
+      minWidth: 'auto',
+      width: '24px',
+      height: '24px',
+      padding: '0',
+      backgroundColor: 'transparent',
+      color: theme.colors.primary.main,
+      border: 'none',
+      borderRadius: theme.borderRadius.small,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      '&:hover': {
+        backgroundColor: theme.colors.primary.main,
+        color: theme.colors.primary.contrastText,
+      },
+    } as CSSProperties,
+    helperText: {
+      fontSize: '0.75rem',
+      color: error ? theme.colors.error.main : theme.colors.text.secondary,
+      marginTop: `${theme.spacing.unit / 2}px`,
+    } as CSSProperties,
+    emptyState: {
+      padding: `${theme.spacing.unit}px`,
+      textAlign: 'center' as const,
+      color: theme.colors.text.secondary,
+      fontStyle: 'italic',
+      fontSize: '0.75rem',
+    } as CSSProperties,
+    readOnlyPair: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: `${theme.spacing.unit / 2}px`,
+      padding: `${theme.spacing.unit / 4}px 0`,
+      minHeight: '20px',
+    } as CSSProperties,
+    readOnlyKey: {
+      fontSize: '0.75rem',
+      fontWeight: 500,
+      color: theme.colors.text.secondary,
+      minWidth: '80px',
+      flexShrink: 0,
+    } as CSSProperties,
+    readOnlyValue: {
+      fontSize: '0.75rem',
+      color: theme.colors.text.primary,
+      wordBreak: 'break-word' as const,
+      flex: 1,
+    } as CSSProperties,
+  };
+
+  return (
+    <div className={clsx(withVendorCSSClassPrefix('key-value-input'), className)} style={styles.container}>
+      {label && (
+        <label style={styles.label}>
+          {label}
+          {required && <span style={{color: theme.colors.error.main}}> *</span>}
+        </label>
+      )}
+
+      <div style={styles.pairsList}>
+        {pairs.length === 0 && readOnly ? (
+          <div style={styles.emptyState}>No attributes defined</div>
+        ) : readOnly ? (
+          pairs.map((pair, index) => (
+            <div key={`${pair.key}-${index}`} style={styles.readOnlyPair}>
+              <span style={styles.readOnlyKey}>{pair.key}:</span>
+              <span style={styles.readOnlyValue}>{pair.value}</span>
+            </div>
+          ))
+        ) : (
+          pairs.map((pair, index) => (
+            <div key={`${pair.key}-${index}`} style={styles.pairRow}>
+              <TextField
+                placeholder={keyPlaceholder}
+                value={pair.key}
+                onChange={e => handleUpdatePair(index, 'key', e.target.value)}
+                disabled={disabled || readOnly}
+                style={styles.pairInput}
+                aria-label={`${keyLabel} ${index + 1}`}
+              />
+              <TextField
+                placeholder={valuePlaceholder}
+                value={pair.value}
+                onChange={e => handleUpdatePair(index, 'value', e.target.value)}
+                disabled={disabled || readOnly}
+                style={styles.pairInput}
+                aria-label={`${valueLabel} ${index + 1}`}
+              />
+              {!readOnly && (
+                <Button
+                  variant="outline"
+                  size="small"
+                  onClick={() => handleRemovePair(index)}
+                  disabled={disabled}
+                  style={styles.removeButton}
+                  aria-label={`${removeButtonText} ${pair.key}`}
+                >
+                  <X width={16} height={16} />
+                </Button>
+              )}
+            </div>
+          ))
+        )}
+
+        {!readOnly && (
+          <div style={styles.addRow}>
+            <TextField
+              placeholder={keyPlaceholder}
+              value={newKey}
+              onChange={e => setNewKey(e.target.value)}
+              disabled={disabled}
+              style={styles.pairInput}
+              aria-label="New key"
+            />
+            <TextField
+              placeholder={valuePlaceholder}
+              value={newValue}
+              onChange={e => setNewValue(e.target.value)}
+              disabled={disabled}
+              style={styles.pairInput}
+              aria-label="New value"
+              onKeyPress={e => {
+                if (e.key === 'Enter' && !isAddDisabled) {
+                  handleAddPair();
+                }
+              }}
+            />
+            <Button
+              variant="solid"
+              size="small"
+              onClick={handleAddPair}
+              disabled={isAddDisabled}
+              style={styles.addButton}
+              aria-label="Add new key-value pair"
+            >
+              <Plus width={16} height={16} />
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {(helperText || error) && <div style={styles.helperText}>{error || helperText}</div>}
+
+      {maxPairs && (
+        <div style={styles.helperText}>
+          {pairs.length} of {maxPairs} pairs used
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default KeyValueInput;
diff --git a/packages/react/src/components/primitives/KeyValueInput/index.ts b/packages/react/src/components/primitives/KeyValueInput/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 492675819..cf2f89725 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -215,6 +215,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 KeyValueInput} from './components/primitives/KeyValueInput/KeyValueInput';
+export * from './components/primitives/KeyValueInput/KeyValueInput';
+
 export {default as Typography} from './components/primitives/Typography/Typography';
 export * from './components/primitives/Typography/Typography';
 
diff --git a/samples/teamspace-react/src/main.tsx b/samples/teamspace-react/src/main.tsx
index fad07e38f..4bf7c78e5 100644
--- a/samples/teamspace-react/src/main.tsx
+++ b/samples/teamspace-react/src/main.tsx
@@ -26,14 +26,13 @@ createRoot(document.getElementById('root')!).render(
       preferences={{
         theme: {
           mode: 'light',
-          overrides: {
-            colors: {
-              primary: {
-                main: '#1976d2',
-                contrastText: '#ffffff',
-              },
-            },
-          },
+          // overrides: {
+          //   colors: {
+          //     primary: {
+          //       main: 'var(--color-blue-600)',
+          //     },
+          //   },
+          // },
         },
       }}
     >

From a2a7b40429b05391280c6244b6e2e82358f752d1 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 24 Jun 2025 16:25:00 +0530
Subject: [PATCH 81/96] chore(samples): update teamspace nextjs sample

- Created postcss.config.js and postcss.config.mjs for PostCSS integration with Tailwind CSS.
- Added tailwind.config.js for Tailwind CSS configuration with custom themes and animations.
- Updated tsconfig.json to target ES5 and include baseUrl for module resolution.
- Removed unused SVG files from the public directory to clean up assets.
---
 pnpm-lock.yaml                                | 12088 +++++++++-------
 samples/teamspace-nextjs/.gitignore           |    20 +-
 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/favicon.ico      |   Bin 25931 -> 0 bytes
 samples/teamspace-nextjs/app/globals.css      |    91 +-
 samples/teamspace-nextjs/app/layout.tsx       |    45 +-
 .../app/organizations/new/page.tsx            |   211 +
 .../app/organizations/page.tsx                |   170 +
 samples/teamspace-nextjs/app/page.module.css  |   169 -
 samples/teamspace-nextjs/app/page.tsx         |   478 +-
 samples/teamspace-nextjs/app/profile/page.tsx |   266 +
 samples/teamspace-nextjs/app/signin/page.tsx  |     7 -
 samples/teamspace-nextjs/components.json      |    21 +
 .../teamspace-nextjs/components/header.tsx    |   203 +
 .../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        |    30 +-
 samples/teamspace-nextjs/next.config.js       |    14 +
 samples/teamspace-nextjs/next.config.mjs      |    14 +
 samples/teamspace-nextjs/next.config.ts       |     7 -
 samples/teamspace-nextjs/package.json         |    72 +-
 samples/teamspace-nextjs/pnpm-lock.yaml       |  3788 +++++
 samples/teamspace-nextjs/postcss.config.js    |     6 +
 samples/teamspace-nextjs/postcss.config.mjs   |     8 +
 samples/teamspace-nextjs/public/file.svg      |     1 -
 samples/teamspace-nextjs/public/globe.svg     |     1 -
 samples/teamspace-nextjs/public/next.svg      |     1 -
 samples/teamspace-nextjs/public/vercel.svg    |     1 -
 samples/teamspace-nextjs/public/window.svg    |     1 -
 samples/teamspace-nextjs/tailwind.config.js   |    72 +
 samples/teamspace-nextjs/tsconfig.json        |     5 +-
 92 files changed, 18822 insertions(+), 5247 deletions(-)
 delete 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
 delete mode 100644 samples/teamspace-nextjs/app/favicon.ico
 create mode 100644 samples/teamspace-nextjs/app/organizations/new/page.tsx
 create mode 100644 samples/teamspace-nextjs/app/organizations/page.tsx
 delete mode 100644 samples/teamspace-nextjs/app/page.module.css
 create mode 100644 samples/teamspace-nextjs/app/profile/page.tsx
 delete mode 100644 samples/teamspace-nextjs/app/signin/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
 delete mode 100644 samples/teamspace-nextjs/env.local.example
 delete 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/next.config.js
 create mode 100644 samples/teamspace-nextjs/next.config.mjs
 delete mode 100644 samples/teamspace-nextjs/next.config.ts
 create mode 100644 samples/teamspace-nextjs/pnpm-lock.yaml
 create mode 100644 samples/teamspace-nextjs/postcss.config.js
 create mode 100644 samples/teamspace-nextjs/postcss.config.mjs
 delete mode 100644 samples/teamspace-nextjs/public/file.svg
 delete mode 100644 samples/teamspace-nextjs/public/globe.svg
 delete mode 100644 samples/teamspace-nextjs/public/next.svg
 delete mode 100644 samples/teamspace-nextjs/public/vercel.svg
 delete mode 100644 samples/teamspace-nextjs/public/window.svg
 create mode 100644 samples/teamspace-nextjs/tailwind.config.js

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eeb3a70ab..80bdf4d90 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -553,34 +553,172 @@ importers:
       '@asgardeo/nextjs':
         specifier: workspace:^
         version: link:../../packages/nextjs
+      '@hookform/resolvers':
+        specifier: ^3.9.1
+        version: 3.10.0(react-hook-form@7.58.1(react@18.3.1))
+      '@radix-ui/react-accordion':
+        specifier: 1.2.2
+        version: 1.2.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-alert-dialog':
+        specifier: 1.1.4
+        version: 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-aspect-ratio':
+        specifier: 1.1.1
+        version: 1.1.1(@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':
+        specifier: latest
+        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: latest
+        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-collapsible':
+        specifier: 1.1.2
+        version: 1.1.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-context-menu':
+        specifier: 2.2.4
+        version: 2.2.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-dialog':
+        specifier: 1.1.4
+        version: 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-dropdown-menu':
+        specifier: latest
+        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-hover-card':
+        specifier: 1.1.4
+        version: 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-label':
+        specifier: latest
+        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-menubar':
+        specifier: 1.1.4
+        version: 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-navigation-menu':
+        specifier: 1.2.3
+        version: 1.2.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-popover':
+        specifier: 1.1.4
+        version: 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-progress':
+        specifier: 1.1.1
+        version: 1.1.1(@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-radio-group':
+        specifier: 1.2.2
+        version: 1.2.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-scroll-area':
+        specifier: 1.2.2
+        version: 1.2.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-select':
+        specifier: 2.1.4
+        version: 2.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-separator':
+        specifier: 1.1.1
+        version: 1.1.1(@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-slider':
+        specifier: 1.2.2
+        version: 1.2.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-slot':
+        specifier: latest
+        version: 1.2.3(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-switch':
+        specifier: 1.1.2
+        version: 1.1.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-tabs':
+        specifier: 1.1.2
+        version: 1.1.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-toast':
+        specifier: 1.2.4
+        version: 1.2.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-toggle':
+        specifier: 1.1.1
+        version: 1.1.1(@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-toggle-group':
+        specifier: 1.1.1
+        version: 1.1.1(@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-tooltip':
+        specifier: 1.1.6
+        version: 1.1.6(@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)
+      autoprefixer:
+        specifier: ^10.4.20
+        version: 10.4.21(postcss@8.5.3)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      cmdk:
+        specifier: 1.0.4
+        version: 1.0.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)
+      date-fns:
+        specifier: 4.1.0
+        version: 4.1.0
+      embla-carousel-react:
+        specifier: 8.5.1
+        version: 8.5.1(react@18.3.1)
+      input-otp:
+        specifier: 1.4.1
+        version: 1.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      jose:
+        specifier: latest
+        version: 6.0.11
+      lucide-react:
+        specifier: ^0.454.0
+        version: 0.454.0(react@18.3.1)
       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)
+        specifier: 14.2.16
+        version: 14.2.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.89.0)
+      next-themes:
+        specifier: latest
+        version: 0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react:
-        specifier: ^19.0.0
-        version: 19.1.0
+        specifier: ^18
+        version: 18.3.1
+      react-day-picker:
+        specifier: 8.10.1
+        version: 8.10.1(date-fns@4.1.0)(react@18.3.1)
       react-dom:
-        specifier: ^19.0.0
-        version: 19.1.0(react@19.1.0)
+        specifier: ^18
+        version: 18.3.1(react@18.3.1)
+      react-hook-form:
+        specifier: ^7.54.1
+        version: 7.58.1(react@18.3.1)
+      react-resizable-panels:
+        specifier: ^2.1.7
+        version: 2.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      recharts:
+        specifier: 2.15.0
+        version: 2.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      sonner:
+        specifier: ^1.7.1
+        version: 1.7.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      tailwind-merge:
+        specifier: ^2.5.5
+        version: 2.6.0
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@3.4.17)
+      vaul:
+        specifier: ^0.9.6
+        version: 0.9.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)
+      zod:
+        specifier: ^3.24.1
+        version: 3.25.67
     devDependencies:
-      '@eslint/eslintrc':
-        specifier: ^3
-        version: 3.3.1
       '@types/node':
-        specifier: ^20
-        version: 20.17.50
+        specifier: ^22
+        version: 22.15.30
       '@types/react':
-        specifier: ^19
-        version: 19.1.5
+        specifier: ^18
+        version: 18.3.23
       '@types/react-dom':
-        specifier: ^19
-        version: 19.1.5(@types/react@19.1.5)
-      eslint:
-        specifier: ^9
-        version: 9.28.0(jiti@2.4.2)
-      eslint-config-next:
-        specifier: 15.3.2
-        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)
+        specifier: ^18
+        version: 18.3.7(@types/react@18.3.23)
+      postcss:
+        specifier: ^8.5
+        version: 8.5.3
+      tailwindcss:
+        specifier: ^3.4.17
+        version: 3.4.17
       typescript:
         specifier: ^5
         version: 5.8.3
@@ -670,67 +808,6 @@ importers:
         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)
 
-  samples/vite-react-ts:
-    dependencies:
-      '@asgardeo/react':
-        specifier: workspace:^
-        version: link:../../packages/react
-      '@asgardeo/react-router':
-        specifier: workspace:^
-        version: link:../../packages/react-router
-      '@tailwindcss/vite':
-        specifier: ^4.1.8
-        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))
-      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)
-      tailwindcss:
-        specifier: ^4.1.8
-        version: 4.1.8
-    devDependencies:
-      '@eslint/js':
-        specifier: ^9.25.0
-        version: 9.28.0
-      '@types/react':
-        specifier: ^19.1.2
-        version: 19.1.5
-      '@types/react-dom':
-        specifier: ^19.1.2
-        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@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0))
-      eslint:
-        specifier: ^9.25.0
-        version: 9.28.0(jiti@2.4.2)
-      eslint-plugin-react-hooks:
-        specifier: ^5.2.0
-        version: 5.2.0(eslint@9.28.0(jiti@2.4.2))
-      eslint-plugin-react-refresh:
-        specifier: ^0.4.19
-        version: 0.4.20(eslint@9.28.0(jiti@2.4.2))
-      globals:
-        specifier: ^16.0.0
-        version: 16.1.0
-      typescript:
-        specifier: ~5.8.3
-        version: 5.8.3
-      typescript-eslint:
-        specifier: ^8.30.1
-        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@24.0.3)(jiti@2.4.2)(lightningcss@1.30.1)(sass@1.89.0)(terser@5.39.2)(yaml@2.8.0)
-
 packages:
 
   '@algolia/autocomplete-core@1.17.7':
@@ -805,6 +882,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'}
@@ -1414,6 +1495,11 @@ packages:
   '@floating-ui/utils@0.2.9':
     resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
 
+  '@hookform/resolvers@3.10.0':
+    resolution: {integrity: sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag==}
+    peerDependencies:
+      react-hook-form: ^7.0.0
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -1617,20 +1703,23 @@ packages:
   '@microsoft/tsdoc@0.14.2':
     resolution: {integrity: sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==}
 
-  '@napi-rs/wasm-runtime@0.2.10':
-    resolution: {integrity: sha512-bCsCyeZEwVErsGmyPNSzwfwFn4OdxBj0mmv6hOFucB/k81Ojdu68RbZdxYsRQUPc9l6SU5F/cG+bXgWs3oUgsQ==}
-
   '@napi-rs/wasm-runtime@0.2.4':
     resolution: {integrity: sha512-9zESzOO5aDByvhIAsOy9TbpZ0Ur2AJbUI7UT73kcUTS2mxAMHOBaa1st/jAymNoCtvrit99kkzT1FZuXVcgfIQ==}
 
+  '@next/env@14.2.16':
+    resolution: {integrity: sha512-fLrX5TfJzHCbnZ9YUSnGW63tMV3L4nSfhgOQ0iCcX21Pt+VSTDuaLsSuL8J/2XAiVA5AnzvXDpf6pMs60QxOag==}
+
   '@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@15.3.2':
-    resolution: {integrity: sha512-ijVRTXBgnHT33aWnDtmlG+LJD+5vhc9AKTJPquGG5NKXjpKNjc62woIhFtrAcWdBobt8kqjCoaJ0q6sDQoX7aQ==}
+  '@next/swc-darwin-arm64@14.2.16':
+    resolution: {integrity: sha512-uFT34QojYkf0+nn6MEZ4gIWQ5aqGF11uIZ1HSxG+cSbj+Mg3+tYm8qXYd3dKN5jqKUm5rBVvf1PBRO/MeQ6rxw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
 
   '@next/swc-darwin-arm64@15.3.2':
     resolution: {integrity: sha512-2DR6kY/OGcokbnCsjHpNeQblqCZ85/1j6njYSkzRdpLn5At7OkSdmk7WyAmB9G0k25+VgqVZ/u356OSoQZ3z0g==}
@@ -1638,42 +1727,90 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@next/swc-darwin-x64@14.2.16':
+    resolution: {integrity: sha512-mCecsFkYezem0QiZlg2bau3Xul77VxUD38b/auAjohMA22G9KTJneUYMv78vWoCCFkleFAhY1NIvbyjj1ncG9g==}
+    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.2.16':
+    resolution: {integrity: sha512-yhkNA36+ECTC91KSyZcgWgKrYIyDnXZj8PqtJ+c2pMvj45xf7y/HrgI17hLdrcYamLfVt7pBaJUMxADtPaczHA==}
+    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.2.16':
+    resolution: {integrity: sha512-X2YSyu5RMys8R2lA0yLMCOCtqFOoLxrq2YbazFvcPOE4i/isubYjkh+JCpRmqYfEuCVltvlo+oGfj/b5T2pKUA==}
+    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.2.16':
+    resolution: {integrity: sha512-9AGcX7VAkGbc5zTSa+bjQ757tkjr6C/pKS7OK8cX7QEiK6MHIIezBLcQ7gQqbDW2k5yaqba2aDtaBeyyZh1i6Q==}
+    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.2.16':
+    resolution: {integrity: sha512-Klgeagrdun4WWDaOizdbtIIm8khUDQJ/5cRzdpXHfkbY91LxBXeejL4kbZBrpR/nmgRrQvmz4l3OtttNVkz2Sg==}
+    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.2.16':
+    resolution: {integrity: sha512-PwW8A1UC1Y0xIm83G3yFGPiOBftJK4zukTmk7DI1CebyMOoaVpd8aSy7K6GhobzhkjYvqS/QmzcfsWG2Dwizdg==}
+    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.2.16':
+    resolution: {integrity: sha512-jhPl3nN0oKEshJBNDAo0etGMzv0j3q3VYorTSFqH1o3rwv1MQRdor27u1zhkgsHPNeY1jxcgyx1ZsCkDD1IHgg==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@next/swc-win32-x64-msvc@14.2.16':
+    resolution: {integrity: sha512-OA7NtfxgirCjfqt+02BqxC3MIgM/JaGjw9tOe4fyZgPsqfseNiMPnCRP44Pfs+Gpo9zPN+SXaFsgP6vk8d571A==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
   '@next/swc-win32-x64-msvc@15.3.2':
     resolution: {integrity: sha512-aW5B8wOPioJ4mBdMDXkt5f3j8pUr9W8AnlX0Df35uRWNT1Y6RIybxjnSUe+PhM+M1bwgyY8PHLmXZC6zT1o5tA==}
     engines: {node: '>= 10'}
@@ -1695,10 +1832,6 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@nolyfill/is-core-module@1.0.39':
-    resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
-    engines: {node: '>=12.4.0'}
-
   '@nx/nx-darwin-arm64@20.8.1':
     resolution: {integrity: sha512-Gat4Io66cV70Oa1CjrMJPsEx5ICpAGayv9hejOtBUEDb6XjR12L2e4wV+4EHliF0UbEcuZAr8/lTROEPk0RGWQ==}
     engines: {node: '>= 10'}
@@ -1855,17 +1988,30 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
-  '@radix-ui/react-compose-refs@1.1.2':
-    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+  '@radix-ui/number@1.1.0':
+    resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==}
+
+  '@radix-ui/primitive@1.1.1':
+    resolution: {integrity: sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==}
+
+  '@radix-ui/primitive@1.1.2':
+    resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
+
+  '@radix-ui/react-accordion@1.2.2':
+    resolution: {integrity: sha512-b1oh54x4DMCdGsB4/7ahiSrViXxaBwRPotiZNnYXjLha9vfuURSAZErki6qjDoSIV0eXx5v57XnTGVtGwnfp2g==}
     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-label@2.1.7':
-    resolution: {integrity: sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==}
+  '@radix-ui/react-alert-dialog@1.1.4':
+    resolution: {integrity: sha512-A6Kh23qZDLy3PSU4bh2UJZznOrUdHImIXqF8YtUa6CN73f8EOO9XlXSCd9IHyPvIquTaa/kwaSWzZTtUvgXVGw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1877,8 +2023,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-primitive@2.1.3':
-    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+  '@radix-ui/react-arrow@1.1.1':
+    resolution: {integrity: sha512-NaVpZfmv8SKeZbn4ijN2V3jlHA9ngBG16VnIIm22nUR0Yk8KUALyBxT3KYEUnNuch9sTE8UTsS3whzBgKOL30w==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1890,6070 +2036,8085 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-slot@1.2.3':
-    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+  '@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
 
-  '@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==}
-
-  '@rollup/plugin-commonjs@25.0.8':
-    resolution: {integrity: sha512-ZEZWTK5n6Qde0to4vS9Mr5x/0UZoqCxPVR9KRUjU4kA2sO7GEUn1fop0DAwpO6z0Nw/kJON9bDmSxdWxO/TT1A==}
-    engines: {node: '>=14.0.0'}
+  '@radix-ui/react-aspect-ratio@1.1.1':
+    resolution: {integrity: sha512-kNU4FIpcFMBLkOUcgeIteH06/8JLBcYY6Le1iKenDGCYNYFX3TQqCZjzkOsz37h7r94/99GTb7YhEr98ZBJibw==}
     peerDependencies:
-      rollup: ^2.68.0||^3.0.0||^4.0.0
+      '@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:
-      rollup:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
         optional: true
 
-  '@rollup/plugin-image@3.0.3':
-    resolution: {integrity: sha512-qXWQwsXpvD4trSb8PeFPFajp8JLpRtqqOeNYRUKnEQNHm7e5UP7fuSRcbjQAJ7wDZBbnJvSdY5ujNBQd9B1iFg==}
-    engines: {node: '>=14.0.0'}
+  '@radix-ui/react-avatar@1.1.10':
+    resolution: {integrity: sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==}
     peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+      '@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:
-      rollup:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
         optional: true
 
-  '@rollup/plugin-inject@5.0.5':
-    resolution: {integrity: sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==}
-    engines: {node: '>=14.0.0'}
+  '@radix-ui/react-checkbox@1.3.2':
+    resolution: {integrity: sha512-yd+dI56KZqawxKZrJ31eENUwqc1QSqg4OZ15rybGjF2ZNwMO+wCyHzAVLRp9qoYJf7kYy0YpZ2b0JCzJ42HZpA==}
     peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+      '@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:
-      rollup:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
         optional: true
 
-  '@rollup/plugin-node-resolve@15.3.1':
-    resolution: {integrity: sha512-tgg6b91pAybXHJQMAAwW9VuWBO6Thi+q7BCNARLwSqlmsHz0XYURtGvh/AuwSADXSI4h/2uHbs7s4FzlZDGSGA==}
-    engines: {node: '>=14.0.0'}
+  '@radix-ui/react-collapsible@1.1.2':
+    resolution: {integrity: sha512-PliMB63vxz7vggcyq0IxNYk8vGDrLXVWw4+W4B8YnwI1s18x7YZYqlG9PLX7XxAJUi0g2DxP4XKJMFHh/iVh9A==}
     peerDependencies:
-      rollup: ^2.78.0||^3.0.0||^4.0.0
+      '@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:
-      rollup:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
         optional: true
 
-  '@rollup/plugin-typescript@11.1.6':
-    resolution: {integrity: sha512-R92yOmIACgYdJ7dJ97p4K69I8gg6IEHt8M7dUBxN3W6nrO8uUxX5ixl0yU/N3aZTi8WhPuICvOHXQvF6FaykAA==}
-    engines: {node: '>=14.0.0'}
+  '@radix-ui/react-collection@1.1.1':
+    resolution: {integrity: sha512-LwT3pSho9Dljg+wY2KN2mrrh6y3qELfftINERIzBUO9e0N+t0oMTyn3k9iv+ZqgrwGkRnLpNJrsMv9BZlt2yuA==}
     peerDependencies:
-      rollup: ^2.14.0||^3.0.0||^4.0.0
-      tslib: '*'
-      typescript: '>=3.7.0'
+      '@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:
-      rollup:
+      '@types/react':
         optional: true
-      tslib:
+      '@types/react-dom':
         optional: true
 
-  '@rollup/pluginutils@4.2.1':
-    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
-    engines: {node: '>= 8.0.0'}
-
-  '@rollup/pluginutils@5.1.4':
-    resolution: {integrity: sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==}
-    engines: {node: '>=14.0.0'}
+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
     peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+      '@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:
-      rollup:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
         optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.40.2':
-    resolution: {integrity: sha512-JkdNEq+DFxZfUwxvB58tHMHBHVgX23ew41g1OQinthJ+ryhdRk67O31S7sYw8u2lTjHUPFxwar07BBt1KHp/hg==}
-    cpu: [arm]
-    os: [android]
+  '@radix-ui/react-compose-refs@1.1.1':
+    resolution: {integrity: sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@rollup/rollup-android-arm64@4.40.2':
-    resolution: {integrity: sha512-13unNoZ8NzUmnndhPTkWPWbX3vtHodYmy+I9kuLxN+F+l+x3LdVF7UCu8TWVMt1POHLh6oDHhnOA04n8oJZhBw==}
-    cpu: [arm64]
-    os: [android]
+  '@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
 
-  '@rollup/rollup-darwin-arm64@4.40.2':
-    resolution: {integrity: sha512-Gzf1Hn2Aoe8VZzevHostPX23U7N5+4D36WJNHK88NZHCJr7aVMG4fadqkIf72eqVPGjGc0HJHNuUaUcxiR+N/w==}
-    cpu: [arm64]
-    os: [darwin]
+  '@radix-ui/react-context-menu@2.2.4':
+    resolution: {integrity: sha512-ap4wdGwK52rJxGkwukU1NrnEodsUFQIooANKu+ey7d6raQ2biTcEf8za1zr0mgFHieevRTB2nK4dJeN8pTAZGQ==}
+    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
 
-  '@rollup/rollup-darwin-x64@4.40.2':
-    resolution: {integrity: sha512-47N4hxa01a4x6XnJoskMKTS8XZ0CZMd8YTbINbi+w03A2w4j1RTlnGHOz/P0+Bg1LaVL6ufZyNprSg+fW5nYQQ==}
-    cpu: [x64]
-    os: [darwin]
+  '@radix-ui/react-context@1.1.1':
+    resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.40.2':
-    resolution: {integrity: sha512-8t6aL4MD+rXSHHZUR1z19+9OFJ2rl1wGKvckN47XFRVO+QL/dUSpKA2SLRo4vMg7ELA8pzGpC+W9OEd1Z/ZqoQ==}
-    cpu: [arm64]
-    os: [freebsd]
+  '@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
 
-  '@rollup/rollup-freebsd-x64@4.40.2':
-    resolution: {integrity: sha512-C+AyHBzfpsOEYRFjztcYUFsH4S7UsE9cDtHCtma5BK8+ydOZYgMmWg1d/4KBytQspJCld8ZIujFMAdKG1xyr4Q==}
-    cpu: [x64]
-    os: [freebsd]
+  '@radix-ui/react-dialog@1.1.4':
+    resolution: {integrity: sha512-Ur7EV1IwQGCyaAuyDRiOLA5JIUZxELJljF+MbM/2NC0BYwfuRrbpS30BiQBJrVruscgUkieKkqXYDOoByaxIoA==}
+    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
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.40.2':
-    resolution: {integrity: sha512-de6TFZYIvJwRNjmW3+gaXiZ2DaWL5D5yGmSYzkdzjBDS3W+B9JQ48oZEsmMvemqjtAFzE16DIBLqd6IQQRuG9Q==}
-    cpu: [arm]
-    os: [linux]
+  '@radix-ui/react-direction@1.1.0':
+    resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.40.2':
-    resolution: {integrity: sha512-urjaEZubdIkacKc930hUDOfQPysezKla/O9qV+O89enqsqUmQm8Xj8O/vh0gHg4LYfv7Y7UsE3QjzLQzDYN1qg==}
-    cpu: [arm]
-    os: [linux]
+  '@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
 
-  '@rollup/rollup-linux-arm64-gnu@4.40.2':
-    resolution: {integrity: sha512-KlE8IC0HFOC33taNt1zR8qNlBYHj31qGT1UqWqtvR/+NuCVhfufAq9fxO8BMFC22Wu0rxOwGVWxtCMvZVLmhQg==}
-    cpu: [arm64]
-    os: [linux]
+  '@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
 
-  '@rollup/rollup-linux-arm64-musl@4.40.2':
-    resolution: {integrity: sha512-j8CgxvfM0kbnhu4XgjnCWJQyyBOeBI1Zq91Z850aUddUmPeQvuAy6OiMdPS46gNFgy8gN1xkYyLgwLYZG3rBOg==}
-    cpu: [arm64]
-    os: [linux]
+  '@radix-ui/react-dismissable-layer@1.1.3':
+    resolution: {integrity: sha512-onrWn/72lQoEucDmJnr8uczSNTujT0vJnA/X5+3AkChVPowr8n1yvIKIabhWyMQeMvvmdpsvcyDqx3X1LEXCPg==}
+    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
 
-  '@rollup/rollup-linux-loongarch64-gnu@4.40.2':
-    resolution: {integrity: sha512-Ybc/1qUampKuRF4tQXc7G7QY9YRyeVSykfK36Y5Qc5dmrIxwFhrOzqaVTNoZygqZ1ZieSWTibfFhQ5qK8jpWxw==}
-    cpu: [loong64]
-    os: [linux]
+  '@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
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.40.2':
-    resolution: {integrity: sha512-3FCIrnrt03CCsZqSYAOW/k9n625pjpuMzVfeI+ZBUSDT3MVIFDSPfSUgIl9FqUftxcUXInvFah79hE1c9abD+Q==}
-    cpu: [ppc64]
-    os: [linux]
+  '@radix-ui/react-focus-guards@1.1.1':
+    resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.40.2':
-    resolution: {integrity: sha512-QNU7BFHEvHMp2ESSY3SozIkBPaPBDTsfVNGx3Xhv+TdvWXFGOSH2NJvhD1zKAT6AyuuErJgbdvaJhYVhVqrWTg==}
-    cpu: [riscv64]
-    os: [linux]
+  '@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
 
-  '@rollup/rollup-linux-riscv64-musl@4.40.2':
-    resolution: {integrity: sha512-5W6vNYkhgfh7URiXTO1E9a0cy4fSgfE4+Hl5agb/U1sa0kjOLMLC1wObxwKxecE17j0URxuTrYZZME4/VH57Hg==}
-    cpu: [riscv64]
-    os: [linux]
+  '@radix-ui/react-focus-scope@1.1.1':
+    resolution: {integrity: sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==}
+    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
 
-  '@rollup/rollup-linux-s390x-gnu@4.40.2':
-    resolution: {integrity: sha512-B7LKIz+0+p348JoAL4X/YxGx9zOx3sR+o6Hj15Y3aaApNfAshK8+mWZEf759DXfRLeL2vg5LYJBB7DdcleYCoQ==}
-    cpu: [s390x]
-    os: [linux]
+  '@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
 
-  '@rollup/rollup-linux-x64-gnu@4.40.2':
-    resolution: {integrity: sha512-lG7Xa+BmBNwpjmVUbmyKxdQJ3Q6whHjMjzQplOs5Z+Gj7mxPtWakGHqzMqNER68G67kmCX9qX57aRsW5V0VOng==}
-    cpu: [x64]
-    os: [linux]
+  '@radix-ui/react-hover-card@1.1.4':
+    resolution: {integrity: sha512-QSUUnRA3PQ2UhvoCv3eYvMnCAgGQW+sTu86QPuNb+ZMi+ZENd6UWpiXbcWDQ4AEaKF9KKpCHBeaJz9Rw6lRlaQ==}
+    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
 
-  '@rollup/rollup-linux-x64-musl@4.40.2':
-    resolution: {integrity: sha512-tD46wKHd+KJvsmije4bUskNuvWKFcTOIM9tZ/RrmIvcXnbi0YK/cKS9FzFtAm7Oxi2EhV5N2OpfFB348vSQRXA==}
-    cpu: [x64]
-    os: [linux]
+  '@radix-ui/react-id@1.1.0':
+    resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.40.2':
-    resolution: {integrity: sha512-Bjv/HG8RRWLNkXwQQemdsWw4Mg+IJ29LK+bJPW2SCzPKOUaMmPEppQlu/Fqk1d7+DX3V7JbFdbkh/NMmurT6Pg==}
-    cpu: [arm64]
-    os: [win32]
+  '@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
 
-  '@rollup/rollup-win32-ia32-msvc@4.40.2':
-    resolution: {integrity: sha512-dt1llVSGEsGKvzeIO76HToiYPNPYPkmjhMHhP00T9S4rDern8P2ZWvWAQUEJ+R1UdMWJ/42i/QqJ2WV765GZcA==}
-    cpu: [ia32]
-    os: [win32]
+  '@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
 
-  '@rollup/rollup-win32-x64-msvc@4.40.2':
-    resolution: {integrity: sha512-bwspbWB04XJpeElvsp+DCylKfF4trJDa2Y9Go8O6A7YLX2LIKGcNK/CYImJN6ZP4DcuOHB4Utl3iCbnR62DudA==}
-    cpu: [x64]
-    os: [win32]
+  '@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
 
-  '@rtsao/scc@1.1.0':
-    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
+  '@radix-ui/react-menu@2.1.4':
+    resolution: {integrity: sha512-BnOgVoL6YYdHAG6DtXONaR29Eq4nvbi8rutrV/xlr3RQCMMb3yqP85Qiw/3NReozrSW+4dfLkK+rc1hb4wPU/A==}
+    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
 
-  '@rushstack/eslint-patch@1.11.0':
-    resolution: {integrity: sha512-zxnHvoMQVqewTJr/W4pKjF0bMGiKJv1WX7bSrkl46Hg0QjESbzBROWK0Wg4RphzSOS5Jiy7eFimmM3UgMrMZbQ==}
+  '@radix-ui/react-menubar@1.1.4':
+    resolution: {integrity: sha512-+KMpi7VAZuB46+1LD7a30zb5IxyzLgC8m8j42gk3N4TUCcViNQdX8FhoH1HDvYiA8quuqcek4R4bYpPn/SY1GA==}
+    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
 
-  '@shikijs/core@2.5.0':
-    resolution: {integrity: sha512-uu/8RExTKtavlpH7XqnVYBrfBkUc20ngXiX9NSrBhOVZYv/7XQRKUyhtkeflY5QsxC0GbJThCerruZfsUaSldg==}
+  '@radix-ui/react-navigation-menu@1.2.3':
+    resolution: {integrity: sha512-IQWAsQ7dsLIYDrn0WqPU+cdM7MONTv9nqrLVYoie3BPiabSfUVDe6Fr+oEt0Cofsr9ONDcDe9xhmJbL1Uq1yKg==}
+    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
 
-  '@shikijs/engine-javascript@2.5.0':
-    resolution: {integrity: sha512-VjnOpnQf8WuCEZtNUdjjwGUbtAVKuZkVQ/5cHy/tojVVRIRtlWMYVjyWhxOmIq05AlSOv72z7hRNRGVBgQOl0w==}
-
-  '@shikijs/engine-oniguruma@2.5.0':
-    resolution: {integrity: sha512-pGd1wRATzbo/uatrCIILlAdFVKdxImWJGQ5rFiB5VZi2ve5xj3Ax9jny8QvkaV93btQEwR/rSz5ERFpC5mKNIw==}
+  '@radix-ui/react-popover@1.1.4':
+    resolution: {integrity: sha512-aUACAkXx8LaFymDma+HQVji7WhvEhpFJ7+qPz17Nf4lLZqtreGOFRiNQWQmhzp7kEWg9cOyyQJpdIMUMPc/CPw==}
+    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
 
-  '@shikijs/langs@2.5.0':
-    resolution: {integrity: sha512-Qfrrt5OsNH5R+5tJ/3uYBBZv3SuGmnRPejV9IlIbFH3HTGLDlkqgHymAlzklVmKBjAaVmkPkyikAV/sQ1wSL+w==}
+  '@radix-ui/react-popper@1.2.1':
+    resolution: {integrity: sha512-3kn5Me69L+jv82EKRuQCXdYyf1DqHwD2U/sxoNgBGCB7K9TRc3bQamQ+5EPM9EvyPdli0W41sROd+ZU1dTCztw==}
+    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
 
-  '@shikijs/themes@2.5.0':
-    resolution: {integrity: sha512-wGrk+R8tJnO0VMzmUExHR+QdSaPUl/NKs+a4cQQRWyoc3YFbUzuLEi/KWK1hj+8BfHRKm2jNhhJck1dfstJpiw==}
+  '@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
 
-  '@shikijs/transformers@2.5.0':
-    resolution: {integrity: sha512-SI494W5X60CaUwgi8u4q4m4s3YAFSxln3tzNjOSYqq54wlVgz0/NbbXEb3mdLbqMBztcmS7bVTaEd2w0qMmfeg==}
+  '@radix-ui/react-portal@1.1.3':
+    resolution: {integrity: sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==}
+    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
 
-  '@shikijs/types@2.5.0':
-    resolution: {integrity: sha512-ygl5yhxki9ZLNuNpPitBWvcy9fsSKKaRuO4BAlMyagszQidxcpLAr0qiW/q43DtSIDxO6hEbtYLiFZNXO/hdGw==}
+  '@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
 
-  '@shikijs/vscode-textmate@10.0.2':
-    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
+  '@radix-ui/react-presence@1.1.2':
+    resolution: {integrity: sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==}
+    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
 
-  '@sinclair/typebox@0.27.8':
-    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
+  '@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
 
-  '@swc/counter@0.1.3':
-    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
+  '@radix-ui/react-primitive@2.0.1':
+    resolution: {integrity: sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==}
+    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
 
-  '@swc/helpers@0.5.15':
-    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+  '@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
 
-  '@tailwindcss/node@4.1.8':
-    resolution: {integrity: sha512-OWwBsbC9BFAJelmnNcrKuf+bka2ZxCE2A4Ft53Tkg4uoiE67r/PMEYwCsourC26E+kmxfwE0hVzMdxqeW+xu7Q==}
+  '@radix-ui/react-progress@1.1.1':
+    resolution: {integrity: sha512-6diOawA84f/eMxFHcWut0aE1C2kyE9dOyCTQOMRR2C/qPiXz/X0SaiA/RLbapQaXUCmy0/hLMf9meSccD1N0pA==}
+    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
 
-  '@tailwindcss/oxide-android-arm64@4.1.8':
-    resolution: {integrity: sha512-Fbz7qni62uKYceWYvUjRqhGfZKwhZDQhlrJKGtnZfuNtHFqa8wmr+Wn74CTWERiW2hn3mN5gTpOoxWKk0jRxjg==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [android]
+  '@radix-ui/react-radio-group@1.2.2':
+    resolution: {integrity: sha512-E0MLLGfOP0l8P/NxgVzfXJ8w3Ch8cdO6UDzJfDChu4EJDy+/WdO5LqpdY8PYnCErkmZH3gZhDL1K7kQ41fAHuQ==}
+    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
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.8':
-    resolution: {integrity: sha512-RdRvedGsT0vwVVDztvyXhKpsU2ark/BjgG0huo4+2BluxdXo8NDgzl77qh0T1nUxmM11eXwR8jA39ibvSTbi7A==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
+  '@radix-ui/react-roving-focus@1.1.1':
+    resolution: {integrity: sha512-QE1RoxPGJ/Nm8Qmk0PxP8ojmoaS67i0s7hVssS7KuI2FQoc/uzVlZsqKfQvxPE6D8hICCPHJ4D88zNhT3OOmkw==}
+    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
 
-  '@tailwindcss/oxide-darwin-x64@4.1.8':
-    resolution: {integrity: sha512-t6PgxjEMLp5Ovf7uMb2OFmb3kqzVTPPakWpBIFzppk4JE4ix0yEtbtSjPbU8+PZETpaYMtXvss2Sdkx8Vs4XRw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
+  '@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
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.8':
-    resolution: {integrity: sha512-g8C8eGEyhHTqwPStSwZNSrOlyx0bhK/V/+zX0Y+n7DoRUzyS8eMbVshVOLJTDDC+Qn9IJnilYbIKzpB9n4aBsg==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [freebsd]
+  '@radix-ui/react-scroll-area@1.2.2':
+    resolution: {integrity: sha512-EFI1N/S3YxZEW/lJ/H1jY3njlvTd8tBmgKEn4GHi51+aMm94i6NmAJstsm5cu3yJwYqYc93gpCPm21FeAbFk6g==}
+    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
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.8':
-    resolution: {integrity: sha512-Jmzr3FA4S2tHhaC6yCjac3rGf7hG9R6Gf2z9i9JFcuyy0u79HfQsh/thifbYTF2ic82KJovKKkIB6Z9TdNhCXQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm]
-    os: [linux]
+  '@radix-ui/react-select@2.1.4':
+    resolution: {integrity: sha512-pOkb2u8KgO47j/h7AylCj7dJsm69BXcjkrvTqMptFqsE2i0p8lHkfgneXKjAgPzBMivnoMyt8o4KiV4wYzDdyQ==}
+    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
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.8':
-    resolution: {integrity: sha512-qq7jXtO1+UEtCmCeBBIRDrPFIVI4ilEQ97qgBGdwXAARrUqSn/L9fUrkb1XP/mvVtoVeR2bt/0L77xx53bPZ/Q==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
+  '@radix-ui/react-separator@1.1.1':
+    resolution: {integrity: sha512-RRiNRSrD8iUiXriq/Y5n4/3iE8HzqgLHsusUSg5jVpU2+3tqcUFPJXHDymwEypunc2sWxDUS3UC+rkZRlHedsw==}
+    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
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.8':
-    resolution: {integrity: sha512-O6b8QesPbJCRshsNApsOIpzKt3ztG35gfX9tEf4arD7mwNinsoCKxkj8TgEE0YRjmjtO3r9FlJnT/ENd9EVefQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
+  '@radix-ui/react-slider@1.2.2':
+    resolution: {integrity: sha512-sNlU06ii1/ZcbHf8I9En54ZPW0Vil/yPVg4vQMcFNjrIx51jsHbFl1HYHQvCIWJSr1q0ZmA+iIs/ZTv8h7HHSA==}
+    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
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.8':
-    resolution: {integrity: sha512-32iEXX/pXwikshNOGnERAFwFSfiltmijMIAbUhnNyjFr3tmWmMJWQKU2vNcFX0DACSXJ3ZWcSkzNbaKTdngH6g==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
+  '@radix-ui/react-slot@1.1.1':
+    resolution: {integrity: sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.8':
-    resolution: {integrity: sha512-s+VSSD+TfZeMEsCaFaHTaY5YNj3Dri8rST09gMvYQKwPphacRG7wbuQ5ZJMIJXN/puxPcg/nU+ucvWguPpvBDg==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
+  '@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
 
-  '@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==}
+  '@radix-ui/react-switch@1.1.2':
+    resolution: {integrity: sha512-zGukiWHjEdBCRyXvKR6iXAQG6qXm2esuAD6kDOi9Cn+1X6ev3ASo4+CsYaD6Fov9r/AQFekqnD/7+V0Cs6/98g==}
     peerDependencies:
-      vite: ^5.2.0 || ^6
-
-  '@testing-library/dom@10.4.0':
-    resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
-    engines: {node: '>=18'}
+      '@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
 
-  '@testing-library/user-event@14.6.1':
-    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
-    engines: {node: '>=12', npm: '>=6'}
+  '@radix-ui/react-tabs@1.1.2':
+    resolution: {integrity: sha512-9u/tQJMcC2aGq7KXpGivMm1mgq7oRJKXphDwdypPd/j21j/2znamPU8WkXgnhUaTrSFNIt8XhOyCAupg8/GbwQ==}
     peerDependencies:
-      '@testing-library/dom': '>=7.21.4'
-
-  '@trysound/sax@0.2.0':
-    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
-    engines: {node: '>=10.13.0'}
-
-  '@tybys/wasm-util@0.9.0':
-    resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
-
-  '@types/aria-query@5.0.4':
-    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
-
-  '@types/babel__core@7.20.5':
-    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
-
-  '@types/babel__generator@7.27.0':
-    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
-
-  '@types/babel__template@7.4.4':
-    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
-
-  '@types/babel__traverse@7.20.7':
-    resolution: {integrity: sha512-dkO5fhS7+/oos4ciWxyEyjWe48zmG6wbCheo/G2ZnHx4fs3EU6YC6UM8rk56gAjNJ9P3MTH2jo5jb92/K6wbng==}
-
-  '@types/cssnano@5.1.3':
-    resolution: {integrity: sha512-BahAZSSvuFXyhgJiwQgsfsNlStE9K/ULGL+YEzK4mmL2Vf02Pjl2yZs+KmbkAg3MxkC9WwMuFwuwnwvrg7CqvQ==}
-    deprecated: This is a stub types definition. cssnano provides its own type definitions, so you do not need this installed.
-
-  '@types/estree@1.0.7':
-    resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
-
-  '@types/hast@3.0.4':
-    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
-
-  '@types/history@4.7.11':
-    resolution: {integrity: sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==}
-
-  '@types/json-schema@7.0.15':
-    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
-
-  '@types/json5@0.0.29':
-    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
-
-  '@types/linkify-it@5.0.0':
-    resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
-
-  '@types/markdown-it@14.1.2':
-    resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
-
-  '@types/mdast@4.0.4':
-    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
-
-  '@types/mdurl@2.0.0':
-    resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
-
-  '@types/minimist@1.2.5':
-    resolution: {integrity: sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==}
-
-  '@types/node@12.20.55':
-    resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==}
-
-  '@types/node@20.17.50':
-    resolution: {integrity: sha512-Mxiq0ULv/zo1OzOhwPqOA13I81CV/W3nvd3ChtQZRT5Cwz3cr0FKo/wMSsbTqL3EXpaBAEQhva2B8ByRkOIh9A==}
-
-  '@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==}
-
-  '@types/parse-json@4.0.2':
-    resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
-
-  '@types/prop-types@15.7.15':
-    resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
+      '@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
 
-  '@types/react-dom@19.1.5':
-    resolution: {integrity: sha512-CMCjrWucUBZvohgZxkjd6S9h0nZxXjzus6yDfUb+xLxYM7VvjKNH1tQrE9GWLql1XoOP4/Ds3bwFqShHUYraGg==}
+  '@radix-ui/react-toast@1.2.4':
+    resolution: {integrity: sha512-Sch9idFJHJTMH9YNpxxESqABcAFweJG4tKv+0zo0m5XBvUSL8FM5xKcJLFLXononpePs8IclyX1KieL5SDUNgA==}
     peerDependencies:
-      '@types/react': ^19.0.0
-
-  '@types/react-router-dom@5.3.3':
-    resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==}
-
-  '@types/react-router@5.1.20':
-    resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==}
-
-  '@types/react@18.3.23':
-    resolution: {integrity: sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==}
-
-  '@types/react@19.1.5':
-    resolution: {integrity: sha512-piErsCVVbpMMT2r7wbawdZsq4xMvIAhQuac2gedQHysu1TZYEigE6pnFfgZT+/jQnrRuF5r+SHzuehFjfRjr4g==}
-
-  '@types/resolve@1.20.2':
-    resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
-
-  '@types/semver@7.7.0':
-    resolution: {integrity: sha512-k107IF4+Xr7UHjwDc7Cfd6PRQfbdkiRabXGRjo07b4WyPahFBZCZ1sE+BNxYIJPPg73UkfOsVOLwqVc/6ETrIA==}
-
-  '@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/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
 
-  '@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}
+  '@radix-ui/react-toggle-group@1.1.1':
+    resolution: {integrity: sha512-OgDLZEA30Ylyz8YSXvnGqIHtERqnUt1KUYTKdw/y8u7Ci6zGiJfXc02jahmcSNK3YcErqioj/9flWC9S1ihfwg==}
     peerDependencies:
-      '@typescript-eslint/parser': ^5.0.0
-      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-      typescript: '*'
+      '@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:
-      typescript:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
         optional: true
 
-  '@typescript-eslint/eslint-plugin@6.21.0':
-    resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@radix-ui/react-toggle@1.1.1':
+    resolution: {integrity: sha512-i77tcgObYr743IonC1hrsnnPmszDRn8p+EGUsUt+5a/JFn28fxaM88Py6V2mc8J5kELMWishI0rLnuGLFD/nnQ==}
     peerDependencies:
-      '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
+      '@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:
-      typescript:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
         optional: true
 
-  '@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}
+  '@radix-ui/react-tooltip@1.1.6':
+    resolution: {integrity: sha512-TLB5D8QLExS1uDn7+wH/bjEmRurNMTzNrtq7IjaS4kjion9NtzsTGkvR5+i7yc9q01Pi2KMM2cN3f8UG4IvvXA==}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.33.1
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
+      '@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
 
-  '@typescript-eslint/experimental-utils@5.62.0':
-    resolution: {integrity: sha512-RTXpeB3eMkpoclG3ZHft6vG/Z30azNHuqY6wKPBHlVMZFuEvrtlEDe8gMqDb+SO+9hjC/pLekeSCryf9vMZlCw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@radix-ui/react-use-callback-ref@1.1.0':
+    resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
     peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@typescript-eslint/parser@5.62.0':
-    resolution: {integrity: sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
     peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-      typescript: '*'
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
-      typescript:
+      '@types/react':
         optional: true
 
-  '@typescript-eslint/parser@6.21.0':
-    resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@radix-ui/react-use-controllable-state@1.1.0':
+    resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
-      typescript:
+      '@types/react':
         optional: true
 
-  '@typescript-eslint/parser@8.33.1':
-    resolution: {integrity: sha512-qwxv6dq682yVvgKKp2qWwLgRbscDAYktPptK4JPojCwwi3R9cwrvIxS4lvBpzmcqzR4bdn54Z0IG1uHFskW4dA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
     peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@typescript-eslint/project-service@8.33.1':
-    resolution: {integrity: sha512-DZR0efeNklDIHHGRpMpR5gJITQpu6tLr9lDJnKdONTC7vvzOlLAG/wcfxcdxEWrbiZApcoBCzXqU/Z458Za5Iw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
     peerDependencies:
-      typescript: '>=4.8.4 <5.9.0'
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@typescript-eslint/scope-manager@5.62.0':
-    resolution: {integrity: sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@radix-ui/react-use-escape-keydown@1.1.0':
+    resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@typescript-eslint/scope-manager@6.21.0':
-    resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@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
 
-  '@typescript-eslint/scope-manager@8.33.1':
-    resolution: {integrity: sha512-dM4UBtgmzHR9bS0Rv09JST0RcHYearoEoo3pG5B6GoTR9XcyeqX87FEhPo+5kTvVfKCvfHaHrcgeJQc6mrDKrA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@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
 
-  '@typescript-eslint/tsconfig-utils@8.33.1':
-    resolution: {integrity: sha512-STAQsGYbHCF0/e+ShUQ4EatXQ7ceh3fBCXkNU7/MZVKulrlq1usH7t2FhxvCpuCi5O5oi1vmVaAjrGeL71OK1g==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@radix-ui/react-use-layout-effect@1.1.0':
+    resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
     peerDependencies:
-      typescript: '>=4.8.4 <5.9.0'
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@typescript-eslint/type-utils@5.62.0':
-    resolution: {integrity: sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
     peerDependencies:
-      eslint: '*'
-      typescript: '*'
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
-      typescript:
+      '@types/react':
         optional: true
 
-  '@typescript-eslint/type-utils@6.21.0':
-    resolution: {integrity: sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@radix-ui/react-use-previous@1.1.0':
+    resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
-      typescript:
+      '@types/react':
         optional: true
 
-  '@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}
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
     peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@typescript-eslint/types@5.62.0':
-    resolution: {integrity: sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@radix-ui/react-use-rect@1.1.0':
+    resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@typescript-eslint/types@6.21.0':
-    resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@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
 
-  '@typescript-eslint/types@8.33.1':
-    resolution: {integrity: sha512-xid1WfizGhy/TKMTwhtVOgalHwPtV8T32MS9MaH50Cwvz6x6YqRIPdD2WvW0XaqOzTV9p5xdLY0h/ZusU5Lokg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@radix-ui/react-use-size@1.1.0':
+    resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@typescript-eslint/typescript-estree@5.62.0':
-    resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
     peerDependencies:
-      typescript: '*'
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
-      typescript:
+      '@types/react':
         optional: true
 
-  '@typescript-eslint/typescript-estree@6.21.0':
-    resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@radix-ui/react-visually-hidden@1.1.1':
+    resolution: {integrity: sha512-vVfA2IZ9q/J+gEamvj761Oq1FpWgCDaNOOIfbPVp2MVPLEomUr5+Vf7kJGwQ24YxZSlQVar7Bes8kyTo5Dshpg==}
     peerDependencies:
-      typescript: '*'
+      '@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:
-      typescript:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
         optional: true
 
-  '@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}
+  '@radix-ui/rect@1.1.0':
+    resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
+
+  '@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'}
+
+  '@rolldown/pluginutils@1.0.0-beta.9':
+    resolution: {integrity: sha512-e9MeMtVWo186sgvFFJOPGy7/d2j2mZhLJIdVW0C/xDluuOvymEATqz6zKsP0ZmXGzQtqlyjz5sC1sYQUoJG98w==}
+
+  '@rollup/plugin-commonjs@25.0.8':
+    resolution: {integrity: sha512-ZEZWTK5n6Qde0to4vS9Mr5x/0UZoqCxPVR9KRUjU4kA2sO7GEUn1fop0DAwpO6z0Nw/kJON9bDmSxdWxO/TT1A==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      typescript: '>=4.8.4 <5.9.0'
+      rollup: ^2.68.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
 
-  '@typescript-eslint/utils@5.62.0':
-    resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@rollup/plugin-image@3.0.3':
+    resolution: {integrity: sha512-qXWQwsXpvD4trSb8PeFPFajp8JLpRtqqOeNYRUKnEQNHm7e5UP7fuSRcbjQAJ7wDZBbnJvSdY5ujNBQd9B1iFg==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
 
-  '@typescript-eslint/utils@6.21.0':
-    resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@rollup/plugin-inject@5.0.5':
+    resolution: {integrity: sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
 
-  '@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}
+  '@rollup/plugin-node-resolve@15.3.1':
+    resolution: {integrity: sha512-tgg6b91pAybXHJQMAAwW9VuWBO6Thi+q7BCNARLwSqlmsHz0XYURtGvh/AuwSADXSI4h/2uHbs7s4FzlZDGSGA==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
+      rollup: ^2.78.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
 
-  '@typescript-eslint/visitor-keys@5.62.0':
-    resolution: {integrity: sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  '@rollup/plugin-typescript@11.1.6':
+    resolution: {integrity: sha512-R92yOmIACgYdJ7dJ97p4K69I8gg6IEHt8M7dUBxN3W6nrO8uUxX5ixl0yU/N3aZTi8WhPuICvOHXQvF6FaykAA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.14.0||^3.0.0||^4.0.0
+      tslib: '*'
+      typescript: '>=3.7.0'
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+      tslib:
+        optional: true
 
-  '@typescript-eslint/visitor-keys@6.21.0':
-    resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  '@rollup/pluginutils@4.2.1':
+    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
+    engines: {node: '>= 8.0.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}
+  '@rollup/pluginutils@5.1.4':
+    resolution: {integrity: sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
 
-  '@ungap/structured-clone@1.3.0':
-    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+  '@rollup/rollup-android-arm-eabi@4.40.2':
+    resolution: {integrity: sha512-JkdNEq+DFxZfUwxvB58tHMHBHVgX23ew41g1OQinthJ+ryhdRk67O31S7sYw8u2lTjHUPFxwar07BBt1KHp/hg==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.40.2':
+    resolution: {integrity: sha512-13unNoZ8NzUmnndhPTkWPWbX3vtHodYmy+I9kuLxN+F+l+x3LdVF7UCu8TWVMt1POHLh6oDHhnOA04n8oJZhBw==}
+    cpu: [arm64]
+    os: [android]
 
-  '@unrs/resolver-binding-darwin-arm64@1.7.2':
-    resolution: {integrity: sha512-vxtBno4xvowwNmO/ASL0Y45TpHqmNkAaDtz4Jqb+clmcVSSl8XCG/PNFFkGsXXXS6AMjP+ja/TtNCFFa1QwLRg==}
+  '@rollup/rollup-darwin-arm64@4.40.2':
+    resolution: {integrity: sha512-Gzf1Hn2Aoe8VZzevHostPX23U7N5+4D36WJNHK88NZHCJr7aVMG4fadqkIf72eqVPGjGc0HJHNuUaUcxiR+N/w==}
     cpu: [arm64]
     os: [darwin]
 
-  '@unrs/resolver-binding-darwin-x64@1.7.2':
-    resolution: {integrity: sha512-qhVa8ozu92C23Hsmv0BF4+5Dyyd5STT1FolV4whNgbY6mj3kA0qsrGPe35zNR3wAN7eFict3s4Rc2dDTPBTuFQ==}
+  '@rollup/rollup-darwin-x64@4.40.2':
+    resolution: {integrity: sha512-47N4hxa01a4x6XnJoskMKTS8XZ0CZMd8YTbINbi+w03A2w4j1RTlnGHOz/P0+Bg1LaVL6ufZyNprSg+fW5nYQQ==}
     cpu: [x64]
     os: [darwin]
 
-  '@unrs/resolver-binding-freebsd-x64@1.7.2':
-    resolution: {integrity: sha512-zKKdm2uMXqLFX6Ac7K5ElnnG5VIXbDlFWzg4WJ8CGUedJryM5A3cTgHuGMw1+P5ziV8CRhnSEgOnurTI4vpHpg==}
+  '@rollup/rollup-freebsd-arm64@4.40.2':
+    resolution: {integrity: sha512-8t6aL4MD+rXSHHZUR1z19+9OFJ2rl1wGKvckN47XFRVO+QL/dUSpKA2SLRo4vMg7ELA8pzGpC+W9OEd1Z/ZqoQ==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.40.2':
+    resolution: {integrity: sha512-C+AyHBzfpsOEYRFjztcYUFsH4S7UsE9cDtHCtma5BK8+ydOZYgMmWg1d/4KBytQspJCld8ZIujFMAdKG1xyr4Q==}
     cpu: [x64]
     os: [freebsd]
 
-  '@unrs/resolver-binding-linux-arm-gnueabihf@1.7.2':
-    resolution: {integrity: sha512-8N1z1TbPnHH+iDS/42GJ0bMPLiGK+cUqOhNbMKtWJ4oFGzqSJk/zoXFzcQkgtI63qMcUI7wW1tq2usZQSb2jxw==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.40.2':
+    resolution: {integrity: sha512-de6TFZYIvJwRNjmW3+gaXiZ2DaWL5D5yGmSYzkdzjBDS3W+B9JQ48oZEsmMvemqjtAFzE16DIBLqd6IQQRuG9Q==}
     cpu: [arm]
     os: [linux]
 
-  '@unrs/resolver-binding-linux-arm-musleabihf@1.7.2':
-    resolution: {integrity: sha512-tjYzI9LcAXR9MYd9rO45m1s0B/6bJNuZ6jeOxo1pq1K6OBuRMMmfyvJYval3s9FPPGmrldYA3mi4gWDlWuTFGA==}
+  '@rollup/rollup-linux-arm-musleabihf@4.40.2':
+    resolution: {integrity: sha512-urjaEZubdIkacKc930hUDOfQPysezKla/O9qV+O89enqsqUmQm8Xj8O/vh0gHg4LYfv7Y7UsE3QjzLQzDYN1qg==}
     cpu: [arm]
     os: [linux]
 
-  '@unrs/resolver-binding-linux-arm64-gnu@1.7.2':
-    resolution: {integrity: sha512-jon9M7DKRLGZ9VYSkFMflvNqu9hDtOCEnO2QAryFWgT6o6AXU8du56V7YqnaLKr6rAbZBWYsYpikF226v423QA==}
+  '@rollup/rollup-linux-arm64-gnu@4.40.2':
+    resolution: {integrity: sha512-KlE8IC0HFOC33taNt1zR8qNlBYHj31qGT1UqWqtvR/+NuCVhfufAq9fxO8BMFC22Wu0rxOwGVWxtCMvZVLmhQg==}
     cpu: [arm64]
     os: [linux]
 
-  '@unrs/resolver-binding-linux-arm64-musl@1.7.2':
-    resolution: {integrity: sha512-c8Cg4/h+kQ63pL43wBNaVMmOjXI/X62wQmru51qjfTvI7kmCy5uHTJvK/9LrF0G8Jdx8r34d019P1DVJmhXQpA==}
+  '@rollup/rollup-linux-arm64-musl@4.40.2':
+    resolution: {integrity: sha512-j8CgxvfM0kbnhu4XgjnCWJQyyBOeBI1Zq91Z850aUddUmPeQvuAy6OiMdPS46gNFgy8gN1xkYyLgwLYZG3rBOg==}
     cpu: [arm64]
     os: [linux]
 
-  '@unrs/resolver-binding-linux-ppc64-gnu@1.7.2':
-    resolution: {integrity: sha512-A+lcwRFyrjeJmv3JJvhz5NbcCkLQL6Mk16kHTNm6/aGNc4FwPHPE4DR9DwuCvCnVHvF5IAd9U4VIs/VvVir5lg==}
+  '@rollup/rollup-linux-loongarch64-gnu@4.40.2':
+    resolution: {integrity: sha512-Ybc/1qUampKuRF4tQXc7G7QY9YRyeVSykfK36Y5Qc5dmrIxwFhrOzqaVTNoZygqZ1ZieSWTibfFhQ5qK8jpWxw==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-powerpc64le-gnu@4.40.2':
+    resolution: {integrity: sha512-3FCIrnrt03CCsZqSYAOW/k9n625pjpuMzVfeI+ZBUSDT3MVIFDSPfSUgIl9FqUftxcUXInvFah79hE1c9abD+Q==}
     cpu: [ppc64]
     os: [linux]
 
-  '@unrs/resolver-binding-linux-riscv64-gnu@1.7.2':
-    resolution: {integrity: sha512-hQQ4TJQrSQW8JlPm7tRpXN8OCNP9ez7PajJNjRD1ZTHQAy685OYqPrKjfaMw/8LiHCt8AZ74rfUVHP9vn0N69Q==}
+  '@rollup/rollup-linux-riscv64-gnu@4.40.2':
+    resolution: {integrity: sha512-QNU7BFHEvHMp2ESSY3SozIkBPaPBDTsfVNGx3Xhv+TdvWXFGOSH2NJvhD1zKAT6AyuuErJgbdvaJhYVhVqrWTg==}
     cpu: [riscv64]
     os: [linux]
 
-  '@unrs/resolver-binding-linux-riscv64-musl@1.7.2':
-    resolution: {integrity: sha512-NoAGbiqrxtY8kVooZ24i70CjLDlUFI7nDj3I9y54U94p+3kPxwd2L692YsdLa+cqQ0VoqMWoehDFp21PKRUoIQ==}
+  '@rollup/rollup-linux-riscv64-musl@4.40.2':
+    resolution: {integrity: sha512-5W6vNYkhgfh7URiXTO1E9a0cy4fSgfE4+Hl5agb/U1sa0kjOLMLC1wObxwKxecE17j0URxuTrYZZME4/VH57Hg==}
     cpu: [riscv64]
     os: [linux]
 
-  '@unrs/resolver-binding-linux-s390x-gnu@1.7.2':
-    resolution: {integrity: sha512-KaZByo8xuQZbUhhreBTW+yUnOIHUsv04P8lKjQ5otiGoSJ17ISGYArc+4vKdLEpGaLbemGzr4ZeUbYQQsLWFjA==}
+  '@rollup/rollup-linux-s390x-gnu@4.40.2':
+    resolution: {integrity: sha512-B7LKIz+0+p348JoAL4X/YxGx9zOx3sR+o6Hj15Y3aaApNfAshK8+mWZEf759DXfRLeL2vg5LYJBB7DdcleYCoQ==}
     cpu: [s390x]
     os: [linux]
 
-  '@unrs/resolver-binding-linux-x64-gnu@1.7.2':
-    resolution: {integrity: sha512-dEidzJDubxxhUCBJ/SHSMJD/9q7JkyfBMT77Px1npl4xpg9t0POLvnWywSk66BgZS/b2Hy9Y1yFaoMTFJUe9yg==}
+  '@rollup/rollup-linux-x64-gnu@4.40.2':
+    resolution: {integrity: sha512-lG7Xa+BmBNwpjmVUbmyKxdQJ3Q6whHjMjzQplOs5Z+Gj7mxPtWakGHqzMqNER68G67kmCX9qX57aRsW5V0VOng==}
     cpu: [x64]
     os: [linux]
 
-  '@unrs/resolver-binding-linux-x64-musl@1.7.2':
-    resolution: {integrity: sha512-RvP+Ux3wDjmnZDT4XWFfNBRVG0fMsc+yVzNFUqOflnDfZ9OYujv6nkh+GOr+watwrW4wdp6ASfG/e7bkDradsw==}
+  '@rollup/rollup-linux-x64-musl@4.40.2':
+    resolution: {integrity: sha512-tD46wKHd+KJvsmije4bUskNuvWKFcTOIM9tZ/RrmIvcXnbi0YK/cKS9FzFtAm7Oxi2EhV5N2OpfFB348vSQRXA==}
     cpu: [x64]
     os: [linux]
 
-  '@unrs/resolver-binding-wasm32-wasi@1.7.2':
-    resolution: {integrity: sha512-y797JBmO9IsvXVRCKDXOxjyAE4+CcZpla2GSoBQ33TVb3ILXuFnMrbR/QQZoauBYeOFuu4w3ifWLw52sdHGz6g==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-
-  '@unrs/resolver-binding-win32-arm64-msvc@1.7.2':
-    resolution: {integrity: sha512-gtYTh4/VREVSLA+gHrfbWxaMO/00y+34htY7XpioBTy56YN2eBjkPrY1ML1Zys89X3RJDKVaogzwxlM1qU7egg==}
+  '@rollup/rollup-win32-arm64-msvc@4.40.2':
+    resolution: {integrity: sha512-Bjv/HG8RRWLNkXwQQemdsWw4Mg+IJ29LK+bJPW2SCzPKOUaMmPEppQlu/Fqk1d7+DX3V7JbFdbkh/NMmurT6Pg==}
     cpu: [arm64]
     os: [win32]
 
-  '@unrs/resolver-binding-win32-ia32-msvc@1.7.2':
-    resolution: {integrity: sha512-Ywv20XHvHTDRQs12jd3MY8X5C8KLjDbg/jyaal/QLKx3fAShhJyD4blEANInsjxW3P7isHx1Blt56iUDDJO3jg==}
+  '@rollup/rollup-win32-ia32-msvc@4.40.2':
+    resolution: {integrity: sha512-dt1llVSGEsGKvzeIO76HToiYPNPYPkmjhMHhP00T9S4rDern8P2ZWvWAQUEJ+R1UdMWJ/42i/QqJ2WV765GZcA==}
     cpu: [ia32]
     os: [win32]
 
-  '@unrs/resolver-binding-win32-x64-msvc@1.7.2':
-    resolution: {integrity: sha512-friS8NEQfHaDbkThxopGk+LuE5v3iY0StruifjQEt7SLbA46OnfgMO15sOTkbpJkol6RB+1l1TYPXh0sCddpvA==}
+  '@rollup/rollup-win32-x64-msvc@4.40.2':
+    resolution: {integrity: sha512-bwspbWB04XJpeElvsp+DCylKfF4trJDa2Y9Go8O6A7YLX2LIKGcNK/CYImJN6ZP4DcuOHB4Utl3iCbnR62DudA==}
     cpu: [x64]
     os: [win32]
 
-  '@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
+  '@rtsao/scc@1.1.0':
+    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
-  '@vitejs/plugin-react@4.5.1':
-    resolution: {integrity: sha512-uPZBqSI0YD4lpkIru6M35sIfylLGTyhGHvDZbNLuMA73lMlwJKz5xweH7FajfcCAc2HnINciejA9qTz0dr0M7A==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      vite: ^4.2.0 || ^5.0.0 || ^6.0.0
+  '@shikijs/core@2.5.0':
+    resolution: {integrity: sha512-uu/8RExTKtavlpH7XqnVYBrfBkUc20ngXiX9NSrBhOVZYv/7XQRKUyhtkeflY5QsxC0GbJThCerruZfsUaSldg==}
 
-  '@vitejs/plugin-vue@5.2.4':
-    resolution: {integrity: sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    peerDependencies:
-      vite: ^5.0.0 || ^6.0.0
-      vue: ^3.2.25
+  '@shikijs/engine-javascript@2.5.0':
+    resolution: {integrity: sha512-VjnOpnQf8WuCEZtNUdjjwGUbtAVKuZkVQ/5cHy/tojVVRIRtlWMYVjyWhxOmIq05AlSOv72z7hRNRGVBgQOl0w==}
 
-  '@vitest/browser@3.1.3':
-    resolution: {integrity: sha512-Dgyez9LbHJHl9ObZPo5mu4zohWLo7SMv8zRWclMF+dxhQjmOtEP0raEX13ac5ygcvihNoQPBZXdya5LMSbcCDQ==}
-    peerDependencies:
-      playwright: '*'
-      safaridriver: '*'
-      vitest: 3.1.3
-      webdriverio: ^7.0.0 || ^8.0.0 || ^9.0.0
-    peerDependenciesMeta:
-      playwright:
-        optional: true
-      safaridriver:
-        optional: true
-      webdriverio:
-        optional: true
+  '@shikijs/engine-oniguruma@2.5.0':
+    resolution: {integrity: sha512-pGd1wRATzbo/uatrCIILlAdFVKdxImWJGQ5rFiB5VZi2ve5xj3Ax9jny8QvkaV93btQEwR/rSz5ERFpC5mKNIw==}
 
-  '@vitest/coverage-v8@3.0.8':
-    resolution: {integrity: sha512-y7SAKsQirsEJ2F8bulBck4DoluhI2EEgTimHd6EEUgJBGKy9tC25cpywh1MH4FvDGoG2Unt7+asVd1kj4qOSAw==}
-    peerDependencies:
-      '@vitest/browser': 3.0.8
-      vitest: 3.0.8
-    peerDependenciesMeta:
-      '@vitest/browser':
-        optional: true
+  '@shikijs/langs@2.5.0':
+    resolution: {integrity: sha512-Qfrrt5OsNH5R+5tJ/3uYBBZv3SuGmnRPejV9IlIbFH3HTGLDlkqgHymAlzklVmKBjAaVmkPkyikAV/sQ1wSL+w==}
 
-  '@vitest/expect@3.1.3':
-    resolution: {integrity: sha512-7FTQQuuLKmN1Ig/h+h/GO+44Q1IlglPlR2es4ab7Yvfx+Uk5xsv+Ykk+MEt/M2Yn/xGmzaLKxGw2lgy2bwuYqg==}
+  '@shikijs/themes@2.5.0':
+    resolution: {integrity: sha512-wGrk+R8tJnO0VMzmUExHR+QdSaPUl/NKs+a4cQQRWyoc3YFbUzuLEi/KWK1hj+8BfHRKm2jNhhJck1dfstJpiw==}
 
-  '@vitest/mocker@3.1.3':
-    resolution: {integrity: sha512-PJbLjonJK82uCWHjzgBJZuR7zmAOrSvKk1QBxrennDIgtH4uK0TB1PvYmc0XBCigxxtiAVPfWtAdy4lpz8SQGQ==}
-    peerDependencies:
-      msw: ^2.4.9
-      vite: ^5.0.0 || ^6.0.0
-    peerDependenciesMeta:
-      msw:
-        optional: true
-      vite:
-        optional: true
+  '@shikijs/transformers@2.5.0':
+    resolution: {integrity: sha512-SI494W5X60CaUwgi8u4q4m4s3YAFSxln3tzNjOSYqq54wlVgz0/NbbXEb3mdLbqMBztcmS7bVTaEd2w0qMmfeg==}
 
-  '@vitest/pretty-format@3.1.3':
-    resolution: {integrity: sha512-i6FDiBeJUGLDKADw2Gb01UtUNb12yyXAqC/mmRWuYl+m/U9GS7s8us5ONmGkGpUUo7/iAYzI2ePVfOZTYvUifA==}
+  '@shikijs/types@2.5.0':
+    resolution: {integrity: sha512-ygl5yhxki9ZLNuNpPitBWvcy9fsSKKaRuO4BAlMyagszQidxcpLAr0qiW/q43DtSIDxO6hEbtYLiFZNXO/hdGw==}
 
-  '@vitest/runner@3.1.3':
-    resolution: {integrity: sha512-Tae+ogtlNfFei5DggOsSUvkIaSuVywujMj6HzR97AHK6XK8i3BuVyIifWAm/sE3a15lF5RH9yQIrbXYuo0IFyA==}
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
 
-  '@vitest/snapshot@3.1.3':
-    resolution: {integrity: sha512-XVa5OPNTYUsyqG9skuUkFzAeFnEzDp8hQu7kZ0N25B1+6KjGm4hWLtURyBbsIAOekfWQ7Wuz/N/XXzgYO3deWQ==}
+  '@sinclair/typebox@0.27.8':
+    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
 
-  '@vitest/spy@3.1.3':
-    resolution: {integrity: sha512-x6w+ctOEmEXdWaa6TO4ilb7l9DxPR5bwEb6hILKuxfU1NqWT2mpJD9NJN7t3OTfxmVlOMrvtoFJGdgyzZ605lQ==}
+  '@swc/counter@0.1.3':
+    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
 
-  '@vitest/utils@3.1.3':
-    resolution: {integrity: sha512-2Ltrpht4OmHO9+c/nmHtF09HWiyWdworqnHIwjfvDyWjuwKbdkcS9AnhsDn+8E2RM4x++foD1/tNuLPVvWG1Rg==}
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
-  '@vitest/web-worker@3.1.4':
-    resolution: {integrity: sha512-Bm2r4y3Gpl81qIz/7lvUy43fhGRiBqXOgfE/FzQtfRKKDfpsRu7ZfbcGFHe20oyE9fb55we1IXRSq1lsBwB1hA==}
-    peerDependencies:
-      vitest: 3.1.4
+  '@swc/helpers@0.5.5':
+    resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
 
-  '@volar/language-core@2.4.14':
-    resolution: {integrity: sha512-X6beusV0DvuVseaOEy7GoagS4rYHgDHnTrdOj5jeUb49fW5ceQyP9Ej5rBhqgz2wJggl+2fDbbojq1XKaxDi6w==}
+  '@tailwindcss/node@4.1.8':
+    resolution: {integrity: sha512-OWwBsbC9BFAJelmnNcrKuf+bka2ZxCE2A4Ft53Tkg4uoiE67r/PMEYwCsourC26E+kmxfwE0hVzMdxqeW+xu7Q==}
 
-  '@volar/source-map@2.4.14':
-    resolution: {integrity: sha512-5TeKKMh7Sfxo8021cJfmBzcjfY1SsXsPMMjMvjY7ivesdnybqqS+GxGAoXHAOUawQTwtdUxgP65Im+dEmvWtYQ==}
+  '@tailwindcss/oxide-android-arm64@4.1.8':
+    resolution: {integrity: sha512-Fbz7qni62uKYceWYvUjRqhGfZKwhZDQhlrJKGtnZfuNtHFqa8wmr+Wn74CTWERiW2hn3mN5gTpOoxWKk0jRxjg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
 
-  '@volar/typescript@2.4.14':
-    resolution: {integrity: sha512-p8Z6f/bZM3/HyCdRNFZOEEzts51uV8WHeN8Tnfnm2EBv6FDB2TQLzfVx7aJvnl8ofKAOnS64B2O8bImBFaauRw==}
+  '@tailwindcss/oxide-darwin-arm64@4.1.8':
+    resolution: {integrity: sha512-RdRvedGsT0vwVVDztvyXhKpsU2ark/BjgG0huo4+2BluxdXo8NDgzl77qh0T1nUxmM11eXwR8jA39ibvSTbi7A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
 
-  '@vue/compiler-core@3.5.14':
-    resolution: {integrity: sha512-k7qMHMbKvoCXIxPhquKQVw3Twid3Kg4s7+oYURxLGRd56LiuHJVrvFKI4fm2AM3c8apqODPfVJGoh8nePbXMRA==}
+  '@tailwindcss/oxide-darwin-x64@4.1.8':
+    resolution: {integrity: sha512-t6PgxjEMLp5Ovf7uMb2OFmb3kqzVTPPakWpBIFzppk4JE4ix0yEtbtSjPbU8+PZETpaYMtXvss2Sdkx8Vs4XRw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
 
-  '@vue/compiler-dom@3.5.14':
-    resolution: {integrity: sha512-1aOCSqxGOea5I80U2hQJvXYpPm/aXo95xL/m/mMhgyPUsKe9jhjwWpziNAw7tYRnbz1I61rd9Mld4W9KmmRoug==}
+  '@tailwindcss/oxide-freebsd-x64@4.1.8':
+    resolution: {integrity: sha512-g8C8eGEyhHTqwPStSwZNSrOlyx0bhK/V/+zX0Y+n7DoRUzyS8eMbVshVOLJTDDC+Qn9IJnilYbIKzpB9n4aBsg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
 
-  '@vue/compiler-sfc@3.5.14':
-    resolution: {integrity: sha512-9T6m/9mMr81Lj58JpzsiSIjBgv2LiVoWjIVa7kuXHICUi8LiDSIotMpPRXYJsXKqyARrzjT24NAwttrMnMaCXA==}
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.8':
+    resolution: {integrity: sha512-Jmzr3FA4S2tHhaC6yCjac3rGf7hG9R6Gf2z9i9JFcuyy0u79HfQsh/thifbYTF2ic82KJovKKkIB6Z9TdNhCXQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
 
-  '@vue/compiler-ssr@3.5.14':
-    resolution: {integrity: sha512-Y0G7PcBxr1yllnHuS/NxNCSPWnRGH4Ogrp0tsLA5QemDZuJLs99YjAKQ7KqkHE0vCg4QTKlQzXLKCMF7WPSl7Q==}
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.8':
+    resolution: {integrity: sha512-qq7jXtO1+UEtCmCeBBIRDrPFIVI4ilEQ97qgBGdwXAARrUqSn/L9fUrkb1XP/mvVtoVeR2bt/0L77xx53bPZ/Q==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
 
-  '@vue/compiler-vue2@2.7.16':
-    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.8':
+    resolution: {integrity: sha512-O6b8QesPbJCRshsNApsOIpzKt3ztG35gfX9tEf4arD7mwNinsoCKxkj8TgEE0YRjmjtO3r9FlJnT/ENd9EVefQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
 
-  '@vue/devtools-api@7.7.6':
-    resolution: {integrity: sha512-b2Xx0KvXZObePpXPYHvBRRJLDQn5nhKjXh7vUhMEtWxz1AYNFOVIsh5+HLP8xDGL7sy+Q7hXeUxPHB/KgbtsPw==}
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.8':
+    resolution: {integrity: sha512-32iEXX/pXwikshNOGnERAFwFSfiltmijMIAbUhnNyjFr3tmWmMJWQKU2vNcFX0DACSXJ3ZWcSkzNbaKTdngH6g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
 
-  '@vue/devtools-kit@7.7.6':
-    resolution: {integrity: sha512-geu7ds7tem2Y7Wz+WgbnbZ6T5eadOvozHZ23Atk/8tksHMFOFylKi1xgGlQlVn0wlkEf4hu+vd5ctj1G4kFtwA==}
+  '@tailwindcss/oxide-linux-x64-musl@4.1.8':
+    resolution: {integrity: sha512-s+VSSD+TfZeMEsCaFaHTaY5YNj3Dri8rST09gMvYQKwPphacRG7wbuQ5ZJMIJXN/puxPcg/nU+ucvWguPpvBDg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
 
-  '@vue/devtools-shared@7.7.6':
-    resolution: {integrity: sha512-yFEgJZ/WblEsojQQceuyK6FzpFDx4kqrz2ohInxNj5/DnhoX023upTv4OD6lNPLAA5LLkbwPVb10o/7b+Y4FVA==}
+  '@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
 
-  '@vue/eslint-config-prettier@8.0.0':
-    resolution: {integrity: sha512-55dPqtC4PM/yBjhAr+yEw6+7KzzdkBuLmnhBrDfp4I48+wy+Giqqj9yUr5T2uD/BkBROjjmqnLZmXRdOx/VtQg==}
-    peerDependencies:
-      eslint: '>= 8.0.0'
-      prettier: '>= 3.0.0'
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.8':
+    resolution: {integrity: sha512-7GmYk1n28teDHUjPlIx4Z6Z4hHEgvP5ZW2QS9ygnDAdI/myh3HTHjDqtSqgu1BpRoI4OiLx+fThAyA1JePoENA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
 
-  '@vue/eslint-config-typescript@12.0.0':
-    resolution: {integrity: sha512-StxLFet2Qe97T8+7L8pGlhYBBr8Eg05LPuTDVopQV6il+SK6qqom59BA/rcFipUef2jD8P2X44Vd8tMFytfvlg==}
-    engines: {node: ^14.17.0 || >=16.0.0}
+  '@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:
-      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
-      eslint-plugin-vue: ^9.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      vite: ^5.2.0 || ^6
 
-  '@vue/language-core@2.2.10':
-    resolution: {integrity: sha512-+yNoYx6XIKuAO8Mqh1vGytu8jkFEOH5C8iOv3i8Z/65A7x9iAOXA97Q+PqZ3nlm2lxf5rOJuIGI/wDtx/riNYw==}
+  '@testing-library/dom@10.4.0':
+    resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
+    engines: {node: '>=18'}
+
+  '@testing-library/user-event@14.6.1':
+    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
+    engines: {node: '>=12', npm: '>=6'}
     peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      '@testing-library/dom': '>=7.21.4'
 
-  '@vue/reactivity@3.5.14':
-    resolution: {integrity: sha512-7cK1Hp343Fu/SUCCO52vCabjvsYu7ZkOqyYu7bXV9P2yyfjUMUXHZafEbq244sP7gf+EZEz+77QixBTuEqkQQw==}
+  '@trysound/sax@0.2.0':
+    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
+    engines: {node: '>=10.13.0'}
 
-  '@vue/runtime-core@3.5.14':
-    resolution: {integrity: sha512-w9JWEANwHXNgieAhxPpEpJa+0V5G0hz3NmjAZwlOebtfKyp2hKxKF0+qSh0Xs6/PhfGihuSdqMprMVcQU/E6ag==}
+  '@tybys/wasm-util@0.9.0':
+    resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
 
-  '@vue/runtime-dom@3.5.14':
-    resolution: {integrity: sha512-lCfR++IakeI35TVR80QgOelsUIdcKjd65rWAMfdSlCYnaEY5t3hYwru7vvcWaqmrK+LpI7ZDDYiGU5V3xjMacw==}
+  '@types/aria-query@5.0.4':
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
 
-  '@vue/server-renderer@3.5.14':
-    resolution: {integrity: sha512-Rf/ISLqokIvcySIYnv3tNWq40PLpNLDLSJwwVWzG6MNtyIhfbcrAxo5ZL9nARJhqjZyWWa40oRb2IDuejeuv6w==}
-    peerDependencies:
-      vue: 3.5.14
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
-  '@vue/shared@3.5.14':
-    resolution: {integrity: sha512-oXTwNxVfc9EtP1zzXAlSlgARLXNC84frFYkS0HHz0h3E4WZSP9sywqjqzGCP9Y34M8ipNmd380pVgmMuwELDyQ==}
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
 
-  '@vue/test-utils@2.4.6':
-    resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
 
-  '@vueuse/core@12.8.2':
-    resolution: {integrity: sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==}
+  '@types/babel__traverse@7.20.7':
+    resolution: {integrity: sha512-dkO5fhS7+/oos4ciWxyEyjWe48zmG6wbCheo/G2ZnHx4fs3EU6YC6UM8rk56gAjNJ9P3MTH2jo5jb92/K6wbng==}
 
-  '@vueuse/integrations@12.8.2':
-    resolution: {integrity: sha512-fbGYivgK5uBTRt7p5F3zy6VrETlV9RtZjBqd1/HxGdjdckBgBM4ugP8LHpjolqTj14TXTxSK1ZfgPbHYyGuH7g==}
-    peerDependencies:
-      async-validator: ^4
-      axios: ^1
-      change-case: ^5
-      drauu: ^0.4
-      focus-trap: ^7
-      fuse.js: ^7
-      idb-keyval: ^6
-      jwt-decode: ^4
-      nprogress: ^0.2
-      qrcode: ^1.5
-      sortablejs: ^1
-      universal-cookie: ^7
-    peerDependenciesMeta:
-      async-validator:
-        optional: true
-      axios:
-        optional: true
-      change-case:
-        optional: true
-      drauu:
-        optional: true
-      focus-trap:
-        optional: true
-      fuse.js:
-        optional: true
-      idb-keyval:
-        optional: true
-      jwt-decode:
-        optional: true
-      nprogress:
-        optional: true
-      qrcode:
-        optional: true
-      sortablejs:
-        optional: true
-      universal-cookie:
-        optional: true
-
-  '@vueuse/metadata@12.8.2':
-    resolution: {integrity: sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==}
-
-  '@vueuse/shared@12.8.2':
-    resolution: {integrity: sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==}
+  '@types/cssnano@5.1.3':
+    resolution: {integrity: sha512-BahAZSSvuFXyhgJiwQgsfsNlStE9K/ULGL+YEzK4mmL2Vf02Pjl2yZs+KmbkAg3MxkC9WwMuFwuwnwvrg7CqvQ==}
+    deprecated: This is a stub types definition. cssnano provides its own type definitions, so you do not need this installed.
 
-  '@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:
-      eslint: '>=8.0.0'
-      typescript: '>=4.0.0'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+  '@types/d3-array@3.2.1':
+    resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
 
-  '@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:
-      prettier: '>=2.0.0'
-      typescript: '>=4.0.0'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
 
-  '@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:
-      stylelint: '>=14.0.0'
-      typescript: '>=4.0.0'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
 
-  '@yarnpkg/lockfile@1.1.0':
-    resolution: {integrity: sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==}
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
 
-  '@yarnpkg/parsers@3.0.2':
-    resolution: {integrity: sha512-/HcYgtUSiJiot/XWGLOlGxPYUG65+/31V8oqk17vZLW1xlCoR4PampyePljOxY2n8/3jz9+tIFzICsyGujJZoA==}
-    engines: {node: '>=18.12.0'}
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
 
-  '@zkochan/js-yaml@0.0.7':
-    resolution: {integrity: sha512-nrUSn7hzt7J6JWgWGz78ZYI8wj+gdIJdk0Ynjpp8l+trkn58Uqsf6RYrYkEK+3X18EX+TNdtJI0WxAtc+L84SQ==}
-    hasBin: true
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
 
-  abbrev@2.0.0:
-    resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+  '@types/d3-shape@3.1.7':
+    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
 
-  accepts@2.0.0:
-    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
-    engines: {node: '>= 0.6'}
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
 
-  acorn-jsx@5.3.2:
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
 
-  acorn@8.14.1:
-    resolution: {integrity: sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
+  '@types/estree@1.0.7':
+    resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
 
-  agent-base@7.1.3:
-    resolution: {integrity: sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==}
-    engines: {node: '>= 14'}
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
-  ajv@6.12.6:
-    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+  '@types/history@4.7.11':
+    resolution: {integrity: sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==}
 
-  ajv@8.17.1:
-    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
-  algoliasearch@5.25.0:
-    resolution: {integrity: sha512-n73BVorL4HIwKlfJKb4SEzAYkR3Buwfwbh+MYxg2mloFph2fFGV58E90QTzdbfzWrLn4HE5Czx/WTjI8fcHaMg==}
-    engines: {node: '>= 14.0.0'}
+  '@types/json5@0.0.29':
+    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
-  alien-signals@1.0.13:
-    resolution: {integrity: sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==}
+  '@types/linkify-it@5.0.0':
+    resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
 
-  ansi-colors@4.1.3:
-    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
-    engines: {node: '>=6'}
+  '@types/markdown-it@14.1.2':
+    resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
 
-  ansi-regex@5.0.1:
-    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
-    engines: {node: '>=8'}
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
-  ansi-regex@6.1.0:
-    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
-    engines: {node: '>=12'}
+  '@types/mdurl@2.0.0':
+    resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
 
-  ansi-styles@4.3.0:
-    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
-    engines: {node: '>=8'}
+  '@types/minimist@1.2.5':
+    resolution: {integrity: sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==}
 
-  ansi-styles@5.2.0:
-    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
-    engines: {node: '>=10'}
+  '@types/node@12.20.55':
+    resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==}
 
-  ansi-styles@6.2.1:
-    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
-    engines: {node: '>=12'}
+  '@types/node@20.17.50':
+    resolution: {integrity: sha512-Mxiq0ULv/zo1OzOhwPqOA13I81CV/W3nvd3ChtQZRT5Cwz3cr0FKo/wMSsbTqL3EXpaBAEQhva2B8ByRkOIh9A==}
 
-  argparse@1.0.10:
-    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
+  '@types/node@22.15.30':
+    resolution: {integrity: sha512-6Q7lr06bEHdlfplU6YRbgG1SFBdlsfNC4/lX+SkhiTs0cpJkOElmWls8PxDFv4yY/xKb8Y6SO0OmSX4wgqTZbA==}
 
-  argparse@2.0.1:
-    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+  '@types/node@24.0.3':
+    resolution: {integrity: sha512-R4I/kzCYAdRLzfiCabn9hxWfbuHS573x+r0dJMkkzThEa7pbrcDWK+9zu3e7aBOouf+rQAciqPFMnxwr0aWgKg==}
 
-  aria-query@5.3.0:
-    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+  '@types/normalize-package-data@2.4.4':
+    resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
 
-  aria-query@5.3.2:
-    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
-    engines: {node: '>= 0.4'}
+  '@types/parse-json@4.0.2':
+    resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
 
-  array-buffer-byte-length@1.0.2:
-    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
-    engines: {node: '>= 0.4'}
+  '@types/prop-types@15.7.15':
+    resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
 
-  array-includes@3.1.8:
-    resolution: {integrity: sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==}
-    engines: {node: '>= 0.4'}
+  '@types/react-dom@18.3.7':
+    resolution: {integrity: sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==}
+    peerDependencies:
+      '@types/react': ^18.0.0
 
-  array-union@2.1.0:
-    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
-    engines: {node: '>=8'}
+  '@types/react-dom@19.1.5':
+    resolution: {integrity: sha512-CMCjrWucUBZvohgZxkjd6S9h0nZxXjzus6yDfUb+xLxYM7VvjKNH1tQrE9GWLql1XoOP4/Ds3bwFqShHUYraGg==}
+    peerDependencies:
+      '@types/react': ^19.0.0
 
-  array.prototype.findlast@1.2.5:
-    resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
-    engines: {node: '>= 0.4'}
+  '@types/react-router-dom@5.3.3':
+    resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==}
 
-  array.prototype.findlastindex@1.2.6:
-    resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
-    engines: {node: '>= 0.4'}
+  '@types/react-router@5.1.20':
+    resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==}
 
-  array.prototype.flat@1.3.3:
-    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
-    engines: {node: '>= 0.4'}
+  '@types/react@18.3.23':
+    resolution: {integrity: sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==}
 
-  array.prototype.flatmap@1.3.3:
-    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
-    engines: {node: '>= 0.4'}
+  '@types/react@19.1.5':
+    resolution: {integrity: sha512-piErsCVVbpMMT2r7wbawdZsq4xMvIAhQuac2gedQHysu1TZYEigE6pnFfgZT+/jQnrRuF5r+SHzuehFjfRjr4g==}
 
-  array.prototype.tosorted@1.1.4:
-    resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
-    engines: {node: '>= 0.4'}
+  '@types/resolve@1.20.2':
+    resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
-  arraybuffer.prototype.slice@1.0.4:
-    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
-    engines: {node: '>= 0.4'}
+  '@types/semver@7.7.0':
+    resolution: {integrity: sha512-k107IF4+Xr7UHjwDc7Cfd6PRQfbdkiRabXGRjo07b4WyPahFBZCZ1sE+BNxYIJPPg73UkfOsVOLwqVc/6ETrIA==}
 
-  arrify@1.0.1:
-    resolution: {integrity: sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==}
-    engines: {node: '>=0.10.0'}
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
-  asn1.js@4.10.1:
-    resolution: {integrity: sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==}
+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
 
-  assertion-error@2.0.1:
-    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
-    engines: {node: '>=12'}
+  '@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}
+    peerDependencies:
+      '@typescript-eslint/parser': ^5.0.0
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  ast-types-flow@0.0.8:
-    resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
+  '@typescript-eslint/eslint-plugin@6.21.0':
+    resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  astral-regex@2.0.0:
-    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
-    engines: {node: '>=8'}
+  '@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}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.33.1
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
 
-  async-function@1.0.0:
-    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
-    engines: {node: '>= 0.4'}
+  '@typescript-eslint/experimental-utils@5.62.0':
+    resolution: {integrity: sha512-RTXpeB3eMkpoclG3ZHft6vG/Z30azNHuqY6wKPBHlVMZFuEvrtlEDe8gMqDb+SO+9hjC/pLekeSCryf9vMZlCw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  asynckit@0.4.0:
-    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+  '@typescript-eslint/parser@5.62.0':
+    resolution: {integrity: sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  autoprefixer@10.4.21:
-    resolution: {integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
+  '@typescript-eslint/parser@6.21.0':
+    resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
-      postcss: ^8.1.0
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  available-typed-arrays@1.0.7:
-    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
-    engines: {node: '>= 0.4'}
+  '@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
+      typescript: '>=4.8.4 <5.9.0'
 
-  await-semaphore@0.1.3:
-    resolution: {integrity: sha512-d1W2aNSYcz/sxYO4pMGX9vq65qOTu0P800epMud+6cYYX0QcT7zyqcxec3VWzpgvdXo57UWmVbZpLMjX2m1I7Q==}
+  '@typescript-eslint/project-service@8.33.1':
+    resolution: {integrity: sha512-DZR0efeNklDIHHGRpMpR5gJITQpu6tLr9lDJnKdONTC7vvzOlLAG/wcfxcdxEWrbiZApcoBCzXqU/Z458Za5Iw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <5.9.0'
 
-  axe-core@4.10.3:
-    resolution: {integrity: sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==}
-    engines: {node: '>=4'}
+  '@typescript-eslint/scope-manager@5.62.0':
+    resolution: {integrity: sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  axios@0.26.1:
-    resolution: {integrity: sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==}
+  '@typescript-eslint/scope-manager@6.21.0':
+    resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
 
-  axios@1.9.0:
-    resolution: {integrity: sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==}
+  '@typescript-eslint/scope-manager@8.33.1':
+    resolution: {integrity: sha512-dM4UBtgmzHR9bS0Rv09JST0RcHYearoEoo3pG5B6GoTR9XcyeqX87FEhPo+5kTvVfKCvfHaHrcgeJQc6mrDKrA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  axobject-query@4.1.0:
-    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
-    engines: {node: '>= 0.4'}
+  '@typescript-eslint/tsconfig-utils@8.33.1':
+    resolution: {integrity: sha512-STAQsGYbHCF0/e+ShUQ4EatXQ7ceh3fBCXkNU7/MZVKulrlq1usH7t2FhxvCpuCi5O5oi1vmVaAjrGeL71OK1g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <5.9.0'
 
-  balanced-match@1.0.2:
-    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+  '@typescript-eslint/type-utils@5.62.0':
+    resolution: {integrity: sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '*'
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  balanced-match@2.0.0:
-    resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
+  '@typescript-eslint/type-utils@6.21.0':
+    resolution: {integrity: sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  base64-js@1.5.1:
-    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+  '@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}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
 
-  base64url@3.0.1:
-    resolution: {integrity: sha512-ir1UPr3dkwexU7FdV8qBBbNDRUhMmIekYMFZfi+C/sLNnRESKPl23nB9b2pltqfOQNnGzsDdId90AEtG5tCx4A==}
-    engines: {node: '>=6.0.0'}
+  '@typescript-eslint/types@5.62.0':
+    resolution: {integrity: sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  better-path-resolve@1.0.0:
-    resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==}
-    engines: {node: '>=4'}
+  '@typescript-eslint/types@6.21.0':
+    resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
 
-  birpc@2.3.0:
-    resolution: {integrity: sha512-ijbtkn/F3Pvzb6jHypHRyve2QApOCZDR25D/VnkY2G/lBNcXCTsnsCxgY4k4PkVB7zfwzYbY3O9Lcqe3xufS5g==}
+  '@typescript-eslint/types@8.33.1':
+    resolution: {integrity: sha512-xid1WfizGhy/TKMTwhtVOgalHwPtV8T32MS9MaH50Cwvz6x6YqRIPdD2WvW0XaqOzTV9p5xdLY0h/ZusU5Lokg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  bl@4.1.0:
-    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
+  '@typescript-eslint/typescript-estree@5.62.0':
+    resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  bn.js@4.12.2:
-    resolution: {integrity: sha512-n4DSx829VRTRByMRGdjQ9iqsN0Bh4OolPsFnaZBLcbi8iXcB+kJ9s7EnRt4wILZNV3kPLHkRVfOc/HvhC3ovDw==}
+  '@typescript-eslint/typescript-estree@6.21.0':
+    resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  bn.js@5.2.2:
-    resolution: {integrity: sha512-v2YAxEmKaBLahNwE1mjp4WON6huMNeuDvagFZW+ASCuA/ku0bXR9hSMw0XpiqMoA3+rmnyck/tPRSFQkoC9Cuw==}
+  '@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}
+    peerDependencies:
+      typescript: '>=4.8.4 <5.9.0'
 
-  body-parser@2.2.0:
-    resolution: {integrity: sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==}
-    engines: {node: '>=18'}
+  '@typescript-eslint/utils@5.62.0':
+    resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  boolbase@1.0.0:
-    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+  '@typescript-eslint/utils@6.21.0':
+    resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
 
-  brace-expansion@1.1.11:
-    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
+  '@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}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.9.0'
 
-  brace-expansion@2.0.1:
-    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+  '@typescript-eslint/visitor-keys@5.62.0':
+    resolution: {integrity: sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  braces@3.0.3:
-    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
-    engines: {node: '>=8'}
+  '@typescript-eslint/visitor-keys@6.21.0':
+    resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
+    engines: {node: ^16.0.0 || >=18.0.0}
 
-  brorand@1.1.0:
-    resolution: {integrity: sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w==}
+  '@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}
 
-  browserify-aes@1.2.0:
-    resolution: {integrity: sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==}
+  '@ungap/structured-clone@1.3.0':
+    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
-  browserify-cipher@1.0.1:
-    resolution: {integrity: sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==}
+  '@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
 
-  browserify-des@1.0.2:
-    resolution: {integrity: sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==}
+  '@vitejs/plugin-react@4.5.1':
+    resolution: {integrity: sha512-uPZBqSI0YD4lpkIru6M35sIfylLGTyhGHvDZbNLuMA73lMlwJKz5xweH7FajfcCAc2HnINciejA9qTz0dr0M7A==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.2.0 || ^5.0.0 || ^6.0.0
 
-  browserify-rsa@4.1.1:
-    resolution: {integrity: sha512-YBjSAiTqM04ZVei6sXighu679a3SqWORA3qZTEqZImnlkDIFtKc6pNutpjyZ8RJTjQtuYfeetkxM11GwoYXMIQ==}
-    engines: {node: '>= 0.10'}
+  '@vitejs/plugin-vue@5.2.4':
+    resolution: {integrity: sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0
+      vue: ^3.2.25
 
-  browserify-sign@4.2.3:
-    resolution: {integrity: sha512-JWCZW6SKhfhjJxO8Tyiiy+XYB7cqd2S5/+WeYHsKdNKFlCBhKbblba1A/HN/90YwtxKc8tCErjffZl++UNmGiw==}
-    engines: {node: '>= 0.12'}
+  '@vitest/browser@3.1.3':
+    resolution: {integrity: sha512-Dgyez9LbHJHl9ObZPo5mu4zohWLo7SMv8zRWclMF+dxhQjmOtEP0raEX13ac5ygcvihNoQPBZXdya5LMSbcCDQ==}
+    peerDependencies:
+      playwright: '*'
+      safaridriver: '*'
+      vitest: 3.1.3
+      webdriverio: ^7.0.0 || ^8.0.0 || ^9.0.0
+    peerDependenciesMeta:
+      playwright:
+        optional: true
+      safaridriver:
+        optional: true
+      webdriverio:
+        optional: true
 
-  browserslist@4.24.5:
-    resolution: {integrity: sha512-FDToo4Wo82hIdgc1CQ+NQD0hEhmpPjrZ3hiUgwgOG6IuTdlpr8jdjyG24P6cNP1yJpTLzS5OcGgSw0xmDU1/Tw==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
+  '@vitest/coverage-v8@3.0.8':
+    resolution: {integrity: sha512-y7SAKsQirsEJ2F8bulBck4DoluhI2EEgTimHd6EEUgJBGKy9tC25cpywh1MH4FvDGoG2Unt7+asVd1kj4qOSAw==}
+    peerDependencies:
+      '@vitest/browser': 3.0.8
+      vitest: 3.0.8
+    peerDependenciesMeta:
+      '@vitest/browser':
+        optional: true
 
-  buffer-from@1.1.2:
-    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+  '@vitest/expect@3.1.3':
+    resolution: {integrity: sha512-7FTQQuuLKmN1Ig/h+h/GO+44Q1IlglPlR2es4ab7Yvfx+Uk5xsv+Ykk+MEt/M2Yn/xGmzaLKxGw2lgy2bwuYqg==}
 
-  buffer-xor@1.0.3:
-    resolution: {integrity: sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ==}
+  '@vitest/mocker@3.1.3':
+    resolution: {integrity: sha512-PJbLjonJK82uCWHjzgBJZuR7zmAOrSvKk1QBxrennDIgtH4uK0TB1PvYmc0XBCigxxtiAVPfWtAdy4lpz8SQGQ==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^5.0.0 || ^6.0.0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
 
-  buffer@5.7.1:
-    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+  '@vitest/pretty-format@3.1.3':
+    resolution: {integrity: sha512-i6FDiBeJUGLDKADw2Gb01UtUNb12yyXAqC/mmRWuYl+m/U9GS7s8us5ONmGkGpUUo7/iAYzI2ePVfOZTYvUifA==}
 
-  buffer@6.0.3:
-    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+  '@vitest/runner@3.1.3':
+    resolution: {integrity: sha512-Tae+ogtlNfFei5DggOsSUvkIaSuVywujMj6HzR97AHK6XK8i3BuVyIifWAm/sE3a15lF5RH9yQIrbXYuo0IFyA==}
 
-  busboy@1.6.0:
-    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
-    engines: {node: '>=10.16.0'}
+  '@vitest/snapshot@3.1.3':
+    resolution: {integrity: sha512-XVa5OPNTYUsyqG9skuUkFzAeFnEzDp8hQu7kZ0N25B1+6KjGm4hWLtURyBbsIAOekfWQ7Wuz/N/XXzgYO3deWQ==}
 
-  bytes@3.1.2:
-    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
-    engines: {node: '>= 0.8'}
+  '@vitest/spy@3.1.3':
+    resolution: {integrity: sha512-x6w+ctOEmEXdWaa6TO4ilb7l9DxPR5bwEb6hILKuxfU1NqWT2mpJD9NJN7t3OTfxmVlOMrvtoFJGdgyzZ605lQ==}
 
-  cac@6.7.14:
-    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
-    engines: {node: '>=8'}
+  '@vitest/utils@3.1.3':
+    resolution: {integrity: sha512-2Ltrpht4OmHO9+c/nmHtF09HWiyWdworqnHIwjfvDyWjuwKbdkcS9AnhsDn+8E2RM4x++foD1/tNuLPVvWG1Rg==}
 
-  call-bind-apply-helpers@1.0.2:
-    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
-    engines: {node: '>= 0.4'}
+  '@vitest/web-worker@3.1.4':
+    resolution: {integrity: sha512-Bm2r4y3Gpl81qIz/7lvUy43fhGRiBqXOgfE/FzQtfRKKDfpsRu7ZfbcGFHe20oyE9fb55we1IXRSq1lsBwB1hA==}
+    peerDependencies:
+      vitest: 3.1.4
 
-  call-bind@1.0.8:
-    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
-    engines: {node: '>= 0.4'}
+  '@volar/language-core@2.4.14':
+    resolution: {integrity: sha512-X6beusV0DvuVseaOEy7GoagS4rYHgDHnTrdOj5jeUb49fW5ceQyP9Ej5rBhqgz2wJggl+2fDbbojq1XKaxDi6w==}
 
-  call-bound@1.0.4:
-    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
-    engines: {node: '>= 0.4'}
+  '@volar/source-map@2.4.14':
+    resolution: {integrity: sha512-5TeKKMh7Sfxo8021cJfmBzcjfY1SsXsPMMjMvjY7ivesdnybqqS+GxGAoXHAOUawQTwtdUxgP65Im+dEmvWtYQ==}
 
-  callsites@3.1.0:
-    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
-    engines: {node: '>=6'}
+  '@volar/typescript@2.4.14':
+    resolution: {integrity: sha512-p8Z6f/bZM3/HyCdRNFZOEEzts51uV8WHeN8Tnfnm2EBv6FDB2TQLzfVx7aJvnl8ofKAOnS64B2O8bImBFaauRw==}
 
-  camelcase-keys@6.2.2:
-    resolution: {integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==}
-    engines: {node: '>=8'}
+  '@vue/compiler-core@3.5.14':
+    resolution: {integrity: sha512-k7qMHMbKvoCXIxPhquKQVw3Twid3Kg4s7+oYURxLGRd56LiuHJVrvFKI4fm2AM3c8apqODPfVJGoh8nePbXMRA==}
 
-  camelcase@5.3.1:
-    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
-    engines: {node: '>=6'}
+  '@vue/compiler-dom@3.5.14':
+    resolution: {integrity: sha512-1aOCSqxGOea5I80U2hQJvXYpPm/aXo95xL/m/mMhgyPUsKe9jhjwWpziNAw7tYRnbz1I61rd9Mld4W9KmmRoug==}
 
-  caniuse-api@3.0.0:
-    resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
+  '@vue/compiler-sfc@3.5.14':
+    resolution: {integrity: sha512-9T6m/9mMr81Lj58JpzsiSIjBgv2LiVoWjIVa7kuXHICUi8LiDSIotMpPRXYJsXKqyARrzjT24NAwttrMnMaCXA==}
 
-  caniuse-lite@1.0.30001718:
-    resolution: {integrity: sha512-AflseV1ahcSunK53NfEs9gFWgOEmzr0f+kaMFA4xiLZlr9Hzt7HxcSpIFcnNCUkz6R6dWKa54rUz3HUmI3nVcw==}
+  '@vue/compiler-ssr@3.5.14':
+    resolution: {integrity: sha512-Y0G7PcBxr1yllnHuS/NxNCSPWnRGH4Ogrp0tsLA5QemDZuJLs99YjAKQ7KqkHE0vCg4QTKlQzXLKCMF7WPSl7Q==}
 
-  ccount@2.0.1:
-    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+  '@vue/compiler-vue2@2.7.16':
+    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
 
-  chai@5.2.0:
-    resolution: {integrity: sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==}
-    engines: {node: '>=12'}
+  '@vue/devtools-api@7.7.6':
+    resolution: {integrity: sha512-b2Xx0KvXZObePpXPYHvBRRJLDQn5nhKjXh7vUhMEtWxz1AYNFOVIsh5+HLP8xDGL7sy+Q7hXeUxPHB/KgbtsPw==}
 
-  chalk@4.1.2:
-    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
-    engines: {node: '>=10'}
+  '@vue/devtools-kit@7.7.6':
+    resolution: {integrity: sha512-geu7ds7tem2Y7Wz+WgbnbZ6T5eadOvozHZ23Atk/8tksHMFOFylKi1xgGlQlVn0wlkEf4hu+vd5ctj1G4kFtwA==}
 
-  character-entities-html4@2.1.0:
-    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+  '@vue/devtools-shared@7.7.6':
+    resolution: {integrity: sha512-yFEgJZ/WblEsojQQceuyK6FzpFDx4kqrz2ohInxNj5/DnhoX023upTv4OD6lNPLAA5LLkbwPVb10o/7b+Y4FVA==}
 
-  character-entities-legacy@3.0.0:
-    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+  '@vue/eslint-config-prettier@8.0.0':
+    resolution: {integrity: sha512-55dPqtC4PM/yBjhAr+yEw6+7KzzdkBuLmnhBrDfp4I48+wy+Giqqj9yUr5T2uD/BkBROjjmqnLZmXRdOx/VtQg==}
+    peerDependencies:
+      eslint: '>= 8.0.0'
+      prettier: '>= 3.0.0'
 
-  chardet@0.7.0:
-    resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
+  '@vue/eslint-config-typescript@12.0.0':
+    resolution: {integrity: sha512-StxLFet2Qe97T8+7L8pGlhYBBr8Eg05LPuTDVopQV6il+SK6qqom59BA/rcFipUef2jD8P2X44Vd8tMFytfvlg==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
+      eslint-plugin-vue: ^9.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  check-error@2.1.1:
-    resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
-    engines: {node: '>= 16'}
+  '@vue/language-core@2.2.10':
+    resolution: {integrity: sha512-+yNoYx6XIKuAO8Mqh1vGytu8jkFEOH5C8iOv3i8Z/65A7x9iAOXA97Q+PqZ3nlm2lxf5rOJuIGI/wDtx/riNYw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  chokidar@4.0.3:
-    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
-    engines: {node: '>= 14.16.0'}
+  '@vue/reactivity@3.5.14':
+    resolution: {integrity: sha512-7cK1Hp343Fu/SUCCO52vCabjvsYu7ZkOqyYu7bXV9P2yyfjUMUXHZafEbq244sP7gf+EZEz+77QixBTuEqkQQw==}
 
-  chownr@3.0.0:
-    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
-    engines: {node: '>=18'}
+  '@vue/runtime-core@3.5.14':
+    resolution: {integrity: sha512-w9JWEANwHXNgieAhxPpEpJa+0V5G0hz3NmjAZwlOebtfKyp2hKxKF0+qSh0Xs6/PhfGihuSdqMprMVcQU/E6ag==}
 
-  ci-info@3.9.0:
-    resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
-    engines: {node: '>=8'}
+  '@vue/runtime-dom@3.5.14':
+    resolution: {integrity: sha512-lCfR++IakeI35TVR80QgOelsUIdcKjd65rWAMfdSlCYnaEY5t3hYwru7vvcWaqmrK+LpI7ZDDYiGU5V3xjMacw==}
 
-  cipher-base@1.0.6:
-    resolution: {integrity: sha512-3Ek9H3X6pj5TgenXYtNWdaBon1tgYCaebd+XPg0keyjEbEfkD4KkmAxkQ/i1vYvxdcT5nscLBfq9VJRmCBcFSw==}
-    engines: {node: '>= 0.10'}
+  '@vue/server-renderer@3.5.14':
+    resolution: {integrity: sha512-Rf/ISLqokIvcySIYnv3tNWq40PLpNLDLSJwwVWzG6MNtyIhfbcrAxo5ZL9nARJhqjZyWWa40oRb2IDuejeuv6w==}
+    peerDependencies:
+      vue: 3.5.14
 
-  class-variance-authority@0.7.1:
-    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+  '@vue/shared@3.5.14':
+    resolution: {integrity: sha512-oXTwNxVfc9EtP1zzXAlSlgARLXNC84frFYkS0HHz0h3E4WZSP9sywqjqzGCP9Y34M8ipNmd380pVgmMuwELDyQ==}
 
-  cli-cursor@3.1.0:
-    resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
-    engines: {node: '>=8'}
+  '@vue/test-utils@2.4.6':
+    resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
 
-  cli-spinners@2.6.1:
-    resolution: {integrity: sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==}
-    engines: {node: '>=6'}
+  '@vueuse/core@12.8.2':
+    resolution: {integrity: sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==}
 
-  client-only@0.0.1:
-    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+  '@vueuse/integrations@12.8.2':
+    resolution: {integrity: sha512-fbGYivgK5uBTRt7p5F3zy6VrETlV9RtZjBqd1/HxGdjdckBgBM4ugP8LHpjolqTj14TXTxSK1ZfgPbHYyGuH7g==}
+    peerDependencies:
+      async-validator: ^4
+      axios: ^1
+      change-case: ^5
+      drauu: ^0.4
+      focus-trap: ^7
+      fuse.js: ^7
+      idb-keyval: ^6
+      jwt-decode: ^4
+      nprogress: ^0.2
+      qrcode: ^1.5
+      sortablejs: ^1
+      universal-cookie: ^7
+    peerDependenciesMeta:
+      async-validator:
+        optional: true
+      axios:
+        optional: true
+      change-case:
+        optional: true
+      drauu:
+        optional: true
+      focus-trap:
+        optional: true
+      fuse.js:
+        optional: true
+      idb-keyval:
+        optional: true
+      jwt-decode:
+        optional: true
+      nprogress:
+        optional: true
+      qrcode:
+        optional: true
+      sortablejs:
+        optional: true
+      universal-cookie:
+        optional: true
 
-  cliui@8.0.1:
-    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
-    engines: {node: '>=12'}
+  '@vueuse/metadata@12.8.2':
+    resolution: {integrity: sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==}
 
-  clone@1.0.4:
-    resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
-    engines: {node: '>=0.8'}
+  '@vueuse/shared@12.8.2':
+    resolution: {integrity: sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==}
 
-  clsx@2.1.1:
-    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
-    engines: {node: '>=6'}
+  '@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:
+      eslint: '>=8.0.0'
+      typescript: '>=4.0.0'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  color-convert@2.0.1:
-    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
-    engines: {node: '>=7.0.0'}
+  '@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:
+      prettier: '>=2.0.0'
+      typescript: '>=4.0.0'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  color-name@1.1.4:
-    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+  '@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:
+      stylelint: '>=14.0.0'
+      typescript: '>=4.0.0'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
-  color-string@1.9.1:
-    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+  '@yarnpkg/lockfile@1.1.0':
+    resolution: {integrity: sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==}
 
-  color@4.2.3:
-    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
-    engines: {node: '>=12.5.0'}
+  '@yarnpkg/parsers@3.0.2':
+    resolution: {integrity: sha512-/HcYgtUSiJiot/XWGLOlGxPYUG65+/31V8oqk17vZLW1xlCoR4PampyePljOxY2n8/3jz9+tIFzICsyGujJZoA==}
+    engines: {node: '>=18.12.0'}
 
-  colord@2.9.3:
-    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
+  '@zkochan/js-yaml@0.0.7':
+    resolution: {integrity: sha512-nrUSn7hzt7J6JWgWGz78ZYI8wj+gdIJdk0Ynjpp8l+trkn58Uqsf6RYrYkEK+3X18EX+TNdtJI0WxAtc+L84SQ==}
+    hasBin: true
 
-  combined-stream@1.0.8:
-    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
-    engines: {node: '>= 0.8'}
+  abbrev@2.0.0:
+    resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  comma-separated-tokens@2.0.3:
-    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+  accepts@2.0.0:
+    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
+    engines: {node: '>= 0.6'}
 
-  commander@10.0.1:
-    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
-    engines: {node: '>=14'}
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  commander@2.20.3:
-    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+  acorn@8.14.1:
+    resolution: {integrity: sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
 
-  commander@7.2.0:
-    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
-    engines: {node: '>= 10'}
+  agent-base@7.1.3:
+    resolution: {integrity: sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==}
+    engines: {node: '>= 14'}
 
-  comment-parser@1.4.1:
-    resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
-    engines: {node: '>= 12.0.0'}
+  ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 
-  commondir@1.0.1:
-    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
+  ajv@8.17.1:
+    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
 
-  concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+  algoliasearch@5.25.0:
+    resolution: {integrity: sha512-n73BVorL4HIwKlfJKb4SEzAYkR3Buwfwbh+MYxg2mloFph2fFGV58E90QTzdbfzWrLn4HE5Czx/WTjI8fcHaMg==}
+    engines: {node: '>= 14.0.0'}
 
-  confbox@0.1.8:
-    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+  alien-signals@1.0.13:
+    resolution: {integrity: sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==}
 
-  confbox@0.2.2:
-    resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
+  ansi-colors@4.1.3:
+    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
+    engines: {node: '>=6'}
 
-  config-chain@1.1.13:
-    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
 
-  confusing-browser-globals@1.0.11:
-    resolution: {integrity: sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==}
+  ansi-regex@6.1.0:
+    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
+    engines: {node: '>=12'}
 
-  content-disposition@1.0.0:
-    resolution: {integrity: sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg==}
-    engines: {node: '>= 0.6'}
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
 
-  content-type@1.0.5:
-    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
-    engines: {node: '>= 0.6'}
+  ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
 
-  convert-source-map@2.0.0:
-    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+  ansi-styles@6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+    engines: {node: '>=12'}
 
-  cookie-signature@1.2.2:
-    resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
-    engines: {node: '>=6.6.0'}
+  any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
 
-  cookie@0.7.2:
-    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
-    engines: {node: '>= 0.6'}
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
 
-  copy-anything@3.0.5:
-    resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
-    engines: {node: '>=12.13'}
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
 
-  core-js@3.42.0:
-    resolution: {integrity: sha512-Sz4PP4ZA+Rq4II21qkNqOEDTDrCvcANId3xpIgB34NDkWc3UduWj2dqEtN9yZIq8Dk3HyPI33x9sqqU5C8sr0g==}
+  argparse@1.0.10:
+    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
-  core-util-is@1.0.3:
-    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
-  cosmiconfig@7.1.0:
-    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
     engines: {node: '>=10'}
 
-  cosmiconfig@8.3.6:
-    resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      typescript: '>=4.9.5'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+  aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
-  create-ecdh@4.0.4:
-    resolution: {integrity: sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==}
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
 
-  create-hash@1.2.0:
-    resolution: {integrity: sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==}
+  array-buffer-byte-length@1.0.2:
+    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
+    engines: {node: '>= 0.4'}
 
-  create-hmac@1.1.7:
-    resolution: {integrity: sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==}
+  array-includes@3.1.8:
+    resolution: {integrity: sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==}
+    engines: {node: '>= 0.4'}
 
-  cross-fetch@4.1.0:
-    resolution: {integrity: sha512-uKm5PU+MHTootlWEY+mZ4vvXoCn4fLQxT9dSc1sXVMSFkINTJVN8cAQROpwcKm8bJ/c7rgZVIBWzH5T78sNZZw==}
+  array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
 
-  cross-spawn@7.0.6:
-    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
-    engines: {node: '>= 8'}
+  array.prototype.findlast@1.2.5:
+    resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
+    engines: {node: '>= 0.4'}
 
-  crypto-browserify@3.12.1:
-    resolution: {integrity: sha512-r4ESw/IlusD17lgQi1O20Fa3qNnsckR126TdUuBgAu7GBYSIPvdNyONd3Zrxh0xCwA4+6w/TDArBPsMvhur+KQ==}
-    engines: {node: '>= 0.10'}
+  array.prototype.findlastindex@1.2.6:
+    resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
+    engines: {node: '>= 0.4'}
 
-  css-declaration-sorter@6.4.1:
-    resolution: {integrity: sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==}
-    engines: {node: ^10 || ^12 || >=14}
-    peerDependencies:
-      postcss: ^8.0.9
+  array.prototype.flat@1.3.3:
+    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
+    engines: {node: '>= 0.4'}
 
-  css-functions-list@3.2.3:
-    resolution: {integrity: sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==}
-    engines: {node: '>=12 || >=16'}
+  array.prototype.flatmap@1.3.3:
+    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
+    engines: {node: '>= 0.4'}
 
-  css-select@4.3.0:
-    resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
+  array.prototype.tosorted@1.1.4:
+    resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
+    engines: {node: '>= 0.4'}
 
-  css-tree@1.1.3:
-    resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
-    engines: {node: '>=8.0.0'}
+  arraybuffer.prototype.slice@1.0.4:
+    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
+    engines: {node: '>= 0.4'}
 
-  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}
+  arrify@1.0.1:
+    resolution: {integrity: sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==}
+    engines: {node: '>=0.10.0'}
 
-  css-what@6.1.0:
-    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
-    engines: {node: '>= 6'}
+  asn1.js@4.10.1:
+    resolution: {integrity: sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==}
 
-  cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
-    engines: {node: '>=4'}
-    hasBin: true
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
 
-  cssnano-preset-default@5.2.14:
-    resolution: {integrity: sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==}
-    engines: {node: ^10 || ^12 || >=14.0}
-    peerDependencies:
-      postcss: ^8.2.15
+  ast-types-flow@0.0.8:
+    resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
 
-  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
+  astral-regex@2.0.0:
+    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
+    engines: {node: '>=8'}
 
-  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
+  async-function@1.0.0:
+    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
+    engines: {node: '>= 0.4'}
 
-  csso@4.2.0:
-    resolution: {integrity: sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==}
-    engines: {node: '>=8.0.0'}
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
-  cssstyle@4.3.1:
-    resolution: {integrity: sha512-ZgW+Jgdd7i52AaLYCriF8Mxqft0gD/R9i9wi6RWBhs1pqdPEzPjym7rvRKi397WmQFf3SlyUsszhw+VVCbx79Q==}
-    engines: {node: '>=18'}
+  autoprefixer@10.4.21:
+    resolution: {integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
 
-  csstype@3.1.3:
-    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+  available-typed-arrays@1.0.7:
+    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
+    engines: {node: '>= 0.4'}
 
-  damerau-levenshtein@1.0.8:
-    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
+  await-semaphore@0.1.3:
+    resolution: {integrity: sha512-d1W2aNSYcz/sxYO4pMGX9vq65qOTu0P800epMud+6cYYX0QcT7zyqcxec3VWzpgvdXo57UWmVbZpLMjX2m1I7Q==}
 
-  data-urls@5.0.0:
-    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
-    engines: {node: '>=18'}
+  axe-core@4.10.3:
+    resolution: {integrity: sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==}
+    engines: {node: '>=4'}
 
-  data-view-buffer@1.0.2:
-    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
-    engines: {node: '>= 0.4'}
+  axios@0.26.1:
+    resolution: {integrity: sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==}
 
-  data-view-byte-length@1.0.2:
-    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
-    engines: {node: '>= 0.4'}
+  axios@1.9.0:
+    resolution: {integrity: sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==}
 
-  data-view-byte-offset@1.0.1:
-    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
+  axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
     engines: {node: '>= 0.4'}
 
-  dataloader@1.4.0:
-    resolution: {integrity: sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==}
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
-  de-indent@1.0.2:
-    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
+  balanced-match@2.0.0:
+    resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
 
-  debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
+  base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  debug@4.4.1:
-    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
+  base64url@3.0.1:
+    resolution: {integrity: sha512-ir1UPr3dkwexU7FdV8qBBbNDRUhMmIekYMFZfi+C/sLNnRESKPl23nB9b2pltqfOQNnGzsDdId90AEtG5tCx4A==}
+    engines: {node: '>=6.0.0'}
 
-  decamelize-keys@1.1.1:
-    resolution: {integrity: sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==}
-    engines: {node: '>=0.10.0'}
+  better-path-resolve@1.0.0:
+    resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==}
+    engines: {node: '>=4'}
 
-  decamelize@1.2.0:
-    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
-    engines: {node: '>=0.10.0'}
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
 
-  decimal.js@10.5.0:
-    resolution: {integrity: sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==}
+  birpc@2.3.0:
+    resolution: {integrity: sha512-ijbtkn/F3Pvzb6jHypHRyve2QApOCZDR25D/VnkY2G/lBNcXCTsnsCxgY4k4PkVB7zfwzYbY3O9Lcqe3xufS5g==}
 
-  decode-uri-component@0.2.2:
-    resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==}
-    engines: {node: '>=0.10'}
+  bl@4.1.0:
+    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
 
-  deep-eql@5.0.2:
-    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
-    engines: {node: '>=6'}
+  bn.js@4.12.2:
+    resolution: {integrity: sha512-n4DSx829VRTRByMRGdjQ9iqsN0Bh4OolPsFnaZBLcbi8iXcB+kJ9s7EnRt4wILZNV3kPLHkRVfOc/HvhC3ovDw==}
 
-  deep-is@0.1.4:
-    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+  bn.js@5.2.2:
+    resolution: {integrity: sha512-v2YAxEmKaBLahNwE1mjp4WON6huMNeuDvagFZW+ASCuA/ku0bXR9hSMw0XpiqMoA3+rmnyck/tPRSFQkoC9Cuw==}
 
-  deepmerge@4.3.1:
-    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
-    engines: {node: '>=0.10.0'}
+  body-parser@2.2.0:
+    resolution: {integrity: sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==}
+    engines: {node: '>=18'}
 
-  defaults@1.0.4:
-    resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
+  boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
-  define-data-property@1.1.4:
-    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
-    engines: {node: '>= 0.4'}
+  brace-expansion@1.1.11:
+    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
 
-  define-lazy-prop@2.0.0:
-    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
+  brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  define-properties@1.2.1:
-    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
-    engines: {node: '>= 0.4'}
+  brorand@1.1.0:
+    resolution: {integrity: sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w==}
 
-  delayed-stream@1.0.0:
-    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
-    engines: {node: '>=0.4.0'}
+  browserify-aes@1.2.0:
+    resolution: {integrity: sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==}
 
-  depd@2.0.0:
-    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
-    engines: {node: '>= 0.8'}
+  browserify-cipher@1.0.1:
+    resolution: {integrity: sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==}
 
-  dequal@2.0.3:
-    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
-    engines: {node: '>=6'}
+  browserify-des@1.0.2:
+    resolution: {integrity: sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==}
 
-  des.js@1.1.0:
-    resolution: {integrity: sha512-r17GxjhUCjSRy8aiJpr8/UadFIzMzJGexI3Nmz4ADi9LYSFx4gTBp80+NaX/YsXWWLhpZ7v/v/ubEc/bCNfKwg==}
+  browserify-rsa@4.1.1:
+    resolution: {integrity: sha512-YBjSAiTqM04ZVei6sXighu679a3SqWORA3qZTEqZImnlkDIFtKc6pNutpjyZ8RJTjQtuYfeetkxM11GwoYXMIQ==}
+    engines: {node: '>= 0.10'}
 
-  detect-indent@6.1.0:
-    resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
-    engines: {node: '>=8'}
+  browserify-sign@4.2.3:
+    resolution: {integrity: sha512-JWCZW6SKhfhjJxO8Tyiiy+XYB7cqd2S5/+WeYHsKdNKFlCBhKbblba1A/HN/90YwtxKc8tCErjffZl++UNmGiw==}
+    engines: {node: '>= 0.12'}
 
-  detect-libc@1.0.3:
-    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
-    engines: {node: '>=0.10'}
+  browserslist@4.24.5:
+    resolution: {integrity: sha512-FDToo4Wo82hIdgc1CQ+NQD0hEhmpPjrZ3hiUgwgOG6IuTdlpr8jdjyG24P6cNP1yJpTLzS5OcGgSw0xmDU1/Tw==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
-  detect-libc@2.0.4:
-    resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
-    engines: {node: '>=8'}
+  buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
-  devlop@1.1.0:
-    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+  buffer-xor@1.0.3:
+    resolution: {integrity: sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ==}
 
-  diff-sequences@29.6.3:
-    resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+  buffer@5.7.1:
+    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
 
-  diffie-hellman@5.0.3:
-    resolution: {integrity: sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==}
+  buffer@6.0.3:
+    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
 
-  dir-glob@3.0.1:
-    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+  busboy@1.6.0:
+    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
+    engines: {node: '>=10.16.0'}
+
+  bytes@3.1.2:
+    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+    engines: {node: '>= 0.8'}
+
+  cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
 
-  doctrine@2.1.0:
-    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
-    engines: {node: '>=0.10.0'}
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
 
-  doctrine@3.0.0:
-    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
-    engines: {node: '>=6.0.0'}
+  call-bind@1.0.8:
+    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
+    engines: {node: '>= 0.4'}
 
-  dom-accessibility-api@0.5.16:
-    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
 
-  dom-serializer@1.4.1:
-    resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
 
-  dom-walk@0.1.2:
-    resolution: {integrity: sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==}
+  camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
 
-  domelementtype@2.3.0:
-    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+  camelcase-keys@6.2.2:
+    resolution: {integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==}
+    engines: {node: '>=8'}
 
-  domhandler@4.3.1:
-    resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
-    engines: {node: '>= 4'}
+  camelcase@5.3.1:
+    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
+    engines: {node: '>=6'}
 
-  domutils@2.8.0:
-    resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
+  caniuse-api@3.0.0:
+    resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
 
-  dotenv-expand@11.0.7:
-    resolution: {integrity: sha512-zIHwmZPRshsCdpMDyVsqGmgyP0yT8GAgXUnkdAoJisxvf33k7yO6OuoKmcTGuXPWSsm8Oh88nZicRLA9Y0rUeA==}
-    engines: {node: '>=12'}
+  caniuse-lite@1.0.30001718:
+    resolution: {integrity: sha512-AflseV1ahcSunK53NfEs9gFWgOEmzr0f+kaMFA4xiLZlr9Hzt7HxcSpIFcnNCUkz6R6dWKa54rUz3HUmI3nVcw==}
 
-  dotenv@16.4.7:
-    resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==}
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
+  chai@5.2.0:
+    resolution: {integrity: sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==}
     engines: {node: '>=12'}
 
-  dotenv@8.6.0:
-    resolution: {integrity: sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==}
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
-  dunder-proto@1.0.1:
-    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
-    engines: {node: '>= 0.4'}
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
 
-  eastasianwidth@0.2.0:
-    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
 
-  editorconfig@1.0.4:
-    resolution: {integrity: sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==}
-    engines: {node: '>=14'}
-    hasBin: true
+  chardet@0.7.0:
+    resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
 
-  ee-first@1.1.1:
-    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+  check-error@2.1.1:
+    resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
+    engines: {node: '>= 16'}
 
-  electron-to-chromium@1.5.155:
-    resolution: {integrity: sha512-ps5KcGGmwL8VaeJlvlDlu4fORQpv3+GIcF5I3f9tUKUlJ/wsysh6HU8P5L1XWRYeXfA0oJd4PyM8ds8zTFf6Ng==}
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
 
-  elliptic@6.6.1:
-    resolution: {integrity: sha512-RaddvvMatK2LJHqFJ+YA4WysVN5Ita9E35botqIYspQ4TkRAlCicdzKOjlyv/1Za5RyTNn7di//eEV0uTAfe3g==}
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
 
-  emoji-regex-xs@1.0.0:
-    resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
+  chownr@3.0.0:
+    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
+    engines: {node: '>=18'}
 
-  emoji-regex@8.0.0:
-    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+  ci-info@3.9.0:
+    resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
+    engines: {node: '>=8'}
 
-  emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+  cipher-base@1.0.6:
+    resolution: {integrity: sha512-3Ek9H3X6pj5TgenXYtNWdaBon1tgYCaebd+XPg0keyjEbEfkD4KkmAxkQ/i1vYvxdcT5nscLBfq9VJRmCBcFSw==}
+    engines: {node: '>= 0.10'}
 
-  encodeurl@2.0.0:
-    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
-    engines: {node: '>= 0.8'}
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
-  end-of-stream@1.4.4:
-    resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
+  cli-cursor@3.1.0:
+    resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
+    engines: {node: '>=8'}
 
-  enhanced-resolve@5.18.1:
-    resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==}
-    engines: {node: '>=10.13.0'}
+  cli-spinners@2.6.1:
+    resolution: {integrity: sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==}
+    engines: {node: '>=6'}
 
-  enquirer@2.3.6:
-    resolution: {integrity: sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==}
-    engines: {node: '>=8.6'}
+  client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
-  enquirer@2.4.1:
-    resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
-    engines: {node: '>=8.6'}
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
 
-  entities@2.2.0:
-    resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
+  clone@1.0.4:
+    resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
+    engines: {node: '>=0.8'}
 
-  entities@4.5.0:
-    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
-    engines: {node: '>=0.12'}
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
 
-  entities@6.0.0:
-    resolution: {integrity: sha512-aKstq2TDOndCn4diEyp9Uq/Flu2i1GlLkc6XIDQSDMuaFE3OPW5OphLCyQ5SpSJZTb4reN+kTcYru5yIfXoRPw==}
-    engines: {node: '>=0.12'}
+  cmdk@1.0.4:
+    resolution: {integrity: sha512-AnsjfHyHpQ/EFeAnG216WY7A5LiYCoZzCSygiLvfXC3H3LFGCprErteUcszaVluGOhuOTbJS3jWHrSDYPBBygg==}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
 
-  error-ex@1.3.2:
-    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
 
-  es-abstract@1.23.9:
-    resolution: {integrity: sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==}
-    engines: {node: '>= 0.4'}
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
-  es-define-property@1.0.1:
-    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
-    engines: {node: '>= 0.4'}
+  color-string@1.9.1:
+    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
 
-  es-errors@1.3.0:
-    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
-    engines: {node: '>= 0.4'}
+  color@4.2.3:
+    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
+    engines: {node: '>=12.5.0'}
 
-  es-iterator-helpers@1.2.1:
-    resolution: {integrity: sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==}
-    engines: {node: '>= 0.4'}
+  colord@2.9.3:
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
 
-  es-module-lexer@1.7.0:
-    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
 
-  es-object-atoms@1.1.1:
-    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
-    engines: {node: '>= 0.4'}
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
-  es-set-tostringtag@2.1.0:
-    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
-    engines: {node: '>= 0.4'}
+  commander@10.0.1:
+    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
+    engines: {node: '>=14'}
 
-  es-shim-unscopables@1.1.0:
-    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
-    engines: {node: '>= 0.4'}
+  commander@2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
-  es-to-primitive@1.3.0:
-    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
-    engines: {node: '>= 0.4'}
+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
 
-  esbuild-plugin-polyfill-node@0.3.0:
-    resolution: {integrity: sha512-SHG6CKUfWfYyYXGpW143NEZtcVVn8S/WHcEOxk62LuDXnY4Zpmc+WmxJKN6GMTgTClXJXhEM5KQlxKY6YjbucQ==}
-    peerDependencies:
-      esbuild: '*'
+  commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
 
-  esbuild-plugin-preserve-directives@0.0.11:
-    resolution: {integrity: sha512-OolFhx1h/1ADEEoPjVi0hYWru1pTZBHki7XozawYVkhRhO63mwZT6isLylbwPs7dJ72doVQJGHCT2I1l9z8DcA==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      esbuild: ^0.21.0
+  commondir@1.0.1:
+    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
 
-  esbuild-plugins-node-modules-polyfill@1.7.0:
-    resolution: {integrity: sha512-Z81w5ReugIBAgufGeGWee+Uxzgs5Na4LprUAK3XlJEh2ktY3LkNuEGMaZyBXxQxGK8SQDS5yKLW5QKGF5qLjYA==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      esbuild: '>=0.14.0 <=0.25.x'
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
-  esbuild@0.21.5:
-    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
-    engines: {node: '>=12'}
-    hasBin: true
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
 
-  esbuild@0.25.4:
-    resolution: {integrity: sha512-8pgjLUcUjcgDg+2Q4NYXnPbo/vncAY4UmyaCm0jZevERqCHZIaWwdJHkf8XQtu4AxSKCdvrUbT0XUr1IdZzI8Q==}
-    engines: {node: '>=18'}
-    hasBin: true
+  confbox@0.2.2:
+    resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
 
-  escalade@3.2.0:
-    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
-    engines: {node: '>=6'}
+  config-chain@1.1.13:
+    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
 
-  escape-html@1.0.3:
-    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+  confusing-browser-globals@1.0.11:
+    resolution: {integrity: sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==}
 
-  escape-string-regexp@1.0.5:
-    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
-    engines: {node: '>=0.8.0'}
+  content-disposition@1.0.0:
+    resolution: {integrity: sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg==}
+    engines: {node: '>= 0.6'}
 
-  escape-string-regexp@4.0.0:
-    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
-    engines: {node: '>=10'}
+  content-type@1.0.5:
+    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
+    engines: {node: '>= 0.6'}
 
-  eslint-config-airbnb-base@15.0.0:
-    resolution: {integrity: sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==}
-    engines: {node: ^10.12.0 || >=12.0.0}
-    peerDependencies:
-      eslint: ^7.32.0 || ^8.2.0
-      eslint-plugin-import: ^2.25.2
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
-  eslint-config-airbnb-typescript@17.1.0:
-    resolution: {integrity: sha512-GPxI5URre6dDpJ0CtcthSZVBAfI+Uw7un5OYNVxP2EYi3H81Jw701yFP7AU+/vCE7xBtFmjge7kfhhk4+RAiig==}
-    peerDependencies:
-      '@typescript-eslint/eslint-plugin': ^5.13.0 || ^6.0.0
-      '@typescript-eslint/parser': ^5.0.0 || ^6.0.0
-      eslint: ^7.32.0 || ^8.2.0
-      eslint-plugin-import: ^2.25.3
+  cookie-signature@1.2.2:
+    resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
+    engines: {node: '>=6.6.0'}
 
-  eslint-config-airbnb@19.0.4:
-    resolution: {integrity: sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==}
-    engines: {node: ^10.12.0 || ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^7.32.0 || ^8.2.0
-      eslint-plugin-import: ^2.25.3
-      eslint-plugin-jsx-a11y: ^6.5.1
-      eslint-plugin-react: ^7.28.0
-      eslint-plugin-react-hooks: ^4.3.0
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
 
-  eslint-config-next@15.3.2:
-    resolution: {integrity: sha512-FerU4DYccO4FgeYFFglz0SnaKRe1ejXQrDb8kWUkTAg036YWi+jUsgg4sIGNCDhAsDITsZaL4MzBWKB6f4G1Dg==}
-    peerDependencies:
-      eslint: ^7.23.0 || ^8.0.0 || ^9.0.0
-      typescript: '>=3.3.1'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+  copy-anything@3.0.5:
+    resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
+    engines: {node: '>=12.13'}
 
-  eslint-config-prettier@8.10.0:
-    resolution: {integrity: sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==}
-    hasBin: true
-    peerDependencies:
-      eslint: '>=7.0.0'
+  core-js@3.42.0:
+    resolution: {integrity: sha512-Sz4PP4ZA+Rq4II21qkNqOEDTDrCvcANId3xpIgB34NDkWc3UduWj2dqEtN9yZIq8Dk3HyPI33x9sqqU5C8sr0g==}
 
-  eslint-import-resolver-node@0.3.9:
-    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+  core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
-  eslint-import-resolver-typescript@3.10.1:
-    resolution: {integrity: sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '*'
-      eslint-plugin-import: '*'
-      eslint-plugin-import-x: '*'
-    peerDependenciesMeta:
-      eslint-plugin-import:
-        optional: true
-      eslint-plugin-import-x:
-        optional: true
+  cosmiconfig@7.1.0:
+    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
+    engines: {node: '>=10'}
 
-  eslint-module-utils@2.12.0:
-    resolution: {integrity: sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==}
-    engines: {node: '>=4'}
+  cosmiconfig@8.3.6:
+    resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
+    engines: {node: '>=14'}
     peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
+      typescript: '>=4.9.5'
     peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
+      typescript:
         optional: true
 
-  eslint-plugin-es@3.0.1:
-    resolution: {integrity: sha512-GUmAsJaN4Fc7Gbtl8uOBlayo2DqhwWvEzykMHSCZHU3XdJ+NSzzZcVhXh3VxX5icqQ+oQdIEawXX8xkR3mIFmQ==}
-    engines: {node: '>=8.10.0'}
-    peerDependencies:
-      eslint: '>=4.19.1'
+  create-ecdh@4.0.4:
+    resolution: {integrity: sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==}
 
-  eslint-plugin-eslint-plugin@5.5.1:
-    resolution: {integrity: sha512-9AmfZzcQ7QHwpzfAQpZ7xdtwHYViylmlnruCH0aV64/tuoH3igGXg91vr0e6ShLf/mrAYGqLw5LZ/gOxJeRXnw==}
-    engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0}
-    peerDependencies:
-      eslint: '>=7.0.0'
+  create-hash@1.2.0:
+    resolution: {integrity: sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==}
 
-  eslint-plugin-header@3.1.1:
-    resolution: {integrity: sha512-9vlKxuJ4qf793CmeeSrZUvVClw6amtpghq3CuWcB5cUNnWHQhgcqy5eF8oVKFk1G3Y/CbchGfEaw3wiIJaNmVg==}
-    peerDependencies:
-      eslint: '>=7.7.0'
+  create-hmac@1.1.7:
+    resolution: {integrity: sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==}
 
-  eslint-plugin-import-x@4.12.2:
-    resolution: {integrity: sha512-0jVUgJQipbs0yUfLe7LwYD6p8rIGqCysWZdyJFgkPzDyJgiKpuCaXlywKUAWgJ6u1nLpfrdt21B60OUkupyBrQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
+  cross-fetch@4.1.0:
+    resolution: {integrity: sha512-uKm5PU+MHTootlWEY+mZ4vvXoCn4fLQxT9dSc1sXVMSFkINTJVN8cAQROpwcKm8bJ/c7rgZVIBWzH5T78sNZZw==}
 
-  eslint-plugin-import@2.31.0:
-    resolution: {integrity: sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
 
-  eslint-plugin-jest@27.9.0:
-    resolution: {integrity: sha512-QIT7FH7fNmd9n4se7FFKHbsLKGQiw885Ds6Y/sxKgCZ6natwCsXdgPOADnYVxN2QrRweF0FZWbJ6S7Rsn7llug==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    peerDependencies:
-      '@typescript-eslint/eslint-plugin': ^5.0.0 || ^6.0.0 || ^7.0.0
-      eslint: ^7.0.0 || ^8.0.0
-      jest: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/eslint-plugin':
-        optional: true
-      jest:
-        optional: true
+  crypto-browserify@3.12.1:
+    resolution: {integrity: sha512-r4ESw/IlusD17lgQi1O20Fa3qNnsckR126TdUuBgAu7GBYSIPvdNyONd3Zrxh0xCwA4+6w/TDArBPsMvhur+KQ==}
+    engines: {node: '>= 0.10'}
 
-  eslint-plugin-jsx-a11y@6.10.2:
-    resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==}
-    engines: {node: '>=4.0'}
+  css-declaration-sorter@6.4.1:
+    resolution: {integrity: sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==}
+    engines: {node: ^10 || ^12 || >=14}
     peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
+      postcss: ^8.0.9
 
-  eslint-plugin-node@11.1.0:
-    resolution: {integrity: sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g==}
-    engines: {node: '>=8.10.0'}
-    peerDependencies:
-      eslint: '>=5.16.0'
-
-  eslint-plugin-prettier@4.2.1:
-    resolution: {integrity: sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      eslint: '>=7.28.0'
-      eslint-config-prettier: '*'
-      prettier: '>=2.0.0'
-    peerDependenciesMeta:
-      eslint-config-prettier:
-        optional: true
+  css-functions-list@3.2.3:
+    resolution: {integrity: sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==}
+    engines: {node: '>=12 || >=16'}
 
-  eslint-plugin-prettier@5.4.0:
-    resolution: {integrity: sha512-BvQOvUhkVQM1i63iMETK9Hjud9QhqBnbtT1Zc642p9ynzBuCe5pybkOnvqZIBypXmMlsGcnU4HZ8sCTPfpAexA==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      '@types/eslint': '>=8.0.0'
-      eslint: '>=8.0.0'
-      eslint-config-prettier: '>= 7.0.0 <10.0.0 || >=10.1.0'
-      prettier: '>=3.0.0'
-    peerDependenciesMeta:
-      '@types/eslint':
-        optional: true
-      eslint-config-prettier:
-        optional: true
+  css-select@4.3.0:
+    resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
 
-  eslint-plugin-react-hooks@4.6.2:
-    resolution: {integrity: sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
+  css-tree@1.1.3:
+    resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
+    engines: {node: '>=8.0.0'}
 
-  eslint-plugin-react-hooks@5.2.0:
-    resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.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}
 
-  eslint-plugin-react-refresh@0.4.20:
-    resolution: {integrity: sha512-XpbHQ2q5gUF8BGOX4dHe+71qoirYMhApEPZ7sfhF/dNnOF1UXnCMGZf79SFTBO7Bz5YEIT4TMieSlJBWhP9WBA==}
-    peerDependencies:
-      eslint: '>=8.40'
+  css-what@6.1.0:
+    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
+    engines: {node: '>= 6'}
 
-  eslint-plugin-react@7.37.5:
-    resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==}
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
+    hasBin: true
 
-  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'}
+  cssnano-preset-default@5.2.14:
+    resolution: {integrity: sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==}
+    engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
-      eslint: ^7.5.0 || ^8.0.0
-
-  eslint-plugin-tsdoc@0.2.17:
-    resolution: {integrity: sha512-xRmVi7Zx44lOBuYqG8vzTXuL6IdGOeF9nHX17bjJ8+VE6fsxpdGem0/SBTmAwgYMKYB1WBkqRJVQ+n8GK041pA==}
+      postcss: ^8.2.15
 
-  eslint-plugin-typescript-sort-keys@2.3.0:
-    resolution: {integrity: sha512-3LAcYulo5gNYiPWee+TksITfvWeBuBjGgcSLTacPESFVKEoy8laOQuZvJlSCwTBHT2SCGIxr3bJ56zuux+3MCQ==}
-    engines: {node: 12 || >= 13.9}
+  cssnano-utils@3.1.0:
+    resolution: {integrity: sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==}
+    engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^1 || ^2 || ^3 || ^4 || ^5
-      eslint: ^5 || ^6 || ^7 || ^8
-      typescript: ^3 || ^4 || ^5
+      postcss: ^8.2.15
 
-  eslint-plugin-vue@10.1.0:
-    resolution: {integrity: sha512-/VTiJ1eSfNLw6lvG9ENySbGmcVvz6wZ9nA7ZqXlLBY2RkaF15iViYKxglWiIch12KiLAj0j1iXPYU6W4wTROFA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  cssnano@5.1.15:
+    resolution: {integrity: sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==}
+    engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      vue-eslint-parser: ^10.0.0
+      postcss: ^8.2.15
 
-  eslint-scope@5.1.1:
-    resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
+  csso@4.2.0:
+    resolution: {integrity: sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==}
     engines: {node: '>=8.0.0'}
 
-  eslint-scope@7.2.2:
-    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-
-  eslint-scope@8.3.0:
-    resolution: {integrity: sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  cssstyle@4.3.1:
+    resolution: {integrity: sha512-ZgW+Jgdd7i52AaLYCriF8Mxqft0gD/R9i9wi6RWBhs1pqdPEzPjym7rvRKi397WmQFf3SlyUsszhw+VVCbx79Q==}
+    engines: {node: '>=18'}
 
-  eslint-utils@2.1.0:
-    resolution: {integrity: sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==}
-    engines: {node: '>=6'}
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
-  eslint-utils@3.0.0:
-    resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
-    engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
-    peerDependencies:
-      eslint: '>=5'
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
 
-  eslint-visitor-keys@1.3.0:
-    resolution: {integrity: sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==}
-    engines: {node: '>=4'}
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
 
-  eslint-visitor-keys@2.1.0:
-    resolution: {integrity: sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==}
-    engines: {node: '>=10'}
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
 
-  eslint-visitor-keys@3.4.3:
-    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
 
-  eslint-visitor-keys@4.2.0:
-    resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
 
-  eslint@8.57.0:
-    resolution: {integrity: sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
-    hasBin: true
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
 
-  eslint@9.28.0:
-    resolution: {integrity: sha512-ocgh41VhRlf9+fVpe7QKzwLj9c92fDiqOj8Y3Sd4/ZmVA4Btx4PlUYPq4pp9JDyupkf1upbEXecxL2mwNV7jPQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    hasBin: true
-    peerDependencies:
-      jiti: '*'
-    peerDependenciesMeta:
-      jiti:
-        optional: true
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
 
-  espree@10.3.0:
-    resolution: {integrity: sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
 
-  espree@9.6.1:
-    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
 
-  esprima@4.0.1:
-    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
-    engines: {node: '>=4'}
-    hasBin: true
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
 
-  esquery@1.6.0:
-    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
-    engines: {node: '>=0.10'}
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
 
-  esrecurse@4.3.0:
-    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
-    engines: {node: '>=4.0'}
+  damerau-levenshtein@1.0.8:
+    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
 
-  estraverse@4.3.0:
-    resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
-    engines: {node: '>=4.0'}
+  data-urls@5.0.0:
+    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
+    engines: {node: '>=18'}
 
-  estraverse@5.3.0:
-    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
-    engines: {node: '>=4.0'}
+  data-view-buffer@1.0.2:
+    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
+    engines: {node: '>= 0.4'}
 
-  estree-walker@2.0.2:
-    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+  data-view-byte-length@1.0.2:
+    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
+    engines: {node: '>= 0.4'}
 
-  estree-walker@3.0.3:
-    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+  data-view-byte-offset@1.0.1:
+    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
+    engines: {node: '>= 0.4'}
 
-  esutils@2.0.3:
-    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
-    engines: {node: '>=0.10.0'}
+  dataloader@1.4.0:
+    resolution: {integrity: sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==}
 
-  etag@1.8.1:
-    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
-    engines: {node: '>= 0.6'}
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
 
-  eventemitter3@4.0.7:
-    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+  de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
 
-  evp_bytestokey@1.0.3:
-    resolution: {integrity: sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==}
+  debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
 
-  expect-type@1.2.1:
-    resolution: {integrity: sha512-/kP8CAwxzLVEeFrMm4kMmy4CCDlpipyA7MYLVrdJIkV0fYF0UaigQHRsxHiuY/GEea+bh4KSv3TIlgr+2UL6bw==}
-    engines: {node: '>=12.0.0'}
+  debug@4.4.1:
+    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
 
-  express@5.1.0:
-    resolution: {integrity: sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==}
-    engines: {node: '>= 18'}
+  decamelize-keys@1.1.1:
+    resolution: {integrity: sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==}
+    engines: {node: '>=0.10.0'}
 
-  exsolve@1.0.5:
-    resolution: {integrity: sha512-pz5dvkYYKQ1AHVrgOzBKWeP4u4FRb3a6DNK2ucr0OoNwYIU4QWsJ+NM36LLzORT+z845MzKHHhpXiUF5nvQoJg==}
+  decamelize@1.2.0:
+    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
+    engines: {node: '>=0.10.0'}
 
-  extendable-error@0.1.7:
-    resolution: {integrity: sha512-UOiS2in6/Q0FK0R0q6UY9vYpQ21mr/Qn1KOnte7vsACuNJf514WvCCUHSRCPcgjPT2bAhNIJdlE6bVap1GKmeg==}
+  decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
 
-  external-editor@3.1.0:
-    resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
-    engines: {node: '>=4'}
+  decimal.js@10.5.0:
+    resolution: {integrity: sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==}
 
-  fast-deep-equal@3.1.3:
-    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+  decode-uri-component@0.2.2:
+    resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==}
+    engines: {node: '>=0.10'}
 
-  fast-diff@1.3.0:
-    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
 
-  fast-glob@3.3.1:
-    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
-    engines: {node: '>=8.6.0'}
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
-  fast-glob@3.3.3:
-    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
-    engines: {node: '>=8.6.0'}
-
-  fast-json-stable-stringify@2.1.0:
-    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
-
-  fast-levenshtein@2.0.6:
-    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
 
-  fast-sha256@1.3.0:
-    resolution: {integrity: sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ==}
+  defaults@1.0.4:
+    resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
 
-  fast-uri@3.0.6:
-    resolution: {integrity: sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==}
+  define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
 
-  fastest-levenshtein@1.0.16:
-    resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
-    engines: {node: '>= 4.9.1'}
+  define-lazy-prop@2.0.0:
+    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
+    engines: {node: '>=8'}
 
-  fastq@1.19.1:
-    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+  define-properties@1.2.1:
+    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
+    engines: {node: '>= 0.4'}
 
-  fdir@6.4.4:
-    resolution: {integrity: sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==}
-    peerDependencies:
-      picomatch: ^3 || ^4
-    peerDependenciesMeta:
-      picomatch:
-        optional: true
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
 
-  figures@3.2.0:
-    resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
-    engines: {node: '>=8'}
+  depd@2.0.0:
+    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+    engines: {node: '>= 0.8'}
 
-  file-entry-cache@6.0.1:
-    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
-    engines: {node: ^10.12.0 || >=12.0.0}
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
 
-  file-entry-cache@8.0.0:
-    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
-    engines: {node: '>=16.0.0'}
+  des.js@1.1.0:
+    resolution: {integrity: sha512-r17GxjhUCjSRy8aiJpr8/UadFIzMzJGexI3Nmz4ADi9LYSFx4gTBp80+NaX/YsXWWLhpZ7v/v/ubEc/bCNfKwg==}
 
-  fill-range@7.1.1:
-    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+  detect-indent@6.1.0:
+    resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
     engines: {node: '>=8'}
 
-  filter-obj@1.1.0:
-    resolution: {integrity: sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==}
-    engines: {node: '>=0.10.0'}
-
-  finalhandler@2.1.0:
-    resolution: {integrity: sha512-/t88Ty3d5JWQbWYgaOGCCYfXRwV1+be02WqYYlL6h0lEiUAMPM8o8qKGO01YIkOHzka2up08wvgYD0mDiI+q3Q==}
-    engines: {node: '>= 0.8'}
+  detect-libc@1.0.3:
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+    engines: {node: '>=0.10'}
+    hasBin: true
 
-  find-up@4.1.0:
-    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+  detect-libc@2.0.4:
+    resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
     engines: {node: '>=8'}
 
-  find-up@5.0.0:
-    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
-    engines: {node: '>=10'}
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
-  flat-cache@3.2.0:
-    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
-    engines: {node: ^10.12.0 || >=12.0.0}
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
-  flat-cache@4.0.1:
-    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
-    engines: {node: '>=16'}
+  didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
-  flat@5.0.2:
-    resolution: {integrity: sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==}
-    hasBin: true
+  diff-sequences@29.6.3:
+    resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  flatted@3.3.3:
-    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+  diffie-hellman@5.0.3:
+    resolution: {integrity: sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==}
 
-  focus-trap@7.6.4:
-    resolution: {integrity: sha512-xx560wGBk7seZ6y933idtjJQc1l+ck+pI3sKvhKozdBV1dRZoKhkW5xoCaFv9tQiX5RH1xfSxjuNu6g+lmN/gw==}
+  dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
 
-  follow-redirects@1.15.9:
-    resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
+  dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
-  for-each@0.3.5:
-    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
-    engines: {node: '>= 0.4'}
+  doctrine@2.1.0:
+    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
+    engines: {node: '>=0.10.0'}
 
-  foreground-child@3.3.1:
-    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
-    engines: {node: '>=14'}
+  doctrine@3.0.0:
+    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
+    engines: {node: '>=6.0.0'}
 
-  form-data@4.0.2:
-    resolution: {integrity: sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==}
-    engines: {node: '>= 6'}
+  dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
-  forwarded@0.2.0:
-    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
-    engines: {node: '>= 0.6'}
+  dom-helpers@5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
 
-  fraction.js@4.3.7:
-    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
+  dom-serializer@1.4.1:
+    resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
 
-  fresh@2.0.0:
-    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
-    engines: {node: '>= 0.8'}
+  dom-walk@0.1.2:
+    resolution: {integrity: sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==}
 
-  front-matter@4.0.2:
-    resolution: {integrity: sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==}
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
 
-  fs-constants@1.0.0:
-    resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
+  domhandler@4.3.1:
+    resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
+    engines: {node: '>= 4'}
 
-  fs-extra@10.1.0:
-    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
-    engines: {node: '>=12'}
+  domutils@2.8.0:
+    resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
 
-  fs-extra@7.0.1:
-    resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
-    engines: {node: '>=6 <7 || >=8'}
+  dotenv-expand@11.0.7:
+    resolution: {integrity: sha512-zIHwmZPRshsCdpMDyVsqGmgyP0yT8GAgXUnkdAoJisxvf33k7yO6OuoKmcTGuXPWSsm8Oh88nZicRLA9Y0rUeA==}
+    engines: {node: '>=12'}
 
-  fs-extra@8.1.0:
-    resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
-    engines: {node: '>=6 <7 || >=8'}
+  dotenv@16.4.7:
+    resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==}
+    engines: {node: '>=12'}
 
-  fs.realpath@1.0.0:
-    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+  dotenv@8.6.0:
+    resolution: {integrity: sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==}
+    engines: {node: '>=10'}
 
-  fsevents@2.3.2:
-    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
 
-  fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
-  function-bind@1.1.2:
-    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+  editorconfig@1.0.4:
+    resolution: {integrity: sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==}
+    engines: {node: '>=14'}
+    hasBin: true
 
-  function.prototype.name@1.1.8:
-    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
-    engines: {node: '>= 0.4'}
+  ee-first@1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
-  functions-have-names@1.2.3:
-    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+  electron-to-chromium@1.5.155:
+    resolution: {integrity: sha512-ps5KcGGmwL8VaeJlvlDlu4fORQpv3+GIcF5I3f9tUKUlJ/wsysh6HU8P5L1XWRYeXfA0oJd4PyM8ds8zTFf6Ng==}
 
-  fuse.js@7.1.0:
-    resolution: {integrity: sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==}
-    engines: {node: '>=10'}
+  elliptic@6.6.1:
+    resolution: {integrity: sha512-RaddvvMatK2LJHqFJ+YA4WysVN5Ita9E35botqIYspQ4TkRAlCicdzKOjlyv/1Za5RyTNn7di//eEV0uTAfe3g==}
 
-  gensync@1.0.0-beta.2:
-    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
-    engines: {node: '>=6.9.0'}
+  embla-carousel-react@8.5.1:
+    resolution: {integrity: sha512-z9Y0K84BJvhChXgqn2CFYbfEi6AwEr+FFVVKm/MqbTQ2zIzO1VQri6w67LcfpVF0AjbhwVMywDZqY4alYkjW5w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
 
-  get-caller-file@2.0.5:
-    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
-    engines: {node: 6.* || 8.* || >= 10.*}
+  embla-carousel-reactive-utils@8.5.1:
+    resolution: {integrity: sha512-n7VSoGIiiDIc4MfXF3ZRTO59KDp820QDuyBDGlt5/65+lumPHxX2JLz0EZ23hZ4eg4vZGUXwMkYv02fw2JVo/A==}
+    peerDependencies:
+      embla-carousel: 8.5.1
 
-  get-intrinsic@1.3.0:
-    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
-    engines: {node: '>= 0.4'}
+  embla-carousel@8.5.1:
+    resolution: {integrity: sha512-JUb5+FOHobSiWQ2EJNaueCNT/cQU9L6XWBbWmorWPQT9bkbk+fhsuLr8wWrzXKagO3oWszBO7MSx+GfaRk4E6A==}
 
-  get-proto@1.0.1:
-    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
-    engines: {node: '>= 0.4'}
+  emoji-regex-xs@1.0.0:
+    resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
 
-  get-random-values@3.0.0:
-    resolution: {integrity: sha512-mNznaBdYcpz7UAdnOtDGcLdNwAa79mXl5htEyyZ51YaeAWNf2g4x/2yCVBdNNTbi35wX0Stc2PJXM7G6rcONOA==}
-    engines: {node: 18 || >=20}
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
-  get-symbol-description@1.1.0:
-    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
-    engines: {node: '>= 0.4'}
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
-  get-tsconfig@4.10.1:
-    resolution: {integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==}
+  encodeurl@2.0.0:
+    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
+    engines: {node: '>= 0.8'}
 
-  glob-parent@5.1.2:
-    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
-    engines: {node: '>= 6'}
+  end-of-stream@1.4.4:
+    resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
 
-  glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+  enhanced-resolve@5.18.1:
+    resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==}
     engines: {node: '>=10.13.0'}
 
-  glob@10.4.5:
-    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
-    hasBin: true
+  enquirer@2.3.6:
+    resolution: {integrity: sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==}
+    engines: {node: '>=8.6'}
 
-  glob@11.0.2:
-    resolution: {integrity: sha512-YT7U7Vye+t5fZ/QMkBFrTJ7ZQxInIUjwyAjVj84CYXqgBdv30MFUPGnBR6sQaVq6Is15wYJUsnzTuWaGRBhBAQ==}
-    engines: {node: 20 || >=22}
-    hasBin: true
+  enquirer@2.4.1:
+    resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
+    engines: {node: '>=8.6'}
 
-  glob@7.1.7:
-    resolution: {integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==}
-    deprecated: Glob versions prior to v9 are no longer supported
-
-  glob@7.2.3:
-    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    deprecated: Glob versions prior to v9 are no longer supported
-
-  glob@8.1.0:
-    resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
-    engines: {node: '>=12'}
-    deprecated: Glob versions prior to v9 are no longer supported
-
-  global-modules@2.0.0:
-    resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==}
-    engines: {node: '>=6'}
-
-  global-prefix@3.0.0:
-    resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
-    engines: {node: '>=6'}
-
-  global@4.4.0:
-    resolution: {integrity: sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==}
-
-  globals@11.12.0:
-    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
-    engines: {node: '>=4'}
+  entities@2.2.0:
+    resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
 
-  globals@13.24.0:
-    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
-    engines: {node: '>=8'}
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
 
-  globals@14.0.0:
-    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
-    engines: {node: '>=18'}
+  entities@6.0.0:
+    resolution: {integrity: sha512-aKstq2TDOndCn4diEyp9Uq/Flu2i1GlLkc6XIDQSDMuaFE3OPW5OphLCyQ5SpSJZTb4reN+kTcYru5yIfXoRPw==}
+    engines: {node: '>=0.12'}
 
-  globals@16.1.0:
-    resolution: {integrity: sha512-aibexHNbb/jiUSObBgpHLj+sIuUmJnYcgXBlrfsiDZ9rt4aF2TFRbyLgZ2iFQuVZ1K5Mx3FVkbKRSgKrbK3K2g==}
-    engines: {node: '>=18'}
+  error-ex@1.3.2:
+    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
 
-  globalthis@1.0.4:
-    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
+  es-abstract@1.23.9:
+    resolution: {integrity: sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==}
     engines: {node: '>= 0.4'}
 
-  globby@11.1.0:
-    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
-    engines: {node: '>=10'}
-
-  globjoin@0.1.4:
-    resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
-
-  gopd@1.2.0:
-    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
 
-  graceful-fs@4.2.11:
-    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
-
-  graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
-
-  hard-rejection@2.1.0:
-    resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==}
-    engines: {node: '>=6'}
-
-  has-bigints@1.1.0:
-    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
-  has-flag@4.0.0:
-    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
-    engines: {node: '>=8'}
+  es-iterator-helpers@1.2.1:
+    resolution: {integrity: sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==}
+    engines: {node: '>= 0.4'}
 
-  has-property-descriptors@1.0.2:
-    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
 
-  has-proto@1.2.0:
-    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
 
-  has-symbols@1.1.0:
-    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
     engines: {node: '>= 0.4'}
 
-  has-tostringtag@1.0.2:
-    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+  es-shim-unscopables@1.1.0:
+    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
     engines: {node: '>= 0.4'}
 
-  hash-base@3.0.5:
-    resolution: {integrity: sha512-vXm0l45VbcHEVlTCzs8M+s0VeYsB2lnlAaThoLKGXr3bE/VWDOelNUnycUPEhKEaXARL2TEFjBOyUiM6+55KBg==}
-    engines: {node: '>= 0.10'}
+  es-to-primitive@1.3.0:
+    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
+    engines: {node: '>= 0.4'}
 
-  hash.js@1.1.7:
-    resolution: {integrity: sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==}
+  esbuild-plugin-polyfill-node@0.3.0:
+    resolution: {integrity: sha512-SHG6CKUfWfYyYXGpW143NEZtcVVn8S/WHcEOxk62LuDXnY4Zpmc+WmxJKN6GMTgTClXJXhEM5KQlxKY6YjbucQ==}
+    peerDependencies:
+      esbuild: '*'
 
-  hasown@2.0.2:
-    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
-    engines: {node: '>= 0.4'}
+  esbuild-plugin-preserve-directives@0.0.11:
+    resolution: {integrity: sha512-OolFhx1h/1ADEEoPjVi0hYWru1pTZBHki7XozawYVkhRhO63mwZT6isLylbwPs7dJ72doVQJGHCT2I1l9z8DcA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      esbuild: ^0.21.0
 
-  hast-util-to-html@9.0.5:
-    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+  esbuild-plugins-node-modules-polyfill@1.7.0:
+    resolution: {integrity: sha512-Z81w5ReugIBAgufGeGWee+Uxzgs5Na4LprUAK3XlJEh2ktY3LkNuEGMaZyBXxQxGK8SQDS5yKLW5QKGF5qLjYA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      esbuild: '>=0.14.0 <=0.25.x'
 
-  hast-util-whitespace@3.0.0:
-    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+  esbuild@0.21.5:
+    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
+    engines: {node: '>=12'}
+    hasBin: true
 
-  he@1.2.0:
-    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+  esbuild@0.25.4:
+    resolution: {integrity: sha512-8pgjLUcUjcgDg+2Q4NYXnPbo/vncAY4UmyaCm0jZevERqCHZIaWwdJHkf8XQtu4AxSKCdvrUbT0XUr1IdZzI8Q==}
+    engines: {node: '>=18'}
     hasBin: true
 
-  hmac-drbg@1.0.1:
-    resolution: {integrity: sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==}
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
 
-  hookable@5.5.3:
-    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+  escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
 
-  hosted-git-info@2.8.9:
-    resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
+  escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
 
-  hosted-git-info@4.1.0:
-    resolution: {integrity: sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==}
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  html-encoding-sniffer@4.0.0:
-    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
-    engines: {node: '>=18'}
-
-  html-escaper@2.0.2:
-    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
-
-  html-tags@3.3.1:
-    resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
-    engines: {node: '>=8'}
-
-  html-void-elements@3.0.0:
-    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
-
-  http-errors@2.0.0:
-    resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
-    engines: {node: '>= 0.8'}
+  eslint-config-airbnb-base@15.0.0:
+    resolution: {integrity: sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    peerDependencies:
+      eslint: ^7.32.0 || ^8.2.0
+      eslint-plugin-import: ^2.25.2
 
-  http-proxy-agent@7.0.2:
-    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
-    engines: {node: '>= 14'}
+  eslint-config-airbnb-typescript@17.1.0:
+    resolution: {integrity: sha512-GPxI5URre6dDpJ0CtcthSZVBAfI+Uw7un5OYNVxP2EYi3H81Jw701yFP7AU+/vCE7xBtFmjge7kfhhk4+RAiig==}
+    peerDependencies:
+      '@typescript-eslint/eslint-plugin': ^5.13.0 || ^6.0.0
+      '@typescript-eslint/parser': ^5.0.0 || ^6.0.0
+      eslint: ^7.32.0 || ^8.2.0
+      eslint-plugin-import: ^2.25.3
 
-  https-proxy-agent@7.0.6:
-    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
-    engines: {node: '>= 14'}
+  eslint-config-airbnb@19.0.4:
+    resolution: {integrity: sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==}
+    engines: {node: ^10.12.0 || ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^7.32.0 || ^8.2.0
+      eslint-plugin-import: ^2.25.3
+      eslint-plugin-jsx-a11y: ^6.5.1
+      eslint-plugin-react: ^7.28.0
+      eslint-plugin-react-hooks: ^4.3.0
 
-  human-id@4.1.1:
-    resolution: {integrity: sha512-3gKm/gCSUipeLsRYZbbdA1BD83lBoWUkZ7G9VFrhWPAU76KwYo5KR8V28bpoPm/ygy0x5/GCbpRQdY7VLYCoIg==}
+  eslint-config-prettier@8.10.0:
+    resolution: {integrity: sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==}
     hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
 
-  iconv-lite@0.4.24:
-    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
-    engines: {node: '>=0.10.0'}
+  eslint-import-resolver-node@0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
 
-  iconv-lite@0.6.3:
-    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
-    engines: {node: '>=0.10.0'}
+  eslint-module-utils@2.12.0:
+    resolution: {integrity: sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
 
-  icss-utils@5.1.0:
-    resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
-    engines: {node: ^10 || ^12 || >= 14}
+  eslint-plugin-es@3.0.1:
+    resolution: {integrity: sha512-GUmAsJaN4Fc7Gbtl8uOBlayo2DqhwWvEzykMHSCZHU3XdJ+NSzzZcVhXh3VxX5icqQ+oQdIEawXX8xkR3mIFmQ==}
+    engines: {node: '>=8.10.0'}
     peerDependencies:
-      postcss: ^8.1.0
+      eslint: '>=4.19.1'
 
-  ieee754@1.2.1:
-    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+  eslint-plugin-eslint-plugin@5.5.1:
+    resolution: {integrity: sha512-9AmfZzcQ7QHwpzfAQpZ7xdtwHYViylmlnruCH0aV64/tuoH3igGXg91vr0e6ShLf/mrAYGqLw5LZ/gOxJeRXnw==}
+    engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0}
+    peerDependencies:
+      eslint: '>=7.0.0'
 
-  ignore@5.3.2:
-    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
-    engines: {node: '>= 4'}
+  eslint-plugin-header@3.1.1:
+    resolution: {integrity: sha512-9vlKxuJ4qf793CmeeSrZUvVClw6amtpghq3CuWcB5cUNnWHQhgcqy5eF8oVKFk1G3Y/CbchGfEaw3wiIJaNmVg==}
+    peerDependencies:
+      eslint: '>=7.7.0'
 
-  ignore@7.0.4:
-    resolution: {integrity: sha512-gJzzk+PQNznz8ysRrC0aOkBNVRBDtE1n53IqyqEf3PXrYwomFs5q4pGMizBMJF+ykh03insJ27hB8gSrD2Hn8A==}
-    engines: {node: '>= 4'}
+  eslint-plugin-import@2.31.0:
+    resolution: {integrity: sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
 
-  immutable@5.1.2:
-    resolution: {integrity: sha512-qHKXW1q6liAk1Oys6umoaZbDRqjcjgSrbnrifHsfsttza7zcvRAsL7mMV6xWcyhwQy7Xj5v4hhbr6b+iDYwlmQ==}
+  eslint-plugin-jest@27.9.0:
+    resolution: {integrity: sha512-QIT7FH7fNmd9n4se7FFKHbsLKGQiw885Ds6Y/sxKgCZ6natwCsXdgPOADnYVxN2QrRweF0FZWbJ6S7Rsn7llug==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    peerDependencies:
+      '@typescript-eslint/eslint-plugin': ^5.0.0 || ^6.0.0 || ^7.0.0
+      eslint: ^7.0.0 || ^8.0.0
+      jest: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/eslint-plugin':
+        optional: true
+      jest:
+        optional: true
 
-  import-fresh@3.3.1:
-    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
-    engines: {node: '>=6'}
+  eslint-plugin-jsx-a11y@6.10.2:
+    resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
 
-  import-lazy@4.0.0:
-    resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==}
-    engines: {node: '>=8'}
+  eslint-plugin-node@11.1.0:
+    resolution: {integrity: sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g==}
+    engines: {node: '>=8.10.0'}
+    peerDependencies:
+      eslint: '>=5.16.0'
 
-  import-meta-resolve@3.1.1:
-    resolution: {integrity: sha512-qeywsE/KC3w9Fd2ORrRDUw6nS/nLwZpXgfrOc2IILvZYnCaEMd+D56Vfg9k4G29gIeVi3XKql1RQatME8iYsiw==}
+  eslint-plugin-prettier@4.2.1:
+    resolution: {integrity: sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      eslint: '>=7.28.0'
+      eslint-config-prettier: '*'
+      prettier: '>=2.0.0'
+    peerDependenciesMeta:
+      eslint-config-prettier:
+        optional: true
 
-  imurmurhash@0.1.4:
-    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
-    engines: {node: '>=0.8.19'}
+  eslint-plugin-prettier@5.4.0:
+    resolution: {integrity: sha512-BvQOvUhkVQM1i63iMETK9Hjud9QhqBnbtT1Zc642p9ynzBuCe5pybkOnvqZIBypXmMlsGcnU4HZ8sCTPfpAexA==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      '@types/eslint': '>=8.0.0'
+      eslint: '>=8.0.0'
+      eslint-config-prettier: '>= 7.0.0 <10.0.0 || >=10.1.0'
+      prettier: '>=3.0.0'
+    peerDependenciesMeta:
+      '@types/eslint':
+        optional: true
+      eslint-config-prettier:
+        optional: true
 
-  indent-string@4.0.0:
-    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
-    engines: {node: '>=8'}
+  eslint-plugin-react-hooks@4.6.2:
+    resolution: {integrity: sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
 
-  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.
+  eslint-plugin-react-hooks@5.2.0:
+    resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
 
-  inherits@2.0.4:
-    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+  eslint-plugin-react-refresh@0.4.20:
+    resolution: {integrity: sha512-XpbHQ2q5gUF8BGOX4dHe+71qoirYMhApEPZ7sfhF/dNnOF1UXnCMGZf79SFTBO7Bz5YEIT4TMieSlJBWhP9WBA==}
+    peerDependencies:
+      eslint: '>=8.40'
 
-  ini@1.3.8:
-    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+  eslint-plugin-react@7.37.5:
+    resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
 
-  internal-slot@1.1.0:
-    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
-    engines: {node: '>= 0.4'}
+  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'}
+    peerDependencies:
+      eslint: ^7.5.0 || ^8.0.0
 
-  ipaddr.js@1.9.1:
-    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
-    engines: {node: '>= 0.10'}
+  eslint-plugin-tsdoc@0.2.17:
+    resolution: {integrity: sha512-xRmVi7Zx44lOBuYqG8vzTXuL6IdGOeF9nHX17bjJ8+VE6fsxpdGem0/SBTmAwgYMKYB1WBkqRJVQ+n8GK041pA==}
 
-  is-array-buffer@3.0.5:
-    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
-    engines: {node: '>= 0.4'}
+  eslint-plugin-typescript-sort-keys@2.3.0:
+    resolution: {integrity: sha512-3LAcYulo5gNYiPWee+TksITfvWeBuBjGgcSLTacPESFVKEoy8laOQuZvJlSCwTBHT2SCGIxr3bJ56zuux+3MCQ==}
+    engines: {node: 12 || >= 13.9}
+    peerDependencies:
+      '@typescript-eslint/parser': ^1 || ^2 || ^3 || ^4 || ^5
+      eslint: ^5 || ^6 || ^7 || ^8
+      typescript: ^3 || ^4 || ^5
 
-  is-arrayish@0.2.1:
-    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+  eslint-plugin-vue@10.1.0:
+    resolution: {integrity: sha512-/VTiJ1eSfNLw6lvG9ENySbGmcVvz6wZ9nA7ZqXlLBY2RkaF15iViYKxglWiIch12KiLAj0j1iXPYU6W4wTROFA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      vue-eslint-parser: ^10.0.0
 
-  is-arrayish@0.3.2:
-    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+  eslint-scope@5.1.1:
+    resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
+    engines: {node: '>=8.0.0'}
 
-  is-async-function@2.1.1:
-    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
-    engines: {node: '>= 0.4'}
+  eslint-scope@7.2.2:
+    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  is-bigint@1.1.0:
-    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
-    engines: {node: '>= 0.4'}
+  eslint-scope@8.3.0:
+    resolution: {integrity: sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  is-boolean-object@1.2.2:
-    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
-    engines: {node: '>= 0.4'}
+  eslint-utils@2.1.0:
+    resolution: {integrity: sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==}
+    engines: {node: '>=6'}
 
-  is-bun-module@2.0.0:
-    resolution: {integrity: sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==}
+  eslint-utils@3.0.0:
+    resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
+    engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
+    peerDependencies:
+      eslint: '>=5'
 
-  is-callable@1.2.7:
-    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
-    engines: {node: '>= 0.4'}
+  eslint-visitor-keys@1.3.0:
+    resolution: {integrity: sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==}
+    engines: {node: '>=4'}
 
-  is-core-module@2.16.1:
-    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
-    engines: {node: '>= 0.4'}
+  eslint-visitor-keys@2.1.0:
+    resolution: {integrity: sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==}
+    engines: {node: '>=10'}
 
-  is-data-view@1.0.2:
-    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
-    engines: {node: '>= 0.4'}
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  is-date-object@1.1.0:
-    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
-    engines: {node: '>= 0.4'}
+  eslint-visitor-keys@4.2.0:
+    resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  is-docker@2.2.1:
-    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
-    engines: {node: '>=8'}
+  eslint@8.57.0:
+    resolution: {integrity: sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
 
-  is-extglob@2.1.1:
-    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
-    engines: {node: '>=0.10.0'}
+  eslint@9.28.0:
+    resolution: {integrity: sha512-ocgh41VhRlf9+fVpe7QKzwLj9c92fDiqOj8Y3Sd4/ZmVA4Btx4PlUYPq4pp9JDyupkf1upbEXecxL2mwNV7jPQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
 
-  is-finalizationregistry@1.1.1:
-    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
-    engines: {node: '>= 0.4'}
+  espree@10.3.0:
+    resolution: {integrity: sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  is-fullwidth-code-point@3.0.0:
-    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
-    engines: {node: '>=8'}
+  espree@9.6.1:
+    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  is-generator-function@1.1.0:
-    resolution: {integrity: sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==}
-    engines: {node: '>= 0.4'}
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
 
-  is-glob@4.0.3:
-    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
-    engines: {node: '>=0.10.0'}
+  esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
+    engines: {node: '>=0.10'}
 
-  is-interactive@1.0.0:
-    resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
-    engines: {node: '>=8'}
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
 
-  is-map@2.0.3:
-    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
-    engines: {node: '>= 0.4'}
+  estraverse@4.3.0:
+    resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
+    engines: {node: '>=4.0'}
 
-  is-module@1.0.0:
-    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
 
-  is-number-object@1.1.1:
-    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
-    engines: {node: '>= 0.4'}
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
-  is-number@7.0.0:
-    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
-    engines: {node: '>=0.12.0'}
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
-  is-path-inside@3.0.3:
-    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
-    engines: {node: '>=8'}
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
 
-  is-plain-obj@1.1.0:
-    resolution: {integrity: sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==}
-    engines: {node: '>=0.10.0'}
-
-  is-plain-object@5.0.0:
-    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
-    engines: {node: '>=0.10.0'}
-
-  is-potential-custom-element-name@1.0.1:
-    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+  etag@1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
 
-  is-promise@4.0.0:
-    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
+  eventemitter3@4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
 
-  is-reference@1.2.1:
-    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
+  evp_bytestokey@1.0.3:
+    resolution: {integrity: sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==}
 
-  is-regex@1.2.1:
-    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
-    engines: {node: '>= 0.4'}
+  expect-type@1.2.1:
+    resolution: {integrity: sha512-/kP8CAwxzLVEeFrMm4kMmy4CCDlpipyA7MYLVrdJIkV0fYF0UaigQHRsxHiuY/GEea+bh4KSv3TIlgr+2UL6bw==}
+    engines: {node: '>=12.0.0'}
 
-  is-set@2.0.3:
-    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
-    engines: {node: '>= 0.4'}
+  express@5.1.0:
+    resolution: {integrity: sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==}
+    engines: {node: '>= 18'}
 
-  is-shared-array-buffer@1.0.4:
-    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
-    engines: {node: '>= 0.4'}
+  exsolve@1.0.5:
+    resolution: {integrity: sha512-pz5dvkYYKQ1AHVrgOzBKWeP4u4FRb3a6DNK2ucr0OoNwYIU4QWsJ+NM36LLzORT+z845MzKHHhpXiUF5nvQoJg==}
 
-  is-string@1.1.1:
-    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
-    engines: {node: '>= 0.4'}
+  extendable-error@0.1.7:
+    resolution: {integrity: sha512-UOiS2in6/Q0FK0R0q6UY9vYpQ21mr/Qn1KOnte7vsACuNJf514WvCCUHSRCPcgjPT2bAhNIJdlE6bVap1GKmeg==}
 
-  is-subdir@1.2.0:
-    resolution: {integrity: sha512-2AT6j+gXe/1ueqbW6fLZJiIw3F8iXGJtt0yDrZaBhAZEG1raiTxKWU+IPqMCzQAXOUCKdA4UDMgacKH25XG2Cw==}
+  external-editor@3.1.0:
+    resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
     engines: {node: '>=4'}
 
-  is-symbol@1.1.1:
-    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
-    engines: {node: '>= 0.4'}
-
-  is-typed-array@1.1.15:
-    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
-    engines: {node: '>= 0.4'}
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
-  is-unicode-supported@0.1.0:
-    resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
-    engines: {node: '>=10'}
+  fast-diff@1.3.0:
+    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
 
-  is-weakmap@2.0.2:
-    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
-    engines: {node: '>= 0.4'}
+  fast-equals@5.2.2:
+    resolution: {integrity: sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==}
+    engines: {node: '>=6.0.0'}
 
-  is-weakref@1.1.1:
-    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
-    engines: {node: '>= 0.4'}
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
 
-  is-weakset@2.0.4:
-    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
-    engines: {node: '>= 0.4'}
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
-  is-what@4.1.16:
-    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
-    engines: {node: '>=12.13'}
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
-  is-windows@1.0.2:
-    resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
-    engines: {node: '>=0.10.0'}
+  fast-sha256@1.3.0:
+    resolution: {integrity: sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ==}
 
-  is-wsl@2.2.0:
-    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
-    engines: {node: '>=8'}
+  fast-uri@3.0.6:
+    resolution: {integrity: sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==}
 
-  isarray@1.0.0:
-    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+  fastest-levenshtein@1.0.16:
+    resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
+    engines: {node: '>= 4.9.1'}
 
-  isarray@2.0.5:
-    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+  fastq@1.19.1:
+    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
 
-  isexe@2.0.0:
-    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+  fdir@6.4.4:
+    resolution: {integrity: sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
 
-  istanbul-lib-coverage@3.2.2:
-    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
+  figures@3.2.0:
+    resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
     engines: {node: '>=8'}
 
-  istanbul-lib-report@3.0.1:
-    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
-    engines: {node: '>=10'}
+  file-entry-cache@6.0.1:
+    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
+    engines: {node: ^10.12.0 || >=12.0.0}
 
-  istanbul-lib-source-maps@5.0.6:
-    resolution: {integrity: sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==}
-    engines: {node: '>=10'}
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
 
-  istanbul-reports@3.1.7:
-    resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==}
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
-  iterator.prototype@1.1.5:
-    resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
-    engines: {node: '>= 0.4'}
-
-  jackspeak@3.4.3:
-    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
-
-  jackspeak@4.1.1:
-    resolution: {integrity: sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==}
-    engines: {node: 20 || >=22}
-
-  jest-diff@29.7.0:
-    resolution: {integrity: sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-get-type@29.6.3:
-    resolution: {integrity: sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+  filter-obj@1.1.0:
+    resolution: {integrity: sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==}
+    engines: {node: '>=0.10.0'}
 
-  jiti@2.4.2:
-    resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
-    hasBin: true
+  finalhandler@2.1.0:
+    resolution: {integrity: sha512-/t88Ty3d5JWQbWYgaOGCCYfXRwV1+be02WqYYlL6h0lEiUAMPM8o8qKGO01YIkOHzka2up08wvgYD0mDiI+q3Q==}
+    engines: {node: '>= 0.8'}
 
-  jju@1.4.0:
-    resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
+  find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
 
-  jose@4.15.9:
-    resolution: {integrity: sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==}
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
 
-  jose@5.10.0:
-    resolution: {integrity: sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg==}
+  flat-cache@3.2.0:
+    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
+    engines: {node: ^10.12.0 || >=12.0.0}
 
-  jose@6.0.11:
-    resolution: {integrity: sha512-QxG7EaliDARm1O1S8BGakqncGT9s25bKL1WSf6/oa17Tkqwi8D2ZNglqCF+DsYF88/rV66Q/Q2mFAy697E1DUg==}
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
 
-  js-beautify@1.15.4:
-    resolution: {integrity: sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==}
-    engines: {node: '>=14'}
+  flat@5.0.2:
+    resolution: {integrity: sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==}
     hasBin: true
 
-  js-cookie@3.0.5:
-    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
-    engines: {node: '>=14'}
-
-  js-tokens@4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-
-  js-yaml@3.14.1:
-    resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
-    hasBin: true
+  flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
-  js-yaml@4.1.0:
-    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
-    hasBin: true
+  focus-trap@7.6.4:
+    resolution: {integrity: sha512-xx560wGBk7seZ6y933idtjJQc1l+ck+pI3sKvhKozdBV1dRZoKhkW5xoCaFv9tQiX5RH1xfSxjuNu6g+lmN/gw==}
 
-  jsdom@26.1.0:
-    resolution: {integrity: sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==}
-    engines: {node: '>=18'}
+  follow-redirects@1.15.9:
+    resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
+    engines: {node: '>=4.0'}
     peerDependencies:
-      canvas: ^3.0.0
+      debug: '*'
     peerDependenciesMeta:
-      canvas:
+      debug:
         optional: true
 
-  jsesc@3.1.0:
-    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
-    engines: {node: '>=6'}
-    hasBin: true
+  for-each@0.3.5:
+    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
+    engines: {node: '>= 0.4'}
 
-  json-buffer@3.0.1:
-    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+  foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
 
-  json-parse-even-better-errors@2.3.1:
-    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+  form-data@4.0.2:
+    resolution: {integrity: sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==}
+    engines: {node: '>= 6'}
 
-  json-schema-traverse@0.4.1:
-    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+  forwarded@0.2.0:
+    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
+    engines: {node: '>= 0.6'}
 
-  json-schema-traverse@1.0.0:
-    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+  fraction.js@4.3.7:
+    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
-  json-schema@0.4.0:
-    resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
+  fresh@2.0.0:
+    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
+    engines: {node: '>= 0.8'}
 
-  json-stable-stringify-without-jsonify@1.0.1:
-    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+  front-matter@4.0.2:
+    resolution: {integrity: sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==}
 
-  json5@1.0.2:
-    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
-    hasBin: true
+  fs-constants@1.0.0:
+    resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
 
-  json5@2.2.3:
-    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
-    engines: {node: '>=6'}
-    hasBin: true
+  fs-extra@10.1.0:
+    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
+    engines: {node: '>=12'}
 
-  jsonc-parser@3.2.0:
-    resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
+  fs-extra@7.0.1:
+    resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
+    engines: {node: '>=6 <7 || >=8'}
 
-  jsonfile@4.0.0:
-    resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
+  fs-extra@8.1.0:
+    resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
+    engines: {node: '>=6 <7 || >=8'}
 
-  jsonfile@6.1.0:
-    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+  fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
-  jsx-ast-utils@3.3.5:
-    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
-    engines: {node: '>=4.0'}
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
 
-  jwt-decode@4.0.0:
-    resolution: {integrity: sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==}
-    engines: {node: '>=18'}
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
 
-  keyv@4.5.4:
-    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
-  kind-of@6.0.3:
-    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
-    engines: {node: '>=0.10.0'}
+  function.prototype.name@1.1.8:
+    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
+    engines: {node: '>= 0.4'}
 
-  known-css-properties@0.26.0:
-    resolution: {integrity: sha512-5FZRzrZzNTBruuurWpvZnvP9pum+fe0HcK8z/ooo+U+Hmp4vtbyp1/QDsqmufirXy4egGzbaH/y2uCZf+6W5Kg==}
+  functions-have-names@1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
 
-  language-subtag-registry@0.3.23:
-    resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
+  fuse.js@7.1.0:
+    resolution: {integrity: sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==}
+    engines: {node: '>=10'}
 
-  language-tags@1.0.9:
-    resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
-    engines: {node: '>=0.10'}
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
 
-  levn@0.4.1:
-    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
-    engines: {node: '>= 0.8.0'}
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
 
-  lightningcss-darwin-arm64@1.30.1:
-    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [darwin]
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
 
-  lightningcss-darwin-x64@1.30.1:
-    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [darwin]
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
 
-  lightningcss-freebsd-x64@1.30.1:
-    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [freebsd]
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
 
-  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]
+  get-random-values@3.0.0:
+    resolution: {integrity: sha512-mNznaBdYcpz7UAdnOtDGcLdNwAa79mXl5htEyyZ51YaeAWNf2g4x/2yCVBdNNTbi35wX0Stc2PJXM7G6rcONOA==}
+    engines: {node: 18 || >=20}
 
-  lightningcss-linux-arm64-gnu@1.30.1:
-    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [linux]
+  get-symbol-description@1.1.0:
+    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
+    engines: {node: '>= 0.4'}
 
-  lightningcss-linux-arm64-musl@1.30.1:
-    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [linux]
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
 
-  lightningcss-linux-x64-gnu@1.30.1:
-    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [linux]
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
 
-  lightningcss-linux-x64-musl@1.30.1:
-    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [linux]
+  glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
+    hasBin: true
 
-  lightningcss-win32-arm64-msvc@1.30.1:
-    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [win32]
+  glob@11.0.2:
+    resolution: {integrity: sha512-YT7U7Vye+t5fZ/QMkBFrTJ7ZQxInIUjwyAjVj84CYXqgBdv30MFUPGnBR6sQaVq6Is15wYJUsnzTuWaGRBhBAQ==}
+    engines: {node: 20 || >=22}
+    hasBin: true
 
-  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]
+  glob@7.1.7:
+    resolution: {integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==}
+    deprecated: Glob versions prior to v9 are no longer supported
 
-  lightningcss@1.30.1:
-    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
-    engines: {node: '>= 12.0.0'}
+  glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
 
-  lilconfig@2.1.0:
-    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
-    engines: {node: '>=10'}
+  glob@8.1.0:
+    resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
+    engines: {node: '>=12'}
+    deprecated: Glob versions prior to v9 are no longer supported
 
-  lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+  global-modules@2.0.0:
+    resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==}
+    engines: {node: '>=6'}
 
-  lines-and-columns@2.0.3:
-    resolution: {integrity: sha512-cNOjgCnLB+FnvWWtyRTzmB3POJ+cXxTA81LoW7u8JdmhfXzriropYwpjShnz1QLLWsQwY7nIxoDmcPTwphDK9w==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+  global-prefix@3.0.0:
+    resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
+    engines: {node: '>=6'}
 
-  local-pkg@1.1.1:
-    resolution: {integrity: sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==}
-    engines: {node: '>=14'}
+  global@4.4.0:
+    resolution: {integrity: sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==}
 
-  locate-path@5.0.0:
-    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
-    engines: {node: '>=8'}
+  globals@11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
 
-  locate-path@6.0.0:
-    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
-    engines: {node: '>=10'}
+  globals@13.24.0:
+    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
+    engines: {node: '>=8'}
 
-  lodash.isempty@4.4.0:
-    resolution: {integrity: sha512-oKMuF3xEeqDltrGMfDxAPGIVMSSRv8tbRSODbrs4KGsRRLEhrW8N8Rd4DRgB2+621hY8A8XwwrTVhXWpxFvMzg==}
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
 
-  lodash.memoize@4.1.2:
-    resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
+  globals@16.1.0:
+    resolution: {integrity: sha512-aibexHNbb/jiUSObBgpHLj+sIuUmJnYcgXBlrfsiDZ9rt4aF2TFRbyLgZ2iFQuVZ1K5Mx3FVkbKRSgKrbK3K2g==}
+    engines: {node: '>=18'}
 
-  lodash.merge@4.6.2:
-    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+  globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
+    engines: {node: '>= 0.4'}
 
-  lodash.startcase@4.4.0:
-    resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
+  globby@11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
 
-  lodash.truncate@4.4.2:
-    resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
+  globjoin@0.1.4:
+    resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
 
-  lodash.uniq@4.5.0:
-    resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
 
-  lodash@4.17.21:
-    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
-  log-symbols@4.1.0:
-    resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
-    engines: {node: '>=10'}
+  graphemer@1.4.0:
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
-  loose-envify@1.4.0:
-    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
-    hasBin: true
+  hard-rejection@2.1.0:
+    resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==}
+    engines: {node: '>=6'}
 
-  loupe@3.1.3:
-    resolution: {integrity: sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==}
+  has-bigints@1.1.0:
+    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
+    engines: {node: '>= 0.4'}
 
-  lru-cache@10.4.3:
-    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
 
-  lru-cache@11.1.0:
-    resolution: {integrity: sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A==}
-    engines: {node: 20 || >=22}
+  has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
 
-  lru-cache@5.1.1:
-    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+  has-proto@1.2.0:
+    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
+    engines: {node: '>= 0.4'}
 
-  lru-cache@6.0.0:
-    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
-    engines: {node: '>=10'}
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
 
-  lucide-react@0.294.0:
-    resolution: {integrity: sha512-V7o0/VECSGbLHn3/1O67FUgBwWB+hmzshrgDVRJQhMh8uj5D3HBuIvhuAmQTtlupILSplwIZg5FTc4tTKMA2SA==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
 
-  lz-string@1.5.0:
-    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
-    hasBin: true
+  hash-base@3.0.5:
+    resolution: {integrity: sha512-vXm0l45VbcHEVlTCzs8M+s0VeYsB2lnlAaThoLKGXr3bE/VWDOelNUnycUPEhKEaXARL2TEFjBOyUiM6+55KBg==}
+    engines: {node: '>= 0.10'}
 
-  magic-string@0.30.17:
-    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
+  hash.js@1.1.7:
+    resolution: {integrity: sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==}
 
-  magicast@0.3.5:
-    resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
 
-  make-dir@4.0.0:
-    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
-    engines: {node: '>=10'}
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
 
-  map-obj@1.0.1:
-    resolution: {integrity: sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==}
-    engines: {node: '>=0.10.0'}
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
 
-  map-obj@4.3.0:
-    resolution: {integrity: sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==}
-    engines: {node: '>=8'}
+  he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
 
-  mark.js@8.11.1:
-    resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==}
+  hmac-drbg@1.0.1:
+    resolution: {integrity: sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==}
 
-  math-intrinsics@1.1.0:
-    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
-    engines: {node: '>= 0.4'}
+  hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
-  mathml-tag-names@2.1.3:
-    resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
+  hosted-git-info@2.8.9:
+    resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
 
-  md5.js@1.3.5:
-    resolution: {integrity: sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==}
+  hosted-git-info@4.1.0:
+    resolution: {integrity: sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==}
+    engines: {node: '>=10'}
 
-  mdast-util-to-hast@13.2.0:
-    resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
+  html-encoding-sniffer@4.0.0:
+    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
+    engines: {node: '>=18'}
 
-  mdn-data@2.0.14:
-    resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
+  html-escaper@2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
 
-  mdn-data@2.0.30:
-    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
+  html-tags@3.3.1:
+    resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
+    engines: {node: '>=8'}
 
-  media-typer@1.1.0:
-    resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
+  http-errors@2.0.0:
+    resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
     engines: {node: '>= 0.8'}
 
-  memory-cache@0.2.0:
-    resolution: {integrity: sha512-OcjA+jzjOYzKmKS6IQVALHLVz+rNTMPoJvCztFaZxwG14wtAW7VRZjwTQu06vKCYOxh4jVnik7ya0SXTB0W+xA==}
+  http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+    engines: {node: '>= 14'}
 
-  meow@9.0.0:
-    resolution: {integrity: sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==}
-    engines: {node: '>=10'}
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
 
-  merge-descriptors@2.0.0:
-    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
-    engines: {node: '>=18'}
+  human-id@4.1.1:
+    resolution: {integrity: sha512-3gKm/gCSUipeLsRYZbbdA1BD83lBoWUkZ7G9VFrhWPAU76KwYo5KR8V28bpoPm/ygy0x5/GCbpRQdY7VLYCoIg==}
+    hasBin: true
 
-  merge2@1.4.1:
-    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
-    engines: {node: '>= 8'}
+  iconv-lite@0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
 
-  micromark-util-character@2.1.1:
-    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
 
-  micromark-util-encode@2.0.1:
-    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+  icss-utils@5.1.0:
+    resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
 
-  micromark-util-sanitize-uri@2.0.1:
-    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+  ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
-  micromark-util-symbol@2.0.1:
-    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
 
-  micromark-util-types@2.0.2:
-    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+  ignore@7.0.4:
+    resolution: {integrity: sha512-gJzzk+PQNznz8ysRrC0aOkBNVRBDtE1n53IqyqEf3PXrYwomFs5q4pGMizBMJF+ykh03insJ27hB8gSrD2Hn8A==}
+    engines: {node: '>= 4'}
 
-  micromatch@4.0.8:
-    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
-    engines: {node: '>=8.6'}
+  immutable@5.1.2:
+    resolution: {integrity: sha512-qHKXW1q6liAk1Oys6umoaZbDRqjcjgSrbnrifHsfsttza7zcvRAsL7mMV6xWcyhwQy7Xj5v4hhbr6b+iDYwlmQ==}
 
-  miller-rabin@4.0.1:
-    resolution: {integrity: sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==}
-    hasBin: true
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
 
-  mime-db@1.52.0:
-    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
-    engines: {node: '>= 0.6'}
+  import-lazy@4.0.0:
+    resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==}
+    engines: {node: '>=8'}
 
-  mime-db@1.54.0:
-    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
-    engines: {node: '>= 0.6'}
+  import-meta-resolve@3.1.1:
+    resolution: {integrity: sha512-qeywsE/KC3w9Fd2ORrRDUw6nS/nLwZpXgfrOc2IILvZYnCaEMd+D56Vfg9k4G29gIeVi3XKql1RQatME8iYsiw==}
 
-  mime-types@2.1.35:
-    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
-    engines: {node: '>= 0.6'}
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
 
-  mime-types@3.0.1:
-    resolution: {integrity: sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==}
-    engines: {node: '>= 0.6'}
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
 
-  mimic-fn@2.1.0:
-    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
-    engines: {node: '>=6'}
+  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.
 
-  min-document@2.19.0:
-    resolution: {integrity: sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==}
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
-  min-indent@1.0.1:
-    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
-    engines: {node: '>=4'}
+  ini@1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
 
-  mini-svg-data-uri@1.4.4:
-    resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
-    hasBin: true
+  input-otp@1.4.1:
+    resolution: {integrity: sha512-+yvpmKYKHi9jIGngxagY9oWiiblPB7+nEO75F2l2o4vs+6vpPZZmUl4tBNYuTCvQjhvEIbdNeJu70bhfYP2nbw==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
 
-  minimalistic-assert@1.0.1:
-    resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
+  internal-slot@1.1.0:
+    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
+    engines: {node: '>= 0.4'}
 
-  minimalistic-crypto-utils@1.0.1:
-    resolution: {integrity: sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==}
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
 
-  minimatch@10.0.1:
-    resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
-    engines: {node: 20 || >=22}
+  ipaddr.js@1.9.1:
+    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
+    engines: {node: '>= 0.10'}
 
-  minimatch@3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+  is-array-buffer@3.0.5:
+    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
+    engines: {node: '>= 0.4'}
 
-  minimatch@5.1.6:
-    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
-    engines: {node: '>=10'}
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
-  minimatch@9.0.1:
-    resolution: {integrity: sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  is-arrayish@0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
 
-  minimatch@9.0.3:
-    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  is-async-function@2.1.1:
+    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
+    engines: {node: '>= 0.4'}
 
-  minimatch@9.0.5:
-    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  is-bigint@1.1.0:
+    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
+    engines: {node: '>= 0.4'}
 
-  minimist-options@4.1.0:
-    resolution: {integrity: sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==}
-    engines: {node: '>= 6'}
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
 
-  minimist@1.2.8:
-    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+  is-boolean-object@1.2.2:
+    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
+    engines: {node: '>= 0.4'}
 
-  minipass@7.1.2:
-    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
 
-  minisearch@7.1.2:
-    resolution: {integrity: sha512-R1Pd9eF+MD5JYDDSPAp/q1ougKglm14uEkPMvQ/05RGmx6G9wvmLTrTI/Q5iPNJLYqNdsDQ7qTGIcNWR+FrHmA==}
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
 
-  minizlib@3.0.2:
-    resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
-    engines: {node: '>= 18'}
+  is-data-view@1.0.2:
+    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
+    engines: {node: '>= 0.4'}
 
-  mitt@3.0.1:
-    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+  is-date-object@1.1.0:
+    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
+    engines: {node: '>= 0.4'}
 
-  mkdirp@3.0.1:
-    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
-    engines: {node: '>=10'}
+  is-docker@2.2.1:
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
     hasBin: true
 
-  mlly@1.7.4:
-    resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
 
-  mri@1.2.0:
-    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
-    engines: {node: '>=4'}
-
-  mrmime@2.0.1:
-    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
-    engines: {node: '>=10'}
-
-  ms@2.1.3:
-    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
-
-  muggle-string@0.4.1:
-    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
-
-  nanoid@3.3.11:
-    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
-
-  napi-postinstall@0.2.4:
-    resolution: {integrity: sha512-ZEzHJwBhZ8qQSbknHqYcdtQVr8zUgGyM/q6h6qAyhtyVMNrSgDhrC4disf03dYW0e+czXyLnZINnCTEkWy0eJg==}
-    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
-    hasBin: true
-
-  natural-compare-lite@1.4.0:
-    resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
-
-  natural-compare@1.4.0:
-    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+  is-finalizationregistry@1.1.1:
+    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
+    engines: {node: '>= 0.4'}
 
-  negotiator@1.0.0:
-    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
-    engines: {node: '>= 0.6'}
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
 
-  next@15.3.2:
-    resolution: {integrity: sha512-CA3BatMyHkxZ48sgOCLdVHjFU36N7TF1HhqAHLFOkV6buwZnvMI84Cug8xD56B9mCuKrqXnLn94417GrZ/jjCQ==}
-    engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
-    hasBin: true
-    peerDependencies:
-      '@opentelemetry/api': ^1.1.0
-      '@playwright/test': ^1.41.2
-      babel-plugin-react-compiler: '*'
-      react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
-      react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
-      sass: ^1.3.0
-    peerDependenciesMeta:
-      '@opentelemetry/api':
-        optional: true
-      '@playwright/test':
-        optional: true
-      babel-plugin-react-compiler:
-        optional: true
-      sass:
-        optional: true
+  is-generator-function@1.1.0:
+    resolution: {integrity: sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==}
+    engines: {node: '>= 0.4'}
 
-  node-addon-api@7.1.1:
-    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
 
-  node-fetch@2.7.0:
-    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
-    engines: {node: 4.x || >=6.0.0}
-    peerDependencies:
-      encoding: ^0.1.0
-    peerDependenciesMeta:
-      encoding:
-        optional: true
+  is-interactive@1.0.0:
+    resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
+    engines: {node: '>=8'}
 
-  node-machine-id@1.1.12:
-    resolution: {integrity: sha512-QNABxbrPa3qEIfrE6GOJ7BYIuignnJw7iQ2YPbc3Nla1HzRJjXzZOiikfF8m7eAMfichLt3M4VgLOetqgDmgGQ==}
+  is-map@2.0.3:
+    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
+    engines: {node: '>= 0.4'}
 
-  node-releases@2.0.19:
-    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
+  is-module@1.0.0:
+    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
 
-  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
+  is-number-object@1.1.1:
+    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
+    engines: {node: '>= 0.4'}
 
-  normalize-package-data@2.5.0:
-    resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
 
-  normalize-package-data@3.0.3:
-    resolution: {integrity: sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==}
-    engines: {node: '>=10'}
+  is-path-inside@3.0.3:
+    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
+    engines: {node: '>=8'}
 
-  normalize-path@3.0.0:
-    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+  is-plain-obj@1.1.0:
+    resolution: {integrity: sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==}
     engines: {node: '>=0.10.0'}
 
-  normalize-range@0.1.2:
-    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+  is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
     engines: {node: '>=0.10.0'}
 
-  normalize-url@6.1.0:
-    resolution: {integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==}
-    engines: {node: '>=10'}
-
-  npm-run-path@4.0.1:
-    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
-    engines: {node: '>=8'}
-
-  nth-check@2.1.1:
-    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
-
-  nwsapi@2.2.20:
-    resolution: {integrity: sha512-/ieB+mDe4MrrKMT8z+mQL8klXydZWGR5Dowt4RAGKbJ3kIGEx3X4ljUo+6V73IXtUPWgfOlU5B9MlGxFO5T+cA==}
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
-  nx@20.8.1:
-    resolution: {integrity: sha512-73Uw8YXpsjeLqHSl7NMCmGdCs+8ynPzoNJFWAqVanPETEY9zPd5wevVQmeyzYtNNQU35uj6Os4iUzYunmwnFaA==}
-    hasBin: true
-    peerDependencies:
-      '@swc-node/register': ^1.8.0
-      '@swc/core': ^1.3.85
-    peerDependenciesMeta:
-      '@swc-node/register':
-        optional: true
-      '@swc/core':
-        optional: true
+  is-promise@4.0.0:
+    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
 
-  object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
+  is-reference@1.2.1:
+    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
 
-  object-inspect@1.13.4:
-    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+  is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
 
-  object-keys@1.1.1:
-    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+  is-set@2.0.3:
+    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
     engines: {node: '>= 0.4'}
 
-  object.assign@4.1.7:
-    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
+  is-shared-array-buffer@1.0.4:
+    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
     engines: {node: '>= 0.4'}
 
-  object.entries@1.1.9:
-    resolution: {integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==}
+  is-string@1.1.1:
+    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
     engines: {node: '>= 0.4'}
 
-  object.fromentries@2.0.8:
-    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
-    engines: {node: '>= 0.4'}
+  is-subdir@1.2.0:
+    resolution: {integrity: sha512-2AT6j+gXe/1ueqbW6fLZJiIw3F8iXGJtt0yDrZaBhAZEG1raiTxKWU+IPqMCzQAXOUCKdA4UDMgacKH25XG2Cw==}
+    engines: {node: '>=4'}
 
-  object.groupby@1.0.3:
-    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
+  is-symbol@1.1.1:
+    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
     engines: {node: '>= 0.4'}
 
-  object.values@1.2.1:
-    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
+  is-typed-array@1.1.15:
+    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
     engines: {node: '>= 0.4'}
 
-  on-finished@2.4.1:
-    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
-    engines: {node: '>= 0.8'}
-
-  once@1.4.0:
-    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
-
-  onetime@5.1.2:
-    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
-    engines: {node: '>=6'}
+  is-unicode-supported@0.1.0:
+    resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
+    engines: {node: '>=10'}
 
-  oniguruma-to-es@3.1.1:
-    resolution: {integrity: sha512-bUH8SDvPkH3ho3dvwJwfonjlQ4R80vjyvrU8YpxuROddv55vAEJrTuCuCVUhhsHbtlD9tGGbaNApGQckXhS8iQ==}
+  is-weakmap@2.0.2:
+    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
+    engines: {node: '>= 0.4'}
 
-  open@8.4.2:
-    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
-    engines: {node: '>=12'}
+  is-weakref@1.1.1:
+    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
+    engines: {node: '>= 0.4'}
 
-  optionator@0.9.4:
-    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
-    engines: {node: '>= 0.8.0'}
+  is-weakset@2.0.4:
+    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
+    engines: {node: '>= 0.4'}
 
-  ora@5.3.0:
-    resolution: {integrity: sha512-zAKMgGXUim0Jyd6CXK9lraBnD3H5yPGBPPOkC23a2BG6hsm4Zu6OQSjQuEtV0BHDf4aKHcUFvJiGRrFuW3MG8g==}
-    engines: {node: '>=10'}
+  is-what@4.1.16:
+    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
+    engines: {node: '>=12.13'}
 
-  os-tmpdir@1.0.2:
-    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
+  is-windows@1.0.2:
+    resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
     engines: {node: '>=0.10.0'}
 
-  outdent@0.5.0:
-    resolution: {integrity: sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q==}
-
-  own-keys@1.0.1:
-    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
-    engines: {node: '>= 0.4'}
-
-  p-filter@2.1.0:
-    resolution: {integrity: sha512-ZBxxZ5sL2HghephhpGAQdoskxplTwr7ICaehZwLIlfL6acuVgZPm8yBNuRAFBGEqtD/hmUeq9eqLg2ys9Xr/yw==}
+  is-wsl@2.2.0:
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
 
-  p-finally@1.0.0:
-    resolution: {integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==}
-    engines: {node: '>=4'}
+  isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
 
-  p-limit@2.3.0:
-    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
-    engines: {node: '>=6'}
+  isarray@2.0.5:
+    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
 
-  p-limit@3.1.0:
-    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
-    engines: {node: '>=10'}
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
-  p-locate@4.1.0:
-    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+  istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
     engines: {node: '>=8'}
 
-  p-locate@5.0.0:
-    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+  istanbul-lib-report@3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
     engines: {node: '>=10'}
 
-  p-map@2.1.0:
-    resolution: {integrity: sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==}
-    engines: {node: '>=6'}
+  istanbul-lib-source-maps@5.0.6:
+    resolution: {integrity: sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==}
+    engines: {node: '>=10'}
 
-  p-queue@6.6.2:
-    resolution: {integrity: sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==}
+  istanbul-reports@3.1.7:
+    resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==}
     engines: {node: '>=8'}
 
-  p-timeout@3.2.0:
-    resolution: {integrity: sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==}
-    engines: {node: '>=8'}
+  iterator.prototype@1.1.5:
+    resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
+    engines: {node: '>= 0.4'}
 
-  p-try@2.2.0:
-    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
-    engines: {node: '>=6'}
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
-  package-json-from-dist@1.0.1:
-    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+  jackspeak@4.1.1:
+    resolution: {integrity: sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==}
+    engines: {node: 20 || >=22}
 
-  package-manager-detector@0.2.11:
-    resolution: {integrity: sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==}
+  jest-diff@29.7.0:
+    resolution: {integrity: sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  parent-module@1.0.1:
-    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
-    engines: {node: '>=6'}
+  jest-get-type@29.6.3:
+    resolution: {integrity: sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  parse-asn1@5.1.7:
-    resolution: {integrity: sha512-CTM5kuWR3sx9IFamcl5ErfPl6ea/N8IYwiJ+vpeB2g+1iknv7zBl5uPwbMbRVznRVbrNY6lGuDoE5b30grmbqg==}
-    engines: {node: '>= 0.10'}
+  jiti@1.21.7:
+    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+    hasBin: true
 
-  parse-json@5.2.0:
-    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
-    engines: {node: '>=8'}
+  jiti@2.4.2:
+    resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
+    hasBin: true
 
-  parse5@7.3.0:
-    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+  jju@1.4.0:
+    resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
 
-  parseurl@1.3.3:
-    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
-    engines: {node: '>= 0.8'}
+  jose@4.15.9:
+    resolution: {integrity: sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==}
 
-  path-browserify@1.0.1:
-    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+  jose@5.10.0:
+    resolution: {integrity: sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg==}
 
-  path-exists@4.0.0:
-    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
-    engines: {node: '>=8'}
+  jose@6.0.11:
+    resolution: {integrity: sha512-QxG7EaliDARm1O1S8BGakqncGT9s25bKL1WSf6/oa17Tkqwi8D2ZNglqCF+DsYF88/rV66Q/Q2mFAy697E1DUg==}
 
-  path-is-absolute@1.0.1:
-    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
-    engines: {node: '>=0.10.0'}
+  js-beautify@1.15.4:
+    resolution: {integrity: sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==}
+    engines: {node: '>=14'}
+    hasBin: true
 
-  path-key@3.1.1:
-    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
-    engines: {node: '>=8'}
+  js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
 
-  path-parse@1.0.7:
-    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  path-scurry@1.11.1:
-    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
-    engines: {node: '>=16 || 14 >=14.18'}
+  js-yaml@3.14.1:
+    resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
+    hasBin: true
 
-  path-scurry@2.0.0:
-    resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
-    engines: {node: 20 || >=22}
+  js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
 
-  path-to-regexp@8.2.0:
-    resolution: {integrity: sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==}
-    engines: {node: '>=16'}
+  jsdom@26.1.0:
+    resolution: {integrity: sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
 
-  path-type@4.0.0:
-    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
-    engines: {node: '>=8'}
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
 
-  pathe@2.0.3:
-    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
-  pathval@2.0.0:
-    resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==}
-    engines: {node: '>= 14.16'}
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
-  pbkdf2@3.1.2:
-    resolution: {integrity: sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==}
-    engines: {node: '>=0.12'}
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
-  perfect-debounce@1.0.0:
-    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
 
-  picocolors@1.1.1:
-    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+  json-schema@0.4.0:
+    resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
 
-  picomatch@2.3.1:
-    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
-    engines: {node: '>=8.6'}
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
-  picomatch@4.0.2:
-    resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
-    engines: {node: '>=12'}
+  json5@1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
 
-  pify@4.0.1:
-    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
+    hasBin: true
 
-  pkg-types@1.3.1:
-    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+  jsonc-parser@3.2.0:
+    resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
 
-  pkg-types@2.1.0:
-    resolution: {integrity: sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A==}
+  jsonfile@4.0.0:
+    resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
 
-  playwright-core@1.52.0:
-    resolution: {integrity: sha512-l2osTgLXSMeuLZOML9qYODUQoPPnUsKsb5/P6LJ2e6uPKXUdPK5WYhN4z03G+YNbWmGDY4YENauNu4ZKczreHg==}
-    engines: {node: '>=18'}
-    hasBin: true
+  jsonfile@6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
 
-  playwright@1.52.0:
-    resolution: {integrity: sha512-JAwMNMBlxJ2oD1kce4KPtMkDeKGHQstdpFPcPH3maElAXon/QZeTvtsfXmTMRyO9TslfoYOXkSsvao2nE1ilTw==}
+  jsx-ast-utils@3.3.5:
+    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
+    engines: {node: '>=4.0'}
+
+  jwt-decode@4.0.0:
+    resolution: {integrity: sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==}
     engines: {node: '>=18'}
-    hasBin: true
 
-  possible-typed-array-names@1.1.0:
-    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
-    engines: {node: '>= 0.4'}
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
-  postcss-calc@8.2.4:
-    resolution: {integrity: sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==}
-    peerDependencies:
-      postcss: ^8.2.2
+  kind-of@6.0.3:
+    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
+    engines: {node: '>=0.10.0'}
 
-  postcss-colormin@5.3.1:
-    resolution: {integrity: sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==}
-    engines: {node: ^10 || ^12 || >=14.0}
-    peerDependencies:
-      postcss: ^8.2.15
+  known-css-properties@0.26.0:
+    resolution: {integrity: sha512-5FZRzrZzNTBruuurWpvZnvP9pum+fe0HcK8z/ooo+U+Hmp4vtbyp1/QDsqmufirXy4egGzbaH/y2uCZf+6W5Kg==}
 
-  postcss-convert-values@5.1.3:
-    resolution: {integrity: sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==}
-    engines: {node: ^10 || ^12 || >=14.0}
-    peerDependencies:
-      postcss: ^8.2.15
+  language-subtag-registry@0.3.23:
+    resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
 
-  postcss-discard-comments@5.1.2:
-    resolution: {integrity: sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==}
-    engines: {node: ^10 || ^12 || >=14.0}
-    peerDependencies:
-      postcss: ^8.2.15
+  language-tags@1.0.9:
+    resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
+    engines: {node: '>=0.10'}
 
-  postcss-discard-duplicates@5.1.0:
-    resolution: {integrity: sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==}
-    engines: {node: ^10 || ^12 || >=14.0}
-    peerDependencies:
-      postcss: ^8.2.15
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
 
-  postcss-discard-empty@5.1.1:
-    resolution: {integrity: sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==}
-    engines: {node: ^10 || ^12 || >=14.0}
-    peerDependencies:
-      postcss: ^8.2.15
+  lightningcss-darwin-arm64@1.30.1:
+    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
 
-  postcss-discard-overridden@5.1.0:
-    resolution: {integrity: sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==}
-    engines: {node: ^10 || ^12 || >=14.0}
-    peerDependencies:
-      postcss: ^8.2.15
+  lightningcss-darwin-x64@1.30.1:
+    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
 
-  postcss-media-query-parser@0.2.3:
-    resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
+  lightningcss-freebsd-x64@1.30.1:
+    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
 
-  postcss-merge-longhand@5.1.7:
-    resolution: {integrity: sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==}
-    engines: {node: ^10 || ^12 || >=14.0}
-    peerDependencies:
-      postcss: ^8.2.15
+  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]
 
-  postcss-merge-rules@5.1.4:
-    resolution: {integrity: sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==}
-    engines: {node: ^10 || ^12 || >=14.0}
-    peerDependencies:
-      postcss: ^8.2.15
+  lightningcss-linux-arm64-gnu@1.30.1:
+    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
 
-  postcss-minify-font-values@5.1.0:
-    resolution: {integrity: sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==}
-    engines: {node: ^10 || ^12 || >=14.0}
-    peerDependencies:
-      postcss: ^8.2.15
+  lightningcss-linux-arm64-musl@1.30.1:
+    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
 
-  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
+  lightningcss-linux-x64-gnu@1.30.1:
+    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
 
-  postcss-minify-params@5.1.4:
-    resolution: {integrity: sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==}
-    engines: {node: ^10 || ^12 || >=14.0}
-    peerDependencies:
-      postcss: ^8.2.15
+  lightningcss-linux-x64-musl@1.30.1:
+    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
 
-  postcss-minify-selectors@5.2.1:
-    resolution: {integrity: sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==}
-    engines: {node: ^10 || ^12 || >=14.0}
-    peerDependencies:
-      postcss: ^8.2.15
+  lightningcss-win32-arm64-msvc@1.30.1:
+    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
 
-  postcss-modules-extract-imports@3.1.0:
-    resolution: {integrity: sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: ^8.1.0
+  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]
 
-  postcss-modules-local-by-default@4.2.0:
-    resolution: {integrity: sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: ^8.1.0
+  lightningcss@1.30.1:
+    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
+    engines: {node: '>= 12.0.0'}
 
-  postcss-modules-scope@3.2.1:
-    resolution: {integrity: sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: ^8.1.0
+  lilconfig@2.1.0:
+    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
+    engines: {node: '>=10'}
 
-  postcss-modules-values@4.0.0:
-    resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: ^8.1.0
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+    engines: {node: '>=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
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
-  postcss-normalize-display-values@5.1.0:
-    resolution: {integrity: sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==}
-    engines: {node: ^10 || ^12 || >=14.0}
-    peerDependencies:
-      postcss: ^8.2.15
+  lines-and-columns@2.0.3:
+    resolution: {integrity: sha512-cNOjgCnLB+FnvWWtyRTzmB3POJ+cXxTA81LoW7u8JdmhfXzriropYwpjShnz1QLLWsQwY7nIxoDmcPTwphDK9w==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  postcss-normalize-positions@5.1.1:
-    resolution: {integrity: sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==}
-    engines: {node: ^10 || ^12 || >=14.0}
-    peerDependencies:
-      postcss: ^8.2.15
+  local-pkg@1.1.1:
+    resolution: {integrity: sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==}
+    engines: {node: '>=14'}
 
-  postcss-normalize-repeat-style@5.1.1:
-    resolution: {integrity: sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==}
-    engines: {node: ^10 || ^12 || >=14.0}
-    peerDependencies:
-      postcss: ^8.2.15
+  locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
 
-  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
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
 
-  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
+  lodash.isempty@4.4.0:
+    resolution: {integrity: sha512-oKMuF3xEeqDltrGMfDxAPGIVMSSRv8tbRSODbrs4KGsRRLEhrW8N8Rd4DRgB2+621hY8A8XwwrTVhXWpxFvMzg==}
 
-  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
+  lodash.memoize@4.1.2:
+    resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
 
-  postcss-normalize-url@5.1.0:
-    resolution: {integrity: sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==}
-    engines: {node: ^10 || ^12 || >=14.0}
-    peerDependencies:
-      postcss: ^8.2.15
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
-  postcss-normalize-whitespace@5.1.1:
-    resolution: {integrity: sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==}
-    engines: {node: ^10 || ^12 || >=14.0}
-    peerDependencies:
-      postcss: ^8.2.15
+  lodash.startcase@4.4.0:
+    resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
 
-  postcss-ordered-values@5.1.3:
-    resolution: {integrity: sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==}
-    engines: {node: ^10 || ^12 || >=14.0}
-    peerDependencies:
-      postcss: ^8.2.15
+  lodash.truncate@4.4.2:
+    resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
 
-  postcss-reduce-initial@5.1.2:
-    resolution: {integrity: sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==}
-    engines: {node: ^10 || ^12 || >=14.0}
-    peerDependencies:
-      postcss: ^8.2.15
+  lodash.uniq@4.5.0:
+    resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
 
-  postcss-reduce-transforms@5.1.0:
-    resolution: {integrity: sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==}
-    engines: {node: ^10 || ^12 || >=14.0}
-    peerDependencies:
-      postcss: ^8.2.15
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
-  postcss-resolve-nested-selector@0.1.6:
-    resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==}
+  log-symbols@4.1.0:
+    resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
+    engines: {node: '>=10'}
 
-  postcss-safe-parser@6.0.0:
-    resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.3.3
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
 
-  postcss-scss@4.0.9:
-    resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.4.29
+  loupe@3.1.3:
+    resolution: {integrity: sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==}
 
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
-    engines: {node: '>=4'}
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
-  postcss-selector-parser@7.1.0:
-    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
-    engines: {node: '>=4'}
+  lru-cache@11.1.0:
+    resolution: {integrity: sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A==}
+    engines: {node: 20 || >=22}
 
-  postcss-svgo@5.1.0:
-    resolution: {integrity: sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==}
-    engines: {node: ^10 || ^12 || >=14.0}
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
+  lru-cache@6.0.0:
+    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
+    engines: {node: '>=10'}
+
+  lucide-react@0.294.0:
+    resolution: {integrity: sha512-V7o0/VECSGbLHn3/1O67FUgBwWB+hmzshrgDVRJQhMh8uj5D3HBuIvhuAmQTtlupILSplwIZg5FTc4tTKMA2SA==}
     peerDependencies:
-      postcss: ^8.2.15
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0
 
-  postcss-unique-selectors@5.1.1:
-    resolution: {integrity: sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==}
-    engines: {node: ^10 || ^12 || >=14.0}
+  lucide-react@0.454.0:
+    resolution: {integrity: sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==}
     peerDependencies:
-      postcss: ^8.2.15
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
 
-  postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
 
-  postcss@8.4.31:
-    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
-    engines: {node: ^10 || ^12 || >=14}
+  magic-string@0.30.17:
+    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
-  postcss@8.5.3:
-    resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
-    engines: {node: ^10 || ^12 || >=14}
+  magicast@0.3.5:
+    resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
 
-  preact@10.26.7:
-    resolution: {integrity: sha512-43xS+QYc1X1IPbw03faSgY6I6OYWcLrJRv3hU0+qMOfh/XCHcP0MX2CVjNARYR2cC/guu975sta4OcjlczxD7g==}
+  make-dir@4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
 
-  prelude-ls@1.2.1:
-    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
-    engines: {node: '>= 0.8.0'}
+  map-obj@1.0.1:
+    resolution: {integrity: sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==}
+    engines: {node: '>=0.10.0'}
 
-  prettier-linter-helpers@1.0.0:
-    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
-    engines: {node: '>=6.0.0'}
+  map-obj@4.3.0:
+    resolution: {integrity: sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==}
+    engines: {node: '>=8'}
 
-  prettier@2.8.8:
-    resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
-    engines: {node: '>=10.13.0'}
-    hasBin: true
+  mark.js@8.11.1:
+    resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==}
 
-  prettier@3.5.3:
-    resolution: {integrity: sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==}
-    engines: {node: '>=14'}
-    hasBin: true
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
 
-  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}
+  mathml-tag-names@2.1.3:
+    resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
 
-  pretty-format@29.7.0:
-    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  process-nextick-args@2.0.1:
-    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+  md5.js@1.3.5:
+    resolution: {integrity: sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==}
 
-  process@0.11.10:
-    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
-    engines: {node: '>= 0.6.0'}
+  mdast-util-to-hast@13.2.0:
+    resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
 
-  prop-types@15.8.1:
-    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+  mdn-data@2.0.14:
+    resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
 
-  property-information@7.1.0:
-    resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
+  mdn-data@2.0.30:
+    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
-  proto-list@1.2.4:
-    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
+  media-typer@1.1.0:
+    resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
+    engines: {node: '>= 0.8'}
 
-  proxy-addr@2.0.7:
-    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
-    engines: {node: '>= 0.10'}
+  memory-cache@0.2.0:
+    resolution: {integrity: sha512-OcjA+jzjOYzKmKS6IQVALHLVz+rNTMPoJvCztFaZxwG14wtAW7VRZjwTQu06vKCYOxh4jVnik7ya0SXTB0W+xA==}
 
-  proxy-from-env@1.1.0:
-    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+  meow@9.0.0:
+    resolution: {integrity: sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==}
+    engines: {node: '>=10'}
 
-  public-encrypt@4.0.3:
-    resolution: {integrity: sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==}
+  merge-descriptors@2.0.0:
+    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
+    engines: {node: '>=18'}
 
-  punycode@2.3.1:
-    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
-    engines: {node: '>=6'}
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
 
-  qs@6.14.0:
-    resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==}
-    engines: {node: '>=0.6'}
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
 
-  quansync@0.2.10:
-    resolution: {integrity: sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==}
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
 
-  query-string@7.1.3:
-    resolution: {integrity: sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==}
-    engines: {node: '>=6'}
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
 
-  queue-microtask@1.2.3:
-    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
 
-  quick-lru@4.0.1:
-    resolution: {integrity: sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==}
-    engines: {node: '>=8'}
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
 
-  randombytes@2.1.0:
-    resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
 
-  randomfill@1.0.4:
-    resolution: {integrity: sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==}
+  miller-rabin@4.0.1:
+    resolution: {integrity: sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==}
+    hasBin: true
 
-  range-parser@1.2.1:
-    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
 
-  raw-body@3.0.0:
-    resolution: {integrity: sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==}
-    engines: {node: '>= 0.8'}
+  mime-db@1.54.0:
+    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
+    engines: {node: '>= 0.6'}
 
-  react-dom@18.3.1:
-    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
-    peerDependencies:
-      react: ^18.3.1
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
 
-  react-dom@19.1.0:
-    resolution: {integrity: sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==}
-    peerDependencies:
-      react: ^19.1.0
+  mime-types@3.0.1:
+    resolution: {integrity: sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==}
+    engines: {node: '>= 0.6'}
 
-  react-is@16.13.1:
-    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+  mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
 
-  react-is@17.0.2:
-    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+  min-document@2.19.0:
+    resolution: {integrity: sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==}
 
-  react-is@18.3.1:
-    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
 
-  react-refresh@0.17.0:
-    resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
-    engines: {node: '>=0.10.0'}
+  mini-svg-data-uri@1.4.4:
+    resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
+    hasBin: true
 
-  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'
+  minimalistic-assert@1.0.1:
+    resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
 
-  react-router@6.30.1:
-    resolution: {integrity: sha512-X1m21aEmxGXqENEPG3T6u0Th7g0aS4ZmoNynhbs+Cn+q+QGTLt+d5IQ2bHAXKzKcxGJjxACpVbnYQSCRcfxHlQ==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      react: '>=16.8'
+  minimalistic-crypto-utils@1.0.1:
+    resolution: {integrity: sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==}
 
-  react@18.3.1:
-    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
-    engines: {node: '>=0.10.0'}
+  minimatch@10.0.1:
+    resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
+    engines: {node: 20 || >=22}
 
-  react@19.1.0:
-    resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
-    engines: {node: '>=0.10.0'}
+  minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
-  read-pkg-up@7.0.1:
-    resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
-    engines: {node: '>=8'}
+  minimatch@5.1.6:
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    engines: {node: '>=10'}
 
-  read-pkg@5.2.0:
-    resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
-    engines: {node: '>=8'}
+  minimatch@9.0.1:
+    resolution: {integrity: sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==}
+    engines: {node: '>=16 || 14 >=14.17'}
 
-  read-yaml-file@1.1.0:
-    resolution: {integrity: sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA==}
-    engines: {node: '>=6'}
+  minimatch@9.0.3:
+    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
+    engines: {node: '>=16 || 14 >=14.17'}
 
-  readable-stream@2.3.8:
-    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
 
-  readable-stream@3.6.2:
-    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+  minimist-options@4.1.0:
+    resolution: {integrity: sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==}
     engines: {node: '>= 6'}
 
-  readdirp@4.1.2:
-    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
-    engines: {node: '>= 14.18.0'}
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
-  redent@3.0.0:
-    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
-    engines: {node: '>=8'}
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
 
-  reflect.getprototypeof@1.0.10:
-    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
-    engines: {node: '>= 0.4'}
+  minisearch@7.1.2:
+    resolution: {integrity: sha512-R1Pd9eF+MD5JYDDSPAp/q1ougKglm14uEkPMvQ/05RGmx6G9wvmLTrTI/Q5iPNJLYqNdsDQ7qTGIcNWR+FrHmA==}
 
-  regex-recursion@6.0.2:
-    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+  minizlib@3.0.2:
+    resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
+    engines: {node: '>= 18'}
 
-  regex-utilities@2.3.0:
-    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
-  regex@6.0.1:
-    resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==}
+  mkdirp@3.0.1:
+    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
+    engines: {node: '>=10'}
+    hasBin: true
 
-  regexp.prototype.flags@1.5.4:
-    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
-    engines: {node: '>= 0.4'}
+  mlly@1.7.4:
+    resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
 
-  regexpp@3.2.0:
-    resolution: {integrity: sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==}
-    engines: {node: '>=8'}
+  mri@1.2.0:
+    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
+    engines: {node: '>=4'}
 
-  require-directory@2.1.1:
-    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
-    engines: {node: '>=0.10.0'}
+  mrmime@2.0.1:
+    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
+    engines: {node: '>=10'}
 
-  require-from-string@2.0.2:
-    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
-    engines: {node: '>=0.10.0'}
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  requireindex@1.2.0:
-    resolution: {integrity: sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==}
-    engines: {node: '>=0.10.5'}
+  muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
 
-  resolve-from@4.0.0:
-    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
-    engines: {node: '>=4'}
+  mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
-  resolve-from@5.0.0:
-    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
-    engines: {node: '>=8'}
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
 
-  resolve-pkg-maps@1.0.0:
-    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+  natural-compare-lite@1.4.0:
+    resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
 
-  resolve.exports@2.0.3:
-    resolution: {integrity: sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==}
-    engines: {node: '>=10'}
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
-  resolve@1.19.0:
-    resolution: {integrity: sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==}
+  negotiator@1.0.0:
+    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
+    engines: {node: '>= 0.6'}
 
-  resolve@1.22.10:
-    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
-    engines: {node: '>= 0.4'}
+  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@14.2.16:
+    resolution: {integrity: sha512-LcO7WnFu6lYSvCzZoo1dB+IO0xXz5uEv52HF1IUN0IqVTUIZGHuuR10I5efiLadGt+4oZqTcNZyVVEem/TM5nA==}
+    engines: {node: '>=18.17.0'}
     hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      '@playwright/test': ^1.41.2
+      react: ^18.2.0
+      react-dom: ^18.2.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@playwright/test':
+        optional: true
+      sass:
+        optional: true
 
-  resolve@2.0.0-next.5:
-    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
+  next@15.3.2:
+    resolution: {integrity: sha512-CA3BatMyHkxZ48sgOCLdVHjFU36N7TF1HhqAHLFOkV6buwZnvMI84Cug8xD56B9mCuKrqXnLn94417GrZ/jjCQ==}
+    engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
     hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      '@playwright/test': ^1.41.2
+      babel-plugin-react-compiler: '*'
+      react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@playwright/test':
+        optional: true
+      babel-plugin-react-compiler:
+        optional: true
+      sass:
+        optional: true
 
-  restore-cursor@3.1.0:
-    resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
-    engines: {node: '>=8'}
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
 
-  reusify@1.1.0:
-    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
-    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+  node-fetch@2.7.0:
+    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
 
-  rfdc@1.4.1:
-    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+  node-machine-id@1.1.12:
+    resolution: {integrity: sha512-QNABxbrPa3qEIfrE6GOJ7BYIuignnJw7iQ2YPbc3Nla1HzRJjXzZOiikfF8m7eAMfichLt3M4VgLOetqgDmgGQ==}
 
-  rimraf@3.0.2:
-    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
-    deprecated: Rimraf versions prior to v4 are no longer supported
-    hasBin: true
+  node-releases@2.0.19:
+    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
 
-  rimraf@6.0.1:
-    resolution: {integrity: sha512-9dkvaxAsk/xNXSJzMgFqqMCuFgt2+KsOFek3TMLfo8NCPfWpBmqwyNn5Y+NX56QUYfCtsyhF3ayiboEoUmJk/A==}
-    engines: {node: 20 || >=22}
+  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
 
-  ripemd160@2.0.2:
-    resolution: {integrity: sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==}
+  normalize-package-data@2.5.0:
+    resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
 
-  rollup-plugin-dts@6.2.1:
-    resolution: {integrity: sha512-sR3CxYUl7i2CHa0O7bA45mCrgADyAQ0tVtGSqi3yvH28M+eg1+g5d7kQ9hLvEz5dorK3XVsH5L2jwHLQf72DzA==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      rollup: ^3.29.4 || ^4
-      typescript: ^4.5 || ^5.0
+  normalize-package-data@3.0.3:
+    resolution: {integrity: sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==}
+    engines: {node: '>=10'}
 
-  rollup-plugin-polyfill-node@0.13.0:
-    resolution: {integrity: sha512-FYEvpCaD5jGtyBuBFcQImEGmTxDTPbiHjJdrYIp+mFIwgXiXabxvKUK7ZT9P31ozu2Tqm9llYQMRWsfvTMTAOw==}
-    peerDependencies:
-      rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
 
-  rollup-plugin-styles@4.0.0:
-    resolution: {integrity: sha512-A2K2sao84OsTmDxXG83JTCdXWrmgvQkkI38XDat46rdtpGMRm9tSYqeCdlwwGDJF4kKIafhV1mUidqu8MxUGig==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    peerDependencies:
-      rollup: ^2.63.0
+  normalize-range@0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
 
-  rollup@4.40.2:
-    resolution: {integrity: sha512-tfUOg6DTP4rhQ3VjOO6B4wyrJnGOX85requAXvqYTHsOgb2TFJdZ3aWpT8W2kPoypSGP7dZUyzxJ9ee4buM5Fg==}
-    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
-    hasBin: true
+  normalize-url@6.1.0:
+    resolution: {integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==}
+    engines: {node: '>=10'}
 
-  router@2.2.0:
-    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
-    engines: {node: '>= 18'}
+  npm-run-path@4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
 
-  rrweb-cssom@0.8.0:
-    resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
+  nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
-  run-parallel@1.2.0:
-    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+  nwsapi@2.2.20:
+    resolution: {integrity: sha512-/ieB+mDe4MrrKMT8z+mQL8klXydZWGR5Dowt4RAGKbJ3kIGEx3X4ljUo+6V73IXtUPWgfOlU5B9MlGxFO5T+cA==}
 
-  safe-array-concat@1.1.3:
-    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
-    engines: {node: '>=0.4'}
+  nx@20.8.1:
+    resolution: {integrity: sha512-73Uw8YXpsjeLqHSl7NMCmGdCs+8ynPzoNJFWAqVanPETEY9zPd5wevVQmeyzYtNNQU35uj6Os4iUzYunmwnFaA==}
+    hasBin: true
+    peerDependencies:
+      '@swc-node/register': ^1.8.0
+      '@swc/core': ^1.3.85
+    peerDependenciesMeta:
+      '@swc-node/register':
+        optional: true
+      '@swc/core':
+        optional: true
 
-  safe-buffer@5.1.2:
-    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
 
-  safe-buffer@5.2.1:
-    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+  object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
 
-  safe-push-apply@1.0.0:
-    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
 
-  safe-regex-test@1.1.0:
-    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+  object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
 
-  safer-buffer@2.1.2:
-    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+  object.assign@4.1.7:
+    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
+    engines: {node: '>= 0.4'}
 
-  sass@1.89.0:
-    resolution: {integrity: sha512-ld+kQU8YTdGNjOLfRWBzewJpU5cwEv/h5yyqlSeJcj6Yh8U4TDA9UA5FPicqDz/xgRPWRSYIQNiFks21TbA9KQ==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
+  object.entries@1.1.9:
+    resolution: {integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==}
+    engines: {node: '>= 0.4'}
 
-  saxes@6.0.0:
-    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
-    engines: {node: '>=v12.22.7'}
+  object.fromentries@2.0.8:
+    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
+    engines: {node: '>= 0.4'}
 
-  scheduler@0.23.2:
-    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+  object.groupby@1.0.3:
+    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
+    engines: {node: '>= 0.4'}
 
-  scheduler@0.26.0:
-    resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
+  object.values@1.2.1:
+    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
+    engines: {node: '>= 0.4'}
 
-  search-insights@2.17.3:
-    resolution: {integrity: sha512-RQPdCYTa8A68uM2jwxoY842xDhvx3E5LFL1LxvxCNMev4o5mLuokczhzjAgGwUZBAmOKZknArSxLKmXtIi2AxQ==}
+  on-finished@2.4.1:
+    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
+    engines: {node: '>= 0.8'}
 
-  secure-random-bytes@5.0.1:
-    resolution: {integrity: sha512-48nvkahmdyoRbHW/x1HTGIk+i2/84MHFBB+rZ50cg1y/p2RjKG+fhTMQKZx4QD6T6/o2M2WHLPkncqQpjMMsUw==}
-    engines: {node: 18 || >=20}
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
-  secure-random-octet@4.0.1:
-    resolution: {integrity: sha512-KEeg9wGi/96Q8Edp97gt5Z5dYCcvG7vPKdKFq6rPLCHtaaHwZKbhbC+gY74O7OjX8Fnels49wqc8IgkNhBJZfw==}
-    engines: {node: 18 || >=20}
+  onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
 
-  semver@5.7.2:
-    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
-    hasBin: true
+  oniguruma-to-es@3.1.1:
+    resolution: {integrity: sha512-bUH8SDvPkH3ho3dvwJwfonjlQ4R80vjyvrU8YpxuROddv55vAEJrTuCuCVUhhsHbtlD9tGGbaNApGQckXhS8iQ==}
 
-  semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
-    hasBin: true
+  open@8.4.2:
+    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
+    engines: {node: '>=12'}
 
-  semver@7.7.2:
-    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  ora@5.3.0:
+    resolution: {integrity: sha512-zAKMgGXUim0Jyd6CXK9lraBnD3H5yPGBPPOkC23a2BG6hsm4Zu6OQSjQuEtV0BHDf4aKHcUFvJiGRrFuW3MG8g==}
     engines: {node: '>=10'}
-    hasBin: true
 
-  send@1.2.0:
-    resolution: {integrity: sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==}
-    engines: {node: '>= 18'}
+  os-tmpdir@1.0.2:
+    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
+    engines: {node: '>=0.10.0'}
 
-  serve-static@2.2.0:
-    resolution: {integrity: sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==}
-    engines: {node: '>= 18'}
+  outdent@0.5.0:
+    resolution: {integrity: sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q==}
 
-  set-function-length@1.2.2:
-    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+  own-keys@1.0.1:
+    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
 
-  set-function-name@2.0.2:
-    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
-    engines: {node: '>= 0.4'}
+  p-filter@2.1.0:
+    resolution: {integrity: sha512-ZBxxZ5sL2HghephhpGAQdoskxplTwr7ICaehZwLIlfL6acuVgZPm8yBNuRAFBGEqtD/hmUeq9eqLg2ys9Xr/yw==}
+    engines: {node: '>=8'}
 
-  set-proto@1.0.0:
-    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
-    engines: {node: '>= 0.4'}
+  p-finally@1.0.0:
+    resolution: {integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==}
+    engines: {node: '>=4'}
 
-  setprototypeof@1.2.0:
-    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
 
-  sha.js@2.4.11:
-    resolution: {integrity: sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==}
-    hasBin: true
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
 
-  sharp@0.34.2:
-    resolution: {integrity: sha512-lszvBmB9QURERtyKT2bNmsgxXK0ShJrL/fvqlonCo7e6xBF8nT8xU6pW+PMIbLsz0RxQk3rgH9kd8UmvOzlMJg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+  p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
 
-  shebang-command@2.0.0:
-    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
-    engines: {node: '>=8'}
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
 
-  shebang-regex@3.0.0:
-    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+  p-map@2.1.0:
+    resolution: {integrity: sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==}
+    engines: {node: '>=6'}
+
+  p-queue@6.6.2:
+    resolution: {integrity: sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==}
     engines: {node: '>=8'}
 
-  shiki@2.5.0:
-    resolution: {integrity: sha512-mI//trrsaiCIPsja5CNfsyNOqgAZUb6VpJA+340toL42UpzQlXpwRV9nch69X6gaUxrr9kaOOa6e3y3uAkGFxQ==}
+  p-timeout@3.2.0:
+    resolution: {integrity: sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==}
+    engines: {node: '>=8'}
 
-  side-channel-list@1.0.0:
-    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
-    engines: {node: '>= 0.4'}
+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
 
-  side-channel-map@1.0.1:
-    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
-    engines: {node: '>= 0.4'}
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
-  side-channel-weakmap@1.0.2:
-    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
-    engines: {node: '>= 0.4'}
+  package-manager-detector@0.2.11:
+    resolution: {integrity: sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==}
 
-  side-channel@1.1.0:
-    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
-    engines: {node: '>= 0.4'}
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
 
-  siginfo@2.0.0:
-    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+  parse-asn1@5.1.7:
+    resolution: {integrity: sha512-CTM5kuWR3sx9IFamcl5ErfPl6ea/N8IYwiJ+vpeB2g+1iknv7zBl5uPwbMbRVznRVbrNY6lGuDoE5b30grmbqg==}
+    engines: {node: '>= 0.10'}
 
-  signal-exit@3.0.7:
-    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
 
-  signal-exit@4.1.0:
-    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
-    engines: {node: '>=14'}
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
 
-  simple-swizzle@0.2.2:
-    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
+  parseurl@1.3.3:
+    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+    engines: {node: '>= 0.8'}
 
-  sirv@3.0.1:
-    resolution: {integrity: sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==}
-    engines: {node: '>=18'}
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
 
-  slash@3.0.0:
-    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
 
-  slice-ansi@4.0.0:
-    resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
-    engines: {node: '>=10'}
-
-  source-map-js@1.2.1:
-    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
-    engines: {node: '>=0.10.0'}
-
-  source-map-support@0.5.21:
-    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
-
-  source-map@0.6.1:
-    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+  path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
 
-  space-separated-tokens@2.0.2:
-    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
 
-  spawndamnit@3.0.1:
-    resolution: {integrity: sha512-MmnduQUuHCoFckZoWnXsTg7JaiLBJrKFj9UI2MbRPGaJeVpsLcVBu6P/IGZovziM/YBsellCmsprgNA+w0CzVg==}
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
-  spdx-correct@3.2.0:
-    resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
 
-  spdx-exceptions@2.5.0:
-    resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==}
+  path-scurry@2.0.0:
+    resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
+    engines: {node: 20 || >=22}
 
-  spdx-expression-parse@3.0.1:
-    resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
+  path-to-regexp@8.2.0:
+    resolution: {integrity: sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==}
+    engines: {node: '>=16'}
 
-  spdx-license-ids@3.0.21:
-    resolution: {integrity: sha512-Bvg/8F5XephndSK3JffaRqdT+gyhfqIPwDHpX80tJrF8QQRYMo8sNMeaZ2Dp5+jhwKnUmIOyFFQfHRkjJm5nXg==}
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
 
-  speakingurl@14.0.1:
-    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
-    engines: {node: '>=0.10.0'}
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
-  split-on-first@1.1.0:
-    resolution: {integrity: sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==}
-    engines: {node: '>=6'}
+  pathval@2.0.0:
+    resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==}
+    engines: {node: '>= 14.16'}
 
-  sprintf-js@1.0.3:
-    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
+  pbkdf2@3.1.2:
+    resolution: {integrity: sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==}
+    engines: {node: '>=0.12'}
 
-  stable-hash@0.0.5:
-    resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
+  perfect-debounce@1.0.0:
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
 
-  stable@0.1.8:
-    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'
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
-  stackback@0.0.2:
-    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
 
-  statuses@2.0.1:
-    resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
-    engines: {node: '>= 0.8'}
+  picomatch@4.0.2:
+    resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
+    engines: {node: '>=12'}
 
-  std-env@3.9.0:
-    resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
+  pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
 
-  stream-browserify@3.0.0:
-    resolution: {integrity: sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==}
+  pify@4.0.1:
+    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
+    engines: {node: '>=6'}
 
-  streamsearch@1.1.0:
-    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
-    engines: {node: '>=10.0.0'}
+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
 
-  strict-uri-encode@2.0.0:
-    resolution: {integrity: sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==}
-    engines: {node: '>=4'}
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
-  string-width@4.2.3:
-    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
-    engines: {node: '>=8'}
+  pkg-types@2.1.0:
+    resolution: {integrity: sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A==}
 
-  string-width@5.1.2:
-    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
-    engines: {node: '>=12'}
+  playwright-core@1.52.0:
+    resolution: {integrity: sha512-l2osTgLXSMeuLZOML9qYODUQoPPnUsKsb5/P6LJ2e6uPKXUdPK5WYhN4z03G+YNbWmGDY4YENauNu4ZKczreHg==}
+    engines: {node: '>=18'}
+    hasBin: true
 
-  string.prototype.includes@2.0.1:
-    resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
-    engines: {node: '>= 0.4'}
+  playwright@1.52.0:
+    resolution: {integrity: sha512-JAwMNMBlxJ2oD1kce4KPtMkDeKGHQstdpFPcPH3maElAXon/QZeTvtsfXmTMRyO9TslfoYOXkSsvao2nE1ilTw==}
+    engines: {node: '>=18'}
+    hasBin: true
 
-  string.prototype.matchall@4.0.12:
-    resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
+  possible-typed-array-names@1.1.0:
+    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
 
-  string.prototype.repeat@1.0.0:
-    resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
+  postcss-calc@8.2.4:
+    resolution: {integrity: sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==}
+    peerDependencies:
+      postcss: ^8.2.2
 
-  string.prototype.trim@1.2.10:
-    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
-    engines: {node: '>= 0.4'}
+  postcss-colormin@5.3.1:
+    resolution: {integrity: sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
 
-  string.prototype.trimend@1.0.9:
-    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
-    engines: {node: '>= 0.4'}
+  postcss-convert-values@5.1.3:
+    resolution: {integrity: sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
 
-  string.prototype.trimstart@1.0.8:
-    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
-    engines: {node: '>= 0.4'}
+  postcss-discard-comments@5.1.2:
+    resolution: {integrity: sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
 
-  string_decoder@1.1.1:
-    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+  postcss-discard-duplicates@5.1.0:
+    resolution: {integrity: sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
 
-  string_decoder@1.3.0:
-    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+  postcss-discard-empty@5.1.1:
+    resolution: {integrity: sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
 
-  stringify-entities@4.0.4:
-    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+  postcss-discard-overridden@5.1.0:
+    resolution: {integrity: sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
 
-  strip-ansi@6.0.1:
-    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
-    engines: {node: '>=8'}
+  postcss-import@15.1.0:
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
 
-  strip-ansi@7.1.0:
-    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
-    engines: {node: '>=12'}
+  postcss-js@4.0.1:
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
 
-  strip-bom@3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
-    engines: {node: '>=4'}
+  postcss-load-config@4.0.2:
+    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
 
-  strip-indent@3.0.0:
-    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
-    engines: {node: '>=8'}
-
-  strip-json-comments@3.1.1:
-    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
-    engines: {node: '>=8'}
+  postcss-media-query-parser@0.2.3:
+    resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
 
-  style-search@0.1.0:
-    resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
+  postcss-merge-longhand@5.1.7:
+    resolution: {integrity: sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
 
-  styled-jsx@5.1.6:
-    resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
-    engines: {node: '>= 12.0.0'}
+  postcss-merge-rules@5.1.4:
+    resolution: {integrity: sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==}
+    engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
-      '@babel/core': '*'
-      babel-plugin-macros: '*'
-      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      babel-plugin-macros:
-        optional: true
+      postcss: ^8.2.15
 
-  stylehacks@5.1.1:
-    resolution: {integrity: sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==}
+  postcss-minify-font-values@5.1.0:
+    resolution: {integrity: sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==}
     engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
       postcss: ^8.2.15
 
-  stylelint-config-recommended-scss@8.0.0:
-    resolution: {integrity: sha512-BxjxEzRaZoQb7Iinc3p92GS6zRdRAkIuEu2ZFLTxJK2e1AIcCb5B5MXY9KOXdGTnYFZ+KKx6R4Fv9zU6CtMYPQ==}
+  postcss-minify-gradients@5.1.1:
+    resolution: {integrity: sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==}
+    engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
-      postcss: ^8.3.3
-      stylelint: ^14.10.0
-    peerDependenciesMeta:
-      postcss:
-        optional: true
+      postcss: ^8.2.15
 
-  stylelint-config-recommended@9.0.0:
-    resolution: {integrity: sha512-9YQSrJq4NvvRuTbzDsWX3rrFOzOlYBmZP+o513BJN/yfEmGSr0AxdvrWs0P/ilSpVV/wisamAHu5XSk8Rcf4CQ==}
+  postcss-minify-params@5.1.4:
+    resolution: {integrity: sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==}
+    engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
-      stylelint: ^14.10.0
+      postcss: ^8.2.15
 
-  stylelint-config-standard-scss@6.1.0:
-    resolution: {integrity: sha512-iZ2B5kQT2G3rUzx+437cEpdcnFOQkwnwqXuY8Z0QUwIHQVE8mnYChGAquyKFUKZRZ0pRnrciARlPaR1RBtPb0Q==}
+  postcss-minify-selectors@5.2.1:
+    resolution: {integrity: sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==}
+    engines: {node: ^10 || ^12 || >=14.0}
     peerDependencies:
-      postcss: ^8.3.3
-      stylelint: ^14.14.0
-    peerDependenciesMeta:
-      postcss:
-        optional: true
+      postcss: ^8.2.15
 
-  stylelint-config-standard@29.0.0:
-    resolution: {integrity: sha512-uy8tZLbfq6ZrXy4JKu3W+7lYLgRQBxYTUUB88vPgQ+ZzAxdrvcaSUW9hOMNLYBnwH+9Kkj19M2DHdZ4gKwI7tg==}
+  postcss-modules-extract-imports@3.1.0:
+    resolution: {integrity: sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==}
+    engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
-      stylelint: ^14.14.0
+      postcss: ^8.1.0
 
-  stylelint-scss@4.7.0:
-    resolution: {integrity: sha512-TSUgIeS0H3jqDZnby1UO1Qv3poi1N8wUYIJY6D1tuUq2MN3lwp/rITVo0wD+1SWTmRm0tNmGO0b7nKInnqF6Hg==}
+  postcss-modules-local-by-default@4.2.0:
+    resolution: {integrity: sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==}
+    engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
-      stylelint: ^14.5.1 || ^15.0.0
+      postcss: ^8.1.0
 
-  stylelint@15.1.0:
-    resolution: {integrity: sha512-Tw8OyIiYhxnIHUzgoLlCyWgCUKsPYiP3TDgs7M1VbayS+q5qZly2yxABg+YPe/hFRWiu0cOtptCtpyrn1CrnYw==}
-    engines: {node: ^14.13.1 || >=16.0.0}
-    hasBin: true
+  postcss-modules-scope@3.2.1:
+    resolution: {integrity: sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
 
-  superjson@2.2.2:
-    resolution: {integrity: sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==}
-    engines: {node: '>=16'}
+  postcss-modules-values@4.0.0:
+    resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
 
-  supports-color@7.2.0:
-    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
-    engines: {node: '>=8'}
+  postcss-nested@6.2.0:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
 
-  supports-hyperlinks@2.3.0:
-    resolution: {integrity: sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==}
-    engines: {node: '>=8'}
+  postcss-normalize-charset@5.1.0:
+    resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
 
-  supports-preserve-symlinks-flag@1.0.0:
-    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
-    engines: {node: '>= 0.4'}
+  postcss-normalize-display-values@5.1.0:
+    resolution: {integrity: sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
 
-  svg-tags@1.0.0:
-    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
+  postcss-normalize-positions@5.1.1:
+    resolution: {integrity: sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
 
-  svgo@2.8.0:
-    resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==}
-    engines: {node: '>=10.13.0'}
-    hasBin: true
+  postcss-normalize-repeat-style@5.1.1:
+    resolution: {integrity: sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
 
-  symbol-tree@3.2.4:
-    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+  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
 
-  synckit@0.11.6:
-    resolution: {integrity: sha512-2pR2ubZSV64f/vqm9eLPz/KOvR9Dm+Co/5ChLgeHl0yEDRc6h5hXHoxEQH8Y5Ljycozd3p1k5TTSVdzYGkPvLw==}
-    engines: {node: ^14.18.0 || >=16.0.0}
+  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
 
-  tabbable@6.2.0:
-    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+  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
 
-  table@6.9.0:
-    resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
-    engines: {node: '>=10.0.0'}
+  postcss-normalize-url@5.1.0:
+    resolution: {integrity: sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
 
-  tailwind-merge@3.3.0:
-    resolution: {integrity: sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ==}
+  postcss-normalize-whitespace@5.1.1:
+    resolution: {integrity: sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
 
-  tailwindcss@4.1.8:
-    resolution: {integrity: sha512-kjeW8gjdxasbmFKpVGrGd5T4i40mV5J2Rasw48QARfYeQ8YS9x02ON9SFWax3Qf616rt4Cp3nVNIj6Hd1mP3og==}
+  postcss-ordered-values@5.1.3:
+    resolution: {integrity: sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
 
-  tapable@2.2.2:
-    resolution: {integrity: sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==}
-    engines: {node: '>=6'}
+  postcss-reduce-initial@5.1.2:
+    resolution: {integrity: sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
 
-  tar-stream@2.2.0:
-    resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
-    engines: {node: '>=6'}
+  postcss-reduce-transforms@5.1.0:
+    resolution: {integrity: sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
 
-  tar@7.4.3:
-    resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
-    engines: {node: '>=18'}
+  postcss-resolve-nested-selector@0.1.6:
+    resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==}
 
-  term-size@2.2.1:
-    resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
-    engines: {node: '>=8'}
+  postcss-safe-parser@6.0.0:
+    resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.3.3
 
-  terser@5.39.2:
-    resolution: {integrity: sha512-yEPUmWve+VA78bI71BW70Dh0TuV4HHd+I5SHOAfS1+QBOmvmCiiffgjR8ryyEd3KIfvPGFqoADt8LdQ6XpXIvg==}
-    engines: {node: '>=10'}
-    hasBin: true
+  postcss-scss@4.0.9:
+    resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.4.29
 
-  test-exclude@7.0.1:
-    resolution: {integrity: sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==}
-    engines: {node: '>=18'}
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
 
-  text-table@0.2.0:
-    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
+  postcss-selector-parser@7.1.0:
+    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
+    engines: {node: '>=4'}
 
-  tinybench@2.9.0:
-    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+  postcss-svgo@5.1.0:
+    resolution: {integrity: sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
 
-  tinyexec@0.3.2:
-    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+  postcss-unique-selectors@5.1.1:
+    resolution: {integrity: sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
 
-  tinyglobby@0.2.13:
-    resolution: {integrity: sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==}
-    engines: {node: '>=12.0.0'}
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  tinypool@1.0.2:
-    resolution: {integrity: sha512-al6n+QEANGFOMf/dmUMsuS5/r9B06uwlyNjZZql/zv8J7ybHCgoihBNORZCY2mzUuAnomQa2JdhyHKzZxPCrFA==}
-    engines: {node: ^18.0.0 || >=20.0.0}
+  postcss@8.4.31:
+    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+    engines: {node: ^10 || ^12 || >=14}
 
-  tinyrainbow@2.0.0:
-    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
-    engines: {node: '>=14.0.0'}
+  postcss@8.5.3:
+    resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
+    engines: {node: ^10 || ^12 || >=14}
 
-  tinyspy@3.0.2:
-    resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
-    engines: {node: '>=14.0.0'}
+  preact@10.26.7:
+    resolution: {integrity: sha512-43xS+QYc1X1IPbw03faSgY6I6OYWcLrJRv3hU0+qMOfh/XCHcP0MX2CVjNARYR2cC/guu975sta4OcjlczxD7g==}
 
-  tldts-core@6.1.86:
-    resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==}
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
 
-  tldts@6.1.86:
-    resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
+  prettier-linter-helpers@1.0.0:
+    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
+    engines: {node: '>=6.0.0'}
+
+  prettier@2.8.8:
+    resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
+    engines: {node: '>=10.13.0'}
     hasBin: true
 
-  tmp@0.0.33:
-    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
-    engines: {node: '>=0.6.0'}
+  prettier@3.5.3:
+    resolution: {integrity: sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==}
+    engines: {node: '>=14'}
+    hasBin: true
 
-  tmp@0.2.3:
-    resolution: {integrity: sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==}
-    engines: {node: '>=14.14'}
+  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}
 
-  to-regex-range@5.0.1:
-    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
-    engines: {node: '>=8.0'}
+  pretty-format@29.7.0:
+    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  toidentifier@1.0.1:
-    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
-    engines: {node: '>=0.6'}
+  process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
 
-  totalist@3.0.1:
-    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
-    engines: {node: '>=6'}
+  process@0.11.10:
+    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
+    engines: {node: '>= 0.6.0'}
 
-  tough-cookie@5.1.2:
-    resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==}
-    engines: {node: '>=16'}
+  prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
-  tr46@0.0.3:
-    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+  property-information@7.1.0:
+    resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
 
-  tr46@5.1.1:
-    resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
-    engines: {node: '>=18'}
+  proto-list@1.2.4:
+    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
 
-  trim-lines@3.0.1:
-    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+  proxy-addr@2.0.7:
+    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
+    engines: {node: '>= 0.10'}
 
-  trim-newlines@3.0.1:
-    resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
-    engines: {node: '>=8'}
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
-  ts-api-utils@1.4.3:
-    resolution: {integrity: sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      typescript: '>=4.2.0'
+  public-encrypt@4.0.3:
+    resolution: {integrity: sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==}
 
-  ts-api-utils@2.1.0:
-    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
-    engines: {node: '>=18.12'}
-    peerDependencies:
-      typescript: '>=4.8.4'
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
 
-  tsconfig-paths@3.15.0:
-    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
+  qs@6.14.0:
+    resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==}
+    engines: {node: '>=0.6'}
 
-  tsconfig-paths@4.2.0:
-    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+  quansync@0.2.10:
+    resolution: {integrity: sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==}
+
+  query-string@7.1.3:
+    resolution: {integrity: sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==}
     engines: {node: '>=6'}
 
-  tslib@1.14.1:
-    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  tslib@2.8.1:
-    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+  quick-lru@4.0.1:
+    resolution: {integrity: sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==}
+    engines: {node: '>=8'}
 
-  tsutils@3.21.0:
-    resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
-    engines: {node: '>= 6'}
-    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'
+  randombytes@2.1.0:
+    resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
 
-  tw-animate-css@1.3.4:
-    resolution: {integrity: sha512-dd1Ht6/YQHcNbq0znIT6dG8uhO7Ce+VIIhZUhjsryXsMPJQz3bZg7Q2eNzLwipb25bRZslGb2myio5mScd1TFg==}
+  randomfill@1.0.4:
+    resolution: {integrity: sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==}
 
-  type-check@0.4.0:
-    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
-    engines: {node: '>= 0.8.0'}
+  range-parser@1.2.1:
+    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+    engines: {node: '>= 0.6'}
 
-  type-fest@0.18.1:
-    resolution: {integrity: sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==}
-    engines: {node: '>=10'}
+  raw-body@3.0.0:
+    resolution: {integrity: sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==}
+    engines: {node: '>= 0.8'}
 
-  type-fest@0.20.2:
-    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
-    engines: {node: '>=10'}
+  react-day-picker@8.10.1:
+    resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==}
+    peerDependencies:
+      date-fns: ^2.28.0 || ^3.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
 
-  type-fest@0.6.0:
-    resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==}
-    engines: {node: '>=8'}
+  react-dom@18.3.1:
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+    peerDependencies:
+      react: ^18.3.1
 
-  type-fest@0.8.1:
-    resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
-    engines: {node: '>=8'}
+  react-dom@19.1.0:
+    resolution: {integrity: sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==}
+    peerDependencies:
+      react: ^19.1.0
 
-  type-is@2.0.1:
-    resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==}
-    engines: {node: '>= 0.6'}
+  react-hook-form@7.58.1:
+    resolution: {integrity: sha512-Lml/KZYEEFfPhUVgE0RdCVpnC4yhW+PndRhbiTtdvSlQTL8IfVR+iQkBjLIvmmc6+GGoVeM11z37ktKFPAb0FA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
 
-  typed-array-buffer@1.0.3:
-    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
-    engines: {node: '>= 0.4'}
+  react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
-  typed-array-byte-length@1.0.3:
-    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
-    engines: {node: '>= 0.4'}
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
-  typed-array-byte-offset@1.0.4:
-    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
-    engines: {node: '>= 0.4'}
+  react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
-  typed-array-length@1.0.7:
-    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
-    engines: {node: '>= 0.4'}
+  react-refresh@0.17.0:
+    resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
+    engines: {node: '>=0.10.0'}
 
-  typescript-eslint@8.33.1:
-    resolution: {integrity: sha512-AgRnV4sKkWOiZ0Kjbnf5ytTJXMUZQ0qhSVdQtDNYLPLnjsATEYhaO94GlRQwi4t4gO8FfjM6NnikHeKjUm8D7A==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
     peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  typescript@5.1.6:
-    resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}
-    engines: {node: '>=14.17'}
-    hasBin: 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
 
-  typescript@5.7.3:
-    resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==}
-    engines: {node: '>=14.17'}
-    hasBin: true
+  react-resizable-panels@2.1.9:
+    resolution: {integrity: sha512-z77+X08YDIrgAes4jl8xhnUu1LNIRp4+E7cv4xHmLOxxUPO/ML7PSrE813b90vj7xvQ1lcf7g2uA9GeMZonjhQ==}
+    peerDependencies:
+      react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
 
-  typescript@5.8.3:
-    resolution: {integrity: sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==}
-    engines: {node: '>=14.17'}
-    hasBin: true
+  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'
 
-  ufo@1.6.1:
-    resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
+  react-router@6.30.1:
+    resolution: {integrity: sha512-X1m21aEmxGXqENEPG3T6u0Th7g0aS4ZmoNynhbs+Cn+q+QGTLt+d5IQ2bHAXKzKcxGJjxACpVbnYQSCRcfxHlQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      react: '>=16.8'
 
-  unbox-primitive@1.1.0:
-    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
-    engines: {node: '>= 0.4'}
+  react-smooth@4.0.4:
+    resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  undici-types@6.19.8:
-    resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
+  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
 
-  undici-types@6.21.0:
-    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+  react-transition-group@4.4.5:
+    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
+    peerDependencies:
+      react: '>=16.6.0'
+      react-dom: '>=16.6.0'
 
-  undici-types@7.8.0:
-    resolution: {integrity: sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==}
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
 
-  unist-util-is@6.0.0:
-    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+  react@19.1.0:
+    resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
+    engines: {node: '>=0.10.0'}
 
-  unist-util-position@5.0.0:
-    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+  read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
 
-  unist-util-stringify-position@4.0.0:
-    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+  read-pkg-up@7.0.1:
+    resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
+    engines: {node: '>=8'}
 
-  unist-util-visit-parents@6.0.1:
-    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+  read-pkg@5.2.0:
+    resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
+    engines: {node: '>=8'}
 
-  unist-util-visit@5.0.0:
-    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
+  read-yaml-file@1.1.0:
+    resolution: {integrity: sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA==}
+    engines: {node: '>=6'}
 
-  universalify@0.1.2:
-    resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
-    engines: {node: '>= 4.0.0'}
+  readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
 
-  universalify@2.0.1:
-    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
-    engines: {node: '>= 10.0.0'}
+  readable-stream@3.6.2:
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
 
-  unpipe@1.0.0:
-    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
-    engines: {node: '>= 0.8'}
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
 
-  unrs-resolver@1.7.2:
-    resolution: {integrity: sha512-BBKpaylOW8KbHsu378Zky/dGh4ckT/4NW/0SHRABdqRLcQJ2dAOjDo9g97p04sWflm0kqPqpUatxReNV/dqI5A==}
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
 
-  update-browserslist-db@1.1.3:
-    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
-    hasBin: true
+  recharts-scale@0.4.5:
+    resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
+
+  recharts@2.15.0:
+    resolution: {integrity: sha512-cIvMxDfpAmqAmVgc4yb7pgm/O1tmmkl/CjrvXuW+62/+7jj/iF9Ykm+hb/UJt42TREHMyd3gb+pkgoa2MxgDIw==}
+    engines: {node: '>=14'}
     peerDependencies:
-      browserslist: '>= 4.21.0'
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  uri-js@4.4.1:
-    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+  redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
 
-  util-deprecate@1.0.2:
-    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+  reflect.getprototypeof@1.0.10:
+    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
+    engines: {node: '>= 0.4'}
 
-  uuid@11.1.0:
-    resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
-    hasBin: true
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
 
-  v8-compile-cache@2.4.0:
-    resolution: {integrity: sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==}
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
 
-  validate-npm-package-license@3.0.4:
-    resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
+  regex@6.0.1:
+    resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==}
 
-  vary@1.1.2:
-    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
-    engines: {node: '>= 0.8'}
+  regexp.prototype.flags@1.5.4:
+    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
+    engines: {node: '>= 0.4'}
 
-  vfile-message@4.0.2:
-    resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
+  regexpp@3.2.0:
+    resolution: {integrity: sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==}
+    engines: {node: '>=8'}
 
-  vfile@6.0.3:
-    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
 
-  vite-node@3.1.3:
-    resolution: {integrity: sha512-uHV4plJ2IxCl4u1up1FQRrqclylKAogbtBfOTwcuJ28xFi+89PZ57BRh+naIRvH70HPwxy5QHYzg1OrEaC7AbA==}
-    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  requireindex@1.2.0:
+    resolution: {integrity: sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==}
+    engines: {node: '>=0.10.5'}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve-from@5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
+
+  resolve.exports@2.0.3:
+    resolution: {integrity: sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==}
+    engines: {node: '>=10'}
+
+  resolve@1.19.0:
+    resolution: {integrity: sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==}
+
+  resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+    engines: {node: '>= 0.4'}
     hasBin: true
 
-  vite@5.4.19:
-    resolution: {integrity: sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==}
-    engines: {node: ^18.0.0 || >=20.0.0}
+  resolve@2.0.0-next.5:
+    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
     hasBin: true
-    peerDependencies:
-      '@types/node': ^18.0.0 || >=20.0.0
-      less: '*'
-      lightningcss: ^1.21.0
-      sass: '*'
-      sass-embedded: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      lightningcss:
-        optional: true
-      sass:
-        optional: true
-      sass-embedded:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
 
-  vite@6.3.5:
-    resolution: {integrity: sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==}
-    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+  restore-cursor@3.1.0:
+    resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
+    engines: {node: '>=8'}
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+
+  rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
-    peerDependencies:
-      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
-      jiti: '>=1.21.0'
-      less: '*'
-      lightningcss: ^1.21.0
-      sass: '*'
-      sass-embedded: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.16.0
-      tsx: ^4.8.1
-      yaml: ^2.4.2
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      jiti:
-        optional: true
-      less:
-        optional: true
-      lightningcss:
-        optional: true
-      sass:
-        optional: true
-      sass-embedded:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-      tsx:
-        optional: true
-      yaml:
-        optional: true
 
-  vitepress@1.6.3:
-    resolution: {integrity: sha512-fCkfdOk8yRZT8GD9BFqusW3+GggWYZ/rYncOfmgcDtP3ualNHCAg+Robxp2/6xfH1WwPHtGpPwv7mbA3qomtBw==}
+  rimraf@6.0.1:
+    resolution: {integrity: sha512-9dkvaxAsk/xNXSJzMgFqqMCuFgt2+KsOFek3TMLfo8NCPfWpBmqwyNn5Y+NX56QUYfCtsyhF3ayiboEoUmJk/A==}
+    engines: {node: 20 || >=22}
     hasBin: true
+
+  ripemd160@2.0.2:
+    resolution: {integrity: sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==}
+
+  rollup-plugin-dts@6.2.1:
+    resolution: {integrity: sha512-sR3CxYUl7i2CHa0O7bA45mCrgADyAQ0tVtGSqi3yvH28M+eg1+g5d7kQ9hLvEz5dorK3XVsH5L2jwHLQf72DzA==}
+    engines: {node: '>=16'}
     peerDependencies:
-      markdown-it-mathjax3: ^4
-      postcss: ^8
-    peerDependenciesMeta:
-      markdown-it-mathjax3:
-        optional: true
-      postcss:
-        optional: true
+      rollup: ^3.29.4 || ^4
+      typescript: ^4.5 || ^5.0
 
-  vitest-browser-react@0.1.1:
-    resolution: {integrity: sha512-n9l+sIAexKqqfBuEkjVGdfZ4xAn1Gn/+wc4Mo8KsUSUOVoM9evSY0rVXdMIzCQqloT/zvmFGAtziFINkqu+t7g==}
-    engines: {node: ^18.0.0 || >=20.0.0}
+  rollup-plugin-polyfill-node@0.13.0:
+    resolution: {integrity: sha512-FYEvpCaD5jGtyBuBFcQImEGmTxDTPbiHjJdrYIp+mFIwgXiXabxvKUK7ZT9P31ozu2Tqm9llYQMRWsfvTMTAOw==}
     peerDependencies:
-      '@types/react': '>18.0.0'
-      '@types/react-dom': '>18.0.0'
-      '@vitest/browser': '>=2.1.0'
-      react: '>18.0.0'
-      react-dom: '>18.0.0'
-      vitest: '>=2.1.0'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+      rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
 
-  vitest@3.1.3:
-    resolution: {integrity: sha512-188iM4hAHQ0km23TN/adso1q5hhwKqUpv+Sd6p5sOuh6FhQnRNW3IsiIpvxqahtBabsJ2SLZgmGSpcYK4wQYJw==}
-    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
-    hasBin: true
+  rollup-plugin-styles@4.0.0:
+    resolution: {integrity: sha512-A2K2sao84OsTmDxXG83JTCdXWrmgvQkkI38XDat46rdtpGMRm9tSYqeCdlwwGDJF4kKIafhV1mUidqu8MxUGig==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     peerDependencies:
-      '@edge-runtime/vm': '*'
-      '@types/debug': ^4.1.12
-      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
-      '@vitest/browser': 3.1.3
-      '@vitest/ui': 3.1.3
-      happy-dom: '*'
-      jsdom: '*'
-    peerDependenciesMeta:
-      '@edge-runtime/vm':
-        optional: true
-      '@types/debug':
-        optional: true
-      '@types/node':
-        optional: true
-      '@vitest/browser':
-        optional: true
-      '@vitest/ui':
-        optional: true
-      happy-dom:
-        optional: true
-      jsdom:
-        optional: true
+      rollup: ^2.63.0
 
-  vscode-uri@3.1.0:
-    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+  rollup@4.40.2:
+    resolution: {integrity: sha512-tfUOg6DTP4rhQ3VjOO6B4wyrJnGOX85requAXvqYTHsOgb2TFJdZ3aWpT8W2kPoypSGP7dZUyzxJ9ee4buM5Fg==}
+    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==}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  safe-array-concat@1.1.3:
+    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
+    engines: {node: '>=0.4'}
+
+  safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  safe-push-apply@1.0.0:
+    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
+    engines: {node: '>= 0.4'}
+
+  safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+    engines: {node: '>= 0.4'}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  sass@1.89.0:
+    resolution: {integrity: sha512-ld+kQU8YTdGNjOLfRWBzewJpU5cwEv/h5yyqlSeJcj6Yh8U4TDA9UA5FPicqDz/xgRPWRSYIQNiFks21TbA9KQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  saxes@6.0.0:
+    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==}
+
+  search-insights@2.17.3:
+    resolution: {integrity: sha512-RQPdCYTa8A68uM2jwxoY842xDhvx3E5LFL1LxvxCNMev4o5mLuokczhzjAgGwUZBAmOKZknArSxLKmXtIi2AxQ==}
+
+  secure-random-bytes@5.0.1:
+    resolution: {integrity: sha512-48nvkahmdyoRbHW/x1HTGIk+i2/84MHFBB+rZ50cg1y/p2RjKG+fhTMQKZx4QD6T6/o2M2WHLPkncqQpjMMsUw==}
+    engines: {node: 18 || >=20}
+
+  secure-random-octet@4.0.1:
+    resolution: {integrity: sha512-KEeg9wGi/96Q8Edp97gt5Z5dYCcvG7vPKdKFq6rPLCHtaaHwZKbhbC+gY74O7OjX8Fnels49wqc8IgkNhBJZfw==}
+    engines: {node: 18 || >=20}
+
+  semver@5.7.2:
+    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
+    hasBin: true
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.7.2:
+    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  send@1.2.0:
+    resolution: {integrity: sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==}
+    engines: {node: '>= 18'}
+
+  serve-static@2.2.0:
+    resolution: {integrity: sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==}
+    engines: {node: '>= 18'}
+
+  set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
+
+  set-function-name@2.0.2:
+    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
+    engines: {node: '>= 0.4'}
+
+  set-proto@1.0.0:
+    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
+    engines: {node: '>= 0.4'}
+
+  setprototypeof@1.2.0:
+    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+
+  sha.js@2.4.11:
+    resolution: {integrity: sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==}
+    hasBin: true
+
+  sharp@0.34.2:
+    resolution: {integrity: sha512-lszvBmB9QURERtyKT2bNmsgxXK0ShJrL/fvqlonCo7e6xBF8nT8xU6pW+PMIbLsz0RxQk3rgH9kd8UmvOzlMJg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  shiki@2.5.0:
+    resolution: {integrity: sha512-mI//trrsaiCIPsja5CNfsyNOqgAZUb6VpJA+340toL42UpzQlXpwRV9nch69X6gaUxrr9kaOOa6e3y3uAkGFxQ==}
+
+  side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
+  signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  simple-swizzle@0.2.2:
+    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
+
+  sirv@3.0.1:
+    resolution: {integrity: sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==}
+    engines: {node: '>=18'}
+
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
+  slice-ansi@4.0.0:
+    resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
+    engines: {node: '>=10'}
+
+  sonner@1.7.4:
+    resolution: {integrity: sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
+  spawndamnit@3.0.1:
+    resolution: {integrity: sha512-MmnduQUuHCoFckZoWnXsTg7JaiLBJrKFj9UI2MbRPGaJeVpsLcVBu6P/IGZovziM/YBsellCmsprgNA+w0CzVg==}
+
+  spdx-correct@3.2.0:
+    resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
+
+  spdx-exceptions@2.5.0:
+    resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==}
+
+  spdx-expression-parse@3.0.1:
+    resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
+
+  spdx-license-ids@3.0.21:
+    resolution: {integrity: sha512-Bvg/8F5XephndSK3JffaRqdT+gyhfqIPwDHpX80tJrF8QQRYMo8sNMeaZ2Dp5+jhwKnUmIOyFFQfHRkjJm5nXg==}
+
+  speakingurl@14.0.1:
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
+
+  split-on-first@1.1.0:
+    resolution: {integrity: sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==}
+    engines: {node: '>=6'}
+
+  sprintf-js@1.0.3:
+    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
+
+  stable@0.1.8:
+    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'
+
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
+  statuses@2.0.1:
+    resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
+    engines: {node: '>= 0.8'}
+
+  std-env@3.9.0:
+    resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
+
+  stream-browserify@3.0.0:
+    resolution: {integrity: sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==}
+
+  streamsearch@1.1.0:
+    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
+    engines: {node: '>=10.0.0'}
+
+  strict-uri-encode@2.0.0:
+    resolution: {integrity: sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==}
+    engines: {node: '>=4'}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
+  string.prototype.includes@2.0.1:
+    resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.matchall@4.0.12:
+    resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.repeat@1.0.0:
+    resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
+
+  string.prototype.trim@1.2.10:
+    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimend@1.0.9:
+    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimstart@1.0.8:
+    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
+    engines: {node: '>= 0.4'}
+
+  string_decoder@1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+
+  string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.1.0:
+    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+    engines: {node: '>=12'}
+
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
+  strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
+  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'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+
+  stylehacks@5.1.1:
+    resolution: {integrity: sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  stylelint-config-recommended-scss@8.0.0:
+    resolution: {integrity: sha512-BxjxEzRaZoQb7Iinc3p92GS6zRdRAkIuEu2ZFLTxJK2e1AIcCb5B5MXY9KOXdGTnYFZ+KKx6R4Fv9zU6CtMYPQ==}
+    peerDependencies:
+      postcss: ^8.3.3
+      stylelint: ^14.10.0
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+
+  stylelint-config-recommended@9.0.0:
+    resolution: {integrity: sha512-9YQSrJq4NvvRuTbzDsWX3rrFOzOlYBmZP+o513BJN/yfEmGSr0AxdvrWs0P/ilSpVV/wisamAHu5XSk8Rcf4CQ==}
+    peerDependencies:
+      stylelint: ^14.10.0
+
+  stylelint-config-standard-scss@6.1.0:
+    resolution: {integrity: sha512-iZ2B5kQT2G3rUzx+437cEpdcnFOQkwnwqXuY8Z0QUwIHQVE8mnYChGAquyKFUKZRZ0pRnrciARlPaR1RBtPb0Q==}
+    peerDependencies:
+      postcss: ^8.3.3
+      stylelint: ^14.14.0
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+
+  stylelint-config-standard@29.0.0:
+    resolution: {integrity: sha512-uy8tZLbfq6ZrXy4JKu3W+7lYLgRQBxYTUUB88vPgQ+ZzAxdrvcaSUW9hOMNLYBnwH+9Kkj19M2DHdZ4gKwI7tg==}
+    peerDependencies:
+      stylelint: ^14.14.0
+
+  stylelint-scss@4.7.0:
+    resolution: {integrity: sha512-TSUgIeS0H3jqDZnby1UO1Qv3poi1N8wUYIJY6D1tuUq2MN3lwp/rITVo0wD+1SWTmRm0tNmGO0b7nKInnqF6Hg==}
+    peerDependencies:
+      stylelint: ^14.5.1 || ^15.0.0
+
+  stylelint@15.1.0:
+    resolution: {integrity: sha512-Tw8OyIiYhxnIHUzgoLlCyWgCUKsPYiP3TDgs7M1VbayS+q5qZly2yxABg+YPe/hFRWiu0cOtptCtpyrn1CrnYw==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+    hasBin: true
+
+  sucrase@3.35.0:
+    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
+  superjson@2.2.2:
+    resolution: {integrity: sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==}
+    engines: {node: '>=16'}
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-hyperlinks@2.3.0:
+    resolution: {integrity: sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==}
+    engines: {node: '>=8'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  svg-tags@1.0.0:
+    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
+
+  svgo@2.8.0:
+    resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
+  synckit@0.11.6:
+    resolution: {integrity: sha512-2pR2ubZSV64f/vqm9eLPz/KOvR9Dm+Co/5ChLgeHl0yEDRc6h5hXHoxEQH8Y5Ljycozd3p1k5TTSVdzYGkPvLw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+
+  tabbable@6.2.0:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+
+  table@6.9.0:
+    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@3.4.17:
+    resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  tailwindcss@4.1.8:
+    resolution: {integrity: sha512-kjeW8gjdxasbmFKpVGrGd5T4i40mV5J2Rasw48QARfYeQ8YS9x02ON9SFWax3Qf616rt4Cp3nVNIj6Hd1mP3og==}
+
+  tapable@2.2.2:
+    resolution: {integrity: sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==}
+    engines: {node: '>=6'}
+
+  tar-stream@2.2.0:
+    resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
+    engines: {node: '>=6'}
+
+  tar@7.4.3:
+    resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
+    engines: {node: '>=18'}
+
+  term-size@2.2.1:
+    resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
+    engines: {node: '>=8'}
+
+  terser@5.39.2:
+    resolution: {integrity: sha512-yEPUmWve+VA78bI71BW70Dh0TuV4HHd+I5SHOAfS1+QBOmvmCiiffgjR8ryyEd3KIfvPGFqoADt8LdQ6XpXIvg==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  test-exclude@7.0.1:
+    resolution: {integrity: sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==}
+    engines: {node: '>=18'}
+
+  text-table@0.2.0:
+    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
+
+  thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+
+  thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+
+  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==}
+
+  tinyglobby@0.2.13:
+    resolution: {integrity: sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==}
+    engines: {node: '>=12.0.0'}
+
+  tinypool@1.0.2:
+    resolution: {integrity: sha512-al6n+QEANGFOMf/dmUMsuS5/r9B06uwlyNjZZql/zv8J7ybHCgoihBNORZCY2mzUuAnomQa2JdhyHKzZxPCrFA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
+  tinyrainbow@2.0.0:
+    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
+    engines: {node: '>=14.0.0'}
+
+  tinyspy@3.0.2:
+    resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
+    engines: {node: '>=14.0.0'}
+
+  tldts-core@6.1.86:
+    resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==}
+
+  tldts@6.1.86:
+    resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
+    hasBin: true
+
+  tmp@0.0.33:
+    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
+    engines: {node: '>=0.6.0'}
+
+  tmp@0.2.3:
+    resolution: {integrity: sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==}
+    engines: {node: '>=14.14'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  toidentifier@1.0.1:
+    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+    engines: {node: '>=0.6'}
+
+  totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+
+  tough-cookie@5.1.2:
+    resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==}
+    engines: {node: '>=16'}
+
+  tr46@0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+
+  tr46@5.1.1:
+    resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
+    engines: {node: '>=18'}
+
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
+  trim-newlines@3.0.1:
+    resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
+    engines: {node: '>=8'}
+
+  ts-api-utils@1.4.3:
+    resolution: {integrity: sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      typescript: '>=4.2.0'
+
+  ts-api-utils@2.1.0:
+    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
+  tsconfig-paths@3.15.0:
+    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
+
+  tsconfig-paths@4.2.0:
+    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+    engines: {node: '>=6'}
+
+  tslib@1.14.1:
+    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  tsutils@3.21.0:
+    resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
+    engines: {node: '>= 6'}
+    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'}
+
+  type-fest@0.18.1:
+    resolution: {integrity: sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==}
+    engines: {node: '>=10'}
+
+  type-fest@0.20.2:
+    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
+    engines: {node: '>=10'}
+
+  type-fest@0.6.0:
+    resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==}
+    engines: {node: '>=8'}
+
+  type-fest@0.8.1:
+    resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
+    engines: {node: '>=8'}
+
+  type-is@2.0.1:
+    resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==}
+    engines: {node: '>= 0.6'}
+
+  typed-array-buffer@1.0.3:
+    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-length@1.0.3:
+    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-offset@1.0.4:
+    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-length@1.0.7:
+    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
+    engines: {node: '>= 0.4'}
+
+  typescript-eslint@8.33.1:
+    resolution: {integrity: sha512-AgRnV4sKkWOiZ0Kjbnf5ytTJXMUZQ0qhSVdQtDNYLPLnjsATEYhaO94GlRQwi4t4gO8FfjM6NnikHeKjUm8D7A==}
+    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@5.1.6:
+    resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  typescript@5.7.3:
+    resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  typescript@5.8.3:
+    resolution: {integrity: sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  ufo@1.6.1:
+    resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
+
+  unbox-primitive@1.1.0:
+    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
+    engines: {node: '>= 0.4'}
+
+  undici-types@6.19.8:
+    resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
+
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+  undici-types@7.8.0:
+    resolution: {integrity: sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==}
+
+  unist-util-is@6.0.0:
+    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.1:
+    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+
+  unist-util-visit@5.0.0:
+    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
+
+  universalify@0.1.2:
+    resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
+    engines: {node: '>= 4.0.0'}
+
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  unpipe@1.0.0:
+    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+    engines: {node: '>= 0.8'}
+
+  update-browserslist-db@1.1.3:
+    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  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==}
+
+  uuid@11.1.0:
+    resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
+    hasBin: true
+
+  v8-compile-cache@2.4.0:
+    resolution: {integrity: sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==}
+
+  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'}
+
+  vaul@0.9.9:
+    resolution: {integrity: sha512-7afKg48srluhZwIkaU+lgGtFCUsYBSGOl8vcc8N/M3YQlZFlynHD15AE+pwrYdc826o7nrIND4lL9Y6b9WWZZQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+
+  vfile-message@4.0.2:
+    resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
+  victory-vendor@36.9.2:
+    resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
+
+  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@5.4.19:
+    resolution: {integrity: sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+
+  vite@6.3.5:
+    resolution: {integrity: sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      jiti: '>=1.21.0'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vitepress@1.6.3:
+    resolution: {integrity: sha512-fCkfdOk8yRZT8GD9BFqusW3+GggWYZ/rYncOfmgcDtP3ualNHCAg+Robxp2/6xfH1WwPHtGpPwv7mbA3qomtBw==}
+    hasBin: true
+    peerDependencies:
+      markdown-it-mathjax3: ^4
+      postcss: ^8
+    peerDependenciesMeta:
+      markdown-it-mathjax3:
+        optional: true
+      postcss:
+        optional: true
+
+  vitest-browser-react@0.1.1:
+    resolution: {integrity: sha512-n9l+sIAexKqqfBuEkjVGdfZ4xAn1Gn/+wc4Mo8KsUSUOVoM9evSY0rVXdMIzCQqloT/zvmFGAtziFINkqu+t7g==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      '@types/react': '>18.0.0'
+      '@types/react-dom': '>18.0.0'
+      '@vitest/browser': '>=2.1.0'
+      react: '>18.0.0'
+      react-dom: '>18.0.0'
+      vitest: '>=2.1.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  vitest@3.1.3:
+    resolution: {integrity: sha512-188iM4hAHQ0km23TN/adso1q5hhwKqUpv+Sd6p5sOuh6FhQnRNW3IsiIpvxqahtBabsJ2SLZgmGSpcYK4wQYJw==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/debug': ^4.1.12
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      '@vitest/browser': 3.1.3
+      '@vitest/ui': 3.1.3
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/debug':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+
+  vue-component-type-helpers@2.2.10:
+    resolution: {integrity: sha512-iDUO7uQK+Sab2tYuiP9D1oLujCWlhHELHMgV/cB13cuGbG4qwkLHvtfWb6FzvxrIOPDnU0oHsz2MlQjhYDeaHA==}
+
+  vue-eslint-parser@10.1.3:
+    resolution: {integrity: sha512-dbCBnd2e02dYWsXoqX5yKUZlOt+ExIpq7hmHKPb5ZqKcjf++Eo0hMseFTZMLKThrUk61m+Uv6A2YSBve6ZvuDQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+
+  vue-eslint-parser@9.4.3:
+    resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+
+  vue-tsc@2.2.10:
+    resolution: {integrity: sha512-jWZ1xSaNbabEV3whpIDMbjVSVawjAyW+x1n3JeGQo7S0uv2n9F/JMgWW90tGWNFRKya4YwKMZgCtr0vRAM7DeQ==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
+  vue@3.5.14:
+    resolution: {integrity: sha512-LbOm50/vZFG6Mhy6KscQYXZMQ0LMCC/y40HDJPPvGFQ+i/lUH+PJHR6C3assgOQiXdl6tAfsXHbXYVBZZu65ew==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
+  wcwidth@1.0.1:
+    resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
+
+  webidl-conversions@3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+
+  webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+
+  whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
+
+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+
+  whatwg-url@14.2.0:
+    resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
+    engines: {node: '>=18'}
+
+  whatwg-url@5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+
+  which-boxed-primitive@1.1.1:
+    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
+    engines: {node: '>= 0.4'}
+
+  which-builtin-type@1.2.1:
+    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
+    engines: {node: '>= 0.4'}
+
+  which-collection@1.0.2:
+    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
+    engines: {node: '>= 0.4'}
+
+  which-typed-array@1.1.19:
+    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
+    engines: {node: '>= 0.4'}
+
+  which@1.3.1:
+    resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
+    hasBin: true
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  write-file-atomic@5.0.1:
+    resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  ws@8.18.2:
+    resolution: {integrity: sha512-DMricUmwGZUVr++AEAe2uiVM7UoO9MAVZMDu05UQOaUII0lp+zOzLLU4Xqh/JvTqklB1T4uELaaPBKyjE1r4fQ==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  xml-name-validator@4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  yallist@4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+
+  yallist@5.0.0:
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
+
+  yaml@1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    engines: {node: '>= 6'}
+
+  yaml@2.8.0:
+    resolution: {integrity: sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
+
+  yargs-parser@20.2.9:
+    resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
+    engines: {node: '>=10'}
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+  zod@3.25.67:
+    resolution: {integrity: sha512-idA2YXwpCdqUSKRCACDE6ItZD9TZzy3OZMtpfLoh6oPR47lipysRrJfjzMqFxQ3uJuUPyUeWe1r9vLH33xO/Qw==}
+
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
+snapshots:
+
+  '@algolia/autocomplete-core@1.17.7(@algolia/client-search@5.25.0)(algoliasearch@5.25.0)(search-insights@2.17.3)':
+    dependencies:
+      '@algolia/autocomplete-plugin-algolia-insights': 1.17.7(@algolia/client-search@5.25.0)(algoliasearch@5.25.0)(search-insights@2.17.3)
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.25.0)(algoliasearch@5.25.0)
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - algoliasearch
+      - search-insights
+
+  '@algolia/autocomplete-plugin-algolia-insights@1.17.7(@algolia/client-search@5.25.0)(algoliasearch@5.25.0)(search-insights@2.17.3)':
+    dependencies:
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.25.0)(algoliasearch@5.25.0)
+      search-insights: 2.17.3
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - algoliasearch
+
+  '@algolia/autocomplete-preset-algolia@1.17.7(@algolia/client-search@5.25.0)(algoliasearch@5.25.0)':
+    dependencies:
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.25.0)(algoliasearch@5.25.0)
+      '@algolia/client-search': 5.25.0
+      algoliasearch: 5.25.0
+
+  '@algolia/autocomplete-shared@1.17.7(@algolia/client-search@5.25.0)(algoliasearch@5.25.0)':
+    dependencies:
+      '@algolia/client-search': 5.25.0
+      algoliasearch: 5.25.0
+
+  '@algolia/client-abtesting@5.25.0':
+    dependencies:
+      '@algolia/client-common': 5.25.0
+      '@algolia/requester-browser-xhr': 5.25.0
+      '@algolia/requester-fetch': 5.25.0
+      '@algolia/requester-node-http': 5.25.0
+
+  '@algolia/client-analytics@5.25.0':
+    dependencies:
+      '@algolia/client-common': 5.25.0
+      '@algolia/requester-browser-xhr': 5.25.0
+      '@algolia/requester-fetch': 5.25.0
+      '@algolia/requester-node-http': 5.25.0
+
+  '@algolia/client-common@5.25.0': {}
+
+  '@algolia/client-insights@5.25.0':
+    dependencies:
+      '@algolia/client-common': 5.25.0
+      '@algolia/requester-browser-xhr': 5.25.0
+      '@algolia/requester-fetch': 5.25.0
+      '@algolia/requester-node-http': 5.25.0
+
+  '@algolia/client-personalization@5.25.0':
+    dependencies:
+      '@algolia/client-common': 5.25.0
+      '@algolia/requester-browser-xhr': 5.25.0
+      '@algolia/requester-fetch': 5.25.0
+      '@algolia/requester-node-http': 5.25.0
+
+  '@algolia/client-query-suggestions@5.25.0':
+    dependencies:
+      '@algolia/client-common': 5.25.0
+      '@algolia/requester-browser-xhr': 5.25.0
+      '@algolia/requester-fetch': 5.25.0
+      '@algolia/requester-node-http': 5.25.0
+
+  '@algolia/client-search@5.25.0':
+    dependencies:
+      '@algolia/client-common': 5.25.0
+      '@algolia/requester-browser-xhr': 5.25.0
+      '@algolia/requester-fetch': 5.25.0
+      '@algolia/requester-node-http': 5.25.0
+
+  '@algolia/ingestion@1.25.0':
+    dependencies:
+      '@algolia/client-common': 5.25.0
+      '@algolia/requester-browser-xhr': 5.25.0
+      '@algolia/requester-fetch': 5.25.0
+      '@algolia/requester-node-http': 5.25.0
+
+  '@algolia/monitoring@1.25.0':
+    dependencies:
+      '@algolia/client-common': 5.25.0
+      '@algolia/requester-browser-xhr': 5.25.0
+      '@algolia/requester-fetch': 5.25.0
+      '@algolia/requester-node-http': 5.25.0
+
+  '@algolia/recommend@5.25.0':
+    dependencies:
+      '@algolia/client-common': 5.25.0
+      '@algolia/requester-browser-xhr': 5.25.0
+      '@algolia/requester-fetch': 5.25.0
+      '@algolia/requester-node-http': 5.25.0
+
+  '@algolia/requester-browser-xhr@5.25.0':
+    dependencies:
+      '@algolia/client-common': 5.25.0
+
+  '@algolia/requester-fetch@5.25.0':
+    dependencies:
+      '@algolia/client-common': 5.25.0
+
+  '@algolia/requester-node-http@5.25.0':
+    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
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@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)
+      '@csstools/css-color-parser': 3.0.9(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-tokenizer': 3.0.3
+      lru-cache: 10.4.3
+    optional: true
+
+  '@asgardeo/auth-js@5.1.2': {}
+
+  '@asgardeo/auth-spa@3.2.0':
+    dependencies:
+      '@asgardeo/auth-js': 5.1.2
+      await-semaphore: 0.1.3
+      axios: 0.26.1
+      base64url: 3.0.1
+      buffer: 6.0.3
+      fast-sha256: 1.3.0
+      jose: 4.15.9
+      randombytes: 2.1.0
+    transitivePeerDependencies:
+      - debug
+
+  '@asgardeo/js@0.1.3':
+    dependencies:
+      '@asgardeo/auth-js': 5.1.2
+      csstype: 3.1.3
+      lodash.isempty: 4.4.0
+      lodash.merge: 4.6.2
+
+  '@babel/code-frame@7.27.1':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.27.1
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.27.2': {}
+
+  '@babel/core@7.27.1':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.27.1
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-module-transforms': 7.27.1(@babel/core@7.27.1)
+      '@babel/helpers': 7.27.1
+      '@babel/parser': 7.27.2
+      '@babel/template': 7.27.2
+      '@babel/traverse': 7.27.1
+      '@babel/types': 7.27.1
+      convert-source-map: 2.0.0
+      debug: 4.4.1
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/eslint-parser@7.27.1(@babel/core@7.27.1)(eslint@8.57.0)':
+    dependencies:
+      '@babel/core': 7.27.1
+      '@nicolo-ribaudo/eslint-scope-5-internals': 5.1.1-v1
+      eslint: 8.57.0
+      eslint-visitor-keys: 2.1.0
+      semver: 6.3.1
+
+  '@babel/generator@7.27.1':
+    dependencies:
+      '@babel/parser': 7.27.2
+      '@babel/types': 7.27.1
+      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/trace-mapping': 0.3.25
+      jsesc: 3.1.0
+
+  '@babel/helper-compilation-targets@7.27.2':
+    dependencies:
+      '@babel/compat-data': 7.27.2
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.24.5
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-module-imports@7.27.1':
+    dependencies:
+      '@babel/traverse': 7.27.1
+      '@babel/types': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.27.1(@babel/core@7.27.1)':
+    dependencies:
+      '@babel/core': 7.27.1
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/traverse': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-plugin-utils@7.27.1': {}
 
-  vue-component-type-helpers@2.2.10:
-    resolution: {integrity: sha512-iDUO7uQK+Sab2tYuiP9D1oLujCWlhHELHMgV/cB13cuGbG4qwkLHvtfWb6FzvxrIOPDnU0oHsz2MlQjhYDeaHA==}
+  '@babel/helper-string-parser@7.27.1': {}
 
-  vue-eslint-parser@10.1.3:
-    resolution: {integrity: sha512-dbCBnd2e02dYWsXoqX5yKUZlOt+ExIpq7hmHKPb5ZqKcjf++Eo0hMseFTZMLKThrUk61m+Uv6A2YSBve6ZvuDQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
+  '@babel/helper-validator-identifier@7.27.1': {}
 
-  vue-eslint-parser@9.4.3:
-    resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
-    engines: {node: ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '>=6.0.0'
+  '@babel/helper-validator-option@7.27.1': {}
 
-  vue-tsc@2.2.10:
-    resolution: {integrity: sha512-jWZ1xSaNbabEV3whpIDMbjVSVawjAyW+x1n3JeGQo7S0uv2n9F/JMgWW90tGWNFRKya4YwKMZgCtr0vRAM7DeQ==}
-    hasBin: true
-    peerDependencies:
-      typescript: '>=5.0.0'
+  '@babel/helpers@7.27.1':
+    dependencies:
+      '@babel/template': 7.27.2
+      '@babel/types': 7.27.1
 
-  vue@3.5.14:
-    resolution: {integrity: sha512-LbOm50/vZFG6Mhy6KscQYXZMQ0LMCC/y40HDJPPvGFQ+i/lUH+PJHR6C3assgOQiXdl6tAfsXHbXYVBZZu65ew==}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+  '@babel/parser@7.27.2':
+    dependencies:
+      '@babel/types': 7.27.1
 
-  w3c-xmlserializer@5.0.0:
-    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
-    engines: {node: '>=18'}
+  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.27.1)':
+    dependencies:
+      '@babel/core': 7.27.1
+      '@babel/helper-plugin-utils': 7.27.1
 
-  wcwidth@1.0.1:
-    resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
+  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.27.1)':
+    dependencies:
+      '@babel/core': 7.27.1
+      '@babel/helper-plugin-utils': 7.27.1
 
-  webidl-conversions@3.0.1:
-    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+  '@babel/runtime@7.27.1': {}
 
-  webidl-conversions@7.0.0:
-    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
-    engines: {node: '>=12'}
+  '@babel/template@7.27.2':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/parser': 7.27.2
+      '@babel/types': 7.27.1
 
-  whatwg-encoding@3.1.1:
-    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
-    engines: {node: '>=18'}
+  '@babel/traverse@7.27.1':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.27.1
+      '@babel/parser': 7.27.2
+      '@babel/template': 7.27.2
+      '@babel/types': 7.27.1
+      debug: 4.4.1
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
 
-  whatwg-mimetype@4.0.0:
-    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
-    engines: {node: '>=18'}
+  '@babel/types@7.27.1':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
 
-  whatwg-url@14.2.0:
-    resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
-    engines: {node: '>=18'}
+  '@bcoe/v8-coverage@1.0.2': {}
 
-  whatwg-url@5.0.0:
-    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+  '@changesets/apply-release-plan@7.0.12':
+    dependencies:
+      '@changesets/config': 3.1.1
+      '@changesets/get-version-range-type': 0.4.0
+      '@changesets/git': 3.0.4
+      '@changesets/should-skip-package': 0.1.2
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+      detect-indent: 6.1.0
+      fs-extra: 7.0.1
+      lodash.startcase: 4.4.0
+      outdent: 0.5.0
+      prettier: 2.8.8
+      resolve-from: 5.0.0
+      semver: 7.7.2
 
-  which-boxed-primitive@1.1.1:
-    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
-    engines: {node: '>= 0.4'}
+  '@changesets/assemble-release-plan@6.0.8':
+    dependencies:
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.1.3
+      '@changesets/should-skip-package': 0.1.2
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+      semver: 7.7.2
 
-  which-builtin-type@1.2.1:
-    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
-    engines: {node: '>= 0.4'}
+  '@changesets/changelog-git@0.2.1':
+    dependencies:
+      '@changesets/types': 6.1.0
 
-  which-collection@1.0.2:
-    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
-    engines: {node: '>= 0.4'}
+  '@changesets/changelog-github@0.5.1':
+    dependencies:
+      '@changesets/get-github-info': 0.6.0
+      '@changesets/types': 6.1.0
+      dotenv: 8.6.0
+    transitivePeerDependencies:
+      - encoding
 
-  which-typed-array@1.1.19:
-    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
-    engines: {node: '>= 0.4'}
+  '@changesets/cli@2.29.4':
+    dependencies:
+      '@changesets/apply-release-plan': 7.0.12
+      '@changesets/assemble-release-plan': 6.0.8
+      '@changesets/changelog-git': 0.2.1
+      '@changesets/config': 3.1.1
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.1.3
+      '@changesets/get-release-plan': 4.0.12
+      '@changesets/git': 3.0.4
+      '@changesets/logger': 0.1.1
+      '@changesets/pre': 2.0.2
+      '@changesets/read': 0.6.5
+      '@changesets/should-skip-package': 0.1.2
+      '@changesets/types': 6.1.0
+      '@changesets/write': 0.4.0
+      '@manypkg/get-packages': 1.1.3
+      ansi-colors: 4.1.3
+      ci-info: 3.9.0
+      enquirer: 2.4.1
+      external-editor: 3.1.0
+      fs-extra: 7.0.1
+      mri: 1.2.0
+      p-limit: 2.3.0
+      package-manager-detector: 0.2.11
+      picocolors: 1.1.1
+      resolve-from: 5.0.0
+      semver: 7.7.2
+      spawndamnit: 3.0.1
+      term-size: 2.2.1
 
-  which@1.3.1:
-    resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
-    hasBin: true
+  '@changesets/config@3.1.1':
+    dependencies:
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.1.3
+      '@changesets/logger': 0.1.1
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+      fs-extra: 7.0.1
+      micromatch: 4.0.8
 
-  which@2.0.2:
-    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
-    engines: {node: '>= 8'}
-    hasBin: true
+  '@changesets/errors@0.2.0':
+    dependencies:
+      extendable-error: 0.1.7
 
-  why-is-node-running@2.3.0:
-    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
-    engines: {node: '>=8'}
-    hasBin: true
+  '@changesets/get-dependents-graph@2.1.3':
+    dependencies:
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+      picocolors: 1.1.1
+      semver: 7.7.2
 
-  word-wrap@1.2.5:
-    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
-    engines: {node: '>=0.10.0'}
+  '@changesets/get-github-info@0.6.0':
+    dependencies:
+      dataloader: 1.4.0
+      node-fetch: 2.7.0
+    transitivePeerDependencies:
+      - encoding
 
-  wrap-ansi@7.0.0:
-    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
-    engines: {node: '>=10'}
+  '@changesets/get-release-plan@4.0.12':
+    dependencies:
+      '@changesets/assemble-release-plan': 6.0.8
+      '@changesets/config': 3.1.1
+      '@changesets/pre': 2.0.2
+      '@changesets/read': 0.6.5
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
 
-  wrap-ansi@8.1.0:
-    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
-    engines: {node: '>=12'}
+  '@changesets/get-version-range-type@0.4.0': {}
 
-  wrappy@1.0.2:
-    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+  '@changesets/git@3.0.4':
+    dependencies:
+      '@changesets/errors': 0.2.0
+      '@manypkg/get-packages': 1.1.3
+      is-subdir: 1.2.0
+      micromatch: 4.0.8
+      spawndamnit: 3.0.1
 
-  write-file-atomic@5.0.1:
-    resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+  '@changesets/logger@0.1.1':
+    dependencies:
+      picocolors: 1.1.1
 
-  ws@8.18.2:
-    resolution: {integrity: sha512-DMricUmwGZUVr++AEAe2uiVM7UoO9MAVZMDu05UQOaUII0lp+zOzLLU4Xqh/JvTqklB1T4uELaaPBKyjE1r4fQ==}
-    engines: {node: '>=10.0.0'}
-    peerDependencies:
-      bufferutil: ^4.0.1
-      utf-8-validate: '>=5.0.2'
-    peerDependenciesMeta:
-      bufferutil:
-        optional: true
-      utf-8-validate:
-        optional: true
+  '@changesets/parse@0.4.1':
+    dependencies:
+      '@changesets/types': 6.1.0
+      js-yaml: 3.14.1
 
-  xml-name-validator@4.0.0:
-    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
-    engines: {node: '>=12'}
+  '@changesets/pre@2.0.2':
+    dependencies:
+      '@changesets/errors': 0.2.0
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+      fs-extra: 7.0.1
+
+  '@changesets/read@0.6.5':
+    dependencies:
+      '@changesets/git': 3.0.4
+      '@changesets/logger': 0.1.1
+      '@changesets/parse': 0.4.1
+      '@changesets/types': 6.1.0
+      fs-extra: 7.0.1
+      p-filter: 2.1.0
+      picocolors: 1.1.1
 
-  xml-name-validator@5.0.0:
-    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
-    engines: {node: '>=18'}
+  '@changesets/should-skip-package@0.1.2':
+    dependencies:
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
 
-  xmlchars@2.2.0:
-    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+  '@changesets/types@4.1.0': {}
 
-  y18n@5.0.8:
-    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
-    engines: {node: '>=10'}
+  '@changesets/types@6.1.0': {}
 
-  yallist@3.1.1:
-    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+  '@changesets/write@0.4.0':
+    dependencies:
+      '@changesets/types': 6.1.0
+      fs-extra: 7.0.1
+      human-id: 4.1.1
+      prettier: 2.8.8
 
-  yallist@4.0.0:
-    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+  '@csstools/color-helpers@5.0.2':
+    optional: true
 
-  yallist@5.0.0:
-    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
-    engines: {node: '>=18'}
+  '@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)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-tokenizer': 3.0.3
+    optional: true
 
-  yaml@1.10.2:
-    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
-    engines: {node: '>= 6'}
+  '@csstools/css-color-parser@3.0.9(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)':
+    dependencies:
+      '@csstools/color-helpers': 5.0.2
+      '@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)
+      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
+      '@csstools/css-tokenizer': 3.0.3
+    optional: true
 
-  yaml@2.8.0:
-    resolution: {integrity: sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==}
-    engines: {node: '>= 14.6'}
-    hasBin: true
+  '@csstools/css-parser-algorithms@2.7.1(@csstools/css-tokenizer@2.4.1)':
+    dependencies:
+      '@csstools/css-tokenizer': 2.4.1
 
-  yargs-parser@20.2.9:
-    resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
-    engines: {node: '>=10'}
+  '@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.3
+    optional: true
 
-  yargs-parser@21.1.1:
-    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
-    engines: {node: '>=12'}
+  '@csstools/css-tokenizer@2.4.1': {}
 
-  yargs@17.7.2:
-    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
-    engines: {node: '>=12'}
+  '@csstools/css-tokenizer@3.0.3':
+    optional: true
 
-  yocto-queue@0.1.0:
-    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
-    engines: {node: '>=10'}
+  '@csstools/media-query-list-parser@2.1.13(@csstools/css-parser-algorithms@2.7.1(@csstools/css-tokenizer@2.4.1))(@csstools/css-tokenizer@2.4.1)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 2.7.1(@csstools/css-tokenizer@2.4.1)
+      '@csstools/css-tokenizer': 2.4.1
 
-  zwitch@2.0.4:
-    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+  '@csstools/selector-specificity@2.2.0(postcss-selector-parser@6.1.2)':
+    dependencies:
+      postcss-selector-parser: 6.1.2
 
-snapshots:
+  '@docsearch/css@3.8.2': {}
 
-  '@algolia/autocomplete-core@1.17.7(@algolia/client-search@5.25.0)(algoliasearch@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:
-      '@algolia/autocomplete-plugin-algolia-insights': 1.17.7(@algolia/client-search@5.25.0)(algoliasearch@5.25.0)(search-insights@2.17.3)
-      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.25.0)(algoliasearch@5.25.0)
+      '@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'
-      - algoliasearch
+      - '@types/react'
+      - react
+      - react-dom
       - search-insights
 
-  '@algolia/autocomplete-plugin-algolia-insights@1.17.7(@algolia/client-search@5.25.0)(algoliasearch@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-shared': 1.17.7(@algolia/client-search@5.25.0)(algoliasearch@5.25.0)
+      '@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'
-      - algoliasearch
 
-  '@algolia/autocomplete-preset-algolia@1.17.7(@algolia/client-search@5.25.0)(algoliasearch@5.25.0)':
+  '@emnapi/core@1.4.3':
     dependencies:
-      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.25.0)(algoliasearch@5.25.0)
-      '@algolia/client-search': 5.25.0
-      algoliasearch: 5.25.0
+      '@emnapi/wasi-threads': 1.0.2
+      tslib: 2.8.1
 
-  '@algolia/autocomplete-shared@1.17.7(@algolia/client-search@5.25.0)(algoliasearch@5.25.0)':
+  '@emnapi/runtime@1.4.3':
     dependencies:
-      '@algolia/client-search': 5.25.0
-      algoliasearch: 5.25.0
+      tslib: 2.8.1
 
-  '@algolia/client-abtesting@5.25.0':
+  '@emnapi/wasi-threads@1.0.2':
     dependencies:
-      '@algolia/client-common': 5.25.0
-      '@algolia/requester-browser-xhr': 5.25.0
-      '@algolia/requester-fetch': 5.25.0
-      '@algolia/requester-node-http': 5.25.0
+      tslib: 2.8.1
 
-  '@algolia/client-analytics@5.25.0':
-    dependencies:
-      '@algolia/client-common': 5.25.0
-      '@algolia/requester-browser-xhr': 5.25.0
-      '@algolia/requester-fetch': 5.25.0
-      '@algolia/requester-node-http': 5.25.0
+  '@esbuild/aix-ppc64@0.21.5':
+    optional: true
 
-  '@algolia/client-common@5.25.0': {}
+  '@esbuild/aix-ppc64@0.25.4':
+    optional: true
 
-  '@algolia/client-insights@5.25.0':
-    dependencies:
-      '@algolia/client-common': 5.25.0
-      '@algolia/requester-browser-xhr': 5.25.0
-      '@algolia/requester-fetch': 5.25.0
-      '@algolia/requester-node-http': 5.25.0
+  '@esbuild/android-arm64@0.21.5':
+    optional: true
 
-  '@algolia/client-personalization@5.25.0':
-    dependencies:
-      '@algolia/client-common': 5.25.0
-      '@algolia/requester-browser-xhr': 5.25.0
-      '@algolia/requester-fetch': 5.25.0
-      '@algolia/requester-node-http': 5.25.0
+  '@esbuild/android-arm64@0.25.4':
+    optional: true
 
-  '@algolia/client-query-suggestions@5.25.0':
-    dependencies:
-      '@algolia/client-common': 5.25.0
-      '@algolia/requester-browser-xhr': 5.25.0
-      '@algolia/requester-fetch': 5.25.0
-      '@algolia/requester-node-http': 5.25.0
+  '@esbuild/android-arm@0.21.5':
+    optional: true
 
-  '@algolia/client-search@5.25.0':
-    dependencies:
-      '@algolia/client-common': 5.25.0
-      '@algolia/requester-browser-xhr': 5.25.0
-      '@algolia/requester-fetch': 5.25.0
-      '@algolia/requester-node-http': 5.25.0
+  '@esbuild/android-arm@0.25.4':
+    optional: true
 
-  '@algolia/ingestion@1.25.0':
-    dependencies:
-      '@algolia/client-common': 5.25.0
-      '@algolia/requester-browser-xhr': 5.25.0
-      '@algolia/requester-fetch': 5.25.0
-      '@algolia/requester-node-http': 5.25.0
+  '@esbuild/android-x64@0.21.5':
+    optional: true
 
-  '@algolia/monitoring@1.25.0':
-    dependencies:
-      '@algolia/client-common': 5.25.0
-      '@algolia/requester-browser-xhr': 5.25.0
-      '@algolia/requester-fetch': 5.25.0
-      '@algolia/requester-node-http': 5.25.0
+  '@esbuild/android-x64@0.25.4':
+    optional: true
 
-  '@algolia/recommend@5.25.0':
-    dependencies:
-      '@algolia/client-common': 5.25.0
-      '@algolia/requester-browser-xhr': 5.25.0
-      '@algolia/requester-fetch': 5.25.0
-      '@algolia/requester-node-http': 5.25.0
+  '@esbuild/darwin-arm64@0.21.5':
+    optional: true
 
-  '@algolia/requester-browser-xhr@5.25.0':
-    dependencies:
-      '@algolia/client-common': 5.25.0
+  '@esbuild/darwin-arm64@0.25.4':
+    optional: true
 
-  '@algolia/requester-fetch@5.25.0':
-    dependencies:
-      '@algolia/client-common': 5.25.0
+  '@esbuild/darwin-x64@0.21.5':
+    optional: true
+
+  '@esbuild/darwin-x64@0.25.4':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.25.4':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.25.4':
+    optional: true
+
+  '@esbuild/linux-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-arm64@0.25.4':
+    optional: true
+
+  '@esbuild/linux-arm@0.21.5':
+    optional: true
+
+  '@esbuild/linux-arm@0.25.4':
+    optional: true
+
+  '@esbuild/linux-ia32@0.21.5':
+    optional: true
+
+  '@esbuild/linux-ia32@0.25.4':
+    optional: true
+
+  '@esbuild/linux-loong64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-loong64@0.25.4':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.21.5':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.25.4':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.25.4':
+    optional: true
 
-  '@algolia/requester-node-http@5.25.0':
-    dependencies:
-      '@algolia/client-common': 5.25.0
+  '@esbuild/linux-riscv64@0.21.5':
+    optional: true
 
-  '@ampproject/remapping@2.3.0':
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.8
-      '@jridgewell/trace-mapping': 0.3.25
+  '@esbuild/linux-riscv64@0.25.4':
+    optional: true
 
-  '@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)
-      '@csstools/css-color-parser': 3.0.9(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
-      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
-      '@csstools/css-tokenizer': 3.0.3
-      lru-cache: 10.4.3
+  '@esbuild/linux-s390x@0.21.5':
     optional: true
 
-  '@asgardeo/auth-js@5.1.2': {}
+  '@esbuild/linux-s390x@0.25.4':
+    optional: true
 
-  '@asgardeo/auth-spa@3.2.0':
-    dependencies:
-      '@asgardeo/auth-js': 5.1.2
-      await-semaphore: 0.1.3
-      axios: 0.26.1
-      base64url: 3.0.1
-      buffer: 6.0.3
-      fast-sha256: 1.3.0
-      jose: 4.15.9
-      randombytes: 2.1.0
-    transitivePeerDependencies:
-      - debug
+  '@esbuild/linux-x64@0.21.5':
+    optional: true
 
-  '@asgardeo/js@0.1.3':
-    dependencies:
-      '@asgardeo/auth-js': 5.1.2
-      csstype: 3.1.3
-      lodash.isempty: 4.4.0
-      lodash.merge: 4.6.2
+  '@esbuild/linux-x64@0.25.4':
+    optional: true
 
-  '@babel/code-frame@7.27.1':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.27.1
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
+  '@esbuild/netbsd-arm64@0.25.4':
+    optional: true
 
-  '@babel/compat-data@7.27.2': {}
+  '@esbuild/netbsd-x64@0.21.5':
+    optional: true
 
-  '@babel/core@7.27.1':
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.27.1
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-module-transforms': 7.27.1(@babel/core@7.27.1)
-      '@babel/helpers': 7.27.1
-      '@babel/parser': 7.27.2
-      '@babel/template': 7.27.2
-      '@babel/traverse': 7.27.1
-      '@babel/types': 7.27.1
-      convert-source-map: 2.0.0
-      debug: 4.4.1
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
+  '@esbuild/netbsd-x64@0.25.4':
+    optional: true
 
-  '@babel/eslint-parser@7.27.1(@babel/core@7.27.1)(eslint@8.57.0)':
-    dependencies:
-      '@babel/core': 7.27.1
-      '@nicolo-ribaudo/eslint-scope-5-internals': 5.1.1-v1
-      eslint: 8.57.0
-      eslint-visitor-keys: 2.1.0
-      semver: 6.3.1
+  '@esbuild/openbsd-arm64@0.25.4':
+    optional: true
 
-  '@babel/generator@7.27.1':
-    dependencies:
-      '@babel/parser': 7.27.2
-      '@babel/types': 7.27.1
-      '@jridgewell/gen-mapping': 0.3.8
-      '@jridgewell/trace-mapping': 0.3.25
-      jsesc: 3.1.0
+  '@esbuild/openbsd-x64@0.21.5':
+    optional: true
 
-  '@babel/helper-compilation-targets@7.27.2':
-    dependencies:
-      '@babel/compat-data': 7.27.2
-      '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.24.5
-      lru-cache: 5.1.1
-      semver: 6.3.1
+  '@esbuild/openbsd-x64@0.25.4':
+    optional: true
 
-  '@babel/helper-module-imports@7.27.1':
-    dependencies:
-      '@babel/traverse': 7.27.1
-      '@babel/types': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
+  '@esbuild/sunos-x64@0.21.5':
+    optional: true
 
-  '@babel/helper-module-transforms@7.27.1(@babel/core@7.27.1)':
-    dependencies:
-      '@babel/core': 7.27.1
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
-      '@babel/traverse': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
+  '@esbuild/sunos-x64@0.25.4':
+    optional: true
 
-  '@babel/helper-plugin-utils@7.27.1': {}
+  '@esbuild/win32-arm64@0.21.5':
+    optional: true
 
-  '@babel/helper-string-parser@7.27.1': {}
+  '@esbuild/win32-arm64@0.25.4':
+    optional: true
 
-  '@babel/helper-validator-identifier@7.27.1': {}
+  '@esbuild/win32-ia32@0.21.5':
+    optional: true
 
-  '@babel/helper-validator-option@7.27.1': {}
+  '@esbuild/win32-ia32@0.25.4':
+    optional: true
 
-  '@babel/helpers@7.27.1':
-    dependencies:
-      '@babel/template': 7.27.2
-      '@babel/types': 7.27.1
+  '@esbuild/win32-x64@0.21.5':
+    optional: true
 
-  '@babel/parser@7.27.2':
-    dependencies:
-      '@babel/types': 7.27.1
+  '@esbuild/win32-x64@0.25.4':
+    optional: true
 
-  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.27.1)':
+  '@eslint-community/eslint-utils@4.7.0(eslint@8.57.0)':
     dependencies:
-      '@babel/core': 7.27.1
-      '@babel/helper-plugin-utils': 7.27.1
+      eslint: 8.57.0
+      eslint-visitor-keys: 3.4.3
 
-  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.27.1)':
+  '@eslint-community/eslint-utils@4.7.0(eslint@9.28.0(jiti@2.4.2))':
     dependencies:
-      '@babel/core': 7.27.1
-      '@babel/helper-plugin-utils': 7.27.1
-
-  '@babel/runtime@7.27.1': {}
+      eslint: 9.28.0(jiti@2.4.2)
+      eslint-visitor-keys: 3.4.3
 
-  '@babel/template@7.27.2':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/parser': 7.27.2
-      '@babel/types': 7.27.1
+  '@eslint-community/regexpp@4.12.1': {}
 
-  '@babel/traverse@7.27.1':
+  '@eslint/config-array@0.20.0':
     dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.27.1
-      '@babel/parser': 7.27.2
-      '@babel/template': 7.27.2
-      '@babel/types': 7.27.1
+      '@eslint/object-schema': 2.1.6
       debug: 4.4.1
-      globals: 11.12.0
+      minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.27.1':
-    dependencies:
-      '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
-
-  '@bcoe/v8-coverage@1.0.2': {}
-
-  '@changesets/apply-release-plan@7.0.12':
-    dependencies:
-      '@changesets/config': 3.1.1
-      '@changesets/get-version-range-type': 0.4.0
-      '@changesets/git': 3.0.4
-      '@changesets/should-skip-package': 0.1.2
-      '@changesets/types': 6.1.0
-      '@manypkg/get-packages': 1.1.3
-      detect-indent: 6.1.0
-      fs-extra: 7.0.1
-      lodash.startcase: 4.4.0
-      outdent: 0.5.0
-      prettier: 2.8.8
-      resolve-from: 5.0.0
-      semver: 7.7.2
-
-  '@changesets/assemble-release-plan@6.0.8':
-    dependencies:
-      '@changesets/errors': 0.2.0
-      '@changesets/get-dependents-graph': 2.1.3
-      '@changesets/should-skip-package': 0.1.2
-      '@changesets/types': 6.1.0
-      '@manypkg/get-packages': 1.1.3
-      semver: 7.7.2
-
-  '@changesets/changelog-git@0.2.1':
-    dependencies:
-      '@changesets/types': 6.1.0
+  '@eslint/config-helpers@0.2.2': {}
 
-  '@changesets/changelog-github@0.5.1':
+  '@eslint/core@0.14.0':
     dependencies:
-      '@changesets/get-github-info': 0.6.0
-      '@changesets/types': 6.1.0
-      dotenv: 8.6.0
-    transitivePeerDependencies:
-      - encoding
+      '@types/json-schema': 7.0.15
 
-  '@changesets/cli@2.29.4':
+  '@eslint/eslintrc@2.1.4':
     dependencies:
-      '@changesets/apply-release-plan': 7.0.12
-      '@changesets/assemble-release-plan': 6.0.8
-      '@changesets/changelog-git': 0.2.1
-      '@changesets/config': 3.1.1
-      '@changesets/errors': 0.2.0
-      '@changesets/get-dependents-graph': 2.1.3
-      '@changesets/get-release-plan': 4.0.12
-      '@changesets/git': 3.0.4
-      '@changesets/logger': 0.1.1
-      '@changesets/pre': 2.0.2
-      '@changesets/read': 0.6.5
-      '@changesets/should-skip-package': 0.1.2
-      '@changesets/types': 6.1.0
-      '@changesets/write': 0.4.0
-      '@manypkg/get-packages': 1.1.3
-      ansi-colors: 4.1.3
-      ci-info: 3.9.0
-      enquirer: 2.4.1
-      external-editor: 3.1.0
-      fs-extra: 7.0.1
-      mri: 1.2.0
-      p-limit: 2.3.0
-      package-manager-detector: 0.2.11
-      picocolors: 1.1.1
-      resolve-from: 5.0.0
-      semver: 7.7.2
-      spawndamnit: 3.0.1
-      term-size: 2.2.1
+      ajv: 6.12.6
+      debug: 4.4.1
+      espree: 9.6.1
+      globals: 13.24.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
 
-  '@changesets/config@3.1.1':
+  '@eslint/eslintrc@3.3.1':
     dependencies:
-      '@changesets/errors': 0.2.0
-      '@changesets/get-dependents-graph': 2.1.3
-      '@changesets/logger': 0.1.1
-      '@changesets/types': 6.1.0
-      '@manypkg/get-packages': 1.1.3
-      fs-extra: 7.0.1
-      micromatch: 4.0.8
+      ajv: 6.12.6
+      debug: 4.4.1
+      espree: 10.3.0
+      globals: 14.0.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
 
-  '@changesets/errors@0.2.0':
-    dependencies:
-      extendable-error: 0.1.7
+  '@eslint/js@8.57.0': {}
 
-  '@changesets/get-dependents-graph@2.1.3':
-    dependencies:
-      '@changesets/types': 6.1.0
-      '@manypkg/get-packages': 1.1.3
-      picocolors: 1.1.1
-      semver: 7.7.2
+  '@eslint/js@9.28.0': {}
 
-  '@changesets/get-github-info@0.6.0':
+  '@eslint/object-schema@2.1.6': {}
+
+  '@eslint/plugin-kit@0.3.1':
     dependencies:
-      dataloader: 1.4.0
-      node-fetch: 2.7.0
-    transitivePeerDependencies:
-      - encoding
+      '@eslint/core': 0.14.0
+      levn: 0.4.1
 
-  '@changesets/get-release-plan@4.0.12':
+  '@floating-ui/core@1.7.1':
     dependencies:
-      '@changesets/assemble-release-plan': 6.0.8
-      '@changesets/config': 3.1.1
-      '@changesets/pre': 2.0.2
-      '@changesets/read': 0.6.5
-      '@changesets/types': 6.1.0
-      '@manypkg/get-packages': 1.1.3
+      '@floating-ui/utils': 0.2.9
 
-  '@changesets/get-version-range-type@0.4.0': {}
+  '@floating-ui/dom@1.7.1':
+    dependencies:
+      '@floating-ui/core': 1.7.1
+      '@floating-ui/utils': 0.2.9
 
-  '@changesets/git@3.0.4':
+  '@floating-ui/react-dom@2.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@changesets/errors': 0.2.0
-      '@manypkg/get-packages': 1.1.3
-      is-subdir: 1.2.0
-      micromatch: 4.0.8
-      spawndamnit: 3.0.1
+      '@floating-ui/dom': 1.7.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  '@changesets/logger@0.1.1':
+  '@floating-ui/react-dom@2.1.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      picocolors: 1.1.1
+      '@floating-ui/dom': 1.7.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
 
-  '@changesets/parse@0.4.1':
+  '@floating-ui/react@0.27.12(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@changesets/types': 6.1.0
-      js-yaml: 3.14.1
+      '@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
 
-  '@changesets/pre@2.0.2':
+  '@floating-ui/utils@0.2.9': {}
+
+  '@hookform/resolvers@3.10.0(react-hook-form@7.58.1(react@18.3.1))':
     dependencies:
-      '@changesets/errors': 0.2.0
-      '@changesets/types': 6.1.0
-      '@manypkg/get-packages': 1.1.3
-      fs-extra: 7.0.1
+      react-hook-form: 7.58.1(react@18.3.1)
 
-  '@changesets/read@0.6.5':
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.6':
     dependencies:
-      '@changesets/git': 3.0.4
-      '@changesets/logger': 0.1.1
-      '@changesets/parse': 0.4.1
-      '@changesets/types': 6.1.0
-      fs-extra: 7.0.1
-      p-filter: 2.1.0
-      picocolors: 1.1.1
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.3.1
 
-  '@changesets/should-skip-package@0.1.2':
+  '@humanwhocodes/config-array@0.11.14':
     dependencies:
-      '@changesets/types': 6.1.0
-      '@manypkg/get-packages': 1.1.3
+      '@humanwhocodes/object-schema': 2.0.3
+      debug: 4.4.1
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
 
-  '@changesets/types@4.1.0': {}
+  '@humanwhocodes/module-importer@1.0.1': {}
 
-  '@changesets/types@6.1.0': {}
+  '@humanwhocodes/object-schema@2.0.3': {}
 
-  '@changesets/write@0.4.0':
+  '@humanwhocodes/retry@0.3.1': {}
+
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@iconify-json/simple-icons@1.2.35':
     dependencies:
-      '@changesets/types': 6.1.0
-      fs-extra: 7.0.1
-      human-id: 4.1.1
-      prettier: 2.8.8
+      '@iconify/types': 2.0.0
 
-  '@csstools/color-helpers@5.0.2':
+  '@iconify/types@2.0.0': {}
+
+  '@img/sharp-darwin-arm64@0.34.2':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.1.0
     optional: true
 
-  '@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)':
-    dependencies:
-      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
-      '@csstools/css-tokenizer': 3.0.3
+  '@img/sharp-darwin-x64@0.34.2':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.1.0
     optional: true
 
-  '@csstools/css-color-parser@3.0.9(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)':
-    dependencies:
-      '@csstools/color-helpers': 5.0.2
-      '@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)
-      '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
-      '@csstools/css-tokenizer': 3.0.3
+  '@img/sharp-libvips-darwin-arm64@1.1.0':
     optional: true
 
-  '@csstools/css-parser-algorithms@2.7.1(@csstools/css-tokenizer@2.4.1)':
-    dependencies:
-      '@csstools/css-tokenizer': 2.4.1
+  '@img/sharp-libvips-darwin-x64@1.1.0':
+    optional: true
 
-  '@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3)':
+  '@img/sharp-libvips-linux-arm64@1.1.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.1.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-ppc64@1.1.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.1.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.1.0':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.1.0':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.1.0':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.34.2':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.1.0
+    optional: true
+
+  '@img/sharp-linux-arm@0.34.2':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.1.0
+    optional: true
+
+  '@img/sharp-linux-s390x@0.34.2':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.1.0
+    optional: true
+
+  '@img/sharp-linux-x64@0.34.2':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.1.0
+    optional: true
+
+  '@img/sharp-linuxmusl-arm64@0.34.2':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.1.0
+    optional: true
+
+  '@img/sharp-linuxmusl-x64@0.34.2':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.1.0
+    optional: true
+
+  '@img/sharp-wasm32@0.34.2':
     dependencies:
-      '@csstools/css-tokenizer': 3.0.3
+      '@emnapi/runtime': 1.4.3
     optional: true
 
-  '@csstools/css-tokenizer@2.4.1': {}
+  '@img/sharp-win32-arm64@0.34.2':
+    optional: true
 
-  '@csstools/css-tokenizer@3.0.3':
+  '@img/sharp-win32-ia32@0.34.2':
     optional: true
 
-  '@csstools/media-query-list-parser@2.1.13(@csstools/css-parser-algorithms@2.7.1(@csstools/css-tokenizer@2.4.1))(@csstools/css-tokenizer@2.4.1)':
+  '@img/sharp-win32-x64@0.34.2':
+    optional: true
+
+  '@isaacs/cliui@8.0.2':
     dependencies:
-      '@csstools/css-parser-algorithms': 2.7.1(@csstools/css-tokenizer@2.4.1)
-      '@csstools/css-tokenizer': 2.4.1
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.0
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
 
-  '@csstools/selector-specificity@2.2.0(postcss-selector-parser@6.1.2)':
+  '@isaacs/fs-minipass@4.0.1':
     dependencies:
-      postcss-selector-parser: 6.1.2
+      minipass: 7.1.2
+
+  '@istanbuljs/schema@0.1.3': {}
+
+  '@jest/schemas@29.6.3':
+    dependencies:
+      '@sinclair/typebox': 0.27.8
+
+  '@jridgewell/gen-mapping@0.3.8':
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/set-array@1.2.1': {}
+
+  '@jridgewell/source-map@0.3.6':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/trace-mapping': 0.3.25
+    optional: true
+
+  '@jridgewell/sourcemap-codec@1.5.0': {}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
 
-  '@docsearch/css@3.8.2': {}
+  '@jspm/core@2.1.0': {}
 
-  '@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)':
+  '@manypkg/find-root@1.1.0':
     dependencies:
-      '@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'
-      - '@types/react'
-      - react
-      - react-dom
-      - search-insights
+      '@babel/runtime': 7.27.1
+      '@types/node': 12.20.55
+      find-up: 4.1.0
+      fs-extra: 8.1.0
 
-  '@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)':
+  '@manypkg/get-packages@1.1.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'
+      '@babel/runtime': 7.27.1
+      '@changesets/types': 4.1.0
+      '@manypkg/find-root': 1.1.0
+      fs-extra: 8.1.0
+      globby: 11.1.0
+      read-yaml-file: 1.1.0
 
-  '@emnapi/core@1.4.3':
+  '@microsoft/tsdoc-config@0.16.2':
     dependencies:
-      '@emnapi/wasi-threads': 1.0.2
-      tslib: 2.8.1
+      '@microsoft/tsdoc': 0.14.2
+      ajv: 6.12.6
+      jju: 1.4.0
+      resolve: 1.19.0
 
-  '@emnapi/runtime@1.4.3':
-    dependencies:
-      tslib: 2.8.1
+  '@microsoft/tsdoc@0.14.2': {}
 
-  '@emnapi/wasi-threads@1.0.2':
+  '@napi-rs/wasm-runtime@0.2.4':
     dependencies:
-      tslib: 2.8.1
+      '@emnapi/core': 1.4.3
+      '@emnapi/runtime': 1.4.3
+      '@tybys/wasm-util': 0.9.0
 
-  '@esbuild/aix-ppc64@0.21.5':
-    optional: true
+  '@next/env@14.2.16': {}
 
-  '@esbuild/aix-ppc64@0.25.4':
-    optional: true
+  '@next/env@15.3.2': {}
 
-  '@esbuild/android-arm64@0.21.5':
-    optional: true
+  '@next/eslint-plugin-next@13.5.11':
+    dependencies:
+      glob: 7.1.7
 
-  '@esbuild/android-arm64@0.25.4':
+  '@next/swc-darwin-arm64@14.2.16':
     optional: true
 
-  '@esbuild/android-arm@0.21.5':
+  '@next/swc-darwin-arm64@15.3.2':
     optional: true
 
-  '@esbuild/android-arm@0.25.4':
+  '@next/swc-darwin-x64@14.2.16':
     optional: true
 
-  '@esbuild/android-x64@0.21.5':
+  '@next/swc-darwin-x64@15.3.2':
     optional: true
 
-  '@esbuild/android-x64@0.25.4':
+  '@next/swc-linux-arm64-gnu@14.2.16':
     optional: true
 
-  '@esbuild/darwin-arm64@0.21.5':
+  '@next/swc-linux-arm64-gnu@15.3.2':
     optional: true
 
-  '@esbuild/darwin-arm64@0.25.4':
+  '@next/swc-linux-arm64-musl@14.2.16':
     optional: true
 
-  '@esbuild/darwin-x64@0.21.5':
+  '@next/swc-linux-arm64-musl@15.3.2':
     optional: true
 
-  '@esbuild/darwin-x64@0.25.4':
+  '@next/swc-linux-x64-gnu@14.2.16':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.21.5':
+  '@next/swc-linux-x64-gnu@15.3.2':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.25.4':
+  '@next/swc-linux-x64-musl@14.2.16':
     optional: true
 
-  '@esbuild/freebsd-x64@0.21.5':
+  '@next/swc-linux-x64-musl@15.3.2':
     optional: true
 
-  '@esbuild/freebsd-x64@0.25.4':
+  '@next/swc-win32-arm64-msvc@14.2.16':
     optional: true
 
-  '@esbuild/linux-arm64@0.21.5':
+  '@next/swc-win32-arm64-msvc@15.3.2':
     optional: true
 
-  '@esbuild/linux-arm64@0.25.4':
+  '@next/swc-win32-ia32-msvc@14.2.16':
     optional: true
 
-  '@esbuild/linux-arm@0.21.5':
+  '@next/swc-win32-x64-msvc@14.2.16':
     optional: true
 
-  '@esbuild/linux-arm@0.25.4':
+  '@next/swc-win32-x64-msvc@15.3.2':
     optional: true
 
-  '@esbuild/linux-ia32@0.21.5':
-    optional: true
+  '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1':
+    dependencies:
+      eslint-scope: 5.1.1
 
-  '@esbuild/linux-ia32@0.25.4':
-    optional: true
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
 
-  '@esbuild/linux-loong64@0.21.5':
-    optional: true
+  '@nodelib/fs.stat@2.0.5': {}
 
-  '@esbuild/linux-loong64@0.25.4':
-    optional: true
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.19.1
 
-  '@esbuild/linux-mips64el@0.21.5':
+  '@nx/nx-darwin-arm64@20.8.1':
     optional: true
 
-  '@esbuild/linux-mips64el@0.25.4':
+  '@nx/nx-darwin-x64@20.8.1':
     optional: true
 
-  '@esbuild/linux-ppc64@0.21.5':
+  '@nx/nx-freebsd-x64@20.8.1':
     optional: true
 
-  '@esbuild/linux-ppc64@0.25.4':
+  '@nx/nx-linux-arm-gnueabihf@20.8.1':
     optional: true
 
-  '@esbuild/linux-riscv64@0.21.5':
+  '@nx/nx-linux-arm64-gnu@20.8.1':
     optional: true
 
-  '@esbuild/linux-riscv64@0.25.4':
+  '@nx/nx-linux-arm64-musl@20.8.1':
     optional: true
 
-  '@esbuild/linux-s390x@0.21.5':
+  '@nx/nx-linux-x64-gnu@20.8.1':
     optional: true
 
-  '@esbuild/linux-s390x@0.25.4':
+  '@nx/nx-linux-x64-musl@20.8.1':
     optional: true
 
-  '@esbuild/linux-x64@0.21.5':
+  '@nx/nx-win32-arm64-msvc@20.8.1':
     optional: true
 
-  '@esbuild/linux-x64@0.25.4':
+  '@nx/nx-win32-x64-msvc@20.8.1':
     optional: true
 
-  '@esbuild/netbsd-arm64@0.25.4':
-    optional: true
+  '@one-ini/wasm@0.1.1': {}
 
-  '@esbuild/netbsd-x64@0.21.5':
+  '@parcel/watcher-android-arm64@2.5.1':
     optional: true
 
-  '@esbuild/netbsd-x64@0.25.4':
+  '@parcel/watcher-darwin-arm64@2.5.1':
     optional: true
 
-  '@esbuild/openbsd-arm64@0.25.4':
+  '@parcel/watcher-darwin-x64@2.5.1':
     optional: true
 
-  '@esbuild/openbsd-x64@0.21.5':
+  '@parcel/watcher-freebsd-x64@2.5.1':
     optional: true
 
-  '@esbuild/openbsd-x64@0.25.4':
+  '@parcel/watcher-linux-arm-glibc@2.5.1':
     optional: true
 
-  '@esbuild/sunos-x64@0.21.5':
+  '@parcel/watcher-linux-arm-musl@2.5.1':
     optional: true
 
-  '@esbuild/sunos-x64@0.25.4':
+  '@parcel/watcher-linux-arm64-glibc@2.5.1':
     optional: true
 
-  '@esbuild/win32-arm64@0.21.5':
+  '@parcel/watcher-linux-arm64-musl@2.5.1':
     optional: true
 
-  '@esbuild/win32-arm64@0.25.4':
+  '@parcel/watcher-linux-x64-glibc@2.5.1':
     optional: true
 
-  '@esbuild/win32-ia32@0.21.5':
+  '@parcel/watcher-linux-x64-musl@2.5.1':
     optional: true
 
-  '@esbuild/win32-ia32@0.25.4':
+  '@parcel/watcher-win32-arm64@2.5.1':
     optional: true
 
-  '@esbuild/win32-x64@0.21.5':
+  '@parcel/watcher-win32-ia32@2.5.1':
     optional: true
 
-  '@esbuild/win32-x64@0.25.4':
+  '@parcel/watcher-win32-x64@2.5.1':
     optional: true
 
-  '@eslint-community/eslint-utils@4.7.0(eslint@8.57.0)':
-    dependencies:
-      eslint: 8.57.0
-      eslint-visitor-keys: 3.4.3
-
-  '@eslint-community/eslint-utils@4.7.0(eslint@9.28.0(jiti@2.4.2))':
-    dependencies:
-      eslint: 9.28.0(jiti@2.4.2)
-      eslint-visitor-keys: 3.4.3
-
-  '@eslint-community/regexpp@4.12.1': {}
-
-  '@eslint/config-array@0.20.0':
-    dependencies:
-      '@eslint/object-schema': 2.1.6
-      debug: 4.4.1
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@eslint/config-helpers@0.2.2': {}
-
-  '@eslint/core@0.14.0':
-    dependencies:
-      '@types/json-schema': 7.0.15
-
-  '@eslint/eslintrc@2.1.4':
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.4.1
-      espree: 9.6.1
-      globals: 13.24.0
-      ignore: 5.3.2
-      import-fresh: 3.3.1
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@eslint/eslintrc@3.3.1':
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.4.1
-      espree: 10.3.0
-      globals: 14.0.0
-      ignore: 5.3.2
-      import-fresh: 3.3.1
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@eslint/js@8.57.0': {}
-
-  '@eslint/js@9.28.0': {}
-
-  '@eslint/object-schema@2.1.6': {}
-
-  '@eslint/plugin-kit@0.3.1':
-    dependencies:
-      '@eslint/core': 0.14.0
-      levn: 0.4.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.27.12(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@parcel/watcher@2.5.1':
     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': {}
+      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
+    optional: true
 
-  '@humanfs/node@0.16.6':
-    dependencies:
-      '@humanfs/core': 0.19.1
-      '@humanwhocodes/retry': 0.3.1
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
 
-  '@humanwhocodes/config-array@0.11.14':
-    dependencies:
-      '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.4.1
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
+  '@pkgr/core@0.2.4': {}
 
-  '@humanwhocodes/module-importer@1.0.1': {}
+  '@polka/url@1.0.0-next.29': {}
 
-  '@humanwhocodes/object-schema@2.0.3': {}
+  '@radix-ui/number@1.1.0': {}
 
-  '@humanwhocodes/retry@0.3.1': {}
+  '@radix-ui/primitive@1.1.1': {}
 
-  '@humanwhocodes/retry@0.4.3': {}
+  '@radix-ui/primitive@1.1.2': {}
 
-  '@iconify-json/simple-icons@1.2.35':
+  '@radix-ui/react-accordion@1.2.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:
-      '@iconify/types': 2.0.0
-
-  '@iconify/types@2.0.0': {}
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collapsible': 1.1.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-collection': 1.1.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@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.1.0(@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)
 
-  '@img/sharp-darwin-arm64@0.34.2':
+  '@radix-ui/react-alert-dialog@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/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dialog': 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.0.1(@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.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:
-      '@img/sharp-libvips-darwin-arm64': 1.1.0
-    optional: true
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
 
-  '@img/sharp-darwin-x64@0.34.2':
+  '@radix-ui/react-arrow@1.1.1(@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.0.1(@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:
-      '@img/sharp-libvips-darwin-x64': 1.1.0
-    optional: true
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
 
-  '@img/sharp-libvips-darwin-arm64@1.1.0':
-    optional: true
+  '@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)
 
-  '@img/sharp-libvips-darwin-x64@1.1.0':
-    optional: true
+  '@radix-ui/react-aspect-ratio@1.1.1(@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.0.1(@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)
 
-  '@img/sharp-libvips-linux-arm64@1.1.0':
-    optional: true
+  '@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-collapsible@1.1.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.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.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-primitive': 2.0.1(@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.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@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)
 
-  '@img/sharp-libvips-linux-arm@1.1.0':
-    optional: true
+  '@radix-ui/react-collection@1.1.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@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.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)
 
-  '@img/sharp-libvips-linux-ppc64@1.1.0':
-    optional: true
+  '@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)
 
-  '@img/sharp-libvips-linux-s390x@1.1.0':
-    optional: true
+  '@radix-ui/react-compose-refs@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
 
-  '@img/sharp-libvips-linux-x64@1.1.0':
-    optional: true
+  '@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
 
-  '@img/sharp-libvips-linuxmusl-arm64@1.1.0':
-    optional: true
+  '@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
 
-  '@img/sharp-libvips-linuxmusl-x64@1.1.0':
-    optional: true
+  '@radix-ui/react-context-menu@2.2.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/primitive': 1.1.1
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-menu': 2.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.0.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@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)
 
-  '@img/sharp-linux-arm64@0.34.2':
+  '@radix-ui/react-context@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
     optionalDependencies:
-      '@img/sharp-libvips-linux-arm64': 1.1.0
-    optional: true
+      '@types/react': 18.3.23
 
-  '@img/sharp-linux-arm@0.34.2':
+  '@radix-ui/react-context@1.1.2(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
     optionalDependencies:
-      '@img/sharp-libvips-linux-arm': 1.1.0
-    optional: true
+      '@types/react': 18.3.23
 
-  '@img/sharp-linux-s390x@0.34.2':
+  '@radix-ui/react-dialog@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/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.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-focus-guards': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-portal': 1.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.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-primitive': 2.0.1(@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.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@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:
-      '@img/sharp-libvips-linux-s390x': 1.1.0
-    optional: true
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
 
-  '@img/sharp-linux-x64@0.34.2':
+  '@radix-ui/react-direction@1.1.0(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
     optionalDependencies:
-      '@img/sharp-libvips-linux-x64': 1.1.0
-    optional: true
+      '@types/react': 18.3.23
 
-  '@img/sharp-linuxmusl-arm64@0.34.2':
+  '@radix-ui/react-direction@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
     optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-arm64': 1.1.0
-    optional: true
+      '@types/react': 18.3.23
 
-  '@img/sharp-linuxmusl-x64@0.34.2':
+  '@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:
-      '@img/sharp-libvips-linuxmusl-x64': 1.1.0
-    optional: true
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
 
-  '@img/sharp-wasm32@0.34.2':
+  '@radix-ui/react-dismissable-layer@1.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:
-      '@emnapi/runtime': 1.4.3
-    optional: true
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.0(@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)
 
-  '@img/sharp-win32-arm64@0.34.2':
-    optional: true
+  '@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)
 
-  '@img/sharp-win32-ia32@0.34.2':
-    optional: true
+  '@radix-ui/react-focus-guards@1.1.1(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
 
-  '@img/sharp-win32-x64@0.34.2':
-    optional: true
+  '@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
 
-  '@isaacs/cliui@8.0.2':
+  '@radix-ui/react-focus-scope@1.1.1(@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:
-      string-width: 5.1.2
-      string-width-cjs: string-width@4.2.3
-      strip-ansi: 7.1.0
-      strip-ansi-cjs: strip-ansi@6.0.1
-      wrap-ansi: 8.1.0
-      wrap-ansi-cjs: wrap-ansi@7.0.0
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@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.0(@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)
 
-  '@isaacs/fs-minipass@4.0.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)':
     dependencies:
-      minipass: 7.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)
+      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-hover-card@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/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.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-popper': 1.2.1(@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.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.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-primitive': 2.0.1(@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.1.0(@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)
 
-  '@istanbuljs/schema@0.1.3': {}
+  '@radix-ui/react-id@1.1.0(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
 
-  '@jest/schemas@29.6.3':
+  '@radix-ui/react-id@1.1.1(@types/react@18.3.23)(react@18.3.1)':
     dependencies:
-      '@sinclair/typebox': 0.27.8
+      '@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
 
-  '@jridgewell/gen-mapping@0.3.8':
+  '@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:
-      '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.5.0
-      '@jridgewell/trace-mapping': 0.3.25
+      '@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)
 
-  '@jridgewell/resolve-uri@3.1.2': {}
+  '@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)
 
-  '@jridgewell/set-array@1.2.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)':
+    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-menu@2.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/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.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-focus-guards': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@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.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.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-primitive': 2.0.1(@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.1(@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.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@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-menubar@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/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-menu': 2.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.0.1(@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.1(@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.1.0(@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-navigation-menu@1.2.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/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.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-id': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.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-primitive': 2.0.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@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-popover@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/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.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-focus-guards': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@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.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.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-primitive': 2.0.1(@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.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@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.1(@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.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-rect': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/rect': 1.1.0
+      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-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)
 
-  '@jridgewell/source-map@0.3.6':
+  '@radix-ui/react-portal@1.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:
-      '@jridgewell/gen-mapping': 0.3.8
-      '@jridgewell/trace-mapping': 0.3.25
-    optional: true
-
-  '@jridgewell/sourcemap-codec@1.5.0': {}
+      '@radix-ui/react-primitive': 2.0.1(@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.0(@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)
 
-  '@jridgewell/trace-mapping@0.3.25':
+  '@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:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.0
-
-  '@jspm/core@2.1.0': {}
+      '@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)
 
-  '@manypkg/find-root@1.1.0':
+  '@radix-ui/react-presence@1.1.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:
-      '@babel/runtime': 7.27.1
-      '@types/node': 12.20.55
-      find-up: 4.1.0
-      fs-extra: 8.1.0
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@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)
 
-  '@manypkg/get-packages@1.1.3':
+  '@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:
-      '@babel/runtime': 7.27.1
-      '@changesets/types': 4.1.0
-      '@manypkg/find-root': 1.1.0
-      fs-extra: 8.1.0
-      globby: 11.1.0
-      read-yaml-file: 1.1.0
+      '@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)
 
-  '@microsoft/tsdoc-config@0.16.2':
+  '@radix-ui/react-primitive@2.0.1(@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:
-      '@microsoft/tsdoc': 0.14.2
-      ajv: 6.12.6
-      jju: 1.4.0
-      resolve: 1.19.0
-
-  '@microsoft/tsdoc@0.14.2': {}
+      '@radix-ui/react-slot': 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)
 
-  '@napi-rs/wasm-runtime@0.2.10':
+  '@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:
-      '@emnapi/core': 1.4.3
-      '@emnapi/runtime': 1.4.3
-      '@tybys/wasm-util': 0.9.0
-    optional: true
+      '@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)
 
-  '@napi-rs/wasm-runtime@0.2.4':
+  '@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:
-      '@emnapi/core': 1.4.3
-      '@emnapi/runtime': 1.4.3
-      '@tybys/wasm-util': 0.9.0
-
-  '@next/env@15.3.2': {}
+      '@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)
 
-  '@next/eslint-plugin-next@13.5.11':
+  '@radix-ui/react-progress@1.1.1(@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:
-      glob: 7.1.7
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@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-radio-group@1.2.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.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.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-primitive': 2.0.1(@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.1(@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.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@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-roving-focus@1.1.1(@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.1
+      '@radix-ui/react-collection': 1.1.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@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-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-scroll-area@1.2.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/number': 1.1.0
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.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-primitive': 2.0.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@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-select@2.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/number': 1.1.0
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.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-focus-guards': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@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.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-primitive': 2.0.1(@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.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@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)
+      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)
 
-  '@next/eslint-plugin-next@15.3.2':
+  '@radix-ui/react-separator@1.1.1(@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:
-      fast-glob: 3.3.1
-
-  '@next/swc-darwin-arm64@15.3.2':
-    optional: true
-
-  '@next/swc-darwin-x64@15.3.2':
-    optional: true
-
-  '@next/swc-linux-arm64-gnu@15.3.2':
-    optional: true
-
-  '@next/swc-linux-arm64-musl@15.3.2':
-    optional: true
-
-  '@next/swc-linux-x64-gnu@15.3.2':
-    optional: true
-
-  '@next/swc-linux-x64-musl@15.3.2':
-    optional: true
-
-  '@next/swc-win32-arm64-msvc@15.3.2':
-    optional: true
-
-  '@next/swc-win32-x64-msvc@15.3.2':
-    optional: true
+      '@radix-ui/react-primitive': 2.0.1(@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-slider@1.2.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/number': 1.1.0
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@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.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@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)
 
-  '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1':
+  '@radix-ui/react-slot@1.1.1(@types/react@18.3.23)(react@18.3.1)':
     dependencies:
-      eslint-scope: 5.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
 
-  '@nodelib/fs.scandir@2.1.5':
+  '@radix-ui/react-slot@1.2.3(@types/react@18.3.23)(react@18.3.1)':
     dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
-
-  '@nodelib/fs.stat@2.0.5': {}
+      '@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
 
-  '@nodelib/fs.walk@1.2.8':
+  '@radix-ui/react-slot@1.2.3(@types/react@19.1.5)(react@19.1.0)':
     dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.19.1
-
-  '@nolyfill/is-core-module@1.0.39': {}
-
-  '@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': {}
-
-  '@parcel/watcher-android-arm64@2.5.1':
-    optional: true
+      '@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
 
-  '@parcel/watcher-darwin-arm64@2.5.1':
-    optional: true
+  '@radix-ui/react-switch@1.1.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.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@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.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@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-tabs@1.1.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.1
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.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-primitive': 2.0.1(@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.1(@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.1.0(@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-toast@1.2.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/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.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-portal': 1.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.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-primitive': 2.0.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@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)
 
-  '@parcel/watcher-darwin-x64@2.5.1':
-    optional: true
+  '@radix-ui/react-toggle-group@1.1.1(@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.1
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@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.1(@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-toggle': 1.1.1(@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.1.0(@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)
 
-  '@parcel/watcher-freebsd-x64@2.5.1':
-    optional: true
+  '@radix-ui/react-toggle@1.1.1(@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.1
+      '@radix-ui/react-primitive': 2.0.1(@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.1.0(@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-tooltip@1.1.6(@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.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.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-id': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@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.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.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-primitive': 2.0.1(@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.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@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)
 
-  '@parcel/watcher-linux-arm-glibc@2.5.1':
-    optional: true
+  '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
 
-  '@parcel/watcher-linux-arm-musl@2.5.1':
-    optional: true
+  '@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
 
-  '@parcel/watcher-linux-arm64-glibc@2.5.1':
-    optional: true
+  '@radix-ui/react-use-controllable-state@1.1.0(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
 
-  '@parcel/watcher-linux-arm64-musl@2.5.1':
-    optional: true
+  '@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
 
-  '@parcel/watcher-linux-x64-glibc@2.5.1':
-    optional: true
+  '@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
 
-  '@parcel/watcher-linux-x64-musl@2.5.1':
-    optional: true
+  '@radix-ui/react-use-escape-keydown@1.1.0(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
 
-  '@parcel/watcher-win32-arm64@2.5.1':
-    optional: true
+  '@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
 
-  '@parcel/watcher-win32-ia32@2.5.1':
-    optional: true
+  '@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
 
-  '@parcel/watcher-win32-x64@2.5.1':
-    optional: true
+  '@radix-ui/react-use-layout-effect@1.1.0(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
 
-  '@parcel/watcher@2.5.1':
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.3.23)(react@18.3.1)':
     dependencies:
-      detect-libc: 1.0.3
-      is-glob: 4.0.3
-      micromatch: 4.0.8
-      node-addon-api: 7.1.1
+      react: 18.3.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
-    optional: true
+      '@types/react': 18.3.23
 
-  '@pkgjs/parseargs@0.11.0':
-    optional: true
+  '@radix-ui/react-use-previous@1.1.0(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
 
-  '@pkgr/core@0.2.4': {}
+  '@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
 
-  '@polka/url@1.0.0-next.29': {}
+  '@radix-ui/react-use-rect@1.1.0(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/rect': 1.1.0
+      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)':
+  '@radix-ui/react-use-rect@1.1.1(@types/react@18.3.23)(react@18.3.1)':
     dependencies:
-      react: 19.1.0
+      '@radix-ui/rect': 1.1.1
+      react: 18.3.1
     optionalDependencies:
-      '@types/react': 19.1.5
+      '@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)':
+  '@radix-ui/react-use-size@1.1.0(@types/react@18.3.23)(react@18.3.1)':
     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)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.23)(react@18.3.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-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-size@1.1.1(@types/react@18.3.23)(react@18.3.1)':
     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-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-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-visually-hidden@1.1.1(@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@19.1.5)(react@19.1.0)
-      react: 19.1.0
+      '@radix-ui/react-primitive': 2.0.1(@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': 19.1.5
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
+  '@radix-ui/rect@1.1.0': {}
+
+  '@radix-ui/rect@1.1.1': {}
 
   '@remix-run/router@1.23.0': {}
 
@@ -8079,8 +10240,6 @@ snapshots:
 
   '@rtsao/scc@1.1.0': {}
 
-  '@rushstack/eslint-patch@1.11.0': {}
-
   '@shikijs/core@2.5.0':
     dependencies:
       '@shikijs/engine-javascript': 2.5.0
@@ -8129,6 +10288,11 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@swc/helpers@0.5.5':
+    dependencies:
+      '@swc/counter': 0.1.3
+      tslib: 2.8.1
+
   '@tailwindcss/node@4.1.8':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -8250,6 +10414,30 @@ snapshots:
     transitivePeerDependencies:
       - postcss
 
+  '@types/d3-array@3.2.1': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-shape@3.1.7':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
   '@types/estree@1.0.7': {}
 
   '@types/hast@3.0.4':
@@ -8296,8 +10484,11 @@ snapshots:
 
   '@types/parse-json@4.0.2': {}
 
-  '@types/prop-types@15.7.15':
-    optional: true
+  '@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:
@@ -8318,7 +10509,6 @@ snapshots:
     dependencies:
       '@types/prop-types': 15.7.15
       csstype: 3.1.3
-    optional: true
 
   '@types/react@19.1.5':
     dependencies:
@@ -8684,59 +10874,6 @@ snapshots:
 
   '@ungap/structured-clone@1.3.0': {}
 
-  '@unrs/resolver-binding-darwin-arm64@1.7.2':
-    optional: true
-
-  '@unrs/resolver-binding-darwin-x64@1.7.2':
-    optional: true
-
-  '@unrs/resolver-binding-freebsd-x64@1.7.2':
-    optional: true
-
-  '@unrs/resolver-binding-linux-arm-gnueabihf@1.7.2':
-    optional: true
-
-  '@unrs/resolver-binding-linux-arm-musleabihf@1.7.2':
-    optional: true
-
-  '@unrs/resolver-binding-linux-arm64-gnu@1.7.2':
-    optional: true
-
-  '@unrs/resolver-binding-linux-arm64-musl@1.7.2':
-    optional: true
-
-  '@unrs/resolver-binding-linux-ppc64-gnu@1.7.2':
-    optional: true
-
-  '@unrs/resolver-binding-linux-riscv64-gnu@1.7.2':
-    optional: true
-
-  '@unrs/resolver-binding-linux-riscv64-musl@1.7.2':
-    optional: true
-
-  '@unrs/resolver-binding-linux-s390x-gnu@1.7.2':
-    optional: true
-
-  '@unrs/resolver-binding-linux-x64-gnu@1.7.2':
-    optional: true
-
-  '@unrs/resolver-binding-linux-x64-musl@1.7.2':
-    optional: true
-
-  '@unrs/resolver-binding-wasm32-wasi@1.7.2':
-    dependencies:
-      '@napi-rs/wasm-runtime': 0.2.10
-    optional: true
-
-  '@unrs/resolver-binding-win32-arm64-msvc@1.7.2':
-    optional: true
-
-  '@unrs/resolver-binding-win32-ia32-msvc@1.7.2':
-    optional: true
-
-  '@unrs/resolver-binding-win32-x64-msvc@1.7.2':
-    optional: true
-
   '@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)
@@ -9182,12 +11319,25 @@ snapshots:
 
   ansi-styles@6.2.1: {}
 
+  any-promise@1.3.0: {}
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
+  arg@5.0.2: {}
+
   argparse@1.0.10:
     dependencies:
       sprintf-js: 1.0.3
 
   argparse@2.0.1: {}
 
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
   aria-query@5.3.0:
     dependencies:
       dequal: 2.0.3
@@ -9325,6 +11475,8 @@ snapshots:
     dependencies:
       is-windows: 1.0.2
 
+  binary-extensions@2.3.0: {}
+
   birpc@2.3.0: {}
 
   bl@4.1.0:
@@ -9458,6 +11610,8 @@ snapshots:
 
   callsites@3.1.0: {}
 
+  camelcase-css@2.0.1: {}
+
   camelcase-keys@6.2.2:
     dependencies:
       camelcase: 5.3.1
@@ -9498,6 +11652,18 @@ snapshots:
 
   check-error@2.1.1: {}
 
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
   chokidar@4.0.3:
     dependencies:
       readdirp: 4.1.2
@@ -9533,6 +11699,18 @@ snapshots:
 
   clsx@2.1.1: {}
 
+  cmdk@1.0.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-dialog': 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-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)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      use-sync-external-store: 1.5.0(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -9564,10 +11742,9 @@ snapshots:
   commander@2.20.3:
     optional: true
 
-  commander@7.2.0: {}
+  commander@4.1.1: {}
 
-  comment-parser@1.4.1:
-    optional: true
+  commander@7.2.0: {}
 
   commondir@1.0.1: {}
 
@@ -9754,6 +11931,44 @@ snapshots:
 
   csstype@3.1.3: {}
 
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-color@3.1.0: {}
+
+  d3-ease@3.0.1: {}
+
+  d3-format@3.1.0: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
   damerau-levenshtein@1.0.8: {}
 
   data-urls@5.0.0:
@@ -9782,6 +11997,8 @@ snapshots:
 
   dataloader@1.4.0: {}
 
+  date-fns@4.1.0: {}
+
   de-indent@1.0.2: {}
 
   debug@3.2.7:
@@ -9799,6 +12016,8 @@ snapshots:
 
   decamelize@1.2.0: {}
 
+  decimal.js-light@2.5.1: {}
+
   decimal.js@10.5.0:
     optional: true
 
@@ -9846,10 +12065,14 @@ snapshots:
 
   detect-libc@2.0.4: {}
 
+  detect-node-es@1.1.0: {}
+
   devlop@1.1.0:
     dependencies:
       dequal: 2.0.3
 
+  didyoumean@1.2.2: {}
+
   diff-sequences@29.6.3: {}
 
   diffie-hellman@5.0.3:
@@ -9862,6 +12085,8 @@ snapshots:
     dependencies:
       path-type: 4.0.0
 
+  dlv@1.1.3: {}
+
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
@@ -9872,6 +12097,11 @@ snapshots:
 
   dom-accessibility-api@0.5.16: {}
 
+  dom-helpers@5.2.1:
+    dependencies:
+      '@babel/runtime': 7.27.1
+      csstype: 3.1.3
+
   dom-serializer@1.4.1:
     dependencies:
       domelementtype: 2.3.0
@@ -9929,6 +12159,18 @@ snapshots:
       minimalistic-assert: 1.0.1
       minimalistic-crypto-utils: 1.0.1
 
+  embla-carousel-react@8.5.1(react@18.3.1):
+    dependencies:
+      embla-carousel: 8.5.1
+      embla-carousel-reactive-utils: 8.5.1(embla-carousel@8.5.1)
+      react: 18.3.1
+
+  embla-carousel-reactive-utils@8.5.1(embla-carousel@8.5.1):
+    dependencies:
+      embla-carousel: 8.5.1
+
+  embla-carousel@8.5.1: {}
+
   emoji-regex-xs@1.0.0: {}
 
   emoji-regex@8.0.0: {}
@@ -10201,26 +12443,6 @@ snapshots:
       object.assign: 4.1.7
       object.entries: 1.1.9
 
-  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': 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@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))
-    optionalDependencies:
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - eslint-import-resolver-webpack
-      - eslint-plugin-import-x
-      - supports-color
-
   eslint-config-prettier@8.10.0(eslint@8.57.0):
     dependencies:
       eslint: 8.57.0
@@ -10233,22 +12455,6 @@ snapshots:
     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
-      debug: 4.4.1
-      eslint: 9.28.0(jiti@2.4.2)
-      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@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
-
   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
@@ -10269,17 +12475,6 @@ snapshots:
     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))
-    transitivePeerDependencies:
-      - supports-color
-
   eslint-plugin-es@3.0.1(eslint@8.57.0):
     dependencies:
       eslint: 8.57.0
@@ -10288,32 +12483,13 @@ snapshots:
 
   eslint-plugin-eslint-plugin@5.5.1(eslint@8.57.0):
     dependencies:
-      eslint: 8.57.0
-      eslint-utils: 3.0.0(eslint@8.57.0)
-      estraverse: 5.3.0
-
-  eslint-plugin-header@3.1.1(eslint@8.57.0):
-    dependencies:
-      eslint: 8.57.0
-
-  eslint-plugin-import-x@4.12.2(eslint@9.28.0(jiti@2.4.2))(typescript@5.8.3):
-    dependencies:
-      '@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)
-      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
-    optional: true
+      eslint: 8.57.0
+      eslint-utils: 3.0.0(eslint@8.57.0)
+      estraverse: 5.3.0
+
+  eslint-plugin-header@3.1.1(eslint@8.57.0):
+    dependencies:
+      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):
     dependencies:
@@ -10373,35 +12549,6 @@ 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@9.28.0(jiti@2.4.2)):
-    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: 9.28.0(jiti@2.4.2)
-      eslint-import-resolver-node: 0.3.9
-      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
-      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': 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.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)
@@ -10441,25 +12588,6 @@ snapshots:
       safe-regex-test: 1.1.0
       string.prototype.includes: 2.0.1
 
-  eslint-plugin-jsx-a11y@6.10.2(eslint@9.28.0(jiti@2.4.2)):
-    dependencies:
-      aria-query: 5.3.2
-      array-includes: 3.1.8
-      array.prototype.flatmap: 1.3.3
-      ast-types-flow: 0.0.8
-      axe-core: 4.10.3
-      axobject-query: 4.1.0
-      damerau-levenshtein: 1.0.8
-      emoji-regex: 9.2.2
-      eslint: 9.28.0(jiti@2.4.2)
-      hasown: 2.0.2
-      jsx-ast-utils: 3.3.5
-      language-tags: 1.0.9
-      minimatch: 3.1.2
-      object.fromentries: 2.0.8
-      safe-regex-test: 1.1.0
-      string.prototype.includes: 2.0.1
-
   eslint-plugin-node@11.1.0(eslint@8.57.0):
     dependencies:
       eslint: 8.57.0
@@ -10521,28 +12649,6 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-react@7.37.5(eslint@9.28.0(jiti@2.4.2)):
-    dependencies:
-      array-includes: 3.1.8
-      array.prototype.findlast: 1.2.5
-      array.prototype.flatmap: 1.3.3
-      array.prototype.tosorted: 1.1.4
-      doctrine: 2.1.0
-      es-iterator-helpers: 1.2.1
-      eslint: 9.28.0(jiti@2.4.2)
-      estraverse: 5.3.0
-      hasown: 2.0.2
-      jsx-ast-utils: 3.3.5
-      minimatch: 3.1.2
-      object.entries: 1.1.9
-      object.fromentries: 2.0.8
-      object.values: 1.2.1
-      prop-types: 15.8.1
-      resolve: 2.0.0-next.5
-      semver: 6.3.1
-      string.prototype.matchall: 4.0.12
-      string.prototype.repeat: 1.0.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)
@@ -10805,13 +12911,7 @@ snapshots:
 
   fast-diff@1.3.0: {}
 
-  fast-glob@3.3.1:
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.8
+  fast-equals@5.2.2: {}
 
   fast-glob@3.3.3:
     dependencies:
@@ -10986,6 +13086,8 @@ snapshots:
       hasown: 2.0.2
       math-intrinsics: 1.1.0
 
+  get-nonce@1.0.1: {}
+
   get-proto@1.0.1:
     dependencies:
       dunder-proto: 1.0.1
@@ -11001,10 +13103,6 @@ snapshots:
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
 
-  get-tsconfig@4.10.1:
-    dependencies:
-      resolve-pkg-maps: 1.0.0
-
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -11251,12 +13349,19 @@ snapshots:
 
   ini@1.3.8: {}
 
+  input-otp@1.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0
       hasown: 2.0.2
       side-channel: 1.1.0
 
+  internmap@2.0.3: {}
+
   ipaddr.js@1.9.1: {}
 
   is-array-buffer@3.0.5:
@@ -11282,15 +13387,15 @@ snapshots:
     dependencies:
       has-bigints: 1.1.0
 
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
   is-boolean-object@1.2.2:
     dependencies:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
-  is-bun-module@2.0.0:
-    dependencies:
-      semver: 7.7.2
-
   is-callable@1.2.7: {}
 
   is-core-module@2.16.1:
@@ -11465,6 +13570,8 @@ snapshots:
 
   jest-get-type@29.6.3: {}
 
+  jiti@1.21.7: {}
+
   jiti@2.4.2: {}
 
   jju@1.4.0: {}
@@ -11632,6 +13739,8 @@ snapshots:
 
   lilconfig@2.1.0: {}
 
+  lilconfig@3.1.3: {}
+
   lines-and-columns@1.2.4: {}
 
   lines-and-columns@2.0.3: {}
@@ -11691,6 +13800,10 @@ snapshots:
     dependencies:
       react: 19.1.0
 
+  lucide-react@0.454.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   lz-string@1.5.0: {}
 
   magic-string@0.30.17:
@@ -11874,9 +13987,13 @@ snapshots:
 
   muggle-string@0.4.1: {}
 
-  nanoid@3.3.11: {}
+  mz@2.7.0:
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
 
-  napi-postinstall@0.2.4: {}
+  nanoid@3.3.11: {}
 
   natural-compare-lite@1.4.0: {}
 
@@ -11884,6 +14001,37 @@ snapshots:
 
   negotiator@1.0.0: {}
 
+  next-themes@0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  next@14.2.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.89.0):
+    dependencies:
+      '@next/env': 14.2.16
+      '@swc/helpers': 0.5.5
+      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)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 14.2.16
+      '@next/swc-darwin-x64': 14.2.16
+      '@next/swc-linux-arm64-gnu': 14.2.16
+      '@next/swc-linux-arm64-musl': 14.2.16
+      '@next/swc-linux-x64-gnu': 14.2.16
+      '@next/swc-linux-x64-musl': 14.2.16
+      '@next/swc-win32-arm64-msvc': 14.2.16
+      '@next/swc-win32-ia32-msvc': 14.2.16
+      '@next/swc-win32-x64-msvc': 14.2.16
+      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
@@ -12008,6 +14156,8 @@ snapshots:
 
   object-assign@4.1.1: {}
 
+  object-hash@3.0.0: {}
+
   object-inspect@1.13.4: {}
 
   object-keys@1.1.1: {}
@@ -12214,8 +14364,12 @@ snapshots:
 
   picomatch@4.0.2: {}
 
+  pify@2.3.0: {}
+
   pify@4.0.1: {}
 
+  pirates@4.0.7: {}
+
   pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8
@@ -12274,6 +14428,25 @@ snapshots:
     dependencies:
       postcss: 8.5.3
 
+  postcss-import@15.1.0(postcss@8.5.3):
+    dependencies:
+      postcss: 8.5.3
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.10
+
+  postcss-js@4.0.1(postcss@8.5.3):
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.5.3
+
+  postcss-load-config@4.0.2(postcss@8.5.3):
+    dependencies:
+      lilconfig: 3.1.3
+      yaml: 2.8.0
+    optionalDependencies:
+      postcss: 8.5.3
+
   postcss-media-query-parser@0.2.3: {}
 
   postcss-merge-longhand@5.1.7(postcss@8.5.3):
@@ -12335,6 +14508,11 @@ snapshots:
       icss-utils: 5.1.0(postcss@8.5.3)
       postcss: 8.5.3
 
+  postcss-nested@6.2.0(postcss@8.5.3):
+    dependencies:
+      postcss: 8.5.3
+      postcss-selector-parser: 6.1.2
+
   postcss-normalize-charset@5.1.0(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
@@ -12534,18 +14712,26 @@ snapshots:
       iconv-lite: 0.6.3
       unpipe: 1.0.0
 
+  react-day-picker@8.10.1(date-fns@4.1.0)(react@18.3.1):
+    dependencies:
+      date-fns: 4.1.0
+      react: 18.3.1
+
   react-dom@18.3.1(react@18.3.1):
     dependencies:
       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:
       react: 19.1.0
       scheduler: 0.26.0
 
+  react-hook-form@7.58.1(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   react-is@16.13.1: {}
 
   react-is@17.0.2: {}
@@ -12554,6 +14740,30 @@ 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-resizable-panels@2.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   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
@@ -12566,13 +14776,41 @@ snapshots:
       '@remix-run/router': 1.23.0
       react: 19.1.0
 
+  react-smooth@4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      fast-equals: 5.2.2
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+
+  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-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.27.1
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
-    optional: true
 
   react@19.1.0: {}
 
+  read-cache@1.0.0:
+    dependencies:
+      pify: 2.3.0
+
   read-pkg-up@7.0.1:
     dependencies:
       find-up: 4.1.0
@@ -12609,8 +14847,29 @@ snapshots:
       string_decoder: 1.3.0
       util-deprecate: 1.0.2
 
+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.1
+
   readdirp@4.1.2: {}
 
+  recharts-scale@0.4.5:
+    dependencies:
+      decimal.js-light: 2.5.1
+
+  recharts@2.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      clsx: 2.1.1
+      eventemitter3: 4.0.7
+      lodash: 4.17.21
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-is: 18.3.1
+      react-smooth: 4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      recharts-scale: 0.4.5
+      tiny-invariant: 1.3.3
+      victory-vendor: 36.9.2
+
   redent@3.0.0:
     dependencies:
       indent-string: 4.0.0
@@ -12658,8 +14917,6 @@ snapshots:
 
   resolve-from@5.0.0: {}
 
-  resolve-pkg-maps@1.0.0: {}
-
   resolve.exports@2.0.3: {}
 
   resolve@1.19.0:
@@ -12821,7 +15078,6 @@ snapshots:
   scheduler@0.23.2:
     dependencies:
       loose-envify: 1.4.0
-    optional: true
 
   scheduler@0.26.0: {}
 
@@ -12994,6 +15250,11 @@ snapshots:
       astral-regex: 2.0.0
       is-fullwidth-code-point: 3.0.0
 
+  sonner@1.7.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   source-map-js@1.2.1: {}
 
   source-map-support@0.5.21:
@@ -13031,8 +15292,6 @@ snapshots:
 
   sprintf-js@1.0.3: {}
 
-  stable-hash@0.0.5: {}
-
   stable@0.1.8: {}
 
   stackback@0.0.2: {}
@@ -13143,6 +15402,11 @@ 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
@@ -13236,6 +15500,16 @@ snapshots:
       - supports-color
       - typescript
 
+  sucrase@3.35.0:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.8
+      commander: 4.1.1
+      glob: 10.4.5
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.7
+      ts-interface-checker: 0.1.13
+
   superjson@2.2.2:
     dependencies:
       copy-anything: 3.0.5
@@ -13280,8 +15554,41 @@ 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@3.4.17):
+    dependencies:
+      tailwindcss: 3.4.17
+
+  tailwindcss@3.4.17:
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.3
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.7
+      lilconfig: 3.1.3
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.3
+      postcss-import: 15.1.0(postcss@8.5.3)
+      postcss-js: 4.0.1(postcss@8.5.3)
+      postcss-load-config: 4.0.2(postcss@8.5.3)
+      postcss-nested: 6.2.0(postcss@8.5.3)
+      postcss-selector-parser: 6.1.2
+      resolve: 1.22.10
+      sucrase: 3.35.0
+    transitivePeerDependencies:
+      - ts-node
+
   tailwindcss@4.1.8: {}
 
   tapable@2.2.2: {}
@@ -13321,6 +15628,16 @@ snapshots:
 
   text-table@0.2.0: {}
 
+  thenify-all@1.6.0:
+    dependencies:
+      thenify: 3.3.1
+
+  thenify@3.3.1:
+    dependencies:
+      any-promise: 1.3.0
+
+  tiny-invariant@1.3.3: {}
+
   tinybench@2.9.0: {}
 
   tinyexec@0.3.2: {}
@@ -13382,6 +15699,8 @@ snapshots:
     dependencies:
       typescript: 5.8.3
 
+  ts-interface-checker@0.1.13: {}
+
   tsconfig-paths@3.15.0:
     dependencies:
       '@types/json5': 0.0.29
@@ -13523,28 +15842,6 @@ snapshots:
 
   unpipe@1.0.0: {}
 
-  unrs-resolver@1.7.2:
-    dependencies:
-      napi-postinstall: 0.2.4
-    optionalDependencies:
-      '@unrs/resolver-binding-darwin-arm64': 1.7.2
-      '@unrs/resolver-binding-darwin-x64': 1.7.2
-      '@unrs/resolver-binding-freebsd-x64': 1.7.2
-      '@unrs/resolver-binding-linux-arm-gnueabihf': 1.7.2
-      '@unrs/resolver-binding-linux-arm-musleabihf': 1.7.2
-      '@unrs/resolver-binding-linux-arm64-gnu': 1.7.2
-      '@unrs/resolver-binding-linux-arm64-musl': 1.7.2
-      '@unrs/resolver-binding-linux-ppc64-gnu': 1.7.2
-      '@unrs/resolver-binding-linux-riscv64-gnu': 1.7.2
-      '@unrs/resolver-binding-linux-riscv64-musl': 1.7.2
-      '@unrs/resolver-binding-linux-s390x-gnu': 1.7.2
-      '@unrs/resolver-binding-linux-x64-gnu': 1.7.2
-      '@unrs/resolver-binding-linux-x64-musl': 1.7.2
-      '@unrs/resolver-binding-wasm32-wasi': 1.7.2
-      '@unrs/resolver-binding-win32-arm64-msvc': 1.7.2
-      '@unrs/resolver-binding-win32-ia32-msvc': 1.7.2
-      '@unrs/resolver-binding-win32-x64-msvc': 1.7.2
-
   update-browserslist-db@1.1.3(browserslist@4.24.5):
     dependencies:
       browserslist: 4.24.5
@@ -13555,6 +15852,25 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  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: {}
@@ -13568,6 +15884,15 @@ snapshots:
 
   vary@1.1.2: {}
 
+  vaul@0.9.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-dialog': 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)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   vfile-message@4.0.2:
     dependencies:
       '@types/unist': 3.0.3
@@ -13578,6 +15903,23 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
+  victory-vendor@36.9.2:
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.9
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.4
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
   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
@@ -14025,4 +16367,6 @@ snapshots:
 
   yocto-queue@0.1.0: {}
 
+  zod@3.25.67: {}
+
   zwitch@2.0.4: {}
diff --git a/samples/teamspace-nextjs/.gitignore b/samples/teamspace-nextjs/.gitignore
index af1db0d2d..f650315f3 100644
--- a/samples/teamspace-nextjs/.gitignore
+++ b/samples/teamspace-nextjs/.gitignore
@@ -2,16 +2,6 @@
 
 # dependencies
 /node_modules
-/.pnp
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/versions
-
-# testing
-/coverage
 
 # next.js
 /.next/
@@ -20,24 +10,18 @@
 # 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 files
 .env*
-# allow .env.local.example to be committed with sample values. 
-!.env.local.example
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.ts
\ No newline at end of file
diff --git a/samples/teamspace-nextjs/README.md b/samples/teamspace-nextjs/README.md
deleted file mode 100644
index e215bc4cc..000000000
--- a/samples/teamspace-nextjs/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/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/favicon.ico b/samples/teamspace-nextjs/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/app/globals.css b/samples/teamspace-nextjs/app/globals.css
index e3734be15..cdcbc1be0 100644
--- a/samples/teamspace-nextjs/app/globals.css
+++ b/samples/teamspace-nextjs/app/globals.css
@@ -1,42 +1,77 @@
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-@media (prefers-color-scheme: dark) {
+@layer base {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --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%;
   }
 }
 
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }
 
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
 }
 
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
+::-webkit-scrollbar-track {
+  background: hsl(var(--muted));
 }
 
-a {
-  color: inherit;
-  text-decoration: none;
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground));
+  border-radius: 3px;
 }
 
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
+::-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 7786670cd..53f2e41fd 100644
--- a/samples/teamspace-nextjs/app/layout.tsx
+++ b/samples/teamspace-nextjs/app/layout.tsx
@@ -1,33 +1,32 @@
-import type {Metadata} from 'next';
-import {Geist, Geist_Mono} from 'next/font/google';
-import './globals.css';
-import {AsgardeoProvider} from '@asgardeo/nextjs';
+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',
-  subsets: ['latin'],
-});
-
-const geistMono = Geist_Mono({
-  variable: '--font-geist-mono',
-  subsets: ['latin'],
-});
+const inter = Inter({ subsets: ["latin"] })
 
 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.",
+    generator: 'v0.dev'
+}
 
 export default function RootLayout({
   children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+}: {
+  children: React.ReactNode
+}) {
   return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        <AsgardeoProvider>{children}</AsgardeoProvider>
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <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..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.module.css b/samples/teamspace-nextjs/app/page.module.css
deleted file mode 100644
index 8634d2c28..000000000
--- a/samples/teamspace-nextjs/app/page.module.css
+++ /dev/null
@@ -1,169 +0,0 @@
-.page {
-  --gray-rgb: 0, 0, 0;
-  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
-  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
-
-  display: grid;
-  grid-template-rows: 20px 1fr 20px;
-  align-items: center;
-  justify-items: center;
-  min-height: 100svh;
-  padding: 80px;
-  gap: 64px;
-  font-family: var(--font-geist-sans);
-}
-
-@media (prefers-color-scheme: dark) {
-  .page {
-    --gray-rgb: 255, 255, 255;
-    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
-    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
-  }
-}
-
-.main {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-  grid-row-start: 2;
-}
-
-.main ol {
-  font-family: var(--font-geist-mono);
-  padding-left: 0;
-  margin: 0;
-  font-size: 14px;
-  line-height: 24px;
-  letter-spacing: -0.01em;
-  list-style-position: inside;
-}
-
-.main li:not(:last-of-type) {
-  margin-bottom: 8px;
-}
-
-.main code {
-  font-family: inherit;
-  background: var(--gray-alpha-100);
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-weight: 600;
-}
-
-.ctas {
-  display: flex;
-  gap: 16px;
-}
-
-.ctas a,
-.ctas button {
-  appearance: none;
-  border-radius: 128px;
-  height: 48px;
-  padding: 0 20px;
-  border: none;
-  border: 1px solid transparent;
-  transition:
-    background 0.2s,
-    color 0.2s,
-    border-color 0.2s;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: 500;
-}
-
-.primary {
-  background: var(--foreground);
-  color: var(--background);
-  gap: 8px;
-}
-
-.secondary {
-  border-color: var(--gray-alpha-200);
-  min-width: 158px;
-}
-
-.footer {
-  grid-row-start: 3;
-  display: flex;
-  gap: 24px;
-}
-
-.footer a {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.footer img {
-  flex-shrink: 0;
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  .primary:hover {
-    background: var(--button-primary-hover);
-    border-color: transparent;
-  }
-
-  .secondary:hover {
-    background: var(--button-secondary-hover);
-    border-color: transparent;
-  }
-
-  .footer a:hover {
-    text-decoration: underline;
-    text-underline-offset: 4px;
-  }
-}
-
-@media (max-width: 600px) {
-  .page {
-    padding: 32px;
-    padding-bottom: 80px;
-  }
-
-  .main {
-    align-items: center;
-  }
-
-  .main ol {
-    text-align: center;
-  }
-
-  .ctas {
-    flex-direction: column;
-  }
-
-  .ctas a {
-    font-size: 14px;
-    height: 40px;
-    padding: 0 16px;
-  }
-
-  .secondary {
-    min-width: auto;
-  }
-
-  .footer {
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .logo {
-    filter: invert();
-  }
-}
\ No newline at end of file
diff --git a/samples/teamspace-nextjs/app/page.tsx b/samples/teamspace-nextjs/app/page.tsx
index 78ef68c25..a609578b4 100644
--- a/samples/teamspace-nextjs/app/page.tsx
+++ b/samples/teamspace-nextjs/app/page.tsx
@@ -1,34 +1,458 @@
-'use client';
+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 Link from 'next/link';
-import styles from './page.module.css';
-import {SignInButton, SignedIn, SignOutButton, SignedOut, User} from '@asgardeo/nextjs';
+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",
+  },
+]
 
-export default function Home() {
+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={styles.page}>
-      <main className={styles.main}>
-        <div className={styles.ctas}>
-          <SignedOut>
-            <Link href="/signin" className={styles.primary} />
-          </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 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>
-              )}
-            </User>
-            <SignOutButton className={styles.secondary}>Sign Out</SignOutButton>
-          </SignedIn>
+                <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>
     </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/app/signin/page.tsx b/samples/teamspace-nextjs/app/signin/page.tsx
deleted file mode 100644
index 3fca357fd..000000000
--- a/samples/teamspace-nextjs/app/signin/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-'use client';
-
-import {SignIn} from '@asgardeo/nextjs';
-
-export default function SignInPage() {
-  return <SignIn />;
-}
diff --git a/samples/teamspace-nextjs/components.json b/samples/teamspace-nextjs/components.json
new file mode 100644
index 000000000..d9ef0ae53
--- /dev/null
+++ b/samples/teamspace-nextjs/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "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..31d93e996
--- /dev/null
+++ b/samples/teamspace-nextjs/components/header.tsx
@@ -0,0 +1,203 @@
+"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"
+import { useAuth } from "@/hooks/use-auth"
+
+export function Header() {
+  const { user, currentOrg, organizations, isAuthenticated, setCurrentOrg, signOut } = useAuth()
+  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
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/eslint.config.mjs b/samples/teamspace-nextjs/eslint.config.mjs
deleted file mode 100644
index c85fb67c4..000000000
--- a/samples/teamspace-nextjs/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/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
index 3baabc0ad..0b06b4797 100644
--- a/samples/teamspace-nextjs/middleware.ts
+++ b/samples/teamspace-nextjs/middleware.ts
@@ -1,25 +1,19 @@
-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',
-});
+import type { NextRequest } from "next/server"
+import { updateSession } from "@/lib/auth"
 
 export async function middleware(request: NextRequest) {
-  return await asgardeo.middleware(request);
+  return await updateSession(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)(.*)',
+    /*
+     * Match all request paths except for the ones starting with:
+     * - api (API routes)
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     */
+    "/((?!api|_next/static|_next/image|favicon.ico).*)",
   ],
-};
+}
diff --git a/samples/teamspace-nextjs/next.config.js b/samples/teamspace-nextjs/next.config.js
new file mode 100644
index 000000000..6a80522b5
--- /dev/null
+++ b/samples/teamspace-nextjs/next.config.js
@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  images: {
+    unoptimized: true,
+  },
+}
+
+module.exports = nextConfig
diff --git a/samples/teamspace-nextjs/next.config.mjs b/samples/teamspace-nextjs/next.config.mjs
new file mode 100644
index 000000000..f5cbc3899
--- /dev/null
+++ b/samples/teamspace-nextjs/next.config.mjs
@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  images: {
+    unoptimized: true,
+  },
+}
+
+export default nextConfig
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/package.json b/samples/teamspace-nextjs/package.json
index 11f9f223f..ab8eabe34 100644
--- a/samples/teamspace-nextjs/package.json
+++ b/samples/teamspace-nextjs/package.json
@@ -3,24 +3,70 @@
   "name": "@asgardeo/teamspace-nextjs",
   "version": "0.0.0",
   "scripts": {
-    "dev": "next dev --turbopack",
     "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "dev": "next dev",
+    "lint": "next lint",
+    "start": "next start"
   },
   "dependencies": {
     "@asgardeo/nextjs": "workspace:^",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "15.3.2"
+    "@hookform/resolvers": "^3.9.1",
+    "@radix-ui/react-accordion": "1.2.2",
+    "@radix-ui/react-alert-dialog": "1.1.4",
+    "@radix-ui/react-aspect-ratio": "1.1.1",
+    "@radix-ui/react-avatar": "latest",
+    "@radix-ui/react-checkbox": "latest",
+    "@radix-ui/react-collapsible": "1.1.2",
+    "@radix-ui/react-context-menu": "2.2.4",
+    "@radix-ui/react-dialog": "1.1.4",
+    "@radix-ui/react-dropdown-menu": "latest",
+    "@radix-ui/react-hover-card": "1.1.4",
+    "@radix-ui/react-label": "latest",
+    "@radix-ui/react-menubar": "1.1.4",
+    "@radix-ui/react-navigation-menu": "1.2.3",
+    "@radix-ui/react-popover": "1.1.4",
+    "@radix-ui/react-progress": "1.1.1",
+    "@radix-ui/react-radio-group": "1.2.2",
+    "@radix-ui/react-scroll-area": "1.2.2",
+    "@radix-ui/react-select": "2.1.4",
+    "@radix-ui/react-separator": "1.1.1",
+    "@radix-ui/react-slider": "1.2.2",
+    "@radix-ui/react-slot": "latest",
+    "@radix-ui/react-switch": "1.1.2",
+    "@radix-ui/react-tabs": "1.1.2",
+    "@radix-ui/react-toast": "1.2.4",
+    "@radix-ui/react-toggle": "1.1.1",
+    "@radix-ui/react-toggle-group": "1.1.1",
+    "@radix-ui/react-tooltip": "1.1.6",
+    "autoprefixer": "^10.4.20",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "1.0.4",
+    "date-fns": "4.1.0",
+    "embla-carousel-react": "8.5.1",
+    "input-otp": "1.4.1",
+    "jose": "latest",
+    "lucide-react": "^0.454.0",
+    "next": "14.2.16",
+    "next-themes": "latest",
+    "react": "^18",
+    "react-day-picker": "8.10.1",
+    "react-dom": "^18",
+    "react-hook-form": "^7.54.1",
+    "react-resizable-panels": "^2.1.7",
+    "recharts": "2.15.0",
+    "sonner": "^1.7.1",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.6",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
-    "typescript": "^5",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "15.3.2",
-    "@eslint/eslintrc": "^3"
+    "@types/node": "^22",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "postcss": "^8.5",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5"
   }
 }
diff --git a/samples/teamspace-nextjs/pnpm-lock.yaml b/samples/teamspace-nextjs/pnpm-lock.yaml
new file mode 100644
index 000000000..c400592e8
--- /dev/null
+++ b/samples/teamspace-nextjs/pnpm-lock.yaml
@@ -0,0 +1,3788 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@hookform/resolvers':
+        specifier: ^3.9.1
+        version: 3.10.0(react-hook-form@7.58.1(react@18.3.1))
+      '@radix-ui/react-accordion':
+        specifier: 1.2.2
+        version: 1.2.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-alert-dialog':
+        specifier: 1.1.4
+        version: 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-aspect-ratio':
+        specifier: 1.1.1
+        version: 1.1.1(@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':
+        specifier: latest
+        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: latest
+        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-collapsible':
+        specifier: 1.1.2
+        version: 1.1.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-context-menu':
+        specifier: 2.2.4
+        version: 2.2.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-dialog':
+        specifier: 1.1.4
+        version: 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-dropdown-menu':
+        specifier: latest
+        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-hover-card':
+        specifier: 1.1.4
+        version: 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-label':
+        specifier: latest
+        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-menubar':
+        specifier: 1.1.4
+        version: 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-navigation-menu':
+        specifier: 1.2.3
+        version: 1.2.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-popover':
+        specifier: 1.1.4
+        version: 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-progress':
+        specifier: 1.1.1
+        version: 1.1.1(@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-radio-group':
+        specifier: 1.2.2
+        version: 1.2.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-scroll-area':
+        specifier: 1.2.2
+        version: 1.2.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-select':
+        specifier: 2.1.4
+        version: 2.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-separator':
+        specifier: 1.1.1
+        version: 1.1.1(@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-slider':
+        specifier: 1.2.2
+        version: 1.2.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-slot':
+        specifier: latest
+        version: 1.2.3(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-switch':
+        specifier: 1.1.2
+        version: 1.1.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-tabs':
+        specifier: 1.1.2
+        version: 1.1.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-toast':
+        specifier: 1.2.4
+        version: 1.2.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-toggle':
+        specifier: 1.1.1
+        version: 1.1.1(@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-toggle-group':
+        specifier: 1.1.1
+        version: 1.1.1(@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-tooltip':
+        specifier: 1.1.6
+        version: 1.1.6(@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)
+      autoprefixer:
+        specifier: ^10.4.20
+        version: 10.4.21(postcss@8.5.6)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      cmdk:
+        specifier: 1.0.4
+        version: 1.0.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)
+      date-fns:
+        specifier: 4.1.0
+        version: 4.1.0
+      embla-carousel-react:
+        specifier: 8.5.1
+        version: 8.5.1(react@18.3.1)
+      input-otp:
+        specifier: 1.4.1
+        version: 1.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      jose:
+        specifier: latest
+        version: 6.0.11
+      lucide-react:
+        specifier: ^0.454.0
+        version: 0.454.0(react@18.3.1)
+      next:
+        specifier: 14.2.16
+        version: 14.2.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next-themes:
+        specifier: latest
+        version: 0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react:
+        specifier: ^18
+        version: 18.3.1
+      react-day-picker:
+        specifier: 8.10.1
+        version: 8.10.1(date-fns@4.1.0)(react@18.3.1)
+      react-dom:
+        specifier: ^18
+        version: 18.3.1(react@18.3.1)
+      react-hook-form:
+        specifier: ^7.54.1
+        version: 7.58.1(react@18.3.1)
+      react-resizable-panels:
+        specifier: ^2.1.7
+        version: 2.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-router-dom:
+        specifier: latest
+        version: 7.6.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      recharts:
+        specifier: 2.15.0
+        version: 2.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      sonner:
+        specifier: ^1.7.1
+        version: 1.7.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      tailwind-merge:
+        specifier: ^2.5.5
+        version: 2.6.0
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@3.4.17)
+      vaul:
+        specifier: ^0.9.6
+        version: 0.9.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)
+      zod:
+        specifier: ^3.24.1
+        version: 3.25.67
+    devDependencies:
+      '@types/node':
+        specifier: ^22
+        version: 22.15.32
+      '@types/react':
+        specifier: ^18
+        version: 18.3.23
+      '@types/react-dom':
+        specifier: ^18
+        version: 18.3.7(@types/react@18.3.23)
+      postcss:
+        specifier: ^8.5
+        version: 8.5.6
+      tailwindcss:
+        specifier: ^3.4.17
+        version: 3.4.17
+      typescript:
+        specifier: ^5
+        version: 5.8.3
+
+packages:
+
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
+  '@babel/runtime@7.27.6':
+    resolution: {integrity: sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@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/utils@0.2.9':
+    resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
+
+  '@hookform/resolvers@3.10.0':
+    resolution: {integrity: sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag==}
+    peerDependencies:
+      react-hook-form: ^7.0.0
+
+  '@isaacs/cliui@8.0.2':
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+
+  '@jridgewell/gen-mapping@0.3.8':
+    resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/set-array@1.2.1':
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.0':
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+
+  '@next/env@14.2.16':
+    resolution: {integrity: sha512-fLrX5TfJzHCbnZ9YUSnGW63tMV3L4nSfhgOQ0iCcX21Pt+VSTDuaLsSuL8J/2XAiVA5AnzvXDpf6pMs60QxOag==}
+
+  '@next/swc-darwin-arm64@14.2.16':
+    resolution: {integrity: sha512-uFT34QojYkf0+nn6MEZ4gIWQ5aqGF11uIZ1HSxG+cSbj+Mg3+tYm8qXYd3dKN5jqKUm5rBVvf1PBRO/MeQ6rxw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@next/swc-darwin-x64@14.2.16':
+    resolution: {integrity: sha512-mCecsFkYezem0QiZlg2bau3Xul77VxUD38b/auAjohMA22G9KTJneUYMv78vWoCCFkleFAhY1NIvbyjj1ncG9g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@next/swc-linux-arm64-gnu@14.2.16':
+    resolution: {integrity: sha512-yhkNA36+ECTC91KSyZcgWgKrYIyDnXZj8PqtJ+c2pMvj45xf7y/HrgI17hLdrcYamLfVt7pBaJUMxADtPaczHA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-arm64-musl@14.2.16':
+    resolution: {integrity: sha512-X2YSyu5RMys8R2lA0yLMCOCtqFOoLxrq2YbazFvcPOE4i/isubYjkh+JCpRmqYfEuCVltvlo+oGfj/b5T2pKUA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-x64-gnu@14.2.16':
+    resolution: {integrity: sha512-9AGcX7VAkGbc5zTSa+bjQ757tkjr6C/pKS7OK8cX7QEiK6MHIIezBLcQ7gQqbDW2k5yaqba2aDtaBeyyZh1i6Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-linux-x64-musl@14.2.16':
+    resolution: {integrity: sha512-Klgeagrdun4WWDaOizdbtIIm8khUDQJ/5cRzdpXHfkbY91LxBXeejL4kbZBrpR/nmgRrQvmz4l3OtttNVkz2Sg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-win32-arm64-msvc@14.2.16':
+    resolution: {integrity: sha512-PwW8A1UC1Y0xIm83G3yFGPiOBftJK4zukTmk7DI1CebyMOoaVpd8aSy7K6GhobzhkjYvqS/QmzcfsWG2Dwizdg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@next/swc-win32-ia32-msvc@14.2.16':
+    resolution: {integrity: sha512-jhPl3nN0oKEshJBNDAo0etGMzv0j3q3VYorTSFqH1o3rwv1MQRdor27u1zhkgsHPNeY1jxcgyx1ZsCkDD1IHgg==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@next/swc-win32-x64-msvc@14.2.16':
+    resolution: {integrity: sha512-OA7NtfxgirCjfqt+02BqxC3MIgM/JaGjw9tOe4fyZgPsqfseNiMPnCRP44Pfs+Gpo9zPN+SXaFsgP6vk8d571A==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@pkgjs/parseargs@0.11.0':
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+
+  '@radix-ui/number@1.1.0':
+    resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==}
+
+  '@radix-ui/primitive@1.1.1':
+    resolution: {integrity: sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==}
+
+  '@radix-ui/primitive@1.1.2':
+    resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
+
+  '@radix-ui/react-accordion@1.2.2':
+    resolution: {integrity: sha512-b1oh54x4DMCdGsB4/7ahiSrViXxaBwRPotiZNnYXjLha9vfuURSAZErki6qjDoSIV0eXx5v57XnTGVtGwnfp2g==}
+    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-alert-dialog@1.1.4':
+    resolution: {integrity: sha512-A6Kh23qZDLy3PSU4bh2UJZznOrUdHImIXqF8YtUa6CN73f8EOO9XlXSCd9IHyPvIquTaa/kwaSWzZTtUvgXVGw==}
+    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-arrow@1.1.1':
+    resolution: {integrity: sha512-NaVpZfmv8SKeZbn4ijN2V3jlHA9ngBG16VnIIm22nUR0Yk8KUALyBxT3KYEUnNuch9sTE8UTsS3whzBgKOL30w==}
+    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-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-aspect-ratio@1.1.1':
+    resolution: {integrity: sha512-kNU4FIpcFMBLkOUcgeIteH06/8JLBcYY6Le1iKenDGCYNYFX3TQqCZjzkOsz37h7r94/99GTb7YhEr98ZBJibw==}
+    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-collapsible@1.1.2':
+    resolution: {integrity: sha512-PliMB63vxz7vggcyq0IxNYk8vGDrLXVWw4+W4B8YnwI1s18x7YZYqlG9PLX7XxAJUi0g2DxP4XKJMFHh/iVh9A==}
+    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.1':
+    resolution: {integrity: sha512-LwT3pSho9Dljg+wY2KN2mrrh6y3qELfftINERIzBUO9e0N+t0oMTyn3k9iv+ZqgrwGkRnLpNJrsMv9BZlt2yuA==}
+    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.1':
+    resolution: {integrity: sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@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-context-menu@2.2.4':
+    resolution: {integrity: sha512-ap4wdGwK52rJxGkwukU1NrnEodsUFQIooANKu+ey7d6raQ2biTcEf8za1zr0mgFHieevRTB2nK4dJeN8pTAZGQ==}
+    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-context@1.1.1':
+    resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@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-dialog@1.1.4':
+    resolution: {integrity: sha512-Ur7EV1IwQGCyaAuyDRiOLA5JIUZxELJljF+MbM/2NC0BYwfuRrbpS30BiQBJrVruscgUkieKkqXYDOoByaxIoA==}
+    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-direction@1.1.0':
+    resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
+    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-dismissable-layer@1.1.3':
+    resolution: {integrity: sha512-onrWn/72lQoEucDmJnr8uczSNTujT0vJnA/X5+3AkChVPowr8n1yvIKIabhWyMQeMvvmdpsvcyDqx3X1LEXCPg==}
+    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.1':
+    resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
+    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-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.1':
+    resolution: {integrity: sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==}
+    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-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-hover-card@1.1.4':
+    resolution: {integrity: sha512-QSUUnRA3PQ2UhvoCv3eYvMnCAgGQW+sTu86QPuNb+ZMi+ZENd6UWpiXbcWDQ4AEaKF9KKpCHBeaJz9Rw6lRlaQ==}
+    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.0':
+    resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        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:
+      '@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-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-menu@2.1.4':
+    resolution: {integrity: sha512-BnOgVoL6YYdHAG6DtXONaR29Eq4nvbi8rutrV/xlr3RQCMMb3yqP85Qiw/3NReozrSW+4dfLkK+rc1hb4wPU/A==}
+    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-menubar@1.1.4':
+    resolution: {integrity: sha512-+KMpi7VAZuB46+1LD7a30zb5IxyzLgC8m8j42gk3N4TUCcViNQdX8FhoH1HDvYiA8quuqcek4R4bYpPn/SY1GA==}
+    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-navigation-menu@1.2.3':
+    resolution: {integrity: sha512-IQWAsQ7dsLIYDrn0WqPU+cdM7MONTv9nqrLVYoie3BPiabSfUVDe6Fr+oEt0Cofsr9ONDcDe9xhmJbL1Uq1yKg==}
+    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-popover@1.1.4':
+    resolution: {integrity: sha512-aUACAkXx8LaFymDma+HQVji7WhvEhpFJ7+qPz17Nf4lLZqtreGOFRiNQWQmhzp7kEWg9cOyyQJpdIMUMPc/CPw==}
+    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.1':
+    resolution: {integrity: sha512-3kn5Me69L+jv82EKRuQCXdYyf1DqHwD2U/sxoNgBGCB7K9TRc3bQamQ+5EPM9EvyPdli0W41sROd+ZU1dTCztw==}
+    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.3':
+    resolution: {integrity: sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==}
+    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.2':
+    resolution: {integrity: sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==}
+    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.0.1':
+    resolution: {integrity: sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==}
+    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-progress@1.1.1':
+    resolution: {integrity: sha512-6diOawA84f/eMxFHcWut0aE1C2kyE9dOyCTQOMRR2C/qPiXz/X0SaiA/RLbapQaXUCmy0/hLMf9meSccD1N0pA==}
+    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-radio-group@1.2.2':
+    resolution: {integrity: sha512-E0MLLGfOP0l8P/NxgVzfXJ8w3Ch8cdO6UDzJfDChu4EJDy+/WdO5LqpdY8PYnCErkmZH3gZhDL1K7kQ41fAHuQ==}
+    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-roving-focus@1.1.1':
+    resolution: {integrity: sha512-QE1RoxPGJ/Nm8Qmk0PxP8ojmoaS67i0s7hVssS7KuI2FQoc/uzVlZsqKfQvxPE6D8hICCPHJ4D88zNhT3OOmkw==}
+    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-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-scroll-area@1.2.2':
+    resolution: {integrity: sha512-EFI1N/S3YxZEW/lJ/H1jY3njlvTd8tBmgKEn4GHi51+aMm94i6NmAJstsm5cu3yJwYqYc93gpCPm21FeAbFk6g==}
+    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-select@2.1.4':
+    resolution: {integrity: sha512-pOkb2u8KgO47j/h7AylCj7dJsm69BXcjkrvTqMptFqsE2i0p8lHkfgneXKjAgPzBMivnoMyt8o4KiV4wYzDdyQ==}
+    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-separator@1.1.1':
+    resolution: {integrity: sha512-RRiNRSrD8iUiXriq/Y5n4/3iE8HzqgLHsusUSg5jVpU2+3tqcUFPJXHDymwEypunc2sWxDUS3UC+rkZRlHedsw==}
+    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-slider@1.2.2':
+    resolution: {integrity: sha512-sNlU06ii1/ZcbHf8I9En54ZPW0Vil/yPVg4vQMcFNjrIx51jsHbFl1HYHQvCIWJSr1q0ZmA+iIs/ZTv8h7HHSA==}
+    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.1.1':
+    resolution: {integrity: sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        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-switch@1.1.2':
+    resolution: {integrity: sha512-zGukiWHjEdBCRyXvKR6iXAQG6qXm2esuAD6kDOi9Cn+1X6ev3ASo4+CsYaD6Fov9r/AQFekqnD/7+V0Cs6/98g==}
+    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-tabs@1.1.2':
+    resolution: {integrity: sha512-9u/tQJMcC2aGq7KXpGivMm1mgq7oRJKXphDwdypPd/j21j/2znamPU8WkXgnhUaTrSFNIt8XhOyCAupg8/GbwQ==}
+    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-toast@1.2.4':
+    resolution: {integrity: sha512-Sch9idFJHJTMH9YNpxxESqABcAFweJG4tKv+0zo0m5XBvUSL8FM5xKcJLFLXononpePs8IclyX1KieL5SDUNgA==}
+    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-toggle-group@1.1.1':
+    resolution: {integrity: sha512-OgDLZEA30Ylyz8YSXvnGqIHtERqnUt1KUYTKdw/y8u7Ci6zGiJfXc02jahmcSNK3YcErqioj/9flWC9S1ihfwg==}
+    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-toggle@1.1.1':
+    resolution: {integrity: sha512-i77tcgObYr743IonC1hrsnnPmszDRn8p+EGUsUt+5a/JFn28fxaM88Py6V2mc8J5kELMWishI0rLnuGLFD/nnQ==}
+    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-tooltip@1.1.6':
+    resolution: {integrity: sha512-TLB5D8QLExS1uDn7+wH/bjEmRurNMTzNrtq7IjaS4kjion9NtzsTGkvR5+i7yc9q01Pi2KMM2cN3f8UG4IvvXA==}
+    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-use-callback-ref@1.1.0':
+    resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
+    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.1.0':
+    resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
+    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.0':
+    resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
+    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.0':
+    resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
+    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.0':
+    resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
+    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.0':
+    resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
+    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.0':
+    resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
+    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/react-visually-hidden@1.1.1':
+    resolution: {integrity: sha512-vVfA2IZ9q/J+gEamvj761Oq1FpWgCDaNOOIfbPVp2MVPLEomUr5+Vf7kJGwQ24YxZSlQVar7Bes8kyTo5Dshpg==}
+    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/rect@1.1.0':
+    resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
+
+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+
+  '@swc/counter@0.1.3':
+    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
+
+  '@swc/helpers@0.5.5':
+    resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
+
+  '@types/d3-array@3.2.1':
+    resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-shape@3.1.7':
+    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
+  '@types/node@22.15.32':
+    resolution: {integrity: sha512-3jigKqgSjsH6gYZv2nEsqdXfZqIFGAV36XYYjf9KGZ3PSG+IhLecqPnI310RvjutyMwifE2hhhNEklOUrvx/wA==}
+
+  '@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@18.3.23':
+    resolution: {integrity: sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.1.0:
+    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
+    engines: {node: '>=12'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  ansi-styles@6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+    engines: {node: '>=12'}
+
+  any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
+  autoprefixer@10.4.21:
+    resolution: {integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
+  brace-expansion@2.0.2:
+    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.25.0:
+    resolution: {integrity: sha512-PJ8gYKeS5e/whHBh8xrwYK+dAvEj7JXtz6uTucnMRB8OiGTsKccFekoRrjajPBHV8oOY+2tI4uxeceSimKwMFA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  busboy@1.6.0:
+    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
+    engines: {node: '>=10.16.0'}
+
+  camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+
+  caniuse-lite@1.0.30001724:
+    resolution: {integrity: sha512-WqJo7p0TbHDOythNTqYujmaJTvtYRZrjpP8TCvH6Vb9CYJerJNKamKzIWOM4BkQatWj9H2lYulpdAQNBe7QhNA==}
+
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  cmdk@1.0.4:
+    resolution: {integrity: sha512-AnsjfHyHpQ/EFeAnG216WY7A5LiYCoZzCSygiLvfXC3H3LFGCprErteUcszaVluGOhuOTbJS3jWHrSDYPBBygg==}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
+  cookie@1.0.2:
+    resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
+    engines: {node: '>=18'}
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
+  decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
+  didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+
+  dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
+  dom-helpers@5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
+  electron-to-chromium@1.5.173:
+    resolution: {integrity: sha512-2bFhXP2zqSfQHugjqJIDFVwa+qIxyNApenmXTp9EjaKtdPrES5Qcn9/aSFy/NaP2E+fWG/zxKu/LBvY36p5VNQ==}
+
+  embla-carousel-react@8.5.1:
+    resolution: {integrity: sha512-z9Y0K84BJvhChXgqn2CFYbfEi6AwEr+FFVVKm/MqbTQ2zIzO1VQri6w67LcfpVF0AjbhwVMywDZqY4alYkjW5w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  embla-carousel-reactive-utils@8.5.1:
+    resolution: {integrity: sha512-n7VSoGIiiDIc4MfXF3ZRTO59KDp820QDuyBDGlt5/65+lumPHxX2JLz0EZ23hZ4eg4vZGUXwMkYv02fw2JVo/A==}
+    peerDependencies:
+      embla-carousel: 8.5.1
+
+  embla-carousel@8.5.1:
+    resolution: {integrity: sha512-JUb5+FOHobSiWQ2EJNaueCNT/cQU9L6XWBbWmorWPQT9bkbk+fhsuLr8wWrzXKagO3oWszBO7MSx+GfaRk4E6A==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  eventemitter3@4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+
+  fast-equals@5.2.2:
+    resolution: {integrity: sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==}
+    engines: {node: '>=6.0.0'}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fastq@1.19.1:
+    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
+
+  fraction.js@4.3.7:
+    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
+    hasBin: true
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  input-otp@1.4.1:
+    resolution: {integrity: sha512-+yvpmKYKHi9jIGngxagY9oWiiblPB7+nEO75F2l2o4vs+6vpPZZmUl4tBNYuTCvQjhvEIbdNeJu70bhfYP2nbw==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
+  jiti@1.21.7:
+    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+    hasBin: true
+
+  jose@6.0.11:
+    resolution: {integrity: sha512-QxG7EaliDARm1O1S8BGakqncGT9s25bKL1WSf6/oa17Tkqwi8D2ZNglqCF+DsYF88/rV66Q/Q2mFAy697E1DUg==}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  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==}
+
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  lucide-react@0.454.0:
+    resolution: {integrity: sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  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@14.2.16:
+    resolution: {integrity: sha512-LcO7WnFu6lYSvCzZoo1dB+IO0xXz5uEv52HF1IUN0IqVTUIZGHuuR10I5efiLadGt+4oZqTcNZyVVEem/TM5nA==}
+    engines: {node: '>=18.17.0'}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      '@playwright/test': ^1.41.2
+      react: ^18.2.0
+      react-dom: ^18.2.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@playwright/test':
+        optional: true
+      sass:
+        optional: true
+
+  node-releases@2.0.19:
+    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  normalize-range@0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+
+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
+
+  postcss-import@15.1.0:
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+
+  postcss-js@4.0.1:
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+
+  postcss-load-config@4.0.2:
+    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+
+  postcss-nested@6.2.0:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  postcss@8.4.31:
+    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  react-day-picker@8.10.1:
+    resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==}
+    peerDependencies:
+      date-fns: ^2.28.0 || ^3.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+
+  react-dom@18.3.1:
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+    peerDependencies:
+      react: ^18.3.1
+
+  react-hook-form@7.58.1:
+    resolution: {integrity: sha512-Lml/KZYEEFfPhUVgE0RdCVpnC4yhW+PndRhbiTtdvSlQTL8IfVR+iQkBjLIvmmc6+GGoVeM11z37ktKFPAb0FA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
+  react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
+  react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+
+  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-resizable-panels@2.1.9:
+    resolution: {integrity: sha512-z77+X08YDIrgAes4jl8xhnUu1LNIRp4+E7cv4xHmLOxxUPO/ML7PSrE813b90vj7xvQ1lcf7g2uA9GeMZonjhQ==}
+    peerDependencies:
+      react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  react-router-dom@7.6.2:
+    resolution: {integrity: sha512-Q8zb6VlTbdYKK5JJBLQEN06oTUa/RAbG/oQS1auK1I0TbJOXktqm+QENEVJU6QvWynlXPRBXI3fiOQcSEA78rA==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+
+  react-router@7.6.2:
+    resolution: {integrity: sha512-U7Nv3y+bMimgWjhlT5CRdzHPu2/KVmqPwKUCChW8en5P3znxUqwlYFlbmyj8Rgp1SF6zs5X4+77kBVknkg6a0w==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
+  react-smooth@4.0.4:
+    resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  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-transition-group@4.4.5:
+    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
+    peerDependencies:
+      react: '>=16.6.0'
+      react-dom: '>=16.6.0'
+
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
+
+  read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
+  recharts-scale@0.4.5:
+    resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
+
+  recharts@2.15.0:
+    resolution: {integrity: sha512-cIvMxDfpAmqAmVgc4yb7pgm/O1tmmkl/CjrvXuW+62/+7jj/iF9Ykm+hb/UJt42TREHMyd3gb+pkgoa2MxgDIw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+
+  set-cookie-parser@2.7.1:
+    resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  sonner@1.7.4:
+    resolution: {integrity: sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  streamsearch@1.1.0:
+    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
+    engines: {node: '>=10.0.0'}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.1.0:
+    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+    engines: {node: '>=12'}
+
+  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
+
+  sucrase@3.35.0:
+    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  tailwind-merge@2.6.0:
+    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
+
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
+  tailwindcss@3.4.17:
+    resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+
+  thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  typescript@5.8.3:
+    resolution: {integrity: sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+  update-browserslist-db@1.1.3:
+    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  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==}
+
+  vaul@0.9.9:
+    resolution: {integrity: sha512-7afKg48srluhZwIkaU+lgGtFCUsYBSGOl8vcc8N/M3YQlZFlynHD15AE+pwrYdc826o7nrIND4lL9Y6b9WWZZQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+
+  victory-vendor@36.9.2:
+    resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
+  yaml@2.8.0:
+    resolution: {integrity: sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
+
+  zod@3.25.67:
+    resolution: {integrity: sha512-idA2YXwpCdqUSKRCACDE6ItZD9TZzy3OZMtpfLoh6oPR47lipysRrJfjzMqFxQ3uJuUPyUeWe1r9vLH33xO/Qw==}
+
+snapshots:
+
+  '@alloc/quick-lru@5.2.0': {}
+
+  '@babel/runtime@7.27.6': {}
+
+  '@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@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/utils@0.2.9': {}
+
+  '@hookform/resolvers@3.10.0(react-hook-form@7.58.1(react@18.3.1))':
+    dependencies:
+      react-hook-form: 7.58.1(react@18.3.1)
+
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.0
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
+  '@jridgewell/gen-mapping@0.3.8':
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/set-array@1.2.1': {}
+
+  '@jridgewell/sourcemap-codec@1.5.0': {}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  '@next/env@14.2.16': {}
+
+  '@next/swc-darwin-arm64@14.2.16':
+    optional: true
+
+  '@next/swc-darwin-x64@14.2.16':
+    optional: true
+
+  '@next/swc-linux-arm64-gnu@14.2.16':
+    optional: true
+
+  '@next/swc-linux-arm64-musl@14.2.16':
+    optional: true
+
+  '@next/swc-linux-x64-gnu@14.2.16':
+    optional: true
+
+  '@next/swc-linux-x64-musl@14.2.16':
+    optional: true
+
+  '@next/swc-win32-arm64-msvc@14.2.16':
+    optional: true
+
+  '@next/swc-win32-ia32-msvc@14.2.16':
+    optional: true
+
+  '@next/swc-win32-x64-msvc@14.2.16':
+    optional: true
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.19.1
+
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
+
+  '@radix-ui/number@1.1.0': {}
+
+  '@radix-ui/primitive@1.1.1': {}
+
+  '@radix-ui/primitive@1.1.2': {}
+
+  '@radix-ui/react-accordion@1.2.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.1
+      '@radix-ui/react-collapsible': 1.1.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-collection': 1.1.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@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.1.0(@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-alert-dialog@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/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dialog': 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.0.1(@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.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-arrow@1.1.1(@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.0.1(@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-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-aspect-ratio@1.1.1(@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.0.1(@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-collapsible@1.1.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.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.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-primitive': 2.0.1(@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.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@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.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@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.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.1(@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@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/react-context-menu@2.2.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/primitive': 1.1.1
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-menu': 2.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.0.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@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-context@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-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-dialog@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/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.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-focus-guards': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-portal': 1.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.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-primitive': 2.0.1(@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.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@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-direction@1.1.0(@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-dismissable-layer@1.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/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.0(@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.1(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@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.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@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.0(@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-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-hover-card@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/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.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-popper': 1.2.1(@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.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.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-primitive': 2.0.1(@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.1.0(@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.0(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@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-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-menu@2.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/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.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-focus-guards': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@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.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.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-primitive': 2.0.1(@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.1(@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.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@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-menubar@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/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-menu': 2.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.0.1(@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.1(@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.1.0(@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-navigation-menu@1.2.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/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.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-id': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.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-primitive': 2.0.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@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-popover@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/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.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-focus-guards': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@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.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.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-primitive': 2.0.1(@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.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@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.1(@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.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-rect': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/rect': 1.1.0
+      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-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.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-primitive': 2.0.1(@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.0(@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-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.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/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@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.0.1(@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.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-progress@1.1.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@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-radio-group@1.2.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.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.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-primitive': 2.0.1(@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.1(@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.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@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-roving-focus@1.1.1(@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.1
+      '@radix-ui/react-collection': 1.1.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@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-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-scroll-area@1.2.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/number': 1.1.0
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.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-primitive': 2.0.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@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-select@2.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/number': 1.1.0
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.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-focus-guards': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@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.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-primitive': 2.0.1(@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.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@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)
+      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-separator@1.1.1(@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.0.1(@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-slider@1.2.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/number': 1.1.0
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@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.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@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.1.1(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 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-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-switch@1.1.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.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@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.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@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-tabs@1.1.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.1
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.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-primitive': 2.0.1(@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.1(@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.1.0(@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-toast@1.2.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/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.1(@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.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.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-portal': 1.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.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-primitive': 2.0.1(@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.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@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-toggle-group@1.1.1(@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.1
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@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.1(@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-toggle': 1.1.1(@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.1.0(@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-toggle@1.1.1(@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.1
+      '@radix-ui/react-primitive': 2.0.1(@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.1.0(@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-tooltip@1.1.6(@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.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.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-id': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.1(@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.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.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-primitive': 2.0.1(@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.1.1(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.1(@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-use-callback-ref@1.1.0(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@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.1.0(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      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.0(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@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.0(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      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.0(@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.0(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/rect': 1.1.0
+      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': 18.3.23
+
+  '@radix-ui/react-use-size@1.1.0(@types/react@18.3.23)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.23)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/react-use-size@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-visually-hidden@1.1.1(@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.0.1(@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/rect@1.1.0': {}
+
+  '@radix-ui/rect@1.1.1': {}
+
+  '@swc/counter@0.1.3': {}
+
+  '@swc/helpers@0.5.5':
+    dependencies:
+      '@swc/counter': 0.1.3
+      tslib: 2.8.1
+
+  '@types/d3-array@3.2.1': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-shape@3.1.7':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
+  '@types/node@22.15.32':
+    dependencies:
+      undici-types: 6.21.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@18.3.23':
+    dependencies:
+      '@types/prop-types': 15.7.15
+      csstype: 3.1.3
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.1.0: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansi-styles@6.2.1: {}
+
+  any-promise@1.3.0: {}
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
+  arg@5.0.2: {}
+
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
+  autoprefixer@10.4.21(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.25.0
+      caniuse-lite: 1.0.30001724
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  balanced-match@1.0.2: {}
+
+  binary-extensions@2.3.0: {}
+
+  brace-expansion@2.0.2:
+    dependencies:
+      balanced-match: 1.0.2
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.25.0:
+    dependencies:
+      caniuse-lite: 1.0.30001724
+      electron-to-chromium: 1.5.173
+      node-releases: 2.0.19
+      update-browserslist-db: 1.1.3(browserslist@4.25.0)
+
+  busboy@1.6.0:
+    dependencies:
+      streamsearch: 1.1.0
+
+  camelcase-css@2.0.1: {}
+
+  caniuse-lite@1.0.30001724: {}
+
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  client-only@0.0.1: {}
+
+  clsx@2.1.1: {}
+
+  cmdk@1.0.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-dialog': 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-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)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      use-sync-external-store: 1.5.0(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  commander@4.1.1: {}
+
+  cookie@1.0.2: {}
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  cssesc@3.0.0: {}
+
+  csstype@3.1.3: {}
+
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-color@3.1.0: {}
+
+  d3-ease@3.0.1: {}
+
+  d3-format@3.1.0: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
+  date-fns@4.1.0: {}
+
+  decimal.js-light@2.5.1: {}
+
+  detect-node-es@1.1.0: {}
+
+  didyoumean@1.2.2: {}
+
+  dlv@1.1.3: {}
+
+  dom-helpers@5.2.1:
+    dependencies:
+      '@babel/runtime': 7.27.6
+      csstype: 3.1.3
+
+  eastasianwidth@0.2.0: {}
+
+  electron-to-chromium@1.5.173: {}
+
+  embla-carousel-react@8.5.1(react@18.3.1):
+    dependencies:
+      embla-carousel: 8.5.1
+      embla-carousel-reactive-utils: 8.5.1(embla-carousel@8.5.1)
+      react: 18.3.1
+
+  embla-carousel-reactive-utils@8.5.1(embla-carousel@8.5.1):
+    dependencies:
+      embla-carousel: 8.5.1
+
+  embla-carousel@8.5.1: {}
+
+  emoji-regex@8.0.0: {}
+
+  emoji-regex@9.2.2: {}
+
+  escalade@3.2.0: {}
+
+  eventemitter3@4.0.7: {}
+
+  fast-equals@5.2.2: {}
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fastq@1.19.1:
+    dependencies:
+      reusify: 1.1.0
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  foreground-child@3.3.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
+  fraction.js@4.3.7: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  get-nonce@1.0.1: {}
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob@10.4.5:
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
+
+  graceful-fs@4.2.11: {}
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  input-otp@1.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  internmap@2.0.3: {}
+
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
+  is-core-module@2.16.1:
+    dependencies:
+      hasown: 2.0.2
+
+  is-extglob@2.1.1: {}
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-number@7.0.0: {}
+
+  isexe@2.0.0: {}
+
+  jackspeak@3.4.3:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
+  jiti@1.21.7: {}
+
+  jose@6.0.11: {}
+
+  js-tokens@4.0.0: {}
+
+  lilconfig@3.1.3: {}
+
+  lines-and-columns@1.2.4: {}
+
+  lodash@4.17.21: {}
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
+  lru-cache@10.4.3: {}
+
+  lucide-react@0.454.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
+  merge2@1.4.1: {}
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  minimatch@9.0.5:
+    dependencies:
+      brace-expansion: 2.0.2
+
+  minipass@7.1.2: {}
+
+  mz@2.7.0:
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
+  nanoid@3.3.11: {}
+
+  next-themes@0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  next@14.2.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@next/env': 14.2.16
+      '@swc/helpers': 0.5.5
+      busboy: 1.6.0
+      caniuse-lite: 1.0.30001724
+      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)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 14.2.16
+      '@next/swc-darwin-x64': 14.2.16
+      '@next/swc-linux-arm64-gnu': 14.2.16
+      '@next/swc-linux-arm64-musl': 14.2.16
+      '@next/swc-linux-x64-gnu': 14.2.16
+      '@next/swc-linux-x64-musl': 14.2.16
+      '@next/swc-win32-arm64-msvc': 14.2.16
+      '@next/swc-win32-ia32-msvc': 14.2.16
+      '@next/swc-win32-x64-msvc': 14.2.16
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+
+  node-releases@2.0.19: {}
+
+  normalize-path@3.0.0: {}
+
+  normalize-range@0.1.2: {}
+
+  object-assign@4.1.1: {}
+
+  object-hash@3.0.0: {}
+
+  package-json-from-dist@1.0.1: {}
+
+  path-key@3.1.1: {}
+
+  path-parse@1.0.7: {}
+
+  path-scurry@1.11.1:
+    dependencies:
+      lru-cache: 10.4.3
+      minipass: 7.1.2
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.1: {}
+
+  pify@2.3.0: {}
+
+  pirates@4.0.7: {}
+
+  postcss-import@15.1.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.10
+
+  postcss-js@4.0.1(postcss@8.5.6):
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.5.6
+
+  postcss-load-config@4.0.2(postcss@8.5.6):
+    dependencies:
+      lilconfig: 3.1.3
+      yaml: 2.8.0
+    optionalDependencies:
+      postcss: 8.5.6
+
+  postcss-nested@6.2.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 6.1.2
+
+  postcss-selector-parser@6.1.2:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-value-parser@4.2.0: {}
+
+  postcss@8.4.31:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prop-types@15.8.1:
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+
+  queue-microtask@1.2.3: {}
+
+  react-day-picker@8.10.1(date-fns@4.1.0)(react@18.3.1):
+    dependencies:
+      date-fns: 4.1.0
+      react: 18.3.1
+
+  react-dom@18.3.1(react@18.3.1):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
+
+  react-hook-form@7.58.1(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
+  react-is@16.13.1: {}
+
+  react-is@18.3.1: {}
+
+  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-resizable-panels@2.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  react-router-dom@7.6.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-router: 7.6.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+
+  react-router@7.6.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      cookie: 1.0.2
+      react: 18.3.1
+      set-cookie-parser: 2.7.1
+    optionalDependencies:
+      react-dom: 18.3.1(react@18.3.1)
+
+  react-smooth@4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      fast-equals: 5.2.2
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+
+  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-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.27.6
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  react@18.3.1:
+    dependencies:
+      loose-envify: 1.4.0
+
+  read-cache@1.0.0:
+    dependencies:
+      pify: 2.3.0
+
+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.1
+
+  recharts-scale@0.4.5:
+    dependencies:
+      decimal.js-light: 2.5.1
+
+  recharts@2.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      clsx: 2.1.1
+      eventemitter3: 4.0.7
+      lodash: 4.17.21
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-is: 18.3.1
+      react-smooth: 4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      recharts-scale: 0.4.5
+      tiny-invariant: 1.3.3
+      victory-vendor: 36.9.2
+
+  resolve@1.22.10:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  reusify@1.1.0: {}
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  scheduler@0.23.2:
+    dependencies:
+      loose-envify: 1.4.0
+
+  set-cookie-parser@2.7.1: {}
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  signal-exit@4.1.0: {}
+
+  sonner@1.7.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  source-map-js@1.2.1: {}
+
+  streamsearch@1.1.0: {}
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.0
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.1.0:
+    dependencies:
+      ansi-regex: 6.1.0
+
+  styled-jsx@5.1.1(react@18.3.1):
+    dependencies:
+      client-only: 0.0.1
+      react: 18.3.1
+
+  sucrase@3.35.0:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.8
+      commander: 4.1.1
+      glob: 10.4.5
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.7
+      ts-interface-checker: 0.1.13
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  tailwind-merge@2.6.0: {}
+
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.17):
+    dependencies:
+      tailwindcss: 3.4.17
+
+  tailwindcss@3.4.17:
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.3
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.7
+      lilconfig: 3.1.3
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-import: 15.1.0(postcss@8.5.6)
+      postcss-js: 4.0.1(postcss@8.5.6)
+      postcss-load-config: 4.0.2(postcss@8.5.6)
+      postcss-nested: 6.2.0(postcss@8.5.6)
+      postcss-selector-parser: 6.1.2
+      resolve: 1.22.10
+      sucrase: 3.35.0
+    transitivePeerDependencies:
+      - ts-node
+
+  thenify-all@1.6.0:
+    dependencies:
+      thenify: 3.3.1
+
+  thenify@3.3.1:
+    dependencies:
+      any-promise: 1.3.0
+
+  tiny-invariant@1.3.3: {}
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  ts-interface-checker@0.1.13: {}
+
+  tslib@2.8.1: {}
+
+  typescript@5.8.3: {}
+
+  undici-types@6.21.0: {}
+
+  update-browserslist-db@1.1.3(browserslist@4.25.0):
+    dependencies:
+      browserslist: 4.25.0
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  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: {}
+
+  vaul@0.9.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-dialog': 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)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
+  victory-vendor@36.9.2:
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.9
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.4
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 5.1.2
+      strip-ansi: 7.1.0
+
+  yaml@2.8.0: {}
+
+  zod@3.25.67: {}
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..1a69fd2a4
--- /dev/null
+++ b/samples/teamspace-nextjs/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/samples/teamspace-nextjs/public/file.svg b/samples/teamspace-nextjs/public/file.svg
deleted file mode 100644
index 004145cdd..000000000
--- a/samples/teamspace-nextjs/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/public/globe.svg b/samples/teamspace-nextjs/public/globe.svg
deleted file mode 100644
index 567f17b0d..000000000
--- a/samples/teamspace-nextjs/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/public/next.svg b/samples/teamspace-nextjs/public/next.svg
deleted file mode 100644
index 5174b28c5..000000000
--- a/samples/teamspace-nextjs/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/public/vercel.svg b/samples/teamspace-nextjs/public/vercel.svg
deleted file mode 100644
index 770539603..000000000
--- a/samples/teamspace-nextjs/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/public/window.svg b/samples/teamspace-nextjs/public/window.svg
deleted file mode 100644
index b2b2a44f6..000000000
--- a/samples/teamspace-nextjs/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/tailwind.config.js b/samples/teamspace-nextjs/tailwind.config.js
new file mode 100644
index 000000000..af74afb64
--- /dev/null
+++ b/samples/teamspace-nextjs/tailwind.config.js
@@ -0,0 +1,72 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{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
index d8b93235f..5d2b7e671 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"],
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "es6"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,6 +18,7 @@
         "name": "next"
       }
     ],
+    "baseUrl": ".",
     "paths": {
       "@/*": ["./*"]
     }

From e15b55913a8bb188d37bc7c069799955c7ff721c Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 24 Jun 2025 16:29:54 +0530
Subject: [PATCH 82/96] feat(react): Add Header component with
 authentication-based navigation and actions

---
 .../src/components/{ => header}/Header.tsx           | 12 ++++++------
 .../teamspace-react/src/layouts/DashboardLayout.tsx  |  2 +-
 .../teamspace-react/src/layouts/LandingLayout.tsx    |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)
 rename samples/teamspace-react/src/components/{ => header}/Header.tsx (75%)

diff --git a/samples/teamspace-react/src/components/Header.tsx b/samples/teamspace-react/src/components/header/Header.tsx
similarity index 75%
rename from samples/teamspace-react/src/components/Header.tsx
rename to samples/teamspace-react/src/components/header/Header.tsx
index dc61c664f..ebc639f60 100644
--- a/samples/teamspace-react/src/components/Header.tsx
+++ b/samples/teamspace-react/src/components/header/Header.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 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';
+import Logo from './Logo';
+import PublicNavigation from './PublicNavigation';
+import AuthenticatedNavigation from './AuthenticatedNavigation';
+import AuthenticatedMobileMenu from './AuthenticatedMobileMenu';
+import PublicActions from './PublicActions';
+import AuthenticatedActions from './AuthenticatedActions';
 
 export default function Header() {
   return (
diff --git a/samples/teamspace-react/src/layouts/DashboardLayout.tsx b/samples/teamspace-react/src/layouts/DashboardLayout.tsx
index c79b54ace..d84ec57a6 100644
--- a/samples/teamspace-react/src/layouts/DashboardLayout.tsx
+++ b/samples/teamspace-react/src/layouts/DashboardLayout.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import {type ReactNode} from 'react';
-import Header from '../components/Header';
+import Header from '../components/Header/Header';
 
 interface DashboardLayoutProps {
   children: ReactNode;
diff --git a/samples/teamspace-react/src/layouts/LandingLayout.tsx b/samples/teamspace-react/src/layouts/LandingLayout.tsx
index 2058ce111..0f0777384 100644
--- a/samples/teamspace-react/src/layouts/LandingLayout.tsx
+++ b/samples/teamspace-react/src/layouts/LandingLayout.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import {type ReactNode} from 'react';
-import Header from '../components/Header';
+import Header from '../components/Header/Header';
 
 interface LandingLayoutProps {
   children: ReactNode;

From f0317a4fb243ed0d46387628ae7e7766a0856372 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 24 Jun 2025 16:49:31 +0530
Subject: [PATCH 83/96] chore(samples): refactor header components and improve
 profile page functionality

- Updated ProfilePage component for better state management and code readability.
- Introduced new header components: AuthenticatedActions, AuthenticatedMobileMenu, AuthenticatedNavigation, and PublicNavigation for improved structure.
- Created OrganizationSwitcher and UserDropdown components for better organization management and user actions.
- Removed legacy header component and consolidated functionality into new components.
- Added ThemeProvider component for theme management.
---
 .../teamspace-nextjs/app/dashboard/page.tsx   | 178 +++---
 samples/teamspace-nextjs/app/globals.css      |   5 +-
 samples/teamspace-nextjs/app/layout.tsx       |   2 +-
 .../app/organizations/new/page.tsx            |  98 ++--
 .../app/organizations/page.tsx                |  70 +--
 samples/teamspace-nextjs/app/page.tsx         | 514 ++++++++++--------
 samples/teamspace-nextjs/app/profile/page.tsx | 144 ++---
 .../Header/AuthenticatedActions.tsx           |  15 +
 .../Header/AuthenticatedMobileMenu.tsx        |  37 ++
 .../Header/AuthenticatedNavigation.tsx        |  31 ++
 .../components/Header/Header.tsx              |  52 ++
 .../components/Header/Logo.tsx                |  18 +
 .../Header/OrganizationSwitcher.tsx           |  72 +++
 .../components/Header/PublicActions.tsx       |  34 ++
 .../components/Header/PublicNavigation.tsx    |  58 ++
 .../components/Header/UserDropdown.tsx        |  61 +++
 .../components/Header/index.ts                |   8 +
 .../{theme-provider.tsx => ThemeProvider.tsx} |   0
 .../teamspace-nextjs/components/header.tsx    | 203 -------
 19 files changed, 916 insertions(+), 684 deletions(-)
 create mode 100644 samples/teamspace-nextjs/components/Header/AuthenticatedActions.tsx
 create mode 100644 samples/teamspace-nextjs/components/Header/AuthenticatedMobileMenu.tsx
 create mode 100644 samples/teamspace-nextjs/components/Header/AuthenticatedNavigation.tsx
 create mode 100644 samples/teamspace-nextjs/components/Header/Header.tsx
 create mode 100644 samples/teamspace-nextjs/components/Header/Logo.tsx
 create mode 100644 samples/teamspace-nextjs/components/Header/OrganizationSwitcher.tsx
 create mode 100644 samples/teamspace-nextjs/components/Header/PublicActions.tsx
 create mode 100644 samples/teamspace-nextjs/components/Header/PublicNavigation.tsx
 create mode 100644 samples/teamspace-nextjs/components/Header/UserDropdown.tsx
 create mode 100644 samples/teamspace-nextjs/components/Header/index.ts
 rename samples/teamspace-nextjs/components/{theme-provider.tsx => ThemeProvider.tsx} (100%)
 delete mode 100644 samples/teamspace-nextjs/components/header.tsx

diff --git a/samples/teamspace-nextjs/app/dashboard/page.tsx b/samples/teamspace-nextjs/app/dashboard/page.tsx
index 02a2b8436..4df81aaba 100644
--- a/samples/teamspace-nextjs/app/dashboard/page.tsx
+++ b/samples/teamspace-nextjs/app/dashboard/page.tsx
@@ -1,131 +1,131 @@
-"use client"
+'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"
+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/Header';
 
 export default function DashboardPage() {
-  const { user, currentOrg, isAuthenticated, isLoading } = useAuth()
+  const {user, currentOrg, isAuthenticated, isLoading} = useAuth();
 
   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 stats = [
     {
-      name: "Active Projects",
-      value: "12",
-      change: "+2.1%",
-      changeType: "positive" as const,
+      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,
+      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,
+      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,
+      name: 'Meetings This Week',
+      value: '7',
+      change: '-2.3%',
+      changeType: 'negative' as const,
       icon: Calendar,
     },
-  ]
+  ];
 
   const recentActivity = [
     {
       id: 1,
-      user: "Sarah Chen",
+      user: 'Sarah Chen',
       action: 'completed task "Design Review"',
-      time: "2 hours ago",
-      type: "completed",
+      time: '2 hours ago',
+      type: 'completed',
     },
     {
       id: 2,
-      user: "Mike Johnson",
+      user: 'Mike Johnson',
       action: 'created new project "Mobile App"',
-      time: "4 hours ago",
-      type: "created",
+      time: '4 hours ago',
+      type: 'created',
     },
     {
       id: 3,
-      user: "Emily Davis",
-      action: "scheduled team meeting",
-      time: "6 hours ago",
-      type: "scheduled",
+      user: 'Emily Davis',
+      action: 'scheduled team meeting',
+      time: '6 hours ago',
+      type: 'scheduled',
     },
     {
       id: 4,
-      user: "Alex Rodriguez",
+      user: 'Alex Rodriguez',
       action: 'uploaded 3 files to "Q4 Planning"',
-      time: "1 day ago",
-      type: "uploaded",
+      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",
+      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",
+      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",
+      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="max-w-7xl 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>
+          <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
+          {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">
@@ -136,16 +136,16 @@ export default function DashboardPage() {
                   <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"}`}
+                      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"}>
+                    <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>
 
@@ -158,25 +158,25 @@ export default function DashboardPage() {
             </CardHeader>
             <CardContent>
               <div className="space-y-4">
-                {recentActivity.map((activity) => (
+                {recentActivity.map(activity => (
                   <div key={activity.id} className="flex items-start space-x-3">
                     <div className="flex-shrink-0">
-                      {activity.type === "completed" && (
+                      {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" && (
+                      {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" && (
+                      {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" && (
+                      {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>
@@ -202,7 +202,7 @@ export default function DashboardPage() {
             </CardHeader>
             <CardContent>
               <div className="space-y-4">
-                {upcomingTasks.map((task) => (
+                {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>
@@ -213,8 +213,8 @@ export default function DashboardPage() {
                         <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" />}
+                      <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>
@@ -224,35 +224,7 @@ export default function DashboardPage() {
             </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 cdcbc1be0..9b186d1a6 100644
--- a/samples/teamspace-nextjs/app/globals.css
+++ b/samples/teamspace-nextjs/app/globals.css
@@ -4,7 +4,7 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
+    --background: oklch(1 0 0);
     --foreground: 222.2 84% 4.9%;
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
@@ -51,8 +51,9 @@
 
 @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 53f2e41fd..41efb0b74 100644
--- a/samples/teamspace-nextjs/app/layout.tsx
+++ b/samples/teamspace-nextjs/app/layout.tsx
@@ -2,7 +2,7 @@ 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 { ThemeProvider } from "@/components/ThemeProvider"
 import { AuthProvider } from "@/hooks/use-auth"
 
 const inter = Inter({ subsets: ["latin"] })
diff --git a/samples/teamspace-nextjs/app/organizations/new/page.tsx b/samples/teamspace-nextjs/app/organizations/new/page.tsx
index b2200aeb4..93cec573f 100644
--- a/samples/teamspace-nextjs/app/organizations/new/page.tsx
+++ b/samples/teamspace-nextjs/app/organizations/new/page.tsx
@@ -1,75 +1,75 @@
-"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 {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/Header';
+import {redirect} from 'next/navigation';
 
 export default function CreateOrganizationPage() {
-  const router = useRouter()
-  const { addOrganization, isAuthenticated, isLoading } = useAuth()
+  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)
+    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 +103,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 +142,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 +159,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 +172,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 +199,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 +207,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..70dfc39ef 100644
--- a/samples/teamspace-nextjs/app/organizations/page.tsx
+++ b/samples/teamspace-nextjs/app/organizations/page.tsx
@@ -1,54 +1,54 @@
-"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 {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/Header';
+import {redirect} from 'next/navigation';
+import {useEffect} from 'react';
 
 export default function OrganizationsPage() {
-  const { organizations, currentOrg, setCurrentOrg, isAuthenticated, isLoading } = useAuth()
+  const {organizations, currentOrg, setCurrentOrg, isAuthenticated, isLoading} = useAuth();
 
   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 +77,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 +110,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 +166,5 @@ export default function OrganizationsPage() {
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/samples/teamspace-nextjs/app/page.tsx b/samples/teamspace-nextjs/app/page.tsx
index a609578b4..3511b01a5 100644
--- a/samples/teamspace-nextjs/app/page.tsx
+++ b/samples/teamspace-nextjs/app/page.tsx
@@ -1,6 +1,3 @@
-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,
@@ -15,160 +12,178 @@ import {
   Github,
   Twitter,
   Linkedin,
-} from "lucide-react"
-import Link from "next/link"
-import Image from "next/image"
-import { Header } from "@/components/header"
+  Mail,
+} from 'lucide-react';
+import Link from 'next/link';
+import Image from 'next/image';
+import {Header} from '@/components/Header/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",
+    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.",
-    color: "text-green-600",
-    bgColor: "bg-green-50",
+    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.",
-    color: "text-purple-600",
-    bgColor: "bg-purple-50",
+    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 and compliance.",
-    color: "text-red-600",
-    bgColor: "bg-red-50",
+    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.",
-    color: "text-yellow-600",
-    bgColor: "bg-yellow-50",
+    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.",
-    color: "text-indigo-600",
-    bgColor: "bg-indigo-50",
+    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",
+    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",
+    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",
+    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",
+    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",
+    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",
+      'Unlimited team members',
+      'Advanced project management',
+      '100GB storage',
+      'Priority support',
+      'Advanced integrations',
+      'Custom workflows',
+      'Team analytics',
     ],
-    cta: "Start Free Trial",
+    cta: 'Start Free Trial',
     popular: true,
   },
   {
-    name: "Enterprise",
-    price: "Custom",
-    description: "For large organizations with custom needs",
+    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",
+      'Everything in Professional',
+      'SSO & advanced security',
+      'Unlimited storage',
+      'Dedicated support',
+      'Custom integrations',
+      'Advanced compliance',
+      'On-premise deployment',
     ],
-    cta: "Contact Sales",
+    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'},
+];
 
 export default function LandingPage() {
   return (
-    <div className="min-h-screen bg-background">
+    <div className="bg-white">
       <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">
+      <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">
-              <Badge variant="secondary" className="w-fit">
+              <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
-              </Badge>
+              </div>
 
-              <h1 className="text-4xl lg:text-6xl font-bold text-foreground leading-tight">
+              <h1 className="text-4xl lg:text-6xl font-bold text-gray-900 leading-tight">
                 Where teams
-                <span className="text-primary"> collaborate</span> and ideas come to life
+                <span className="text-blue-600"> collaborate</span> and ideas come to life
               </h1>
 
-              <p className="text-xl text-muted-foreground leading-relaxed">
+              <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">
-                <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">
+                <Link
+                  href="/auth/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>
+                </button>
               </div>
 
-              <div className="flex items-center space-x-6 text-sm text-muted-foreground">
+              <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
@@ -181,91 +196,103 @@ export default function LandingPage() {
             </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 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="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-16">
-            <Badge variant="outline" className="mb-4">
+            <div className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-blue-100 text-blue-800 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.
+            </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
+              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
+                  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-muted/50 py-20">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+      <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">
-            <Badge variant="outline" className="mb-4">
+            <div className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-blue-100 text-blue-800 mb-4">
               Testimonials
-            </Badge>
-            <h2 className="text-3xl lg:text-5xl font-bold text-foreground mb-4">What our customers say</h2>
+            </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) => (
-              <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 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">
+                  <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-gray-900">{testimonial.author}</div>
+                    <div className="text-gray-600 text-sm">
+                      {testimonial.role}, {testimonial.company}
                     </div>
                   </div>
-                </CardContent>
-              </Card>
+                </div>
+              </div>
             ))}
           </div>
         </div>
@@ -273,186 +300,235 @@ export default function LandingPage() {
 
       {/* Pricing Section */}
       <section id="pricing" className="py-20">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-16">
-            <Badge variant="outline" className="mb-4">
+            <div className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-blue-100 text-blue-800 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">
+            </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) => (
-              <Card key={index} className={`relative ${plan.popular ? "border-primary shadow-lg scale-105" : ""}`}>
+              <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 && (
-                  <Badge className="absolute -top-3 left-1/2 transform -translate-x-1/2">Most Popular</Badge>
+                  <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>
                 )}
 
-                <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 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>
-                </CardHeader>
+                </div>
 
-                <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>
+                <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>
 
-                  <Button asChild className="w-full" variant={plan.popular ? "default" : "outline"}>
-                    <Link href="/auth/signup">{plan.cta}</Link>
-                  </Button>
-                </CardContent>
-              </Card>
+                <Link
+                  href="/auth/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-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">
+      <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-primary-foreground/80 mb-8 max-w-2xl mx-auto">
+          <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">
-            <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"
+            <Link
+              href="/auth/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>
+            </button>
           </div>
         </div>
       </section>
 
       {/* Footer */}
-      <footer className="bg-muted py-16">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+      <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-primary rounded-lg flex items-center justify-center">
-                  <Users className="h-5 w-5 text-primary-foreground" />
+                <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-muted-foreground mb-6 max-w-md">
-                Empowering teams to collaborate better and achieve more together.
+              <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">
-                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
+                <Link href="#" className="text-gray-400 hover:text-white transition-colors">
                   <Twitter className="h-5 w-5" />
                 </Link>
-                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
+                <Link href="#" className="text-gray-400 hover:text-white transition-colors">
                   <Github className="h-5 w-5" />
                 </Link>
-                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
+                <Link href="#" className="text-gray-400 hover:text-white transition-colors">
                   <Linkedin className="h-5 w-5" />
                 </Link>
+                <Link href="#" className="text-gray-400 hover:text-white transition-colors">
+                  <Mail className="h-5 w-5" />
+                </Link>
               </div>
             </div>
 
+            {/* Product Links */}
             <div>
               <h4 className="font-semibold mb-4">Product</h4>
-              <ul className="space-y-2 text-muted-foreground">
+              <ul className="space-y-2 text-gray-400">
                 <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
+                  <Link href="#" className="hover:text-white transition-colors">
                     Features
                   </Link>
                 </li>
                 <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
+                  <Link href="#" className="hover:text-white transition-colors">
                     Pricing
                   </Link>
                 </li>
                 <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
+                  <Link href="#" className="hover:text-white transition-colors">
+                    Integrations
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-white transition-colors">
                     API
                   </Link>
                 </li>
+                <li>
+                  <Link href="#" className="hover:text-white transition-colors">
+                    Security
+                  </Link>
+                </li>
               </ul>
             </div>
 
+            {/* Company Links */}
             <div>
               <h4 className="font-semibold mb-4">Company</h4>
-              <ul className="space-y-2 text-muted-foreground">
+              <ul className="space-y-2 text-gray-400">
                 <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
+                  <Link href="#" className="hover:text-white transition-colors">
                     About
                   </Link>
                 </li>
                 <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
+                  <Link href="#" className="hover:text-white transition-colors">
                     Blog
                   </Link>
                 </li>
                 <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
+                  <Link href="#" className="hover:text-white transition-colors">
                     Careers
                   </Link>
                 </li>
+                <li>
+                  <Link href="#" className="hover:text-white transition-colors">
+                    Press
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-white transition-colors">
+                    Contact
+                  </Link>
+                </li>
               </ul>
             </div>
 
+            {/* Support Links */}
             <div>
               <h4 className="font-semibold mb-4">Support</h4>
-              <ul className="space-y-2 text-muted-foreground">
+              <ul className="space-y-2 text-gray-400">
                 <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
+                  <Link href="#" className="hover:text-white transition-colors">
                     Help Center
                   </Link>
                 </li>
                 <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
+                  <Link href="#" className="hover:text-white transition-colors">
                     Documentation
                   </Link>
                 </li>
                 <li>
-                  <Link href="#" className="hover:text-foreground transition-colors">
-                    Contact
+                  <Link href="#" className="hover:text-white transition-colors">
+                    Status
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-white transition-colors">
+                    Community
+                  </Link>
+                </li>
+                <li>
+                  <Link href="#" className="hover:text-white transition-colors">
+                    Contact Support
                   </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="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">
-              <Link href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
+              <Link href="#" className="text-gray-400 hover:text-white text-sm transition-colors">
                 Privacy Policy
               </Link>
-              <Link href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
+              <Link href="#" className="text-gray-400 hover:text-white text-sm transition-colors">
                 Terms of Service
               </Link>
+              <Link href="#" className="text-gray-400 hover:text-white text-sm transition-colors">
+                Cookie Policy
+              </Link>
             </div>
           </div>
         </div>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/samples/teamspace-nextjs/app/profile/page.tsx b/samples/teamspace-nextjs/app/profile/page.tsx
index 81a9d5fb2..014923315 100644
--- a/samples/teamspace-nextjs/app/profile/page.tsx
+++ b/samples/teamspace-nextjs/app/profile/page.tsx
@@ -1,103 +1,103 @@
-"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 {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/Header';
+import {redirect} from 'next/navigation';
 
 export default function ProfilePage() {
-  const { user, isAuthenticated, isLoading } = useAuth()
-  const [isEditing, setIsEditing] = useState(false)
+  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",
-  })
+    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 +111,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 +153,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 +167,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 +179,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 +192,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 +216,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 +234,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 +246,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 +262,5 @@ export default function ProfilePage() {
         </Card>
       </div>
     </div>
-  )
+  );
 }
diff --git a/samples/teamspace-nextjs/components/Header/AuthenticatedActions.tsx b/samples/teamspace-nextjs/components/Header/AuthenticatedActions.tsx
new file mode 100644
index 000000000..ea76317fb
--- /dev/null
+++ b/samples/teamspace-nextjs/components/Header/AuthenticatedActions.tsx
@@ -0,0 +1,15 @@
+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/samples/teamspace-nextjs/components/Header/AuthenticatedMobileMenu.tsx b/samples/teamspace-nextjs/components/Header/AuthenticatedMobileMenu.tsx
new file mode 100644
index 000000000..09f1a6a62
--- /dev/null
+++ b/samples/teamspace-nextjs/components/Header/AuthenticatedMobileMenu.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import {useState} from 'react';
+import {Button} from '@/components/ui/button';
+import {Menu, X} from 'lucide-react';
+import AuthenticatedNavigation from './AuthenticatedNavigation';
+
+interface AuthenticatedMobileMenuProps {
+  className?: string;
+}
+
+export default function AuthenticatedMobileMenu({className = ''}: AuthenticatedMobileMenuProps) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  return (
+    <>
+      {/* Mobile Menu Button */}
+      <Button
+        variant="ghost"
+        size="sm"
+        className={`md:hidden ${className}`}
+        onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+      >
+        {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+      </Button>
+
+      {/* Mobile Navigation */}
+      {mobileMenuOpen && (
+        <div className="md:hidden absolute top-16 left-0 right-0 bg-background border-b z-50">
+          <div className="container mx-auto px-4 py-4 space-y-4">
+            <AuthenticatedNavigation className="flex flex-col space-y-4 space-x-0" />
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/samples/teamspace-nextjs/components/Header/AuthenticatedNavigation.tsx b/samples/teamspace-nextjs/components/Header/AuthenticatedNavigation.tsx
new file mode 100644
index 000000000..716906e56
--- /dev/null
+++ b/samples/teamspace-nextjs/components/Header/AuthenticatedNavigation.tsx
@@ -0,0 +1,31 @@
+import Link from 'next/link';
+
+interface AuthenticatedNavigationProps {
+  className?: string;
+}
+
+export default function AuthenticatedNavigation({className = ''}: AuthenticatedNavigationProps) {
+  const navigationItems = [
+    {label: 'Dashboard', href: '/dashboard'},
+    {label: 'Projects', href: '/projects'},
+    {label: 'Teams', href: '/teams'},
+  ];
+
+  const isMobileMenu = className.includes('flex-col');
+
+  return (
+    <nav className={`${isMobileMenu ? 'flex flex-col space-y-4' : 'hidden md:flex space-x-6'} ${className}`}>
+      {navigationItems.map(item => (
+        <Link
+          key={item.label}
+          href={item.href}
+          className={`text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium transition-colors ${
+            isMobileMenu ? 'block' : ''
+          }`}
+        >
+          {item.label}
+        </Link>
+      ))}
+    </nav>
+  );
+}
diff --git a/samples/teamspace-nextjs/components/Header/Header.tsx b/samples/teamspace-nextjs/components/Header/Header.tsx
new file mode 100644
index 000000000..ee7135bd3
--- /dev/null
+++ b/samples/teamspace-nextjs/components/Header/Header.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import {useAuth} from '@/hooks/use-auth';
+import Logo from './Logo';
+import PublicNavigation from './PublicNavigation';
+import AuthenticatedNavigation from './AuthenticatedNavigation';
+import PublicActions from './PublicActions';
+import AuthenticatedActions from './AuthenticatedActions';
+
+export function Header() {
+  const {isAuthenticated} = useAuth();
+
+  if (!isAuthenticated) {
+    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">
+              <Logo to="/" />
+              <PublicNavigation />
+            </div>
+
+            {/* Right side - Actions */}
+            <div className="flex items-center space-x-2">
+              <PublicActions showMobileActions={false} />
+            </div>
+          </div>
+        </div>
+      </header>
+    );
+  }
+
+  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">
+            <Logo to="/dashboard" />
+            <AuthenticatedNavigation />
+          </div>
+
+          {/* Right side - Actions */}
+          <div className="flex items-center space-x-2">
+            <AuthenticatedActions />
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/samples/teamspace-nextjs/components/Header/Logo.tsx b/samples/teamspace-nextjs/components/Header/Logo.tsx
new file mode 100644
index 000000000..6f7221956
--- /dev/null
+++ b/samples/teamspace-nextjs/components/Header/Logo.tsx
@@ -0,0 +1,18 @@
+import Link from 'next/link';
+import {Users} from 'lucide-react';
+
+interface LogoProps {
+  to?: string;
+  className?: string;
+}
+
+export default function Logo({to = '/', className = ''}: LogoProps) {
+  return (
+    <Link href={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/samples/teamspace-nextjs/components/Header/OrganizationSwitcher.tsx b/samples/teamspace-nextjs/components/Header/OrganizationSwitcher.tsx
new file mode 100644
index 000000000..4369baf64
--- /dev/null
+++ b/samples/teamspace-nextjs/components/Header/OrganizationSwitcher.tsx
@@ -0,0 +1,72 @@
+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 {ChevronDown, Check, Building2, Plus} from 'lucide-react';
+import {useAuth} from '@/hooks/use-auth';
+
+interface OrganizationSwitcherProps {
+  className?: string;
+}
+
+export default function OrganizationSwitcher({className = ''}: OrganizationSwitcherProps) {
+  const {currentOrg, organizations, setCurrentOrg} = useAuth();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className={`flex items-center space-x-2 ${className}`}>
+          <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>
+  );
+}
diff --git a/samples/teamspace-nextjs/components/Header/PublicActions.tsx b/samples/teamspace-nextjs/components/Header/PublicActions.tsx
new file mode 100644
index 000000000..6cb0fd381
--- /dev/null
+++ b/samples/teamspace-nextjs/components/Header/PublicActions.tsx
@@ -0,0 +1,34 @@
+import Link from 'next/link';
+import {Button} from '@/components/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">
+        <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>
+    );
+  }
+
+  return (
+    <div className={`hidden md:flex items-center space-x-4 ${className}`}>
+      <Button variant="ghost" asChild>
+        <Link href="/auth/signin">Sign In</Link>
+      </Button>
+      <Button asChild>
+        <Link href="/auth/signup">Get Started</Link>
+      </Button>
+    </div>
+  );
+}
diff --git a/samples/teamspace-nextjs/components/Header/PublicNavigation.tsx b/samples/teamspace-nextjs/components/Header/PublicNavigation.tsx
new file mode 100644
index 000000000..f7b59ccb8
--- /dev/null
+++ b/samples/teamspace-nextjs/components/Header/PublicNavigation.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import {useState} from 'react';
+import Link from 'next/link';
+import {Button} from '@/components/ui/button';
+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'},
+  ];
+
+  return (
+    <>
+      {/* Desktop Navigation */}
+      <nav className={`hidden md:flex space-x-8 ${className}`}>
+        {navigationItems.map(item => (
+          <Link key={item.label} href={item.href} className="text-gray-700 hover:text-blue-600 transition-colors">
+            {item.label}
+          </Link>
+        ))}
+      </nav>
+
+      {/* Mobile Menu Button */}
+      <Button variant="ghost" size="sm" 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 => (
+              <Link
+                key={item.label}
+                href={item.href}
+                className="block text-gray-700 hover:text-blue-600 transition-colors"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                {item.label}
+              </Link>
+            ))}
+            <PublicActions showMobileActions={true} />
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/samples/teamspace-nextjs/components/Header/UserDropdown.tsx b/samples/teamspace-nextjs/components/Header/UserDropdown.tsx
new file mode 100644
index 000000000..f9011fcac
--- /dev/null
+++ b/samples/teamspace-nextjs/components/Header/UserDropdown.tsx
@@ -0,0 +1,61 @@
+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 {ChevronDown, Settings, User, LogOut} from 'lucide-react';
+import {useAuth} from '@/hooks/use-auth';
+
+interface UserDropdownProps {
+  className?: string;
+}
+
+export default function UserDropdown({className = ''}: UserDropdownProps) {
+  const {user, signOut} = useAuth();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className={`flex items-center space-x-2 p-2 ${className}`}>
+          <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>
+  );
+}
diff --git a/samples/teamspace-nextjs/components/Header/index.ts b/samples/teamspace-nextjs/components/Header/index.ts
new file mode 100644
index 000000000..2c64880a2
--- /dev/null
+++ b/samples/teamspace-nextjs/components/Header/index.ts
@@ -0,0 +1,8 @@
+export {default as Logo} from './Logo';
+export {default as PublicNavigation} from './PublicNavigation';
+export {default as AuthenticatedNavigation} from './AuthenticatedNavigation';
+export {default as PublicActions} from './PublicActions';
+export {default as AuthenticatedActions} from './AuthenticatedActions';
+export {default as AuthenticatedMobileMenu} from './AuthenticatedMobileMenu';
+export {default as OrganizationSwitcher} from './OrganizationSwitcher';
+export {default as UserDropdown} from './UserDropdown';
diff --git a/samples/teamspace-nextjs/components/theme-provider.tsx b/samples/teamspace-nextjs/components/ThemeProvider.tsx
similarity index 100%
rename from samples/teamspace-nextjs/components/theme-provider.tsx
rename to samples/teamspace-nextjs/components/ThemeProvider.tsx
diff --git a/samples/teamspace-nextjs/components/header.tsx b/samples/teamspace-nextjs/components/header.tsx
deleted file mode 100644
index 31d93e996..000000000
--- a/samples/teamspace-nextjs/components/header.tsx
+++ /dev/null
@@ -1,203 +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"
-import { useAuth } from "@/hooks/use-auth"
-
-export function Header() {
-  const { user, currentOrg, organizations, isAuthenticated, setCurrentOrg, signOut } = useAuth()
-  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>
-  )
-}

From 53f608c601385dba1be0484037ecbc32023a2624 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 24 Jun 2025 23:32:05 +0530
Subject: [PATCH 84/96] feat(react): Enhance sign-in flow with embedded support
 and update request configurations

---
 .../__legacy__/clients/main-thread-client.ts  |  2 +
 .../src/AsgardeoJavaScriptClient.ts           | 14 ++-
 .../src/api/executeEmbeddedSignInFlow.ts      | 19 +---
 .../src/api/executeEmbeddedSignUpFlow.ts      | 26 +-----
 .../src/api/initializeEmbeddedSignInFlow.ts   | 72 +--------------
 packages/javascript/src/index.ts              |  1 +
 packages/javascript/src/models/client.ts      | 20 ++++-
 .../javascript/src/models/embedded-flow.ts    |  6 ++
 packages/nextjs/src/AsgardeoNextClient.ts     | 89 +++++++++++++------
 packages/react/src/AsgardeoReactClient.ts     | 24 +++--
 10 files changed, 127 insertions(+), 146 deletions(-)

diff --git a/packages/browser/src/__legacy__/clients/main-thread-client.ts b/packages/browser/src/__legacy__/clients/main-thread-client.ts
index e5cc9d201..294256204 100755
--- a/packages/browser/src/__legacy__/clients/main-thread-client.ts
+++ b/packages/browser/src/__legacy__/clients/main-thread-client.ts
@@ -231,6 +231,7 @@ export const MainThreadClient = async (
         _dataLayer.setTemporaryDataParameter(TOKEN_REQUEST_CONFIG_KEY, JSON.stringify(tokenRequestConfig));
       }
 
+      // FIXME: This is a workaround to handle the `response_mode` as `direct` in the sign-in config.
       if (signInConfig && signInConfig['response_mode'] === 'direct') {
         const authorizeUrl: URL = new URL(url);
 
@@ -239,6 +240,7 @@ export const MainThreadClient = async (
           payload: Object.fromEntries(authorizeUrl.searchParams.entries()),
         });
       }
+
       location.href = url;
 
       await SPAUtils.waitTillPageRedirect();
diff --git a/packages/javascript/src/AsgardeoJavaScriptClient.ts b/packages/javascript/src/AsgardeoJavaScriptClient.ts
index dd8f21aab..653fae7b6 100644
--- a/packages/javascript/src/AsgardeoJavaScriptClient.ts
+++ b/packages/javascript/src/AsgardeoJavaScriptClient.ts
@@ -19,6 +19,7 @@
 import {AsgardeoClient, SignInOptions, SignOutOptions, SignUpOptions} from './models/client';
 import {Config} from './models/config';
 import {EmbeddedFlowExecuteRequestPayload, EmbeddedFlowExecuteResponse} from './models/embedded-flow';
+import {EmbeddedSignInFlowHandleRequestPayload} from './models/embedded-signin-flow';
 import {Organization} from './models/organization';
 import {User, UserProfile} from './models/user';
 
@@ -45,7 +46,18 @@ abstract class AsgardeoJavaScriptClient<T = Config> implements AsgardeoClient<T>
 
   abstract isSignedIn(): Promise<boolean>;
 
-  abstract signIn(options?: SignInOptions): Promise<User>;
+  abstract signIn(
+    options?: SignInOptions,
+    sessionId?: string,
+    onSignInSuccess?: (afterSignInUrl: string) => void,
+  ): Promise<User>;
+  abstract signIn(
+    payload: EmbeddedSignInFlowHandleRequestPayload,
+    request: Request,
+    sessionId?: string,
+    onSignInSuccess?: (afterSignInUrl: string) => void,
+  ): Promise<User>;
+
   abstract signOut(options?: SignOutOptions, afterSignOut?: (redirectUrl: string) => void): Promise<string>;
   abstract signOut(
     options?: SignOutOptions,
diff --git a/packages/javascript/src/api/executeEmbeddedSignInFlow.ts b/packages/javascript/src/api/executeEmbeddedSignInFlow.ts
index 553615fd8..3d8bd1b83 100644
--- a/packages/javascript/src/api/executeEmbeddedSignInFlow.ts
+++ b/packages/javascript/src/api/executeEmbeddedSignInFlow.ts
@@ -17,28 +17,15 @@
  */
 
 import AsgardeoAPIError from '../errors/AsgardeoAPIError';
-import {EmbeddedSignInFlowHandleRequestPayload, EmbeddedSignInFlowHandleResponse} from '../models/embedded-signin-flow';
-
-/**
- * Request configuration for the authorize function.
- */
-export interface AuthorizeRequestConfig extends Partial<Request> {
-  /**
-   * The base URL of the Asgardeo server.
-   */
-  baseUrl?: string;
-  /**
-   * The authorization request payload.
-   */
-  payload: EmbeddedSignInFlowHandleRequestPayload;
-}
+import {EmbeddedFlowExecuteRequestConfig} from '../models/embedded-flow';
+import {EmbeddedSignInFlowHandleResponse} from '../models/embedded-signin-flow';
 
 const executeEmbeddedSignInFlow = async ({
   url,
   baseUrl,
   payload,
   ...requestConfig
-}: AuthorizeRequestConfig): Promise<EmbeddedSignInFlowHandleResponse> => {
+}: EmbeddedFlowExecuteRequestConfig): Promise<EmbeddedSignInFlowHandleResponse> => {
   if (!payload) {
     throw new AsgardeoAPIError(
       'Authorization payload is required',
diff --git a/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts b/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
index 4c25a9dfc..8e2581e7e 100644
--- a/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
+++ b/packages/javascript/src/api/executeEmbeddedSignUpFlow.ts
@@ -17,29 +17,7 @@
  */
 
 import AsgardeoAPIError from '../errors/AsgardeoAPIError';
-import {
-  EmbeddedFlowType,
-  EmbeddedFlowExecuteResponse,
-  EmbeddedFlowExecuteRequestPayload,
-} from '../models/embedded-flow';
-
-/**
- * Request configuration for the embedded signup flow execution function.
- */
-export interface EmbeddedSignUpFlowExecuteRequestConfig extends Partial<Request> {
-  /**
-   * The base URL of the Asgardeo server.
-   */
-  baseUrl?: string;
-  /**
-   * The embedded signup flow execution request payload.
-   */
-  payload?: EmbeddedFlowExecuteRequestPayload;
-  /**
-   *  The URL to which the request should be sent.
-   */
-  url?: string;
-}
+import {EmbeddedFlowType, EmbeddedFlowExecuteResponse, EmbeddedFlowExecuteRequestConfig} from '../models/embedded-flow';
 
 /**
  * Executes an embedded signup flow by sending a request to the specified flow execution endpoint.
@@ -70,7 +48,7 @@ const executeEmbeddedSignUpFlow = async ({
   baseUrl,
   payload,
   ...requestConfig
-}: EmbeddedSignUpFlowExecuteRequestConfig): Promise<EmbeddedFlowExecuteResponse> => {
+}: EmbeddedFlowExecuteRequestConfig): Promise<EmbeddedFlowExecuteResponse> => {
   if (!baseUrl && !url) {
     throw new AsgardeoAPIError(
       'Embedded SignUp flow execution failed: Base URL or URL is not provided.',
diff --git a/packages/javascript/src/api/initializeEmbeddedSignInFlow.ts b/packages/javascript/src/api/initializeEmbeddedSignInFlow.ts
index 11d496373..b0ed76232 100644
--- a/packages/javascript/src/api/initializeEmbeddedSignInFlow.ts
+++ b/packages/javascript/src/api/initializeEmbeddedSignInFlow.ts
@@ -17,77 +17,9 @@
  */
 
 import AsgardeoAPIError from '../errors/AsgardeoAPIError';
+import {EmbeddedFlowExecuteRequestConfig} from '../models/embedded-flow';
 import {EmbeddedSignInFlowInitiateResponse} from '../models/embedded-signin-flow';
 
-/**
- * Represents the authorization request payload that can be sent to the authorization endpoint.
- */
-export interface AuthorizationRequest {
-  /**
-   * Additional authorization parameters.
-   */
-  [key: string]: any;
-  /**
-   * The client identifier.
-   */
-  client_id?: string;
-  /**
-   * PKCE code challenge.
-   */
-  code_challenge?: string;
-  /**
-   * PKCE code challenge method.
-   */
-  code_challenge_method?: string;
-  /**
-   * The allowable elapsed time in seconds since the last time the End-User was actively authenticated.
-   */
-  max_age?: number;
-  /**
-   * String value used to associate a Client session with an ID Token.
-   */
-  nonce?: string;
-  /**
-   * Space delimited, case sensitive list of ASCII string values.
-   */
-  prompt?: string;
-  /**
-   * The redirection URI after authorization.
-   */
-  redirect_uri?: string;
-  /**
-   * How the authorization response should be returned.
-   */
-  response_mode?: string;
-  /**
-   * The response type (e.g., 'code', 'token', 'id_token').
-   */
-  response_type?: string;
-  /**
-   * The scope of the access request.
-   */
-  scope?: string;
-  /**
-   * An unguessable random string to prevent CSRF attacks.
-   */
-  state?: string;
-}
-
-/**
- * Request configuration for the authorize function.
- */
-export interface AuthorizeRequestConfig extends Partial<Request> {
-  /**
-   * The base URL of the Asgardeo server.
-   */
-  baseUrl?: string;
-  /**
-   * The authorization request payload.
-   */
-  payload: AuthorizationRequest;
-  url?: string;
-}
-
 /**
  * Sends an authorization request to the specified OAuth2/OIDC authorization endpoint.
  *
@@ -123,7 +55,7 @@ const initializeEmbeddedSignInFlow = async ({
   baseUrl,
   payload,
   ...requestConfig
-}: AuthorizeRequestConfig): Promise<EmbeddedSignInFlowInitiateResponse> => {
+}: EmbeddedFlowExecuteRequestConfig): Promise<EmbeddedSignInFlowInitiateResponse> => {
   if (!payload) {
     throw new AsgardeoAPIError(
       'Authorization payload is required',
diff --git a/packages/javascript/src/index.ts b/packages/javascript/src/index.ts
index 7e51d8208..2f810d594 100644
--- a/packages/javascript/src/index.ts
+++ b/packages/javascript/src/index.ts
@@ -58,6 +58,7 @@ export {
   EmbeddedFlowComponent,
   EmbeddedFlowComponentType,
   EmbeddedFlowExecuteRequestPayload,
+  EmbeddedFlowExecuteRequestConfig,
 } from './models/embedded-flow';
 export {FlowMode} from './models/flow';
 export {AsgardeoClient, SignInOptions, SignOutOptions, SignUpOptions} from './models/client';
diff --git a/packages/javascript/src/models/client.ts b/packages/javascript/src/models/client.ts
index e657683c3..a8bd52f58 100644
--- a/packages/javascript/src/models/client.ts
+++ b/packages/javascript/src/models/client.ts
@@ -16,7 +16,8 @@
  * under the License.
  */
 
-import {EmbeddedFlowExecuteRequestPayload, EmbeddedFlowExecuteResponse} from './embedded-flow';
+import {EmbeddedFlowExecuteRequestConfig, EmbeddedFlowExecuteRequestPayload, EmbeddedFlowExecuteResponse} from './embedded-flow';
+import {EmbeddedSignInFlowHandleRequestPayload} from './embedded-signin-flow';
 import {Organization} from './organization';
 import {User, UserProfile} from './user';
 
@@ -98,18 +99,31 @@ export interface AsgardeoClient<T> {
    * Initiates the sign-in process for the user.
    *
    * @param options - Optional sign-in options like additional parameters to be sent in the authorize request, etc.
+   * @param sessionId - Optional session ID to be used for sign-in.
+   * @param onSignInSuccess - Callback function to be executed upon successful sign-in.
    * @returns Promise resolving the user upon successful sign in.
    */
-  signIn(options?: SignInOptions): Promise<User>;
+  signIn(
+    options?: SignInOptions,
+    sessionId?: string,
+    onSignInSuccess?: (afterSignInUrl: string) => void,
+  ): Promise<User>;
 
   /**
    * Initiates an embedded (App-Native) sign-in flow for the user.
    *
    * @param payload - The payload containing the necessary information to execute the embedded sign-in flow.
    * @param request - The request object containing URL and parameters for the sign-in flow HTTP request.
+   * @param sessionId - Optional session ID to be used for sign-in.
+   * @param onSignInSuccess - Callback function to be executed upon successful sign-in.
    * @returns A promise that resolves to an EmbeddedFlowExecuteResponse containing the flow execution details.
    */
-  signIn(payload: SignInOptions, request: globalThis.Request): Promise<User>;
+  signIn(
+    payload: EmbeddedSignInFlowHandleRequestPayload,
+    request: EmbeddedFlowExecuteRequestConfig<EmbeddedSignInFlowHandleRequestPayload>,
+    sessionId?: string,
+    onSignInSuccess?: (afterSignInUrl: string) => void,
+  ): Promise<User>;
 
   /**
    * Signs out the currently signed-in user.
diff --git a/packages/javascript/src/models/embedded-flow.ts b/packages/javascript/src/models/embedded-flow.ts
index 64d67a9dc..68846b19e 100644
--- a/packages/javascript/src/models/embedded-flow.ts
+++ b/packages/javascript/src/models/embedded-flow.ts
@@ -67,3 +67,9 @@ export enum EmbeddedFlowComponentType {
   Select = 'SELECT',
   Typography = 'TYPOGRAPHY',
 }
+
+export interface EmbeddedFlowExecuteRequestConfig<T = any> extends Partial<Request> {
+  baseUrl?: string;
+  payload?: T;
+  url?: string;
+}
diff --git a/packages/nextjs/src/AsgardeoNextClient.ts b/packages/nextjs/src/AsgardeoNextClient.ts
index e48a5b3ac..2a3c48a31 100644
--- a/packages/nextjs/src/AsgardeoNextClient.ts
+++ b/packages/nextjs/src/AsgardeoNextClient.ts
@@ -29,6 +29,9 @@ import {
   UserProfile,
   initializeEmbeddedSignInFlow,
   Organization,
+  EmbeddedSignInFlowHandleRequestPayload,
+  executeEmbeddedSignInFlow,
+  EmbeddedFlowExecuteRequestConfig,
 } from '@asgardeo/node';
 import {NextRequest, NextResponse} from 'next/server';
 import InternalAuthAPIRoutesConfig from './configs/InternalAuthAPIRoutesConfig';
@@ -97,27 +100,51 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
     return this.asgardeo.isSignedIn(sessionId as string);
   }
 
-  override async signIn(
+  override signIn(
     options?: SignInOptions,
     sessionId?: string,
-    beforeSignIn?: (redirectUrl: string) => NextResponse,
-    authorizationCode?: string,
-    sessionState?: string,
-    state?: string,
-  ): Promise<User> {
-    let resolvedSessionId: string = sessionId || ((await getSessionId()) as string);
+    onSignInSuccess?: (afterSignInUrl: string) => void,
+  ): Promise<User>;
+  override signIn(
+    payload: EmbeddedSignInFlowHandleRequestPayload,
+    request: EmbeddedFlowExecuteRequestConfig,
+    sessionId?: string,
+    onSignInSuccess?: (afterSignInUrl: string) => void,
+  ): Promise<User>;
+  override async signIn(...args: any[]): Promise<User> {
+    const arg1 = args[0];
+    const arg2 = args[1];
+    const arg3 = args[2];
+    const arg4 = args[3];
+
+    let resolvedSessionId: string = arg3 || ((await getSessionId()) as string);
 
     if (!resolvedSessionId) {
-      resolvedSessionId = await setSessionId(sessionId);
+      resolvedSessionId = await setSessionId(arg3);
+    }
+
+    if (typeof arg1 === 'object' && 'flowId' in arg1 && typeof arg1 === 'object' && 'url' in arg2) {
+      if (arg1.flowId === '') {
+        return initializeEmbeddedSignInFlow({
+          payload: arg1,
+          url: arg2.url,
+        });
+      }
+
+      return executeEmbeddedSignInFlow({
+        payload: arg1,
+        url: arg2.url,
+      });
     }
 
     return this.asgardeo.signIn(
-      beforeSignIn as any,
+      arg4,
       resolvedSessionId,
-      authorizationCode,
-      sessionState,
-      state,
-    ) as unknown as User;
+      undefined,
+      undefined,
+      undefined,
+      arg1 as any,
+    ) as unknown as Promise<User>;
   }
 
   override signOut(options?: SignOutOptions, afterSignOut?: (redirectUrl: string) => void): Promise<string>;
@@ -160,13 +187,29 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
       const signInUrl: URL = new URL(await this.asgardeo.getSignInUrl({response_mode: 'direct'}, userId));
       const {pathname, origin, searchParams} = signInUrl;
 
+      console.log('[AsgardeoNextClient] Sign-in URL:', signInUrl.toString());
+      console.log('[AsgardeoNextClient] Search Params:', Object.fromEntries(searchParams.entries()));
       try {
-        response = await initializeEmbeddedSignInFlow({
-          url: `${origin}${pathname}`,
-          payload: Object.fromEntries(searchParams.entries()),
-        });
+        await this.signIn(
+          {
+            flowId: '',
+            selectedAuthenticator: {
+              authenticatorId: '',
+              params: {},
+            },
+          },
+          {
+            url: `${origin}${pathname}`,
+            payload: Object.fromEntries(searchParams.entries()),
+          },
+        );
       } catch (error) {
-        throw new Error(`Failed to initialize application native authentication`);
+        throw new AsgardeoRuntimeError(
+          `Failed to initialize embedded sign-in flow.: ${error?.toString()}`,
+          'react-AsgardeoReactClient-InitializationError-001',
+          'react',
+          'An error occurred while initializing the embedded sign-in flow.',
+        );
       }
 
       return NextResponse.json(response);
@@ -175,16 +218,8 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
     if ((method === 'GET' && sanitizedPathname === InternalAuthAPIRoutesConfig.signIn) || searchParams.get('code')) {
       let response: NextResponse | undefined;
 
-      await this.signIn(
-        {},
-        undefined,
-        (redirectUrl: string) => (response = NextResponse.redirect(redirectUrl, 302)),
-        searchParams.get('code') as string,
-        searchParams.get('session_state') as string,
-        searchParams.get('state') as string,
-      );
+      await this.signIn();
 
-      // If we already redirected via the callback, return that
       if (response) {
         return response;
       }
diff --git a/packages/react/src/AsgardeoReactClient.ts b/packages/react/src/AsgardeoReactClient.ts
index 3f0438137..5e8e60be0 100644
--- a/packages/react/src/AsgardeoReactClient.ts
+++ b/packages/react/src/AsgardeoReactClient.ts
@@ -34,6 +34,7 @@ import {
   executeEmbeddedSignInFlow,
   Organization,
   IdToken,
+  EmbeddedFlowExecuteRequestConfig,
 } from '@asgardeo/browser';
 import AuthAPI from './__temp__/api';
 import getMeOrganizations from './api/scim2/getMeOrganizations';
@@ -157,7 +158,11 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
         signInRequired: true,
       };
 
-      await this.asgardeo.exchangeToken(exchangeConfig, (user: User) => {}, () => null);
+      await this.asgardeo.exchangeToken(
+        exchangeConfig,
+        (user: User) => {},
+        () => null,
+      );
     } catch (error) {
       throw new AsgardeoRuntimeError(
         `Failed to switch organization: ${error.message || error}`,
@@ -180,16 +185,25 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
     return this.asgardeo.isSignedIn();
   }
 
-  override signIn(options?: SignInOptions): Promise<User>;
-  override signIn(payload: EmbeddedSignInFlowHandleRequestPayload, request: Request): Promise<User>;
+  override signIn(
+    options?: SignInOptions,
+    sessionId?: string,
+    onSignInSuccess?: (afterSignInUrl: string) => void,
+  ): Promise<User>;
+  override signIn(
+    payload: EmbeddedSignInFlowHandleRequestPayload,
+    request: EmbeddedFlowExecuteRequestConfig,
+    sessionId?: string,
+    onSignInSuccess?: (afterSignInUrl: string) => void,
+  ): Promise<User>;
   override async signIn(...args: any[]): Promise<User> {
     const arg1 = args[0];
     const arg2 = args[1];
 
-    if (typeof arg1 === 'object' && 'flowId' in arg1 && typeof arg1 === 'object' && 'url' in arg2) {
+    if (typeof arg1 === 'object' && 'flowId' in arg1 && typeof arg2 === 'object' && 'url' in arg2) {
       return executeEmbeddedSignInFlow({
         payload: arg1,
-        url: (arg2 as Request).url,
+        url: arg2.url,
       });
     }
 

From b20fe98e1fc793e84d85b64bc52a9876f589fd84 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 25 Jun 2025 00:29:02 +0530
Subject: [PATCH 85/96] feat(auth): Add clientSecret to authorization
 parameters and update AsgardeoNextClient flow handling

---
 packages/javascript/src/__legacy__/client.ts              | 1 +
 .../javascript/src/utils/getAuthorizeRequestUrlParams.ts  | 8 +++++++-
 packages/nextjs/src/AsgardeoNextClient.ts                 | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 6205f6bb0..84331d41d 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -241,6 +241,7 @@ export class AsgardeoAuthClient<T> {
         {
           redirectUri: configData.afterSignInUrl,
           clientId: configData.clientId,
+          clientSecret: configData.clientSecret,
           scopes: processOpenIDScopes(configData.scopes),
           responseMode: configData.responseMode,
           codeChallengeMethod: PKCEConstants.DEFAULT_CODE_CHALLENGE_METHOD,
diff --git a/packages/javascript/src/utils/getAuthorizeRequestUrlParams.ts b/packages/javascript/src/utils/getAuthorizeRequestUrlParams.ts
index f588467c7..c7d69e5c2 100644
--- a/packages/javascript/src/utils/getAuthorizeRequestUrlParams.ts
+++ b/packages/javascript/src/utils/getAuthorizeRequestUrlParams.ts
@@ -55,6 +55,7 @@ const getAuthorizeRequestUrlParams = (
   options: {
     redirectUri: string;
     clientId: string;
+    clientSecret?: string;
     scopes?: string;
     responseMode?: string;
     codeChallenge?: string;
@@ -64,7 +65,8 @@ const getAuthorizeRequestUrlParams = (
   pkceOptions: {key: string},
   customParams: Record<string, string | number | boolean>,
 ): Map<string, string> => {
-  const {redirectUri, clientId, scopes, responseMode, codeChallenge, codeChallengeMethod, prompt} = options;
+  const {redirectUri, clientId, clientSecret, scopes, responseMode, codeChallenge, codeChallengeMethod, prompt} =
+    options;
   const authorizeRequestParams: Map<string, string> = new Map<string, string>();
 
   authorizeRequestParams.set('response_type', 'code');
@@ -77,6 +79,10 @@ const getAuthorizeRequestUrlParams = (
     authorizeRequestParams.set('response_mode', responseMode as string);
   }
 
+  if (clientSecret) {
+    authorizeRequestParams.set('client_secret', clientSecret as string);
+  }
+
   const pkceKey: string = pkceOptions?.key;
 
   if (codeChallenge) {
diff --git a/packages/nextjs/src/AsgardeoNextClient.ts b/packages/nextjs/src/AsgardeoNextClient.ts
index 2a3c48a31..a0dbcf659 100644
--- a/packages/nextjs/src/AsgardeoNextClient.ts
+++ b/packages/nextjs/src/AsgardeoNextClient.ts
@@ -126,7 +126,7 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
     if (typeof arg1 === 'object' && 'flowId' in arg1 && typeof arg1 === 'object' && 'url' in arg2) {
       if (arg1.flowId === '') {
         return initializeEmbeddedSignInFlow({
-          payload: arg1,
+          payload: arg2.payload,
           url: arg2.url,
         });
       }

From 90b43c4bfedc7d5be91b5c8de571450567d62da2 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 25 Jun 2025 00:58:31 +0530
Subject: [PATCH 86/96] feat(nextjs): Add logging for configuration data and
 embedded sign-in flow execution

---
 packages/javascript/src/__legacy__/client.ts  |   2 +
 .../src/api/initializeEmbeddedSignInFlow.ts   |   2 +
 packages/nextjs/src/AsgardeoNextClient.ts     | 100 +++++++++++-------
 3 files changed, 64 insertions(+), 40 deletions(-)

diff --git a/packages/javascript/src/__legacy__/client.ts b/packages/javascript/src/__legacy__/client.ts
index 84331d41d..42f3975f0 100644
--- a/packages/javascript/src/__legacy__/client.ts
+++ b/packages/javascript/src/__legacy__/client.ts
@@ -237,6 +237,8 @@ export class AsgardeoAuthClient<T> {
         await this._storageManager.setTemporaryDataParameter(pkceKey, codeVerifier, userId);
       }
 
+      console.log('[AsgardeoAuthClient] configData:', configData);
+
       const authorizeRequestParams: Map<string, string> = getAuthorizeRequestUrlParams(
         {
           redirectUri: configData.afterSignInUrl,
diff --git a/packages/javascript/src/api/initializeEmbeddedSignInFlow.ts b/packages/javascript/src/api/initializeEmbeddedSignInFlow.ts
index b0ed76232..7e42c7c01 100644
--- a/packages/javascript/src/api/initializeEmbeddedSignInFlow.ts
+++ b/packages/javascript/src/api/initializeEmbeddedSignInFlow.ts
@@ -73,6 +73,8 @@ const initializeEmbeddedSignInFlow = async ({
     }
   });
 
+  console.log('Executing embedded sign-in flow with payload:', url, searchParams.toString());
+
   const {headers: customHeaders, ...otherConfig} = requestConfig;
   const response: Response = await fetch(url ?? `${baseUrl}/oauth2/authorize`, {
     method: requestConfig.method || 'POST',
diff --git a/packages/nextjs/src/AsgardeoNextClient.ts b/packages/nextjs/src/AsgardeoNextClient.ts
index a0dbcf659..b12083fa1 100644
--- a/packages/nextjs/src/AsgardeoNextClient.ts
+++ b/packages/nextjs/src/AsgardeoNextClient.ts
@@ -32,6 +32,8 @@ import {
   EmbeddedSignInFlowHandleRequestPayload,
   executeEmbeddedSignInFlow,
   EmbeddedFlowExecuteRequestConfig,
+  CookieConfig,
+  generateSessionId,
 } from '@asgardeo/node';
 import {NextRequest, NextResponse} from 'next/server';
 import InternalAuthAPIRoutesConfig from './configs/InternalAuthAPIRoutesConfig';
@@ -117,12 +119,6 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
     const arg3 = args[2];
     const arg4 = args[3];
 
-    let resolvedSessionId: string = arg3 || ((await getSessionId()) as string);
-
-    if (!resolvedSessionId) {
-      resolvedSessionId = await setSessionId(arg3);
-    }
-
     if (typeof arg1 === 'object' && 'flowId' in arg1 && typeof arg1 === 'object' && 'url' in arg2) {
       if (arg1.flowId === '') {
         return initializeEmbeddedSignInFlow({
@@ -139,7 +135,7 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
 
     return this.asgardeo.signIn(
       arg4,
-      resolvedSessionId,
+      arg3,
       undefined,
       undefined,
       undefined,
@@ -179,18 +175,24 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
     const sanitizedPathname: string = removeTrailingSlash(pathname);
     const {method} = req;
 
-    if ((method === 'POST' && sanitizedPathname === InternalAuthAPIRoutesConfig.signIn) || searchParams.get('code')) {
-      let response;
+    // Handle POST sign-in request
+    if (method === 'POST' && sanitizedPathname === InternalAuthAPIRoutesConfig.signIn) {
+      try {
+        // Get session ID from cookies directly since we're in middleware context
+        let userId: string | undefined = req.cookies.get(CookieConfig.SESSION_COOKIE_NAME)?.value;
 
-      const userId: string | undefined = await getSessionId();
+        // Generate session ID if not present
+        if (!userId) {
+          userId = generateSessionId();
+        }
 
-      const signInUrl: URL = new URL(await this.asgardeo.getSignInUrl({response_mode: 'direct'}, userId));
-      const {pathname, origin, searchParams} = signInUrl;
+        const signInUrl: URL = new URL(await this.asgardeo.getSignInUrl({response_mode: 'direct'}, userId));
+        const {pathname: urlPathname, origin, searchParams: urlSearchParams} = signInUrl;
 
-      console.log('[AsgardeoNextClient] Sign-in URL:', signInUrl.toString());
-      console.log('[AsgardeoNextClient] Search Params:', Object.fromEntries(searchParams.entries()));
-      try {
-        await this.signIn(
+        console.log('[AsgardeoNextClient] Sign-in URL:', signInUrl.toString());
+        console.log('[AsgardeoNextClient] Search Params:', Object.fromEntries(urlSearchParams.entries()));
+
+        const response = await this.signIn(
           {
             flowId: '',
             selectedAuthenticator: {
@@ -199,41 +201,59 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
             },
           },
           {
-            url: `${origin}${pathname}`,
-            payload: Object.fromEntries(searchParams.entries()),
+            url: `${origin}${urlPathname}`,
+            payload: Object.fromEntries(urlSearchParams.entries()),
           },
+          userId,
         );
+
+        console.log('[AsgardeoNextClient] Sign-in response:', response);
+
+        // Clean the response to remove any non-serializable properties
+        const cleanResponse = response ? JSON.parse(JSON.stringify(response)) : {success: true};
+
+        // Create response with session cookie
+        const nextResponse = NextResponse.json(cleanResponse);
+        
+        // Set session cookie if it was generated
+        if (!req.cookies.get(CookieConfig.SESSION_COOKIE_NAME)) {
+          nextResponse.cookies.set(CookieConfig.SESSION_COOKIE_NAME, userId, {
+            httpOnly: CookieConfig.DEFAULT_HTTP_ONLY,
+            maxAge: CookieConfig.DEFAULT_MAX_AGE,
+            sameSite: CookieConfig.DEFAULT_SAME_SITE,
+            secure: CookieConfig.DEFAULT_SECURE,
+          });
+        }
+
+        return nextResponse;
       } catch (error) {
-        throw new AsgardeoRuntimeError(
-          `Failed to initialize embedded sign-in flow.: ${error?.toString()}`,
-          'react-AsgardeoReactClient-InitializationError-001',
-          'react',
-          'An error occurred while initializing the embedded sign-in flow.',
-        );
+        console.error('[AsgardeoNextClient] Failed to initialize embedded sign-in flow:', error);
+        return NextResponse.json({error: 'Failed to initialize sign-in flow'}, {status: 500});
       }
-
-      return NextResponse.json(response);
     }
 
+    // Handle GET sign-in request or callback with code
     if ((method === 'GET' && sanitizedPathname === InternalAuthAPIRoutesConfig.signIn) || searchParams.get('code')) {
-      let response: NextResponse | undefined;
+      try {
+        if (searchParams.get('code')) {
+          // Handle OAuth callback
+          await this.signIn();
 
-      await this.signIn();
+          const cleanUrl: URL = new URL(req.url);
+          cleanUrl.searchParams.delete('code');
+          cleanUrl.searchParams.delete('state');
+          cleanUrl.searchParams.delete('session_state');
 
-      if (response) {
-        return response;
-      }
+          return NextResponse.redirect(cleanUrl.toString());
+        }
 
-      if (searchParams.get('code')) {
-        const cleanUrl: URL = new URL(req.url);
-        cleanUrl.searchParams.delete('code');
-        cleanUrl.searchParams.delete('state');
-        cleanUrl.searchParams.delete('session_state');
-
-        return NextResponse.redirect(cleanUrl.toString());
+        // Regular GET sign-in request
+        await this.signIn();
+        return NextResponse.next();
+      } catch (error) {
+        console.error('[AsgardeoNextClient] Sign-in failed:', error);
+        return NextResponse.json({error: 'Sign-in failed'}, {status: 500});
       }
-
-      return NextResponse.next();
     }
 
     if (method === 'GET' && sanitizedPathname === InternalAuthAPIRoutesConfig.session) {

From 398ff43d8f1565e825f911f9c0cc84adfdec8c83 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 25 Jun 2025 12:14:03 +0530
Subject: [PATCH 87/96] chore: authentication flow and UI components

- Removed the old SignIn and SignUp pages, replacing them with new implementations using Asgardeo for authentication.
- Updated the Header component to conditionally render navigation based on authentication state using SignedIn and SignedOut components from Asgardeo.
- Refactored the AuthProvider to mock user and organization data, and adjusted the useAuth hook to return mock data.
- Updated routing paths for sign-in and sign-up to remove the "/auth" prefix.
- Removed unused authentication utility functions and middleware, integrating Asgardeo's middleware for session management.
- Cleaned up various components and styles for consistency and improved readability.
---
 packages/javascript/src/StorageManager.ts     |   4 +-
 packages/nextjs/src/AsgardeoNextClient.ts     |  52 +++--
 .../components/presentation/SignIn/SignIn.tsx |  56 ++---
 .../contexts/Asgardeo/AsgardeoContext.ts      |   4 +-
 .../contexts/Asgardeo/AsgardeoProvider.tsx    |  15 +-
 packages/node/src/__legacy__/client.ts        |   9 +
 .../src/__legacy__/core/authentication.ts     |   4 +
 .../presentation/SignIn/BaseSignIn.tsx        |  21 +-
 .../components/presentation/SignIn/SignIn.tsx |   5 +-
 .../presentation/SignUp/BaseSignUp.tsx        |  19 +-
 .../components/presentation/SignUp/SignUp.tsx |  44 +---
 .../SignUp/options/SignUpOptionFactory.tsx    |   7 +-
 .../teamspace-nextjs/app/auth/signin/page.tsx | 135 ------------
 .../app/dashboard/dashboard-client.tsx        | 144 ++++++-------
 .../teamspace-nextjs/app/dashboard/page.tsx   |   8 +-
 samples/teamspace-nextjs/app/layout.tsx       |  32 ++-
 samples/teamspace-nextjs/app/page.tsx         |   6 +-
 samples/teamspace-nextjs/app/signin/page.tsx  |  34 ++++
 .../app/{auth => }/signup/page.tsx            |   2 +-
 .../components/Header/Header.tsx              |  42 ++--
 .../components/Header/PublicActions.tsx       |   8 +-
 samples/teamspace-nextjs/hooks/use-auth.tsx   | 192 ++++++++++--------
 samples/teamspace-nextjs/lib/auth.ts          |  90 --------
 samples/teamspace-nextjs/middleware.ts        |  27 +--
 24 files changed, 386 insertions(+), 574 deletions(-)
 delete mode 100644 samples/teamspace-nextjs/app/auth/signin/page.tsx
 create mode 100644 samples/teamspace-nextjs/app/signin/page.tsx
 rename samples/teamspace-nextjs/app/{auth => }/signup/page.tsx (98%)
 delete mode 100644 samples/teamspace-nextjs/lib/auth.ts

diff --git a/packages/javascript/src/StorageManager.ts b/packages/javascript/src/StorageManager.ts
index 50f8df885..b7130b5d3 100644
--- a/packages/javascript/src/StorageManager.ts
+++ b/packages/javascript/src/StorageManager.ts
@@ -112,8 +112,8 @@ class StorageManager<T> {
     this.setDataInBulk(this._resolveKey(key, userId), customData);
   }
 
-  public async getConfigData(): Promise<AuthClientConfig<T>> {
-    return JSON.parse((await this._store.getData(this._resolveKey(Stores.ConfigData))) ?? null);
+  public async getConfigData(userId?: string): Promise<AuthClientConfig<T>> {
+        return JSON.parse((await this._store.getData(this._resolveKey(Stores.ConfigData, userId))) ?? null);
   }
 
   public async loadOpenIDProviderConfiguration(): Promise<OIDCDiscoveryApiResponse> {
diff --git a/packages/nextjs/src/AsgardeoNextClient.ts b/packages/nextjs/src/AsgardeoNextClient.ts
index b12083fa1..7afa1b4d2 100644
--- a/packages/nextjs/src/AsgardeoNextClient.ts
+++ b/packages/nextjs/src/AsgardeoNextClient.ts
@@ -34,6 +34,7 @@ import {
   EmbeddedFlowExecuteRequestConfig,
   CookieConfig,
   generateSessionId,
+  EmbeddedSignInFlowStatus,
 } from '@asgardeo/node';
 import {NextRequest, NextResponse} from 'next/server';
 import InternalAuthAPIRoutesConfig from './configs/InternalAuthAPIRoutesConfig';
@@ -68,6 +69,7 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
       clientId,
       clientSecret,
       afterSignInUrl,
+      enablePKCE: false,
       ...rest,
     } as any);
   }
@@ -136,9 +138,9 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
     return this.asgardeo.signIn(
       arg4,
       arg3,
-      undefined,
-      undefined,
-      undefined,
+      arg1?.code,
+      arg1?.session_state,
+      arg1?.state,
       arg1 as any,
     ) as unknown as Promise<User>;
   }
@@ -191,30 +193,27 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
 
         console.log('[AsgardeoNextClient] Sign-in URL:', signInUrl.toString());
         console.log('[AsgardeoNextClient] Search Params:', Object.fromEntries(urlSearchParams.entries()));
+        const body = await req.json();
 
-        const response = await this.signIn(
-          {
-            flowId: '',
-            selectedAuthenticator: {
-              authenticatorId: '',
-              params: {},
-            },
-          },
+        console.log('[AsgardeoNextClient] Sign-in request:', body);
+
+        const {payload, request} = body;
+
+        const response: any = await this.signIn(
+          payload,
           {
-            url: `${origin}${urlPathname}`,
-            payload: Object.fromEntries(urlSearchParams.entries()),
+            url: request?.url ?? `${origin}${urlPathname}`,
+            payload: request?.payload ?? Object.fromEntries(urlSearchParams.entries()),
           },
           userId,
         );
 
-        console.log('[AsgardeoNextClient] Sign-in response:', response);
-
         // Clean the response to remove any non-serializable properties
         const cleanResponse = response ? JSON.parse(JSON.stringify(response)) : {success: true};
 
         // Create response with session cookie
         const nextResponse = NextResponse.json(cleanResponse);
-        
+
         // Set session cookie if it was generated
         if (!req.cookies.get(CookieConfig.SESSION_COOKIE_NAME)) {
           nextResponse.cookies.set(CookieConfig.SESSION_COOKIE_NAME, userId, {
@@ -225,6 +224,27 @@ class AsgardeoNextClient<T extends AsgardeoNextConfig = AsgardeoNextConfig> exte
           });
         }
 
+        if (response.flowStatus === EmbeddedSignInFlowStatus.SuccessCompleted) {
+          const res = await this.signIn(
+            {
+              code: response?.authData?.code,
+              session_state: response?.authData?.session_state,
+              state: response?.authData?.state,
+            } as any,
+            {},
+            userId,
+            (afterSignInUrl: string) => null,
+          );
+
+          const afterSignInUrl = await (
+            await this.asgardeo.getStorageManager()
+          ).getConfigDataParameter('afterSignInUrl');
+          const redirectUrl = String(afterSignInUrl);
+          console.log('[AsgardeoNextClient] Sign-in successful, redirecting to:', redirectUrl);
+
+          return NextResponse.redirect(redirectUrl, 303);
+        }
+
         return nextResponse;
       } catch (error) {
         console.error('[AsgardeoNextClient] Failed to initialize embedded sign-in flow:', error);
diff --git a/packages/nextjs/src/client/components/presentation/SignIn/SignIn.tsx b/packages/nextjs/src/client/components/presentation/SignIn/SignIn.tsx
index cbb1c6675..336a0a94b 100644
--- a/packages/nextjs/src/client/components/presentation/SignIn/SignIn.tsx
+++ b/packages/nextjs/src/client/components/presentation/SignIn/SignIn.tsx
@@ -18,7 +18,12 @@
 
 'use client';
 
-import {EmbeddedSignInFlowInitiateResponse} from '@asgardeo/node';
+import {
+  EmbeddedFlowExecuteRequestConfig,
+  EmbeddedSignInFlowHandleRequestPayload,
+  EmbeddedSignInFlowHandleResponse,
+  EmbeddedSignInFlowInitiateResponse,
+} from '@asgardeo/node';
 import {BaseSignIn, BaseSignInProps} from '@asgardeo/react';
 import {FC} from 'react';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
@@ -27,28 +32,7 @@ import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
  * Props for the SignIn component.
  * Extends BaseSignInProps for full compatibility with the React BaseSignIn component
  */
-export interface SignInProps extends BaseSignInProps {
-  /**
-   * URL to redirect to after successful sign-in.
-   * If not provided, will use the current window location.
-   */
-  afterSignInUrl?: string;
-
-  /**
-   * Additional CSS class names for customization.
-   */
-  className?: string;
-
-  /**
-   * Size variant for the component.
-   */
-  size?: 'small' | 'medium' | 'large';
-
-  /**
-   * Theme variant for the component.
-   */
-  variant?: 'default' | 'outlined' | 'filled';
-}
+export type SignInProps = BaseSignInProps;
 
 /**
  * A SignIn component for Next.js that provides native authentication flow.
@@ -102,23 +86,25 @@ const SignIn: FC<SignInProps> = ({
   onSubmit,
   onSuccess,
   size = 'medium',
-  variant = 'default',
+  variant = 'outlined',
   ...rest
 }: SignInProps) => {
   const {signIn} = useAsgardeo();
 
-  /**
-   * Handle successful authentication and redirect with query params.
-   */
-  /**
-   * Initialize the authentication flow.
-   */
   const handleInitialize = async (): Promise<EmbeddedSignInFlowInitiateResponse> =>
-    await signIn({response_mode: 'direct'});
+    await signIn({
+      flowId: '',
+      selectedAuthenticator: {
+        authenticatorId: '',
+        params: {},
+      },
+    });
+
+  const handleOnSubmit = async (
+    payload: EmbeddedSignInFlowHandleRequestPayload,
+    request: EmbeddedFlowExecuteRequestConfig,
+  ): Promise<EmbeddedSignInFlowHandleResponse> => await signIn(payload, request);
 
-  /**
-   * Handle authentication errors
-   */
   const handleError = (error: Error): void => {
     onError?.(error);
   };
@@ -127,7 +113,7 @@ const SignIn: FC<SignInProps> = ({
     <BaseSignIn
       afterSignInUrl={afterSignInUrl}
       onInitialize={handleInitialize}
-      onSubmit={onSubmit}
+      onSubmit={handleOnSubmit}
       onSuccess={onSuccess}
       onError={handleError}
       onFlowChange={onFlowChange}
diff --git a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoContext.ts b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoContext.ts
index 139e8439e..ba25b8dfd 100644
--- a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoContext.ts
+++ b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoContext.ts
@@ -19,7 +19,7 @@
 'use client';
 
 import {AsgardeoContextProps as AsgardeoReactContextProps} from '@asgardeo/react';
-import {User} from '@asgardeo/node';
+import {EmbeddedFlowExecuteRequestConfig, EmbeddedSignInFlowHandleRequestPayload, User} from '@asgardeo/node';
 import {Context, createContext} from 'react';
 
 /**
@@ -29,7 +29,7 @@ export type AsgardeoContextProps = Partial<AsgardeoReactContextProps> & {
   user?: User | null;
   isSignedIn?: boolean;
   isLoading?: boolean;
-  signIn?: () => void;
+  signIn?: (payload: EmbeddedSignInFlowHandleRequestPayload, request: EmbeddedFlowExecuteRequestConfig) => void;
   signOut?: () => void;
 };
 
diff --git a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
index a9de91783..950ff3451 100644
--- a/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
+++ b/packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx
@@ -18,9 +18,10 @@
 
 'use client';
 
-import {User} from '@asgardeo/node';
+import {EmbeddedFlowExecuteRequestConfig, EmbeddedSignInFlowHandleRequestPayload, User} from '@asgardeo/node';
 import {I18nProvider, FlowProvider, UserProvider, ThemeProvider} from '@asgardeo/react';
 import {FC, PropsWithChildren, useEffect, useMemo, useState} from 'react';
+import {useRouter} from 'next/navigation';
 import AsgardeoContext from './AsgardeoContext';
 import InternalAuthAPIRoutesConfig from '../../../configs/InternalAuthAPIRoutesConfig';
 
@@ -38,6 +39,7 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
   children,
   preferences,
 }: PropsWithChildren<AsgardeoClientProviderProps>) => {
+  const router = useRouter();
   const [isDarkMode, setIsDarkMode] = useState(false);
   const [user, setUser] = useState<User | null>(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -81,11 +83,20 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
     fetchUserData();
   }, []);
 
-  const signIn = async () => {
+  const signIn = async (payload: EmbeddedSignInFlowHandleRequestPayload, request: EmbeddedFlowExecuteRequestConfig) => {
     const response = await fetch(InternalAuthAPIRoutesConfig.signIn, {
       method: 'POST',
+      body: JSON.stringify({
+        payload,
+        request,
+      }),
     });
 
+    if (response.redirected && response.url) {
+      router.push(response.url!);
+      return {redirected: true, location: response.url};
+    }
+
     return response.json();
   };
 
diff --git a/packages/node/src/__legacy__/client.ts b/packages/node/src/__legacy__/client.ts
index 98a1d3d2c..3b66b8ac3 100644
--- a/packages/node/src/__legacy__/client.ts
+++ b/packages/node/src/__legacy__/client.ts
@@ -111,6 +111,15 @@ export class AsgardeoNodeClient<T> {
     return this._authCore.signIn(authURLCallback, userId, authorizationCode, sessionState, state, signInConfig);
   }
 
+  /**
+   * Method to get the configuration data.
+   *
+   * @returns {Promise<AuthClientConfig<Config>>} - A promise that resolves with the configuration data.
+   */
+  public async getConfigData(): Promise<AuthClientConfig<T>> {
+    return this._authCore.getConfigData();
+  }
+
   /**
    * This method clears all session data and returns the sign-out URL.
    * @param {string} userId - The userId of the user. (If you are using ExpressJS,
diff --git a/packages/node/src/__legacy__/core/authentication.ts b/packages/node/src/__legacy__/core/authentication.ts
index 07987a5f7..00e33fdb0 100644
--- a/packages/node/src/__legacy__/core/authentication.ts
+++ b/packages/node/src/__legacy__/core/authentication.ts
@@ -215,6 +215,10 @@ export class AsgardeoNodeCore<T> {
     return this._auth.getUser(userId);
   }
 
+  public async getConfigData(): Promise<AuthClientConfig<T>> {
+    return this._storageManager.getConfigData();
+  }
+
   public async getOpenIDProviderEndpoints(): Promise<OIDCEndpoints> {
     return this._auth.getOpenIDProviderEndpoints() as Promise<OIDCEndpoints>;
   }
diff --git a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
index 643fbc6df..b1ddbcfcf 100644
--- a/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/BaseSignIn.tsx
@@ -27,6 +27,7 @@ import {
   AsgardeoAPIError,
   withVendorCSSClassPrefix,
   EmbeddedSignInFlowHandleRequestPayload,
+  EmbeddedFlowExecuteRequestConfig,
 } from '@asgardeo/browser';
 import {clsx} from 'clsx';
 import {FC, ReactElement, FormEvent, useEffect, useState, useCallback, useRef} from 'react';
@@ -36,7 +37,7 @@ import useFlow from '../../../contexts/Flow/useFlow';
 import {useForm, FormField} from '../../../hooks/useForm';
 import useTranslation from '../../../hooks/useTranslation';
 import Alert from '../../primitives/Alert/Alert';
-import Card from '../../primitives/Card/Card';
+import Card, {CardProps} from '../../primitives/Card/Card';
 import Divider from '../../primitives/Divider/Divider';
 import Spinner from '../../primitives/Spinner/Spinner';
 import Typography from '../../primitives/Typography/Typography';
@@ -264,7 +265,7 @@ export interface BaseSignInProps {
    */
   onSubmit?: (
     payload: EmbeddedSignInFlowHandleRequestPayload,
-    request: Partial<Request>,
+    request: EmbeddedFlowExecuteRequestConfig,
   ) => Promise<EmbeddedSignInFlowHandleResponse>;
 
   /**
@@ -280,7 +281,7 @@ export interface BaseSignInProps {
   /**
    * Theme variant for the component.
    */
-  variant?: 'default' | 'outlined' | 'filled';
+  variant?: CardProps['variant'];
 }
 
 /**
@@ -337,7 +338,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
   errorClassName = '',
   messageClassName = '',
   size = 'medium',
-  variant = 'default',
+  variant = 'outlined',
 }: BaseSignInProps) => {
   const {t} = useTranslation();
   const {subtitle: flowSubtitle, title: flowTitle, messages: flowMessages} = useFlow();
@@ -1013,8 +1014,6 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
       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,
   );
@@ -1087,7 +1086,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
   if (!isInitialized && isLoading) {
     return (
-      <Card className={containerClasses}>
+      <Card className={containerClasses} variant={variant}>
         <Card.Content>
           <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '2rem'}}>
             <Spinner size="medium" />
@@ -1113,7 +1112,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
     const optionAuthenticators = availableAuthenticators.filter(auth => !userPromptAuthenticators.includes(auth));
 
     return (
-      <Card className={containerClasses}>
+      <Card className={containerClasses} variant={variant}>
         <Card.Header>
           <Card.Title level={3}>{flowTitle || t('signin.title')}</Card.Title>
           {flowSubtitle && (
@@ -1228,7 +1227,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
   if (!currentAuthenticator) {
     return (
-      <Card className={containerClasses}>
+      <Card className={containerClasses} variant={variant}>
         <Card.Content>
           {error && (
             <Alert variant="error">
@@ -1250,7 +1249,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
 
     // Show loading state while passkey authentication is in progress
     return (
-      <Card className={containerClasses}>
+      <Card className={containerClasses} variant={variant}>
         <Card.Content>
           <div style={{textAlign: 'center', padding: '2rem'}}>
             <div style={{marginBottom: '1rem'}}>
@@ -1267,7 +1266,7 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
   }
 
   return (
-    <Card className={containerClasses}>
+    <Card className={containerClasses} variant={variant}>
       <Card.Header>
         <Card.Title level={2}>{flowTitle || t('signin.title')}</Card.Title>
         <Typography variant="body1" style={{marginTop: '0.5rem'}}>
diff --git a/packages/react/src/components/presentation/SignIn/SignIn.tsx b/packages/react/src/components/presentation/SignIn/SignIn.tsx
index 05ab66d10..ad6cd147b 100644
--- a/packages/react/src/components/presentation/SignIn/SignIn.tsx
+++ b/packages/react/src/components/presentation/SignIn/SignIn.tsx
@@ -24,6 +24,7 @@ import {
 import {FC} from 'react';
 import BaseSignIn from './BaseSignIn';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
+import {CardProps} from '../../primitives/Card/Card';
 
 /**
  * Props for the SignIn component.
@@ -42,7 +43,7 @@ export interface SignInProps {
   /**
    * Theme variant for the component.
    */
-  variant?: 'default' | 'outlined' | 'filled';
+  variant?: CardProps['variant'];
 }
 
 /**
@@ -70,7 +71,7 @@ export interface SignInProps {
  * };
  * ```
  */
-const SignIn: FC<SignInProps> = ({className, size = 'medium', variant = 'default'}: SignInProps) => {
+const SignIn: FC<SignInProps> = ({className, size = 'medium', variant = 'outlined'}: SignInProps) => {
   const {signIn, afterSignInUrl} = useAsgardeo();
 
   /**
diff --git a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
index 1d5275cb8..5207e6e1b 100644
--- a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
+++ b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
@@ -33,7 +33,7 @@ import useFlow from '../../../contexts/Flow/useFlow';
 import {useForm, FormField} from '../../../hooks/useForm';
 import useTranslation from '../../../hooks/useTranslation';
 import Alert from '../../primitives/Alert/Alert';
-import Card from '../../primitives/Card/Card';
+import Card, {CardProps} from '../../primitives/Card/Card';
 import Spinner from '../../primitives/Spinner/Spinner';
 import Typography from '../../primitives/Typography/Typography';
 
@@ -112,7 +112,12 @@ export interface BaseSignUpProps {
   /**
    * Theme variant for the component.
    */
-  variant?: 'default' | 'outlined' | 'filled';
+  variant?: CardProps['variant'];
+
+  /**
+   *  Whether to redirect after sign-up.
+   */
+  shouldRedirectAfterSignUp?: boolean;
 }
 
 /**
@@ -172,7 +177,7 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
   errorClassName = '',
   messageClassName = '',
   size = 'medium',
-  variant = 'default',
+  variant = 'outlined',
   isInitialized,
 }) => {
   const {t} = useTranslation();
@@ -531,8 +536,6 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
       withVendorCSSClassPrefix('signup__button'),
       size === 'small' && withVendorCSSClassPrefix('signup__button--small'),
       size === 'large' && withVendorCSSClassPrefix('signup__button--large'),
-      variant === 'outlined' && withVendorCSSClassPrefix('signup__button--outlined'),
-      variant === 'filled' && withVendorCSSClassPrefix('signup__button--filled'),
     ],
     buttonClassName,
   );
@@ -629,7 +632,7 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
 
   if (!isFlowInitialized && isLoading) {
     return (
-      <Card className={containerClasses}>
+      <Card className={containerClasses} variant={variant}>
         <Card.Content>
           <div style={{display: 'flex', justifyContent: 'center', padding: '2rem'}}>
             <Spinner size="medium" />
@@ -641,7 +644,7 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
 
   if (!currentFlow) {
     return (
-      <Card className={containerClasses}>
+      <Card className={containerClasses} variant={variant}>
         <Card.Content>
           <Alert variant="error" className={errorClasses}>
             <Alert.Title>{t('errors.title') || 'Error'}</Alert.Title>
@@ -653,7 +656,7 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
   }
 
   return (
-    <Card className={containerClasses}>
+    <Card className={containerClasses} variant={variant}>
       <Card.Header>
         {flowMessages && flowMessages.length > 0 && (
           <div style={{marginTop: '1rem'}}>
diff --git a/packages/react/src/components/presentation/SignUp/SignUp.tsx b/packages/react/src/components/presentation/SignUp/SignUp.tsx
index 0e80e084e..187662327 100644
--- a/packages/react/src/components/presentation/SignUp/SignUp.tsx
+++ b/packages/react/src/components/presentation/SignUp/SignUp.tsx
@@ -23,51 +23,13 @@ import {
   EmbeddedFlowType,
 } from '@asgardeo/browser';
 import {FC} from 'react';
-import BaseSignUp from './BaseSignUp';
+import BaseSignUp, {BaseSignUpProps} from './BaseSignUp';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
 
 /**
  * Props for the SignUp component.
  */
-export interface SignUpProps {
-  /**
-   * URL to redirect after successful sign-up.
-   */
-  afterSignUpUrl?: string;
-
-  /**
-   * Additional CSS class names for customization.
-   */
-  className?: string;
-
-  /**
-   * Callback function called when the sign-up flow completes and requires redirection.
-   * This allows platform-specific handling of redirects (e.g., Next.js router.push).
-   * @param response - The response from the sign-up flow containing the redirect URL, etc.
-   */
-  onComplete?: (response: EmbeddedFlowExecuteResponse) => void;
-
-  /**
-   * Callback function called when sign-up fails.
-   * @param error - The error that occurred during sign-up.
-   */
-  onError?: (error: Error) => void;
-
-  /**
-   *  Whether to redirect after sign-up.
-   */
-  shouldRedirectAfterSignUp?: boolean;
-
-  /**
-   * Size variant for the component.
-   */
-  size?: 'small' | 'medium' | 'large';
-
-  /**
-   * Theme variant for the component.
-   */
-  variant?: 'default' | 'outlined' | 'filled';
-}
+export type SignUpProps = BaseSignUpProps;
 
 /**
  * A styled SignUp component that provides embedded sign-up flow with pre-built styling.
@@ -102,7 +64,7 @@ export interface SignUpProps {
 const SignUp: FC<SignUpProps> = ({
   className,
   size = 'medium',
-  variant = 'default',
+  variant = 'outlined',
   afterSignUpUrl,
   onError,
   onComplete,
diff --git a/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx b/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
index df22078dc..f22c84b17 100644
--- a/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
+++ b/packages/react/src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
@@ -27,7 +27,6 @@ import GoogleButton from './GoogleButton';
 import ImageComponent from './ImageComponent';
 import NumberInput from './NumberInput';
 import PasswordInput from './PasswordInput';
-import SocialButton from './SocialButton';
 import ButtonComponent from './SubmitButton';
 import TelephoneInput from './TelephoneInput';
 import TextInput from './TextInput';
@@ -97,7 +96,7 @@ export interface BaseSignUpOptionProps extends WithPreferences {
   /**
    * Component theme variant.
    */
-  variant?: 'default' | 'outlined' | 'filled';
+  variant?: any;
 }
 
 /**
@@ -181,7 +180,7 @@ export const createSignUpOptionFromComponent = (
     key?: string | number;
     onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>) => void;
     size?: 'small' | 'medium' | 'large';
-    variant?: 'default' | 'outlined' | 'filled';
+    variant?: any;
   },
 ): ReactElement =>
   createSignUpComponent({
@@ -212,7 +211,7 @@ export const renderSignUpComponents = (
     inputClassName?: string;
     onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>) => void;
     size?: 'small' | 'medium' | 'large';
-    variant?: 'default' | 'outlined' | 'filled';
+    variant?: any;
   },
 ): ReactElement[] =>
   components
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 d96320f03..000000000
--- a/samples/teamspace-nextjs/app/auth/signin/page.tsx
+++ /dev/null
@@ -1,135 +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"
-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/dashboard/dashboard-client.tsx b/samples/teamspace-nextjs/app/dashboard/dashboard-client.tsx
index a276a4b74..e906c400b 100644
--- a/samples/teamspace-nextjs/app/dashboard/dashboard-client.tsx
+++ b/samples/teamspace-nextjs/app/dashboard/dashboard-client.tsx
@@ -1,114 +1,118 @@
-"use client"
+'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"
+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()
+  const {user, currentOrg, isAuthenticated, isLoading} = {
+    user: null,
+    currentOrg: null,
+    isAuthenticated: false,
+    isLoading: true,
+  };
 
   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 stats = [
     {
-      name: "Active Projects",
-      value: "12",
-      change: "+2.1%",
-      changeType: "positive" as const,
+      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,
+      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,
+      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,
+      name: 'Meetings This Week',
+      value: '7',
+      change: '-2.3%',
+      changeType: 'negative' as const,
       icon: Calendar,
     },
-  ]
+  ];
 
   const recentActivity = [
     {
       id: 1,
-      user: "Sarah Chen",
+      user: 'Sarah Chen',
       action: 'completed task "Design Review"',
-      time: "2 hours ago",
-      type: "completed",
+      time: '2 hours ago',
+      type: 'completed',
     },
     {
       id: 2,
-      user: "Mike Johnson",
+      user: 'Mike Johnson',
       action: 'created new project "Mobile App"',
-      time: "4 hours ago",
-      type: "created",
+      time: '4 hours ago',
+      type: 'created',
     },
     {
       id: 3,
-      user: "Emily Davis",
-      action: "scheduled team meeting",
-      time: "6 hours ago",
-      type: "scheduled",
+      user: 'Emily Davis',
+      action: 'scheduled team meeting',
+      time: '6 hours ago',
+      type: 'scheduled',
     },
     {
       id: 4,
-      user: "Alex Rodriguez",
+      user: 'Alex Rodriguez',
       action: 'uploaded 3 files to "Q4 Planning"',
-      time: "1 day ago",
-      type: "uploaded",
+      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",
+      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",
+      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",
+      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">
@@ -119,8 +123,8 @@ export function DashboardClient() {
 
       {/* 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
+        {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">
@@ -131,16 +135,16 @@ export function DashboardClient() {
                 <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"}`}
+                    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"}>
+                  <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>
 
@@ -153,25 +157,25 @@ export function DashboardClient() {
           </CardHeader>
           <CardContent>
             <div className="space-y-4">
-              {recentActivity.map((activity) => (
+              {recentActivity.map(activity => (
                 <div key={activity.id} className="flex items-start space-x-3">
                   <div className="flex-shrink-0">
-                    {activity.type === "completed" && (
+                    {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" && (
+                    {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" && (
+                    {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" && (
+                    {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>
@@ -197,7 +201,7 @@ export function DashboardClient() {
           </CardHeader>
           <CardContent>
             <div className="space-y-4">
-              {upcomingTasks.map((task) => (
+              {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>
@@ -208,8 +212,8 @@ export function DashboardClient() {
                       <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" />}
+                    <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>
@@ -220,5 +224,5 @@ export function DashboardClient() {
         </Card>
       </div>
     </div>
-  )
+  );
 }
diff --git a/samples/teamspace-nextjs/app/dashboard/page.tsx b/samples/teamspace-nextjs/app/dashboard/page.tsx
index 4df81aaba..4293c22cc 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,12 @@ import {useEffect} from 'react';
 import {Header} from '@/components/Header/Header';
 
 export default function DashboardPage() {
-  const {user, currentOrg, isAuthenticated, isLoading} = useAuth();
+  const {user, currentOrg, isAuthenticated, isLoading} = {
+    user: null, // Replace with actual user data fetching logic
+    currentOrg: null, // Replace with actual organization data fetching logic
+    isAuthenticated: false, // Replace with actual authentication check
+    isLoading: true, // Replace with actual loading state
+  };
 
   useEffect(() => {
     if (!isLoading && !isAuthenticated) {
diff --git a/samples/teamspace-nextjs/app/layout.tsx b/samples/teamspace-nextjs/app/layout.tsx
index 41efb0b74..30ecd2748 100644
--- a/samples/teamspace-nextjs/app/layout.tsx
+++ b/samples/teamspace-nextjs/app/layout.tsx
@@ -1,32 +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/ThemeProvider"
-import { AuthProvider } from "@/hooks/use-auth"
+import type React from 'react';
+import type {Metadata} from 'next';
+import {Inter} from 'next/font/google';
+import './globals.css';
+import {ThemeProvider} from '@/components/ThemeProvider';
+import {AsgardeoProvider} from '@asgardeo/nextjs';
 
-const inter = Inter({ subsets: ["latin"] })
+const inter = Inter({subsets: ['latin']});
 
 export const metadata: Metadata = {
-  title: "Teamspace - Where teams collaborate",
+  title: 'Teamspace - Where teams collaborate',
   description: "Streamline your team's workflow with our all-in-one collaboration platform.",
-    generator: 'v0.dev'
-}
+  generator: 'v0.dev',
+};
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+export default function RootLayout({children}: {children: React.ReactNode}) {
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
         <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
-          <AuthProvider>
+          <AsgardeoProvider>
             <div className="min-h-screen bg-background">{children}</div>
-          </AuthProvider>
+          </AsgardeoProvider>
         </ThemeProvider>
       </body>
     </html>
-  )
+  );
 }
diff --git a/samples/teamspace-nextjs/app/page.tsx b/samples/teamspace-nextjs/app/page.tsx
index 3511b01a5..65b67655f 100644
--- a/samples/teamspace-nextjs/app/page.tsx
+++ b/samples/teamspace-nextjs/app/page.tsx
@@ -171,7 +171,7 @@ export default function LandingPage() {
 
               <div className="flex flex-col sm:flex-row gap-4">
                 <Link
-                  href="/auth/signup"
+                  href="/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
@@ -346,7 +346,7 @@ export default function LandingPage() {
                 </ul>
 
                 <Link
-                  href="/auth/signup"
+                  href="/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'
@@ -372,7 +372,7 @@ export default function LandingPage() {
           </p>
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
             <Link
-              href="/auth/signup"
+              href="/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
diff --git a/samples/teamspace-nextjs/app/signin/page.tsx b/samples/teamspace-nextjs/app/signin/page.tsx
new file mode 100644
index 000000000..b6fb0381a
--- /dev/null
+++ b/samples/teamspace-nextjs/app/signin/page.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import type React from 'react';
+
+import Link from 'next/link';
+import {Users} from 'lucide-react';
+import {SignIn} from '@asgardeo/nextjs';
+
+export default function SignInPage() {
+  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>
+
+        <SignIn />
+
+        <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/signup/page.tsx
similarity index 98%
rename from samples/teamspace-nextjs/app/auth/signup/page.tsx
rename to samples/teamspace-nextjs/app/signup/page.tsx
index a1c221ecf..b910105a1 100644
--- a/samples/teamspace-nextjs/app/auth/signup/page.tsx
+++ b/samples/teamspace-nextjs/app/signup/page.tsx
@@ -152,7 +152,7 @@ export default function SignUpPage() {
 
             <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">
+              <Link href="/signin" className="text-primary hover:underline font-medium">
                 Sign in
               </Link>
             </div>
diff --git a/samples/teamspace-nextjs/components/Header/Header.tsx b/samples/teamspace-nextjs/components/Header/Header.tsx
index ee7135bd3..b26e975f9 100644
--- a/samples/teamspace-nextjs/components/Header/Header.tsx
+++ b/samples/teamspace-nextjs/components/Header/Header.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import {useAuth} from '@/hooks/use-auth';
+import {SignedIn, SignedOut} from '@asgardeo/nextjs';
 import Logo from './Logo';
 import PublicNavigation from './PublicNavigation';
 import AuthenticatedNavigation from './AuthenticatedNavigation';
@@ -8,42 +8,30 @@ import PublicActions from './PublicActions';
 import AuthenticatedActions from './AuthenticatedActions';
 
 export function Header() {
-  const {isAuthenticated} = useAuth();
-
-  if (!isAuthenticated) {
-    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">
-              <Logo to="/" />
-              <PublicNavigation />
-            </div>
-
-            {/* Right side - Actions */}
-            <div className="flex items-center space-x-2">
-              <PublicActions showMobileActions={false} />
-            </div>
-          </div>
-        </div>
-      </header>
-    );
-  }
-
   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">
-            <Logo to="/dashboard" />
-            <AuthenticatedNavigation />
+            <SignedIn>
+              <Logo to="/dashboard" />
+              <AuthenticatedNavigation />
+            </SignedIn>
+            <SignedOut>
+              <Logo to="/" />
+              <PublicNavigation />
+            </SignedOut>
           </div>
 
           {/* Right side - Actions */}
           <div className="flex items-center space-x-2">
-            <AuthenticatedActions />
+            <SignedIn>
+              <AuthenticatedActions />
+            </SignedIn>
+            <SignedOut>
+              <PublicActions showMobileActions={false} />
+            </SignedOut>
           </div>
         </div>
       </div>
diff --git a/samples/teamspace-nextjs/components/Header/PublicActions.tsx b/samples/teamspace-nextjs/components/Header/PublicActions.tsx
index 6cb0fd381..d96d34617 100644
--- a/samples/teamspace-nextjs/components/Header/PublicActions.tsx
+++ b/samples/teamspace-nextjs/components/Header/PublicActions.tsx
@@ -12,10 +12,10 @@ export default function PublicActions({className = '', showMobileActions = false
     return (
       <div className="pt-4 border-t border-gray-200 space-y-2">
         <Button variant="ghost" asChild className="w-full">
-          <Link href="/auth/signin">Sign In</Link>
+          <Link href="/signin">Sign In</Link>
         </Button>
         <Button asChild className="w-full">
-          <Link href="/auth/signup">Get Started</Link>
+          <Link href="/signup">Get Started</Link>
         </Button>
       </div>
     );
@@ -24,10 +24,10 @@ export default function PublicActions({className = '', showMobileActions = false
   return (
     <div className={`hidden md:flex items-center space-x-4 ${className}`}>
       <Button variant="ghost" asChild>
-        <Link href="/auth/signin">Sign In</Link>
+        <Link href="/signin">Sign In</Link>
       </Button>
       <Button asChild>
-        <Link href="/auth/signup">Get Started</Link>
+        <Link href="/signup">Get Started</Link>
       </Button>
     </div>
   );
diff --git a/samples/teamspace-nextjs/hooks/use-auth.tsx b/samples/teamspace-nextjs/hooks/use-auth.tsx
index ce5970c87..dc67c43cf 100644
--- a/samples/teamspace-nextjs/hooks/use-auth.tsx
+++ b/samples/teamspace-nextjs/hooks/use-auth.tsx
@@ -1,102 +1,102 @@
-"use client"
+'use client';
 
-import { createContext, useContext, useState, useEffect, type ReactNode } from "react"
-import { useRouter } from "next/navigation"
+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
+  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
+  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
+  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 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",
-}
+  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",
+    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",
+    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()
+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")
+    const savedUser = localStorage.getItem('user');
+    const savedOrg = localStorage.getItem('currentOrg');
 
     if (savedUser) {
-      setUser(JSON.parse(savedUser))
+      setUser(JSON.parse(savedUser));
       if (savedOrg) {
-        setCurrentOrg(JSON.parse(savedOrg))
+        setCurrentOrg(JSON.parse(savedOrg));
       } else {
-        setCurrentOrg(mockOrganizations[0])
+        setCurrentOrg(mockOrganizations[0]);
       }
     }
-    setIsLoading(false)
-  }, [])
+    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")
+    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")
+      throw new Error('Invalid credentials');
     }
-  }
+  };
 
   const signUp = async (name: string, email: string, password: string) => {
     // Mock registration
@@ -104,33 +104,33 @@ export function AuthProvider({ children }: { children: ReactNode }) {
       id: Date.now().toString(),
       name,
       email,
-      avatar: "/placeholder.svg?height=32&width=32",
-      username: name.toLowerCase().replace(/\s+/g, ""),
-    }
+      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")
-  }
+    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("/")
-  }
+    setUser(null);
+    setCurrentOrg(null);
+    localStorage.removeItem('user');
+    localStorage.removeItem('currentOrg');
+    router.push('/');
+  };
 
   const handleSetCurrentOrg = (org: Organization) => {
-    setCurrentOrg(org)
-    localStorage.setItem("currentOrg", JSON.stringify(org))
-  }
+    setCurrentOrg(org);
+    localStorage.setItem('currentOrg', JSON.stringify(org));
+  };
 
   const addOrganization = (org: Organization) => {
-    setOrganizations((prev) => [...prev, org])
-  }
+    setOrganizations(prev => [...prev, org]);
+  };
 
   return (
     <AuthContext.Provider
@@ -149,13 +149,27 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     >
       {children}
     </AuthContext.Provider>
-  )
+  );
 }
 
 export function useAuth() {
-  const context = useContext(AuthContext)
-  if (!context) {
-    throw new Error("useAuth must be used within an AuthProvider")
-  }
-  return context
+  const context = useContext(AuthContext);
+  // if (!context) {
+  //   throw new Error("useAuth must be used within an AuthProvider")
+  // }
+  return {
+    user: {
+      id: '1',
+      name: 'John Doe',
+      email: '',
+    },
+    currentOrg: {
+      id: '1',
+      name: 'Acme Corp',
+      slug: 'acme-corp',
+      avatar: '/placeholder.svg?height=32&width=32',
+      role: 'owner',
+      memberCount: 12,
+    },
+  };
 }
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/middleware.ts b/samples/teamspace-nextjs/middleware.ts
index 0b06b4797..7d4f40f64 100644
--- a/samples/teamspace-nextjs/middleware.ts
+++ b/samples/teamspace-nextjs/middleware.ts
@@ -1,19 +1,22 @@
-import type { NextRequest } from "next/server"
-import { updateSession } from "@/lib/auth"
+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/dashboard',
+});
 
 export async function middleware(request: NextRequest) {
-  return await updateSession(request)
+  return await asgardeo.middleware(request);
 }
 
 export const config = {
   matcher: [
-    /*
-     * Match all request paths except for the ones starting with:
-     * - api (API routes)
-     * - _next/static (static files)
-     * - _next/image (image optimization files)
-     * - favicon.ico (favicon file)
-     */
-    "/((?!api|_next/static|_next/image|favicon.ico).*)",
+    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
+    '/(api|trpc)(.*)',
   ],
-}
+};

From bed4da67d19545daf5995f882130796febf1fde3 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 25 Jun 2025 14:14:37 +0530
Subject: [PATCH 88/96] docs: add Quickstart guide for integrating Asgardeo
 authentication in React

---
 packages/react/QUICKSTART.md | 146 +++++++++++++++++++++++++++++++++++
 1 file changed, 146 insertions(+)
 create mode 100644 packages/react/QUICKSTART.md

diff --git a/packages/react/QUICKSTART.md b/packages/react/QUICKSTART.md
new file mode 100644
index 000000000..9f6036224
--- /dev/null
+++ b/packages/react/QUICKSTART.md
@@ -0,0 +1,146 @@
+# `@asgardeo/react` Quickstart
+
+This guide will help you quickly integrate Asgardeo authentication into your React application.
+
+## Prerequisites
+
+- [Node.js](https://nodejs.org/en/download) (version 16 or later. LTS version recommended)
+- An [Asgardeo account](https://wso2.com/asgardeo/docs/get-started/create-asgardeo-account/)
+
+## Step 1: Configure an Application in Asgardeo
+
+1. **Sign in to Asgardeo Console**
+   - Go to [Asgardeo Console](https://console.asgardeo.io/)
+   - Sign in with your Asgardeo account
+
+2. **Create a New Application**
+   - Click **Applications** in the left sidebar
+   - Click **+ New Application**
+   - Choose **Single Page Application (SPA)**
+   - Enter your application name (e.g., "Teamspace")
+
+3. **Note Down Your Credentials from the `Quickstart` tab**
+   - Copy the **Client ID** from the application details
+   - Note your **Base URL** (ex: `https://api.asgardeo.io/t/<ORGANIZATION>`)
+
+4. **Configure Application Settings from the `Protocol` tab**
+   - **Authorized redirect URLs**: Add your application URLs
+     - `https://localhost:5173`
+   - **Allowed origins**: Add the same URLs as above
+   - Click **Update** to save the configuration
+
+## Step 2: Create a React Application
+
+If you don't have a React application set up yet, you can create one using Vite:
+
+```bash
+# Using npm
+npm create vite@latest teamspace --template react
+
+# Using pnpm
+pnpm create vite@latest teamspace --template react
+
+# Using yarn
+yarn create vite teamspace --template react
+```
+
+## Step 3: Install the SDK
+
+Install the Asgardeo React SDK in your project:
+
+```bash
+# Using npm
+npm install @asgardeo/react
+
+# Using pnpm
+pnpm add @asgardeo/react
+
+# Using yarn
+yarn add @asgardeo/react
+```
+
+## Step 4: Configure the Provider
+
+Wrap your application with the `AsgardeoProvider` in your main entry file i.e. `src/main.tsx`:
+
+```tsx
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+import { AsgardeoProvider } from '@asgardeo/react'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <AsgardeoProvider
+      baseUrl="<Base URL>"
+      clientId="<CLIENT_ID>"
+    >
+      <App />
+    </AsgardeoProvider>
+  </StrictMode>
+)
+```
+
+Replace:
+- `<Base URL>` with the Base URL you noted in Step 1 (e.g., `https://api.asgardeo.io/t/<ORGANIZATION>`)
+- `<CLIENT_ID>` with the Client ID from Step 1
+
+## Step 4: Add Sign-in & Sign-out to Your App
+
+Update your `App.tsx` to include sign-in and sign-out functionality:
+
+```tsx
+import { SignedIn, SignedOut, SignInButton, SignOutButton, User } from '@asgardeo/react'
+import './App.css'
+
+function App() {
+  return (
+    <>
+      <SignedIn>
+        <SignOutButton />
+      </SignedIn>
+      <SignedOut>
+        <SignInButton />
+      </SignedOut>
+    </>
+  )
+}
+
+export default App
+```
+
+## Step 6: Try Login
+
+Run your application and test the sign-in functionality. You should see a "Sign In" button when you're not signed in, and clicking it will redirect you to the Asgardeo sign-in page.
+
+```bash
+# Using npm
+npm run dev
+
+# Using pnpm
+pnpm dev
+
+# Using yarn
+yarn dev
+```
+
+## Next Steps
+
+🎉 **Congratulations!** You've successfully integrated Asgardeo authentication into your React app.
+
+### What to explore next:
+
+- **[Complete Guide](./COMPLETE%20GUIDE.md)** - Learn about advanced features and customization
+- **[API Documentation](./API.md)** - Explore all available components and hooks
+- **Custom Styling** - Customize the appearance of authentication components
+- **Protected Routes** - Implement route-level authentication
+- **User Profile Management** - Access and manage user profile data
+
+### Common Issues
+
+- **Redirect URL Mismatch**: Ensure your redirect URLs in Asgardeo match your local/production URLs exactly
+- **CORS Errors**: Make sure to add your domain to the "Allowed Origins" in your Asgardeo application settings
+- **Client ID Issues**: Double-check that you're using the correct Client ID from your Asgardeo application
+
+For more help, visit the [Asgardeo Documentation](https://wso2.com/asgardeo/docs/) or check out our [examples](../../examples/).

From 9431713385be45e77db4e1d0a72146d525de0da7 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 25 Jun 2025 14:42:16 +0530
Subject: [PATCH 89/96] docs: update placeholders in Quickstart guide for
 clarity

---
 packages/react/QUICKSTART.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react/QUICKSTART.md b/packages/react/QUICKSTART.md
index 9f6036224..c60f84ac3 100644
--- a/packages/react/QUICKSTART.md
+++ b/packages/react/QUICKSTART.md
@@ -21,7 +21,7 @@ This guide will help you quickly integrate Asgardeo authentication into your Rea
 
 3. **Note Down Your Credentials from the `Quickstart` tab**
    - Copy the **Client ID** from the application details
-   - Note your **Base URL** (ex: `https://api.asgardeo.io/t/<ORGANIZATION>`)
+   - Note your **Base URL** (ex: `https://api.asgardeo.io/t/<your-organization-name>`)
 
 4. **Configure Application Settings from the `Protocol` tab**
    - **Authorized redirect URLs**: Add your application URLs
@@ -73,8 +73,8 @@ import { AsgardeoProvider } from '@asgardeo/react'
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <AsgardeoProvider
-      baseUrl="<Base URL>"
-      clientId="<CLIENT_ID>"
+      baseUrl="<your-organization-base-url>"
+      clientId="<your-app-client-id>"
     >
       <App />
     </AsgardeoProvider>
@@ -83,8 +83,8 @@ createRoot(document.getElementById('root')!).render(
 ```
 
 Replace:
-- `<Base URL>` with the Base URL you noted in Step 1 (e.g., `https://api.asgardeo.io/t/<ORGANIZATION>`)
-- `<CLIENT_ID>` with the Client ID from Step 1
+- `<your-organization-base-url>` with the Base URL you noted in Step 1 (e.g., `https://api.asgardeo.io/t/<your-organization-name>`)
+- `<your-app-client-id>` with the Client ID from Step 1
 
 ## Step 4: Add Sign-in & Sign-out to Your App
 

From 0d25aa5d1dd8a29a1cece9999cb6a2c56f5bac1c Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 25 Jun 2025 14:57:50 +0530
Subject: [PATCH 90/96] docs: update Quickstart guide to use 'react-sample' as
 the application name and add user information display example

---
 packages/react/QUICKSTART.md | 43 +++++++++++++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 5 deletions(-)

diff --git a/packages/react/QUICKSTART.md b/packages/react/QUICKSTART.md
index c60f84ac3..48fbefd43 100644
--- a/packages/react/QUICKSTART.md
+++ b/packages/react/QUICKSTART.md
@@ -35,13 +35,13 @@ If you don't have a React application set up yet, you can create one using Vite:
 
 ```bash
 # Using npm
-npm create vite@latest teamspace --template react
+npm create vite@latest react-sample --template react
 
 # Using pnpm
-pnpm create vite@latest teamspace --template react
+pnpm create vite@latest react-sample --template react
 
 # Using yarn
-yarn create vite teamspace --template react
+yarn create vite react-sample --template react
 ```
 
 ## Step 3: Install the SDK
@@ -86,7 +86,7 @@ Replace:
 - `<your-organization-base-url>` with the Base URL you noted in Step 1 (e.g., `https://api.asgardeo.io/t/<your-organization-name>`)
 - `<your-app-client-id>` with the Client ID from Step 1
 
-## Step 4: Add Sign-in & Sign-out to Your App
+## Step 5: Add Sign-in & Sign-out to Your App
 
 Update your `App.tsx` to include sign-in and sign-out functionality:
 
@@ -110,7 +110,40 @@ function App() {
 export default App
 ```
 
-## Step 6: Try Login
+## Step 6: Display User Information
+
+You can also display user information by using the `User` component & the `UserProfile` component:
+
+```diff
+import { User, UserProfile } from '@asgardeo/react'
+import './App.css'
+
+function App() {
+  return (
+    <>
+      <SignedIn>
++        <User>
++          {({ user }) => (
++            <div>
++              <h1>Welcome, {user.username}</h1>
++              <UserProfile />
++            </div>
++          )}
++        </User>
++        <UserProfile />
+        <SignOutButton />
+      </SignedIn>
+      <SignedOut>
+        <SignInButton />
+      </SignedOut>
+    </>
+  )
+}
+
+export default App
+```
+
+## Step 7: Try Login
 
 Run your application and test the sign-in functionality. You should see a "Sign In" button when you're not signed in, and clicking it will redirect you to the Asgardeo sign-in page.
 

From dc29ce8a29be8b0de767756c949f518087b52cfc Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 25 Jun 2025 15:00:28 +0530
Subject: [PATCH 91/96] docs: add user information display in the Quickstart
 guide example

---
 packages/react/QUICKSTART.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/QUICKSTART.md b/packages/react/QUICKSTART.md
index 48fbefd43..09033de53 100644
--- a/packages/react/QUICKSTART.md
+++ b/packages/react/QUICKSTART.md
@@ -126,7 +126,6 @@ function App() {
 +          {({ user }) => (
 +            <div>
 +              <h1>Welcome, {user.username}</h1>
-+              <UserProfile />
 +            </div>
 +          )}
 +        </User>

From 4d0f4c9ad87d117f8ee78a54d5de6c1e1dd0ae89 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 25 Jun 2025 15:02:40 +0530
Subject: [PATCH 92/96] docs: update Quickstart guide to include User component
 in App example

---
 packages/react/QUICKSTART.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/QUICKSTART.md b/packages/react/QUICKSTART.md
index 09033de53..dafa80aaa 100644
--- a/packages/react/QUICKSTART.md
+++ b/packages/react/QUICKSTART.md
@@ -91,7 +91,7 @@ Replace:
 Update your `App.tsx` to include sign-in and sign-out functionality:
 
 ```tsx
-import { SignedIn, SignedOut, SignInButton, SignOutButton, User } from '@asgardeo/react'
+import { SignedIn, SignedOut, SignInButton, SignOutButton } from '@asgardeo/react'
 import './App.css'
 
 function App() {
@@ -115,7 +115,7 @@ export default App
 You can also display user information by using the `User` component & the `UserProfile` component:
 
 ```diff
-import { User, UserProfile } from '@asgardeo/react'
+import { SignedIn, SignedOut, SignInButton, SignOutButton, User, UserProfile } from '@asgardeo/react'
 import './App.css'
 
 function App() {

From 06e9a590fdb1512f07883befcf00970ac3d556ad Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 25 Jun 2025 15:11:41 +0530
Subject: [PATCH 93/96] docs: update Quickstart guide for React to include User
 component example

---
 packages/nextjs/QUICKSTART.md | 238 ++++++++++++++++++++++++++++++++++
 packages/react/QUICKSTART.md  |  18 +--
 2 files changed, 247 insertions(+), 9 deletions(-)
 create mode 100644 packages/nextjs/QUICKSTART.md

diff --git a/packages/nextjs/QUICKSTART.md b/packages/nextjs/QUICKSTART.md
new file mode 100644
index 000000000..54b015817
--- /dev/null
+++ b/packages/nextjs/QUICKSTART.md
@@ -0,0 +1,238 @@
+# `@asgardeo/nextjs` Quickstart
+
+This guide will help you quickly integrate Asgardeo authentication into your Next.js application using Auth.js.
+
+## Prerequisites
+
+- [Node.js](https://nodejs.org/en/download) (version 18 or later. LTS version recommended)
+- An [Asgardeo account](https://wso2.com/asgardeo/docs/get-started/create-asgardeo-account/)
+- About 15 minutes
+
+## Step 1: Configure an Application in Asgardeo
+
+1. **Sign in to Asgardeo Console**
+   - Go to [Asgardeo Console](https://console.asgardeo.io/)
+   - Sign in with your Asgardeo account
+
+2. **Create a New Application**
+   - Click **Applications** in the left sidebar
+   - Click **+ New Application**
+   - Choose **Traditional Web Application**
+   - Enter your application name (e.g., "Teamspace")
+
+3. **Note Down Your Credentials from the `Quickstart` tab**
+   - From the **Protocol** tab:
+     - Copy the **Client ID**
+     - Copy the **Client Secret**
+   - From the **Info** tab:
+     - Copy the **Issuer URL**
+
+4. **Configure Application Settings from the `Protocol` tab**
+   - **Authorized redirect URLs**: Add your callback URL
+     - `http://localhost:3000`
+   - Click **Update** to save the configuration
+
+## Step 2: Create a Next.js Application
+
+If you don't have a Next.js application set up yet, you can create one:
+
+```bash
+# Using npm
+npm create next-app@latest next-sample -- --yes
+cd next-sample
+
+# Using pnpm
+pnpm create next-app@latest next-sample -- --yes
+cd next-sample
+
+# Using yarn
+yarn create next-app next-sample -- --yes
+cd next-sample
+```
+
+## Step 3: Install the SDK
+
+Install the Asgardeo Next.js SDK in your project:
+
+```bash
+# Using npm
+npm install @asgardeo/nextjs
+
+# Using pnpm
+pnpm add @asgardeo/nextjs
+
+# Using yarn
+yarn add @asgardeo/nextjs
+```
+
+## Step 4: Setup Environment Variables
+
+Create a `.env` file in your project root and add the following environment variables. Replace the placeholders with the values you copied from Asgardeo in Step 1.
+
+**.env**
+
+```bash
+NEXT_PUBLIC_ASGARDEO_BASE_URL="https://api.asgardeo.io/t/<your-org-name>"
+NEXT_PUBLIC_ASGARDEO_CLIENT_ID="<your-app-client-id>"
+ASGARDEO_CLIENT_SECRET="<your-app-client-secret>"
+```
+
+## Step 5: Setup the Middleware
+
+Create a `middleware.ts` file in your project root to handle authentication:
+
+```bash
+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.ASGARDEO_CLIENT_SECRET,
+});
+
+export async function middleware(request: NextRequest) {
+  return await asgardeo.middleware(request);
+}
+
+export const config = {
+  matcher: [
+    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
+    '/(api|trpc)(.*)',
+  ],
+};
+```
+
+## Step 6: Configure the Provider
+
+Wrap your application with the `AsgardeoProvider` in your main entry file i.e. `app/layout.tsx`:
+
+```tsx
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import {AsgardeoProvider} from '@asgardeo/nextjs';
+import "./globals.css";
+
+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} antialiased`}
+      >
+        <AsgardeoProvider>{children}</AsgardeoProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+## Step 7: Add Sign-in & Sign-out to Your App
+
+Update your `app/page.tsx` to include sign-in and sign-out functionality:
+
+```tsx
+import {SignInButton, SignedIn, SignOutButton, SignedOut} from '@asgardeo/nextjs';
+
+export default function Home() {
+  return (
+    <>
+      <SignedOut>
+        <SignInButton />
+      </SignedOut>
+      <SignedIn>
+        <SignOutButton />
+      </SignedIn>
+    </>
+  );
+}
+```
+
+## Step 8: Display User Information
+
+You can also display user information by using the `User` component & the `UserProfile` component:
+
+```tsx
+import { SignedIn, SignedOut, SignInButton, SignOutButton, User, UserProfile } from '@asgardeo/nextjs';
+
+export default function Home() {
+  return (
+    <>
+      <SignedIn>
+        <User>
+          {({ user }) => (
+            <div>
+              <h1>Welcome, {user.username}</h1>
+            </div>
+          )}
+        </User>
+        <UserProfile />
+        <SignOutButton />
+      </SignedIn>
+      <SignedOut>
+        <SignInButton />
+      </SignedOut>
+    </>
+  );
+}
+```
+
+## Step 9: Try Login
+
+Run your application and test the sign-in functionality. You should see a "Sign In" button when you're not signed in, and clicking it will redirect you to the Asgardeo sign-in page.
+
+```bash
+# Using npm
+npm run dev
+
+# Using pnpm
+pnpm dev
+
+# Using yarn
+yarn dev
+```
+
+## Next Steps
+
+🎉 **Congratulations!** You've successfully integrated Asgardeo authentication into your Next.js app.
+
+### What to explore next:
+
+- **User Profile Management** - Access and display detailed user profile information
+- **Protected Routes** - Implement route-level authentication using middleware
+- **Custom Styling** - Customize the appearance of your authentication flow
+- **Session Management** - Learn about managing user sessions and tokens
+- **Error Handling** - Implement proper error handling for authentication flows
+
+### Common Issues
+
+- **Redirect URL Mismatch**: Ensure your redirect URL in Asgardeo matches exactly: `http://localhost:3000`
+- **Environment Variables**: Double-check that all environment variables are correctly set in `.env`
+
+### Additional Resources
+
+- **[Auth.js Documentation](https://authjs.dev/)** - Learn more about Auth.js features and configuration
+- **[Asgardeo Documentation](https://wso2.com/asgardeo/docs/)** - Comprehensive guide to Asgardeo features
+- **[Next.js Documentation](https://nextjs.org/docs)** - Learn more about Next.js features and best practices
+
+For more help, visit the [Asgardeo Documentation](https://wso2.com/asgardeo/docs/) or check out our [examples](../../examples/).
diff --git a/packages/react/QUICKSTART.md b/packages/react/QUICKSTART.md
index dafa80aaa..2ab5543de 100644
--- a/packages/react/QUICKSTART.md
+++ b/packages/react/QUICKSTART.md
@@ -114,7 +114,7 @@ export default App
 
 You can also display user information by using the `User` component & the `UserProfile` component:
 
-```diff
+```tsx
 import { SignedIn, SignedOut, SignInButton, SignOutButton, User, UserProfile } from '@asgardeo/react'
 import './App.css'
 
@@ -122,14 +122,14 @@ function App() {
   return (
     <>
       <SignedIn>
-+        <User>
-+          {({ user }) => (
-+            <div>
-+              <h1>Welcome, {user.username}</h1>
-+            </div>
-+          )}
-+        </User>
-+        <UserProfile />
+        <User>
+          {({ user }) => (
+            <div>
+              <h1>Welcome, {user.username}</h1>
+            </div>
+          )}
+        </User>
+        <UserProfile />
         <SignOutButton />
       </SignedIn>
       <SignedOut>

From 3aa86cebb7077f516994a9a6773f3389e7d6a6c8 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 25 Jun 2025 15:55:20 +0530
Subject: [PATCH 94/96] docs: add real-dolls-build.md to introduce SignUp & B2B
 components

---
 .changeset/real-dolls-build.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/real-dolls-build.md

diff --git a/.changeset/real-dolls-build.md b/.changeset/real-dolls-build.md
new file mode 100644
index 000000000..4b21f9790
--- /dev/null
+++ b/.changeset/real-dolls-build.md
@@ -0,0 +1,5 @@
+---
+'@asgardeo/react': minor
+---
+
+Introduce `SignUp` & B2B components.

From f2ed1a660de99b327412d303ba591b75eddadf92 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 25 Jun 2025 16:03:29 +0530
Subject: [PATCH 95/96] chore(react): add header components including
 AuthenticatedActions, AuthenticatedMobileMenu, AuthenticatedNavigation, and
 PublicNavigation

---
 .../src/components/{header => Header}/AuthenticatedActions.tsx    | 0
 .../src/components/{header => Header}/AuthenticatedMobileMenu.tsx | 0
 .../src/components/{header => Header}/AuthenticatedNavigation.tsx | 0
 .../teamspace-react/src/components/{header => Header}/Header.tsx  | 0
 .../teamspace-react/src/components/{header => Header}/Logo.tsx    | 0
 .../src/components/{header => Header}/OrganizationSwitcher.tsx    | 0
 .../src/components/{header => Header}/PublicActions.tsx           | 0
 .../src/components/{header => Header}/PublicNavigation.tsx        | 0
 .../src/components/{header => Header}/UserDropdown.tsx            | 0
 9 files changed, 0 insertions(+), 0 deletions(-)
 rename samples/teamspace-react/src/components/{header => Header}/AuthenticatedActions.tsx (100%)
 rename samples/teamspace-react/src/components/{header => Header}/AuthenticatedMobileMenu.tsx (100%)
 rename samples/teamspace-react/src/components/{header => Header}/AuthenticatedNavigation.tsx (100%)
 rename samples/teamspace-react/src/components/{header => Header}/Header.tsx (100%)
 rename samples/teamspace-react/src/components/{header => Header}/Logo.tsx (100%)
 rename samples/teamspace-react/src/components/{header => Header}/OrganizationSwitcher.tsx (100%)
 rename samples/teamspace-react/src/components/{header => Header}/PublicActions.tsx (100%)
 rename samples/teamspace-react/src/components/{header => Header}/PublicNavigation.tsx (100%)
 rename samples/teamspace-react/src/components/{header => Header}/UserDropdown.tsx (100%)

diff --git a/samples/teamspace-react/src/components/header/AuthenticatedActions.tsx b/samples/teamspace-react/src/components/Header/AuthenticatedActions.tsx
similarity index 100%
rename from samples/teamspace-react/src/components/header/AuthenticatedActions.tsx
rename to samples/teamspace-react/src/components/Header/AuthenticatedActions.tsx
diff --git a/samples/teamspace-react/src/components/header/AuthenticatedMobileMenu.tsx b/samples/teamspace-react/src/components/Header/AuthenticatedMobileMenu.tsx
similarity index 100%
rename from samples/teamspace-react/src/components/header/AuthenticatedMobileMenu.tsx
rename to samples/teamspace-react/src/components/Header/AuthenticatedMobileMenu.tsx
diff --git a/samples/teamspace-react/src/components/header/AuthenticatedNavigation.tsx b/samples/teamspace-react/src/components/Header/AuthenticatedNavigation.tsx
similarity index 100%
rename from samples/teamspace-react/src/components/header/AuthenticatedNavigation.tsx
rename to samples/teamspace-react/src/components/Header/AuthenticatedNavigation.tsx
diff --git a/samples/teamspace-react/src/components/header/Header.tsx b/samples/teamspace-react/src/components/Header/Header.tsx
similarity index 100%
rename from samples/teamspace-react/src/components/header/Header.tsx
rename to samples/teamspace-react/src/components/Header/Header.tsx
diff --git a/samples/teamspace-react/src/components/header/Logo.tsx b/samples/teamspace-react/src/components/Header/Logo.tsx
similarity index 100%
rename from samples/teamspace-react/src/components/header/Logo.tsx
rename to samples/teamspace-react/src/components/Header/Logo.tsx
diff --git a/samples/teamspace-react/src/components/header/OrganizationSwitcher.tsx b/samples/teamspace-react/src/components/Header/OrganizationSwitcher.tsx
similarity index 100%
rename from samples/teamspace-react/src/components/header/OrganizationSwitcher.tsx
rename to samples/teamspace-react/src/components/Header/OrganizationSwitcher.tsx
diff --git a/samples/teamspace-react/src/components/header/PublicActions.tsx b/samples/teamspace-react/src/components/Header/PublicActions.tsx
similarity index 100%
rename from samples/teamspace-react/src/components/header/PublicActions.tsx
rename to samples/teamspace-react/src/components/Header/PublicActions.tsx
diff --git a/samples/teamspace-react/src/components/header/PublicNavigation.tsx b/samples/teamspace-react/src/components/Header/PublicNavigation.tsx
similarity index 100%
rename from samples/teamspace-react/src/components/header/PublicNavigation.tsx
rename to samples/teamspace-react/src/components/Header/PublicNavigation.tsx
diff --git a/samples/teamspace-react/src/components/header/UserDropdown.tsx b/samples/teamspace-react/src/components/Header/UserDropdown.tsx
similarity index 100%
rename from samples/teamspace-react/src/components/header/UserDropdown.tsx
rename to samples/teamspace-react/src/components/Header/UserDropdown.tsx

From e1389a7a17e4e4ec156a7f12765e86fb61ef83e7 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 25 Jun 2025 16:06:46 +0530
Subject: [PATCH 96/96] fix(react): make onInitialize and onSubmit props
 optional

---
 .../react/src/components/presentation/SignUp/BaseSignUp.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
index 5207e6e1b..f2491f158 100644
--- a/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
+++ b/packages/react/src/components/presentation/SignUp/BaseSignUp.tsx
@@ -96,14 +96,14 @@ export interface BaseSignUpProps {
    * Function to initialize sign-up flow.
    * @returns Promise resolving to the initial sign-up response.
    */
-  onInitialize: (payload?: EmbeddedFlowExecuteRequestPayload) => Promise<EmbeddedFlowExecuteResponse>;
+  onInitialize?: (payload?: EmbeddedFlowExecuteRequestPayload) => Promise<EmbeddedFlowExecuteResponse>;
 
   /**
    * Function to handle sign-up steps.
    * @param payload - The sign-up payload.
    * @returns Promise resolving to the sign-up response.
    */
-  onSubmit: (payload: EmbeddedFlowExecuteRequestPayload) => Promise<EmbeddedFlowExecuteResponse>;
+  onSubmit?: (payload: EmbeddedFlowExecuteRequestPayload) => Promise<EmbeddedFlowExecuteResponse>;
 
   /**
    * Size variant for the component.