chore: refactor input

INPUT_MIGRATION_AFFECTED.md

@@ -0,0 +1,315 @@
+# antd `Input` → `@signozhq/ui/input` Migration — Affected Files & Verification
+
+## What changed
+
+For each file listed below, the import was rewritten:
+
+```diff
+- import { Input, ...rest } from 'antd';
++ import { Input } from '@signozhq/ui/input';
++ import { ...rest } from 'antd';
+```
+
+Only the plain antd `<Input>` component was migrated. The following are **not** migrated and continue to use antd:
+
+- `Input.TextArea` / `Input.Password` / `Input.Search` / `Input.Group`
+- `InputNumber`
+- `<Input>` with `addonBefore`, `addonAfter`, `allowClear`, `bordered`, `status="error"`, or `size="small|middle|large"` props
+- `InputRef` (typed refs)
+
+No JSX usages of `<Input>` were touched — only the import source was swapped. The component contract (`value`, `onChange`, `placeholder`, `disabled`, `type`, `prefix`, `suffix`, etc.) matches between the two libraries for the cases migrated here.
+
+---
+
+## Reverted after TypeScript errors — 4 files (kept on antd, marked with TODO)
+
+These files were initially migrated, then reverted because `@signozhq/ui` `Input` does not expose the props they need. Each one carries a `TODO(@signozhq/ui-input)` comment above the antd import.
+
+| File | Blocker |
+|---|---|
+| `frontend/src/container/MetricsExplorer/Inspect/MetricTimeAggregation.tsx` | Uses `onWheel` on `<Input type="number">` to blur on scroll. Not exposed on `@signozhq/ui/input`. |
+| `frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.tsx` | URL `<Input>` uses `spellCheck="false"` (along with `autoCorrect`, `autoCapitalize`). `spellCheck` not exposed. |
+| `frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/CSVInput.tsx` | Spreads antd `InputProps` (`{...otherProps}`) onto `<Input>`. `size: SizeType` clashes with `@signozhq/ui` Input's numeric `size`. |
+| `frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/styles.ts` | The `styled(Input)` wrapper is consumed in `Duration/index.tsx` with `addonAfter="ms"`. Not exposed. |
+
+---
+
+## Migrated files — 51 total
+
+Grouped by the route/page that renders them. Visit each route after the migration and confirm the input still:
+
+1. Renders with the expected layout/spacing
+2. Accepts keyboard input and reflects controlled `value`
+3. Fires `onChange` correctly (search filters, form submissions still work)
+4. Shows placeholder text
+5. Disables/enables as expected
+6. Form validation (`Form.Item rules`) still shows errors
+
+### Alerts — Create / Edit Alert (`/alerts/new`, `/alerts/edit`)
+
+| File | Where the input shows up |
+|---|---|
+| `frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx` | Threshold name + threshold value + recovery threshold inputs in the Alert Condition card |
+| `frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx` | Advanced Options collapse inside Evaluation Settings |
+| `frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx` | Evaluation Window popover (numeric value + unit) |
+| `frontend/src/container/CreateAlertV2/EvaluationSettings/TimeInput/TimeInput.tsx` | HH:MM:SS time input shared in Evaluation Settings |
+| `frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx` | Re-notification interval input |
+
+### Alert Channels (`/settings/channels/new`, `/settings/channels/edit/:channelId`)
+
+| File | Where the input shows up |
+|---|---|
+| `frontend/src/container/FormAlertChannels/index.tsx` | Channel name + send-resolved / common fields |
+| `frontend/src/container/FormAlertChannels/Settings/Email.tsx` | "To" email field of the Email channel form |
+| `frontend/src/container/FormAlertChannels/Settings/Webhook.tsx` | Webhook URL / username / password fields |
+
+### Routing Policies (`/settings/channels` → routing policies tab)
+
+| File | Where the input shows up |
+|---|---|
+| `frontend/src/container/RoutingPolicies/RoutingPolicies.tsx` | Search box on the routing policies list |
+
+### Organization Settings (`/settings/org-settings`)
+
+| File | Where the input shows up |
+|---|---|
+| `frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx` | Email + name fields in the "Invite team members" form (used by the invite-members flow) |
+
+### Members (`/settings/members`)
+
+_None directly migrated this round_ — already on `@signozhq/ui/input`.
+
+### Planned Downtime (`/settings/channels` → Planned Downtime, or `/planned-downtime` depending on plan)
+
+| File | Where the input shows up |
+|---|---|
+| `frontend/src/container/PlannedDowntime/PlannedDowntime.tsx` | "Search downtime" text input above the list |
+
+### Licenses (`/licenses`)
+
+| File | Where the input shows up |
+|---|---|
+| `frontend/src/container/Licenses/ApplyLicenseForm.tsx` | License key text input on the apply-license form |
+
+### Dashboards — list, detail, widget editor
+
+| File | Where the input shows up | Route |
+|---|---|---|
+| `frontend/src/container/ListOfDashboard/DashboardsList.tsx` | Main "Search by name, description, or tags…" input on the dashboards list | `/dashboard` |
+| `frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx` | "Request dashboard" modal input | `/dashboard` |
+| `frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx` | Templates modal search input | `/dashboard` (open templates) |
+| `frontend/src/container/DashboardContainer/DashboardDescription/index.tsx` | Dashboard description editor name field | `/dashboard/:dashboardId` |
+| `frontend/src/container/GridCardLayout/GridCardLayout.tsx` | Section / row name inline edit | `/dashboard/:dashboardId` |
+| `frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx` | Chart manager search input | `/dashboard/:dashboardId` |
+| `frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.tsx` | Column-config inputs in the widget editor's left panel | `/dashboard/:dashboardId/:widgetId` |
+
+### Logs (`/logs/logs-explorer`, `/logs/pipelines`)
+
+| File | Where the input shows up | Route |
+|---|---|---|
+| `frontend/src/container/LogsFilters/index.tsx` | Logs filter sidebar search input | `/logs/logs-explorer` |
+| `frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/QueryBuilder.tsx` | Query-builder field value inputs in the legacy logs search | `/logs/logs-explorer` |
+| `frontend/src/container/LogDetailedView/Overview.tsx` | Log details drawer Overview tab inputs (severity / body filters) | `/logs/logs-explorer` (open a log) |
+| `frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/ProcessorForm.tsx` | Add-new-processor form fields | `/logs/pipelines` |
+| `frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/JsonFlattening.tsx` | JSON-flattening processor form | `/logs/pipelines` |
+| `frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/FormFields/NameInput.tsx` | "Pipeline name" field in the new-pipeline form | `/logs/pipelines` |
+
+### Traces (`/traces-explorer`, trace details, funnels)
+
+| File | Where the input shows up | Route |
+|---|---|---|
+| `frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx` | Tag-key autocomplete input in the legacy trace search | `/trace` |
+| `frontend/src/container/Trace/TraceGraphFilter/index.tsx` | Trace-graph filter search/value input | `/trace` |
+| `frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.tsx` | "Search resource attributes" input in the span details drawer | `/traces-explorer` → open span |
+| `frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.tsx` | Span details drawer → Attributes search | `/traces-explorer` → open span |
+| `frontend/src/container/SpanDetailsDrawer/Events/Events.tsx` | Span details drawer → Events search | `/traces-explorer` → open span |
+| `frontend/src/container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx` | "Add span to funnel" modal name input (legacy waterfall) | `/trace/:id` |
+| `frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentilePanel.tsx` | Percentile filter input in span details v3 | `/trace/:id` (v3) |
+| `frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx` | "Add span to funnel" modal in v3 waterfall | `/trace/:id` (v3) |
+| `frontend/src/pages/TracesFunnels/components/SearchBar/SearchBar.tsx` | Search box on the funnels list page | `/traces/funnels` |
+| `frontend/src/pages/TracesFunnels/components/RenameFunnel/RenameFunnel.tsx` | Rename-funnel modal input | `/traces/funnels` |
+
+### Saved Views (`/logs/saved-views`, `/traces/saved-views`)
+
+| File | Where the input shows up |
+|---|---|
+| `frontend/src/components/ExplorerCard/SaveViewWithName.tsx` | "Save view with name" inline input on the explorer save flow |
+| `frontend/src/container/ExplorerOptions/ExplorerOptions.tsx` | "e.g. External http method view" — name input in the Save View modal across explorers |
+| `frontend/src/pages/SaveView/index.tsx` | Rename saved view input on the saved-views list |
+
+### Metrics Explorer (`/metrics-explorer`)
+
+| File | Where the input shows up |
+|---|---|
+| `frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx` | Metadata edit inputs in metric details |
+
+### Messaging Queues (`/messaging-queues`)
+
+| File | Where the input shows up |
+|---|---|
+| `frontend/src/pages/MessagingQueues/MQDetails/DropRateView/EvaluationTimeSelector.tsx` | Evaluation time selector inside Drop Rate view |
+
+### Integrations (`/integrations`)
+
+| File | Where the input shows up |
+|---|---|
+| `frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/RegionForm/RenderConnectionParams.tsx` | Connection-params text fields in AWS cloud integration setup |
+
+### Ingestion Settings (`/settings/ingestion-settings`)
+
+| File | Where the input shows up |
+|---|---|
+| `frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx` | "Search for ingestion key…" + add/edit ingestion-key name fields. `<InputNumber>` usages in this file still come from antd. |
+
+### Onboarding (`/get-started/*`, `/onboarding`)
+
+| File | Where the input shows up |
+|---|---|
+| `frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx` | Custom data source name input |
+| `frontend/src/container/OnboardingContainer/Steps/EnvironmentDetails/EnvironmentDetails.tsx` | Environment details (env name / app name) inputs |
+
+### Other shared components (rendered on multiple routes)
+
+| File | Where it shows up |
+|---|---|
+| `frontend/src/components/CustomTimePicker/TimezonePicker.tsx` | Timezone search input inside the global custom time picker — visible on dashboards, logs, traces, alerts header |
+| `frontend/src/components/InputWithLabel/InputWithLabel.tsx` | Generic labeled-input wrapper — used in invite flows, threshold editing, etc. |
+| `frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx` | "Search filters" input inside the Quick Filters settings drawer (logs/traces/infra/metrics quick-filters) |
+| `frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx` | Search box at the top of each checkbox-style quick filter |
+| `frontend/src/container/QueryTable/Drilldown/BreakoutOptions.tsx` | "Breakout by" attribute search input in the query-table drilldown menu (dashboards, alerts) |
+| `frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx` | "Search…" input inside the "Add column" picker in the logs format options menu (rendered on `/logs/logs-explorer`). `<InputNumber>` for max-line config still comes from antd. |
+
+### `styled(Input)` wrappers — `.ts` style files
+
+These wrap the now-`@signozhq/ui` `Input` with styled-components. CSS selectors target the descendant `<input>` element so behavior should be unchanged, but visually re-verify on the routes below.
+
+| File | Verification route |
+|---|---|
+| `frontend/src/container/Version/styles.ts` | Status page `/status` — confirm input width = 183px |
+
+> `Trace/Filters/Panel/PanelBody/Duration/styles.ts` was attempted and reverted — see the "Reverted" section at the top.
+
+---
+
+## Smoke-test checklist
+
+A short loop that covers the bulk of what changed:
+
+1. **Alerts → New alert** (`/alerts/new`) — add a threshold, type a name + value, switch evaluation window unit, expand Advanced Options, set time input, save.
+2. **Channels → New channel** (`/settings/channels/new`) — pick Email, fill the "to" field; pick Webhook, fill URL.
+3. **Dashboards** — open a dashboard, edit a panel (`/dashboard/:dashboardId/:widgetId`) → set context-link label/URL/params, edit explorer columns. Then on the list page (`/dashboard`) open the Templates modal and the "Request dashboard" modal.
+4. **Logs Explorer** (`/logs/logs-explorer`) — type into the sidebar filter search, open a log row → Overview tab.
+5. **Logs Pipelines** (`/logs/pipelines`) — open "Add new pipeline" and "Add new processor", switch processor type to JSON Flattening / CSV.
+6. **Traces Explorer** (`/traces-explorer`) — open a span, search inside Attributes + Events tabs.
+7. **Trace details V3** (`/trace/:id`) — open the percentile panel, open "Add span to funnel".
+8. **Funnels list** (`/traces/funnels`) — type in the search bar, rename a funnel.
+9. **Saved Views** (`/logs/saved-views`, `/traces/saved-views`) — rename a view; from an explorer, "Save view as…".
+10. **Metrics Explorer** (`/metrics-explorer/explorer`) — open Inspect → time aggregation; open metric details → Metadata tab.
+11. **Integrations → AWS** — open AWS cloud integration → Region form.
+12. **Onboarding** (`/get-started`) — pick "Custom" data source, fill env/app names.
+13. **Custom time picker** — open the global time picker anywhere, switch to "Custom" → type in the timezone search.
+14. **Quick filters** — on `/logs/logs-explorer` or `/traces-explorer`, open the quick-filter settings drawer and search inside.
+15. **Org settings → Invite members** (`/settings/org-settings`) — open invite flow, fill email + name.
+16. **Planned downtime** — search the list.
+17. **Licenses** (`/licenses`) — paste a license key in the input.
+
+For each: confirm typing, controlled value, placeholder, disabled state, and form-validation error display all behave the same as before.
+
+---
+
+## Skipped (still on antd) — 61 files
+
+After the migration, 61 files still import `Input` from antd. None of them use a plain `<Input>` that can be migrated — each one is kept on antd for one of the reasons below.
+
+Kept on antd because they use features the `@signozhq/ui` `Input` does not expose. No action required unless these are migrated separately later.
+
+**Use `Input.TextArea` / `Input.Password` / `Input.Search` / `Input.Group`:**
+`CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadence.tsx`,
+`CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadenceDetails.tsx`,
+`CreateAlertV2/NotificationSettings/NotificationMessage.tsx`,
+`QueryBuilder/components/Formula/Formula.tsx`,
+`OptionsMenu/AddColumnField/index.tsx`,
+`LogsSearchFilter/index.tsx`,
+`RoutingPolicies/RoutingPolicyDetails.tsx`,
+`DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx`,
+`DashboardContainer/DashboardSettings/General/index.tsx`,
+`FormAlertChannels/Settings/MsTeams.tsx`,
+`MySettings/UserInfo/index.tsx`,
+`Login/index.tsx`,
+`PipelinePage/PipelineListsView/AddNewPipeline/FormFields/DescriptionTextArea.tsx`,
+`components/HeaderRightSection/FeedbackModal.tsx`,
+`pages/TracesFunnelDetails/components/FunnelConfiguration/AddFunnelStepDetailsModal.tsx`,
+`pages/TracesFunnelDetails/components/FunnelConfiguration/AddFunnelDescriptionModal.tsx`,
+`pages/TracesExplorer/Filter/SectionContent.tsx`.
+
+**Destructure `const { TextArea/Search } = Input`:**
+`Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx`,
+`Trace/Filters/Panel/PanelBody/SearchTraceID/index.tsx`,
+`Trace/Search/styles.ts`,
+`ListAlertRules/ListAlert.tsx`,
+`FormAlertRules/styles.ts`,
+`FormAlertChannels/Settings/Opsgenie.tsx`,
+`FormAlertChannels/Settings/Pager.tsx`,
+`FormAlertChannels/Settings/Slack.tsx`,
+`NewWidget/RightContainer/SettingSections/GeneralSettingsSection/GeneralSettingsSection.tsx`,
+`AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx`.
+
+**`InputNumber` co-used:**
+`NewWidget/RightContainer/Threshold/Threshold.tsx`,
+`components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx`.
+
+**Typed `InputRef`:**
+`DashboardContainer/DashboardVariablesSelection/TextboxVariableInput.tsx`,
+`NewWidget/RightContainer/SettingSections/GeneralSettingsSection/GeneralSettingsSection.tsx`,
+`PipelinePage/components/TagInput.tsx`,
+`components/OverflowInputToolTip/OverflowInputToolTip.tsx`,
+`components/CustomTimePicker/CustomTimePicker.tsx`,
+`components/Input/index.tsx`,
+`pages/AlertDetails/AlertHeader/ActionButtons/RenameModal.tsx`,
+`LogsSearchFilter/index.tsx`.
+
+**Use `addonBefore` / `addonAfter`:**
+`QueryBuilder/components/Query/Query.tsx`,
+`QueryBuilder/components/Formula/Formula.tsx`,
+`GridCardLayout/GridCard/FullView/index.tsx`,
+`GridCardLayout/WidgetHeader/index.tsx`,
+`OnboardingV2Container/InviteTeamMembers/InviteTeamMembers.tsx`,
+`NewWidget/LeftContainer/QuerySection/QueryBuilder/ClickHouse/query.tsx`,
+`NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/query.tsx`,
+`components/Input/index.tsx`,
+`pages/TracesExplorer/Filter/DurationSection.tsx`.
+
+**Use `allowClear`:**
+`Trace/Search/AllTags/Tag/TagKey.tsx` _(migrated — `allowClear` was only used elsewhere)_,
+`ServiceTable/Filter/FilterDropdown.tsx`,
+`ServiceApplication/Filter/FilterDropdown.tsx`,
+`LogsSearchFilter/index.tsx`,
+`MetricsExplorer/MetricDetails/AllAttributesValue.tsx`,
+`GridCardLayout/GridCard/FullView/index.tsx`,
+`NewWidget/RightContainer/SettingSections/GeneralSettingsSection/GeneralSettingsSection.tsx`,
+`AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx`,
+`AllError/index.tsx`,
+`PipelinePage/Layouts/Pipeline/PipelinesSearchSection.tsx`,
+`lib/uPlotV2/components/Legend/Legend.tsx`.
+
+**Use `bordered`, `status`, or `size="small|middle|large"`:**
+`OrganizationSettings/DisplayName/index.tsx` (size, status),
+`FormAlertRules/labels/index.tsx` (bordered),
+`DashboardContainer/DashboardVariablesSelection/TextboxVariableInput.tsx` (bordered),
+`MetricsExplorer/MetricDetails/AllAttributes.tsx` (size),
+`MetricsExplorer/MetricDetails/AllAttributesValue.tsx` (size),
+`AllError/index.tsx` (size),
+`components/CustomTimePicker/CustomTimePicker.tsx` (status),
+`QueryBuilder/components/Query/Query.tsx` (size),
+`QueryBuilder/components/Formula/Formula.tsx` (size),
+`NewWidget/LeftContainer/QuerySection/QueryBuilder/ClickHouse/query.tsx` (size),
+`NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/query.tsx` (size).
+
+**`styled(Input)` in `.ts` style files (DOM structure differs):**
+`Trace/Filters/Panel/PanelBody/Duration/styles.ts`,
+`Version/styles.ts`.
+
+**Aliased-only `Input as X` (no plain `<Input>`):**
+`ResetPassword/index.tsx`.
+
+**Already on `@signozhq/ui/input`** (no diff this round): Retention, AuthnOIDC/SAML/Google + their helper sections (ClaimMapping, RoleMapping, AttributeMapping, DomainMapping), ForgotPassword, IntegrationsHeader, OnboardingQuestionaire (Invite + AboutSigNoz), AIAssistant/ChatInput, ServiceAccountsSettings, MembersSettings, ServiceAccountDrawer (EditKey + AddKey), InviteMembersModal, EditMemberDrawer, RolesSettings + CreateRoleModal, SignUp, plus the rest of the `@signozhq/ui/input` adopters listed in `git grep "@signozhq/ui/input"`.

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

@@ -6,7 +6,7 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { TimezonePickerShortcuts } from 'constants/shortcuts/TimezonePickerShortcuts';

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

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

frontend/src/components/InputWithLabel/InputWithLabel.tsx

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

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

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

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 } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Checkbox, Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Button, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 

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

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

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

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

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

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

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

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Input } from 'antd';
-
+import { Input } from '@signozhq/ui/input';
 import './TimeInput.scss';
 
 export interface TimeInputProps {

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

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

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

@@ -16,7 +16,8 @@ import {
 	Plus,
 	X,
 } from '@signozhq/icons';
-import { Button, Card, Input, Modal, Popover, Tag, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Card, Modal, Popover, Tag, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';

frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button } from 'antd';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { ResizeTable } from 'components/ResizeTable';
 import { useNotifications } from 'hooks/useNotifications';

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -19,11 +19,11 @@ import {
 	Info,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
+import { Input } from '@signozhq/ui/input';
 import {
 	Button,
 	ColorPicker,
 	Divider,
-	Input,
 	Modal,
 	RefSelectProps,
 	Select,

frontend/src/container/FormAlertChannels/Settings/Email.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, Input } from 'antd';
-
+import { Input } from '@signozhq/ui/input';
+import { Form } from 'antd';
 import { EmailChannel } from '../../CreateAlertChannels/config';
 
 function EmailForm({ setSelectedConfig }: EmailFormProps): JSX.Element {

frontend/src/container/FormAlertChannels/Settings/Webhook.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Form } from 'antd';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 
 import { WebhookChannel } from '../../CreateAlertChannels/config';

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 } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Form, FormInstance, Select, Switch } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { Store } from 'antd/lib/form/interface';
 import ROUTES from 'constants/routes';

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -6,7 +6,8 @@ import { useIsFetching } from 'react-query';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Form, Input, Modal } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Form, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -5,12 +5,12 @@ import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
 import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
 import {
 	Col,
 	Collapse,
 	DatePicker,
 	Form,
-	Input,
 	InputNumber,
 	Modal,
 	Row,

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/RegionForm/RenderConnectionParams.tsx

@@ -1,4 +1,5 @@
-import { Form, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Form } from 'antd';
 import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';
 
 function RenderConnectionFields({

frontend/src/container/Licenses/ApplyLicenseForm.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Form, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Form } from 'antd';
 import apply from 'api/v3/licenses/post';
 import { useNotifications } from 'hooks/useNotifications';
 import APIError from 'types/api/error';

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { ChangeEvent, useState } from 'react';
-import { Button, Input, Modal } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import ApacheIcon from 'assets/CustomIcons/ApacheIcon';
 import DockerIcon from 'assets/CustomIcons/DockerIcon';

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -12,11 +12,11 @@ import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
+import { Input } from '@signozhq/ui/input';
 import {
 	Button,
 	Dropdown,
 	Flex,
-	Input,
 	MenuProps,
 	Modal,
 	Popover,

frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LoaderCircle, Check } from '@signozhq/icons';
-import { Button, Input, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';

frontend/src/container/LogDetailedView/Overview.tsx

@@ -2,7 +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/button';
-import { Collapse, Divider, Input, Switch, Tag } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Collapse, Divider, Switch, Tag } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';

frontend/src/container/LogsFilters/index.tsx

@@ -2,7 +2,8 @@ import { ChangeEvent, useCallback, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { CirclePlus, X } from '@signozhq/icons';
-import { Col, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Col } from 'antd';
 import CategoryHeading from 'components/Logs/CategoryHeading';
 import { fieldSearchFilter } from 'lib/logs/fieldSearch';
 import { AppState } from 'store/reducers';

frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/QueryBuilder.tsx

@@ -2,7 +2,8 @@ import { useCallback, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { SquareX, X } from '@signozhq/icons';
-import { Button, Input, Select } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Select } from 'antd';
 import CategoryHeading from 'components/Logs/CategoryHeading';
 import {
 	ConditionalOperators,

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

@@ -1,6 +1,7 @@
-import { Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Select } from 'antd';
+// TODO(@signozhq/ui-input): migrate this <Input> once @signozhq/ui Input
+// supports the `onWheel` handler (used to blur on scroll for number inputs).
+import { Input, Select } from 'antd';
 import classNames from 'classnames';
 
 import { TIME_AGGREGATION_OPTIONS } from './constants';

frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import type { TableColumnsType as ColumnsType } from 'antd';
-import { Button, Collapse, Input, Select, Spin } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Collapse, Select, Spin } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import {

frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.tsx

@@ -7,7 +7,8 @@ import {
 	DropResult,
 } from 'react-beautiful-dnd';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Divider, Dropdown, Input, MenuProps, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Divider, Dropdown, MenuProps, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { FieldDataType } from 'api/v5/v5';
 import { SOMETHING_WENT_WRONG } from 'constants/api';

frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Button, Col, Form, Input as AntInput, Input, Row } from 'antd';
+// TODO(@signozhq/ui-input): migrate <Input> once @signozhq/ui Input
+// supports the `spellCheck` prop on the URL input below.
+import { Button, Col, Form, Input, Input as AntInput, Row } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CONTEXT_LINK_FIELDS } from 'container/NewWidget/RightContainer/ContextLinks/constants';
 import {

frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Blocks, Check, LoaderCircle } from '@signozhq/icons';
-import { Button, Card, Form, Input, Select, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Card, Form, Select, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/OnboardingContainer/Steps/EnvironmentDetails/EnvironmentDetails.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Check, Server, LoaderCircle } from '@signozhq/icons';
-import { Button, Card, Form, Input, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Card, Form, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { Plus, Trash2 } from '@signozhq/icons';
-import { Button, Form, FormInstance, Input, Select, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Form, FormInstance, Select, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
 

frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/FormFields/NameInput.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Form, Input } from 'antd';
-
+import { Input } from '@signozhq/ui/input';
+import { Form } from 'antd';
 import { ProcessorFormField } from '../../AddNewProcessor/config';
 import { formValidationRules } from '../../config';
 

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

@@ -1,4 +1,6 @@
 import { ChangeEventHandler, useState } from 'react';
+// TODO(@signozhq/ui-input): migrate to @signozhq/ui Input once the antd
+// `InputProps` spread (`size`, etc.) is no longer needed on this wrapper.
 import { Input, InputProps } from 'antd';
 
 function CSVInput({ value, onChange, ...otherProps }: InputProps): JSX.Element {

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

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Info } from '@signozhq/icons';
-import { Flex, Form, Input, Space, Switch, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Flex, Form, Space, Switch, Tooltip } from 'antd';
 import { ProcessorData } from 'types/api/pipeline/def';
 
 import { PREDEFINED_MAPPING } from '../config';

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 { Input } from '@signozhq/ui/input';
+import { Form, Select, Space, Switch } from 'antd';
 import { ModalFooterTitle } from 'container/PipelinePage/styles';
 import { ProcessorData } from 'types/api/pipeline/def';
 

frontend/src/container/PlannedDowntime/PlannedDowntime.tsx

@@ -2,7 +2,8 @@ import React, { ChangeEvent, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Plus, Search } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Flex, Form, Input, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Flex, Form, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	useDeleteDowntimeScheduleByID,

frontend/src/container/QueryTable/Drilldown/BreakoutOptions.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { Input, Skeleton } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Skeleton } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';

frontend/src/container/RoutingPolicies/RoutingPolicies.tsx

@@ -1,7 +1,8 @@
 import { ChangeEvent, useMemo } from 'react';
 import { Plus, Search } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Flex, Input, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Flex, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';

frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';

frontend/src/container/SpanDetailsDrawer/Events/Events.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { Collapse, Input, Modal } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Collapse, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { Diamond } from '@signozhq/icons';

frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.tsx

@@ -9,10 +9,10 @@ import {
 	useState,
 } from 'react';
 import { useMutation, useQuery } from 'react-query';
+import { Input } from '@signozhq/ui/input';
 import {
 	Button,
 	Checkbox,
-	Input,
 	Modal,
 	Select,
 	Skeleton,

frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/styles.ts

@@ -1,5 +1,7 @@
-import { Input } from 'antd';
+// TODO(@signozhq/ui-input): migrate this styled(Input) once @signozhq/ui
+// Input supports `addonAfter` (the consumer renders `<InputComponent addonAfter="ms">`).
 import { Typography } from '@signozhq/ui/typography';
+import { Input } from 'antd';
 import styled from 'styled-components';
 
 export const DurationText = styled.div`

frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx

@@ -8,7 +8,8 @@ import {
 import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { AutoComplete, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { AutoComplete } from 'antd';
 import getTagFilters from 'api/trace/getTagFilter';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';

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

@@ -2,7 +2,8 @@ import { useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { AutoComplete, Input, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { AutoComplete, Space } from 'antd';
 import getTagFilters from 'api/trace/getTagFilter';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';

frontend/src/container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx

@@ -1,6 +1,7 @@
 import { ChangeEvent, useEffect, useMemo, useState } from 'react';
 import { ArrowLeft, Check, Loader, Plus, Search } from '@signozhq/icons';
-import { Button, Input, Spin } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Spin } from 'antd';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import SignozModal from 'components/SignozModal/SignozModal';

frontend/src/container/Version/styles.ts

@@ -1,4 +1,4 @@
-import { Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
 import styled from 'styled-components';
 
 export const InputComponent = styled(Input)`

frontend/src/pages/MessagingQueues/MQDetails/DropRateView/EvaluationTimeSelector.tsx

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { Input, Select } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import './DropRateView.styles.scss';

frontend/src/pages/SaveView/index.tsx

@@ -3,7 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
-import { ColorPicker, Input, Modal, Table, TableProps } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { ColorPicker, Modal, Table, TableProps } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import {

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentilePanel.tsx

@@ -1,4 +1,5 @@
-import { Checkbox, Input, Select, Skeleton } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Checkbox, Select, Skeleton } from 'antd';
 import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';

frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx

@@ -1,6 +1,7 @@
 import { ChangeEvent, useEffect, useMemo, useState } from 'react';
 import { Button } from '@signozhq/ui/button';
-import { Input, Spin } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Spin } from 'antd';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import SignozModal from 'components/SignozModal/SignozModal';

frontend/src/pages/TracesFunnels/components/RenameFunnel/RenameFunnel.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useQueryClient } from 'react-query';
-import { Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
 import SignozModal from 'components/SignozModal/SignozModal';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useRenameFunnel } from 'hooks/TracesFunnels/useFunnels';

frontend/src/pages/TracesFunnels/components/SearchBar/SearchBar.tsx

@@ -1,6 +1,7 @@
 import { ChangeEvent } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Input, Popover, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { ArrowDownWideNarrow, Check, Plus, Search } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';