@nswds/app 1.102.0 → 1.104.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import clsx12, { clsx } from 'clsx';
+import clsx13, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
@@ -42,8 +42,8 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as TabsPrimitives from '@radix-ui/react-tabs';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { Command as Command$1 } from 'cmdk';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { useReactTable, getFacetedUniqueValues, getFacetedRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
@@ -4499,7 +4499,7 @@ var Button2 = forwardRef(function Button3({ className, variant, color: color2, s
     {
       "data-variant": variant,
       ...props,
-      className: clsx12(classes, "cursor-pointer"),
+      className: clsx13(classes, "cursor-pointer"),
       ref,
       children: /* @__PURE__ */ jsx(TouchTarget, { children })
     }
@@ -5958,7 +5958,7 @@ var BadgeButton = forwardRef(function BadgeButton2({
   children,
   ...props
 }, ref) {
-  const classes = clsx12(className, focusOutline[color2], [
+  const classes = clsx13(className, focusOutline[color2], [
     // Base
     "group relative inline-flex rounded-sm",
     // Focus
@@ -5980,7 +5980,7 @@ var BadgeButton = forwardRef(function BadgeButton2({
     {
       "data-variant": variant,
       ...props,
-      className: clsx12(classes, "cursor-pointer"),
+      className: clsx13(classes, "cursor-pointer"),
       ref,
       children: /* @__PURE__ */ jsx(TouchTarget, { children: /* @__PURE__ */ jsx(Badge, { variant, color: color2, size, children }) })
     }
@@ -15223,7 +15223,7 @@ function Heading({
       ...props,
       id: computedId,
       "data-anchor": true,
-      className: clsx12(
+      className: clsx13(
         className,
         trimClasses[trim],
         "m-0",
@@ -16303,6 +16303,2611 @@ function ColorPairingTool({
   const normalizedVisibleFormats = [...new Set(visibleFormats)];
   return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ColorPairingToolLoading, {}), children: /* @__PURE__ */ jsx(ColorPairingToolContent, { visibleFormats: normalizedVisibleFormats }) });
 }
+function Text({ className, trim = "normal", size = 2, label = false, ...props }) {
+  const textSizeClasses = {
+    1: "text-[length:var(--font-size-1)] leading-[var(--line-height-28)] tracking-[var(--letter-spacing-0)]",
+    2: "text-[length:var(--font-size-2)] leading-[var(--line-height-24)] tracking-[var(--letter-spacing-0)]",
+    3: "text-[length:var(--font-size-3)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]",
+    4: "text-[length:var(--font-size-4)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]"
+  };
+  const labelSizeClasses = {
+    1: "text-[length:var(--font-size-1)] leading-[var(--line-height-24)] tracking-[var(--letter-spacing-0)]",
+    2: "text-[length:var(--font-size-2)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]",
+    3: "text-[length:var(--font-size-3)] leading-[var(--line-height-16)] tracking-[var(--letter-spacing-0)]",
+    4: "text-[length:var(--font-size-4)] leading-[var(--line-height-16)] tracking-[var(--letter-spacing-0)]"
+  };
+  const sizeClass = label ? labelSizeClasses[size] : textSizeClasses[size];
+  const trimClasses = {
+    normal: ["before:content-none after:content-none"],
+    start: [
+      'before:content-[""] before:table after:content-none',
+      "before:mb-[calc(var(--leading-trim-start,var(--default-leading-trim-start))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
+    ],
+    end: [
+      'before:content-none after:content-[""] after:table',
+      "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
+    ],
+    both: [
+      'before:content-[""] before:table after:content-[""] after:table',
+      "before:mb-[calc(var(--leading-trim-start,var(--default-leading-trim-start))-var(--line-height,calc(1em*var(--default-line-height)))/2)]",
+      "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
+    ]
+  };
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "text",
+      ...props,
+      className: clsx13(className, trimClasses[trim], "text-grey-800 dark:text-grey-400", sizeClass)
+    }
+  );
+}
+function TextLink({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      ...props,
+      className: clsx13(
+        className,
+        "text-primary-800 underline decoration-primary-800/50 data-hover:decoration-primary-800 dark:text-white dark:decoration-white/50 dark:data-hover:decoration-white"
+      )
+    }
+  );
+}
+function Strong({ className, ...props }) {
+  return /* @__PURE__ */ jsx("strong", { ...props, className: clsx13(className, "font-medium text-grey-950 dark:text-white") });
+}
+function Code({ className, ...props }) {
+  const hasLanguageClass = typeof className === "string" && className.includes("language-");
+  return /* @__PURE__ */ jsx(
+    "code",
+    {
+      ...props,
+      className: clsx13(
+        className,
+        !hasLanguageClass && "language-plaintext",
+        "text-sm sm:text-[0.8125rem]"
+      )
+    }
+  );
+}
+var PREFERRED_BACKGROUND_TONES2 = [400, 600, 200, 800, 100, 50];
+var DEFAULT_VISIBLE_FORMATS2 = ["hex", "rgb", "hsl", "oklch"];
+var DEFAULT_INITIAL_BACKGROUND_TOKEN2 = "nsw-blue-800";
+var DEFAULT_INITIAL_PAIR_ID2 = "nsw-blue-800:nsw-blue-200";
+function getToneFromToken2(token) {
+  if (!token) return null;
+  const match = token.match(/-(\d+)$/);
+  return match ? Number.parseInt(match[1], 10) : null;
+}
+function getFamilySwatchColor2(family, preferredTone = 600) {
+  const exactMatch = family.colors.find((color2) => color2.tone === preferredTone);
+  if (exactMatch) {
+    return exactMatch.hex;
+  }
+  const closestMatch = [...family.colors].sort(
+    (left, right) => Math.abs(left.tone - preferredTone) - Math.abs(right.tone - preferredTone)
+  )[0];
+  return closestMatch?.hex ?? "transparent";
+}
+function getFamilySelectorLabel2(family, themeCategory, selectionRole) {
+  if (themeCategory !== "aboriginal") {
+    return family.label;
+  }
+  const preferredTone = selectionRole === "primary colour" ? 800 : 600;
+  return family.colors.find((color2) => color2.tone === preferredTone)?.name ?? family.label;
+}
+function getPairingColorDisplayName2(color2) {
+  return color2.name ?? color2.token;
+}
+function isWhiteForegroundPair2(pair) {
+  return pair.foreground.token === "white";
+}
+function getWhiteForegroundGuidance2(pair) {
+  if (pair.passes.aaaText) {
+    return "White is approved for headings, body copy, and calls to action on this background.";
+  }
+  if (pair.passes.aaaLarge) {
+    return "Use white only for WCAG large text on this background, such as headings at 24px+ or bold text at 18.5px+. Keep sentence-case body copy at 16px+ and use a darker recommended foreground instead.";
+  }
+  return "Do not use white on this background. Choose one of the recommended foregrounds below instead.";
+}
+function getPreviewGuidance2(pair, isRecommended) {
+  if (!isWhiteForegroundPair2(pair)) {
+    return "Use only AAA-recommended combinations across your selected primary, accent, and grey families.";
+  }
+  if (isRecommended) {
+    return "Use white text on dark colour only when it meets AAA for headings, body copy, and calls to action.";
+  }
+  return getWhiteForegroundGuidance2(pair);
+}
+function getReadableTextColor(tone) {
+  return tone >= 600 ? "#ffffff" : "#002664";
+}
+function getPreferredPairForBackground2(pairs, preferredPairId) {
+  if (preferredPairId) {
+    const preferredPair = pairs.find((pair) => pair.id === preferredPairId);
+    if (preferredPair) {
+      return preferredPair;
+    }
+  }
+  return pairs.find((pair) => !isWhiteForegroundPair2(pair)) ?? pairs[0] ?? null;
+}
+function getDefaultBackgroundToken2(context) {
+  for (const tone of PREFERRED_BACKGROUND_TONES2) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find(
+        (background) => background.tone === tone && (context.pairsByBackground[background.token]?.length ?? 0) > 0
+      );
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  for (const tone of PREFERRED_BACKGROUND_TONES2) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find((background) => background.tone === tone);
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  return context.backgrounds[0]?.token ?? "";
+}
+function resolveBackgroundToken2(context, preferredToken, preferredTone) {
+  if (preferredToken && context.backgrounds.some((background) => background.token === preferredToken)) {
+    return preferredToken;
+  }
+  if (preferredTone !== null && preferredTone !== void 0) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find((background) => background.tone === preferredTone);
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  return getDefaultBackgroundToken2(context);
+}
+function getInitialPairingState2(searchParams) {
+  const paletteParam = searchParams.get("palette");
+  const primaryParam = searchParams.get("primary");
+  const accentParam = searchParams.get("accent");
+  const pairParam = searchParams.get("pair");
+  const backgroundParam = searchParams.get("background");
+  const themeCategory = paletteParam === "brand" || paletteParam === "aboriginal" ? paletteParam : "brand";
+  const context = getPairingContext(themeCategory, primaryParam, accentParam);
+  const shouldUseDefaultBrandExample = !backgroundParam && !pairParam && themeCategory === "brand" && context.primary.key === "blue" && context.accent.key === "red";
+  const defaultBackgroundToken = shouldUseDefaultBrandExample ? context.backgrounds.some(
+    (background) => background.token === DEFAULT_INITIAL_BACKGROUND_TOKEN2
+  ) ? DEFAULT_INITIAL_BACKGROUND_TOKEN2 : null : null;
+  const defaultPairId = shouldUseDefaultBrandExample && defaultBackgroundToken && context.pairsByBackground[defaultBackgroundToken]?.some(
+    (pair) => pair.id === DEFAULT_INITIAL_PAIR_ID2
+  ) ? DEFAULT_INITIAL_PAIR_ID2 : null;
+  const pairBackgroundToken = context.recommendedPairs.find((pair) => pair.id === pairParam)?.background.token ?? null;
+  const selectedBackgroundToken = resolveBackgroundToken2(
+    context,
+    backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken,
+    getToneFromToken2(backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken)
+  );
+  const selectedPairId = getPreferredPairForBackground2(
+    context.pairsByBackground[selectedBackgroundToken] ?? [],
+    pairParam ?? defaultPairId
+  )?.id ?? "";
+  return {
+    accentKey: context.accent.key,
+    primaryKey: context.primary.key,
+    selectedBackgroundToken,
+    selectedPairId,
+    themeCategory
+  };
+}
+function ColorPairingToolV2Loading() {
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-8 lg:grid-cols-[18rem_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6 bg-grey-50/70 p-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-10 rounded-sm bg-grey-100" }),
+      /* @__PURE__ */ jsx("div", { className: "h-40 rounded-sm bg-grey-100" }),
+      /* @__PURE__ */ jsx("div", { className: "h-52 rounded-sm bg-grey-100" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-12 rounded-sm bg-grey-100" }),
+      /* @__PURE__ */ jsx("div", { className: "h-64 rounded-sm bg-grey-100" }),
+      /* @__PURE__ */ jsx("div", { className: "h-40 rounded-sm bg-grey-100" }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-44 rounded-sm bg-grey-100" }),
+        /* @__PURE__ */ jsx("div", { className: "h-44 rounded-sm bg-grey-100" }),
+        /* @__PURE__ */ jsx("div", { className: "h-44 rounded-sm bg-grey-100" })
+      ] })
+    ] })
+  ] });
+}
+function SidebarStep({
+  children,
+  description,
+  step,
+  title
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-[0.72rem] font-semibold tracking-[0.12em] text-muted-foreground uppercase", children: [
+        "Step ",
+        step
+      ] }),
+      /* @__PURE__ */ jsx(Heading, { level: 3, size: 6, className: "text-foreground", trim: "normal", children: title }),
+      description ? /* @__PURE__ */ jsx("p", { className: "text-sm/6 text-muted-foreground", children: description }) : null
+    ] }),
+    children
+  ] });
+}
+function PreviewHeroCard({
+  familySummary,
+  isRecommended,
+  pair
+}) {
+  const whiteForeground = isWhiteForegroundPair2(pair);
+  const statusLabel = isRecommended ? "Pass" : pair.passes.aaaLarge ? "Large text only" : "Example only";
+  const StatusIcon = isRecommended ? Icons.check : Icons.info;
+  const fauxButtonStyle = {
+    "--btn-bg": pair.foreground.hex,
+    "--btn-border": pair.foreground.hex,
+    "--btn-text": pair.background.hex,
+    "--btn-icon": pair.background.hex,
+    "--btn-hover-overlay": pair.background.hex
+  };
+  return /* @__PURE__ */ jsx(Card, { className: "gap-0 overflow-hidden py-0", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "p-6 sm:min-h-[26rem] sm:p-8",
+      style: {
+        backgroundColor: pair.background.hex,
+        color: pair.foreground.hex
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-[22rem] flex-col justify-between gap-8", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[0.72rem] font-semibold tracking-[0.16em] uppercase",
+              style: {
+                borderColor: pair.foreground.hex,
+                backgroundColor: pair.foreground.hex,
+                color: pair.background.hex
+              },
+              children: [
+                /* @__PURE__ */ jsx(Icons.palette, { "data-slot": "icon", className: "size-4" }),
+                familySummary
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex rounded-full border px-3 py-1 text-[0.72rem] font-semibold tracking-[0.16em] uppercase",
+              style: {
+                borderColor: pair.foreground.hex
+              },
+              children: [
+                pair.rating,
+                " ",
+                pair.contrastRatio.toFixed(2),
+                ":1"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "max-w-xl space-y-4 pb-12 sm:pb-16", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: whiteForeground && !isRecommended ? "White on colour example" : whiteForeground ? "White on colour" : "Colour on colour" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsx("h3", { className: "max-w-lg text-4xl leading-none font-bold text-current sm:text-5xl", children: "Pair colour with confidence." }),
+            /* @__PURE__ */ jsx("p", { className: "max-w-md text-base/6 sm:text-base/7", children: getPreviewGuidance2(pair, isRecommended) }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                "data-variant": "solid",
+                className: cn(
+                  buttonVariants({ variant: "solid", size: "default" }),
+                  "pointer-events-none cursor-default px-6 text-[16px] font-[700] select-none sm:px-6 sm:text-[16px] sm:font-[700]"
+                ),
+                style: fauxButtonStyle,
+                children: "Get started"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold",
+              style: {
+                backgroundColor: pair.foreground.hex,
+                color: pair.background.hex
+              },
+              children: [
+                statusLabel,
+                /* @__PURE__ */ jsx(StatusIcon, { "data-slot": "icon", className: "size-4" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex rounded-full border px-4 py-2 text-sm",
+              style: {
+                borderColor: pair.foreground.hex
+              },
+              children: [
+                pair.background.token,
+                " / ",
+                pair.foreground.token
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  ) });
+}
+function PreviewFallbackCard2({ background }) {
+  return /* @__PURE__ */ jsx(Card, { className: "gap-0 overflow-hidden py-0", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "space-y-6 px-6 py-7 sm:px-8 sm:py-8",
+      style: {
+        backgroundColor: background.hex,
+        color: getReadableTextColor(background.tone)
+      },
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Hero preview" }),
+        /* @__PURE__ */ jsxs("div", { className: "max-w-xl space-y-4", children: [
+          /* @__PURE__ */ jsx("h3", { className: "max-w-lg text-3xl leading-tight font-bold sm:text-4xl", children: "No AAA combination available." }),
+          /* @__PURE__ */ jsx("p", { className: "max-w-lg text-base/7", children: "This background tone is approved, but there are no recommended AAA foreground pairings available for it in the current tool." })
+        ] })
+      ]
+    }
+  ) });
+}
+function PairDetailCard2({
+  color: color2,
+  role,
+  visibleFormats
+}) {
+  const [, copyToClipboardRaw] = useCopyToClipboard();
+  const [copiedField, setCopiedField] = useState(null);
+  const copiedFieldTimeoutRef = useRef(null);
+  const hasDisplayTone = color2.token !== "white";
+  const formatRows = visibleFormats.map((format) => ({
+    key: format,
+    label: format.toUpperCase(),
+    value: color2[format],
+    mono: true,
+    copyable: true
+  }));
+  const valueRows = [
+    { key: "token", label: "Token", value: color2.token, mono: true, copyable: true },
+    {
+      key: "tone",
+      label: "Tone",
+      value: hasDisplayTone ? String(color2.tone) : "Not applicable",
+      mono: false,
+      copyable: hasDisplayTone
+    },
+    ...formatRows
+  ];
+  useEffect(() => {
+    return () => {
+      if (copiedFieldTimeoutRef.current) {
+        clearTimeout(copiedFieldTimeoutRef.current);
+      }
+    };
+  }, []);
+  const copyField = (field) => {
+    if (field === "tone" && !hasDisplayTone) {
+      return;
+    }
+    const fieldValue = valueRows.find((row) => row.key === field)?.value;
+    if (!fieldValue) return;
+    copyToClipboardRaw(fieldValue);
+    setCopiedField(field);
+    const toastLabel = valueRows.find((row) => row.key === field)?.label ?? "Value";
+    toast(`${toastLabel} copied to clipboard`, {
+      duration: 2e3
+    });
+    if (copiedFieldTimeoutRef.current) {
+      clearTimeout(copiedFieldTimeoutRef.current);
+    }
+    copiedFieldTimeoutRef.current = setTimeout(() => {
+      setCopiedField(null);
+      copiedFieldTimeoutRef.current = null;
+    }, 2e3);
+  };
+  const renderCopyButton = (field, srLabel, className) => /* @__PURE__ */ jsxs(
+    Button2,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: cn("shrink-0", className),
+      onClick: () => copyField(field),
+      children: [
+        copiedField === field ? /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-5" }) : /* @__PURE__ */ jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: srLabel })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(Card, { className: "gap-0 pb-0", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "gap-4 border-b", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: role }),
+        /* @__PURE__ */ jsx(CardDescription, { children: color2.name ?? color2.token })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-14 w-full rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
+          style: { backgroundColor: color2.hex }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { className: "px-0 pb-3", children: /* @__PURE__ */ jsx("div", { className: "divide-y divide-grey-100 dark:divide-grey-800", children: valueRows.map((row) => /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 px-6 py-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: row.label }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mt-2 min-w-0 text-base text-foreground",
+              row.mono && "font-mono text-sm break-all sm:text-base"
+            ),
+            children: row.value
+          }
+        )
+      ] }),
+      row.copyable ? renderCopyButton(
+        row.key,
+        `Copy ${role.toLowerCase()} ${row.label.toLowerCase()}`,
+        "mt-0.5"
+      ) : null
+    ] }, row.key)) }) })
+  ] });
+}
+function AccessibilityScoreCard({ pair }) {
+  return /* @__PURE__ */ jsxs(Card, { className: "gap-0 py-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 px-6 py-6 sm:flex-row sm:items-end sm:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Accessibility score" }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-5xl leading-none font-bold text-foreground", children: pair ? `${pair.contrastRatio.toFixed(2)}:1` : "N/A" }),
+          /* @__PURE__ */ jsx("p", { className: "text-base text-muted-foreground", children: "Contrast ratio" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "inline-flex items-center gap-2 rounded-full px-4 py-2 text-base font-semibold",
+            pair ? "bg-success-700 text-white" : "border border-grey-300 bg-background text-foreground"
+          ),
+          children: pair ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            "Pass AAA",
+            /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-5" })
+          ] }) : "No AAA result"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "border-t border-grey-200 px-6 py-4 dark:border-grey-700", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: pair ? "Meets WCAG 2.1 AAA standards for large and normal text." : "Choose a different approved background tone to review recommended AAA pairings." }) })
+  ] });
+}
+function RecommendedPairCard({
+  isSelected,
+  onSelect,
+  pair
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-label": `Use ${getPairingColorDisplayName2(pair.foreground)} on ${getPairingColorDisplayName2(pair.background)}`,
+      "aria-pressed": isSelected,
+      onClick: onSelect,
+      className: cn(
+        "overflow-hidden rounded-sm border bg-background text-left transition-colors",
+        isSelected ? "border-primary-700 ring-2 ring-primary-700 ring-offset-2 ring-offset-background" : "border-grey-200 hover:border-grey-400 dark:border-grey-700 dark:hover:border-grey-500"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "min-h-32 space-y-3 px-4 py-4",
+            style: {
+              backgroundColor: pair.background.hex,
+              color: pair.foreground.hex
+            },
+            children: [
+              /* @__PURE__ */ jsxs("p", { className: "text-[0.68rem] font-semibold tracking-[0.12em] uppercase opacity-90", children: [
+                pair.background.token,
+                " / ",
+                pair.foreground.token
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-2xl leading-tight font-bold", children: getPairingColorDisplayName2(pair.foreground) }),
+                /* @__PURE__ */ jsxs("p", { className: "text-sm/6 opacity-90", children: [
+                  pair.foreground.familyLabel,
+                  " on ",
+                  pair.background.familyLabel
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 px-4 py-3", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold text-foreground", children: [
+            pair.contrastRatio.toFixed(2),
+            ":1"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-success-50 px-2.5 py-1 text-xs font-semibold text-success-800 dark:bg-success-950/30 dark:text-success-200", children: "AAA" })
+        ] })
+      ]
+    }
+  );
+}
+function ColorPairingToolV2Content({ visibleFormats }) {
+  const searchParams = useSearchParams();
+  const [initialState] = useState(() => getInitialPairingState2(searchParams));
+  const [themeCategory, setThemeCategory] = useState(initialState.themeCategory);
+  const [primaryFamilyKey, setPrimaryFamilyKey] = useState(initialState.primaryKey);
+  const [accentFamilyKey, setAccentFamilyKey] = useState(initialState.accentKey);
+  const [selectedBackgroundToken, setSelectedBackgroundToken] = useState(
+    initialState.selectedBackgroundToken
+  );
+  const [selectedPairId, setSelectedPairId] = useState(initialState.selectedPairId);
+  const themeFamilies = useMemo(() => getPairingFamilies(themeCategory), [themeCategory]);
+  const context = useMemo(
+    () => getPairingContext(themeCategory, primaryFamilyKey, accentFamilyKey),
+    [themeCategory, primaryFamilyKey, accentFamilyKey]
+  );
+  const selectableFamilies = useMemo(
+    () => themeFamilies.filter((family) => family.key !== context.grey.key),
+    [themeFamilies, context.grey.key]
+  );
+  const selectableAccentFamilies = useMemo(
+    () => selectableFamilies.filter((family) => family.key !== context.primary.key),
+    [selectableFamilies, context.primary.key]
+  );
+  const selectedBackground = useMemo(
+    () => context.backgrounds.find((background) => background.token === selectedBackgroundToken) ?? context.backgrounds[0] ?? null,
+    [context.backgrounds, selectedBackgroundToken]
+  );
+  const selectedBackgroundPairs = useMemo(
+    () => selectedBackground ? context.pairsByBackground[selectedBackground.token] ?? [] : [],
+    [context.pairsByBackground, selectedBackground]
+  );
+  const selectedPair = useMemo(
+    () => getPreferredPairForBackground2(selectedBackgroundPairs, selectedPairId),
+    [selectedBackgroundPairs, selectedPairId]
+  );
+  const detailForeground = selectedPair?.foreground ?? null;
+  const familySummary = useMemo(
+    () => [context.primary.label, context.accent.label, context.grey.label].join(" + "),
+    [context.primary.label, context.accent.label, context.grey.label]
+  );
+  const updateUrlParams = (nextThemeCategory, nextPrimaryKey, nextAccentKey, nextSelectedBackgroundToken, nextSelectedPairId) => {
+    const params = new URLSearchParams(window.location.search);
+    params.delete("family");
+    params.set("palette", nextThemeCategory);
+    params.set("primary", nextPrimaryKey);
+    params.set("accent", nextAccentKey);
+    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 syncSelection = (nextThemeCategory, nextPrimaryKey, nextAccentKey, preferredBackgroundToken, preferredPairId) => {
+    const nextContext = getPairingContext(nextThemeCategory, nextPrimaryKey, nextAccentKey);
+    const nextSelectedBackgroundToken = resolveBackgroundToken2(
+      nextContext,
+      preferredBackgroundToken,
+      getToneFromToken2(preferredBackgroundToken)
+    );
+    const nextSelectedPairId = getPreferredPairForBackground2(
+      nextContext.pairsByBackground[nextSelectedBackgroundToken] ?? [],
+      preferredPairId
+    )?.id ?? "";
+    setThemeCategory(nextThemeCategory);
+    setPrimaryFamilyKey(nextContext.primary.key);
+    setAccentFamilyKey(nextContext.accent.key);
+    setSelectedBackgroundToken(nextSelectedBackgroundToken);
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams(
+      nextThemeCategory,
+      nextContext.primary.key,
+      nextContext.accent.key,
+      nextSelectedBackgroundToken,
+      nextSelectedPairId
+    );
+  };
+  const handleThemeCategoryChange = (nextThemeCategory) => {
+    syncSelection(
+      nextThemeCategory,
+      primaryFamilyKey,
+      accentFamilyKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+  };
+  const handlePrimaryColorChange = (nextPrimaryKey) => {
+    const nextAccentKey = nextPrimaryKey === accentFamilyKey ? getDefaultAccentFamilyKey(themeCategory, nextPrimaryKey) : accentFamilyKey;
+    syncSelection(
+      themeCategory,
+      nextPrimaryKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+  };
+  const handleAccentColorChange = (nextAccentKey) => {
+    if (nextAccentKey === primaryFamilyKey) return;
+    syncSelection(
+      themeCategory,
+      primaryFamilyKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+  };
+  const handleBackgroundChange = (nextSelectedBackgroundToken) => {
+    const nextSelectedPairId = getPreferredPairForBackground2(
+      context.pairsByBackground[nextSelectedBackgroundToken] ?? [],
+      selectedPairId
+    )?.id ?? "";
+    setSelectedBackgroundToken(nextSelectedBackgroundToken);
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams(
+      themeCategory,
+      context.primary.key,
+      context.accent.key,
+      nextSelectedBackgroundToken,
+      nextSelectedPairId
+    );
+  };
+  const handlePairChange = (nextSelectedPairId) => {
+    if (!selectedBackground) return;
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams(
+      themeCategory,
+      context.primary.key,
+      context.accent.key,
+      selectedBackground.token,
+      nextSelectedPairId
+    );
+  };
+  if (!selectedBackground) {
+    return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("div", { className: "px-6", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "No approved background tones available" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-3 text-base text-muted-foreground", children: "No approved tones are available for the current palette." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-8 lg:grid-cols-[18rem_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsx("aside", { className: "bg-grey-50/60 p-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "Configuration" }),
+        /* @__PURE__ */ jsx(Text, { size: 2, children: "Choose a palette, set your primary and accent families, then select an approved background." })
+      ] }),
+      /* @__PURE__ */ jsx(SidebarStep, { step: 1, title: "Select your palette", children: /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: ["brand", "aboriginal"].map((palette) => {
+        const isSelected = themeCategory === palette;
+        const label = palette === "brand" ? "Brand palette" : "Aboriginal palette";
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Select ${label}`,
+            "aria-pressed": isSelected,
+            onClick: () => handleThemeCategoryChange(palette),
+            className: cn(
+              "rounded-sm border px-3 py-2.5 text-left text-sm font-semibold transition-colors",
+              isSelected ? "border-primary-800 bg-primary-800 text-white" : "border-grey-300 bg-background text-foreground hover:border-primary-800 hover:bg-primary-50"
+            ),
+            children: label
+          },
+          palette
+        );
+      }) }) }),
+      /* @__PURE__ */ jsx(
+        SidebarStep,
+        {
+          step: 2,
+          title: "Choose your colours",
+          description: "Grey is added automatically from the selected palette.",
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Primary colour" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: selectableFamilies.map((family) => {
+                const swatchTone = 800;
+                const isSelected = family.key === context.primary.key;
+                const label = getFamilySelectorLabel2(family, themeCategory, "primary colour");
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Select ${label} as primary colour`,
+                    "aria-pressed": isSelected,
+                    onClick: () => handlePrimaryColorChange(family.key),
+                    className: cn(
+                      "min-h-11 rounded-sm border px-2 py-2 text-center text-[0.8rem] leading-5 font-semibold transition-transform",
+                      isSelected ? "ring-2 ring-primary-700 ring-offset-2 ring-offset-grey-50/60" : "hover:-translate-y-px"
+                    ),
+                    style: {
+                      backgroundColor: getFamilySwatchColor2(family, swatchTone),
+                      color: getReadableTextColor(swatchTone),
+                      borderColor: "rgba(0, 0, 0, 0.12)"
+                    },
+                    title: label,
+                    children: label
+                  },
+                  family.key
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Accent colour" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: selectableAccentFamilies.map((family) => {
+                const swatchTone = 600;
+                const isSelected = family.key === context.accent.key;
+                const label = getFamilySelectorLabel2(family, themeCategory, "accent colour");
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Select ${label} as accent colour`,
+                    "aria-pressed": isSelected,
+                    onClick: () => handleAccentColorChange(family.key),
+                    className: cn(
+                      "min-h-11 rounded-sm border px-2 py-2 text-center text-[0.8rem] leading-5 font-semibold transition-transform",
+                      isSelected ? "ring-2 ring-primary-700 ring-offset-2 ring-offset-grey-50/60" : "hover:-translate-y-px"
+                    ),
+                    style: {
+                      backgroundColor: getFamilySwatchColor2(family, swatchTone),
+                      color: getReadableTextColor(swatchTone),
+                      borderColor: "rgba(0, 0, 0, 0.12)"
+                    },
+                    title: label,
+                    children: label
+                  },
+                  family.key
+                );
+              }) })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(SidebarStep, { step: 3, title: "Pick a background", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+          "Selected:",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: selectedBackground.token })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-2", children: context.backgrounds.map((background) => {
+          const hasPairs = (context.pairsByBackground[background.token]?.length ?? 0) > 0;
+          const isSelected = selectedBackground.token === background.token;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": hasPairs ? `Select ${background.token} background` : `Select ${background.token} background with no AAA pairings`,
+              "aria-pressed": isSelected,
+              onClick: () => handleBackgroundChange(background.token),
+              className: cn(
+                "relative aspect-square rounded-sm border transition-transform",
+                isSelected ? "ring-2 ring-primary-700 ring-offset-2 ring-offset-grey-50/60" : "hover:-translate-y-px",
+                !hasPairs && "opacity-80"
+              ),
+              style: {
+                backgroundColor: background.hex,
+                borderColor: "rgba(0, 0, 0, 0.14)"
+              },
+              title: background.token,
+              children: !hasPairs ? /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-1/2 h-0.5 w-5 -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-full bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.28)]" }) : null
+            },
+            background.token
+          );
+        }) })
+      ] }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("main", { className: "space-y-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "Live Preview & Results" }),
+        /* @__PURE__ */ jsx(Text, { size: 2, children: "Review the selected pairing in context, then compare the available AAA combinations for your chosen background." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+        selectedPair ? /* @__PURE__ */ jsx(
+          PreviewHeroCard,
+          {
+            familySummary,
+            isRecommended: Boolean(selectedPair),
+            pair: selectedPair
+          }
+        ) : /* @__PURE__ */ jsx(PreviewFallbackCard2, { background: selectedBackground }),
+        /* @__PURE__ */ jsx(AccessibilityScoreCard, { pair: selectedPair })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "Recommended Combinations" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-base text-muted-foreground", children: [
+            "AAA-recommended foregrounds for",
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: selectedBackground.token }),
+            "."
+          ] })
+        ] }),
+        selectedBackgroundPairs.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3", children: selectedBackgroundPairs.map((pair) => /* @__PURE__ */ jsx(
+          RecommendedPairCard,
+          {
+            pair,
+            isSelected: selectedPair?.id === pair.id,
+            onSelect: () => handlePairChange(pair.id)
+          },
+          pair.id
+        )) }) : /* @__PURE__ */ jsx(Card, { className: "gap-0 py-0", children: /* @__PURE__ */ jsxs("div", { className: "px-6 py-6", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 4, size: 6, className: "text-foreground", trim: "normal", children: "No recommended combinations" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-3 text-base text-muted-foreground", children: "Choose another approved background tone to review available AAA pairings." })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsx(
+          PairDetailCard2,
+          {
+            color: selectedBackground,
+            role: "Background",
+            visibleFormats
+          }
+        ),
+        detailForeground ? /* @__PURE__ */ jsx(
+          PairDetailCard2,
+          {
+            color: detailForeground,
+            role: "Foreground",
+            visibleFormats
+          }
+        ) : /* @__PURE__ */ jsxs(Card, { className: "gap-4", children: [
+          /* @__PURE__ */ jsx(CardHeader, { className: "gap-3 border-b", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx(CardTitle, { children: "Foreground" }),
+            /* @__PURE__ */ jsx(CardDescription, { children: "No recommended foreground available" })
+          ] }) }),
+          /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Choose another approved tone or review the recommended foregrounds for the same background." }) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ColorPairingToolV2({
+  visibleFormats = DEFAULT_VISIBLE_FORMATS2
+} = {}) {
+  const normalizedVisibleFormats = [...new Set(visibleFormats)];
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ColorPairingToolV2Loading, {}), children: /* @__PURE__ */ jsx(ColorPairingToolV2Content, { visibleFormats: normalizedVisibleFormats }) });
+}
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({ ...props }) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
+}
+function SheetPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Overlay,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showClose = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      SheetPrimitive.Content,
+      {
+        "data-slot": "sheet-content",
+        className: cn(
+          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=closed]:animate-out data-[state=open]:duration-500 data-[state=open]:animate-in",
+          side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          side === "top" && "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+          side === "bottom" && "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showClose && /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", className: "absolute top-4 right-4", asChild: true, children: /* @__PURE__ */ jsxs(Button2, { variant: "ghost", size: "icon", children: [
+            /* @__PURE__ */ jsx(Icons.close, { className: "size-6", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("font-semibold text-foreground", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function useSelectorHeight(selector = "header") {
+  const [height, setHeight] = useState(0);
+  const elementRef = useRef(null);
+  const resizeObserverRef = useRef(null);
+  useEffect(() => {
+    const element = document.querySelector(selector);
+    if (!element) return;
+    elementRef.current = element;
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      const target = entry?.target ?? elementRef.current;
+      if (!target) return;
+      setHeight(target.offsetHeight);
+    });
+    resizeObserverRef.current = resizeObserver;
+    resizeObserver.observe(element);
+    return () => {
+      resizeObserverRef.current?.disconnect();
+    };
+  }, [selector]);
+  return height;
+}
+
+// src/hooks/useStickyOffset.ts
+function useStickyOffset(extraPadding = 0) {
+  const headerHeight = useSelectorHeight("#nsw-header");
+  const navigationHeight = useSelectorHeight("#nsw-main-navigation");
+  return useMemo(() => {
+    const total = headerHeight + navigationHeight + extraPadding;
+    return total > 0 ? total : 0;
+  }, [extraPadding, headerHeight, navigationHeight]);
+}
+var PREFERRED_BACKGROUND_TONES3 = [400, 600, 200, 800, 100, 50];
+var DEFAULT_VISIBLE_FORMATS3 = ["hex", "rgb", "hsl", "oklch"];
+var DEFAULT_INITIAL_BACKGROUND_TOKEN3 = "nsw-blue-800";
+var DEFAULT_INITIAL_PAIR_ID3 = "nsw-blue-800:nsw-blue-200";
+var COLOR_PAIRING_TOOL_V3_PATH = "/core/colour/colour-pairing-tool-3";
+var AAA_NORMAL_TEXT_THRESHOLD2 = "7.0:1 for text below the WCAG large-text threshold. Sentence-case body copy should generally stay at 16px+ unless it is microcopy.";
+var AAA_LARGE_TEXT_THRESHOLD2 = "4.5:1 for WCAG large text: 24px+, or 18.5px+ bold";
+var MOBILE_RESULT_SCROLL_QUERY = "(max-width: 1023px)";
+var PERSISTENT_DRAWER_MIN_WIDTH_QUERY = "(min-width: 1280px)";
+var COLOR_PAIRING_TOOL_DRAWER_STEPS = [
+  {
+    id: "colours",
+    title: "Choose colours",
+    eyebrow: "Step 1 of 3",
+    description: "Select the palette, primary family, and accent family."
+  },
+  {
+    id: "backgrounds",
+    title: "Choose background",
+    eyebrow: "Step 2 of 3",
+    description: "Pick the background tone that you want to pair."
+  },
+  {
+    id: "combinations",
+    title: "Choose recommended combinations",
+    eyebrow: "Step 3 of 3",
+    description: "Select the foreground pairing that should drive the example."
+  }
+];
+var COLOR_PAIRING_TOOL_V3_ANALYTICS_EVENT = "nsw-colour-pairing-tool-v3";
+function getToneFromToken3(token) {
+  if (!token) return null;
+  const match = token.match(/-(\d+)$/);
+  return match ? Number.parseInt(match[1], 10) : null;
+}
+function getFamilySwatchColor3(family, preferredTone = 600) {
+  const exactMatch = family.colors.find((color2) => color2.tone === preferredTone);
+  if (exactMatch) {
+    return exactMatch.hex;
+  }
+  const closestMatch = [...family.colors].sort(
+    (left, right) => Math.abs(left.tone - preferredTone) - Math.abs(right.tone - preferredTone)
+  )[0];
+  return closestMatch?.hex ?? "transparent";
+}
+function getFamilySelectorLabel3(family, themeCategory, selectionRole) {
+  if (themeCategory !== "aboriginal") {
+    return family.label;
+  }
+  const preferredTone = selectionRole === "primary colour" ? 800 : 600;
+  return family.colors.find((color2) => color2.tone === preferredTone)?.name ?? family.label;
+}
+function getPairingColorDisplayName3(color2) {
+  return color2.name ?? `${color2.familyLabel} ${color2.tone}`;
+}
+function isWhiteForegroundPair3(pair) {
+  return pair.foreground.token === "white";
+}
+function isLargeTextOnlyPair(pair) {
+  return pair.passes.aaaLarge && !pair.passes.aaaText;
+}
+function getWhiteForegroundGuidance3(pair) {
+  if (pair.passes.aaaText) {
+    return "White is approved for headings, body copy, and calls to action on this background.";
+  }
+  if (pair.passes.aaaLarge) {
+    return "Use white only for WCAG large text on this background, such as headings at 24px+ or bold text at 18.5px+. Keep sentence-case body copy at 16px+ and use a darker recommended foreground instead.";
+  }
+  return "Do not use white on this background. Choose one of the recommended foregrounds below instead.";
+}
+function getPreviewGuidance3(pair, isRecommended) {
+  if (!isWhiteForegroundPair3(pair)) {
+    return "Use only AAA-recommended combinations across your selected primary, accent, and grey families.";
+  }
+  if (isRecommended) {
+    return "Use white text on dark colour only when it meets AAA for headings, body copy, and calls to action.";
+  }
+  return getWhiteForegroundGuidance3(pair);
+}
+function getPreferredPairForBackground3(pairs, preferredPairId) {
+  if (preferredPairId) {
+    const preferredPair = pairs.find((pair) => pair.id === preferredPairId);
+    if (preferredPair) {
+      return preferredPair;
+    }
+  }
+  return pairs.find((pair) => !isWhiteForegroundPair3(pair)) ?? pairs[0] ?? null;
+}
+function getDefaultBackgroundToken3(context) {
+  for (const tone of PREFERRED_BACKGROUND_TONES3) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find(
+        (background) => background.tone === tone && (context.pairsByBackground[background.token]?.length ?? 0) > 0
+      );
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  for (const tone of PREFERRED_BACKGROUND_TONES3) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find((background) => background.tone === tone);
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  return context.backgrounds[0]?.token ?? "";
+}
+function resolveBackgroundToken3(context, preferredToken, preferredTone) {
+  if (preferredToken && context.backgrounds.some((background) => background.token === preferredToken)) {
+    return preferredToken;
+  }
+  if (preferredTone !== null && preferredTone !== void 0) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find((background) => background.tone === preferredTone);
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  return getDefaultBackgroundToken3(context);
+}
+function getInitialPairingState3(searchParams) {
+  const paletteParam = searchParams.get("palette");
+  const primaryParam = searchParams.get("primary");
+  const accentParam = searchParams.get("accent");
+  const pairParam = searchParams.get("pair");
+  const backgroundParam = searchParams.get("background");
+  const themeCategory = paletteParam === "brand" || paletteParam === "aboriginal" ? paletteParam : "brand";
+  const context = getPairingContext(themeCategory, primaryParam, accentParam);
+  const shouldUseDefaultBrandExample = !backgroundParam && !pairParam && themeCategory === "brand" && context.primary.key === "blue" && context.accent.key === "red";
+  const defaultBackgroundToken = shouldUseDefaultBrandExample ? context.backgrounds.some(
+    (background) => background.token === DEFAULT_INITIAL_BACKGROUND_TOKEN3
+  ) ? DEFAULT_INITIAL_BACKGROUND_TOKEN3 : null : null;
+  const defaultPairId = shouldUseDefaultBrandExample && defaultBackgroundToken && context.pairsByBackground[defaultBackgroundToken]?.some(
+    (pair) => pair.id === DEFAULT_INITIAL_PAIR_ID3
+  ) ? DEFAULT_INITIAL_PAIR_ID3 : null;
+  const pairBackgroundToken = context.recommendedPairs.find((pair) => pair.id === pairParam)?.background.token ?? null;
+  const selectedBackgroundToken = resolveBackgroundToken3(
+    context,
+    backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken,
+    getToneFromToken3(backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken)
+  );
+  const selectedPairId = getPreferredPairForBackground3(
+    context.pairsByBackground[selectedBackgroundToken] ?? [],
+    pairParam ?? defaultPairId
+  )?.id ?? "";
+  return {
+    accentKey: context.accent.key,
+    primaryKey: context.primary.key,
+    selectedBackgroundToken,
+    selectedPairId,
+    themeCategory
+  };
+}
+function getReadableTextColor2(tone) {
+  return tone >= 600 ? "#ffffff" : "#002664";
+}
+function getBackgroundOptionName(background) {
+  return background.name ?? `${background.familyLabel} ${background.tone}`;
+}
+function getResultExplanation(pair, bestPair) {
+  if (!pair) {
+    return "No AAA-compliant foreground options available for this selection.";
+  }
+  if (pair.id === bestPair?.id) {
+    return "Meets AAA for normal and large text. This is the NSW-recommended starting point for this background.";
+  }
+  if (isWhiteForegroundPair3(pair) && isLargeTextOnlyPair(pair)) {
+    return "White meets AAA for large text on this background only. Use a darker foreground for standard body copy and smaller interface text.";
+  }
+  if (isWhiteForegroundPair3(pair) && !pair.passes.aaaLarge) {
+    return "White does not meet AAA for normal or large text on this background. Use another approved background or a darker foreground where one is available.";
+  }
+  return "Meets AAA for normal and large text. This is a valid alternative, while the recommended pairing remains the clearest default.";
+}
+function getBestRecommendationReason(pair, context) {
+  if (isWhiteForegroundPair3(pair)) {
+    return "Recommended because this background is dark enough to support white text at AAA contrast.";
+  }
+  if (pair.foreground.familyKey === pair.background.familyKey) {
+    return "Recommended because it stays within the same colour family while keeping clear AAA contrast.";
+  }
+  if (pair.foreground.familyKey === context.grey.key) {
+    return "Recommended because grey provides a strong neutral contrast without competing with the background.";
+  }
+  if (pair.foreground.familyKey === context.accent.key) {
+    return "Recommended because the selected accent family adds emphasis while preserving AAA contrast.";
+  }
+  if (pair.foreground.familyKey === context.primary.key) {
+    return "Recommended because the selected primary family gives the clearest AAA-compliant contrast for this background.";
+  }
+  return "Recommended because it is the clearest NSW-approved AAA pairing for this background.";
+}
+function getRecommendationCategory(pair, bestPair, context) {
+  if (pair.id === bestPair?.id) return "best";
+  if (isWhiteForegroundPair3(pair)) return "white";
+  if (pair.foreground.familyKey === pair.background.familyKey) return "same-family";
+  if (pair.foreground.familyKey === context.accent.key) return "accent-family";
+  if (pair.foreground.familyKey === context.grey.key) return "grey-option";
+  if (pair.foreground.familyKey === context.primary.key) return "primary-family";
+  return "approved";
+}
+function getRecommendationCategoryLabel(category) {
+  switch (category) {
+    case "best":
+      return "Best recommended";
+    case "same-family":
+      return "Same family";
+    case "accent-family":
+      return "Accent family";
+    case "grey-option":
+      return "Grey option";
+    case "primary-family":
+      return "Primary family";
+    case "white":
+      return "White";
+    default:
+      return "Approved option";
+  }
+}
+function getRecommendationSortRank(category) {
+  switch (category) {
+    case "best":
+      return 0;
+    case "same-family":
+      return 1;
+    case "accent-family":
+      return 2;
+    case "grey-option":
+      return 3;
+    case "white":
+      return 4;
+    case "primary-family":
+      return 5;
+    default:
+      return 6;
+  }
+}
+function getAvailabilityMeta(isSelected, hasPairs) {
+  if (isSelected && hasPairs) {
+    return {
+      description: "Selected background with AAA foreground options.",
+      icon: Icons.check_circle,
+      label: "Selected",
+      tone: "selected"
+    };
+  }
+  if (isSelected) {
+    return {
+      description: "Selected background with no AAA foreground options.",
+      icon: Icons.warning,
+      label: "Selected, no AAA",
+      tone: "unavailable"
+    };
+  }
+  if (hasPairs) {
+    return {
+      description: "AAA foreground options available.",
+      icon: Icons.radio_button_checked,
+      label: "Available",
+      tone: "available"
+    };
+  }
+  return {
+    description: "No AAA foreground available.",
+    icon: Icons.close,
+    label: "No AAA",
+    tone: "unavailable"
+  };
+}
+function getPairingCopyText(pair) {
+  return [
+    `Background: ${pair.background.token} (${pair.background.hex})`,
+    `Foreground: ${pair.foreground.token} (${pair.foreground.hex})`,
+    `Contrast ratio: ${pair.contrastRatio.toFixed(2)}:1`,
+    "Accessibility: Meets AAA for normal and large text"
+  ].join("\n");
+}
+function getLiveAnnouncement(pair, background) {
+  if (!background) {
+    return "No approved background tones available.";
+  }
+  if (!pair) {
+    return `${background.token} selected. No AAA-compliant foreground options available for this selection.`;
+  }
+  if (isWhiteForegroundPair3(pair) && isLargeTextOnlyPair(pair)) {
+    return `${background.token} with white. Contrast ratio ${pair.contrastRatio.toFixed(2)} to 1. Meets AAA for large text only.`;
+  }
+  if (isWhiteForegroundPair3(pair) && !pair.passes.aaaLarge) {
+    return `${background.token} with white. Contrast ratio ${pair.contrastRatio.toFixed(2)} to 1. Fails AAA for normal and large text.`;
+  }
+  return `${background.token} with ${pair.foreground.token}. Contrast ratio ${pair.contrastRatio.toFixed(2)} to 1. Meets AAA for normal and large text.`;
+}
+function formatValueRows(color2, visibleFormats) {
+  const hasDisplayTone = color2.token !== "white";
+  return [
+    { key: "token", label: "Token", value: color2.token, copyable: true },
+    {
+      key: "tone",
+      label: "Tone",
+      value: hasDisplayTone ? String(color2.tone) : "Not applicable",
+      copyable: hasDisplayTone
+    },
+    ...visibleFormats.map((format) => ({
+      key: format,
+      label: format.toUpperCase(),
+      value: color2[format],
+      copyable: true
+    }))
+  ];
+}
+function SelectorButton({
+  description,
+  isSelected,
+  label,
+  onClick,
+  swatch
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": isSelected,
+      onClick,
+      className: cn(
+        "w-full rounded-sm border px-3 py-3 text-left transition-colors focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+        isSelected ? "border-primary-800 bg-primary-50" : "border-grey-300 bg-white hover:border-primary-500 hover:bg-grey-50"
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        swatch ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "mt-0.5 size-4 shrink-0 rounded-full border border-black/10",
+            style: { backgroundColor: swatch }
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: label }),
+          description ? /* @__PURE__ */ jsx("p", { className: "text-xs/5 text-muted-foreground", children: description }) : null
+        ] })
+      ] })
+    }
+  );
+}
+function BackgroundSwatchButton({
+  background,
+  hasPairs,
+  isSelected,
+  onClick
+}) {
+  const status = getAvailabilityMeta(isSelected, hasPairs);
+  const StatusIcon = status.icon;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": isSelected,
+      "aria-label": `Select ${background.token} background. ${status.description}`,
+      onClick,
+      className: cn(
+        "w-full rounded-sm border bg-white p-3 text-left transition-colors focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+        isSelected ? "border-primary-800 bg-primary-50" : hasPairs ? "border-grey-300 hover:border-primary-500 hover:bg-grey-50" : "border-grey-300 hover:border-grey-500"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: getBackgroundOptionName(background) }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 font-mono text-[0.72rem] break-all text-muted-foreground", children: background.token })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center gap-1 rounded-sm border px-2 py-1 text-[0.68rem] font-semibold uppercase",
+                status.tone === "selected" && "border-primary-800 bg-primary-800 text-white dark:border-primary-500 dark:bg-primary-500",
+                status.tone === "available" && "border-grey-300 bg-grey-50 text-foreground",
+                status.tone === "unavailable" && "border-danger-300 bg-danger-50 text-danger-900 dark:border-danger-800 dark:bg-danger-950/20 dark:text-danger-200"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(StatusIcon, { "data-slot": "icon", className: "size-4" }),
+                status.label
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3 overflow-hidden rounded-[2px] border border-black/10", children: /* @__PURE__ */ jsx("div", { className: "h-14 w-full", style: { backgroundColor: background.hex } }) }),
+        /* @__PURE__ */ jsx("p", { className: "mt-3 text-xs/5 text-muted-foreground", children: status.description })
+      ]
+    }
+  );
+}
+function ResultSummaryTile({
+  children,
+  className,
+  label
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-sm border border-grey-200 bg-white px-4 py-4 sm:px-5", className), children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-grey-700", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "mt-3", children })
+  ] });
+}
+function AccessibilityCheckTile({
+  className,
+  label,
+  passes,
+  threshold
+}) {
+  const status = passes === null ? "unavailable" : passes ? "pass" : "fail";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-sm border px-4 py-4 sm:px-5",
+        className,
+        status === "pass" && "border-success-200 bg-success-50",
+        status === "fail" && "border-danger-200 bg-danger-50",
+        status === "unavailable" && "border-grey-200 bg-white"
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: label }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm/6 text-muted-foreground", children: status === "unavailable" ? "No contrast ratio available for this result." : threshold })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "inline-flex items-center gap-1 rounded-sm px-2.5 py-1 text-[0.72rem] font-semibold tracking-[0.12em] uppercase",
+              status === "pass" && "bg-success-700 text-white",
+              status === "fail" && "bg-danger-700 text-white",
+              status === "unavailable" && "bg-grey-100 text-foreground"
+            ),
+            children: [
+              status === "pass" ? /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-4" }) : status === "fail" ? /* @__PURE__ */ jsx(Icons.close, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsx(Icons.info, { "data-slot": "icon", className: "size-4" }),
+              status === "pass" ? "Pass" : status === "fail" ? "Fail" : "Unavailable"
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function ResultColorSummary({
+  color: color2,
+  fallbackLabel
+}) {
+  if (!color2) {
+    return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: fallbackLabel ?? "Not available" });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "mt-1 size-6 shrink-0 rounded-full border border-black/10",
+        style: { backgroundColor: color2.hex }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("p", { className: "leading-7 font-semibold text-foreground", children: getPairingColorDisplayName3(color2) }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 font-mono text-sm break-all text-muted-foreground", children: color2.token })
+    ] })
+  ] });
+}
+function CurrentResultCard({
+  bestPair,
+  familySummary,
+  pair,
+  selectedBackground
+}) {
+  const previewForeground = pair?.foreground.hex ?? getReadableTextColor2(selectedBackground.tone);
+  const isRecommended = pair ? pair.id === bestPair?.id : false;
+  const whiteForeground = pair ? isWhiteForegroundPair3(pair) : false;
+  const statusLabel = pair ? pair.passes.aaaText ? "Pass" : pair.passes.aaaLarge ? "Large text only" : "Example only" : "No recommendation";
+  const fauxButtonStyle = pair ? {
+    "--btn-bg": pair.foreground.hex,
+    "--btn-border": pair.foreground.hex,
+    "--btn-text": pair.background.hex,
+    "--btn-icon": pair.background.hex,
+    "--btn-hover-overlay": pair.background.hex
+  } : null;
+  return /* @__PURE__ */ jsxs(Card, { className: "gap-0 overflow-hidden py-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-grey-200 px-4 py-4 sm:px-6 sm:py-5", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[0.72rem] font-semibold tracking-[0.12em] text-muted-foreground uppercase", children: "Current result" }),
+        /* @__PURE__ */ jsx(Heading, { level: 2, size: 4, className: "text-foreground", trim: "normal", children: pair ? `${getPairingColorDisplayName3(pair.foreground)} on ${getPairingColorDisplayName3(pair.background)}` : `${getPairingColorDisplayName3(selectedBackground)} selected` })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { size: 2, className: "max-w-3xl text-grey-700", children: getResultExplanation(pair, bestPair) })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "p-4 sm:min-h-[26rem] sm:p-8",
+        style: {
+          backgroundColor: selectedBackground.hex,
+          color: previewForeground
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-[18rem] flex-col justify-between gap-6 sm:min-h-[22rem] sm:gap-8", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[0.68rem] font-semibold tracking-[0.16em] uppercase sm:text-[0.72rem]",
+                style: {
+                  borderColor: pair ? pair.foreground.hex : "currentColor",
+                  backgroundColor: pair ? pair.foreground.hex : "transparent",
+                  color: pair ? pair.background.hex : "currentColor"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Icons.palette, { "data-slot": "icon", className: "size-4" }),
+                  familySummary
+                ]
+              }
+            ),
+            pair ? /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "inline-flex rounded-full border px-3 py-1 text-[0.68rem] font-semibold tracking-[0.16em] uppercase sm:text-[0.72rem]",
+                style: {
+                  borderColor: pair.foreground.hex
+                },
+                children: [
+                  pair.rating,
+                  " ",
+                  pair.contrastRatio.toFixed(2),
+                  ":1"
+                ]
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "max-w-xl space-y-4 pb-8 sm:pb-16", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: pair ? whiteForeground && !isRecommended ? "White on colour example" : whiteForeground ? "White on colour" : "Colour on colour" : "Approved background" }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsx("h3", { className: "max-w-lg text-3xl leading-tight font-bold text-current sm:text-5xl sm:leading-none", children: "Pair colour with confidence." }),
+              /* @__PURE__ */ jsx("p", { className: "max-w-full text-base/6 sm:max-w-md sm:text-base/7", children: pair ? getPreviewGuidance3(pair, isRecommended) : "This approved background tone does not currently have a recommended AAA foreground in this tool. Choose another approved background tone to continue." }),
+              pair && fauxButtonStyle ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-variant": "solid",
+                  className: cn(
+                    buttonVariants({ variant: "solid", size: "default" }),
+                    "pointer-events-none cursor-default px-6 text-[16px] font-[700] select-none sm:px-6 sm:text-[16px] sm:font-[700]"
+                  ),
+                  style: fauxButtonStyle,
+                  children: "Get started"
+                }
+              ) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold",
+                style: pair ? {
+                  backgroundColor: pair.foreground.hex,
+                  color: pair.background.hex
+                } : {
+                  backgroundColor: "rgb(255 255 255 / 0.14)",
+                  color: "currentColor"
+                },
+                children: [
+                  statusLabel,
+                  pair && pair.passes.aaaText ? /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsx(Icons.info, { "data-slot": "icon", className: "size-4" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "inline-flex max-w-full rounded-full border px-4 py-2 text-[0.82rem] break-all sm:text-sm",
+                style: {
+                  borderColor: pair ? pair.foreground.hex : "currentColor"
+                },
+                children: pair ? `${pair.background.token} / ${pair.foreground.token}` : selectedBackground.token
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "space-y-5 border-t border-grey-200 bg-grey-50 px-4 py-5 sm:px-6 sm:py-6", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+      /* @__PURE__ */ jsx(ResultSummaryTile, { label: "Background", children: /* @__PURE__ */ jsx(ResultColorSummary, { color: selectedBackground }) }),
+      /* @__PURE__ */ jsx(ResultSummaryTile, { label: "Foreground", children: /* @__PURE__ */ jsx(
+        ResultColorSummary,
+        {
+          color: pair?.foreground,
+          fallbackLabel: "No AAA foreground available"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(ResultSummaryTile, { label: "Contrast ratio", className: "lg:col-span-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-4xl leading-none font-bold text-foreground", children: pair ? `${pair.contrastRatio.toFixed(2)}:1` : "N/A" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: pair ? pair.passes.aaaText ? "Meets AAA accessibility" : pair.passes.aaaLarge ? "Meets AAA for large text only" : "Does not meet accessibility requirements" : "Does not meet accessibility requirements" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        AccessibilityCheckTile,
+        {
+          className: "lg:col-span-2",
+          label: "AAA normal text",
+          passes: pair ? pair.passes.aaaText : null,
+          threshold: AAA_NORMAL_TEXT_THRESHOLD2
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AccessibilityCheckTile,
+        {
+          className: "lg:col-span-2",
+          label: "AAA large text",
+          passes: pair ? pair.passes.aaaLarge : null,
+          threshold: AAA_LARGE_TEXT_THRESHOLD2
+        }
+      )
+    ] }) })
+  ] });
+}
+function BestRecommendationCard({
+  copiedKey,
+  isCurrentSelection,
+  onCopyPairing,
+  onUsePairing,
+  pair,
+  reason
+}) {
+  return /* @__PURE__ */ jsxs(Card, { className: "gap-5 border-primary-200 bg-primary-50/60 px-6 py-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 rounded-sm bg-primary-800 px-3 py-1 text-[0.72rem] font-semibold tracking-[0.12em] text-white uppercase", children: [
+            /* @__PURE__ */ jsx(Icons.check_circle, { "data-slot": "icon", className: "size-4" }),
+            "Best recommended pairing"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "inline-flex rounded-sm border border-primary-300 px-3 py-1 text-[0.72rem] font-semibold tracking-[0.12em] text-primary-900 uppercase", children: [
+            pair.contrastRatio.toFixed(2),
+            ":1"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: [
+            pair.background.token,
+            " / ",
+            pair.foreground.token
+          ] }),
+          /* @__PURE__ */ jsx(Text, { size: 2, className: "max-w-3xl text-grey-700", children: reason })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center", children: [
+        isCurrentSelection ? null : /* @__PURE__ */ jsx(
+          Button2,
+          {
+            className: "w-full justify-center sm:w-auto sm:min-w-56",
+            color: "primary",
+            onClick: onUsePairing,
+            "aria-label": `Use ${pair.foreground.token} on ${pair.background.token}`,
+            children: "Use best recommendation"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button2,
+          {
+            className: "w-full justify-center sm:w-auto sm:min-w-48",
+            variant: "outline",
+            color: "grey",
+            onClick: onCopyPairing,
+            children: [
+              /* @__PURE__ */ jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+              copiedKey === "best-pairing" ? "Pairing copied" : "Copy pairing"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx(ResultSummaryTile, { label: "Background", children: /* @__PURE__ */ jsx(ResultColorSummary, { color: pair.background }) }),
+      /* @__PURE__ */ jsx(ResultSummaryTile, { label: "Foreground", children: /* @__PURE__ */ jsx(ResultColorSummary, { color: pair.foreground }) }),
+      /* @__PURE__ */ jsxs(ResultSummaryTile, { label: "Accessibility", className: "md:col-span-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xl leading-8 font-semibold text-foreground", children: "Meets AAA accessibility" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-3 text-base/7 text-muted-foreground", children: "Best NSW default for this background." })
+      ] })
+    ] })
+  ] });
+}
+function RecommendationCard({
+  copiedKey,
+  isSelected,
+  item,
+  onCopyPairing,
+  onSelect
+}) {
+  const { pair } = item;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative rounded-sm border bg-white p-4 text-left transition-colors focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+        isSelected ? "border-primary-800 bg-primary-50/50" : "border-grey-200 hover:border-primary-500 hover:bg-grey-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": isSelected,
+            "aria-label": `Use ${pair.foreground.token} on ${pair.background.token}`,
+            onClick: onSelect,
+            className: "absolute inset-0 rounded-sm focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "pointer-events-none relative z-10", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "inline-flex items-center gap-2 rounded-sm px-2.5 py-1 text-[0.68rem] font-semibold tracking-[0.12em] uppercase",
+                  item.category === "best" ? "bg-primary-800 text-white" : "border border-grey-300 bg-grey-50 text-foreground"
+                ),
+                children: [
+                  item.category === "best" ? /* @__PURE__ */ jsx(Icons.check_circle, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsx(Icons.info, { "data-slot": "icon", className: "size-4" }),
+                  item.categoryLabel
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "pointer-events-auto shrink-0 self-start", children: /* @__PURE__ */ jsxs(
+              Button2,
+              {
+                variant: "ghost",
+                color: "grey",
+                size: "sm",
+                onClick: onCopyPairing,
+                "aria-label": `Copy pairing ${pair.background.token} and ${pair.foreground.token}`,
+                children: [
+                  /* @__PURE__ */ jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+                  copiedKey === `pair:${pair.id}` ? "Copied" : "Copy"
+                ]
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-[4rem_minmax(0,1fr)]", children: [
+              /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-[2px] border border-black/10", children: [
+                /* @__PURE__ */ jsx("div", { className: "h-16 w-full", style: { backgroundColor: pair.background.hex } }),
+                /* @__PURE__ */ jsx("div", { className: "h-4 w-full", style: { backgroundColor: pair.foreground.hex } })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2", children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-base font-semibold text-foreground", children: getPairingColorDisplayName3(pair.foreground) }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1 font-mono text-[0.74rem] break-all text-muted-foreground", children: pair.foreground.token })
+                ] }),
+                /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                  pair.foreground.familyLabel,
+                  " on ",
+                  pair.background.familyLabel
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-col items-start gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ jsxs("span", { className: "inline-flex rounded-sm border border-grey-300 px-2.5 py-1 text-sm font-semibold text-foreground", children: [
+                  pair.contrastRatio.toFixed(2),
+                  ":1"
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "inline-flex rounded-sm bg-success-700 px-2.5 py-1 text-[0.72rem] font-semibold tracking-[0.12em] text-white uppercase", children: "AAA" })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-primary-800", children: isSelected ? "Selected" : "Use pairing" })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function TechnicalDetailsPanel({
+  color: color2,
+  copiedKey,
+  onCopyValue,
+  title,
+  visibleFormats
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-sm border border-grey-200 bg-white", children: [
+    /* @__PURE__ */ jsxs("div", { className: "border-b border-grey-200 px-4 py-4 sm:px-5", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 3, size: 6, className: "text-foreground", trim: "normal", children: title }),
+      color2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: getPairingColorDisplayName3(color2) }),
+        /* @__PURE__ */ jsx("div", { className: "mt-4 overflow-hidden rounded-sm border border-black/10 bg-white", children: /* @__PURE__ */ jsx("div", { className: "h-20 w-full sm:h-24", style: { backgroundColor: color2.hex } }) })
+      ] }) : /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "No AAA foreground available." })
+    ] }),
+    color2 ? /* @__PURE__ */ jsx("div", { className: "divide-y divide-grey-200", children: formatValueRows(color2, visibleFormats).map((row) => {
+      const copyKey = `${title}-${row.key}`;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex flex-col items-start gap-3 px-4 py-4 sm:flex-row sm:items-start sm:justify-between sm:gap-4 sm:px-5",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-[0.72rem] font-semibold tracking-[0.12em] text-muted-foreground uppercase", children: row.label }),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-2 text-sm text-foreground",
+                    row.key !== "tone" && "font-mono break-all"
+                  ),
+                  children: row.value
+                }
+              )
+            ] }),
+            row.copyable ? /* @__PURE__ */ jsx(
+              Button2,
+              {
+                variant: "ghost",
+                color: "grey",
+                size: "sm",
+                className: "self-start",
+                onClick: () => onCopyValue(copyKey, row.value, `${row.label} copied`),
+                "aria-label": `Copy ${title.toLowerCase()} ${row.label.toLowerCase()}`,
+                children: copiedKey === copyKey ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Icons.check_circle, { "data-slot": "icon", className: "size-5" }),
+                  "Copied"
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+                  "Copy"
+                ] })
+              }
+            ) : null
+          ]
+        },
+        row.key
+      );
+    }) }) : /* @__PURE__ */ jsx("div", { className: "px-5 py-5", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No technical values are shown because there is no AAA-compliant foreground for this background." }) })
+  ] });
+}
+function resolveSelectionState(nextThemeCategory, nextPrimaryKey, nextAccentKey, preferredBackgroundToken, preferredPairId) {
+  const context = getPairingContext(nextThemeCategory, nextPrimaryKey, nextAccentKey);
+  const selectedBackgroundToken = resolveBackgroundToken3(
+    context,
+    preferredBackgroundToken,
+    getToneFromToken3(preferredBackgroundToken)
+  );
+  const selectedPairId = getPreferredPairForBackground3(
+    context.pairsByBackground[selectedBackgroundToken] ?? [],
+    preferredPairId
+  )?.id ?? "";
+  return {
+    accentKey: context.accent.key,
+    context,
+    primaryKey: context.primary.key,
+    selectedBackgroundToken,
+    selectedPairId,
+    themeCategory: nextThemeCategory
+  };
+}
+function ColorPairingToolV3Loading() {
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-8 xl:grid-cols-[minmax(18rem,24rem)_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-52 rounded-sm border border-grey-200 bg-grey-50" }),
+      /* @__PURE__ */ jsx("div", { className: "h-[32rem] rounded-sm border border-grey-200 bg-grey-50" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-96 rounded-sm border border-grey-200 bg-grey-50" }),
+      /* @__PURE__ */ jsx("div", { className: "h-64 rounded-sm border border-grey-200 bg-grey-50" }),
+      /* @__PURE__ */ jsx("div", { className: "h-72 rounded-sm border border-grey-200 bg-grey-50" })
+    ] })
+  ] });
+}
+function ColorPairingToolV3Content({
+  onAnalyticsEvent,
+  visibleFormats
+}) {
+  const searchParams = useSearchParams();
+  const stickyOffset = useStickyOffset(24);
+  const [initialState] = useState(() => getInitialPairingState3(searchParams));
+  const [themeCategory, setThemeCategory] = useState(initialState.themeCategory);
+  const [primaryFamilyKey, setPrimaryFamilyKey] = useState(initialState.primaryKey);
+  const [accentFamilyKey, setAccentFamilyKey] = useState(initialState.accentKey);
+  const [selectedBackgroundToken, setSelectedBackgroundToken] = useState(
+    initialState.selectedBackgroundToken
+  );
+  const [selectedPairId, setSelectedPairId] = useState(initialState.selectedPairId);
+  const [drawerStepIndex, setDrawerStepIndex] = useState(0);
+  const [isCompactControlsOpen, setIsCompactControlsOpen] = useState(false);
+  const [, copyToClipboardRaw] = useCopyToClipboard();
+  const [copiedKey, setCopiedKey] = useState(null);
+  const copiedKeyTimeoutRef = useRef(null);
+  const resultSectionRef = useRef(null);
+  const noValidStateRef = useRef(/* @__PURE__ */ new Set());
+  const technicalDetailsOpenedRef = useRef(false);
+  const emitAnalyticsEvent = useCallback(
+    (event) => {
+      onAnalyticsEvent(event);
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(
+          new CustomEvent(COLOR_PAIRING_TOOL_V3_ANALYTICS_EVENT, {
+            detail: event
+          })
+        );
+      }
+    },
+    [onAnalyticsEvent]
+  );
+  useEffect(() => {
+    return () => {
+      if (copiedKeyTimeoutRef.current) {
+        clearTimeout(copiedKeyTimeoutRef.current);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const mediaQuery = window.matchMedia(PERSISTENT_DRAWER_MIN_WIDTH_QUERY);
+    const handleChange = (event) => {
+      if (event?.matches ?? mediaQuery.matches) {
+        setIsCompactControlsOpen(false);
+      }
+    };
+    handleChange();
+    mediaQuery.addEventListener("change", handleChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, []);
+  const themeFamilies = useMemo(() => getPairingFamilies(themeCategory), [themeCategory]);
+  const context = useMemo(
+    () => getPairingContext(themeCategory, primaryFamilyKey, accentFamilyKey),
+    [themeCategory, primaryFamilyKey, accentFamilyKey]
+  );
+  const selectableFamilies = useMemo(
+    () => themeFamilies.filter((family) => family.key !== context.grey.key),
+    [themeFamilies, context.grey.key]
+  );
+  const selectableAccentFamilies = useMemo(
+    () => selectableFamilies.filter((family) => family.key !== context.primary.key),
+    [selectableFamilies, context.primary.key]
+  );
+  const selectedBackground = useMemo(
+    () => context.backgrounds.find((background) => background.token === selectedBackgroundToken) ?? context.backgrounds[0] ?? null,
+    [context.backgrounds, selectedBackgroundToken]
+  );
+  const selectedBackgroundPairs = useMemo(
+    () => selectedBackground ? context.pairsByBackground[selectedBackground.token] ?? [] : [],
+    [context.pairsByBackground, selectedBackground]
+  );
+  const bestRecommendedPair = useMemo(
+    () => getPreferredPairForBackground3(selectedBackgroundPairs),
+    [selectedBackgroundPairs]
+  );
+  const selectedPair = useMemo(
+    () => getPreferredPairForBackground3(selectedBackgroundPairs, selectedPairId),
+    [selectedBackgroundPairs, selectedPairId]
+  );
+  const whiteForegroundExample = useMemo(
+    () => selectedBackground && supportsWhiteForegroundPreview(selectedBackground) ? getWhiteForegroundPair(selectedBackground) : null,
+    [selectedBackground]
+  );
+  const previewPair = selectedPair ?? whiteForegroundExample ?? null;
+  const detailForeground = selectedPair?.foreground ?? whiteForegroundExample?.foreground ?? null;
+  const familySummary = useMemo(
+    () => [context.primary.label, context.accent.label, context.grey.label].join(" + "),
+    [context.accent.label, context.grey.label, context.primary.label]
+  );
+  const recommendationItems = useMemo(() => {
+    return selectedBackgroundPairs.map((pair) => {
+      const category = getRecommendationCategory(pair, bestRecommendedPair, context);
+      return {
+        category,
+        categoryLabel: getRecommendationCategoryLabel(category),
+        pair
+      };
+    }).sort(
+      (left, right) => getRecommendationSortRank(left.category) - getRecommendationSortRank(right.category)
+    );
+  }, [bestRecommendedPair, context, selectedBackgroundPairs]);
+  const liveAnnouncement = useMemo(
+    () => getLiveAnnouncement(previewPair, selectedBackground),
+    [previewPair, selectedBackground]
+  );
+  const shareBackgroundToken = selectedBackground?.token ?? selectedBackgroundToken;
+  const shareUrl = useMemo(() => {
+    const params = new URLSearchParams();
+    params.set("palette", themeCategory);
+    params.set("primary", context.primary.key);
+    params.set("accent", context.accent.key);
+    if (shareBackgroundToken) {
+      params.set("background", shareBackgroundToken);
+    }
+    if (selectedPairId) {
+      params.set("pair", selectedPairId);
+    }
+    const query = params.toString();
+    return `${COLOR_PAIRING_TOOL_V3_PATH}${query ? `?${query}` : ""}`;
+  }, [context.accent.key, context.primary.key, shareBackgroundToken, selectedPairId, themeCategory]);
+  const activeDrawerStep = COLOR_PAIRING_TOOL_DRAWER_STEPS[drawerStepIndex];
+  const isFirstDrawerStep = drawerStepIndex === 0;
+  const isLastDrawerStep = drawerStepIndex === COLOR_PAIRING_TOOL_DRAWER_STEPS.length - 1;
+  const desktopSidebarStyle = useMemo(
+    () => ({
+      "--tool-sidebar-max-height": `calc(100vh - ${stickyOffset}px)`,
+      "--tool-sidebar-top": `${stickyOffset}px`
+    }),
+    [stickyOffset]
+  );
+  const goToDrawerStep = useCallback((stepIndex) => {
+    setDrawerStepIndex(Math.max(0, Math.min(stepIndex, COLOR_PAIRING_TOOL_DRAWER_STEPS.length - 1)));
+  }, []);
+  const goToNextDrawerStep = useCallback(() => {
+    setDrawerStepIndex(
+      (currentStep) => Math.min(currentStep + 1, COLOR_PAIRING_TOOL_DRAWER_STEPS.length - 1)
+    );
+  }, []);
+  const goToPreviousDrawerStep = useCallback(() => {
+    setDrawerStepIndex((currentStep) => Math.max(currentStep - 1, 0));
+  }, []);
+  const updateUrlParams = useCallback((nextState) => {
+    const params = new URLSearchParams(window.location.search);
+    params.delete("family");
+    params.set("palette", nextState.themeCategory);
+    params.set("primary", nextState.primaryKey);
+    params.set("accent", nextState.accentKey);
+    params.set("background", nextState.selectedBackgroundToken);
+    if (nextState.selectedPairId) {
+      params.set("pair", nextState.selectedPairId);
+    } else {
+      params.delete("pair");
+    }
+    window.history.replaceState(
+      null,
+      "",
+      `${window.location.pathname}?${params.toString()}${window.location.hash}`
+    );
+  }, []);
+  const applyResolvedSelection = useCallback(
+    (nextState) => {
+      setThemeCategory(nextState.themeCategory);
+      setPrimaryFamilyKey(nextState.primaryKey);
+      setAccentFamilyKey(nextState.accentKey);
+      setSelectedBackgroundToken(nextState.selectedBackgroundToken);
+      setSelectedPairId(nextState.selectedPairId);
+      updateUrlParams(nextState);
+    },
+    [updateUrlParams]
+  );
+  const buildAnalyticsContext = useCallback(
+    (overrides) => ({
+      accentKey: context.accent.key,
+      backgroundToken: selectedBackground?.token,
+      foregroundToken: selectedPair?.foreground.token,
+      pairId: selectedPair?.id,
+      palette: themeCategory,
+      primaryKey: context.primary.key,
+      ...overrides
+    }),
+    [context.accent.key, context.primary.key, selectedBackground, selectedPair, themeCategory]
+  );
+  const copyValue = useCallback(
+    (copyKey, value, toastLabel, analyticsEvent) => {
+      copyToClipboardRaw(value);
+      setCopiedKey(copyKey);
+      toast(toastLabel, { duration: 2e3 });
+      if (analyticsEvent) {
+        emitAnalyticsEvent(analyticsEvent);
+      }
+      if (copiedKeyTimeoutRef.current) {
+        clearTimeout(copiedKeyTimeoutRef.current);
+      }
+      copiedKeyTimeoutRef.current = setTimeout(() => {
+        setCopiedKey(null);
+        copiedKeyTimeoutRef.current = null;
+      }, 2e3);
+    },
+    [copyToClipboardRaw, emitAnalyticsEvent]
+  );
+  const handleThemeCategoryChange = (nextThemeCategory) => {
+    const nextState = resolveSelectionState(
+      nextThemeCategory,
+      primaryFamilyKey,
+      accentFamilyKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+    applyResolvedSelection(nextState);
+    emitAnalyticsEvent({
+      name: "palette_change",
+      accentKey: nextState.accentKey,
+      backgroundToken: nextState.selectedBackgroundToken,
+      pairId: nextState.selectedPairId,
+      palette: nextState.themeCategory,
+      primaryKey: nextState.primaryKey
+    });
+  };
+  const handlePrimaryColorChange = (nextPrimaryKey) => {
+    const nextAccentKey = nextPrimaryKey === accentFamilyKey ? getDefaultAccentFamilyKey(themeCategory, nextPrimaryKey) : accentFamilyKey;
+    const nextState = resolveSelectionState(
+      themeCategory,
+      nextPrimaryKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+    applyResolvedSelection(nextState);
+    emitAnalyticsEvent({
+      name: "primary_change",
+      accentKey: nextState.accentKey,
+      backgroundToken: nextState.selectedBackgroundToken,
+      pairId: nextState.selectedPairId,
+      palette: nextState.themeCategory,
+      primaryKey: nextState.primaryKey
+    });
+  };
+  const handleAccentColorChange = (nextAccentKey) => {
+    if (nextAccentKey === primaryFamilyKey) return;
+    const nextState = resolveSelectionState(
+      themeCategory,
+      primaryFamilyKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+    applyResolvedSelection(nextState);
+    emitAnalyticsEvent({
+      name: "accent_change",
+      accentKey: nextState.accentKey,
+      backgroundToken: nextState.selectedBackgroundToken,
+      pairId: nextState.selectedPairId,
+      palette: nextState.themeCategory,
+      primaryKey: nextState.primaryKey
+    });
+  };
+  const handleBackgroundChange = (nextSelectedBackgroundToken) => {
+    const nextSelectedPairId = getPreferredPairForBackground3(
+      context.pairsByBackground[nextSelectedBackgroundToken] ?? [],
+      selectedPairId
+    )?.id ?? "";
+    const nextState = {
+      accentKey: context.accent.key,
+      context,
+      primaryKey: context.primary.key,
+      selectedBackgroundToken: nextSelectedBackgroundToken,
+      selectedPairId: nextSelectedPairId,
+      themeCategory
+    };
+    applyResolvedSelection(nextState);
+    emitAnalyticsEvent({
+      name: "background_selection",
+      ...buildAnalyticsContext({
+        backgroundToken: nextSelectedBackgroundToken,
+        foregroundToken: context.pairsByBackground[nextSelectedBackgroundToken]?.find(
+          (pair) => pair.id === nextSelectedPairId
+        )?.foreground.token,
+        pairId: nextSelectedPairId
+      })
+    });
+    if (typeof window !== "undefined" && window.matchMedia(MOBILE_RESULT_SCROLL_QUERY).matches) {
+      requestAnimationFrame(() => {
+        resultSectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+      });
+    }
+  };
+  const handlePairChange = (nextSelectedPairId, source) => {
+    if (!selectedBackground) return;
+    const nextPair = selectedBackgroundPairs.find((pair) => pair.id === nextSelectedPairId) ?? null;
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams({
+      accentKey: context.accent.key,
+      context,
+      primaryKey: context.primary.key,
+      selectedBackgroundToken: selectedBackground.token,
+      selectedPairId: nextSelectedPairId,
+      themeCategory
+    });
+    emitAnalyticsEvent({
+      name: "foreground_selection",
+      ...buildAnalyticsContext({
+        foregroundToken: nextPair?.foreground.token,
+        pairId: nextSelectedPairId,
+        source
+      })
+    });
+    if (bestRecommendedPair && nextSelectedPairId !== bestRecommendedPair.id) {
+      emitAnalyticsEvent({
+        name: "alternative_combination_selected",
+        ...buildAnalyticsContext({
+          foregroundToken: nextPair?.foreground.token,
+          pairId: nextSelectedPairId,
+          source
+        })
+      });
+    }
+  };
+  useEffect(() => {
+    if (!selectedBackground || selectedBackgroundPairs.length > 0) {
+      return;
+    }
+    const key = `${themeCategory}:${context.primary.key}:${context.accent.key}:${selectedBackground.token}`;
+    if (noValidStateRef.current.has(key)) {
+      return;
+    }
+    noValidStateRef.current.add(key);
+    emitAnalyticsEvent({
+      name: "no_valid_combination_state",
+      ...buildAnalyticsContext({
+        backgroundToken: selectedBackground.token
+      })
+    });
+  }, [
+    buildAnalyticsContext,
+    context.accent.key,
+    context.primary.key,
+    emitAnalyticsEvent,
+    selectedBackground,
+    selectedBackgroundPairs.length,
+    themeCategory
+  ]);
+  useEffect(() => {
+    if (technicalDetailsOpenedRef.current) {
+      return;
+    }
+    technicalDetailsOpenedRef.current = true;
+    emitAnalyticsEvent({
+      name: "technical_details_opened",
+      ...buildAnalyticsContext({
+        source: "details"
+      })
+    });
+  }, [buildAnalyticsContext, emitAnalyticsEvent]);
+  if (!selectedBackground) {
+    return /* @__PURE__ */ jsxs(Card, { className: "px-6 py-6", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "No approved background tones available" }),
+      /* @__PURE__ */ jsx(Text, { size: 2, className: "mt-3", children: "No approved tones are available for the current palette and colour selection." })
+    ] });
+  }
+  const compactControlsSummary = `${themeCategory === "brand" ? "Brand" : "Aboriginal"} palette, ${context.primary.label} primary, ${context.accent.label} accent, ${getPairingColorDisplayName3(
+    selectedBackground
+  )} background.`;
+  const renderControlsPanel = (isOverlay = false) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-grey-200 px-5 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Configuration" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        !isFirstDrawerStep ? /* @__PURE__ */ jsxs(Button2, { variant: "ghost", color: "grey", size: "sm", onClick: goToPreviousDrawerStep, children: [
+          /* @__PURE__ */ jsx(Icons.west, { "data-slot": "icon", className: "size-5" }),
+          "Back"
+        ] }) : null,
+        isOverlay ? /* @__PURE__ */ jsx(
+          Button2,
+          {
+            variant: "ghost",
+            color: "grey",
+            size: "icon",
+            onClick: () => setIsCompactControlsOpen(false),
+            "aria-label": "Close configuration",
+            children: /* @__PURE__ */ jsx(Icons.close, { "data-slot": "icon", className: "size-5" })
+          }
+        ) : null
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "border-b border-grey-200 px-5 py-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        COLOR_PAIRING_TOOL_DRAWER_STEPS.map((step, index) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-current": index === drawerStepIndex ? "step" : void 0,
+            "aria-label": `${step.eyebrow}: ${step.title}`,
+            onClick: () => goToDrawerStep(index),
+            className: "flex-1 rounded-sm focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "block h-1.5 rounded-full transition-colors",
+                  index <= drawerStepIndex ? "bg-primary-800" : "bg-grey-200"
+                )
+              }
+            )
+          },
+          step.id
+        )),
+        /* @__PURE__ */ jsx("span", { className: "mt-2 basis-full text-[0.68rem] font-semibold tracking-[0.12em] text-primary-800 uppercase sm:mt-0 sm:ml-2 sm:basis-auto sm:text-[0.72rem]", children: activeDrawerStep.eyebrow })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-2", children: [
+        /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: activeDrawerStep.title }),
+        /* @__PURE__ */ jsx(Text, { size: 2, children: activeDrawerStep.description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "relative flex-1 overflow-hidden", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex h-full transition-transform duration-300 ease-out",
+        style: { transform: `translateX(-${drawerStepIndex * 100}%)` },
+        children: [
+          /* @__PURE__ */ jsx("section", { className: "h-full w-full shrink-0 overflow-y-auto px-5 py-5", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6 pr-1", children: [
+            /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsx(Heading, { level: 4, size: 6, className: "mb-3 text-foreground", trim: "normal", children: "Palette" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: ["brand", "aboriginal"].map((palette) => {
+                const isSelected = themeCategory === palette;
+                const label = palette === "brand" ? "Brand palette" : "Aboriginal palette";
+                return /* @__PURE__ */ jsx(
+                  SelectorButton,
+                  {
+                    label,
+                    isSelected,
+                    onClick: () => handleThemeCategoryChange(palette)
+                  },
+                  palette
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsx(Heading, { level: 4, size: 6, className: "mb-3 text-foreground", trim: "normal", children: "Primary colour family" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: selectableFamilies.map((family) => {
+                const label = getFamilySelectorLabel3(family, themeCategory, "primary colour");
+                return /* @__PURE__ */ jsx(
+                  SelectorButton,
+                  {
+                    label,
+                    isSelected: family.key === context.primary.key,
+                    onClick: () => handlePrimaryColorChange(family.key),
+                    swatch: getFamilySwatchColor3(family, 800)
+                  },
+                  family.key
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsx(Heading, { level: 4, size: 6, className: "mb-3 text-foreground", trim: "normal", children: "Accent colour family" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: selectableAccentFamilies.map((family) => {
+                const label = getFamilySelectorLabel3(family, themeCategory, "accent colour");
+                return /* @__PURE__ */ jsx(
+                  SelectorButton,
+                  {
+                    label,
+                    isSelected: family.key === context.accent.key,
+                    onClick: () => handleAccentColorChange(family.key),
+                    swatch: getFamilySwatchColor3(family, 600)
+                  },
+                  family.key
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "border-t border-grey-200 pt-4", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Grey is always included" }),
+              /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Neutral grey options are automatically added so every selection includes a practical fallback family." })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx("section", { className: "h-full w-full shrink-0 overflow-y-auto px-5 py-5", children: /* @__PURE__ */ jsx("div", { className: "space-y-6 pr-1", children: context.backgroundGroups.map((group, index) => /* @__PURE__ */ jsxs(
+            "section",
+            {
+              className: cn("space-y-3", index > 0 && "border-t border-grey-200 pt-6"),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsxs(Heading, { level: 4, size: 6, className: "text-foreground", trim: "normal", children: [
+                    group.family.label,
+                    " backgrounds"
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: group.label })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: group.backgrounds.map((background) => /* @__PURE__ */ jsx(
+                  BackgroundSwatchButton,
+                  {
+                    background,
+                    hasPairs: (context.pairsByBackground[background.token]?.length ?? 0) > 0,
+                    isSelected: selectedBackground.token === background.token,
+                    onClick: () => handleBackgroundChange(background.token)
+                  },
+                  background.token
+                )) })
+              ]
+            },
+            group.key
+          )) }) }),
+          /* @__PURE__ */ jsx("section", { className: "h-full w-full shrink-0 overflow-y-auto px-5 py-5", children: /* @__PURE__ */ jsx("div", { className: "space-y-4 pr-1", children: recommendationItems.length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-3", children: recommendationItems.map((item) => /* @__PURE__ */ jsx(
+            RecommendationCard,
+            {
+              copiedKey,
+              item,
+              isSelected: item.pair.id === selectedPair?.id,
+              onCopyPairing: () => copyValue(
+                `pair:${item.pair.id}`,
+                getPairingCopyText(item.pair),
+                "Pairing copied",
+                item.pair.id === bestRecommendedPair?.id ? {
+                  name: "best_recommendation_copied",
+                  ...buildAnalyticsContext({
+                    foregroundToken: item.pair.foreground.token,
+                    pairId: item.pair.id,
+                    source: "recommendations-list"
+                  })
+                } : void 0
+              ),
+              onSelect: () => handlePairChange(item.pair.id, "recommendations-list")
+            },
+            item.pair.id
+          )) }) : /* @__PURE__ */ jsxs("div", { className: "rounded-sm border border-grey-200 bg-white px-5 py-5", children: [
+            /* @__PURE__ */ jsx(Heading, { level: 4, size: 6, className: "text-foreground", trim: "normal", children: "No valid combinations available" }),
+            /* @__PURE__ */ jsx(Text, { size: 2, className: "mt-3", children: "No AAA-compliant foreground options are available for this background." })
+          ] }) }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "border-t border-grey-200 px-5 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-h-10 flex-1", children: isLastDrawerStep ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Select a combination to update the result immediately." }) : null }),
+      /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2 sm:w-auto sm:flex-none", children: [
+        isOverlay && isLastDrawerStep ? /* @__PURE__ */ jsx(
+          Button2,
+          {
+            color: "primary",
+            className: "w-full sm:w-auto sm:min-w-40",
+            onClick: () => setIsCompactControlsOpen(false),
+            children: "Review result"
+          }
+        ) : null,
+        !isLastDrawerStep ? /* @__PURE__ */ jsxs(Button2, { color: "primary", className: "w-full sm:w-auto", onClick: goToNextDrawerStep, children: [
+          "Continue",
+          /* @__PURE__ */ jsx(Icons.east, { "data-slot": "icon", className: "size-5" })
+        ] }) : null
+      ] })
+    ] }) })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-8 xl:grid-cols-[minmax(18rem,24rem)_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "tool-sidebar",
+        className: "hidden xl:sticky xl:top-[var(--tool-sidebar-top)] xl:block xl:self-start",
+        style: desktopSidebarStyle,
+        children: /* @__PURE__ */ jsx(Card, { className: "h-[40rem] max-h-[40rem] gap-0 overflow-hidden py-0 sm:h-[44rem] sm:max-h-[44rem] xl:h-[var(--tool-sidebar-max-height)] xl:max-h-[var(--tool-sidebar-max-height)]", children: renderControlsPanel() })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { "data-slot": "tool-results", className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("section", { className: "space-y-4 xl:hidden", children: [
+        /* @__PURE__ */ jsx(Card, { className: "gap-4 px-5 py-5", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Configuration" }),
+            /* @__PURE__ */ jsx(Text, { size: 2, children: "Open the colour pairing drawer to change palette, background, and recommended combinations." }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: compactControlsSummary })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Button2,
+            {
+              color: "primary",
+              className: "w-full sm:w-auto",
+              onClick: () => setIsCompactControlsOpen(true),
+              children: [
+                /* @__PURE__ */ jsx(Icons.edit_square, { "data-slot": "icon", className: "size-5" }),
+                "Open configuration"
+              ]
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(Sheet, { open: isCompactControlsOpen, onOpenChange: setIsCompactControlsOpen, children: /* @__PURE__ */ jsxs(
+          SheetContent,
+          {
+            side: "left",
+            showClose: false,
+            className: "w-[30rem] max-w-[90vw] overflow-hidden p-0",
+            children: [
+              /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Colour pairing configuration" }),
+              /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col bg-background", children: renderControlsPanel(true) })
+            ]
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { ref: resultSectionRef, className: "space-y-6", "aria-label": "Current result", children: [
+        /* @__PURE__ */ jsx("div", { className: "sr-only", "aria-live": "polite", children: liveAnnouncement }),
+        /* @__PURE__ */ jsx(
+          CurrentResultCard,
+          {
+            bestPair: bestRecommendedPair,
+            familySummary,
+            pair: previewPair,
+            selectedBackground
+          }
+        )
+      ] }),
+      bestRecommendedPair ? /* @__PURE__ */ jsx("section", { className: "space-y-4", children: /* @__PURE__ */ jsx(
+        BestRecommendationCard,
+        {
+          copiedKey,
+          isCurrentSelection: selectedPair?.id === bestRecommendedPair.id,
+          pair: bestRecommendedPair,
+          reason: getBestRecommendationReason(bestRecommendedPair, context),
+          onCopyPairing: () => copyValue(
+            "best-pairing",
+            getPairingCopyText(bestRecommendedPair),
+            "Pairing copied",
+            {
+              name: "best_recommendation_copied",
+              ...buildAnalyticsContext({
+                foregroundToken: bestRecommendedPair.foreground.token,
+                pairId: bestRecommendedPair.id,
+                source: "best-recommendation"
+              })
+            }
+          ),
+          onUsePairing: () => handlePairChange(bestRecommendedPair.id, "best-recommendation")
+        }
+      ) }) : /* @__PURE__ */ jsxs(Card, { className: "px-6 py-6", children: [
+        /* @__PURE__ */ jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Best recommended pairing" }),
+        /* @__PURE__ */ jsx(Text, { size: 2, className: "mt-3", children: "No AAA-compliant foreground options available for this selection." })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Technical colour values" }),
+          /* @__PURE__ */ jsx(Text, { size: 2, children: "Token, tone, HEX, RGB, HSL, and OKLCH values for the current selection." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsx(
+            TechnicalDetailsPanel,
+            {
+              title: "Background values",
+              color: selectedBackground,
+              visibleFormats,
+              copiedKey,
+              onCopyValue: (copyKey, value, toastLabel) => copyValue(copyKey, value, toastLabel)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TechnicalDetailsPanel,
+            {
+              title: "Foreground values",
+              color: detailForeground,
+              visibleFormats,
+              copiedKey,
+              onCopyValue: (copyKey, value, toastLabel) => copyValue(copyKey, value, toastLabel)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 3, size: 6, className: "mb-3 text-foreground", trim: "normal", children: "Share colour pairing" }),
+          /* @__PURE__ */ jsxs("div", { className: "rounded-sm border border-grey-200 bg-white p-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Copy this URL to share your current colour pairing:" }),
+              /* @__PURE__ */ jsx(
+                Button2,
+                {
+                  variant: "ghost",
+                  color: "grey",
+                  size: "sm",
+                  className: "shrink-0",
+                  onClick: () => copyValue(
+                    "share-url",
+                    typeof window === "undefined" ? shareUrl : new URL(shareUrl, window.location.origin).toString(),
+                    "Colour pairing link copied"
+                  ),
+                  "aria-label": copiedKey === "share-url" ? "Colour pairing URL copied to clipboard" : "Copy colour pairing URL to clipboard",
+                  title: copiedKey === "share-url" ? "Copied" : "Copy URL",
+                  children: copiedKey === "share-url" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-5" }),
+                    "Copied"
+                  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+                    "Copy URL"
+                  ] })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("code", { className: "mt-3 block w-full rounded-sm border border-grey-200 bg-background px-3 py-2 font-mono text-[11px] break-all text-foreground sm:text-xs", children: shareUrl })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ColorPairingToolV3({
+  onAnalyticsEvent = () => {
+  },
+  visibleFormats = DEFAULT_VISIBLE_FORMATS3
+} = {}) {
+  const normalizedVisibleFormats = [...new Set(visibleFormats)];
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ColorPairingToolV3Loading, {}), children: /* @__PURE__ */ jsx(
+    ColorPairingToolV3Content,
+    {
+      onAnalyticsEvent,
+      visibleFormats: normalizedVisibleFormats
+    }
+  ) });
+}
 function ColorSwatches({ theme: theme2, format, viewMode }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -17216,23 +19821,23 @@ var ComboChart = React5__default.forwardRef((props, forwardedRef) => {
 });
 ComboChart.displayName = "ComboChart";
 function Dialog({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogClose({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+  return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "dialog-close", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    DialogPrimitive.Overlay,
+    SheetPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
       className: cn(
@@ -17252,7 +19857,7 @@ function DialogContent({
   return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
     /* @__PURE__ */ jsxs(
-      DialogPrimitive.Content,
+      SheetPrimitive.Content,
       {
         "data-slot": "dialog-content",
         className: cn(
@@ -17262,7 +19867,7 @@ function DialogContent({
         ...props,
         children: [
           children,
-          showClose && /* @__PURE__ */ jsx(DialogPrimitive.Close, { className: "absolute top-1 right-1", asChild: true, children: /* @__PURE__ */ jsxs(Button2, { variant: "ghost", size: "icon", children: [
+          showClose && /* @__PURE__ */ jsx(SheetPrimitive.Close, { className: "absolute top-1 right-1", asChild: true, children: /* @__PURE__ */ jsxs(Button2, { variant: "ghost", size: "icon", children: [
             /* @__PURE__ */ jsx(Icons.close, { className: "size-6", "aria-hidden": "true" }),
             /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
           ] }) })
@@ -17293,7 +19898,7 @@ function DialogFooter({ className, ...props }) {
 }
 function DialogTitle({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    DialogPrimitive.Title,
+    SheetPrimitive.Title,
     {
       "data-slot": "dialog-title",
       className: cn("text-lg leading-none font-semibold", className),
@@ -17306,7 +19911,7 @@ function DialogDescription({
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    DialogPrimitive.Description,
+    SheetPrimitive.Description,
     {
       "data-slot": "dialog-description",
       className: cn("text-sm text-muted-foreground", className),
@@ -18078,7 +20683,7 @@ function DescriptionList({ className, ...props }) {
     "dl",
     {
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         "grid grid-cols-1 text-base/6 sm:grid-cols-[min(50%,--spacing(80))_auto] sm:text-sm/6"
       )
@@ -18090,7 +20695,7 @@ function DescriptionTerm({ className, ...props }) {
     "dt",
     {
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         "col-start-1 border-t border-grey-950/5 pt-3 text-grey-600 first:border-none sm:border-t sm:border-grey-950/5 sm:py-3 dark:border-white/5 dark:text-grey-400 sm:dark:border-white/5"
       )
@@ -18102,7 +20707,7 @@ function DescriptionDetails({ className, ...props }) {
     "dd",
     {
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         "pt-1 pb-3 text-grey-950 sm:border-t sm:border-grey-950/5 sm:py-3 sm:nth-2:border-none dark:text-white dark:sm:border-white/5"
       )
@@ -18516,7 +21121,7 @@ function Fieldset2({
     Headless4.Fieldset,
     {
       ...props,
-      className: clsx12(className, "*:data-[slot=text]:mt-1 [&>*+[data-slot=control]]:mt-6")
+      className: clsx13(className, "*:data-[slot=text]:mt-1 [&>*+[data-slot=control]]:mt-6")
     }
   );
 }
@@ -18529,7 +21134,7 @@ function Legend6({
     {
       "data-slot": "legend",
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         "text-base/6 font-semibold text-zinc-950 data-disabled:opacity-50 sm:text-sm/6 dark:text-white"
       )
@@ -18537,7 +21142,7 @@ function Legend6({
   );
 }
 function FieldGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "control", ...props, className: clsx12(className, "space-y-8") });
+  return /* @__PURE__ */ jsx("div", { "data-slot": "control", ...props, className: clsx13(className, "space-y-8") });
 }
 function Field2({
   className,
@@ -18547,7 +21152,7 @@ function Field2({
     Headless4.Field,
     {
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         "[&>[data-slot=label]+[data-slot=control]]:mt-3",
         "[&>[data-slot=label]+[data-slot=description]]:mt-1",
@@ -18568,14 +21173,14 @@ function FieldLabel({
     {
       "data-slot": "label",
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         "text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6 dark:text-white"
       )
     }
   );
 }
-function Description4({
+function Description5({
   className,
   ...props
 }) {
@@ -18584,7 +21189,7 @@ function Description4({
     {
       "data-slot": "description",
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         "text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6 dark:text-zinc-400"
       )
@@ -18600,7 +21205,7 @@ function ErrorMessage({
     {
       "data-slot": "error",
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         "text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6 dark:text-red-500"
       )
@@ -18824,7 +21429,7 @@ var toggleVariants = cva(styles3.base, {
   variants: {
     variant: {
       ghost: "",
-      outline: clsx12(styles3.outline)
+      outline: clsx13(styles3.outline)
     },
     size: {
       default: "h-9 px-2 min-w-9",
@@ -18927,7 +21532,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.101.0"};
+  version: "1.103.0"};
 function Logo(props) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: "sr-only", children: "NSW Government" }),
@@ -19077,7 +21682,7 @@ function Header2({
       "data-slot": "header",
       "data-scrolled": isScrolled,
       id: "nsw-header",
-      className: clsx12(
+      className: clsx13(
         "sticky top-0 z-50 hidden bg-white px-4 py-5 transition duration-500 sm:px-6 lg:flex lg:flex-none lg:flex-wrap lg:items-center lg:justify-between lg:px-12",
         !hideShadow && "shadow-md shadow-slate-900/5 dark:shadow-none",
         isScrolled ? "dark:bg-slate-900/95 dark:backdrop-blur-sm dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75" : "dark:bg-transparent"
@@ -19993,7 +22598,7 @@ function Listbox2({
         autoFocus,
         "data-slot": "control",
         "aria-label": ariaLabel,
-        className: clsx12([
+        className: clsx13([
           className,
           // Basic layout
           "group relative block w-full",
@@ -20017,7 +22622,7 @@ function Listbox2({
               as: "span",
               options,
               placeholder: placeholder && /* @__PURE__ */ jsx("span", { className: "block truncate text-grey-500", children: placeholder }),
-              className: clsx12([
+              className: clsx13([
                 "cursor-pointer",
                 // Basic layout
                 "relative block w-full appearance-none rounded-sm py-[calc(--spacing(4.5)-1px)] sm:py-[calc(--spacing(3.5)-1px)]",
@@ -20047,7 +22652,7 @@ function Listbox2({
       {
         transition: true,
         anchor: "selection start",
-        className: clsx12(
+        className: clsx13(
           // Anchor positioning
           "[--anchor-offset:-1.625rem] [--anchor-padding:--spacing(4)] sm:[--anchor-offset:-1.375rem]",
           // Base styles
@@ -20073,7 +22678,7 @@ function ListboxOption2({
   className,
   ...props
 }) {
-  const sharedClasses = clsx12(
+  const sharedClasses = clsx13(
     // Base
     "flex min-w-0 items-center",
     // Icons
@@ -20085,12 +22690,12 @@ function ListboxOption2({
   );
   return /* @__PURE__ */ jsx(Headless4.ListboxOption, { as: Fragment$1, ...props, children: ({ selectedOption }) => {
     if (selectedOption) {
-      return /* @__PURE__ */ jsx("div", { className: clsx12(className, sharedClasses), children });
+      return /* @__PURE__ */ jsx("div", { className: clsx13(className, sharedClasses), children });
     }
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: clsx12(
+        className: clsx13(
           // Basic layout
           "group/option grid cursor-pointer grid-cols-[--spacing(5)_1fr] items-baseline gap-x-2 rounded-sm py-2.5 pr-3.5 pl-2 sm:grid-cols-[--spacing(4)_1fr] sm:py-1.5 sm:pr-3 sm:pl-1.5",
           // Typography
@@ -20121,7 +22726,7 @@ function ListboxOption2({
               )
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: clsx12(className, sharedClasses, "col-start-2"), children })
+          /* @__PURE__ */ jsx("span", { className: clsx13(className, sharedClasses, "col-start-2"), children })
         ]
       }
     );
@@ -20132,7 +22737,7 @@ function ListboxLabel({ className, ...props }) {
     "span",
     {
       ...props,
-      className: clsx12(className, "ml-2.5 truncate first:ml-0 sm:ml-2 sm:first:ml-0")
+      className: clsx13(className, "ml-2.5 truncate first:ml-0 sm:ml-2 sm:first:ml-0")
     }
   );
 }
@@ -20145,7 +22750,7 @@ function ListboxDescription({
     "span",
     {
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         "flex flex-1 overflow-hidden text-grey-500 group-data-focus/option:text-white before:w-2 before:min-w-0 before:shrink dark:text-grey-400"
       ),
@@ -20193,102 +22798,12 @@ function Spinner({ className, size = "md", ...props }) {
     }
   ) });
 }
-function Text({ className, trim = "normal", size = 2, label = false, ...props }) {
-  const textSizeClasses = {
-    1: "text-[length:var(--font-size-1)] leading-[var(--line-height-28)] tracking-[var(--letter-spacing-0)]",
-    2: "text-[length:var(--font-size-2)] leading-[var(--line-height-24)] tracking-[var(--letter-spacing-0)]",
-    3: "text-[length:var(--font-size-3)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]",
-    4: "text-[length:var(--font-size-4)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]"
-  };
-  const labelSizeClasses = {
-    1: "text-[length:var(--font-size-1)] leading-[var(--line-height-24)] tracking-[var(--letter-spacing-0)]",
-    2: "text-[length:var(--font-size-2)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]",
-    3: "text-[length:var(--font-size-3)] leading-[var(--line-height-16)] tracking-[var(--letter-spacing-0)]",
-    4: "text-[length:var(--font-size-4)] leading-[var(--line-height-16)] tracking-[var(--letter-spacing-0)]"
-  };
-  const sizeClass = label ? labelSizeClasses[size] : textSizeClasses[size];
-  const trimClasses = {
-    normal: ["before:content-none after:content-none"],
-    start: [
-      'before:content-[""] before:table after:content-none',
-      "before:mb-[calc(var(--leading-trim-start,var(--default-leading-trim-start))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
-    ],
-    end: [
-      'before:content-none after:content-[""] after:table',
-      "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
-    ],
-    both: [
-      'before:content-[""] before:table after:content-[""] after:table',
-      "before:mb-[calc(var(--leading-trim-start,var(--default-leading-trim-start))-var(--line-height,calc(1em*var(--default-line-height)))/2)]",
-      "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
-    ]
-  };
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      "data-slot": "text",
-      ...props,
-      className: clsx12(className, trimClasses[trim], "text-grey-800 dark:text-grey-400", sizeClass)
-    }
-  );
-}
-function TextLink({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Link,
-    {
-      ...props,
-      className: clsx12(
-        className,
-        "text-primary-800 underline decoration-primary-800/50 data-hover:decoration-primary-800 dark:text-white dark:decoration-white/50 dark:data-hover:decoration-white"
-      )
-    }
-  );
-}
-function Strong({ className, ...props }) {
-  return /* @__PURE__ */ jsx("strong", { ...props, className: clsx12(className, "font-medium text-grey-950 dark:text-white") });
-}
-function Code({ className, ...props }) {
-  const hasLanguageClass = typeof className === "string" && className.includes("language-");
-  return /* @__PURE__ */ jsx(
-    "code",
-    {
-      ...props,
-      className: clsx12(
-        className,
-        !hasLanguageClass && "language-plaintext",
-        "text-sm sm:text-[0.8125rem]"
-      )
-    }
-  );
-}
 function Loading() {
   return /* @__PURE__ */ jsxs("div", { className: "flex min-h-screen items-center justify-center gap-4 bg-grey-50 dark:bg-grey-900", children: [
     /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading...", size: "lg" }),
     /* @__PURE__ */ jsx(Text, { children: "Loading..." })
   ] });
 }
-function useSelectorHeight(selector = "header") {
-  const [height, setHeight] = useState(0);
-  const elementRef = useRef(null);
-  const resizeObserverRef = useRef(null);
-  useEffect(() => {
-    const element = document.querySelector(selector);
-    if (!element) return;
-    elementRef.current = element;
-    const resizeObserver = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      const target = entry?.target ?? elementRef.current;
-      if (!target) return;
-      setHeight(target.offsetHeight);
-    });
-    resizeObserverRef.current = resizeObserver;
-    resizeObserver.observe(element);
-    return () => {
-      resizeObserverRef.current?.disconnect();
-    };
-  }, [selector]);
-  return height;
-}
 function MainNavigation({ navigation }) {
   const headerHeight = useSelectorHeight();
   return /* @__PURE__ */ jsx(
@@ -20820,7 +23335,7 @@ function MultiLevelPushMenu({
                 {
                   href: item.href,
                   onClick: (e) => handleItemClick(item, e),
-                  className: clsx12(
+                  className: clsx13(
                     "relative flex w-full cursor-pointer items-center justify-between gap-x-6 border-l p-4 transition-colors hover:border-primary-800 hover:bg-primary-800/10",
                     pathname === item.href ? "border-primary-800 bg-primary-800/10 font-semibold text-primary-800" : "border-transparent text-grey-800",
                     isAnimating && "pointer-events-none"
@@ -20832,7 +23347,7 @@ function MultiLevelPushMenu({
                 {
                   onClick: (e) => handleItemClick(item, e),
                   disabled: isAnimating,
-                  className: clsx12(
+                  className: clsx13(
                     "relative flex w-full cursor-pointer items-center justify-between gap-x-6 border-l p-4 transition-colors hover:border-primary-800 hover:bg-primary-800/10",
                     pathname === item.href ? "border-primary-800 bg-primary-800/10 font-semibold text-primary-800" : "border-transparent text-grey-800",
                     isAnimating && "pointer-events-none"
@@ -20899,7 +23414,7 @@ function MobileHeader({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: clsx12(
+        className: clsx13(
           "relative flex w-full items-center py-4",
           menu && !search && "justify-start",
           search && "justify-between",
@@ -20915,7 +23430,7 @@ function MobileHeader({
             {
               href: "/",
               "aria-label": "Home page",
-              className: clsx12(
+              className: clsx13(
                 "flex items-center",
                 menu && !search && "justify-start",
                 search && !menu && "flex-row justify-between",
@@ -20926,7 +23441,7 @@ function MobileHeader({
                 /* @__PURE__ */ jsxs(
                   "div",
                   {
-                    className: clsx12(
+                    className: clsx13(
                       "flex flex-wrap items-center",
                       menu && !search && "justify-center text-left",
                       search && !menu && "justify-center text-left",
@@ -28937,7 +31452,7 @@ var featureBundle = {
 // node_modules/framer-motion/dist/es/render/components/motion/proxy.mjs
 var motion = /* @__PURE__ */ createMotionProxy(featureBundle, createDomVisualElement);
 function Navbar({ className, ...props }) {
-  return /* @__PURE__ */ jsx("nav", { ...props, className: clsx12(className, "flex flex-1 items-center gap-4 py-2.5") });
+  return /* @__PURE__ */ jsx("nav", { ...props, className: clsx13(className, "flex flex-1 items-center gap-4 py-2.5") });
 }
 function NavbarDivider({ className, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -28945,16 +31460,16 @@ function NavbarDivider({ className, ...props }) {
     {
       "aria-hidden": "true",
       ...props,
-      className: clsx12(className, "h-6 w-px bg-zinc-950/10 dark:bg-white/10")
+      className: clsx13(className, "h-6 w-px bg-zinc-950/10 dark:bg-white/10")
     }
   );
 }
 function NavbarSection({ className, ...props }) {
   const id3 = useId();
-  return /* @__PURE__ */ jsx(LayoutGroup, { id: id3, children: /* @__PURE__ */ jsx("div", { ...props, className: clsx12(className, "flex items-center gap-3") }) });
+  return /* @__PURE__ */ jsx(LayoutGroup, { id: id3, children: /* @__PURE__ */ jsx("div", { ...props, className: clsx13(className, "flex items-center gap-3") }) });
 }
 function NavbarSpacer({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", ...props, className: clsx12(className, "-ml-4 flex-1") });
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", ...props, className: clsx13(className, "-ml-4 flex-1") });
 }
 var NavbarItem = forwardRef(function NavbarItem2({
   current,
@@ -28962,7 +31477,7 @@ var NavbarItem = forwardRef(function NavbarItem2({
   children,
   ...props
 }, ref) {
-  const classes = clsx12(
+  const classes = clsx13(
     // Base
     "relative flex min-w-0 items-center gap-3 rounded-lg p-2 text-left text-base/6 font-medium text-zinc-950 sm:text-sm/5",
     // Leading icon/icon-only
@@ -28980,7 +31495,7 @@ var NavbarItem = forwardRef(function NavbarItem2({
     "dark:data-hover:bg-white/5 dark:data-hover:*:data-[slot=icon]:fill-white",
     "dark:data-active:bg-white/5 dark:data-active:*:data-[slot=icon]:fill-white"
   );
-  return /* @__PURE__ */ jsxs("span", { className: clsx12(className, "relative"), children: [
+  return /* @__PURE__ */ jsxs("span", { className: clsx13(className, "relative"), children: [
     current && /* @__PURE__ */ jsx(
       motion.span,
       {
@@ -29001,7 +31516,7 @@ var NavbarItem = forwardRef(function NavbarItem2({
       Headless4.Button,
       {
         ...props,
-        className: clsx12("cursor-default", classes),
+        className: clsx13("cursor-default", classes),
         "data-current": current ? "true" : void 0,
         ref,
         children: /* @__PURE__ */ jsx(TouchTarget, { children })
@@ -29010,14 +31525,14 @@ var NavbarItem = forwardRef(function NavbarItem2({
   ] });
 });
 function NavbarLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx("span", { ...props, className: clsx12(className, "truncate") });
+  return /* @__PURE__ */ jsx("span", { ...props, className: clsx13(className, "truncate") });
 }
 function Navigation({
   className,
   onLinkClick,
   navigation
 }) {
-  return /* @__PURE__ */ jsx("nav", { className: clsx12("text-base lg:text-sm", className), children: /* @__PURE__ */ jsx("ul", { role: "list", className: "flex flex-col gap-9", children: navigation.map((section, index) => /* @__PURE__ */ jsxs("li", { children: [
+  return /* @__PURE__ */ jsx("nav", { className: clsx13("text-base lg:text-sm", className), children: /* @__PURE__ */ jsx("ul", { role: "list", className: "flex flex-col gap-9", children: navigation.map((section, index) => /* @__PURE__ */ jsxs("li", { children: [
     section.links ? /* @__PURE__ */ jsx("h2", { className: "font-display font-medium text-grey-800 dark:text-white", children: section.title }) : /* @__PURE__ */ jsx("ul", { role: "list", className: "mt-2 flex flex-col gap-2 border-l lg:mt-4", children: /* @__PURE__ */ jsx("li", { className: "-ml-px flex flex-col items-start gap-2", children: /* @__PURE__ */ jsx(
       NavigationLink,
       {
@@ -29040,7 +31555,7 @@ function NavigationLink({
     {
       href,
       onClick,
-      className: clsx12(
+      className: clsx13(
         "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",
@@ -29513,7 +32028,7 @@ function Wrapper({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx12("max-w-8xl mx-auto space-y-8 px-4 py-6 sm:px-6 lg:px-12", className),
+      className: clsx13("max-w-8xl mx-auto space-y-8 px-4 py-6 sm:px-6 lg:px-12", className),
       ...props,
       children
     }
@@ -29527,7 +32042,7 @@ function PageHeading({
   return /* @__PURE__ */ jsx(
     "header",
     {
-      className: clsx12(
+      className: clsx13(
         "border-b border-grey-300 bg-white dark:border-grey-700 dark:bg-grey-900",
         className
       ),
@@ -29554,7 +32069,7 @@ function Pagination({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: clsx12(containerStyles[variant], className), ...props, children: /* @__PURE__ */ jsx(PaginationVariantContext.Provider, { value: variant, children }) });
+  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: clsx13(containerStyles[variant], className), ...props, children: /* @__PURE__ */ jsx(PaginationVariantContext.Provider, { value: variant, children }) });
 }
 function PaginationPrevious({ href = null, className, children = "Previous" }) {
   const variant = React5.useContext(PaginationVariantContext);
@@ -29577,7 +32092,7 @@ function PaginationPrevious({ href = null, className, children = "Previous" }) {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx("span", { className: clsx12(className, "grow basis-0"), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("span", { className: clsx13(className, "grow basis-0"), children: /* @__PURE__ */ jsxs(
     Button2,
     {
       ...href === null ? { disabled: true } : { href },
@@ -29611,7 +32126,7 @@ function PaginationNext({ href = null, className, children = "Next" }) {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx("span", { className: clsx12(className, "flex grow basis-0 justify-end"), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("span", { className: clsx13(className, "flex grow basis-0 justify-end"), children: /* @__PURE__ */ jsxs(
     Button2,
     {
       ...href === null ? { disabled: true } : { href },
@@ -29627,9 +32142,9 @@ function PaginationNext({ href = null, className, children = "Next" }) {
 function PaginationList({ className, ...props }) {
   const variant = React5.useContext(PaginationVariantContext);
   if (variant === "line") {
-    return /* @__PURE__ */ jsx("div", { className: clsx12(listStyles.line, className), ...props });
+    return /* @__PURE__ */ jsx("div", { className: clsx13(listStyles.line, className), ...props });
   }
-  return /* @__PURE__ */ jsx("span", { className: clsx12(listStyles.default, className), ...props });
+  return /* @__PURE__ */ jsx("span", { className: clsx13(listStyles.default, className), ...props });
 }
 function PaginationPage({
   href,
@@ -29661,7 +32176,7 @@ function PaginationPage({
       "aria-current": current ? "page" : void 0,
       variant: current ? "solid" : "ghost",
       color: current ? "accent" : "light",
-      className: clsx12(
+      className: clsx13(
         className,
         "leading-none before:absolute before:-inset-px before:rounded-sm",
         "min-h-8 min-w-8 sm:px-[calc(--spacing(4))] sm:py-[calc(--spacing(3))]",
@@ -29682,7 +32197,7 @@ function PaginationGap({
       "span",
       {
         "aria-hidden": "true",
-        className: clsx12(
+        className: clsx13(
           "inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-grey-800 select-none",
           className
         ),
@@ -29696,7 +32211,7 @@ function PaginationGap({
     {
       "aria-hidden": "true",
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         "w-9 text-center text-sm/6 font-semibold text-grey-950 select-none dark:text-white"
       ),
@@ -29716,7 +32231,7 @@ function PrevNextLinksPageLink({
       Link13,
       {
         href,
-        className: clsx12(
+        className: clsx13(
           "flex items-center gap-x-1 text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300",
           dir === "previous" && "flex-row-reverse"
         ),
@@ -29725,7 +32240,7 @@ function PrevNextLinksPageLink({
           /* @__PURE__ */ jsx(
             Icons.east,
             {
-              className: clsx12("size-5 flex-none fill-current", dir === "previous" && "-scale-x-100")
+              className: clsx13("size-5 flex-none fill-current", dir === "previous" && "-scale-x-100")
             }
           )
         ]
@@ -29999,7 +32514,7 @@ function Prose({
   return /* @__PURE__ */ jsx(
     Component2,
     {
-      className: clsx12(
+      className: clsx13(
         className,
         "prose max-w-none dark:!prose-invert",
         // headings
@@ -30053,110 +32568,6 @@ function ResizableHandle({
     }
   );
 }
-function Sheet({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "sheet", ...props });
-}
-function SheetTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
-}
-function SheetClose({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "sheet-close", ...props });
-}
-function SheetPortal({ ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
-}
-function SheetOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    DialogPrimitive.Overlay,
-    {
-      "data-slot": "sheet-overlay",
-      className: cn(
-        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function SheetContent({
-  className,
-  children,
-  side = "right",
-  showClose = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
-    /* @__PURE__ */ jsx(SheetOverlay, {}),
-    /* @__PURE__ */ jsxs(
-      DialogPrimitive.Content,
-      {
-        "data-slot": "sheet-content",
-        className: cn(
-          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=closed]:animate-out data-[state=open]:duration-500 data-[state=open]:animate-in",
-          side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-          side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-          side === "top" && "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-          side === "bottom" && "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          showClose && /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "sheet-close", className: "absolute top-4 right-4", asChild: true, children: /* @__PURE__ */ jsxs(Button2, { variant: "ghost", size: "icon", children: [
-            /* @__PURE__ */ jsx(Icons.close, { className: "size-6", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-          ] }) })
-        ]
-      }
-    )
-  ] });
-}
-function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "sheet-header",
-      className: cn("flex flex-col gap-1.5 p-4", className),
-      ...props
-    }
-  );
-}
-function SheetFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "sheet-footer",
-      className: cn("mt-auto flex flex-col gap-2 p-4", className),
-      ...props
-    }
-  );
-}
-function SheetTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    DialogPrimitive.Title,
-    {
-      "data-slot": "sheet-title",
-      className: cn("font-semibold text-foreground", className),
-      ...props
-    }
-  );
-}
-function SheetDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    DialogPrimitive.Description,
-    {
-      "data-slot": "sheet-description",
-      className: cn("text-sm text-muted-foreground", className),
-      ...props
-    }
-  );
-}
 function Skeleton({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -30771,7 +33182,7 @@ function SidebarNavigation({
   navigation
 }) {
   const pathname = usePathname();
-  return /* @__PURE__ */ jsx("nav", { className: clsx12("text-base lg:text-sm", className), children: /* @__PURE__ */ jsx("ul", { role: "list", className: "flex flex-col gap-9", children: navigation.map((section, sectionIndex) => /* @__PURE__ */ jsxs("li", { children: [
+  return /* @__PURE__ */ jsx("nav", { className: clsx13("text-base lg:text-sm", className), children: /* @__PURE__ */ jsx("ul", { role: "list", className: "flex flex-col gap-9", children: navigation.map((section, sectionIndex) => /* @__PURE__ */ jsxs("li", { children: [
     section.links ? /* @__PURE__ */ jsx("h2", { className: "font-display font-medium text-foreground dark:text-white", children: section.title }) : /* @__PURE__ */ jsx(
       "ul",
       {
@@ -30806,7 +33217,7 @@ function SidebarLink({ link, pathname, onLinkClick, depth }) {
   const hasChildren = Array.isArray(link.links) && link.links.length > 0;
   const isActive = pathname === link.href;
   const isActiveOrHasActiveDescendant = isLinkOrDescendantActive(link, pathname);
-  const baseLinkClasses = clsx12(
+  const baseLinkClasses = clsx13(
     "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",
@@ -30816,13 +33227,13 @@ function SidebarLink({ link, pathname, onLinkClick, depth }) {
     /* @__PURE__ */ jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
-        className: clsx12(baseLinkClasses, "group flex items-center justify-between gap-1"),
+        className: clsx13(baseLinkClasses, "group flex items-center justify-between gap-1"),
         children: [
           /* @__PURE__ */ jsx("span", { children: link.title }),
           /* @__PURE__ */ jsx(
             Icons.chevron_right,
             {
-              className: clsx12(
+              className: clsx13(
                 "ml-2 size-5 transition-transform duration-200",
                 "group-data-[state=open]:rotate-90"
               )
@@ -30831,7 +33242,7 @@ function SidebarLink({ link, pathname, onLinkClick, depth }) {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsx("ul", { className: clsx12("mt-2 ml-5 flex flex-col gap-1 border-l pl-0"), children: link.links && link.links.map((childLink) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsx("ul", { className: clsx13("mt-2 ml-5 flex flex-col gap-1 border-l pl-0"), children: link.links && link.links.map((childLink) => /* @__PURE__ */ jsx(
       SidebarLink,
       {
         link: childLink,
@@ -31160,7 +33571,7 @@ var StepIndicator = React5.forwardRef(
     return /* @__PURE__ */ jsx("ul", { role: "list", ref, className: cn("w-full", className), ...props, children: array.map((step, stepIdx) => /* @__PURE__ */ jsx(
       "li",
       {
-        className: clsx12(stepIdx !== array.length - 1 ? "pb-3" : "", "relative"),
+        className: clsx13(stepIdx !== array.length - 1 ? "pb-3" : "", "relative"),
         children: step.href === pathname && !(step.status === "completed" || step.status === "error" || step.status === "saved" || step.status === "cannot-start") ? /* @__PURE__ */ jsx(Fragment, { children: step.status === "in-progress" ? /* @__PURE__ */ jsxs(Fragment, { children: [
           stepIdx !== array.length - 1 ? /* @__PURE__ */ jsx(
             "div",
@@ -31406,7 +33817,7 @@ function StepNavigation({
     })),
     [navigation, formStatus, getStatus]
   );
-  return /* @__PURE__ */ jsx("nav", { className: clsx12("text-base lg:text-sm", className), children: /* @__PURE__ */ jsx("ul", { role: "list", className: "space-y-9", children: navigationWithStatus.map((section) => /* @__PURE__ */ jsxs("li", { children: [
+  return /* @__PURE__ */ jsx("nav", { className: clsx13("text-base lg:text-sm", className), children: /* @__PURE__ */ jsx("ul", { role: "list", className: "space-y-9", children: navigationWithStatus.map((section) => /* @__PURE__ */ jsxs("li", { children: [
     /* @__PURE__ */ jsx("h2", { className: "font-display font-medium text-slate-900 dark:text-white", children: section.title }),
     /* @__PURE__ */ jsx(StepIndicator, { className: "mt-2 lg:mt-4", array: section.links })
   ] }, section.title)) }) });
@@ -31434,7 +33845,7 @@ function SwitchGroup({ className, ...props }) {
     {
       "data-slot": "control",
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         // Basic groups
         "space-y-3 **:data-[slot=label]:font-normal",
@@ -31453,7 +33864,7 @@ function SwitchField({
     {
       "data-slot": "field",
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         // Base layout
         "grid grid-cols-[1fr_auto] gap-x-8 gap-y-1 sm:grid-cols-[1fr_auto]",
@@ -31517,7 +33928,7 @@ function Switch2({
     {
       "data-slot": "control",
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         // Base styles
         "group relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8",
@@ -31544,7 +33955,7 @@ function Switch2({
         "span",
         {
           "aria-hidden": "true",
-          className: clsx12(
+          className: clsx13(
             // Basic layout
             "pointer-events-none relative inline-block size-4.5 rounded-full sm:size-3.5",
             // Transition
@@ -31653,7 +34064,7 @@ function TableOfContents({ tableOfContents }) {
       "ol",
       {
         role: "list",
-        className: clsx12(
+        className: clsx13(
           "mt-3 flex flex-col gap-2",
           "border-l border-grey-900/10 dark:border-white/10",
           "text-sm/6 text-grey-700 dark:text-grey-400"
@@ -31664,7 +34075,7 @@ function TableOfContents({ tableOfContents }) {
             {
               href: `#${section.id}`,
               prefetch: false,
-              className: clsx12(
+              className: clsx13(
                 "-ml-px inline-block border-l pl-4",
                 "hover:border-primary-800 dark:hover:border-white",
                 isActive(section) ? "border-primary-800 font-semibold text-primary-800 dark:border-white dark:text-white" : "border-transparent"
@@ -31677,7 +34088,7 @@ function TableOfContents({ tableOfContents }) {
             {
               href: `#${subSection.id}`,
               prefetch: false,
-              className: clsx12(
+              className: clsx13(
                 "-ml-px inline-block border-l pl-8",
                 "hover:border-primary-800 dark:hover:border-white",
                 isActive(subSection) ? "border-primary-800 font-semibold text-primary-800 dark:border-white dark:text-white" : "border-transparent"
@@ -34884,13 +37295,24 @@ function getHeadings(slugify = slugifyWithCounter()) {
   });
   return result;
 }
-function usePageHeadings() {
+function areHeadingTreesEqual(left, right) {
+  return JSON.stringify(left) === JSON.stringify(right);
+}
+function usePageHeadings(enabled = true) {
   const [headings, setHeadings] = useState([]);
   const pathname = usePathname();
   const observerRef = useRef(null);
   const observedElRef = useRef(null);
   useEffect(() => {
-    const update = () => setHeadings(getHeadings());
+    if (!enabled) {
+      return;
+    }
+    const update = () => {
+      const nextHeadings = getHeadings();
+      setHeadings(
+        (currentHeadings) => areHeadingTreesEqual(currentHeadings, nextHeadings) ? currentHeadings : nextHeadings
+      );
+    };
     const attachToCurrentArticle = () => {
       const article = document.querySelector("article");
       if (!article || observedElRef.current === article) return;
@@ -34937,16 +37359,8 @@ function usePageHeadings() {
       observerRef.current = null;
       observedElRef.current = null;
     };
-  }, [pathname]);
-  return headings;
-}
-function useStickyOffset(extraPadding = 0) {
-  const headerHeight = useSelectorHeight("#nsw-header");
-  const navigationHeight = useSelectorHeight("#nsw-main-navigation");
-  return useMemo(() => {
-    const total = headerHeight + navigationHeight + extraPadding;
-    return total > 0 ? total : 0;
-  }, [extraPadding, headerHeight, navigationHeight]);
+  }, [enabled, pathname]);
+  return enabled ? headings : [];
 }
 function createFormStore(opts) {
   const { storageKey, initialFormData, initialFormStatus } = opts;
@@ -34993,6 +37407,6 @@ var languages = [
   "html"
 ];
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Action2 as Action, Actions, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, Artifact, ArtifactAction, ArtifactActions, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactTitle, AspectRatio, AuthLayout, AvailableChartColors, Avatar, AvatarFallback, AvatarImage, Badge, BadgeButton, BarChart, BarList, BaseColorSwatches, Branch, BranchMessages, BranchNext, BranchPage, BranchPrevious, BranchSelector, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, Button2 as Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CategoryBar, ChainOfThought, ChainOfThoughtContent, ChainOfThoughtHeader, ChainOfThoughtImage, ChainOfThoughtSearchResult, ChainOfThoughtSearchResults, ChainOfThoughtStep, ChartContainer, ChartLegend3 as ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip3 as ChartTooltip, ChartTooltipContent, Checkbox, CheckboxSmall, Code, CodeBlock, CodeBlockCopyButton, CodeDemo, CodeHighlight, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorCard, ColorPairingTool, ColorSwatches, ColourScale, ComboChart, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Context, ContextCacheUsage, ContextContent, ContextContentBody, ContextContentFooter, ContextContentHeader, ContextInputUsage, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ContextOutputUsage, ContextReasoningUsage, ContextTrigger, Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, DataTableToolbar, DataTableViewOptions, Description4 as Description, DescriptionDetails, DescriptionList, DescriptionTerm, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChart, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicFavicon, ErrorMessage, ExpandableSearch, ExpandableSearchField, Field2 as Field, FieldGroup, FieldLabel, Fieldset2 as Fieldset, Footer, FooterAcknowledgement, FooterLegalLinks, FooterSmallPrint, FooterSocialLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormatToggle, GenerateInterpolatedColors, Header2 as Header, Heading, HeroBannerSupportingImage, HoverCard, HoverCardContent, HoverCardTrigger, Icons, Image4 as Image, InlineCitation, InlineCitationCard, InlineCitationCardBody, InlineCitationCardTrigger, InlineCitationCarousel, InlineCitationCarouselContent, InlineCitationCarouselHeader, InlineCitationCarouselIndex, InlineCitationCarouselItem, InlineCitationSource, InlineCitationText, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label5 as Label, Legend6 as Legend, LineChart, Link, _List as List, Listbox2 as Listbox, ListboxDescription, ListboxLabel, ListboxOption2 as ListboxOption, Loader, Loading, Logo, MainNavigation, Masthead, MegaMenu, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageContent, MobileHeader, MobileSearch, MultiLevelPushMenu, NSWCard, NSWCardArrow, NSWCardDescription, NSWCardIcon, NSWCardImg, NSWCardTitle, Navbar, NavbarDivider, NavbarItem, NavbarLabel, NavbarSection, NavbarSpacer, Navigation, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotFound, OpenIn, OpenInChatGPT, OpenInClaude, OpenInContent, OpenInScira, OpenInT3, OpenInTrigger, OpenInv0, PageHeading, Pagination, PaginationGap, PaginationList, PaginationNext, PaginationPage, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PreWithCopy, PrevNextLinks, PrevNextLinksPageLink, Progress, ProgressBar, ProgressCircle, PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputSubmit, PromptInputTextarea, PromptInputToolbar, PromptInputTools, Prose, RadioGroup2 as RadioGroup, RadioGroupItem, Reasoning, ReasoningContent, ReasoningTrigger, ResizableHandle, ResizablePanel, ResizablePanelGroup, Response, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator4 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLink, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNavigation, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiteSearch, Skeleton, Slider, Social, Source, Sources, SourcesContent, SourcesTrigger, SparkAreaChart, SparkBarChart, SparkLineChart, Spinner, StepIndicator, StepNavigation, Strong, SubmitButton, Suggestion, Suggestions, Switch2 as Switch, SwitchField, SwitchGroup, TabNavigation, TabNavigationLink, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, Tabs2 as Tabs, TabsContent, TabsList, TabsTrigger, Task, TaskContent, TaskItem, TaskItemFile, TaskTrigger, Text, TextLink, Textarea, ThemeColorPalette, ThemeProvider, ThemeSelector, ThemeSwitcher, Toaster, TocContext, TocProvider, Toggle, ToggleGroup, ToggleGroupItem, Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, Tooltip5 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopLevel, TouchTarget, Tracker, Tooltip3 as TremorTooltip, ViewToggle, WebPreview, WebPreviewBody, WebPreviewNavigation, WebPreviewUrl, Wrapper, aboriginal, addStartStopToColorArray, allPalettes, badgeVariants, brand, buttonVariants, camelCase, chartColors, cn, colorDataArray, colorThemes, colors, constructCategoryColors, createColorArray, createColorData, createFormStore, darkenColor, diverging, domToSimple, focusInput, focusRing, generateColorThemes, generateDataVisColors, getColorClassName, getColorValue, getHeadings, getNodeText, getSurroundingColors, getYAxisDomain, hasErrorInput, hasOnlyOneValueForKey, humaniseVariant, interpolateColors, isLightColor, kebabCase, languages, lightenColor, navigationMenuTriggerStyle, oklchConverter, progressBarVariants, renderColorOutput, renderColorOutputToDTFM, semantic, sequential, shades, themeIndices, themeTokens, toggleVariants, truncate, useActiveSectionObserver, useDisableToc, useFormField, useIsMobile, useOnWindowResize, usePageHeadings, usePromptInputAttachments, useSelectorHeight, useSidebar, useStickyOffset, useToc };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Action2 as Action, Actions, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, Artifact, ArtifactAction, ArtifactActions, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactTitle, AspectRatio, AuthLayout, AvailableChartColors, Avatar, AvatarFallback, AvatarImage, Badge, BadgeButton, BarChart, BarList, BaseColorSwatches, Branch, BranchMessages, BranchNext, BranchPage, BranchPrevious, BranchSelector, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, Button2 as Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CategoryBar, ChainOfThought, ChainOfThoughtContent, ChainOfThoughtHeader, ChainOfThoughtImage, ChainOfThoughtSearchResult, ChainOfThoughtSearchResults, ChainOfThoughtStep, ChartContainer, ChartLegend3 as ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip3 as ChartTooltip, ChartTooltipContent, Checkbox, CheckboxSmall, Code, CodeBlock, CodeBlockCopyButton, CodeDemo, CodeHighlight, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorCard, ColorPairingTool, ColorPairingToolV2, ColorPairingToolV3, ColorSwatches, ColourScale, ComboChart, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Context, ContextCacheUsage, ContextContent, ContextContentBody, ContextContentFooter, ContextContentHeader, ContextInputUsage, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ContextOutputUsage, ContextReasoningUsage, ContextTrigger, Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, DataTableToolbar, DataTableViewOptions, Description5 as Description, DescriptionDetails, DescriptionList, DescriptionTerm, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChart, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicFavicon, ErrorMessage, ExpandableSearch, ExpandableSearchField, Field2 as Field, FieldGroup, FieldLabel, Fieldset2 as Fieldset, Footer, FooterAcknowledgement, FooterLegalLinks, FooterSmallPrint, FooterSocialLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormatToggle, GenerateInterpolatedColors, Header2 as Header, Heading, HeroBannerSupportingImage, HoverCard, HoverCardContent, HoverCardTrigger, Icons, Image4 as Image, InlineCitation, InlineCitationCard, InlineCitationCardBody, InlineCitationCardTrigger, InlineCitationCarousel, InlineCitationCarouselContent, InlineCitationCarouselHeader, InlineCitationCarouselIndex, InlineCitationCarouselItem, InlineCitationSource, InlineCitationText, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label5 as Label, Legend6 as Legend, LineChart, Link, _List as List, Listbox2 as Listbox, ListboxDescription, ListboxLabel, ListboxOption2 as ListboxOption, Loader, Loading, Logo, MainNavigation, Masthead, MegaMenu, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageContent, MobileHeader, MobileSearch, MultiLevelPushMenu, NSWCard, NSWCardArrow, NSWCardDescription, NSWCardIcon, NSWCardImg, NSWCardTitle, Navbar, NavbarDivider, NavbarItem, NavbarLabel, NavbarSection, NavbarSpacer, Navigation, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotFound, OpenIn, OpenInChatGPT, OpenInClaude, OpenInContent, OpenInScira, OpenInT3, OpenInTrigger, OpenInv0, PageHeading, Pagination, PaginationGap, PaginationList, PaginationNext, PaginationPage, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PreWithCopy, PrevNextLinks, PrevNextLinksPageLink, Progress, ProgressBar, ProgressCircle, PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputSubmit, PromptInputTextarea, PromptInputToolbar, PromptInputTools, Prose, RadioGroup2 as RadioGroup, RadioGroupItem, Reasoning, ReasoningContent, ReasoningTrigger, ResizableHandle, ResizablePanel, ResizablePanelGroup, Response, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator4 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLink, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNavigation, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiteSearch, Skeleton, Slider, Social, Source, Sources, SourcesContent, SourcesTrigger, SparkAreaChart, SparkBarChart, SparkLineChart, Spinner, StepIndicator, StepNavigation, Strong, SubmitButton, Suggestion, Suggestions, Switch2 as Switch, SwitchField, SwitchGroup, TabNavigation, TabNavigationLink, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, Tabs2 as Tabs, TabsContent, TabsList, TabsTrigger, Task, TaskContent, TaskItem, TaskItemFile, TaskTrigger, Text, TextLink, Textarea, ThemeColorPalette, ThemeProvider, ThemeSelector, ThemeSwitcher, Toaster, TocContext, TocProvider, Toggle, ToggleGroup, ToggleGroupItem, Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, Tooltip5 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopLevel, TouchTarget, Tracker, Tooltip3 as TremorTooltip, ViewToggle, WebPreview, WebPreviewBody, WebPreviewNavigation, WebPreviewUrl, Wrapper, aboriginal, addStartStopToColorArray, allPalettes, badgeVariants, brand, buttonVariants, camelCase, chartColors, cn, colorDataArray, colorThemes, colors, constructCategoryColors, createColorArray, createColorData, createFormStore, darkenColor, diverging, domToSimple, focusInput, focusRing, generateColorThemes, generateDataVisColors, getColorClassName, getColorValue, getHeadings, getNodeText, getSurroundingColors, getYAxisDomain, hasErrorInput, hasOnlyOneValueForKey, humaniseVariant, interpolateColors, isLightColor, kebabCase, languages, lightenColor, navigationMenuTriggerStyle, oklchConverter, progressBarVariants, renderColorOutput, renderColorOutputToDTFM, semantic, sequential, shades, themeIndices, themeTokens, toggleVariants, truncate, useActiveSectionObserver, useDisableToc, useFormField, useIsMobile, useOnWindowResize, usePageHeadings, usePromptInputAttachments, useSelectorHeight, useSidebar, useStickyOffset, useToc };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map