feat: update snapshot

frontend/jest.config.ts

@@ -46,7 +46,7 @@ const config: Config.InitialOptions = {
 	},
 	transformIgnorePatterns: [
 		// @chenglou/pretext is ESM-only; @signozhq/ui pulls it in via text-ellipsis.
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -4,8 +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 } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button } from 'antd';
+import { Switch, Typography } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
@@ -125,9 +125,8 @@ function ShareURLModal(): JSX.Element {
 								<Info size={14} color={Color.BG_AMBER_600} />
 							)}
 							<Switch
-								checked={enableAbsoluteTime}
+								value={enableAbsoluteTime}
 								disabled={!isValidateRelativeTime}
-								size="small"
 								onChange={(): void => {
 									setEnableAbsoluteTime((prev) => !prev);
 								}}

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -12,8 +12,8 @@ import {
 	ComboboxList,
 	ComboboxTrigger,
 } from '@signozhq/ui';
-import { Skeleton, Switch, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Skeleton, Tooltip } from 'antd';
+import { Typography, Switch } from '@signozhq/ui';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
@@ -279,9 +279,8 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 				<div className="api-quick-filters-header">
 					<Typography.Text>Show IP addresses</Typography.Text>
 					<Switch
-						size="small"
 						style={{ marginLeft: 'auto' }}
-						checked={showIP ?? true}
+						value={showIP ?? true}
 						onChange={(checked): void => {
 							logEvent('API Monitoring: Show IP addresses clicked', {
 								showIP: checked,

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -4,7 +4,8 @@ import type {
 	TableColumnsType as ColumnsType,
 	TableColumnType as ColumnType,
 } from 'antd';
-import { Button, Dropdown, Flex, MenuProps, Switch } from 'antd';
+import { Button, Dropdown, Flex, MenuProps } from 'antd';
+import { Switch } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -60,9 +61,7 @@ function DynamicColumnTable({
 
 	const onToggleHandler =
 		(index: number, column: ColumnGroupType<any> | ColumnType<any>) =>
-		(checked: boolean, event: React.MouseEvent<HTMLButtonElement>): void => {
-			event.stopPropagation();
-
+		(checked: boolean): void => {
 			if (shouldSendAlertsLogEvent) {
 				logEvent('Alert: Column toggled', {
 					column: column?.title,
@@ -88,10 +87,14 @@ function DynamicColumnTable({
 	const items: MenuProps['items'] =
 		dynamicColumns?.map((column, index) => ({
 			label: (
-				<div className="dynamicColumnsTable-items">
+				<div
+					className="dynamicColumnsTable-items"
+					onClick={(e): void => e.stopPropagation()}
+					role="presentation"
+				>
 					<div>{column.title?.toString()}</div>
 					<Switch
-						checked={columnsData?.findIndex((c) => c.key === column.key) !== -1}
+						value={columnsData?.findIndex((c) => c.key === column.key) !== -1}
 						onChange={onToggleHandler(index, column)}
 					/>
 				</div>

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

@@ -1,8 +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 } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Spin, Table, Tooltip } from 'antd';
+import { Switch, Typography } from '@signozhq/ui';
 import { getQueryRangeV5 } from 'api/v5/queryRange/getQueryRange';
 import { MetricRangePayloadV5, ScalarData } from 'api/v5/v5';
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';
@@ -171,11 +171,7 @@ function TopErrors({
 					/>
 				</div>
 				<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-					<Switch
-						checked={showStatusCodeErrors}
-						onChange={setShowStatusCodeErrors}
-						size="small"
-					/>
+					<Switch value={showStatusCodeErrors} onChange={setShowStatusCodeErrors} />
 					<span style={{ color: 'white', fontSize: '14px' }}>
 						Status Message Exists
 					</span>

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

@@ -1,5 +1,5 @@
-import { Button, Flex, SelectProps, Switch } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Flex, SelectProps } from 'antd';
+import { Typography, Switch } 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';
@@ -419,8 +419,8 @@ export function RoutingPolicyBanner({
 			</Typography.Text>
 			<div className="routing-policies-info-banner-right">
 				<Switch
-					checked={notificationSettings.routingPolicies}
-					data-testid="routing-policies-switch"
+					value={notificationSettings.routingPolicies}
+					testId="routing-policies-switch"
 					onChange={(value): void => {
 						setNotificationSettings({
 							type: 'SET_ROUTING_POLICIES',

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

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { Switch, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Tooltip } from 'antd';
+import { Typography, Switch } from '@signozhq/ui';
 import { Info } from 'lucide-react';
 
 import { IAdvancedOptionItemProps } from '../types';
@@ -49,7 +49,7 @@ function AdvancedOptionItem({
 				>
 					{input}
 				</div>
-				<Switch onChange={handleOnToggle} checked={showInput} />
+				<Switch onChange={handleOnToggle} value={showInput} />
 			</div>
 		</div>
 	);

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

@@ -5,8 +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 } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Collapse, Input, Select, Tag } from 'antd';
+import { Typography, Switch } from '@signozhq/ui';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import cx from 'classnames';
 import Editor from 'components/Editor';
@@ -763,7 +763,7 @@ function VariableItem({
 									</Typography>
 								</LabelContainer>
 								<Switch
-									checked={variableMultiSelect}
+									value={variableMultiSelect}
 									onChange={(e): void => {
 										setVariableMultiSelect(e);
 										if (!e) {
@@ -780,7 +780,7 @@ function VariableItem({
 										</Typography>
 									</LabelContainer>
 									<Switch
-										checked={variableShowALLOption}
+										value={variableShowALLOption}
 										onChange={(e): void => setVariableShowALLOption(e)}
 									/>
 								</VariableItemRow>

frontend/src/container/FormAlertChannels/index.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, FormInstance, Input, Select, Switch } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Form, FormInstance, Input, Select } from 'antd';
+import { Typography, Switch } from '@signozhq/ui';
 import type { Store } from 'antd/lib/form/interface';
 import ROUTES from 'constants/routes';
 import {
@@ -82,8 +82,8 @@ function FormAlertChannels({
 					name="send_resolved"
 				>
 					<Switch
-						defaultChecked={initialValue?.send_resolved}
-						data-testid="field-send-resolved-checkbox"
+						defaultValue={initialValue?.send_resolved}
+						testId="field-send-resolved-checkbox"
 						onChange={(value): void => {
 							setSelectedConfig((state) => ({
 								...state,

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -2,7 +2,8 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Form, Select, Switch, Tooltip } from 'antd';
+import { Button, Form, Select, Tooltip } from 'antd';
+import { Switch } from '@signozhq/ui';
 import getAll from 'api/channels/getAll';
 import logEvent from 'api/common/logEvent';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
@@ -198,10 +199,10 @@ function BasicInfo({
 						placement="right"
 					>
 						<Switch
-							checked={shouldBroadCastToAllChannels}
+							value={shouldBroadCastToAllChannels}
 							onChange={handleBroadcastToAllChannels}
 							disabled={noChannels || !!isLoading}
-							data-testid="alert-broadcast-to-all-channels"
+							testId="alert-broadcast-to-all-channels"
 						/>
 					</Tooltip>
 				</FormItemMedium>

frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Switch } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Typography, Switch } from '@signozhq/ui';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
 import { MAX_LOGS_LIST_SIZE } from 'constants/liveTail';
 import { LOCALSTORAGE } from 'constants/localStorage';
@@ -228,9 +227,8 @@ function LiveLogsContainer({
 					<div className="live-logs-frequency-chart-view-controller">
 						<Typography>Frequency chart</Typography>
 						<Switch
-							size="small"
-							checked={showLiveLogsFrequencyChart}
-							defaultChecked
+							value={showLiveLogsFrequencyChart}
+							defaultValue
 							onChange={handleToggleFrequencyChart}
 						/>
 					</div>

frontend/src/container/LogDetailedView/JsonView.tsx

@@ -1,8 +1,7 @@
 import { useMemo, useState } from 'react';
 import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
-import { Switch } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Typography, Switch } from '@signozhq/ui';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 
 import { JSONViewProps } from './LogDetailedView.types';
@@ -82,7 +81,7 @@ function JSONView({ logData }: JSONViewProps): JSX.Element {
 				<div className="log-switch">
 					<div className="wrap-word-switch">
 						<Typography.Text>Wrap text</Typography.Text>
-						<Switch checked={isWrapWord} onChange={handleWrapWord} size="small" />
+						<Switch value={isWrapWord} onChange={handleWrapWord} />
 					</div>
 				</div>
 			</div>

frontend/src/container/LogDetailedView/Overview.tsx

@@ -2,8 +2,8 @@ import { ReactNode, useState } from 'react';
 import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui';
-import { Collapse, Divider, Input, Switch, Tag } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Collapse, Divider, Input, Tag } from 'antd';
+import { Typography, Switch } from '@signozhq/ui';
 import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { OptionsQuery } from 'container/OptionsMenu/types';
@@ -137,7 +137,7 @@ function Overview({
 								<div className="log-switch">
 									<div className="wrap-word-switch">
 										<Typography.Text>Wrap text</Typography.Text>
-										<Switch checked={isWrapWord} onChange={handleWrapWord} size="small" />
+										<Switch value={isWrapWord} onChange={handleWrapWord} />
 									</div>
 								</div>
 							</div>

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -1,5 +1,4 @@
-import { Switch } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Typography, Switch } from '@signozhq/ui';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
 import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
@@ -69,9 +68,8 @@ function LogsActionsContainer({
 						<div className="frequency-chart-view-controller">
 							<Typography>Frequency chart</Typography>
 							<Switch
-								size="small"
-								checked={showFrequencyChart}
-								defaultChecked
+								value={showFrequencyChart}
+								defaultValue
 								onChange={handleToggleFrequencyChart}
 							/>
 						</div>

frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx

@@ -2,7 +2,8 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
-import { Switch, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
+import { Switch } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -313,10 +314,9 @@ function Explorer(): JSX.Element {
 							title={oneChartPerQueryDisabledTooltip}
 						>
 							<Switch
-								checked={showOneChartPerQuery}
+								value={showOneChartPerQuery}
 								onChange={handleToggleShowOneChartPerQuery}
 								disabled={disableOneChartPerQuery || splitedQueries.length <= 1}
-								size="small"
 							/>
 						</Tooltip>
 					</div>

frontend/src/container/MetricsExplorer/Inspect/GraphView.tsx

@@ -2,8 +2,8 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Skeleton, Switch } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Skeleton } from 'antd';
+import { Typography, Switch } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import Uplot from 'components/Uplot';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -206,7 +206,7 @@ function GraphView({
 				</Button.Group>
 				<div className="view-toggle-button">
 					<Switch
-						checked={viewType === 'graph'}
+						value={viewType === 'graph'}
 						onChange={(checked): void => {
 							const newViewType = checked ? 'graph' : 'table';
 							setViewType(newViewType);

frontend/src/container/MySettings/TimezoneAdaptation/TimezoneAdaptation.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Switch } from 'antd';
+import { Switch } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { Delete } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
@@ -49,10 +49,10 @@ function TimezoneAdaptation(): JSX.Element {
 			<div className="timezone-adaption__header">
 				<h2 className="timezone-adaption__title">Adapt to my timezone</h2>
 				<Switch
-					checked={isAdaptationEnabled}
+					value={isAdaptationEnabled}
 					onChange={handleSwitchChange}
 					style={getSwitchStyles()}
-					data-testid="timezone-adaptation-switch"
+					testId="timezone-adaptation-switch"
 				/>
 			</div>
 

frontend/src/container/MySettings/index.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useMutation } from 'react-query';
-import { Radio, RadioChangeEvent, Switch, Tag } from 'antd';
+import { Radio, RadioChangeEvent, Tag } from 'antd';
+import { Switch } from '@signozhq/ui';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
 import updateUserPreference from 'api/v1/user/preferences/name/update';
@@ -218,10 +219,10 @@ function MySettings(): JSX.Element {
 						<div className="user-preference-section-content-item-title-action">
 							Keep the primary sidebar always open{' '}
 							<Switch
-								checked={sideNavPinned}
+								value={sideNavPinned}
 								onChange={handleSideNavPinnedChange}
-								loading={isUpdatingUserPreference}
-								data-testid="side-nav-pinned-switch"
+								disabled={isUpdatingUserPreference}
+								testId="side-nav-pinned-switch"
 							/>
 						</div>
 

frontend/src/container/NewWidget/RightContainer/SettingSections/ChartAppearanceSection/ChartAppearanceSection.tsx

@@ -1,6 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
-import { Switch } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Typography, Switch } from '@signozhq/ui';
 import {
 	FillMode,
 	LineInterpolation,
@@ -73,7 +72,7 @@ export default function ChartAppearanceSection({
 							Display individual data points on the chart
 						</Typography.Text>
 					</div>
-					<Switch size="small" checked={showPoints} onChange={setShowPoints} />
+					<Switch value={showPoints} onChange={setShowPoints} />
 				</section>
 			)}
 			{allowSpanGaps && (

frontend/src/container/NewWidget/RightContainer/SettingSections/HistogramBucketsSection/HistogramBucketsSection.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
-import { InputNumber, Switch } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { InputNumber } from 'antd';
+import { Typography, Switch } from '@signozhq/ui';
 
 import SettingsSection from '../../components/SettingsSection/SettingsSection';
 
@@ -61,8 +61,7 @@ export default function HistogramBucketsSection({
 						</span>
 					</Typography.Text>
 					<Switch
-						checked={combineHistogram}
-						size="small"
+						value={combineHistogram}
 						onChange={(checked): void => setCombineHistogram(checked)}
 					/>
 				</section>

frontend/src/container/NewWidget/RightContainer/SettingSections/VisualizationSettingsSection/VisualizationSettingsSection.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { Select, Switch } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Select } from 'antd';
+import { Typography, Switch } from '@signozhq/ui';
 import TimePreference from 'components/TimePreferenceDropDown';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import {
@@ -104,8 +104,7 @@ export default function VisualizationSettingsSection({
 				<section className="stack-chart control-container">
 					<Typography.Text className="section-heading">Stack series</Typography.Text>
 					<Switch
-						checked={stackedBarChart}
-						size="small"
+						value={stackedBarChart}
 						onChange={(checked): void => setStackedBarChart(checked)}
 					/>
 				</section>
@@ -120,8 +119,7 @@ export default function VisualizationSettingsSection({
 						</Typography.Text>
 					</div>
 					<Switch
-						checked={isFillSpans}
-						size="small"
+						value={isFillSpans}
 						onChange={(checked): void => setIsFillSpans(checked)}
 					/>
 				</section>

frontend/src/container/NewWidget/__test__/NewWidget.test.tsx

@@ -341,10 +341,10 @@ describe('Stacking bar in new panel', () => {
 		const section = container.querySelector('.stack-chart');
 		expect(section).toBeInTheDocument();
 
-		// Verify switch is present and enabled (ant-switch-checked)
-		const switchBtn = section?.querySelector('.ant-switch');
+		// Verify switch is present and enabled
+		const switchBtn = section?.querySelector('[role="switch"]');
 		expect(switchBtn).toBeInTheDocument();
-		expect(switchBtn).toHaveClass('ant-switch-checked');
+		expect(switchBtn).toHaveAttribute('data-state', 'checked');
 
 		// Check that stack series is present and checked
 		checkStackSeriesState(container, true);

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/JsonFlattening.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Form, Input, Space, Switch, Tooltip } from 'antd';
+import { Form, Input, Space, Tooltip } from 'antd';
+import { Switch } from '@signozhq/ui';
 import { ProcessorData } from 'types/api/pipeline/def';
 
 import { PREDEFINED_MAPPING } from '../config';
@@ -58,11 +59,7 @@ function JsonFlattening({
 				initialValue={isAdd ? true : selectedProcessorData?.enable_paths}
 			>
 				<Space>
-					<Switch
-						size="small"
-						checked={enablePaths}
-						onChange={handleEnablePathsChange}
-					/>
+					<Switch value={enablePaths} onChange={handleEnablePathsChange} />
 					Enable Paths
 				</Space>
 			</Form.Item>
@@ -79,11 +76,7 @@ function JsonFlattening({
 
 			<Form.Item className="json-flattening-form__item">
 				<Space>
-					<Switch
-						size="small"
-						checked={enableMapping}
-						onChange={handleEnableMappingChange}
-					/>
+					<Switch value={enableMapping} onChange={handleEnableMappingChange} />
 					Enable Mapping
 					<Tooltip title="The order of filled keys will determine the priority of keys i.e. earlier keys have higher precedence">
 						<InfoCircleOutlined />

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/ProcessorForm.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Form, Input, Select, Space, Switch } from 'antd';
+import { Form, Input, Select, Space } from 'antd';
+import { Switch } from '@signozhq/ui';
 import { ModalFooterTitle } from 'container/PipelinePage/styles';
 import { ProcessorData } from 'types/api/pipeline/def';
 
@@ -92,8 +93,7 @@ function ProcessorFieldInput({
 					>
 						<Space>
 							<Switch
-								size="small"
-								checked={form.getFieldValue('enable_flattening')}
+								value={form.getFieldValue('enable_flattening')}
 								onChange={(checked: boolean): void => {
 									form.setFieldValue('enable_flattening', checked);
 								}}

frontend/src/container/PipelinePage/PipelineListsView/TableComponents/DragAction.tsx

@@ -1,5 +1,5 @@
 import { HolderOutlined } from '@ant-design/icons';
-import { Switch } from 'antd';
+import { Switch } from '@signozhq/ui';
 
 import { holdIconStyle } from '../config';
 import { LastActionColumn } from '../styles';
@@ -7,7 +7,7 @@ import { LastActionColumn } from '../styles';
 function DragAction({ isEnabled, onChange }: DragActionProps): JSX.Element {
 	return (
 		<LastActionColumn>
-			<Switch defaultChecked={isEnabled} onChange={onChange} />
+			<Switch defaultValue={isEnabled} onChange={onChange} />
 			<HolderOutlined style={holdIconStyle} />
 		</LastActionColumn>
 	);

frontend/src/container/PipelinePage/PipelineListsView/config.ts

@@ -1,7 +1,7 @@
 import {
 	TableColumnGroupType as ColumnGroupType,
 	TableColumnType as ColumnType,
-} from 'antd/';
+} from 'antd';
 import {
 	HistoryData,
 	PipelineData,

frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx

@@ -185,7 +185,7 @@ describe('PipelinePage container test', () => {
 		await fireEvent.click(expandIcon[0]);
 
 		const switchToggle = document.querySelector(
-			'.ant-table-expanded-row .ant-switch',
+			'.ant-table-expanded-row [role="switch"]',
 		);
 
 		expect(switchToggle).toBeChecked();
@@ -236,7 +236,7 @@ describe('PipelinePage container test', () => {
 		const addNewPipelineBtn = getByText('add_new_pipeline');
 		expect(addNewPipelineBtn).toBeInTheDocument();
 
-		const switchToggle = document.querySelectorAll('.ant-switch');
+		const switchToggle = document.querySelectorAll('[role="switch"]');
 
 		expect(switchToggle[0]).not.toBeChecked();
 		await fireEvent.click(switchToggle[0] as HTMLElement);

frontend/src/container/PipelinePage/tests/__snapshots__/DragAction.test.tsx.snap

@@ -21,26 +21,25 @@ exports[`PipelinePage container test should render DragAction section 1`] = `
 <div
     class="c0"
   >
-    <button
-      aria-checked="true"
-      class="ant-switch css-dev-only-do-not-override-2i2tap ant-switch-checked"
-      role="switch"
-      type="button"
+    <div
+      class="_switch-wrapper_jbsv7_1"
     >
-      <div
-        class="ant-switch-handle"
-      />
-      <span
-        class="ant-switch-inner"
+      <button
+        aria-checked="true"
+        class="_switch_jbsv7_1"
+        data-color="robin"
+        data-state="checked"
+        id=":r0:"
+        role="switch"
+        type="button"
+        value="on"
       >
         <span
-          class="ant-switch-inner-checked"
+          class="_switch__thumb_jbsv7_59"
+          data-state="checked"
         />
-        <span
-          class="ant-switch-inner-unchecked"
-        />
-      </span>
-    </button>
+      </button>
+    </div>
     <span
       aria-label="holder"
       class="anticon anticon-holder"

frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Divider, Dropdown, MenuProps, Switch, Tooltip } from 'antd';
+import { Divider, Dropdown, MenuProps, Tooltip } from 'antd';
+import { Switch } from '@signozhq/ui';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Copy, Ellipsis, PenLine, Trash2 } from 'lucide-react';
 import {
@@ -127,11 +128,7 @@ function AlertActionButtons({
 			<div className="alert-action-buttons">
 				<Tooltip title={isAlertRuleDisabled ? 'Enable alert' : 'Disable alert'}>
 					{isAlertRuleDisabled !== undefined && (
-						<Switch
-							size="small"
-							onChange={toggleAlertRule}
-							checked={!isAlertRuleDisabled}
-						/>
+						<Switch onChange={toggleAlertRule} value={!isAlertRuleDisabled} />
 					)}
 				</Tooltip>
 				<CopyToClipboard textToCopy={window.location.href} />

frontend/src/periscope/components/JsonView/JsonView.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
-import { Switch } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Typography, Switch } from '@signozhq/ui';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 
 import './JsonView.styles.scss';
@@ -66,9 +65,8 @@ function JsonView({ data, height = '575px' }: JsonViewProps): JSX.Element {
 				<div className="json-view__wrap-toggle">
 					<Typography.Text>Wrap text</Typography.Text>
 					<Switch
-						checked={isWrapWord}
+						value={isWrapWord}
 						onChange={(checked): void => setIsWrapWord(checked)}
-						size="small"
 					/>
 				</div>
 			</div>