Updated components build.

src/components/common/DataGrid.tsx

@@ -59,7 +59,6 @@ export function DataGrid({
             delay={searchDelay || DEFAULT_SEARCH_DELAY}
             autoFocus={autoFocus}
             placeholder={formatMessage(labels.search)}
-            style={{ width: '280px' }}
           />
           {renderActions?.()}
         </Row>

src/components/common/ErrorBoundary.module.css

@@ -1,19 +0,0 @@
-.error {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  z-index: var(--z-index-overlay);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 600px;
-  gap: 20px;
-}
-
-.error button {
-  align-self: center;
-}

src/components/common/ErrorBoundary.tsx

@@ -1,8 +1,7 @@
 import { ErrorInfo, ReactNode } from 'react';
 import { ErrorBoundary as Boundary } from 'react-error-boundary';
-import { Button } from '@umami/react-zen';
+import { Button, Column } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
-import styles from './ErrorBoundary.module.css';
 
 const logError = (error: Error, info: ErrorInfo) => {
   // eslint-disable-next-line no-console
@@ -14,12 +13,20 @@ export function ErrorBoundary({ children }: { children: ReactNode }) {
 
   const fallbackRender = ({ error, resetErrorBoundary }) => {
     return (
-      <div className={styles.error} role="alert">
+      <Column
+        role="alert"
+        gap
+        width="100%"
+        height="100%"
+        position="absolute"
+        justifyContent="center"
+        alignItems="center"
+      >
         <h1>{formatMessage(messages.error)}</h1>
         <h3>{error.message}</h3>
         <pre>{error.stack}</pre>
         <Button onClick={resetErrorBoundary}>OK</Button>
-      </div>
+      </Column>
     );
   };
 

src/components/common/SideMenu.tsx

@@ -45,7 +45,7 @@ export function SideMenu({
           <Heading size="1">{title}</Heading>
         </Row>
       )}
-      <NavMenu muteItems={false} gap="6" {...props}>
+      <NavMenu gap="6" {...props}>
         {items?.map(({ label, items }, index) => {
           return (
             <NavMenuGroup

src/components/common/TypeConfirmationForm.tsx

@@ -35,7 +35,7 @@ export function TypeConfirmationForm({
     <Form onSubmit={onConfirm} error={error}>
       <p>
         {formatMessage(messages.actionConfirmation, {
-          confirmation: <b key={messages.actionConfirmation.id}>{confirmationValue}</b>,
+          confirmation: confirmationValue,
         })}
       </p>
       <FormField

src/components/hooks/queries/useDeleteQuery.ts

@@ -1,4 +1,5 @@
-import { useApi, useModified } from '@/components/hooks';
+import { useApi } from '../useApi';
+import { useModified } from '../useModified';
 
 export function useDeleteQuery(path: string, params?: Record<string, any>) {
   const { del, useMutation } = useApi();

src/components/hooks/queries/useTeamQuery.ts

@@ -1,5 +1,5 @@
 import { useApi } from '../useApi';
-import { useModified } from '@/components/hooks';
+import { useModified } from '../useModified';
 import { keepPreviousData } from '@tanstack/react-query';
 import { ReactQueryOptions } from '@/lib/types';
 

src/components/hooks/queries/useUserQuery.ts

@@ -1,5 +1,5 @@
 import { useApi } from '../useApi';
-import { useModified } from '@/components/hooks';
+import { useModified } from '../useModified';
 import { keepPreviousData } from '@tanstack/react-query';
 import { ReactQueryOptions } from '@/lib/types';
 

src/components/hooks/queries/useWebsiteCohortQuery.ts

@@ -1,5 +1,5 @@
 import { useApi } from '../useApi';
-import { useModified } from '@/components/hooks';
+import { useModified } from '../useModified';
 import { keepPreviousData } from '@tanstack/react-query';
 import { ReactQueryOptions } from '@/lib/types';
 

src/components/hooks/queries/useWebsiteCohortsQuery.ts

@@ -1,5 +1,5 @@
 import { useApi } from '../useApi';
-import { useModified } from '@/components/hooks';
+import { useModified } from '../useModified';
 import { keepPreviousData } from '@tanstack/react-query';
 import { ReactQueryOptions } from '@/lib/types';
 import { useFilterParameters } from '@/components/hooks/useFilterParameters';

src/components/hooks/queries/useWebsiteQuery.ts

@@ -1,5 +1,5 @@
 import { useApi } from '../useApi';
-import { useModified } from '@/components/hooks';
+import { useModified } from '../useModified';
 import { keepPreviousData } from '@tanstack/react-query';
 import { ReactQueryOptions } from '@/lib/types';
 

src/components/hooks/queries/useWebsiteSegmentQuery.ts

@@ -1,5 +1,5 @@
 import { useApi } from '../useApi';
-import { useModified } from '@/components/hooks';
+import { useModified } from '../useModified';
 import { keepPreviousData } from '@tanstack/react-query';
 import { ReactQueryOptions } from '@/lib/types';
 

src/components/hooks/queries/useWebsiteSegmentsQuery.ts

@@ -1,5 +1,5 @@
 import { useApi } from '../useApi';
-import { useModified } from '@/components/hooks';
+import { useModified } from '../useModified';
 import { keepPreviousData } from '@tanstack/react-query';
 import { ReactQueryOptions } from '@/lib/types';
 import { useFilterParameters } from '@/components/hooks/useFilterParameters';

src/components/hooks/useApi.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import * as reactQuery from '@tanstack/react-query';
+import { useQuery, useMutation } from '@tanstack/react-query';
 import { getClientAuthToken } from '@/lib/client';
 import { SHARE_TOKEN_HEADER } from '@/lib/constants';
 import { httpGet, httpPost, httpPut, httpDelete, FetchResponse } from '@/lib/fetch';
@@ -72,6 +72,7 @@ export function useApi() {
       },
       [httpDelete],
     ),
-    ...reactQuery,
+    useQuery,
+    useMutation,
   };
 }

src/components/input/FilterEditForm.tsx

@@ -19,6 +19,9 @@ export function FilterEditForm({ websiteId, onChange, onClose }: FilterEditFormP
   const [currentFilters, setCurrentFilters] = useState(filters);
   const [currentSegment, setCurrentSegment] = useState(segment);
   const [currentCohort, setCurrentCohort] = useState(cohort);
+  const panelProps = {
+    style: { height: 500 },
+  };
 
   const handleReset = () => {
     setCurrentFilters([]);
@@ -48,17 +51,17 @@ export function FilterEditForm({ websiteId, onChange, onClose }: FilterEditFormP
           <Tab id="segments">{formatMessage(labels.segments)}</Tab>
           <Tab id="cohorts">{formatMessage(labels.cohorts)}</Tab>
         </TabList>
-        <TabPanel id="fields">
+        <TabPanel id="fields" {...panelProps}>
           <FieldFilters websiteId={websiteId} value={currentFilters} onChange={setCurrentFilters} />
         </TabPanel>
-        <TabPanel id="segments" style={{ height: 400 }}>
+        <TabPanel id="segments" {...panelProps}>
           <SegmentFilters
             websiteId={websiteId}
             segmentId={currentSegment}
             onChange={handleSegmentChange}
           />
         </TabPanel>
-        <TabPanel id="cohorts" style={{ height: 400 }}>
+        <TabPanel id="cohorts" {...panelProps}>
           <SegmentFilters
             type="cohort"
             websiteId={websiteId}