HiEventsDev · daveearley · May 29, 2026 · May 29, 2026
diff --git a/frontend/package.json b/frontend/package.json
@@ -23,38 +23,34 @@
     "@dnd-kit/utilities": "^3.2.1",
     "@lingui/macro": "^4.7.0",
     "@lingui/react": "^4.7.0",
-    "@mantine/carousel": "^8.0.1",
-    "@mantine/charts": "^8.0.1",
-    "@mantine/colors-generator": "^8.1.0",
-    "@mantine/core": "^8.0.1",
-    "@mantine/dates": "^8.0.1",
-    "@mantine/dropzone": "^8.0.1",
-    "@mantine/form": "^8.0.1",
-    "@mantine/hooks": "^8.0.1",
-    "@mantine/modals": "^8.0.1",
-    "@mantine/notifications": "^8.0.1",
-    "@mantine/nprogress": "^8.0.1",
-    "@mantine/tiptap": "^8.0.1",
-    "@react-pdf/renderer": "^3.3.4",
+    "@mantine/carousel": "^9.2.2",
+    "@mantine/charts": "^9.2.2",
+    "@mantine/colors-generator": "^9.2.2",
+    "@mantine/core": "^9.2.2",
+    "@mantine/dates": "^9.2.2",
+    "@mantine/dropzone": "^9.2.2",
+    "@mantine/form": "^9.2.2",
+    "@mantine/hooks": "^9.2.2",
+    "@mantine/modals": "^9.2.2",
+    "@mantine/notifications": "^9.2.2",
+    "@mantine/nprogress": "^9.2.2",
+    "@mantine/tiptap": "^9.2.2",
+    "@react-pdf/renderer": "^4.5.1",
     "@react-router/node": "^7.1.5",
     "@remix-run/node": "^2.16.8",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.1",
     "@tabler/icons-react": "^3.35.0",
     "@tanstack/react-query": "5.76.1",
     "@tanstack/react-table": "^8.21.3",
-    "@tiptap/core": "^2.7.0",
-    "@tiptap/extension-color": "^2.11.7",
-    "@tiptap/extension-image": "^2.11.5",
-    "@tiptap/extension-link": "^2.12.0",
-    "@tiptap/extension-task-item": "^2.12.0",
-    "@tiptap/extension-task-list": "^2.12.0",
-    "@tiptap/extension-text-align": "^2.12.0",
-    "@tiptap/extension-text-style": "^2.12.0",
-    "@tiptap/extension-underline": "^2.12.0",
-    "@tiptap/pm": "^2.7.0",
-    "@tiptap/react": "^2.12.0",
-    "@tiptap/starter-kit": "^2.12.0",
+    "@tiptap/core": "^3.3.0",
+    "@tiptap/extension-image": "^3.3.0",
+    "@tiptap/extension-link": "^3.3.0",
+    "@tiptap/extension-text-align": "^3.3.0",
+    "@tiptap/extension-text-style": "^3.3.0",
+    "@tiptap/pm": "^3.3.0",
+    "@tiptap/react": "^3.3.0",
+    "@tiptap/starter-kit": "^3.3.0",
     "axios": "^1.4.0",
     "chroma-js": "^3.1.2",
     "classnames": "^2.3.2",
@@ -67,13 +63,13 @@
     "express": "^4.19.2",
     "qr-scanner": "^1.4.2",
     "query-string": "^8.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-helmet-async": "^2.0.4",
     "react-qr-code": "^2.0.12",
     "react-router": "^7.1.5",
     "react-router-dom": "^7.1.5",
-    "recharts": "2",
+    "recharts": "^3",
     "sirv": "^2.0.4"
   },
   "devDependencies": {
@@ -82,8 +78,8 @@
     "@types/express": "^4.17.21",
     "@types/lodash": "^4.17.0",
     "@types/node": "^20.12.2",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
     "@vitejs/plugin-react": "^4.4.1",
@@ -101,5 +97,8 @@
     "vite": "^5.4.19",
     "vite-bundle-visualizer": "^1.2.1",
     "vite-plugin-copy": "^0.1.6"
+  },
+  "resolutions": {
+    "prosemirror-model": "^1.25.7"
   }
 }
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,5 +1,5 @@
 import React, {FC, PropsWithChildren, useCallback, useEffect} from "react";
-import {MantineProvider} from "@mantine/core";
+import {MantineProvider, v8CssVariablesResolver} from "@mantine/core";
 import {Notifications} from "@mantine/notifications";
 import {i18n} from "@lingui/core";
 import {I18nProvider} from "@lingui/react";
@@ -71,6 +71,7 @@ export const App: FC<
                 }}
             />
             <MantineProvider
+                cssVariablesResolver={v8CssVariablesResolver}
                 theme={{
                     colors: {
                         primary: generateColors(getConfig("VITE_APP_PRIMARY_COLOR", "#40296C") as string),
@@ -79,6 +80,7 @@ export const App: FC<
                     primaryColor: "primary",
                     fontFamily: "Outfit, sans-serif",
                     primaryShade: 8,
+                    defaultRadius: "sm",
                 }}
             >
                 <HelmetProvider context={props.helmetContext}>
@@ -97,7 +99,7 @@ export const App: FC<
                                     </Helmet>
                                     {props.children}
                                 </ModalsProvider>
-                                <Notifications/>
+                                <Notifications pauseResetOnHover="notification"/>
                                 {showGlobalConsentBanner && (
                                     <CookieConsentBanner onConsent={handleGlobalConsent}/>
                                 )}

diff --git a/frontend/src/components/common/Accordion/index.tsx b/frontend/src/components/common/Accordion/index.tsx
@@ -1,11 +1,11 @@
 import {Accordion as MantineAccordion, Group, Text} from '@mantine/core';
-import {TablerIconsProps} from '@tabler/icons-react';
+import {Icon} from '@tabler/icons-react';
 import classes from './Accordion.module.scss';
 import React from "react";
 
 export interface AccordionItem {
     value: string;
-    icon?: (props: TablerIconsProps) => JSX.Element;
+    icon?: Icon;
     title: string;
     count?: number;
     hidden?: boolean;

diff --git a/frontend/src/components/common/AttendeeList/index.tsx b/frontend/src/components/common/AttendeeList/index.tsx
@@ -119,7 +119,7 @@ export const AttendeeList = ({order, products, refetchOrder, questionAnswers = [
                             </div>
 
                             {/* Collapsible answers section */}
-                            <Collapse in={isExpanded(attendee.id)}>
+                            <Collapse expanded={isExpanded(attendee.id)}>
                                 <div className={classes.answersContainer}>
                                     <QuestionList
                                         compact

diff --git a/frontend/src/components/common/Editor/Controls/InsertImageControl/index.tsx b/frontend/src/components/common/Editor/Controls/InsertImageControl/index.tsx
@@ -98,7 +98,7 @@ export const InsertImageControl = () => {
                     }}
                     title={t`Insert Image`}
                 >
-                    <Tabs value={tab} onChange={setTab} variant="outline">
+                    <Tabs value={tab} onChange={(value) => setTab(value ?? 'url')} variant="outline">
                         <Tabs.List grow>
                             <Tabs.Tab value="url">{t`Paste URL`}</Tabs.Tab>
                             <Tabs.Tab value="upload">{t`Upload Image`}</Tabs.Tab>

diff --git a/frontend/src/components/common/Editor/Extensions/ImageResizeExtension/index.tsx b/frontend/src/components/common/Editor/Extensions/ImageResizeExtension/index.tsx
@@ -1,5 +1,5 @@
-import Image from '@tiptap/extension-image';
-import { NodeViewProps } from '@tiptap/react';
+import {Image} from '@tiptap/extension-image';
+import {NodeViewRendererProps} from '@tiptap/core';
 
 /**
  * Adapted from https://github.com/bae-sh/tiptap-extension-resize-image/blob/main/lib/imageResize.ts
@@ -22,7 +22,7 @@ export const ImageResize = Image.extend({
     },
 
     addNodeView() {
-        return ({ node, editor, getPos }: NodeViewProps) => {
+        return ({ node, editor, getPos }: NodeViewRendererProps) => {
             const {
                 view,
                 options: { editable },
@@ -89,11 +89,13 @@ export const ImageResize = Image.extend({
 
             const dispatchNodeView = () => {
                 if (typeof getPos === 'function') {
+                    const pos = getPos();
+                    if (pos === undefined) return;
                     const newAttrs = {
                         ...node.attrs,
                         style: `${$img.style.cssText}`,
                     };
-                    view.dispatch(view.state.tr.setNodeMarkup(getPos(), null, newAttrs));
+                    view.dispatch(view.state.tr.setNodeMarkup(pos, null, newAttrs));
                 }
             };
 

diff --git a/frontend/src/components/common/Editor/Extensions/LiquidTokenExtension/TokenComponent.tsx b/frontend/src/components/common/Editor/Extensions/LiquidTokenExtension/TokenComponent.tsx
@@ -1,19 +1,9 @@
-import {NodeViewWrapper} from '@tiptap/react';
+import {NodeViewWrapper, ReactNodeViewProps} from '@tiptap/react';
 import {Badge, Tooltip} from '@mantine/core';
 import {IconCode} from '@tabler/icons-react';
 
-interface TokenComponentProps {
-    node: {
-        attrs: {
-            tokenName: string;
-            tokenDescription: string;
-        };
-    };
-    selected: boolean;
-}
-
-export const TokenComponent = ({node, selected}: TokenComponentProps) => {
-    const {tokenName, tokenDescription} = node.attrs;
+export const TokenComponent = ({node, selected}: ReactNodeViewProps) => {
+    const {tokenName, tokenDescription} = node.attrs as { tokenName: string; tokenDescription: string };
 
     const tokenBadge = (
         <Badge

diff --git a/frontend/src/components/common/Editor/Extensions/LiquidVariableExtension.tsx b/frontend/src/components/common/Editor/Extensions/LiquidVariableExtension.tsx
@@ -1,5 +1,13 @@
 import { Node } from '@tiptap/core';
 
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        liquidVariable: {
+            insertLiquidVariable: (variable: string) => ReturnType;
+        };
+    }
+}
+
 export const LiquidVariable = Node.create({
     name: 'liquidVariable',
 

diff --git a/frontend/src/components/common/Editor/index.tsx b/frontend/src/components/common/Editor/index.tsx
@@ -1,11 +1,9 @@
 import {Link, RichTextEditor} from "@mantine/tiptap";
 import {useEditor} from "@tiptap/react";
 import StarterKit from '@tiptap/starter-kit';
-import Underline from '@tiptap/extension-underline';
-import TextAlign from '@tiptap/extension-text-align';
-import Image from '@tiptap/extension-image';
-import TextStyle from '@tiptap/extension-text-style';
-import Color from '@tiptap/extension-color';
+import {TextAlign} from '@tiptap/extension-text-align';
+import {Image} from '@tiptap/extension-image';
+import {Color, TextStyle} from '@tiptap/extension-text-style';
 import React, {useEffect, useState} from "react";
 import {InputDescription, InputError, InputLabel, MantineFontSize} from "@mantine/core";
 import classes from "./Editor.module.scss";
@@ -49,6 +47,7 @@ export const Editor = ({
     const editor = useEditor({
         extensions: [
             StarterKit.configure({
+                link: false,
                 paragraph: {
                     HTMLAttributes: {
                         style: 'margin: 0.5em 0;'
@@ -60,7 +59,6 @@ export const Editor = ({
                     }
                 }
             }),
-            Underline,
             Link,
             TextAlign.configure({types: ['heading', 'paragraph']}),
             Image,
@@ -86,7 +84,7 @@ export const Editor = ({
     useEffect(() => {
         if (value && editor) {
             if (value !== editor.getHTML()) {
-                editor.commands.setContent(value, false, {preserveWhitespace: "full"});
+                editor.commands.setContent(value, {emitUpdate: false, parseOptions: {preserveWhitespace: "full"}});
             }
             const htmlLength = value.length;
 

diff --git a/frontend/src/components/common/EmailTemplateEditor/EmailTemplateEditor.module.scss b/frontend/src/components/common/EmailTemplateEditor/EmailTemplateEditor.module.scss
@@ -14,7 +14,7 @@
     .previewContent {
       padding: 1.5rem;
 
-      :global(.mantine-TypographyStylesProvider-root) {
+      :global(.mantine-Typography-root) {
         line-height: 1.6;
 
         h1, h2, h3, h4, h5, h6 {

diff --git a/frontend/src/components/common/EmailTemplateEditor/EmailTemplatePreviewPane.tsx b/frontend/src/components/common/EmailTemplateEditor/EmailTemplatePreviewPane.tsx
@@ -1,4 +1,4 @@
-import {Alert, Divider, LoadingOverlay, Stack, Text, TypographyStylesProvider} from '@mantine/core';
+import {Alert, Divider, LoadingOverlay, Stack, Text, Typography} from '@mantine/core';
 import {IconAlertCircle, IconEye} from '@tabler/icons-react';
 import {Trans} from '@lingui/macro';
 import classes from './EmailTemplateEditor.module.scss';
@@ -42,13 +42,13 @@ export const EmailTemplatePreviewPane = ({
                     )}
 
                     {!error && hasContent && (
-                        <TypographyStylesProvider>
+                        <Typography>
                             <div
                                 dangerouslySetInnerHTML={{
                                     __html: previewData.body
                                 }}
                             />
-                        </TypographyStylesProvider>
+                        </Typography>
                     )}
 
                     {!error && !hasContent && !isLoading && (

diff --git a/frontend/src/components/common/InlineOrderSummary/index.tsx b/frontend/src/components/common/InlineOrderSummary/index.tsx
@@ -72,7 +72,7 @@ export const InlineOrderSummary = ({
                 </div>
             </div>
 
-            <Collapse in={expanded}>
+            <Collapse expanded={expanded}>
                 <div className={classes.content}>
                     <div className={classes.eventInfo}>
                         <div className={classes.eventImage}>

diff --git a/frontend/src/components/common/QuestionsTable/index.tsx b/frontend/src/components/common/QuestionsTable/index.tsx
@@ -287,7 +287,7 @@ const LivePreview = ({
                 {isOpen ? <IconChevronUp size={16}/> : <IconChevronDown size={16}/>}
             </UnstyledButton>
 
-            <Collapse in={isOpen}>
+            <Collapse expanded={isOpen}>
                 <div className={classes.previewContent}>
                     <div className={classes.previewPane}>
                         <Text size="xs" fw={600} c="dimmed" tt="uppercase" mb={6}>

diff --git a/frontend/src/components/forms/CheckInListForm/index.tsx b/frontend/src/components/forms/CheckInListForm/index.tsx
@@ -154,7 +154,7 @@ export const CheckInListForm = ({
                 {showAdvanced ? t`Hide advanced options` : t`Show advanced options`}
             </button>
 
-            <Collapse in={showAdvanced}>
+            <Collapse expanded={showAdvanced}>
                 <Textarea
                     {...form.getInputProps('description')}
                     label={t`Description for check-in staff`}

diff --git a/frontend/src/components/forms/ProductForm/index.tsx b/frontend/src/components/forms/ProductForm/index.tsx
@@ -418,7 +418,7 @@ export const ProductForm = ({form, product}: ProductFormProps) => {
                 )}
             </div>
 
-            <Collapse in={opened}>
+            <Collapse expanded={opened}>
                 <div className={classes.additionalOptionsContent}>
                     <Fieldset legend={
                         <span className={classes.fieldsetLegend}>

diff --git a/frontend/src/components/layouts/AppLayout/types.ts b/frontend/src/components/layouts/AppLayout/types.ts
@@ -1,10 +1,10 @@
-import React, { ReactNode } from 'react';
-import { TablerIconsProps } from '@tabler/icons-react';
+import { ReactNode } from 'react';
+import { Icon } from '@tabler/icons-react';
 
 export interface NavItem {
     link?: string;
     label: string;
-    icon?: React.ComponentType<TablerIconsProps>;
+    icon?: Icon;
     comingSoon?: boolean;
     isActive?: (isActive: boolean) => boolean;
     badge?: string | number | null | undefined;

diff --git a/frontend/src/components/layouts/AuthLayout/index.tsx b/frontend/src/components/layouts/AuthLayout/index.tsx
@@ -159,7 +159,7 @@ const FeaturePanel = () => {
 const AuthLayout = () => {
     const me = useGetMe();
     const clickCountRef = useRef(0);
-    const clickTimerRef = useRef<ReturnType<typeof setTimeout>>();
+    const clickTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
     const handleLogoClick = useCallback(() => {
         clickCountRef.current += 1;

diff --git a/frontend/src/components/layouts/CheckIn/BottomNav.tsx b/frontend/src/components/layouts/CheckIn/BottomNav.tsx
@@ -1,3 +1,4 @@
+import {ReactNode} from "react";
 import {t} from "@lingui/macro";
 import {IconChartBar, IconQrcode, IconSearch} from "@tabler/icons-react";
 import classes from "./BottomNav.module.scss";
@@ -10,7 +11,7 @@ interface BottomNavProps {
 }
 
 export const BottomNav = ({active, onChange}: BottomNavProps) => {
-    const tabs: { id: CheckInTab; label: string; icon: JSX.Element }[] = [
+    const tabs: { id: CheckInTab; label: string; icon: ReactNode }[] = [
         {id: "scan", label: t`Scan`, icon: <IconQrcode size={22} stroke={1.7}/>},
         {id: "search", label: t`Search`, icon: <IconSearch size={20} stroke={1.8}/>},
         {id: "stats", label: t`Stats`, icon: <IconChartBar size={20} stroke={1.8}/>},