@nswds/app 1.102.0 → 1.104.0

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var jsxRuntime = require('react/jsx-runtime');
-var clsx12 = require('clsx');
+var clsx13 = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
@@ -40,8 +40,8 @@ var LabelPrimitive = require('@radix-ui/react-label');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var TabsPrimitives = require('@radix-ui/react-tabs');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
+var SheetPrimitive = require('@radix-ui/react-dialog');
 var cmdk = require('cmdk');
-var DialogPrimitive = require('@radix-ui/react-dialog');
 var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
 var reactTable = require('@tanstack/react-table');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
@@ -89,7 +89,7 @@ function _interopNamespace(e) {
 }
 
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
-var clsx12__default = /*#__PURE__*/_interopDefault(clsx12);
+var clsx13__default = /*#__PURE__*/_interopDefault(clsx13);
 var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
 var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
 var Headless4__namespace = /*#__PURE__*/_interopNamespace(Headless4);
@@ -110,7 +110,7 @@ var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 var TabsPrimitives__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitives);
 var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
-var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
+var SheetPrimitive__namespace = /*#__PURE__*/_interopNamespace(SheetPrimitive);
 var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
@@ -4054,7 +4054,7 @@ var Icons = {
   zoom_out_map: (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { fill: "currentColor", "data-slot": "icon", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M256-200h64q17 0 28.5 11.5T360-160q0 17-11.5 28.5T320-120H160q-17 0-28.5-11.5T120-160v-160q0-17 11.5-28.5T160-360q17 0 28.5 11.5T200-320v64l96-96q11-11 28-11t28 11q11 11 11 28t-11 28l-96 96Zm448 0-96-96q-11-11-11-28t11-28q11-11 28-11t28 11l96 96v-64q0-17 11.5-28.5T800-360q17 0 28.5 11.5T840-320v160q0 17-11.5 28.5T800-120H640q-17 0-28.5-11.5T600-160q0-17 11.5-28.5T640-200h64ZM200-704v64q0 17-11.5 28.5T160-600q-17 0-28.5-11.5T120-640v-160q0-17 11.5-28.5T160-840h160q17 0 28.5 11.5T360-800q0 17-11.5 28.5T320-760h-64l96 96q11 11 11 28t-11 28q-11 11-28 11t-28-11l-96-96Zm560 0-96 96q-11 11-28 11t-28-11q-11-11-11-28t11-28l96-96h-64q-17 0-28.5-11.5T600-800q0-17 11.5-28.5T640-840h160q17 0 28.5 11.5T840-800v160q0 17-11.5 28.5T800-600q-17 0-28.5-11.5T760-640v-64Z" }) })
 };
 function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx12.clsx(inputs));
+  return tailwindMerge.twMerge(clsx13.clsx(inputs));
 }
 function truncate(text, maxLength) {
   if (text.length <= maxLength) {
@@ -4553,7 +4553,7 @@ var Button2 = React5.forwardRef(function Button3({ className, variant, color: co
     {
       "data-variant": variant,
       ...props,
-      className: clsx12__default.default(classes, "cursor-pointer"),
+      className: clsx13__default.default(classes, "cursor-pointer"),
       ref,
       children: /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, { children })
     }
@@ -6012,7 +6012,7 @@ var BadgeButton = React5.forwardRef(function BadgeButton2({
   children,
   ...props
 }, ref) {
-  const classes = clsx12__default.default(className, focusOutline[color2], [
+  const classes = clsx13__default.default(className, focusOutline[color2], [
     // Base
     "group relative inline-flex rounded-sm",
     // Focus
@@ -6034,7 +6034,7 @@ var BadgeButton = React5.forwardRef(function BadgeButton2({
     {
       "data-variant": variant,
       ...props,
-      className: clsx12__default.default(classes, "cursor-pointer"),
+      className: clsx13__default.default(classes, "cursor-pointer"),
       ref,
       children: /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant, color: color2, size, children }) })
     }
@@ -14676,7 +14676,7 @@ function CodePreview({
           children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: clsx12.clsx(
+              className: clsx13.clsx(
                 "group mx-auto bg-white bg-gradient-to-r dark:bg-grey-900",
                 view === "desktop" && "w-full",
                 view === "tablet" && "max-w-lg",
@@ -14944,7 +14944,7 @@ function ColorCard({ name, token, hex: hex2, rgb: rgb2, hsl, oklch: oklch2, form
         {
           className: "flex h-24 w-full items-center justify-center",
           style: { backgroundColor: hex2 },
-          children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: clsx12.clsx("font-medium", isLightColor(hex2) ? "text-primary-950" : "text-white"), children: name })
+          children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: clsx13.clsx("font-medium", isLightColor(hex2) ? "text-primary-950" : "text-white"), children: name })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
@@ -15277,7 +15277,7 @@ function Heading({
       ...props,
       id: computedId,
       "data-anchor": true,
-      className: clsx12__default.default(
+      className: clsx13__default.default(
         className,
         trimClasses[trim],
         "m-0",
@@ -16357,6 +16357,2611 @@ function ColorPairingTool({
   const normalizedVisibleFormats = [...new Set(visibleFormats)];
   return /* @__PURE__ */ jsxRuntime.jsx(React5.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(ColorPairingToolLoading, {}), children: /* @__PURE__ */ jsxRuntime.jsx(ColorPairingToolContent, { visibleFormats: normalizedVisibleFormats }) });
 }
+function Text({ className, trim = "normal", size = 2, label = false, ...props }) {
+  const textSizeClasses = {
+    1: "text-[length:var(--font-size-1)] leading-[var(--line-height-28)] tracking-[var(--letter-spacing-0)]",
+    2: "text-[length:var(--font-size-2)] leading-[var(--line-height-24)] tracking-[var(--letter-spacing-0)]",
+    3: "text-[length:var(--font-size-3)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]",
+    4: "text-[length:var(--font-size-4)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]"
+  };
+  const labelSizeClasses = {
+    1: "text-[length:var(--font-size-1)] leading-[var(--line-height-24)] tracking-[var(--letter-spacing-0)]",
+    2: "text-[length:var(--font-size-2)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]",
+    3: "text-[length:var(--font-size-3)] leading-[var(--line-height-16)] tracking-[var(--letter-spacing-0)]",
+    4: "text-[length:var(--font-size-4)] leading-[var(--line-height-16)] tracking-[var(--letter-spacing-0)]"
+  };
+  const sizeClass = label ? labelSizeClasses[size] : textSizeClasses[size];
+  const trimClasses = {
+    normal: ["before:content-none after:content-none"],
+    start: [
+      'before:content-[""] before:table after:content-none',
+      "before:mb-[calc(var(--leading-trim-start,var(--default-leading-trim-start))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
+    ],
+    end: [
+      'before:content-none after:content-[""] after:table',
+      "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
+    ],
+    both: [
+      'before:content-[""] before:table after:content-[""] after:table',
+      "before:mb-[calc(var(--leading-trim-start,var(--default-leading-trim-start))-var(--line-height,calc(1em*var(--default-line-height)))/2)]",
+      "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
+    ]
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      "data-slot": "text",
+      ...props,
+      className: clsx13__default.default(className, trimClasses[trim], "text-grey-800 dark:text-grey-400", sizeClass)
+    }
+  );
+}
+function TextLink({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Link,
+    {
+      ...props,
+      className: clsx13__default.default(
+        className,
+        "text-primary-800 underline decoration-primary-800/50 data-hover:decoration-primary-800 dark:text-white dark:decoration-white/50 dark:data-hover:decoration-white"
+      )
+    }
+  );
+}
+function Strong({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("strong", { ...props, className: clsx13__default.default(className, "font-medium text-grey-950 dark:text-white") });
+}
+function Code({ className, ...props }) {
+  const hasLanguageClass = typeof className === "string" && className.includes("language-");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "code",
+    {
+      ...props,
+      className: clsx13__default.default(
+        className,
+        !hasLanguageClass && "language-plaintext",
+        "text-sm sm:text-[0.8125rem]"
+      )
+    }
+  );
+}
+var PREFERRED_BACKGROUND_TONES2 = [400, 600, 200, 800, 100, 50];
+var DEFAULT_VISIBLE_FORMATS2 = ["hex", "rgb", "hsl", "oklch"];
+var DEFAULT_INITIAL_BACKGROUND_TOKEN2 = "nsw-blue-800";
+var DEFAULT_INITIAL_PAIR_ID2 = "nsw-blue-800:nsw-blue-200";
+function getToneFromToken2(token) {
+  if (!token) return null;
+  const match = token.match(/-(\d+)$/);
+  return match ? Number.parseInt(match[1], 10) : null;
+}
+function getFamilySwatchColor2(family, preferredTone = 600) {
+  const exactMatch = family.colors.find((color2) => color2.tone === preferredTone);
+  if (exactMatch) {
+    return exactMatch.hex;
+  }
+  const closestMatch = [...family.colors].sort(
+    (left, right) => Math.abs(left.tone - preferredTone) - Math.abs(right.tone - preferredTone)
+  )[0];
+  return closestMatch?.hex ?? "transparent";
+}
+function getFamilySelectorLabel2(family, themeCategory, selectionRole) {
+  if (themeCategory !== "aboriginal") {
+    return family.label;
+  }
+  const preferredTone = selectionRole === "primary colour" ? 800 : 600;
+  return family.colors.find((color2) => color2.tone === preferredTone)?.name ?? family.label;
+}
+function getPairingColorDisplayName2(color2) {
+  return color2.name ?? color2.token;
+}
+function isWhiteForegroundPair2(pair) {
+  return pair.foreground.token === "white";
+}
+function getWhiteForegroundGuidance2(pair) {
+  if (pair.passes.aaaText) {
+    return "White is approved for headings, body copy, and calls to action on this background.";
+  }
+  if (pair.passes.aaaLarge) {
+    return "Use white only for WCAG large text on this background, such as headings at 24px+ or bold text at 18.5px+. Keep sentence-case body copy at 16px+ and use a darker recommended foreground instead.";
+  }
+  return "Do not use white on this background. Choose one of the recommended foregrounds below instead.";
+}
+function getPreviewGuidance2(pair, isRecommended) {
+  if (!isWhiteForegroundPair2(pair)) {
+    return "Use only AAA-recommended combinations across your selected primary, accent, and grey families.";
+  }
+  if (isRecommended) {
+    return "Use white text on dark colour only when it meets AAA for headings, body copy, and calls to action.";
+  }
+  return getWhiteForegroundGuidance2(pair);
+}
+function getReadableTextColor(tone) {
+  return tone >= 600 ? "#ffffff" : "#002664";
+}
+function getPreferredPairForBackground2(pairs, preferredPairId) {
+  if (preferredPairId) {
+    const preferredPair = pairs.find((pair) => pair.id === preferredPairId);
+    if (preferredPair) {
+      return preferredPair;
+    }
+  }
+  return pairs.find((pair) => !isWhiteForegroundPair2(pair)) ?? pairs[0] ?? null;
+}
+function getDefaultBackgroundToken2(context) {
+  for (const tone of PREFERRED_BACKGROUND_TONES2) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find(
+        (background) => background.tone === tone && (context.pairsByBackground[background.token]?.length ?? 0) > 0
+      );
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  for (const tone of PREFERRED_BACKGROUND_TONES2) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find((background) => background.tone === tone);
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  return context.backgrounds[0]?.token ?? "";
+}
+function resolveBackgroundToken2(context, preferredToken, preferredTone) {
+  if (preferredToken && context.backgrounds.some((background) => background.token === preferredToken)) {
+    return preferredToken;
+  }
+  if (preferredTone !== null && preferredTone !== void 0) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find((background) => background.tone === preferredTone);
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  return getDefaultBackgroundToken2(context);
+}
+function getInitialPairingState2(searchParams) {
+  const paletteParam = searchParams.get("palette");
+  const primaryParam = searchParams.get("primary");
+  const accentParam = searchParams.get("accent");
+  const pairParam = searchParams.get("pair");
+  const backgroundParam = searchParams.get("background");
+  const themeCategory = paletteParam === "brand" || paletteParam === "aboriginal" ? paletteParam : "brand";
+  const context = getPairingContext(themeCategory, primaryParam, accentParam);
+  const shouldUseDefaultBrandExample = !backgroundParam && !pairParam && themeCategory === "brand" && context.primary.key === "blue" && context.accent.key === "red";
+  const defaultBackgroundToken = shouldUseDefaultBrandExample ? context.backgrounds.some(
+    (background) => background.token === DEFAULT_INITIAL_BACKGROUND_TOKEN2
+  ) ? DEFAULT_INITIAL_BACKGROUND_TOKEN2 : null : null;
+  const defaultPairId = shouldUseDefaultBrandExample && defaultBackgroundToken && context.pairsByBackground[defaultBackgroundToken]?.some(
+    (pair) => pair.id === DEFAULT_INITIAL_PAIR_ID2
+  ) ? DEFAULT_INITIAL_PAIR_ID2 : null;
+  const pairBackgroundToken = context.recommendedPairs.find((pair) => pair.id === pairParam)?.background.token ?? null;
+  const selectedBackgroundToken = resolveBackgroundToken2(
+    context,
+    backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken,
+    getToneFromToken2(backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken)
+  );
+  const selectedPairId = getPreferredPairForBackground2(
+    context.pairsByBackground[selectedBackgroundToken] ?? [],
+    pairParam ?? defaultPairId
+  )?.id ?? "";
+  return {
+    accentKey: context.accent.key,
+    primaryKey: context.primary.key,
+    selectedBackgroundToken,
+    selectedPairId,
+    themeCategory
+  };
+}
+function ColorPairingToolV2Loading() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8 lg:grid-cols-[18rem_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 bg-grey-50/70 p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 rounded-sm bg-grey-100" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-40 rounded-sm bg-grey-100" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-52 rounded-sm bg-grey-100" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 rounded-sm bg-grey-100" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 rounded-sm bg-grey-100" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-40 rounded-sm bg-grey-100" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-44 rounded-sm bg-grey-100" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-44 rounded-sm bg-grey-100" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-44 rounded-sm bg-grey-100" })
+      ] })
+    ] })
+  ] });
+}
+function SidebarStep({
+  children,
+  description,
+  step,
+  title
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[0.72rem] font-semibold tracking-[0.12em] text-muted-foreground uppercase", children: [
+        "Step ",
+        step
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, size: 6, className: "text-foreground", trim: "normal", children: title }),
+      description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm/6 text-muted-foreground", children: description }) : null
+    ] }),
+    children
+  ] });
+}
+function PreviewHeroCard({
+  familySummary,
+  isRecommended,
+  pair
+}) {
+  const whiteForeground = isWhiteForegroundPair2(pair);
+  const statusLabel = isRecommended ? "Pass" : pair.passes.aaaLarge ? "Large text only" : "Example only";
+  const StatusIcon = isRecommended ? Icons.check : Icons.info;
+  const fauxButtonStyle = {
+    "--btn-bg": pair.foreground.hex,
+    "--btn-border": pair.foreground.hex,
+    "--btn-text": pair.background.hex,
+    "--btn-icon": pair.background.hex,
+    "--btn-hover-overlay": pair.background.hex
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "gap-0 overflow-hidden py-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "p-6 sm:min-h-[26rem] sm:p-8",
+      style: {
+        backgroundColor: pair.background.hex,
+        color: pair.foreground.hex
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[22rem] flex-col justify-between gap-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[0.72rem] font-semibold tracking-[0.16em] uppercase",
+              style: {
+                borderColor: pair.foreground.hex,
+                backgroundColor: pair.foreground.hex,
+                color: pair.background.hex
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Icons.palette, { "data-slot": "icon", className: "size-4" }),
+                familySummary
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "inline-flex rounded-full border px-3 py-1 text-[0.72rem] font-semibold tracking-[0.16em] uppercase",
+              style: {
+                borderColor: pair.foreground.hex
+              },
+              children: [
+                pair.rating,
+                " ",
+                pair.contrastRatio.toFixed(2),
+                ":1"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-xl space-y-4 pb-12 sm:pb-16", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: whiteForeground && !isRecommended ? "White on colour example" : whiteForeground ? "White on colour" : "Colour on colour" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "max-w-lg text-4xl leading-none font-bold text-current sm:text-5xl", children: "Pair colour with confidence." }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-md text-base/6 sm:text-base/7", children: getPreviewGuidance2(pair, isRecommended) }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold",
+              style: {
+                backgroundColor: pair.foreground.hex,
+                color: pair.background.hex
+              },
+              children: [
+                statusLabel,
+                /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { "data-slot": "icon", className: "size-4" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "inline-flex rounded-full border px-4 py-2 text-sm",
+              style: {
+                borderColor: pair.foreground.hex
+              },
+              children: [
+                pair.background.token,
+                " / ",
+                pair.foreground.token
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  ) });
+}
+function PreviewFallbackCard2({ background }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "gap-0 overflow-hidden py-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "space-y-6 px-6 py-7 sm:px-8 sm:py-8",
+      style: {
+        backgroundColor: background.hex,
+        color: getReadableTextColor(background.tone)
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold", children: "Hero preview" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-xl space-y-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "max-w-lg text-3xl leading-tight font-bold sm:text-4xl", children: "No AAA combination available." }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-lg text-base/7", children: "This background tone is approved, but there are no recommended AAA foreground pairings available for it in the current tool." })
+        ] })
+      ]
+    }
+  ) });
+}
+function PairDetailCard2({
+  color: color2,
+  role,
+  visibleFormats
+}) {
+  const [, copyToClipboardRaw] = usehooks.useCopyToClipboard();
+  const [copiedField, setCopiedField] = React5.useState(null);
+  const copiedFieldTimeoutRef = React5.useRef(null);
+  const hasDisplayTone = color2.token !== "white";
+  const formatRows = visibleFormats.map((format) => ({
+    key: format,
+    label: format.toUpperCase(),
+    value: color2[format],
+    mono: true,
+    copyable: true
+  }));
+  const valueRows = [
+    { key: "token", label: "Token", value: color2.token, mono: true, copyable: true },
+    {
+      key: "tone",
+      label: "Tone",
+      value: hasDisplayTone ? String(color2.tone) : "Not applicable",
+      mono: false,
+      copyable: hasDisplayTone
+    },
+    ...formatRows
+  ];
+  React5.useEffect(() => {
+    return () => {
+      if (copiedFieldTimeoutRef.current) {
+        clearTimeout(copiedFieldTimeoutRef.current);
+      }
+    };
+  }, []);
+  const copyField = (field) => {
+    if (field === "tone" && !hasDisplayTone) {
+      return;
+    }
+    const fieldValue = valueRows.find((row) => row.key === field)?.value;
+    if (!fieldValue) return;
+    copyToClipboardRaw(fieldValue);
+    setCopiedField(field);
+    const toastLabel = valueRows.find((row) => row.key === field)?.label ?? "Value";
+    sonner.toast(`${toastLabel} copied to clipboard`, {
+      duration: 2e3
+    });
+    if (copiedFieldTimeoutRef.current) {
+      clearTimeout(copiedFieldTimeoutRef.current);
+    }
+    copiedFieldTimeoutRef.current = setTimeout(() => {
+      setCopiedField(null);
+      copiedFieldTimeoutRef.current = null;
+    }, 2e3);
+  };
+  const renderCopyButton = (field, srLabel, className) => /* @__PURE__ */ jsxRuntime.jsxs(
+    Button2,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: cn("shrink-0", className),
+      onClick: () => copyField(field),
+      children: [
+        copiedField === field ? /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-5" }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: srLabel })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "gap-0 pb-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-4 border-b", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: role }),
+        /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: color2.name ?? color2.token })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "h-14 w-full rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
+          style: { backgroundColor: color2.hex }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "px-0 pb-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-grey-100 dark:divide-grey-800", children: valueRows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4 px-6 py-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: row.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: cn(
+              "mt-2 min-w-0 text-base text-foreground",
+              row.mono && "font-mono text-sm break-all sm:text-base"
+            ),
+            children: row.value
+          }
+        )
+      ] }),
+      row.copyable ? renderCopyButton(
+        row.key,
+        `Copy ${role.toLowerCase()} ${row.label.toLowerCase()}`,
+        "mt-0.5"
+      ) : null
+    ] }, row.key)) }) })
+  ] });
+}
+function AccessibilityScoreCard({ pair }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "gap-0 py-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 px-6 py-6 sm:flex-row sm:items-end sm:justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: "Accessibility score" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-5xl leading-none font-bold text-foreground", children: pair ? `${pair.contrastRatio.toFixed(2)}:1` : "N/A" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-muted-foreground", children: "Contrast ratio" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: cn(
+            "inline-flex items-center gap-2 rounded-full px-4 py-2 text-base font-semibold",
+            pair ? "bg-success-700 text-white" : "border border-grey-300 bg-background text-foreground"
+          ),
+          children: pair ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            "Pass AAA",
+            /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-5" })
+          ] }) : "No AAA result"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-grey-200 px-6 py-4 dark:border-grey-700", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: pair ? "Meets WCAG 2.1 AAA standards for large and normal text." : "Choose a different approved background tone to review recommended AAA pairings." }) })
+  ] });
+}
+function RecommendedPairCard({
+  isSelected,
+  onSelect,
+  pair
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-label": `Use ${getPairingColorDisplayName2(pair.foreground)} on ${getPairingColorDisplayName2(pair.background)}`,
+      "aria-pressed": isSelected,
+      onClick: onSelect,
+      className: cn(
+        "overflow-hidden rounded-sm border bg-background text-left transition-colors",
+        isSelected ? "border-primary-700 ring-2 ring-primary-700 ring-offset-2 ring-offset-background" : "border-grey-200 hover:border-grey-400 dark:border-grey-700 dark:hover:border-grey-500"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "min-h-32 space-y-3 px-4 py-4",
+            style: {
+              backgroundColor: pair.background.hex,
+              color: pair.foreground.hex
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[0.68rem] font-semibold tracking-[0.12em] uppercase opacity-90", children: [
+                pair.background.token,
+                " / ",
+                pair.foreground.token
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl leading-tight font-bold", children: getPairingColorDisplayName2(pair.foreground) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm/6 opacity-90", children: [
+                  pair.foreground.familyLabel,
+                  " on ",
+                  pair.background.familyLabel
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 px-4 py-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold text-foreground", children: [
+            pair.contrastRatio.toFixed(2),
+            ":1"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-success-50 px-2.5 py-1 text-xs font-semibold text-success-800 dark:bg-success-950/30 dark:text-success-200", children: "AAA" })
+        ] })
+      ]
+    }
+  );
+}
+function ColorPairingToolV2Content({ visibleFormats }) {
+  const searchParams = navigation.useSearchParams();
+  const [initialState] = React5.useState(() => getInitialPairingState2(searchParams));
+  const [themeCategory, setThemeCategory] = React5.useState(initialState.themeCategory);
+  const [primaryFamilyKey, setPrimaryFamilyKey] = React5.useState(initialState.primaryKey);
+  const [accentFamilyKey, setAccentFamilyKey] = React5.useState(initialState.accentKey);
+  const [selectedBackgroundToken, setSelectedBackgroundToken] = React5.useState(
+    initialState.selectedBackgroundToken
+  );
+  const [selectedPairId, setSelectedPairId] = React5.useState(initialState.selectedPairId);
+  const themeFamilies = React5.useMemo(() => getPairingFamilies(themeCategory), [themeCategory]);
+  const context = React5.useMemo(
+    () => getPairingContext(themeCategory, primaryFamilyKey, accentFamilyKey),
+    [themeCategory, primaryFamilyKey, accentFamilyKey]
+  );
+  const selectableFamilies = React5.useMemo(
+    () => themeFamilies.filter((family) => family.key !== context.grey.key),
+    [themeFamilies, context.grey.key]
+  );
+  const selectableAccentFamilies = React5.useMemo(
+    () => selectableFamilies.filter((family) => family.key !== context.primary.key),
+    [selectableFamilies, context.primary.key]
+  );
+  const selectedBackground = React5.useMemo(
+    () => context.backgrounds.find((background) => background.token === selectedBackgroundToken) ?? context.backgrounds[0] ?? null,
+    [context.backgrounds, selectedBackgroundToken]
+  );
+  const selectedBackgroundPairs = React5.useMemo(
+    () => selectedBackground ? context.pairsByBackground[selectedBackground.token] ?? [] : [],
+    [context.pairsByBackground, selectedBackground]
+  );
+  const selectedPair = React5.useMemo(
+    () => getPreferredPairForBackground2(selectedBackgroundPairs, selectedPairId),
+    [selectedBackgroundPairs, selectedPairId]
+  );
+  const detailForeground = selectedPair?.foreground ?? null;
+  const familySummary = React5.useMemo(
+    () => [context.primary.label, context.accent.label, context.grey.label].join(" + "),
+    [context.primary.label, context.accent.label, context.grey.label]
+  );
+  const updateUrlParams = (nextThemeCategory, nextPrimaryKey, nextAccentKey, nextSelectedBackgroundToken, nextSelectedPairId) => {
+    const params = new URLSearchParams(window.location.search);
+    params.delete("family");
+    params.set("palette", nextThemeCategory);
+    params.set("primary", nextPrimaryKey);
+    params.set("accent", nextAccentKey);
+    params.set("background", nextSelectedBackgroundToken);
+    if (nextSelectedPairId) {
+      params.set("pair", nextSelectedPairId);
+    } else {
+      params.delete("pair");
+    }
+    window.history.replaceState(
+      null,
+      "",
+      `${window.location.pathname}?${params.toString()}${window.location.hash}`
+    );
+  };
+  const syncSelection = (nextThemeCategory, nextPrimaryKey, nextAccentKey, preferredBackgroundToken, preferredPairId) => {
+    const nextContext = getPairingContext(nextThemeCategory, nextPrimaryKey, nextAccentKey);
+    const nextSelectedBackgroundToken = resolveBackgroundToken2(
+      nextContext,
+      preferredBackgroundToken,
+      getToneFromToken2(preferredBackgroundToken)
+    );
+    const nextSelectedPairId = getPreferredPairForBackground2(
+      nextContext.pairsByBackground[nextSelectedBackgroundToken] ?? [],
+      preferredPairId
+    )?.id ?? "";
+    setThemeCategory(nextThemeCategory);
+    setPrimaryFamilyKey(nextContext.primary.key);
+    setAccentFamilyKey(nextContext.accent.key);
+    setSelectedBackgroundToken(nextSelectedBackgroundToken);
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams(
+      nextThemeCategory,
+      nextContext.primary.key,
+      nextContext.accent.key,
+      nextSelectedBackgroundToken,
+      nextSelectedPairId
+    );
+  };
+  const handleThemeCategoryChange = (nextThemeCategory) => {
+    syncSelection(
+      nextThemeCategory,
+      primaryFamilyKey,
+      accentFamilyKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+  };
+  const handlePrimaryColorChange = (nextPrimaryKey) => {
+    const nextAccentKey = nextPrimaryKey === accentFamilyKey ? getDefaultAccentFamilyKey(themeCategory, nextPrimaryKey) : accentFamilyKey;
+    syncSelection(
+      themeCategory,
+      nextPrimaryKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+  };
+  const handleAccentColorChange = (nextAccentKey) => {
+    if (nextAccentKey === primaryFamilyKey) return;
+    syncSelection(
+      themeCategory,
+      primaryFamilyKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+  };
+  const handleBackgroundChange = (nextSelectedBackgroundToken) => {
+    const nextSelectedPairId = getPreferredPairForBackground2(
+      context.pairsByBackground[nextSelectedBackgroundToken] ?? [],
+      selectedPairId
+    )?.id ?? "";
+    setSelectedBackgroundToken(nextSelectedBackgroundToken);
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams(
+      themeCategory,
+      context.primary.key,
+      context.accent.key,
+      nextSelectedBackgroundToken,
+      nextSelectedPairId
+    );
+  };
+  const handlePairChange = (nextSelectedPairId) => {
+    if (!selectedBackground) return;
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams(
+      themeCategory,
+      context.primary.key,
+      context.accent.key,
+      selectedBackground.token,
+      nextSelectedPairId
+    );
+  };
+  if (!selectedBackground) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "No approved background tones available" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-base text-muted-foreground", children: "No approved tones are available for the current palette." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8 lg:grid-cols-[18rem_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "bg-grey-50/60 p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "Configuration" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, children: "Choose a palette, set your primary and accent families, then select an approved background." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(SidebarStep, { step: 1, title: "Select your palette", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-2", children: ["brand", "aboriginal"].map((palette) => {
+        const isSelected = themeCategory === palette;
+        const label = palette === "brand" ? "Brand palette" : "Aboriginal palette";
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Select ${label}`,
+            "aria-pressed": isSelected,
+            onClick: () => handleThemeCategoryChange(palette),
+            className: cn(
+              "rounded-sm border px-3 py-2.5 text-left text-sm font-semibold transition-colors",
+              isSelected ? "border-primary-800 bg-primary-800 text-white" : "border-grey-300 bg-background text-foreground hover:border-primary-800 hover:bg-primary-50"
+            ),
+            children: label
+          },
+          palette
+        );
+      }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SidebarStep,
+        {
+          step: 2,
+          title: "Choose your colours",
+          description: "Grey is added automatically from the selected palette.",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: "Primary colour" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: selectableFamilies.map((family) => {
+                const swatchTone = 800;
+                const isSelected = family.key === context.primary.key;
+                const label = getFamilySelectorLabel2(family, themeCategory, "primary colour");
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Select ${label} as primary colour`,
+                    "aria-pressed": isSelected,
+                    onClick: () => handlePrimaryColorChange(family.key),
+                    className: cn(
+                      "min-h-11 rounded-sm border px-2 py-2 text-center text-[0.8rem] leading-5 font-semibold transition-transform",
+                      isSelected ? "ring-2 ring-primary-700 ring-offset-2 ring-offset-grey-50/60" : "hover:-translate-y-px"
+                    ),
+                    style: {
+                      backgroundColor: getFamilySwatchColor2(family, swatchTone),
+                      color: getReadableTextColor(swatchTone),
+                      borderColor: "rgba(0, 0, 0, 0.12)"
+                    },
+                    title: label,
+                    children: label
+                  },
+                  family.key
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: "Accent colour" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: selectableAccentFamilies.map((family) => {
+                const swatchTone = 600;
+                const isSelected = family.key === context.accent.key;
+                const label = getFamilySelectorLabel2(family, themeCategory, "accent colour");
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Select ${label} as accent colour`,
+                    "aria-pressed": isSelected,
+                    onClick: () => handleAccentColorChange(family.key),
+                    className: cn(
+                      "min-h-11 rounded-sm border px-2 py-2 text-center text-[0.8rem] leading-5 font-semibold transition-transform",
+                      isSelected ? "ring-2 ring-primary-700 ring-offset-2 ring-offset-grey-50/60" : "hover:-translate-y-px"
+                    ),
+                    style: {
+                      backgroundColor: getFamilySwatchColor2(family, swatchTone),
+                      color: getReadableTextColor(swatchTone),
+                      borderColor: "rgba(0, 0, 0, 0.12)"
+                    },
+                    title: label,
+                    children: label
+                  },
+                  family.key
+                );
+              }) })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(SidebarStep, { step: 3, title: "Pick a background", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+          "Selected:",
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-foreground", children: selectedBackground.token })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-2", children: context.backgrounds.map((background) => {
+          const hasPairs = (context.pairsByBackground[background.token]?.length ?? 0) > 0;
+          const isSelected = selectedBackground.token === background.token;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": hasPairs ? `Select ${background.token} background` : `Select ${background.token} background with no AAA pairings`,
+              "aria-pressed": isSelected,
+              onClick: () => handleBackgroundChange(background.token),
+              className: cn(
+                "relative aspect-square rounded-sm border transition-transform",
+                isSelected ? "ring-2 ring-primary-700 ring-offset-2 ring-offset-grey-50/60" : "hover:-translate-y-px",
+                !hasPairs && "opacity-80"
+              ),
+              style: {
+                backgroundColor: background.hex,
+                borderColor: "rgba(0, 0, 0, 0.14)"
+              },
+              title: background.token,
+              children: !hasPairs ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-1/2 left-1/2 h-0.5 w-5 -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-full bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.28)]" }) : null
+            },
+            background.token
+          );
+        }) })
+      ] }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "space-y-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "Live Preview & Results" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, children: "Review the selected pairing in context, then compare the available AAA combinations for your chosen background." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5", children: [
+        selectedPair ? /* @__PURE__ */ jsxRuntime.jsx(
+          PreviewHeroCard,
+          {
+            familySummary,
+            isRecommended: Boolean(selectedPair),
+            pair: selectedPair
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(PreviewFallbackCard2, { background: selectedBackground }),
+        /* @__PURE__ */ jsxRuntime.jsx(AccessibilityScoreCard, { pair: selectedPair })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "Recommended Combinations" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-base text-muted-foreground", children: [
+            "AAA-recommended foregrounds for",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-foreground", children: selectedBackground.token }),
+            "."
+          ] })
+        ] }),
+        selectedBackgroundPairs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3", children: selectedBackgroundPairs.map((pair) => /* @__PURE__ */ jsxRuntime.jsx(
+          RecommendedPairCard,
+          {
+            pair,
+            isSelected: selectedPair?.id === pair.id,
+            onSelect: () => handlePairChange(pair.id)
+          },
+          pair.id
+        )) }) : /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "gap-0 py-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 4, size: 6, className: "text-foreground", trim: "normal", children: "No recommended combinations" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-base text-muted-foreground", children: "Choose another approved background tone to review available AAA pairings." })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PairDetailCard2,
+          {
+            color: selectedBackground,
+            role: "Background",
+            visibleFormats
+          }
+        ),
+        detailForeground ? /* @__PURE__ */ jsxRuntime.jsx(
+          PairDetailCard2,
+          {
+            color: detailForeground,
+            role: "Foreground",
+            visibleFormats
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: "gap-3 border-b", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "Foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "No recommended foreground available" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Choose another approved tone or review the recommended foregrounds for the same background." }) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ColorPairingToolV2({
+  visibleFormats = DEFAULT_VISIBLE_FORMATS2
+} = {}) {
+  const normalizedVisibleFormats = [...new Set(visibleFormats)];
+  return /* @__PURE__ */ jsxRuntime.jsx(React5.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(ColorPairingToolV2Loading, {}), children: /* @__PURE__ */ jsxRuntime.jsx(ColorPairingToolV2Content, { visibleFormats: normalizedVisibleFormats }) });
+}
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Root, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Close, { "data-slot": "sheet-close", ...props });
+}
+function SheetPortal({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SheetPrimitive__namespace.Overlay,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showClose = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      SheetPrimitive__namespace.Content,
+      {
+        "data-slot": "sheet-content",
+        className: cn(
+          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=closed]:animate-out data-[state=open]:duration-500 data-[state=open]:animate-in",
+          side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          side === "top" && "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+          side === "bottom" && "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showClose && /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Close, { "data-slot": "sheet-close", className: "absolute top-4 right-4", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button2, { variant: "ghost", size: "icon", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icons.close, { className: "size-6", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "sheet-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SheetPrimitive__namespace.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("font-semibold text-foreground", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SheetPrimitive__namespace.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function useSelectorHeight(selector = "header") {
+  const [height, setHeight] = React5.useState(0);
+  const elementRef = React5.useRef(null);
+  const resizeObserverRef = React5.useRef(null);
+  React5.useEffect(() => {
+    const element = document.querySelector(selector);
+    if (!element) return;
+    elementRef.current = element;
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      const target = entry?.target ?? elementRef.current;
+      if (!target) return;
+      setHeight(target.offsetHeight);
+    });
+    resizeObserverRef.current = resizeObserver;
+    resizeObserver.observe(element);
+    return () => {
+      resizeObserverRef.current?.disconnect();
+    };
+  }, [selector]);
+  return height;
+}
+
+// src/hooks/useStickyOffset.ts
+function useStickyOffset(extraPadding = 0) {
+  const headerHeight = useSelectorHeight("#nsw-header");
+  const navigationHeight = useSelectorHeight("#nsw-main-navigation");
+  return React5.useMemo(() => {
+    const total = headerHeight + navigationHeight + extraPadding;
+    return total > 0 ? total : 0;
+  }, [extraPadding, headerHeight, navigationHeight]);
+}
+var PREFERRED_BACKGROUND_TONES3 = [400, 600, 200, 800, 100, 50];
+var DEFAULT_VISIBLE_FORMATS3 = ["hex", "rgb", "hsl", "oklch"];
+var DEFAULT_INITIAL_BACKGROUND_TOKEN3 = "nsw-blue-800";
+var DEFAULT_INITIAL_PAIR_ID3 = "nsw-blue-800:nsw-blue-200";
+var COLOR_PAIRING_TOOL_V3_PATH = "/core/colour/colour-pairing-tool-3";
+var AAA_NORMAL_TEXT_THRESHOLD2 = "7.0:1 for text below the WCAG large-text threshold. Sentence-case body copy should generally stay at 16px+ unless it is microcopy.";
+var AAA_LARGE_TEXT_THRESHOLD2 = "4.5:1 for WCAG large text: 24px+, or 18.5px+ bold";
+var MOBILE_RESULT_SCROLL_QUERY = "(max-width: 1023px)";
+var PERSISTENT_DRAWER_MIN_WIDTH_QUERY = "(min-width: 1280px)";
+var COLOR_PAIRING_TOOL_DRAWER_STEPS = [
+  {
+    id: "colours",
+    title: "Choose colours",
+    eyebrow: "Step 1 of 3",
+    description: "Select the palette, primary family, and accent family."
+  },
+  {
+    id: "backgrounds",
+    title: "Choose background",
+    eyebrow: "Step 2 of 3",
+    description: "Pick the background tone that you want to pair."
+  },
+  {
+    id: "combinations",
+    title: "Choose recommended combinations",
+    eyebrow: "Step 3 of 3",
+    description: "Select the foreground pairing that should drive the example."
+  }
+];
+var COLOR_PAIRING_TOOL_V3_ANALYTICS_EVENT = "nsw-colour-pairing-tool-v3";
+function getToneFromToken3(token) {
+  if (!token) return null;
+  const match = token.match(/-(\d+)$/);
+  return match ? Number.parseInt(match[1], 10) : null;
+}
+function getFamilySwatchColor3(family, preferredTone = 600) {
+  const exactMatch = family.colors.find((color2) => color2.tone === preferredTone);
+  if (exactMatch) {
+    return exactMatch.hex;
+  }
+  const closestMatch = [...family.colors].sort(
+    (left, right) => Math.abs(left.tone - preferredTone) - Math.abs(right.tone - preferredTone)
+  )[0];
+  return closestMatch?.hex ?? "transparent";
+}
+function getFamilySelectorLabel3(family, themeCategory, selectionRole) {
+  if (themeCategory !== "aboriginal") {
+    return family.label;
+  }
+  const preferredTone = selectionRole === "primary colour" ? 800 : 600;
+  return family.colors.find((color2) => color2.tone === preferredTone)?.name ?? family.label;
+}
+function getPairingColorDisplayName3(color2) {
+  return color2.name ?? `${color2.familyLabel} ${color2.tone}`;
+}
+function isWhiteForegroundPair3(pair) {
+  return pair.foreground.token === "white";
+}
+function isLargeTextOnlyPair(pair) {
+  return pair.passes.aaaLarge && !pair.passes.aaaText;
+}
+function getWhiteForegroundGuidance3(pair) {
+  if (pair.passes.aaaText) {
+    return "White is approved for headings, body copy, and calls to action on this background.";
+  }
+  if (pair.passes.aaaLarge) {
+    return "Use white only for WCAG large text on this background, such as headings at 24px+ or bold text at 18.5px+. Keep sentence-case body copy at 16px+ and use a darker recommended foreground instead.";
+  }
+  return "Do not use white on this background. Choose one of the recommended foregrounds below instead.";
+}
+function getPreviewGuidance3(pair, isRecommended) {
+  if (!isWhiteForegroundPair3(pair)) {
+    return "Use only AAA-recommended combinations across your selected primary, accent, and grey families.";
+  }
+  if (isRecommended) {
+    return "Use white text on dark colour only when it meets AAA for headings, body copy, and calls to action.";
+  }
+  return getWhiteForegroundGuidance3(pair);
+}
+function getPreferredPairForBackground3(pairs, preferredPairId) {
+  if (preferredPairId) {
+    const preferredPair = pairs.find((pair) => pair.id === preferredPairId);
+    if (preferredPair) {
+      return preferredPair;
+    }
+  }
+  return pairs.find((pair) => !isWhiteForegroundPair3(pair)) ?? pairs[0] ?? null;
+}
+function getDefaultBackgroundToken3(context) {
+  for (const tone of PREFERRED_BACKGROUND_TONES3) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find(
+        (background) => background.tone === tone && (context.pairsByBackground[background.token]?.length ?? 0) > 0
+      );
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  for (const tone of PREFERRED_BACKGROUND_TONES3) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find((background) => background.tone === tone);
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  return context.backgrounds[0]?.token ?? "";
+}
+function resolveBackgroundToken3(context, preferredToken, preferredTone) {
+  if (preferredToken && context.backgrounds.some((background) => background.token === preferredToken)) {
+    return preferredToken;
+  }
+  if (preferredTone !== null && preferredTone !== void 0) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find((background) => background.tone === preferredTone);
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  return getDefaultBackgroundToken3(context);
+}
+function getInitialPairingState3(searchParams) {
+  const paletteParam = searchParams.get("palette");
+  const primaryParam = searchParams.get("primary");
+  const accentParam = searchParams.get("accent");
+  const pairParam = searchParams.get("pair");
+  const backgroundParam = searchParams.get("background");
+  const themeCategory = paletteParam === "brand" || paletteParam === "aboriginal" ? paletteParam : "brand";
+  const context = getPairingContext(themeCategory, primaryParam, accentParam);
+  const shouldUseDefaultBrandExample = !backgroundParam && !pairParam && themeCategory === "brand" && context.primary.key === "blue" && context.accent.key === "red";
+  const defaultBackgroundToken = shouldUseDefaultBrandExample ? context.backgrounds.some(
+    (background) => background.token === DEFAULT_INITIAL_BACKGROUND_TOKEN3
+  ) ? DEFAULT_INITIAL_BACKGROUND_TOKEN3 : null : null;
+  const defaultPairId = shouldUseDefaultBrandExample && defaultBackgroundToken && context.pairsByBackground[defaultBackgroundToken]?.some(
+    (pair) => pair.id === DEFAULT_INITIAL_PAIR_ID3
+  ) ? DEFAULT_INITIAL_PAIR_ID3 : null;
+  const pairBackgroundToken = context.recommendedPairs.find((pair) => pair.id === pairParam)?.background.token ?? null;
+  const selectedBackgroundToken = resolveBackgroundToken3(
+    context,
+    backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken,
+    getToneFromToken3(backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken)
+  );
+  const selectedPairId = getPreferredPairForBackground3(
+    context.pairsByBackground[selectedBackgroundToken] ?? [],
+    pairParam ?? defaultPairId
+  )?.id ?? "";
+  return {
+    accentKey: context.accent.key,
+    primaryKey: context.primary.key,
+    selectedBackgroundToken,
+    selectedPairId,
+    themeCategory
+  };
+}
+function getReadableTextColor2(tone) {
+  return tone >= 600 ? "#ffffff" : "#002664";
+}
+function getBackgroundOptionName(background) {
+  return background.name ?? `${background.familyLabel} ${background.tone}`;
+}
+function getResultExplanation(pair, bestPair) {
+  if (!pair) {
+    return "No AAA-compliant foreground options available for this selection.";
+  }
+  if (pair.id === bestPair?.id) {
+    return "Meets AAA for normal and large text. This is the NSW-recommended starting point for this background.";
+  }
+  if (isWhiteForegroundPair3(pair) && isLargeTextOnlyPair(pair)) {
+    return "White meets AAA for large text on this background only. Use a darker foreground for standard body copy and smaller interface text.";
+  }
+  if (isWhiteForegroundPair3(pair) && !pair.passes.aaaLarge) {
+    return "White does not meet AAA for normal or large text on this background. Use another approved background or a darker foreground where one is available.";
+  }
+  return "Meets AAA for normal and large text. This is a valid alternative, while the recommended pairing remains the clearest default.";
+}
+function getBestRecommendationReason(pair, context) {
+  if (isWhiteForegroundPair3(pair)) {
+    return "Recommended because this background is dark enough to support white text at AAA contrast.";
+  }
+  if (pair.foreground.familyKey === pair.background.familyKey) {
+    return "Recommended because it stays within the same colour family while keeping clear AAA contrast.";
+  }
+  if (pair.foreground.familyKey === context.grey.key) {
+    return "Recommended because grey provides a strong neutral contrast without competing with the background.";
+  }
+  if (pair.foreground.familyKey === context.accent.key) {
+    return "Recommended because the selected accent family adds emphasis while preserving AAA contrast.";
+  }
+  if (pair.foreground.familyKey === context.primary.key) {
+    return "Recommended because the selected primary family gives the clearest AAA-compliant contrast for this background.";
+  }
+  return "Recommended because it is the clearest NSW-approved AAA pairing for this background.";
+}
+function getRecommendationCategory(pair, bestPair, context) {
+  if (pair.id === bestPair?.id) return "best";
+  if (isWhiteForegroundPair3(pair)) return "white";
+  if (pair.foreground.familyKey === pair.background.familyKey) return "same-family";
+  if (pair.foreground.familyKey === context.accent.key) return "accent-family";
+  if (pair.foreground.familyKey === context.grey.key) return "grey-option";
+  if (pair.foreground.familyKey === context.primary.key) return "primary-family";
+  return "approved";
+}
+function getRecommendationCategoryLabel(category) {
+  switch (category) {
+    case "best":
+      return "Best recommended";
+    case "same-family":
+      return "Same family";
+    case "accent-family":
+      return "Accent family";
+    case "grey-option":
+      return "Grey option";
+    case "primary-family":
+      return "Primary family";
+    case "white":
+      return "White";
+    default:
+      return "Approved option";
+  }
+}
+function getRecommendationSortRank(category) {
+  switch (category) {
+    case "best":
+      return 0;
+    case "same-family":
+      return 1;
+    case "accent-family":
+      return 2;
+    case "grey-option":
+      return 3;
+    case "white":
+      return 4;
+    case "primary-family":
+      return 5;
+    default:
+      return 6;
+  }
+}
+function getAvailabilityMeta(isSelected, hasPairs) {
+  if (isSelected && hasPairs) {
+    return {
+      description: "Selected background with AAA foreground options.",
+      icon: Icons.check_circle,
+      label: "Selected",
+      tone: "selected"
+    };
+  }
+  if (isSelected) {
+    return {
+      description: "Selected background with no AAA foreground options.",
+      icon: Icons.warning,
+      label: "Selected, no AAA",
+      tone: "unavailable"
+    };
+  }
+  if (hasPairs) {
+    return {
+      description: "AAA foreground options available.",
+      icon: Icons.radio_button_checked,
+      label: "Available",
+      tone: "available"
+    };
+  }
+  return {
+    description: "No AAA foreground available.",
+    icon: Icons.close,
+    label: "No AAA",
+    tone: "unavailable"
+  };
+}
+function getPairingCopyText(pair) {
+  return [
+    `Background: ${pair.background.token} (${pair.background.hex})`,
+    `Foreground: ${pair.foreground.token} (${pair.foreground.hex})`,
+    `Contrast ratio: ${pair.contrastRatio.toFixed(2)}:1`,
+    "Accessibility: Meets AAA for normal and large text"
+  ].join("\n");
+}
+function getLiveAnnouncement(pair, background) {
+  if (!background) {
+    return "No approved background tones available.";
+  }
+  if (!pair) {
+    return `${background.token} selected. No AAA-compliant foreground options available for this selection.`;
+  }
+  if (isWhiteForegroundPair3(pair) && isLargeTextOnlyPair(pair)) {
+    return `${background.token} with white. Contrast ratio ${pair.contrastRatio.toFixed(2)} to 1. Meets AAA for large text only.`;
+  }
+  if (isWhiteForegroundPair3(pair) && !pair.passes.aaaLarge) {
+    return `${background.token} with white. Contrast ratio ${pair.contrastRatio.toFixed(2)} to 1. Fails AAA for normal and large text.`;
+  }
+  return `${background.token} with ${pair.foreground.token}. Contrast ratio ${pair.contrastRatio.toFixed(2)} to 1. Meets AAA for normal and large text.`;
+}
+function formatValueRows(color2, visibleFormats) {
+  const hasDisplayTone = color2.token !== "white";
+  return [
+    { key: "token", label: "Token", value: color2.token, copyable: true },
+    {
+      key: "tone",
+      label: "Tone",
+      value: hasDisplayTone ? String(color2.tone) : "Not applicable",
+      copyable: hasDisplayTone
+    },
+    ...visibleFormats.map((format) => ({
+      key: format,
+      label: format.toUpperCase(),
+      value: color2[format],
+      copyable: true
+    }))
+  ];
+}
+function SelectorButton({
+  description,
+  isSelected,
+  label,
+  onClick,
+  swatch
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": isSelected,
+      onClick,
+      className: cn(
+        "w-full rounded-sm border px-3 py-3 text-left transition-colors focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+        isSelected ? "border-primary-800 bg-primary-50" : "border-grey-300 bg-white hover:border-primary-500 hover:bg-grey-50"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+        swatch ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "mt-0.5 size-4 shrink-0 rounded-full border border-black/10",
+            style: { backgroundColor: swatch }
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: label }),
+          description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs/5 text-muted-foreground", children: description }) : null
+        ] })
+      ] })
+    }
+  );
+}
+function BackgroundSwatchButton({
+  background,
+  hasPairs,
+  isSelected,
+  onClick
+}) {
+  const status = getAvailabilityMeta(isSelected, hasPairs);
+  const StatusIcon = status.icon;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": isSelected,
+      "aria-label": `Select ${background.token} background. ${status.description}`,
+      onClick,
+      className: cn(
+        "w-full rounded-sm border bg-white p-3 text-left transition-colors focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+        isSelected ? "border-primary-800 bg-primary-50" : hasPairs ? "border-grey-300 hover:border-primary-500 hover:bg-grey-50" : "border-grey-300 hover:border-grey-500"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: getBackgroundOptionName(background) }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 font-mono text-[0.72rem] break-all text-muted-foreground", children: background.token })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center gap-1 rounded-sm border px-2 py-1 text-[0.68rem] font-semibold uppercase",
+                status.tone === "selected" && "border-primary-800 bg-primary-800 text-white dark:border-primary-500 dark:bg-primary-500",
+                status.tone === "available" && "border-grey-300 bg-grey-50 text-foreground",
+                status.tone === "unavailable" && "border-danger-300 bg-danger-50 text-danger-900 dark:border-danger-800 dark:bg-danger-950/20 dark:text-danger-200"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { "data-slot": "icon", className: "size-4" }),
+                status.label
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 overflow-hidden rounded-[2px] border border-black/10", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-14 w-full", style: { backgroundColor: background.hex } }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-xs/5 text-muted-foreground", children: status.description })
+      ]
+    }
+  );
+}
+function ResultSummaryTile({
+  children,
+  className,
+  label
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-sm border border-grey-200 bg-white px-4 py-4 sm:px-5", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-grey-700", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3", children })
+  ] });
+}
+function AccessibilityCheckTile({
+  className,
+  label,
+  passes,
+  threshold
+}) {
+  const status = passes === null ? "unavailable" : passes ? "pass" : "fail";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-sm border px-4 py-4 sm:px-5",
+        className,
+        status === "pass" && "border-success-200 bg-success-50",
+        status === "fail" && "border-danger-200 bg-danger-50",
+        status === "unavailable" && "border-grey-200 bg-white"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm/6 text-muted-foreground", children: status === "unavailable" ? "No contrast ratio available for this result." : threshold })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: cn(
+              "inline-flex items-center gap-1 rounded-sm px-2.5 py-1 text-[0.72rem] font-semibold tracking-[0.12em] uppercase",
+              status === "pass" && "bg-success-700 text-white",
+              status === "fail" && "bg-danger-700 text-white",
+              status === "unavailable" && "bg-grey-100 text-foreground"
+            ),
+            children: [
+              status === "pass" ? /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-4" }) : status === "fail" ? /* @__PURE__ */ jsxRuntime.jsx(Icons.close, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.info, { "data-slot": "icon", className: "size-4" }),
+              status === "pass" ? "Pass" : status === "fail" ? "Fail" : "Unavailable"
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function ResultColorSummary({
+  color: color2,
+  fallbackLabel
+}) {
+  if (!color2) {
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: fallbackLabel ?? "Not available" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "mt-1 size-6 shrink-0 rounded-full border border-black/10",
+        style: { backgroundColor: color2.hex }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "leading-7 font-semibold text-foreground", children: getPairingColorDisplayName3(color2) }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 font-mono text-sm break-all text-muted-foreground", children: color2.token })
+    ] })
+  ] });
+}
+function CurrentResultCard({
+  bestPair,
+  familySummary,
+  pair,
+  selectedBackground
+}) {
+  const previewForeground = pair?.foreground.hex ?? getReadableTextColor2(selectedBackground.tone);
+  const isRecommended = pair ? pair.id === bestPair?.id : false;
+  const whiteForeground = pair ? isWhiteForegroundPair3(pair) : false;
+  const statusLabel = pair ? pair.passes.aaaText ? "Pass" : pair.passes.aaaLarge ? "Large text only" : "Example only" : "No recommendation";
+  const fauxButtonStyle = pair ? {
+    "--btn-bg": pair.foreground.hex,
+    "--btn-border": pair.foreground.hex,
+    "--btn-text": pair.background.hex,
+    "--btn-icon": pair.background.hex,
+    "--btn-hover-overlay": pair.background.hex
+  } : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "gap-0 overflow-hidden py-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-grey-200 px-4 py-4 sm:px-6 sm:py-5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.72rem] font-semibold tracking-[0.12em] text-muted-foreground uppercase", children: "Current result" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 4, className: "text-foreground", trim: "normal", children: pair ? `${getPairingColorDisplayName3(pair.foreground)} on ${getPairingColorDisplayName3(pair.background)}` : `${getPairingColorDisplayName3(selectedBackground)} selected` })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, className: "max-w-3xl text-grey-700", children: getResultExplanation(pair, bestPair) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "p-4 sm:min-h-[26rem] sm:p-8",
+        style: {
+          backgroundColor: selectedBackground.hex,
+          color: previewForeground
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[18rem] flex-col justify-between gap-6 sm:min-h-[22rem] sm:gap-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[0.68rem] font-semibold tracking-[0.16em] uppercase sm:text-[0.72rem]",
+                style: {
+                  borderColor: pair ? pair.foreground.hex : "currentColor",
+                  backgroundColor: pair ? pair.foreground.hex : "transparent",
+                  color: pair ? pair.background.hex : "currentColor"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icons.palette, { "data-slot": "icon", className: "size-4" }),
+                  familySummary
+                ]
+              }
+            ),
+            pair ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                className: "inline-flex rounded-full border px-3 py-1 text-[0.68rem] font-semibold tracking-[0.16em] uppercase sm:text-[0.72rem]",
+                style: {
+                  borderColor: pair.foreground.hex
+                },
+                children: [
+                  pair.rating,
+                  " ",
+                  pair.contrastRatio.toFixed(2),
+                  ":1"
+                ]
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-xl space-y-4 pb-8 sm:pb-16", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: pair ? whiteForeground && !isRecommended ? "White on colour example" : whiteForeground ? "White on colour" : "Colour on colour" : "Approved background" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "max-w-lg text-3xl leading-tight font-bold text-current sm:text-5xl sm:leading-none", children: "Pair colour with confidence." }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-full text-base/6 sm:max-w-md sm:text-base/7", children: pair ? getPreviewGuidance3(pair, isRecommended) : "This approved background tone does not currently have a recommended AAA foreground in this tool. Choose another approved background tone to continue." }),
+              pair && fauxButtonStyle ? /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-variant": "solid",
+                  className: cn(
+                    buttonVariants({ variant: "solid", size: "default" }),
+                    "pointer-events-none cursor-default px-6 text-[16px] font-[700] select-none sm:px-6 sm:text-[16px] sm:font-[700]"
+                  ),
+                  style: fauxButtonStyle,
+                  children: "Get started"
+                }
+              ) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold",
+                style: pair ? {
+                  backgroundColor: pair.foreground.hex,
+                  color: pair.background.hex
+                } : {
+                  backgroundColor: "rgb(255 255 255 / 0.14)",
+                  color: "currentColor"
+                },
+                children: [
+                  statusLabel,
+                  pair && pair.passes.aaaText ? /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.info, { "data-slot": "icon", className: "size-4" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "inline-flex max-w-full rounded-full border px-4 py-2 text-[0.82rem] break-all sm:text-sm",
+                style: {
+                  borderColor: pair ? pair.foreground.hex : "currentColor"
+                },
+                children: pair ? `${pair.background.token} / ${pair.foreground.token}` : selectedBackground.token
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-5 border-t border-grey-200 bg-grey-50 px-4 py-5 sm:px-6 sm:py-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ResultSummaryTile, { label: "Background", children: /* @__PURE__ */ jsxRuntime.jsx(ResultColorSummary, { color: selectedBackground }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ResultSummaryTile, { label: "Foreground", children: /* @__PURE__ */ jsxRuntime.jsx(
+        ResultColorSummary,
+        {
+          color: pair?.foreground,
+          fallbackLabel: "No AAA foreground available"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ResultSummaryTile, { label: "Contrast ratio", className: "lg:col-span-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4xl leading-none font-bold text-foreground", children: pair ? `${pair.contrastRatio.toFixed(2)}:1` : "N/A" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: pair ? pair.passes.aaaText ? "Meets AAA accessibility" : pair.passes.aaaLarge ? "Meets AAA for large text only" : "Does not meet accessibility requirements" : "Does not meet accessibility requirements" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AccessibilityCheckTile,
+        {
+          className: "lg:col-span-2",
+          label: "AAA normal text",
+          passes: pair ? pair.passes.aaaText : null,
+          threshold: AAA_NORMAL_TEXT_THRESHOLD2
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AccessibilityCheckTile,
+        {
+          className: "lg:col-span-2",
+          label: "AAA large text",
+          passes: pair ? pair.passes.aaaLarge : null,
+          threshold: AAA_LARGE_TEXT_THRESHOLD2
+        }
+      )
+    ] }) })
+  ] });
+}
+function BestRecommendationCard({
+  copiedKey,
+  isCurrentSelection,
+  onCopyPairing,
+  onUsePairing,
+  pair,
+  reason
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "gap-5 border-primary-200 bg-primary-50/60 px-6 py-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2 rounded-sm bg-primary-800 px-3 py-1 text-[0.72rem] font-semibold tracking-[0.12em] text-white uppercase", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icons.check_circle, { "data-slot": "icon", className: "size-4" }),
+            "Best recommended pairing"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex rounded-sm border border-primary-300 px-3 py-1 text-[0.72rem] font-semibold tracking-[0.12em] text-primary-900 uppercase", children: [
+            pair.contrastRatio.toFixed(2),
+            ":1"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: [
+            pair.background.token,
+            " / ",
+            pair.foreground.token
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, className: "max-w-3xl text-grey-700", children: reason })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center", children: [
+        isCurrentSelection ? null : /* @__PURE__ */ jsxRuntime.jsx(
+          Button2,
+          {
+            className: "w-full justify-center sm:w-auto sm:min-w-56",
+            color: "primary",
+            onClick: onUsePairing,
+            "aria-label": `Use ${pair.foreground.token} on ${pair.background.token}`,
+            children: "Use best recommendation"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Button2,
+          {
+            className: "w-full justify-center sm:w-auto sm:min-w-48",
+            variant: "outline",
+            color: "grey",
+            onClick: onCopyPairing,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+              copiedKey === "best-pairing" ? "Pairing copied" : "Copy pairing"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ResultSummaryTile, { label: "Background", children: /* @__PURE__ */ jsxRuntime.jsx(ResultColorSummary, { color: pair.background }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ResultSummaryTile, { label: "Foreground", children: /* @__PURE__ */ jsxRuntime.jsx(ResultColorSummary, { color: pair.foreground }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ResultSummaryTile, { label: "Accessibility", className: "md:col-span-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl leading-8 font-semibold text-foreground", children: "Meets AAA accessibility" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-base/7 text-muted-foreground", children: "Best NSW default for this background." })
+      ] })
+    ] })
+  ] });
+}
+function RecommendationCard({
+  copiedKey,
+  isSelected,
+  item,
+  onCopyPairing,
+  onSelect
+}) {
+  const { pair } = item;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "relative rounded-sm border bg-white p-4 text-left transition-colors focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+        isSelected ? "border-primary-800 bg-primary-50/50" : "border-grey-200 hover:border-primary-500 hover:bg-grey-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": isSelected,
+            "aria-label": `Use ${pair.foreground.token} on ${pair.background.token}`,
+            onClick: onSelect,
+            className: "absolute inset-0 rounded-sm focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none relative z-10", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                className: cn(
+                  "inline-flex items-center gap-2 rounded-sm px-2.5 py-1 text-[0.68rem] font-semibold tracking-[0.12em] uppercase",
+                  item.category === "best" ? "bg-primary-800 text-white" : "border border-grey-300 bg-grey-50 text-foreground"
+                ),
+                children: [
+                  item.category === "best" ? /* @__PURE__ */ jsxRuntime.jsx(Icons.check_circle, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.info, { "data-slot": "icon", className: "size-4" }),
+                  item.categoryLabel
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto shrink-0 self-start", children: /* @__PURE__ */ jsxRuntime.jsxs(
+              Button2,
+              {
+                variant: "ghost",
+                color: "grey",
+                size: "sm",
+                onClick: onCopyPairing,
+                "aria-label": `Copy pairing ${pair.background.token} and ${pair.foreground.token}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+                  copiedKey === `pair:${pair.id}` ? "Copied" : "Copy"
+                ]
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 sm:grid-cols-[4rem_minmax(0,1fr)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded-[2px] border border-black/10", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-16 w-full", style: { backgroundColor: pair.background.hex } }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-full", style: { backgroundColor: pair.foreground.hex } })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-semibold text-foreground", children: getPairingColorDisplayName3(pair.foreground) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 font-mono text-[0.74rem] break-all text-muted-foreground", children: pair.foreground.token })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                  pair.foreground.familyLabel,
+                  " on ",
+                  pair.background.familyLabel
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex flex-col items-start gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex rounded-sm border border-grey-300 px-2.5 py-1 text-sm font-semibold text-foreground", children: [
+                  pair.contrastRatio.toFixed(2),
+                  ":1"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex rounded-sm bg-success-700 px-2.5 py-1 text-[0.72rem] font-semibold tracking-[0.12em] text-white uppercase", children: "AAA" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-primary-800", children: isSelected ? "Selected" : "Use pairing" })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function TechnicalDetailsPanel({
+  color: color2,
+  copiedKey,
+  onCopyValue,
+  title,
+  visibleFormats
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-sm border border-grey-200 bg-white", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-grey-200 px-4 py-4 sm:px-5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, size: 6, className: "text-foreground", trim: "normal", children: title }),
+      color2 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: getPairingColorDisplayName3(color2) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 overflow-hidden rounded-sm border border-black/10 bg-white", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-20 w-full sm:h-24", style: { backgroundColor: color2.hex } }) })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "No AAA foreground available." })
+    ] }),
+    color2 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-grey-200", children: formatValueRows(color2, visibleFormats).map((row) => {
+      const copyKey = `${title}-${row.key}`;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex flex-col items-start gap-3 px-4 py-4 sm:flex-row sm:items-start sm:justify-between sm:gap-4 sm:px-5",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.72rem] font-semibold tracking-[0.12em] text-muted-foreground uppercase", children: row.label }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-2 text-sm text-foreground",
+                    row.key !== "tone" && "font-mono break-all"
+                  ),
+                  children: row.value
+                }
+              )
+            ] }),
+            row.copyable ? /* @__PURE__ */ jsxRuntime.jsx(
+              Button2,
+              {
+                variant: "ghost",
+                color: "grey",
+                size: "sm",
+                className: "self-start",
+                onClick: () => onCopyValue(copyKey, row.value, `${row.label} copied`),
+                "aria-label": `Copy ${title.toLowerCase()} ${row.label.toLowerCase()}`,
+                children: copiedKey === copyKey ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icons.check_circle, { "data-slot": "icon", className: "size-5" }),
+                  "Copied"
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+                  "Copy"
+                ] })
+              }
+            ) : null
+          ]
+        },
+        row.key
+      );
+    }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-5", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No technical values are shown because there is no AAA-compliant foreground for this background." }) })
+  ] });
+}
+function resolveSelectionState(nextThemeCategory, nextPrimaryKey, nextAccentKey, preferredBackgroundToken, preferredPairId) {
+  const context = getPairingContext(nextThemeCategory, nextPrimaryKey, nextAccentKey);
+  const selectedBackgroundToken = resolveBackgroundToken3(
+    context,
+    preferredBackgroundToken,
+    getToneFromToken3(preferredBackgroundToken)
+  );
+  const selectedPairId = getPreferredPairForBackground3(
+    context.pairsByBackground[selectedBackgroundToken] ?? [],
+    preferredPairId
+  )?.id ?? "";
+  return {
+    accentKey: context.accent.key,
+    context,
+    primaryKey: context.primary.key,
+    selectedBackgroundToken,
+    selectedPairId,
+    themeCategory: nextThemeCategory
+  };
+}
+function ColorPairingToolV3Loading() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8 xl:grid-cols-[minmax(18rem,24rem)_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-52 rounded-sm border border-grey-200 bg-grey-50" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[32rem] rounded-sm border border-grey-200 bg-grey-50" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-96 rounded-sm border border-grey-200 bg-grey-50" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 rounded-sm border border-grey-200 bg-grey-50" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-72 rounded-sm border border-grey-200 bg-grey-50" })
+    ] })
+  ] });
+}
+function ColorPairingToolV3Content({
+  onAnalyticsEvent,
+  visibleFormats
+}) {
+  const searchParams = navigation.useSearchParams();
+  const stickyOffset = useStickyOffset(24);
+  const [initialState] = React5.useState(() => getInitialPairingState3(searchParams));
+  const [themeCategory, setThemeCategory] = React5.useState(initialState.themeCategory);
+  const [primaryFamilyKey, setPrimaryFamilyKey] = React5.useState(initialState.primaryKey);
+  const [accentFamilyKey, setAccentFamilyKey] = React5.useState(initialState.accentKey);
+  const [selectedBackgroundToken, setSelectedBackgroundToken] = React5.useState(
+    initialState.selectedBackgroundToken
+  );
+  const [selectedPairId, setSelectedPairId] = React5.useState(initialState.selectedPairId);
+  const [drawerStepIndex, setDrawerStepIndex] = React5.useState(0);
+  const [isCompactControlsOpen, setIsCompactControlsOpen] = React5.useState(false);
+  const [, copyToClipboardRaw] = usehooks.useCopyToClipboard();
+  const [copiedKey, setCopiedKey] = React5.useState(null);
+  const copiedKeyTimeoutRef = React5.useRef(null);
+  const resultSectionRef = React5.useRef(null);
+  const noValidStateRef = React5.useRef(/* @__PURE__ */ new Set());
+  const technicalDetailsOpenedRef = React5.useRef(false);
+  const emitAnalyticsEvent = React5.useCallback(
+    (event) => {
+      onAnalyticsEvent(event);
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(
+          new CustomEvent(COLOR_PAIRING_TOOL_V3_ANALYTICS_EVENT, {
+            detail: event
+          })
+        );
+      }
+    },
+    [onAnalyticsEvent]
+  );
+  React5.useEffect(() => {
+    return () => {
+      if (copiedKeyTimeoutRef.current) {
+        clearTimeout(copiedKeyTimeoutRef.current);
+      }
+    };
+  }, []);
+  React5.useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const mediaQuery = window.matchMedia(PERSISTENT_DRAWER_MIN_WIDTH_QUERY);
+    const handleChange = (event) => {
+      if (event?.matches ?? mediaQuery.matches) {
+        setIsCompactControlsOpen(false);
+      }
+    };
+    handleChange();
+    mediaQuery.addEventListener("change", handleChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, []);
+  const themeFamilies = React5.useMemo(() => getPairingFamilies(themeCategory), [themeCategory]);
+  const context = React5.useMemo(
+    () => getPairingContext(themeCategory, primaryFamilyKey, accentFamilyKey),
+    [themeCategory, primaryFamilyKey, accentFamilyKey]
+  );
+  const selectableFamilies = React5.useMemo(
+    () => themeFamilies.filter((family) => family.key !== context.grey.key),
+    [themeFamilies, context.grey.key]
+  );
+  const selectableAccentFamilies = React5.useMemo(
+    () => selectableFamilies.filter((family) => family.key !== context.primary.key),
+    [selectableFamilies, context.primary.key]
+  );
+  const selectedBackground = React5.useMemo(
+    () => context.backgrounds.find((background) => background.token === selectedBackgroundToken) ?? context.backgrounds[0] ?? null,
+    [context.backgrounds, selectedBackgroundToken]
+  );
+  const selectedBackgroundPairs = React5.useMemo(
+    () => selectedBackground ? context.pairsByBackground[selectedBackground.token] ?? [] : [],
+    [context.pairsByBackground, selectedBackground]
+  );
+  const bestRecommendedPair = React5.useMemo(
+    () => getPreferredPairForBackground3(selectedBackgroundPairs),
+    [selectedBackgroundPairs]
+  );
+  const selectedPair = React5.useMemo(
+    () => getPreferredPairForBackground3(selectedBackgroundPairs, selectedPairId),
+    [selectedBackgroundPairs, selectedPairId]
+  );
+  const whiteForegroundExample = React5.useMemo(
+    () => selectedBackground && supportsWhiteForegroundPreview(selectedBackground) ? getWhiteForegroundPair(selectedBackground) : null,
+    [selectedBackground]
+  );
+  const previewPair = selectedPair ?? whiteForegroundExample ?? null;
+  const detailForeground = selectedPair?.foreground ?? whiteForegroundExample?.foreground ?? null;
+  const familySummary = React5.useMemo(
+    () => [context.primary.label, context.accent.label, context.grey.label].join(" + "),
+    [context.accent.label, context.grey.label, context.primary.label]
+  );
+  const recommendationItems = React5.useMemo(() => {
+    return selectedBackgroundPairs.map((pair) => {
+      const category = getRecommendationCategory(pair, bestRecommendedPair, context);
+      return {
+        category,
+        categoryLabel: getRecommendationCategoryLabel(category),
+        pair
+      };
+    }).sort(
+      (left, right) => getRecommendationSortRank(left.category) - getRecommendationSortRank(right.category)
+    );
+  }, [bestRecommendedPair, context, selectedBackgroundPairs]);
+  const liveAnnouncement = React5.useMemo(
+    () => getLiveAnnouncement(previewPair, selectedBackground),
+    [previewPair, selectedBackground]
+  );
+  const shareBackgroundToken = selectedBackground?.token ?? selectedBackgroundToken;
+  const shareUrl = React5.useMemo(() => {
+    const params = new URLSearchParams();
+    params.set("palette", themeCategory);
+    params.set("primary", context.primary.key);
+    params.set("accent", context.accent.key);
+    if (shareBackgroundToken) {
+      params.set("background", shareBackgroundToken);
+    }
+    if (selectedPairId) {
+      params.set("pair", selectedPairId);
+    }
+    const query = params.toString();
+    return `${COLOR_PAIRING_TOOL_V3_PATH}${query ? `?${query}` : ""}`;
+  }, [context.accent.key, context.primary.key, shareBackgroundToken, selectedPairId, themeCategory]);
+  const activeDrawerStep = COLOR_PAIRING_TOOL_DRAWER_STEPS[drawerStepIndex];
+  const isFirstDrawerStep = drawerStepIndex === 0;
+  const isLastDrawerStep = drawerStepIndex === COLOR_PAIRING_TOOL_DRAWER_STEPS.length - 1;
+  const desktopSidebarStyle = React5.useMemo(
+    () => ({
+      "--tool-sidebar-max-height": `calc(100vh - ${stickyOffset}px)`,
+      "--tool-sidebar-top": `${stickyOffset}px`
+    }),
+    [stickyOffset]
+  );
+  const goToDrawerStep = React5.useCallback((stepIndex) => {
+    setDrawerStepIndex(Math.max(0, Math.min(stepIndex, COLOR_PAIRING_TOOL_DRAWER_STEPS.length - 1)));
+  }, []);
+  const goToNextDrawerStep = React5.useCallback(() => {
+    setDrawerStepIndex(
+      (currentStep) => Math.min(currentStep + 1, COLOR_PAIRING_TOOL_DRAWER_STEPS.length - 1)
+    );
+  }, []);
+  const goToPreviousDrawerStep = React5.useCallback(() => {
+    setDrawerStepIndex((currentStep) => Math.max(currentStep - 1, 0));
+  }, []);
+  const updateUrlParams = React5.useCallback((nextState) => {
+    const params = new URLSearchParams(window.location.search);
+    params.delete("family");
+    params.set("palette", nextState.themeCategory);
+    params.set("primary", nextState.primaryKey);
+    params.set("accent", nextState.accentKey);
+    params.set("background", nextState.selectedBackgroundToken);
+    if (nextState.selectedPairId) {
+      params.set("pair", nextState.selectedPairId);
+    } else {
+      params.delete("pair");
+    }
+    window.history.replaceState(
+      null,
+      "",
+      `${window.location.pathname}?${params.toString()}${window.location.hash}`
+    );
+  }, []);
+  const applyResolvedSelection = React5.useCallback(
+    (nextState) => {
+      setThemeCategory(nextState.themeCategory);
+      setPrimaryFamilyKey(nextState.primaryKey);
+      setAccentFamilyKey(nextState.accentKey);
+      setSelectedBackgroundToken(nextState.selectedBackgroundToken);
+      setSelectedPairId(nextState.selectedPairId);
+      updateUrlParams(nextState);
+    },
+    [updateUrlParams]
+  );
+  const buildAnalyticsContext = React5.useCallback(
+    (overrides) => ({
+      accentKey: context.accent.key,
+      backgroundToken: selectedBackground?.token,
+      foregroundToken: selectedPair?.foreground.token,
+      pairId: selectedPair?.id,
+      palette: themeCategory,
+      primaryKey: context.primary.key,
+      ...overrides
+    }),
+    [context.accent.key, context.primary.key, selectedBackground, selectedPair, themeCategory]
+  );
+  const copyValue = React5.useCallback(
+    (copyKey, value, toastLabel, analyticsEvent) => {
+      copyToClipboardRaw(value);
+      setCopiedKey(copyKey);
+      sonner.toast(toastLabel, { duration: 2e3 });
+      if (analyticsEvent) {
+        emitAnalyticsEvent(analyticsEvent);
+      }
+      if (copiedKeyTimeoutRef.current) {
+        clearTimeout(copiedKeyTimeoutRef.current);
+      }
+      copiedKeyTimeoutRef.current = setTimeout(() => {
+        setCopiedKey(null);
+        copiedKeyTimeoutRef.current = null;
+      }, 2e3);
+    },
+    [copyToClipboardRaw, emitAnalyticsEvent]
+  );
+  const handleThemeCategoryChange = (nextThemeCategory) => {
+    const nextState = resolveSelectionState(
+      nextThemeCategory,
+      primaryFamilyKey,
+      accentFamilyKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+    applyResolvedSelection(nextState);
+    emitAnalyticsEvent({
+      name: "palette_change",
+      accentKey: nextState.accentKey,
+      backgroundToken: nextState.selectedBackgroundToken,
+      pairId: nextState.selectedPairId,
+      palette: nextState.themeCategory,
+      primaryKey: nextState.primaryKey
+    });
+  };
+  const handlePrimaryColorChange = (nextPrimaryKey) => {
+    const nextAccentKey = nextPrimaryKey === accentFamilyKey ? getDefaultAccentFamilyKey(themeCategory, nextPrimaryKey) : accentFamilyKey;
+    const nextState = resolveSelectionState(
+      themeCategory,
+      nextPrimaryKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+    applyResolvedSelection(nextState);
+    emitAnalyticsEvent({
+      name: "primary_change",
+      accentKey: nextState.accentKey,
+      backgroundToken: nextState.selectedBackgroundToken,
+      pairId: nextState.selectedPairId,
+      palette: nextState.themeCategory,
+      primaryKey: nextState.primaryKey
+    });
+  };
+  const handleAccentColorChange = (nextAccentKey) => {
+    if (nextAccentKey === primaryFamilyKey) return;
+    const nextState = resolveSelectionState(
+      themeCategory,
+      primaryFamilyKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+    applyResolvedSelection(nextState);
+    emitAnalyticsEvent({
+      name: "accent_change",
+      accentKey: nextState.accentKey,
+      backgroundToken: nextState.selectedBackgroundToken,
+      pairId: nextState.selectedPairId,
+      palette: nextState.themeCategory,
+      primaryKey: nextState.primaryKey
+    });
+  };
+  const handleBackgroundChange = (nextSelectedBackgroundToken) => {
+    const nextSelectedPairId = getPreferredPairForBackground3(
+      context.pairsByBackground[nextSelectedBackgroundToken] ?? [],
+      selectedPairId
+    )?.id ?? "";
+    const nextState = {
+      accentKey: context.accent.key,
+      context,
+      primaryKey: context.primary.key,
+      selectedBackgroundToken: nextSelectedBackgroundToken,
+      selectedPairId: nextSelectedPairId,
+      themeCategory
+    };
+    applyResolvedSelection(nextState);
+    emitAnalyticsEvent({
+      name: "background_selection",
+      ...buildAnalyticsContext({
+        backgroundToken: nextSelectedBackgroundToken,
+        foregroundToken: context.pairsByBackground[nextSelectedBackgroundToken]?.find(
+          (pair) => pair.id === nextSelectedPairId
+        )?.foreground.token,
+        pairId: nextSelectedPairId
+      })
+    });
+    if (typeof window !== "undefined" && window.matchMedia(MOBILE_RESULT_SCROLL_QUERY).matches) {
+      requestAnimationFrame(() => {
+        resultSectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+      });
+    }
+  };
+  const handlePairChange = (nextSelectedPairId, source) => {
+    if (!selectedBackground) return;
+    const nextPair = selectedBackgroundPairs.find((pair) => pair.id === nextSelectedPairId) ?? null;
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams({
+      accentKey: context.accent.key,
+      context,
+      primaryKey: context.primary.key,
+      selectedBackgroundToken: selectedBackground.token,
+      selectedPairId: nextSelectedPairId,
+      themeCategory
+    });
+    emitAnalyticsEvent({
+      name: "foreground_selection",
+      ...buildAnalyticsContext({
+        foregroundToken: nextPair?.foreground.token,
+        pairId: nextSelectedPairId,
+        source
+      })
+    });
+    if (bestRecommendedPair && nextSelectedPairId !== bestRecommendedPair.id) {
+      emitAnalyticsEvent({
+        name: "alternative_combination_selected",
+        ...buildAnalyticsContext({
+          foregroundToken: nextPair?.foreground.token,
+          pairId: nextSelectedPairId,
+          source
+        })
+      });
+    }
+  };
+  React5.useEffect(() => {
+    if (!selectedBackground || selectedBackgroundPairs.length > 0) {
+      return;
+    }
+    const key = `${themeCategory}:${context.primary.key}:${context.accent.key}:${selectedBackground.token}`;
+    if (noValidStateRef.current.has(key)) {
+      return;
+    }
+    noValidStateRef.current.add(key);
+    emitAnalyticsEvent({
+      name: "no_valid_combination_state",
+      ...buildAnalyticsContext({
+        backgroundToken: selectedBackground.token
+      })
+    });
+  }, [
+    buildAnalyticsContext,
+    context.accent.key,
+    context.primary.key,
+    emitAnalyticsEvent,
+    selectedBackground,
+    selectedBackgroundPairs.length,
+    themeCategory
+  ]);
+  React5.useEffect(() => {
+    if (technicalDetailsOpenedRef.current) {
+      return;
+    }
+    technicalDetailsOpenedRef.current = true;
+    emitAnalyticsEvent({
+      name: "technical_details_opened",
+      ...buildAnalyticsContext({
+        source: "details"
+      })
+    });
+  }, [buildAnalyticsContext, emitAnalyticsEvent]);
+  if (!selectedBackground) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "px-6 py-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "No approved background tones available" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, className: "mt-3", children: "No approved tones are available for the current palette and colour selection." })
+    ] });
+  }
+  const compactControlsSummary = `${themeCategory === "brand" ? "Brand" : "Aboriginal"} palette, ${context.primary.label} primary, ${context.accent.label} accent, ${getPairingColorDisplayName3(
+    selectedBackground
+  )} background.`;
+  const renderControlsPanel = (isOverlay = false) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-grey-200 px-5 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Configuration" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        !isFirstDrawerStep ? /* @__PURE__ */ jsxRuntime.jsxs(Button2, { variant: "ghost", color: "grey", size: "sm", onClick: goToPreviousDrawerStep, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icons.west, { "data-slot": "icon", className: "size-5" }),
+          "Back"
+        ] }) : null,
+        isOverlay ? /* @__PURE__ */ jsxRuntime.jsx(
+          Button2,
+          {
+            variant: "ghost",
+            color: "grey",
+            size: "icon",
+            onClick: () => setIsCompactControlsOpen(false),
+            "aria-label": "Close configuration",
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icons.close, { "data-slot": "icon", className: "size-5" })
+          }
+        ) : null
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-grey-200 px-5 py-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        COLOR_PAIRING_TOOL_DRAWER_STEPS.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-current": index === drawerStepIndex ? "step" : void 0,
+            "aria-label": `${step.eyebrow}: ${step.title}`,
+            onClick: () => goToDrawerStep(index),
+            className: "flex-1 rounded-sm focus-visible:ring-2 focus-visible:ring-primary-700 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "block h-1.5 rounded-full transition-colors",
+                  index <= drawerStepIndex ? "bg-primary-800" : "bg-grey-200"
+                )
+              }
+            )
+          },
+          step.id
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-2 basis-full text-[0.68rem] font-semibold tracking-[0.12em] text-primary-800 uppercase sm:mt-0 sm:ml-2 sm:basis-auto sm:text-[0.72rem]", children: activeDrawerStep.eyebrow })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: activeDrawerStep.title }),
+        /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, children: activeDrawerStep.description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "flex h-full transition-transform duration-300 ease-out",
+        style: { transform: `translateX(-${drawerStepIndex * 100}%)` },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("section", { className: "h-full w-full shrink-0 overflow-y-auto px-5 py-5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 pr-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 4, size: 6, className: "mb-3 text-foreground", trim: "normal", children: "Palette" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: ["brand", "aboriginal"].map((palette) => {
+                const isSelected = themeCategory === palette;
+                const label = palette === "brand" ? "Brand palette" : "Aboriginal palette";
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  SelectorButton,
+                  {
+                    label,
+                    isSelected,
+                    onClick: () => handleThemeCategoryChange(palette)
+                  },
+                  palette
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 4, size: 6, className: "mb-3 text-foreground", trim: "normal", children: "Primary colour family" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: selectableFamilies.map((family) => {
+                const label = getFamilySelectorLabel3(family, themeCategory, "primary colour");
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  SelectorButton,
+                  {
+                    label,
+                    isSelected: family.key === context.primary.key,
+                    onClick: () => handlePrimaryColorChange(family.key),
+                    swatch: getFamilySwatchColor3(family, 800)
+                  },
+                  family.key
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 4, size: 6, className: "mb-3 text-foreground", trim: "normal", children: "Accent colour family" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: selectableAccentFamilies.map((family) => {
+                const label = getFamilySelectorLabel3(family, themeCategory, "accent colour");
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  SelectorButton,
+                  {
+                    label,
+                    isSelected: family.key === context.accent.key,
+                    onClick: () => handleAccentColorChange(family.key),
+                    swatch: getFamilySwatchColor3(family, 600)
+                  },
+                  family.key
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-grey-200 pt-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: "Grey is always included" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Neutral grey options are automatically added so every selection includes a practical fallback family." })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("section", { className: "h-full w-full shrink-0 overflow-y-auto px-5 py-5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6 pr-1", children: context.backgroundGroups.map((group, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "section",
+            {
+              className: cn("space-y-3", index > 0 && "border-t border-grey-200 pt-6"),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(Heading, { level: 4, size: 6, className: "text-foreground", trim: "normal", children: [
+                    group.family.label,
+                    " backgrounds"
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: group.label })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-3", children: group.backgrounds.map((background) => /* @__PURE__ */ jsxRuntime.jsx(
+                  BackgroundSwatchButton,
+                  {
+                    background,
+                    hasPairs: (context.pairsByBackground[background.token]?.length ?? 0) > 0,
+                    isSelected: selectedBackground.token === background.token,
+                    onClick: () => handleBackgroundChange(background.token)
+                  },
+                  background.token
+                )) })
+              ]
+            },
+            group.key
+          )) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("section", { className: "h-full w-full shrink-0 overflow-y-auto px-5 py-5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4 pr-1", children: recommendationItems.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: recommendationItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            RecommendationCard,
+            {
+              copiedKey,
+              item,
+              isSelected: item.pair.id === selectedPair?.id,
+              onCopyPairing: () => copyValue(
+                `pair:${item.pair.id}`,
+                getPairingCopyText(item.pair),
+                "Pairing copied",
+                item.pair.id === bestRecommendedPair?.id ? {
+                  name: "best_recommendation_copied",
+                  ...buildAnalyticsContext({
+                    foregroundToken: item.pair.foreground.token,
+                    pairId: item.pair.id,
+                    source: "recommendations-list"
+                  })
+                } : void 0
+              ),
+              onSelect: () => handlePairChange(item.pair.id, "recommendations-list")
+            },
+            item.pair.id
+          )) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-sm border border-grey-200 bg-white px-5 py-5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 4, size: 6, className: "text-foreground", trim: "normal", children: "No valid combinations available" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, className: "mt-3", children: "No AAA-compliant foreground options are available for this background." })
+          ] }) }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-grey-200 px-5 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-10 flex-1", children: isLastDrawerStep ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Select a combination to update the result immediately." }) : null }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2 sm:w-auto sm:flex-none", children: [
+        isOverlay && isLastDrawerStep ? /* @__PURE__ */ jsxRuntime.jsx(
+          Button2,
+          {
+            color: "primary",
+            className: "w-full sm:w-auto sm:min-w-40",
+            onClick: () => setIsCompactControlsOpen(false),
+            children: "Review result"
+          }
+        ) : null,
+        !isLastDrawerStep ? /* @__PURE__ */ jsxRuntime.jsxs(Button2, { color: "primary", className: "w-full sm:w-auto", onClick: goToNextDrawerStep, children: [
+          "Continue",
+          /* @__PURE__ */ jsxRuntime.jsx(Icons.east, { "data-slot": "icon", className: "size-5" })
+        ] }) : null
+      ] })
+    ] }) })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8 xl:grid-cols-[minmax(18rem,24rem)_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-slot": "tool-sidebar",
+        className: "hidden xl:sticky xl:top-[var(--tool-sidebar-top)] xl:block xl:self-start",
+        style: desktopSidebarStyle,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "h-[40rem] max-h-[40rem] gap-0 overflow-hidden py-0 sm:h-[44rem] sm:max-h-[44rem] xl:h-[var(--tool-sidebar-max-height)] xl:max-h-[var(--tool-sidebar-max-height)]", children: renderControlsPanel() })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "tool-results", className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-4 xl:hidden", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "gap-4 px-5 py-5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Configuration" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, children: "Open the colour pairing drawer to change palette, background, and recommended combinations." }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: compactControlsSummary })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Button2,
+            {
+              color: "primary",
+              className: "w-full sm:w-auto",
+              onClick: () => setIsCompactControlsOpen(true),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Icons.edit_square, { "data-slot": "icon", className: "size-5" }),
+                "Open configuration"
+              ]
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open: isCompactControlsOpen, onOpenChange: setIsCompactControlsOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          SheetContent,
+          {
+            side: "left",
+            showClose: false,
+            className: "w-[30rem] max-w-[90vw] overflow-hidden p-0",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Colour pairing configuration" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full flex-col bg-background", children: renderControlsPanel(true) })
+            ]
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("section", { ref: resultSectionRef, className: "space-y-6", "aria-label": "Current result", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", "aria-live": "polite", children: liveAnnouncement }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CurrentResultCard,
+          {
+            bestPair: bestRecommendedPair,
+            familySummary,
+            pair: previewPair,
+            selectedBackground
+          }
+        )
+      ] }),
+      bestRecommendedPair ? /* @__PURE__ */ jsxRuntime.jsx("section", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+        BestRecommendationCard,
+        {
+          copiedKey,
+          isCurrentSelection: selectedPair?.id === bestRecommendedPair.id,
+          pair: bestRecommendedPair,
+          reason: getBestRecommendationReason(bestRecommendedPair, context),
+          onCopyPairing: () => copyValue(
+            "best-pairing",
+            getPairingCopyText(bestRecommendedPair),
+            "Pairing copied",
+            {
+              name: "best_recommendation_copied",
+              ...buildAnalyticsContext({
+                foregroundToken: bestRecommendedPair.foreground.token,
+                pairId: bestRecommendedPair.id,
+                source: "best-recommendation"
+              })
+            }
+          ),
+          onUsePairing: () => handlePairChange(bestRecommendedPair.id, "best-recommendation")
+        }
+      ) }) : /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "px-6 py-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Best recommended pairing" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, className: "mt-3", children: "No AAA-compliant foreground options available for this selection." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 5, className: "text-foreground", trim: "normal", children: "Technical colour values" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 2, children: "Token, tone, HEX, RGB, HSL, and OKLCH values for the current selection." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TechnicalDetailsPanel,
+            {
+              title: "Background values",
+              color: selectedBackground,
+              visibleFormats,
+              copiedKey,
+              onCopyValue: (copyKey, value, toastLabel) => copyValue(copyKey, value, toastLabel)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TechnicalDetailsPanel,
+            {
+              title: "Foreground values",
+              color: detailForeground,
+              visibleFormats,
+              copiedKey,
+              onCopyValue: (copyKey, value, toastLabel) => copyValue(copyKey, value, toastLabel)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, size: 6, className: "mb-3 text-foreground", trim: "normal", children: "Share colour pairing" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-sm border border-grey-200 bg-white p-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Copy this URL to share your current colour pairing:" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button2,
+                {
+                  variant: "ghost",
+                  color: "grey",
+                  size: "sm",
+                  className: "shrink-0",
+                  onClick: () => copyValue(
+                    "share-url",
+                    typeof window === "undefined" ? shareUrl : new URL(shareUrl, window.location.origin).toString(),
+                    "Colour pairing link copied"
+                  ),
+                  "aria-label": copiedKey === "share-url" ? "Colour pairing URL copied to clipboard" : "Copy colour pairing URL to clipboard",
+                  title: copiedKey === "share-url" ? "Copied" : "Copy URL",
+                  children: copiedKey === "share-url" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Icons.check, { "data-slot": "icon", className: "size-5" }),
+                    "Copied"
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+                    "Copy URL"
+                  ] })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("code", { className: "mt-3 block w-full rounded-sm border border-grey-200 bg-background px-3 py-2 font-mono text-[11px] break-all text-foreground sm:text-xs", children: shareUrl })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ColorPairingToolV3({
+  onAnalyticsEvent = () => {
+  },
+  visibleFormats = DEFAULT_VISIBLE_FORMATS3
+} = {}) {
+  const normalizedVisibleFormats = [...new Set(visibleFormats)];
+  return /* @__PURE__ */ jsxRuntime.jsx(React5.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(ColorPairingToolV3Loading, {}), children: /* @__PURE__ */ jsxRuntime.jsx(
+    ColorPairingToolV3Content,
+    {
+      onAnalyticsEvent,
+      visibleFormats: normalizedVisibleFormats
+    }
+  ) });
+}
 function ColorSwatches({ theme: theme2, format, viewMode }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -17270,23 +19875,23 @@ var ComboChart = React5__namespace.default.forwardRef((props, forwardedRef) => {
 });
 ComboChart.displayName = "ComboChart";
 function Dialog({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
 }
 function DialogTrigger({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogClose({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { "data-slot": "dialog-close", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Close, { "data-slot": "dialog-close", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Overlay,
+    SheetPrimitive__namespace.Overlay,
     {
       "data-slot": "dialog-overlay",
       className: cn(
@@ -17306,7 +19911,7 @@ function DialogContent({
   return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      DialogPrimitive__namespace.Content,
+      SheetPrimitive__namespace.Content,
       {
         "data-slot": "dialog-content",
         className: cn(
@@ -17316,7 +19921,7 @@ function DialogContent({
         ...props,
         children: [
           children,
-          showClose && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { className: "absolute top-1 right-1", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button2, { variant: "ghost", size: "icon", children: [
+          showClose && /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Close, { className: "absolute top-1 right-1", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button2, { variant: "ghost", size: "icon", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Icons.close, { className: "size-6", "aria-hidden": "true" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
           ] }) })
@@ -17347,7 +19952,7 @@ function DialogFooter({ className, ...props }) {
 }
 function DialogTitle({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Title,
+    SheetPrimitive__namespace.Title,
     {
       "data-slot": "dialog-title",
       className: cn("text-lg leading-none font-semibold", className),
@@ -17360,7 +19965,7 @@ function DialogDescription({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Description,
+    SheetPrimitive__namespace.Description,
     {
       "data-slot": "dialog-description",
       className: cn("text-sm text-muted-foreground", className),
@@ -18132,7 +20737,7 @@ function DescriptionList({ className, ...props }) {
     "dl",
     {
       ...props,
-      className: clsx12__default.default(
+      className: clsx13__default.default(
         className,
         "grid grid-cols-1 text-base/6 sm:grid-cols-[min(50%,--spacing(80))_auto] sm:text-sm/6"
       )
@@ -18144,7 +20749,7 @@ function DescriptionTerm({ className, ...props }) {
     "dt",
     {
       ...props,
-      className: clsx12__default.default(
+      className: clsx13__default.default(
         className,
         "col-start-1 border-t border-grey-950/5 pt-3 text-grey-600 first:border-none sm:border-t sm:border-grey-950/5 sm:py-3 dark:border-white/5 dark:text-grey-400 sm:dark:border-white/5"
       )
@@ -18156,7 +20761,7 @@ function DescriptionDetails({ className, ...props }) {
     "dd",
     {
       ...props,
-      className: clsx12__default.default(
+      className: clsx13__default.default(
         className,
         "pt-1 pb-3 text-grey-950 sm:border-t sm:border-grey-950/5 sm:py-3 sm:nth-2:border-none dark:text-white dark:sm:border-white/5"
       )
@@ -18570,7 +21175,7 @@ function Fieldset2({
     Headless4__namespace.Fieldset,
     {
       ...props,
-      className: clsx12__default.default(className, "*:data-[slot=text]:mt-1 [&>*+[data-slot=control]]:mt-6")
+      className: clsx13__default.default(className, "*:data-[slot=text]:mt-1 [&>*+[data-slot=control]]:mt-6")
     }
   );
 }
@@ -18583,7 +21188,7 @@ function Legend6({
     {
       "data-slot": "legend",
       ...props,
-      className: clsx12__default.default(
+      className: clsx13__default.default(
         className,
         "text-base/6 font-semibold text-zinc-950 data-disabled:opacity-50 sm:text-sm/6 dark:text-white"
       )
@@ -18591,7 +21196,7 @@ function Legend6({
   );
 }
 function FieldGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "control", ...props, className: clsx12__default.default(className, "space-y-8") });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "control", ...props, className: clsx13__default.default(className, "space-y-8") });
 }
 function Field2({
   className,
@@ -18601,7 +21206,7 @@ function Field2({
     Headless4__namespace.Field,
     {
       ...props,
-      className: clsx12__default.default(
+      className: clsx13__default.default(
         className,
         "[&>[data-slot=label]+[data-slot=control]]:mt-3",
         "[&>[data-slot=label]+[data-slot=description]]:mt-1",
@@ -18622,14 +21227,14 @@ function FieldLabel({
     {
       "data-slot": "label",
       ...props,
-      className: clsx12__default.default(
+      className: clsx13__default.default(
         className,
         "text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6 dark:text-white"
       )
     }
   );
 }
-function Description4({
+function Description5({
   className,
   ...props
 }) {
@@ -18638,7 +21243,7 @@ function Description4({
     {
       "data-slot": "description",
       ...props,
-      className: clsx12__default.default(
+      className: clsx13__default.default(
         className,
         "text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6 dark:text-zinc-400"
       )
@@ -18654,7 +21259,7 @@ function ErrorMessage({
     {
       "data-slot": "error",
       ...props,
-      className: clsx12__default.default(
+      className: clsx13__default.default(
         className,
         "text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6 dark:text-red-500"
       )
@@ -18878,7 +21483,7 @@ var toggleVariants = classVarianceAuthority.cva(styles3.base, {
   variants: {
     variant: {
       ghost: "",
-      outline: clsx12__default.default(styles3.outline)
+      outline: clsx13__default.default(styles3.outline)
     },
     size: {
       default: "h-9 px-2 min-w-9",
@@ -18981,7 +21586,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.101.0"};
+  version: "1.103.0"};
 function Logo(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "NSW Government" }),
@@ -19131,7 +21736,7 @@ function Header2({
       "data-slot": "header",
       "data-scrolled": isScrolled,
       id: "nsw-header",
-      className: clsx12__default.default(
+      className: clsx13__default.default(
         "sticky top-0 z-50 hidden bg-white px-4 py-5 transition duration-500 sm:px-6 lg:flex lg:flex-none lg:flex-wrap lg:items-center lg:justify-between lg:px-12",
         !hideShadow && "shadow-md shadow-slate-900/5 dark:shadow-none",
         isScrolled ? "dark:bg-slate-900/95 dark:backdrop-blur-sm dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75" : "dark:bg-transparent"
@@ -19985,7 +22590,7 @@ var LineChart = React5__namespace.default.forwardRef((props, ref) => {
 });
 LineChart.displayName = "LineChart";
 function cn2(...inputs) {
-  return tailwindMerge.twMerge(clsx12.clsx(inputs));
+  return tailwindMerge.twMerge(clsx13.clsx(inputs));
 }
 var sizeStyles = {
   sm: "text-sm",
@@ -20047,7 +22652,7 @@ function Listbox2({
         autoFocus,
         "data-slot": "control",
         "aria-label": ariaLabel,
-        className: clsx12__default.default([
+        className: clsx13__default.default([
           className,
           // Basic layout
           "group relative block w-full",
@@ -20071,7 +22676,7 @@ function Listbox2({
               as: "span",
               options,
               placeholder: placeholder && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-grey-500", children: placeholder }),
-              className: clsx12__default.default([
+              className: clsx13__default.default([
                 "cursor-pointer",
                 // Basic layout
                 "relative block w-full appearance-none rounded-sm py-[calc(--spacing(4.5)-1px)] sm:py-[calc(--spacing(3.5)-1px)]",
@@ -20101,7 +22706,7 @@ function Listbox2({
       {
         transition: true,
         anchor: "selection start",
-        className: clsx12__default.default(
+        className: clsx13__default.default(
           // Anchor positioning
           "[--anchor-offset:-1.625rem] [--anchor-padding:--spacing(4)] sm:[--anchor-offset:-1.375rem]",
           // Base styles
@@ -20127,7 +22732,7 @@ function ListboxOption2({
   className,
   ...props
 }) {
-  const sharedClasses = clsx12__default.default(
+  const sharedClasses = clsx13__default.default(
     // Base
     "flex min-w-0 items-center",
     // Icons
@@ -20139,12 +22744,12 @@ function ListboxOption2({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(Headless4__namespace.ListboxOption, { as: React5.Fragment, ...props, children: ({ selectedOption }) => {
     if (selectedOption) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx12__default.default(className, sharedClasses), children });
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx13__default.default(className, sharedClasses), children });
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: clsx12__default.default(
+        className: clsx13__default.default(
           // Basic layout
           "group/option grid cursor-pointer grid-cols-[--spacing(5)_1fr] items-baseline gap-x-2 rounded-sm py-2.5 pr-3.5 pl-2 sm:grid-cols-[--spacing(4)_1fr] sm:py-1.5 sm:pr-3 sm:pl-1.5",
           // Typography
@@ -20175,7 +22780,7 @@ function ListboxOption2({
               )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx12__default.default(className, sharedClasses, "col-start-2"), children })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx13__default.default(className, sharedClasses, "col-start-2"), children })
         ]
       }
     );
@@ -20186,7 +22791,7 @@ function ListboxLabel({ className, ...props }) {
     "span",
     {
       ...props,
-      className: clsx12__default.default(className, "ml-2.5 truncate first:ml-0 sm:ml-2 sm:first:ml-0")
+      className: clsx13__default.default(className, "ml-2.5 truncate first:ml-0 sm:ml-2 sm:first:ml-0")
     }
   );
 }
@@ -20199,7 +22804,7 @@ function ListboxDescription({
     "span",
     {
       ...props,
-      className: clsx12__default.default(
+      className: clsx13__default.default(
         className,
         "flex flex-1 overflow-hidden text-grey-500 group-data-focus/option:text-white before:w-2 before:min-w-0 before:shrink dark:text-grey-400"
       ),
@@ -20247,102 +22852,12 @@ function Spinner({ className, size = "md", ...props }) {
     }
   ) });
 }
-function Text({ className, trim = "normal", size = 2, label = false, ...props }) {
-  const textSizeClasses = {
-    1: "text-[length:var(--font-size-1)] leading-[var(--line-height-28)] tracking-[var(--letter-spacing-0)]",
-    2: "text-[length:var(--font-size-2)] leading-[var(--line-height-24)] tracking-[var(--letter-spacing-0)]",
-    3: "text-[length:var(--font-size-3)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]",
-    4: "text-[length:var(--font-size-4)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]"
-  };
-  const labelSizeClasses = {
-    1: "text-[length:var(--font-size-1)] leading-[var(--line-height-24)] tracking-[var(--letter-spacing-0)]",
-    2: "text-[length:var(--font-size-2)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]",
-    3: "text-[length:var(--font-size-3)] leading-[var(--line-height-16)] tracking-[var(--letter-spacing-0)]",
-    4: "text-[length:var(--font-size-4)] leading-[var(--line-height-16)] tracking-[var(--letter-spacing-0)]"
-  };
-  const sizeClass = label ? labelSizeClasses[size] : textSizeClasses[size];
-  const trimClasses = {
-    normal: ["before:content-none after:content-none"],
-    start: [
-      'before:content-[""] before:table after:content-none',
-      "before:mb-[calc(var(--leading-trim-start,var(--default-leading-trim-start))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
-    ],
-    end: [
-      'before:content-none after:content-[""] after:table',
-      "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
-    ],
-    both: [
-      'before:content-[""] before:table after:content-[""] after:table',
-      "before:mb-[calc(var(--leading-trim-start,var(--default-leading-trim-start))-var(--line-height,calc(1em*var(--default-line-height)))/2)]",
-      "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
-    ]
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "p",
-    {
-      "data-slot": "text",
-      ...props,
-      className: clsx12__default.default(className, trimClasses[trim], "text-grey-800 dark:text-grey-400", sizeClass)
-    }
-  );
-}
-function TextLink({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Link,
-    {
-      ...props,
-      className: clsx12__default.default(
-        className,
-        "text-primary-800 underline decoration-primary-800/50 data-hover:decoration-primary-800 dark:text-white dark:decoration-white/50 dark:data-hover:decoration-white"
-      )
-    }
-  );
-}
-function Strong({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("strong", { ...props, className: clsx12__default.default(className, "font-medium text-grey-950 dark:text-white") });
-}
-function Code({ className, ...props }) {
-  const hasLanguageClass = typeof className === "string" && className.includes("language-");
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "code",
-    {
-      ...props,
-      className: clsx12__default.default(
-        className,
-        !hasLanguageClass && "language-plaintext",
-        "text-sm sm:text-[0.8125rem]"
-      )
-    }
-  );
-}
 function Loading() {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-screen items-center justify-center gap-4 bg-grey-50 dark:bg-grey-900", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Spinner, { "aria-label": "Loading...", size: "lg" }),
     /* @__PURE__ */ jsxRuntime.jsx(Text, { children: "Loading..." })
   ] });
 }
-function useSelectorHeight(selector = "header") {
-  const [height, setHeight] = React5.useState(0);
-  const elementRef = React5.useRef(null);
-  const resizeObserverRef = React5.useRef(null);
-  React5.useEffect(() => {
-    const element = document.querySelector(selector);
-    if (!element) return;
-    elementRef.current = element;
-    const resizeObserver = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      const target = entry?.target ?? elementRef.current;
-      if (!target) return;
-      setHeight(target.offsetHeight);
-    });
-    resizeObserverRef.current = resizeObserver;
-    resizeObserver.observe(element);
-    return () => {
-      resizeObserverRef.current?.disconnect();
-    };
-  }, [selector]);
-  return height;
-}
 function MainNavigation({ navigation }) {
   const headerHeight = useSelectorHeight();
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -20874,7 +23389,7 @@ function MultiLevelPushMenu({
                 {
                   href: item.href,
                   onClick: (e) => handleItemClick(item, e),
-                  className: clsx12__default.default(
+                  className: clsx13__default.default(
                     "relative flex w-full cursor-pointer items-center justify-between gap-x-6 border-l p-4 transition-colors hover:border-primary-800 hover:bg-primary-800/10",
                     pathname === item.href ? "border-primary-800 bg-primary-800/10 font-semibold text-primary-800" : "border-transparent text-grey-800",
                     isAnimating && "pointer-events-none"
@@ -20886,7 +23401,7 @@ function MultiLevelPushMenu({
                 {
                   onClick: (e) => handleItemClick(item, e),
                   disabled: isAnimating,
-                  className: clsx12__default.default(
+                  className: clsx13__default.default(
                     "relative flex w-full cursor-pointer items-center justify-between gap-x-6 border-l p-4 transition-colors hover:border-primary-800 hover:bg-primary-800/10",
                     pathname === item.href ? "border-primary-800 bg-primary-800/10 font-semibold text-primary-800" : "border-transparent text-grey-800",
                     isAnimating && "pointer-events-none"
@@ -20953,7 +23468,7 @@ function MobileHeader({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: clsx12__default.default(
+        className: clsx13__default.default(
           "relative flex w-full items-center py-4",
           menu && !search && "justify-start",
           search && "justify-between",
@@ -20969,7 +23484,7 @@ function MobileHeader({
             {
               href: "/",
               "aria-label": "Home page",
-              className: clsx12__default.default(
+              className: clsx13__default.default(
                 "flex items-center",
                 menu && !search && "justify-start",
                 search && !menu && "flex-row justify-between",
@@ -20980,7 +23495,7 @@ function MobileHeader({
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
-                    className: clsx12__default.default(
+                    className: clsx13__default.default(
                       "flex flex-wrap items-center",
                       menu && !search && "justify-center text-left",
                       search && !menu && "justify-center text-left",
@@ -28991,7 +31506,7 @@ var featureBundle = {
 // node_modules/framer-motion/dist/es/render/components/motion/proxy.mjs
 var motion = /* @__PURE__ */ createMotionProxy(featureBundle, createDomVisualElement);
 function Navbar({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { ...props, className: clsx12__default.default(className, "flex flex-1 items-center gap-4 py-2.5") });
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { ...props, className: clsx13__default.default(className, "flex flex-1 items-center gap-4 py-2.5") });
 }
 function NavbarDivider({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -28999,16 +31514,16 @@ function NavbarDivider({ className, ...props }) {
     {
       "aria-hidden": "true",
       ...props,
-      className: clsx12__default.default(className, "h-6 w-px bg-zinc-950/10 dark:bg-white/10")
+      className: clsx13__default.default(className, "h-6 w-px bg-zinc-950/10 dark:bg-white/10")
     }
   );
 }
 function NavbarSection({ className, ...props }) {
   const id3 = React5.useId();
-  return /* @__PURE__ */ jsxRuntime.jsx(LayoutGroup, { id: id3, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: clsx12__default.default(className, "flex items-center gap-3") }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(LayoutGroup, { id: id3, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: clsx13__default.default(className, "flex items-center gap-3") }) });
 }
 function NavbarSpacer({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", ...props, className: clsx12__default.default(className, "-ml-4 flex-1") });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", ...props, className: clsx13__default.default(className, "-ml-4 flex-1") });
 }
 var NavbarItem = React5.forwardRef(function NavbarItem2({
   current,
@@ -29016,7 +31531,7 @@ var NavbarItem = React5.forwardRef(function NavbarItem2({
   children,
   ...props
 }, ref) {
-  const classes = clsx12__default.default(
+  const classes = clsx13__default.default(
     // Base
     "relative flex min-w-0 items-center gap-3 rounded-lg p-2 text-left text-base/6 font-medium text-zinc-950 sm:text-sm/5",
     // Leading icon/icon-only
@@ -29034,7 +31549,7 @@ var NavbarItem = React5.forwardRef(function NavbarItem2({
     "dark:data-hover:bg-white/5 dark:data-hover:*:data-[slot=icon]:fill-white",
     "dark:data-active:bg-white/5 dark:data-active:*:data-[slot=icon]:fill-white"
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx12__default.default(className, "relative"), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx13__default.default(className, "relative"), children: [
     current && /* @__PURE__ */ jsxRuntime.jsx(
       motion.span,
       {
@@ -29055,7 +31570,7 @@ var NavbarItem = React5.forwardRef(function NavbarItem2({
       Headless4__namespace.Button,
       {
         ...props,
-        className: clsx12__default.default("cursor-default", classes),
+        className: clsx13__default.default("cursor-default", classes),
         "data-current": current ? "true" : void 0,
         ref,
         children: /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, { children })
@@ -29064,14 +31579,14 @@ var NavbarItem = React5.forwardRef(function NavbarItem2({
   ] });
 });
 function NavbarLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, className: clsx12__default.default(className, "truncate") });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, className: clsx13__default.default(className, "truncate") });
 }
 function Navigation({
   className,
   onLinkClick,
   navigation
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx12__default.default("text-base lg:text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", className: "flex flex-col gap-9", children: navigation.map((section, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx13__default.default("text-base lg:text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", className: "flex flex-col gap-9", children: navigation.map((section, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
     section.links ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-display font-medium text-grey-800 dark:text-white", children: section.title }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", className: "mt-2 flex flex-col gap-2 border-l lg:mt-4", children: /* @__PURE__ */ jsxRuntime.jsx("li", { className: "-ml-px flex flex-col items-start gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
       NavigationLink,
       {
@@ -29094,7 +31609,7 @@ function NavigationLink({
     {
       href,
       onClick,
-      className: clsx12__default.default(
+      className: clsx13__default.default(
         "inline-block w-full cursor-pointer rounded-r-sm border-l py-1 pr-2 pl-4 text-left text-base/8 sm:text-sm/6",
         "hover:border-grey-950 hover:bg-primary-800/10 hover:font-semibold hover:text-grey-950",
         "dark:text-grey-400 dark:hover:border-grey-400 dark:hover:text-white",
@@ -29567,7 +32082,7 @@ function Wrapper({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: clsx12__default.default("max-w-8xl mx-auto space-y-8 px-4 py-6 sm:px-6 lg:px-12", className),
+      className: clsx13__default.default("max-w-8xl mx-auto space-y-8 px-4 py-6 sm:px-6 lg:px-12", className),
       ...props,
       children
     }
@@ -29581,7 +32096,7 @@ function PageHeading({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "header",
     {
-      className: clsx12__default.default(
+      className: clsx13__default.default(
         "border-b border-grey-300 bg-white dark:border-grey-700 dark:bg-grey-900",
         className
       ),
@@ -29608,7 +32123,7 @@ function Pagination({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: clsx12__default.default(containerStyles[variant], className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(PaginationVariantContext.Provider, { value: variant, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: clsx13__default.default(containerStyles[variant], className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(PaginationVariantContext.Provider, { value: variant, children }) });
 }
 function PaginationPrevious({ href = null, className, children = "Previous" }) {
   const variant = React5__namespace.useContext(PaginationVariantContext);
@@ -29631,7 +32146,7 @@ function PaginationPrevious({ href = null, className, children = "Previous" }) {
       }
     ) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx12__default.default(className, "grow basis-0"), children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx13__default.default(className, "grow basis-0"), children: /* @__PURE__ */ jsxRuntime.jsxs(
     Button2,
     {
       ...href === null ? { disabled: true } : { href },
@@ -29665,7 +32180,7 @@ function PaginationNext({ href = null, className, children = "Next" }) {
       }
     ) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx12__default.default(className, "flex grow basis-0 justify-end"), children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx13__default.default(className, "flex grow basis-0 justify-end"), children: /* @__PURE__ */ jsxRuntime.jsxs(
     Button2,
     {
       ...href === null ? { disabled: true } : { href },
@@ -29681,9 +32196,9 @@ function PaginationNext({ href = null, className, children = "Next" }) {
 function PaginationList({ className, ...props }) {
   const variant = React5__namespace.useContext(PaginationVariantContext);
   if (variant === "line") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx12__default.default(listStyles.line, className), ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx13__default.default(listStyles.line, className), ...props });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx12__default.default(listStyles.default, className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx13__default.default(listStyles.default, className), ...props });
 }
 function PaginationPage({
   href,
@@ -29715,7 +32230,7 @@ function PaginationPage({
       "aria-current": current ? "page" : void 0,
       variant: current ? "solid" : "ghost",
       color: current ? "accent" : "light",
-      className: clsx12__default.default(
+      className: clsx13__default.default(
         className,
         "leading-none before:absolute before:-inset-px before:rounded-sm",
         "min-h-8 min-w-8 sm:px-[calc(--spacing(4))] sm:py-[calc(--spacing(3))]",
@@ -29736,7 +32251,7 @@ function PaginationGap({
       "span",
       {
         "aria-hidden": "true",
-        className: clsx12__default.default(
+        className: clsx13__default.default(
           "inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-grey-800 select-none",
           className
         ),
@@ -29750,7 +32265,7 @@ function PaginationGap({
     {
       "aria-hidden": "true",
       ...props,
-      className: clsx12__default.default(
+      className: clsx13__default.default(
         className,
         "w-9 text-center text-sm/6 font-semibold text-grey-950 select-none dark:text-white"
       ),
@@ -29770,7 +32285,7 @@ function PrevNextLinksPageLink({
       Link13__default.default,
       {
         href,
-        className: clsx12__default.default(
+        className: clsx13__default.default(
           "flex items-center gap-x-1 text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300",
           dir === "previous" && "flex-row-reverse"
         ),
@@ -29779,7 +32294,7 @@ function PrevNextLinksPageLink({
           /* @__PURE__ */ jsxRuntime.jsx(
             Icons.east,
             {
-              className: clsx12__default.default("size-5 flex-none fill-current", dir === "previous" && "-scale-x-100")
+              className: clsx13__default.default("size-5 flex-none fill-current", dir === "previous" && "-scale-x-100")
             }
           )
         ]
@@ -30053,7 +32568,7 @@ function Prose({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component2,
     {
-      className: clsx12__default.default(
+      className: clsx13__default.default(
         className,
         "prose max-w-none dark:!prose-invert",
         // headings
@@ -30107,110 +32622,6 @@ function ResizableHandle({
     }
   );
 }
-function Sheet({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "sheet", ...props });
-}
-function SheetTrigger({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { "data-slot": "sheet-trigger", ...props });
-}
-function SheetClose({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { "data-slot": "sheet-close", ...props });
-}
-function SheetPortal({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "sheet-portal", ...props });
-}
-function SheetOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Overlay,
-    {
-      "data-slot": "sheet-overlay",
-      className: cn(
-        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function SheetContent({
-  className,
-  children,
-  side = "right",
-  showClose = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      DialogPrimitive__namespace.Content,
-      {
-        "data-slot": "sheet-content",
-        className: cn(
-          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=closed]:animate-out data-[state=open]:duration-500 data-[state=open]:animate-in",
-          side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-          side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-          side === "top" && "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-          side === "bottom" && "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          showClose && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { "data-slot": "sheet-close", className: "absolute top-4 right-4", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button2, { variant: "ghost", size: "icon", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Icons.close, { className: "size-6", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-          ] }) })
-        ]
-      }
-    )
-  ] });
-}
-function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "sheet-header",
-      className: cn("flex flex-col gap-1.5 p-4", className),
-      ...props
-    }
-  );
-}
-function SheetFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "sheet-footer",
-      className: cn("mt-auto flex flex-col gap-2 p-4", className),
-      ...props
-    }
-  );
-}
-function SheetTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Title,
-    {
-      "data-slot": "sheet-title",
-      className: cn("font-semibold text-foreground", className),
-      ...props
-    }
-  );
-}
-function SheetDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Description,
-    {
-      "data-slot": "sheet-description",
-      className: cn("text-sm text-muted-foreground", className),
-      ...props
-    }
-  );
-}
 function Skeleton({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -30825,7 +33236,7 @@ function SidebarNavigation({
   navigation: navigation$1
 }) {
   const pathname = navigation.usePathname();
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx12__default.default("text-base lg:text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", className: "flex flex-col gap-9", children: navigation$1.map((section, sectionIndex) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx13__default.default("text-base lg:text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", className: "flex flex-col gap-9", children: navigation$1.map((section, sectionIndex) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
     section.links ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-display font-medium text-foreground dark:text-white", children: section.title }) : /* @__PURE__ */ jsxRuntime.jsx(
       "ul",
       {
@@ -30860,7 +33271,7 @@ function SidebarLink({ link, pathname, onLinkClick, depth }) {
   const hasChildren = Array.isArray(link.links) && link.links.length > 0;
   const isActive = pathname === link.href;
   const isActiveOrHasActiveDescendant = isLinkOrDescendantActive(link, pathname);
-  const baseLinkClasses = clsx12__default.default(
+  const baseLinkClasses = clsx13__default.default(
     "w-full cursor-pointer rounded-r-sm border-l py-1 pr-2 pl-4 text-left text-base/8 sm:text-sm/6",
     "hover:border-grey-950 hover:bg-primary-800/10 hover:font-semibold hover:text-grey-950",
     "dark:text-grey-400 dark:hover:border-grey-400 dark:hover:text-white",
@@ -30870,13 +33281,13 @@ function SidebarLink({ link, pathname, onLinkClick, depth }) {
     /* @__PURE__ */ jsxRuntime.jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
-        className: clsx12__default.default(baseLinkClasses, "group flex items-center justify-between gap-1"),
+        className: clsx13__default.default(baseLinkClasses, "group flex items-center justify-between gap-1"),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: link.title }),
           /* @__PURE__ */ jsxRuntime.jsx(
             Icons.chevron_right,
             {
-              className: clsx12__default.default(
+              className: clsx13__default.default(
                 "ml-2 size-5 transition-transform duration-200",
                 "group-data-[state=open]:rotate-90"
               )
@@ -30885,7 +33296,7 @@ function SidebarLink({ link, pathname, onLinkClick, depth }) {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: clsx12__default.default("mt-2 ml-5 flex flex-col gap-1 border-l pl-0"), children: link.links && link.links.map((childLink) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: clsx13__default.default("mt-2 ml-5 flex flex-col gap-1 border-l pl-0"), children: link.links && link.links.map((childLink) => /* @__PURE__ */ jsxRuntime.jsx(
       SidebarLink,
       {
         link: childLink,
@@ -31214,7 +33625,7 @@ var StepIndicator = React5__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", ref, className: cn("w-full", className), ...props, children: array.map((step, stepIdx) => /* @__PURE__ */ jsxRuntime.jsx(
       "li",
       {
-        className: clsx12__default.default(stepIdx !== array.length - 1 ? "pb-3" : "", "relative"),
+        className: clsx13__default.default(stepIdx !== array.length - 1 ? "pb-3" : "", "relative"),
         children: step.href === pathname && !(step.status === "completed" || step.status === "error" || step.status === "saved" || step.status === "cannot-start") ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: step.status === "in-progress" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           stepIdx !== array.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(
             "div",
@@ -31460,7 +33871,7 @@ function StepNavigation({
     })),
     [navigation, formStatus, getStatus]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx12__default.default("text-base lg:text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", className: "space-y-9", children: navigationWithStatus.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: clsx13__default.default("text-base lg:text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", className: "space-y-9", children: navigationWithStatus.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
     /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-display font-medium text-slate-900 dark:text-white", children: section.title }),
     /* @__PURE__ */ jsxRuntime.jsx(StepIndicator, { className: "mt-2 lg:mt-4", array: section.links })
   ] }, section.title)) }) });
@@ -31488,7 +33899,7 @@ function SwitchGroup({ className, ...props }) {
     {
       "data-slot": "control",
       ...props,
-      className: clsx12__default.default(
+      className: clsx13__default.default(
         className,
         // Basic groups
         "space-y-3 **:data-[slot=label]:font-normal",
@@ -31507,7 +33918,7 @@ function SwitchField({
     {
       "data-slot": "field",
       ...props,
-      className: clsx12__default.default(
+      className: clsx13__default.default(
         className,
         // Base layout
         "grid grid-cols-[1fr_auto] gap-x-8 gap-y-1 sm:grid-cols-[1fr_auto]",
@@ -31571,7 +33982,7 @@ function Switch2({
     {
       "data-slot": "control",
       ...props,
-      className: clsx12__default.default(
+      className: clsx13__default.default(
         className,
         // Base styles
         "group relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8",
@@ -31598,7 +34009,7 @@ function Switch2({
         "span",
         {
           "aria-hidden": "true",
-          className: clsx12__default.default(
+          className: clsx13__default.default(
             // Basic layout
             "pointer-events-none relative inline-block size-4.5 rounded-full sm:size-3.5",
             // Transition
@@ -31707,7 +34118,7 @@ function TableOfContents({ tableOfContents }) {
       "ol",
       {
         role: "list",
-        className: clsx12__default.default(
+        className: clsx13__default.default(
           "mt-3 flex flex-col gap-2",
           "border-l border-grey-900/10 dark:border-white/10",
           "text-sm/6 text-grey-700 dark:text-grey-400"
@@ -31718,7 +34129,7 @@ function TableOfContents({ tableOfContents }) {
             {
               href: `#${section.id}`,
               prefetch: false,
-              className: clsx12__default.default(
+              className: clsx13__default.default(
                 "-ml-px inline-block border-l pl-4",
                 "hover:border-primary-800 dark:hover:border-white",
                 isActive(section) ? "border-primary-800 font-semibold text-primary-800 dark:border-white dark:text-white" : "border-transparent"
@@ -31731,7 +34142,7 @@ function TableOfContents({ tableOfContents }) {
             {
               href: `#${subSection.id}`,
               prefetch: false,
-              className: clsx12__default.default(
+              className: clsx13__default.default(
                 "-ml-px inline-block border-l pl-8",
                 "hover:border-primary-800 dark:hover:border-white",
                 isActive(subSection) ? "border-primary-800 font-semibold text-primary-800 dark:border-white dark:text-white" : "border-transparent"
@@ -34938,13 +37349,24 @@ function getHeadings(slugify$1 = slugify.slugifyWithCounter()) {
   });
   return result;
 }
-function usePageHeadings() {
+function areHeadingTreesEqual(left, right) {
+  return JSON.stringify(left) === JSON.stringify(right);
+}
+function usePageHeadings(enabled = true) {
   const [headings, setHeadings] = React5.useState([]);
   const pathname = navigation.usePathname();
   const observerRef = React5.useRef(null);
   const observedElRef = React5.useRef(null);
   React5.useEffect(() => {
-    const update = () => setHeadings(getHeadings());
+    if (!enabled) {
+      return;
+    }
+    const update = () => {
+      const nextHeadings = getHeadings();
+      setHeadings(
+        (currentHeadings) => areHeadingTreesEqual(currentHeadings, nextHeadings) ? currentHeadings : nextHeadings
+      );
+    };
     const attachToCurrentArticle = () => {
       const article = document.querySelector("article");
       if (!article || observedElRef.current === article) return;
@@ -34991,16 +37413,8 @@ function usePageHeadings() {
       observerRef.current = null;
       observedElRef.current = null;
     };
-  }, [pathname]);
-  return headings;
-}
-function useStickyOffset(extraPadding = 0) {
-  const headerHeight = useSelectorHeight("#nsw-header");
-  const navigationHeight = useSelectorHeight("#nsw-main-navigation");
-  return React5.useMemo(() => {
-    const total = headerHeight + navigationHeight + extraPadding;
-    return total > 0 ? total : 0;
-  }, [extraPadding, headerHeight, navigationHeight]);
+  }, [enabled, pathname]);
+  return enabled ? headings : [];
 }
 function createFormStore(opts) {
   const { storageKey, initialFormData, initialFormStatus } = opts;
@@ -35141,6 +37555,8 @@ exports.CollapsibleContent = CollapsibleContent2;
 exports.CollapsibleTrigger = CollapsibleTrigger2;
 exports.ColorCard = ColorCard;
 exports.ColorPairingTool = ColorPairingTool;
+exports.ColorPairingToolV2 = ColorPairingToolV2;
+exports.ColorPairingToolV3 = ColorPairingToolV3;
 exports.ColorSwatches = ColorSwatches;
 exports.ColourScale = ColourScale;
 exports.ComboChart = ComboChart;
@@ -35188,7 +37604,7 @@ exports.DataTableFacetedFilter = DataTableFacetedFilter;
 exports.DataTablePagination = DataTablePagination;
 exports.DataTableToolbar = DataTableToolbar;
 exports.DataTableViewOptions = DataTableViewOptions;
-exports.Description = Description4;
+exports.Description = Description5;
 exports.DescriptionDetails = DescriptionDetails;
 exports.DescriptionList = DescriptionList;
 exports.DescriptionTerm = DescriptionTerm;