@nswds/app 1.107.1 → 1.108.0

package/dist/index.js

@@ -37,7 +37,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { useCopyToClipboard } from '@uidotdev/usehooks';
-import { Toaster as Toaster$1, toast } from 'sonner';
+import { toast, Toaster as Toaster$1 } from 'sonner';
 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';
@@ -14918,6 +14918,1129 @@ function ColorCard({ name, token, hex: hex2, rgb: rgb2, hsl, oklch: oklch2, form
     ] })
   ] }) });
 }
+var APPROVED_TONES = [200, 400, 600, 800];
+var DEFAULT_VISIBLE_FORMATS = ["hex", "rgb", "hsl", "oklch"];
+var DEFAULT_PRIMARY_FAMILY_BY_THEME = {
+  brand: "blue",
+  aboriginal: "blue"
+};
+var DEFAULT_ACCENT_FAMILY_BY_THEME = {
+  brand: "red",
+  aboriginal: "red"
+};
+var DEFAULT_BACKGROUND_TONE = 800;
+function ColorPairingToolLoading() {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "aria-busy": "true",
+      "aria-label": "Loading colour pairing tool",
+      className: "overflow-hidden rounded-sm bg-white p-6",
+      children: /* @__PURE__ */ jsx("div", { className: "animate-pulse space-y-6", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-6 xl:grid-cols-[260px_minmax(0,1fr)] xl:gap-x-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-4 w-20 rounded bg-grey-200" }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: [1, 2, 3, 4].map((item) => /* @__PURE__ */ jsx("div", { className: "h-12 rounded bg-grey-200" }, item)) }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-3", children: [1, 2, 3].map((item) => /* @__PURE__ */ jsx("div", { className: "h-14 rounded bg-grey-200" }, item)) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-64 rounded bg-grey-200" }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: [1, 2, 3].map((item) => /* @__PURE__ */ jsx("div", { className: "h-8 w-28 rounded bg-grey-200" }, item)) }),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-3 overflow-hidden", children: [1, 2, 3].map((item) => /* @__PURE__ */ jsx("div", { className: "h-32 w-40 rounded bg-grey-200" }, item)) })
+        ] })
+      ] }) })
+    }
+  );
+}
+function extractTone(token) {
+  const match = token.match(/-(\d+)$/);
+  return match ? Number.parseInt(match[1], 10) : null;
+}
+function formatFamilyLabel(name, key) {
+  if (key === "grey") return "Grey";
+  return name.replace(/^NSW Aboriginal\s+/i, "").replace(/^NSW\s+/i, "").trim();
+}
+function buildPaletteFamilies(themeCategory) {
+  return Object.entries(colors[themeCategory]).flatMap(([familyKey, palette]) => {
+    const familyLabel = formatFamilyLabel(palette.name, familyKey);
+    const shades2 = APPROVED_TONES.flatMap((tone) => {
+      const color2 = palette.colors.find((entry) => extractTone(entry.token) === tone);
+      if (!color2) {
+        return [];
+      }
+      return [
+        {
+          familyKey,
+          familyLabel,
+          hex: color2.hex,
+          hsl: color2.hsl,
+          name: color2.name ?? `${familyLabel} ${tone}`,
+          oklch: color2.oklch,
+          rgb: color2.rgb,
+          token: color2.token,
+          tone
+        }
+      ];
+    });
+    if (shades2.length !== APPROVED_TONES.length) {
+      return [];
+    }
+    return [
+      {
+        key: familyKey,
+        label: familyLabel,
+        shades: shades2,
+        swatch: shades2.find((shade) => shade.tone === 600)?.hex ?? shades2[0]?.hex ?? "transparent"
+      }
+    ];
+  });
+}
+var paletteFamiliesByTheme = {
+  brand: buildPaletteFamilies("brand"),
+  aboriginal: buildPaletteFamilies("aboriginal")
+};
+function getPaletteFamilies(themeCategory) {
+  return paletteFamiliesByTheme[themeCategory];
+}
+function getSelectableFamilies(themeCategory) {
+  return getPaletteFamilies(themeCategory).filter((family) => family.key !== "grey");
+}
+function getDefaultPrimaryKey(themeCategory) {
+  const families = getSelectableFamilies(themeCategory);
+  const defaultPrimary = DEFAULT_PRIMARY_FAMILY_BY_THEME[themeCategory];
+  return families.find((family) => family.key === defaultPrimary)?.key ?? families[0]?.key ?? defaultPrimary;
+}
+function getFamilyByKey(themeCategory, key) {
+  const families = getPaletteFamilies(themeCategory);
+  return families.find((family) => family.key === key) ?? families[0];
+}
+function getDefaultAccentKey(themeCategory, primaryKey) {
+  const families = getSelectableFamilies(themeCategory);
+  const preferredAccent = families.find(
+    (family) => family.key !== primaryKey && family.key === DEFAULT_ACCENT_FAMILY_BY_THEME[themeCategory]
+  );
+  if (preferredAccent) {
+    return preferredAccent.key;
+  }
+  return families.find((family) => family.key !== primaryKey)?.key ?? DEFAULT_ACCENT_FAMILY_BY_THEME[themeCategory];
+}
+function getShadeForTone(family, tone) {
+  return family.shades.find((shade) => shade.tone === tone) ?? family.shades[0];
+}
+function getBackgroundRole(themeCategory, token, primaryKey, accentKey) {
+  if (!token) {
+    return "primary";
+  }
+  const primaryFamily = getFamilyByKey(themeCategory, primaryKey);
+  const accentFamily = getFamilyByKey(themeCategory, accentKey);
+  const greyFamily = getFamilyByKey(themeCategory, "grey");
+  if (greyFamily.shades.some((shade) => shade.token === token)) {
+    return "grey";
+  }
+  if (accentFamily.shades.some((shade) => shade.token === token)) {
+    return "accent";
+  }
+  if (primaryFamily.shades.some((shade) => shade.token === token)) {
+    return "primary";
+  }
+  return "primary";
+}
+function resolveBackgroundToken(themeCategory, primaryKey, accentKey, preferredToken, previousPrimaryKey = primaryKey, previousAccentKey = accentKey) {
+  const primaryFamily = getFamilyByKey(themeCategory, primaryKey);
+  const accentFamily = getFamilyByKey(themeCategory, accentKey);
+  const greyFamily = getFamilyByKey(themeCategory, "grey");
+  const backgroundOptions = [...primaryFamily.shades, ...accentFamily.shades, ...greyFamily.shades];
+  if (preferredToken && backgroundOptions.some((shade) => shade.token === preferredToken)) {
+    return preferredToken;
+  }
+  const preferredTone = extractTone(preferredToken ?? "");
+  if (preferredTone !== null && APPROVED_TONES.includes(preferredTone)) {
+    const backgroundRole = getBackgroundRole(
+      themeCategory,
+      preferredToken,
+      previousPrimaryKey,
+      previousAccentKey
+    );
+    if (backgroundRole === "grey") {
+      return getShadeForTone(greyFamily, preferredTone).token;
+    }
+    if (backgroundRole === "accent") {
+      return getShadeForTone(accentFamily, preferredTone).token;
+    }
+    return getShadeForTone(primaryFamily, preferredTone).token;
+  }
+  return getShadeForTone(primaryFamily, DEFAULT_BACKGROUND_TONE).token;
+}
+function getContrastRatio(backgroundHex, foregroundHex) {
+  return culori.wcagContrast(backgroundHex, foregroundHex) ?? 0;
+}
+function getContrastLevel(contrastRatio) {
+  if (contrastRatio >= 7) return "AAA";
+  if (contrastRatio >= 4.5) return "AAA large";
+  return "Fail";
+}
+function getContrastTone(contrastRatio) {
+  if (contrastRatio >= 7) return "success";
+  if (contrastRatio >= 4.5) return "warning";
+  return "danger";
+}
+function getPreviewHeroRatingLabel(contrastRatio) {
+  if (contrastRatio >= 7) return "AAA";
+  if (contrastRatio >= 4.5) return "AAA large";
+  return "Fail";
+}
+function getPreviewHeroStatusLabel(contrastRatio) {
+  if (contrastRatio >= 7) return "Pass";
+  if (contrastRatio >= 4.5) return "Large text only";
+  return "Fail";
+}
+function getCompliancePills(contrastRatio) {
+  const aaaNormalPass = contrastRatio >= 7;
+  const aaaLargePass = contrastRatio >= 4.5;
+  return [
+    {
+      label: aaaNormalPass ? "AAA normal" : "AAA normal fail",
+      tone: aaaNormalPass ? "success" : "danger"
+    },
+    {
+      label: aaaLargePass ? "AAA large" : "AAA large fail",
+      tone: aaaLargePass ? "success" : "danger"
+    }
+  ];
+}
+function getShadeReadability(shade) {
+  return Math.max(getContrastRatio(shade.hex, "#ffffff"), getContrastRatio(shade.hex, "#000000"));
+}
+function buildForegroundCandidates(themeCategory, primaryFamily, accentFamily) {
+  const seen = /* @__PURE__ */ new Set();
+  const candidates = [];
+  const pushCandidate = (candidate) => {
+    if (seen.has(candidate.hex)) {
+      return;
+    }
+    seen.add(candidate.hex);
+    candidates.push(candidate);
+  };
+  for (const shade of primaryFamily.shades) {
+    pushCandidate({
+      familyKey: primaryFamily.key,
+      familyLabel: primaryFamily.label,
+      hex: shade.hex,
+      hsl: shade.hsl,
+      id: shade.token,
+      name: shade.name,
+      oklch: shade.oklch,
+      rgb: shade.rgb,
+      token: shade.token,
+      tone: shade.tone
+    });
+  }
+  for (const shade of accentFamily.shades) {
+    pushCandidate({
+      familyKey: accentFamily.key,
+      familyLabel: accentFamily.label,
+      hex: shade.hex,
+      hsl: shade.hsl,
+      id: shade.token,
+      name: shade.name,
+      oklch: shade.oklch,
+      rgb: shade.rgb,
+      token: shade.token,
+      tone: shade.tone
+    });
+  }
+  for (const shade of getFamilyByKey(themeCategory, "grey").shades) {
+    pushCandidate({
+      familyKey: "grey",
+      familyLabel: "Grey",
+      hex: shade.hex,
+      hsl: shade.hsl,
+      id: shade.token,
+      name: shade.name,
+      oklch: shade.oklch,
+      rgb: shade.rgb,
+      token: shade.token,
+      tone: shade.tone
+    });
+  }
+  pushCandidate({
+    familyKey: "white",
+    familyLabel: "White",
+    hex: "#ffffff",
+    hsl: "hsl(0, 0%, 100%)",
+    id: "white",
+    name: "White",
+    oklch: "oklch(1 0 0)",
+    rgb: "rgb(255, 255, 255)",
+    token: "white",
+    tone: 0
+  });
+  return candidates;
+}
+function scoreForegroundCandidates(themeCategory, background, primaryFamily, accentFamily) {
+  return buildForegroundCandidates(themeCategory, primaryFamily, accentFamily).filter((candidate) => candidate.hex !== background.hex).map((candidate) => ({
+    ...candidate,
+    contrastRatio: getContrastRatio(background.hex, candidate.hex)
+  }));
+}
+function getRecommendedCandidate(themeCategory, background, primaryFamily, accentFamily) {
+  const scored = scoreForegroundCandidates(themeCategory, background, primaryFamily, accentFamily);
+  const aaaCandidates = scored.filter((candidate) => candidate.contrastRatio >= 7).sort((left, right) => {
+    const leftScore = left.contrastRatio + (left.familyKey === primaryFamily.key ? 2 : 0);
+    const rightScore = right.contrastRatio + (right.familyKey === primaryFamily.key ? 2 : 0);
+    return rightScore - leftScore;
+  });
+  if (aaaCandidates[0]) {
+    return aaaCandidates[0];
+  }
+  return null;
+}
+function getAccessibleForegroundOptions(themeCategory, background, primaryFamily, accentFamily) {
+  return scoreForegroundCandidates(themeCategory, background, primaryFamily, accentFamily).filter((candidate) => candidate.contrastRatio >= 4.5).sort((left, right) => right.contrastRatio - left.contrastRatio);
+}
+function getPreviewAnnouncement(background, foreground) {
+  if (!foreground) {
+    return `${background.token} selected. No accessible foreground options meeting 4.5 to 1 are available.`;
+  }
+  return `${background.token} paired with ${foreground.token}. Contrast ratio ${foreground.contrastRatio.toFixed(2)} to 1.`;
+}
+function getWhiteFallbackForeground(background) {
+  return {
+    familyKey: "white",
+    familyLabel: "White",
+    hex: "#ffffff",
+    hsl: "hsl(0, 0%, 100%)",
+    id: "white",
+    name: "White",
+    oklch: "oklch(1 0 0)",
+    rgb: "rgb(255, 255, 255)",
+    token: "white",
+    tone: 0,
+    contrastRatio: getContrastRatio(background.hex, "#ffffff")
+  };
+}
+function getColorFormatLabel(format) {
+  return format === "oklch" ? "OKLCH" : format.toUpperCase();
+}
+function parseSharedPairParam(value) {
+  if (!value) {
+    return { backgroundToken: null, foregroundId: null };
+  }
+  const separatorIndex = value.indexOf(":");
+  if (separatorIndex === -1) {
+    return { backgroundToken: null, foregroundId: value };
+  }
+  return {
+    backgroundToken: value.slice(0, separatorIndex),
+    foregroundId: value.slice(separatorIndex + 1)
+  };
+}
+function getInitialPairingState(searchParams) {
+  const paletteParam = searchParams.get("palette");
+  const primaryParam = searchParams.get("primary");
+  const accentParam = searchParams.get("accent");
+  const backgroundParam = searchParams.get("background");
+  const foregroundParam = searchParams.get("foreground");
+  const pairParam = parseSharedPairParam(searchParams.get("pair"));
+  const themeCategory = paletteParam === "brand" || paletteParam === "aboriginal" ? paletteParam : "brand";
+  const selectableFamilies = getSelectableFamilies(themeCategory);
+  const primaryKey = selectableFamilies.some((family) => family.key === primaryParam) ? primaryParam : getDefaultPrimaryKey(themeCategory);
+  const accentKey = accentParam && accentParam !== primaryKey && selectableFamilies.some((family) => family.key === accentParam) ? accentParam : getDefaultAccentKey(themeCategory, primaryKey);
+  const selectedBackgroundToken = resolveBackgroundToken(
+    themeCategory,
+    primaryKey,
+    accentKey,
+    backgroundParam ?? pairParam.backgroundToken
+  );
+  const primaryFamily = getFamilyByKey(themeCategory, primaryKey);
+  const accentFamily = getFamilyByKey(themeCategory, accentKey);
+  const greyFamily = getFamilyByKey(themeCategory, "grey");
+  const backgroundShade = [...primaryFamily.shades, ...accentFamily.shades, ...greyFamily.shades].find(
+    (shade) => shade.token === selectedBackgroundToken
+  ) ?? getShadeForTone(primaryFamily, DEFAULT_BACKGROUND_TONE);
+  const selectedForegroundId = getAccessibleForegroundOptions(
+    themeCategory,
+    backgroundShade,
+    primaryFamily,
+    accentFamily
+  ).find((candidate) => candidate.id === (foregroundParam ?? pairParam.foregroundId))?.id ?? null;
+  return {
+    accentKey,
+    primaryKey,
+    selectedBackgroundToken,
+    selectedForegroundId,
+    themeCategory
+  };
+}
+function SectionLabel({ children }) {
+  return /* @__PURE__ */ jsx("p", { className: "text-[0.8rem] font-semibold tracking-[0.10em] text-grey-800 uppercase", children });
+}
+function HeaderPaletteButton({
+  children,
+  disabled = false,
+  isSelected = false,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": isSelected,
+      disabled,
+      onClick,
+      className: cn(
+        "rounded-md border border-transparent px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600",
+        isSelected && "border-grey-400 bg-grey-200 text-grey-800",
+        !isSelected && !disabled && "text-grey-600 hover:text-grey-800",
+        disabled && "cursor-not-allowed text-grey-600/50"
+      ),
+      children
+    }
+  );
+}
+function FamilyButton({
+  family,
+  isSelected,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": isSelected,
+      onClick,
+      className: cn(
+        "flex flex-col items-center gap-1 rounded-sm border px-1 py-2 transition-all focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600",
+        isSelected ? "border-grey-400 bg-grey-200" : "border-transparent bg-transparent hover:border-grey-400 hover:bg-white"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "size-[1.35rem] rounded-full transition-transform",
+              isSelected && "scale-110"
+            ),
+            style: { backgroundColor: family.swatch }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "text-xs leading-none font-medium text-grey-600",
+              isSelected && "text-grey-800"
+            ),
+            children: family.label
+          }
+        )
+      ]
+    }
+  );
+}
+function ShadeButton({
+  contrastRatio,
+  isSelected,
+  shade,
+  onClick
+}) {
+  const contrastTone = getContrastTone(contrastRatio);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": isSelected,
+      onClick,
+      className: cn(
+        "flex w-full items-center gap-3 rounded-[0.4rem] border px-3 py-2.5 text-left transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600",
+        isSelected ? "border-primary-600 bg-[#f3f8ff]" : "border-grey-400 bg-white hover:border-primary-600 hover:bg-[#f6f6f6]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "size-[1.9rem] shrink-0 rounded-sm border border-black/10 transition-transform",
+              isSelected && "scale-105"
+            ),
+            style: { backgroundColor: shade.hex }
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium text-grey-800", children: shade.name }),
+          /* @__PURE__ */ jsx("span", { className: "block truncate text-[0.62rem] tracking-normal text-grey-600 normal-case", children: shade.token })
+        ] }),
+        /* @__PURE__ */ jsx(
+          CompliancePill,
+          {
+            className: "shrink-0 font-mono text-[0.62rem] tracking-normal normal-case",
+            label: `${contrastRatio.toFixed(2)}:1`,
+            tone: contrastTone
+          }
+        )
+      ]
+    }
+  );
+}
+function CompliancePill({
+  className,
+  label,
+  tone
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "rounded-sm border px-2 py-1 text-[0.58rem] font-semibold tracking-[0.08em] uppercase",
+        tone === "success" && "border-success-600/25 bg-success-600/10 text-success-800",
+        tone === "warning" && "border-warning-600/25 bg-warning-600/10 text-warning-800",
+        tone === "danger" && "border-danger-600/25 bg-danger-600/10 text-danger-800",
+        className
+      ),
+      children: label
+    }
+  );
+}
+function getForegroundOptionBadge(candidate) {
+  if (candidate.contrastRatio >= 7) {
+    return { label: "AAA", tone: "success" };
+  }
+  return { label: "AAA large", tone: "warning" };
+}
+function TokenRow({ color: color2, token, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex max-w-[15rem] items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "size-4 shrink-0 rounded-[0.25rem] border border-black/10",
+        style: { backgroundColor: color2 }
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[0.66rem] font-medium text-grey-800", children: token }),
+    /* @__PURE__ */ jsx("span", { className: "flex-1 overflow-x-auto text-[0.6rem] tracking-[0.08em] whitespace-nowrap text-grey-600 [scrollbar-width:thin]", children: value })
+  ] });
+}
+function ForegroundOption({
+  backgroundHex,
+  candidate,
+  isSelected,
+  onClick
+}) {
+  const badge = getForegroundOptionBadge(candidate);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": isSelected,
+      onClick,
+      className: cn(
+        "w-[10rem] shrink-0 rounded-[0.4rem] border p-3 text-left transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600",
+        isSelected ? "border-primary-600 bg-[#f3f8ff]" : "border-grey-400 bg-white hover:border-primary-600 hover:bg-[#f6f6f6]"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "overflow-hidden rounded-sm border border-black/10",
+            style: {
+              boxShadow: `0 0 0 1px ${candidate.hex === "#ffffff" ? "rgba(255,255,255,0.08)" : "transparent"}`
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "h-9 w-full", style: { backgroundColor: backgroundHex } }),
+              /* @__PURE__ */ jsx("div", { className: "h-3 w-full", style: { backgroundColor: candidate.hex } })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm font-semibold text-grey-800", children: candidate.name }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 font-mono text-[0.72rem] break-all text-grey-600", children: candidate.token }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("span", { className: "font-mono text-[0.72rem] text-grey-800", children: [
+            candidate.contrastRatio.toFixed(2),
+            ":1"
+          ] }),
+          /* @__PURE__ */ jsx(CompliancePill, { label: badge.label, tone: badge.tone })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "sr-only", children: [
+          "Background ",
+          backgroundHex,
+          ", foreground ",
+          candidate.token,
+          ", contrast",
+          " ",
+          candidate.contrastRatio.toFixed(2),
+          " to 1"
+        ] })
+      ]
+    }
+  );
+}
+function ColorPairingToolContent({ visibleFormats }) {
+  const searchParams = useSearchParams();
+  const [initialState] = useState(() => getInitialPairingState(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 [selectedForegroundId, setSelectedForegroundId] = useState(
+    initialState.selectedForegroundId
+  );
+  const [copyFormat, setCopyFormat] = useState(
+    visibleFormats[0] ?? DEFAULT_VISIBLE_FORMATS[0]
+  );
+  const [copiedKey, setCopiedKey] = useState(null);
+  const [, copyToClipboardRaw] = useCopyToClipboard();
+  const copiedKeyTimeoutRef = useRef(null);
+  const selectableFamilies = useMemo(() => getSelectableFamilies(themeCategory), [themeCategory]);
+  const primaryFamily = useMemo(
+    () => getFamilyByKey(themeCategory, primaryFamilyKey),
+    [themeCategory, primaryFamilyKey]
+  );
+  const greyFamily = useMemo(() => getFamilyByKey(themeCategory, "grey"), [themeCategory]);
+  const accentFamily = useMemo(
+    () => getFamilyByKey(themeCategory, accentFamilyKey),
+    [themeCategory, accentFamilyKey]
+  );
+  const backgroundShadeOptions = useMemo(
+    () => [...primaryFamily.shades, ...accentFamily.shades, ...greyFamily.shades],
+    [accentFamily.shades, greyFamily.shades, primaryFamily.shades]
+  );
+  const backgroundShade = useMemo(
+    () => backgroundShadeOptions.find((shade) => shade.token === selectedBackgroundToken) ?? backgroundShadeOptions[0],
+    [backgroundShadeOptions, selectedBackgroundToken]
+  );
+  const accessibleForegroundOptions = useMemo(
+    () => getAccessibleForegroundOptions(themeCategory, backgroundShade, primaryFamily, accentFamily),
+    [accentFamily, backgroundShade, primaryFamily, themeCategory]
+  );
+  const recommendedForeground = useMemo(
+    () => getRecommendedCandidate(themeCategory, backgroundShade, primaryFamily, accentFamily),
+    [accentFamily, backgroundShade, primaryFamily, themeCategory]
+  );
+  const selectedForeground = useMemo(
+    () => accessibleForegroundOptions.find((candidate) => candidate.id === selectedForegroundId) ?? recommendedForeground ?? accessibleForegroundOptions[0] ?? null,
+    [accessibleForegroundOptions, recommendedForeground, selectedForegroundId]
+  );
+  const previewForeground = useMemo(
+    () => selectedForeground ?? getWhiteFallbackForeground(backgroundShade),
+    [backgroundShade, selectedForeground]
+  );
+  const fauxButtonStyle = {
+    "--btn-bg": previewForeground.hex,
+    "--btn-border": previewForeground.hex,
+    "--btn-text": backgroundShade.hex,
+    "--btn-icon": backgroundShade.hex,
+    "--btn-hover-overlay": backgroundShade.hex
+  };
+  const optionCount = useMemo(
+    () => accessibleForegroundOptions.length,
+    [accessibleForegroundOptions]
+  );
+  const familySummary = useMemo(
+    () => [primaryFamily.label, accentFamily.label, greyFamily.label].join(" + ").toLocaleUpperCase("en-AU"),
+    [accentFamily.label, greyFamily.label, primaryFamily.label]
+  );
+  useEffect(() => {
+    return () => {
+      if (copiedKeyTimeoutRef.current) {
+        clearTimeout(copiedKeyTimeoutRef.current);
+      }
+    };
+  }, []);
+  const previewAnnouncement = useMemo(
+    () => selectedForeground ? getPreviewAnnouncement(backgroundShade, selectedForeground) : accessibleForegroundOptions.length > 0 ? `${backgroundShade.token} selected. No AAA normal foreground options are available. White preview contrast ${previewForeground.contrastRatio.toFixed(2)} to 1.` : `${backgroundShade.token} selected. No AAA foreground options are available. White preview contrast ${previewForeground.contrastRatio.toFixed(2)} to 1.`,
+    [
+      accessibleForegroundOptions.length,
+      backgroundShade,
+      previewForeground.contrastRatio,
+      selectedForeground
+    ]
+  );
+  const updateUrlParams = (nextThemeCategory, nextPrimaryKey, nextAccentKey, nextSelectedBackgroundToken, nextSelectedForegroundId) => {
+    const params = new URLSearchParams(window.location.search);
+    params.delete("family");
+    params.delete("pair");
+    params.set("palette", nextThemeCategory);
+    params.set("primary", nextPrimaryKey);
+    params.set("accent", nextAccentKey);
+    params.set("background", nextSelectedBackgroundToken);
+    if (nextSelectedForegroundId) {
+      params.set("foreground", nextSelectedForegroundId);
+    } else {
+      params.delete("foreground");
+    }
+    window.history.replaceState(
+      null,
+      "",
+      `${window.location.pathname}?${params.toString()}${window.location.hash}`
+    );
+  };
+  const handlePrimaryFamilyChange = (nextPrimaryKey) => {
+    const nextAccentKey = accentFamilyKey === nextPrimaryKey ? getDefaultAccentKey(themeCategory, nextPrimaryKey) : accentFamilyKey;
+    const nextBackgroundToken = resolveBackgroundToken(
+      themeCategory,
+      nextPrimaryKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      primaryFamilyKey,
+      accentFamilyKey
+    );
+    setPrimaryFamilyKey(nextPrimaryKey);
+    setAccentFamilyKey(nextAccentKey);
+    setSelectedBackgroundToken(nextBackgroundToken);
+    setSelectedForegroundId(null);
+    updateUrlParams(themeCategory, nextPrimaryKey, nextAccentKey, nextBackgroundToken, null);
+  };
+  const handleThemeCategoryChange = (nextThemeCategory) => {
+    const nextFamilies = getSelectableFamilies(nextThemeCategory);
+    const nextPrimaryKey = nextFamilies.some((family) => family.key === primaryFamilyKey) ? primaryFamilyKey : getDefaultPrimaryKey(nextThemeCategory);
+    const canKeepAccent = accentFamilyKey !== nextPrimaryKey && nextFamilies.some((family) => family.key === accentFamilyKey);
+    const nextAccentKey = canKeepAccent ? accentFamilyKey : getDefaultAccentKey(nextThemeCategory, nextPrimaryKey);
+    const resolvedAccentKey = nextAccentKey === nextPrimaryKey ? getDefaultAccentKey(nextThemeCategory, nextPrimaryKey) : nextAccentKey;
+    const nextBackgroundToken = resolveBackgroundToken(
+      nextThemeCategory,
+      nextPrimaryKey,
+      resolvedAccentKey,
+      selectedBackgroundToken,
+      primaryFamilyKey,
+      accentFamilyKey
+    );
+    setThemeCategory(nextThemeCategory);
+    setPrimaryFamilyKey(nextPrimaryKey);
+    setAccentFamilyKey(resolvedAccentKey);
+    setSelectedBackgroundToken(nextBackgroundToken);
+    setSelectedForegroundId(null);
+    updateUrlParams(nextThemeCategory, nextPrimaryKey, resolvedAccentKey, nextBackgroundToken, null);
+  };
+  const handleAccentFamilyChange = (nextAccentKey) => {
+    const nextBackgroundToken = resolveBackgroundToken(
+      themeCategory,
+      primaryFamilyKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      primaryFamilyKey,
+      accentFamilyKey
+    );
+    setSelectedBackgroundToken(nextBackgroundToken);
+    setAccentFamilyKey(nextAccentKey);
+    setSelectedForegroundId(null);
+    updateUrlParams(themeCategory, primaryFamilyKey, nextAccentKey, nextBackgroundToken, null);
+  };
+  const handleBackgroundChange = (nextBackgroundToken) => {
+    setSelectedBackgroundToken(nextBackgroundToken);
+    setSelectedForegroundId(null);
+    updateUrlParams(themeCategory, primaryFamilyKey, accentFamilyKey, nextBackgroundToken, null);
+  };
+  const handleForegroundChange = (nextForegroundId) => {
+    setSelectedForegroundId(nextForegroundId);
+    updateUrlParams(
+      themeCategory,
+      primaryFamilyKey,
+      accentFamilyKey,
+      backgroundShade.token,
+      nextForegroundId
+    );
+  };
+  const handleCopyPairing = () => {
+    copyToClipboardRaw(
+      [
+        `format: ${getColorFormatLabel(resolvedCopyFormat)}`,
+        `foreground: ${previewForeground.token} (${getColorValue(previewForeground, resolvedCopyFormat)})`,
+        `background: ${backgroundShade.token} (${getColorValue(backgroundShade, resolvedCopyFormat)})`,
+        `contrast: ${previewForeground.contrastRatio.toFixed(2)}:1 ${getContrastLevel(previewForeground.contrastRatio)}`
+      ].join("\n")
+    );
+    setCopiedKey("pairing");
+    toast("Colour pairing copied to clipboard", { duration: 2e3 });
+    if (copiedKeyTimeoutRef.current) {
+      clearTimeout(copiedKeyTimeoutRef.current);
+    }
+    copiedKeyTimeoutRef.current = setTimeout(() => {
+      setCopiedKey(null);
+      copiedKeyTimeoutRef.current = null;
+    }, 2e3);
+  };
+  const handleCopyUrl = () => {
+    copyToClipboardRaw(window.location.href);
+    setCopiedKey("share-url");
+    toast("URL copied to clipboard", { duration: 2e3 });
+    if (copiedKeyTimeoutRef.current) {
+      clearTimeout(copiedKeyTimeoutRef.current);
+    }
+    copiedKeyTimeoutRef.current = setTimeout(() => {
+      setCopiedKey(null);
+      copiedKeyTimeoutRef.current = null;
+    }, 2e3);
+  };
+  const selectableAccentFamilies = selectableFamilies.filter(
+    (family) => family.key !== primaryFamily.key
+  );
+  const contrastRatio = previewForeground.contrastRatio;
+  const previewHeroRatingLabel = getPreviewHeroRatingLabel(contrastRatio);
+  const previewHeroStatusLabel = getPreviewHeroStatusLabel(contrastRatio);
+  const contrastTone = getContrastTone(contrastRatio);
+  const resolvedCopyFormat = visibleFormats.includes(copyFormat) ? copyFormat : visibleFormats[0] ?? DEFAULT_VISIBLE_FORMATS[0];
+  return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-sm bg-white text-grey-800", children: /* @__PURE__ */ jsxs("div", { className: "grid min-h-[46rem] xl:grid-cols-[260px_minmax(0,1fr)] xl:gap-x-6", children: [
+    /* @__PURE__ */ jsx("aside", { className: "border-b border-grey-200 py-5 xl:border-b-0", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(SectionLabel, { children: "Palette" }),
+        /* @__PURE__ */ jsxs("div", { className: "inline-flex rounded-sm border border-grey-200 bg-white p-1", children: [
+          /* @__PURE__ */ jsx(
+            HeaderPaletteButton,
+            {
+              isSelected: themeCategory === "brand",
+              onClick: () => handleThemeCategoryChange("brand"),
+              children: "Brand"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            HeaderPaletteButton,
+            {
+              isSelected: themeCategory === "aboriginal",
+              onClick: () => handleThemeCategoryChange("aboriginal"),
+              children: "Aboriginal"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(SectionLabel, { children: "Background family" }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-5 gap-1", children: selectableFamilies.map((family) => /* @__PURE__ */ jsx(
+          FamilyButton,
+          {
+            family,
+            isSelected: family.key === primaryFamily.key,
+            onClick: () => handlePrimaryFamilyChange(family.key)
+          },
+          family.key
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(SectionLabel, { children: "Background shade" }),
+        /* @__PURE__ */ jsx("div", { className: "h-[20.5rem] space-y-1 overflow-y-auto pr-1", children: backgroundShadeOptions.map((shade) => /* @__PURE__ */ jsx(
+          ShadeButton,
+          {
+            shade,
+            contrastRatio: getShadeReadability(shade),
+            isSelected: shade.token === backgroundShade.token,
+            onClick: () => handleBackgroundChange(shade.token)
+          },
+          shade.token
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(SectionLabel, { children: "Accent family" }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-5 gap-1", children: selectableAccentFamilies.map((family) => /* @__PURE__ */ jsx(
+          FamilyButton,
+          {
+            family,
+            isSelected: family.key === accentFamily.key,
+            onClick: () => handleAccentFamilyChange(family.key)
+          },
+          family.key
+        )) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-col", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-5 overflow-y-auto py-5 sm:py-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button2, { variant: "soft", color: "primary", onClick: handleCopyUrl, className: "mr-1", children: copiedKey === "share-url" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-4" }),
+          "Copied URL!"
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Icons.content_copy, { "data-slot": "icon", className: "size-4" }),
+          "Copy URL"
+        ] }) }) }),
+        /* @__PURE__ */ jsx(
+          "article",
+          {
+            className: "overflow-hidden rounded-sm border border-grey-200",
+            style: { backgroundColor: backgroundShade.hex },
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex min-h-[25rem] flex-col justify-between gap-8 px-6 py-6 sm:min-h-[27rem] sm:px-8 sm:py-8",
+                style: { color: previewForeground.hex },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                    /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[0.72rem] font-semibold tracking-[0.16em] uppercase",
+                        style: {
+                          backgroundColor: previewForeground.hex,
+                          borderColor: previewForeground.hex,
+                          color: backgroundShade.hex
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+                            /* @__PURE__ */ jsx(
+                              "path",
+                              {
+                                d: "M8 1.5a6.5 6.5 0 1 0 0 13h.32a1.68 1.68 0 0 0 1.18-2.87l-.17-.16a1.23 1.23 0 0 1 .87-2.1h1.05A3.75 3.75 0 0 0 15 5.62 4.12 4.12 0 0 0 11.02 1.5H8Z",
+                                stroke: "currentColor",
+                                strokeWidth: "1.4",
+                                strokeLinejoin: "round"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx("circle", { cx: "4.75", cy: "7", r: "0.8", fill: "currentColor" }),
+                            /* @__PURE__ */ jsx("circle", { cx: "7.4", cy: "4.8", r: "0.8", fill: "currentColor" }),
+                            /* @__PURE__ */ jsx("circle", { cx: "10.1", cy: "4.95", r: "0.8", fill: "currentColor" })
+                          ] }),
+                          familySummary
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: "inline-flex rounded-full border px-3 py-1 text-[0.72rem] font-semibold tracking-[0.16em] uppercase",
+                        style: { borderColor: previewForeground.hex },
+                        children: [
+                          previewHeroRatingLabel,
+                          " ",
+                          contrastRatio.toFixed(2),
+                          ":1"
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-[42rem] space-y-5 pb-12 sm:pb-8", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-[0.82rem] font-semibold tracking-[0.12em] uppercase", children: "NSW Government Digital" }),
+                    /* @__PURE__ */ jsx("h3", { className: "text-4xl leading-none font-bold sm:text-5xl", children: "Connecting communities to services that matter." }),
+                    /* @__PURE__ */ jsx("p", { className: "max-w-[38rem] text-base leading-7 sm:text-lg sm:leading-8", children: "Use only AAA-recommended combinations across your selected primary, accent, and grey families." }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 pt-1", children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          "data-variant": "solid",
+                          className: cn(
+                            buttonVariants({ variant: "solid", size: "default" }),
+                            "pointer-events-none cursor-default px-6 text-[16px] font-[700] select-none sm:px-6 sm:text-[16px] sm:font-[700]"
+                          ),
+                          style: fauxButtonStyle,
+                          children: "Get started"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "data-variant": "outline",
+                          className: cn(
+                            buttonVariants({ variant: "outline", 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: "Learn more"
+                        }
+                      )
+                    ] })
+                  ] }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+                    /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: "inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-semibold",
+                        style: previewHeroStatusLabel === "Fail" ? {
+                          borderColor: previewForeground.hex,
+                          color: previewForeground.hex
+                        } : {
+                          backgroundColor: previewForeground.hex,
+                          borderColor: previewForeground.hex,
+                          color: backgroundShade.hex
+                        },
+                        children: [
+                          previewHeroStatusLabel === "Pass" ? /* @__PURE__ */ jsx(
+                            "svg",
+                            {
+                              "aria-hidden": "true",
+                              width: "16",
+                              height: "16",
+                              viewBox: "0 0 16 16",
+                              fill: "none",
+                              children: /* @__PURE__ */ jsx(
+                                "path",
+                                {
+                                  d: "M3.5 8.25 6.5 11.25 12.5 5.25",
+                                  stroke: "currentColor",
+                                  strokeWidth: "1.8",
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round"
+                                }
+                              )
+                            }
+                          ) : null,
+                          previewHeroStatusLabel === "Fail" ? /* @__PURE__ */ jsx(
+                            "svg",
+                            {
+                              "aria-hidden": "true",
+                              width: "16",
+                              height: "16",
+                              viewBox: "0 0 16 16",
+                              fill: "none",
+                              children: /* @__PURE__ */ jsx(
+                                "path",
+                                {
+                                  d: "M4.5 4.5 11.5 11.5M11.5 4.5 4.5 11.5",
+                                  stroke: "currentColor",
+                                  strokeWidth: "1.8",
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round"
+                                }
+                              )
+                            }
+                          ) : null,
+                          previewHeroStatusLabel === "Large text only" ? /* @__PURE__ */ jsxs(
+                            "svg",
+                            {
+                              "aria-hidden": "true",
+                              width: "16",
+                              height: "16",
+                              viewBox: "0 0 16 16",
+                              fill: "none",
+                              children: [
+                                /* @__PURE__ */ jsx(
+                                  "path",
+                                  {
+                                    d: "M8 4.25v4.75",
+                                    stroke: "currentColor",
+                                    strokeWidth: "1.8",
+                                    strokeLinecap: "round"
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11.75", r: "1", fill: "currentColor" })
+                              ]
+                            }
+                          ) : null,
+                          previewHeroStatusLabel
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: "inline-flex max-w-full rounded-full border px-4 py-2 text-[0.82rem] break-all sm:text-sm",
+                        style: { borderColor: previewForeground.hex },
+                        children: [
+                          backgroundShade.token,
+                          " / ",
+                          previewForeground.token
+                        ]
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-[2.6rem] leading-none font-extrabold tracking-[-0.06em] tabular-nums",
+                    contrastTone === "success" && "text-success-800",
+                    contrastTone === "warning" && "text-warning-800",
+                    contrastTone === "danger" && "text-danger-800"
+                  ),
+                  children: contrastRatio.toFixed(2)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "pb-1 text-sm tracking-[0.08em] text-grey-600 uppercase", children: ":1" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: getCompliancePills(contrastRatio).map((pill) => /* @__PURE__ */ jsx(CompliancePill, { label: pill.label, tone: pill.tone }, pill.label)) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 lg:items-end", children: [
+            /* @__PURE__ */ jsx(
+              TokenRow,
+              {
+                color: previewForeground.hex,
+                token: previewForeground.token,
+                value: getColorValue(previewForeground, resolvedCopyFormat)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TokenRow,
+              {
+                color: backgroundShade.hex,
+                token: backgroundShade.token,
+                value: getColorValue(backgroundShade, resolvedCopyFormat)
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-1 lg:justify-end", children: visibleFormats.map((format) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": resolvedCopyFormat === format,
+                onClick: () => setCopyFormat(format),
+                className: cn(
+                  "rounded-sm border px-2.5 py-1 text-[0.62rem] font-semibold tracking-[0.06em] uppercase transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600",
+                  resolvedCopyFormat === format ? "border-grey-400 bg-grey-200 text-grey-800" : "border-grey-200 bg-white text-grey-600 hover:border-grey-400 hover:text-grey-800"
+                ),
+                children: getColorFormatLabel(format)
+              },
+              format
+            )) }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleCopyPairing,
+                className: cn(
+                  "mt-2 inline-flex items-center gap-2 rounded-sm border px-3 py-1.5 text-[0.68rem] font-semibold tracking-[0.04em] transition-colors",
+                  copiedKey === "pairing" ? "border-success-600/35 bg-success-600/10 text-success-800" : "border-grey-200 bg-grey-100 text-grey-600 hover:bg-grey-200 hover:text-grey-800"
+                ),
+                children: copiedKey === "pairing" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-4" }),
+                  "Copied!"
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Icons.content_copy, { "data-slot": "icon", className: "size-4" }),
+                  "Copy pairing"
+                ] })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "sr-only", role: "status", "aria-live": "polite", children: previewAnnouncement })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "border-t border-grey-200 py-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-3 flex flex-wrap items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx(SectionLabel, { children: "Foreground options" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-[0.6rem] font-semibold tracking-[0.18em] text-grey-600 uppercase", children: [
+            optionCount,
+            " accessible option",
+            optionCount === 1 ? "" : "s"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex gap-2 overflow-x-auto pb-1", children: accessibleForegroundOptions.length > 0 ? accessibleForegroundOptions.map((candidate) => /* @__PURE__ */ jsx(
+          ForegroundOption,
+          {
+            backgroundHex: backgroundShade.hex,
+            candidate,
+            isSelected: candidate.id === selectedForeground?.id,
+            onClick: () => handleForegroundChange(candidate.id)
+          },
+          candidate.id
+        )) : /* @__PURE__ */ jsx("p", { className: "py-3 text-sm text-grey-600", children: "No accessible foreground options meeting 4.5:1 are available for this background." }) })
+      ] })
+    ] })
+  ] }) });
+}
+function ColorPairingTool({
+  visibleFormats = DEFAULT_VISIBLE_FORMATS
+} = {}) {
+  const normalizedVisibleFormats = [...new Set(visibleFormats)].filter(
+    (format) => DEFAULT_VISIBLE_FORMATS.includes(format)
+  );
+  const resolvedVisibleFormats = normalizedVisibleFormats.length > 0 ? normalizedVisibleFormats : DEFAULT_VISIBLE_FORMATS;
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ColorPairingToolLoading, {}), children: /* @__PURE__ */ jsx(ColorPairingToolContent, { visibleFormats: resolvedVisibleFormats }) });
+}
 var recommendedBackgroundTones = [50, 100, 200, 400, 600, 800];
 var recommendedForegroundTones = [50, 200, 400, 600, 800];
 var AAA_NORMAL_TEXT_RATIO = 7;
@@ -14935,11 +16058,11 @@ var WHITE_FOREGROUND = {
   familyLabel: "White",
   tone: 0
 };
-function extractTone(token) {
+function extractTone2(token) {
   const match = token.match(/-(\d+)$/);
   return match ? Number.parseInt(match[1], 10) : 0;
 }
-function formatFamilyLabel(name, key) {
+function formatFamilyLabel2(name, key) {
   if (key === "grey") return "Grey";
   return name.replace(/^NSW Aboriginal\s+/i, "").replace(/^NSW\s+/i, "").trim();
 }
@@ -14948,13 +16071,13 @@ function toPairingColor(color2, familyKey, familyLabel) {
     ...color2,
     familyKey,
     familyLabel,
-    tone: extractTone(color2.token)
+    tone: extractTone2(color2.token)
   };
 }
 function buildPairingCollections() {
   return {
     brand: Object.entries(colors.brand).map(([key, palette]) => {
-      const familyLabel = formatFamilyLabel(palette.name, key);
+      const familyLabel = formatFamilyLabel2(palette.name, key);
       return {
         key,
         label: familyLabel,
@@ -14963,7 +16086,7 @@ function buildPairingCollections() {
       };
     }),
     aboriginal: Object.entries(colors.aboriginal).map(([key, palette]) => {
-      const familyLabel = formatFamilyLabel(palette.name, key);
+      const familyLabel = formatFamilyLabel2(palette.name, key);
       return {
         key,
         label: familyLabel,
@@ -15239,7 +16362,7 @@ function Heading({
 var AAA_NORMAL_TEXT_THRESHOLD = "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_THRESHOLD = "4.5:1 for WCAG large text: 24px+, or 18.5px+ bold";
 var PREFERRED_BACKGROUND_TONES = [400, 600, 200, 800, 100, 50];
-var DEFAULT_VISIBLE_FORMATS = ["hex", "rgb", "hsl", "oklch"];
+var DEFAULT_VISIBLE_FORMATS2 = ["hex", "rgb", "hsl", "oklch"];
 var DEFAULT_INITIAL_BACKGROUND_TOKEN = "nsw-blue-800";
 var DEFAULT_INITIAL_PAIR_ID = "nsw-blue-800:nsw-blue-200";
 function getToneFromToken(token) {
@@ -15368,7 +16491,7 @@ function getDefaultBackgroundToken(context) {
   }
   return context.backgrounds[0]?.token ?? "";
 }
-function resolveBackgroundToken(context, preferredToken, preferredTone) {
+function resolveBackgroundToken2(context, preferredToken, preferredTone) {
   if (preferredToken && context.backgrounds.some((background) => background.token === preferredToken)) {
     return preferredToken;
   }
@@ -15382,7 +16505,7 @@ function resolveBackgroundToken(context, preferredToken, preferredTone) {
   }
   return getDefaultBackgroundToken(context);
 }
-function ColorPairingToolLoading() {
+function ColorPairingToolLoading2() {
   return /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-6", children: [
     /* @__PURE__ */ jsx("div", { className: "h-32 rounded-sm border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
     /* @__PURE__ */ jsxs("div", { className: "grid gap-6 lg:grid-cols-2", children: [
@@ -15395,7 +16518,7 @@ function ColorPairingToolLoading() {
     ] })
   ] });
 }
-function getInitialPairingState(searchParams) {
+function getInitialPairingState2(searchParams) {
   const paletteParam = searchParams.get("palette");
   const primaryParam = searchParams.get("primary");
   const accentParam = searchParams.get("accent");
@@ -15411,7 +16534,7 @@ function getInitialPairingState(searchParams) {
     (pair) => pair.id === DEFAULT_INITIAL_PAIR_ID
   ) ? DEFAULT_INITIAL_PAIR_ID : null;
   const pairBackgroundToken = context.recommendedPairs.find((pair) => pair.id === pairParam)?.background.token ?? null;
-  const selectedBackgroundToken = resolveBackgroundToken(
+  const selectedBackgroundToken = resolveBackgroundToken2(
     context,
     backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken,
     getToneFromToken(backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken)
@@ -15785,9 +16908,9 @@ function ColorFamilySelector({
     }) })
   ] });
 }
-function ColorPairingToolContent({ visibleFormats }) {
+function ColorPairingToolContent2({ visibleFormats }) {
   const searchParams = useSearchParams();
-  const [initialState] = useState(() => getInitialPairingState(searchParams));
+  const [initialState] = useState(() => getInitialPairingState2(searchParams));
   const [themeCategory, setThemeCategory] = useState(initialState.themeCategory);
   const [primaryFamilyKey, setPrimaryFamilyKey] = useState(initialState.primaryKey);
   const [accentFamilyKey, setAccentFamilyKey] = useState(initialState.accentKey);
@@ -15860,7 +16983,7 @@ function ColorPairingToolContent({ visibleFormats }) {
   };
   const syncSelection = (nextThemeCategory, nextPrimaryKey, nextAccentKey, preferredBackgroundToken, preferredPairId) => {
     const nextContext = getPairingContext(nextThemeCategory, nextPrimaryKey, nextAccentKey);
-    const nextSelectedBackgroundToken = resolveBackgroundToken(
+    const nextSelectedBackgroundToken = resolveBackgroundToken2(
       nextContext,
       preferredBackgroundToken,
       getToneFromToken(preferredBackgroundToken)
@@ -16297,11 +17420,11 @@ function ColorPairingToolContent({ visibleFormats }) {
     ] }) })
   ] });
 }
-function ColorPairingTool({
-  visibleFormats = DEFAULT_VISIBLE_FORMATS
+function ColorPairingToolV1({
+  visibleFormats = DEFAULT_VISIBLE_FORMATS2
 } = {}) {
   const normalizedVisibleFormats = [...new Set(visibleFormats)];
-  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ColorPairingToolLoading, {}), children: /* @__PURE__ */ jsx(ColorPairingToolContent, { visibleFormats: normalizedVisibleFormats }) });
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ColorPairingToolLoading2, {}), children: /* @__PURE__ */ jsx(ColorPairingToolContent2, { visibleFormats: normalizedVisibleFormats }) });
 }
 function Text({ className, trim = "normal", size = 2, label = false, ...props }) {
   const textSizeClasses = {
@@ -16372,7 +17495,7 @@ function Code({ className, ...props }) {
   );
 }
 var PREFERRED_BACKGROUND_TONES2 = [400, 600, 200, 800, 100, 50];
-var DEFAULT_VISIBLE_FORMATS2 = ["hex", "rgb", "hsl", "oklch"];
+var DEFAULT_VISIBLE_FORMATS3 = ["hex", "rgb", "hsl", "oklch"];
 var DEFAULT_INITIAL_BACKGROUND_TOKEN2 = "nsw-blue-800";
 var DEFAULT_INITIAL_PAIR_ID2 = "nsw-blue-800:nsw-blue-200";
 function getToneFromToken2(token) {
@@ -16454,7 +17577,7 @@ function getDefaultBackgroundToken2(context) {
   }
   return context.backgrounds[0]?.token ?? "";
 }
-function resolveBackgroundToken2(context, preferredToken, preferredTone) {
+function resolveBackgroundToken3(context, preferredToken, preferredTone) {
   if (preferredToken && context.backgrounds.some((background) => background.token === preferredToken)) {
     return preferredToken;
   }
@@ -16468,7 +17591,7 @@ function resolveBackgroundToken2(context, preferredToken, preferredTone) {
   }
   return getDefaultBackgroundToken2(context);
 }
-function getInitialPairingState2(searchParams) {
+function getInitialPairingState3(searchParams) {
   const paletteParam = searchParams.get("palette");
   const primaryParam = searchParams.get("primary");
   const accentParam = searchParams.get("accent");
@@ -16484,7 +17607,7 @@ function getInitialPairingState2(searchParams) {
     (pair) => pair.id === DEFAULT_INITIAL_PAIR_ID2
   ) ? DEFAULT_INITIAL_PAIR_ID2 : null;
   const pairBackgroundToken = context.recommendedPairs.find((pair) => pair.id === pairParam)?.background.token ?? null;
-  const selectedBackgroundToken = resolveBackgroundToken2(
+  const selectedBackgroundToken = resolveBackgroundToken3(
     context,
     backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken,
     getToneFromToken2(backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken)
@@ -16852,7 +17975,7 @@ function RecommendedPairCard({
 }
 function ColorPairingToolV2Content({ visibleFormats }) {
   const searchParams = useSearchParams();
-  const [initialState] = useState(() => getInitialPairingState2(searchParams));
+  const [initialState] = useState(() => getInitialPairingState3(searchParams));
   const [themeCategory, setThemeCategory] = useState(initialState.themeCategory);
   const [primaryFamilyKey, setPrimaryFamilyKey] = useState(initialState.primaryKey);
   const [accentFamilyKey, setAccentFamilyKey] = useState(initialState.accentKey);
@@ -16910,7 +18033,7 @@ function ColorPairingToolV2Content({ visibleFormats }) {
   };
   const syncSelection = (nextThemeCategory, nextPrimaryKey, nextAccentKey, preferredBackgroundToken, preferredPairId) => {
     const nextContext = getPairingContext(nextThemeCategory, nextPrimaryKey, nextAccentKey);
-    const nextSelectedBackgroundToken = resolveBackgroundToken2(
+    const nextSelectedBackgroundToken = resolveBackgroundToken3(
       nextContext,
       preferredBackgroundToken,
       getToneFromToken2(preferredBackgroundToken)
@@ -17186,7 +18309,7 @@ function ColorPairingToolV2Content({ visibleFormats }) {
   ] });
 }
 function ColorPairingToolV2({
-  visibleFormats = DEFAULT_VISIBLE_FORMATS2
+  visibleFormats = DEFAULT_VISIBLE_FORMATS3
 } = {}) {
   const normalizedVisibleFormats = [...new Set(visibleFormats)];
   return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ColorPairingToolV2Loading, {}), children: /* @__PURE__ */ jsx(ColorPairingToolV2Content, { visibleFormats: normalizedVisibleFormats }) });
@@ -17328,10 +18451,9 @@ function useStickyOffset(extraPadding = 0) {
   }, [extraPadding, headerHeight, navigationHeight]);
 }
 var PREFERRED_BACKGROUND_TONES3 = [400, 600, 200, 800, 100, 50];
-var DEFAULT_VISIBLE_FORMATS3 = ["hex", "rgb", "hsl", "oklch"];
+var DEFAULT_VISIBLE_FORMATS4 = ["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)";
@@ -17436,7 +18558,7 @@ function getDefaultBackgroundToken3(context) {
   }
   return context.backgrounds[0]?.token ?? "";
 }
-function resolveBackgroundToken3(context, preferredToken, preferredTone) {
+function resolveBackgroundToken4(context, preferredToken, preferredTone) {
   if (preferredToken && context.backgrounds.some((background) => background.token === preferredToken)) {
     return preferredToken;
   }
@@ -17450,7 +18572,7 @@ function resolveBackgroundToken3(context, preferredToken, preferredTone) {
   }
   return getDefaultBackgroundToken3(context);
 }
-function getInitialPairingState3(searchParams) {
+function getInitialPairingState4(searchParams) {
   const paletteParam = searchParams.get("palette");
   const primaryParam = searchParams.get("primary");
   const accentParam = searchParams.get("accent");
@@ -17466,7 +18588,7 @@ function getInitialPairingState3(searchParams) {
     (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(
+  const selectedBackgroundToken = resolveBackgroundToken4(
     context,
     backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken,
     getToneFromToken3(backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken)
@@ -18164,7 +19286,7 @@ function TechnicalDetailsPanel({
 }
 function resolveSelectionState(nextThemeCategory, nextPrimaryKey, nextAccentKey, preferredBackgroundToken, preferredPairId) {
   const context = getPairingContext(nextThemeCategory, nextPrimaryKey, nextAccentKey);
-  const selectedBackgroundToken = resolveBackgroundToken3(
+  const selectedBackgroundToken = resolveBackgroundToken4(
     context,
     preferredBackgroundToken,
     getToneFromToken3(preferredBackgroundToken)
@@ -18199,9 +19321,10 @@ function ColorPairingToolV3Content({
   onAnalyticsEvent,
   visibleFormats
 }) {
+  const pathname = usePathname();
   const searchParams = useSearchParams();
   const stickyOffset = useStickyOffset(24);
-  const [initialState] = useState(() => getInitialPairingState3(searchParams));
+  const [initialState] = useState(() => getInitialPairingState4(searchParams));
   const [themeCategory, setThemeCategory] = useState(initialState.themeCategory);
   const [primaryFamilyKey, setPrimaryFamilyKey] = useState(initialState.primaryKey);
   const [accentFamilyKey, setAccentFamilyKey] = useState(initialState.accentKey);
@@ -18322,8 +19445,16 @@ function ColorPairingToolV3Content({
       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 currentPathname = pathname ?? (typeof window !== "undefined" ? window.location.pathname : "/tests/colour/colour-pairing-tool-3");
+    return `${currentPathname}${query ? `?${query}` : ""}`;
+  }, [
+    context.accent.key,
+    context.primary.key,
+    pathname,
+    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;
@@ -18931,7 +20062,7 @@ function ColorPairingToolV3Content({
 function ColorPairingToolV3({
   onAnalyticsEvent = () => {
   },
-  visibleFormats = DEFAULT_VISIBLE_FORMATS3
+  visibleFormats = DEFAULT_VISIBLE_FORMATS4
 } = {}) {
   const normalizedVisibleFormats = [...new Set(visibleFormats)];
   return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ColorPairingToolV3Loading, {}), children: /* @__PURE__ */ jsx(
@@ -18943,10 +20074,9 @@ function ColorPairingToolV3({
   ) });
 }
 var PREFERRED_BACKGROUND_TONES4 = [400, 600, 200, 800, 100, 50];
-var DEFAULT_VISIBLE_FORMATS4 = ["hex", "rgb", "hsl", "oklch"];
+var DEFAULT_VISIBLE_FORMATS5 = ["hex", "rgb", "hsl", "oklch"];
 var DEFAULT_INITIAL_BACKGROUND_TOKEN4 = "nsw-blue-800";
 var DEFAULT_INITIAL_PAIR_ID4 = "nsw-blue-800:nsw-blue-200";
-var COLOR_PAIRING_TOOL_V4_PATH = "/core/colour/colour-pairing-tool-4";
 var MOBILE_RESULT_SCROLL_QUERY2 = "(max-width: 1023px)";
 var PERSISTENT_DRAWER_MIN_WIDTH_QUERY2 = "(min-width: 1280px)";
 var INITIAL_VISIBLE_ALTERNATIVES = 6;
@@ -19050,7 +20180,7 @@ function getDefaultBackgroundToken4(context) {
   }
   return context.backgrounds[0]?.token ?? "";
 }
-function resolveBackgroundToken4(context, preferredToken, preferredTone) {
+function resolveBackgroundToken5(context, preferredToken, preferredTone) {
   if (preferredToken && context.backgrounds.some((background) => background.token === preferredToken)) {
     return preferredToken;
   }
@@ -19064,7 +20194,7 @@ function resolveBackgroundToken4(context, preferredToken, preferredTone) {
   }
   return getDefaultBackgroundToken4(context);
 }
-function getInitialPairingState4(searchParams) {
+function getInitialPairingState5(searchParams) {
   const paletteParam = searchParams.get("palette");
   const primaryParam = searchParams.get("primary");
   const accentParam = searchParams.get("accent");
@@ -19080,7 +20210,7 @@ function getInitialPairingState4(searchParams) {
     (pair) => pair.id === DEFAULT_INITIAL_PAIR_ID4
   ) ? DEFAULT_INITIAL_PAIR_ID4 : null;
   const pairBackgroundToken = context.recommendedPairs.find((pair) => pair.id === pairParam)?.background.token ?? null;
-  const selectedBackgroundToken = resolveBackgroundToken4(
+  const selectedBackgroundToken = resolveBackgroundToken5(
     context,
     backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken,
     getToneFromToken4(backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken)
@@ -19637,7 +20767,7 @@ function TechnicalDetailsPanel2({
 }
 function resolveSelectionState2(nextThemeCategory, nextPrimaryKey, nextAccentKey, preferredBackgroundToken, preferredPairId) {
   const context = getPairingContext(nextThemeCategory, nextPrimaryKey, nextAccentKey);
-  const selectedBackgroundToken = resolveBackgroundToken4(
+  const selectedBackgroundToken = resolveBackgroundToken5(
     context,
     preferredBackgroundToken,
     getToneFromToken4(preferredBackgroundToken)
@@ -19672,9 +20802,10 @@ function ColorPairingToolV4Content({
   onAnalyticsEvent,
   visibleFormats
 }) {
+  const pathname = usePathname();
   const searchParams = useSearchParams();
   const stickyOffset = useStickyOffset(24);
-  const [initialState] = useState(() => getInitialPairingState4(searchParams));
+  const [initialState] = useState(() => getInitialPairingState5(searchParams));
   const [themeCategory, setThemeCategory] = useState(initialState.themeCategory);
   const [primaryFamilyKey, setPrimaryFamilyKey] = useState(initialState.primaryKey);
   const [accentFamilyKey, setAccentFamilyKey] = useState(initialState.accentKey);
@@ -19832,8 +20963,16 @@ function ColorPairingToolV4Content({
       params.set("pair", selectedPairId);
     }
     const query = params.toString();
-    return `${COLOR_PAIRING_TOOL_V4_PATH}${query ? `?${query}` : ""}`;
-  }, [context.accent.key, context.primary.key, shareBackgroundToken, selectedPairId, themeCategory]);
+    const currentPathname = pathname ?? (typeof window !== "undefined" ? window.location.pathname : "/tests/colour/colour-pairing-tool-4");
+    return `${currentPathname}${query ? `?${query}` : ""}`;
+  }, [
+    context.accent.key,
+    context.primary.key,
+    pathname,
+    shareBackgroundToken,
+    selectedPairId,
+    themeCategory
+  ]);
   const activeDrawerStep = COLOR_PAIRING_TOOL_DRAWER_STEPS2[drawerStepIndex];
   const isFirstDrawerStep = drawerStepIndex === 0;
   const isLastDrawerStep = drawerStepIndex === COLOR_PAIRING_TOOL_DRAWER_STEPS2.length - 1;
@@ -20462,7 +21601,7 @@ function ColorPairingToolV4Content({
 function ColorPairingToolV4({
   onAnalyticsEvent = () => {
   },
-  visibleFormats = DEFAULT_VISIBLE_FORMATS4
+  visibleFormats = DEFAULT_VISIBLE_FORMATS5
 } = {}) {
   const normalizedVisibleFormats = [...new Set(visibleFormats)];
   return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ColorPairingToolV4Loading, {}), children: /* @__PURE__ */ jsx(
@@ -20474,10 +21613,9 @@ function ColorPairingToolV4({
   ) });
 }
 var PREFERRED_BACKGROUND_TONES5 = [400, 600, 200, 800, 100, 50];
-var DEFAULT_VISIBLE_FORMATS5 = ["hex", "rgb", "hsl", "oklch"];
+var DEFAULT_VISIBLE_FORMATS6 = ["hex", "rgb", "hsl", "oklch"];
 var DEFAULT_INITIAL_BACKGROUND_TOKEN5 = "nsw-blue-800";
 var DEFAULT_INITIAL_PAIR_ID5 = "nsw-blue-800:nsw-blue-200";
-var COLOR_PAIRING_TOOL_V5_PATH = "/core/colour/colour-pairing-tool-5";
 var MOBILE_RESULT_SCROLL_QUERY3 = "(max-width: 1023px)";
 var PERSISTENT_DRAWER_MIN_WIDTH_QUERY3 = "(min-width: 1280px)";
 var INITIAL_VISIBLE_ALTERNATIVES2 = 6;
@@ -20512,9 +21650,15 @@ function getFamilySwatchColor5(family, preferredTone = 600) {
   if (exactMatch) {
     return exactMatch.hex;
   }
-  const closestMatch = [...family.colors].sort(
-    (left, right) => Math.abs(left.tone - preferredTone) - Math.abs(right.tone - preferredTone)
-  )[0];
+  let closestMatch = null;
+  let smallestDiff = Number.POSITIVE_INFINITY;
+  for (const color2 of family.colors) {
+    const diff = Math.abs(color2.tone - preferredTone);
+    if (diff < smallestDiff) {
+      smallestDiff = diff;
+      closestMatch = color2;
+    }
+  }
   return closestMatch?.hex ?? "transparent";
 }
 function getFamilySelectorLabel5(family, themeCategory, selectionRole) {
@@ -20581,7 +21725,7 @@ function getDefaultBackgroundToken5(context) {
   }
   return context.backgrounds[0]?.token ?? "";
 }
-function resolveBackgroundToken5(context, preferredToken, preferredTone) {
+function resolveBackgroundToken6(context, preferredToken, preferredTone) {
   if (preferredToken && context.backgrounds.some((background) => background.token === preferredToken)) {
     return preferredToken;
   }
@@ -20595,7 +21739,7 @@ function resolveBackgroundToken5(context, preferredToken, preferredTone) {
   }
   return getDefaultBackgroundToken5(context);
 }
-function getInitialPairingState5(searchParams) {
+function getInitialPairingState6(searchParams) {
   const paletteParam = searchParams.get("palette");
   const primaryParam = searchParams.get("primary");
   const accentParam = searchParams.get("accent");
@@ -20611,7 +21755,7 @@ function getInitialPairingState5(searchParams) {
     (pair) => pair.id === DEFAULT_INITIAL_PAIR_ID5
   ) ? DEFAULT_INITIAL_PAIR_ID5 : null;
   const pairBackgroundToken = context.recommendedPairs.find((pair) => pair.id === pairParam)?.background.token ?? null;
-  const selectedBackgroundToken = resolveBackgroundToken5(
+  const selectedBackgroundToken = resolveBackgroundToken6(
     context,
     backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken,
     getToneFromToken5(backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken)
@@ -21249,7 +22393,7 @@ function TechnicalDetailsPanel3({
 }
 function resolveSelectionState3(nextThemeCategory, nextPrimaryKey, nextAccentKey, preferredBackgroundToken, preferredPairId) {
   const context = getPairingContext(nextThemeCategory, nextPrimaryKey, nextAccentKey);
-  const selectedBackgroundToken = resolveBackgroundToken5(
+  const selectedBackgroundToken = resolveBackgroundToken6(
     context,
     preferredBackgroundToken,
     getToneFromToken5(preferredBackgroundToken)
@@ -21284,9 +22428,10 @@ function ColorPairingToolV5Content({
   onAnalyticsEvent,
   visibleFormats
 }) {
+  const pathname = usePathname();
   const searchParams = useSearchParams();
   const stickyOffset = useStickyOffset(24);
-  const [initialState] = useState(() => getInitialPairingState5(searchParams));
+  const [initialState] = useState(() => getInitialPairingState6(searchParams));
   const [themeCategory, setThemeCategory] = useState(initialState.themeCategory);
   const [primaryFamilyKey, setPrimaryFamilyKey] = useState(initialState.primaryKey);
   const [accentFamilyKey, setAccentFamilyKey] = useState(initialState.accentKey);
@@ -21448,8 +22593,16 @@ function ColorPairingToolV5Content({
       params.set("pair", selectedPairId);
     }
     const query = params.toString();
-    return `${COLOR_PAIRING_TOOL_V5_PATH}${query ? `?${query}` : ""}`;
-  }, [context.accent.key, context.primary.key, shareBackgroundToken, selectedPairId, themeCategory]);
+    const currentPathname = pathname || "/core/colour/colour-pairing-tool-5";
+    return `${currentPathname}${query ? `?${query}` : ""}`;
+  }, [
+    context.accent.key,
+    context.primary.key,
+    pathname,
+    shareBackgroundToken,
+    selectedPairId,
+    themeCategory
+  ]);
   const activeDrawerStep = COLOR_PAIRING_TOOL_DRAWER_STEPS3[drawerStepIndex];
   const isFirstDrawerStep = drawerStepIndex === 0;
   const isLastDrawerStep = drawerStepIndex === COLOR_PAIRING_TOOL_DRAWER_STEPS3.length - 1;
@@ -22079,7 +23232,7 @@ function ColorPairingToolV5Content({
 function ColorPairingToolV5({
   onAnalyticsEvent = () => {
   },
-  visibleFormats = DEFAULT_VISIBLE_FORMATS5
+  visibleFormats = DEFAULT_VISIBLE_FORMATS6
 } = {}) {
   const normalizedVisibleFormats = [...new Set(visibleFormats)];
   return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ColorPairingToolV5Loading, {}), children: /* @__PURE__ */ jsx(
@@ -22090,6 +23243,691 @@ function ColorPairingToolV5({
     }
   ) });
 }
+var DEFAULT_THEME_CATEGORY = "brand";
+var DEFAULT_PRIMARY_KEY = "blue";
+var DEFAULT_BACKGROUND_TOKEN = "nsw-blue-800";
+var PREFERRED_BACKGROUND_TONES6 = [400, 600, 200, 800, 100, 50];
+function getToneFromToken6(token) {
+  if (!token) return null;
+  const match = token.match(/-(\d+)$/);
+  return match ? Number.parseInt(match[1], 10) : null;
+}
+function getFamilySwatchColor6(family, preferredTone = 600) {
+  const exactMatch = family.colors.find((color2) => color2.tone === preferredTone);
+  if (exactMatch) {
+    return exactMatch.hex;
+  }
+  let closestMatch = null;
+  let smallestDiff = Number.POSITIVE_INFINITY;
+  for (const color2 of family.colors) {
+    const diff = Math.abs(color2.tone - preferredTone);
+    if (diff < smallestDiff) {
+      smallestDiff = diff;
+      closestMatch = color2;
+    }
+  }
+  return closestMatch?.hex ?? "transparent";
+}
+function getFamilySelectorLabel6(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 getPairingColorDisplayName6(color2) {
+  return color2.name ?? `${color2.familyLabel} ${color2.tone}`;
+}
+function isWhiteForegroundPair6(pair) {
+  return pair.foreground.token === "white";
+}
+function getPreferredPairForBackground6(pairs, preferredPairId) {
+  if (preferredPairId) {
+    const preferredPair = pairs.find((pair) => pair.id === preferredPairId);
+    if (preferredPair) {
+      return preferredPair;
+    }
+  }
+  return pairs.find((pair) => !isWhiteForegroundPair6(pair)) ?? pairs[0] ?? null;
+}
+function getDefaultBackgroundToken6(context) {
+  for (const tone of PREFERRED_BACKGROUND_TONES6) {
+    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_TONES6) {
+    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 resolveBackgroundToken7(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 getDefaultBackgroundToken6(context);
+}
+function getReadableTextColor5(tone) {
+  return tone >= 600 ? "#ffffff" : "#002664";
+}
+function buildForegroundOptions(background, context) {
+  const approvedPairs = context.pairsByBackground[background.token] ?? [];
+  const whiteExample = supportsWhiteForegroundPreview(background) ? getWhiteForegroundPair(background) : null;
+  if (whiteExample && whiteExample.passes.aaaLarge && !approvedPairs.some((pair) => pair.id === whiteExample.id)) {
+    return [...approvedPairs, whiteExample];
+  }
+  return approvedPairs;
+}
+function getDefaultPairIdForBackground(context, backgroundToken) {
+  const background = context.backgrounds.find((item) => item.token === backgroundToken);
+  if (!background) {
+    return "";
+  }
+  return getPreferredPairForBackground6(buildForegroundOptions(background, context))?.id ?? "";
+}
+function getInitialSelectionState() {
+  const defaultAccentKey = getDefaultAccentFamilyKey(DEFAULT_THEME_CATEGORY, DEFAULT_PRIMARY_KEY);
+  const context = getPairingContext(DEFAULT_THEME_CATEGORY, DEFAULT_PRIMARY_KEY, defaultAccentKey);
+  const backgroundToken = resolveBackgroundToken7(
+    context,
+    DEFAULT_BACKGROUND_TOKEN,
+    getToneFromToken6(DEFAULT_BACKGROUND_TOKEN)
+  );
+  return {
+    accentKey: context.accent.key,
+    backgroundToken,
+    pairId: getDefaultPairIdForBackground(context, backgroundToken),
+    primaryKey: context.primary.key,
+    themeCategory: DEFAULT_THEME_CATEGORY
+  };
+}
+function resolveSelectionState4(themeCategory, primaryKey, accentKey, backgroundToken) {
+  const context = getPairingContext(themeCategory, primaryKey, accentKey);
+  const resolvedBackgroundToken = resolveBackgroundToken7(
+    context,
+    backgroundToken,
+    getToneFromToken6(backgroundToken)
+  );
+  return {
+    accentKey: context.accent.key,
+    backgroundToken: resolvedBackgroundToken,
+    pairId: getDefaultPairIdForBackground(context, resolvedBackgroundToken),
+    primaryKey: context.primary.key,
+    themeCategory
+  };
+}
+function getResultLabel(pair, bestPair) {
+  if (!pair) {
+    return "No AAA pairing available";
+  }
+  if (pair.id === bestPair?.id) {
+    return "NSW recommended pairing";
+  }
+  if (isWhiteForegroundPair6(pair) && !pair.passes.aaaText && pair.passes.aaaLarge) {
+    return "Large-text example";
+  }
+  return "Approved alternative";
+}
+function getSupportText(pair, bestPair) {
+  if (!pair) {
+    return "No AAA-compliant foreground is available for this background. Select another background tone to continue.";
+  }
+  if (pair.id === bestPair?.id) {
+    return "Use this pairing for headings, body copy, and calls to action on the selected background.";
+  }
+  if (isWhiteForegroundPair6(pair) && !pair.passes.aaaText && pair.passes.aaaLarge) {
+    return "Use white only for large text on this background. Keep regular body copy and small interface text on a darker recommended foreground.";
+  }
+  return "Use this approved alternative when you need a different tone or stronger emphasis.";
+}
+function getComplianceBadges(pair) {
+  if (!pair) {
+    return [];
+  }
+  return [
+    {
+      label: pair.passes.aaaText ? "AAA normal" : pair.passes.aaText ? "AA normal" : "Normal fail",
+      tone: pair.passes.aaaText ? "success" : pair.passes.aaText ? "warning" : "neutral"
+    },
+    {
+      label: pair.passes.aaaLarge ? "AAA large" : pair.passes.aaLarge ? "AA large" : "Large fail",
+      tone: pair.passes.aaaLarge ? "success" : pair.passes.aaLarge ? "warning" : "neutral"
+    }
+  ];
+}
+function getShadeMeta(context, background) {
+  const bestPair = getPreferredPairForBackground6(context.pairsByBackground[background.token] ?? []);
+  if (!bestPair) {
+    return {
+      description: "No approved AAA foreground",
+      label: "No AAA",
+      ratio: null,
+      tone: "neutral"
+    };
+  }
+  return {
+    description: `Recommends ${bestPair.foreground.token}`,
+    label: "AAA ready",
+    ratio: bestPair.contrastRatio,
+    tone: "success"
+  };
+}
+function getPairingCopyText4(pair) {
+  const accessibilityLine = pair.passes.aaaText ? "Accessibility: Meets AAA for normal and large text" : pair.passes.aaaLarge ? "Accessibility: Meets AAA for large text only" : "Accessibility: Does not meet AAA";
+  return [
+    `Background: ${pair.background.token} (${pair.background.hex})`,
+    `Foreground: ${pair.foreground.token} (${pair.foreground.hex})`,
+    `Contrast ratio: ${pair.contrastRatio.toFixed(2)}:1`,
+    accessibilityLine
+  ].join("\n");
+}
+function getLiveAnnouncement4(pair, background) {
+  if (!background) {
+    return "No approved background tones available.";
+  }
+  if (!pair) {
+    return `${background.token} selected. No AAA-compliant foreground is available for this background.`;
+  }
+  if (isWhiteForegroundPair6(pair) && !pair.passes.aaaText && pair.passes.aaaLarge) {
+    return `${background.token} with white. Contrast ratio ${pair.contrastRatio.toFixed(2)} to 1. Meets AAA for large text only.`;
+  }
+  return `${background.token} with ${pair.foreground.token}. Contrast ratio ${pair.contrastRatio.toFixed(2)} to 1.`;
+}
+function ThemeButton({
+  isSelected,
+  label,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": isSelected,
+      onClick,
+      className: cn(
+        "rounded-sm border px-4 py-2.5 text-sm font-semibold 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 text-primary-900" : "border-grey-300 bg-white text-foreground hover:border-primary-500 hover:bg-grey-50"
+      ),
+      children: label
+    }
+  );
+}
+function FamilyButton2({
+  isSelected,
+  label,
+  onClick,
+  swatch
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": isSelected,
+      onClick,
+      className: cn(
+        "rounded-sm border 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" : "border-grey-300 bg-white hover:border-primary-500 hover:bg-grey-50"
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "mt-0.5 size-8 shrink-0 rounded-sm border border-black/10",
+            style: { backgroundColor: swatch }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: label }) })
+      ] })
+    }
+  );
+}
+function StatusBadge({ label, tone }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex rounded-sm border px-2 py-1 text-[0.68rem] font-semibold tracking-[0.12em] uppercase",
+        tone === "success" && "border-primary-200 bg-primary-50 text-primary-900",
+        tone === "warning" && "border-accent-200 bg-accent-50 text-accent-900",
+        tone === "neutral" && "border-grey-300 bg-grey-50 text-foreground"
+      ),
+      children: label
+    }
+  );
+}
+function BackgroundShadeButton({
+  background,
+  context,
+  isSelected,
+  onClick
+}) {
+  const meta = getShadeMeta(context, background);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": isSelected,
+      onClick,
+      className: cn(
+        "w-full rounded-sm border 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" : "border-grey-300 bg-white hover:border-primary-500 hover:bg-grey-50"
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "mt-0.5 size-10 shrink-0 rounded-sm border border-black/10",
+            style: { backgroundColor: background.hex }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: getPairingColorDisplayName6(background) }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 font-mono text-[0.72rem] break-all text-muted-foreground", children: background.token })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-1", children: [
+              /* @__PURE__ */ jsx(StatusBadge, { label: meta.label, tone: meta.tone }),
+              meta.ratio ? /* @__PURE__ */ jsxs("span", { className: "font-mono text-[0.72rem] text-muted-foreground", children: [
+                meta.ratio.toFixed(2),
+                ":1"
+              ] }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "mt-3 text-xs/5 text-muted-foreground", children: meta.description })
+        ] })
+      ] })
+    }
+  );
+}
+function PairTokenRow({ color: color2, label }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 rounded-sm border border-grey-200 bg-white px-3 py-3", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "mt-0.5 size-8 shrink-0 rounded-sm border border-black/10",
+        style: { backgroundColor: color2.hex }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-[0.72rem] font-semibold tracking-[0.12em] text-muted-foreground uppercase", children: label }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-semibold text-foreground", children: color2.token }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 font-mono text-[0.72rem] break-all text-muted-foreground", children: color2.hex })
+    ] })
+  ] });
+}
+function ForegroundOptionButton({
+  background,
+  isSelected,
+  onClick,
+  pair
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": isSelected,
+      onClick,
+      className: cn(
+        "w-[10rem] shrink-0 rounded-sm border 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" : "border-grey-300 bg-white hover:border-primary-500 hover:bg-grey-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-sm border border-black/10", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-9 w-full", style: { backgroundColor: background.hex } }),
+          /* @__PURE__ */ jsx("div", { className: "h-3 w-full", style: { backgroundColor: pair.foreground.hex } })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm font-semibold text-foreground", children: getPairingColorDisplayName6(pair.foreground) }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 font-mono text-[0.72rem] break-all text-muted-foreground", children: pair.foreground.token }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("span", { className: "font-mono text-[0.72rem] text-foreground", children: [
+            pair.contrastRatio.toFixed(2),
+            ":1"
+          ] }),
+          isWhiteForegroundPair6(pair) && !pair.passes.aaaText ? /* @__PURE__ */ jsx(StatusBadge, { label: "Large text", tone: "warning" }) : pair.passes.aaaText ? /* @__PURE__ */ jsx(StatusBadge, { label: "AAA", tone: "success" }) : null
+        ] })
+      ]
+    }
+  );
+}
+function ColorPairingToolV6() {
+  const [initialState] = useState(getInitialSelectionState);
+  const [themeCategory, setThemeCategory] = useState(initialState.themeCategory);
+  const [primaryFamilyKey, setPrimaryFamilyKey] = useState(initialState.primaryKey);
+  const [accentFamilyKey, setAccentFamilyKey] = useState(initialState.accentKey);
+  const [selectedBackgroundToken, setSelectedBackgroundToken] = useState(
+    initialState.backgroundToken
+  );
+  const [selectedPairId, setSelectedPairId] = useState(initialState.pairId);
+  const [, copyToClipboardRaw] = useCopyToClipboard();
+  const [copiedKey, setCopiedKey] = useState(null);
+  const copiedKeyTimeoutRef = useRef(null);
+  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),
+    [context.grey.key, themeFamilies]
+  );
+  const selectableAccentFamilies = useMemo(
+    () => selectableFamilies.filter((family) => family.key !== context.primary.key),
+    [context.primary.key, selectableFamilies]
+  );
+  const selectedBackground = useMemo(
+    () => context.backgrounds.find((background) => background.token === selectedBackgroundToken) ?? context.backgrounds[0] ?? null,
+    [context.backgrounds, selectedBackgroundToken]
+  );
+  const availableForegroundOptions = useMemo(
+    () => selectedBackground ? buildForegroundOptions(selectedBackground, context) : [],
+    [context, selectedBackground]
+  );
+  const bestRecommendedPair = useMemo(
+    () => selectedBackground ? getPreferredPairForBackground6(context.pairsByBackground[selectedBackground.token] ?? []) : null,
+    [context.pairsByBackground, selectedBackground]
+  );
+  const selectedPair = useMemo(
+    () => getPreferredPairForBackground6(availableForegroundOptions, selectedPairId),
+    [availableForegroundOptions, selectedPairId]
+  );
+  useEffect(() => {
+    return () => {
+      if (copiedKeyTimeoutRef.current) {
+        clearTimeout(copiedKeyTimeoutRef.current);
+      }
+    };
+  }, []);
+  const copyValue = useCallback(
+    (copyKey, value, toastLabel) => {
+      copyToClipboardRaw(value);
+      setCopiedKey(copyKey);
+      toast(toastLabel, { duration: 2e3 });
+      if (copiedKeyTimeoutRef.current) {
+        clearTimeout(copiedKeyTimeoutRef.current);
+      }
+      copiedKeyTimeoutRef.current = setTimeout(() => {
+        setCopiedKey(null);
+        copiedKeyTimeoutRef.current = null;
+      }, 2e3);
+    },
+    [copyToClipboardRaw]
+  );
+  const handleThemeCategoryChange = (nextThemeCategory) => {
+    const nextState = resolveSelectionState4(
+      nextThemeCategory,
+      primaryFamilyKey,
+      accentFamilyKey,
+      selectedBackgroundToken
+    );
+    setThemeCategory(nextState.themeCategory);
+    setPrimaryFamilyKey(nextState.primaryKey);
+    setAccentFamilyKey(nextState.accentKey);
+    setSelectedBackgroundToken(nextState.backgroundToken);
+    setSelectedPairId(nextState.pairId);
+  };
+  const handlePrimaryColorChange = (nextPrimaryKey) => {
+    const nextAccentKey = nextPrimaryKey === accentFamilyKey ? getDefaultAccentFamilyKey(themeCategory, nextPrimaryKey) : accentFamilyKey;
+    const nextState = resolveSelectionState4(
+      themeCategory,
+      nextPrimaryKey,
+      nextAccentKey,
+      selectedBackgroundToken
+    );
+    setPrimaryFamilyKey(nextState.primaryKey);
+    setAccentFamilyKey(nextState.accentKey);
+    setSelectedBackgroundToken(nextState.backgroundToken);
+    setSelectedPairId(nextState.pairId);
+  };
+  const handleAccentColorChange = (nextAccentKey) => {
+    if (nextAccentKey === primaryFamilyKey) {
+      return;
+    }
+    const nextState = resolveSelectionState4(
+      themeCategory,
+      primaryFamilyKey,
+      nextAccentKey,
+      selectedBackgroundToken
+    );
+    setAccentFamilyKey(nextState.accentKey);
+    setSelectedBackgroundToken(nextState.backgroundToken);
+    setSelectedPairId(nextState.pairId);
+  };
+  const handleBackgroundChange = (nextBackgroundToken) => {
+    setSelectedBackgroundToken(nextBackgroundToken);
+    setSelectedPairId(getDefaultPairIdForBackground(context, nextBackgroundToken));
+  };
+  const previewForeground = selectedPair?.foreground.hex ?? (selectedBackground && getReadableTextColor5(selectedBackground.tone));
+  const resultLabel = getResultLabel(selectedPair, bestRecommendedPair);
+  const supportText = getSupportText(selectedPair, bestRecommendedPair);
+  const complianceBadges = getComplianceBadges(selectedPair);
+  const liveAnnouncement = getLiveAnnouncement4(selectedPair, selectedBackground);
+  if (!selectedBackground || !previewForeground) {
+    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 family selection." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("section", { className: "overflow-hidden rounded-sm border border-grey-200 bg-grey-50", children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-grey-200 bg-white px-5 py-5 sm:px-6 sm:py-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 xl:flex-row xl:items-start xl:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "max-w-3xl space-y-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[0.72rem] font-semibold tracking-[0.14em] text-primary-800 uppercase", children: "Experimental V6" }),
+        /* @__PURE__ */ jsx(Heading, { level: 2, size: 4, className: "text-foreground", trim: "normal", children: "NSW colour pairing" }),
+        /* @__PURE__ */ jsx(Text, { size: 2, className: "text-grey-700", children: "This version keeps the attached picker structure but moves it into a lighter NSW documentation treatment. Choose a palette, set the main background family and tone, then review approved foreground options on the right." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+        /* @__PURE__ */ jsx(
+          ThemeButton,
+          {
+            label: "Brand palette",
+            isSelected: themeCategory === "brand",
+            onClick: () => handleThemeCategoryChange("brand")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ThemeButton,
+          {
+            label: "Aboriginal palette",
+            isSelected: themeCategory === "aboriginal",
+            onClick: () => handleThemeCategoryChange("aboriginal")
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-px bg-grey-200 xl:grid-cols-[20rem_minmax(0,1fr)]", children: [
+      /* @__PURE__ */ jsx("aside", { className: "bg-white px-5 py-5 sm:px-6 sm:py-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
+        /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-[0.72rem] font-semibold tracking-[0.14em] text-primary-800 uppercase", children: "Background family" }),
+            /* @__PURE__ */ jsx(Heading, { level: 3, size: 6, className: "text-foreground", trim: "normal", children: "Primary colour family" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid gap-2 sm:grid-cols-2 xl:grid-cols-1", children: selectableFamilies.map((family) => /* @__PURE__ */ jsx(
+            FamilyButton2,
+            {
+              label: getFamilySelectorLabel6(family, themeCategory, "primary colour"),
+              isSelected: family.key === context.primary.key,
+              onClick: () => handlePrimaryColorChange(family.key),
+              swatch: getFamilySwatchColor6(family, 800)
+            },
+            family.key
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-[0.72rem] font-semibold tracking-[0.14em] text-primary-800 uppercase", children: "Background shade" }),
+            /* @__PURE__ */ jsx(Heading, { level: 3, size: 6, className: "text-foreground", trim: "normal", children: "Approved tones" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: context.primary.colors.filter(
+            (color2) => context.backgrounds.some((background) => background.token === color2.token)
+          ).map((background) => /* @__PURE__ */ jsx(
+            BackgroundShadeButton,
+            {
+              background,
+              context,
+              isSelected: background.token === selectedBackground.token,
+              onClick: () => handleBackgroundChange(background.token)
+            },
+            background.token
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-[0.72rem] font-semibold tracking-[0.14em] text-primary-800 uppercase", children: "Accent family" }),
+            /* @__PURE__ */ jsx(Heading, { level: 3, size: 6, className: "text-foreground", trim: "normal", children: "Supporting colour family" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid gap-2 sm:grid-cols-2 xl:grid-cols-1", children: selectableAccentFamilies.map((family) => /* @__PURE__ */ jsx(
+            FamilyButton2,
+            {
+              label: getFamilySelectorLabel6(family, themeCategory, "accent colour"),
+              isSelected: family.key === context.accent.key,
+              onClick: () => handleAccentColorChange(family.key),
+              swatch: getFamilySwatchColor6(family, 600)
+            },
+            family.key
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "border-t border-grey-200 pt-5", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Grey stays available" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Neutral grey foreground options are added automatically so each pairing keeps a practical NSW fallback." })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "bg-grey-50 px-4 py-4 sm:px-6 sm:py-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "sr-only", "aria-live": "polite", children: liveAnnouncement }),
+        /* @__PURE__ */ jsxs(Card, { className: "gap-0 overflow-hidden border-grey-200 bg-white py-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "border-b border-grey-200 px-4 py-4 sm:px-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-[0.72rem] font-semibold tracking-[0.14em] text-primary-800 uppercase", children: "Current result" }),
+              /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: resultLabel })
+            ] }),
+            selectedPair ? /* @__PURE__ */ jsx(
+              Button2,
+              {
+                variant: "outline",
+                color: "grey",
+                size: "sm",
+                className: "self-start",
+                onClick: () => copyValue("pairing", getPairingCopyText4(selectedPair), "Pairing copied"),
+                children: copiedKey === "pairing" ? /* @__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 pairing"
+                ] })
+              }
+            ) : null
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-5 px-4 py-4 sm:px-6 sm:py-6", children: [
+            /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-sm border border-black/10", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "p-6 sm:p-8",
+                style: {
+                  backgroundColor: selectedBackground.hex,
+                  color: previewForeground
+                },
+                children: /* @__PURE__ */ jsxs("div", { className: "max-w-3xl space-y-5", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-[0.72rem] font-semibold tracking-[0.18em] uppercase", children: "NSW Government Digital" }),
+                    /* @__PURE__ */ jsx("h3", { className: "max-w-2xl text-[2rem] leading-tight font-bold sm:text-[2.75rem]", children: "Connecting communities to services that matter." }),
+                    /* @__PURE__ */ jsx("p", { className: "max-w-xl text-sm/7 sm:text-base/7", children: "This pairing demonstrates legibility across headings, body copy, and key actions. Surrounding chrome stays light so the selected colour treatment reads as the content focus rather than the whole interface shell." })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3", children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "inline-flex items-center rounded-sm border px-4 py-2 text-sm font-semibold",
+                        style: {
+                          backgroundColor: previewForeground,
+                          borderColor: previewForeground,
+                          color: selectedBackground.hex
+                        },
+                        children: "Get started"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "inline-flex items-center rounded-sm border px-4 py-2 text-sm font-semibold",
+                        style: {
+                          borderColor: previewForeground,
+                          color: previewForeground
+                        },
+                        children: "Learn more"
+                      }
+                    )
+                  ] })
+                ] })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-[minmax(0,1fr)_18rem]", children: [
+              /* @__PURE__ */ jsx("div", { className: "rounded-sm border border-grey-200 bg-grey-50 px-4 py-4 sm:px-5", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-[0.72rem] font-semibold tracking-[0.14em] text-primary-800 uppercase", children: "Contrast summary" }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end gap-3", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[2.5rem] leading-none font-bold text-foreground sm:text-[3.25rem]", children: selectedPair ? selectedPair.contrastRatio.toFixed(2) : "0.00" }),
+                    /* @__PURE__ */ jsx("span", { className: "pb-1 font-mono text-sm text-muted-foreground", children: ":1" })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: complianceBadges.map((badge) => /* @__PURE__ */ jsx(StatusBadge, { label: badge.label, tone: badge.tone }, badge.label)) })
+                ] }),
+                /* @__PURE__ */ jsx(Text, { size: 2, className: "text-grey-700", children: supportText })
+              ] }) }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-3", children: selectedPair ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(PairTokenRow, { color: selectedPair.foreground, label: "Foreground" }),
+                /* @__PURE__ */ jsx(PairTokenRow, { color: selectedPair.background, label: "Background" })
+              ] }) : /* @__PURE__ */ jsx("div", { className: "rounded-sm border border-grey-200 bg-white px-4 py-4", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No foreground token is available for the current background." }) }) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Card, { className: "gap-0 overflow-hidden border-grey-200 bg-white py-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "border-b border-grey-200 px-4 py-4 sm:px-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-[0.72rem] font-semibold tracking-[0.14em] text-primary-800 uppercase", children: "Foreground options" }),
+              /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "Approved alternatives for this background" })
+            ] }),
+            /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+              availableForegroundOptions.length,
+              " ",
+              availableForegroundOptions.length === 1 ? "option" : "options",
+              " available"
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "px-4 py-4 sm:px-6 sm:py-5", children: availableForegroundOptions.length > 0 ? /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsx("div", { className: "flex gap-3 pb-1", children: availableForegroundOptions.map((pair) => /* @__PURE__ */ jsx(
+            ForegroundOptionButton,
+            {
+              background: selectedBackground,
+              isSelected: pair.id === selectedPair?.id,
+              onClick: () => setSelectedPairId(pair.id),
+              pair
+            },
+            pair.id
+          )) }) }) : /* @__PURE__ */ jsx("div", { className: "rounded-sm border border-grey-200 bg-grey-50 px-4 py-4", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No approved foreground options are available for this background. Select a different background tone to continue." }) }) })
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
 function ColorSwatches({ theme: theme2, format, viewMode }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -24714,7 +26552,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.105.0"};
+  version: "1.107.0"};
 function Logo(props) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: "sr-only", children: "NSW Government" }),
@@ -40601,6 +42439,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, ColorPairingToolV3, ColorPairingToolV4, ColorPairingToolV5, 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 };
+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, ColorPairingToolV1, ColorPairingToolV2, ColorPairingToolV3, ColorPairingToolV4, ColorPairingToolV5, ColorPairingToolV6, 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