diff --git a/packages/components/src/components/app-settings/app-settings-menu-item.jsx b/packages/components/src/components/app-settings/app-settings-menu-item.jsx
index 636973a194fb..05aff27f1b0f 100644
--- a/packages/components/src/components/app-settings/app-settings-menu-item.jsx
+++ b/packages/components/src/components/app-settings/app-settings-menu-item.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import classNames from 'classnames';
-import Text from '../text/text.jsx';
+import Text from '../text/text';
 
 const AppSettingsMenuItem = ({ is_active, title, refSetter, onClick }) => {
     const text_colour = is_active ? 'prominent' : 'less-prominent';
diff --git a/packages/components/src/components/content-expander/content-expander.jsx b/packages/components/src/components/content-expander/content-expander.jsx
index bfabd18acd85..f223a54f3c52 100644
--- a/packages/components/src/components/content-expander/content-expander.jsx
+++ b/packages/components/src/components/content-expander/content-expander.jsx
@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
+import Text from '../text/text';
 import Icon from '../icon/icon';
-import Text from '../text/text.jsx';
 
 const ContentExpander = ({
     arrow_style,
diff --git a/packages/components/src/components/dropdown/dropdown.jsx b/packages/components/src/components/dropdown/dropdown.jsx
index 7c4cc0c10b12..1ba3f952574c 100644
--- a/packages/components/src/components/dropdown/dropdown.jsx
+++ b/packages/components/src/components/dropdown/dropdown.jsx
@@ -7,7 +7,7 @@ import { mobileOSDetect, getPosition } from '@deriv/shared';
 import { listPropType, findNextFocusableNode, findPreviousFocusableNode } from './dropdown';
 import Items from './items.jsx';
 import DisplayText from './display-text.jsx';
-import Text from '../text/text.jsx';
+import Text from '../text/text';
 import { useBlockScroll, useOnClickOutside } from '../../hooks';
 import ThemedScrollbars from '../themed-scrollbars/themed-scrollbars.jsx';
 import Icon from '../icon/icon';
diff --git a/packages/components/src/components/input/input.jsx b/packages/components/src/components/input/input.jsx
index 3ffab0367d8a..587894f1948b 100644
--- a/packages/components/src/components/input/input.jsx
+++ b/packages/components/src/components/input/input.jsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Field from '../field';
-import Text from '../text/text.jsx';
+import Text from '../text/text';
 
 const InputWrapper = ({ children, has_footer }) =>
     has_footer ? <div className='dc-input__wrapper'>{children}</div> : children;
diff --git a/packages/components/src/components/loading/loading.jsx b/packages/components/src/components/loading/loading.jsx
index e1356904f822..f7ea3c456c33 100644
--- a/packages/components/src/components/loading/loading.jsx
+++ b/packages/components/src/components/loading/loading.jsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-import Text from '../text/text.jsx';
+import Text from '../text/text';
 
 const Loading = ({ className, id, is_fullscreen = true, is_slow_loading, status, theme }) => {
     const theme_class = theme ? `barspinner-${theme}` : 'barspinner-light';
diff --git a/packages/components/src/components/mobile-dialog/mobile-dialog.jsx b/packages/components/src/components/mobile-dialog/mobile-dialog.jsx
index 4a472ce434d5..424a9daab3dc 100644
--- a/packages/components/src/components/mobile-dialog/mobile-dialog.jsx
+++ b/packages/components/src/components/mobile-dialog/mobile-dialog.jsx
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
+import Text from '../text/text';
 import Icon from '../icon/icon';
-import Text from '../text/text.jsx';
 import Div100vhContainer from '../div100vh-container';
 
 const MobileDialog = props => {
diff --git a/packages/components/src/components/mobile-drawer/mobile-drawer-submenu-section.jsx b/packages/components/src/components/mobile-drawer/mobile-drawer-submenu-section.jsx
index 07e39a08c488..93a5c52204be 100644
--- a/packages/components/src/components/mobile-drawer/mobile-drawer-submenu-section.jsx
+++ b/packages/components/src/components/mobile-drawer/mobile-drawer-submenu-section.jsx
@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import Text from '../text/text';
 import Icon from '../icon/icon';
-import Text from '../text/text.jsx';
 
 const SubMenuSection = props => {
     const { submenu_toggle_class, section_title, section_icon, children } = props;
diff --git a/packages/components/src/components/mobile-drawer/mobile-drawer-submenu.jsx b/packages/components/src/components/mobile-drawer/mobile-drawer-submenu.jsx
index e0b68e93b5b5..5fc2b5d31eaf 100644
--- a/packages/components/src/components/mobile-drawer/mobile-drawer-submenu.jsx
+++ b/packages/components/src/components/mobile-drawer/mobile-drawer-submenu.jsx
@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
+import Text from '../text/text';
 import Icon from '../icon/icon';
-import Text from '../text/text.jsx';
 
 const SubMenu = ({
     children,
diff --git a/packages/components/src/components/mobile-drawer/mobile-drawer.jsx b/packages/components/src/components/mobile-drawer/mobile-drawer.jsx
index a5881b2dd23b..32af5d986516 100644
--- a/packages/components/src/components/mobile-drawer/mobile-drawer.jsx
+++ b/packages/components/src/components/mobile-drawer/mobile-drawer.jsx
@@ -8,8 +8,8 @@ import SubHeader from './mobile-drawer-subheader.jsx';
 import Item from './mobile-drawer-item.jsx';
 import SubMenu from './mobile-drawer-submenu.jsx';
 import SubMenuSection from './mobile-drawer-submenu-section.jsx';
+import Text from '../text/text';
 import Icon from '../icon/icon';
-import Text from '../text/text.jsx';
 
 const MobileDrawer = ({
     className,
diff --git a/packages/components/src/components/mobile-full-page-modal/mobile-full-page-modal.jsx b/packages/components/src/components/mobile-full-page-modal/mobile-full-page-modal.jsx
index aaf888afe86c..e02e321ee369 100644
--- a/packages/components/src/components/mobile-full-page-modal/mobile-full-page-modal.jsx
+++ b/packages/components/src/components/mobile-full-page-modal/mobile-full-page-modal.jsx
@@ -4,8 +4,8 @@ import classNames from 'classnames';
 import Div100vhContainer from '../div100vh-container';
 import FadeWrapper from '../fade-wrapper';
 import PageOverlay from '../page-overlay/page-overlay.jsx';
+import Text from '../text/text';
 import Icon from '../icon/icon';
-import Text from '../text/text.jsx';
 
 const MobileFullPageModal = ({
     body_className,
diff --git a/packages/components/src/components/modal/modal.jsx b/packages/components/src/components/modal/modal.jsx
index 2f2fbae19d99..6b20c272744d 100644
--- a/packages/components/src/components/modal/modal.jsx
+++ b/packages/components/src/components/modal/modal.jsx
@@ -5,8 +5,8 @@ import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 import Body from './modal-body.jsx';
 import Footer from './modal-footer.jsx';
+import Text from '../text/text';
 import Icon from '../icon/icon';
-import Text from '../text/text.jsx';
 import { useOnClickOutside } from '../../hooks';
 
 const ModalElement = ({
diff --git a/packages/components/src/components/page-error/page-error.jsx b/packages/components/src/components/page-error/page-error.jsx
index 046d0ba487d7..58e92c86a525 100644
--- a/packages/components/src/components/page-error/page-error.jsx
+++ b/packages/components/src/components/page-error/page-error.jsx
@@ -5,7 +5,7 @@ import { isMobile } from '@deriv/shared';
 import ButtonLink from '../button-link/button-link.jsx';
 import DesktopWrapper from '../desktop-wrapper/desktop-wrapper.jsx';
 import MobileWrapper from '../mobile-wrapper/mobile-wrapper.jsx';
-import Text from '../text/text.jsx';
+import Text from '../text/text';
 
 const PageError = ({
     buttonOnClick,
diff --git a/packages/components/src/components/popover-mobile/popover-mobile.jsx b/packages/components/src/components/popover-mobile/popover-mobile.jsx
index 32a9b827791d..1357119a6679 100644
--- a/packages/components/src/components/popover-mobile/popover-mobile.jsx
+++ b/packages/components/src/components/popover-mobile/popover-mobile.jsx
@@ -5,7 +5,7 @@ import { isMobile } from '@deriv/shared';
 import Modal from '../modal/modal.jsx';
 import Button from '../button/button.jsx';
 import Popover from '../popover/popover.jsx';
-import Text from '../text/text.jsx';
+import Text from '../text/text';
 import './popover-mobile.scss';
 
 const PopoverMobile = ({
diff --git a/packages/components/src/components/popup/popup-overlay.jsx b/packages/components/src/components/popup/popup-overlay.jsx
index 044657fc0eb5..28234bcf7de1 100644
--- a/packages/components/src/components/popup/popup-overlay.jsx
+++ b/packages/components/src/components/popup/popup-overlay.jsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import Button from '../button/button.jsx';
-import Text from '../text/text.jsx';
+import Text from '../text/text';
 
 const PopupOverlay = ({ title, descriptions, overlay_ref, toggleOverlay, done_text }) =>
     createPortal(
diff --git a/packages/components/src/components/select-native/select-native.jsx b/packages/components/src/components/select-native/select-native.jsx
index 72ddbb8de3ee..88e608bfc9dc 100644
--- a/packages/components/src/components/select-native/select-native.jsx
+++ b/packages/components/src/components/select-native/select-native.jsx
@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Field from '../field/field.jsx';
+import Text from '../text/text';
 import Icon from '../icon/icon';
-import Text from '../text/text.jsx';
 
 const getDisplayText = (list_items, value) => {
     const dropdown_items = Array.isArray(list_items) ? list_items : [].concat(...Object.values(list_items));
diff --git a/packages/components/src/components/text/index.js b/packages/components/src/components/text/index.ts
similarity index 58%
rename from packages/components/src/components/text/index.js
rename to packages/components/src/components/text/index.ts
index ef0d5296ac72..b517a1d7fb82 100644
--- a/packages/components/src/components/text/index.js
+++ b/packages/components/src/components/text/index.ts
@@ -1,4 +1,4 @@
-import Text from './text.jsx';
+import Text from './text';
 import './text.scss';
 
 export default Text;
diff --git a/packages/components/src/components/text/text.jsx b/packages/components/src/components/text/text.jsx
deleted file mode 100644
index 31baa30ad150..000000000000
--- a/packages/components/src/components/text/text.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { isEmptyObject } from '@deriv/shared';
-
-const Text = ({ children, size, color, align, weight, line_height, as, className, styles, ...props }) => {
-    const class_styles = {
-        '--text-size': `var(--text-size-${size || 's'})`,
-        '--text-color': `var(--text-${color || 'general'})`,
-        '--text-lh': `var(--text-lh-${line_height || 'm'})`,
-        '--text-weight': `var(--text-weight-${weight || 'normal'})`,
-        '--text-align': `var(--text-align-${align || 'left'})`,
-    };
-    const [style, setStyle] = React.useState(class_styles);
-    React.useEffect(() => {
-        if (!isEmptyObject(styles)) {
-            const combined_style = { ...class_styles, ...styles };
-            setStyle(combined_style);
-        } else {
-            setStyle(class_styles);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [size, color, line_height, weight, align]);
-    const class_names = classNames('dc-text', className);
-    return React.createElement(as || 'span', { className: class_names, style, ...props }, children);
-};
-
-Text.propTypes = {
-    line_height: PropTypes.string,
-    size: PropTypes.string,
-    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node), PropTypes.object]),
-    color: PropTypes.string,
-    align: PropTypes.string,
-    weight: PropTypes.string,
-    as: PropTypes.string,
-    className: PropTypes.string,
-    styles: PropTypes.object,
-};
-
-export default Text;
diff --git a/packages/components/src/components/text/text.tsx b/packages/components/src/components/text/text.tsx
new file mode 100644
index 000000000000..c4790302e49b
--- /dev/null
+++ b/packages/components/src/components/text/text.tsx
@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import React, { CSSProperties, HTMLProps } from 'react';
+import { isEmptyObject } from '@deriv/shared';
+
+type TTextProps = Omit<HTMLProps<HTMLElement>, 'size'> & {
+    align?: string;
+    weight?: string;
+    line_height?: string;
+    styles?: CSSProperties;
+    size: string;
+};
+const Text = ({
+    children,
+    size = 's',
+    color = 'general',
+    align = 'left',
+    weight = 'normal',
+    line_height = 'm',
+    as,
+    className,
+    styles,
+    ...props
+}: TTextProps) => {
+    const class_styles = {
+        '--text-size': `var(--text-size-${size})`,
+        '--text-color': `var(--text-${color})`,
+        '--text-lh': `var(--text-lh-${line_height})`,
+        '--text-weight': `var(--text-weight-${weight})`,
+        '--text-align': `var(--text-align-${align})`,
+    };
+    const [style, setStyle] = React.useState(class_styles);
+    React.useEffect(() => {
+        if (!isEmptyObject(styles)) {
+            const combined_style = { ...class_styles, ...styles };
+            setStyle(combined_style);
+        } else {
+            setStyle(class_styles);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [size, color, line_height, weight, align]);
+    const class_names = classNames('dc-text', className);
+    return React.createElement(as || 'span', { className: class_names, style, ...props }, children);
+};
+
+export default Text;