[HDX-3981] Upgrade Mantine v7 to v9 (#2096)

## Summary Upgrade all `@mantine/*` packages from v7.17.8 to v9.0.0 (skipping the v8 intermediate step since the breaking changes were manageable in a single pass). This improves React 19 compatibility and keeps the UI library current. ### Breaking changes resolved **v7 → v8 changes:** - `DateTimePicker`/`DateInput` `onChange` now returns a date string instead of a `Date` object — updated handlers in `AlertScheduleFields.tsx` and `SourceForm.tsx` - Updated `postcss-preset-mantine` to ^1.18.0 **v8 → v9 changes:** - `Collapse`: renamed `in` prop to `expanded` (11 instances across 10 files) - `Grid`: removed deprecated `overflow="hidden"` prop (5 instances, 3 files) — v9 uses native CSS `gap` instead of negative margins - `Text`/`Anchor`: renamed `color` prop to `c` style prop (7 instances, 5 files) - `SourceSchemaPreview`: replaced removed `TextProps` `color` key with `React.CSSProperties` - Theme: set `defaultRadius: 'sm'` in both theme configs to preserve existing visual appearance (v9 changed default from `sm` to `md`) - Updated test for Collapse visibility behavior change in jsdom ### Not affected (verified) - No `@mantine/carousel` or `@mantine/tiptap` usage — embla and Tiptap migrations not needed - No `TypographyStylesProvider`, `Spoiler`, `positionDependencies`, `useFullscreen`, `useMouse`, `useMutationObserver`, or `zodResolver` from `@mantine/form` usage - All `useLocalStorage` calls from `@mantine/hooks` already provide `defaultValue` - `react-hook-form-mantine` has a peer dep mismatch (expects `@mantine/core ^7.0.0`) but its thin wrappers are compatible at runtime ### How to test locally or on Vercel 1. Start the dev stack with `yarn dev` 2. Navigate through key pages: search, dashboards, alerts, services dashboard, Kubernetes pages 3. Verify Collapse animations work correctly (alert details, nav sub-menus, advanced settings) 4. Verify Grid layouts render properly on services dashboard side panels 5. Verify no visual regressions in border-radius, spacing, or color across components ### References - Linear Issue: https://linear.app/clickhouse/issue/HDX-3981/upgrade-mantine-v7-v9 - [Mantine v9 Changelog](https://mantine.dev/changelog/9-0-0/) - [7.x → 8.x Migration Guide](https://mantine.dev/guides/7x-to-8x/) - [8.x → 9.x Migration Guide](https://mantine.dev/guides/8x-to-9x/)
2026-04-21 13:37:15 +00:00 · 2026-04-13 10:03:29 -06:00 · 2026-04-13 10:03:29 -06:00 · 0bfec14830
commit 0bfec14830
parent 4dea3621a7
34 changed files with 406 additions and 365 deletions
--- a/.changeset/upgrade-mantine-v9.md
+++ b/.changeset/upgrade-mantine-v9.md
@ -0,0 +1,5 @@
+---
+'@hyperdx/app': minor
+---
+
+Upgrade Mantine from v7 to v9 and remove react-hook-form-mantine dependency
--- a/packages/app/package.json
+++ b/packages/app/package.json
@ -36,13 +36,13 @@
    "@hyperdx/browser": "^0.22.0",
    "@hyperdx/common-utils": "^0.17.1",
    "@hyperdx/node-opentelemetry": "^0.9.0",
-    "@mantine/core": "^7.17.8",
-    "@mantine/dates": "^7.17.8",
-    "@mantine/dropzone": "^7.17.8",
-    "@mantine/form": "^7.17.8",
-    "@mantine/hooks": "^7.17.8",
-    "@mantine/notifications": "^7.17.8",
-    "@mantine/spotlight": "^7.17.8",
+    "@mantine/core": "^9.0.0",
+    "@mantine/dates": "^9.0.0",
+    "@mantine/dropzone": "^9.0.0",
+    "@mantine/form": "^9.0.0",
+    "@mantine/hooks": "^9.0.0",
+    "@mantine/notifications": "^9.0.0",
+    "@mantine/spotlight": "^9.0.0",
    "@tabler/icons-react": "^3.39.0",
    "@tanstack/react-query": "^5.56.2",
    "@tanstack/react-query-devtools": "^5.56.2",
@ -79,7 +79,6 @@
    "react-error-boundary": "^3.1.4",
    "react-grid-layout": "^1.3.4",
    "react-hook-form": "^7.43.8",
-    "react-hook-form-mantine": "^3.1.3",
    "react-hotkeys-hook": "^4.3.7",
    "react-json-tree": "^0.20.0",
    "react-markdown": "^10.1.0",
@ -140,7 +139,7 @@
    "msw": "^2.3.0",
    "msw-storybook-addon": "^2.0.2",
    "postcss": "^8.4.38",
-    "postcss-preset-mantine": "^1.15.0",
+    "postcss-preset-mantine": "^1.18.0",
    "postcss-simple-vars": "^7.0.0",
    "prettier": "^3.3.2",
    "rimraf": "^4.4.1",
--- a/packages/app/src/DBChartPage.tsx
+++ b/packages/app/src/DBChartPage.tsx
@ -166,7 +166,7 @@ function AIAssistant({
        </Button>
        <Pill size="xs">Experimental</Pill>
      </Group>
-      <Collapse in={opened}>
+      <Collapse expanded={opened}>
        {opened && (
          // eslint-disable-next-line react-hooks/refs
          <form onSubmit={handleSubmit(onSubmit)}>
--- a/packages/app/src/DBDashboardImportPage.tsx
+++ b/packages/app/src/DBDashboardImportPage.tsx
@ -173,7 +173,7 @@ function FileSelection({
                    {errorDetails ? 'Hide Details' : 'Show Details'}
                  </Group>
                </Button>
-                <Collapse in={errorDetails}>
+                <Collapse expanded={errorDetails}>
                  <Text c="red">{error.details}</Text>
                </Collapse>
              </>
--- a/packages/app/src/DBSearchPageAlertModal.tsx
+++ b/packages/app/src/DBSearchPageAlertModal.tsx
@ -1,7 +1,6 @@
 import React from 'react';
 import router from 'next/router';
-import { useForm, useWatch } from 'react-hook-form';
-import { NativeSelect, NumberInput } from 'react-hook-form-mantine';
+import { Controller, useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { tcFromSource } from '@hyperdx/common-utils/dist/core/metadata';
@ -25,6 +24,8 @@ import {
  Group,
  LoadingOverlay,
  Modal,
+  NativeSelect,
+  NumberInput,
  Paper,
  Stack,
  Tabs,
@ -166,35 +167,51 @@ const AlertForm = ({
            <Text size="sm" opacity={0.7}>
              Alert when
            </Text>
-            <NativeSelect
-              data={optionsToSelectData(ALERT_THRESHOLD_TYPE_OPTIONS)}
-              size="xs"
-              name={`thresholdType`}
+            <Controller
              control={control}
+              name="thresholdType"
+              render={({ field }) => (
+                <NativeSelect
+                  data={optionsToSelectData(ALERT_THRESHOLD_TYPE_OPTIONS)}
+                  size="xs"
+                  {...field}
+                />
+              )}
            />
-            <NumberInput
-              size="xs"
-              w={80}
+            <Controller
              control={control}
-              name={`threshold`}
+              name="threshold"
+              render={({ field }) => (
+                <NumberInput size="xs" w={80} {...field} />
+              )}
            />
            <Text size="sm" opacity={0.7}>
              lines appear within
            </Text>
-            <NativeSelect
-              data={optionsToSelectData(ALERT_INTERVAL_OPTIONS)}
-              size="xs"
-              name={`interval`}
+            <Controller
              control={control}
+              name="interval"
+              render={({ field }) => (
+                <NativeSelect
+                  data={optionsToSelectData(ALERT_INTERVAL_OPTIONS)}
+                  size="xs"
+                  {...field}
+                />
+              )}
            />
            <Text size="sm" opacity={0.7}>
              via
            </Text>
-            <NativeSelect
-              data={optionsToSelectData(ALERT_CHANNEL_OPTIONS)}
-              size="xs"
-              name={`channel.type`}
+            <Controller
              control={control}
+              name="channel.type"
+              render={({ field }) => (
+                <NativeSelect
+                  data={optionsToSelectData(ALERT_CHANNEL_OPTIONS)}
+                  size="xs"
+                  {...field}
+                />
+              )}
            />
          </Group>
          <AlertScheduleFields
--- a/packages/app/src/NamespaceDetailsSidePanel.tsx
+++ b/packages/app/src/NamespaceDetailsSidePanel.tsx
@ -39,7 +39,7 @@ const PodDetailsProperty = React.memo(
    if (!value) return null;
    return (
      <div className="pe-4">
-        <Text size="xs" color="gray">
+        <Text size="xs" c="gray">
          {label}
        </Text>
        <Text size="sm">{value}</Text>
@ -170,7 +170,7 @@ function NamespaceLogs({
                passHref
                legacyBehavior
              >
-                <Anchor size="xs" color="dimmed">
+                <Anchor size="xs" c="dimmed">
                  Search <IconExternalLink size={12} style={{ display: 'inline' }} />
                </Anchor>
              </Link> 
--- a/packages/app/src/NodeDetailsSidePanel.tsx
+++ b/packages/app/src/NodeDetailsSidePanel.tsx
@ -40,7 +40,7 @@ const PodDetailsProperty = React.memo(
    if (!value) return null;
    return (
      <div className="pe-4">
-        <Text size="xs" color="gray">
+        <Text size="xs" c="gray">
          {label}
        </Text>
        <Text size="sm">{value}</Text>
@ -183,7 +183,7 @@ function NodeLogs({
                passHref
                legacyBehavior
              >
-                <Anchor size="xs" color="dimmed">
+                <Anchor size="xs" c="dimmed">
                  Search <IconExternalLink size={12} style={{ display: 'inline' }} />
                </Anchor>
              </Link> 
--- a/packages/app/src/OnboardingChecklist.tsx
+++ b/packages/app/src/OnboardingChecklist.tsx
@ -178,7 +178,7 @@ const OnboardingChecklist = ({
        </ActionIcon>
      </Group>

-      <Collapse in={!isCollapsed}>
+      <Collapse expanded={!isCollapsed}>
        <Stack gap="xs">
          {steps.map((step, index) => {
            const StepContent = (
--- a/packages/app/src/PodDetailsSidePanel.tsx
+++ b/packages/app/src/PodDetailsSidePanel.tsx
@ -41,7 +41,7 @@ const PodDetailsProperty = React.memo(
    if (!value) return null;
    return (
      <div className="pe-4">
-        <Text size="xs" color="gray">
+        <Text size="xs" c="gray">
          {label}
        </Text>
        <Text size="sm">{value}</Text>
--- a/packages/app/src/ServicesDashboardPage.tsx
+++ b/packages/app/src/ServicesDashboardPage.tsx
@ -576,7 +576,7 @@ function HttpTab({
    }, [source, searchedTimeRange, appliedConfig, expressions, reqChartType]);

  return (
-    <Grid mt="md" grow={false} w="100%" maw="100%" overflow="hidden">
+    <Grid mt="md" grow={false} w="100%" maw="100%">
      <Grid.Col span={6}>
        <ChartBox
          style={{ height: 350 }}
@ -1147,7 +1147,7 @@ function DatabaseTab({
  );

  return (
-    <Grid mt="md" grow={false} w="100%" maw="100%" overflow="hidden">
+    <Grid mt="md" grow={false} w="100%" maw="100%">
      <Grid.Col span={6}>
        <ChartBox style={{ height: 350 }}>
          {source && totalTimePerQueryConfig && (
@ -1364,7 +1364,7 @@ function ErrorsTab({
  const { expressions } = useServiceDashboardExpressions({ source });

  return (
-    <Grid mt="md" grow={false} w="100%" maw="100%" overflow="hidden">
+    <Grid mt="md" grow={false} w="100%" maw="100%">
      <Grid.Col span={12}>
        <ChartBox style={{ height: 350 }}>
          {source && expressions && (
--- a/packages/app/src/tests/localStore.test.ts
+++ b/packages/app/src/tests/localStore.test.ts
@ -324,7 +324,6 @@ describe('localSources', () => {
    const envDefaults = [{ id: 'env-src', name: 'Env Source' }];
    mockedConfig.HDX_LOCAL_DEFAULT_SOURCES = JSON.stringify(envDefaults);

-    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
    const stored = localSources.create({ name: 'My Source' } as Omit<
      TSource,
      'id'
--- a/packages/app/src/components/AlertScheduleFields.tsx
+++ b/packages/app/src/components/AlertScheduleFields.tsx
@ -8,11 +8,11 @@ import {
  UseFormSetValue,
  useWatch,
 } from 'react-hook-form';
-import { NumberInput } from 'react-hook-form-mantine';
 import {
  Box,
  Collapse,
  Group,
+  NumberInput,
  Text,
  Tooltip,
  UnstyledButton,
@ -96,7 +96,7 @@ export function AlertScheduleFields<T extends FieldValues>({
          </Text>
        </Group>
      </UnstyledButton>
-      <Collapse in={opened}>
+      <Collapse expanded={opened}>
        <Box data-testid="alert-advanced-settings-panel">
          <Text size="xs" c="dimmed" mt="xs">
            Optional schedule controls for aligning alert windows.
@ -120,15 +120,20 @@ export function AlertScheduleFields<T extends FieldValues>({
                    </Box>
                  </Tooltip>
                </Group>
-                <NumberInput
-                  min={0}
-                  max={maxScheduleOffsetMinutes}
-                  step={1}
-                  size="xs"
-                  w={100}
+                <Controller
                  control={control}
                  name={scheduleOffsetName}
-                  disabled={hasScheduleStartAtAnchor}
+                  render={({ field }) => (
+                    <NumberInput
+                      min={0}
+                      max={maxScheduleOffsetMinutes}
+                      step={1}
+                      size="xs"
+                      w={100}
+                      disabled={hasScheduleStartAtAnchor}
+                      {...field}
+                    />
+                  )}
                />
                <Text size="sm" opacity={0.7}>
                  {offsetWindowLabel}
@ -174,7 +179,7 @@ export function AlertScheduleFields<T extends FieldValues>({
                    field.value as string | null | undefined,
                  )}
                  onChange={value =>
-                    field.onChange(value?.toISOString() ?? null)
+                    field.onChange(value ? new Date(value).toISOString() : null)
                  }
                  error={error?.message}
                />
--- a/packages/app/src/components/Alerts.tsx
+++ b/packages/app/src/components/Alerts.tsx
@ -1,12 +1,17 @@
 import { useMemo } from 'react';
-import { Control, useController } from 'react-hook-form';
-import { Select, SelectProps } from 'react-hook-form-mantine';
+import {
+  Control,
+  Controller,
+  FieldValues,
+  Path,
+  useController,
+} from 'react-hook-form';
 import { Label, ReferenceArea, ReferenceLine } from 'recharts';
 import {
  type AlertChannelType,
  WebhookService,
 } from '@hyperdx/common-utils/dist/types';
-import { Button, ComboboxData, Group, Modal } from '@mantine/core';
+import { Button, ComboboxData, Group, Modal, Select } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';

 import api from '@/api';
@ -18,9 +23,13 @@ type Webhook = {
  name: string;
 };

-const WebhookChannelForm = <T extends object>(
-  props: Partial<SelectProps<T>>,
-) => {
+const WebhookChannelForm = <T extends FieldValues>({
+  control,
+  name,
+}: {
+  control?: Control<T>;
+  name?: string;
+}) => {
  const { data: webhooks, refetch: refetchWebhooks } = api.useWebhooks([
    WebhookService.Slack,
    WebhookService.Generic,
@ -48,8 +57,8 @@ const WebhookChannelForm = <T extends object>(
  }, [webhooks]);

  const { field } = useController({
-    control: props.control,
-    name: props.name!,
+    control,
+    name: name! as Path<T>,
  });

  const handleWebhookCreated = async (webhookId?: string) => {
@ -64,21 +73,25 @@ const WebhookChannelForm = <T extends object>(
  return (
    <div>
      <Group gap="md" justify="space-between" align="flex-start">
-        <Select
-          data-testid="select-webhook"
-          comboboxProps={{
-            withinPortal: false,
-          }}
-          required
-          size="xs"
-          flex={1}
-          placeholder={
-            hasWebhooks ? 'Select a Webhook' : 'No Webhooks available'
-          }
-          data={options}
-          name={props.name!}
-          control={props.control}
-          {...props}
+        <Controller
+          control={control}
+          name={name! as Path<T>}
+          render={({ field }) => (
+            <Select
+              data-testid="select-webhook"
+              comboboxProps={{
+                withinPortal: false,
+              }}
+              required
+              size="xs"
+              flex={1}
+              placeholder={
+                hasWebhooks ? 'Select a Webhook' : 'No Webhooks available'
+              }
+              data={options}
+              {...field}
+            />
+          )}
        />
        <Button
          data-testid="add-new-webhook-button"
@ -106,12 +119,12 @@ const WebhookChannelForm = <T extends object>(
  );
 };

-export const AlertChannelForm = ({
+export const AlertChannelForm = <T extends FieldValues>({
  control,
  type,
  namePrefix = '',
 }: {
-  control: Control<any>; // TODO: properly type this
+  control: Control<T>;
  type: AlertChannelType;
  namePrefix?: string;
 }) => {
--- a/packages/app/src/components/AppNav/AppNav.tsx
+++ b/packages/app/src/components/AppNav/AppNav.tsx
@ -404,7 +404,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
            />

            {!isCollapsed && (
-              <Collapse in={isSavedSearchExpanded}>
+              <Collapse expanded={isSavedSearchExpanded}>
                <div className={styles.subMenu}>
                  {favoritedSavedSearches.length > 0 ? (
                    favoritedSavedSearches.map(renderSavedSearchLink)
@ -444,7 +444,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
            />

            {!isCollapsed && (
-              <Collapse in={isDashboardsExpanded}>
+              <Collapse expanded={isDashboardsExpanded}>
                <div className={styles.subMenu}>
                  {favoritedDashboards.length > 0 ? (
                    favoritedDashboards.map(renderDashboardLink)
--- a/packages/app/src/components/ChartEditor/RawSqlChartInstructions.tsx
+++ b/packages/app/src/components/ChartEditor/RawSqlChartInstructions.tsx
@ -91,7 +91,7 @@ export function RawSqlChartInstructions({
            SQL Chart Instructions
          </Text>
        </Group>
-        <Collapse in={helpOpened}>
+        <Collapse expanded={helpOpened}>
          <Stack gap={6} pl="xs" pt="md">
            {DISPLAY_TYPE_INSTRUCTIONS[displayType]}

--- a/packages/app/src/components/DBEditTimeChartForm/TileAlertEditor.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/TileAlertEditor.tsx
@ -1,10 +1,16 @@
-import { Control, UseFormSetValue, useWatch } from 'react-hook-form';
-import { NativeSelect, NumberInput } from 'react-hook-form-mantine';
+import {
+  Control,
+  Controller,
+  UseFormSetValue,
+  useWatch,
+} from 'react-hook-form';
 import {
  ActionIcon,
  Box,
  Collapse,
  Group,
+  NativeSelect,
+  NumberInput,
  Paper,
  Text,
  Tooltip,
@ -78,39 +84,55 @@ export function TileAlertEditor({
          </ActionIcon>
        </Tooltip>
      </Group>
-      <Collapse in={opened}>
+      <Collapse expanded={opened}>
        <Box px="sm" pb="sm">
          <Group gap="xs">
            <Text size="sm" opacity={0.7}>
              Trigger when the value
            </Text>
-            <NativeSelect
-              data={optionsToSelectData(TILE_ALERT_THRESHOLD_TYPE_OPTIONS)}
-              size="xs"
-              name={`alert.thresholdType`}
+            <Controller
              control={control}
+              name="alert.thresholdType"
+              render={({ field }) => (
+                <NativeSelect
+                  data={optionsToSelectData(TILE_ALERT_THRESHOLD_TYPE_OPTIONS)}
+                  size="xs"
+                  {...field}
+                />
+              )}
            />
-            <NumberInput
-              size="xs"
-              w={80}
+            <Controller
              control={control}
-              name={`alert.threshold`}
+              name="alert.threshold"
+              render={({ field }) => (
+                <NumberInput size="xs" w={80} {...field} />
+              )}
            />
            over
-            <NativeSelect
-              data={optionsToSelectData(TILE_ALERT_INTERVAL_OPTIONS)}
-              size="xs"
-              name={`alert.interval`}
+            <Controller
              control={control}
+              name="alert.interval"
+              render={({ field }) => (
+                <NativeSelect
+                  data={optionsToSelectData(TILE_ALERT_INTERVAL_OPTIONS)}
+                  size="xs"
+                  {...field}
+                />
+              )}
            />
            <Text size="sm" opacity={0.7}>
              window via
            </Text>
-            <NativeSelect
-              data={optionsToSelectData(ALERT_CHANNEL_OPTIONS)}
-              size="xs"
-              name={`alert.channel.type`}
+            <Controller
              control={control}
+              name="alert.channel.type"
+              render={({ field }) => (
+                <NativeSelect
+                  data={optionsToSelectData(ALERT_CHANNEL_OPTIONS)}
+                  size="xs"
+                  {...field}
+                />
+              )}
            />
          </Group>
          {alert?.createdBy && (
--- a/packages/app/src/components/DBEditTimeChartForm/tests/DBEditTimeChartForm.test.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/tests/DBEditTimeChartForm.test.tsx
@ -464,13 +464,17 @@ describe('DBEditTimeChartForm - Add/delete alerts for display type Number', () =

    await userEvent.click(screen.getByTestId('alert-button'));

-    expect(
-      screen.getByTestId('alert-advanced-settings-panel'),
-    ).not.toBeVisible();
+    // Mantine v9 Collapse sets aria-hidden on its wrapper element
+    const collapseWrapper = screen
+      .getByTestId('alert-advanced-settings-panel')
+      .closest('[aria-hidden]');
+    expect(collapseWrapper).toHaveAttribute('aria-hidden', 'true');

    await userEvent.click(screen.getByTestId('alert-advanced-settings-toggle'));

-    expect(screen.getByTestId('alert-advanced-settings-panel')).toBeVisible();
+    await waitFor(() => {
+      expect(collapseWrapper).toHaveAttribute('aria-hidden', 'false');
+    });
    expect(screen.getByText('Anchor start time')).toBeInTheDocument();
    expect(
      screen.getByTestId('alert-advanced-settings-toggle'),
--- a/packages/app/src/components/DBEditTimeChartForm/tests/utils.test.ts
+++ b/packages/app/src/components/DBEditTimeChartForm/tests/utils.test.ts
@ -133,7 +133,6 @@ describe('isQueryReady', () => {

  it('returns truthy for metric sources with metricTables but empty tableName', () => {
    expect(
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
      isQueryReady({
        ...builderConfig,
        from: { databaseName: 'default', tableName: '' },
--- a/packages/app/src/components/Error/ErrorCollapse.tsx
+++ b/packages/app/src/components/Error/ErrorCollapse.tsx
@ -30,7 +30,7 @@ export function ErrorCollapse({ summary, details }: ErrorCollapseProps) {
        <IconAlertTriangle size={14} className="me-2" /> {summary}
      </Button>

-      <Collapse in={open}>
+      <Collapse expanded={open}>
        <Code
          block
          c="red"
--- a/packages/app/src/components/KubeComponents.tsx
+++ b/packages/app/src/components/KubeComponents.tsx
@ -277,7 +277,7 @@ export const KubeTimeline = ({

  if (isLoading) {
    return (
-      <Text color="muted" ta="center">
+      <Text c="muted" ta="center">
        Loading...
      </Text>
    );
@ -285,7 +285,7 @@ export const KubeTimeline = ({

  if (allPodEvents.length === 0) {
    return (
-      <Text color="muted" ta="center">
+      <Text c="muted" ta="center">
        No events
      </Text>
    );
--- a/packages/app/src/components/MetricAttributeHelperPanel.tsx
+++ b/packages/app/src/components/MetricAttributeHelperPanel.tsx
@ -460,7 +460,7 @@ export function MetricAttributeHelperPanel({
        </Group>
      </UnstyledButton>

-      <Collapse in={opened}>
+      <Collapse expanded={opened}>
        <Box pt="xs">
          {isLoading ? (
            <Flex justify="center" py="md">
--- a/packages/app/src/components/ServiceDashboardDbQuerySidePanel.tsx
+++ b/packages/app/src/components/ServiceDashboardDbQuerySidePanel.tsx
@ -95,7 +95,7 @@ export default function ServiceDashboardDbQuerySidePanel({
            onClose={onClose}
          />
          <DrawerBody>
-            <Grid grow={false} w="100%" maw="100%" overflow="hidden">
+            <Grid grow={false} w="100%" maw="100%">
              <Grid.Col span={6}>
                <ChartBox style={{ height: 350 }}>
                  {source && expressions && (
--- a/packages/app/src/components/ServiceDashboardEndpointSidePanel.tsx
+++ b/packages/app/src/components/ServiceDashboardEndpointSidePanel.tsx
@ -102,7 +102,7 @@ export default function ServiceDashboardEndpointSidePanel({
            onClose={onClose}
          />
          <DrawerBody>
-            <Grid grow={false} w="100%" maw="100%" overflow="hidden">
+            <Grid grow={false} w="100%" maw="100%">
              <Grid.Col span={6}>
                <ChartBox style={{ height: 350 }}>
                  {source && expressions && (
--- a/packages/app/src/components/SourceSchemaPreview.tsx
+++ b/packages/app/src/components/SourceSchemaPreview.tsx
@ -1,19 +1,11 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import {
  MetricsDataType,
  TLogSource,
  TMetricSource,
  TSource,
 } from '@hyperdx/common-utils/dist/types';
-import {
-  Modal,
-  Paper,
-  Stack,
-  Tabs,
-  Text,
-  TextProps,
-  Tooltip,
-} from '@mantine/core';
+import { Modal, Paper, Stack, Tabs, Text, Tooltip } from '@mantine/core';
 import { IconCode, IconRefresh } from '@tabler/icons-react';

 import { useTableMetadata } from '@/hooks/useMetadata';
@ -24,7 +16,7 @@ interface SourceSchemaInfoIconProps {
  onClick: () => void;
  isEnabled: boolean;
  tableCount: number;
-  iconStyles?: Pick<TextProps, 'size' | 'color'>;
+  iconStyles?: React.CSSProperties;
  variant?: 'icon' | 'text';
 }

@ -134,7 +126,7 @@ interface SourceSchemaPreviewSource {

 interface SourceSchemaPreviewProps {
  source?: SourceSchemaPreviewSource;
-  iconStyles?: Pick<TextProps, 'size' | 'color'>;
+  iconStyles?: React.CSSProperties;
  variant?: 'icon' | 'text';
 }

--- a/packages/app/src/components/Sources/SourceForm.tsx
+++ b/packages/app/src/components/Sources/SourceForm.tsx
@ -679,7 +679,9 @@ function MaterializedViewFormSection({
                {...field}
                value={field.value ? new Date(field.value) : undefined}
                onChange={dateStr =>
-                  field.onChange(dateStr ? dateStr.toISOString() : null)
+                  field.onChange(
+                    dateStr ? new Date(dateStr).toISOString() : null,
+                  )
                }
                clearable
                highlightToday
--- a/packages/app/src/components/TimePicker/TimePicker.tsx
+++ b/packages/app/src/components/TimePicker/TimePicker.tsx
@ -46,7 +46,26 @@ const modeAtom = atomWithStorage<TimePickerMode>(
 const DATE_INPUT_PLACEHOLDER = 'YYY-MM-DD HH:mm:ss';
 const DATE_INPUT_FORMAT = 'YYYY-MM-DD HH:mm:ss';

-const DateInputCmp = (props: DateInputProps) => (
+/** Ensure a value is a Date object (Mantine v9 DateInput returns strings). */
+const toDate = (v: Date | string | null): Date | null =>
+  v == null ? null : v instanceof Date ? v : new Date(v);
+
+/**
+ * Wrapper around Mantine v9 DateInput that bridges the Date ↔ string gap.
+ * Mantine v9 DateInput expects/emits string values, but the TimePickerForm
+ * stores Date objects (used by date-fns). This wrapper converts in both
+ * directions: value (Date → string) and onChange (string → Date).
+ */
+type DateInputCmpProps = Omit<DateInputProps, 'value' | 'onChange'> & {
+  value?: Date | null;
+  onChange?: (value: Date | null) => void;
+};
+
+const DateInputCmp = ({
+  value,
+  onChange: onChangeProp,
+  ...props
+}: DateInputCmpProps) => (
  <DateInput
    size="xs"
    highlightToday
@ -60,6 +79,8 @@ const DateInputCmp = (props: DateInputProps) => (
      }
    }}
    {...props}
+    value={value instanceof Date ? value.toISOString() : (value ?? null)}
+    onChange={v => onChangeProp?.(toDate(v))}
  />
 );

@ -176,7 +197,8 @@ const TimePickerComponent = ({
    if (!form.isValid() || !opened) {
      return;
    }
-    const { startDate, endDate } = form.values;
+    const startDate = toDate(form.values.startDate);
+    const endDate = toDate(form.values.endDate);
    if (mode === TimePickerMode.Range) {
      handleSearch([startDate, endDate]);
      close();
@ -194,7 +216,8 @@ const TimePickerComponent = ({

  const handleMove = React.useCallback(
    (d: Duration) => {
-      const { startDate, endDate } = form.values;
+      const startDate = toDate(form.values.startDate);
+      const endDate = toDate(form.values.endDate);
      const from = startDate && add(startDate, d);
      const to = endDate && add(endDate, d);
      handleSearch([from, to]);
@ -368,15 +391,12 @@ const TimePickerComponent = ({
                    form.values.startDate &&
                    form.values.endDate
                  ) {
+                    const start = toDate(form.values.startDate)!;
+                    const end = toDate(form.values.endDate)!;
                    const midpoint = new Date(
-                      (form.values.startDate.getTime() +
-                        form.values.endDate.getTime()) /
-                        2,
+                      (start.getTime() + end.getTime()) / 2,
                    );
-                    const halfRangeMs =
-                      (form.values.endDate.getTime() -
-                        form.values.startDate.getTime()) /
-                      2;
+                    const halfRangeMs = (end.getTime() - start.getTime()) / 2;

                    // Find the closest duration option
                    const halfRangeMinutes = halfRangeMs / (1000 * 60);
--- a/packages/app/src/components/TimePicker/useTimePickerForm.ts
+++ b/packages/app/src/components/TimePicker/useTimePickerForm.ts
@ -36,11 +36,20 @@ export const useTimePickerForm = ({ mode }: { mode: TimePickerMode }) => {

    onValuesChange: values => {
      // Ensure that end date is not before start date
-      if (
-        values.endDate &&
-        values.startDate &&
-        values.endDate < values.startDate
-      ) {
+      // Guard with getTime() since Mantine v9 DateInput may supply strings
+      const start =
+        values.startDate instanceof Date
+          ? values.startDate
+          : values.startDate
+            ? new Date(values.startDate)
+            : null;
+      const end =
+        values.endDate instanceof Date
+          ? values.endDate
+          : values.endDate
+            ? new Date(values.endDate)
+            : null;
+      if (start && end && end.getTime() < start.getTime()) {
        form.setFieldValue('endDate', values.startDate);
      }
    },
--- a/packages/app/src/components/aiSummarize/AISummaryPanel.tsx
+++ b/packages/app/src/components/aiSummarize/AISummaryPanel.tsx
@ -55,7 +55,7 @@ export default function AISummaryPanel({
          </Button>
        )}
      </Flex>
-      <Collapse in={isOpen}>
+      <Collapse expanded={isOpen}>
        <Paper
          p="sm"
          mt={6}
--- a/packages/app/src/theme/themes/clickstack/mantineTheme.ts
+++ b/packages/app/src/theme/themes/clickstack/mantineTheme.ts
@ -30,6 +30,7 @@ const makeTheme = ({
  fontFamily?: string;
 }): MantineThemeOverride => ({
  cursorType: 'pointer',
+  defaultRadius: 'sm',
  fontFamily,
  primaryColor: 'yellow',
  primaryShade: 6,
@ -299,6 +300,9 @@ const makeTheme = ({
          '--tabs-color': 'var(--color-text-brand)',
        },
      }),
+      styles: {
+        tabLabel: { textAlign: 'left' },
+      },
    }),
    Checkbox: Checkbox.extend({
      vars: () => ({
--- a/packages/app/src/theme/themes/hyperdx/mantineTheme.ts
+++ b/packages/app/src/theme/themes/hyperdx/mantineTheme.ts
@ -22,6 +22,7 @@ const makeTheme = ({
  fontFamily?: string;
 }): MantineThemeOverride => ({
  cursorType: 'pointer',
+  defaultRadius: 'sm',
  fontFamily,
  focusClassName: focusClasses.focusRing,
  primaryColor: 'green',
@ -313,6 +314,9 @@ const makeTheme = ({
          '--tabs-color': 'var(--color-text-brand)',
        },
      }),
+      styles: {
+        tabLabel: { textAlign: 'left' },
+      },
    }),
    ActionIcon: ActionIcon.extend({
      defaultProps: {
--- a/packages/app/tests/e2e/features/shared/multiline.spec.ts
+++ b/packages/app/tests/e2e/features/shared/multiline.spec.ts
@ -94,7 +94,7 @@ test.describe('Multiline Input', { tag: '@search' }, () => {
        await dashboardsListPage.goto();
        await dashboardsListPage.createNewDashboard();
        // Dashboard uses Controller + SQL/SearchInputV2 directly (no where-language-switch wrapper)
-        await page.getByRole('textbox', { name: 'Query language' }).click();
+        await page.getByRole('combobox', { name: 'Query language' }).click();
        await page.getByRole('option', { name: 'SQL', exact: true }).click();
        // Wait for dropdown to close so the WHERE input is not covered
        await page
@ -123,7 +123,7 @@ test.describe('Multiline Input', { tag: '@search' }, () => {
        await dashboardsListPage.goto();
        await dashboardsListPage.createNewDashboard();
        // Dashboard has no where-language-switch wrapper; use Query language textbox directly
-        await page.getByRole('textbox', { name: 'Query language' }).click();
+        await page.getByRole('combobox', { name: 'Query language' }).click();
        await page.getByRole('option', { name: 'Lucene', exact: true }).click();
        // Wait for dropdown to close so the search input is not covered
        await page
--- a/packages/app/tests/e2e/page-objects/SearchPage.ts
+++ b/packages/app/tests/e2e/page-objects/SearchPage.ts
@ -65,7 +65,7 @@ export class SearchPage {
    this.saveSearchButton = page.getByTestId('save-search-button');
    this.updateSearchButton = page.getByTestId('update-search-button');
    const whereLanguageSwitch = page.getByTestId('where-language-switch');
-    this.languageSelect = whereLanguageSwitch.getByRole('textbox', {
+    this.languageSelect = whereLanguageSwitch.getByRole('combobox', {
      name: 'Query language',
    });
    this.sqlTab = page.getByRole('option', { name: 'SQL', exact: true });
--- a/packages/app/tests/e2e/page-objects/ServicesDashboardPage.ts
+++ b/packages/app/tests/e2e/page-objects/ServicesDashboardPage.ts
@ -24,7 +24,7 @@ export class ServicesDashboardPage {
  async searchLucene(query: string) {
    const languageSelect = this.page
      .getByTestId('where-language-switch')
-      .getByRole('textbox', { name: 'Query language' });
+      .getByRole('combobox', { name: 'Query language' });
    await languageSelect.click();
    await this.page
      .getByRole('option', { name: 'Lucene', exact: true })
--- a/yarn.lock
+++ b/yarn.lock
@ -2729,15 +2729,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/runtime@npm:^7.20.13":
-  version: 7.23.9
-  resolution: "@babel/runtime@npm:7.23.9"
-  dependencies:
-    regenerator-runtime: "npm:^0.14.0"
-  checksum: 10c0/e71205fdd7082b2656512cc98e647d9ea7e222e4fe5c36e9e5adc026446fcc3ba7b3cdff8b0b694a0b78bb85db83e7b1e3d4c56ef90726682b74f13249cf952d
-  languageName: node
-  linkType: hard
-
 "@babel/runtime@npm:^7.21.0":
  version: 7.22.5
  resolution: "@babel/runtime@npm:7.22.5"
@ -4298,55 +4289,55 @@ __metadata:
  languageName: node
  linkType: hard

-"@floating-ui/core@npm:^1.7.3":
-  version: 1.7.3
-  resolution: "@floating-ui/core@npm:1.7.3"
+"@floating-ui/core@npm:^1.7.5":
+  version: 1.7.5
+  resolution: "@floating-ui/core@npm:1.7.5"
  dependencies:
-    "@floating-ui/utils": "npm:^0.2.10"
-  checksum: 10c0/edfc23800122d81df0df0fb780b7328ae6c5f00efbb55bd48ea340f4af8c5b3b121ceb4bb81220966ab0f87b443204d37105abdd93d94846468be3243984144c
+    "@floating-ui/utils": "npm:^0.2.11"
+  checksum: 10c0/f9c52205e198b231d63a387b09c659aab08c46a1899e0b0bbe147b8b4f048b546f15ba17cb5d2a471da9534f1883d979425e13e5c4ceee67be63e4b0abd4db5d
  languageName: node
  linkType: hard

-"@floating-ui/dom@npm:^1.7.4":
-  version: 1.7.4
-  resolution: "@floating-ui/dom@npm:1.7.4"
+"@floating-ui/dom@npm:^1.7.6":
+  version: 1.7.6
+  resolution: "@floating-ui/dom@npm:1.7.6"
  dependencies:
-    "@floating-ui/core": "npm:^1.7.3"
-    "@floating-ui/utils": "npm:^0.2.10"
-  checksum: 10c0/da6166c25f9b0729caa9f498685a73a0e28251613b35d27db8de8014bc9d045158a23c092b405321a3d67c2064909b6e2a7e6c1c9cc0f62967dca5779f5aef30
+    "@floating-ui/core": "npm:^1.7.5"
+    "@floating-ui/utils": "npm:^0.2.11"
+  checksum: 10c0/5c098e0d7b58c9bc769f276cca1766994c2c9c70c92d091a61bba8b3e9be53c011e0a79a8457fc2fb2f3d91697a26eb52e0a4962ef936dc963b45f58613c212f
  languageName: node
  linkType: hard

-"@floating-ui/react-dom@npm:^2.1.2":
-  version: 2.1.6
-  resolution: "@floating-ui/react-dom@npm:2.1.6"
+"@floating-ui/react-dom@npm:^2.1.8":
+  version: 2.1.8
+  resolution: "@floating-ui/react-dom@npm:2.1.8"
  dependencies:
-    "@floating-ui/dom": "npm:^1.7.4"
+    "@floating-ui/dom": "npm:^1.7.6"
  peerDependencies:
    react: ">=16.8.0"
    react-dom: ">=16.8.0"
-  checksum: 10c0/6654834a8e73ecbdbc6cad2ad8f7abc698ac7c1800ded4d61113525c591c03d2e3b59d3cf9205859221465ea38c87af4f9e6e204703c5b7a7e85332d1eef2e18
+  checksum: 10c0/26260ca4bb23b57c73b824062505abf977a008ce6e0463bdacca74f7e49853c4cd1d2bbf1a77c6caa17fa37dfffda2c6c4cd07a8737ebd7474aaff7818401d75
  languageName: node
  linkType: hard

-"@floating-ui/react@npm:^0.26.28":
-  version: 0.26.28
-  resolution: "@floating-ui/react@npm:0.26.28"
+"@floating-ui/react@npm:^0.27.19":
+  version: 0.27.19
+  resolution: "@floating-ui/react@npm:0.27.19"
  dependencies:
-    "@floating-ui/react-dom": "npm:^2.1.2"
-    "@floating-ui/utils": "npm:^0.2.8"
+    "@floating-ui/react-dom": "npm:^2.1.8"
+    "@floating-ui/utils": "npm:^0.2.11"
    tabbable: "npm:^6.0.0"
  peerDependencies:
-    react: ">=16.8.0"
-    react-dom: ">=16.8.0"
-  checksum: 10c0/a42df129e1e976fe8ba3f4c8efdda265a0196c1b66b83f2b9b27423d08dcc765406f893aeff9d830e70e3f14a9d4c490867eb4c32983317cbaa33863b0fae6f6
+    react: ">=17.0.0"
+    react-dom: ">=17.0.0"
+  checksum: 10c0/2a2cdfd3e67e0606833b63f922ad2a9037974f22b944e1cb8c0991b4c40450f8413d69745c0bbf4646e5ba283747f60d2fdc9a8d289b68b24448e59d81a3a96d
  languageName: node
  linkType: hard

-"@floating-ui/utils@npm:^0.2.10, @floating-ui/utils@npm:^0.2.8":
-  version: 0.2.10
-  resolution: "@floating-ui/utils@npm:0.2.10"
-  checksum: 10c0/e9bc2a1730ede1ee25843937e911ab6e846a733a4488623cd353f94721b05ec2c9ec6437613a2ac9379a94c2fd40c797a2ba6fa1df2716f5ce4aa6ddb1cf9ea4
+"@floating-ui/utils@npm:^0.2.11":
+  version: 0.2.11
+  resolution: "@floating-ui/utils@npm:0.2.11"
+  checksum: 10c0/f4bcea1559bdbb721ecc8e8ead423ac58d6a5b6e70b602cf0810ba6ad4ed1c77211b207faa88b278a9042f0c743133de08a203ed6741c1b6443423332884d5b3
  languageName: node
  linkType: hard

@ -4509,13 +4500,13 @@ __metadata:
    "@hyperdx/common-utils": "npm:^0.17.1"
    "@hyperdx/node-opentelemetry": "npm:^0.9.0"
    "@jedmao/location": "npm:^3.0.0"
-    "@mantine/core": "npm:^7.17.8"
-    "@mantine/dates": "npm:^7.17.8"
-    "@mantine/dropzone": "npm:^7.17.8"
-    "@mantine/form": "npm:^7.17.8"
-    "@mantine/hooks": "npm:^7.17.8"
-    "@mantine/notifications": "npm:^7.17.8"
-    "@mantine/spotlight": "npm:^7.17.8"
+    "@mantine/core": "npm:^9.0.0"
+    "@mantine/dates": "npm:^9.0.0"
+    "@mantine/dropzone": "npm:^9.0.0"
+    "@mantine/form": "npm:^9.0.0"
+    "@mantine/hooks": "npm:^9.0.0"
+    "@mantine/notifications": "npm:^9.0.0"
+    "@mantine/spotlight": "npm:^9.0.0"
    "@next/eslint-plugin-next": "npm:^16.0.10"
    "@playwright/test": "npm:^1.57.0"
    "@storybook/addon-docs": "npm:^10.1.4"
@ -4583,7 +4574,7 @@ __metadata:
    object-hash: "npm:^3.0.0"
    papaparse: "npm:^5.4.1"
    postcss: "npm:^8.4.38"
-    postcss-preset-mantine: "npm:^1.15.0"
+    postcss-preset-mantine: "npm:^1.18.0"
    postcss-simple-vars: "npm:^7.0.0"
    prettier: "npm:^3.3.2"
    react: "npm:^19.2.3"
@ -4592,7 +4583,6 @@ __metadata:
    react-error-boundary: "npm:^3.1.4"
    react-grid-layout: "npm:^1.3.4"
    react-hook-form: "npm:^7.43.8"
-    react-hook-form-mantine: "npm:^3.1.3"
    react-hotkeys-hook: "npm:^4.3.7"
    react-json-tree: "npm:^0.20.0"
    react-markdown: "npm:^10.1.0"
@ -5947,109 +5937,109 @@ __metadata:
  languageName: node
  linkType: hard

-"@mantine/core@npm:^7.17.8":
-  version: 7.17.8
-  resolution: "@mantine/core@npm:7.17.8"
+"@mantine/core@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "@mantine/core@npm:9.0.0"
  dependencies:
-    "@floating-ui/react": "npm:^0.26.28"
+    "@floating-ui/react": "npm:^0.27.19"
    clsx: "npm:^2.1.1"
-    react-number-format: "npm:^5.4.3"
-    react-remove-scroll: "npm:^2.6.2"
-    react-textarea-autosize: "npm:8.5.9"
-    type-fest: "npm:^4.27.0"
+    react-number-format: "npm:^5.4.5"
+    react-remove-scroll: "npm:^2.7.2"
+    type-fest: "npm:^5.5.0"
  peerDependencies:
-    "@mantine/hooks": 7.17.8
-    react: ^18.x || ^19.x
-    react-dom: ^18.x || ^19.x
-  checksum: 10c0/922a2b8b254cc5a145913f3768724510f44c261a12ec35864dea17350d96dabc0e4fbee634d2433447caa71d5a5226173ba5372bf6f4b06067cca3543f3a2b0d
+    "@mantine/hooks": 9.0.0
+    react: ^19.2.0
+    react-dom: ^19.2.0
+  checksum: 10c0/7310fbb15d03fb8c5ba7941553e4ef33e61f4213d64416b56e0a053316e43b406a4df5bb66368f977c3c42944eb7d764d741e31d2cda9444fd167647e8b159c1
  languageName: node
  linkType: hard

-"@mantine/dates@npm:^7.17.8":
-  version: 7.17.8
-  resolution: "@mantine/dates@npm:7.17.8"
+"@mantine/dates@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "@mantine/dates@npm:9.0.0"
  dependencies:
    clsx: "npm:^2.1.1"
  peerDependencies:
-    "@mantine/core": 7.17.8
-    "@mantine/hooks": 7.17.8
+    "@mantine/core": 9.0.0
+    "@mantine/hooks": 9.0.0
    dayjs: ">=1.0.0"
-    react: ^18.x || ^19.x
-    react-dom: ^18.x || ^19.x
-  checksum: 10c0/d6129fdc5f3439aec0c7b322a9ecbc96321dcd2094f94afd2d6be02ebfa094c07c5c975c601af7e578290b33fb1e7c491fa335a988c4892bd17440aff909be5f
+    react: ^19.2.0
+    react-dom: ^19.2.0
+  checksum: 10c0/169c25b49255eff61b9017f70f7f917fa08199fe7134e7d80f609690e1107abb3c91963f6591f3dd2eb3971a910dd42d2202680b63998a893c31e6600717a65a
  languageName: node
  linkType: hard

-"@mantine/dropzone@npm:^7.17.8":
-  version: 7.17.8
-  resolution: "@mantine/dropzone@npm:7.17.8"
+"@mantine/dropzone@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "@mantine/dropzone@npm:9.0.0"
  dependencies:
-    react-dropzone-esm: "npm:15.2.0"
+    react-dropzone: "npm:15.0.0"
  peerDependencies:
-    "@mantine/core": 7.17.8
-    "@mantine/hooks": 7.17.8
-    react: ^18.x || ^19.x
-    react-dom: ^18.x || ^19.x
-  checksum: 10c0/6d80579b99e03ad5b66880689cc2813f590a891d65882b002d28f1290eacca4dd2d12405793999972165ab6a8347fb5a257eb45ad77dd9fa8f9e9a580d7e5eb3
+    "@mantine/core": 9.0.0
+    "@mantine/hooks": 9.0.0
+    react: ^19.2.0
+    react-dom: ^19.2.0
+  checksum: 10c0/2d4063ec35686285172a63d0b25855c4c4fe11525e6f5cc38165717e2f8ddf028c1bd48ef2f657e07b94ffd398a6931415a7584c516ede12e75713d8c143d0bb
  languageName: node
  linkType: hard

-"@mantine/form@npm:^7.17.8":
-  version: 7.17.8
-  resolution: "@mantine/form@npm:7.17.8"
+"@mantine/form@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "@mantine/form@npm:9.0.0"
  dependencies:
+    "@standard-schema/spec": "npm:^1.1.0"
    fast-deep-equal: "npm:^3.1.3"
    klona: "npm:^2.0.6"
  peerDependencies:
-    react: ^18.x || ^19.x
-  checksum: 10c0/48cd768fd01dc9ce050d69c53076661beb1658c326cb22c8af86959d26cf2332a0080139d0ed0141ba8073d57f2a85fb2d62bcb6b7d59e89a55b4af00cab5021
+    react: ^19.2.0
+  checksum: 10c0/24fe6141aacffb7b54a837369ce65b827e2a1e5a5709d58ebea9caae3cd3cf82181126c0e3bc5f128a413e320d20dae90888cfbac60ddfba0d8d958baeaed08f
  languageName: node
  linkType: hard

-"@mantine/hooks@npm:^7.17.8":
-  version: 7.17.8
-  resolution: "@mantine/hooks@npm:7.17.8"
+"@mantine/hooks@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "@mantine/hooks@npm:9.0.0"
  peerDependencies:
-    react: ^18.x || ^19.x
-  checksum: 10c0/c68ace173bae85f7dcc20951bd7d35853e743a24934d963701118e2015a7ab37fecabcb84b5013b7cf9b83ad8439fe5ac5a1502a0493c1fbb1e41f5560ddf01e
+    react: ^19.2.0
+  checksum: 10c0/fec1cd50d19df964c9d080d93b75a063c6bbaa15ac75bc5d3da4d72f1c0a601ef867f639206c6d2503505bb7db2b0b66764b426fa24ea10bf9d15eea4d328f6a
  languageName: node
  linkType: hard

-"@mantine/notifications@npm:^7.17.8":
-  version: 7.17.8
-  resolution: "@mantine/notifications@npm:7.17.8"
+"@mantine/notifications@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "@mantine/notifications@npm:9.0.0"
  dependencies:
-    "@mantine/store": "npm:7.17.8"
+    "@mantine/store": "npm:9.0.0"
    react-transition-group: "npm:4.4.5"
  peerDependencies:
-    "@mantine/core": 7.17.8
-    "@mantine/hooks": 7.17.8
-    react: ^18.x || ^19.x
-    react-dom: ^18.x || ^19.x
-  checksum: 10c0/7c40d263528cdd91ee36225c76851618262dd362bdfde6e9080f6bf23b5faf192c1c832829beeac6b4b0256b686f445ed2ad22a76aaf059c01a5f9be32360cda
+    "@mantine/core": 9.0.0
+    "@mantine/hooks": 9.0.0
+    react: ^19.2.0
+    react-dom: ^19.2.0
+  checksum: 10c0/0de0cf0beb4143e466cbe2dc72955b99c8e010a3e66f6b5ec2c835c6ec9578a913e7dd7ec3fd4c2c5242fc4192221047099a5689bbba1d0cc95214edfb9c844d
  languageName: node
  linkType: hard

-"@mantine/spotlight@npm:^7.17.8":
-  version: 7.17.8
-  resolution: "@mantine/spotlight@npm:7.17.8"
+"@mantine/spotlight@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "@mantine/spotlight@npm:9.0.0"
  dependencies:
-    "@mantine/store": "npm:7.17.8"
+    "@mantine/store": "npm:9.0.0"
  peerDependencies:
-    "@mantine/core": 7.17.8
-    "@mantine/hooks": 7.17.8
-    react: ^18.x || ^19.x
-    react-dom: ^18.x || ^19.x
-  checksum: 10c0/a9f64258aea4cf579c80f5f33233810a0a94a2c869dda1c4dc903539de7f13cd3dbdb22b28a978fe134c223024e9295a32d3de788dee946aa872f841c67f7c9d
+    "@mantine/core": 9.0.0
+    "@mantine/hooks": 9.0.0
+    react: ^19.2.0
+    react-dom: ^19.2.0
+  checksum: 10c0/810e34423f2b0dc1ae5f0e6eaa12c93512d37d91126db1a22361ce7ea322478c8d885ab323ac8a7e39824ca7465956e9c5273dc1890a0dd5ab32efaaf22e9aff
  languageName: node
  linkType: hard

-"@mantine/store@npm:7.17.8":
-  version: 7.17.8
-  resolution: "@mantine/store@npm:7.17.8"
+"@mantine/store@npm:9.0.0":
+  version: 9.0.0
+  resolution: "@mantine/store@npm:9.0.0"
  peerDependencies:
-    react: ^18.x || ^19.x
-  checksum: 10c0/f5dd9cbeec06f5bf89c6ea32b416b5cdb6646274581153f2f03acbd0fdfa3949f53d5f64b0e76e37af538cb2d8e899be4887af2e2e69cbe442148bd6f6fd5bc1
+    react: ^19.2.0
+  checksum: 10c0/12d7d505055284bd8212404b4f9ff13cae53b7a9690d09ff58a9aebb7b0d0706dabbc0b907cc19d12615f74f1cd2635d9a1b1845b3f2c5e09835c48d95b4f46d
  languageName: node
  linkType: hard

@ -11922,6 +11912,13 @@ __metadata:
  languageName: node
  linkType: hard

+"attr-accept@npm:^2.2.4":
+  version: 2.2.5
+  resolution: "attr-accept@npm:2.2.5"
+  checksum: 10c0/9b4cb82213925cab2d568f71b3f1c7a7778f9192829aac39a281e5418cd00c04a88f873eb89f187e0bf786fa34f8d52936f178e62cbefb9254d57ecd88ada99b
+  languageName: node
+  linkType: hard
+
 "auto-bind@npm:^5.0.1":
  version: 5.0.1
  resolution: "auto-bind@npm:5.0.1"
@ -16370,19 +16367,6 @@ __metadata:
  languageName: node
  linkType: hard

-"fast-glob@npm:^3.2.11, fast-glob@npm:^3.3.1, fast-glob@npm:^3.3.2":
-  version: 3.3.2
-  resolution: "fast-glob@npm:3.3.2"
-  dependencies:
-    "@nodelib/fs.stat": "npm:^2.0.2"
-    "@nodelib/fs.walk": "npm:^1.2.3"
-    glob-parent: "npm:^5.1.2"
-    merge2: "npm:^1.3.0"
-    micromatch: "npm:^4.0.4"
-  checksum: 10c0/42baad7b9cd40b63e42039132bde27ca2cb3a4950d0a0f9abe4639ea1aa9d3e3b40f98b1fe31cbc0cc17b664c9ea7447d911a152fa34ec5b72977b125a6fc845
-  languageName: node
-  linkType: hard
-
 "fast-glob@npm:^3.2.9, fast-glob@npm:~3.2.12":
  version: 3.2.12
  resolution: "fast-glob@npm:3.2.12"
@ -16396,6 +16380,19 @@ __metadata:
  languageName: node
  linkType: hard

+"fast-glob@npm:^3.3.1, fast-glob@npm:^3.3.2":
+  version: 3.3.2
+  resolution: "fast-glob@npm:3.3.2"
+  dependencies:
+    "@nodelib/fs.stat": "npm:^2.0.2"
+    "@nodelib/fs.walk": "npm:^1.2.3"
+    glob-parent: "npm:^5.1.2"
+    merge2: "npm:^1.3.0"
+    micromatch: "npm:^4.0.4"
+  checksum: 10c0/42baad7b9cd40b63e42039132bde27ca2cb3a4950d0a0f9abe4639ea1aa9d3e3b40f98b1fe31cbc0cc17b664c9ea7447d911a152fa34ec5b72977b125a6fc845
+  languageName: node
+  linkType: hard
+
 "fast-glob@npm:^3.3.3":
  version: 3.3.3
  resolution: "fast-glob@npm:3.3.3"
@ -16566,6 +16563,15 @@ __metadata:
  languageName: node
  linkType: hard

+"file-selector@npm:^2.1.0":
+  version: 2.1.2
+  resolution: "file-selector@npm:2.1.2"
+  dependencies:
+    tslib: "npm:^2.7.0"
+  checksum: 10c0/fe827e0e95410aacfcc3eabc38c29cc36055257f03c1c06b631a2b5af9730c142ad2c52f5d64724d02231709617bda984701f52bd1f4b7aca50fb6585a27c1d2
+  languageName: node
+  linkType: hard
+
 "filesize@npm:^10.0.12":
  version: 10.1.2
  resolution: "filesize@npm:10.1.2"
@ -23582,14 +23588,14 @@ __metadata:
  languageName: node
  linkType: hard

-"postcss-js@npm:^4.0.0":
-  version: 4.0.1
-  resolution: "postcss-js@npm:4.0.1"
+"postcss-js@npm:^4.0.1":
+  version: 4.1.0
+  resolution: "postcss-js@npm:4.1.0"
  dependencies:
    camelcase-css: "npm:^2.0.1"
  peerDependencies:
    postcss: ^8.4.21
-  checksum: 10c0/af35d55cb873b0797d3b42529514f5318f447b134541844285c9ac31a17497297eb72296902967911bb737a75163441695737300ce2794e3bd8c70c13a3b106e
+  checksum: 10c0/a3cf6e725f3e9ecd7209732f8844a0063a1380b718ccbcf93832b6ec2cd7e63ff70dd2fed49eb2483c7482296860a0f7badd3115b5d0fa05ea648eb6d9dfc9c6
  languageName: node
  linkType: hard

@ -23643,17 +23649,17 @@ __metadata:
  languageName: node
  linkType: hard

-"postcss-mixins@npm:^9.0.4":
-  version: 9.0.4
-  resolution: "postcss-mixins@npm:9.0.4"
+"postcss-mixins@npm:^12.0.0":
+  version: 12.1.2
+  resolution: "postcss-mixins@npm:12.1.2"
  dependencies:
-    fast-glob: "npm:^3.2.11"
-    postcss-js: "npm:^4.0.0"
-    postcss-simple-vars: "npm:^7.0.0"
-    sugarss: "npm:^4.0.1"
+    postcss-js: "npm:^4.0.1"
+    postcss-simple-vars: "npm:^7.0.1"
+    sugarss: "npm:^5.0.0"
+    tinyglobby: "npm:^0.2.14"
  peerDependencies:
    postcss: ^8.2.14
-  checksum: 10c0/6bb90bd15bb4a06e8f50b36b38f24bba8350cdb9f1d9690e97a9610619da9fc22cdccfc81aa628bef60490cce35f76ceac7602062f5895b30d72123684016a93
+  checksum: 10c0/cbd33a40545ebcaa08acc9126a6cbffc48db968ea5a555c397b3c5b30e0f805fb2de3381556b36efe3dc9eb935d51c6056b86d6367fb6204f6c1ae492017524d
  languageName: node
  linkType: hard

@ -23701,26 +23707,26 @@ __metadata:
  languageName: node
  linkType: hard

-"postcss-nested@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "postcss-nested@npm:6.0.1"
+"postcss-nested@npm:^7.0.2":
+  version: 7.0.2
+  resolution: "postcss-nested@npm:7.0.2"
  dependencies:
-    postcss-selector-parser: "npm:^6.0.11"
+    postcss-selector-parser: "npm:^7.0.0"
  peerDependencies:
    postcss: ^8.2.14
-  checksum: 10c0/2a50aa36d5d103c2e471954830489f4c024deed94fa066169101db55171368d5f80b32446b584029e0471feee409293d0b6b1d8ede361f6675ba097e477b3cbd
+  checksum: 10c0/b467f328c89c5b0dcd1b569ae083f6163235c0cac09494a0b284eef5275fa1386bbc26c66c85adf194cef0a65d315994140724a34539a096e5acd39d9c753338
  languageName: node
  linkType: hard

-"postcss-preset-mantine@npm:^1.15.0":
-  version: 1.15.0
-  resolution: "postcss-preset-mantine@npm:1.15.0"
+"postcss-preset-mantine@npm:^1.18.0":
+  version: 1.18.0
+  resolution: "postcss-preset-mantine@npm:1.18.0"
  dependencies:
-    postcss-mixins: "npm:^9.0.4"
-    postcss-nested: "npm:^6.0.1"
+    postcss-mixins: "npm:^12.0.0"
+    postcss-nested: "npm:^7.0.2"
  peerDependencies:
    postcss: ">=8.0.0"
-  checksum: 10c0/89b24918aeef90dbfc430aef5c8683123d69c167020673b74b0955362ade3e40ade24ed5bed8a6aa9768754cedc16d0efac64659a1c8597e7799cb4b7bee4b45
+  checksum: 10c0/11308684261220a88f8607c10846777b7f83a8b44d6e787ed803a5ee4ceabbc447ffbaaccd34da8da650907d502c0703b8245cecf42b2714def1e8991dcec81d
  languageName: node
  linkType: hard

@ -23749,7 +23755,7 @@ __metadata:
  languageName: node
  linkType: hard

-"postcss-selector-parser@npm:^6.0.11, postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4":
+"postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4":
  version: 6.1.0
  resolution: "postcss-selector-parser@npm:6.1.0"
  dependencies:
@ -23759,7 +23765,7 @@ __metadata:
  languageName: node
  linkType: hard

-"postcss-selector-parser@npm:^7.1.0, postcss-selector-parser@npm:^7.1.1":
+"postcss-selector-parser@npm:^7.0.0, postcss-selector-parser@npm:^7.1.0, postcss-selector-parser@npm:^7.1.1":
  version: 7.1.1
  resolution: "postcss-selector-parser@npm:7.1.1"
  dependencies:
@ -23769,7 +23775,7 @@ __metadata:
  languageName: node
  linkType: hard

-"postcss-simple-vars@npm:^7.0.0":
+"postcss-simple-vars@npm:^7.0.0, postcss-simple-vars@npm:^7.0.1":
  version: 7.0.1
  resolution: "postcss-simple-vars@npm:7.0.1"
  peerDependencies:
@ -24452,14 +24458,16 @@ __metadata:
  languageName: node
  linkType: hard

-"react-dropzone-esm@npm:15.2.0":
-  version: 15.2.0
-  resolution: "react-dropzone-esm@npm:15.2.0"
+"react-dropzone@npm:15.0.0":
+  version: 15.0.0
+  resolution: "react-dropzone@npm:15.0.0"
  dependencies:
+    attr-accept: "npm:^2.2.4"
+    file-selector: "npm:^2.1.0"
    prop-types: "npm:^15.8.1"
  peerDependencies:
    react: ">= 16.8 || 18.0.0"
-  checksum: 10c0/a82dce547746f29214fa396e4060930250dd1b5f15c81e761035a05a09a1354493a90f79c1125c6341aee4b6226444bc7c7d29fc54ad266c149dfff170ef47a9
+  checksum: 10c0/fb7b48a709fdd26273707f7aca5c0e77fce2b9c9201122645d3ecfb07ecfbb89e2495273ea141994f0ed0838ee79f27832c0855b2c598b377b342c3965608b54
  languageName: node
  linkType: hard

@ -24490,19 +24498,6 @@ __metadata:
  languageName: node
  linkType: hard

-"react-hook-form-mantine@npm:^3.1.3":
-  version: 3.1.3
-  resolution: "react-hook-form-mantine@npm:3.1.3"
-  peerDependencies:
-    "@mantine/core": ^7.0.0
-    "@mantine/dates": ^7.0.0
-    react: ^18.2.0
-    react-dom: ^18.2.0
-    react-hook-form: ^7.43
-  checksum: 10c0/a440f94195a5380759b85e3e685c516aff46b305c15ac9b356b87b7582e393123c9acdd747a7cf3ed6cc179fea18dcd2583838db2781d631c9f8c6b084192302
-  languageName: node
-  linkType: hard
-
 "react-hook-form@npm:^7.43.8":
  version: 7.43.8
  resolution: "react-hook-form@npm:7.43.8"
@ -24578,13 +24573,13 @@ __metadata:
  languageName: node
  linkType: hard

-"react-number-format@npm:^5.4.3":
-  version: 5.4.4
-  resolution: "react-number-format@npm:5.4.4"
+"react-number-format@npm:^5.4.5":
+  version: 5.4.5
+  resolution: "react-number-format@npm:5.4.5"
  peerDependencies:
    react: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
    react-dom: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: 10c0/e55cd16d9f7379a717e77d519db06ed455cc2df9842cd23499b60bc2ba1179df580742e27867a4ae84e0d308b18c0773b7e8943f9162e853f97bd194d15b0de7
+  checksum: 10c0/bc5570a48542622f6c9068be616e87cc5280a67bb7f5a8ae13fe7a67e42f6ec12c244453b967b76737d775704ef792183bd8a47b23c225535342eccb7b1fcbb0
  languageName: node
  linkType: hard

@ -24622,7 +24617,7 @@ __metadata:
  languageName: node
  linkType: hard

-"react-remove-scroll@npm:^2.6.2":
+"react-remove-scroll@npm:^2.7.2":
  version: 2.7.2
  resolution: "react-remove-scroll@npm:2.7.2"
  dependencies:
@ -24683,19 +24678,6 @@ __metadata:
  languageName: node
  linkType: hard

-"react-textarea-autosize@npm:8.5.9":
-  version: 8.5.9
-  resolution: "react-textarea-autosize@npm:8.5.9"
-  dependencies:
-    "@babel/runtime": "npm:^7.20.13"
-    use-composed-ref: "npm:^1.3.0"
-    use-latest: "npm:^1.2.1"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: 10c0/3a924db59259a6e3b834dcddc12a8661b43dcdaa1b43c41c732e0548bb2761e9a53dbc6db4e0d9e237728b4869e42c25e5417408b0391aec290c90874733a09f
-  languageName: node
-  linkType: hard
-
 "react-transition-group@npm:4.4.5, react-transition-group@npm:^4.4.5":
  version: 4.4.5
  resolution: "react-transition-group@npm:4.4.5"
@ -27169,12 +27151,12 @@ __metadata:
  languageName: node
  linkType: hard

-"sugarss@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "sugarss@npm:4.0.1"
+"sugarss@npm:^5.0.0":
+  version: 5.0.1
+  resolution: "sugarss@npm:5.0.1"
  peerDependencies:
    postcss: ^8.3.3
-  checksum: 10c0/18b78c8839ab9eea9681366223277e10adf6b1dd54e7b64fbdae3a1234eedcc16a772bb62c8f3dc9665acc07496981e24bf773c8c362b5f294b9b1e12fbe58aa
+  checksum: 10c0/479d0b194bdb731000a323a0addcd1ffe29e4b7a93eb5cbe3efc34f01beb4ef0397d448f3b654ba5afa4a0e526d6758bcce4f41713806cb6a5a9383982eda6c8
  languageName: node
  linkType: hard

@ -27587,7 +27569,7 @@ __metadata:
  languageName: node
  linkType: hard

-"tinyglobby@npm:^0.2.11, tinyglobby@npm:^0.2.15":
+"tinyglobby@npm:^0.2.11, tinyglobby@npm:^0.2.14, tinyglobby@npm:^0.2.15":
  version: 0.2.15
  resolution: "tinyglobby@npm:0.2.15"
  dependencies:
@ -27980,7 +27962,7 @@ __metadata:
  languageName: node
  linkType: hard

-"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.2.0, tslib@npm:^2.6.0, tslib@npm:^2.8.0, tslib@npm:^2.8.1":
+"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.2.0, tslib@npm:^2.6.0, tslib@npm:^2.7.0, tslib@npm:^2.8.0, tslib@npm:^2.8.1":
  version: 2.8.1
  resolution: "tslib@npm:2.8.1"
  checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62
@ -28154,7 +28136,7 @@ __metadata:
  languageName: node
  linkType: hard

-"type-fest@npm:^4.18.2, type-fest@npm:^4.27.0, type-fest@npm:^4.41.0":
+"type-fest@npm:^4.18.2, type-fest@npm:^4.41.0":
  version: 4.41.0
  resolution: "type-fest@npm:4.41.0"
  checksum: 10c0/f5ca697797ed5e88d33ac8f1fec21921839871f808dc59345c9cf67345bfb958ce41bd821165dbf3ae591cedec2bf6fe8882098dfdd8dc54320b859711a2c1e4
@ -28168,7 +28150,7 @@ __metadata:
  languageName: node
  linkType: hard

-"type-fest@npm:^5.4.1":
+"type-fest@npm:^5.4.1, type-fest@npm:^5.5.0":
  version: 5.5.0
  resolution: "type-fest@npm:5.5.0"
  dependencies:
@ -28671,41 +28653,6 @@ __metadata:
  languageName: node
  linkType: hard

-"use-composed-ref@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "use-composed-ref@npm:1.3.0"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/e64ce52f4b18c020407636784192726807404a2552609acf7497b66a2b7070674fb5d2b950d426c4aa85f353e2bbecb02ebf9c5b865cd06797938c70bcbf5d26
-  languageName: node
-  linkType: hard
-
-"use-isomorphic-layout-effect@npm:^1.1.1":
-  version: 1.1.2
-  resolution: "use-isomorphic-layout-effect@npm:1.1.2"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 10c0/d8deea8b85e55ac6daba237a889630bfdbf0ebf60e9e22b6a78a78c26fabe6025e04ada7abef1e444e6786227d921e648b2707db8b3564daf757264a148a6e23
-  languageName: node
-  linkType: hard
-
-"use-latest@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "use-latest@npm:1.2.1"
-  dependencies:
-    use-isomorphic-layout-effect: "npm:^1.1.1"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 10c0/1958886fc35262d973f5cd4ce16acd6ce3a66707a72761c93abd1b5ae64e1a11efa83f68e6c8c9bf1647628037980ce59df64cba50adb36bd4071851e70527d2
-  languageName: node
-  linkType: hard
-
 "use-query-params@npm:^2.1.2":
  version: 2.2.0
  resolution: "use-query-params@npm:2.2.0"