cleanup

app/[locale]/about/page.tsx

@@ -5,6 +5,7 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getPage, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
+import { Suspense } from 'react';
 import AboutNaraiDetail from './about-narai-detail';
 
 const { SITE_NAME } = process.env;
@@ -35,9 +36,11 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
   return (
     <div>
       <Navbar cart={cart} locale={params?.locale} compact promotedItem={promotedItem} />
-      <div className="pt-24 md:pt-32">
+      <Suspense fallback={null}>
-        <AboutNaraiDetail awards={awardsPage.body} />
+        <div className="pt-24 md:pt-32">
-      </div>
+          <AboutNaraiDetail awards={awardsPage.body} />
+        </div>
+      </Suspense>
 
       <Footer cart={cart} />
     </div>

app/[locale]/bar/page.tsx

@@ -5,6 +5,7 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
+import { Suspense } from 'react';
 import SagyobarDetail from './sagyobar-detail';
 
 const { SITE_NAME } = process.env;
@@ -33,9 +34,11 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
   return (
     <div>
       <Navbar cart={cart} locale={params?.locale} compact promotedItem={promotedItem} />
-      <div className="pt-12">
+      <Suspense fallback={null}>
-        <SagyobarDetail />
+        <div className="pt-12">
-      </div>
+          <SagyobarDetail />
+        </div>
+      </Suspense>
 
       <Footer cart={cart} />
     </div>

app/[locale]/company/page.tsx

@@ -5,6 +5,7 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
+import { Suspense } from 'react';
 import CompanyDetail from './company-detail';
 
 const { SITE_NAME } = process.env;
@@ -33,9 +34,11 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
   return (
     <div>
       <Navbar cart={cart} locale={params?.locale} compact promotedItem={promotedItem} />
-      <div className="pt-12">
+      <Suspense fallback={null}>
-        <CompanyDetail />
+        <div className="pt-12">
-      </div>
+          <CompanyDetail />
+        </div>
+      </Suspense>
 
       <Footer cart={cart} />
     </div>

app/[locale]/concept/page.tsx

@@ -5,6 +5,7 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
+import { Suspense } from 'react';
 import ConceptDetail from './concept-detail';
 
 const { SITE_NAME } = process.env;
@@ -33,9 +34,11 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
   return (
     <div>
       <Navbar cart={cart} locale={params?.locale} compact promotedItem={promotedItem} />
-      <div className="pt-12">
+      <Suspense fallback={null}>
-        <ConceptDetail />
+        <div className="pt-12">
-      </div>
+          <ConceptDetail />
+        </div>
+      </Suspense>
 
       <Footer cart={cart} />
     </div>

app/[locale]/disclosures/page.tsx

@@ -5,6 +5,7 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
+import { Suspense } from 'react';
 import Disclosures from './disclosures';
 
 const { SITE_NAME } = process.env;
@@ -37,9 +38,11 @@ export default async function DisclosuresPage({
   return (
     <div>
       <Navbar cart={cart} locale={locale} compact promotedItem={promotedItem} />
-      <div className="py-24 md:py-48">
+      <Suspense fallback={null}>
-        <Disclosures />
+        <div className="py-24 md:py-48">
-      </div>
+          <Disclosures />
+        </div>
+      </Suspense>
 
       <Footer cart={cart} />
     </div>

app/[locale]/layout.tsx

@@ -1,10 +1,9 @@
 import { Lato, Noto_Serif_JP } from 'next/font/google';
 import localFont from 'next/font/local';
-import { ReactNode } from 'react';
+import { ReactNode, Suspense } from 'react';
 
 import { SupportedLocale } from 'components/layout/navbar/language-control';
 import { NextIntlClientProvider } from 'next-intl';
-import { notFound } from 'next/navigation';
 import Analytics from './analytics';
 import './globals.css';
 
@@ -81,12 +80,7 @@ export default async function RootLayout({
   children: ReactNode;
   params: { locale?: SupportedLocale };
 }) {
-  let messages;
+  const messages = (await import(`../../messages/${params?.locale}.json`)).default;
-  try {
-    messages = (await import(`../../messages/${params?.locale}.json`)).default;
-  } catch (error) {
-    notFound();
-  }
 
   return (
     <html
@@ -95,7 +89,9 @@ export default async function RootLayout({
     >
       <body className="bg-dark text-white selection:bg-green-800 selection:text-green-400">
         <NextIntlClientProvider locale={params?.locale} messages={messages}>
-          <Analytics />
+          <Suspense fallback={null}>
+            <Analytics />
+          </Suspense>
           <main>{children}</main>
         </NextIntlClientProvider>
       </body>

app/[locale]/page.tsx

@@ -24,6 +24,7 @@ import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
 import Image from 'next/image';
+import { Suspense } from 'react';
 
 const { SITE_NAME } = process.env;
 
@@ -59,7 +60,9 @@ export default async function HomePage({
         <HomepageProducts lang={locale} />
       </div>
       <div className="py-24 md:py-48">
-        <NewsletterSignup />
+        <Suspense fallback={null}>
+          <NewsletterSignup />
+        </Suspense>
       </div>
       <div className="relative mx-auto max-w-screen-xl">
         <Image
@@ -70,7 +73,9 @@ export default async function HomePage({
         />
       </div>
       <div className="py-24">
-        <Shoplist />
+        <Suspense fallback={null}>
+          <Shoplist />
+        </Suspense>
       </div>
 
       <div className="relative pb-48">

app/[locale]/privacy/page.tsx

@@ -5,6 +5,7 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
+import { Suspense } from 'react';
 import PrivacyPolicy from './privacy-policy';
 
 const { SITE_NAME } = process.env;
@@ -37,9 +38,11 @@ export default async function PrivacyPage({
   return (
     <div>
       <Navbar cart={cart} locale={locale} compact promotedItem={promotedItem} />
-      <div className="py-24 md:py-48">
+      <Suspense fallback={null}>
-        <PrivacyPolicy />
+        <div className="py-24 md:py-48">
-      </div>
+          <PrivacyPolicy />
+        </div>
+      </Suspense>
 
       <Footer cart={cart} />
     </div>

app/[locale]/products/page.tsx

@@ -6,6 +6,7 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
+import { Suspense } from 'react';
 
 const { SITE_NAME } = process.env;
 
@@ -37,9 +38,11 @@ export default async function ProductPage({
   return (
     <div>
       <Navbar cart={cart} locale={locale} compact promotedItem={promotedItem} />
-      <div className="py-24 md:py-48">
+      <Suspense fallback={null}>
-        <ProductGrid lang={locale} />
+        <div className="py-24 md:py-48">
-      </div>
+          <ProductGrid lang={locale} />
+        </div>
+      </Suspense>
 
       <Footer cart={cart} />
     </div>

app/[locale]/shop-list/page.tsx

@@ -3,12 +3,12 @@ import type { Metadata } from 'next';
 import Footer from 'components/layout/footer';
 import Navbar from 'components/layout/navbar';
 import { SupportedLocale } from 'components/layout/navbar/language-control';
-import Prose from 'components/prose';
 import { getCart, getPage, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
 import { notFound } from 'next/navigation';
 import { Suspense } from 'react';
+import ShopListDetail from './shop-list-detail';
 import ShopsNav from './shops-nav';
 
 export async function generateMetadata({
@@ -16,7 +16,10 @@ export async function generateMetadata({
 }: {
   params: { locale?: SupportedLocale };
 }): Promise<Metadata> {
-  const page = await getPage({ handle: 'shop-list', language: params?.locale?.toUpperCase() });
+  const page = await getPage({
+    handle: 'shop-list',
+    language: params?.locale?.toUpperCase() || 'JA'
+  });
 
   if (!page) return notFound();
 
@@ -39,26 +42,21 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
     cart = await getCart(cartId);
   }
 
-  const page = await getPage({ handle: 'shop-list', language: params?.locale?.toUpperCase() });
-
-  if (!page) return notFound();
-
   const promotedItem: Product | undefined = await getProduct({
     handle: 'gift-bag-and-postcard-set',
-    language: params?.locale?.toUpperCase()
+    language: params?.locale?.toUpperCase() || 'JA'
   });
 
   return (
     <div>
       <Navbar cart={cart} locale={params?.locale} compact showTop promotedItem={promotedItem} />
       <div className="mx-auto max-w-xl px-6 pb-24 pt-12 md:pb-48 md:pt-24">
-        <Suspense>
+        <div className="pb-12">
-          <div className="pb-12">
+          <ShopsNav />
-            <ShopsNav />
+        </div>
-          </div>
+        <Suspense fallback={null}>
+          <ShopListDetail language={params?.locale?.toUpperCase()} />
         </Suspense>
-        {/* <h2 className="font-multilingual mb-8 text-3xl font-medium">{page.title}</h2> */}
-        <Prose html={page.body as string} />
       </div>
 
       <Footer cart={cart} />

app/[locale]/shop-list/shop-list-detail.tsx

@@ -0,0 +1,13 @@
+'use server';
+
+import Prose from 'components/prose';
+import { getPage } from 'lib/shopify';
+import { notFound } from 'next/navigation';
+
+export default async function ShopListDetail({ language }: { language?: string }) {
+  const page = await getPage({ handle: 'shop-list', language });
+
+  if (!page) return notFound();
+
+  return <Prose html={page.body as string} />;
+}

app/[locale]/stories/page.tsx

@@ -7,6 +7,7 @@ import { BLOG_HANDLE } from 'lib/constants';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
+import { Suspense } from 'react';
 
 const { SITE_NAME } = process.env;
 
@@ -38,9 +39,11 @@ export default async function StoriesPage({
   return (
     <div>
       <Navbar cart={cart} locale={locale} compact promotedItem={promotedItem} />
-      <div className="py-24 md:py-48">
+      <Suspense fallback={null}>
-        <StoriesDetail handle={BLOG_HANDLE} locale={locale} />
+        <div className="py-24 md:py-48">
-      </div>
+          <StoriesDetail handle={BLOG_HANDLE} locale={locale} />
+        </div>
+      </Suspense>
 
       <Footer cart={cart} />
     </div>

app/[locale]/terms/page.tsx

@@ -5,6 +5,7 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
+import { Suspense } from 'react';
 import TermsOfUse from './terms-of-use';
 
 const { SITE_NAME } = process.env;
@@ -37,9 +38,11 @@ export default async function TermsPage({
   return (
     <div>
       <Navbar cart={cart} locale={locale} compact promotedItem={promotedItem} />
-      <div className="py-24 md:py-48">
+      <Suspense fallback={null}>
-        <TermsOfUse />
+        <div className="py-24 md:py-48">
-      </div>
+          <TermsOfUse />
+        </div>
+      </Suspense>
 
       <Footer cart={cart} />
     </div>

components/cart/actions.ts

@@ -5,7 +5,7 @@ import { addToCart, createCart, getCart, removeFromCart, updateCart } from 'lib/
 import { revalidateTag } from 'next/cache';
 import { cookies } from 'next/headers';
 
-export async function addItem(prevState: any, selectedVariantId: string | undefined) {
+export async function addItem(selectedVariantId: string | undefined) {
   let cartId = cookies().get('cartId')?.value;
   let cart;
 

components/cart/add-to-cart.tsx

@@ -1,92 +0,0 @@
-'use client';
-
-import { PlusIcon } from '@heroicons/react/24/outline';
-import clsx from 'clsx';
-import { addItem } from 'components/cart/actions';
-import LoadingDots from 'components/loading-dots';
-import { ProductVariant } from 'lib/shopify/types';
-import { useSearchParams } from 'next/navigation';
-import React from 'react';
-
-function SubmitButton({
-  availableForSale,
-  selectedVariantId
-}: {
-  availableForSale: boolean;
-  selectedVariantId: string | undefined;
-}) {
-  const { pending } = useFormStatus();
-  const buttonClasses =
-    'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white';
-  const disabledClasses = 'cursor-not-allowed opacity-60 hover:opacity-60';
-
-  if (!availableForSale) {
-    return (
-      <button aria-disabled className={clsx(buttonClasses, disabledClasses)}>
-        Out Of Stock
-      </button>
-    );
-  }
-
-  if (!selectedVariantId) {
-    return (
-      <button
-        aria-label="Please select an option"
-        aria-disabled
-        className={clsx(buttonClasses, disabledClasses)}
-      >
-        <div className="absolute left-0 ml-4">
-          <PlusIcon className="h-5" />
-        </div>
-        Add To Cart
-      </button>
-    );
-  }
-
-  return (
-    <button
-      onClick={(e: React.FormEvent<HTMLButtonElement>) => {
-        if (pending) e.preventDefault();
-      }}
-      aria-label="Add to cart"
-      aria-disabled={pending}
-      className={clsx(buttonClasses, {
-        'hover:opacity-90': true,
-        disabledClasses: pending
-      })}
-    >
-      <div className="absolute left-0 ml-4">
-        {pending ? <LoadingDots className="mb-3 bg-white" /> : <PlusIcon className="h-5" />}
-      </div>
-      Add To Cart
-    </button>
-  );
-}
-
-export function AddToCart({
-  variants,
-  availableForSale
-}: {
-  variants: ProductVariant[];
-  availableForSale: boolean;
-}) {
-  const [message, formAction] = useFormState(addItem, null);
-  const searchParams = useSearchParams();
-  const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
-  const variant = variants.find((variant: ProductVariant) =>
-    variant.selectedOptions.every(
-      (option) => option.value === searchParams.get(option.name.toLowerCase())
-    )
-  );
-  const selectedVariantId = variant?.id || defaultVariantId;
-  const actionWithVariant = formAction.bind(null, selectedVariantId);
-
-  return (
-    <form action={actionWithVariant}>
-      <SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
-      <p aria-live="polite" className="sr-only" role="status">
-        {message}
-      </p>
-    </form>
-  );
-}

lib/shopify/index.ts

@@ -400,7 +400,7 @@ export async function getPage({
 }): Promise<Page> {
   const res = await shopifyFetch<ShopifyPageOperation>({
     query: getPageQuery,
-    cache: 'no-store',
+    // cache: 'no-store',
     variables: { handle, language, country }
   });
 
@@ -416,7 +416,7 @@ export async function getPages({
 }): Promise<Page[]> {
   const res = await shopifyFetch<ShopifyPagesOperation>({
     query: getPagesQuery,
-    cache: 'no-store',
+    // cache: 'no-store',
     variables: { language, country }
   });
 

package.json

@@ -37,7 +37,7 @@
     "next-gtm": "latest",
     "next-intl": "latest",
     "prettier-plugin-organize-imports": "^3.2.3",
-    "react": "latest",
+    "react": "canary",
     "react-dom": "canary",
     "react-ga": "^3.3.1",
     "react-gtm-module": "^2.0.11",
@@ -50,18 +50,18 @@
     "@tailwindcss/typography": "^0.5.9",
     "@types/js-cookie": "^3.0.3",
     "@types/negotiator": "^0.6.1",
-    "@types/node": "20.4.4",
+    "@types/node": "latest",
-    "@types/react": "18.2.16",
+    "@types/react": "latest",
-    "@types/react-dom": "18.2.7",
+    "@types/react-dom": "latest",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.45.0",
+    "eslint": "latest",
     "eslint-config-next": "latest",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-unicorn": "^48.0.0",
+    "eslint-plugin-unicorn": "latest",
     "lint-staged": "^13.2.3",
     "postcss": "^8.4.27",
     "prettier": "3.0.1",
-    "prettier-plugin-tailwindcss": "^0.4.1",
+    "prettier-plugin-tailwindcss": "latest",
     "tailwindcss": "^3.3.3",
     "typescript": "5.1.6"
   }

yarn.lock

@@ -28,6 +28,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-identifier@npm:^7.22.20":
+  version: 7.22.20
+  resolution: "@babel/helper-validator-identifier@npm:7.22.20"
+  checksum: 136412784d9428266bcdd4d91c32bcf9ff0e8d25534a9d94b044f77fe76bc50f941a90319b05aafd1ec04f7d127cd57a179a3716009ff7f3412ef835ada95bdc
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-identifier@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-validator-identifier@npm:7.22.5"
@@ -82,9 +89,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/eslintrc@npm:^2.1.1":
+"@eslint/eslintrc@npm:^2.1.3":
-  version: 2.1.1
+  version: 2.1.3
-  resolution: "@eslint/eslintrc@npm:2.1.1"
+  resolution: "@eslint/eslintrc@npm:2.1.3"
   dependencies:
     ajv: ^6.12.4
     debug: ^4.3.2
@@ -95,14 +102,14 @@ __metadata:
     js-yaml: ^4.1.0
     minimatch: ^3.1.2
     strip-json-comments: ^3.1.1
-  checksum: bf909ea183d27238c257a82d4ffdec38ca94b906b4b8dfae02ecbe7ecc9e5a8182ef5e469c808bb8cb4fea4750f43ac4ca7c4b4a167b6cd7e3aaacd386b2bd25
+  checksum: 5c6c3878192fe0ddffa9aff08b4e2f3bcc8f1c10d6449b7295a5f58b662019896deabfc19890455ffd7e60a5bd28d25d0eaefb2f78b2d230aae3879af92b89e5
   languageName: node
   linkType: hard
 
-"@eslint/js@npm:^8.46.0":
+"@eslint/js@npm:8.53.0":
-  version: 8.46.0
+  version: 8.53.0
-  resolution: "@eslint/js@npm:8.46.0"
+  resolution: "@eslint/js@npm:8.53.0"
-  checksum: 7aed479832302882faf5bec37e9d068f270f84c19b3fb529646a7c1b031e73a312f730569c78806492bc09cfce3d7651dfab4ce09a56cbb06bc6469449e56377
+  checksum: e0d5cfb0000aaee237c8e6d6d6e366faa60b1ef7f928ce17778373aa44d3b886368f6d5e1f97f913f0f16801aad016db8b8df78418c9d18825c15590328028af
   languageName: node
   linkType: hard
 
@@ -204,14 +211,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@humanwhocodes/config-array@npm:^0.11.10":
+"@humanwhocodes/config-array@npm:^0.11.13":
-  version: 0.11.10
+  version: 0.11.13
-  resolution: "@humanwhocodes/config-array@npm:0.11.10"
+  resolution: "@humanwhocodes/config-array@npm:0.11.13"
   dependencies:
-    "@humanwhocodes/object-schema": ^1.2.1
+    "@humanwhocodes/object-schema": ^2.0.1
     debug: ^4.1.1
     minimatch: ^3.0.5
-  checksum: 1b1302e2403d0e35bc43e66d67a2b36b0ad1119efc704b5faff68c41f791a052355b010fb2d27ef022670f550de24cd6d08d5ecf0821c16326b7dcd0ee5d5d8a
+  checksum: f8ea57b0d7ed7f2d64cd3944654976829d9da91c04d9c860e18804729a33f7681f78166ef4c761850b8c324d362f7d53f14c5c44907a6b38b32c703ff85e4805
   languageName: node
   linkType: hard
 
@@ -222,10 +229,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@humanwhocodes/object-schema@npm:^1.2.1":
+"@humanwhocodes/object-schema@npm:^2.0.1":
-  version: 1.2.1
+  version: 2.0.1
-  resolution: "@humanwhocodes/object-schema@npm:1.2.1"
+  resolution: "@humanwhocodes/object-schema@npm:2.0.1"
-  checksum: a824a1ec31591231e4bad5787641f59e9633827d0a2eaae131a288d33c9ef0290bd16fda8da6f7c0fcb014147865d12118df10db57f27f41e20da92369fcb3f1
+  checksum: 24929487b1ed48795d2f08346a0116cc5ee4634848bce64161fb947109352c562310fd159fc64dda0e8b853307f5794605191a9547f7341158559ca3c8262a45
   languageName: node
   linkType: hard
 
@@ -495,10 +502,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:20.4.4":
+"@types/node@npm:latest":
-  version: 20.4.4
+  version: 20.9.0
-  resolution: "@types/node@npm:20.4.4"
+  resolution: "@types/node@npm:20.9.0"
-  checksum: 43f3c4a8acc38ae753e15a0e79bae0447d255b3742fa87f8e065d7b9d20ecb0e03d6c5b46c00d5d26f4552160381a00255f49205595a8ee48c2423e00263c930
+  dependencies:
+    undici-types: ~5.26.4
+  checksum: bfd927da6bff8a32051fa44bb47ca32a56d2c8bc8ba0170770f181cc1fa3c0b05863c9b930f0ba8604a48d5eb0d319166601709ca53bf2deae0025d8b6c6b8a3
   languageName: node
   linkType: hard
 
@@ -516,12 +525,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:18.2.7":
+"@types/react-dom@npm:latest":
-  version: 18.2.7
+  version: 18.2.15
-  resolution: "@types/react-dom@npm:18.2.7"
+  resolution: "@types/react-dom@npm:18.2.15"
   dependencies:
     "@types/react": "*"
-  checksum: e02ea908289a7ad26053308248d2b87f6aeafd73d0e2de2a3d435947bcea0422599016ffd1c3e38ff36c42f5e1c87c7417f05b0a157e48649e4a02f21727d54f
+  checksum: 8e9631600c21ff561328e38a951d1991b3b3b20f538af4c0efbd1327c883a5573a63f50e1b945c34fa51b114b30e1ca5e62317bd54f21e063d6697b4be843a03
   languageName: node
   linkType: hard
 
@@ -543,14 +552,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:18.2.16":
+"@types/react@npm:latest":
-  version: 18.2.16
+  version: 18.2.37
-  resolution: "@types/react@npm:18.2.16"
+  resolution: "@types/react@npm:18.2.37"
   dependencies:
     "@types/prop-types": "*"
     "@types/scheduler": "*"
     csstype: ^3.0.2
-  checksum: 3d4fdc12509e0098e0dbb4bacdea53e8ccc6632e9df63d9f2711c77aa81ce3b2bb9c76d087f284034b25fd7245680167f4832bf6e4df960c5af2634b52adfd0c
+  checksum: 2d2599f1a09e4f678509161fea8baeaf76d21deee460f4f3ccc1ca431ebe85f896d7d0b906127de17e97ed57240cec61955eb97d0b5d9cbf4e97fd6620b1acdb
   languageName: node
   linkType: hard
 
@@ -624,6 +633,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ungap/structured-clone@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "@ungap/structured-clone@npm:1.2.0"
+  checksum: 4f656b7b4672f2ce6e272f2427d8b0824ed11546a601d8d5412b9d7704e83db38a8d9f402ecdf2b9063fc164af842ad0ec4a55819f621ed7e7ea4d1efcc74524
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:^1.0.0":
   version: 1.1.1
   resolution: "abbrev@npm:1.1.1"
@@ -1347,19 +1363,19 @@ __metadata:
     "@tailwindcss/typography": ^0.5.9
     "@types/js-cookie": ^3.0.3
     "@types/negotiator": ^0.6.1
-    "@types/node": 20.4.4
+    "@types/node": latest
-    "@types/react": 18.2.16
+    "@types/react": latest
-    "@types/react-dom": 18.2.7
+    "@types/react-dom": latest
     "@types/react-gtm-module": ^2.0.1
     autoprefixer: ^10.4.14
     clsx: ^2.0.0
     date-fns: ^2.30.0
-    eslint: ^8.45.0
+    eslint: latest
     eslint-config-next: latest
     eslint-config-prettier: ^8.8.0
     eslint-plugin-prettier: ^5.0.0
     eslint-plugin-tailwindcss: ^3.13.0
-    eslint-plugin-unicorn: ^48.0.0
+    eslint-plugin-unicorn: latest
     eslint-plugin-unused-imports: ^3.0.0
     js-cookie: ^3.0.5
     lint-staged: ^13.2.3
@@ -1370,8 +1386,8 @@ __metadata:
     postcss: ^8.4.27
     prettier: 3.0.1
     prettier-plugin-organize-imports: ^3.2.3
-    prettier-plugin-tailwindcss: ^0.4.1
+    prettier-plugin-tailwindcss: latest
-    react: latest
+    react: canary
     react-dom: canary
     react-ga: ^3.3.1
     react-gtm-module: ^2.0.11
@@ -1972,11 +1988,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-unicorn@npm:^48.0.0":
+"eslint-plugin-unicorn@npm:latest":
-  version: 48.0.1
+  version: 49.0.0
-  resolution: "eslint-plugin-unicorn@npm:48.0.1"
+  resolution: "eslint-plugin-unicorn@npm:49.0.0"
   dependencies:
-    "@babel/helper-validator-identifier": ^7.22.5
+    "@babel/helper-validator-identifier": ^7.22.20
     "@eslint-community/eslint-utils": ^4.4.0
     ci-info: ^3.8.0
     clean-regexp: ^1.0.0
@@ -1984,7 +2000,6 @@ __metadata:
     indent-string: ^4.0.0
     is-builtin-module: ^3.2.1
     jsesc: ^3.0.2
-    lodash: ^4.17.21
     pluralize: ^8.0.0
     read-pkg-up: ^7.0.1
     regexp-tree: ^0.1.27
@@ -1992,8 +2007,8 @@ __metadata:
     semver: ^7.5.4
     strip-indent: ^3.0.0
   peerDependencies:
-    eslint: ">=8.44.0"
+    eslint: ">=8.52.0"
-  checksum: e63112cbaa3a1347cbb427160d7b3c6a1f8cc8ef512075a0ab285c64761772356f4eb5f82c9fb1a8cde63d8794f8aa819eda02fa0a7c44bc9955c5113f87be78
+  checksum: 7580dc96b2edd26d10c1671e575d8ed26df87405f8a535f69f718187aecd64a89402c5dca40ee4a873ed8822496445451b50d9b9a52555b74f053af00fa98c0b
   languageName: node
   linkType: hard
 
@@ -2029,24 +2044,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-visitor-keys@npm:^3.3.0, eslint-visitor-keys@npm:^3.4.1, eslint-visitor-keys@npm:^3.4.2":
+"eslint-visitor-keys@npm:^3.3.0, eslint-visitor-keys@npm:^3.4.1":
   version: 3.4.2
   resolution: "eslint-visitor-keys@npm:3.4.2"
   checksum: 9e0e7e4aaea705c097ae37c97410e5f167d4d2193be2edcb1f0760762ede3df01545e4820ae314f42dcec687745f2c6dcaf6d83575c4a2a241eb0c8517d724f2
   languageName: node
   linkType: hard
 
-"eslint@npm:^8.45.0":
+"eslint-visitor-keys@npm:^3.4.3":
-  version: 8.46.0
+  version: 3.4.3
-  resolution: "eslint@npm:8.46.0"
+  resolution: "eslint-visitor-keys@npm:3.4.3"
+  checksum: 36e9ef87fca698b6fd7ca5ca35d7b2b6eeaaf106572e2f7fd31c12d3bfdaccdb587bba6d3621067e5aece31c8c3a348b93922ab8f7b2cbc6aaab5e1d89040c60
+  languageName: node
+  linkType: hard
+
+"eslint@npm:latest":
+  version: 8.53.0
+  resolution: "eslint@npm:8.53.0"
   dependencies:
     "@eslint-community/eslint-utils": ^4.2.0
     "@eslint-community/regexpp": ^4.6.1
-    "@eslint/eslintrc": ^2.1.1
+    "@eslint/eslintrc": ^2.1.3
-    "@eslint/js": ^8.46.0
+    "@eslint/js": 8.53.0
-    "@humanwhocodes/config-array": ^0.11.10
+    "@humanwhocodes/config-array": ^0.11.13
     "@humanwhocodes/module-importer": ^1.0.1
     "@nodelib/fs.walk": ^1.2.8
+    "@ungap/structured-clone": ^1.2.0
     ajv: ^6.12.4
     chalk: ^4.0.0
     cross-spawn: ^7.0.2
@@ -2054,7 +2077,7 @@ __metadata:
     doctrine: ^3.0.0
     escape-string-regexp: ^4.0.0
     eslint-scope: ^7.2.2
-    eslint-visitor-keys: ^3.4.2
+    eslint-visitor-keys: ^3.4.3
     espree: ^9.6.1
     esquery: ^1.4.2
     esutils: ^2.0.2
@@ -2079,7 +2102,7 @@ __metadata:
     text-table: ^0.2.0
   bin:
     eslint: bin/eslint.js
-  checksum: 7a7d36b1a3bbc12e08fbb5bc36fd482a7a5a1797e62e762499dd45601b9e45aaa53a129f31ce0b4444551a9639b8b681ad535f379893dd1e3ae37b31dccd82aa
+  checksum: 2da808655c7aa4b33f8970ba30d96b453c3071cc4d6cd60d367163430677e32ff186b65270816b662d29139283138bff81f28dddeb2e73265495245a316ed02c
   languageName: node
   linkType: hard
 
@@ -3342,13 +3365,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:^4.17.21":
-  version: 4.17.21
-  resolution: "lodash@npm:4.17.21"
-  checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
-  languageName: node
-  linkType: hard
-
 "log-update@npm:^4.0.0":
   version: 4.0.0
   resolution: "log-update@npm:4.0.0"
@@ -4323,26 +4339,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier-plugin-tailwindcss@npm:^0.4.1":
+"prettier-plugin-tailwindcss@npm:latest":
-  version: 0.4.1
+  version: 0.5.7
-  resolution: "prettier-plugin-tailwindcss@npm:0.4.1"
+  resolution: "prettier-plugin-tailwindcss@npm:0.5.7"
   peerDependencies:
     "@ianvs/prettier-plugin-sort-imports": "*"
     "@prettier/plugin-pug": "*"
     "@shopify/prettier-plugin-liquid": "*"
     "@shufo/prettier-plugin-blade": "*"
     "@trivago/prettier-plugin-sort-imports": "*"
-    prettier: ^2.2 || ^3.0
+    prettier: ^3.0
     prettier-plugin-astro: "*"
     prettier-plugin-css-order: "*"
     prettier-plugin-import-sort: "*"
     prettier-plugin-jsdoc: "*"
-    prettier-plugin-marko: "*"
     prettier-plugin-organize-attributes: "*"
     prettier-plugin-organize-imports: "*"
     prettier-plugin-style-order: "*"
     prettier-plugin-svelte: "*"
-    prettier-plugin-twig-melody: "*"
   peerDependenciesMeta:
     "@ianvs/prettier-plugin-sort-imports":
       optional: true
@@ -4374,7 +4388,7 @@ __metadata:
       optional: true
     prettier-plugin-twig-melody:
       optional: true
-  checksum: 9bdf3b7c270cc544f6bc38bbb869d3a97afc93de5005eee7272a36f374488731349c9362d2bbe4c83bd2a14b8a7c96cd25b9b682d1bea6dccc5bf08b2d02096c
+  checksum: 616c6eabd319453294fb1d2b241d6ff68b876092a902da67c90c39d4a2120ad605749ead09e08f3be11b4abdb60e63ce5dad1088f277b431b1131ffb365ce679
   languageName: node
   linkType: hard
 
@@ -4520,12 +4534,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:latest":
+"react@npm:canary":
-  version: 18.2.0
+  version: 18.3.0-canary-6b3834a45-20231110
-  resolution: "react@npm:18.2.0"
+  resolution: "react@npm:18.3.0-canary-6b3834a45-20231110"
   dependencies:
     loose-envify: ^1.1.0
-  checksum: 88e38092da8839b830cda6feef2e8505dec8ace60579e46aa5490fc3dc9bba0bd50336507dc166f43e3afc1c42939c09fe33b25fae889d6f402721dcd78fca1b
+  checksum: 1c89235bd8aaf3681edaf28413d2788bd7fc6ea0bdfc2e2a28e9ed6f855cc79a1ed65be61084baeda82c8652cba8670eb75c12e4059b701365f1a4ed930b8ce3
   languageName: node
   linkType: hard
 
@@ -5596,6 +5610,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"undici-types@npm:~5.26.4":
+  version: 5.26.5
+  resolution: "undici-types@npm:5.26.5"
+  checksum: 3192ef6f3fd5df652f2dc1cd782b49d6ff14dc98e5dced492aa8a8c65425227da5da6aafe22523c67f035a272c599bb89cfe803c1db6311e44bed3042fc25487
+  languageName: node
+  linkType: hard
+
 "unique-filename@npm:^3.0.0":
   version: 3.0.0
   resolution: "unique-filename@npm:3.0.0"