feat(typography): migrate to @signozhq/ui

frontend/.oxlintrc.json

@@ -289,6 +289,8 @@
     // Prevents navigator.clipboard - use useCopyToClipboard hook instead (disabled in tests via override)
     "signoz/no-raw-absolute-path": "error",
     // Prevents window.open(path), window.location.origin + path, window.location.href = path
+    "signoz/no-antd-components": "error",
+    // Prevents the usage of specific antd components in favor of our lib
     "no-restricted-globals": [
       "error",
       {

frontend/package.json

@@ -50,7 +50,7 @@
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.1.0",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.12",
+    "@signozhq/ui": "0.0.14",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",

frontend/plugins/rules/no-antd-components.mjs

@@ -0,0 +1,66 @@
+/**
+ * Rule: no-antd-components
+ *
+ * Prevents importing specific components from antd.
+ *
+ * This rule catches patterns like:
+ *   import { Typography } from 'antd'
+ *   import { Typography, Button } from 'antd'
+ *   import Typography from 'antd/es/typography'
+ *   import { Text } from 'antd/es/typography'
+ *
+ * Add components to BANNED_COMPONENTS to ban them.
+ * Key should be PascalCase component name, will match lowercase path too.
+ */
+
+const BANNED_COMPONENTS = {
+	Typography: 'Use @signozhq/ui Typography instead of antd Typography.',
+};
+
+export default {
+	create(context) {
+		return {
+			ImportDeclaration(node) {
+				const source = node.source.value;
+
+				// Check direct antd import: import { Typography } from 'antd'
+				if (source === 'antd') {
+					for (const specifier of node.specifiers) {
+						if (specifier.type !== 'ImportSpecifier') {
+							continue;
+						}
+
+						const importedName = specifier.imported.name;
+						const message = BANNED_COMPONENTS[importedName];
+
+						if (message) {
+							context.report({
+								node: specifier,
+								message: `Do not import '${importedName}' from antd. ${message}`,
+							});
+						}
+					}
+					return;
+				}
+
+				// Check antd/es/<component> import: import Typography from 'antd/es/typography'
+				const match = source.match(/^antd\/es\/([^/]+)/);
+				if (!match) {
+					return;
+				}
+
+				const pathComponent = match[1].toLowerCase();
+
+				for (const [componentName, message] of Object.entries(BANNED_COMPONENTS)) {
+					if (pathComponent === componentName.toLowerCase()) {
+						context.report({
+							node,
+							message: `Do not import from '${source}'. ${message}`,
+						});
+						break;
+					}
+				}
+			},
+		};
+	},
+};

frontend/plugins/signoz.mjs

@@ -9,6 +9,7 @@ import noZustandGetStateInHooks from './rules/no-zustand-getstate-in-hooks.mjs';
 import noNavigatorClipboard from './rules/no-navigator-clipboard.mjs';
 import noUnsupportedAssetPattern from './rules/no-unsupported-asset-pattern.mjs';
 import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';
+import noAntdComponents from './rules/no-antd-components.mjs';
 
 export default {
 	meta: {
@@ -19,5 +20,6 @@ export default {
 		'no-navigator-clipboard': noNavigatorClipboard,
 		'no-unsupported-asset-pattern': noUnsupportedAssetPattern,
 		'no-raw-absolute-path': noRawAbsolutePath,
+		'no-antd-components': noAntdComponents,
 	},
 };

frontend/src/components/AppLoading/AppLoading.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import get from 'api/browser/localstorage/get';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { THEME_MODE } from 'hooks/useDarkMode/constant';

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -14,8 +14,8 @@ import {
 	TableColumnsType,
 	TableColumnType,
 	Tooltip,
-	Typography,
 } from 'antd';
+import { Typography } from '@signozhq/ui';
 import type { FilterDropdownProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
 import {

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx

@@ -1,5 +1,6 @@
 import { useHistory, useLocation } from 'react-router-dom';
-import { Select, Spin, Typography } from 'antd';
+import { Select, Spin } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Color, Spacing } from '@signozhq/design-tokens';
-import { Divider, Drawer, Typography } from 'antd';
+import { Divider, Drawer } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import dayjs from 'dayjs';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx

@@ -1,7 +1,8 @@
 import { useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { Card, Typography } from 'antd';
+import { Card } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { CardContainer } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal, Typography } from 'antd';
+import { Button, Modal } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import { useNotifications } from 'hooks/useNotifications';

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -554,10 +554,11 @@ function ClientSideQBSearch(
 				>
 					<Tooltip title={chipValue}>
 						<TypographyText
-							ellipsis
+							role="button"
+							tabIndex={0}
 							$isInNin={isInNin}
-							disabled={isDisabled}
 							$isEnabled={!!searchValue}
+							$disabled={isDisabled}
 							onClick={(): void => {
 								if (!isDisabled) {
 									tagEditHandler(value);

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Button, Popover, Radio, Tooltip, Typography } from 'antd';
+import { Button, Popover, Radio, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { useExportRawData } from 'hooks/useDownloadOptionsMenu/useDownloadOptionsMenu';
 import { Download, DownloadIcon, Loader2 } from 'lucide-react';

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -15,8 +15,8 @@ import {
 	Row,
 	Select,
 	Space,
-	Typography,
 } from 'antd';
+import { Typography } from '@signozhq/ui';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';

frontend/src/components/ExplorerCard/MenuItemGenerator.tsx

@@ -1,6 +1,7 @@
 import { MouseEvent, useCallback } from 'react';
 import { DeleteOutlined } from '@ant-design/icons';
-import { Col, Row, Tooltip, Typography } from 'antd';
+import { Col, Row, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useDeleteView } from 'hooks/saveViews/useDeleteView';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
@@ -81,7 +82,7 @@ function MenuItemGenerator({
 						</Tooltip>
 					</Row>
 					<Row>
-						<Typography.Text type="secondary">Created by {createdBy}</Typography.Text>
+						<Typography.Text color="muted">Created by {createdBy}</Typography.Text>
 					</Row>
 				</Col>
 				<Col span={2}>

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Card, Form, Input, Typography } from 'antd';
+import { Card, Form, Input } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSaveView } from 'hooks/saveViews/useSaveView';

frontend/src/components/HeaderRightSection/AnnouncementsModal.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 
 function AnnouncementsModal(): JSX.Element {
 	return (

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui';
-import { Button, Input, Radio, RadioChangeEvent, Typography } from 'antd';
+import { Button, Input, Radio, RadioChangeEvent } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
@@ -135,12 +136,14 @@ function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 				<div className="feedback-modal-content-footer-info-text">
 					<Typography.Text>
 						Have a specific issue?{' '}
-						<Typography.Link
+						<a
+							role="button"
+							tabIndex={0}
 							className="contact-support-link"
 							onClick={handleContactSupportClick}
 						>
 							Contact Support{' '}
-						</Typography.Link>
+						</a>
 						or{' '}
 						<a
 							href="https://signoz.io/docs/introduction/"

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -4,7 +4,8 @@ import { useSelector } from 'react-redux';
 import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Switch, Typography } from 'antd';
+import { Button, Switch } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';

frontend/src/components/HostMetricsDetail/WaitlistFragment/WaitlistFragment.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Typography } from 'antd';
+import { Button } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';
 import { CheckCircle2, HandPlatter } from 'lucide-react';

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { Button, Input, Typography } from 'antd';
+import { Button, Input } from 'antd';
+import { Typography } from '@signozhq/ui';
 import cx from 'classnames';
 import { X } from 'lucide-react';
 

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,7 +1,8 @@
 import { useMemo, useState } from 'react';
 import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal, Tooltip, Typography } from 'antd';
+import { Button, Modal, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import cx from 'classnames';

frontend/src/components/LogDetail/index.tsx

@@ -4,7 +4,8 @@ import { useSelector } from 'react-redux'; // old code, TODO: fix this correctly
 import { useCopyToClipboard, useLocation } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui';
-import { Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
+import { Divider, Drawer, Radio, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import type { RadioChangeEvent } from 'antd/lib';
 import cx from 'classnames';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
@@ -587,7 +588,7 @@ function LogDetailInner({
 					<div className="log-detail-drawer__footer-hint">
 						<div className="log-detail-drawer__footer-hint-content">
 							<Typography.Text
-								type="secondary"
+								color="muted"
 								className="log-detail-drawer__footer-hint-text"
 							>
 								Use
@@ -596,7 +597,7 @@ function LogDetailInner({
 							<span>/</span>
 							<ArrowDown size={14} className="log-detail-drawer__footer-hint-icon" />
 							<Typography.Text
-								type="secondary"
+								color="muted"
 								className="log-detail-drawer__footer-hint-text"
 							>
 								to view previous/next log

frontend/src/components/Logs/CategoryHeading/index.tsx

@@ -6,7 +6,7 @@ interface ICategoryHeadingProps {
 	children: ReactNode;
 }
 function CategoryHeading({ children }: ICategoryHeadingProps): JSX.Element {
-	return <CategoryHeadingText type="secondary">{children}</CategoryHeadingText>;
+	return <CategoryHeadingText color="muted">{children}</CategoryHeadingText>;
 }
 
 export default CategoryHeading;

frontend/src/components/Logs/CategoryHeading/styles.ts

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import styled from 'styled-components';
 
 export const CategoryHeadingText = styled(Typography.Text)`

frontend/src/components/Logs/ListLogView/index.tsx

@@ -1,6 +1,6 @@
 import { memo, useCallback, useMemo } from 'react';
 import { blue } from '@ant-design/colors';
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import cx from 'classnames';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -89,7 +89,7 @@ function LogSelectedField({
 					</span>
 				</Typography.Text>
 			</AddToQueryHOC>
-			<Typography.Text ellipsis className={cx('selected-log-kv', fontSize)}>
+			<Typography.Text truncate={1} className={cx('selected-log-kv', fontSize)}>
 				<span className={cx('selected-log-field-key', fontSize)}>{': '}</span>
 				<span className={cx('selected-log-value', fontSize)}>
 					{fieldValue || "''"}

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button, Input, InputNumber, Popover, Tooltip, Typography } from 'antd';
+import { Button, Input, InputNumber, Popover, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -1,15 +1,8 @@
+import { Typography } from '@signozhq/ui';
 import { ReactNode, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { CaretDownOutlined, LoadingOutlined } from '@ant-design/icons';
-import {
-	Modal,
-	Select,
-	Spin,
-	Tooltip,
-	Tree,
-	TreeDataNode,
-	Typography,
-} from 'antd';
+import { Modal, Select, Spin, Tooltip, Tree, TreeDataNode } from 'antd';
 import { OnboardingStatusResponse } from 'api/messagingQueues/onboarding/getOnboardingStatus';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
@@ -84,9 +77,11 @@ function ErrorTitleAndKey({
 		key: `${title}-key-${uuid()}`,
 		title: (
 			<div className="attribute-error-title">
-				<Typography.Text className="tree-text" ellipsis={{ tooltip: title }}>
-					{title}
-				</Typography.Text>
+				<Tooltip title={title}>
+					<Typography.Text className="tree-text" truncate={1}>
+						{title}
+					</Typography.Text>
+				</Tooltip>
 				<Tooltip title={errorMsg}>
 					<div
 						className="attribute-error-warning"
@@ -125,9 +120,11 @@ function treeTitleAndKey({
 		key: `${title}-key-${uuid()}`,
 		title: (
 			<div className="attribute-success-title">
-				<Typography.Text className="tree-text" ellipsis={{ tooltip: title }}>
-					{title}
-				</Typography.Text>
+				<Tooltip title={title}>
+					<Typography.Text className="tree-text" truncate={1}>
+						{title}
+					</Typography.Text>
+				</Tooltip>
 				{isLeaf && (
 					<div className="success-attribute-icon">
 						<Tooltip title="Success">

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -13,7 +13,8 @@ import {
 	ReloadOutlined,
 } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Checkbox, Select, Typography } from 'antd';
+import { Button, Checkbox, Select } from 'antd';
+import { Typography } from '@signozhq/ui';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -755,15 +756,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						}}
 					>
 						<div className="option-content">
-							<Typography.Text
-								ellipsis={{
-									tooltip: {
-										placement: 'right',
-										autoAdjustOverflow: true,
-									},
-								}}
-								className="option-label-text"
-							>
+							<Typography.Text truncate={1} className="option-label-text">
 								{highlightMatchedText(String(option.label || ''), searchText)}
 							</Typography.Text>
 							{(option.type === 'custom' || option.type === 'regex') && (

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Button, Tooltip, Typography } from 'antd';
+import { Button, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
-import { Button, Tooltip, Typography } from 'antd';
+import { Button, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import cx from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';

frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import eyesEmojiUrl from 'assets/Images/eyesEmoji.svg';
 
 import styles from './QueryCancelledPlaceholder.module.scss';

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
-import { Button, Checkbox, Input, Skeleton, Typography } from 'antd';
+import { Button, Checkbox, Input, Skeleton } from 'antd';
+import { Typography } from '@signozhq/ui';
 import cx from 'classnames';
 import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
 import {
@@ -574,7 +575,9 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 				</section>
 				<section className="right-action">
 					{isOpen && !!attributeValues.length && (
-						<Typography.Text
+						<span
+							role="button"
+							tabIndex={0}
 							className="clear-all"
 							onClick={(e): void => {
 								e.stopPropagation();
@@ -583,7 +586,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 							}}
 						>
 							Clear All
-						</Typography.Text>
+						</span>
 					)}
 				</section>
 			</section>
@@ -640,16 +643,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 											{filter.customRendererForValue ? (
 												filter.customRendererForValue(value)
 											) : (
-												<Typography.Text
-													className="value-string"
-													ellipsis={{
-														tooltip: {
-															placement: 'top',
-															mouseEnterDelay: 0.2,
-															mouseLeaveDelay: 0,
-														},
-													}}
-												>
+												<Typography.Text className="value-string" truncate={1}>
 													{String(value)}
 												</Typography.Text>
 											)}
@@ -677,12 +671,14 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					)}
 					{visibleItemsCount < attributeValues?.length && (
 						<section className="show-more">
-							<Typography.Text
+							<span
+								role="button"
+								tabIndex={0}
 								className="show-more-text"
 								onClick={(): void => setVisibleItemsCount((prev) => prev + 10)}
 							>
 								Show More...
-							</Typography.Text>
+							</span>
 						</section>
 					)}
 				</>

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -12,7 +12,8 @@ import {
 	ComboboxList,
 	ComboboxTrigger,
 } from '@signozhq/ui';
-import { Skeleton, Switch, Tooltip, Typography } from 'antd';
+import { Skeleton, Switch, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';

frontend/src/components/ResizeTable/TableComponent/DateComponent.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 
 import Time from './Time';
 

frontend/src/components/ResizeTable/TableComponent/Time.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { useTimezone } from 'providers/Timezone';
 

frontend/src/components/SpanHoverCard/SpanHoverCard.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { Popover, Typography } from 'antd';
+import { Popover } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
 import dayjs from 'dayjs';

frontend/src/components/Styled/index.ts

@@ -11,10 +11,12 @@ import {
 	Space,
 	SpaceProps,
 	TabsProps,
-	Typography,
 } from 'antd';
-import type { TextProps } from 'antd/lib/typography/Text';
-import type { TitleProps } from 'antd/lib/typography/Title';
+import {
+	Typography,
+	TypographyTextProps,
+	TypographyTitleProps,
+} from '@signozhq/ui';
 import styled, { FlattenSimpleInterpolation } from 'styled-components';
 
 import { IStyledClass } from './types';
@@ -53,13 +55,13 @@ const StyledButton = styled(Button)<TStyledButton>`
 `;
 
 const { Text } = Typography;
-type TStyledTypographyText = TextProps & IStyledClass;
+type TStyledTypographyText = TypographyTextProps & IStyledClass;
 const StyledTypographyText = styled(Text)<TStyledTypographyText>`
 	${styledClass}
 `;
 
 const { Title } = Typography;
-type TStyledTypographyTitle = TitleProps & IStyledClass;
+type TStyledTypographyTitle = TypographyTitleProps & IStyledClass;
 const StyledTypographyTitle = styled(Title)<TStyledTypographyTitle>`
 	${styledClass}
 `;

frontend/src/components/TimePreferenceDropDown/config.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { timeItems } from 'container/NewWidget/RightContainer/timeItems';
 
 export const menuItems = timeItems.map((item) => ({

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
 import { DownOutlined } from '@ant-design/icons';
-import { Button, Dropdown, Typography } from 'antd';
+import { Button, Dropdown } from 'antd';
+import { Typography } from '@signozhq/ui';
 import TimeItems, {
 	timePreferance,
 	timePreferenceType,

frontend/src/components/Uplot/Uplot.tsx

@@ -8,7 +8,7 @@ import {
 	useRef,
 } from 'react';
 import * as Sentry from '@sentry/react';
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { ToggleGraphProps } from 'components/Graph/types';
 import { LineChart } from 'lucide-react';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';

frontend/src/components/ValueGraph/index.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ExclamationCircleFilled } from '@ant-design/icons';
-import { Tooltip, Typography } from 'antd';
+import { Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
 import { getBackgroundColorAndThresholdCheck } from './utils';

frontend/src/container/AllAlertChannels/index.tsx

@@ -2,7 +2,8 @@ import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { PlusOutlined } from '@ant-design/icons';
-import { Tooltip, Typography } from 'antd';
+import { Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import getAll from 'api/channels/getAll';
 import logEvent from 'api/common/logEvent';
 import Spinner from 'components/Spinner';
@@ -21,7 +22,7 @@ import { Button, ButtonContainer, RightActionContainer } from './styles';
 
 import './AllAlertChannels.styles.scss';
 
-const { Paragraph } = Typography;
+const { Text } = Typography;
 
 function AlertChannels(): JSX.Element {
 	const { t } = useTranslation(['channels']);
@@ -60,9 +61,9 @@ function AlertChannels(): JSX.Element {
 	return (
 		<div className="alert-channels-container">
 			<ButtonContainer>
-				<Paragraph ellipsis type="secondary">
+				<Text truncate={1} color="muted">
 					{t('sending_channels_note')}
-				</Paragraph>
+				</Text>
 
 				<RightActionContainer>
 					<TextToolTip

frontend/src/container/AllError/index.tsx

@@ -1,3 +1,4 @@
+import { Typography } from '@signozhq/ui';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueries } from 'react-query';
@@ -5,15 +6,7 @@ import { useQueries } from 'react-query';
 import { useSelector } from 'react-redux';
 import { Link, useLocation } from 'react-router-dom';
 import { SearchOutlined } from '@ant-design/icons';
-import {
-	Button,
-	Card,
-	Input,
-	Space,
-	TableProps,
-	Tooltip,
-	Typography,
-} from 'antd';
+import { Button, Card, Input, Space, TableProps, Tooltip } from 'antd';
 import type { ColumnType, TablePaginationConfig } from 'antd/es/table';
 import type { FilterValue, SorterResult } from 'antd/es/table/interface';
 import type { ColumnsType } from 'antd/lib/table';
@@ -360,13 +353,7 @@ function AllErrors(): JSX.Element {
 			width: 100,
 			render: (value): JSX.Element => (
 				<Tooltip overlay={(): JSX.Element => value}>
-					<Typography.Paragraph
-						ellipsis={{
-							rows: 2,
-						}}
-					>
-						{value}
-					</Typography.Paragraph>
+					<Typography.Text truncate={2}>{value}</Typography.Text>
 				</Tooltip>
 			),
 		},

frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
-import { Checkbox, Input, Typography } from 'antd';
+import { Checkbox, Input } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useResizeObserver } from 'hooks/useDimensions';

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.tsx

@@ -2,7 +2,8 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { Spacing } from '@signozhq/design-tokens';
-import { Button, Divider, Drawer, Radio, Typography } from 'antd';
+import { Button, Divider, Drawer, Radio } from 'antd';
+import { Typography } from '@signozhq/ui';
 import type { RadioChangeEvent } from 'antd/lib';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import {

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx

@@ -1,7 +1,8 @@
 import { useMemo, useState } from 'react';
 import { QueryFunctionContext, useQueries, useQuery } from 'react-query';
 import { LoadingOutlined } from '@ant-design/icons';
-import { Spin, Switch, Table, Tooltip, Typography } from 'antd';
+import { Spin, Switch, Table, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { getQueryRangeV5 } from 'api/v5/queryRange/getQueryRange';
 import { MetricRangePayloadV5, ScalarData } from 'api/v5/v5';
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DependentServices.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 import { UseQueryResult } from 'react-query';
-import { Skeleton, Table, TablePaginationConfig, Typography } from 'antd';
+import { Skeleton, Table, TablePaginationConfig } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { QueryParams } from 'constants/query';
 import {
 	dependentServicesColumns,

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DomainMetrics.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
 import { useQueries } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Skeleton, Tooltip, Typography } from 'antd';
+import { Progress, Skeleton, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import {
@@ -87,28 +88,16 @@ function DomainMetrics({
 		<div className="domain-detail-drawer__endpoint">
 			<div className="domain-details-grid">
 				<div className="labels-row">
-					<Typography.Text
-						type="secondary"
-						className="domain-details-metadata-label"
-					>
+					<Typography.Text color="muted" className="domain-details-metadata-label">
 						EXTERNAL API
 					</Typography.Text>
-					<Typography.Text
-						type="secondary"
-						className="domain-details-metadata-label"
-					>
+					<Typography.Text color="muted" className="domain-details-metadata-label">
 						AVERAGE LATENCY
 					</Typography.Text>
-					<Typography.Text
-						type="secondary"
-						className="domain-details-metadata-label"
-					>
+					<Typography.Text color="muted" className="domain-details-metadata-label">
 						ERROR %
 					</Typography.Text>
-					<Typography.Text
-						type="secondary"
-						className="domain-details-metadata-label"
-					>
+					<Typography.Text color="muted" className="domain-details-metadata-label">
 						LAST USED
 					</Typography.Text>
 				</div>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointMetrics.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Skeleton, Tooltip, Typography } from 'antd';
+import { Progress, Skeleton, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import {
 	getDisplayValue,
 	getFormattedEndPointMetricsData,
@@ -37,28 +38,16 @@ function EndPointMetrics({
 		<div className="domain-detail-drawer__endpoint">
 			<div className="domain-details-grid">
 				<div className="labels-row">
-					<Typography.Text
-						type="secondary"
-						className="domain-details-metadata-label"
-					>
+					<Typography.Text color="muted" className="domain-details-metadata-label">
 						Rate
 					</Typography.Text>
-					<Typography.Text
-						type="secondary"
-						className="domain-details-metadata-label"
-					>
+					<Typography.Text color="muted" className="domain-details-metadata-label">
 						AVERAGE LATENCY
 					</Typography.Text>
-					<Typography.Text
-						type="secondary"
-						className="domain-details-metadata-label"
-					>
+					<Typography.Text color="muted" className="domain-details-metadata-label">
 						ERROR %
 					</Typography.Text>
-					<Typography.Text
-						type="secondary"
-						className="domain-details-metadata-label"
-					>
+					<Typography.Text color="muted" className="domain-details-metadata-label">
 						LAST USED
 					</Typography.Text>
 				</div>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/ErrorState.tsx

@@ -1,4 +1,5 @@
-import { Button, Typography } from 'antd';
+import { Button } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { RotateCw } from 'lucide-react';
 
 import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
@@ -13,7 +14,7 @@ function ErrorState({ refetch }: { refetch: () => void }): JSX.Element {
 					</div>
 					<div className="error-state-text">
 						<Typography.Text>Uh-oh :/ We ran into an error.</Typography.Text>
-						<Typography.Text type="secondary">
+						<Typography.Text color="muted">
 							Please refresh this panel.
 						</Typography.Text>
 					</div>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeBarCharts.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Card, Skeleton, Typography } from 'antd';
+import { Button, Card, Skeleton } from 'antd';
+import { Typography } from '@signozhq/ui';
 import cx from 'classnames';
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';
 import {

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeTable.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
-import { Table, Typography } from 'antd';
+import { Table } from 'antd';
+import { Typography } from '@signozhq/ui';
 import {
 	endPointStatusCodeColumns,
 	getFormattedEndPointStatusCodeData,

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -1,3 +1,4 @@
+import { Typography } from '@signozhq/ui';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from 'react-query';
@@ -14,7 +15,6 @@ import {
 	Table,
 	TableColumnsType as ColumnsType,
 	Tag,
-	Typography,
 } from 'antd';
 import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import logEvent from 'api/common/logEvent';
@@ -362,15 +362,19 @@ export default function BillingContainer(): JSX.Element {
 		[apiResponse, billAmount, isLoading, isFetchingBillingData],
 	);
 
-	const { Text } = Typography;
 	const subscriptionPastDueMessage = (): JSX.Element => (
 		<Typography>
 			{`We were not able to process payments for your account. Please update your card details `}
-			<Text type="danger" onClick={handleBilling} style={{ cursor: 'pointer' }}>
+			<a
+				role="button"
+				tabIndex={0}
+				onClick={handleBilling}
+				style={{ cursor: 'pointer', color: 'var(--bg-cherry-500)' }}
+			>
 				{t('here')}
-			</Text>
+			</a>
 			{` if your payment information has changed. Email us at `}
-			<Text type="secondary">cloud-support@signoz.io</Text>
+			<Typography.Text color="muted">cloud-support@signoz.io</Typography.Text>
 			{` otherwise. Be sure to provide this information immediately to avoid interruption to your service.`}
 		</Typography>
 	);
@@ -418,7 +422,7 @@ export default function BillingContainer(): JSX.Element {
 				<Typography.Text style={{ fontWeight: 500, fontSize: 18 }}>
 					{t('billing')}
 				</Typography.Text>
-				<Typography.Text color={Color.BG_VANILLA_400}>
+				<Typography.Text color="muted">
 					{t('manage_billing_and_costs')}
 				</Typography.Text>
 			</Flex>
@@ -472,7 +476,7 @@ export default function BillingContainer(): JSX.Element {
 
 				{trialInfo?.onTrial && trialInfo?.trialConvertedToSubscription && (
 					<Typography.Text
-						ellipsis
+						truncate={1}
 						style={{ fontWeight: '300', color: 'var(--bg-forest-500)', fontSize: 12 }}
 					>
 						{t('card_details_recieved_and_billing_info')}

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useRef } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Card, Flex, Typography } from 'antd';
+import { Card, Flex } from 'antd';
+import { Typography } from '@signozhq/ui';
 import Uplot from 'components/Uplot';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
@@ -208,7 +209,7 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 					<Typography.Text className="total-spent-title">
 						TOTAL SPENT
 					</Typography.Text>
-					<Typography.Text color={Color.BG_VANILLA_100} className="total-spent">
+					<Typography.Text className="total-spent">
 						${numberFormatter.format(billAmount)}
 					</Typography.Text>
 				</Flex>

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Row, Tag, Typography } from 'antd';
+import { Row, Tag } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
 import { FeatureKeys } from 'constants/features';
@@ -78,7 +79,9 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 						data-testid={`alert-type-card-${option.selection}`}
 					>
 						{option.description}{' '}
-						<Typography.Link
+						<a
+							role="button"
+							tabIndex={0}
 							onClick={(e): void => {
 								e.preventDefault();
 								e.stopPropagation();
@@ -86,7 +89,7 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 							}}
 						>
 							Click here to see how to create a sample alert.
-						</Typography.Link>{' '}
+						</a>{' '}
 					</AlertTypeCard>
 				))}
 			</>

frontend/src/container/CreateAlertV2/AlertCondition/AlertThreshold.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
-import { Button, Select, Tooltip, Typography } from 'antd';
+import { Button, Select, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import classNames from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import getRandomColor from 'lib/getRandomColor';

frontend/src/container/CreateAlertV2/AlertCondition/AnomalyThreshold.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Select, Typography } from 'antd';
+import { Select } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useAppContext } from 'providers/App/App';
 

frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
-import { Button, Input, Select, Tooltip, Typography } from 'antd';
+import { Button, Input, Select, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { CircleX, Trash } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 

frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx

@@ -1,4 +1,5 @@
-import { Button, Flex, SelectProps, Switch, Typography } from 'antd';
+import { Button, Flex, SelectProps, Switch } from 'antd';
+import { Typography } from '@signozhq/ui';
 import type { BaseOptionType, DefaultOptionType } from 'antd/es/select';
 import { getInvolvedQueriesInTraceOperator } from 'components/QueryBuilderV2/QueryV2/TraceOperator/utils/utils';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/AdvancedOptionItem.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { Switch, Tooltip, Typography } from 'antd';
+import { Switch, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { Info } from 'lucide-react';
 
 import { IAdvancedOptionItemProps } from '../types';

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx

@@ -1,4 +1,5 @@
-import { Collapse, Input, Typography } from 'antd';
+import { Collapse, Input } from 'antd';
+import { Typography } from '@signozhq/ui';
 
 import { useCreateAlertState } from '../context';
 import AdvancedOptionItem from './AdvancedOptionItem';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EditCustomSchedule.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Button, Typography } from 'antd';
+import { Button } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { useCreateAlertState } from 'container/CreateAlertV2/context';
 import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlertV2/context/constants';
 import { IEditCustomScheduleProps } from 'container/CreateAlertV2/EvaluationSettings/types';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadence.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { Input, Select, Tooltip, Typography } from 'antd';
+import { Input, Select, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { Info } from 'lucide-react';
 
 import { useCreateAlertState } from '../../context';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadenceDetails.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Button, DatePicker, Input, Select, Typography } from 'antd';
+import { Button, DatePicker, Input, Select } from 'antd';
+import { Typography } from '@signozhq/ui';
 import classNames from 'classnames';
 import { useCreateAlertState } from 'container/CreateAlertV2/context';
 import { AdvancedOptionsState } from 'container/CreateAlertV2/context/types';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadencePreview.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Modal, Typography } from 'antd';
+import { Modal } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { Calendar, Info } from 'lucide-react';
 
 import { useCreateAlertState } from '../../context';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Input, Select, Typography } from 'antd';
+import { Input, Select } from 'antd';
+import { Typography } from '@signozhq/ui';
 
 import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';
 import {

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowPopover.tsx

@@ -1,4 +1,5 @@
-import { Button, Typography } from 'antd';
+import { Button } from 'antd';
+import { Typography } from '@signozhq/ui';
 import classNames from 'classnames';
 import { Check } from 'lucide-react';
 

frontend/src/container/CreateAlertV2/NotificationSettings/MultipleNotifications.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react';
-import { Select, Tooltip, Typography } from 'antd';
+import { Select, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Info } from 'lucide-react';
 
@@ -98,9 +99,9 @@ function MultipleNotifications(): JSX.Element {
 					data-testid="multiple-notifications-select"
 				/>
 				{isMultipleNotificationsEnabled && (
-					<Typography.Paragraph className="multiple-notifications-select-description">
+					<Typography.Text className="multiple-notifications-select-description">
 						{groupByDescription}
-					</Typography.Paragraph>
+					</Typography.Text>
 				)}
 			</div>
 		);

frontend/src/container/CreateAlertV2/NotificationSettings/NotificationMessage.tsx

@@ -1,4 +1,5 @@
-import { Input, Tooltip, Typography } from 'antd';
+import { Input, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { Info } from 'lucide-react';
 
 import { useCreateAlertState } from '../context';

frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx

@@ -1,4 +1,5 @@
-import { Input, Select, Typography } from 'antd';
+import { Input, Select } from 'antd';
+import { Typography } from '@signozhq/ui';
 
 import { useCreateAlertState } from '../context';
 import {

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -177,11 +177,7 @@ export default function CustomDomainSettings(): JSX.Element {
 	if (isLoadingHosts) {
 		return (
 			<div className="custom-domain-card custom-domain-card--loading">
-				<Skeleton
-					active
-					title={{ width: '40%' }}
-					paragraph={{ rows: 1, width: '60%' }}
-				/>
+				<Skeleton active paragraph={{ rows: 1, width: '60%' }} />
 			</div>
 		);
 	}

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -4,16 +4,8 @@ import { Layout } from 'react-grid-layout';
 import { useTranslation } from 'react-i18next';
 import { useCopyToClipboard } from 'react-use';
 import { PlusOutlined } from '@ant-design/icons';
-import {
-	Button,
-	Card,
-	Input,
-	Modal,
-	Popover,
-	Tag,
-	Tooltip,
-	Typography,
-} from 'antd';
+import { Button, Card, Input, Modal, Popover, Tag, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/DynamicVariable/DynamicVariable.tsx

@@ -7,7 +7,8 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Select, Typography } from 'antd';
+import { Select } from 'antd';
+import { Typography } from '@signozhq/ui';
 import CustomSelect from 'components/NewSelect/CustomSelect';
 import TextToolTip from 'components/TextToolTip';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
@@ -213,7 +214,7 @@ function DynamicVariable({
 			</div>
 			{errorAttributeKeyMessage && (
 				<div>
-					<Typography.Text type="warning">
+					<Typography.Text color="warning">
 						{errorAttributeKeyMessage}
 					</Typography.Text>
 				</div>

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx

@@ -5,7 +5,8 @@ import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { orange } from '@ant-design/colors';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Collapse, Input, Select, Switch, Tag, Typography } from 'antd';
+import { Button, Collapse, Input, Select, Switch, Tag } from 'antd';
+import { Typography } from '@signozhq/ui';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import cx from 'classnames';
 import Editor from 'components/Editor';
@@ -485,7 +486,7 @@ function VariableItem({
 								}}
 							/>
 							<div>
-								<Typography.Text type="warning">{errorNameMessage}</Typography.Text>
+								<Typography.Text color="warning">{errorNameMessage}</Typography.Text>
 							</div>
 						</div>
 					</VariableItemRow>

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/index.tsx

@@ -11,7 +11,8 @@ import {
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { arrayMove, SortableContext, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Button, Modal, Row, RowProps, Space, Table, Typography } from 'antd';
+import { Button, Modal, Row, RowProps, Space, Table } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { VariablesSettingsTabHandle } from 'container/DashboardContainer/DashboardDescription/types';
 import { convertVariablesToDbFormat } from 'container/DashboardContainer/DashboardVariablesSelection/util';
 import { useAddDynamicVariableToPanels } from 'hooks/dashboard/useAddDynamicVariableToPanels';

frontend/src/container/DashboardContainer/DashboardSettings/General/index.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Col, Input, Radio, Select, Space, Typography } from 'antd';
+import { Col, Input, Radio, Select, Space } from 'antd';
+import { Typography } from '@signozhq/ui';
 import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddTags';
 import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
 import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';

frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/index.tsx

@@ -2,7 +2,8 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useMutation } from 'react-query';
 import { useCopyToClipboard } from 'react-use';
 import { Checkbox, toast } from '@signozhq/ui';
-import { Button, Select, Typography } from 'antd';
+import { Button, Select } from 'antd';
+import { Typography } from '@signozhq/ui';
 import createPublicDashboardAPI from 'api/dashboard/public/createPublicDashboard';
 import revokePublicDashboardAccessAPI from 'api/dashboard/public/revokePublicDashboardAccess';
 import updatePublicDashboardAPI from 'api/dashboard/public/updatePublicDashboard';

frontend/src/container/DashboardContainer/DashboardVariablesSelection/SelectVariableInput.tsx

@@ -1,7 +1,8 @@
 import { memo, useMemo } from 'react';
 import { orange } from '@ant-design/colors';
 import { WarningOutlined } from '@ant-design/icons';
-import { Popover, Tooltip, Typography } from 'antd';
+import { Popover, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
 import { OptionData } from 'components/NewSelect/types';
 import { popupContainer } from 'utils/selectPopupContainer';

frontend/src/container/DashboardContainer/DashboardVariablesSelection/VariableItem.tsx

@@ -1,6 +1,7 @@
 import { memo } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Tooltip, Typography } from 'antd';
+import { Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import CustomVariableInput from './CustomVariableInput';
@@ -31,7 +32,7 @@ function VariableItem({
 
 	return (
 		<div className="variable-item">
-			<Typography.Text className="variable-name" ellipsis>
+			<Typography.Text className="variable-name" truncate={1}>
 				${name}
 				{description && (
 					<Tooltip title={description}>

frontend/src/container/DashboardContainer/DashboardVariablesSelection/styles.ts

@@ -1,5 +1,5 @@
 import { grey } from '@ant-design/colors';
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import styled from 'styled-components';
 
 export const VariableContainer = styled.div`

frontend/src/container/DashboardContainer/PanelTypeSelectionModal/index.tsx

@@ -1,5 +1,6 @@
 import { memo } from 'react';
-import { Card, Modal, Typography } from 'antd';
+import { Card, Modal } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES, PANEL_TYPES_INITIAL_QUERY } from 'constants/queryBuilder';

frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import LearnMore from 'components/LearnMore/LearnMore';

frontend/src/container/ErrorDetails/index.tsx

@@ -2,7 +2,8 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Divider, Space, Typography } from 'antd';
+import { Button, Divider, Space } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import getNextPrevId from 'api/errors/getNextPrevId';
 import Editor from 'components/Editor';

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -20,8 +20,8 @@ import {
 	RefSelectProps,
 	Select,
 	Tooltip,
-	Typography,
 } from 'antd';
+import { Typography } from '@signozhq/ui';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';

frontend/src/container/ExportPanel/ExportPanelContainer.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from 'react-query';
-import { Button, Typography } from 'antd';
+import { Button } from 'antd';
+import { Typography } from '@signozhq/ui';
 import createDashboard from 'api/v1/dashboards/create';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';

frontend/src/container/ExportPanel/styles.ts

@@ -1,5 +1,6 @@
 import { FunctionComponent } from 'react';
-import { Button, Select, SelectProps, Space, Typography } from 'antd';
+import { Button, Select, SelectProps, Space } from 'antd';
+import { Typography } from '@signozhq/ui';
 import styled from 'styled-components';
 
 export const DashboardSelect: FunctionComponent<SelectProps> = styled(

frontend/src/container/FormAlertChannels/index.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, FormInstance, Input, Select, Switch, Typography } from 'antd';
+import { Form, FormInstance, Input, Select, Switch } from 'antd';
+import { Typography } from '@signozhq/ui';
 import type { Store } from 'antd/lib/form/interface';
 import ROUTES from 'constants/routes';
 import {

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Tabs, Tooltip, Typography } from 'antd';
+import { Button, Tabs, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import PromQLIcon from 'assets/Dashboard/PromQl';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';

frontend/src/container/FormAlertRules/RuleOptions.tsx

@@ -8,8 +8,8 @@ import {
 	Select,
 	SelectProps,
 	Space,
-	Typography,
 } from 'antd';
+import { Typography } from '@signozhq/ui';
 import type { DefaultOptionType } from 'antd/es/select';
 import {
 	getCategoryByOptionId,

frontend/src/container/FormAlertRules/index.tsx

@@ -5,7 +5,8 @@ import { useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { ExclamationCircleOutlined, SaveOutlined } from '@ant-design/icons';
-import { Button, FormInstance, Modal, SelectProps, Typography } from 'antd';
+import { Button, FormInstance, Modal, SelectProps } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {

frontend/src/container/FormAlertRules/styles.ts

@@ -1,4 +1,5 @@
-import { Button, Card, Col, Form, Input, Select, Typography } from 'antd';
+import { Button, Card, Col, Form, Input, Select } from 'antd';
+import { Typography } from '@signozhq/ui';
 import styled from 'styled-components';
 
 const { TextArea } = Input;

frontend/src/container/GantChart/Span/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
-import { Popover, Typography } from 'antd';
+import { Popover } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
 import dayjs from 'dayjs';

frontend/src/container/GantChart/Span/styles.ts

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import styled from 'styled-components';
 
 interface Props {
@@ -40,7 +40,7 @@ interface SpanTextProps extends Pick<Props, 'leftOffset'> {
 	isDarkMode: boolean;
 }
 
-export const SpanText = styled(Typography.Paragraph)<SpanTextProps>`
+export const SpanText = styled(Typography.Text)<SpanTextProps>`
 	&&& {
 		left: ${({ leftOffset }): string => `${leftOffset}%`};
 		top: 65%;

frontend/src/container/GantChart/SpanName/index.tsx

@@ -7,8 +7,8 @@ function SpanNameComponent({
 	return (
 		<Container title={`${name} ${serviceName}`}>
 			<SpanWrapper>
-				<Span ellipsis>{name}</Span>
-				<Service ellipsis>{serviceName}</Service>
+				<Span truncate={1}>{name}</Span>
+				<Service truncate={1}>{serviceName}</Service>
 			</SpanWrapper>
 		</Container>
 	);

frontend/src/container/GantChart/SpanName/styles.ts

@@ -1,7 +1,7 @@
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import styled from 'styled-components';
 
-export const Span = styled(Typography.Paragraph)`
+export const Span = styled(Typography.Text)`
 	&&& {
 		font-size: 0.75rem;
 		margin: 0;
@@ -9,7 +9,7 @@ export const Span = styled(Typography.Paragraph)`
 	}
 `;
 
-export const Service = styled(Typography.Paragraph)`
+export const Service = styled(Typography.Text)`
 	&&& {
 		color: #acacac;
 		font-size: 0.75rem;

frontend/src/container/GantChart/Trace/index.tsx

@@ -8,7 +8,8 @@ import {
 	useState,
 } from 'react';
 import { CaretDownFilled, CaretRightFilled } from '@ant-design/icons';
-import { Col, Typography } from 'antd';
+import { Col } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { StyledCol, StyledRow } from 'components/Styled';
 import {
 	IIntervalUnit,

frontend/src/container/GeneralSettings/index.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { useQueries } from 'react-query';
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui';
 import getDisks from 'api/disks/getDisks';
 import getRetentionPeriodApi from 'api/settings/getRetention';
 import getRetentionPeriodApiV2 from 'api/settings/getRetentionV2';

frontend/src/container/GeneralSettings/styles.ts

@@ -2,8 +2,8 @@ import {
 	Col,
 	Dropdown as DropDownComponent,
 	Input as InputComponent,
-	Typography as TypographyComponent,
 } from 'antd';
+import { Typography as TypographyComponent } from '@signozhq/ui';
 import styled from 'styled-components';
 
 export const RetentionContainer = styled(Col)`

frontend/src/container/GeneralSettingsCloud/GeneralSettingsCloud.tsx

@@ -1,4 +1,5 @@
-import { Card, Typography } from 'antd';
+import { Card } from 'antd';
+import { Typography } from '@signozhq/ui';
 import { Info } from 'lucide-react';
 
 import './GeneralSettingsCloud.styles.scss';

frontend/src/container/GridCardLayout/DashboardEmptyState/DashboardEmptyState.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useRef, useState } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Typography } from 'antd';
+import { Button } from 'antd';
+import { Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
 import SettingsDrawer from 'container/DashboardContainer/DashboardDescription/SettingsDrawer';