chore: replace tremor with shadcn charts (#1130)

apps/web/next.config.js

···
       // "@libsql/hrana-client",
       // "better-sqlite3"
     ],
-    optimizePackageImports: ["@tremor/react"],
     /**
      * The default stale revalidate time for SWR requests is 1year.
      * We can't rely on the default because the status pages will always return the

apps/web/package.json

···
     "@auth/core": "0.34.1",
     "@auth/drizzle-adapter": "1.7.0",
     "@google-cloud/tasks": "4.0.1",
-    "@headlessui/react": "1.7.17",
     "@hookform/resolvers": "3.3.1",
     "@libsql/client": "0.14.0",
     "@openstatus/analytics": "workspace:*",
···
     "@tanstack/react-query": "5.59.0",
     "@tanstack/react-query-devtools": "5.59.0",
     "@tanstack/react-table": "8.10.3",
-    "@tremor/react": "3.17.4",
     "@trpc/client": "11.0.0-rc.553",
     "@trpc/next": "11.0.0-rc.553",
     "@trpc/react-query": "11.0.0-rc.553",
···
     "@content-collections/core": "0.7.3",
     "@content-collections/mdx": "0.2.0",
     "@content-collections/next": "0.2.3",
-    "@headlessui/tailwindcss": "0.2.0",
     "@openstatus/tsconfig": "workspace:*",
     "@types/node": "20.14.8",
     "@types/react": "18.3.3",

apps/web/src/app/status-page/[domain]/monitors/page.tsx

···
                     </Button>
                   </div>
                   {group ? (
-                    <SimpleChart data={group.data} region="ams" />
+                    <SimpleChart
+                      data={group.data.map((d) => ({
+                        timestamp: d.timestamp,
+                        // REMINDER: select first region as default
+                        // TODO: we could create an average of all regions instead
+                        latency: d[monitor.regions?.[0]],
+                      }))}
+                    />
                   ) : (
                     <p>missing data</p>
                   )}

apps/web/src/components/data-table/single-region/columns.tsx

···
 import { DataTableColumnHeader } from "./data-table-column-header";
 
 export interface RegionWithMetrics {
-  data: (Partial<Record<Region, string>> & { timestamp: string })[];
+  data: (Partial<Record<Region, number>> & { timestamp: string })[];
   metrics?: ResponseTimeMetricsByRegion;
   region: Region;
 }
···
     cell: ({ row }) => {
       const data = row.getValue("data") as RegionWithMetrics["data"];
       const region = row.getValue("region") as Region;
-      return <SimpleChart data={data} region={region} />;
+      return (
+        <SimpleChart
+          data={data.map((d) => ({
+            timestamp: d.timestamp,
+            latency: d[region],
+          }))}
+        />
+      );
     },
     meta: {
       headerClassName: "min-w-[300px] w-full",
···
     cell: ({ row }) => {
       const p50 = row.getValue("p50") as number;
       return (
-        <div className="whitespace-nowrap">
-          <span className="font-mono">{formatNumber(p50)}</span>{" "}
-          <span className="font-normal text-muted-foreground text-xs">ms</span>
+        <div className="whitespace-nowrap font-mono">
+          <span>{formatNumber(p50)}</span>
+          <span className="text-muted-foreground text-xs">ms</span>
         </div>
       );
     },
···
     cell: ({ row }) => {
       const p95 = row.getValue("p95") as number;
       return (
-        <div className="whitespace-nowrap">
-          <span className="font-mono">{formatNumber(p95)}</span>{" "}
-          <span className="font-normal text-muted-foreground text-xs">ms</span>
+        <div className="whitespace-nowrap font-mono">
+          <span>{formatNumber(p95)}</span>
+          <span className="text-muted-foreground text-xs">ms</span>
         </div>
       );
     },
···
     cell: ({ row }) => {
       const p99 = row.getValue("p99") as number;
       return (
-        <div className="whitespace-nowrap">
-          <span className="font-mono">{formatNumber(p99)}</span>{" "}
-          <span className="font-normal text-muted-foreground text-xs">ms</span>
+        <div className="whitespace-nowrap font-mono">
+          <span>{formatNumber(p99)}</span>
+          <span className="text-muted-foreground text-xs">ms</span>
         </div>
       );
     },

apps/web/src/components/monitor-charts/chart.tsx

···
 "use client";
 
-import type { CustomTooltipProps, EventProps } from "@tremor/react";
-import { LineChart } from "@tremor/react";
-import { useState } from "react";
-
-import { cn } from "@/lib/utils";
 import type { Region } from "@openstatus/db/src/schema/constants";
-import { dataFormatter, regionFormatter } from "./utils";
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@openstatus/ui";
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+import { regionFormatter } from "./utils";
 
 interface ChartProps {
   data: { timestamp: string; [key: string]: string | number }[];
···
 }
 
 export function Chart({ data, regions }: ChartProps) {
-  const [value, setValue] = useState<EventProps | null>(null);
   return (
-    <LineChart
-      data={data}
-      yAxisWidth={64}
-      index="timestamp"
-      categories={regions}
-      colors={[
-        "blue",
-        "amber",
-        "cyan",
-        "yellow",
-        "red",
-        "lime",
-        "green",
-        "purple",
-        "indigo",
-        "orange",
-        "sky",
-        "rose",
-        "violet",
-        "teal",
-        "fuchsia",
-        "pink",
-        "emerald",
-      ]}
-      onValueChange={setValue}
-      valueFormatter={dataFormatter}
-      curveType="monotone"
-      intervalType="equidistantPreserveStart"
-      customTooltip={(props) => customTooltip({ ...props, value })}
-      showAnimation={true}
-    />
+    <ChartContainer config={chartConfig}>
+      <LineChart
+        accessibilityLayer
+        data={data}
+        margin={{
+          left: 12,
+          right: 12,
+        }}
+      >
+        <ChartLegend
+          content={<ChartLegendContent className="flex-wrap" />}
+          verticalAlign="top"
+        />
+        <YAxis
+          tickLine={false}
+          axisLine={false}
+          scale="sqrt"
+          domain={([dataMin, dataMax]) => {
+            const min = Math.max(Math.abs(dataMin) - 25, 0);
+            const max = dataMax + 100;
+            return [min, max];
+          }}
+        />
+        <XAxis
+          dataKey="timestamp"
+          tickLine={false}
+          tickFormatter={(value) => {
+            return new Date(value).toLocaleDateString("en-US", {
+              day: "numeric",
+              month: "short",
+              hour: "numeric",
+              minute: "numeric",
+            });
+          }}
+        />
+        <CartesianGrid vertical={false} />
+        <ChartTooltip
+          cursor={false}
+          defaultIndex={10}
+          content={
+            <ChartTooltipContent
+              indicator="line"
+              labelFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  day: "numeric",
+                  month: "short",
+                  hour: "numeric",
+                  minute: "numeric",
+                });
+              }}
+              formatter={(value, name) => (
+                <>
+                  <div
+                    className="w-1 h-full shrink-0 rounded-[2px] bg-[--color-bg] self-center"
+                    style={
+                      {
+                        "--color-bg": `var(--color-${name})`,
+                      } as React.CSSProperties
+                    }
+                  />
+                  {/* {chartConfig[name as keyof typeof chartConfig]?.label || name} */}
+                  {regionFormatter(name as Region)}
+                  <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                    {value}
+                    <span className="font-normal text-muted-foreground">
+                      ms
+                    </span>
+                  </div>
+                </>
+              )}
+            />
+          }
+        />
+        {regions.map((region) => {
+          return (
+            <Line
+              key={region}
+              dataKey={region}
+              type="monotone"
+              stroke={`var(--color-${region})`}
+              strokeWidth={2}
+              dot={false}
+            />
+          );
+        })}
+      </LineChart>
+    </ChartContainer>
   );
 }
 
-const customTooltip = ({
-  payload,
-  active,
-  label,
-  value,
-}: CustomTooltipProps & { value: EventProps }) => {
-  if (!active || !payload) return null;
-  return (
-    <div className="rounded-tremor-default border border-tremor-border bg-tremor-background p-2 text-tremor-default shadow-tremor-dropdown dark:border-dark-tremor-border dark:bg-dark-tremor-background dark:text-dark-tremor-default">
-      <div className="flex flex-col gap-2">
-        <p className="text-tremor-content dark:text-dark-tremor-content">
-          {label}
-        </p>
-        {payload
-          .filter((category) => category.type !== undefined) // tremor adds additional data to the payload, we don't want that
-          .map((category, idx) => {
-            const isActive = value
-              ? value.categoryClicked === category.dataKey
-              : true;
-            return (
-              <div
-                // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-                key={idx}
-                className={cn("flex flex-1 gap-2", !isActive && "opacity-60")}
-              >
-                <div
-                  className={cn(
-                    "flex w-1 flex-col rounded",
-                    `bg-${category.color}-500`,
-                  )}
-                />
-                <div className="flex w-full justify-between gap-2">
-                  <p className="shrink-0 text-tremor-content dark:text-dark-tremor-content">
-                    {regionFormatter(category.dataKey as Region)}
-                  </p>
-                  <p className="font-medium font-mono text-tremor-content-emphasis dark:text-dark-tremor-content-emphasis">
-                    {dataFormatter(category.value as number)}
-                  </p>
-                </div>
-              </div>
-            );
-          })}
-      </div>
-    </div>
-  );
+// basic tailwindcss 500 colors in hsl format
+const chartConfig: Record<Region, { label: string; color: string }> = {
+  ams: { label: "AMS", color: "hsl(217.2 91.2% 59.8%)" },
+  arn: { label: "ARN", color: "hsl(238.7 83.5% 66.7%)" },
+  atl: { label: "ATL", color: "hsl(258.3 89.5% 66.3%)" },
+  bog: { label: "BOG", color: "hsl(270.7 91% 65.1%)" },
+  bom: { label: "BOM", color: "hsl(292.2 84.1% 60.6%)" },
+  bos: { label: "BOS", color: "hsl(330.4 81.2% 60.4%)" },
+  cdg: { label: "CDG", color: "hsl(349.7 89.2% 60.2%)" },
+  den: { label: "DEN", color: "hsl(215.4 16.3% 46.9%)" },
+  dfw: { label: "DFW", color: "hsl(220 8.9% 46.1%)" },
+  ewr: { label: "EWR", color: "hsl(240 3.8% 46.1%)" },
+  eze: { label: "EZE", color: "hsl(0 0% 45.1%)" },
+  fra: { label: "FRA", color: "hsl(25 5.3% 44.7%)" },
+  gdl: { label: "GDL", color: "hsl(0 84.2% 60.2%)" },
+  gig: { label: "GIG", color: "hsl(24.6 95% 53.1%)" },
+  gru: { label: "GRU", color: "hsl(37.7 92.1% 50.2%)" },
+  hkg: { label: "HKG", color: "hsl(45.4 93.4% 47.5%)" },
+  iad: { label: "IAD", color: "hsl(83.7 80.5% 44.3%)" },
+  jnb: { label: "JNB", color: "hsl(142.1 70.6% 45.3%)" },
+  lax: { label: "LAX", color: "hsl(160.1 84.1% 39.4%)" },
+  lhr: { label: "LHR", color: "hsl(173.4 80.4% 40%)" },
+  mad: { label: "MAD", color: "hsl(188.7 94.5% 42.7%)" },
+  mia: { label: "MIA", color: "hsl(198.6 88.7% 48.4%)" },
+  nrt: { label: "NRT", color: "hsl(217.2 91.2% 59.8%)" },
+  ord: { label: "ORD", color: "hsl(238.7 83.5% 66.7%)" },
+  otp: { label: "OTP", color: "hsl(258.3 89.5% 66.3%)" },
+  phx: { label: "PHX", color: "hsl(270.7 91% 65.1%)" },
+  qro: { label: "QRO", color: "hsl(292.2 84.1% 60.6%)" },
+  scl: { label: "SCL", color: "hsl(330.4 81.2% 60.4%)" },
+  sjc: { label: "SJC", color: "hsl(349.7 89.2% 60.2%)" },
+  sea: { label: "SEA", color: "hsl(215.4 16.3% 46.9%)" },
+  sin: { label: "SIN", color: "hsl(220 8.9% 46.1%)" },
+  syd: { label: "SYD", color: "hsl(240 3.8% 46.1%)" },
+  waw: { label: "WAW", color: "hsl(0 0% 45.1%)" },
+  yul: { label: "YUL", color: "hsl(25 5.3% 44.7%)" },
+  yyz: { label: "YYZ", color: "hsl(0 84.2% 60.2%)" },
 };

apps/web/src/components/monitor-charts/region-table.tsx

···
   regions: Region[];
   data: {
     regions: Region[];
-    data: (Partial<Record<Region, string>> & { timestamp: string })[];
+    data: (Partial<Record<Region, number>> & { timestamp: string })[];
   };
   metricsByRegion: ResponseTimeMetricsByRegion[];
   caption?: string;
···
                   </p>
                 </TableCell>
                 <TableCell>
-                  <SimpleChart data={data.data} region={region} />
+                  <SimpleChart
+                    data={data.data.map((d) => ({
+                      timestamp: d.timestamp,
+                      latency: d[region],
+                    }))}
+                  />
                 </TableCell>
                 <TableCell className="text-right font-medium">
                   {formatNumber(metrics?.p50Latency)}

apps/web/src/components/monitor-charts/simple-chart-wrapper.tsx

···
       <div className="w-24">
         <p className="font-mono">{region}</p>
       </div>
-      <SimpleChart data={group.data} region={region} />
+      <SimpleChart
+        data={group.data.map((d) => ({
+          timestamp: d.timestamp,
+          latency: d[region],
+        }))}
+      />
     </div>
   );
 }

apps/web/src/components/monitor-charts/simple-chart.tsx

···
 "use client";
 
-import type { CustomTooltipProps } from "@tremor/react";
-import { LineChart } from "@tremor/react";
+import { Line, LineChart, XAxis } from "recharts";
+
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@openstatus/ui";
 
-import { cn } from "@/lib/utils";
-import { dataFormatter } from "./utils";
+const chartConfig = {
+  latency: {
+    label: "Latency",
+    color: "hsl(var(--status-operational))",
+  },
+};
 
 export interface SimpleChartProps {
-  data: { timestamp: string; [key: string]: string }[];
-  region: string;
+  data: { timestamp: string; latency: number | undefined }[];
 }
 
 // TODO: allow click to open `./details` intercepting route
-export function SimpleChart({ data, region }: SimpleChartProps) {
+export function SimpleChart({ data }: SimpleChartProps) {
   return (
-    <LineChart
-      data={data}
-      index="timestamp"
-      categories={[region]}
-      colors={["green"]}
-      className="h-20 w-full" // cannot take parent height
-      valueFormatter={dataFormatter}
-      curveType="monotone"
-      autoMinValue
-      showAnimation
-      noDataText=""
-      showXAxis={false}
-      showYAxis={false}
-      showGridLines={false}
-      showLegend={false}
-      customTooltip={customTooltip}
-      // FEATURE: it would be nice, if on click, the tooltip would be open
-      // onValueChange={(v) => setValue(v)}
-    />
+    <ChartContainer config={chartConfig} className="h-20 w-full">
+      <LineChart
+        accessibilityLayer
+        data={data}
+        margin={{
+          left: 12,
+          right: 12,
+        }}
+      >
+        <XAxis dataKey="timestamp" hide />
+        <ChartTooltip
+          cursor={false}
+          content={
+            <ChartTooltipContent
+              indicator="line"
+              labelFormatter={(value) => {
+                return new Date(value).toLocaleDateString("en-US", {
+                  day: "numeric",
+                  month: "short",
+                  hour: "numeric",
+                  minute: "numeric",
+                });
+              }}
+              formatter={(value, name) => (
+                <>
+                  <div
+                    className="w-1 h-full shrink-0 rounded-[2px] bg-[--color-bg] self-center"
+                    style={
+                      {
+                        "--color-bg": `var(--color-${name})`,
+                      } as React.CSSProperties
+                    }
+                  />
+                  {chartConfig[name as keyof typeof chartConfig]?.label || name}
+                  <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                    {value}
+                    <span className="font-normal text-muted-foreground">
+                      ms
+                    </span>
+                  </div>
+                </>
+              )}
+            />
+          }
+        />
+        <Line
+          dataKey="latency"
+          type="monotone"
+          stroke="var(--color-latency)"
+          strokeWidth={2}
+          dot={false}
+        />
+      </LineChart>
+    </ChartContainer>
   );
 }
-
-const customTooltip = ({ payload, active, label }: CustomTooltipProps) => {
-  if (!active || !payload) return null;
-  const data = payload?.[0]; // BUG: when onValueChange is set, payload is duplicated
-  if (!data) return null;
-
-  return (
-    <div className="rounded-tremor-default border border-tremor-border bg-tremor-background p-2 text-tremor-default shadow-tremor-dropdown dark:border-dark-tremor-border dark:bg-dark-tremor-background dark:text-dark-tremor-default">
-      <div className="flex flex-col gap-3">
-        {[data].map((category, idx) => {
-          return (
-            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-            <div key={idx} className="flex flex-1 gap-2">
-              <div
-                className={cn(
-                  "flex w-1 flex-col rounded",
-                  `bg-${category.color}-500`,
-                )}
-              />
-              <div className="flex flex-col gap-1">
-                <p className="text-tremor-content dark:text-dark-tremor-content">
-                  {label}
-                </p>
-                <p className="font-medium font-mono text-tremor-content-emphasis dark:text-dark-tremor-content-emphasis">
-                  {dataFormatter(category.value as number)}
-                </p>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};

apps/web/src/components/monitor-charts/utils.tsx

···
       }
       return acc;
     },
-    [] as (Partial<Record<Region, string>> & { timestamp: string })[],
+    [] as (Partial<Record<Region, number>> & { timestamp: string })[],
   );
 
   // regions are sorted by the flag utf-8 code

apps/web/tailwind.config.ts

···
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { fontFamily } = require("tailwindcss/defaultTheme");
 
-/**
- * TODO: is there a way to merge `tremor` with `shadcn`? At least the colors
- */
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
   content: [
     "src/**/*.{ts,tsx}",
-    /* tremor */
-    "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
     // our vercel integration
     "../../packages/integrations/**/*.{ts,tsx}",
     "../../packages/ui/**/*.{ts,tsx}",
···
     "./node_modules/@openstatus/react/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    /* Tremor */
-    transparent: "transparent",
-    current: "currentColor",
-    /* */
     container: {
       center: true,
       padding: "2rem",
···
             DEFAULT: "hsl(var(--status-monitoring))",
           },
         },
-        /* Tremor */
-        // light mode
-        tremor: {
-          brand: {
-            faint: "#eff6ff", // blue-50
-            muted: "#bfdbfe", // blue-200
-            subtle: "#60a5fa", // blue-400
-            DEFAULT: "#3b82f6", // blue-500
-            emphasis: "#1d4ed8", // blue-700
-            inverted: "#ffffff", // white
-          },
-          background: {
-            muted: "#f9fafb", // gray-50
-            subtle: "#f3f4f6", // gray-100
-            DEFAULT: "#ffffff", // white
-            emphasis: "#374151", // gray-700
-          },
-          border: {
-            DEFAULT: "#e5e7eb", // gray-200
-          },
-          ring: {
-            DEFAULT: "#e5e7eb", // gray-200
-          },
-          content: {
-            subtle: "#9ca3af", // gray-400
-            DEFAULT: "#6b7280", // gray-500
-            emphasis: "#374151", // gray-700
-            strong: "#111827", // gray-900
-            inverted: "#ffffff", // white
-          },
-        },
-        // dark mode
-        "dark-tremor": {
-          brand: {
-            faint: "#0B1229", // custom
-            muted: "#172554", // blue-950
-            subtle: "#1e40af", // blue-800
-            DEFAULT: "#3b82f6", // blue-500
-            emphasis: "#60a5fa", // blue-400
-            inverted: "#030712", // gray-950
-          },
-          background: {
-            muted: "#131A2B", // custom
-            subtle: "#1f2937", // gray-800
-            DEFAULT: "#111827", // gray-900
-            emphasis: "#d1d5db", // gray-300
-          },
-          border: {
-            DEFAULT: "#1f2937", // gray-800
-          },
-          ring: {
-            DEFAULT: "#1f2937", // gray-800
-          },
-          content: {
-            subtle: "#4b5563", // gray-600
-            DEFAULT: "#6b7280", // gray-600
-            emphasis: "#e5e7eb", // gray-200
-            strong: "#f9fafb", // gray-50
-            inverted: "#000000", // black
-          },
-        },
-        /* */
       },
       borderRadius: {
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
-        /* Tremor */
-        "tremor-small": "0.375rem",
-        "tremor-default": "0.5rem",
-        "tremor-full": "9999px",
-        /* */
       },
-      /* Tremor */
-      boxShadow: {
-        // light
-        "tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-        "tremor-card":
-          "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
-        "tremor-dropdown":
-          "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
-        // dark
-        "dark-tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-        "dark-tremor-card":
-          "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
-        "dark-tremor-dropdown":
-          "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
-      },
-      fontSize: {
-        "tremor-label": ["0.75rem"],
-        "tremor-default": ["0.875rem", { lineHeight: "1.25rem" }],
-        "tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
-        "tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
-      },
-      /* */
       fontFamily: {
         sans: ["var(--font-sans)", ...fontFamily.sans],
         cal: ["var(--font-calsans)"],
···
       },
     },
   },
-  /* Tremor */
-  safelist: [
-    {
-      pattern:
-        /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-      variants: ["hover", "ui-selected"],
-    },
-    {
-      pattern:
-        /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-      variants: ["hover", "ui-selected"],
-    },
-    {
-      pattern:
-        /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-      variants: ["hover", "ui-selected"],
-    },
-    {
-      pattern:
-        /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-    },
-    {
-      pattern:
-        /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-    },
-    {
-      pattern:
-        /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-    },
-  ],
-  /* */
   plugins: [
     require("tailwindcss-animate"),
     require("@tailwindcss/container-queries"),
     require("@tailwindcss/typography"),
-    require("@headlessui/tailwindcss"),
   ],
 };

pnpm-lock.yaml

···
         version: link:../../packages/utils
       '@scalar/hono-api-reference':
         specifier: 0.5.131
-        version: 0.5.131(postcss@8.4.49)(storybook@8.2.1(@babel/preset-env@7.24.8(@babel/core@7.26.0))(bufferutil@4.0.8)(utf-8-validate@6.0.4))(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.14.8)(typescript@5.7.2)))(typescript@5.7.2)
+        version: 0.5.131(postcss@8.4.49)(storybook@8.2.1(@babel/preset-env@7.24.8(@babel/core@7.26.0))(bufferutil@4.0.8)(utf-8-validate@6.0.4))(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.8.0)(typescript@5.7.2)))(typescript@5.7.2)
       '@t3-oss/env-core':
         specifier: 0.7.1
         version: 0.7.1(typescript@5.7.2)(zod@3.23.8)
···
       '@google-cloud/tasks':
         specifier: 4.0.1
         version: 4.0.1(encoding@0.1.13)
-      '@headlessui/react':
-        specifier: 1.7.17
-        version: 1.7.17(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@hookform/resolvers':
         specifier: 3.3.1
         version: 3.3.1(react-hook-form@7.47.0(react@18.3.1))
···
       '@tanstack/react-table':
         specifier: 8.10.3
         version: 8.10.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@tremor/react':
-        specifier: 3.17.4
-        version: 3.17.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.14.8)(typescript@5.5.2)))
       '@trpc/client':
         specifier: 11.0.0-rc.553
         version: 11.0.0-rc.553(@trpc/server@11.0.0-rc.553)
···
       '@content-collections/next':
         specifier: 0.2.3
         version: 0.2.3(@content-collections/core@0.7.3(typescript@5.5.2))(next@14.2.15(@opentelemetry/api@1.8.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
-      '@headlessui/tailwindcss':
-        specifier: 0.2.0
-        version: 0.2.0(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.14.8)(typescript@5.5.2)))
       '@openstatus/tsconfig':
         specifier: workspace:*
         version: link:../../packages/tsconfig
···
   '@floating-ui/dom@1.6.7':
     resolution: {integrity: sha512-wmVfPG5o2xnKDU4jx/m4w5qva9FWHcnZ8BvzEe90D/RpwsJaTAVYPEPdQ8sbr/N8zZTAHlZUTQdqg8ZUbzHmng==}
 
-  '@floating-ui/react-dom@1.3.0':
-    resolution: {integrity: sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-
   '@floating-ui/react-dom@2.0.2':
     resolution: {integrity: sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-
-  '@floating-ui/react@0.19.2':
-    resolution: {integrity: sha512-JyNk4A0Ezirq8FlXECvRtQOX/iBe5Ize0W/pLkrZjfHW9GUV7Xnq6zm6fyZuQzaHHqEnVizmvlA96e1/CkZv+w==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
···
     engines: {node: '>=6'}
     hasBin: true
 
-  '@headlessui/react@1.7.17':
-    resolution: {integrity: sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      react: ^16 || ^17 || ^18
-      react-dom: ^16 || ^17 || ^18
-
-  '@headlessui/react@1.7.19':
-    resolution: {integrity: sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      react: ^16 || ^17 || ^18
-      react-dom: ^16 || ^17 || ^18
-
   '@headlessui/tailwindcss@0.2.0':
     resolution: {integrity: sha512-fpL830Fln1SykOCboExsWr3JIVeQKieLJ3XytLe/tt1A0XzqUthOftDmjcCYLW62w7mQI7wXcoPXr3tZ9QfGxw==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      tailwindcss: ^3.0
-
-  '@headlessui/tailwindcss@0.2.1':
-    resolution: {integrity: sha512-2+5+NZ+RzMyrVeCZOxdbvkUSssSxGvcUxphkIfSVLpRiKsj+/63T2TOL9dBYMXVfj/CGr6hMxSRInzXv6YY7sA==}
     engines: {node: '>=10'}
     peerDependencies:
       tailwindcss: ^3.0
···
       react: '>=16'
       react-dom: '>=16'
 
-  '@tanstack/react-virtual@3.0.2':
-    resolution: {integrity: sha512-9XbRLPKgnhMwwmuQMnJMv+5a9sitGNCSEtf/AZXzmJdesYk7XsjYHaEDny+IrJzvPNwZliIIDwCRiaUqR3zzCA==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-
   '@tanstack/table-core@8.10.3':
     resolution: {integrity: sha512-hJ55YfJlWbfzRROfcyA/kC1aZr/shsLA8XNAwN8jXylhYWGLnPmiJJISrUfj4dMMWRiFi0xBlnlC7MLH+zSrcw==}
     engines: {node: '>=12'}
-
-  '@tanstack/virtual-core@3.0.0':
-    resolution: {integrity: sha512-SYXOBTjJb05rXa2vl55TTwO40A6wKu0R5i1qQwhJYNDIqaIGF7D0HsLw+pJAyi2OvntlEIVusx3xtbbgSUi6zg==}
 
   '@tanstack/virtual-core@3.8.3':
     resolution: {integrity: sha512-vd2A2TnM5lbnWZnHi9B+L2gPtkSeOtJOAw358JqokIH1+v2J7vUAzFVPwB/wrye12RFOurffXu33plm4uQ+JBQ==}
···
   '@tootallnate/quickjs-emscripten@0.23.0':
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
 
-  '@tremor/react@3.17.4':
-    resolution: {integrity: sha512-teItTLbZglXJwakW8XYtRfIXZvp1Y6HKsaD9MC8cJqXG3vf1n6D9aPz3OKyWmDkBYE1Yjo/PTmEHKQIwN+2suQ==}
-    peerDependencies:
-      react: ^18.0.0
-      react-dom: '>=16.6.0'
-
   '@trpc/client@11.0.0-rc.553':
     resolution: {integrity: sha512-ICgziilbuAslRgHIVJZ162KaHQRpHXA1C1LPRsNpxPa9aStPF7eThAjn4V3JmDyJsuDLQgAmqLVRImlLPMYR5Q==}
     peerDependencies:
···
   date-fns@2.30.0:
     resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
     engines: {node: '>=0.11'}
-
-  date-fns@3.6.0:
-    resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
 
   debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
···
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
 
-  react-day-picker@8.10.1:
-    resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==}
-    peerDependencies:
-      date-fns: ^2.28.0 || ^3.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-
   react-day-picker@8.8.2:
     resolution: {integrity: sha512-sK5M5PNZaLiszmACUKUpVu1eX3eFDVV+WLdWQ3BxTPbEC9jhuawmlgpbSXX5dIIQQwJpZ4wwP5+vsMVOwa1IRw==}
     peerDependencies:
···
       react: '>=16.6.0'
       react-dom: '>=16.6.0'
 
-  react-transition-state@2.1.1:
-    resolution: {integrity: sha512-kQx5g1FVu9knoz1T1WkapjUgFz08qQ/g1OmuWGi3/AoEFfS0kStxrPlZx81urjCXdz2d+1DqLpU6TyLW/Ro04Q==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-
   react-tweet@3.1.1:
     resolution: {integrity: sha512-8GQLa5y0G56kvGQkN7OiaKkjFAhWYVdyFq62ioY2qVtpMrjchVU+3KnqneCyp0+BemOQZkg6WWp/qoCNeEMH6A==}
     peerDependencies:
···
     resolution: {integrity: sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==}
     peerDependencies:
       react: ^16.11.0 || ^17.0.0 || ^18.0.0
-
-  tabbable@6.2.0:
-    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
 
   tailwind-merge@1.14.0:
     resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
···
     dependencies:
       '@floating-ui/core': 1.6.4
       '@floating-ui/utils': 0.2.4
-
-  '@floating-ui/react-dom@1.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@floating-ui/dom': 1.5.3
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
 
   '@floating-ui/react-dom@2.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
···
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@floating-ui/react@0.19.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@floating-ui/react-dom': 1.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      aria-hidden: 1.2.3
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      tabbable: 6.2.0
-
   '@floating-ui/utils@0.1.6': {}
 
   '@floating-ui/utils@0.2.4': {}
···
       protobufjs: 7.2.5
       yargs: 17.7.2
 
-  '@headlessui/react@1.7.17(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      client-only: 0.0.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
-  '@headlessui/react@1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@tanstack/react-virtual': 3.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      client-only: 0.0.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
-  '@headlessui/tailwindcss@0.2.0(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.14.8)(typescript@5.5.2)))':
-    dependencies:
-      tailwindcss: 3.4.3(ts-node@10.9.2(@types/node@20.14.8)(typescript@5.5.2))
-
-  '@headlessui/tailwindcss@0.2.0(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.14.8)(typescript@5.7.2)))':
-    dependencies:
-      tailwindcss: 3.4.3(ts-node@10.9.2(@types/node@20.14.8)(typescript@5.7.2))
-
-  '@headlessui/tailwindcss@0.2.1(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.14.8)(typescript@5.5.2)))':
+  '@headlessui/tailwindcss@0.2.0(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.8.0)(typescript@5.7.2)))':
     dependencies:
-      tailwindcss: 3.4.3(ts-node@10.9.2(@types/node@20.14.8)(typescript@5.5.2))
+      tailwindcss: 3.4.3(ts-node@10.9.2(@types/node@20.8.0)(typescript@5.7.2))
 
   '@headlessui/vue@1.7.22(vue@3.4.31(typescript@5.7.2))':
     dependencies:
···
   '@rollup/rollup-win32-x64-msvc@4.27.4':
     optional: true
 
-  '@scalar/api-client@2.0.45(storybook@8.2.1(@babel/preset-env@7.24.8(@babel/core@7.26.0))(bufferutil@4.0.8)(utf-8-validate@6.0.4))(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.14.8)(typescript@5.7.2)))(typescript@5.7.2)':
+  '@scalar/api-client@2.0.45(storybook@8.2.1(@babel/preset-env@7.24.8(@babel/core@7.26.0))(bufferutil@4.0.8)(utf-8-validate@6.0.4))(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.8.0)(typescript@5.7.2)))(typescript@5.7.2)':
     dependencies:
-      '@headlessui/tailwindcss': 0.2.0(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.14.8)(typescript@5.7.2)))
+      '@headlessui/tailwindcss': 0.2.0(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.8.0)(typescript@5.7.2)))
       '@headlessui/vue': 1.7.22(vue@3.4.31(typescript@5.7.2))
       '@scalar/components': 0.12.28(storybook@8.2.1(@babel/preset-env@7.24.8(@babel/core@7.26.0))(bufferutil@4.0.8)(utf-8-validate@6.0.4))(typescript@5.7.2)
       '@scalar/draggable': 0.1.4(typescript@5.7.2)
···
       - typescript
       - vitest
 
-  '@scalar/api-reference@1.24.70(postcss@8.4.49)(storybook@8.2.1(@babel/preset-env@7.24.8(@babel/core@7.26.0))(bufferutil@4.0.8)(utf-8-validate@6.0.4))(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.14.8)(typescript@5.7.2)))(typescript@5.7.2)':
+  '@scalar/api-reference@1.24.70(postcss@8.4.49)(storybook@8.2.1(@babel/preset-env@7.24.8(@babel/core@7.26.0))(bufferutil@4.0.8)(utf-8-validate@6.0.4))(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.8.0)(typescript@5.7.2)))(typescript@5.7.2)':
     dependencies:
       '@floating-ui/vue': 1.1.1(vue@3.4.31(typescript@5.7.2))
       '@headlessui/vue': 1.7.22(vue@3.4.31(typescript@5.7.2))
-      '@scalar/api-client': 2.0.45(storybook@8.2.1(@babel/preset-env@7.24.8(@babel/core@7.26.0))(bufferutil@4.0.8)(utf-8-validate@6.0.4))(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.14.8)(typescript@5.7.2)))(typescript@5.7.2)
+      '@scalar/api-client': 2.0.45(storybook@8.2.1(@babel/preset-env@7.24.8(@babel/core@7.26.0))(bufferutil@4.0.8)(utf-8-validate@6.0.4))(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.8.0)(typescript@5.7.2)))(typescript@5.7.2)
       '@scalar/components': 0.12.28(storybook@8.2.1(@babel/preset-env@7.24.8(@babel/core@7.26.0))(bufferutil@4.0.8)(utf-8-validate@6.0.4))(typescript@5.7.2)
       '@scalar/oas-utils': 0.2.26(typescript@5.7.2)
       '@scalar/openapi-parser': 0.7.2
···
     transitivePeerDependencies:
       - typescript
 
-  '@scalar/hono-api-reference@0.5.131(postcss@8.4.49)(storybook@8.2.1(@babel/preset-env@7.24.8(@babel/core@7.26.0))(bufferutil@4.0.8)(utf-8-validate@6.0.4))(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.14.8)(typescript@5.7.2)))(typescript@5.7.2)':
+  '@scalar/hono-api-reference@0.5.131(postcss@8.4.49)(storybook@8.2.1(@babel/preset-env@7.24.8(@babel/core@7.26.0))(bufferutil@4.0.8)(utf-8-validate@6.0.4))(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.8.0)(typescript@5.7.2)))(typescript@5.7.2)':
     dependencies:
-      '@scalar/api-reference': 1.24.70(postcss@8.4.49)(storybook@8.2.1(@babel/preset-env@7.24.8(@babel/core@7.26.0))(bufferutil@4.0.8)(utf-8-validate@6.0.4))(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.14.8)(typescript@5.7.2)))(typescript@5.7.2)
+      '@scalar/api-reference': 1.24.70(postcss@8.4.49)(storybook@8.2.1(@babel/preset-env@7.24.8(@babel/core@7.26.0))(bufferutil@4.0.8)(utf-8-validate@6.0.4))(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.8.0)(typescript@5.7.2)))(typescript@5.7.2)
       hono: 4.5.3
     transitivePeerDependencies:
       - '@jest/globals'
···
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@tanstack/react-virtual@3.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@tanstack/virtual-core': 3.0.0
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
   '@tanstack/table-core@8.10.3': {}
-
-  '@tanstack/virtual-core@3.0.0': {}
 
   '@tanstack/virtual-core@3.8.3': {}
 
···
 
   '@tootallnate/quickjs-emscripten@0.23.0': {}
 
-  '@tremor/react@3.17.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.14.8)(typescript@5.5.2)))':
-    dependencies:
-      '@floating-ui/react': 0.19.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@headlessui/react': 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@headlessui/tailwindcss': 0.2.1(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.14.8)(typescript@5.5.2)))
-      date-fns: 3.6.0
-      react: 18.3.1
-      react-day-picker: 8.10.1(date-fns@3.6.0)(react@18.3.1)
-      react-dom: 18.3.1(react@18.3.1)
-      react-transition-state: 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      recharts: 2.12.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      tailwind-merge: 1.14.0
-    transitivePeerDependencies:
-      - tailwindcss
-
   '@trpc/client@11.0.0-rc.553(@trpc/server@11.0.0-rc.553)':
     dependencies:
       '@trpc/server': 11.0.0-rc.553
···
   date-fns@2.30.0:
     dependencies:
       '@babel/runtime': 7.23.2
-
-  date-fns@3.6.0: {}
 
   debug@2.6.9:
     dependencies:
···
       postcss: 8.4.38
       ts-node: 10.9.2(@types/node@20.8.0)(typescript@5.5.2)
 
+  postcss-load-config@4.0.1(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.8.0)(typescript@5.7.2)):
+    dependencies:
+      lilconfig: 2.1.0
+      yaml: 2.3.3
+    optionalDependencies:
+      postcss: 8.4.38
+      ts-node: 10.9.2(@types/node@20.8.0)(typescript@5.7.2)
+
   postcss-load-config@4.0.1(postcss@8.4.49)(ts-node@10.9.2(@types/node@20.8.0)(typescript@5.5.2)):
     dependencies:
       lilconfig: 2.1.0
···
       minimist: 1.2.8
       strip-json-comments: 2.0.1
 
-  react-day-picker@8.10.1(date-fns@3.6.0)(react@18.3.1):
-    dependencies:
-      date-fns: 3.6.0
-      react: 18.3.1
-
   react-day-picker@8.8.2(date-fns@2.30.0)(react@18.3.1):
     dependencies:
       date-fns: 2.30.0
···
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
-  react-transition-state@2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
···
       react: 18.3.1
       use-sync-external-store: 1.2.0(react@18.3.1)
 
-  tabbable@6.2.0: {}
-
   tailwind-merge@1.14.0: {}
 
   tailwind-merge@2.4.0: {}
···
       postcss-import: 15.1.0(postcss@8.4.38)
       postcss-js: 4.0.1(postcss@8.4.38)
       postcss-load-config: 4.0.1(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.8.0)(typescript@5.5.2))
+      postcss-nested: 6.0.1(postcss@8.4.38)
+      postcss-selector-parser: 6.0.13
+      resolve: 1.22.8
+      sucrase: 3.34.0
+    transitivePeerDependencies:
+      - ts-node
+
+  tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.8.0)(typescript@5.7.2)):
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.5.3
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.1
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.0
+      lilconfig: 2.1.0
+      micromatch: 4.0.5
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.0.0
+      postcss: 8.4.38
+      postcss-import: 15.1.0(postcss@8.4.38)
+      postcss-js: 4.0.1(postcss@8.4.38)
+      postcss-load-config: 4.0.1(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.8.0)(typescript@5.7.2))
       postcss-nested: 6.0.1(postcss@8.4.38)
       postcss-selector-parser: 6.0.13
       resolve: 1.22.8
···
       typescript: 5.5.2
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
+
+  ts-node@10.9.2(@types/node@20.8.0)(typescript@5.7.2):
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.11
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.4
+      '@types/node': 20.8.0
+      acorn: 8.11.3
+      acorn-walk: 8.3.2
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 5.7.2
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+    optional: true
 
   tsconfck@3.1.4(typescript@5.7.2):
     optionalDependencies: