@nswds/app 1.97.15 → 1.99.0

package/dist/index.cjs

@@ -40,6 +40,8 @@ var LabelPrimitive = require('@radix-ui/react-label');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var TabsPrimitives = require('@radix-ui/react-tabs');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
+var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
+var TogglePrimitive = require('@radix-ui/react-toggle');
 var cmdk = require('cmdk');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
@@ -47,8 +49,6 @@ var reactTable = require('@tanstack/react-table');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
 var vaul = require('vaul');
 var reactHookForm = require('react-hook-form');
-var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
-var TogglePrimitive = require('@radix-ui/react-toggle');
 var Image2 = require('next/image');
 var HoverCardPrimitive = require('@radix-ui/react-hover-card');
 var inputOtp = require('input-otp');
@@ -110,11 +110,11 @@ var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 var TabsPrimitives__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitives);
 var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
+var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
+var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
-var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
-var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
 var Image2__default = /*#__PURE__*/_interopDefault(Image2);
 var HoverCardPrimitive__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrimitive);
 var MenubarPrimitive__namespace = /*#__PURE__*/_interopNamespace(MenubarPrimitive);
@@ -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,6 +14972,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__namespace.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 = classVarianceAuthority.cva(styles3.base, {
+  variants: {
+    variant: {
+      ghost: "",
+      outline: clsx12__default.default(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__ */ jsxRuntime.jsx(
+    TogglePrimitive__namespace.Root,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var ToggleGroupContext = React5__namespace.createContext({
+  size: "default",
+  variant: "ghost"
+});
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToggleGroupPrimitive__namespace.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__ */ jsxRuntime.jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}) {
+  const context = React5__namespace.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToggleGroupPrimitive__namespace.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Format:" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      ToggleGroup,
+      {
+        type: "single",
+        value: format,
+        onValueChange: (value) => value && setFormat(value),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "hex", "aria-label": "HEX format", children: "HEX" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "rgb", "aria-label": "RGB format", children: "RGB" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "hsl", "aria-label": "HSL format", children: "HSL" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "animate-pulse space-y-6", children: [
+    /* @__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-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" })
+    ] })
+  ] });
+}
+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__ */ 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: pair.background.hex,
+        color: pair.foreground.hex
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[22rem] flex-col justify-between gap-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icons.palette, { "data-slot": "icon", className: "size-4" }),
+                family.label
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ 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: 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: 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: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(StatusIcon, { "data-slot": "icon", className: "size-4" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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] = usehooks.useCopyToClipboard();
+  const [copiedField, setCopiedField] = React5.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`;
+    sonner.toast(`${toastLabel} copied to clipboard`, {
+      duration: 2e3
+    });
+    setTimeout(() => setCopiedField(null), 2e3);
+  };
+  const renderCopyButton = (field, srLabel, className) => /* @__PURE__ */ jsxRuntime.jsxs(
+    Button2,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: cn("shrink-0", className),
+      onClick: () => copyField(field),
+      children: [
+        copiedField === field ? /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-5" }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: srLabel })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: "gap-3 border-b", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "size-14 rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
+          style: { backgroundColor: color2.hex }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: role }),
+        /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: color2.name ?? color2.token })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "grid gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Token" }),
+          renderCopyButton("token", `Copy ${role.toLowerCase()} token`)
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-base break-all", children: color2.token })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Tone" }),
+          renderCopyButton("tone", `Copy ${role.toLowerCase()} tone`)
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: color2.tone })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: valueLabel }),
+          renderCopyButton("value", `Copy ${role.toLowerCase()} ${valueLabel} value`)
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-sm break-all", children: formattedValue })
+      ] })
+    ] })
+  ] });
+}
+function ComplianceRow({
+  label,
+  passes,
+  threshold
+}) {
+  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 })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.close, { "data-slot": "icon", className: "size-4" }),
+          passes ? "Pass" : "Fail"
+        ]
+      }
+    )
+  ] });
+}
+function PairComplianceCard({ 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: "AAA compliance" }),
+      /* @__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-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 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 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__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { children: [
+      /* @__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: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Palette:" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SegmentedControl,
+          {
+            value: themeCategory,
+            onValueChange: (value) => handleThemeCategoryChange(value),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(SegmentedControlList, { className: "w-full sm:w-fit", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SegmentedControlTrigger, { value: "brand", children: "Brand palette" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SegmentedControlTrigger, { value: "aboriginal", children: "Aboriginal palette" })
+            ] })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(FormatToggle, { format, setFormat })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "size-4 shrink-0 rounded-full",
+                style: { backgroundColor: getFamilySwatchColor(family) }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: family.label })
+          ]
+        },
+        family.key
+      );
+    }) }) }),
+    /* @__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: [
+          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: "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: 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",
+                    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__ */ 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}` : hasWhiteExample ? " has a white text example in this tool" : " has no recommended pair in this tool"
+                      ] })
+                    ]
+                  },
+                  color2.token
+                );
+              }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm text-muted-foreground", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  "Selected background:",
+                  " ",
+                  /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-foreground", children: selectedBackground.token })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  selectedPair ? "Recommended foreground:" : "White text example:",
+                  " ",
+                  /* @__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: 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 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;
+            return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          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-sm border border-grey-200 shadow-sm dark:border-grey-700",
+                          style: { backgroundColor: pair.foreground.hex }
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icons.contrast, { "data-slot": "icon", className: "size-4" }),
+                      pair.rating
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-medium text-foreground", children: [
+                      pair.background.token,
+                      " / ",
+                      pair.foreground.token
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                      pair.contrastRatio.toFixed(2),
+                      ":1 contrast ratio"
+                    ] })
+                  ] })
+                ]
+              },
+              pair.id
+            );
+          }) })
+        ] }) })
+      ] }),
+      selectedPair ? /* @__PURE__ */ jsxRuntime.jsx(PairComplianceCard, { pair: selectedPair }) : null,
+      showWhiteForegroundExample && whiteForegroundExample ? /* @__PURE__ */ jsxRuntime.jsx(WhiteTextExampleCard, { pair: whiteForegroundExample }) : null
+    ] })
+  ] });
+}
+function ColorPairingTool() {
+  return /* @__PURE__ */ jsxRuntime.jsx(React5.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(ColorPairingToolLoading, {}), children: /* @__PURE__ */ jsxRuntime.jsx(ColorPairingToolContent, {}) });
+}
 function ColorSwatches({ theme: theme2, format, viewMode }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -15333,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
@@ -15925,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,
@@ -16155,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
@@ -16171,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
@@ -16678,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)) }),
@@ -16796,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
@@ -17034,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
@@ -17451,152 +18417,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 = classVarianceAuthority.cva(styles3.base, {
-  variants: {
-    variant: {
-      ghost: "",
-      outline: clsx12__default.default(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__ */ jsxRuntime.jsx(
-    TogglePrimitive__namespace.Root,
-    {
-      "data-slot": "toggle",
-      className: cn(toggleVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
-var ToggleGroupContext = React5__namespace.createContext({
-  size: "default",
-  variant: "ghost"
-});
-function ToggleGroup({
-  className,
-  variant,
-  size,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ToggleGroupPrimitive__namespace.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__ */ jsxRuntime.jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
-    }
-  );
-}
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}) {
-  const context = React5__namespace.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ToggleGroupPrimitive__namespace.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Format:" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      ToggleGroup,
-      {
-        type: "single",
-        value: format,
-        onValueChange: (value) => value && setFormat(value),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "hex", "aria-label": "HEX format", children: "HEX" }),
-          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "rgb", "aria-label": "RGB format", children: "RGB" }),
-          /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: "hsl", "aria-label": "HSL format", children: "HSL" }),
-          /* @__PURE__ */ jsxRuntime.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__namespace.default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";
@@ -17747,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"
           ] })
@@ -17962,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
@@ -18000,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,
@@ -18285,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
@@ -19180,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
@@ -19230,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
@@ -19374,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
@@ -27793,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"
@@ -27895,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
@@ -27911,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
@@ -28234,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 })
@@ -28246,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
@@ -28801,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" }) })
     }
   );
 }
@@ -29100,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
               }
             )
@@ -29559,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"
@@ -30495,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,
@@ -31031,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: {
@@ -31150,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
@@ -31396,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: {
@@ -31581,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,
@@ -31696,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
@@ -32400,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
@@ -32687,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
@@ -32707,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(
@@ -32985,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,
@@ -33350,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,
@@ -33385,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",
@@ -33467,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
@@ -33506,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
     }
@@ -33838,6 +34662,7 @@ exports.Collapsible = Collapsible;
 exports.CollapsibleContent = CollapsibleContent2;
 exports.CollapsibleTrigger = CollapsibleTrigger2;
 exports.ColorCard = ColorCard;
+exports.ColorPairingTool = ColorPairingTool;
 exports.ColorSwatches = ColorSwatches;
 exports.ColourScale = ColourScale;
 exports.ComboChart = ComboChart;