From 8e807531c7b31a4d98b0472fc57f0c37ac348fed Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Sat, 9 May 2026 15:16:57 +0530
Subject: [PATCH] feat: update apsara

---
 web/pnpm-lock.yaml                            |  34 ++++-
 web/sdk/package.json                          |   2 +-
 web/sdk/react/utils/transform-query.ts        |   6 +-
 .../magic-link-verify-view.tsx                |   4 +-
 .../auth/magic-link/magic-link-view.tsx       |   4 +-
 .../auth/subscribe/subscribe-view.tsx         |  50 ++++----
 .../confirm-cycle-switch-dialog.tsx           |   6 +-
 .../components/upcoming-billing-cycle.tsx     |   8 +-
 .../create-organization-view.tsx              |  29 +++--
 .../components/delete-organization-dialog.tsx |  16 ++-
 .../react/views-new/general/general-view.tsx  |  39 +++---
 .../components/invite-member-dialog.tsx       |  12 +-
 .../members/components/member-columns.tsx     |   2 +-
 .../pat/components/pat-created-dialog.tsx     |   4 +-
 .../pat/components/pat-form-dialog.tsx        | 117 +++++++++---------
 .../pat/components/pat-project-chips.tsx      |   2 +-
 .../components/confirm-plan-change-dialog.tsx |  12 +-
 .../react/views-new/profile/profile-view.tsx  |  41 +++---
 .../components/add-project-dialog.tsx         |  16 ++-
 .../components/edit-project-dialog.tsx        |  16 ++-
 .../security/components/add-domain-dialog.tsx |  18 +--
 .../components/delete-domain-dialog.tsx       |  18 +--
 .../components/verify-domain-dialog.tsx       |   4 +-
 .../components/add-service-account-dialog.tsx |  16 ++-
 .../components/add-token-form.tsx             |  15 ++-
 .../teams/components/add-team-dialog.tsx      |  29 +++--
 .../teams/components/edit-team-dialog.tsx     |  31 +++--
 .../tokens/components/add-tokens-dialog.tsx   |  51 ++++----
 28 files changed, 351 insertions(+), 251 deletions(-)

diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index e519f28e9..be73fcd74 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -225,8 +225,8 @@ importers:
         specifier: ^3.10.0
         version: 3.10.0(react-hook-form@7.71.2(react@19.2.4))
       '@raystack/apsara-v1':
-        specifier: npm:@raystack/apsara@1.0.0-rc.2
-        version: '@raystack/apsara@1.0.0-rc.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)'
+        specifier: npm:@raystack/apsara@1.0.0-rc.5
+        version: '@raystack/apsara@1.0.0-rc.5(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)'
       '@raystack/proton':
         specifier: 0.1.0-7523cfd3a676d3fb72d63c8c4f0476738a2217b3
         version: 0.1.0-7523cfd3a676d3fb72d63c8c4f0476738a2217b3(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.21(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -2234,6 +2234,17 @@ packages:
       '@types/react':
         optional: true
 
+  '@raystack/apsara@1.0.0-rc.5':
+    resolution: {integrity: sha512-IUWVSTqVMA9OCL5/5xQlvCpu0s/j/JAiR4e6/MbNdQ0dboYRgXKrCIDfsaYVeiwgjy138Bdw68rClZTGO+Kk4g==}
+    engines: {node: '>=22'}
+    peerDependencies:
+      '@types/react': ^19
+      react: ^19
+      react-dom: ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@raystack/proton@0.1.0-7523cfd3a676d3fb72d63c8c4f0476738a2217b3':
     resolution: {integrity: sha512-M3xF5gUqiPnam9Wb7qEsEECTqKYF0yZQJihkmNvHBs5fMA+b5A/lyUujwCTYYFJwk10V8Trr1t4v9uQ19gCoww==}
     peerDependencies:
@@ -9543,6 +9554,25 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react-dom'
 
+  '@raystack/apsara@1.0.0-rc.5(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@base-ui/react': 1.3.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@base-ui/utils': 0.2.6(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-icons': 1.3.2(react@19.2.4)
+      '@tanstack/match-sorter-utils': 8.19.4
+      '@tanstack/react-table': 8.21.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@tanstack/react-virtual': 3.13.19(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@tanstack/table-core': 8.21.3
+      class-variance-authority: 0.7.1
+      color: 5.0.3
+      dayjs: 1.11.19
+      prism-react-renderer: 2.4.1(react@19.2.4)
+      react: 19.2.4
+      react-day-picker: 9.14.0(react@19.2.4)
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+
   '@raystack/proton@0.1.0-7523cfd3a676d3fb72d63c8c4f0476738a2217b3(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.21(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
       '@bufbuild/protobuf': 2.11.0
diff --git a/web/sdk/package.json b/web/sdk/package.json
index faacd433a..3083e36af 100644
--- a/web/sdk/package.json
+++ b/web/sdk/package.json
@@ -107,7 +107,7 @@
     "@connectrpc/connect-query": "2.1.1",
     "@connectrpc/connect-web": "2.1.1",
     "@hookform/resolvers": "^3.10.0",
-    "@raystack/apsara-v1": "npm:@raystack/apsara@1.0.0-rc.2",
+    "@raystack/apsara-v1": "npm:@raystack/apsara@1.0.0-rc.5",
     "@raystack/proton": "0.1.0-7523cfd3a676d3fb72d63c8c4f0476738a2217b3",
     "@tanstack/react-query": "^5.90.2",
     "@tanstack/react-router": "^1.168.3",
diff --git a/web/sdk/react/utils/transform-query.ts b/web/sdk/react/utils/transform-query.ts
index 0652a073a..b9de9fd02 100644
--- a/web/sdk/react/utils/transform-query.ts
+++ b/web/sdk/react/utils/transform-query.ts
@@ -22,9 +22,7 @@ export interface TransformOptions {
 /**
  * Converts a filter value to the appropriate RQLFilter value format
  */
-function convertFilterValue(
-  value: string | number | boolean | null | undefined,
-): RQLFilter["value"] {
+function convertFilterValue(value: unknown): RQLFilter["value"] {
   switch (typeof value) {
     case "boolean":
       return { case: "boolValue", value };
@@ -33,7 +31,7 @@ function convertFilterValue(
     case "string":
       return { case: "stringValue", value };
     default:
-      return { case: "stringValue", value: value ?? "" };
+      return { case: "stringValue", value: value == null ? "" : String(value) };
   }
 }
 
diff --git a/web/sdk/react/views-new/auth/magic-link-verify/magic-link-verify-view.tsx b/web/sdk/react/views-new/auth/magic-link-verify/magic-link-verify-view.tsx
index 923724896..9d5189e08 100644
--- a/web/sdk/react/views-new/auth/magic-link-verify/magic-link-verify-view.tsx
+++ b/web/sdk/react/views-new/auth/magic-link-verify/magic-link-verify-view.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Button, Text, Link, Flex, InputField } from '@raystack/apsara-v1';
+import { Button, Text, Link, Flex, Input } from '@raystack/apsara-v1';
 import {
   ChangeEvent,
   ComponentPropsWithRef,
@@ -96,7 +96,7 @@ export const MagicLinkVerifyView = ({
 
       <form onSubmit={OTPVerifyHandler} className={styles.form}>
         <Flex direction="column" gap={2} className={styles.otpInputContainer}>
-          <InputField
+          <Input
             data-test-id="enter-code"
             autoFocus
             size="large"
diff --git a/web/sdk/react/views-new/auth/magic-link/magic-link-view.tsx b/web/sdk/react/views-new/auth/magic-link/magic-link-view.tsx
index aca9f623c..897213bbf 100644
--- a/web/sdk/react/views-new/auth/magic-link/magic-link-view.tsx
+++ b/web/sdk/react/views-new/auth/magic-link/magic-link-view.tsx
@@ -4,7 +4,7 @@ import {
   Text,
   Separator,
   Flex,
-  InputField
+  Input
 } from '@raystack/apsara-v1';
 import { ComponentPropsWithRef, ReactNode, useCallback, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -115,7 +115,7 @@ export const MagicLinkView = ({
     <form className={styles.form} onSubmit={handleSubmit(magicLinkHandler)}>
       {!open && <Separator />}
       <Flex direction="column" align="start" className={styles.field}>
-        <InputField
+        <Input
           {...register('email')}
           size="large"
           placeholder="name@example.com"
diff --git a/web/sdk/react/views-new/auth/subscribe/subscribe-view.tsx b/web/sdk/react/views-new/auth/subscribe/subscribe-view.tsx
index da8fd5a12..9aede705b 100644
--- a/web/sdk/react/views-new/auth/subscribe/subscribe-view.tsx
+++ b/web/sdk/react/views-new/auth/subscribe/subscribe-view.tsx
@@ -8,7 +8,8 @@ import {
   Button,
   Flex,
   Text,
-  InputField,
+  Field,
+  Input,
   Toast,
   toastManager,
   Image,
@@ -167,30 +168,33 @@ export const SubscribeView = ({
               {desc}
             </Text>
           </Flex>
-          <InputField
-            {...register('name')}
-            label="Name"
-            placeholder="Enter name"
-            error={errors.name?.message}
-            data-test-id="subscribe-name-input"
-          />
-          <InputField
-            {...register('email')}
-            label="Email"
-            type="email"
-            placeholder="Enter email"
-            error={errors.email?.message}
-            data-test-id="subscribe-email-input"
-          />
-          <InputField
-            {...register('contactNumber')}
-            optional
+          <Field label="Name" error={errors.name?.message}>
+            <Input
+              {...register('name')}
+              placeholder="Enter name"
+              data-test-id="subscribe-name-input"
+            />
+          </Field>
+          <Field label="Email" error={errors.email?.message}>
+            <Input
+              {...register('email')}
+              type="email"
+              placeholder="Enter email"
+              data-test-id="subscribe-email-input"
+            />
+          </Field>
+          <Field
             label="Contact number"
-            placeholder="Enter contact"
+            description="Add country code at the start"
+            required={false}
             error={errors.contactNumber?.message}
-            helperText="Add country code at the start"
-            data-test-id="subscribe-contact-input"
-          />
+          >
+            <Input
+              {...register('contactNumber')}
+              placeholder="Enter contact"
+              data-test-id="subscribe-contact-input"
+            />
+          </Field>
           <Button
             className={styles.button}
             type="submit"
diff --git a/web/sdk/react/views-new/billing/components/confirm-cycle-switch-dialog.tsx b/web/sdk/react/views-new/billing/components/confirm-cycle-switch-dialog.tsx
index bb9d39d6d..c9db04574 100644
--- a/web/sdk/react/views-new/billing/components/confirm-cycle-switch-dialog.tsx
+++ b/web/sdk/react/views-new/billing/components/confirm-cycle-switch-dialog.tsx
@@ -224,7 +224,7 @@ function ConfirmCycleSwitchContent({
             <Skeleton />
           ) : (
             <Text size="small" variant="secondary">
-              <Text as="span" size="small" weight="medium">
+              <Text size="small" weight="medium">
                 Current cycle:
               </Text>{' '}
               {activePlanIntervalName}
@@ -234,7 +234,7 @@ function ConfirmCycleSwitchContent({
             <Skeleton />
           ) : (
             <Text size="small" variant="secondary">
-              <Text as="span" size="small" weight="medium">
+              <Text size="small" weight="medium">
                 New cycle:
               </Text>{' '}
               {nextPlanIntervalName} (
@@ -247,7 +247,7 @@ function ConfirmCycleSwitchContent({
           {!isLoading && savings && (
             <Text size="small" variant="secondary">
               You can save{' '}
-              <Text as="span" size="small" weight="medium">
+              <Text size="small" weight="medium">
                 <Amount
                   value={savings.amount}
                   currency={savings.currency}
diff --git a/web/sdk/react/views-new/billing/components/upcoming-billing-cycle.tsx b/web/sdk/react/views-new/billing/components/upcoming-billing-cycle.tsx
index 1c2aa9830..4dc22b72e 100644
--- a/web/sdk/react/views-new/billing/components/upcoming-billing-cycle.tsx
+++ b/web/sdk/react/views-new/billing/components/upcoming-billing-cycle.tsx
@@ -171,7 +171,7 @@ export function UpcomingBillingCycle({
       >
         <Flex gap={3} align="center">
           <Text size="small">
-            <Text as="span" size="small" weight="medium">Plan:</Text>
+            <Text size="small" weight="medium">Plan:</Text>
             {' '}{planName}
           </Text>
           {switchablePlan && isAllowed && !alreadyPhased ? (
@@ -188,18 +188,18 @@ export function UpcomingBillingCycle({
         </Flex>
         <Flex gap={5} align="center">
           <Text size="small">
-            <Text as="span" size="small" weight="medium">Next billing:</Text>
+            <Text size="small" weight="medium">Next billing:</Text>
             {' '}{timestampToDayjs(dueDate)?.format(config.dateFormat) || '-'}
           </Text>
           <div className={styles.separator} />
           <Text size="small">
-            <Text as="span" size="small" weight="medium">Users:</Text>
+            <Text size="small" weight="medium">Users:</Text>
             {' '}{memberCount}
           </Text>
           <div className={styles.separator} />
           <Flex gap={2} align="center">
             <Text size="small">
-              <Text as="span" size="small" weight="medium">Amount:</Text>
+              <Text size="small" weight="medium">Amount:</Text>
               {' '}
               <Amount
                 currency={upcomingInvoice?.currency}
diff --git a/web/sdk/react/views-new/create-organization/create-organization-view.tsx b/web/sdk/react/views-new/create-organization/create-organization-view.tsx
index 58bc3d683..a4573db53 100644
--- a/web/sdk/react/views-new/create-organization/create-organization-view.tsx
+++ b/web/sdk/react/views-new/create-organization/create-organization-view.tsx
@@ -6,7 +6,8 @@ import {
   Text,
   Headline,
   Flex,
-  InputField,
+  Field,
+  Input,
   toastManager
 } from '@raystack/apsara-v1';
 import { ComponentPropsWithRef } from 'react';
@@ -94,20 +95,26 @@ export const CreateOrganizationView = ({
       </Flex>
       <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
         <Flex direction="column" align="center" gap={9} className={styles.card}>
-          <InputField
+          <Field
             label={`${t.organization({ case: 'capital' })} name`}
-            size="large"
             error={errors.title && String(errors.title?.message)}
-            {...register('title')}
-            placeholder={`Provide ${t.organization({ case: 'lower' })} name`}
-          />
-          <InputField
+          >
+            <Input
+              size="large"
+              {...register('title')}
+              placeholder={`Provide ${t.organization({ case: 'lower' })} name`}
+            />
+          </Field>
+          <Field
             label={`${t.organization({ case: 'capital' })} URL`}
-            size="large"
             error={errors.name && String(errors.name?.message)}
-            {...register('name')}
-            placeholder="raystack.org/"
-          />
+          >
+            <Input
+              size="large"
+              {...register('name')}
+              placeholder="raystack.org/"
+            />
+          </Field>
           <Button
             className={styles.submit}
             type="submit"
diff --git a/web/sdk/react/views-new/general/components/delete-organization-dialog.tsx b/web/sdk/react/views-new/general/components/delete-organization-dialog.tsx
index 4a3232762..83a4d2fae 100644
--- a/web/sdk/react/views-new/general/components/delete-organization-dialog.tsx
+++ b/web/sdk/react/views-new/general/components/delete-organization-dialog.tsx
@@ -14,7 +14,8 @@ import {
   Text,
   Flex,
   Dialog,
-  InputField,
+  Field,
+  Input,
   toastManager
 } from '@raystack/apsara-v1';
 import { useFrontier } from '../../../contexts/FrontierContext';
@@ -104,17 +105,20 @@ export const DeleteOrganizationDialog = ({
                 This action can not be undone. This will permanently
                 delete all the projects and resources in {organization?.title}.
               </Text>
-              <InputField
+              <Field
                 label={`Please type name of the ${orgLabel} to confirm.`}
-                size="large"
                 error={
                   errors.title
                     ? String(errors.title.message)
                     : undefined
                 }
-                {...register('title')}
-                placeholder={`Provide the ${orgLabel} name`}
-              />
+              >
+                <Input
+                  size="large"
+                  {...register('title')}
+                  placeholder={`Provide the ${orgLabel} name`}
+                />
+              </Field>
               <Flex gap={3} align="start">
                 <Checkbox
                   checked={isAcknowledged}
diff --git a/web/sdk/react/views-new/general/general-view.tsx b/web/sdk/react/views-new/general/general-view.tsx
index fd2fdd235..80e7b7d45 100644
--- a/web/sdk/react/views-new/general/general-view.tsx
+++ b/web/sdk/react/views-new/general/general-view.tsx
@@ -21,7 +21,8 @@ import {
   Skeleton,
   Text,
   Flex,
-  InputField,
+  Field,
+  Input,
   toastManager
 } from '@raystack/apsara-v1';
 import { useFrontier } from '../../contexts/FrontierContext';
@@ -207,25 +208,31 @@ export function GeneralView({ onDeleteSuccess, urlPrefix }: GeneralViewProps = {
                 </>
               ) : (
                 <>
-                  <InputField
+                  <Field
                     label={`${orgLabel} name`}
-                    size="large"
                     error={errors.title && String(errors.title?.message)}
-                    defaultValue={organization?.title || ''}
-                    disabled={!canUpdateWorkspace}
-                    placeholder={`Provide ${orgLabelLower} name`}
-                    {...register('title')}
-                  />
-                  <InputField
+                  >
+                    <Input
+                      size="large"
+                      defaultValue={organization?.title || ''}
+                      disabled={!canUpdateWorkspace}
+                      placeholder={`Provide ${orgLabelLower} name`}
+                      {...register('title')}
+                    />
+                  </Field>
+                  <Field
                     label={`${orgLabel} URL`}
-                    size="large"
                     error={errors.name && String(errors.name?.message)}
-                    defaultValue={organization?.name || ''}
-                    disabled
-                    prefix={URL_PREFIX}
-                    placeholder={`Provide ${orgLabelLower} URL`}
-                    {...register('name')}
-                  />
+                  >
+                    <Input
+                      size="large"
+                      defaultValue={organization?.name || ''}
+                      disabled
+                      prefix={URL_PREFIX}
+                      placeholder={`Provide ${orgLabelLower} URL`}
+                      {...register('name')}
+                    />
+                  </Field>
                 </>
               )}
             </Flex>
diff --git a/web/sdk/react/views-new/members/components/invite-member-dialog.tsx b/web/sdk/react/views-new/members/components/invite-member-dialog.tsx
index aec41a391..40995ad00 100644
--- a/web/sdk/react/views-new/members/components/invite-member-dialog.tsx
+++ b/web/sdk/react/views-new/members/components/invite-member-dialog.tsx
@@ -21,6 +21,7 @@ import {
   Select,
   Flex,
   Dialog,
+  Field,
   TextArea,
   toastManager
 } from '@raystack/apsara-v1';
@@ -169,11 +170,12 @@ export function InviteMemberDialog({ handle, showTeamField = true, refetch }: In
               {isLoading ? (
                 <Skeleton height="80px" />
               ) : (
-                <TextArea
-                  label="Email"
-                  {...register('emails')}
-                  placeholder="abc@example.com, xyz@example.com"
-                />
+                <Field label="Email">
+                  <TextArea
+                    {...register('emails')}
+                    placeholder="abc@example.com, xyz@example.com"
+                  />
+                </Field>
               )}
               <Flex direction="column" gap={2}>
                 <Label>Invite as</Label>
diff --git a/web/sdk/react/views-new/members/components/member-columns.tsx b/web/sdk/react/views-new/members/components/member-columns.tsx
index 9915db22e..6a1265128 100644
--- a/web/sdk/react/views-new/members/components/member-columns.tsx
+++ b/web/sdk/react/views-new/members/components/member-columns.tsx
@@ -97,7 +97,7 @@ export const getColumns = ({
           <Text size="regular" variant="secondary">
             {roleDisplay}
             {member.invited && (
-              <Text as="span" size="regular" className={styles.pendingText}>
+              <Text size="regular" className={styles.pendingText}>
                 {' '}
                 (Pending invite)
               </Text>
diff --git a/web/sdk/react/views-new/pat/components/pat-created-dialog.tsx b/web/sdk/react/views-new/pat/components/pat-created-dialog.tsx
index 4bdca7eb7..42b05071a 100644
--- a/web/sdk/react/views-new/pat/components/pat-created-dialog.tsx
+++ b/web/sdk/react/views-new/pat/components/pat-created-dialog.tsx
@@ -7,7 +7,7 @@ import {
   CopyButton,
   Dialog,
   Flex,
-  InputField,
+  Input,
   Text
 } from '@raystack/apsara-v1';
 
@@ -42,7 +42,7 @@ export function PATCreatedDialog({ handle, onClose }: PATCreatedDialogProps) {
             <Dialog.Body>
               <Flex direction="column" gap={7}>
                 <Text size="small">{description}</Text>
-                <InputField
+                <Input
                   value={token}
                   readOnly
                   trailingIcon={
diff --git a/web/sdk/react/views-new/pat/components/pat-form-dialog.tsx b/web/sdk/react/views-new/pat/components/pat-form-dialog.tsx
index e08a345d5..feb3d2f52 100644
--- a/web/sdk/react/views-new/pat/components/pat-form-dialog.tsx
+++ b/web/sdk/react/views-new/pat/components/pat-form-dialog.tsx
@@ -23,7 +23,8 @@ import {
   Chip,
   Dialog,
   Flex,
-  InputField,
+  Field,
+  Input,
   Label,
   Radio,
   Select,
@@ -356,28 +357,8 @@ export function PATFormDialog({
                 </Flex>
               ) : (
                 <>
-                  <InputField
+                  <Field
                     label="Name"
-                    name={titleField.name}
-                    ref={titleField.ref}
-                    onChange={e => {
-                      titleField.onChange(e);
-                      if (
-                        isUpdateMode &&
-                        e.target.value === initialData?.title
-                      ) {
-                        setTitleAvailable(true);
-                      } else {
-                        setTitleAvailable(null);
-                      }
-                    }}
-                    onBlur={async e => {
-                      titleField.onBlur(e);
-                      await handleTitleBlur();
-                    }}
-                    size="large"
-                    placeholder="Enter token name"
-                    trailingIcon={titleChecking ? <Spinner size={2} /> : undefined}
                     error={
                       errors.title
                         ? String(errors.title?.message)
@@ -385,8 +366,31 @@ export function PATFormDialog({
                           ? 'This name is already taken'
                           : undefined
                     }
-                    data-test-id="frontier-sdk-pat-form-title-input"
-                  />
+                  >
+                    <Input
+                      name={titleField.name}
+                      ref={titleField.ref}
+                      onChange={e => {
+                        titleField.onChange(e);
+                        if (
+                          isUpdateMode &&
+                          e.target.value === initialData?.title
+                        ) {
+                          setTitleAvailable(true);
+                        } else {
+                          setTitleAvailable(null);
+                        }
+                      }}
+                      onBlur={async e => {
+                        titleField.onBlur(e);
+                        await handleTitleBlur();
+                      }}
+                      size="large"
+                      placeholder="Enter token name"
+                      trailingIcon={titleChecking ? <Spinner size={2} /> : undefined}
+                      data-test-id="frontier-sdk-pat-form-title-input"
+                    />
+                  </Field>
 
                   {!isUpdateMode && (
                     <Flex direction="column" gap={2}>
@@ -529,7 +533,15 @@ export function PATFormDialog({
                       <Controller
                         name="projectIds"
                         control={control}
-                        render={({ field }) => (
+                        render={({ field }) => {
+                          const selectedIds = field.value ?? [];
+                          const visible = selectedIds.slice(
+                            0,
+                            MAX_VISIBLE_PROJECT_CHIPS
+                          );
+                          const remaining =
+                            selectedIds.length - visible.length;
+                          return (
                           <Select
                             multiple
                             value={field.value}
@@ -540,38 +552,28 @@ export function PATFormDialog({
                           >
                             <Select.Trigger>
                               <Select.Value placeholder="Select projects">
-                                {() => {
-                                  const selectedIds = field.value;
-                                  const visible = selectedIds.slice(
-                                    0,
-                                    MAX_VISIBLE_PROJECT_CHIPS
-                                  );
-                                  const remaining =
-                                    selectedIds.length - visible.length;
-                                  return (
-                                    <Flex gap={2} align="center">
-                                      {visible.map(id => (
-                                        <Chip
-                                          key={id}
-                                          className={styles.projectChip}
+                                {selectedIds.length === 0 ? null : (
+                                  <Flex gap={2} align="center">
+                                    {visible.map(id => (
+                                      <Chip
+                                        key={id}
+                                        className={styles.projectChip}
+                                      >
+                                        <span
+                                          className={
+                                            styles.projectChipLabel
+                                          }
                                         >
-                                          <span
-                                            className={
-                                              styles.projectChipLabel
-                                            }
-                                          >
-                                            {projects.find(p => p.id === id)
-                                              ?.title || id}
-                                          </span>
-                                        </Chip>
-                                      ))}
-                                      {remaining > 0 && (
-                                        <Chip>{`+${remaining}`}</Chip>
-                                      )}
-                                    </Flex>
-                                  );
-                                }
-                                }
+                                          {projects.find(p => p.id === id)
+                                            ?.title || id}
+                                        </span>
+                                      </Chip>
+                                    ))}
+                                    {remaining > 0 && (
+                                      <Chip>{`+${remaining}`}</Chip>
+                                    )}
+                                  </Flex>
+                                )}
                               </Select.Value>
                             </Select.Trigger>
                             <Select.Content>
@@ -585,7 +587,8 @@ export function PATFormDialog({
                               ))}
                             </Select.Content>
                           </Select>
-                        )}
+                          );
+                        }}
                       />
                     )}
                     {errors.projectIds && (
diff --git a/web/sdk/react/views-new/pat/components/pat-project-chips.tsx b/web/sdk/react/views-new/pat/components/pat-project-chips.tsx
index 52435d9cf..2eee006fc 100644
--- a/web/sdk/react/views-new/pat/components/pat-project-chips.tsx
+++ b/web/sdk/react/views-new/pat/components/pat-project-chips.tsx
@@ -69,7 +69,7 @@ export function PATProjectChips({ projects }: PATProjectChipsProps) {
         <Chip
           className={styles.countChip}
           onClick={() => setExpanded(true)}
-          ariaLabel={`Show ${hidden} more projects`}
+          aria-label={`Show ${hidden} more projects`}
           data-test-id="frontier-sdk-pat-project-chips-expand-btn"
         >
           +{hidden}
diff --git a/web/sdk/react/views-new/plans/components/confirm-plan-change-dialog.tsx b/web/sdk/react/views-new/plans/components/confirm-plan-change-dialog.tsx
index 5d42195fb..95202e70f 100644
--- a/web/sdk/react/views-new/plans/components/confirm-plan-change-dialog.tsx
+++ b/web/sdk/react/views-new/plans/components/confirm-plan-change-dialog.tsx
@@ -216,10 +216,10 @@ function ConfirmPlanChangeContent({
             <Skeleton height="16px" />
           ) : (
             <Text size="small">
-              <Text size="small" weight="medium" as="span">
+              <Text size="small" weight="medium">
                 Current plan:
               </Text>{' '}
-              <Text size="small" variant="secondary" as="span">
+              <Text size="small" variant="secondary">
                 {activePlan?.title}
               </Text>
             </Text>
@@ -229,10 +229,10 @@ function ConfirmPlanChangeContent({
             <Skeleton height="16px" />
           ) : (
             <Text size="small">
-              <Text size="small" weight="medium" as="span">
+              <Text size="small" weight="medium">
                 New plan:
               </Text>{' '}
-              <Text size="small" variant="secondary" as="span">
+              <Text size="small" variant="secondary">
                 {newPlan?.title} ({effectiveDateLabel})
               </Text>
             </Text>
@@ -242,10 +242,10 @@ function ConfirmPlanChangeContent({
             <Skeleton height="16px" />
           ) : isUpgrade ? (
             <Text size="small">
-              <Text size="small" weight="medium" as="span">
+              <Text size="small" weight="medium">
                 Price:
               </Text>{' '}
-              <Text size="small" variant="secondary" as="span">
+              <Text size="small" variant="secondary">
                 <Amount
                   value={amount || 0}
                   currency={currency}
diff --git a/web/sdk/react/views-new/profile/profile-view.tsx b/web/sdk/react/views-new/profile/profile-view.tsx
index 7526ac5a4..a4759163c 100644
--- a/web/sdk/react/views-new/profile/profile-view.tsx
+++ b/web/sdk/react/views-new/profile/profile-view.tsx
@@ -13,7 +13,8 @@ import { useQueryClient } from '@tanstack/react-query';
 import {
   Button,
   Flex,
-  InputField,
+  Field,
+  Input,
   Skeleton,
   toastManager
 } from '@raystack/apsara-v1';
@@ -141,26 +142,32 @@ export function ProfileView() {
                 </>
               ) : (
                 <>
-                  <InputField
+                  <Field
                     label="Full name"
-                    size="large"
                     error={errors.title && String(errors.title?.message)}
-                    defaultValue={user?.title || ''}
-                    placeholder="Provide full name"
-                    {...register('title')}
-                    disabled={isLoading}
-                  />
-                  <InputField
+                  >
+                    <Input
+                      size="large"
+                      defaultValue={user?.title || ''}
+                      placeholder="Provide full name"
+                      {...register('title')}
+                      disabled={isLoading}
+                    />
+                  </Field>
+                  <Field
                     label="Email address"
-                    size="large"
                     error={errors.email && String(errors.email?.message)}
-                    value={user?.email || ''}
-                    type="email"
-                    placeholder="Provide email address"
-                    {...register('email')}
-                    readOnly
-                    disabled
-                  />
+                  >
+                    <Input
+                      size="large"
+                      value={user?.email || ''}
+                      type="email"
+                      placeholder="Provide email address"
+                      {...register('email')}
+                      readOnly
+                      disabled
+                    />
+                  </Field>
                 </>
               )}
             </Flex>
diff --git a/web/sdk/react/views-new/projects/components/add-project-dialog.tsx b/web/sdk/react/views-new/projects/components/add-project-dialog.tsx
index 991e7a62e..08dbc99ad 100644
--- a/web/sdk/react/views-new/projects/components/add-project-dialog.tsx
+++ b/web/sdk/react/views-new/projects/components/add-project-dialog.tsx
@@ -4,7 +4,8 @@ import {
   Button,
   Flex,
   Dialog,
-  InputField
+  Field,
+  Input
 } from '@raystack/apsara-v1';
 import { toastManager } from '@raystack/apsara-v1';
 import * as yup from 'yup';
@@ -95,13 +96,16 @@ export function AddProjectDialog({ handle, refetch }: AddProjectDialogProps) {
         <form onSubmit={handleSubmit(onSubmit)}>
           <Dialog.Body>
             <Flex direction="column" gap={5}>
-              <InputField
+              <Field
                 label="Project title"
-                size="large"
                 error={errors.title && String(errors.title?.message)}
-                {...register('title')}
-                placeholder="Provide project title"
-              />
+              >
+                <Input
+                  size="large"
+                  {...register('title')}
+                  placeholder="Provide project title"
+                />
+              </Field>
             </Flex>
           </Dialog.Body>
           <Dialog.Footer>
diff --git a/web/sdk/react/views-new/projects/components/edit-project-dialog.tsx b/web/sdk/react/views-new/projects/components/edit-project-dialog.tsx
index 215e76a2f..f864235c5 100644
--- a/web/sdk/react/views-new/projects/components/edit-project-dialog.tsx
+++ b/web/sdk/react/views-new/projects/components/edit-project-dialog.tsx
@@ -6,7 +6,8 @@ import {
   Flex,
   Text,
   Dialog,
-  InputField,
+  Field,
+  Input,
   Radio
 } from '@raystack/apsara-v1';
 import { toastManager } from '@raystack/apsara-v1';
@@ -135,13 +136,16 @@ function EditProjectForm({ payload, handle, refetch }: EditProjectFormProps) {
       </Dialog.Header>
       <Dialog.Body>
         <Flex direction="column" gap={5}>
-          <InputField
+          <Field
             label="Project name"
-            size="large"
             error={errors.title && String(errors.title?.message)}
-            {...register('title')}
-            placeholder="Enter project name"
-          />
+          >
+            <Input
+              size="large"
+              {...register('title')}
+              placeholder="Enter project name"
+            />
+          </Field>
           <Flex direction="column" gap={4}>
             <Text size="mini" weight="medium" variant="secondary">
               Project privacy
diff --git a/web/sdk/react/views-new/security/components/add-domain-dialog.tsx b/web/sdk/react/views-new/security/components/add-domain-dialog.tsx
index eafeb4300..5f1cfa970 100644
--- a/web/sdk/react/views-new/security/components/add-domain-dialog.tsx
+++ b/web/sdk/react/views-new/security/components/add-domain-dialog.tsx
@@ -16,7 +16,8 @@ import {
   Flex,
   Text,
   Dialog,
-  InputField,
+  Field,
+  Input,
   toastManager
 } from '@raystack/apsara-v1';
 import { useFrontier } from '../../../contexts/FrontierContext';
@@ -116,14 +117,17 @@ export function AddDomainDialog({
                 <Text size="small">
                   Adding a domain to allowed domains will result in charges for each user onboarded under that domain.
                 </Text>
-                <InputField
+                <Field
                   label="Domain name"
-                  size="large"
                   error={errors.domain && String(errors.domain?.message)}
-                  {...register('domain')}
-                  placeholder="example.com"
-                  data-test-id="frontier-sdk-add-domain-input"
-                />
+                >
+                  <Input
+                    size="large"
+                    {...register('domain')}
+                    placeholder="example.com"
+                    data-test-id="frontier-sdk-add-domain-input"
+                  />
+                </Field>
               </Flex>
             </Dialog.Body>
             <Dialog.Footer>
diff --git a/web/sdk/react/views-new/security/components/delete-domain-dialog.tsx b/web/sdk/react/views-new/security/components/delete-domain-dialog.tsx
index 0049f33d7..2f1fef995 100644
--- a/web/sdk/react/views-new/security/components/delete-domain-dialog.tsx
+++ b/web/sdk/react/views-new/security/components/delete-domain-dialog.tsx
@@ -18,7 +18,8 @@ import {
   Checkbox,
   Flex,
   Text,
-  InputField,
+  Field,
+  Input,
   Skeleton,
   toastManager
 } from '@raystack/apsara-v1';
@@ -160,14 +161,17 @@ function DeleteDomainContent({
                   This action can not be undone. This will permanently delete{' '}
                   <b>{domain?.name}</b>.
                 </Text>
-                <InputField
+                <Field
                   label="Please enter the domain name to confirm."
-                  size="large"
                   error={errors.domain && String(errors.domain?.message)}
-                  {...register('domain')}
-                  placeholder="Enter the domain name"
-                  data-test-id="frontier-sdk-delete-domain-input"
-                />
+                >
+                  <Input
+                    size="large"
+                    {...register('domain')}
+                    placeholder="Enter the domain name"
+                    data-test-id="frontier-sdk-delete-domain-input"
+                  />
+                </Field>
                 <Flex gap={3} align="start">
                   <Checkbox
                     checked={isAcknowledged}
diff --git a/web/sdk/react/views-new/security/components/verify-domain-dialog.tsx b/web/sdk/react/views-new/security/components/verify-domain-dialog.tsx
index de527058d..63b0f9330 100644
--- a/web/sdk/react/views-new/security/components/verify-domain-dialog.tsx
+++ b/web/sdk/react/views-new/security/components/verify-domain-dialog.tsx
@@ -14,7 +14,7 @@ import {
   Flex,
   Text,
   Dialog,
-  InputField,
+  Input,
   Skeleton,
   toastManager
 } from '@raystack/apsara-v1';
@@ -133,7 +133,7 @@ function VerifyDomainContent({
                 Before we can verify {domain?.name}, you&apos;ll need to create
                 a TXT record in your DNS configuration for this hostname.
               </Text>
-              <InputField
+              <Input
                 value={domain?.token || ''}
                 size="large"
                 readOnly
diff --git a/web/sdk/react/views-new/service-accounts/components/add-service-account-dialog.tsx b/web/sdk/react/views-new/service-accounts/components/add-service-account-dialog.tsx
index 32a21504d..623ff92ba 100644
--- a/web/sdk/react/views-new/service-accounts/components/add-service-account-dialog.tsx
+++ b/web/sdk/react/views-new/service-accounts/components/add-service-account-dialog.tsx
@@ -30,7 +30,8 @@ import {
   Text,
   Dialog,
   Flex,
-  InputField,
+  Field,
+  Input,
   Label,
   Select,
   Skeleton,
@@ -258,13 +259,16 @@ export function AddServiceAccountDialog({
                 </Flex>
               ) : (
                 <>
-                  <InputField
+                  <Field
                     label="Name"
-                    {...register('title')}
-                    size="large"
-                    placeholder="Provide service account name"
                     error={errors.title && String(errors.title?.message)}
-                  />
+                  >
+                    <Input
+                      {...register('title')}
+                      size="large"
+                      placeholder="Provide service account name"
+                    />
+                  </Field>
                   <Flex direction="column" gap={2}>
                     <Label>Project</Label>
                     <Controller
diff --git a/web/sdk/react/views-new/service-accounts/components/add-token-form.tsx b/web/sdk/react/views-new/service-accounts/components/add-token-form.tsx
index 2f99aaa15..01419d584 100644
--- a/web/sdk/react/views-new/service-accounts/components/add-token-form.tsx
+++ b/web/sdk/react/views-new/service-accounts/components/add-token-form.tsx
@@ -4,7 +4,7 @@ import { useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
-import { Flex, Button, InputField, toastManager } from '@raystack/apsara-v1';
+import { Flex, Button, Field, Input, toastManager } from '@raystack/apsara-v1';
 import { useMutation } from '@connectrpc/connect-query';
 import { create } from '@bufbuild/protobuf';
 import {
@@ -74,13 +74,16 @@ export function AddTokenForm({ serviceUserId, onAddToken }: AddTokenFormProps) {
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <Flex className={styles.addTokenRow} align="start">
-        <InputField
-          {...register('title')}
-          size="large"
-          placeholder="Label Name"
+        <Field
           error={errors.title && String(errors.title?.message)}
           className={styles.addTokenInput}
-        />
+        >
+          <Input
+            {...register('title')}
+            size="large"
+            placeholder="Label Name"
+          />
+        </Field>
         <Button
           variant="solid"
           color="accent"
diff --git a/web/sdk/react/views-new/teams/components/add-team-dialog.tsx b/web/sdk/react/views-new/teams/components/add-team-dialog.tsx
index d2a935738..586887ba2 100644
--- a/web/sdk/react/views-new/teams/components/add-team-dialog.tsx
+++ b/web/sdk/react/views-new/teams/components/add-team-dialog.tsx
@@ -4,7 +4,8 @@ import {
   Button,
   Flex,
   Dialog,
-  InputField
+  Field,
+  Input
 } from '@raystack/apsara-v1';
 import { toastManager } from '@raystack/apsara-v1';
 import * as yup from 'yup';
@@ -96,20 +97,26 @@ export function AddTeamDialog({ handle, refetch }: AddTeamDialogProps) {
         <form onSubmit={handleSubmit(onSubmit)}>
           <Dialog.Body>
             <Flex direction="column" gap={5}>
-              <InputField
+              <Field
                 label="Team title"
-                size="large"
                 error={errors.title && String(errors.title?.message)}
-                {...register('title')}
-                placeholder="Provide team title"
-              />
-              <InputField
+              >
+                <Input
+                  size="large"
+                  {...register('title')}
+                  placeholder="Provide team title"
+                />
+              </Field>
+              <Field
                 label="Team name"
-                size="large"
                 error={errors.name && String(errors.name?.message)}
-                {...register('name')}
-                placeholder="Provide team name"
-              />
+              >
+                <Input
+                  size="large"
+                  {...register('name')}
+                  placeholder="Provide team name"
+                />
+              </Field>
             </Flex>
           </Dialog.Body>
           <Dialog.Footer>
diff --git a/web/sdk/react/views-new/teams/components/edit-team-dialog.tsx b/web/sdk/react/views-new/teams/components/edit-team-dialog.tsx
index 41a47ccf5..c0e6af902 100644
--- a/web/sdk/react/views-new/teams/components/edit-team-dialog.tsx
+++ b/web/sdk/react/views-new/teams/components/edit-team-dialog.tsx
@@ -5,7 +5,8 @@ import {
   Button,
   Flex,
   Dialog,
-  InputField
+  Field,
+  Input
 } from '@raystack/apsara-v1';
 import { toastManager } from '@raystack/apsara-v1';
 import * as yup from 'yup';
@@ -124,20 +125,24 @@ function EditTeamForm({ payload, handle, refetch }: EditTeamFormProps) {
       </Dialog.Header>
       <Dialog.Body>
         <Flex direction="column" gap={5}>
-          <InputField
+          <Field
             label="Team title"
-            size="large"
             error={errors.title && String(errors.title?.message)}
-            {...register('title')}
-            placeholder="Provide team title"
-          />
-          <InputField
-            label="Team name"
-            size="large"
-            value={payload.name}
-            disabled
-            placeholder="Team name"
-          />
+          >
+            <Input
+              size="large"
+              {...register('title')}
+              placeholder="Provide team title"
+            />
+          </Field>
+          <Field label="Team name">
+            <Input
+              size="large"
+              value={payload.name}
+              disabled
+              placeholder="Team name"
+            />
+          </Field>
         </Flex>
       </Dialog.Body>
       <Dialog.Footer>
diff --git a/web/sdk/react/views-new/tokens/components/add-tokens-dialog.tsx b/web/sdk/react/views-new/tokens/components/add-tokens-dialog.tsx
index 4e282aa58..bca938885 100644
--- a/web/sdk/react/views-new/tokens/components/add-tokens-dialog.tsx
+++ b/web/sdk/react/views-new/tokens/components/add-tokens-dialog.tsx
@@ -1,5 +1,5 @@
 import { ClipboardEvent, KeyboardEvent, useMemo } from 'react';
-import { Button, Dialog, Flex, InputField, Skeleton } from '@raystack/apsara-v1';
+import { Button, Dialog, Flex, Field, Input, Skeleton } from '@raystack/apsara-v1';
 import { toastManager } from '@raystack/apsara-v1';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useMutation, useQuery } from '@connectrpc/connect-query';
@@ -142,32 +142,35 @@ export function AddTokensDialog({ handle }: AddTokensDialogProps) {
               {isLoading ? (
                 <Skeleton height="60px" width="100%" />
               ) : (
-                <InputField
+                <Field
                   label="Add tokens"
-                  size="large"
-                  type="number"
+                  description={productDescription}
                   error={errors.tokens && String(errors.tokens.message)}
-                  {...register('tokens', { valueAsNumber: true })}
-                  placeholder="Enter no. of tokens"
-                  helperText={productDescription}
-                  onKeyDown={(e: KeyboardEvent) =>
-                    ['e', 'E', '+', '-', '.'].includes(e.key) &&
-                    e.preventDefault()
-                  }
-                  onPaste={(e: ClipboardEvent) => {
-                    const pastedText = e.clipboardData.getData('text/plain');
-                    const parsedValue = parseInt(pastedText);
-                    e.preventDefault();
-                    if (
-                      !isNaN(parsedValue) &&
-                      parsedValue >= minQuantity &&
-                      parsedValue <= maxQuantity
-                    ) {
-                      setValue('tokens', parsedValue, { shouldDirty: true });
+                >
+                  <Input
+                    size="large"
+                    type="number"
+                    {...register('tokens', { valueAsNumber: true })}
+                    placeholder="Enter no. of tokens"
+                    onKeyDown={(e: KeyboardEvent) =>
+                      ['e', 'E', '+', '-', '.'].includes(e.key) &&
+                      e.preventDefault()
                     }
-                  }}
-                  data-test-id="frontier-sdk-add-tokens-input"
-                />
+                    onPaste={(e: ClipboardEvent) => {
+                      const pastedText = e.clipboardData.getData('text/plain');
+                      const parsedValue = parseInt(pastedText);
+                      e.preventDefault();
+                      if (
+                        !isNaN(parsedValue) &&
+                        parsedValue >= minQuantity &&
+                        parsedValue <= maxQuantity
+                      ) {
+                        setValue('tokens', parsedValue, { shouldDirty: true });
+                      }
+                    }}
+                    data-test-id="frontier-sdk-add-tokens-input"
+                  />
+                </Field>
               )}
             </Flex>
           </Dialog.Body>