@nswds/app 1.97.15 → 1.99.0

package/dist/index.js

@@ -42,6 +42,8 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as TabsPrimitives from '@radix-ui/react-tabs';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { Command as Command$1 } from 'cmdk';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
@@ -49,8 +51,6 @@ import { useReactTable, getFacetedUniqueValues, getFacetedRowModel, getSortedRow
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { Drawer as Drawer$1 } from 'vaul';
 import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import * as TogglePrimitive from '@radix-ui/react-toggle';
 import Image2 from 'next/image';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 import { OTPInput, OTPInputContext } from 'input-otp';
@@ -4105,7 +4105,7 @@ function AccordionContent({
   );
 }
 var alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  "relative w-full rounded-sm border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   {
     variants: {
       variant: {
@@ -4551,7 +4551,7 @@ var AlertDialogContent = React5.forwardRef(function AlertDialogContent2({ classN
         ref,
         "data-slot": "alert-dialog-content",
         className: cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-sm border bg-background p-6 shadow-lg duration-200 sm:max-w-lg",
           "data-[state=closed]:animate-out data-[state=open]:animate-in",
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
           "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -5017,7 +5017,7 @@ var ChartTooltip = ({ active, payload, label, valueFormatter }) => {
       {
         className: cn(
           // base
-          "rounded-md border text-sm shadow-md",
+          "rounded-sm border text-sm shadow-md",
           // border color
           "border-gray-200 dark:border-gray-800",
           // background color
@@ -6292,7 +6292,7 @@ var ChartTooltip2 = ({ active, payload, label, valueFormatter }) => {
       {
         className: cn(
           // base
-          "rounded-md border text-sm shadow-md",
+          "rounded-sm border text-sm shadow-md",
           // border color
           "border-gray-200 dark:border-gray-800",
           // background color
@@ -7386,7 +7386,7 @@ function DropdownMenuSubContent({
           // Base
           ""
         ],
-        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-sm border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       ),
       ...props
@@ -7478,7 +7478,7 @@ function Breadcrumbs({
   ] }) });
 }
 var buttonVariants2 = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
   {
     variants: {
       variant: {
@@ -7572,7 +7572,7 @@ function Calendar({
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          "relative rounded-sm border border-input shadow-xs has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px]",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
@@ -7658,7 +7658,7 @@ function CalendarDayButton({
       "data-range-end": modifiers.range_end,
       "data-range-middle": modifiers.range_middle,
       className: cn(
-        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary-800 data-[selected-single=true]:text-white dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-sm data-[range-end=true]:rounded-r-sm data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-sm data-[range-start=true]:rounded-l-sm data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary-800 data-[selected-single=true]:text-white dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       ),
@@ -7672,7 +7672,7 @@ function Card({ className, ...props }) {
     {
       "data-slot": "card",
       className: cn(
-        "flex flex-col gap-6 rounded-md border border-grey-200 bg-card py-6 text-card-foreground dark:border-grey-700",
+        "flex flex-col gap-6 rounded-sm border border-grey-200 bg-card py-6 text-card-foreground dark:border-grey-700",
         className
       ),
       ...props
@@ -8235,7 +8235,7 @@ function ChartTooltipContent({
     "div",
     {
       className: cn(
-        "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+        "grid min-w-[8rem] items-start gap-1.5 rounded-sm border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
         className
       ),
       children: [
@@ -8256,7 +8256,7 @@ function ChartTooltipContent({
                   "div",
                   {
                     className: cn(
-                      "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                      "shrink-0 rounded-sm border-(--color-border) bg-(--color-bg)",
                       {
                         "h-2.5 w-2.5": indicator === "dot",
                         "w-1": indicator === "line",
@@ -8363,7 +8363,7 @@ function Checkbox({ className, ...props }) {
       "data-slot": "checkbox",
       className: cn(
         // Base styles
-        "peer flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-[4px] border border-primary-800 shadow-xs ring-offset-white transition-shadow outline-none",
+        "peer flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border border-primary-800 shadow-xs ring-offset-white transition-shadow outline-none",
         // Dark mode styles
         "dark:bg-input/30",
         // Checked styles
@@ -13525,7 +13525,7 @@ function PreWithCopy(props) {
     /* @__PURE__ */ jsxs(
       "button",
       {
-        className: "absolute top-2 right-2 m-0.5 inline-flex h-8 items-center justify-center rounded-lg border border-gray-200 bg-white px-2.5 py-2 text-gray-900 opacity-0 transition-opacity group-hover:opacity-100 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700",
+        className: "absolute top-2 right-2 m-0.5 inline-flex h-8 items-center justify-center rounded-sm border border-gray-200 bg-white px-2.5 py-2 text-gray-900 opacity-0 transition-opacity group-hover:opacity-100 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700",
         "aria-label": "Copy code to clipboard",
         onClick: handleCopy,
         children: [
@@ -13591,7 +13591,7 @@ function PopoverContent({
       className: cn(
         [
           // Base
-          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-background p-4 text-foreground shadow-md outline-hidden",
+          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-sm border bg-background p-4 text-foreground shadow-md outline-hidden",
           // Open
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           // Closed
@@ -13968,7 +13968,7 @@ function SegmentedControlTrigger({
     {
       "data-slot": "segmented-control-trigger",
       className: cn(
-        "inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:shadow-sm dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-sm border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:shadow-sm dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -13994,7 +13994,7 @@ function ThemeSelectorLoading() {
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsx("div", { className: "h-5 w-20 rounded bg-grey-200" }),
-      /* @__PURE__ */ jsxs("div", { className: "gap-3 rounded-md border border-muted bg-muted/30 p-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "gap-3 rounded-sm border border-muted bg-muted/30 p-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "mb-2 flex min-w-0 items-center justify-between", children: [
           /* @__PURE__ */ jsx("div", { className: "h-4 w-48 rounded bg-grey-200" }),
           /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded bg-grey-200" })
@@ -14174,7 +14174,7 @@ function ThemeSelectorContent({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsx("h3", { className: "font-medium", children: "Share Theme" }),
-      /* @__PURE__ */ jsxs("div", { className: "gap-3 rounded-md border border-muted bg-muted/30 p-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "gap-3 rounded-sm border border-muted bg-muted/30 p-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "mb-2 flex min-w-0 items-center justify-between", children: [
           /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Copy this URL to share your theme selection:" }),
           /* @__PURE__ */ jsxs(
@@ -14192,7 +14192,7 @@ function ThemeSelectorContent({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("code", { className: "block w-full rounded border bg-background px-2 py-1.5 font-mono text-xs break-all text-foreground", children: themeUrl })
+        /* @__PURE__ */ jsx("code", { className: "block w-full rounded-sm border bg-background px-2 py-1.5 font-mono text-xs break-all text-foreground", children: themeUrl })
       ] })
     ] })
   ] });
@@ -14244,7 +14244,7 @@ function TooltipContent({
 }
 function CodeDemoLoading() {
   return /* @__PURE__ */ jsxs("div", { className: "mt-8 animate-pulse", children: [
-    /* @__PURE__ */ jsx("div", { className: "w-full rounded-t-xl border border-grey-200 bg-grey-50 p-4 dark:border-grey-600 dark:bg-grey-700", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-full rounded-t-sm border border-grey-200 bg-grey-50 p-4 dark:border-grey-600 dark:bg-grey-700", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-3", children: [
       /* @__PURE__ */ jsx("div", { className: "h-10 w-32 rounded bg-grey-200 dark:bg-grey-600" }),
       /* @__PURE__ */ jsx("div", { className: "h-10 w-32 rounded bg-grey-200 dark:bg-grey-600" }),
       /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-3", children: [
@@ -14255,7 +14255,7 @@ function CodeDemoLoading() {
     ] }) }),
     /* @__PURE__ */ jsx("div", { className: "flex border-x border-grey-200 bg-white bg-gradient-to-r p-5 dark:border-grey-600 dark:bg-grey-900", children: /* @__PURE__ */ jsx("div", { className: "h-64 w-full rounded bg-grey-200 dark:bg-grey-600" }) }),
     /* @__PURE__ */ jsxs("div", { className: "border border-grey-200 dark:border-grey-600", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex w-full rounded-t-md border-b border-grey-200 bg-grey-50 p-2 dark:border-grey-600 dark:bg-grey-700", children: /* @__PURE__ */ jsx("div", { className: "h-8 w-24 rounded bg-grey-200 dark:bg-grey-600" }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex w-full rounded-t-sm border-b border-grey-200 bg-grey-50 p-2 dark:border-grey-600 dark:bg-grey-700", children: /* @__PURE__ */ jsx("div", { className: "h-8 w-24 rounded bg-grey-200 dark:bg-grey-600" }) }),
       /* @__PURE__ */ jsx("div", { className: "h-48 bg-grey-100 dark:bg-grey-800" })
     ] })
   ] });
@@ -14439,7 +14439,7 @@ function CodeDemoContent({ data, showCode = true, controls = defaultControls })
     }
   }, [themeCategory, primaryColor, accentColor, greyColor, isThemeInitialized]);
   return /* @__PURE__ */ jsxs("div", { className: "mt-8", children: [
-    /* @__PURE__ */ jsx("div", { className: "w-full rounded-t-xl border border-grey-200 bg-grey-50 p-4 dark:border-grey-600 dark:bg-grey-700", children: /* @__PURE__ */ jsxs("div", { className: "relative flex w-full items-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-full rounded-t-sm border border-grey-200 bg-grey-50 p-4 dark:border-grey-600 dark:bg-grey-700", children: /* @__PURE__ */ jsxs("div", { className: "relative flex w-full items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         data.githubSlug && /* @__PURE__ */ jsx(EditOnGithubButton, { githubSlug: data.githubSlug }),
         data.figmaSlug && /* @__PURE__ */ jsx(OpenInFigmaButton, { figmaSlug: data.figmaSlug })
@@ -14498,7 +14498,7 @@ function CodeDemoContent({ data, showCode = true, controls = defaultControls })
           shouldExpand && "pb-[41px]"
         ),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex w-full rounded-t-md border-b border-grey-200 bg-grey-50 dark:border-grey-600 dark:bg-grey-700", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full rounded-t-sm border-b border-grey-200 bg-grey-50 dark:border-grey-600 dark:bg-grey-700", children: [
             /* @__PURE__ */ jsx(Tabs, { tabIndex, items: codeItems, onSelect: setTabIndex }),
             variants.length > 0 && /* @__PURE__ */ jsxs(Select, { onValueChange: (value) => handleSelectVariant(value), children: [
               /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a variant" }) }),
@@ -14918,6 +14918,972 @@ function ColorCard({ name, token, hex: hex2, rgb: rgb2, hsl, oklch: oklch2, form
     ] })
   ] }) });
 }
+var recommendedBackgroundTones = [50, 100, 200, 400, 600, 800];
+var AAA_NORMAL_TEXT_RATIO = 7;
+var MIN_DARK_BACKGROUND_TONE_FOR_WHITE = 600;
+var WHITE_FOREGROUND = {
+  token: "white",
+  name: "White",
+  hex: "#ffffff",
+  rgb: "rgb(255, 255, 255)",
+  hsl: "hsl(0, 0%, 100%)",
+  oklch: "oklch(1 0 0)",
+  tone: 0
+};
+function extractTone(token) {
+  const match = token.match(/-(\d+)$/);
+  return match ? Number.parseInt(match[1], 10) : 0;
+}
+function formatFamilyLabel(name, key) {
+  if (key === "grey") return "Grey";
+  return name.replace(/^NSW Aboriginal\s+/i, "").replace(/^NSW\s+/i, "").trim();
+}
+function toPairingColor(color2) {
+  return {
+    ...color2,
+    tone: extractTone(color2.token)
+  };
+}
+function getPreferredForegroundTone(backgroundTone) {
+  if (backgroundTone <= 200) return 800;
+  if (backgroundTone <= 500) return 700;
+  if (backgroundTone <= 650) return 250;
+  return 200;
+}
+function getPairRating(contrastRatio) {
+  if (contrastRatio >= 7) return "AAA";
+  if (contrastRatio >= 4.5) return "AA";
+  return "AA Large";
+}
+function isPreferredDirection(backgroundTone, foregroundTone, preferredForegroundTone) {
+  if (preferredForegroundTone < backgroundTone) {
+    return foregroundTone < backgroundTone;
+  }
+  return foregroundTone > backgroundTone;
+}
+function buildPair(background, foreground) {
+  const contrastRatio = culori.wcagContrast(background.hex, foreground.hex);
+  return {
+    id: `${background.token}:${foreground.token}`,
+    background,
+    foreground,
+    contrastRatio,
+    passes: {
+      aaLarge: contrastRatio >= 3,
+      aaText: contrastRatio >= 4.5,
+      aaaLarge: contrastRatio >= 4.5,
+      aaaText: contrastRatio >= 7
+    },
+    rating: getPairRating(contrastRatio)
+  };
+}
+function pickForeground(colorsToPair, background, minimumRatio) {
+  const preferredForegroundTone = getPreferredForegroundTone(background.tone);
+  const passingCandidates = colorsToPair.filter((color2) => color2.token !== background.token).map((color2) => buildPair(background, color2)).filter((pair) => pair.contrastRatio >= minimumRatio);
+  if (passingCandidates.length === 0) return null;
+  const preferredCandidates = passingCandidates.filter(
+    (pair) => isPreferredDirection(background.tone, pair.foreground.tone, preferredForegroundTone)
+  );
+  const candidates = preferredCandidates.length > 0 ? preferredCandidates : passingCandidates;
+  return candidates.sort((left, right) => {
+    const leftTargetDelta = Math.abs(left.foreground.tone - preferredForegroundTone);
+    const rightTargetDelta = Math.abs(right.foreground.tone - preferredForegroundTone);
+    if (leftTargetDelta !== rightTargetDelta) {
+      return leftTargetDelta - rightTargetDelta;
+    }
+    const leftToneGap = Math.abs(left.foreground.tone - background.tone);
+    const rightToneGap = Math.abs(right.foreground.tone - background.tone);
+    if (leftToneGap !== rightToneGap) {
+      return rightToneGap - leftToneGap;
+    }
+    return right.contrastRatio - left.contrastRatio;
+  })[0];
+}
+function buildRecommendedPairs(colorsToPair, minimumRatio) {
+  const backgrounds = recommendedBackgroundTones.map((tone) => colorsToPair.find((color2) => color2.tone === tone)).filter((color2) => Boolean(color2));
+  const recommendedPairs = [];
+  for (const background of backgrounds) {
+    const pair = pickForeground(colorsToPair, background, minimumRatio);
+    const whitePair = background.tone >= MIN_DARK_BACKGROUND_TONE_FOR_WHITE ? buildPair(background, WHITE_FOREGROUND) : null;
+    if (pair && !recommendedPairs.some((item) => item.id === pair.id)) {
+      recommendedPairs.push(pair);
+    }
+    if (whitePair && whitePair.contrastRatio >= minimumRatio && !recommendedPairs.some((item) => item.id === whitePair.id)) {
+      recommendedPairs.push(whitePair);
+    }
+  }
+  return recommendedPairs;
+}
+function buildRecommendedCollections(minimumRatio) {
+  return {
+    brand: Object.entries(colors.brand).map(([key, palette]) => {
+      const scale2 = palette.colors.map(toPairingColor);
+      return {
+        key,
+        label: formatFamilyLabel(palette.name, key),
+        paletteName: palette.name,
+        colors: scale2,
+        recommendedPairs: buildRecommendedPairs(scale2, minimumRatio)
+      };
+    }),
+    aboriginal: Object.entries(colors.aboriginal).map(([key, palette]) => {
+      const scale2 = palette.colors.map(toPairingColor);
+      return {
+        key,
+        label: formatFamilyLabel(palette.name, key),
+        paletteName: palette.name,
+        colors: scale2,
+        recommendedPairs: buildRecommendedPairs(scale2, minimumRatio)
+      };
+    })
+  };
+}
+var recommendedAaaPairingCollections = buildRecommendedCollections(AAA_NORMAL_TEXT_RATIO);
+function getWhiteForegroundPair(background) {
+  return buildPair(background, WHITE_FOREGROUND);
+}
+function supportsWhiteForegroundPreview(background) {
+  return background.tone >= MIN_DARK_BACKGROUND_TONE_FOR_WHITE;
+}
+function getPairingColorValue(color2, format) {
+  return getColorValue(color2, format);
+}
+var styles3 = {
+  base: [
+    // Base
+    "inline-flex items-center justify-center gap-2 rounded-sm text-sm font-medium bg-transparent transition-all whitespace-nowrap cursor-pointer border-(--toggle-border) [--toggle-border:var(--color-grey-200)] text-grey-800",
+    // States
+    "data-[state=on]:bg-grey-100 data-[state=on]:text-grey-850",
+    // Hover
+    "hover:bg-grey-100 hover:text-grey-850",
+    // Focus
+    "focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-(--toggle-border)",
+    // Dark mode
+    "dark:text-white",
+    // Dark mode states
+    "dark:data-[state=on]:bg-white/10 dark:data-[state=on]:text-white",
+    // Dark mode hover
+    "dark:hover:bg-white/10 dark:hover:text-white",
+    // Disabled
+    "disabled:pointer-events-none disabled:opacity-50",
+    // Icon
+    '[&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 [&_svg]:shrink-0',
+    // Aria invalid
+    "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+    // Aria invalid dark mode
+    "dark:aria-invalid:ring-destructive/40"
+  ],
+  outline: [
+    // Base
+    "text-grey-800 border [--toggle-border:var(--color-grey-300)]",
+    // States
+    "hover:[--toggle-border:var(--color-grey-400)]",
+    // Dark mode
+    "dark:[--toggle-border:white]/40",
+    // Dark mode states
+    "dark:hover:[--toggle-border:white]/50",
+    // Data on
+    "data-[state=on]:bg-primary-800/10"
+  ]
+};
+var toggleVariants = cva(styles3.base, {
+  variants: {
+    variant: {
+      ghost: "",
+      outline: clsx12(styles3.outline)
+    },
+    size: {
+      default: "h-9 px-2 min-w-9",
+      sm: "h-8 px-1.5 min-w-8",
+      lg: "h-10 px-2.5 min-w-10"
+    }
+  },
+  defaultVariants: {
+    variant: "ghost",
+    size: "default"
+  }
+});
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TogglePrimitive.Root,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var ToggleGroupContext = React5.createContext({
+  size: "default",
+  variant: "ghost"
+});
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Root,
+    {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(
+        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}) {
+  const context = React5.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size,
+      className: cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        "min-w-0 shrink-0 rounded-none shadow-none first:rounded-l-sm last:rounded-r-sm focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function FormatToggle({ format, setFormat }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Format:" }),
+    /* @__PURE__ */ jsxs(
+      ToggleGroup,
+      {
+        type: "single",
+        value: format,
+        onValueChange: (value) => value && setFormat(value),
+        children: [
+          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "hex", "aria-label": "HEX format", children: "HEX" }),
+          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "rgb", "aria-label": "RGB format", children: "RGB" }),
+          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "hsl", "aria-label": "HSL format", children: "HSL" }),
+          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "oklch", "aria-label": "OKLCH format", children: "OKLCH" })
+        ]
+      }
+    )
+  ] });
+}
+function getPreferredFamilyKey(families) {
+  return families.find((family) => family.key === "green")?.key ?? families[0]?.key ?? "";
+}
+function getDefaultPair(family) {
+  if (!family || family.recommendedPairs.length === 0) return null;
+  return family.recommendedPairs.reduce((bestPair, pair) => {
+    const bestDelta = Math.abs(bestPair.background.tone - 600);
+    const currentDelta = Math.abs(pair.background.tone - 600);
+    return currentDelta < bestDelta ? pair : bestPair;
+  }, family.recommendedPairs[0]);
+}
+function getFamilySwatchColor(family) {
+  return family.colors.find((color2) => color2.tone === 500)?.hex ?? family.colors.find((color2) => color2.tone === 400)?.hex ?? family.colors[Math.min(3, family.colors.length - 1)]?.hex ?? "transparent";
+}
+function getToneFromToken(token) {
+  if (!token) return null;
+  const match = token.match(/-(\d+)$/);
+  return match ? Number.parseInt(match[1], 10) : null;
+}
+function isApprovedBackgroundTone(color2) {
+  return recommendedBackgroundTones.includes(
+    color2.tone
+  );
+}
+function getBackgroundOptions(family) {
+  return family?.colors.filter(isApprovedBackgroundTone) ?? [];
+}
+function isWhiteForegroundPair(pair) {
+  return pair.foreground.token === "white";
+}
+function getRecommendedPairForBackground(family, backgroundToken, preferredPairId) {
+  if (!family) return null;
+  const backgroundPairs = family.recommendedPairs.filter(
+    (pair) => pair.background.token === backgroundToken
+  );
+  if (backgroundPairs.length === 0) return null;
+  if (preferredPairId) {
+    const preferredPair = backgroundPairs.find((pair) => pair.id === preferredPairId);
+    if (preferredPair) {
+      return preferredPair;
+    }
+  }
+  return backgroundPairs.find((pair) => !isWhiteForegroundPair(pair)) ?? backgroundPairs[0];
+}
+function getFallbackBackgroundToken(family, preferredTone) {
+  const backgroundOptions = getBackgroundOptions(family);
+  if (preferredTone) {
+    const preferredBackground = backgroundOptions.find((color2) => color2.tone === preferredTone);
+    if (preferredBackground) {
+      return preferredBackground.token;
+    }
+  }
+  return getDefaultPair(family)?.background.token ?? backgroundOptions[0]?.token ?? "";
+}
+function ColorPairingToolLoading() {
+  return /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-6", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-40 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-6 xl:grid-cols-[minmax(0,1.3fr)_minmax(20rem,0.9fr)]", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-96 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
+      /* @__PURE__ */ jsx("div", { className: "h-96 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" })
+    ] })
+  ] });
+}
+function getInitialPairingState(searchParams) {
+  const paletteParam = searchParams.get("palette");
+  const familyParam = searchParams.get("family");
+  const pairParam = searchParams.get("pair");
+  const backgroundParam = searchParams.get("background");
+  const themeCategory = paletteParam === "brand" || paletteParam === "aboriginal" ? paletteParam : "brand";
+  const families = recommendedAaaPairingCollections[themeCategory];
+  const familyKey = families.some((family) => family.key === familyParam) ? familyParam : getPreferredFamilyKey(families);
+  const activeFamily = families.find((family) => family.key === familyKey) ?? families[0];
+  const backgroundOptions = getBackgroundOptions(activeFamily);
+  const pairBackgroundToken = activeFamily?.recommendedPairs.find((pair) => pair.id === pairParam)?.background.token ?? null;
+  const selectedBackgroundToken = backgroundOptions.some((color2) => color2.token === backgroundParam) ? backgroundParam : getFallbackBackgroundToken(
+    activeFamily,
+    getToneFromToken(backgroundParam ?? pairBackgroundToken)
+  );
+  const selectedPairId = getRecommendedPairForBackground(activeFamily, selectedBackgroundToken, pairParam)?.id ?? "";
+  return { familyKey, selectedBackgroundToken, selectedPairId, themeCategory };
+}
+function PairPreview({
+  family,
+  isRecommended,
+  pair
+}) {
+  const whiteForeground = isWhiteForegroundPair(pair);
+  const statusLabel = isRecommended ? "Pass" : pair.passes.aaaLarge ? "Large text only" : "Example only";
+  const StatusIcon = isRecommended ? Icons.check : Icons.info;
+  return /* @__PURE__ */ jsx(Card, { className: "gap-0 overflow-hidden py-0", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "p-6 sm:min-h-[26rem] sm:p-8",
+      style: {
+        backgroundColor: pair.background.hex,
+        color: pair.foreground.hex
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-[22rem] flex-col justify-between gap-8", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[0.72rem] font-semibold tracking-[0.16em] uppercase",
+              style: {
+                borderColor: pair.foreground.hex,
+                backgroundColor: pair.foreground.hex,
+                color: pair.background.hex
+              },
+              children: [
+                /* @__PURE__ */ jsx(Icons.palette, { "data-slot": "icon", className: "size-4" }),
+                family.label
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex rounded-full border px-3 py-1 text-[0.72rem] font-semibold tracking-[0.16em] uppercase",
+              style: {
+                borderColor: pair.foreground.hex
+              },
+              children: [
+                pair.rating,
+                " ",
+                pair.contrastRatio.toFixed(2),
+                ":1"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "max-w-xl space-y-4 pb-12 sm:pb-16", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: whiteForeground && !isRecommended ? "White on colour example" : whiteForeground ? "White on colour" : "Tone on tone" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsx("h3", { className: "max-w-lg text-4xl leading-none font-bold text-current sm:text-5xl", children: "Pair colour with confidence." }),
+            /* @__PURE__ */ jsx("p", { className: "max-w-md text-sm/6 sm:text-base/7", children: whiteForeground ? isRecommended ? "Use white text on dark colour only when it meets AAA for headings, body copy, and calls to action." : "This white text example is included for reference on approved dark backgrounds. Check the result card below before using it for normal or large text." : "Use only AAA-recommended tone-on-tone combinations for headings, body copy, and calls to action on colour." })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold",
+              style: {
+                backgroundColor: pair.foreground.hex,
+                color: pair.background.hex
+              },
+              children: [
+                statusLabel,
+                /* @__PURE__ */ jsx(StatusIcon, { "data-slot": "icon", className: "size-4" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex rounded-full border px-4 py-2 text-sm",
+              style: {
+                borderColor: pair.foreground.hex
+              },
+              children: [
+                pair.background.token,
+                " / ",
+                pair.foreground.token
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  ) });
+}
+function PairDetailCard({
+  color: color2,
+  format,
+  role
+}) {
+  const [, copyToClipboardRaw] = useCopyToClipboard();
+  const [copiedField, setCopiedField] = useState(null);
+  const valueLabel = format.toUpperCase();
+  const formattedValue = getPairingColorValue(color2, format);
+  const copyField = (field) => {
+    const fieldValue = field === "token" ? color2.token : field === "tone" ? String(color2.tone) : formattedValue;
+    copyToClipboardRaw(fieldValue);
+    setCopiedField(field);
+    const toastLabel = field === "token" ? "Token" : field === "tone" ? "Tone" : `${valueLabel} value`;
+    toast(`${toastLabel} copied to clipboard`, {
+      duration: 2e3
+    });
+    setTimeout(() => setCopiedField(null), 2e3);
+  };
+  const renderCopyButton = (field, srLabel, className) => /* @__PURE__ */ jsxs(
+    Button2,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: cn("shrink-0", className),
+      onClick: () => copyField(field),
+      children: [
+        copiedField === field ? /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-5" }) : /* @__PURE__ */ jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: srLabel })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(Card, { className: "gap-4", children: [
+    /* @__PURE__ */ jsx(CardHeader, { className: "gap-3 border-b", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "size-14 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
+          style: { backgroundColor: color2.hex }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: role }),
+        /* @__PURE__ */ jsx(CardDescription, { children: color2.name ?? color2.token })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "grid gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Token" }),
+          renderCopyButton("token", `Copy ${role.toLowerCase()} token`)
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "font-mono text-base break-all", children: color2.token })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Tone" }),
+          renderCopyButton("tone", `Copy ${role.toLowerCase()} tone`)
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "font-medium", children: color2.tone })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: valueLabel }),
+          renderCopyButton("value", `Copy ${role.toLowerCase()} ${valueLabel} value`)
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "font-mono text-sm break-all", children: formattedValue })
+      ] })
+    ] })
+  ] });
+}
+function ComplianceRow({
+  label,
+  passes,
+  threshold
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 rounded-sm border border-grey-200 px-4 py-3 dark:border-grey-700", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "font-medium", children: label }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: threshold })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold",
+          passes ? "bg-success-50 text-success-800 dark:bg-success-950/30 dark:text-success-200" : "bg-danger-50 text-danger-800 dark:bg-danger-950/30 dark:text-danger-200"
+        ),
+        children: [
+          passes ? /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsx(Icons.close, { "data-slot": "icon", className: "size-4" }),
+          passes ? "Pass" : "Fail"
+        ]
+      }
+    )
+  ] });
+}
+function PairComplianceCard({ pair }) {
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "gap-2 border-b", children: [
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "AAA compliance" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: "Only pairs that pass AAA normal-text contrast are suggested here. Evaluation uses the raw contrast ratio, not the rounded display value." })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rounded-sm border border-grey-200 bg-grey-50 px-4 py-3 dark:border-grey-700 dark:bg-grey-900/60", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Contrast ratio" }),
+        /* @__PURE__ */ jsxs("p", { className: "mt-1 text-2xl font-semibold", children: [
+          pair.contrastRatio.toFixed(2),
+          ":1"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        ComplianceRow,
+        {
+          label: "AAA normal text",
+          passes: pair.passes.aaaText,
+          threshold: "7.0:1 or higher"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ComplianceRow,
+        {
+          label: "AAA large text",
+          passes: pair.passes.aaaLarge,
+          threshold: "4.5:1 or higher"
+        }
+      )
+    ] })
+  ] });
+}
+function WhiteTextExampleCard({ pair }) {
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "gap-2 border-b", children: [
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "White text example" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: "For approved dark backgrounds, white text may be suitable for large text. It is only recommended in this tool when it also passes AAA normal text." })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "grid gap-6 xl:grid-cols-[minmax(0,1.1fr)_minmax(18rem,0.9fr)]", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "rounded-sm border border-grey-200 p-6 dark:border-grey-700",
+          style: {
+            backgroundColor: pair.background.hex,
+            color: pair.foreground.hex
+          },
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-lg leading-tight font-semibold", children: "Large text example" }),
+              /* @__PURE__ */ jsxs("p", { className: "text-sm/6", children: [
+                "White text on ",
+                pair.background.token
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1 text-sm/6", children: [
+              /* @__PURE__ */ jsxs("p", { children: [
+                "AAA normal text: ",
+                /* @__PURE__ */ jsx("strong", { children: pair.passes.aaaText ? "pass" : "fail" })
+              ] }),
+              /* @__PURE__ */ jsxs("p", { children: [
+                "AAA large text: ",
+                /* @__PURE__ */ jsx("strong", { children: pair.passes.aaaLarge ? "pass" : "fail" })
+              ] })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "rounded-sm border border-grey-200 bg-grey-50 px-4 py-3 dark:border-grey-700 dark:bg-grey-900/60", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Contrast ratio" }),
+          /* @__PURE__ */ jsxs("p", { className: "mt-1 text-2xl font-semibold", children: [
+            pair.contrastRatio.toFixed(2),
+            ":1"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ComplianceRow,
+          {
+            label: "AAA normal text",
+            passes: pair.passes.aaaText,
+            threshold: "7.0:1 or higher"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ComplianceRow,
+          {
+            label: "AAA large text",
+            passes: pair.passes.aaaLarge,
+            threshold: "4.5:1 or higher"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function ColorPairingToolContent() {
+  const searchParams = useSearchParams();
+  const {
+    familyKey: initialFamilyKey,
+    selectedBackgroundToken: initialSelectedBackgroundToken,
+    selectedPairId: initialSelectedPairId,
+    themeCategory: initialThemeCategory
+  } = getInitialPairingState(searchParams);
+  const [themeCategory, setThemeCategory] = useState(initialThemeCategory);
+  const [format, setFormat] = useState("hex");
+  const [activeFamilyKey, setActiveFamilyKey] = useState(initialFamilyKey);
+  const [selectedBackgroundToken, setSelectedBackgroundToken] = useState(
+    initialSelectedBackgroundToken
+  );
+  const [selectedPairId, setSelectedPairId] = useState(initialSelectedPairId);
+  const families = recommendedAaaPairingCollections[themeCategory];
+  const resolvedActiveFamilyKey = families.some((family) => family.key === activeFamilyKey) ? activeFamilyKey : getPreferredFamilyKey(families);
+  const activeFamily = families.find((family) => family.key === resolvedActiveFamilyKey) ?? families[0];
+  const backgroundOptions = getBackgroundOptions(activeFamily);
+  const selectedBackground = backgroundOptions.find((color2) => color2.token === selectedBackgroundToken) ?? backgroundOptions[0] ?? activeFamily?.colors[0] ?? null;
+  const selectedPair = selectedBackground ? getRecommendedPairForBackground(activeFamily, selectedBackground.token, selectedPairId) : null;
+  const whiteForegroundExample = selectedBackground && supportsWhiteForegroundPreview(selectedBackground) ? getWhiteForegroundPair(selectedBackground) : null;
+  const previewPair = selectedPair ?? whiteForegroundExample;
+  const showWhiteForegroundExample = Boolean(whiteForegroundExample) && (!selectedPair || selectedPair.foreground.token !== "white");
+  const detailForeground = selectedPair?.foreground ?? whiteForegroundExample?.foreground ?? null;
+  const updateUrlParams = (nextThemeCategory, nextFamilyKey, nextSelectedBackgroundToken, nextSelectedPairId) => {
+    const params = new URLSearchParams(window.location.search);
+    params.set("palette", nextThemeCategory);
+    params.set("family", nextFamilyKey);
+    params.set("background", nextSelectedBackgroundToken);
+    if (nextSelectedPairId) {
+      params.set("pair", nextSelectedPairId);
+    } else {
+      params.delete("pair");
+    }
+    window.history.replaceState(
+      null,
+      "",
+      `${window.location.pathname}?${params.toString()}${window.location.hash}`
+    );
+  };
+  const handleThemeCategoryChange = (nextThemeCategory) => {
+    const nextFamilies = recommendedAaaPairingCollections[nextThemeCategory];
+    const nextFamilyKey = nextFamilies.some((family) => family.key === activeFamilyKey) ? activeFamilyKey : getPreferredFamilyKey(nextFamilies);
+    const nextActiveFamily = nextFamilies.find((family) => family.key === nextFamilyKey) ?? nextFamilies[0];
+    const nextSelectedBackgroundToken = getFallbackBackgroundToken(
+      nextActiveFamily,
+      getToneFromToken(selectedBackgroundToken)
+    );
+    const nextSelectedPair = getRecommendedPairForBackground(
+      nextActiveFamily,
+      nextSelectedBackgroundToken,
+      selectedPairId
+    );
+    setThemeCategory(nextThemeCategory);
+    setActiveFamilyKey(nextFamilyKey);
+    setSelectedBackgroundToken(nextSelectedBackgroundToken);
+    setSelectedPairId(nextSelectedPair?.id ?? "");
+    updateUrlParams(
+      nextThemeCategory,
+      nextFamilyKey,
+      nextSelectedBackgroundToken,
+      nextSelectedPair?.id ?? ""
+    );
+  };
+  const handleFamilyChange = (nextFamilyKey) => {
+    const nextActiveFamily = families.find((family) => family.key === nextFamilyKey);
+    const nextSelectedBackgroundToken = getFallbackBackgroundToken(
+      nextActiveFamily,
+      getToneFromToken(selectedBackgroundToken)
+    );
+    const nextSelectedPair = getRecommendedPairForBackground(
+      nextActiveFamily,
+      nextSelectedBackgroundToken,
+      selectedPairId
+    );
+    setActiveFamilyKey(nextFamilyKey);
+    setSelectedBackgroundToken(nextSelectedBackgroundToken);
+    setSelectedPairId(nextSelectedPair?.id ?? "");
+    updateUrlParams(
+      themeCategory,
+      nextFamilyKey,
+      nextSelectedBackgroundToken,
+      nextSelectedPair?.id ?? ""
+    );
+  };
+  const handleBackgroundChange = (nextSelectedBackgroundToken) => {
+    const nextSelectedPair = getRecommendedPairForBackground(
+      activeFamily,
+      nextSelectedBackgroundToken,
+      selectedPairId
+    );
+    setSelectedBackgroundToken(nextSelectedBackgroundToken);
+    setSelectedPairId(nextSelectedPair?.id ?? "");
+    updateUrlParams(
+      themeCategory,
+      resolvedActiveFamilyKey,
+      nextSelectedBackgroundToken,
+      nextSelectedPair?.id ?? ""
+    );
+  };
+  const handlePairChange = (nextSelectedPairId) => {
+    const nextSelectedPair = activeFamily?.recommendedPairs.find((pair) => pair.id === nextSelectedPairId) ?? null;
+    if (!nextSelectedPair) return;
+    setSelectedBackgroundToken(nextSelectedPair.background.token);
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams(
+      themeCategory,
+      resolvedActiveFamilyKey,
+      nextSelectedPair.background.token,
+      nextSelectedPairId
+    );
+  };
+  if (!activeFamily || !selectedBackground) {
+    return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: "No approved background tones available" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: "No approved tones are available for the current palette." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Palette:" }),
+        /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            value: themeCategory,
+            onValueChange: (value) => handleThemeCategoryChange(value),
+            children: /* @__PURE__ */ jsxs(SegmentedControlList, { className: "w-full sm:w-fit", children: [
+              /* @__PURE__ */ jsx(SegmentedControlTrigger, { value: "brand", children: "Brand palette" }),
+              /* @__PURE__ */ jsx(SegmentedControlTrigger, { value: "aboriginal", children: "Aboriginal palette" })
+            ] })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(FormatToggle, { format, setFormat })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 lg:grid-cols-4 xl:grid-cols-5", children: families.map((family) => {
+      const isActive = family.key === resolvedActiveFamilyKey;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleFamilyChange(family.key),
+          className: cn(
+            "group relative flex w-full items-center gap-3 rounded-sm border px-3 py-2 text-left transition-colors",
+            "border-grey-200 bg-background hover:bg-primary-800/10 hover:text-foreground dark:hover:bg-white/10",
+            isActive && "border-grey-800 dark:border-grey-400"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "size-4 shrink-0 rounded-full",
+                style: { backgroundColor: getFamilySwatchColor(family) }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: family.label })
+          ]
+        },
+        family.key
+      );
+    }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid items-start gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(17rem,0.68fr)]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+          previewPair ? /* @__PURE__ */ jsx(
+            PairPreview,
+            {
+              family: activeFamily,
+              isRecommended: Boolean(selectedPair),
+              pair: previewPair
+            }
+          ) : /* @__PURE__ */ jsx(Card, { className: "gap-0 overflow-hidden py-0", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "p-6 sm:min-h-[26rem] sm:p-8",
+              style: {
+                backgroundColor: selectedBackground.hex,
+                color: selectedBackground.tone >= 600 ? "#ffffff" : "#002664"
+              },
+              children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-[22rem] flex-col justify-between gap-8", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 rounded-full border border-current bg-transparent px-3 py-1 text-[0.72rem] font-semibold tracking-[0.16em] uppercase", children: [
+                  /* @__PURE__ */ jsx(Icons.palette, { "data-slot": "icon", className: "size-4" }),
+                  activeFamily.label
+                ] }) }),
+                /* @__PURE__ */ jsxs("div", { className: "max-w-xl space-y-4 pb-12 sm:pb-16", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: "Approved background" }),
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                    /* @__PURE__ */ jsx("h3", { className: "max-w-lg text-4xl leading-none font-bold text-current sm:text-5xl", children: "Pair colour with confidence." }),
+                    /* @__PURE__ */ jsx("p", { className: "max-w-md text-sm/6 sm:text-base/7", children: "This approved background tone does not currently have a recommended AAA foreground in this tool." })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 rounded-full bg-current/10 px-4 py-2 text-sm font-semibold", children: [
+                    "No recommendation",
+                    /* @__PURE__ */ jsx(Icons.info, { "data-slot": "icon", className: "size-4" })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "inline-flex rounded-full border border-current px-4 py-2 text-sm", children: selectedBackground.token })
+                ] })
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(Card, { children: [
+            /* @__PURE__ */ jsxs(CardHeader, { className: "gap-2 border-b", children: [
+              /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "Background tone strip" }),
+              /* @__PURE__ */ jsx(CardDescription, { children: "Only approved background tones are shown. Filled chips have a recommended AAA foreground pair, and dark backgrounds may also offer white text where it passes AAA." })
+            ] }),
+            /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-5 gap-2 sm:grid-cols-7 lg:grid-cols-10 xl:grid-cols-[repeat(19,minmax(0,1fr))]", children: backgroundOptions.map((color2) => {
+                const pair = getRecommendedPairForBackground(activeFamily, color2.token);
+                const hasWhiteExample = supportsWhiteForegroundPreview(color2);
+                const isSelected = selectedBackground.token === color2.token;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleBackgroundChange(color2.token),
+                    className: cn(
+                      "group relative h-12 rounded-sm border border-grey-200 transition-transform hover:scale-[1.03] dark:border-grey-700",
+                      isSelected && "ring-2 ring-primary-500 ring-offset-2 ring-offset-background"
+                    ),
+                    style: { backgroundColor: color2.hex },
+                    children: [
+                      pair ? /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/30 shadow-sm",
+                          style: { backgroundColor: pair.foreground.hex }
+                        }
+                      ) : null,
+                      /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                        color2.token,
+                        pair ? ` paired with ${pair.foreground.token}` : hasWhiteExample ? " has a white text example in this tool" : " has no recommended pair in this tool"
+                      ] })
+                    ]
+                  },
+                  color2.token
+                );
+              }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm text-muted-foreground", children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "Selected background:",
+                  " ",
+                  /* @__PURE__ */ jsx("strong", { className: "text-foreground", children: selectedBackground.token })
+                ] }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  selectedPair ? "Recommended foreground:" : "White text example:",
+                  " ",
+                  /* @__PURE__ */ jsx("strong", { className: "text-foreground", children: selectedPair?.foreground.token ?? whiteForegroundExample?.foreground.token ?? "None" })
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(PairDetailCard, { color: selectedBackground, format, role: "Background" }),
+            detailForeground ? /* @__PURE__ */ jsx(PairDetailCard, { color: detailForeground, format, role: "Foreground" }) : /* @__PURE__ */ jsxs(Card, { className: "gap-4", children: [
+              /* @__PURE__ */ jsx(CardHeader, { className: "gap-3 border-b", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsx(CardTitle, { children: "Foreground" }),
+                /* @__PURE__ */ jsx(CardDescription, { children: "No recommended foreground available" })
+              ] }) }),
+              /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Select another approved tone or review the recommended pairs list for the same family." }) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxs(Card, { className: "h-fit", children: [
+          /* @__PURE__ */ jsxs(CardHeader, { className: "gap-2 border-b", children: [
+            /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "Recommended pairs" }),
+            /* @__PURE__ */ jsx(CardDescription, { children: "Recommended AAA combinations for this family, including white on eligible dark backgrounds." })
+          ] }),
+          /* @__PURE__ */ jsx(CardContent, { className: "grid gap-3", children: activeFamily.recommendedPairs.map((pair) => {
+            const isActive = selectedPair?.id === pair.id;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => handlePairChange(pair.id),
+                className: cn(
+                  "rounded-sm border p-4 text-left transition-colors",
+                  isActive ? "border-primary-500 bg-primary-50/70 dark:bg-primary-950/30" : "border-grey-200 hover:border-grey-400 hover:bg-grey-50 dark:border-grey-700 dark:hover:border-grey-500 dark:hover:bg-grey-900/70"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "size-11 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
+                          style: { backgroundColor: pair.background.hex }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "size-11 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
+                          style: { backgroundColor: pair.foreground.hex }
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-grey-200 px-2.5 py-1 text-xs font-semibold text-muted-foreground dark:border-grey-700", children: [
+                      /* @__PURE__ */ jsx(Icons.contrast, { "data-slot": "icon", className: "size-4" }),
+                      pair.rating
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-1", children: [
+                    /* @__PURE__ */ jsxs("p", { className: "font-medium text-foreground", children: [
+                      pair.background.token,
+                      " / ",
+                      pair.foreground.token
+                    ] }),
+                    /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                      pair.contrastRatio.toFixed(2),
+                      ":1 contrast ratio"
+                    ] })
+                  ] })
+                ]
+              },
+              pair.id
+            );
+          }) })
+        ] }) })
+      ] }),
+      selectedPair ? /* @__PURE__ */ jsx(PairComplianceCard, { pair: selectedPair }) : null,
+      showWhiteForegroundExample && whiteForegroundExample ? /* @__PURE__ */ jsx(WhiteTextExampleCard, { pair: whiteForegroundExample }) : null
+    ] })
+  ] });
+}
+function ColorPairingTool() {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ColorPairingToolLoading, {}), children: /* @__PURE__ */ jsx(ColorPairingToolContent, {}) });
+}
 function ColorSwatches({ theme: theme2, format, viewMode }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -15279,7 +16245,7 @@ var ChartTooltip4 = ({
       {
         className: cn(
           // base
-          "rounded-md border text-sm shadow-md",
+          "rounded-sm border text-sm shadow-md",
           // border color
           "border-gray-200 dark:border-gray-800",
           // background color
@@ -15871,7 +16837,7 @@ function DialogContent({
       {
         "data-slot": "dialog-content",
         className: cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-sm border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
           className
         ),
         ...props,
@@ -16101,7 +17067,7 @@ function ContextMenuSubContent({
     {
       "data-slot": "context-menu-sub-content",
       className: cn(
-        "z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-sm border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       ),
       ...props
@@ -16117,7 +17083,7 @@ function ContextMenuContent({
     {
       "data-slot": "context-menu-content",
       className: cn(
-        "z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-sm border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       ),
       ...props
@@ -16624,7 +17590,7 @@ function DataTable({
   });
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4 p-1", children: [
     /* @__PURE__ */ jsx(DataTableToolbar, { table, search, toolbar }),
-    /* @__PURE__ */ jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx("div", { className: "rounded-sm border", children: /* @__PURE__ */ jsxs(Table, { children: [
       /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
         return /* @__PURE__ */ jsx(TableHead, { colSpan: header.colSpan, children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id);
       }) }, headerGroup.id)) }),
@@ -16742,7 +17708,7 @@ var ChartTooltip5 = ({ active, payload, valueFormatter }) => {
       {
         className: cn(
           // base
-          "rounded-md border text-sm shadow-md",
+          "rounded-sm border text-sm shadow-md",
           // border color
           "border-gray-200 dark:border-gray-800",
           // background color
@@ -16980,8 +17946,8 @@ function DrawerContent({
         "data-slot": "drawer-content",
         className: cn(
           "group/drawer-content fixed z-50 flex h-auto flex-col bg-background",
-          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
-          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-sm data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-sm data-[vaul-drawer-direction=bottom]:border-t",
           "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
           "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
           className
@@ -17397,152 +18363,10 @@ function FormMessage({ className, ...props }) {
     }
   );
 }
-var styles3 = {
-  base: [
-    // Base
-    "inline-flex items-center justify-center gap-2 rounded-sm text-sm font-medium bg-transparent transition-all whitespace-nowrap cursor-pointer border-(--toggle-border) [--toggle-border:var(--color-grey-200)] text-grey-800",
-    // States
-    "data-[state=on]:bg-grey-100 data-[state=on]:text-grey-850",
-    // Hover
-    "hover:bg-grey-100 hover:text-grey-850",
-    // Focus
-    "focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-(--toggle-border)",
-    // Dark mode
-    "dark:text-white",
-    // Dark mode states
-    "dark:data-[state=on]:bg-white/10 dark:data-[state=on]:text-white",
-    // Dark mode hover
-    "dark:hover:bg-white/10 dark:hover:text-white",
-    // Disabled
-    "disabled:pointer-events-none disabled:opacity-50",
-    // Icon
-    '[&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 [&_svg]:shrink-0',
-    // Aria invalid
-    "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
-    // Aria invalid dark mode
-    "dark:aria-invalid:ring-destructive/40"
-  ],
-  outline: [
-    // Base
-    "text-grey-800 border [--toggle-border:var(--color-grey-300)]",
-    // States
-    "hover:[--toggle-border:var(--color-grey-400)]",
-    // Dark mode
-    "dark:[--toggle-border:white]/40",
-    // Dark mode states
-    "dark:hover:[--toggle-border:white]/50",
-    // Data on
-    "data-[state=on]:bg-primary-800/10"
-  ]
-};
-var toggleVariants = cva(styles3.base, {
-  variants: {
-    variant: {
-      ghost: "",
-      outline: clsx12(styles3.outline)
-    },
-    size: {
-      default: "h-9 px-2 min-w-9",
-      sm: "h-8 px-1.5 min-w-8",
-      lg: "h-10 px-2.5 min-w-10"
-    }
-  },
-  defaultVariants: {
-    variant: "ghost",
-    size: "default"
-  }
-});
-function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    TogglePrimitive.Root,
-    {
-      "data-slot": "toggle",
-      className: cn(toggleVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
-var ToggleGroupContext = React5.createContext({
-  size: "default",
-  variant: "ghost"
-});
-function ToggleGroup({
-  className,
-  variant,
-  size,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    ToggleGroupPrimitive.Root,
-    {
-      "data-slot": "toggle-group",
-      "data-variant": variant,
-      "data-size": size,
-      className: cn(
-        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
-    }
-  );
-}
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}) {
-  const context = React5.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ jsx(
-    ToggleGroupPrimitive.Item,
-    {
-      "data-slot": "toggle-group-item",
-      "data-variant": context.variant || variant,
-      "data-size": context.size || size,
-      className: cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size
-        }),
-        "min-w-0 shrink-0 rounded-none shadow-none first:rounded-l-sm last:rounded-r-sm focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-}
-function FormatToggle({ format, setFormat }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Format:" }),
-    /* @__PURE__ */ jsxs(
-      ToggleGroup,
-      {
-        type: "single",
-        value: format,
-        onValueChange: (value) => value && setFormat(value),
-        children: [
-          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "hex", "aria-label": "HEX format", children: "HEX" }),
-          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "rgb", "aria-label": "RGB format", children: "RGB" }),
-          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "hsl", "aria-label": "HSL format", children: "HSL" }),
-          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "oklch", "aria-label": "OKLCH format", children: "OKLCH" })
-        ]
-      }
-    )
-  ] });
-}
 
 // package.json
 var package_default = {
-  version: "1.96.0"};
+  version: "1.98.0"};
 var SluggerContext = React5__default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";
@@ -17693,7 +18517,7 @@ function SiteSearch({ navigation }) {
         children: [
           /* @__PURE__ */ jsx("span", { className: "hidden text-grey-600 lg:inline-flex dark:text-grey-200", children: "Search site..." }),
           /* @__PURE__ */ jsx("span", { className: "inline-flex lg:hidden dark:text-grey-200", children: "Search..." }),
-          /* @__PURE__ */ jsxs("kbd", { className: "pointer-events-none absolute top-2 right-2 hidden h-5 items-center gap-1 rounded border bg-muted px-2 font-mono text-xs font-medium opacity-100 select-none sm:flex", children: [
+          /* @__PURE__ */ jsxs("kbd", { className: "pointer-events-none absolute top-2 right-2 hidden h-5 items-center gap-1 rounded-sm border bg-muted px-2 font-mono text-xs font-medium opacity-100 select-none sm:flex", children: [
             /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2318" }),
             "K"
           ] })
@@ -17908,7 +18732,7 @@ function HoverCardContent({
       align,
       sideOffset,
       className: cn(
-        "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-sm border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       ),
       ...props
@@ -17946,7 +18770,7 @@ function InputOTPSlot({
       "data-slot": "input-otp-slot",
       "data-active": isActive,
       className: cn(
-        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:rounded-l-sm first:border-l last:rounded-r-sm aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
         className
       ),
       ...props,
@@ -18231,7 +19055,7 @@ var ChartTooltip6 = ({ active, payload, label, valueFormatter }) => {
       {
         className: cn(
           // base
-          "rounded-md border text-sm shadow-md",
+          "rounded-sm border text-sm shadow-md",
           // border color
           "border-gray-200 dark:border-gray-800",
           // background color
@@ -19126,7 +19950,7 @@ function Menubar({ className, ...props }) {
     {
       "data-slot": "menubar",
       className: cn(
-        "flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-xs",
+        "flex h-9 items-center gap-1 rounded-sm border bg-background p-1 shadow-xs",
         className
       ),
       ...props
@@ -19176,7 +20000,7 @@ function MenubarContent({
       alignOffset,
       sideOffset,
       className: cn(
-        "z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-sm border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       ),
       ...props
@@ -19320,7 +20144,7 @@ function MenubarSubContent({
     {
       "data-slot": "menubar-sub-content",
       className: cn(
-        "z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-sm border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       ),
       ...props
@@ -27739,7 +28563,7 @@ function NavigationLink({
       href,
       onClick,
       className: clsx12(
-        "inline-block w-full cursor-pointer rounded-r-md border-l py-1 pr-2 pl-4 text-left text-base/8 sm:text-sm/6",
+        "inline-block w-full cursor-pointer rounded-r-sm border-l py-1 pr-2 pl-4 text-left text-base/8 sm:text-sm/6",
         "hover:border-grey-950 hover:bg-primary-800/10 hover:font-semibold hover:text-grey-950",
         "dark:text-grey-400 dark:hover:border-grey-400 dark:hover:text-white",
         href === pathname && "border-l border-primary-800 bg-primary-800/10 font-bold text-primary-800 dark:border-white dark:bg-white/20"
@@ -27841,7 +28665,7 @@ function NavigationMenuContent({
       "data-slot": "navigation-menu-content",
       className: cn(
         "top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto",
-        "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95",
+        "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-sm group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95",
         className
       ),
       ...props
@@ -27857,7 +28681,7 @@ function NavigationMenuViewport({
     {
       "data-slot": "navigation-menu-viewport",
       className: cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-sm border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
         className
       ),
       ...props
@@ -28180,7 +29004,7 @@ function NSWCard({
           "div",
           {
             className: cn(
-              "h-full rounded-md border border-(--nsw-card-border)",
+              "h-full rounded-sm border border-(--nsw-card-border)",
               hasImage && "border-t-none rounded-t-none"
             ),
             children: /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col p-8", children: bodyChildren })
@@ -28192,7 +29016,7 @@ function NSWCard({
           "div",
           {
             className: cn(
-              "flex h-full flex-col rounded-md border border-(--nsw-card-border) p-8",
+              "flex h-full flex-col rounded-sm border border-(--nsw-card-border) p-8",
               hasImage && "border-t-none rounded-t-none"
             ),
             children: bodyChildren
@@ -28747,7 +29571,7 @@ function ResizableHandle({
         className
       ),
       ...props,
-      children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border", children: /* @__PURE__ */ jsx(Icons.drag_indicator, { className: "size-2.5" }) })
+      children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsx(Icons.drag_indicator, { className: "size-2.5" }) })
     }
   );
 }
@@ -29046,7 +29870,7 @@ function Sidebar({
               {
                 "data-sidebar": "sidebar",
                 "data-slot": "sidebar-inner",
-                className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm",
+                className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-sm group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm",
                 children
               }
             )
@@ -29505,7 +30329,7 @@ function SidebarLink({ link, pathname, onLinkClick, depth }) {
   const isActive = pathname === link.href;
   const isActiveOrHasActiveDescendant = isLinkOrDescendantActive(link, pathname);
   const baseLinkClasses = clsx12(
-    "w-full cursor-pointer rounded-r-md border-l py-1 pr-2 pl-4 text-left text-base/8 sm:text-sm/6",
+    "w-full cursor-pointer rounded-r-sm border-l py-1 pr-2 pl-4 text-left text-base/8 sm:text-sm/6",
     "hover:border-grey-950 hover:bg-primary-800/10 hover:font-semibold hover:text-grey-950",
     "dark:text-grey-400 dark:hover:border-grey-400 dark:hover:text-white",
     isActive && "border-l border-primary-800 bg-primary-800/10 font-bold text-primary-800 dark:border-white dark:bg-white/20"
@@ -30441,7 +31265,7 @@ var TabNavigation = React5__default.forwardRef(({ className, children, ...props
               motion.div,
               {
                 layoutId: "hoverBackground",
-                className: "absolute top-2 bottom-2 transform rounded-md border border-grey-100 bg-grey-150 transition-all duration-200 ease-out dark:border-grey-700 dark:bg-grey-800",
+                className: "absolute top-2 bottom-2 transform rounded-sm border border-grey-100 bg-grey-150 transition-all duration-200 ease-out dark:border-grey-700 dark:bg-grey-800",
                 transition: {
                   type: "spring",
                   stiffness: 500,
@@ -30977,7 +31801,7 @@ var Tracker = React5__default.forwardRef(
 );
 Tracker.displayName = "Tracker";
 var buttonVariants4 = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
@@ -31096,7 +31920,7 @@ var Artifact = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
-      "flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm",
+      "flex flex-col overflow-hidden rounded-sm border bg-background shadow-sm",
       className
     ),
     ...props
@@ -31342,7 +32166,7 @@ function isFunction(value) {
   return typeof value === "function";
 }
 var badgeVariants2 = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  "inline-flex items-center justify-center rounded-sm border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
       variant: {
@@ -31527,7 +32351,7 @@ var CodeBlock = ({
   "div",
   {
     className: cn(
-      "relative w-full overflow-hidden rounded-md border bg-background text-foreground",
+      "relative w-full overflow-hidden rounded-sm border bg-background text-foreground",
       className
     ),
     ...props,
@@ -31642,7 +32466,7 @@ function HoverCardContent2({
       align,
       sideOffset,
       className: cn(
-        "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-sm border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       ),
       ...props
@@ -32346,7 +33170,7 @@ function DropdownMenuContent2({
       "data-slot": "dropdown-menu-content",
       sideOffset,
       className: cn(
-        "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-sm border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       ),
       ...props
@@ -32633,7 +33457,7 @@ function Textarea2({ className, ...props }) {
     {
       "data-slot": "textarea",
       className: cn(
-        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full rounded-sm border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
         className
       ),
       ...props
@@ -32653,7 +33477,7 @@ function PromptInputAttachment({ data, className, ...props }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("group relative h-14 w-14 rounded-md border", className),
+      className: cn("group relative h-14 w-14 rounded-sm border", className),
       ...props,
       children: [
         data.mediaType?.startsWith("image/") && data.url ? /* @__PURE__ */ jsx(
@@ -32931,7 +33755,7 @@ var PromptInput = ({
       "form",
       {
         className: cn(
-          "w-full divide-y overflow-hidden rounded-xl border bg-background shadow-sm",
+          "w-full divide-y overflow-hidden rounded-sm border bg-background shadow-sm",
           className
         ),
         onSubmit: handleSubmit,
@@ -33296,7 +34120,7 @@ var TaskItemFile = ({ children, className, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
-      "inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-xs text-foreground",
+      "inline-flex items-center gap-1 rounded-sm border bg-secondary px-1.5 py-0.5 text-xs text-foreground",
       className
     ),
     ...props,
@@ -33331,7 +34155,7 @@ var TaskContent = ({ children, className, ...props }) => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-2 border-l-2 border-muted pl-4", children })
   }
 );
-var Tool = ({ className, ...props }) => /* @__PURE__ */ jsx(Collapsible2, { className: cn("not-prose mb-4 w-full rounded-md border", className), ...props });
+var Tool = ({ className, ...props }) => /* @__PURE__ */ jsx(Collapsible2, { className: cn("not-prose mb-4 w-full rounded-sm border", className), ...props });
 var getStatusBadge = (status) => {
   const labels = {
     "input-streaming": "Pending",
@@ -33413,7 +34237,7 @@ function Input2({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "h-9 w-full min-w-0 rounded-sm border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
         "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
         className
@@ -33452,7 +34276,7 @@ var WebPreview = ({
   return /* @__PURE__ */ jsx(WebPreviewContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("flex size-full flex-col rounded-lg border bg-card", className),
+      className: cn("flex size-full flex-col rounded-sm border bg-card", className),
       ...props,
       children
     }
@@ -33691,6 +34515,6 @@ var languages = [
   "html"
 ];
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Action2 as Action, Actions, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, Artifact, ArtifactAction, ArtifactActions, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactTitle, AspectRatio, AuthLayout, AvailableChartColors, Avatar, AvatarFallback, AvatarImage, Badge, BadgeButton, BarChart, BarList, BaseColorSwatches, Branch, BranchMessages, BranchNext, BranchPage, BranchPrevious, BranchSelector, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, Button2 as Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CategoryBar, ChainOfThought, ChainOfThoughtContent, ChainOfThoughtHeader, ChainOfThoughtImage, ChainOfThoughtSearchResult, ChainOfThoughtSearchResults, ChainOfThoughtStep, ChartContainer, ChartLegend3 as ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip3 as ChartTooltip, ChartTooltipContent, Checkbox, CheckboxSmall, Code, CodeBlock, CodeBlockCopyButton, CodeDemo, CodeHighlight, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorCard, ColorSwatches, ColourScale, ComboChart, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Context, ContextCacheUsage, ContextContent, ContextContentBody, ContextContentFooter, ContextContentHeader, ContextInputUsage, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ContextOutputUsage, ContextReasoningUsage, ContextTrigger, Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, DataTableToolbar, DataTableViewOptions, Description4 as Description, DescriptionDetails, DescriptionList, DescriptionTerm, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChart, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicFavicon, ErrorMessage, ExpandableSearch, ExpandableSearchField, Field2 as Field, FieldGroup, FieldLabel, Fieldset2 as Fieldset, Footer, FooterAcknowledgement, FooterLegalLinks, FooterSmallPrint, FooterSocialLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormatToggle, GenerateInterpolatedColors, Header2 as Header, Heading, HeroBannerSupportingImage, HoverCard, HoverCardContent, HoverCardTrigger, Icons, Image4 as Image, InlineCitation, InlineCitationCard, InlineCitationCardBody, InlineCitationCardTrigger, InlineCitationCarousel, InlineCitationCarouselContent, InlineCitationCarouselHeader, InlineCitationCarouselIndex, InlineCitationCarouselItem, InlineCitationSource, InlineCitationText, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label5 as Label, Legend6 as Legend, LineChart, Link, _List as List, Listbox2 as Listbox, ListboxDescription, ListboxLabel, ListboxOption2 as ListboxOption, Loader, Loading, Logo, MainNavigation, Masthead, MegaMenu, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageContent, MobileHeader, MobileSearch, MultiLevelPushMenu, NSWCard, NSWCardArrow, NSWCardDescription, NSWCardIcon, NSWCardImg, NSWCardTitle, Navbar, NavbarDivider, NavbarItem, NavbarLabel, NavbarSection, NavbarSpacer, Navigation, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotFound, OpenIn, OpenInChatGPT, OpenInClaude, OpenInContent, OpenInScira, OpenInT3, OpenInTrigger, OpenInv0, PageHeading, Pagination, PaginationGap, PaginationList, PaginationNext, PaginationPage, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PreWithCopy, PrevNextLinks, PrevNextLinksPageLink, Progress, ProgressBar, ProgressCircle, PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputSubmit, PromptInputTextarea, PromptInputToolbar, PromptInputTools, Prose, RadioGroup2 as RadioGroup, RadioGroupItem, Reasoning, ReasoningContent, ReasoningTrigger, ResizableHandle, ResizablePanel, ResizablePanelGroup, Response, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator4 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLink, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNavigation, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiteSearch, Skeleton, Slider, Social, Source, Sources, SourcesContent, SourcesTrigger, SparkAreaChart, SparkBarChart, SparkLineChart, Spinner, StepIndicator, StepNavigation, Strong, SubmitButton, Suggestion, Suggestions, Switch2 as Switch, SwitchField, SwitchGroup, TabNavigation, TabNavigationLink, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, Tabs2 as Tabs, TabsContent, TabsList, TabsTrigger, Task, TaskContent, TaskItem, TaskItemFile, TaskTrigger, Text, TextLink, Textarea, ThemeColorPalette, ThemeProvider, ThemeSelector, ThemeSwitcher, Toaster, TocContext, TocProvider, Toggle, ToggleGroup, ToggleGroupItem, Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, Tooltip5 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopLevel, TouchTarget, Tracker, Tooltip3 as TremorTooltip, ViewToggle, WebPreview, WebPreviewBody, WebPreviewNavigation, WebPreviewUrl, Wrapper, aboriginal, addStartStopToColorArray, allPalettes, badgeVariants, brand, buttonVariants, camelCase, chartColors, cn, colorDataArray, colorThemes, colors, constructCategoryColors, createColorArray, createColorData, createFormStore, darkenColor, diverging, domToSimple, focusInput, focusRing, generateColorThemes, generateDataVisColors, getColorClassName, getColorValue, getHeadings, getNodeText, getSurroundingColors, getYAxisDomain, hasErrorInput, hasOnlyOneValueForKey, humaniseVariant, interpolateColors, isLightColor, kebabCase, languages, lightenColor, navigationMenuTriggerStyle, oklchConverter, progressBarVariants, renderColorOutput, renderColorOutputToDTFM, semantic, sequential, shades, themeIndices, themeTokens, toggleVariants, truncate, useActiveSectionObserver, useDisableToc, useFormField, useIsMobile, useOnWindowResize, usePageHeadings, usePromptInputAttachments, useSelectorHeight, useSidebar, useStickyOffset, useToc };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Action2 as Action, Actions, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, Artifact, ArtifactAction, ArtifactActions, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactTitle, AspectRatio, AuthLayout, AvailableChartColors, Avatar, AvatarFallback, AvatarImage, Badge, BadgeButton, BarChart, BarList, BaseColorSwatches, Branch, BranchMessages, BranchNext, BranchPage, BranchPrevious, BranchSelector, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, Button2 as Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CategoryBar, ChainOfThought, ChainOfThoughtContent, ChainOfThoughtHeader, ChainOfThoughtImage, ChainOfThoughtSearchResult, ChainOfThoughtSearchResults, ChainOfThoughtStep, ChartContainer, ChartLegend3 as ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip3 as ChartTooltip, ChartTooltipContent, Checkbox, CheckboxSmall, Code, CodeBlock, CodeBlockCopyButton, CodeDemo, CodeHighlight, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorCard, ColorPairingTool, ColorSwatches, ColourScale, ComboChart, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Context, ContextCacheUsage, ContextContent, ContextContentBody, ContextContentFooter, ContextContentHeader, ContextInputUsage, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ContextOutputUsage, ContextReasoningUsage, ContextTrigger, Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, DataTableToolbar, DataTableViewOptions, Description4 as Description, DescriptionDetails, DescriptionList, DescriptionTerm, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChart, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicFavicon, ErrorMessage, ExpandableSearch, ExpandableSearchField, Field2 as Field, FieldGroup, FieldLabel, Fieldset2 as Fieldset, Footer, FooterAcknowledgement, FooterLegalLinks, FooterSmallPrint, FooterSocialLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormatToggle, GenerateInterpolatedColors, Header2 as Header, Heading, HeroBannerSupportingImage, HoverCard, HoverCardContent, HoverCardTrigger, Icons, Image4 as Image, InlineCitation, InlineCitationCard, InlineCitationCardBody, InlineCitationCardTrigger, InlineCitationCarousel, InlineCitationCarouselContent, InlineCitationCarouselHeader, InlineCitationCarouselIndex, InlineCitationCarouselItem, InlineCitationSource, InlineCitationText, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label5 as Label, Legend6 as Legend, LineChart, Link, _List as List, Listbox2 as Listbox, ListboxDescription, ListboxLabel, ListboxOption2 as ListboxOption, Loader, Loading, Logo, MainNavigation, Masthead, MegaMenu, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageContent, MobileHeader, MobileSearch, MultiLevelPushMenu, NSWCard, NSWCardArrow, NSWCardDescription, NSWCardIcon, NSWCardImg, NSWCardTitle, Navbar, NavbarDivider, NavbarItem, NavbarLabel, NavbarSection, NavbarSpacer, Navigation, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotFound, OpenIn, OpenInChatGPT, OpenInClaude, OpenInContent, OpenInScira, OpenInT3, OpenInTrigger, OpenInv0, PageHeading, Pagination, PaginationGap, PaginationList, PaginationNext, PaginationPage, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PreWithCopy, PrevNextLinks, PrevNextLinksPageLink, Progress, ProgressBar, ProgressCircle, PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputSubmit, PromptInputTextarea, PromptInputToolbar, PromptInputTools, Prose, RadioGroup2 as RadioGroup, RadioGroupItem, Reasoning, ReasoningContent, ReasoningTrigger, ResizableHandle, ResizablePanel, ResizablePanelGroup, Response, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator4 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLink, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNavigation, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiteSearch, Skeleton, Slider, Social, Source, Sources, SourcesContent, SourcesTrigger, SparkAreaChart, SparkBarChart, SparkLineChart, Spinner, StepIndicator, StepNavigation, Strong, SubmitButton, Suggestion, Suggestions, Switch2 as Switch, SwitchField, SwitchGroup, TabNavigation, TabNavigationLink, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, Tabs2 as Tabs, TabsContent, TabsList, TabsTrigger, Task, TaskContent, TaskItem, TaskItemFile, TaskTrigger, Text, TextLink, Textarea, ThemeColorPalette, ThemeProvider, ThemeSelector, ThemeSwitcher, Toaster, TocContext, TocProvider, Toggle, ToggleGroup, ToggleGroupItem, Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, Tooltip5 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopLevel, TouchTarget, Tracker, Tooltip3 as TremorTooltip, ViewToggle, WebPreview, WebPreviewBody, WebPreviewNavigation, WebPreviewUrl, Wrapper, aboriginal, addStartStopToColorArray, allPalettes, badgeVariants, brand, buttonVariants, camelCase, chartColors, cn, colorDataArray, colorThemes, colors, constructCategoryColors, createColorArray, createColorData, createFormStore, darkenColor, diverging, domToSimple, focusInput, focusRing, generateColorThemes, generateDataVisColors, getColorClassName, getColorValue, getHeadings, getNodeText, getSurroundingColors, getYAxisDomain, hasErrorInput, hasOnlyOneValueForKey, humaniseVariant, interpolateColors, isLightColor, kebabCase, languages, lightenColor, navigationMenuTriggerStyle, oklchConverter, progressBarVariants, renderColorOutput, renderColorOutputToDTFM, semantic, sequential, shades, themeIndices, themeTokens, toggleVariants, truncate, useActiveSectionObserver, useDisableToc, useFormField, useIsMobile, useOnWindowResize, usePageHeadings, usePromptInputAttachments, useSelectorHeight, useSidebar, useStickyOffset, useToc };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map