chore: updated the types

* feat(billing): add zeus put meters api

* feat(billing): add zeus put meters api

ee/query-service/app/server.go

@@ -120,7 +120,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 	}
 
 	// start the usagemanager
-	usageManager, err := usage.New(signoz.Licensing, signoz.TelemetryStore.ClickhouseDB(), signoz.Zeus, signoz.Modules.OrgGetter)
+	usageManager, err := usage.New(signoz.Licensing, signoz.TelemetryStore.ClickhouseDB(), signoz.Zeus, signoz.Modules.OrgGetter, signoz.Flagger)
 	if err != nil {
 		return nil, err
 	}

ee/query-service/usage/manager.go

@@ -16,9 +16,11 @@ import (
 
 	"github.com/SigNoz/signoz/ee/query-service/model"
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/flagger"
 	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/query-service/utils/encryption"
+	"github.com/SigNoz/signoz/pkg/types/featuretypes"
 	"github.com/SigNoz/signoz/pkg/zeus"
 )
 
@@ -43,15 +45,18 @@ type Manager struct {
 	zeus zeus.Zeus
 
 	orgGetter organization.Getter
+
+	flagger flagger.Flagger
 }
 
-func New(licenseService licensing.Licensing, clickhouseConn clickhouse.Conn, zeus zeus.Zeus, orgGetter organization.Getter) (*Manager, error) {
+func New(licenseService licensing.Licensing, clickhouseConn clickhouse.Conn, zeus zeus.Zeus, orgGetter organization.Getter, flagger flagger.Flagger) (*Manager, error) {
 	m := &Manager{
 		clickhouseConn: clickhouseConn,
 		licenseService: licenseService,
 		scheduler:      gocron.NewScheduler(time.UTC).Every(1).Day().At("00:00"), // send usage every at 00:00 UTC
 		zeus:           zeus,
 		orgGetter:      orgGetter,
+		flagger:        flagger,
 	}
 	return m, nil
 }
@@ -168,7 +173,14 @@ func (lm *Manager) UploadUsage(ctx context.Context) {
 			return
 		}
 
-		errv2 = lm.zeus.PutMeters(ctx, payload.LicenseKey.String(), body)
+		evalCtx := featuretypes.NewFlaggerEvaluationContext(organization.ID)
+		useZeus := lm.flagger.BooleanOrEmpty(ctx, flagger.FeaturePutMetersInZeus, evalCtx)
+
+		if useZeus {
+			errv2 = lm.zeus.PutMetersV2(ctx, payload.LicenseKey.String(), body)
+		} else {
+			errv2 = lm.zeus.PutMeters(ctx, payload.LicenseKey.String(), body)
+		}
 		if errv2 != nil {
 			slog.ErrorContext(ctx, "failed to upload usage", errors.Attr(errv2))
 			// not returning error here since it is captured in the failed count

ee/zeus/httpzeus/provider.go

@@ -136,6 +136,18 @@ func (provider *Provider) PutMeters(ctx context.Context, key string, data []byte
 	return err
 }
 
+func (provider *Provider) PutMetersV2(ctx context.Context, key string, data []byte) error {
+	_, err := provider.do(
+		ctx,
+		provider.config.URL.JoinPath("/v1/meters"),
+		http.MethodPost,
+		key,
+		data,
+	)
+
+	return err
+}
+
 func (provider *Provider) PutProfile(ctx context.Context, key string, profile *zeustypes.PostableProfile) error {
 	body, err := json.Marshal(profile)
 	if err != nil {

frontend/jest.config.ts

@@ -45,7 +45,7 @@ const config: Config.InitialOptions = {
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@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|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/jest.setup.ts

@@ -24,10 +24,6 @@ window.matchMedia =
 		};
 	};
 
-if (!HTMLElement.prototype.scrollIntoView) {
-	HTMLElement.prototype.scrollIntoView = function (): void {};
-}
-
 // Patch getComputedStyle to handle CSS parsing errors from @signozhq/* packages.
 // These packages inject CSS at import time via style-inject / vite-plugin-css-injected-by-js.
 // jsdom's nwsapi cannot parse some of the injected selectors (e.g. Tailwind's :animate-in),

frontend/package.json

@@ -48,8 +48,22 @@
     "@radix-ui/react-tooltip": "1.0.7",
     "@sentry/react": "8.41.0",
     "@sentry/vite-plugin": "2.22.6",
+    "@signozhq/button": "0.0.5",
+    "@signozhq/calendar": "0.1.1",
+    "@signozhq/callout": "0.0.4",
+    "@signozhq/checkbox": "0.0.4",
+    "@signozhq/combobox": "0.0.4",
+    "@signozhq/command": "0.0.2",
     "@signozhq/design-tokens": "2.1.4",
+    "@signozhq/dialog": "0.0.4",
+    "@signozhq/drawer": "0.0.6",
     "@signozhq/icons": "0.1.0",
+    "@signozhq/input": "0.0.4",
+    "@signozhq/popover": "0.1.2",
+    "@signozhq/radio-group": "0.0.4",
+    "@signozhq/resizable": "0.0.2",
+    "@signozhq/table": "0.3.7",
+    "@signozhq/toggle-group": "0.0.3",
     "@signozhq/ui": "0.0.5",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",

frontend/src/auto-import-registry.d.ts

@@ -10,6 +10,20 @@
 // PR for reference: https://github.com/SigNoz/signoz/pull/9694
 // -------------------------------------------------------------------------
 
+import '@signozhq/button';
+import '@signozhq/calendar';
+import '@signozhq/callout';
+import '@signozhq/checkbox';
+import '@signozhq/combobox';
+import '@signozhq/command';
 import '@signozhq/design-tokens';
+import '@signozhq/dialog';
+import '@signozhq/drawer';
 import '@signozhq/icons';
+import '@signozhq/input';
+import '@signozhq/popover';
+import '@signozhq/radio-group';
+import '@signozhq/resizable';
+import '@signozhq/table';
+import '@signozhq/toggle-group';
 import '@signozhq/ui';

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { Button } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
 import { LifeBuoy } from 'lucide-react';
 
 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
@@ -23,7 +23,7 @@ function AuthHeader(): JSX.Element {
 			</div>
 			<Button
 				className="auth-header-help-button"
-				prefix={<LifeBuoy size={12} />}
+				prefixIcon={<LifeBuoy size={12} />}
 				onClick={handleGetHelp}
 			>
 				Get Help

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -1,13 +1,10 @@
 import { Controller, useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { X } from '@signozhq/icons';
-import {
-	Button,
-	DialogFooter,
-	DialogWrapper,
-	Input,
-	toast,
-} from '@signozhq/ui';
+import { Input } from '@signozhq/input';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccounts,
@@ -140,7 +137,6 @@ function CreateServiceAccountModal(): JSX.Element {
 
 				<Button
 					type="submit"
-					// @ts-expect-error -- form prop not in @signozhq/ui Button type
 					form="create-sa-form"
 					variant="solid"
 					color="primary"

frontend/src/components/CreateServiceAccountModal/__tests__/CreateServiceAccountModal.test.tsx

@@ -1,13 +1,7 @@
 import { toast } from '@signozhq/ui';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import {
-	render,
-	screen,
-	userEvent,
-	waitFor,
-	waitForElementToBeRemoved,
-} from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import CreateServiceAccountModal from '../CreateServiceAccountModal';
 
@@ -127,12 +121,12 @@ describe('CreateServiceAccountModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const dialog = await screen.findByRole('dialog', {
-			name: /New Service Account/i,
-		});
+		await screen.findByRole('dialog', { name: /New Service Account/i });
 		await user.click(screen.getByRole('button', { name: /Cancel/i }));
 
-		await waitForElementToBeRemoved(dialog);
+		expect(
+			screen.queryByRole('dialog', { name: /New Service Account/i }),
+		).not.toBeInTheDocument();
 	});
 
 	it('shows "Name is required" after clearing the name field', async () => {

frontend/src/components/CustomTimePicker/CalendarContainer.tsx

@@ -1,4 +1,4 @@
-import { Calendar } from '@signozhq/ui';
+import { Calendar } from '@signozhq/calendar';
 import { Button } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -7,7 +7,7 @@ import {
 	useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Button } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -661,7 +661,7 @@ function CustomTimePicker({
 						onClick={handleZoomOut}
 						disabled={zoomOutDisabled}
 						data-testid="zoom-out-btn"
-						prefix={<ZoomOut size={14} />}
+						prefixIcon={<ZoomOut size={14} />}
 					/>
 				</Tooltip>
 			)}

frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx

@@ -1,5 +1,6 @@
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { Trash2, X } from '@signozhq/icons';
-import { Button, DialogFooter, DialogWrapper } from '@signozhq/ui';
 import { MemberRow } from 'components/MembersTable/MembersTable';
 
 interface DeleteMemberDialogProps {

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -1,7 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
+import { Button } from '@signozhq/button';
+import { DrawerWrapper } from '@signozhq/drawer';
 import { LockKeyhole, RefreshCw, Trash2, X } from '@signozhq/icons';
-import { Badge, Button, DrawerWrapper, Input, toast } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
+import { Badge, toast } from '@signozhq/ui';
 import { Skeleton, Tooltip } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
@@ -665,13 +668,14 @@ function EditMemberDrawer({
 					}
 				}}
 				direction="right"
+				type="panel"
 				showCloseButton
 				showOverlay={false}
-				title="Member Details"
+				allowOutsideClick
+				header={{ title: 'Member Details' }}
+				content={drawerContent}
 				className="edit-member-drawer"
-			>
-				{drawerContent}
-			</DrawerWrapper>
+			/>
 
 			<ResetLinkDialog
 				open={showResetLinkDialog}

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

@@ -1,5 +1,6 @@
+import { Button } from '@signozhq/button';
+import { DialogWrapper } from '@signozhq/dialog';
 import { Check, Copy } from '@signozhq/icons';
-import { Button, DialogWrapper } from '@signozhq/ui';
 
 interface ResetLinkDialogProps {
 	open: boolean;
@@ -48,7 +49,7 @@ function ResetLinkDialog({
 						color="secondary"
 						size="sm"
 						onClick={onCopy}
-						prefix={hasCopied ? <Check size={12} /> : <Copy size={12} />}
+						prefixIcon={hasCopied ? <Check size={12} /> : <Copy size={12} />}
 						className="reset-link-dialog__copy-btn"
 					>
 						{hasCopied ? 'Copied!' : 'Copy'}

frontend/src/components/EditMemberDrawer/__tests__/EditMemberDrawer.test.tsx

@@ -20,29 +20,17 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import EditMemberDrawer, { EditMemberDrawerProps } from '../EditMemberDrawer';
 
-jest.mock('api/generated/services/users', () => ({
-	useDeleteUser: jest.fn(),
-	useGetUser: jest.fn(),
-	useUpdateUser: jest.fn(),
-	useUpdateMyUserV2: jest.fn(),
-	useSetRoleByUserID: jest.fn(),
-	useGetResetPasswordToken: jest.fn(),
-	useCreateResetPasswordToken: jest.fn(),
-}));
-
-jest.mock('api/ErrorResponseHandlerForGeneratedAPIs', () => ({
-	convertToApiError: jest.fn(),
-}));
-
-jest.mock('@signozhq/ui', () => ({
-	...jest.requireActual('@signozhq/ui'),
+jest.mock('@signozhq/drawer', () => ({
 	DrawerWrapper: ({
-		children,
+		content,
 		open,
 	}: {
-		children?: ReactNode;
+		content?: ReactNode;
 		open: boolean;
-	}): JSX.Element | null => (open ? <div>{children}</div> : null),
+	}): JSX.Element | null => (open ? <div>{content}</div> : null),
+}));
+
+jest.mock('@signozhq/dialog', () => ({
 	DialogWrapper: ({
 		children,
 		open,
@@ -60,6 +48,24 @@ jest.mock('@signozhq/ui', () => ({
 	DialogFooter: ({ children }: { children?: ReactNode }): JSX.Element => (
 		<div>{children}</div>
 	),
+}));
+
+jest.mock('api/generated/services/users', () => ({
+	useDeleteUser: jest.fn(),
+	useGetUser: jest.fn(),
+	useUpdateUser: jest.fn(),
+	useUpdateMyUserV2: jest.fn(),
+	useSetRoleByUserID: jest.fn(),
+	useGetResetPasswordToken: jest.fn(),
+	useCreateResetPasswordToken: jest.fn(),
+}));
+
+jest.mock('api/ErrorResponseHandlerForGeneratedAPIs', () => ({
+	convertToApiError: jest.fn(),
+}));
+
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	toast: {
 		success: jest.fn(),
 		error: jest.fn(),

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -1,14 +1,11 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { Callout } from '@signozhq/callout';
 import { Style } from '@signozhq/design-tokens';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { ChevronDown, CircleAlert, Plus, Trash2, X } from '@signozhq/icons';
-import {
-	Button,
-	Callout,
-	DialogFooter,
-	DialogWrapper,
-	Input,
-	toast,
-} from '@signozhq/ui';
+import { Input } from '@signozhq/input';
+import { toast } from '@signozhq/ui';
 import { Select } from 'antd';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import sendInvite from 'api/v1/invite/create';
@@ -298,9 +295,8 @@ function InviteMembersModal({
 						showIcon
 						icon={<CircleAlert size={12} />}
 						className="invite-team-members-error-callout"
-					>
-						{getValidationErrorMessage()}
-					</Callout>
+						description={getValidationErrorMessage()}
+					/>
 				)}
 			</div>
 
@@ -310,7 +306,7 @@ function InviteMembersModal({
 					color="secondary"
 					size="sm"
 					className="add-another-member-button"
-					prefix={<Plus size={12} color={Style.L1_FOREGROUND} />}
+					prefixIcon={<Plus size={12} color={Style.L1_FOREGROUND} />}
 					onClick={addRow}
 				>
 					Add another

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -11,7 +11,7 @@ import {
 	ComboboxItem,
 	ComboboxList,
 	ComboboxTrigger,
-} from '@signozhq/ui';
+} from '@signozhq/combobox';
 import { Skeleton, Switch, Tooltip, Typography } from 'antd';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
@@ -200,6 +200,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 												setOpen(false);
 											}}
 											isSelected={validQueryIndex === option.value}
+											showCheck={false}
 										>
 											{option.label}
 										</ComboboxItem>

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyCreatedPhase.tsx

@@ -1,5 +1,7 @@
+import { Button } from '@signozhq/button';
+import { Callout } from '@signozhq/callout';
 import { Check, Copy } from '@signozhq/icons';
-import { Badge, Button, Callout } from '@signozhq/ui';
+import { Badge } from '@signozhq/ui';
 import type { ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO } from 'api/generated/services/sigNoz.schemas';
 
 export interface KeyCreatedPhaseProps {
@@ -41,7 +43,7 @@ function KeyCreatedPhase({
 			<Callout
 				type="info"
 				showIcon
-				title="Store the key securely. This is the only time it will be displayed."
+				message="Store the key securely. This is the only time it will be displayed."
 			/>
 		</div>
 	);

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx

@@ -1,6 +1,8 @@
 import type { Control, UseFormRegister } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
-import { Button, Input, ToggleGroup, ToggleGroupItem } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
+import { Input } from '@signozhq/input';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
 import { DatePicker } from 'antd';
 import { popupContainer } from 'utils/selectPopupContainer';
 
@@ -54,7 +56,7 @@ function KeyFormPhase({
 							<ToggleGroup
 								type="single"
 								value={field.value}
-								onChange={(val): void => {
+								onValueChange={(val): void => {
 									if (val) {
 										field.onChange(val);
 									}
@@ -110,7 +112,6 @@ function KeyFormPhase({
 					</Button>
 					<Button
 						type="submit"
-						// @ts-expect-error -- form prop not in @signozhq/ui Button type
 						form={FORM_ID}
 						variant="solid"
 						color="primary"

frontend/src/components/ServiceAccountDrawer/AddKeyModal/index.tsx

@@ -2,7 +2,8 @@ import { useCallback, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { useCopyToClipboard } from 'react-use';
-import { DialogWrapper, toast } from '@signozhq/ui';
+import { DialogWrapper } from '@signozhq/dialog';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccountKeys,

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -1,6 +1,8 @@
 import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { Trash2, X } from '@signozhq/icons';
-import { Button, DialogFooter, DialogWrapper, toast } from '@signozhq/ui';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getGetServiceAccountQueryKey,

frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx

@@ -1,13 +1,10 @@
 import type { Control, UseFormRegister } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
+import { Button } from '@signozhq/button';
 import { LockKeyhole, Trash2, X } from '@signozhq/icons';
-import {
-	Badge,
-	Button,
-	Input,
-	ToggleGroup,
-	ToggleGroupItem,
-} from '@signozhq/ui';
+import { Input } from '@signozhq/input';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { Badge } from '@signozhq/ui';
 import { DatePicker } from 'antd';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import { popupContainer } from 'utils/selectPopupContainer';
@@ -75,7 +72,7 @@ function EditKeyForm({
 							<ToggleGroup
 								type="single"
 								value={field.value}
-								onChange={(val): void => {
+								onValueChange={(val): void => {
 									if (val) {
 										field.onChange(val);
 									}
@@ -150,7 +147,6 @@ function EditKeyForm({
 					</Button>
 					<Button
 						type="submit"
-						// @ts-expect-error -- form prop not in @signozhq/ui Button type
 						form={FORM_ID}
 						variant="solid"
 						color="primary"

frontend/src/components/ServiceAccountDrawer/EditKeyModal/index.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
-import { DialogWrapper, toast } from '@signozhq/ui';
+import { DialogWrapper } from '@signozhq/dialog';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccountKeys,

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
+import { Button } from '@signozhq/button';
 import { KeyRound, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui';
 import { Skeleton, Table, Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
@@ -96,7 +96,7 @@ function buildColumns({
 				<Tooltip title={isDisabled ? 'Service account disabled' : 'Revoke Key'}>
 					<Button
 						variant="ghost"
-						size="sm"
+						size="xs"
 						color="destructive"
 						disabled={isDisabled}
 						onClick={(e): void => {

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import { LockKeyhole } from '@signozhq/icons';
-import { Badge, Input } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
+import { Badge } from '@signozhq/ui';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import RolesSelect from 'components/RolesSelect';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -1,6 +1,8 @@
 import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { Trash2, X } from '@signozhq/icons';
-import { Button, DialogFooter, DialogWrapper, toast } from '@signozhq/ui';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getListServiceAccountKeysQueryKey,

frontend/src/components/ServiceAccountDrawer/SaveErrorItem.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
+import { Button } from '@signozhq/button';
 import { Color } from '@signozhq/design-tokens';
 import { ChevronDown, ChevronUp, CircleAlert, RotateCw } from '@signozhq/icons';
-import { Button } from '@signozhq/ui';
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import APIError from 'types/api/error';
 
@@ -42,7 +42,7 @@ function SaveErrorItem({
 					<Button
 						type="button"
 						aria-label="Retry"
-						size="sm"
+						size="xs"
 						onClick={async (e): Promise<void> => {
 							e.stopPropagation();
 							setIsRetrying(true);

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -1,13 +1,10 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { DrawerWrapper } from '@signozhq/drawer';
 import { Key, LayoutGrid, Plus, Trash2, X } from '@signozhq/icons';
-import {
-	Button,
-	DrawerWrapper,
-	toast,
-	ToggleGroup,
-	ToggleGroupItem,
-} from '@signozhq/ui';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { toast } from '@signozhq/ui';
 import { Pagination, Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
@@ -382,7 +379,7 @@ function ServiceAccountDrawer({
 				<ToggleGroup
 					type="single"
 					value={activeTab}
-					onChange={(val): void => {
+					onValueChange={(val): void => {
 						if (val) {
 							setActiveTab(val as ServiceAccountDrawerTab);
 							if (val !== ServiceAccountDrawerTab.Keys) {
@@ -550,13 +547,14 @@ function ServiceAccountDrawer({
 					}
 				}}
 				direction="right"
+				type="panel"
 				showCloseButton
 				showOverlay={false}
-				title="Service Account Details"
+				allowOutsideClick
+				header={{ title: 'Service Account Details' }}
+				content={drawerContent}
 				className="sa-drawer"
-			>
-				{drawerContent}
-			</DrawerWrapper>
+			/>
 
 			<DeleteAccountModal />
 

frontend/src/components/ServiceAccountDrawer/__tests__/AddKeyModal.test.tsx

@@ -1,13 +1,7 @@
 import { toast } from '@signozhq/ui';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import {
-	render,
-	screen,
-	userEvent,
-	waitFor,
-	waitForElementToBeRemoved,
-} from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import AddKeyModal from '../AddKeyModal';
 
@@ -134,9 +128,11 @@ describe('AddKeyModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const dialog = await screen.findByRole('dialog', { name: /Add a New Key/i });
+		await screen.findByRole('dialog', { name: /Add a New Key/i });
 		await user.click(screen.getByRole('button', { name: /Cancel/i }));
 
-		await waitForElementToBeRemoved(dialog);
+		expect(
+			screen.queryByRole('dialog', { name: /Add a New Key/i }),
+		).not.toBeInTheDocument();
 	});
 });

frontend/src/components/ServiceAccountDrawer/__tests__/ServiceAccountDrawer.test.tsx

@@ -6,15 +6,18 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import ServiceAccountDrawer from '../ServiceAccountDrawer';
 
-jest.mock('@signozhq/ui', () => ({
-	...jest.requireActual('@signozhq/ui'),
+jest.mock('@signozhq/drawer', () => ({
 	DrawerWrapper: ({
-		children,
+		content,
 		open,
 	}: {
-		children?: ReactNode;
+		content?: ReactNode;
 		open: boolean;
-	}): JSX.Element | null => (open ? <div>{children}</div> : null),
+	}): JSX.Element | null => (open ? <div>{content}</div> : null),
+}));
+
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	toast: { success: jest.fn(), error: jest.fn() },
 }));
 

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -7,7 +7,7 @@ import {
 	CommandItem,
 	CommandList,
 	CommandShortcut,
-} from '@signozhq/ui';
+} from '@signozhq/command';
 import logEvent from 'api/common/logEvent';
 import { useThemeMode } from 'hooks/useDarkMode';
 import history from 'lib/history';

frontend/src/container/CustomDomainSettings/CustomDomainEditModal.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useState } from 'react';
+import { Button } from '@signozhq/button';
 import { Color } from '@signozhq/design-tokens';
+import { DialogWrapper } from '@signozhq/dialog';
 import { CircleAlert, CircleCheck, LoaderCircle } from '@signozhq/icons';
-import { Button, DialogWrapper, Input } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
 import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -1,4 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { Callout } from '@signozhq/callout';
 import {
 	Check,
 	ChevronDown,
@@ -9,7 +11,7 @@ import {
 	SolidAlertCircle,
 	X,
 } from '@signozhq/icons';
-import { Button, Callout, toast } from '@signozhq/ui';
+import { toast } from '@signozhq/ui';
 import { Dropdown, Skeleton } from 'antd';
 import {
 	RenderErrorResponseDTO,
@@ -42,9 +44,9 @@ function DomainUpdateToast({
 			<div className="custom-domain-toast-actions">
 				<Button
 					variant="ghost"
-					size="sm"
+					size="xs"
 					className="custom-domain-toast-visit-btn"
-					suffix={<ExternalLink size={12} />}
+					suffixIcon={<ExternalLink size={12} />}
 					onClick={(): void => {
 						window.open(url, '_blank', 'noopener,noreferrer');
 					}}
@@ -59,7 +61,7 @@ function DomainUpdateToast({
 						toast.dismiss(toastId);
 					}}
 					aria-label="Dismiss"
-					prefix={<X size={14} />}
+					prefixIcon={<X size={14} />}
 				/>
 			</div>
 		</div>
@@ -244,7 +246,7 @@ export default function CustomDomainSettings(): JSX.Element {
 						>
 							<Button
 								type="button"
-								size="sm"
+								size="xs"
 								className="workspace-url-trigger"
 								disabled={isFetchingHosts}
 							>
@@ -264,7 +266,7 @@ export default function CustomDomainSettings(): JSX.Element {
 					variant="solid"
 					size="sm"
 					className="custom-domain-edit-button"
-					prefix={<FilePenLine size={12} />}
+					prefixIcon={<FilePenLine size={12} />}
 					disabled={isFetchingHosts || isPollingEnabled}
 					onClick={(): void => setIsEditModalOpen(true)}
 				>
@@ -279,7 +281,7 @@ export default function CustomDomainSettings(): JSX.Element {
 					className="custom-domain-callout"
 					size="small"
 					icon={<SolidAlertCircle size={13} color="primary" />}
-					title={`Updating your URL to ⎯ ${customDomainSubdomain}.${dnsSuffix}. This may take a few mins.`}
+					message={`Updating your URL to ⎯ ${customDomainSubdomain}.${dnsSuffix}. This may take a few mins.`}
 				/>
 			)}
 

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

@@ -1,7 +1,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 { Checkbox } from '@signozhq/checkbox';
+import { toast } from '@signozhq/ui';
 import { Button, Select, Typography } from 'antd';
 import createPublicDashboardAPI from 'api/dashboard/public/createPublicDashboard';
 import revokePublicDashboardAccessAPI from 'api/dashboard/public/revokePublicDashboardAccess';
@@ -246,11 +247,10 @@ function PublicDashboardSetting(): JSX.Element {
 				<div className="timerange-enabled-checkbox">
 					<Checkbox
 						id="enable-time-range"
-						value={timeRangeEnabled}
-						onChange={handleTimeRangeEnabled}
-					>
-						Enable time range
-					</Checkbox>
+						checked={timeRangeEnabled}
+						onCheckedChange={handleTimeRangeEnabled}
+						labelName="Enable time range"
+					/>
 				</div>
 
 				<div className="default-time-range-select">

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import ChartLayout from 'container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout';
 import Legend from 'lib/uPlotV2/components/Legend/Legend';
 import {
@@ -30,6 +30,7 @@ export default function ChartWrapper({
 	onDestroy = noop,
 	children,
 	layoutChildren,
+	yAxisUnit,
 	customTooltip,
 	pinnedTooltipElement,
 	'data-testid': testId,
@@ -62,6 +63,13 @@ export default function ChartWrapper({
 		[customTooltip],
 	);
 
+	const syncMetadata = useMemo(
+		() => ({
+			yAxisUnit,
+		}),
+		[yAxisUnit],
+	);
+
 	return (
 		<PlotContextProvider>
 			<ChartLayout
@@ -99,6 +107,7 @@ export default function ChartWrapper({
 									averageLegendWidth + TOOLTIP_WIDTH_PADDING,
 								)}
 								syncKey={syncKey}
+								syncMetadata={syncMetadata}
 								render={renderTooltipCallback}
 								pinnedTooltipElement={pinnedTooltipElement}
 							/>

frontend/src/container/DashboardContainer/visualization/charts/Histogram/Histogram.tsx

@@ -24,13 +24,12 @@ export default function Histogram(props: HistogramChartProps): JSX.Element {
 			}
 			const tooltipProps: HistogramTooltipProps = {
 				...props,
-				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
 			};
 			return <HistogramTooltip {...tooltipProps} />;
 		},
-		[customTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
+		[customTooltip, rest.yAxisUnit, rest.decimalPrecision],
 	);
 
 	return (

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -12,10 +12,7 @@ interface BaseChartProps {
 	height: number;
 	showTooltip?: boolean;
 	showLegend?: boolean;
-	timezone?: Timezone;
 	canPinTooltip?: boolean;
-	yAxisUnit?: string;
-	decimalPrecision?: PrecisionOption;
 	pinnedTooltipElement?: (clickData: TooltipClickData) => React.ReactNode;
 	customTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
 	'data-testid'?: string;
@@ -32,18 +29,31 @@ interface UPlotBasedChartProps {
 	layoutChildren?: React.ReactNode;
 }
 
+interface UPlotChartDataProps {
+	yAxisUnit?: string;
+	decimalPrecision?: PrecisionOption;
+}
+
 export interface TimeSeriesChartProps
 	extends BaseChartProps,
-		UPlotBasedChartProps {}
+		UPlotBasedChartProps,
+		UPlotChartDataProps {
+	timezone?: Timezone;
+}
 
 export interface HistogramChartProps
 	extends BaseChartProps,
-		UPlotBasedChartProps {
+		UPlotBasedChartProps,
+		UPlotChartDataProps {
 	isQueriesMerged?: boolean;
 }
 
-export interface BarChartProps extends BaseChartProps, UPlotBasedChartProps {
+export interface BarChartProps
+	extends BaseChartProps,
+		UPlotBasedChartProps,
+		UPlotChartDataProps {
 	isStackedBarChart?: boolean;
+	timezone?: Timezone;
 }
 
 export type ChartProps =

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -123,13 +123,13 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 					}}
 					plotRef={onPlotRef}
 					onDestroy={onPlotDestroy}
-					yAxisUnit={widget.yAxisUnit}
-					decimalPrecision={widget.decimalPrecision}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}
 					layoutChildren={layoutChildren}
 					isStackedBarChart={widget.stackedBarChart ?? false}
+					yAxisUnit={widget.yAxisUnit}
+					decimalPrecision={widget.decimalPrecision}
 					timezone={timezone}
 				>
 					<ContextMenu

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel.tsx

@@ -4,7 +4,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import { useTimezone } from 'providers/Timezone';
 import uPlot from 'uplot';
 
 import Histogram from '../../charts/Histogram/Histogram';
@@ -29,7 +28,6 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 	const containerDimensions = useResizeObserver(graphRef);
 
 	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
 
 	const config = useMemo(() => {
 		return prepareHistogramPanelConfig({
@@ -92,11 +90,10 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 					onDestroy={(): void => {
 						uPlotRef.current = null;
 					}}
-					isQueriesMerged={widget.mergeAllActiveQueries}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
+					isQueriesMerged={widget.mergeAllActiveQueries}
 					syncMode={DashboardCursorSync.Crosshair}
-					timezone={timezone}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/__tests__/HistogramPanel.test.tsx

@@ -48,8 +48,8 @@ jest.mock(
 					{JSON.stringify({
 						legendPosition: props.legendConfig?.position,
 						isQueriesMerged: props.isQueriesMerged,
-						yAxisUnit: props.yAxisUnit,
-						decimalPrecision: props.decimalPrecision,
+						yAxisUnit: props?.yAxisUnit,
+						decimalPrecision: props?.decimalPrecision,
 					})}
 				</div>
 				{props.layoutChildren}

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx

@@ -6,6 +6,7 @@ import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { ContextMenu } from 'periscope/components/ContextMenu';
 import { useTimezone } from 'providers/Timezone';
 import uPlot from 'uplot';
@@ -112,10 +113,13 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 					legendConfig={{
 						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
 					}}
+					timezone={timezone}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
-					timezone={timezone}
 					data={chartData as uPlot.AlignedData}
+					syncMode={
+						isFullViewMode ? DashboardCursorSync.None : DashboardCursorSync.Crosshair
+					}
 					width={containerDimensions.width}
 					height={containerDimensions.height}
 					layoutChildren={layoutChildren}

frontend/src/container/ForgotPassword/SuccessScreen.tsx

@@ -1,5 +1,5 @@
+import { Button } from '@signozhq/button';
 import { ArrowLeft, Mail } from '@signozhq/icons';
-import { Button } from '@signozhq/ui';
 
 interface SuccessScreenProps {
 	onBackToLogin: () => void;
@@ -28,7 +28,7 @@ function SuccessScreen({ onBackToLogin }: SuccessScreenProps): JSX.Element {
 						data-testid="back-to-login"
 						className="login-submit-btn"
 						onClick={onBackToLogin}
-						prefix={<ArrowLeft size={12} />}
+						prefixIcon={<ArrowLeft size={12} />}
 					>
 						Back to login
 					</Button>

frontend/src/container/ForgotPassword/index.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo } from 'react';
+import { Button } from '@signozhq/button';
 import { ArrowLeft, ArrowRight } from '@signozhq/icons';
-import { Button, Input } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
 import { Form, Select } from 'antd';
 import { ErrorResponseHandlerForGeneratedAPIs } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import { useForgotPassword } from 'api/generated/services/users';
@@ -190,7 +191,7 @@ function ForgotPassword({
 						data-testid="forgot-password-back"
 						className="forgot-password-back-button"
 						onClick={handleBackToLogin}
-						prefix={<ArrowLeft size={12} />}
+						prefixIcon={<ArrowLeft size={12} />}
 					>
 						Back to login
 					</Button>
@@ -203,7 +204,7 @@ function ForgotPassword({
 						type="submit"
 						data-testid="forgot-password-submit"
 						className="login-submit-btn"
-						suffix={<ArrowRight size={12} />}
+						suffixIcon={<ArrowRight size={12} />}
 					>
 						{isLoading ? 'Sending...' : 'Send reset link'}
 					</Button>

frontend/src/container/GeneralSettings/GeneralSettings.tsx

@@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 import { useInterval } from 'react-use';
 import { LoadingOutlined } from '@ant-design/icons';
+import { Button } from '@signozhq/button';
 import { Compass, ScrollText } from '@signozhq/icons';
-import { Button } from '@signozhq/ui';
 import { Modal, Spin } from 'antd';
 import setRetentionApi from 'api/settings/setRetention';
 import setRetentionApiV2 from 'api/settings/setRetentionV2';

frontend/src/container/GeneralSettings/LicenseKeyRow/LicenseKeyRow.tsx

@@ -1,6 +1,7 @@
 import { useCopyToClipboard } from 'react-use';
+import { Button } from '@signozhq/button';
 import { Copy, KeyRound } from '@signozhq/icons';
-import { Button, toast } from '@signozhq/ui';
+import { toast } from '@signozhq/ui';
 import { useAppContext } from 'providers/App/App';
 import { getMaskedKey } from 'utils/maskedKey';
 
@@ -31,7 +32,7 @@ function LicenseKeyRow(): JSX.Element | null {
 				</code>
 				<Button
 					type="button"
-					size="sm"
+					size="xs"
 					aria-label="Copy license key"
 					data-testid="license-key-row-copy-btn"
 					className="license-key-row__copy-btn"

frontend/src/container/GeneralSettings/LicenseKeyRow/LicenseRowDismissibleCallout/LicenseRowDismissibleCallout.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Callout } from '@signozhq/ui';
+import { Callout } from '@signozhq/callout';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import { FeatureKeys } from 'constants/features';
@@ -44,38 +44,39 @@ function LicenseRowDismissibleCallout(): JSX.Element | null {
 			type="info"
 			size="small"
 			showIcon
-			action="dismissible"
-			onClick={handleDismissCallout}
+			dismissable
+			onClose={handleDismissCallout}
 			className="license-key-callout"
-		>
-			<div className="license-key-callout__description">
-				This is <strong>NOT</strong> your ingestion or Service account key.
-				{(hasServiceAccountsAccess || hasIngestionAccess) && (
-					<>
-						{' '}
-						Find your{' '}
-						{hasServiceAccountsAccess && (
-							<Link
-								to={ROUTES.SERVICE_ACCOUNTS_SETTINGS}
-								className="license-key-callout__link"
-							>
-								Service account here
-							</Link>
-						)}
-						{hasServiceAccountsAccess && hasIngestionAccess && ' and '}
-						{hasIngestionAccess && (
-							<Link
-								to={ROUTES.INGESTION_SETTINGS}
-								className="license-key-callout__link"
-							>
-								Ingestion key here
-							</Link>
-						)}
-						.
-					</>
-				)}
-			</div>
-		</Callout>
+			description={
+				<div className="license-key-callout__description">
+					This is <strong>NOT</strong> your ingestion or Service account key.
+					{(hasServiceAccountsAccess || hasIngestionAccess) && (
+						<>
+							{' '}
+							Find your{' '}
+							{hasServiceAccountsAccess && (
+								<Link
+									to={ROUTES.SERVICE_ACCOUNTS_SETTINGS}
+									className="license-key-callout__link"
+								>
+									Service account here
+								</Link>
+							)}
+							{hasServiceAccountsAccess && hasIngestionAccess && ' and '}
+							{hasIngestionAccess && (
+								<Link
+									to={ROUTES.INGESTION_SETTINGS}
+									className="license-key-callout__link"
+								>
+									Ingestion key here
+								</Link>
+							)}
+							.
+						</>
+					)}
+				</div>
+			}
+		/>
 	) : null;
 }
 

frontend/src/container/GeneralSettings/Retention.tsx

@@ -7,7 +7,7 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { Input as SignozInput } from '@signozhq/ui';
+import { Input as SignozInput } from '@signozhq/input';
 import { Col, Row, Select } from 'antd';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { find } from 'lodash-es';

frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Button } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
 import { Skeleton } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetHosts } from 'api/generated/services/zeus';
@@ -81,12 +81,11 @@ function DataSourceInfo({
 								color="primary"
 								size="sm"
 								className="periscope-btn primary"
-								prefix={<img src={containerPlusUrl} alt="plus" />}
+								prefixIcon={<img src={containerPlusUrl} alt="plus" />}
 								onClick={handleConnect}
-								// @ts-expect-error -- role/onKeyDown props not in @signozhq/ui Button type
 								role="button"
 								tabIndex={0}
-								onKeyDown={(e: React.KeyboardEvent): void => {
+								onKeyDown={(e): void => {
 									if (e.key === 'Enter') {
 										handleConnect();
 									}

frontend/src/container/LogsExplorerList/ColumnView/ColumnView.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ColumnDef, DataTable, Row } from '@signozhq/ui';
+import { ColumnDef, DataTable, Row } from '@signozhq/table';
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import LogStateIndicator from 'components/Logs/LogStateIndicator/LogStateIndicator';

frontend/src/container/LogsExplorerList/TanStackTableView/TanStackHeaderRow.tsx

@@ -6,7 +6,7 @@ import type {
 import { useMemo } from 'react';
 import { CloseOutlined, MoreOutlined } from '@ant-design/icons';
 import { useSortable } from '@dnd-kit/sortable';
-import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui';
+import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/popover';
 import { flexRender, Header as TanStackHeader } from '@tanstack/react-table';
 import { GripVertical } from 'lucide-react';
 

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useHistory } from 'react-router-dom';
+import { Button } from '@signozhq/button';
 import { Check, ChevronDown, Plus } from '@signozhq/icons';
-import { Button, Input } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
 import type { MenuProps } from 'antd';
 import { Dropdown } from 'antd';
 import { useListUsers } from 'api/generated/services/users';
@@ -197,6 +198,7 @@ function MembersSettings(): JSX.Element {
 								setPage(1);
 							}}
 							className="members-search-input"
+							color="secondary"
 							name="members-search"
 						/>
 					</div>

frontend/src/container/MySettings/LicenseSection/LicenseSection.tsx

@@ -1,5 +1,5 @@
 import { useCopyToClipboard } from 'react-use';
-import { Button } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
 import { Typography } from 'antd';
 import { useNotifications } from 'hooks/useNotifications';
 import { Copy } from 'lucide-react';

frontend/src/container/NewWidget/RightContainer/components/DisconnectValuesSelector/DisconnectValuesModeToggle.tsx

@@ -1,4 +1,4 @@
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
 import { Typography } from 'antd';
 import { DisconnectedValuesMode } from 'lib/uPlotV2/config/types';
 
@@ -16,7 +16,7 @@ export default function DisconnectValuesModeToggle({
 			type="single"
 			value={value}
 			size="lg"
-			onChange={(newValue): void => {
+			onValueChange={(newValue): void => {
 				if (newValue) {
 					onChange(newValue as DisconnectedValuesMode);
 				}

frontend/src/container/NewWidget/RightContainer/components/FillModeSelector/FillModeSelector.tsx

@@ -1,4 +1,4 @@
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
 import { Typography } from 'antd';
 import { FillMode } from 'lib/uPlotV2/config/types';
 
@@ -19,14 +19,15 @@ export default function FillModeSelector({
 			<ToggleGroup
 				type="single"
 				value={value}
+				variant="outline"
 				size="lg"
-				onChange={(newValue): void => {
+				onValueChange={(newValue): void => {
 					if (newValue) {
 						onChange(newValue as FillMode);
 					}
 				}}
 			>
-				<ToggleGroupItem value={FillMode.None} aria-label="None">
+				<ToggleGroupItem value={FillMode.None} aria-label="None" title="None">
 					<svg
 						className="fill-mode-icon"
 						viewBox="0 0 48 48"
@@ -40,7 +41,7 @@ export default function FillModeSelector({
 					</svg>
 					<Typography.Text className="section-heading-small">None</Typography.Text>
 				</ToggleGroupItem>
-				<ToggleGroupItem value={FillMode.Solid} aria-label="Solid">
+				<ToggleGroupItem value={FillMode.Solid} aria-label="Solid" title="Solid">
 					<svg
 						className="fill-mode-icon"
 						viewBox="0 0 48 48"
@@ -54,7 +55,11 @@ export default function FillModeSelector({
 					</svg>
 					<Typography.Text className="section-heading-small">Solid</Typography.Text>
 				</ToggleGroupItem>
-				<ToggleGroupItem value={FillMode.Gradient} aria-label="Gradient">
+				<ToggleGroupItem
+					value={FillMode.Gradient}
+					aria-label="Gradient"
+					title="Gradient"
+				>
 					<svg
 						className="fill-mode-icon"
 						viewBox="0 0 48 48"

frontend/src/container/NewWidget/RightContainer/components/LineInterpolationSelector/LineInterpolationSelector.tsx

@@ -1,4 +1,4 @@
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
 import { Typography } from 'antd';
 import { LineInterpolation } from 'lib/uPlotV2/config/types';
 
@@ -21,14 +21,19 @@ export default function LineInterpolationSelector({
 			<ToggleGroup
 				type="single"
 				value={value}
+				variant="outline"
 				size="lg"
-				onChange={(newValue): void => {
+				onValueChange={(newValue): void => {
 					if (newValue) {
 						onChange(newValue as LineInterpolation);
 					}
 				}}
 			>
-				<ToggleGroupItem value={LineInterpolation.Linear} aria-label="Linear">
+				<ToggleGroupItem
+					value={LineInterpolation.Linear}
+					aria-label="Linear"
+					title="Linear"
+				>
 					<svg
 						className="line-interpolation-icon"
 						viewBox="0 0 48 48"

frontend/src/container/NewWidget/RightContainer/components/LineStyleSelector/LineStyleSelector.tsx

@@ -1,4 +1,4 @@
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
 import { Typography } from 'antd';
 import { LineStyle } from 'lib/uPlotV2/config/types';
 
@@ -19,14 +19,15 @@ export default function LineStyleSelector({
 			<ToggleGroup
 				type="single"
 				value={value}
+				variant="outline"
 				size="lg"
-				onChange={(newValue): void => {
+				onValueChange={(newValue): void => {
 					if (newValue) {
 						onChange(newValue as LineStyle);
 					}
 				}}
 			>
-				<ToggleGroupItem value={LineStyle.Solid} aria-label="Solid">
+				<ToggleGroupItem value={LineStyle.Solid} aria-label="Solid" title="Solid">
 					<svg
 						className="line-style-icon"
 						viewBox="0 0 48 48"
@@ -40,7 +41,11 @@ export default function LineStyleSelector({
 					</svg>
 					<Typography.Text className="section-heading-small">Solid</Typography.Text>
 				</ToggleGroupItem>
-				<ToggleGroupItem value={LineStyle.Dashed} aria-label="Dashed">
+				<ToggleGroupItem
+					value={LineStyle.Dashed}
+					aria-label="Dashed"
+					title="Dashed"
+				>
 					<svg
 						className="line-style-icon"
 						viewBox="0 0 48 48"

frontend/src/container/NewWidget/index.tsx

@@ -7,11 +7,11 @@ import { useSelector } from 'react-redux';
 import { generatePath } from 'react-router-dom';
 import { WarningOutlined } from '@ant-design/icons';
 import {
-	Button,
 	ResizableHandle,
 	ResizablePanel,
 	ResizablePanelGroup,
-} from '@signozhq/ui';
+} from '@signozhq/resizable';
+import { Button } from '@signozhq/ui';
 import { Flex, Modal, Space, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
@@ -857,8 +857,9 @@ function NewWidget({
 
 			<PanelContainer>
 				<ResizablePanelGroup
-					orientation="horizontal"
+					direction="horizontal"
 					className="widget-resizable-panel-group"
+					autoSaveId="panel-editor"
 				>
 					<ResizablePanel
 						minSize={70}

frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
-import { Button, Checkbox, Input } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
+import { Checkbox } from '@signozhq/checkbox';
+import { Input } from '@signozhq/input';
 import { Input as AntdInput } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { ArrowRight } from 'lucide-react';
@@ -116,22 +118,20 @@ export function AboutSigNozQuestions({
 								<div key={option} className="checkbox-item">
 									<Checkbox
 										id={`checkbox-${option}`}
-										value={interestInSignoz.includes(option)}
-										onChange={createInterestChangeHandler(option)}
-									>
-										{interestedInOptions[option]}
-									</Checkbox>
+										checked={interestInSignoz.includes(option)}
+										onCheckedChange={createInterestChangeHandler(option)}
+										labelName={interestedInOptions[option]}
+									/>
 								</div>
 							))}
 
 							<div className="checkbox-item checkbox-item-others">
 								<Checkbox
 									id="others-checkbox"
-									value={interestInSignoz.includes('Others')}
-									onChange={createInterestChangeHandler('Others')}
-								>
-									{interestInSignoz.includes('Others') ? '' : 'Others'}
-								</Checkbox>
+									checked={interestInSignoz.includes('Others')}
+									onCheckedChange={createInterestChangeHandler('Others')}
+									labelName={interestInSignoz.includes('Others') ? '' : 'Others'}
+								/>
 								{interestInSignoz.includes('Others') && (
 									<Input
 										type="text"
@@ -154,7 +154,7 @@ export function AboutSigNozQuestions({
 						className={`onboarding-next-button ${isNextDisabled ? 'disabled' : ''}`}
 						onClick={handleOnNext}
 						disabled={isNextDisabled}
-						suffix={<ArrowRight size={12} />}
+						suffixIcon={<ArrowRight size={12} />}
 					>
 						Next
 					</Button>

frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx

@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useMutation } from 'react-query';
-import { Button, Callout, Input } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
+import { Callout } from '@signozhq/callout';
+import { Input } from '@signozhq/input';
 import { Select, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import inviteUsers from 'api/v1/invite/bulk/create';
@@ -333,7 +335,7 @@ function InviteTeamMembers({
 									variant="dashed"
 									color="secondary"
 									className="add-another-member-button"
-									prefix={<Plus size={12} />}
+									prefixIcon={<Plus size={12} />}
 									onClick={handleAddTeamMember}
 								>
 									Add another
@@ -350,9 +352,8 @@ function InviteTeamMembers({
 						showIcon
 						icon={<CircleAlert size={12} />}
 						className="invite-team-members-error-callout"
-					>
-						{getValidationErrorMessage()}
-					</Callout>
+						description={getValidationErrorMessage()}
+					/>
 				)}
 
 				{inviteError && !hasInvalidEmails && !hasInvalidRoles && (
@@ -368,7 +369,7 @@ function InviteTeamMembers({
 						}`}
 						onClick={handleNext}
 						disabled={isInviteButtonDisabled}
-						suffix={
+						suffixIcon={
 							isButtonDisabled ? (
 								<Loader2 className="animate-spin" size={12} />
 							) : (

frontend/src/container/OnboardingQuestionaire/OptimiseSignozNeeds/OptimiseSignozNeeds.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Button } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
 import { Slider, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { ArrowRight, Loader2, Minus } from 'lucide-react';
@@ -290,7 +290,7 @@ function OptimiseSignozNeeds({
 						}`}
 						onClick={handleOnNext}
 						disabled={isUpdatingProfile || isNextDisabled}
-						suffix={
+						suffixIcon={
 							isUpdatingProfile ? (
 								<Loader2 className="animate-spin" size={12} />
 							) : (

frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { Input } from '@signozhq/input';
 import {
-	Button,
-	Input,
 	RadioGroup,
 	RadioGroupItem,
 	RadioGroupLabel,
-} from '@signozhq/ui';
+} from '@signozhq/radio-group';
 import { Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { ArrowRight } from 'lucide-react';
@@ -146,7 +146,7 @@ function OrgQuestions({ orgDetails, onNext }: OrgQuestionsProps): JSX.Element {
 						</label>
 						<RadioGroup
 							value={observabilityTool || ''}
-							onChange={handleObservabilityToolChange}
+							onValueChange={handleObservabilityToolChange}
 							className="observability-tools-radio-container"
 						>
 							{Object.entries(observabilityTools).map(([tool, label]) => {
@@ -189,7 +189,7 @@ function OrgQuestions({ orgDetails, onNext }: OrgQuestionsProps): JSX.Element {
 							</div>
 							<RadioGroup
 								value={migrationTimeline || ''}
-								onChange={setMigrationTimeline}
+								onValueChange={setMigrationTimeline}
 								className="migration-timeline-radio-container"
 							>
 								{Object.entries(migrationTimelineOptions).map(([key, label]) => (
@@ -208,7 +208,7 @@ function OrgQuestions({ orgDetails, onNext }: OrgQuestionsProps): JSX.Element {
 						<div className="question">Do you already use OpenTelemetry?</div>
 						<RadioGroup
 							value={usesOtel === true ? 'yes' : usesOtel === false ? 'no' : ''}
-							onChange={handleOtelChange}
+							onValueChange={handleOtelChange}
 							className="opentelemetry-radio-container"
 						>
 							<div className="radio-item opentelemetry-radio-item">
@@ -229,7 +229,7 @@ function OrgQuestions({ orgDetails, onNext }: OrgQuestionsProps): JSX.Element {
 					className={`onboarding-next-button ${isNextDisabled ? 'disabled' : ''}`}
 					onClick={handleNext}
 					disabled={isNextDisabled}
-					suffix={<ArrowRight size={12} />}
+					suffixIcon={<ArrowRight size={12} />}
 				>
 					Next
 				</Button>

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/CreateEdit.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useState } from 'react';
-import { Button, toast } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
+import { toast } from '@signozhq/ui';
 import { Form, Modal } from 'antd';
 import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import {

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnGoogleAuth.tsx

@@ -1,4 +1,6 @@
 import { useCallback, useState } from 'react';
+import { Callout } from '@signozhq/callout';
+import { Checkbox } from '@signozhq/checkbox';
 import { Color, Style } from '@signozhq/design-tokens';
 import {
 	ChevronDown,
@@ -6,7 +8,7 @@ import {
 	CircleHelp,
 	TriangleAlert,
 } from '@signozhq/icons';
-import { Callout, Checkbox, Input } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
 import { Collapse, Form, Input as AntdInput, Tooltip } from 'antd';
 import { useCollapseSectionErrors } from 'hooks/useCollapseSectionErrors';
 
@@ -136,30 +138,32 @@ function ConfigureGoogleAuthAuthnProvider({
 					<div className="authn-provider__checkbox-row">
 						<Form.Item
 							name={['googleAuthConfig', 'insecureSkipEmailVerified']}
-							valuePropName="value"
+							valuePropName="checked"
 							noStyle
 						>
 							<Checkbox
 								id="google-skip-email-verification"
-								onChange={(checked: boolean): void => {
+								labelName="Skip Email Verification"
+								onCheckedChange={(checked: boolean): void => {
 									form.setFieldValue(
 										['googleAuthConfig', 'insecureSkipEmailVerified'],
 										checked,
 									);
 								}}
-							>
-								Skip Email Verification
-							</Checkbox>
+							/>
 						</Form.Item>
 						<Tooltip title='Whether to skip email verification. Defaults to "false"'>
 							<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
 						</Tooltip>
 					</div>
 
-					<Callout type="warning" size="small" showIcon className="callout">
-						Google OAuth2 won&apos;t be enabled unless you enter all the attributes
-						above
-					</Callout>
+					<Callout
+						type="warning"
+						size="small"
+						showIcon
+						description="Google OAuth2 won't be enabled unless you enter all the attributes above"
+						className="callout"
+					/>
 				</div>
 
 				{/* Right Column - Google Workspace Groups (Advanced) */}
@@ -211,17 +215,16 @@ function ConfigureGoogleAuthAuthnProvider({
 								<div className="authn-provider__checkbox-row">
 									<Form.Item
 										name={['googleAuthConfig', 'fetchGroups']}
-										valuePropName="value"
+										valuePropName="checked"
 										noStyle
 									>
 										<Checkbox
 											id="google-fetch-groups"
-											onChange={(checked: boolean): void => {
+											labelName="Fetch Groups"
+											onCheckedChange={(checked: boolean): void => {
 												form.setFieldValue(['googleAuthConfig', 'fetchGroups'], checked);
 											}}
-										>
-											Fetch Groups
-										</Checkbox>
+										/>
 									</Form.Item>
 									<Tooltip title="Enable fetching Google Workspace groups for the user. Requires service account configuration.">
 										<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
@@ -260,20 +263,19 @@ function ConfigureGoogleAuthAuthnProvider({
 										<div className="authn-provider__checkbox-row">
 											<Form.Item
 												name={['googleAuthConfig', 'fetchTransitiveGroupMembership']}
-												valuePropName="value"
+												valuePropName="checked"
 												noStyle
 											>
 												<Checkbox
 													id="google-transitive-membership"
-													onChange={(checked: boolean): void => {
+													labelName="Fetch Transitive Group Membership"
+													onCheckedChange={(checked: boolean): void => {
 														form.setFieldValue(
 															['googleAuthConfig', 'fetchTransitiveGroupMembership'],
 															checked,
 														);
 													}}
-												>
-													Fetch Transitive Group Membership
-												</Checkbox>
+												/>
 											</Form.Item>
 											<Tooltip title="If enabled, recursively fetch groups that contain other groups (transitive membership).">
 												<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnOIDC.tsx

@@ -1,7 +1,9 @@
 import { useCallback, useState } from 'react';
+import { Callout } from '@signozhq/callout';
+import { Checkbox } from '@signozhq/checkbox';
 import { Style } from '@signozhq/design-tokens';
 import { CircleHelp } from '@signozhq/icons';
-import { Callout, Checkbox, Input } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
 import { Form, Tooltip } from 'antd';
 
 import ClaimMappingSection from './components/ClaimMappingSection';
@@ -143,20 +145,19 @@ function ConfigureOIDCAuthnProvider({
 					<div className="authn-provider__checkbox-row">
 						<Form.Item
 							name={['oidcConfig', 'insecureSkipEmailVerified']}
-							valuePropName="value"
+							valuePropName="checked"
 							noStyle
 						>
 							<Checkbox
 								id="oidc-skip-email-verification"
-								onChange={(checked: boolean): void => {
+								labelName="Skip Email Verification"
+								onCheckedChange={(checked: boolean): void => {
 									form.setFieldValue(
 										['oidcConfig', 'insecureSkipEmailVerified'],
 										checked,
 									);
 								}}
-							>
-								Skip Email Verification
-							</Checkbox>
+							/>
 						</Form.Item>
 						<Tooltip title='Whether to skip email verification. Defaults to "false"'>
 							<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
@@ -166,26 +167,29 @@ function ConfigureOIDCAuthnProvider({
 					<div className="authn-provider__checkbox-row">
 						<Form.Item
 							name={['oidcConfig', 'getUserInfo']}
-							valuePropName="value"
+							valuePropName="checked"
 							noStyle
 						>
 							<Checkbox
 								id="oidc-get-user-info"
-								onChange={(checked: boolean): void => {
+								labelName="Get User Info"
+								onCheckedChange={(checked: boolean): void => {
 									form.setFieldValue(['oidcConfig', 'getUserInfo'], checked);
 								}}
-							>
-								Get User Info
-							</Checkbox>
+							/>
 						</Form.Item>
 						<Tooltip title="Use the userinfo endpoint to get additional claims. Useful when providers return thin ID tokens.">
 							<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
 						</Tooltip>
 					</div>
 
-					<Callout type="warning" size="small" showIcon className="callout">
-						OIDC won&apos;t be enabled unless you enter all the attributes above
-					</Callout>
+					<Callout
+						type="warning"
+						size="small"
+						showIcon
+						description="OIDC won't be enabled unless you enter all the attributes above"
+						className="callout"
+					/>
 				</div>
 
 				{/* Right Column - Advanced Settings */}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnSAML.tsx

@@ -1,7 +1,9 @@
 import { useCallback, useState } from 'react';
+import { Callout } from '@signozhq/callout';
+import { Checkbox } from '@signozhq/checkbox';
 import { Style } from '@signozhq/design-tokens';
 import { CircleHelp } from '@signozhq/icons';
-import { Callout, Checkbox, Input } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
 import { Form, Input as AntdInput, Tooltip } from 'antd';
 
 import AttributeMappingSection from './components/AttributeMappingSection';
@@ -140,29 +142,32 @@ function ConfigureSAMLAuthnProvider({
 					<div className="authn-provider__checkbox-row">
 						<Form.Item
 							name={['samlConfig', 'insecureSkipAuthNRequestsSigned']}
-							valuePropName="value"
+							valuePropName="checked"
 							noStyle
 						>
 							<Checkbox
 								id="saml-skip-signing"
-								onChange={(checked: boolean): void => {
+								labelName="Skip Signing AuthN Requests"
+								onCheckedChange={(checked: boolean): void => {
 									form.setFieldValue(
 										['samlConfig', 'insecureSkipAuthNRequestsSigned'],
 										checked,
 									);
 								}}
-							>
-								Skip Signing AuthN Requests
-							</Checkbox>
+							/>
 						</Form.Item>
 						<Tooltip title="Whether to skip signing the SAML requests. For providers like JumpCloud, this should be enabled.">
 							<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
 						</Tooltip>
 					</div>
 
-					<Callout type="warning" size="small" showIcon className="callout">
-						SAML won&apos;t be enabled unless you enter all the attributes above
-					</Callout>
+					<Callout
+						type="warning"
+						size="small"
+						showIcon
+						description="SAML won't be enabled unless you enter all the attributes above"
+						className="callout"
+					/>
 				</div>
 
 				{/* Right Column - Advanced Settings */}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/AttributeMappingSection.tsx

@@ -6,7 +6,7 @@ import {
 	CircleHelp,
 	TriangleAlert,
 } from '@signozhq/icons';
-import { Input } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
 import { Collapse, Form, Tooltip } from 'antd';
 import { useCollapseSectionErrors } from 'hooks/useCollapseSectionErrors';
 

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/ClaimMappingSection.tsx

@@ -6,7 +6,7 @@ import {
 	CircleHelp,
 	TriangleAlert,
 } from '@signozhq/icons';
-import { Input } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
 import { Collapse, Form, Tooltip } from 'antd';
 import { useCollapseSectionErrors } from 'hooks/useCollapseSectionErrors';
 

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/DomainMappingList.tsx

@@ -1,5 +1,6 @@
+import { Button } from '@signozhq/button';
 import { Plus, Trash2 } from '@signozhq/icons';
-import { Button, Input } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
 import { Form } from 'antd';
 
 import './DomainMappingList.styles.scss';
@@ -71,7 +72,7 @@ function DomainMappingList({
 						<Button
 							variant="dashed"
 							onClick={(): void => add({ domain: '', adminEmail: '' })}
-							prefix={<Plus size={14} />}
+							prefixIcon={<Plus size={14} />}
 							className="domain-mapping-list__add-btn"
 						>
 							Add Domain Mapping

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/RoleMappingSection.tsx

@@ -1,4 +1,6 @@
 import { useCallback, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { Checkbox } from '@signozhq/checkbox';
 import { Color, Style } from '@signozhq/design-tokens';
 import {
 	ChevronDown,
@@ -8,7 +10,7 @@ import {
 	Trash2,
 	TriangleAlert,
 } from '@signozhq/icons';
-import { Button, Checkbox, Input } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
 import { Collapse, Form, Select, Tooltip } from 'antd';
 import { useCollapseSectionErrors } from 'hooks/useCollapseSectionErrors';
 
@@ -126,17 +128,16 @@ function RoleMappingSection({
 						<div className="role-mapping-section__checkbox-row">
 							<Form.Item
 								name={[...fieldNamePrefix, 'useRoleAttribute']}
-								valuePropName="value"
+								valuePropName="checked"
 								noStyle
 							>
 								<Checkbox
 									id="use-role-attribute"
-									onChange={(checked: boolean): void => {
+									labelName="Use Role Attribute Directly"
+									onCheckedChange={(checked: boolean): void => {
 										form.setFieldValue([...fieldNamePrefix, 'useRoleAttribute'], checked);
 									}}
-								>
-									Use Role Attribute Directly
-								</Checkbox>
+								/>
 							</Form.Item>
 							<Tooltip title="If enabled, the role claim/attribute from the IDP will be used directly instead of group mappings. The role value must match a SigNoz role (VIEWER, EDITOR, or ADMIN).">
 								<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
@@ -195,7 +196,7 @@ function RoleMappingSection({
 											<Button
 												variant="dashed"
 												onClick={(): void => add({ groupName: '', role: 'VIEWER' })}
-												prefix={<Plus size={14} />}
+												prefixIcon={<Plus size={14} />}
 												className="role-mapping-section__add-btn"
 											>
 												Add Group Mapping

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

@@ -1,7 +1,8 @@
 import { useCallback, useMemo, useState } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
+import { Button } from '@signozhq/button';
 import { Trash2, X } from '@signozhq/icons';
-import { Button, toast } from '@signozhq/ui';
+import { toast } from '@signozhq/ui';
 import { Modal, Table, TableColumnsType as ColumnsType } from 'antd';
 import { ErrorResponseHandlerForGeneratedAPIs } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
@@ -181,7 +182,7 @@ function AuthDomain(): JSX.Element {
 			<section className="auth-domain-header">
 				<h3 className="auth-domain-title">Authenticated Domains</h3>
 				<Button
-					prefix={<PlusOutlined />}
+					prefixIcon={<PlusOutlined />}
 					onClick={(): void => {
 						setAddDomain(true);
 					}}
@@ -229,13 +230,13 @@ function AuthDomain(): JSX.Element {
 						key="cancel"
 						onClick={hideDeleteModal}
 						className="cancel-btn"
-						prefix={<X size={16} />}
+						prefixIcon={<X size={16} />}
 					>
 						Cancel
 					</Button>,
 					<Button
 						key="submit"
-						prefix={<Trash2 size={16} />}
+						prefixIcon={<Trash2 size={16} />}
 						onClick={handleDeleteDomain}
 						className="delete-btn"
 						loading={isLoading}

frontend/src/container/ResetPassword/index.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-use';
-import { Button, Callout } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
+import { Callout } from '@signozhq/callout';
 import { Form, Input as AntdInput, Typography } from 'antd';
 import { Logout } from 'api/utils';
 import resetPasswordApi from 'api/v1/factor_password/resetPassword';
@@ -214,9 +215,8 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 							showIcon
 							icon={<CircleAlert size={12} />}
 							className="reset-password-error-callout"
-						>
-							Passwords don&apos;t match. Please try again.
-						</Callout>
+							description="Passwords don't match. Please try again."
+						/>
 					)}
 
 					{errorMessage && !confirmPasswordError && (
@@ -231,7 +231,7 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 							data-attr="reset-password"
 							disabled={!isValidPassword || loading}
 							className="reset-password-submit-button"
-							suffix={<ArrowRight size={16} />}
+							suffixIcon={<ArrowRight size={16} />}
 						>
 							Reset Password
 						</Button>

frontend/src/container/RolesSettings/PermissionSidePanel/PermissionSidePanel.tsx

@@ -1,11 +1,11 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Button } from '@signozhq/button';
 import { ChevronDown, ChevronRight, X } from '@signozhq/icons';
 import {
-	Button,
 	RadioGroup,
 	RadioGroupItem,
 	RadioGroupLabel,
-} from '@signozhq/ui';
+} from '@signozhq/radio-group';
 import { Select, Skeleton } from 'antd';
 
 import {
@@ -69,12 +69,17 @@ function ResourceRow({
 				<div className="psp-resource__body">
 					<RadioGroup
 						value={config.scope}
-						onChange={(val): void => onScopeChange(resource.id, val as ScopeType)}
-						color="robin"
+						onValueChange={(val): void =>
+							onScopeChange(resource.id, val as ScopeType)
+						}
 						className="psp-resource__radio-group"
 					>
 						<div className="psp-resource__radio-item">
-							<RadioGroupItem value={PermissionScope.ALL} id={`${resource.id}-all`} />
+							<RadioGroupItem
+								value={PermissionScope.ALL}
+								id={`${resource.id}-all`}
+								color="robin"
+							/>
 							<RadioGroupLabel htmlFor={`${resource.id}-all`}>All</RadioGroupLabel>
 						</div>
 
@@ -82,6 +87,7 @@ function ResourceRow({
 							<RadioGroupItem
 								value={PermissionScope.ONLY_SELECTED}
 								id={`${resource.id}-only-selected`}
+								color="robin"
 							/>
 							<RadioGroupLabel htmlFor={`${resource.id}-only-selected`}>
 								Only selected
@@ -261,7 +267,7 @@ function PermissionSidePanel({
 						<Button
 							variant="solid"
 							color="secondary"
-							prefix={<X size={14} />}
+							prefixIcon={<X size={14} />}
 							onClick={unsavedCount > 0 ? handleDiscard : onClose}
 							size="sm"
 							disabled={isSaving}

frontend/src/container/RolesSettings/RoleDetails/RoleDetailsPage.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useHistory, useLocation } from 'react-router-dom';
+import { Button } from '@signozhq/button';
 import { Table2, Trash2, Users } from '@signozhq/icons';
-import { Button, toast, ToggleGroup, ToggleGroupItem } from '@signozhq/ui';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { toast } from '@signozhq/ui';
 import { Skeleton } from 'antd';
 import { useAuthzResources } from 'api/generated/services/authz';
 import {
@@ -191,7 +193,7 @@ function RoleDetailsPage(): JSX.Element {
 				<ToggleGroup
 					type="single"
 					value={activeTab}
-					onChange={(val): void => {
+					onValueChange={(val): void => {
 						if (val) {
 							setActiveTab(val as TabKey);
 						}

frontend/src/container/RolesSettings/RoleDetails/components/OverviewTab.tsx

@@ -1,4 +1,4 @@
-import { Callout } from '@signozhq/ui';
+import { Callout } from '@signozhq/callout';
 
 import { PermissionType, TimestampBadge } from '../../utils';
 import PermissionItem from './PermissionItem';
@@ -26,7 +26,7 @@ function OverviewTab({
 				<Callout
 					type="warning"
 					showIcon
-					title="This is a managed role. Permissions and settings are view-only and cannot be modified."
+					message="This is a managed role. Permissions and settings are view-only and cannot be modified."
 				/>
 			)}
 

frontend/src/container/RolesSettings/RolesComponents/CreateRoleModal.tsx

@@ -1,8 +1,10 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { useQueryClient } from 'react-query';
 import { generatePath, useHistory } from 'react-router-dom';
+import { Button } from '@signozhq/button';
 import { X } from '@signozhq/icons';
-import { Button, Input, toast } from '@signozhq/ui';
+import { Input, inputVariants } from '@signozhq/input';
+import { toast } from '@signozhq/ui';
 import { Form, Modal } from 'antd';
 import {
 	invalidateGetRole,
@@ -174,7 +176,7 @@ function CreateRoleModal({
 				</Form.Item>
 				<Form.Item name="description" label="Description">
 					<textarea
-						className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+						className={inputVariants()}
 						placeholder="A helpful description of the role"
 					/>
 				</Form.Item>

frontend/src/container/RolesSettings/RolesComponents/DeleteRoleModal.tsx

@@ -1,5 +1,5 @@
+import { Button } from '@signozhq/button';
 import { Trash2, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui';
 import { Modal } from 'antd';
 
 interface DeleteRoleModalProps {
@@ -27,7 +27,7 @@ function DeleteRoleModal({
 				<Button
 					key="cancel"
 					className="cancel-btn"
-					prefix={<X size={16} />}
+					prefixIcon={<X size={16} />}
 					onClick={onCancel}
 					size="sm"
 					variant="solid"
@@ -38,7 +38,7 @@ function DeleteRoleModal({
 				<Button
 					key="delete"
 					className="delete-btn"
-					prefix={<Trash2 size={16} />}
+					prefixIcon={<Trash2 size={16} />}
 					onClick={onConfirm}
 					loading={isDeleting}
 					size="sm"

frontend/src/container/RolesSettings/RolesSettings.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
+import { Button } from '@signozhq/button';
 import { Plus } from '@signozhq/icons';
-import { Button, Input } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
 
 import { IS_ROLE_DETAILS_AND_CRUD_ENABLED } from './config';
 import CreateRoleModal from './RolesComponents/CreateRoleModal';

frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo } from 'react';
+import { Button } from '@signozhq/button';
 import { Check, ChevronDown, Plus } from '@signozhq/icons';
-import { Button, Input } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
 import type { MenuProps } from 'antd';
 import { Dropdown } from 'antd';
 import { useListServiceAccounts } from 'api/generated/services/serviceaccount';
@@ -236,6 +237,7 @@ function ServiceAccountsSettings(): JSX.Element {
 								setPage(1);
 							}}
 							className="sa-settings-search-input"
+							color="secondary"
 						/>
 					</div>
 

frontend/src/container/ServiceAccountsSettings/__tests__/ServiceAccountsSettings.integration.test.tsx

@@ -11,15 +11,17 @@ const SA_ENDPOINT = '*/api/v1/service_accounts/:id';
 const SA_KEYS_ENDPOINT = '*/api/v1/service_accounts/:id/keys';
 const ROLES_ENDPOINT = '*/api/v1/roles';
 
-jest.mock('@signozhq/ui', () => ({
-	...jest.requireActual('@signozhq/ui'),
+jest.mock('@signozhq/drawer', () => ({
 	DrawerWrapper: ({
-		children,
+		content,
 		open,
 	}: {
-		children?: ReactNode;
+		content?: ReactNode;
 		open: boolean;
-	}): JSX.Element | null => (open ? <div>{children}</div> : null),
+	}): JSX.Element | null => (open ? <div>{content}</div> : null),
+}));
+
+jest.mock('@signozhq/dialog', () => ({
 	DialogWrapper: ({
 		children,
 		open,

frontend/src/container/SpanDetailsDrawer/SpanLogs/SpanLogs.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import { Virtuoso } from 'react-virtuoso';
-import { Button } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
 import { Typography } from 'antd';
 import cx from 'classnames';
 import RawLogView from 'components/Logs/RawLogView';
@@ -245,7 +245,7 @@ function SpanLogs({
 				<Button
 					className="action-btn"
 					variant="action"
-					prefix={<Compass size={14} />}
+					prefixIcon={<Compass size={14} />}
 					onClick={handleExplorerPageRedirect}
 					size="md"
 				>

frontend/src/container/SpanDetailsDrawer/__tests__/SpanDetailsDrawer.test.tsx

@@ -45,6 +45,12 @@ jest.mock('react-router-dom', () => ({
 	}),
 }));
 
+jest.mock('@signozhq/button', () => ({
+	Button: ({ children }: { children: React.ReactNode }): JSX.Element => (
+		<div>{children}</div>
+	),
+}));
+
 jest.mock('hooks/useSafeNavigate', () => ({
 	useSafeNavigate: (): { safeNavigate: jest.MockedFunction<() => void> } => ({
 		safeNavigate: mockSafeNavigate,

frontend/src/lib/uPlotV2/components/types.ts

@@ -62,10 +62,10 @@ export interface TooltipRenderArgs {
 
 export interface BaseTooltipProps {
 	showTooltipHeader?: boolean;
-	timezone?: Timezone;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
 	content?: TooltipContentItem[];
+	timezone?: Timezone;
 }
 
 export interface TimeSeriesTooltipProps

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.tsx

@@ -4,6 +4,7 @@ import cx from 'classnames';
 import { getFocusedSeriesAtPosition } from 'lib/uPlotLib/plugins/onClickPlugin';
 import uPlot from 'uplot';
 
+import { syncCursorRegistry } from './syncCursorRegistry';
 import {
 	createInitialControllerState,
 	createSetCursorHandler,
@@ -40,6 +41,7 @@ export default function TooltipPlugin({
 	maxHeight = 600,
 	syncMode = DashboardCursorSync.None,
 	syncKey = '_tooltip_sync_global_',
+	syncMetadata,
 	pinnedTooltipElement,
 	canPinTooltip = false,
 }: TooltipPluginProps): JSX.Element | null {
@@ -100,7 +102,29 @@ export default function TooltipPlugin({
 		// crosshair / tooltip can follow the dashboard-wide cursor.
 		if (syncMode !== DashboardCursorSync.None && config.scales[0]?.props.time) {
 			config.setCursor({
-				sync: { key: syncKey, scales: ['x', null] },
+				sync: { key: syncKey, scales: ['x', 'y'] },
+			});
+
+			// Show the horizontal crosshair only when the receiving panel shares
+			// the same y-axis unit as the source panel. When this panel is the
+			// source (cursor.event != null) the line is always shown and this
+			// panel's metadata is written to the registry so receivers can read it.
+			config.addHook('setCursor', (u: uPlot): void => {
+				const yCursorEl = u.root.querySelector<HTMLElement>('.u-cursor-y');
+				if (!yCursorEl) {
+					return;
+				}
+
+				if (u.cursor.event != null) {
+					// This panel is the source — publish metadata and always show line.
+					syncCursorRegistry.setMetadata(syncKey, syncMetadata);
+					yCursorEl.style.display = '';
+				} else {
+					// This panel is receiving sync — show only if units match.
+					const sourceMeta = syncCursorRegistry.getMetadata(syncKey);
+					yCursorEl.style.display =
+						sourceMeta?.yAxisUnit === syncMetadata?.yAxisUnit ? '' : 'none';
+				}
 			});
 		}
 

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/syncCursorRegistry.ts

@@ -0,0 +1,24 @@
+import type { TooltipSyncMetadata } from './types';
+
+/**
+ * Module-level registry that tracks the metadata of the panel currently
+ * acting as the cursor source (the one being hovered) per sync group.
+ *
+ * uPlot fires the source panel's setCursor hook before broadcasting to
+ * receivers, so the registry is always populated before receivers read it.
+ *
+ * Receivers use this to make decisions such as:
+ * - Whether to show the horizontal crosshair line (matching yAxisUnit)
+ * - Future: what to render inside the tooltip (matching groupBy, etc.)
+ */
+const metadataBySyncKey = new Map<string, TooltipSyncMetadata | undefined>();
+
+export const syncCursorRegistry = {
+	setMetadata(syncKey: string, metadata: TooltipSyncMetadata | undefined): void {
+		metadataBySyncKey.set(syncKey, metadata);
+	},
+
+	getMetadata(syncKey: string): TooltipSyncMetadata | undefined {
+		return metadataBySyncKey.get(syncKey);
+	},
+};

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/types.ts

@@ -34,11 +34,16 @@ export interface TooltipLayoutInfo {
 	height: number;
 }
 
+export interface TooltipSyncMetadata {
+	yAxisUnit?: string;
+}
+
 export interface TooltipPluginProps {
 	config: UPlotConfigBuilder;
 	canPinTooltip?: boolean;
 	syncMode?: DashboardCursorSync;
 	syncKey?: string;
+	syncMetadata?: TooltipSyncMetadata;
 	render: (args: TooltipRenderArgs) => ReactNode;
 	pinnedTooltipElement?: (clickData: TooltipClickData) => ReactNode;
 	maxWidth?: number;

frontend/src/lib/uPlotV2/plugins/__tests__/TooltipPlugin.test.ts

@@ -516,7 +516,7 @@ describe('TooltipPlugin', () => {
 			);
 
 			expect(setCursorSpy).toHaveBeenCalledWith({
-				sync: { key: 'dashboard-sync', scales: ['x', null] },
+				sync: { key: 'dashboard-sync', scales: ['x', 'y'] },
 			});
 		});
 

frontend/src/pages/SignUp/SignUp.tsx

@@ -1,5 +1,7 @@
 import { useMemo, useState } from 'react';
-import { Button, Callout, Input } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
+import { Callout } from '@signozhq/callout';
+import { Input } from '@signozhq/input';
 import { Form, Input as AntdInput, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import signUpApi from 'api/v1/register/post';
@@ -201,10 +203,13 @@ function SignUp(): JSX.Element {
 						</div>
 					</div>
 
-					<Callout type="info" size="small" showIcon className="signup-info-callout">
-						This will create an admin account. If you are not an admin, please ask
-						your admin for an invite link
-					</Callout>
+					<Callout
+						type="info"
+						size="small"
+						showIcon
+						className="signup-info-callout"
+						description="This will create an admin account. If you are not an admin, please ask your admin for an invite link"
+					/>
 
 					{confirmPasswordError && (
 						<Callout
@@ -213,9 +218,8 @@ function SignUp(): JSX.Element {
 							showIcon
 							icon={<CircleAlert size={12} />}
 							className="signup-error-callout"
-						>
-							Passwords don&apos;t match. Please try again.
-						</Callout>
+							description="Passwords don't match. Please try again."
+						/>
 					)}
 
 					{formError && !confirmPasswordError && <AuthError error={formError} />}
@@ -228,7 +232,7 @@ function SignUp(): JSX.Element {
 							data-attr="signup"
 							disabled={!isValidForm}
 							className="signup-submit-button"
-							suffix={<ArrowRight size={16} />}
+							suffixIcon={<ArrowRight size={16} />}
 						>
 							Access My Workspace
 						</Button>

frontend/src/pages/TraceDetailV2/TraceDetailV2.tsx

@@ -4,7 +4,7 @@ import {
 	ResizableHandle,
 	ResizablePanel,
 	ResizablePanelGroup,
-} from '@signozhq/ui';
+} from '@signozhq/resizable';
 import { Button, Tabs } from 'antd';
 import FlamegraphImg from 'assets/TraceDetail/Flamegraph';
 import cx from 'classnames';
@@ -127,7 +127,11 @@ function TraceDetailsV2(): JSX.Element {
 	];
 
 	return (
-		<ResizablePanelGroup orientation="horizontal" className="trace-layout">
+		<ResizablePanelGroup
+			direction="horizontal"
+			autoSaveId="trace-drawer"
+			className="trace-layout"
+		>
 			<ResizablePanel minSize={20} maxSize={80} className="trace-left-content">
 				<TraceMetadata
 					traceID={traceId}

frontend/yarn.lock

@@ -4377,6 +4377,13 @@
   dependencies:
     cross-spawn "^7.0.6"
 
+"@radix-ui/primitive@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.0.tgz#e1d8ef30b10ea10e69c76e896f608d9276352253"
+  integrity sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/primitive@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.1.tgz#e46f9958b35d10e9f6dc71c497305c22e3e55dbd"
@@ -4439,6 +4446,13 @@
     "@radix-ui/react-primitive" "2.1.3"
     "@radix-ui/react-slot" "1.2.3"
 
+"@radix-ui/react-compose-refs@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
+  integrity sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-compose-refs@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
@@ -4451,6 +4465,13 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz#a2c4c47af6337048ee78ff6dc0d090b390d2bb30"
   integrity sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==
 
+"@radix-ui/react-context@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.0.tgz#f38e30c5859a9fb5e9aa9a9da452ee3ed9e0aee0"
+  integrity sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-context@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.1.tgz#fe46e67c96b240de59187dcb7a1a50ce3e2ec00c"
@@ -4463,7 +4484,28 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.2.tgz#61628ef269a433382c364f6f1e3788a6dc213a36"
   integrity sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==
 
-"@radix-ui/react-dialog@^1.1.11", "@radix-ui/react-dialog@^1.1.6":
+"@radix-ui/react-dialog@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.0.tgz#997e97cb183bc90bd888b26b8e23a355ac9fe5f0"
+  integrity sha512-Yn9YU+QlHYLWwV1XfKiqnGVpWYWk6MeBVM6x/bcoyPvxgjQGoeT35482viLPctTMWoMw0PoHgqfSox7Ig+957Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-dismissable-layer" "1.0.0"
+    "@radix-ui/react-focus-guards" "1.0.0"
+    "@radix-ui/react-focus-scope" "1.0.0"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-portal" "1.0.0"
+    "@radix-ui/react-presence" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-slot" "1.0.0"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.4"
+
+"@radix-ui/react-dialog@^1.1.1", "@radix-ui/react-dialog@^1.1.11", "@radix-ui/react-dialog@^1.1.6":
   version "1.1.15"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz#1de3d7a7e9a17a9874d29c07f5940a18a119b632"
   integrity sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==
@@ -4495,6 +4537,18 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.1.tgz#39e5a5769e676c753204b792fbe6cf508e550a14"
   integrity sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==
 
+"@radix-ui/react-dismissable-layer@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz#35b7826fa262fd84370faef310e627161dffa76b"
+  integrity sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-escape-keydown" "1.0.0"
+
 "@radix-ui/react-dismissable-layer@1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz#3f98425b82b9068dfbab5db5fff3df6ebf48b9d4"
@@ -4531,11 +4585,28 @@
     "@radix-ui/react-primitive" "2.1.3"
     "@radix-ui/react-use-controllable-state" "1.2.2"
 
+"@radix-ui/react-focus-guards@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz#339c1c69c41628c1a5e655f15f7020bf11aa01fa"
+  integrity sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-focus-guards@1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz#2a5669e464ad5fde9f86d22f7fdc17781a4dfa7f"
   integrity sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==
 
+"@radix-ui/react-focus-scope@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.0.tgz#95a0c1188276dc8933b1eac5f1cdb6471e01ade5"
+  integrity sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
 "@radix-ui/react-focus-scope@1.1.7":
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz#dfe76fc103537d80bf42723a183773fd07bfb58d"
@@ -4550,6 +4621,14 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.2.tgz#09be63d178262181aeca5fb7f7bc944b10a7f441"
   integrity sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==
 
+"@radix-ui/react-id@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.0.tgz#8d43224910741870a45a8c9d092f25887bb6d11e"
+  integrity sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
 "@radix-ui/react-id@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.1.tgz#73cdc181f650e4df24f0b6a5b7aa426b912c88c0"
@@ -4589,7 +4668,7 @@
     aria-hidden "^1.2.4"
     react-remove-scroll "^2.6.3"
 
-"@radix-ui/react-popover@^1.1.15":
+"@radix-ui/react-popover@^1.1.15", "@radix-ui/react-popover@^1.1.2":
   version "1.1.15"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.1.15.tgz#9c852f93990a687ebdc949b2c3de1f37cdc4c5d5"
   integrity sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==
@@ -4643,6 +4722,14 @@
     "@radix-ui/react-use-size" "1.1.1"
     "@radix-ui/rect" "1.1.1"
 
+"@radix-ui/react-portal@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.0.tgz#7220b66743394fabb50c55cb32381395cc4a276b"
+  integrity sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.0"
+
 "@radix-ui/react-portal@1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.4.tgz#df4bfd353db3b1e84e639e9c63a5f2565fb00e15"
@@ -4659,6 +4746,15 @@
     "@radix-ui/react-primitive" "2.1.3"
     "@radix-ui/react-use-layout-effect" "1.1.1"
 
+"@radix-ui/react-presence@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a"
+  integrity sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
 "@radix-ui/react-presence@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.1.tgz#491990ba913b8e2a5db1b06b203cb24b5cdef9ba"
@@ -4676,6 +4772,14 @@
     "@radix-ui/react-compose-refs" "1.1.2"
     "@radix-ui/react-use-layout-effect" "1.1.1"
 
+"@radix-ui/react-primitive@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz#376cd72b0fcd5e0e04d252ed33eb1b1f025af2b0"
+  integrity sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.0"
+
 "@radix-ui/react-primitive@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz#d49ea0f3f0b2fe3ab1cb5667eb03e8b843b914d0"
@@ -4745,6 +4849,14 @@
     "@radix-ui/react-use-callback-ref" "1.1.1"
     "@radix-ui/react-use-controllable-state" "1.2.2"
 
+"@radix-ui/react-slot@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.0.tgz#7fa805b99891dea1e862d8f8fbe07f4d6d0fd698"
+  integrity sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+
 "@radix-ui/react-slot@1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"
@@ -4753,7 +4865,7 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.1"
 
-"@radix-ui/react-slot@1.2.3", "@radix-ui/react-slot@^1.2.3":
+"@radix-ui/react-slot@1.2.3", "@radix-ui/react-slot@^1.1.0", "@radix-ui/react-slot@^1.2.3":
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.2.3.tgz#502d6e354fc847d4169c3bc5f189de777f68cfe1"
   integrity sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==
@@ -4868,6 +4980,13 @@
     "@radix-ui/react-use-controllable-state" "1.2.2"
     "@radix-ui/react-visually-hidden" "1.2.3"
 
+"@radix-ui/react-use-callback-ref@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90"
+  integrity sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-use-callback-ref@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a"
@@ -4880,6 +4999,14 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz#62a4dba8b3255fdc5cc7787faeac1c6e4cc58d40"
   integrity sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==
 
+"@radix-ui/react-use-controllable-state@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz#a64deaafbbc52d5d407afaa22d493d687c538b7f"
+  integrity sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
 "@radix-ui/react-use-controllable-state@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz#ecd2ced34e6330caf89a82854aa2f77e07440286"
@@ -4903,6 +5030,14 @@
   dependencies:
     "@radix-ui/react-use-layout-effect" "1.1.1"
 
+"@radix-ui/react-use-escape-keydown@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz#aef375db4736b9de38a5a679f6f49b45a060e5d1"
+  integrity sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
 "@radix-ui/react-use-escape-keydown@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz#217b840c250541609c66f67ed7bab2b733620755"
@@ -4918,6 +5053,13 @@
   dependencies:
     "@radix-ui/react-use-callback-ref" "1.1.1"
 
+"@radix-ui/react-use-layout-effect@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz#2fc19e97223a81de64cd3ba1dc42ceffd82374dc"
+  integrity sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-use-layout-effect@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz#be8c7bc809b0c8934acf6657b577daf948a75399"
@@ -5361,12 +5503,173 @@
   resolved "https://registry.yarnpkg.com/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz#a90ab31d0cc1dfb54c66a69e515bf624fa7b2224"
   integrity sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==
 
+"@signozhq/button@0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@signozhq/button/-/button-0.0.5.tgz#e8220a6e9ed78552694f41700c277956f26232e1"
+  integrity sha512-fgobypuXv2kWGDkqXZoEjcySPHELzI/X515cdcR1hx4N9rizzOglLtYEjGTLR13iQrzLwSsNX8xxsv0/iSCjQg==
+  dependencies:
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-slot" "^1.1.0"
+    "@signozhq/icons" "^0.1.0"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
+"@signozhq/button@^0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@signozhq/button/-/button-0.0.2.tgz#c13edef1e735134b784a41f874b60a14bc16993f"
+  integrity sha512-434/gbTykC00LrnzFPp7c33QPWZkf9n+8+SToLZFTB0rzcaS/xoB4b7QKhvk+8xLCj4zpw6BxfeRAL+gSoOUJw==
+  dependencies:
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-slot" "^1.1.0"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
+"@signozhq/button@workspace:*":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@signozhq/button/-/button-0.0.3.tgz#ce6c722b24859198f8c18a708b9d09249b184e3e"
+  integrity sha512-b0JGoP0AIoYep/ApQUOn9LiK8dUATfqikz7jAKe20dPc8SjwUtsLPOao9j6I+2W4qd0CZDffJADBVpF2SAIsPQ==
+  dependencies:
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-slot" "^1.1.0"
+    "@signozhq/icons" "^0.1.0"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
+"@signozhq/calendar@0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@signozhq/calendar/-/calendar-0.1.1.tgz#8fb6432c4397ad2e8204b0ce9fb1b7aaa231e4cc"
+  integrity sha512-Mw5cVtqSI1F57YwG+ufuJKJs/KrkrTSeP6aVPcTvO3tHJ5H4aZ1oaeZtGzTEDMqUvusDlRdZPSHhklJiUg/ixQ==
+  dependencies:
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-slot" "^1.2.3"
+    "@signozhq/button" "workspace:*"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    date-fns "^4.1.0"
+    lucide-react "^0.445.0"
+    react-day-picker "^9.8.1"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
+"@signozhq/callout@0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@signozhq/callout/-/callout-0.0.4.tgz#8d0c224cc4f64930a04bd0d075597358ae7ec1d8"
+  integrity sha512-g1NXkzAkuMdmH+z58t9CSL4+MZdWB5zPLyOHKeJYnQk1JXSYpEGK8CzSz4ZtVb4OrMS7mDkWxnqMK0EHxwVOWA==
+  dependencies:
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-slot" "^1.1.0"
+    "@signozhq/icons" "^0.1.0"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    lucide-react "^0.445.0"
+    lucide-solid "^0.510.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
+"@signozhq/checkbox@0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@signozhq/checkbox/-/checkbox-0.0.4.tgz#2cf83d7bfd4db4aaec815e5788061e3fe5f86483"
+  integrity sha512-X93EqHEy06pfpGcEJkJpNrxvkZryJaA+M0NQ09oTb1wzFweGMw+fR1Hgjl8lMqQPkHtz3MCP820uLhxvOJhktg==
+  dependencies:
+    "@radix-ui/react-checkbox" "^1.2.3"
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-slot" "^1.1.0"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
+"@signozhq/checkbox@workspace:*":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@signozhq/checkbox/-/checkbox-0.0.3.tgz#9ccf8bd3b118405b2407c71db780089de050e651"
+  integrity sha512-x2uqV3GsLmnDz4Zd2oY9/sExSqTY9gw/tw5gVd9ZziSNWOhy9rBKI8xwVpaAYiaZZHH3NReEwASwjx7C4EKKiQ==
+  dependencies:
+    "@radix-ui/react-checkbox" "^1.2.3"
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-slot" "^1.1.0"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
+"@signozhq/combobox@0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@signozhq/combobox/-/combobox-0.0.4.tgz#7195416144ae881874e3744f7b71251fbacc4f3e"
+  integrity sha512-8mXlpkZ6066+JE+9EXmuR47ky+tJLwZ1W/9qXa69x5F1r7zXxuWvNQe/GYiGetpxohV/jO6QQDN1WpCV9hNjiw==
+  dependencies:
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-popover" "^1.1.2"
+    "@radix-ui/react-slot" "^1.1.0"
+    "@signozhq/icons" "^0.1.0"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    cmdk "^0.2.1"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
+"@signozhq/command@0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@signozhq/command/-/command-0.0.2.tgz#9d72f0d8d0945773461350f8d311072b2b4f96c6"
+  integrity sha512-MFMDtm6qC/aG84k+q9XVCkRR46kNQYVP0qP59Xg34gx5baD76iivu13rZLc27MEhOucHacP2UODRJ4uMGZt/Mw==
+  dependencies:
+    "@radix-ui/react-dialog" "^1.1.11"
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-slot" "^1.1.0"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    cmdk "^1.1.1"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
 "@signozhq/design-tokens@2.1.4":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@signozhq/design-tokens/-/design-tokens-2.1.4.tgz#f209da6fbd2ac97ab4434b71472f741009306550"
   integrity sha512-Ny7/VA5YGFFmZx58jMh7ATFyu7VePaJ4ySmj/DopP1hilmfdxQsKWnpqKaZJWRXrbNkc0gmq3cR7q7Z8nnN7ZQ==
 
-"@signozhq/icons@0.1.0":
+"@signozhq/dialog@0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@signozhq/dialog/-/dialog-0.0.4.tgz#54f385aa7cc17c6281653437e448f81dee0190ff"
+  integrity sha512-j/RPhx98sCTyfg1VlSxbHfLzG/cVKCdd1JZrVkfzs4WK1ijM7Scpl4MUnFxn0ShCFrJ8trbR6I5NioKUIojK2g==
+  dependencies:
+    "@radix-ui/react-dialog" "^1.1.11"
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-slot" "^1.1.0"
+    "@signozhq/checkbox" "workspace:*"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
+"@signozhq/drawer@0.0.6":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/@signozhq/drawer/-/drawer-0.0.6.tgz#ea280d71af6bc665679c7da26e0703a7bf96aa0e"
+  integrity sha512-xoDHdsVZuj4rHK5gTnM4px7E2rv/6Jgqm81uxs1CfheOQsEAnPuiq3Dpdrdsf6XxCeORwnpcGUR5PEJhnAsjmA==
+  dependencies:
+    "@radix-ui/react-dialog" "^1.1.11"
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-slot" "^1.1.0"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+    vaul "^1.1.2"
+
+"@signozhq/icons@0.1.0", "@signozhq/icons@^0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@signozhq/icons/-/icons-0.1.0.tgz#00dfb430dbac423bfff715876f91a7b8a72509e4"
   integrity sha512-kGWDhCpQkFWaNwyWfy88AIbg902wBbgTFTBAtmo6DkHyLGoqWAf0Jcq8BX+7brFqJF9PnLoSJDj1lvCpUsI/Ig==
@@ -5375,6 +5678,110 @@
     "@commitlint/cli" "^17.6.7"
     "@commitlint/config-conventional" "^17.6.7"
 
+"@signozhq/input@0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@signozhq/input/-/input-0.0.4.tgz#f07dddb26ac4dda1cc8e07bfe605e8b34299955e"
+  integrity sha512-S6tIcrkRZAsmwA80eAJCwZlgHLuioUHMTeszx4PRf/DUqVQ8cjIjmTfHDwzO0zIbMcVHpxqxVNpYArIqUJtgZQ==
+  dependencies:
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-slot" "^1.1.0"
+    "@signozhq/button" "workspace:*"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
+"@signozhq/popover@0.1.2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@signozhq/popover/-/popover-0.1.2.tgz#73b418be584e8a671ff4189ed47a540ed73bbde6"
+  integrity sha512-6TVMVjWuO7XcKfFMrndcmDdg4JsGvRLe0SV43CRPNV6OkL5uFwUHFJZK2BU3v8S9xMoOf3LsdpfxPuCeK8QKCA==
+  dependencies:
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-popover" "^1.1.15"
+    "@radix-ui/react-slot" "^1.1.0"
+    "@signozhq/button" "^0.0.2"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
+"@signozhq/radio-group@0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@signozhq/radio-group/-/radio-group-0.0.4.tgz#2fbd28bf48bb761063d642d3a169c3e0c098639d"
+  integrity sha512-1t1idP+TsYV52GoQM/5KaxUQtA9/CAxAcVOvT6sBXAbyR12azUaR7GL4S0VxRRfOlA+pZ9bT9TqlfQT7LWUTDg==
+  dependencies:
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-radio-group" "^1.3.4"
+    "@radix-ui/react-slot" "^1.1.0"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
+"@signozhq/resizable@0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@signozhq/resizable/-/resizable-0.0.2.tgz#76b9212c5f1b1e982013bec1b618e967a752e705"
+  integrity sha512-xMdCDHOUDssPknFYRmwNTlQIy583wMpJSx6aHmjeYEcVfhDfDBrW+KEko/ODFoM8dOB0CpMtDjlLU14BchsNnA==
+  dependencies:
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-slot" "^1.1.0"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    lucide-react "^0.445.0"
+    react-resizable-panels "^3.0.5"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
+"@signozhq/table@0.3.7":
+  version "0.3.7"
+  resolved "https://registry.yarnpkg.com/@signozhq/table/-/table-0.3.7.tgz#895b710c02af124dfb5117e02bbc6d80ce062063"
+  integrity sha512-XDwRHBTf2q48MOuxkzzr0htWd0/mmvgHoZLl0WAMLk2gddbbNHg9hkCPfVARYOke6mX8Z/4T3e7dzgkRUhDGDg==
+  dependencies:
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-slot" "^1.1.0"
+    "@signozhq/tooltip" "0.0.2"
+    "@tanstack/react-table" "^8.21.3"
+    "@tanstack/react-virtual" "^3.13.9"
+    "@types/lodash-es" "^4.17.12"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    lodash-es "^4.17.21"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
+"@signozhq/toggle-group@0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@signozhq/toggle-group/-/toggle-group-0.0.3.tgz#6a38312b46198c555ca4c287d4818135a4a9dabe"
+  integrity sha512-qWoxC9jxW/otq1AdD/9ATGEJi4KyTfQSY8BSXlqu+4z4iEVjW4eeWSiyaoHcnB9UaypHDMFDMR+gPkyavtMY2Q==
+  dependencies:
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-slot" "^1.1.0"
+    "@radix-ui/react-toggle" "^1.1.6"
+    "@radix-ui/react-toggle-group" "^1.1.7"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
+"@signozhq/tooltip@0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@signozhq/tooltip/-/tooltip-0.0.2.tgz#bb4e2681868fa2e06db78eff5872ffb2a78b93b6"
+  integrity sha512-itxvrFq0SHr+xTabd7Tf/O9Gfq45kpIyQ5qklDRfhbxr4PIVSBw5XMr2OgzOPbW7P8S9fugCwMu6gPyAZ0SM5A==
+  dependencies:
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-slot" "^1.1.0"
+    "@radix-ui/react-tooltip" "^1.2.6"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
 "@signozhq/ui@0.0.5":
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/@signozhq/ui/-/ui-0.0.5.tgz#8badef53416b7ace0fe61ff01ff3da679a0e4ba5"
@@ -7269,7 +7676,7 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-aria-hidden@^1.2.4:
+aria-hidden@^1.1.1, aria-hidden@^1.2.4:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.6.tgz#73051c9b088114c795b1ea414e9c0fff874ffc1a"
   integrity sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==
@@ -8531,6 +8938,13 @@ clsx@^2.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
+cmdk@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/cmdk/-/cmdk-0.2.1.tgz#aa8e1332bb0b8d8484e793017c82537351188d9a"
+  integrity sha512-U6//9lQ6JvT47+6OF6Gi8BvkxYQ8SCRRSKIJkthIMsFsLZRG0cKvTtuTaefyIKMQb8rvvXy0wGdpTNq/jPtm+g==
+  dependencies:
+    "@radix-ui/react-dialog" "1.0.0"
+
 cmdk@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/cmdk/-/cmdk-1.1.1.tgz#b8524272699ccaa37aaf07f36850b376bf3d58e5"
@@ -16906,7 +17320,7 @@ react-refresh@^0.18.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.18.0.tgz#2dce97f4fe932a4d8142fa1630e475c1729c8062"
   integrity sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==
 
-react-remove-scroll-bar@^2.3.7:
+react-remove-scroll-bar@^2.3.3, react-remove-scroll-bar@^2.3.7:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz#99c20f908ee467b385b68a3469b4a3e750012223"
   integrity sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==
@@ -16914,6 +17328,17 @@ react-remove-scroll-bar@^2.3.7:
     react-style-singleton "^2.2.2"
     tslib "^2.0.0"
 
+react-remove-scroll@2.5.4:
+  version "2.5.4"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.4.tgz#afe6491acabde26f628f844b67647645488d2ea0"
+  integrity sha512-xGVKJJr0SJGQVirVFAUZ2k1QLyO6m+2fy0l8Qawbp5Jgrv3DeLalrfMNBFSlmz5kriGGzsVBtGVnf4pTKIhhWA==
+  dependencies:
+    react-remove-scroll-bar "^2.3.3"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
 react-remove-scroll@^2.6.3:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz#d2101d414f6d81d7d3bf033f3c1cb4785789f753"
@@ -16925,6 +17350,11 @@ react-remove-scroll@^2.6.3:
     use-callback-ref "^1.3.3"
     use-sidecar "^1.1.3"
 
+react-resizable-panels@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/react-resizable-panels/-/react-resizable-panels-3.0.5.tgz#50a20645263eed02344de4a70d1319bbc0014bbd"
+  integrity sha512-3z1yN25DMTXLg2wfyFrW32r5k4WEcUa3F7cJ2EgtNK07lnOs4mpM8yWLGunCpkhcQRwJX4fqoLcIh/pHPxzlmQ==
+
 react-resizable-panels@^4.7.1:
   version "4.7.3"
   resolved "https://registry.yarnpkg.com/react-resizable-panels/-/react-resizable-panels-4.7.3.tgz#4040aa0f5c5c4cc4bb685cb69973601ccda3b014"
@@ -16990,7 +17420,7 @@ react-router@6.27.0:
   dependencies:
     "@remix-run/router" "1.20.0"
 
-react-style-singleton@^2.2.2, react-style-singleton@^2.2.3:
+react-style-singleton@^2.2.1, react-style-singleton@^2.2.2, react-style-singleton@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.3.tgz#4265608be69a4d70cfe3047f2c6c88b2c3ace388"
   integrity sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==
@@ -18859,11 +19289,21 @@ table@^6.0.9, table@^6.9.0:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
+tailwind-merge@^2.5.2:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.6.0.tgz#ac5fb7e227910c038d458f396b7400d93a3142d5"
+  integrity sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==
+
 tailwind-merge@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-3.5.0.tgz#06502f4496ba15151445d97d916a26564d50d1ca"
   integrity sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==
 
+tailwindcss-animate@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"
+  integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==
+
 tapable@^2.2.1:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.3.0.tgz#7e3ea6d5ca31ba8e078b560f0d83ce9a14aa8be6"
@@ -19639,7 +20079,7 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
-use-callback-ref@^1.3.3:
+use-callback-ref@^1.3.0, use-callback-ref@^1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.3.tgz#98d9fab067075841c5b2c6852090d5d0feabe2bf"
   integrity sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==
@@ -19656,7 +20096,7 @@ use-memo-one@^1.1.1:
   resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
   integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
 
-use-sidecar@^1.1.3:
+use-sidecar@^1.1.2, use-sidecar@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.3.tgz#10e7fd897d130b896e2c546c63a5e8233d00efdb"
   integrity sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==
@@ -19742,6 +20182,13 @@ value-equal@^1.0.1:
   resolved "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz"
   integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
 
+vaul@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vaul/-/vaul-1.1.2.tgz#c959f8b9dc2ed4f7d99366caee433fbef91f5ba9"
+  integrity sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==
+  dependencies:
+    "@radix-ui/react-dialog" "^1.1.1"
+
 vfile-location@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-4.1.0.tgz#69df82fb9ef0a38d0d02b90dd84620e120050dd0"

pkg/flagger/registry.go

@@ -7,6 +7,7 @@ var (
 	FeatureKafkaSpanEval     = featuretypes.MustNewName("kafka_span_eval")
 	FeatureHideRootUser      = featuretypes.MustNewName("hide_root_user")
 	FeatureGetMetersFromZeus = featuretypes.MustNewName("get_meters_from_zeus")
+	FeaturePutMetersInZeus   = featuretypes.MustNewName("put_meters_in_zeus")
 )
 
 func MustNewRegistry() featuretypes.Registry {
@@ -43,6 +44,14 @@ func MustNewRegistry() featuretypes.Registry {
 			DefaultVariant: featuretypes.MustNewName("disabled"),
 			Variants:       featuretypes.NewBooleanVariants(),
 		},
+		&featuretypes.Feature{
+			Name:           FeaturePutMetersInZeus,
+			Kind:           featuretypes.KindBoolean,
+			Stage:          featuretypes.StageExperimental,
+			Description:    "Controls whether usage meters are sent to Zeus instead of the legacy subscriptions service",
+			DefaultVariant: featuretypes.MustNewName("disabled"),
+			Variants:       featuretypes.NewBooleanVariants(),
+		},
 	)
 	if err != nil {
 		panic(err)

pkg/zeus/noopzeus/provider.go

@@ -45,6 +45,10 @@ func (provider *provider) PutMeters(_ context.Context, _ string, _ []byte) error
 	return errors.New(errors.TypeUnsupported, zeus.ErrCodeUnsupported, "putting meters is not supported")
 }
 
+func (provider *provider) PutMetersV2(_ context.Context, _ string, _ []byte) error {
+	return errors.New(errors.TypeUnsupported, zeus.ErrCodeUnsupported, "putting meters v2 is not supported")
+}
+
 func (provider *provider) PutProfile(_ context.Context, _ string, _ *zeustypes.PostableProfile) error {
 	return errors.New(errors.TypeUnsupported, zeus.ErrCodeUnsupported, "putting profile is not supported")
 }

pkg/zeus/zeus.go

@@ -29,9 +29,12 @@ type Zeus interface {
 	// Returns the billing details for the given license key.
 	GetMeters(context.Context, string) ([]byte, error)
 
-	// Puts the meters for the given license key.
+	// Puts the meters for the given license key using the legacy subscriptions service.
 	PutMeters(context.Context, string, []byte) error
 
+	// Puts the meters for the given license key using Zeus.
+	PutMetersV2(context.Context, string, []byte) error
+
 	// Put profile for the given license key.
 	PutProfile(context.Context, string, *zeustypes.PostableProfile) error