fix: upgrade dependencies

components/Alert.tsx

@@ -53,14 +53,14 @@ export default function Alert(props: AlertProps) {
       <div className="pointer-events-auto flex overflow-hidden rounded-t-lg bg-magenta-400 text-white">
         <Link
           href="/api/exit-preview"
-          className="py-2 px-4 transition-colors duration-200 hover:bg-magenta-300 hover:text-black"
+          className="px-4 py-2 transition-colors duration-200 hover:bg-magenta-300 hover:text-black"
         >
           Preview{` `}
           <strong>On</strong>
         </Link>
         <Link
           href={`/api/preview?${toggleAudienceUrl.toString()}`}
-          className="py-2 px-4 transition-colors duration-200 hover:bg-magenta-300 hover:text-black"
+          className="px-4 py-2 transition-colors duration-200 hover:bg-magenta-300 hover:text-black"
         >
           Audience{' '}
           <strong>{AUDIENCES[queryParams.audience] ?? `Unknown`}</strong>
@@ -72,7 +72,7 @@ export default function Alert(props: AlertProps) {
               ? `/api/preview?${updateTimeUrl.toString()}`
               : `/api/preview?${nowTimeUrl.toString()}`
           }
-          className="py-2 px-4 transition-colors duration-200 hover:bg-magenta-300 hover:text-black"
+          className="px-4 py-2 transition-colors duration-200 hover:bg-magenta-300 hover:text-black"
         >
           Time{` `}
           <strong>
@@ -82,7 +82,7 @@ export default function Alert(props: AlertProps) {
         <div>
           <input
             type="date"
-            className="bg-magenta-400 py-2 px-4 text-white transition-colors duration-200 hover:bg-magenta-300 hover:text-black"
+            className="bg-magenta-400 px-4 py-2 text-white transition-colors duration-200 hover:bg-magenta-300 hover:text-black"
             onChange={handleDateChange}
             value={targetDate ? targetDate.split(`T`).shift() : undefined}
           />

components/Debug/Grid.tsx

@@ -1,7 +1,7 @@
 import {useMemo} from 'react'
 import * as React from 'react'
 
-import { useDebug } from './DebugProvider'
+import {useDebug} from './DebugProvider'
 
 export function DebugGrid(props: {columns?: number}) {
   const {grid} = useDebug()

components/Header.tsx

@@ -52,7 +52,7 @@ export default function Header(props: HeaderProps) {
               ))}
             </div>
           ) : null}
-          
+
           <div className="ml-auto flex flex-1 items-center justify-end gap-5 lg:hidden">
             <Menu />
           </div>

components/Page.tsx

@@ -11,32 +11,32 @@ export default function Page(props: PageProps) {
   return (
     <article className="flex flex-col">
       <Container>
-      {translations.length > 1 ? (
-        <ul className="flex items-center justify-end gap-4 py-3 border-b border-gray-200 dark:border-gray-800">
-          {translations
-            .filter((i) => i)
-            .map((translation) => {
-              return (
-                <li
-                  key={translation.slug}
-                  className={
-                    translation.slug === slug ? `opacity-50` : undefined
-                  }
-                >
-                  <Link
-                    href={`/${translation.slug}`}
-                    locale={[translation.language, market].join(`-`)}
+        {translations.length > 1 ? (
+          <ul className="flex items-center justify-end gap-4 border-b border-gray-200 py-3 dark:border-gray-800">
+            {translations
+              .filter((i) => i)
+              .map((translation) => {
+                return (
+                  <li
+                    key={translation.slug}
+                    className={
+                      translation.slug === slug ? `opacity-50` : undefined
+                    }
                   >
-                    {translation.title}{' '}
-                    <span className="inline-block -translate-y-0.5 text-xs tracking-tight">
-                      ({translation.language.toUpperCase()})
-                    </span>
-                  </Link>
-                </li>
-              )
-            })}
-        </ul>
-      ) : null}
+                    <Link
+                      href={`/${translation.slug}`}
+                      locale={[translation.language, market].join(`-`)}
+                    >
+                      {translation.title}{' '}
+                      <span className="inline-block -translate-y-0.5 text-xs tracking-tight">
+                        ({translation.language.toUpperCase()})
+                      </span>
+                    </Link>
+                  </li>
+                )
+              })}
+          </ul>
+        ) : null}
       </Container>
       {content && content.length > 0 ? <PageBuilder rows={content} /> : null}
     </article>

components/PageBuilder/Bento/Bento1/BentoSubtitle.tsx

@@ -15,7 +15,7 @@ export function BentoSubtitle({
   return (
     <p
       className={clsx(
-        `text-xl text-magenta-500 dark:text-magenta-400 lg:text-2xl`,
+        `text-xl text-magenta-500 lg:text-2xl dark:text-magenta-400`,
         className
       )}
     >

components/PageBuilder/Bento/Bento1/index.tsx

@@ -18,7 +18,7 @@ export default function Index(props: {article: ArticleStub; index: number}) {
 
   if (isBentoNumberCallout(article)) {
     return (
-      <div className="border-t border-b border-gray-200 dark:border-gray-800">
+      <div className="border-b border-t border-gray-200 dark:border-gray-800">
         <BentoNumberCallout article={article} />
       </div>
     )

components/PageBuilder/Bento/Bento3.tsx

@@ -37,7 +37,7 @@ export default function Bento3(props: {
   )
   return (
     <div>
-      <div className="max-h-xl grid divide-y divide-gray-200 dark:divide-gray-800 lg:grid-cols-2 lg:divide-x lg:divide-y-0">
+      <div className="max-h-xl grid divide-y divide-gray-200 lg:grid-cols-2 lg:divide-x lg:divide-y-0 dark:divide-gray-800">
         {reverse ? high : cells}
         {reverse ? cells : high}
       </div>
@@ -82,7 +82,7 @@ export function Small({article}: {article: ArticleStub}) {
           <BentoSubtitle subtitle={article.subtitle} />
           <BentoTitle title={article.title} />
           {article?.summary?.length > 0 ? (
-            <div className="max-w-xl text-xl text-gray-700 dark:text-gray-200 lg:text-2xl">
+            <div className="max-w-xl text-xl text-gray-700 lg:text-2xl dark:text-gray-200">
               <StyledPortableText value={article?.summary} />
             </div>
           ) : null}
@@ -121,7 +121,7 @@ function High({first}: {first: ArticleStub}) {
               <BentoTitle title={first.title} />
 
               {first?.summary?.length > 0 ? (
-                <div className="flex flex-col gap-5 text-xl text-gray-700 dark:text-gray-200 lg:text-2xl">
+                <div className="flex flex-col gap-5 text-xl text-gray-700 lg:text-2xl dark:text-gray-200">
                   <StyledPortableText value={first?.summary} />
                 </div>
               ) : null}

components/PageBuilder/Bento/Bento3Wide.tsx

@@ -17,7 +17,7 @@ export default function Bento3Wide(props: {
   const even = index % 2 == 0
   const high = <Wide first={first} />
   const cells = (
-    <div className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800 lg:flex-row lg:items-stretch lg:divide-x lg:divide-y-0">
+    <div className="flex flex-col divide-y divide-gray-200 lg:flex-row lg:items-stretch lg:divide-x lg:divide-y-0 dark:divide-gray-800">
       {rest.map((article, articleIndex) => {
         const Component = isBentoNumberCallout(article)
           ? BentoNumberCallout
@@ -49,7 +49,7 @@ function CellWrapper({
       className={clsx(
         `flex items-center justify-center text-left lg:flex-col lg:items-start`,
         articleIndex > 0 &&
-          `border-gray-200 dark:border-gray-800 sm:max-lg:border-t lg:border-l`
+          `border-gray-200 sm:max-lg:border-t lg:border-l dark:border-gray-800`
       )}
     >
       {children}

components/PageBuilder/Bento/BentoEven.tsx

@@ -16,7 +16,7 @@ export default function BentoEven(props: {
 
   return (
     <div>
-      <div className="flex flex-col dark:divide-gray-800 lg:flex-row lg:flex-wrap">
+      <div className="flex flex-col lg:flex-row lg:flex-wrap dark:divide-gray-800">
         {articles.map((article, articleIndex) => {
           const Component = isBentoNumberCallout(article)
             ? BentoNumberCallout
@@ -44,7 +44,7 @@ function CellWrapper({
   return (
     <div
       className={clsx(
-        `border-gray-200 py-4 text-left dark:border-gray-800 sm:py-5 lg:w-1/2 lg:flex-col`,
+        `border-gray-200 py-4 text-left sm:py-5 lg:w-1/2 lg:flex-col dark:border-gray-800`,
         {
           'xl:w-1/4': articles.length === 4,
           'border-t': articleIndex !== 0,
@@ -63,7 +63,7 @@ function ArticleEven(props: {article: ArticleStub & KeyedObject}) {
   const hasText = !!(article.title || article.subtitle)
 
   return (
-    <Container className="relative flex gap-3 py-12 lg:py-24 lg:px-5">
+    <Container className="relative flex gap-3 py-12 lg:px-5 lg:py-24">
       {hasText ? (
         <div>
           {article?.icon ? (
@@ -75,7 +75,7 @@ function ArticleEven(props: {article: ArticleStub & KeyedObject}) {
             <h2 className="text-xl font-extrabold leading-tight tracking-tight">
               {article.title}
             </h2>
-            <p className="text-gray-600 dark:text-gray-200 lg:pr-12">
+            <p className="text-gray-600 lg:pr-12 dark:text-gray-200">
               {article.subtitle}
             </p>
           </div>

components/PageBuilder/Bento/BentoNumberCallout.tsx

@@ -19,7 +19,7 @@ export function BentoNumberCallout(props: {article: ArticleStub}) {
   const {article} = props
   return (
     <Container className="relative flex items-center justify-center">
-      <div className="flex flex-col items-center justify-center py-6 lg:gap-3 lg:py-12 lg:px-5">
+      <div className="flex flex-col items-center justify-center py-6 lg:gap-3 lg:px-5 lg:py-12">
         <BentoSubtitle subtitle={article.subtitle} />
         <h2 className="text-6xl font-extrabold leading-tight tracking-tight lg:text-8xl">
           {article.title}

components/PageBuilder/HeroSubtitle.tsx

@@ -6,7 +6,7 @@ export function HeroSubtitle({subtitle}: {subtitle?: string}) {
   }
 
   return (
-    <p className="text-xl text-magenta-500 dark:text-magenta-400 lg:text-2xl">
+    <p className="text-xl text-magenta-500 lg:text-2xl dark:text-magenta-400">
       {subtitle}
     </p>
   )

components/PageBuilder/HeroSummary.tsx

@@ -9,7 +9,7 @@ export function HeroSummary({summary}: {summary?: PortableTextBlock[]}) {
   }
 
   return (
-    <div className="max-w-xl text-xl text-gray-700 dark:text-gray-200 md:text-2xl">
+    <div className="max-w-xl text-xl text-gray-700 md:text-2xl dark:text-gray-200">
       <StyledPortableText value={summary} />
     </div>
   )

components/PageBuilder/Logos.tsx

@@ -29,7 +29,7 @@ export default function PageBuilderLogos(props: PageBuilderLogosProps) {
   return (
     <div>
       <Container className="relative w-full py-5 lg:py-7">
-        <div className="mb-4 text-center text-gray-700 dark:text-gray-200 lg:mb-5">
+        <div className="mb-4 text-center text-gray-700 lg:mb-5 dark:text-gray-200">
           Trusted by industry leaders
         </div>
 

components/PageBuilder/Quote.tsx

@@ -30,7 +30,7 @@ export default function PageBuilderQuote(props: QuoteProps) {
   return (
     <div>
       <Container className="relative flex max-w-4xl flex-col-reverse p-4 lg:flex-row lg:items-center">
-        <div className="mt-5 mb-5 flex flex-row gap-5 md:px-5">
+        <div className="mb-5 mt-5 flex flex-row gap-5 md:px-5">
           <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full border border-gray-200 dark:border-gray-800">
             <span
               className="font-serif text-5xl"

components/Title.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 
 export default function Title({title}) {
   return (
-    <h2 className="mt-8 mb-20 text-2xl font-extrabold leading-tight tracking-tight md:text-4xl">
+    <h2 className="mb-20 mt-8 text-2xl font-extrabold leading-tight tracking-tight md:text-4xl">
       {title}
     </h2>
   )