@nswds/app 1.103.0 → 1.104.0

package/dist/index.js

@@ -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';
@@ -16860,18 +16860,35 @@ function ColorPairingToolV2Content({ visibleFormats }) {
     initialState.selectedBackgroundToken
   );
   const [selectedPairId, setSelectedPairId] = useState(initialState.selectedPairId);
-  const themeFamilies = getPairingFamilies(themeCategory);
-  const context = getPairingContext(themeCategory, primaryFamilyKey, accentFamilyKey);
-  const selectableFamilies = themeFamilies.filter((family) => family.key !== context.grey.key);
-  const selectableAccentFamilies = selectableFamilies.filter(
-    (family) => family.key !== context.primary.key
-  );
-  const selectedBackground = context.backgrounds.find((background) => background.token === selectedBackgroundToken) ?? context.backgrounds[0] ?? null;
-  const selectedBackgroundPairs = selectedBackground ? context.pairsByBackground[selectedBackground.token] ?? [] : [];
-  const selectedPair = getPreferredPairForBackground2(selectedBackgroundPairs, 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 = [context.primary.label, context.accent.label, context.grey.label].join(
-    " + "
+  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);
@@ -17174,6 +17191,1723 @@ function ColorPairingToolV2({
   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",
@@ -18087,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(
@@ -18123,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(
@@ -18133,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" })
           ] }) })
@@ -18164,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),
@@ -18177,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),
@@ -19446,7 +21180,7 @@ function FieldLabel({
     }
   );
 }
-function Description4({
+function Description5({
   className,
   ...props
 }) {
@@ -19798,7 +21532,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.102.0"};
+  version: "1.103.0"};
 function Logo(props) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: "sr-only", children: "NSW Government" }),
@@ -21070,28 +22804,6 @@ function Loading() {
     /* @__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(
@@ -30856,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",
@@ -35687,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;
@@ -35740,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;
@@ -35796,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, ColorPairingToolV2, 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