From e4f4d847cff4c5c94a246a5c3dd64d7a48c00521 Mon Sep 17 00:00:00 2001
From: HZ991 <hzha991@aucklanduni.ac.nz>
Date: Tue, 19 Nov 2024 16:25:21 +1100
Subject: [PATCH 1/6] add: brand font weight table

---
 .../brand-font-weight.component.tsx           | 127 ++++++++++++++++++
 .../brand-font-weight.preview.tsx             |  11 ++
 .../brand-font-weight.styles.ts               |   8 ++
 .../component-blocks/foundation-blocks.tsx    |   4 +
 .../font/design/brand-font/content.mdoc       |   2 +
 5 files changed, 152 insertions(+)
 create mode 100644 apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.component.tsx
 create mode 100644 apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.preview.tsx
 create mode 100644 apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.styles.ts

diff --git a/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.component.tsx b/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.component.tsx
new file mode 100644
index 000000000..cbd3bc6ec
--- /dev/null
+++ b/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.component.tsx
@@ -0,0 +1,127 @@
+'use client';
+
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableHeaderRow,
+  TableRow,
+} from '@westpac/ui';
+import clsx from 'clsx';
+import React from 'react';
+
+import { useBrand } from '@/app/design-system/hooks/use-brand';
+
+import { styles as BrandFontWeightStyles } from './brand-font-weight.styles';
+
+interface BrandFontWeightProps {
+  caption: string;
+  type: 'brand' | 'body';
+}
+
+const FONT_LIGHT = 'font-light';
+const FONT_REGULAR = 'font-regular';
+const FONT_BOLD = 'font-bold';
+
+const FONTS_PER_BRAND = {
+  bom: [
+    {
+      fontWeight: 'Light',
+      className: FONT_LIGHT,
+    },
+    {
+      fontWeight: 'Regular',
+      className: FONT_REGULAR,
+    },
+    {
+      fontWeight: 'Bold',
+      className: FONT_BOLD,
+    },
+  ],
+  bsa: [
+    {
+      fontWeight: 'Light',
+      className: FONT_LIGHT,
+    },
+    {
+      fontWeight: 'Bold',
+      className: FONT_BOLD,
+    },
+  ],
+  rams: [
+    {
+      fontWeight: 'Regular',
+      className: FONT_REGULAR,
+    },
+    {
+      fontWeight: 'Semi-bold', //600
+      className: 'font-semibold',
+    },
+    {
+      fontWeight: 'Bold', // 700 900
+      className: FONT_BOLD,
+    },
+  ],
+  stg: [
+    {
+      fontWeight: 'Bold',
+      className: FONT_BOLD,
+    },
+  ],
+  wbc: [
+    {
+      fontWeight: 'Bold',
+      className: FONT_BOLD,
+    },
+  ],
+  wbg: [
+    {
+      fontWeight: 'Light', //100 - 300
+      className: FONT_LIGHT,
+    },
+    {
+      fontWeight: 'Regular', //400 - 600
+      className: FONT_REGULAR,
+    },
+    {
+      fontWeight: 'Bold', //700 - 900
+      className: FONT_BOLD,
+    },
+  ],
+} as const;
+
+export function BrandFontWeight({ type, caption }: BrandFontWeightProps) {
+  const brand = useBrand();
+  const fonts = FONTS_PER_BRAND[brand?.key || 'wbc'];
+
+  return (
+    <div className="mb-5 mt-4 max-w-5xl bg-white p-6">
+      <Table>
+        <TableCaption>GEL brand font weight tokens</TableCaption>
+        <TableHeader>
+          <TableHeaderRow>
+            <TableHeaderCell>Token</TableHeaderCell>
+            <TableHeaderCell>Font weight</TableHeaderCell>
+            <TableHeaderCell>Tailwind class</TableHeaderCell>
+          </TableHeaderRow>
+        </TableHeader>
+        <TableBody>
+          {fonts.map(i => (
+            <TableRow key={i.className}>
+              <TableCell>
+                <span className={clsx('typography-brand-7', i.className)}>{i.className.replace('font-', '')}</span>
+              </TableCell>
+              <TableCell>
+                {i.fontWeight} {brand?.fontName}
+              </TableCell>
+              <TableCell>{i.className}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
diff --git a/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.preview.tsx b/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.preview.tsx
new file mode 100644
index 000000000..97e9d30db
--- /dev/null
+++ b/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.preview.tsx
@@ -0,0 +1,11 @@
+import { NotEditable, component, fields } from '@keystatic/core';
+
+export const brandFontWeight = component({
+  preview: () => (
+    <NotEditable>
+      <div>Brand Font Weight</div>
+    </NotEditable>
+  ),
+  label: 'Brand Font Weight',
+  schema: {},
+});
diff --git a/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.styles.ts b/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.styles.ts
new file mode 100644
index 000000000..1ee23cc0a
--- /dev/null
+++ b/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.styles.ts
@@ -0,0 +1,8 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    contentContainer: 'mb-5 mt-4 max-w-5xl bg-white p-6 pb-0',
+    tableContainer: 'relative -mx-6 -mt-6 border-muted-50 px-6 pb-6 pt-9',
+  },
+});
diff --git a/apps/site/src/components/component-blocks/foundation-blocks.tsx b/apps/site/src/components/component-blocks/foundation-blocks.tsx
index 245a3fe75..1d1c322f9 100644
--- a/apps/site/src/components/component-blocks/foundation-blocks.tsx
+++ b/apps/site/src/components/component-blocks/foundation-blocks.tsx
@@ -5,6 +5,8 @@ import { colors } from './colors/colors.preview';
 import { accessibilityDemo } from './components/accessibility-demo/accessibility-demo.preview';
 import { AvailabilityContent } from './components/availability-content/availability-content.component';
 import { availabilityContent } from './components/availability-content/availability-content.preview';
+import { BrandFontWeight } from './components/brand-font-weight/brand-font-weight.component';
+import { brandFontWeight } from './components/brand-font-weight/brand-font-weight.preview';
 import { designSystemBodyImage } from './components/design-system-body-image';
 import { LinkList } from './components/link-list';
 import { linkList } from './components/link-list/link-list.preview';
@@ -32,6 +34,7 @@ export const foundationBlocks = {
   shortCode,
   accessibilityDemo,
   availabilityContent,
+  brandFontWeight,
 };
 
 export const foundationBlocksComponents = {
@@ -48,4 +51,5 @@ export const foundationBlocksComponents = {
     </div>
   ),
   availabilityContent: (props: any) => <AvailabilityContent {...props} />,
+  brandFontWeight: (props: any) => <BrandFontWeight {...props} />,
 };
diff --git a/apps/site/src/content/design-system/foundation/font/design/brand-font/content.mdoc b/apps/site/src/content/design-system/foundation/font/design/brand-font/content.mdoc
index 91290bb0f..01dd7238f 100644
--- a/apps/site/src/content/design-system/foundation/font/design/brand-font/content.mdoc
+++ b/apps/site/src/content/design-system/foundation/font/design/brand-font/content.mdoc
@@ -5,3 +5,5 @@ Check the [Masterbrand Guidelines](https://westpacgroup.sharepoint.com/:f:/s/O36
 ***Note:*** *Never use a web font without confirmation that you have the correct licence agreement in place.*
 
 {% fonts /%}
+
+{% brandFontWeight /%}

From 48f0701a875db92f4e7202b58cd2ea81d5a9fc04 Mon Sep 17 00:00:00 2001
From: HZ991 <hzha991@aucklanduni.ac.nz>
Date: Tue, 19 Nov 2024 16:25:21 +1100
Subject: [PATCH 2/6] add: brand font weight table

---
 .../brand-font-weight.component.tsx           | 127 ++++++++++++++++++
 .../brand-font-weight.preview.tsx             |  11 ++
 .../brand-font-weight.styles.ts               |   8 ++
 .../component-blocks/foundation-blocks.tsx    |   4 +
 4 files changed, 150 insertions(+)
 create mode 100644 apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.component.tsx
 create mode 100644 apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.preview.tsx
 create mode 100644 apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.styles.ts

diff --git a/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.component.tsx b/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.component.tsx
new file mode 100644
index 000000000..cbd3bc6ec
--- /dev/null
+++ b/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.component.tsx
@@ -0,0 +1,127 @@
+'use client';
+
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableHeaderRow,
+  TableRow,
+} from '@westpac/ui';
+import clsx from 'clsx';
+import React from 'react';
+
+import { useBrand } from '@/app/design-system/hooks/use-brand';
+
+import { styles as BrandFontWeightStyles } from './brand-font-weight.styles';
+
+interface BrandFontWeightProps {
+  caption: string;
+  type: 'brand' | 'body';
+}
+
+const FONT_LIGHT = 'font-light';
+const FONT_REGULAR = 'font-regular';
+const FONT_BOLD = 'font-bold';
+
+const FONTS_PER_BRAND = {
+  bom: [
+    {
+      fontWeight: 'Light',
+      className: FONT_LIGHT,
+    },
+    {
+      fontWeight: 'Regular',
+      className: FONT_REGULAR,
+    },
+    {
+      fontWeight: 'Bold',
+      className: FONT_BOLD,
+    },
+  ],
+  bsa: [
+    {
+      fontWeight: 'Light',
+      className: FONT_LIGHT,
+    },
+    {
+      fontWeight: 'Bold',
+      className: FONT_BOLD,
+    },
+  ],
+  rams: [
+    {
+      fontWeight: 'Regular',
+      className: FONT_REGULAR,
+    },
+    {
+      fontWeight: 'Semi-bold', //600
+      className: 'font-semibold',
+    },
+    {
+      fontWeight: 'Bold', // 700 900
+      className: FONT_BOLD,
+    },
+  ],
+  stg: [
+    {
+      fontWeight: 'Bold',
+      className: FONT_BOLD,
+    },
+  ],
+  wbc: [
+    {
+      fontWeight: 'Bold',
+      className: FONT_BOLD,
+    },
+  ],
+  wbg: [
+    {
+      fontWeight: 'Light', //100 - 300
+      className: FONT_LIGHT,
+    },
+    {
+      fontWeight: 'Regular', //400 - 600
+      className: FONT_REGULAR,
+    },
+    {
+      fontWeight: 'Bold', //700 - 900
+      className: FONT_BOLD,
+    },
+  ],
+} as const;
+
+export function BrandFontWeight({ type, caption }: BrandFontWeightProps) {
+  const brand = useBrand();
+  const fonts = FONTS_PER_BRAND[brand?.key || 'wbc'];
+
+  return (
+    <div className="mb-5 mt-4 max-w-5xl bg-white p-6">
+      <Table>
+        <TableCaption>GEL brand font weight tokens</TableCaption>
+        <TableHeader>
+          <TableHeaderRow>
+            <TableHeaderCell>Token</TableHeaderCell>
+            <TableHeaderCell>Font weight</TableHeaderCell>
+            <TableHeaderCell>Tailwind class</TableHeaderCell>
+          </TableHeaderRow>
+        </TableHeader>
+        <TableBody>
+          {fonts.map(i => (
+            <TableRow key={i.className}>
+              <TableCell>
+                <span className={clsx('typography-brand-7', i.className)}>{i.className.replace('font-', '')}</span>
+              </TableCell>
+              <TableCell>
+                {i.fontWeight} {brand?.fontName}
+              </TableCell>
+              <TableCell>{i.className}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
diff --git a/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.preview.tsx b/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.preview.tsx
new file mode 100644
index 000000000..97e9d30db
--- /dev/null
+++ b/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.preview.tsx
@@ -0,0 +1,11 @@
+import { NotEditable, component, fields } from '@keystatic/core';
+
+export const brandFontWeight = component({
+  preview: () => (
+    <NotEditable>
+      <div>Brand Font Weight</div>
+    </NotEditable>
+  ),
+  label: 'Brand Font Weight',
+  schema: {},
+});
diff --git a/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.styles.ts b/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.styles.ts
new file mode 100644
index 000000000..1ee23cc0a
--- /dev/null
+++ b/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.styles.ts
@@ -0,0 +1,8 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    contentContainer: 'mb-5 mt-4 max-w-5xl bg-white p-6 pb-0',
+    tableContainer: 'relative -mx-6 -mt-6 border-muted-50 px-6 pb-6 pt-9',
+  },
+});
diff --git a/apps/site/src/components/component-blocks/foundation-blocks.tsx b/apps/site/src/components/component-blocks/foundation-blocks.tsx
index 245a3fe75..1d1c322f9 100644
--- a/apps/site/src/components/component-blocks/foundation-blocks.tsx
+++ b/apps/site/src/components/component-blocks/foundation-blocks.tsx
@@ -5,6 +5,8 @@ import { colors } from './colors/colors.preview';
 import { accessibilityDemo } from './components/accessibility-demo/accessibility-demo.preview';
 import { AvailabilityContent } from './components/availability-content/availability-content.component';
 import { availabilityContent } from './components/availability-content/availability-content.preview';
+import { BrandFontWeight } from './components/brand-font-weight/brand-font-weight.component';
+import { brandFontWeight } from './components/brand-font-weight/brand-font-weight.preview';
 import { designSystemBodyImage } from './components/design-system-body-image';
 import { LinkList } from './components/link-list';
 import { linkList } from './components/link-list/link-list.preview';
@@ -32,6 +34,7 @@ export const foundationBlocks = {
   shortCode,
   accessibilityDemo,
   availabilityContent,
+  brandFontWeight,
 };
 
 export const foundationBlocksComponents = {
@@ -48,4 +51,5 @@ export const foundationBlocksComponents = {
     </div>
   ),
   availabilityContent: (props: any) => <AvailabilityContent {...props} />,
+  brandFontWeight: (props: any) => <BrandFontWeight {...props} />,
 };

From 3d95021a12fe4cbe48390cf2cba14052f2ca77e4 Mon Sep 17 00:00:00 2001
From: HZ991 <hzha991@aucklanduni.ac.nz>
Date: Wed, 20 Nov 2024 13:11:18 +1100
Subject: [PATCH 3/6] Add: combined fonts and fontWeight components

---
 .../table-of-contents.component.tsx           |   4 +-
 apps/site/src/app/layout.tsx                  |   2 +-
 .../brand-font-weight.component.tsx           | 127 ------------------
 .../brand-font-weight.preview.tsx             |  11 --
 .../brand-font-weight.styles.ts               |   8 --
 .../fonts/fonts.component.tsx                 |  84 +++++++++---
 .../component-blocks/fonts/fonts.preview.tsx  |  13 +-
 .../component-blocks/fonts/fonts.styles.ts    |   8 ++
 .../component-blocks/foundation-blocks.tsx    |   2 +-
 .../font/design/brand-font/content.mdoc       |   4 +-
 .../src/components/symbol/symbol.stories.tsx  |   8 +-
 .../stories/foundation/colours.stories.tsx    |  16 +--
 12 files changed, 103 insertions(+), 184 deletions(-)
 delete mode 100644 apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.component.tsx
 delete mode 100644 apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.preview.tsx
 delete mode 100644 apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.styles.ts
 create mode 100644 apps/site/src/components/component-blocks/fonts/fonts.styles.ts

diff --git a/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx b/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx
index 9517cde09..397984f45 100644
--- a/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx
+++ b/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx
@@ -10,7 +10,7 @@ import { type TableOfContentsProps } from './table-of-contents.types';
 export function TableOfContents({ contents = [] }: TableOfContentsProps) {
   return (
     <nav>
-      <h2 className="typography-body-9 border-border border-b pb-2 font-medium">Page content</h2>
+      <h2 className="typography-body-9 border-b border-border pb-2 font-medium">Page content</h2>
       <List icon={ArrowDownRightIcon} type="icon" look="primary" className="mt-3 [&_li]:my-1.5">
         {contents.map(({ title }) => {
           const id = title
@@ -33,7 +33,7 @@ function NavLink({ href, children }: { children?: React.ReactNode; href: string
   const pathname = usePathname();
 
   return (
-    <Link className="focus-visible:focus-outline ml-1 block hover:underline" href={`${pathname}${href}`} replace scroll>
+    <Link className="ml-1 block hover:underline focus-visible:focus-outline" href={`${pathname}${href}`} replace scroll>
       {children}
     </Link>
   );
diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
index a67fada86..8bbb532f6 100644
--- a/apps/site/src/app/layout.tsx
+++ b/apps/site/src/app/layout.tsx
@@ -22,7 +22,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body>
         {children}
         {isEnabled && (
-          <div className="right-15 absolute top-3 z-[999]">
+          <div className="absolute right-15 top-3 z-[999]">
             <form method="post" action="/preview/end">
               <button className="text-white">End preview</button>
             </form>
diff --git a/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.component.tsx b/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.component.tsx
deleted file mode 100644
index cbd3bc6ec..000000000
--- a/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.component.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-'use client';
-
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHeader,
-  TableHeaderCell,
-  TableHeaderRow,
-  TableRow,
-} from '@westpac/ui';
-import clsx from 'clsx';
-import React from 'react';
-
-import { useBrand } from '@/app/design-system/hooks/use-brand';
-
-import { styles as BrandFontWeightStyles } from './brand-font-weight.styles';
-
-interface BrandFontWeightProps {
-  caption: string;
-  type: 'brand' | 'body';
-}
-
-const FONT_LIGHT = 'font-light';
-const FONT_REGULAR = 'font-regular';
-const FONT_BOLD = 'font-bold';
-
-const FONTS_PER_BRAND = {
-  bom: [
-    {
-      fontWeight: 'Light',
-      className: FONT_LIGHT,
-    },
-    {
-      fontWeight: 'Regular',
-      className: FONT_REGULAR,
-    },
-    {
-      fontWeight: 'Bold',
-      className: FONT_BOLD,
-    },
-  ],
-  bsa: [
-    {
-      fontWeight: 'Light',
-      className: FONT_LIGHT,
-    },
-    {
-      fontWeight: 'Bold',
-      className: FONT_BOLD,
-    },
-  ],
-  rams: [
-    {
-      fontWeight: 'Regular',
-      className: FONT_REGULAR,
-    },
-    {
-      fontWeight: 'Semi-bold', //600
-      className: 'font-semibold',
-    },
-    {
-      fontWeight: 'Bold', // 700 900
-      className: FONT_BOLD,
-    },
-  ],
-  stg: [
-    {
-      fontWeight: 'Bold',
-      className: FONT_BOLD,
-    },
-  ],
-  wbc: [
-    {
-      fontWeight: 'Bold',
-      className: FONT_BOLD,
-    },
-  ],
-  wbg: [
-    {
-      fontWeight: 'Light', //100 - 300
-      className: FONT_LIGHT,
-    },
-    {
-      fontWeight: 'Regular', //400 - 600
-      className: FONT_REGULAR,
-    },
-    {
-      fontWeight: 'Bold', //700 - 900
-      className: FONT_BOLD,
-    },
-  ],
-} as const;
-
-export function BrandFontWeight({ type, caption }: BrandFontWeightProps) {
-  const brand = useBrand();
-  const fonts = FONTS_PER_BRAND[brand?.key || 'wbc'];
-
-  return (
-    <div className="mb-5 mt-4 max-w-5xl bg-white p-6">
-      <Table>
-        <TableCaption>GEL brand font weight tokens</TableCaption>
-        <TableHeader>
-          <TableHeaderRow>
-            <TableHeaderCell>Token</TableHeaderCell>
-            <TableHeaderCell>Font weight</TableHeaderCell>
-            <TableHeaderCell>Tailwind class</TableHeaderCell>
-          </TableHeaderRow>
-        </TableHeader>
-        <TableBody>
-          {fonts.map(i => (
-            <TableRow key={i.className}>
-              <TableCell>
-                <span className={clsx('typography-brand-7', i.className)}>{i.className.replace('font-', '')}</span>
-              </TableCell>
-              <TableCell>
-                {i.fontWeight} {brand?.fontName}
-              </TableCell>
-              <TableCell>{i.className}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </div>
-  );
-}
diff --git a/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.preview.tsx b/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.preview.tsx
deleted file mode 100644
index 97e9d30db..000000000
--- a/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.preview.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { NotEditable, component, fields } from '@keystatic/core';
-
-export const brandFontWeight = component({
-  preview: () => (
-    <NotEditable>
-      <div>Brand Font Weight</div>
-    </NotEditable>
-  ),
-  label: 'Brand Font Weight',
-  schema: {},
-});
diff --git a/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.styles.ts b/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.styles.ts
deleted file mode 100644
index 1ee23cc0a..000000000
--- a/apps/site/src/components/component-blocks/components/brand-font-weight/brand-font-weight.styles.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { tv } from 'tailwind-variants';
-
-export const styles = tv({
-  slots: {
-    contentContainer: 'mb-5 mt-4 max-w-5xl bg-white p-6 pb-0',
-    tableContainer: 'relative -mx-6 -mt-6 border-muted-50 px-6 pb-6 pt-9',
-  },
-});
diff --git a/apps/site/src/components/component-blocks/fonts/fonts.component.tsx b/apps/site/src/components/component-blocks/fonts/fonts.component.tsx
index ec97f8092..e24737666 100644
--- a/apps/site/src/components/component-blocks/fonts/fonts.component.tsx
+++ b/apps/site/src/components/component-blocks/fonts/fonts.component.tsx
@@ -1,8 +1,26 @@
 'use client';
 
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableHeaderRow,
+  TableRow,
+} from '@westpac/ui';
+import clsx from 'clsx';
+
 import { useBrand } from '@/app/design-system/hooks/use-brand';
 import { ComponentTitle } from '@/components/document-renderer/component-title';
 
+import { styles as FontsStyles } from './fonts.styles';
+
+interface FontProps {
+  view: 'default' | 'table';
+}
+
 const FONT_LIGHT = 'font-light';
 const FONT_REGULAR = 'font-regular';
 const FONT_BOLD = 'font-bold';
@@ -74,24 +92,56 @@ const FONTS_PER_BRAND = {
   ],
 } as const;
 
-export const Fonts = () => {
+export const Fonts = ({ view = 'default' }: FontProps) => {
   const brand = useBrand();
   const fonts = FONTS_PER_BRAND[brand?.key || 'wbc'];
 
-  return (
-    <div className="flex flex-col gap-2 bg-white p-6">
-      {fonts.map(({ fontWeight, className }) => (
-        <div key={fontWeight} className={className}>
-          <ComponentTitle className={className}>
-            {brand?.fontName} {fontWeight}
-          </ComponentTitle>
-          <p className="typography-brand-4 break-words">abcdefghijklmnopqrstuvwxyz</p>
-          <p className="typography-brand-4 break-words">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
-          <p className="typography-brand-4 break-words">1234567890</p>
-          <p className="typography-brand-4 break-words">!@#$¢%&*©®™£</p>
-          <p className="typography-brand-4 break-words">fi fl ff</p>
-        </div>
-      ))}
-    </div>
-  );
+  const styles = FontsStyles({});
+
+  if (view === 'default') {
+    return (
+      <div className={styles.default({})}>
+        {fonts.map(({ fontWeight, className }) => (
+          <div key={fontWeight} className={className}>
+            <ComponentTitle className={className}>
+              {brand?.fontName} {fontWeight}
+            </ComponentTitle>
+            <p className="typography-brand-4 break-words">abcdefghijklmnopqrstuvwxyz</p>
+            <p className="typography-brand-4 break-words">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
+            <p className="typography-brand-4 break-words">1234567890</p>
+            <p className="typography-brand-4 break-words">!@#$¢%&*©®™£</p>
+            <p className="typography-brand-4 break-words">fi fl ff</p>
+          </div>
+        ))}
+      </div>
+    );
+  } else {
+    return (
+      <div className={styles.table({})}>
+        <Table>
+          <TableCaption>GEL brand font weight tokens</TableCaption>
+          <TableHeader>
+            <TableHeaderRow>
+              <TableHeaderCell>Token</TableHeaderCell>
+              <TableHeaderCell>Font weight</TableHeaderCell>
+              <TableHeaderCell>Tailwind class</TableHeaderCell>
+            </TableHeaderRow>
+          </TableHeader>
+          <TableBody>
+            {fonts.map(i => (
+              <TableRow key={i.className}>
+                <TableCell>
+                  <span className={clsx('typography-brand-7', i.className)}>{i.className.replace('font-', '')}</span>
+                </TableCell>
+                <TableCell>
+                  {i.fontWeight} {brand?.fontName}
+                </TableCell>
+                <TableCell>{i.className}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    );
+  }
 };
diff --git a/apps/site/src/components/component-blocks/fonts/fonts.preview.tsx b/apps/site/src/components/component-blocks/fonts/fonts.preview.tsx
index 569110e70..5659bbecf 100644
--- a/apps/site/src/components/component-blocks/fonts/fonts.preview.tsx
+++ b/apps/site/src/components/component-blocks/fonts/fonts.preview.tsx
@@ -1,4 +1,4 @@
-import { NotEditable, component } from '@keystatic/core';
+import { NotEditable, component, fields } from '@keystatic/core';
 
 export const fonts = component({
   preview: () => (
@@ -7,5 +7,14 @@ export const fonts = component({
     </NotEditable>
   ),
   label: 'Fonts',
-  schema: {},
+  schema: {
+    view: fields.select({
+      label: 'Display Type',
+      options: [
+        { label: 'Default', value: 'default' },
+        { label: 'Table', value: 'table' },
+      ],
+      defaultValue: 'default',
+    }),
+  },
 });
diff --git a/apps/site/src/components/component-blocks/fonts/fonts.styles.ts b/apps/site/src/components/component-blocks/fonts/fonts.styles.ts
new file mode 100644
index 000000000..37f3de89e
--- /dev/null
+++ b/apps/site/src/components/component-blocks/fonts/fonts.styles.ts
@@ -0,0 +1,8 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    default: 'flex flex-col gap-2 bg-white p-6',
+    table: 'mb-5 mt-4 max-w-5xl bg-white p-6',
+  },
+});
diff --git a/apps/site/src/components/component-blocks/foundation-blocks.tsx b/apps/site/src/components/component-blocks/foundation-blocks.tsx
index 1d1c322f9..0ed6780bc 100644
--- a/apps/site/src/components/component-blocks/foundation-blocks.tsx
+++ b/apps/site/src/components/component-blocks/foundation-blocks.tsx
@@ -38,7 +38,7 @@ export const foundationBlocks = {
 };
 
 export const foundationBlocksComponents = {
-  fonts: () => <Fonts />,
+  fonts: (props: any) => <Fonts {...props} />,
   icons: () => <Icons />,
   logos: () => <Logos />,
   pictograms: () => <Pictograms />,
diff --git a/apps/site/src/content/design-system/foundation/font/design/brand-font/content.mdoc b/apps/site/src/content/design-system/foundation/font/design/brand-font/content.mdoc
index 01dd7238f..42eae98d8 100644
--- a/apps/site/src/content/design-system/foundation/font/design/brand-font/content.mdoc
+++ b/apps/site/src/content/design-system/foundation/font/design/brand-font/content.mdoc
@@ -4,6 +4,4 @@ Check the [Masterbrand Guidelines](https://westpacgroup.sharepoint.com/:f:/s/O36
 
 ***Note:*** *Never use a web font without confirmation that you have the correct licence agreement in place.*
 
-{% fonts /%}
-
-{% brandFontWeight /%}
+{% fonts view="default" /%}
diff --git a/packages/ui/src/components/symbol/symbol.stories.tsx b/packages/ui/src/components/symbol/symbol.stories.tsx
index 2f85ca468..1cfe16e80 100644
--- a/packages/ui/src/components/symbol/symbol.stories.tsx
+++ b/packages/ui/src/components/symbol/symbol.stories.tsx
@@ -97,12 +97,12 @@ export const AllLogos = () => {
         {Object.entries(multibrandLargeLogos).map(([key, Logo]) => (
           <>
             <div key={`${key}-${align}`} className=" flex flex-col items-center justify-end">
-              <Logo className="border-border box-content border border-dashed" />
+              <Logo className="box-content border border-dashed border-border" />
               <p className="mt-2">{`<${key} />`}</p>
             </div>
             {align.map(align => (
               <div key={`${key}-${align}`} className=" flex flex-col items-center justify-end">
-                <Logo align={align} className="border-border box-content border border-dashed" />
+                <Logo align={align} className="box-content border border-dashed border-border" />
                 <p className="mt-2">{`<${key} align=${align} />`}</p>
               </div>
             ))}
@@ -114,12 +114,12 @@ export const AllLogos = () => {
         {Object.entries(multibrandSmallLogos).map(([key, Logo]) => (
           <>
             <div key={`${key}-${align}`} className=" flex flex-col items-center justify-end">
-              <Logo className="border-border box-content border border-dashed" />
+              <Logo className="box-content border border-dashed border-border" />
               <p className="mt-2">{`<${key} />`}</p>
             </div>
             {align.map(align => (
               <div key={`${key}-${align}`} className=" flex flex-col items-center justify-end">
-                <Logo align={align} className="border-border box-content border border-dashed" />
+                <Logo align={align} className="box-content border border-dashed border-border" />
                 <p className="mt-2">{`<${key} align=${align} />`}</p>
               </div>
             ))}
diff --git a/packages/ui/src/stories/foundation/colours.stories.tsx b/packages/ui/src/stories/foundation/colours.stories.tsx
index 85e0ba130..003c90b69 100644
--- a/packages/ui/src/stories/foundation/colours.stories.tsx
+++ b/packages/ui/src/stories/foundation/colours.stories.tsx
@@ -317,7 +317,7 @@ export const BrandColors: Story = {
               {/* NOTE: Below disable tailwind classname warning for string interpolation */}
               {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
               <div className={`bg-${color}${tintString} h-[80px]`} />
-              <div className="divide-border border-border divide-y border p-2">
+              <div className="divide-y divide-border border border-border p-2">
                 <div className="pb-2 font-bold">{color}</div>
                 <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-${color}${tintString}`}</div>
                 {/* Below comments to get rid of type nightmare when trying to get hex value */}
@@ -361,7 +361,7 @@ export const ReservedColors = () => {
             {/* NOTE: Below disable tailwind classname warning for string interpolation */}
             {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
             <div className={`bg-${color}${tintString} h-[80px]`} />
-            <div className="divide-border border-border divide-y border p-2">
+            <div className="divide-y divide-border border border-border p-2">
               <div className="pb-2 font-bold">{color}</div>
               <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-${color}${tintString}`}</div>
               {/* Below comments to get rid of type nightmare when trying to get hex value */}
@@ -383,15 +383,15 @@ export const ReservedWithNoTints = () => (
   <div className="flex">
     <div className="w-[33%] min-w-[200px] max-w-[300px] p-2">
       <div className={`h-[80px] bg-black`} />
-      <div className="divide-border border-border divide-y border p-2">
+      <div className="divide-y divide-border border border-border p-2">
         <div className="pb-2 font-bold">black</div>
         <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-black`}</div>
         <div className="typography-body-10 pt-2 font-light">#000</div>
       </div>
     </div>
     <div className="w-[33%] min-w-[200px] max-w-[300px] p-2">
-      <div className={`border-border h-[80px] border bg-white`} />
-      <div className="divide-border border-border divide-y border p-2">
+      <div className={`h-[80px] border border-border bg-white`} />
+      <div className="divide-y divide-border border border-border p-2">
         <div className="pb-2 font-bold">white</div>
         <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-white`}</div>
         <div className="typography-body-10 pt-2 font-light">#FFF</div>
@@ -432,7 +432,7 @@ export const DataVisualisationColors: Story = {
                 {/* NOTE: Below disable tailwind classname warning for string interpolation */}
                 {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
                 <div className={`bg-${color} h-[80px]`} />
-                <div className="divide-border border-border divide-y border p-2">
+                <div className="divide-y divide-border border border-border p-2">
                   <div className="pb-2 font-bold">{color}</div>
                   <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-${color}`}</div>
                   {/* Below comments to get rid of type nightmare when trying to get hex value */}
@@ -449,7 +449,7 @@ export const DataVisualisationColors: Story = {
                 {/* NOTE: Below disable tailwind classname warning for string interpolation */}
                 {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
                 <div className={`bg-${color} h-[80px]`} />
-                <div className="divide-border border-border divide-y border p-2">
+                <div className="divide-y divide-border border border-border p-2">
                   <div className="pb-2 font-bold">{color}</div>
                   <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-${color}`}</div>
                   {/* Below comments to get rid of type nightmare when trying to get hex value */}
@@ -466,7 +466,7 @@ export const DataVisualisationColors: Story = {
                 {/* NOTE: Below disable tailwind classname warning for string interpolation */}
                 {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
                 <div className={`bg-${color}/30 h-[80px]`} />
-                <div className="divide-border border-border divide-y border p-2">
+                <div className="divide-y divide-border border border-border p-2">
                   <div className="pb-2 font-bold">{`${color}/30`}</div>
                   <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-${color}/30`}</div>
                   {/* Below comments to get rid of type nightmare when trying to get hex value */}

From d6bf286d5bc04497f03d59cc4aa91050d56e237e Mon Sep 17 00:00:00 2001
From: HZ991 <hzha991@aucklanduni.ac.nz>
Date: Thu, 21 Nov 2024 13:34:20 +1100
Subject: [PATCH 4/6] fix: removed unused imorts

---
 .../src/components/component-blocks/foundation-blocks.tsx     | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/apps/site/src/components/component-blocks/foundation-blocks.tsx b/apps/site/src/components/component-blocks/foundation-blocks.tsx
index 0ed6780bc..5dc4ffa17 100644
--- a/apps/site/src/components/component-blocks/foundation-blocks.tsx
+++ b/apps/site/src/components/component-blocks/foundation-blocks.tsx
@@ -5,8 +5,6 @@ import { colors } from './colors/colors.preview';
 import { accessibilityDemo } from './components/accessibility-demo/accessibility-demo.preview';
 import { AvailabilityContent } from './components/availability-content/availability-content.component';
 import { availabilityContent } from './components/availability-content/availability-content.preview';
-import { BrandFontWeight } from './components/brand-font-weight/brand-font-weight.component';
-import { brandFontWeight } from './components/brand-font-weight/brand-font-weight.preview';
 import { designSystemBodyImage } from './components/design-system-body-image';
 import { LinkList } from './components/link-list';
 import { linkList } from './components/link-list/link-list.preview';
@@ -34,7 +32,6 @@ export const foundationBlocks = {
   shortCode,
   accessibilityDemo,
   availabilityContent,
-  brandFontWeight,
 };
 
 export const foundationBlocksComponents = {
@@ -51,5 +48,4 @@ export const foundationBlocksComponents = {
     </div>
   ),
   availabilityContent: (props: any) => <AvailabilityContent {...props} />,
-  brandFontWeight: (props: any) => <BrandFontWeight {...props} />,
 };

From 2d7cf993a91c4d1ab98e124eae9e803a75eb2b60 Mon Sep 17 00:00:00 2001
From: HZ991 <hzha991@aucklanduni.ac.nz>
Date: Thu, 21 Nov 2024 14:53:50 +1100
Subject: [PATCH 5/6] update: tailwind version

---
 apps/playground/package.json |   2 +-
 apps/site/package.json       |   2 +-
 packages/ui/package.json     |   4 +-
 pnpm-lock.yaml               | 211 ++++++++++++-----------------------
 4 files changed, 75 insertions(+), 144 deletions(-)

diff --git a/apps/playground/package.json b/apps/playground/package.json
index 19a929335..8ed92980b 100644
--- a/apps/playground/package.json
+++ b/apps/playground/package.json
@@ -22,7 +22,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.15",
     "typescript": "^5"
   }
 }
diff --git a/apps/site/package.json b/apps/site/package.json
index 5267f7c51..755b4d7fa 100644
--- a/apps/site/package.json
+++ b/apps/site/package.json
@@ -45,7 +45,7 @@
     "eslint-config-turbo": "^0.0.7",
     "postcss": "~8.4.31",
     "tailwind-variants": "~0.2.1",
-    "tailwindcss": "~3.3.2",
+    "tailwindcss": "~3.4.15",
     "typescript": "^5.5.4"
   },
   "overrides": {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index e6c97a34d..168af0949 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -276,7 +276,7 @@
     "shx": "^0.3.4",
     "storybook": "^7.6.4",
     "tailwind-variants": "~0.2.1",
-    "tailwindcss": "~3.3.2",
+    "tailwindcss": "~3.4.15",
     "tailwindcss-themer": "~3.1.0",
     "ts-node": "~10.9.1",
     "typescript": "^5.5.4",
@@ -305,7 +305,7 @@
     "colorjs.io": "~0.4.5",
     "react": ">=18.2.0",
     "tailwind-variants": "~0.2.1",
-    "tailwindcss": "~3.3.2",
+    "tailwindcss": "~3.4.15",
     "tailwindcss-themer": "~3.1.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a07e9085d..a31f83f1d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -46,7 +46,7 @@ importers:
     dependencies:
       next:
         specifier: 14.2.10
-        version: 14.2.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 14.2.10(@babel/core@7.0.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
         specifier: ^18
         version: 18.2.0
@@ -76,8 +76,8 @@ importers:
         specifier: ^8
         version: 8.4.39
       tailwindcss:
-        specifier: ^3.4.1
-        version: 3.4.4(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.1.6))
+        specifier: ^3.4.15
+        version: 3.4.15(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.1.6))
       typescript:
         specifier: ^5
         version: 5.1.6
@@ -95,7 +95,7 @@ importers:
         version: 4.1.1
       next:
         specifier: 14.2.10
-        version: 14.2.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 14.2.10(@babel/core@7.0.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
         specifier: ^18
         version: 18.2.0
@@ -241,10 +241,10 @@ importers:
         version: 8.4.31
       tailwind-variants:
         specifier: ~0.2.1
-        version: 0.2.1(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4)))
+        version: 0.2.1(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4)))
       tailwindcss:
-        specifier: ~3.3.2
-        version: 3.3.2(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4))
+        specifier: ~3.4.15
+        version: 3.4.15(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4))
       typescript:
         specifier: ^5.5.4
         version: 5.5.4
@@ -295,7 +295,7 @@ importers:
         version: 0.18.0(eslint@8.57.0)
       eslint-plugin-tailwindcss:
         specifier: ^3.17.4
-        version: 3.17.4(tailwindcss@3.4.10(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4)))
+        version: 3.17.4(tailwindcss@3.4.15(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4)))
       eslint-plugin-typescript-sort-keys:
         specifier: ^2.3.0
         version: 2.3.0(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4)
@@ -4976,9 +4976,6 @@ packages:
   caniuse-lite@1.0.30001589:
     resolution: {integrity: sha512-vNQWS6kI+q6sBlHbh71IIeC+sRwK2N3EDySc/updIGhIee2x5z00J4c1242/5/d6EpEMdOnk/m+6tuk4/tcsqg==}
 
-  caniuse-lite@1.0.30001651:
-    resolution: {integrity: sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==}
-
   caniuse-lite@1.0.30001662:
     resolution: {integrity: sha512-sgMUVwLmGseH8ZIrm1d51UbrhqMCH3jvS7gF/M6byuHOnKyLOBL7W8yz5V02OHwgLGA36o/AFhWzzh4uc5aqTA==}
 
@@ -6932,10 +6929,6 @@ packages:
     resolution: {integrity: sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jiti@1.21.0:
-    resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
-    hasBin: true
-
   jiti@1.21.6:
     resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
     hasBin: true
@@ -7914,6 +7907,9 @@ packages:
   picocolors@1.1.0:
     resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
 
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
   picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
@@ -8024,12 +8020,6 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
-  postcss-nested@6.0.1:
-    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-
   postcss-nested@6.2.0:
     resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
     engines: {node: '>=12.0'}
@@ -8042,10 +8032,6 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
-  postcss-selector-parser@6.0.15:
-    resolution: {integrity: sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==}
-    engines: {node: '>=4'}
-
   postcss-selector-parser@6.1.0:
     resolution: {integrity: sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==}
     engines: {node: '>=4'}
@@ -9017,13 +9003,8 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
-  tailwindcss@3.4.10:
-    resolution: {integrity: sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-
-  tailwindcss@3.4.4:
-    resolution: {integrity: sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==}
+  tailwindcss@3.4.15:
+    resolution: {integrity: sha512-r4MeXnfBmSOuKUWmXe6h2CcyfzJCEk4F0pptO5jlnYSIViUkVmsawj80N5h2lO3gwcmSb4n3PuN+e+GC1Guylw==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
@@ -16369,8 +16350,6 @@ snapshots:
 
   caniuse-lite@1.0.30001589: {}
 
-  caniuse-lite@1.0.30001651: {}
-
   caniuse-lite@1.0.30001662: {}
 
   capital-case@1.0.4:
@@ -17254,7 +17233,7 @@ snapshots:
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0)
       eslint-plugin-react: 7.34.3(eslint@8.57.0)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0)
@@ -17419,9 +17398,9 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
       hasown: 2.0.2
-      is-core-module: 2.15.1
+      is-core-module: 2.14.0
       is-glob: 4.0.3
       minimatch: 3.1.2
       object.fromentries: 2.0.8
@@ -17448,7 +17427,7 @@ snapshots:
       eslint-import-resolver-node: 0.3.9
       eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
       hasown: 2.0.2
-      is-core-module: 2.14.0
+      is-core-module: 2.15.1
       is-glob: 4.0.3
       minimatch: 3.1.2
       object.fromentries: 2.0.8
@@ -17550,11 +17529,11 @@ snapshots:
       - supports-color
       - typescript
 
-  eslint-plugin-tailwindcss@3.17.4(tailwindcss@3.4.10(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4))):
+  eslint-plugin-tailwindcss@3.17.4(tailwindcss@3.4.15(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4))):
     dependencies:
       fast-glob: 3.3.2
       postcss: 8.4.39
-      tailwindcss: 3.4.10(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4))
+      tailwindcss: 3.4.15(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4))
 
   eslint-plugin-turbo@0.0.7(eslint@8.57.0):
     dependencies:
@@ -18837,8 +18816,6 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jiti@1.21.0: {}
-
   jiti@1.21.6: {}
 
   js-string-escape@1.0.1: {}
@@ -19638,31 +19615,6 @@ snapshots:
   neo-async@2.6.2: {}
 
   next@14.2.10(@babel/core@7.0.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
-    dependencies:
-      '@next/env': 14.2.10
-      '@swc/helpers': 0.5.5
-      busboy: 1.6.0
-      caniuse-lite: 1.0.30001651
-      graceful-fs: 4.2.11
-      postcss: 8.4.31
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      styled-jsx: 5.1.1(@babel/core@7.0.0)(react@18.2.0)
-    optionalDependencies:
-      '@next/swc-darwin-arm64': 14.2.10
-      '@next/swc-darwin-x64': 14.2.10
-      '@next/swc-linux-arm64-gnu': 14.2.10
-      '@next/swc-linux-arm64-musl': 14.2.10
-      '@next/swc-linux-x64-gnu': 14.2.10
-      '@next/swc-linux-x64-musl': 14.2.10
-      '@next/swc-win32-arm64-msvc': 14.2.10
-      '@next/swc-win32-ia32-msvc': 14.2.10
-      '@next/swc-win32-x64-msvc': 14.2.10
-    transitivePeerDependencies:
-      - '@babel/core'
-      - babel-plugin-macros
-
-  next@14.2.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@next/env': 14.2.10
       '@swc/helpers': 0.5.5
@@ -20070,6 +20022,8 @@ snapshots:
 
   picocolors@1.1.0: {}
 
+  picocolors@1.1.1: {}
+
   picomatch@2.3.1: {}
 
   picomatch@4.0.2: {}
@@ -20133,13 +20087,6 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  postcss-import@15.1.0(postcss@8.4.39):
-    dependencies:
-      postcss: 8.4.39
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.8
-
   postcss-import@15.1.0(postcss@8.4.47):
     dependencies:
       postcss: 8.4.47
@@ -20147,11 +20094,6 @@ snapshots:
       read-cache: 1.0.0
       resolve: 1.22.8
 
-  postcss-js@4.0.1(postcss@8.4.39):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.39
-
   postcss-js@4.0.1(postcss@8.4.47):
     dependencies:
       camelcase-css: 2.0.1
@@ -20165,36 +20107,36 @@ snapshots:
       postcss: 8.4.31
       ts-node: 10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4)
 
-  postcss-load-config@4.0.2(postcss@8.4.39)(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4)):
+  postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4)):
     dependencies:
       lilconfig: 3.1.1
       yaml: 2.3.4
     optionalDependencies:
-      postcss: 8.4.39
+      postcss: 8.4.47
       ts-node: 10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4)
 
-  postcss-load-config@4.0.2(postcss@8.4.39)(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4)):
+  postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4)):
     dependencies:
       lilconfig: 3.1.1
       yaml: 2.3.4
     optionalDependencies:
-      postcss: 8.4.39
+      postcss: 8.4.47
       ts-node: 10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4)
 
-  postcss-load-config@4.0.2(postcss@8.4.39)(ts-node@10.9.2(@types/node@20.0.0)(typescript@5.1.6)):
+  postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.0.0)(typescript@5.1.6)):
     dependencies:
       lilconfig: 3.1.1
       yaml: 2.3.4
     optionalDependencies:
-      postcss: 8.4.39
+      postcss: 8.4.47
       ts-node: 10.9.2(@types/node@20.0.0)(typescript@5.1.6)
 
-  postcss-load-config@4.0.2(postcss@8.4.39)(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.1.6)):
+  postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.1.6)):
     dependencies:
       lilconfig: 3.1.1
       yaml: 2.3.4
     optionalDependencies:
-      postcss: 8.4.39
+      postcss: 8.4.47
       ts-node: 10.9.2(@types/node@20.12.14)(typescript@5.1.6)
 
   postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4)):
@@ -20236,11 +20178,6 @@ snapshots:
       icss-utils: 5.1.0(postcss@8.4.47)
       postcss: 8.4.47
 
-  postcss-nested@6.0.1(postcss@8.4.39):
-    dependencies:
-      postcss: 8.4.39
-      postcss-selector-parser: 6.1.0
-
   postcss-nested@6.2.0(postcss@8.4.47):
     dependencies:
       postcss: 8.4.47
@@ -20252,11 +20189,6 @@ snapshots:
       postcss: 8.4.31
       thenby: 1.3.4
 
-  postcss-selector-parser@6.0.15:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
   postcss-selector-parser@6.1.0:
     dependencies:
       cssesc: 3.0.0
@@ -21469,10 +21401,10 @@ snapshots:
       tailwind-merge: 2.5.2
       tailwindcss: 3.3.2(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4))
 
-  tailwind-variants@0.2.1(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4))):
+  tailwind-variants@0.2.1(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4))):
     dependencies:
       tailwind-merge: 2.5.2
-      tailwindcss: 3.3.2(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4))
+      tailwindcss: 3.4.15(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4))
 
   tailwindcss-themer@3.1.0(tailwindcss@3.3.2(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4))):
     dependencies:
@@ -21486,87 +21418,86 @@ snapshots:
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
-      chokidar: 3.5.3
+      chokidar: 3.6.0
       didyoumean: 1.2.2
       dlv: 1.1.3
       fast-glob: 3.3.2
       glob-parent: 6.0.2
       is-glob: 4.0.3
-      jiti: 1.21.0
+      jiti: 1.21.6
       lilconfig: 2.1.0
       micromatch: 4.0.6
       normalize-path: 3.0.0
       object-hash: 3.0.0
-      picocolors: 1.0.0
-      postcss: 8.4.39
-      postcss-import: 15.1.0(postcss@8.4.39)
-      postcss-js: 4.0.1(postcss@8.4.39)
-      postcss-load-config: 4.0.2(postcss@8.4.39)(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4))
-      postcss-nested: 6.0.1(postcss@8.4.39)
-      postcss-selector-parser: 6.0.15
+      picocolors: 1.1.0
+      postcss: 8.4.47
+      postcss-import: 15.1.0(postcss@8.4.47)
+      postcss-js: 4.0.1(postcss@8.4.47)
+      postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4))
+      postcss-nested: 6.2.0(postcss@8.4.47)
+      postcss-selector-parser: 6.1.2
       postcss-value-parser: 4.2.0
       resolve: 1.22.8
       sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4)):
+  tailwindcss@3.3.2(ts-node@10.9.2(@types/node@20.0.0)(typescript@5.1.6)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
-      chokidar: 3.5.3
+      chokidar: 3.6.0
       didyoumean: 1.2.2
       dlv: 1.1.3
       fast-glob: 3.3.2
       glob-parent: 6.0.2
       is-glob: 4.0.3
-      jiti: 1.21.0
+      jiti: 1.21.6
       lilconfig: 2.1.0
       micromatch: 4.0.6
       normalize-path: 3.0.0
       object-hash: 3.0.0
-      picocolors: 1.0.0
-      postcss: 8.4.39
-      postcss-import: 15.1.0(postcss@8.4.39)
-      postcss-js: 4.0.1(postcss@8.4.39)
-      postcss-load-config: 4.0.2(postcss@8.4.39)(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4))
-      postcss-nested: 6.0.1(postcss@8.4.39)
-      postcss-selector-parser: 6.0.15
+      picocolors: 1.1.0
+      postcss: 8.4.47
+      postcss-import: 15.1.0(postcss@8.4.47)
+      postcss-js: 4.0.1(postcss@8.4.47)
+      postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.0.0)(typescript@5.1.6))
+      postcss-nested: 6.2.0(postcss@8.4.47)
+      postcss-selector-parser: 6.1.2
       postcss-value-parser: 4.2.0
       resolve: 1.22.8
       sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.3.2(ts-node@10.9.2(@types/node@20.0.0)(typescript@5.1.6)):
+  tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
-      chokidar: 3.5.3
+      chokidar: 3.6.0
       didyoumean: 1.2.2
       dlv: 1.1.3
       fast-glob: 3.3.2
       glob-parent: 6.0.2
       is-glob: 4.0.3
-      jiti: 1.21.0
+      jiti: 1.21.6
       lilconfig: 2.1.0
       micromatch: 4.0.6
       normalize-path: 3.0.0
       object-hash: 3.0.0
-      picocolors: 1.0.0
-      postcss: 8.4.39
-      postcss-import: 15.1.0(postcss@8.4.39)
-      postcss-js: 4.0.1(postcss@8.4.39)
-      postcss-load-config: 4.0.2(postcss@8.4.39)(ts-node@10.9.2(@types/node@20.0.0)(typescript@5.1.6))
-      postcss-nested: 6.0.1(postcss@8.4.39)
-      postcss-selector-parser: 6.0.15
-      postcss-value-parser: 4.2.0
+      picocolors: 1.1.1
+      postcss: 8.4.47
+      postcss-import: 15.1.0(postcss@8.4.47)
+      postcss-js: 4.0.1(postcss@8.4.47)
+      postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4))
+      postcss-nested: 6.2.0(postcss@8.4.47)
+      postcss-selector-parser: 6.1.2
       resolve: 1.22.8
       sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.4.10(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4)):
+  tailwindcss@3.4.15(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.1.6)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -21581,11 +21512,11 @@ snapshots:
       micromatch: 4.0.6
       normalize-path: 3.0.0
       object-hash: 3.0.0
-      picocolors: 1.1.0
+      picocolors: 1.1.1
       postcss: 8.4.47
       postcss-import: 15.1.0(postcss@8.4.47)
       postcss-js: 4.0.1(postcss@8.4.47)
-      postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4))
+      postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.1.6))
       postcss-nested: 6.2.0(postcss@8.4.47)
       postcss-selector-parser: 6.1.2
       resolve: 1.22.8
@@ -21593,7 +21524,7 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.1.6)):
+  tailwindcss@3.4.15(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -21608,13 +21539,13 @@ snapshots:
       micromatch: 4.0.6
       normalize-path: 3.0.0
       object-hash: 3.0.0
-      picocolors: 1.0.1
-      postcss: 8.4.39
-      postcss-import: 15.1.0(postcss@8.4.39)
-      postcss-js: 4.0.1(postcss@8.4.39)
-      postcss-load-config: 4.0.2(postcss@8.4.39)(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.1.6))
-      postcss-nested: 6.0.1(postcss@8.4.39)
-      postcss-selector-parser: 6.1.0
+      picocolors: 1.1.1
+      postcss: 8.4.47
+      postcss-import: 15.1.0(postcss@8.4.47)
+      postcss-js: 4.0.1(postcss@8.4.47)
+      postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4))
+      postcss-nested: 6.2.0(postcss@8.4.47)
+      postcss-selector-parser: 6.1.2
       resolve: 1.22.8
       sucrase: 3.35.0
     transitivePeerDependencies:

From e0780fb4fd9b6cfee37ed1aef699a8cd91e31ca0 Mon Sep 17 00:00:00 2001
From: HZ991 <hzha991@aucklanduni.ac.nz>
Date: Thu, 21 Nov 2024 14:53:50 +1100
Subject: [PATCH 6/6] update: tailwind version

---
 apps/playground/package.json |   2 +-
 apps/site/package.json       |   2 +-
 packages/ui/package.json     |   4 +-
 pnpm-lock.yaml               | 261 +++++++++++++++--------------------
 4 files changed, 113 insertions(+), 156 deletions(-)

diff --git a/apps/playground/package.json b/apps/playground/package.json
index 19a929335..8ed92980b 100644
--- a/apps/playground/package.json
+++ b/apps/playground/package.json
@@ -22,7 +22,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.15",
     "typescript": "^5"
   }
 }
diff --git a/apps/site/package.json b/apps/site/package.json
index 5267f7c51..755b4d7fa 100644
--- a/apps/site/package.json
+++ b/apps/site/package.json
@@ -45,7 +45,7 @@
     "eslint-config-turbo": "^0.0.7",
     "postcss": "~8.4.31",
     "tailwind-variants": "~0.2.1",
-    "tailwindcss": "~3.3.2",
+    "tailwindcss": "~3.4.15",
     "typescript": "^5.5.4"
   },
   "overrides": {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index e6c97a34d..168af0949 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -276,7 +276,7 @@
     "shx": "^0.3.4",
     "storybook": "^7.6.4",
     "tailwind-variants": "~0.2.1",
-    "tailwindcss": "~3.3.2",
+    "tailwindcss": "~3.4.15",
     "tailwindcss-themer": "~3.1.0",
     "ts-node": "~10.9.1",
     "typescript": "^5.5.4",
@@ -305,7 +305,7 @@
     "colorjs.io": "~0.4.5",
     "react": ">=18.2.0",
     "tailwind-variants": "~0.2.1",
-    "tailwindcss": "~3.3.2",
+    "tailwindcss": "~3.4.15",
     "tailwindcss-themer": "~3.1.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a07e9085d..c7fc0af0f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -46,7 +46,7 @@ importers:
     dependencies:
       next:
         specifier: 14.2.10
-        version: 14.2.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 14.2.10(@babel/core@7.0.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
         specifier: ^18
         version: 18.2.0
@@ -76,8 +76,8 @@ importers:
         specifier: ^8
         version: 8.4.39
       tailwindcss:
-        specifier: ^3.4.1
-        version: 3.4.4(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.1.6))
+        specifier: ^3.4.15
+        version: 3.4.15(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.1.6))
       typescript:
         specifier: ^5
         version: 5.1.6
@@ -95,7 +95,7 @@ importers:
         version: 4.1.1
       next:
         specifier: 14.2.10
-        version: 14.2.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 14.2.10(@babel/core@7.0.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
         specifier: ^18
         version: 18.2.0
@@ -241,10 +241,10 @@ importers:
         version: 8.4.31
       tailwind-variants:
         specifier: ~0.2.1
-        version: 0.2.1(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4)))
+        version: 0.2.1(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4)))
       tailwindcss:
-        specifier: ~3.3.2
-        version: 3.3.2(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4))
+        specifier: ~3.4.15
+        version: 3.4.15(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4))
       typescript:
         specifier: ^5.5.4
         version: 5.5.4
@@ -295,7 +295,7 @@ importers:
         version: 0.18.0(eslint@8.57.0)
       eslint-plugin-tailwindcss:
         specifier: ^3.17.4
-        version: 3.17.4(tailwindcss@3.4.10(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4)))
+        version: 3.17.4(tailwindcss@3.4.15(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4)))
       eslint-plugin-typescript-sort-keys:
         specifier: ^2.3.0
         version: 2.3.0(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4)
@@ -499,13 +499,13 @@ importers:
         version: 7.6.4(bufferutil@4.0.8)
       tailwind-variants:
         specifier: ~0.2.1
-        version: 0.2.1(tailwindcss@3.3.2(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4)))
+        version: 0.2.1(tailwindcss@3.4.15(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4)))
       tailwindcss:
-        specifier: ~3.3.2
-        version: 3.3.2(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4))
+        specifier: ~3.4.15
+        version: 3.4.15(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4))
       tailwindcss-themer:
         specifier: ~3.1.0
-        version: 3.1.0(tailwindcss@3.3.2(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4)))
+        version: 3.1.0(tailwindcss@3.4.15(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4)))
       ts-node:
         specifier: ~10.9.1
         version: 10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4)
@@ -4976,9 +4976,6 @@ packages:
   caniuse-lite@1.0.30001589:
     resolution: {integrity: sha512-vNQWS6kI+q6sBlHbh71IIeC+sRwK2N3EDySc/updIGhIee2x5z00J4c1242/5/d6EpEMdOnk/m+6tuk4/tcsqg==}
 
-  caniuse-lite@1.0.30001651:
-    resolution: {integrity: sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==}
-
   caniuse-lite@1.0.30001662:
     resolution: {integrity: sha512-sgMUVwLmGseH8ZIrm1d51UbrhqMCH3jvS7gF/M6byuHOnKyLOBL7W8yz5V02OHwgLGA36o/AFhWzzh4uc5aqTA==}
 
@@ -6932,10 +6929,6 @@ packages:
     resolution: {integrity: sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jiti@1.21.0:
-    resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
-    hasBin: true
-
   jiti@1.21.6:
     resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
     hasBin: true
@@ -7914,6 +7907,9 @@ packages:
   picocolors@1.1.0:
     resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
 
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
   picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
@@ -8024,12 +8020,6 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
-  postcss-nested@6.0.1:
-    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-
   postcss-nested@6.2.0:
     resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
     engines: {node: '>=12.0'}
@@ -8042,10 +8032,6 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
-  postcss-selector-parser@6.0.15:
-    resolution: {integrity: sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==}
-    engines: {node: '>=4'}
-
   postcss-selector-parser@6.1.0:
     resolution: {integrity: sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==}
     engines: {node: '>=4'}
@@ -9017,13 +9003,8 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
-  tailwindcss@3.4.10:
-    resolution: {integrity: sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-
-  tailwindcss@3.4.4:
-    resolution: {integrity: sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==}
+  tailwindcss@3.4.15:
+    resolution: {integrity: sha512-r4MeXnfBmSOuKUWmXe6h2CcyfzJCEk4F0pptO5jlnYSIViUkVmsawj80N5h2lO3gwcmSb4n3PuN+e+GC1Guylw==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
@@ -9961,7 +9942,7 @@ snapshots:
   '@babel/code-frame@7.24.7':
     dependencies:
       '@babel/highlight': 7.24.7
-      picocolors: 1.1.0
+      picocolors: 1.1.1
 
   '@babel/compat-data@7.23.5': {}
 
@@ -10239,7 +10220,7 @@ snapshots:
       '@babel/helper-validator-identifier': 7.24.7
       chalk: 2.4.2
       js-tokens: 4.0.0
-      picocolors: 1.1.0
+      picocolors: 1.1.1
 
   '@babel/parser@7.23.9':
     dependencies:
@@ -16369,8 +16350,6 @@ snapshots:
 
   caniuse-lite@1.0.30001589: {}
 
-  caniuse-lite@1.0.30001651: {}
-
   caniuse-lite@1.0.30001662: {}
 
   capital-case@1.0.4:
@@ -17217,7 +17196,7 @@ snapshots:
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0)
       eslint-plugin-react: 7.34.3(eslint@8.57.0)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0)
@@ -17254,7 +17233,7 @@ snapshots:
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0)
       eslint-plugin-react: 7.34.3(eslint@8.57.0)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0)
@@ -17410,6 +17389,33 @@ snapshots:
       - supports-color
 
   eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
+    dependencies:
+      array-includes: 3.1.8
+      array.prototype.findlastindex: 1.2.5
+      array.prototype.flat: 1.3.2
+      array.prototype.flatmap: 1.3.2
+      debug: 3.2.7
+      doctrine: 2.1.0
+      eslint: 8.57.0
+      eslint-import-resolver-node: 0.3.9
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
+      hasown: 2.0.2
+      is-core-module: 2.14.0
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      object.fromentries: 2.0.8
+      object.groupby: 1.0.3
+      object.values: 1.2.0
+      semver: 6.3.1
+      tsconfig-paths: 3.15.0
+    optionalDependencies:
+      '@typescript-eslint/parser': 5.51.0(eslint@8.57.0)(typescript@5.1.6)
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.1.6))(eslint@8.57.0):
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlastindex: 1.2.5
@@ -17448,7 +17454,7 @@ snapshots:
       eslint-import-resolver-node: 0.3.9
       eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.51.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
       hasown: 2.0.2
-      is-core-module: 2.14.0
+      is-core-module: 2.15.1
       is-glob: 4.0.3
       minimatch: 3.1.2
       object.fromentries: 2.0.8
@@ -17550,11 +17556,11 @@ snapshots:
       - supports-color
       - typescript
 
-  eslint-plugin-tailwindcss@3.17.4(tailwindcss@3.4.10(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4))):
+  eslint-plugin-tailwindcss@3.17.4(tailwindcss@3.4.15(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4))):
     dependencies:
       fast-glob: 3.3.2
       postcss: 8.4.39
-      tailwindcss: 3.4.10(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4))
+      tailwindcss: 3.4.15(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4))
 
   eslint-plugin-turbo@0.0.7(eslint@8.57.0):
     dependencies:
@@ -18837,8 +18843,6 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jiti@1.21.0: {}
-
   jiti@1.21.6: {}
 
   js-string-escape@1.0.1: {}
@@ -19638,31 +19642,6 @@ snapshots:
   neo-async@2.6.2: {}
 
   next@14.2.10(@babel/core@7.0.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
-    dependencies:
-      '@next/env': 14.2.10
-      '@swc/helpers': 0.5.5
-      busboy: 1.6.0
-      caniuse-lite: 1.0.30001651
-      graceful-fs: 4.2.11
-      postcss: 8.4.31
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      styled-jsx: 5.1.1(@babel/core@7.0.0)(react@18.2.0)
-    optionalDependencies:
-      '@next/swc-darwin-arm64': 14.2.10
-      '@next/swc-darwin-x64': 14.2.10
-      '@next/swc-linux-arm64-gnu': 14.2.10
-      '@next/swc-linux-arm64-musl': 14.2.10
-      '@next/swc-linux-x64-gnu': 14.2.10
-      '@next/swc-linux-x64-musl': 14.2.10
-      '@next/swc-win32-arm64-msvc': 14.2.10
-      '@next/swc-win32-ia32-msvc': 14.2.10
-      '@next/swc-win32-x64-msvc': 14.2.10
-    transitivePeerDependencies:
-      - '@babel/core'
-      - babel-plugin-macros
-
-  next@14.2.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@next/env': 14.2.10
       '@swc/helpers': 0.5.5
@@ -20070,6 +20049,8 @@ snapshots:
 
   picocolors@1.1.0: {}
 
+  picocolors@1.1.1: {}
+
   picomatch@2.3.1: {}
 
   picomatch@4.0.2: {}
@@ -20133,13 +20114,6 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  postcss-import@15.1.0(postcss@8.4.39):
-    dependencies:
-      postcss: 8.4.39
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.8
-
   postcss-import@15.1.0(postcss@8.4.47):
     dependencies:
       postcss: 8.4.47
@@ -20147,11 +20121,6 @@ snapshots:
       read-cache: 1.0.0
       resolve: 1.22.8
 
-  postcss-js@4.0.1(postcss@8.4.39):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.39
-
   postcss-js@4.0.1(postcss@8.4.47):
     dependencies:
       camelcase-css: 2.0.1
@@ -20165,36 +20134,36 @@ snapshots:
       postcss: 8.4.31
       ts-node: 10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4)
 
-  postcss-load-config@4.0.2(postcss@8.4.39)(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4)):
+  postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4)):
     dependencies:
       lilconfig: 3.1.1
       yaml: 2.3.4
     optionalDependencies:
-      postcss: 8.4.39
+      postcss: 8.4.47
       ts-node: 10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4)
 
-  postcss-load-config@4.0.2(postcss@8.4.39)(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4)):
+  postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4)):
     dependencies:
       lilconfig: 3.1.1
       yaml: 2.3.4
     optionalDependencies:
-      postcss: 8.4.39
+      postcss: 8.4.47
       ts-node: 10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4)
 
-  postcss-load-config@4.0.2(postcss@8.4.39)(ts-node@10.9.2(@types/node@20.0.0)(typescript@5.1.6)):
+  postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.0.0)(typescript@5.1.6)):
     dependencies:
       lilconfig: 3.1.1
       yaml: 2.3.4
     optionalDependencies:
-      postcss: 8.4.39
+      postcss: 8.4.47
       ts-node: 10.9.2(@types/node@20.0.0)(typescript@5.1.6)
 
-  postcss-load-config@4.0.2(postcss@8.4.39)(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.1.6)):
+  postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.1.6)):
     dependencies:
       lilconfig: 3.1.1
       yaml: 2.3.4
     optionalDependencies:
-      postcss: 8.4.39
+      postcss: 8.4.47
       ts-node: 10.9.2(@types/node@20.12.14)(typescript@5.1.6)
 
   postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4)):
@@ -20236,11 +20205,6 @@ snapshots:
       icss-utils: 5.1.0(postcss@8.4.47)
       postcss: 8.4.47
 
-  postcss-nested@6.0.1(postcss@8.4.39):
-    dependencies:
-      postcss: 8.4.39
-      postcss-selector-parser: 6.1.0
-
   postcss-nested@6.2.0(postcss@8.4.47):
     dependencies:
       postcss: 8.4.47
@@ -20252,11 +20216,6 @@ snapshots:
       postcss: 8.4.31
       thenby: 1.3.4
 
-  postcss-selector-parser@6.0.15:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
   postcss-selector-parser@6.1.0:
     dependencies:
       cssesc: 3.0.0
@@ -21464,109 +21423,107 @@ snapshots:
 
   tailwind-merge@2.5.2: {}
 
-  tailwind-variants@0.2.1(tailwindcss@3.3.2(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4))):
+  tailwind-variants@0.2.1(tailwindcss@3.4.15(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4))):
     dependencies:
       tailwind-merge: 2.5.2
-      tailwindcss: 3.3.2(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4))
+      tailwindcss: 3.4.15(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4))
 
-  tailwind-variants@0.2.1(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4))):
+  tailwind-variants@0.2.1(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4))):
     dependencies:
       tailwind-merge: 2.5.2
-      tailwindcss: 3.3.2(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4))
+      tailwindcss: 3.4.15(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4))
 
-  tailwindcss-themer@3.1.0(tailwindcss@3.3.2(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4))):
+  tailwindcss-themer@3.1.0(tailwindcss@3.4.15(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4))):
     dependencies:
       color: 4.2.3
       just-unique: 4.2.0
       lodash.merge: 4.6.2
       lodash.mergewith: 4.6.2
-      tailwindcss: 3.3.2(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4))
+      tailwindcss: 3.4.15(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4))
 
-  tailwindcss@3.3.2(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4)):
+  tailwindcss@3.3.2(ts-node@10.9.2(@types/node@20.0.0)(typescript@5.1.6)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
-      chokidar: 3.5.3
+      chokidar: 3.6.0
       didyoumean: 1.2.2
       dlv: 1.1.3
       fast-glob: 3.3.2
       glob-parent: 6.0.2
       is-glob: 4.0.3
-      jiti: 1.21.0
+      jiti: 1.21.6
       lilconfig: 2.1.0
       micromatch: 4.0.6
       normalize-path: 3.0.0
       object-hash: 3.0.0
-      picocolors: 1.0.0
-      postcss: 8.4.39
-      postcss-import: 15.1.0(postcss@8.4.39)
-      postcss-js: 4.0.1(postcss@8.4.39)
-      postcss-load-config: 4.0.2(postcss@8.4.39)(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4))
-      postcss-nested: 6.0.1(postcss@8.4.39)
-      postcss-selector-parser: 6.0.15
+      picocolors: 1.1.0
+      postcss: 8.4.47
+      postcss-import: 15.1.0(postcss@8.4.47)
+      postcss-js: 4.0.1(postcss@8.4.47)
+      postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.0.0)(typescript@5.1.6))
+      postcss-nested: 6.2.0(postcss@8.4.47)
+      postcss-selector-parser: 6.1.2
       postcss-value-parser: 4.2.0
       resolve: 1.22.8
       sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4)):
+  tailwindcss@3.4.15(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
-      chokidar: 3.5.3
+      chokidar: 3.6.0
       didyoumean: 1.2.2
       dlv: 1.1.3
       fast-glob: 3.3.2
       glob-parent: 6.0.2
       is-glob: 4.0.3
-      jiti: 1.21.0
+      jiti: 1.21.6
       lilconfig: 2.1.0
       micromatch: 4.0.6
       normalize-path: 3.0.0
       object-hash: 3.0.0
-      picocolors: 1.0.0
-      postcss: 8.4.39
-      postcss-import: 15.1.0(postcss@8.4.39)
-      postcss-js: 4.0.1(postcss@8.4.39)
-      postcss-load-config: 4.0.2(postcss@8.4.39)(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4))
-      postcss-nested: 6.0.1(postcss@8.4.39)
-      postcss-selector-parser: 6.0.15
-      postcss-value-parser: 4.2.0
+      picocolors: 1.1.1
+      postcss: 8.4.47
+      postcss-import: 15.1.0(postcss@8.4.47)
+      postcss-js: 4.0.1(postcss@8.4.47)
+      postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.1(@swc/core@1.3.35)(@types/node@20.12.12)(typescript@5.5.4))
+      postcss-nested: 6.2.0(postcss@8.4.47)
+      postcss-selector-parser: 6.1.2
       resolve: 1.22.8
       sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.3.2(ts-node@10.9.2(@types/node@20.0.0)(typescript@5.1.6)):
+  tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
-      chokidar: 3.5.3
+      chokidar: 3.6.0
       didyoumean: 1.2.2
       dlv: 1.1.3
       fast-glob: 3.3.2
       glob-parent: 6.0.2
       is-glob: 4.0.3
-      jiti: 1.21.0
+      jiti: 1.21.6
       lilconfig: 2.1.0
       micromatch: 4.0.6
       normalize-path: 3.0.0
       object-hash: 3.0.0
-      picocolors: 1.0.0
-      postcss: 8.4.39
-      postcss-import: 15.1.0(postcss@8.4.39)
-      postcss-js: 4.0.1(postcss@8.4.39)
-      postcss-load-config: 4.0.2(postcss@8.4.39)(ts-node@10.9.2(@types/node@20.0.0)(typescript@5.1.6))
-      postcss-nested: 6.0.1(postcss@8.4.39)
-      postcss-selector-parser: 6.0.15
-      postcss-value-parser: 4.2.0
+      picocolors: 1.1.1
+      postcss: 8.4.47
+      postcss-import: 15.1.0(postcss@8.4.47)
+      postcss-js: 4.0.1(postcss@8.4.47)
+      postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.3.35)(@types/node@17.0.12)(typescript@5.5.4))
+      postcss-nested: 6.2.0(postcss@8.4.47)
+      postcss-selector-parser: 6.1.2
       resolve: 1.22.8
       sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.4.10(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4)):
+  tailwindcss@3.4.15(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.1.6)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -21581,11 +21538,11 @@ snapshots:
       micromatch: 4.0.6
       normalize-path: 3.0.0
       object-hash: 3.0.0
-      picocolors: 1.1.0
+      picocolors: 1.1.1
       postcss: 8.4.47
       postcss-import: 15.1.0(postcss@8.4.47)
       postcss-js: 4.0.1(postcss@8.4.47)
-      postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4))
+      postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.1.6))
       postcss-nested: 6.2.0(postcss@8.4.47)
       postcss-selector-parser: 6.1.2
       resolve: 1.22.8
@@ -21593,7 +21550,7 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.4.4(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.1.6)):
+  tailwindcss@3.4.15(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -21608,13 +21565,13 @@ snapshots:
       micromatch: 4.0.6
       normalize-path: 3.0.0
       object-hash: 3.0.0
-      picocolors: 1.0.1
-      postcss: 8.4.39
-      postcss-import: 15.1.0(postcss@8.4.39)
-      postcss-js: 4.0.1(postcss@8.4.39)
-      postcss-load-config: 4.0.2(postcss@8.4.39)(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.1.6))
-      postcss-nested: 6.0.1(postcss@8.4.39)
-      postcss-selector-parser: 6.1.0
+      picocolors: 1.1.1
+      postcss: 8.4.47
+      postcss-import: 15.1.0(postcss@8.4.47)
+      postcss-js: 4.0.1(postcss@8.4.47)
+      postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.12.14)(typescript@5.5.4))
+      postcss-nested: 6.2.0(postcss@8.4.47)
+      postcss-selector-parser: 6.1.2
       resolve: 1.22.8
       sucrase: 3.35.0
     transitivePeerDependencies:
@@ -22117,7 +22074,7 @@ snapshots:
     dependencies:
       browserslist: 4.23.3
       escalade: 3.2.0
-      picocolors: 1.1.0
+      picocolors: 1.1.1
 
   upper-case-first@2.0.2:
     dependencies: