@nswds/app 1.98.0 → 1.99.0

package/dist/index.cjs

@@ -4159,7 +4159,7 @@ function AccordionContent({
   );
 }
 var alertVariants = classVarianceAuthority.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: {
@@ -4605,7 +4605,7 @@ var AlertDialogContent = React5__namespace.forwardRef(function AlertDialogConten
         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",
@@ -5071,7 +5071,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
@@ -6346,7 +6346,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
@@ -7440,7 +7440,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
@@ -7532,7 +7532,7 @@ function Breadcrumbs({
   ] }) });
 }
 var buttonVariants2 = classVarianceAuthority.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: {
@@ -7626,7 +7626,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),
@@ -7712,7 +7712,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
       ),
@@ -7726,7 +7726,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
@@ -8289,7 +8289,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: [
@@ -8310,7 +8310,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",
@@ -8417,7 +8417,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
@@ -13579,7 +13579,7 @@ function PreWithCopy(props) {
     /* @__PURE__ */ jsxRuntime.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: [
@@ -13645,7 +13645,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
@@ -14022,7 +14022,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
@@ -14048,7 +14048,7 @@ function ThemeSelectorLoading() {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 w-20 rounded bg-grey-200" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-3 rounded-md border border-muted bg-muted/30 p-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-3 rounded-sm border border-muted bg-muted/30 p-3", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex min-w-0 items-center justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-48 rounded bg-grey-200" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 rounded bg-grey-200" })
@@ -14228,7 +14228,7 @@ function ThemeSelectorContent({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-medium", children: "Share Theme" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-3 rounded-md border border-muted bg-muted/30 p-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-3 rounded-sm border border-muted bg-muted/30 p-3", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex min-w-0 items-center justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Copy this URL to share your theme selection:" }),
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -14246,7 +14246,7 @@ function ThemeSelectorContent({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 })
       ] })
     ] })
   ] });
@@ -14298,7 +14298,7 @@ function TooltipContent({
 }
 function CodeDemoLoading() {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 animate-pulse", children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-3", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-32 rounded bg-grey-200 dark:bg-grey-600" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-32 rounded bg-grey-200 dark:bg-grey-600" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-3", children: [
@@ -14309,7 +14309,7 @@ function CodeDemoLoading() {
     ] }) }),
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "h-64 w-full rounded bg-grey-200 dark:bg-grey-600" }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border border-grey-200 dark:border-grey-600", children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "h-8 w-24 rounded bg-grey-200 dark:bg-grey-600" }) }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "h-8 w-24 rounded bg-grey-200 dark:bg-grey-600" }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-48 bg-grey-100 dark:bg-grey-800" })
     ] })
   ] });
@@ -14493,7 +14493,7 @@ function CodeDemoContent({ data, showCode = true, controls = defaultControls })
     }
   }, [themeCategory, primaryColor, accentColor, greyColor, isThemeInitialized]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8", children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative flex w-full items-center", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative flex w-full items-center", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
         data.githubSlug && /* @__PURE__ */ jsxRuntime.jsx(EditOnGithubButton, { githubSlug: data.githubSlug }),
         data.figmaSlug && /* @__PURE__ */ jsxRuntime.jsx(OpenInFigmaButton, { figmaSlug: data.figmaSlug })
@@ -14552,7 +14552,7 @@ function CodeDemoContent({ data, showCode = true, controls = defaultControls })
           shouldExpand && "pb-[41px]"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Tabs, { tabIndex, items: codeItems, onSelect: setTabIndex }),
             variants.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Select, { onValueChange: (value) => handleSelectVariant(value), children: [
               /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select a variant" }) }),
@@ -14972,8 +14972,18 @@ function ColorCard({ name, token, hex: hex2, rgb: rgb2, hsl, oklch: oklch2, form
     ] })
   ] }) });
 }
-var recommendedBackgroundTones = [100, 200, 400, 500, 600, 700, 800];
+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;
@@ -15048,10 +15058,13 @@ function buildRecommendedPairs(colorsToPair, minimumRatio) {
   const recommendedPairs = [];
   for (const background of backgrounds) {
     const pair = pickForeground(colorsToPair, background, minimumRatio);
-    if (!pair || recommendedPairs.some((item) => item.id === pair.id)) {
-      continue;
+    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);
     }
-    recommendedPairs.push(pair);
   }
   return recommendedPairs;
 }
@@ -15080,6 +15093,12 @@ function buildRecommendedCollections(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);
 }
@@ -15239,12 +15258,52 @@ function getDefaultPair(family) {
 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__ */ jsxRuntime.jsxs("div", { className: "animate-pulse space-y-6", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-40 rounded-md border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-40 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 xl:grid-cols-[minmax(0,1.3fr)_minmax(20rem,0.9fr)]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-96 rounded-md border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-96 rounded-md border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-96 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-96 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" })
     ] })
   ] });
 }
@@ -15252,15 +15311,28 @@ 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 defaultPair = getDefaultPair(activeFamily);
-  const selectedPairId = activeFamily?.recommendedPairs.some((pair) => pair.id === pairParam) ? pairParam : defaultPair?.id ?? "";
-  return { familyKey, selectedPairId, themeCategory };
-}
-function PairPreview({ family, pair }) {
+  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__ */ jsxRuntime.jsx(Card, { className: "gap-0 overflow-hidden py-0", children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -15303,10 +15375,10 @@ function PairPreview({ family, pair }) {
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-xl space-y-4 pb-12 sm:pb-16", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: "Tone on tone" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "max-w-lg text-4xl leading-none font-bold text-current sm:text-5xl", children: "Pair colour with confidence." }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-md text-sm/6 sm:text-base/7", children: "Use only AAA-approved tone-on-tone combinations for headings, body copy, and calls to action on colour." })
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
@@ -15319,8 +15391,8 @@ function PairPreview({ family, pair }) {
                 color: pair.background.hex
               },
               children: [
-                "Pass",
-                /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-4" })
+                statusLabel,
+                /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { "data-slot": "icon", className: "size-4" })
               ]
             }
           ),
@@ -15380,7 +15452,7 @@ function PairDetailCard({
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "size-14 rounded-2xl border border-grey-200 shadow-sm dark:border-grey-700",
+          className: "size-14 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
           style: { backgroundColor: color2.hex }
         }
       ),
@@ -15419,7 +15491,7 @@ function ComplianceRow({
   passes,
   threshold
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 rounded-xl border border-grey-200 px-4 py-3 dark:border-grey-700", children: [
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: label }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: threshold })
@@ -15446,7 +15518,7 @@ function PairComplianceCard({ pair }) {
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-grey-200 bg-grey-50 px-4 py-3 dark:border-grey-700 dark:bg-grey-900/60", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Contrast ratio" }),
         /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-2xl font-semibold", children: [
           pair.contrastRatio.toFixed(2),
@@ -15472,25 +15544,100 @@ function PairComplianceCard({ pair }) {
     ] })
   ] });
 }
+function WhiteTextExampleCard({ pair }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-2 border-b", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base", children: "White text example" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(CardContent, { className: "grid gap-6 xl:grid-cols-[minmax(0,1.1fr)_minmax(18rem,0.9fr)]", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg leading-tight font-semibold", children: "Large text example" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm/6", children: [
+                "White text on ",
+                pair.background.token
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 text-sm/6", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+                "AAA normal text: ",
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { children: pair.passes.aaaText ? "pass" : "fail" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+                "AAA large text: ",
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { children: pair.passes.aaaLarge ? "pass" : "fail" })
+              ] })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Contrast ratio" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-2xl font-semibold", children: [
+            pair.contrastRatio.toFixed(2),
+            ":1"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ComplianceRow,
+          {
+            label: "AAA normal text",
+            passes: pair.passes.aaaText,
+            threshold: "7.0:1 or higher"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ComplianceRow,
+          {
+            label: "AAA large text",
+            passes: pair.passes.aaaLarge,
+            threshold: "4.5:1 or higher"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
 function ColorPairingToolContent() {
   const searchParams = navigation.useSearchParams();
   const {
     familyKey: initialFamilyKey,
+    selectedBackgroundToken: initialSelectedBackgroundToken,
     selectedPairId: initialSelectedPairId,
     themeCategory: initialThemeCategory
   } = getInitialPairingState(searchParams);
   const [themeCategory, setThemeCategory] = React5.useState(initialThemeCategory);
   const [format, setFormat] = React5.useState("hex");
   const [activeFamilyKey, setActiveFamilyKey] = React5.useState(initialFamilyKey);
+  const [selectedBackgroundToken, setSelectedBackgroundToken] = React5.useState(
+    initialSelectedBackgroundToken
+  );
   const [selectedPairId, setSelectedPairId] = React5.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 selectedPair = activeFamily?.recommendedPairs.find((pair) => pair.id === selectedPairId) ?? getDefaultPair(activeFamily);
-  const updateUrlParams = (nextThemeCategory, nextFamilyKey, nextSelectedPairId) => {
+  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 {
@@ -15506,27 +15653,78 @@ function ColorPairingToolContent() {
     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 nextSelectedPair = nextActiveFamily?.recommendedPairs.find((pair) => pair.id === selectedPairId) ?? getDefaultPair(nextActiveFamily);
+    const nextSelectedBackgroundToken = getFallbackBackgroundToken(
+      nextActiveFamily,
+      getToneFromToken(selectedBackgroundToken)
+    );
+    const nextSelectedPair = getRecommendedPairForBackground(
+      nextActiveFamily,
+      nextSelectedBackgroundToken,
+      selectedPairId
+    );
     setThemeCategory(nextThemeCategory);
     setActiveFamilyKey(nextFamilyKey);
+    setSelectedBackgroundToken(nextSelectedBackgroundToken);
     setSelectedPairId(nextSelectedPair?.id ?? "");
-    updateUrlParams(nextThemeCategory, nextFamilyKey, nextSelectedPair?.id ?? "");
+    updateUrlParams(
+      nextThemeCategory,
+      nextFamilyKey,
+      nextSelectedBackgroundToken,
+      nextSelectedPair?.id ?? ""
+    );
   };
   const handleFamilyChange = (nextFamilyKey) => {
     const nextActiveFamily = families.find((family) => family.key === nextFamilyKey);
-    const nextSelectedPair = nextActiveFamily?.recommendedPairs.find((pair) => pair.id === selectedPairId) ?? getDefaultPair(nextActiveFamily);
+    const nextSelectedBackgroundToken = getFallbackBackgroundToken(
+      nextActiveFamily,
+      getToneFromToken(selectedBackgroundToken)
+    );
+    const nextSelectedPair = getRecommendedPairForBackground(
+      nextActiveFamily,
+      nextSelectedBackgroundToken,
+      selectedPairId
+    );
     setActiveFamilyKey(nextFamilyKey);
+    setSelectedBackgroundToken(nextSelectedBackgroundToken);
     setSelectedPairId(nextSelectedPair?.id ?? "");
-    updateUrlParams(themeCategory, nextFamilyKey, 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, nextSelectedPairId);
+    updateUrlParams(
+      themeCategory,
+      resolvedActiveFamilyKey,
+      nextSelectedPair.background.token,
+      nextSelectedPairId
+    );
   };
-  if (!activeFamily || !selectedPair) {
+  if (!activeFamily || !selectedBackground) {
     return /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "No recommended AAA pairs available" }),
-      /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "No recommended pairs are available for the current palette." })
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "No approved background tones available" }),
+      /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "No approved tones are available for the current palette." })
     ] }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
@@ -15576,41 +15774,74 @@ function ColorPairingToolContent() {
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-start gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(17rem,0.68fr)]", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(PairPreview, { family: activeFamily, pair: selectedPair }),
+          previewPair ? /* @__PURE__ */ jsxRuntime.jsx(
+            PairPreview,
+            {
+              family: activeFamily,
+              isRecommended: Boolean(selectedPair),
+              pair: previewPair
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "gap-0 overflow-hidden py-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "p-6 sm:min-h-[26rem] sm:p-8",
+              style: {
+                backgroundColor: selectedBackground.hex,
+                color: selectedBackground.tone >= 600 ? "#ffffff" : "#002664"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[22rem] flex-col justify-between gap-8", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icons.palette, { "data-slot": "icon", className: "size-4" }),
+                  activeFamily.label
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-xl space-y-4 pb-12 sm:pb-16", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: "Approved background" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "max-w-lg text-4xl leading-none font-bold text-current sm:text-5xl", children: "Pair colour with confidence." }),
+                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icons.info, { "data-slot": "icon", className: "size-4" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex rounded-full border border-current px-4 py-2 text-sm", children: selectedBackground.token })
+                ] })
+              ] })
+            }
+          ) }),
           /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-2 border-b", children: [
               /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base", children: "Background tone strip" }),
-              /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "Filled chips have a recommended AAA foreground pair. Select one to update the preview." })
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-4", children: [
-              /* @__PURE__ */ jsxRuntime.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: activeFamily.colors.map((color2) => {
-                const pair = activeFamily.recommendedPairs.find(
-                  (item) => item.background.token === color2.token
-                );
-                const isSelected = selectedPair.background.token === color2.token;
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
                   "button",
                   {
                     type: "button",
-                    disabled: !pair,
-                    onClick: () => pair && handlePairChange(pair.id),
+                    onClick: () => handleBackgroundChange(color2.token),
                     className: cn(
-                      "group relative h-12 rounded-xl border transition-transform",
-                      pair ? "cursor-pointer border-grey-200 hover:scale-[1.03] dark:border-grey-700" : "cursor-not-allowed border-grey-100 dark:border-grey-800",
+                      "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__ */ jsxRuntime.jsx(
+                      pair ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "sr-only", children: [
                         color2.token,
-                        pair ? ` paired with ${pair.foreground.token}` : " has no recommended pair in this tool"
+                        pair ? ` paired with ${pair.foreground.token}` : hasWhiteExample ? " has a white text example in this tool" : " has no recommended pair in this tool"
                       ] })
                     ]
                   },
@@ -15621,35 +15852,41 @@ function ColorPairingToolContent() {
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
                   "Selected background:",
                   " ",
-                  /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground", children: selectedPair.background.token })
+                  /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground", children: selectedBackground.token })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                  "Recommended foreground:",
+                  selectedPair ? "Recommended foreground:" : "White text example:",
                   " ",
-                  /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground", children: selectedPair.foreground.token })
+                  /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground", children: selectedPair?.foreground.token ?? whiteForegroundExample?.foreground.token ?? "None" })
                 ] })
               ] })
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(PairDetailCard, { color: selectedPair.background, format, role: "Background" }),
-            /* @__PURE__ */ jsxRuntime.jsx(PairDetailCard, { color: selectedPair.foreground, format, role: "Foreground" })
+            /* @__PURE__ */ jsxRuntime.jsx(PairDetailCard, { color: selectedBackground, format, role: "Background" }),
+            detailForeground ? /* @__PURE__ */ jsxRuntime.jsx(PairDetailCard, { color: detailForeground, format, role: "Foreground" }) : /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "gap-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: "gap-3 border-b", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "Foreground" }),
+                /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "No recommended foreground available" })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Select another approved tone or review the recommended pairs list for the same family." }) })
+            ] })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "h-fit", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-2 border-b", children: [
             /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base", children: "Recommended pairs" }),
-            /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "Recommended same-family combinations that meet AAA normal-text contrast." })
+            /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "Recommended AAA combinations for this family, including white on eligible dark backgrounds." })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "grid gap-3", children: activeFamily.recommendedPairs.map((pair) => {
-            const isActive = selectedPair.id === pair.id;
+            const isActive = selectedPair?.id === pair.id;
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
                 type: "button",
                 onClick: () => handlePairChange(pair.id),
                 className: cn(
-                  "rounded-2xl border p-4 text-left transition-colors",
+                  "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: [
@@ -15658,14 +15895,14 @@ function ColorPairingToolContent() {
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "div",
                         {
-                          className: "size-11 rounded-2xl border border-grey-200 shadow-sm dark:border-grey-700",
+                          className: "size-11 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
                           style: { backgroundColor: pair.background.hex }
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "div",
                         {
-                          className: "size-11 rounded-2xl border border-grey-200 shadow-sm dark:border-grey-700",
+                          className: "size-11 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
                           style: { backgroundColor: pair.foreground.hex }
                         }
                       )
@@ -15693,7 +15930,8 @@ function ColorPairingToolContent() {
           }) })
         ] }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(PairComplianceCard, { pair: selectedPair })
+      selectedPair ? /* @__PURE__ */ jsxRuntime.jsx(PairComplianceCard, { pair: selectedPair }) : null,
+      showWhiteForegroundExample && whiteForegroundExample ? /* @__PURE__ */ jsxRuntime.jsx(WhiteTextExampleCard, { pair: whiteForegroundExample }) : null
     ] })
   ] });
 }
@@ -16061,7 +16299,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
@@ -16653,7 +16891,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,
@@ -16883,7 +17121,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
@@ -16899,7 +17137,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
@@ -17406,7 +17644,7 @@ function DataTable({
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 p-1", children: [
     /* @__PURE__ */ jsxRuntime.jsx(DataTableToolbar, { table, search, toolbar }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-sm border", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: headerGroup.headers.map((header) => {
         return /* @__PURE__ */ jsxRuntime.jsx(TableHead, { colSpan: header.colSpan, children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id);
       }) }, headerGroup.id)) }),
@@ -17524,7 +17762,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
@@ -17762,8 +18000,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
@@ -18182,7 +18420,7 @@ function FormMessage({ className, ...props }) {
 
 // package.json
 var package_default = {
-  version: "1.97.13"};
+  version: "1.98.0"};
 var SluggerContext = React5__namespace.default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";
@@ -18333,7 +18571,7 @@ function SiteSearch({ navigation: navigation$1 }) {
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden text-grey-600 lg:inline-flex dark:text-grey-200", children: "Search site..." }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex lg:hidden dark:text-grey-200", children: "Search..." }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-xs", children: "\u2318" }),
             "K"
           ] })
@@ -18548,7 +18786,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
@@ -18586,7 +18824,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,
@@ -18871,7 +19109,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
@@ -19766,7 +20004,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
@@ -19816,7 +20054,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
@@ -19960,7 +20198,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
@@ -28379,7 +28617,7 @@ function NavigationLink({
       href,
       onClick,
       className: clsx12__default.default(
-        "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"
@@ -28481,7 +28719,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
@@ -28497,7 +28735,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
@@ -28820,7 +29058,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__ */ jsxRuntime.jsx("div", { className: "flex h-full flex-col p-8", children: bodyChildren })
@@ -28832,7 +29070,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
@@ -29387,7 +29625,7 @@ function ResizableHandle({
         className
       ),
       ...props,
-      children: withHandle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.drag_indicator, { className: "size-2.5" }) })
+      children: withHandle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.drag_indicator, { className: "size-2.5" }) })
     }
   );
 }
@@ -29686,7 +29924,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
               }
             )
@@ -30145,7 +30383,7 @@ function SidebarLink({ link, pathname, onLinkClick, depth }) {
   const isActive = pathname === link.href;
   const isActiveOrHasActiveDescendant = isLinkOrDescendantActive(link, pathname);
   const baseLinkClasses = clsx12__default.default(
-    "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"
@@ -31081,7 +31319,7 @@ var TabNavigation = React5__namespace.default.forwardRef(({ className, children,
               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,
@@ -31617,7 +31855,7 @@ var Tracker = React5__namespace.default.forwardRef(
 );
 Tracker.displayName = "Tracker";
 var buttonVariants4 = classVarianceAuthority.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: {
@@ -31736,7 +31974,7 @@ var Artifact = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.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
@@ -31982,7 +32220,7 @@ function isFunction(value) {
   return typeof value === "function";
 }
 var badgeVariants2 = classVarianceAuthority.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: {
@@ -32167,7 +32405,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,
@@ -32282,7 +32520,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
@@ -32986,7 +33224,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
@@ -33273,7 +33511,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
@@ -33293,7 +33531,7 @@ function PromptInputAttachment({ data, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -33571,7 +33809,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,
@@ -33936,7 +34174,7 @@ var TaskItemFile = ({ children, className, ...props }) => /* @__PURE__ */ jsxRun
   "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,
@@ -33971,7 +34209,7 @@ var TaskContent = ({ children, className, ...props }) => /* @__PURE__ */ jsxRunt
     children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 space-y-2 border-l-2 border-muted pl-4", children })
   }
 );
-var Tool = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(Collapsible2, { className: cn("not-prose mb-4 w-full rounded-md border", className), ...props });
+var Tool = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(Collapsible2, { className: cn("not-prose mb-4 w-full rounded-sm border", className), ...props });
 var getStatusBadge = (status) => {
   const labels = {
     "input-streaming": "Pending",
@@ -34053,7 +34291,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
@@ -34092,7 +34330,7 @@ var WebPreview = ({
   return /* @__PURE__ */ jsxRuntime.jsx(WebPreviewContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.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
     }