From cc627fe1f39cecab46f6cc1907dc25c34359c002 Mon Sep 17 00:00:00 2001
From: Jamal Soueidan <jamal@soueidan.com>
Date: Tue, 2 Jul 2024 12:28:50 +0200
Subject: [PATCH] update mantine and fix some other issues

---
 app/components/LeafletMap.client.tsx |  88 +++++++++---------
 app/routes/$.tsx                     | 130 ++++++++++++++++++++-------
 app/routes/book.$handle.tsx          |  40 +++++++--
 app/routes/users._index.tsx          |   2 +-
 package-lock.json                    |  74 +++++++--------
 package.json                         |  12 +--
 6 files changed, 217 insertions(+), 129 deletions(-)

diff --git a/app/components/LeafletMap.client.tsx b/app/components/LeafletMap.client.tsx
index a4cdbea1..d445ae15 100644
--- a/app/components/LeafletMap.client.tsx
+++ b/app/components/LeafletMap.client.tsx
@@ -1,10 +1,15 @@
-import {Avatar, MantineProvider} from '@mantine/core';
+import {Avatar, Box, MantineProvider} from '@mantine/core';
 import L, {divIcon, point} from 'leaflet';
 import {useEffect} from 'react';
 import {renderToStaticMarkup} from 'react-dom/server';
-import {MapContainer, Marker, Popup, TileLayer, useMap} from 'react-leaflet';
-import {type TreatmentsForCollectionFragment} from 'storefrontapi.generated';
-import {type CustomerLocationAllOfGeoLocation} from '~/lib/api/model';
+import {
+  Circle,
+  MapContainer,
+  Marker,
+  Popup,
+  TileLayer,
+  useMap,
+} from 'react-leaflet';
 
 export type Coordinates = {
   lat: number;
@@ -29,50 +34,28 @@ const AutoCenterMap = ({markers}: {markers: Coordinates[]}) => {
   useEffect(() => {
     if (markers.length > 0) {
       const bounds = L.latLngBounds(markers);
-      map.fitBounds(bounds, {padding: [100, 100]});
+      map.fitBounds(bounds, {padding: [1000, 1000]});
+      map.zoomOut(12);
     }
   }, [markers, map]);
 
   return null;
 };
 
-export function LeafletMap({
-  products,
-}: {
-  products: TreatmentsForCollectionFragment[];
-}) {
-  const geoLocations = products.reduce((geos, product) => {
-    const newGeos = product.locations?.references?.nodes.reduce((geos, l) => {
-      if (l.geoLocation?.value) {
-        const value = JSON.parse(
-          l.geoLocation.value,
-        ) as CustomerLocationAllOfGeoLocation;
-        geos.push({
-          lat: value.coordinates[1],
-          lng: value.coordinates[0],
-          image: product.user?.reference?.image?.reference?.image?.url || '',
-        });
-      }
-      return geos;
-    }, [] as Coordinates[]);
-    if (newGeos) {
-      geos.push(...newGeos);
-    }
-    return geos;
-  }, [] as Coordinates[]);
+export type LeafletMapMarker = {
+  id: string;
+  lng: number;
+  lat: number;
+  image: string;
+  radius: number | null;
+};
 
+export function LeafletMap({markers}: {markers: Array<LeafletMapMarker>}) {
   return (
-    <div
-      style={{
-        height: '100vh',
-        border: '1px solid #dee2e6',
-        borderRadius: '10px',
-      }}
-    >
+    <Box h="250px">
       <MapContainer
         style={{
           height: '100%',
-          borderRadius: '10px',
         }}
         zoom={6}
       >
@@ -80,21 +63,30 @@ export function LeafletMap({
           attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
-        {geoLocations.map((geo) => {
-          return (
+        {markers.map((geo) =>
+          geo.radius ? (
+            <Circle
+              key={geo.lat}
+              color="red"
+              fillColor="#f04"
+              fillOpacity={0.5}
+              radius={geo.radius}
+              center={[geo.lat, geo.lng]}
+            >
+              <Popup>Kører ud til de her områder.</Popup>
+            </Circle>
+          ) : (
             <Marker
-              key={geo.lat + geo.lng}
-              position={geo}
+              key={geo.lng}
+              position={[geo.lat, geo.lng]}
               icon={createClusterCustomIcon(geo.image)}
             >
-              <Popup>
-                A pretty CSS3 popup. <br /> Easily customizable.
-              </Popup>
+              <Popup>Salon/Hjem position.</Popup>
             </Marker>
-          );
-        })}
-        <AutoCenterMap markers={geoLocations} />
+          ),
+        )}
+        <AutoCenterMap markers={markers} />
       </MapContainer>
-    </div>
+    </Box>
   );
 }
diff --git a/app/routes/$.tsx b/app/routes/$.tsx
index 27c2fe30..5d3e2ee1 100644
--- a/app/routes/$.tsx
+++ b/app/routes/$.tsx
@@ -9,6 +9,7 @@ import {
   Flex,
   Grid,
   Group,
+  Loader,
   rem,
   Skeleton,
   Spoiler,
@@ -18,13 +19,14 @@ import {
   UnstyledButton,
 } from '@mantine/core';
 import '@mantine/tiptap/styles.css';
-import {Await, Link, Outlet, useLoaderData} from '@remix-run/react';
+import {Await, Link, useLoaderData} from '@remix-run/react';
 import {
   defer,
+  type LinksFunction,
   type LoaderFunctionArgs,
   type MetaFunction,
 } from '@shopify/remix-oxygen';
-import {Suspense, useEffect, useMemo, useState} from 'react';
+import React, {Suspense, useEffect, useMemo, useState} from 'react';
 
 import {parseGid} from '@shopify/hydrogen';
 import {da} from 'date-fns/locale';
@@ -43,16 +45,38 @@ import type {
 } from 'storefrontapi.generated';
 import {LocationIcon} from '~/components/LocationIcon';
 
-import {type CustomerScheduleSlot} from '~/lib/api/model';
+import {
+  type CustomerLocationAllOfGeoLocation,
+  type CustomerScheduleSlot,
+} from '~/lib/api/model';
 import {convertLocations} from '~/lib/convertLocations';
 import {useDuration} from '~/lib/duration';
 
 import {AE, DK, US} from 'country-flag-icons/react/3x2';
+import leafletStyles from 'leaflet/dist/leaflet.css?url';
 import {useTranslation} from 'react-i18next';
+import {ClientOnly} from 'remix-utils/client-only';
+import {
+  LeafletMap,
+  type LeafletMapMarker,
+} from '~/components/LeafletMap.client';
 import {USER_METAOBJECT_QUERY} from '~/graphql/fragments/UserMetaobject';
 import {GET_USER_PRODUCTS} from '~/graphql/queries/GetUserProducts';
 import {UserProvider, useUser} from '~/hooks/use-user';
 
+import localLeafletStyles from '~/styles/leaflet.css?url';
+
+export const links: LinksFunction = () => [
+  {
+    rel: 'stylesheet',
+    href: leafletStyles,
+  },
+  {
+    rel: 'stylesheet',
+    href: localLeafletStyles,
+  },
+];
+
 export const handle: Handle = {
   i18n: ['global', 'profile', 'professions', 'skills'],
 };
@@ -338,6 +362,7 @@ function UserTreatments() {
       <Title order={2} fw="600" mb="md">
         {t('treatments_title')}
       </Title>
+
       <Suspense fallback={<Skeleton height={8} radius="xl" />}>
         <Await resolve={data.collection}>
           {({collection}) => {
@@ -349,22 +374,28 @@ function UserTreatments() {
                 collections[product.productType].push(product);
                 return collections;
               }, {} as Record<string, TreatmentProductFragment[]>) || {};
+
             return (
               <Grid gutter="xl">
                 <Grid.Col span={{base: 12, md: 8}}>
                   <Stack gap="xl">
-                    {Object.keys(collections).map((key) => (
-                      <Stack key={key} gap="sm">
-                        <Title order={4} fw="600">
-                          {key}
-                        </Title>
-                        <Stack gap="md">
-                          {collections[key].map((product) => (
-                            <ArtistProduct key={product.id} product={product} />
-                          ))}
+                    {Object.keys(collections)
+                      .sort()
+                      .map((key) => (
+                        <Stack key={key} gap="sm">
+                          <Title order={4} fw="600">
+                            {key}
+                          </Title>
+                          <Stack gap="md">
+                            {collections[key].map((product) => (
+                              <ArtistProduct
+                                key={product.id}
+                                product={product}
+                              />
+                            ))}
+                          </Stack>
                         </Stack>
-                      </Stack>
-                    ))}
+                      ))}
                   </Stack>
                 </Grid.Col>
                 <Grid.Col span={{base: 12, md: 4}}>
@@ -393,7 +424,6 @@ function UserTreatments() {
             );
           }}
         </Await>
-        <Outlet />
       </Suspense>
     </>
   );
@@ -417,8 +447,32 @@ async function wordToColor(word: string) {
 
 function Schedule({schedule}: {schedule: ScheduleFragment}) {
   const {t} = useTranslation(['profile', 'global']);
+  const user = useUser();
   const [scheduleColor, setScheduleColor] = useState<string>('#fff');
 
+  const markers = useMemo(
+    () =>
+      schedule.locations?.references?.nodes.reduce((geos, l) => {
+        if (l.geoLocation?.value) {
+          const value = JSON.parse(
+            l.geoLocation.value,
+          ) as CustomerLocationAllOfGeoLocation;
+          geos.push({
+            id: l.id,
+            lat: value.coordinates[1],
+            lng: value.coordinates[0],
+            radius:
+              l.locationType?.value === 'destination'
+                ? parseInt(l.maxDriveDistance?.value || '0') * 1000
+                : null,
+            image: user.image.url,
+          });
+        }
+        return geos;
+      }, [] as LeafletMapMarker[]) || [],
+    [schedule.locations?.references?.nodes, user.image.url],
+  );
+
   useEffect(() => {
     const fetchColor = async () => {
       const color = await wordToColor(schedule.handle || '');
@@ -443,7 +497,7 @@ function Schedule({schedule}: {schedule: ScheduleFragment}) {
       <Title order={4} mb="xs">
         {t('openingtime')}
       </Title>
-      <Stack gap={rem(3)}>
+      <Stack gap={rem(3)} mb="md">
         {slots?.map((slot) => {
           return (
             <Group key={slot.day}>
@@ -467,12 +521,13 @@ function Schedule({schedule}: {schedule: ScheduleFragment}) {
           );
         })}
       </Stack>
-      <Card.Section>
-        <Divider my="md" />
-      </Card.Section>
-      <Stack gap="xs">
-        {schedule.locations?.references?.nodes.map((location) => (
-          <Group key={location.handle}>
+
+      {schedule.locations?.references?.nodes.map((location) => (
+        <React.Fragment key={location.handle}>
+          <Card.Section>
+            <Divider mb="md" />
+          </Card.Section>
+          <Group mb="md">
             <LocationIcon
               location={{locationType: location.locationType?.value as any}}
               color={scheduleColor || '#000000'}
@@ -480,18 +535,33 @@ function Schedule({schedule}: {schedule: ScheduleFragment}) {
             {location.locationType?.value === 'destination' ||
             location.locationType?.value === 'virtual' ? (
               <>
-                {
-                  location.fullAddress?.value?.split(',')[
-                    location.fullAddress?.value?.split(',').length - 1
-                  ]
-                }
+                <Text>
+                  {
+                    location.fullAddress?.value?.split(',')[
+                      location.fullAddress?.value?.split(',').length - 1
+                    ]
+                  }
+                </Text>
+                <Text>Hvor skønhedseksperten kører ud til!</Text>
               </>
             ) : (
-              <>{location.fullAddress?.value}</>
+              <>
+                <Text>{location.fullAddress?.value}</Text>
+                <Text>Hvor behandling finder sted!</Text>
+              </>
             )}
           </Group>
-        ))}
-      </Stack>
+          <Card.Section>
+            <ClientOnly fallback={<Loader />}>
+              {() => (
+                <LeafletMap
+                  markers={markers.filter((m) => m.id === location.id)}
+                />
+              )}
+            </ClientOnly>
+          </Card.Section>
+        </React.Fragment>
+      ))}
     </Card>
   );
 }
diff --git a/app/routes/book.$handle.tsx b/app/routes/book.$handle.tsx
index 50937aac..a5a2a81d 100644
--- a/app/routes/book.$handle.tsx
+++ b/app/routes/book.$handle.tsx
@@ -1,6 +1,7 @@
 import {
   ActionIcon,
   Affix,
+  Avatar,
   Box,
   Card,
   Container,
@@ -33,6 +34,7 @@ import {useTranslation} from 'react-i18next';
 import type {
   PickMoreTreatmentProductFragment,
   TreatmentOptionVariantFragment,
+  UserFragment,
 } from 'storefrontapi.generated';
 import {LocationIcon} from '~/components/LocationIcon';
 import {
@@ -70,6 +72,7 @@ export function shouldRevalidate({
 }
 
 export type OutletLoader = SerializeFrom<typeof loader> & {
+  user: UserFragment;
   selectedLocation: CustomerLocation;
   pickedVariants: TreatmentOptionVariantFragment[];
   summary: {
@@ -217,13 +220,21 @@ export default function Booking() {
               )}
             </ActionIcon>
 
-            <Title
-              order={2}
-              style={{
-                transition: 'all 0.3s ease',
-                opacity,
-              }}
-            ></Title>
+            <Title order={2} hiddenFrom="sm">
+              <Group gap="4px" justify="center">
+                <Avatar
+                  size="md"
+                  style={{border: '3px solid #FFF'}}
+                  src={
+                    user?.image?.reference?.image?.url ||
+                    'https://placehold.co/400x600?text=Ekspert'
+                  }
+                />
+                <Title fz="md" fw="400">
+                  {user?.fullname?.value}
+                </Title>
+              </Group>
+            </Title>
             <ActionIcon
               variant="transparent"
               c="black"
@@ -269,6 +280,7 @@ export function BookingDetails({children}: PropsWithChildren) {
   const {t} = useTranslation('book');
   const durationToTime = useDuration();
   const {
+    user,
     selectedLocation,
     product,
     pickedVariants,
@@ -280,6 +292,20 @@ export function BookingDetails({children}: PropsWithChildren) {
   return (
     <Grid.Col span={{base: 12, md: 5}} visibleFrom="md" pos="relative">
       <Card withBorder radius="md" pos="sticky" top="64px" flex="1">
+        <Group gap="xs" justify="center">
+          <Avatar
+            size="md"
+            style={{border: '3px solid #FFF'}}
+            src={
+              user?.image?.reference?.image?.url ||
+              'https://placehold.co/400x600?text=Ekspert'
+            }
+          />
+          <Title fz="lg">{user.fullname?.value}</Title>
+        </Group>
+        <Card.Section>
+          <Divider mt="md" mb="lg" />
+        </Card.Section>
         <Stack gap="md">
           {selectedLocation ? (
             <div>
diff --git a/app/routes/users._index.tsx b/app/routes/users._index.tsx
index eb439be2..a39a5572 100644
--- a/app/routes/users._index.tsx
+++ b/app/routes/users._index.tsx
@@ -237,7 +237,7 @@ export const UserCard = ({article}: {article: ArticleUserFragment}) => {
                 />
               )}
               <Text fz="md" c="dimmed" lineClamp={1}>
-                asd
+                {tags['city']}
               </Text>
             </Group>
 
diff --git a/package-lock.json b/package-lock.json
index d2991e59..04d8db19 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,12 +16,12 @@
         "@fullcalendar/interaction": "^6.1.14",
         "@fullcalendar/react": "^6.1.14",
         "@fullcalendar/timegrid": "^6.1.14",
-        "@mantine/carousel": "^7.10.2",
-        "@mantine/core": "^7.10.2",
-        "@mantine/hooks": "^7.10.2",
-        "@mantine/modals": "^7.10.2",
-        "@mantine/nprogress": "^7.10.2",
-        "@mantine/tiptap": "^7.10.2",
+        "@mantine/carousel": "^7.11.0",
+        "@mantine/core": "^7.11.0",
+        "@mantine/hooks": "^7.11.0",
+        "@mantine/modals": "^7.11.0",
+        "@mantine/nprogress": "^7.11.0",
+        "@mantine/tiptap": "^7.11.0",
         "@remix-run/react": "^2.9.2",
         "@remix-run/server-runtime": "^2.9.2",
         "@shopify/cli": "^3.61.2",
@@ -3587,21 +3587,21 @@
       }
     },
     "node_modules/@mantine/carousel": {
-      "version": "7.10.2",
-      "resolved": "https://registry.npmjs.org/@mantine/carousel/-/carousel-7.10.2.tgz",
-      "integrity": "sha512-/cj4ZSrLuKfJLloClpvmVXsj6WfkCOnG4ipBlleSFvEynzxmNUXC3z1eR6vgh6IRhzpjQPe2PM8YFiMGRljVQg==",
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/@mantine/carousel/-/carousel-7.11.0.tgz",
+      "integrity": "sha512-NVyChCtBfi8HOZkN6i9FPC2ZGkjjaNTtZDsbu22rYb3iHteKDS76Hp5hy04b2eLGwglHERCMeZu4g5Nf2ZSa/Q==",
       "peerDependencies": {
-        "@mantine/core": "7.10.2",
-        "@mantine/hooks": "7.10.2",
+        "@mantine/core": "7.11.0",
+        "@mantine/hooks": "7.11.0",
         "embla-carousel-react": ">=7.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       }
     },
     "node_modules/@mantine/core": {
-      "version": "7.10.2",
-      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.10.2.tgz",
-      "integrity": "sha512-sPqJY2A+zHAhi7/mJKL2EH92jKc6JDACJY17gXS+FcbIQgiaY1rxA/tdcybpq8FbswSgUYZO6CRL6XWEhatw5w==",
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.11.0.tgz",
+      "integrity": "sha512-yw2Llww9mw8rDWZtucdEuvkqqjHdreUibos7JCUpejL721FW1Tn9L91nsxO/YQFSS7jn4Q0CP+1YbQ/PMULmwA==",
       "dependencies": {
         "@floating-ui/react": "^0.26.9",
         "clsx": "^2.1.1",
@@ -3611,59 +3611,59 @@
         "type-fest": "^4.12.0"
       },
       "peerDependencies": {
-        "@mantine/hooks": "7.10.2",
+        "@mantine/hooks": "7.11.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       }
     },
     "node_modules/@mantine/hooks": {
-      "version": "7.10.2",
-      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.10.2.tgz",
-      "integrity": "sha512-3m4flbR2yv3Bl21pHl5BKOOnqrInp/gVD72rozLeu/jzIZqQy8yFRTY2bUWCebPwNem//OD1rCORsBXNXvq31g==",
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.11.0.tgz",
+      "integrity": "sha512-T3472GhUXFhuhXUHlxjHv0wfb73lFyNuaw631c7Ddtgvewq0WKtNqYd7j/Zz/k02DuS3r0QXA7e12/XgqHBZjg==",
       "peerDependencies": {
         "react": "^18.2.0"
       }
     },
     "node_modules/@mantine/modals": {
-      "version": "7.10.2",
-      "resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-7.10.2.tgz",
-      "integrity": "sha512-L/gjPnvokciHOuTXFZqkc5b+ECAGKe/0l0LXlDwM3PvGJs1/Wa4DBCSy3pdGhKv+rMwFr2HiBc8nibCfwaR7IQ==",
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-7.11.0.tgz",
+      "integrity": "sha512-I4bxdXirLNvVbmVcS9lhU9z1bknE8XlteGeSxAZ00SLUk9EowG+AX/9nK0TrSG2GBNDX82fFxp2z98/o7bTw5w==",
       "peerDependencies": {
-        "@mantine/core": "7.10.2",
-        "@mantine/hooks": "7.10.2",
+        "@mantine/core": "7.11.0",
+        "@mantine/hooks": "7.11.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       }
     },
     "node_modules/@mantine/nprogress": {
-      "version": "7.10.2",
-      "resolved": "https://registry.npmjs.org/@mantine/nprogress/-/nprogress-7.10.2.tgz",
-      "integrity": "sha512-hGOzGcESe2UjkMG7lYi7A4jF/w2SJstaCwwFazO51t6i/WbTUJrCiJ5YTbN8xrlLJWYVtkIO6PUc2ZMAHjx5KA==",
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/@mantine/nprogress/-/nprogress-7.11.0.tgz",
+      "integrity": "sha512-xBUAT/oy179Km0Hl446usmuHNZcloZE96G++NRypCzz6Wzc0boc/p98SWcljPED/S2eeXtc6aXUOXyFKwp8lBg==",
       "dependencies": {
-        "@mantine/store": "7.10.2"
+        "@mantine/store": "7.11.0"
       },
       "peerDependencies": {
-        "@mantine/core": "7.10.2",
-        "@mantine/hooks": "7.10.2",
+        "@mantine/core": "7.11.0",
+        "@mantine/hooks": "7.11.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       }
     },
     "node_modules/@mantine/store": {
-      "version": "7.10.2",
-      "resolved": "https://registry.npmjs.org/@mantine/store/-/store-7.10.2.tgz",
-      "integrity": "sha512-izT4ivE2Ka2NBTjy5Ck31F3sSybCBLXJhX/ESDCasVR9MKD2Ci2Y6nbm0UtBdPf4+PrDPZtaPwqQzL92uZLtCQ==",
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/@mantine/store/-/store-7.11.0.tgz",
+      "integrity": "sha512-zPmOpdFgvkUqYKSK7NNKbhgXsh2QPw51m3iypTaj0mw+rZbk3WSH9vZvaEx59X0QG+ahwUg2/HezbjfXFUbvrA==",
       "peerDependencies": {
         "react": "^18.2.0"
       }
     },
     "node_modules/@mantine/tiptap": {
-      "version": "7.10.2",
-      "resolved": "https://registry.npmjs.org/@mantine/tiptap/-/tiptap-7.10.2.tgz",
-      "integrity": "sha512-FvCzQ4+I7bB1qL3lsrFUB31irgihlWw+nsYUHqN66WeNUcSDVDiitaMJu4Kw56VrQ19l9vPp1qFQSgvz/aTTmw==",
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/@mantine/tiptap/-/tiptap-7.11.0.tgz",
+      "integrity": "sha512-6AXSteD22B4gqscEKLejJ8v1QQsl7Q/2XLYSHwrT8T4l9JVeL881SG5wl23TOKp2K23BqULZbDmm4hhEKmnCZA==",
       "peerDependencies": {
-        "@mantine/core": "7.10.2",
-        "@mantine/hooks": "7.10.2",
+        "@mantine/core": "7.11.0",
+        "@mantine/hooks": "7.11.0",
         "@tiptap/extension-link": ">=2.1.12",
         "@tiptap/react": ">=2.1.12",
         "react": "^18.2.0",
diff --git a/package.json b/package.json
index 53727498..15c4714d 100644
--- a/package.json
+++ b/package.json
@@ -30,12 +30,12 @@
     "@fullcalendar/interaction": "^6.1.14",
     "@fullcalendar/react": "^6.1.14",
     "@fullcalendar/timegrid": "^6.1.14",
-    "@mantine/carousel": "^7.10.2",
-    "@mantine/core": "^7.10.2",
-    "@mantine/hooks": "^7.10.2",
-    "@mantine/modals": "^7.10.2",
-    "@mantine/nprogress": "^7.10.2",
-    "@mantine/tiptap": "^7.10.2",
+    "@mantine/carousel": "^7.11.0",
+    "@mantine/core": "^7.11.0",
+    "@mantine/hooks": "^7.11.0",
+    "@mantine/modals": "^7.11.0",
+    "@mantine/nprogress": "^7.11.0",
+    "@mantine/tiptap": "^7.11.0",
     "@remix-run/react": "^2.9.2",
     "@remix-run/server-runtime": "^2.9.2",
     "@shopify/cli": "^3.61.2",