raystack · paanSinghCoder · May 20, 2025 · May 20, 2025 · May 20, 2025 · May 23, 2025
diff --git a/sdks/js/packages/core/react/components/Header.tsx b/sdks/js/packages/core/react/components/Header.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from '@raystack/apsara';
+import { Flex, Text } from '@raystack/apsara/v1';
 import React, { ComponentPropsWithRef } from 'react';
 import logo from '~/react/assets/logo.png';
 
@@ -29,7 +29,7 @@ export const Header = ({ title, logo }: HeaderProps) => {
     >
       <div>{logo ? logo : defaultLogo}</div>
       <div className={styles.title}>
-        <Text size={9}>{title}</Text>
+        <Text className={styles.titleText}>{title}</Text>
       </div>
     </Flex>
   );

diff --git a/sdks/js/packages/core/react/components/Layout/index.tsx b/sdks/js/packages/core/react/components/Layout/index.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from '@raystack/apsara';
+import { Flex, Text } from '@raystack/apsara/v1';
 import { PropsWithChildren } from 'react';
 import styles from './layout.module.css';
 
@@ -10,7 +10,7 @@ export function Layout({ title, children }: PropsWithChildren<LayoutProps>) {
   return (
     <Flex direction="column" style={{ width: '100%' }}>
       <Flex className={styles.header}>
-        <Text size={6}>{title}</Text>
+        <Text size="large" weight="medium">{title}</Text>
       </Flex>
       <Flex direction="column" gap="large" className={styles.container}>
         {children}

diff --git a/sdks/js/packages/core/react/components/avatar-upload/index.tsx b/sdks/js/packages/core/react/components/avatar-upload/index.tsx
@@ -5,6 +5,7 @@
 } from 'react-image-crop';
 import { UploadIcon } from '@radix-ui/react-icons';
 import React, { useRef, useState } from 'react';
+
 import { Dialog, Flex, Text } from '@raystack/apsara';
 import { Button, Avatar, Image } from '@raystack/apsara/v1';
 
@@ -15,7 +16,7 @@
 interface CropModalProps {
  imgSrc?: string;
  onClose: () => void;
  onSave: (data: string) => void;
 }

 function CropModal({ onClose, imgSrc, onSave }: CropModalProps) {
@@ -99,7 +100,7 @@
             borderBottom: '1px solid var(--border-subtle)'
           }}
         >
-          <Text size={6} style={{ fontWeight: '500' }}>
+          <Text size="large" weight="medium">
             Crop your photo
           </Text>
           <Image
@@ -165,7 +166,7 @@
 interface AvatarUploadProps {
  subText?: string;
  value?: string;
  onChange?: (value: string) => void;
  disabled?: boolean;
  initials?: string;
 }

diff --git a/sdks/js/packages/core/react/components/common/upcoming-plan-change-banner/index.tsx b/sdks/js/packages/core/react/components/common/upcoming-plan-change-banner/index.tsx
@@ -1,5 +1,6 @@
-import { Flex, Text } from '@raystack/apsara';
-import { Button, Skeleton } from '@raystack/apsara/v1';
+
+import { Flex } from '@raystack/apsara';
+import { Button, Skeleton, Text, toast } from '@raystack/apsara/v1';
 import {
   DEFAULT_DATE_FORMAT,
   SUBSCRIPTION_STATES
@@ -16,7 +17,6 @@ import {
   getPlanIntervalName,
   getPlanNameWithInterval
 } from '~/react/utils';
-import { toast } from '@raystack/apsara/v1';
 
 interface ChangeBannerProps {
   isLoading?: boolean;
@@ -147,7 +147,7 @@ export function UpcomingPlanChangeBanner({
     <Flex className={styles.changeBannerBox} justify={'between'}>
       <Flex gap="small" className={styles.flex1} align={'center'}>
         <InfoCircledIcon className={styles.currentPlanInfoText} />
-        <Text>
+        <Text size="regular" variant="primary">
           Your {currentPlanName} will be{' '}
           {planAction?.btnDoneLabel.toLowerCase()} to {upcomingPlanName} from{' '}
           {expiryDate}.

diff --git a/sdks/js/packages/core/react/components/onboarding/magiclink-verify.tsx b/sdks/js/packages/core/react/components/onboarding/magiclink-verify.tsx
@@ -1,15 +1,14 @@
 'use client';
 
-import { Button } from '@raystack/apsara/v1';
-import { Flex, Text, TextField } from '@raystack/apsara';
+import { Button, Link, Text } from '@raystack/apsara/v1';
+import { Flex, TextField } from '@raystack/apsara';
 import React, {
   ComponentPropsWithRef,
   useCallback,
   useEffect,
   useRef,
   useState
 } from 'react';
-import { Link } from '@raystack/apsara/v1';
 import { Container } from '~/react/components/Container';
 import { Header } from '~/react/components/Header';
 import { useFrontier } from '~/react/contexts/FrontierContext';
@@ -81,7 +80,7 @@
        setLoading(false);
      }
    },
    [otp]
  );

  return (
@@ -89,9 +88,9 @@
       <Flex direction={'column'} gap="medium">
         <Header logo={logo} title={title} />
         {emailParam && (
-          <Text>
+          <Text size="regular">
             We have sent an OTP. Please check your inbox at
-            <b> {emailParam}</b>
+            <Text as="span" weight="medium"> {emailParam}</Text>
           </Text>
         )}
       </Flex>
@@ -113,7 +112,7 @@
             className={styles.textFieldCode}
           />
 
-          <Text size={2} className={styles.error}>
+          <Text size="small" variant="danger" className={styles.error}>
             {submitError && String(submitError)}
           </Text>
         </Flex>
@@ -131,7 +130,7 @@
       </form>
 
       <Link href={config.redirectLogin || ''} data-test-id="back-to-login">
-        <Text size={2}>Back to login</Text>
+        <Text size="small">Back to login</Text>
       </Link>
     </Container>
   );

diff --git a/sdks/js/packages/core/react/components/onboarding/magiclink.tsx b/sdks/js/packages/core/react/components/onboarding/magiclink.tsx
@@ -1,6 +1,6 @@
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Flex, Text, TextField } from '@raystack/apsara';
-import { Button, Separator } from '@raystack/apsara/v1';
+import { TextField } from '@raystack/apsara';
+import { Button, Flex, Separator, Text } from '@raystack/apsara/v1';
 import React, { useCallback, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import * as yup from 'yup';
@@ -135,9 +135,9 @@ export const MagicLink = ({ open = false, ...props }: MagicLinkProps) => {
         />
 
         <Text
-          size={1}
+          size="micro"
+          variant="danger"
           style={{
-            color: 'var(--foreground-danger)',
             position: 'absolute',
             top: 'calc(100% + 4px)'
           }}

diff --git a/sdks/js/packages/core/react/components/onboarding/oidc.tsx b/sdks/js/packages/core/react/components/onboarding/oidc.tsx
@@ -1,5 +1,4 @@
-import { Button } from '@raystack/apsara/v1';
-import { Text } from '@raystack/apsara';
+import { Button, Text } from '@raystack/apsara/v1';
 import React from 'react';
 import GoogleLogo from '~/react/assets/logos/google-logo.svg';
 import { capitalize } from '~/utils';
@@ -30,6 +29,6 @@ export const OIDCButton = ({
         style={{ marginRight: '4px' }}
       />
     ) : null}
-    <Text>Continue with {capitalize(provider)}</Text>
+    <Text size="regular">Continue with {capitalize(provider)}</Text>
   </Button>
 );
diff --git a/sdks/js/packages/core/react/components/onboarding/signin.tsx b/sdks/js/packages/core/react/components/onboarding/signin.tsx
@@ -1,5 +1,5 @@
-import { Flex, Text } from '@raystack/apsara';
-import { Link } from '@raystack/apsara/v1';
+import { Flex } from '@raystack/apsara';
+import { Link, Text } from '@raystack/apsara/v1';
 import React, { ComponentPropsWithRef, useCallback } from 'react';
 import { useFrontier } from '~/react/contexts/FrontierContext';
 import { Container } from '../Container';
@@ -63,7 +63,7 @@ export const SignIn = ({
       </Flex>
       {footer && (
         <div style={{ fontWeight: '400' }}>
-          <Text size={2}>
+          <Text size="small">
             Don&apos;t have an account?{' '}
             <Link
               href={config.redirectSignup || ''}

diff --git a/sdks/js/packages/core/react/components/onboarding/signup.tsx b/sdks/js/packages/core/react/components/onboarding/signup.tsx
@@ -1,5 +1,4 @@
-import { Flex, Text } from '@raystack/apsara';
-import { Link } from '@raystack/apsara/v1';
+import { Link, Flex, Text } from '@raystack/apsara/v1';
 import React, { ComponentPropsWithRef, useCallback } from 'react';
 import { useFrontier } from '~/react/contexts/FrontierContext';
 import { Container } from '../Container';
@@ -63,7 +62,7 @@ export const SignUp = ({
         {mailotp && <MagicLink />}
       </Flex>
       <div style={{ fontWeight: '400' }}>
-        <Text size={2}>
+        <Text size="small">
           Already have an account?{' '}
           <Link
             href={config.redirectLogin || ''}

diff --git a/sdks/js/packages/core/react/components/onboarding/subscribe.tsx b/sdks/js/packages/core/react/components/onboarding/subscribe.tsx
@@ -135,8 +135,8 @@ export const Subscribe = ({
           gap="large"
         >
           <Flex direction="column" gap="small" style={{ width: '100%' }}>
-            <Text size={6} className={styles.subscribeTitle}>{title}</Text>
-            <Text size={4} className={styles.subscribeDescription}>{desc}</Text>
+            <Text size="large" weight="medium" className={styles.subscribeTitle}>{title}</Text>
+            <Text size="regular" className={styles.subscribeDescription}>{desc}</Text>
           </Flex>
           <InputField
             {...register('name')}

diff --git a/sdks/js/packages/core/react/components/onboarding/updates.tsx b/sdks/js/packages/core/react/components/onboarding/updates.tsx
@@ -22,7 +22,7 @@
  title?: string;
  preferenceTitle?: string;
  preferenceDescription?: string;
  onSubmit?: (data: FormData) => void;
 };

 export const Updates = ({
@@ -71,7 +71,7 @@
         >
           <Flex direction="column" gap="medium">
             <Flex justify="between">
-              <Text size={6} weight={500}>
+              <Text size="large" weight="medium">
                 {preferenceTitle}
               </Text>
               {isFetching ? (
@@ -90,7 +90,7 @@
                 />
               )}
             </Flex>
-            <Text size={4} style={{ color: 'var(--foreground-muted)' }}>
+            <Text size="regular" variant="secondary">
               {preferenceDescription}
             </Text>
           </Flex>

diff --git a/sdks/js/packages/core/react/components/organization/api-keys/add.tsx b/sdks/js/packages/core/react/components/organization/api-keys/add.tsx
@@ -131,7 +131,7 @@ export const AddServiceAccount = () => {
       >
         <form >
           <Flex justify="between" className={styles.addDialogForm}>
-            <Text size={6} weight={500}>
+            <Text size="large" weight="medium">
               New Service Account
             </Text>
 
@@ -150,7 +150,7 @@ export const AddServiceAccount = () => {
             gap="medium"
             className={styles.addDialogFormContent}
           >
-            <Text>
+            <Text size="regular">
               Create a dedicated service account to facilitate secure API
               interactions on behalf of the organization.
             </Text>
@@ -171,7 +171,7 @@ export const AddServiceAccount = () => {
                   control={control}
                 />
               )}
-              <Text size={1} variant="danger">
+              <Text size="micro" variant="danger">
                 {errors.title && String(errors.title?.message)}
               </Text>
             </InputField>
@@ -208,7 +208,7 @@ export const AddServiceAccount = () => {
                   control={control}
                 />
               )}
-              <Text size={1} variant="danger">
+              <Text size="micro" variant="danger">
                 {errors.project_id && String(errors.project_id?.message)}
               </Text>
             </InputField>

diff --git a/sdks/js/packages/core/react/components/organization/api-keys/delete.tsx b/sdks/js/packages/core/react/components/organization/api-keys/delete.tsx
@@ -46,7 +46,7 @@ export const DeleteServiceAccount = () => {
         className={styles.addDialogContent}
       >
         <Flex justify="between" className={styles.addDialogForm}>
-          <Text size={6} weight={500}>
+          <Text size="large" weight="medium">
             Delete Service Account
           </Text>
 
@@ -65,7 +65,7 @@ export const DeleteServiceAccount = () => {
           gap="medium"
           className={styles.addDialogFormContent}
         >
-          <Text>
+          <Text size="regular">
             This is an irreversible and permanent action doing this might result
             in deletion of the service account and the keys associated with it.
             Do you wish to proceed?

diff --git a/sdks/js/packages/core/react/components/organization/api-keys/index.tsx b/sdks/js/packages/core/react/components/organization/api-keys/index.tsx
@@ -1,5 +1,4 @@
 import { Flex, EmptyState, Button, Text, Skeleton, Image } from '@raystack/apsara/v1';
-import styles from './styles.module.css';
 import keyIcon from '~/react/assets/key.svg';
 import { DataTable } from '@raystack/apsara';
 import { useFrontier } from '~/react/contexts/FrontierContext';
@@ -15,6 +14,7 @@ import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { getColumns } from './columns';
 import { V1Beta1ServiceUser } from '~/api-client/dist';
 import { Outlet, useLocation, useNavigate } from '@tanstack/react-router';
+import styles from './styles.module.css';
 
 const NoServiceAccounts = ({
   config
@@ -75,12 +75,12 @@ const Headings = ({
       {isLoading ? (
         <Skeleton containerClassName={styles.flex1} />
       ) : (
-        <Text size={6}>Service Accounts</Text>
+        <Text size="large" weight="medium">Service Accounts</Text>
       )}
       {isLoading ? (
         <Skeleton containerClassName={styles.flex1} />
       ) : (
-        <Text size={4} variant="secondary">
+        <Text size="regular" variant="secondary">
           Create a non-human identity to allow access to {appName.toLowerCase()}{' '}
           resources
         </Text>
@@ -213,7 +213,7 @@ export default function ApiKeys() {
   return (
     <Flex direction="column" style={{ width: '100%' }}>
       <Flex className={styles.header}>
-        <Text size={6}>API</Text>
+        <Text size="large" weight="medium">API</Text>
       </Flex>
       <Flex justify="center" align="center">
         {canUpdateWorkspace || isLoading ? (

diff --git a/sdks/js/packages/core/react/components/organization/api-keys/service-user/add-token.tsx b/sdks/js/packages/core/react/components/organization/api-keys/service-user/add-token.tsx
@@ -21,7 +21,7 @@
   => {}
 }: {
  serviceUserId: string;
  onAddToken: (token: V1Beta1ServiceUserToken) => void;
 }) {
  const { client, activeOrganization } = useFrontier();
  const {
@@ -74,7 +74,7 @@
             name="title"
             control={control}
           />
-          <
D7C4
Text size={1} variant="danger" className={styles.addKeyInputError}>
+          <Text size="micro" variant="danger" className={styles.addKeyInputError}>
             {errors.title && String(errors.title?.message)}
           </Text>
         </Flex>

diff --git a/sdks/js/packages/core/react/components/organization/api-keys/service-user/delete.tsx b/sdks/js/packages/core/react/components/organization/api-keys/service-user/delete.tsx
@@ -58,7 +58,7 @@ export const DeleteServiceAccountKey = () => {
         className={styles.addDialogContent}
       >
         <Flex justify="between" className={styles.addDialogForm}>
-          <Text size={6} weight={500}>
+          <Text size="large" weight="medium">
             Revoke API Key
           </Text>
 
@@ -77,7 +77,7 @@ export const DeleteServiceAccountKey = () => {
           gap="medium"
           className={styles.addDialogFormContent}
         >
-          <Text>
+          <Text size="regular">
             This is an irreversible action doing this might lead to
             discontinuation of access to the {appName} features. Do you wish to
             proceed?