@nswds/app 1.102.0 → 1.103.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import clsx12, { clsx } from 'clsx';
+import clsx13, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
@@ -4499,7 +4499,7 @@ var Button2 = forwardRef(function Button3({ className, variant, color: color2, s
     {
       "data-variant": variant,
       ...props,
-      className: clsx12(classes, "cursor-pointer"),
+      className: clsx13(classes, "cursor-pointer"),
       ref,
       children: /* @__PURE__ */ jsx(TouchTarget, { children })
     }
@@ -5958,7 +5958,7 @@ var BadgeButton = forwardRef(function BadgeButton2({
   children,
   ...props
 }, ref) {
-  const classes = clsx12(className, focusOutline[color2], [
+  const classes = clsx13(className, focusOutline[color2], [
     // Base
     "group relative inline-flex rounded-sm",
     // Focus
@@ -5980,7 +5980,7 @@ var BadgeButton = forwardRef(function BadgeButton2({
     {
       "data-variant": variant,
       ...props,
-      className: clsx12(classes, "cursor-pointer"),
+      className: clsx13(classes, "cursor-pointer"),
       ref,
       children: /* @__PURE__ */ jsx(TouchTarget, { children: /* @__PURE__ */ jsx(Badge, { variant, color: color2, size, children }) })
     }
@@ -15223,7 +15223,7 @@ function Heading({
       ...props,
       id: computedId,
       "data-anchor": true,
-      className: clsx12(
+      className: clsx13(
         className,
         trimClasses[trim],
         "m-0",
@@ -16303,6 +16303,877 @@ function ColorPairingTool({
   const normalizedVisibleFormats = [...new Set(visibleFormats)];
   return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ColorPairingToolLoading, {}), children: /* @__PURE__ */ jsx(ColorPairingToolContent, { visibleFormats: normalizedVisibleFormats }) });
 }
+function Text({ className, trim = "normal", size = 2, label = false, ...props }) {
+  const textSizeClasses = {
+    1: "text-[length:var(--font-size-1)] leading-[var(--line-height-28)] tracking-[var(--letter-spacing-0)]",
+    2: "text-[length:var(--font-size-2)] leading-[var(--line-height-24)] tracking-[var(--letter-spacing-0)]",
+    3: "text-[length:var(--font-size-3)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]",
+    4: "text-[length:var(--font-size-4)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]"
+  };
+  const labelSizeClasses = {
+    1: "text-[length:var(--font-size-1)] leading-[var(--line-height-24)] tracking-[var(--letter-spacing-0)]",
+    2: "text-[length:var(--font-size-2)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]",
+    3: "text-[length:var(--font-size-3)] leading-[var(--line-height-16)] tracking-[var(--letter-spacing-0)]",
+    4: "text-[length:var(--font-size-4)] leading-[var(--line-height-16)] tracking-[var(--letter-spacing-0)]"
+  };
+  const sizeClass = label ? labelSizeClasses[size] : textSizeClasses[size];
+  const trimClasses = {
+    normal: ["before:content-none after:content-none"],
+    start: [
+      'before:content-[""] before:table after:content-none',
+      "before:mb-[calc(var(--leading-trim-start,var(--default-leading-trim-start))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
+    ],
+    end: [
+      'before:content-none after:content-[""] after:table',
+      "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
+    ],
+    both: [
+      'before:content-[""] before:table after:content-[""] after:table',
+      "before:mb-[calc(var(--leading-trim-start,var(--default-leading-trim-start))-var(--line-height,calc(1em*var(--default-line-height)))/2)]",
+      "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
+    ]
+  };
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "text",
+      ...props,
+      className: clsx13(className, trimClasses[trim], "text-grey-800 dark:text-grey-400", sizeClass)
+    }
+  );
+}
+function TextLink({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      ...props,
+      className: clsx13(
+        className,
+        "text-primary-800 underline decoration-primary-800/50 data-hover:decoration-primary-800 dark:text-white dark:decoration-white/50 dark:data-hover:decoration-white"
+      )
+    }
+  );
+}
+function Strong({ className, ...props }) {
+  return /* @__PURE__ */ jsx("strong", { ...props, className: clsx13(className, "font-medium text-grey-950 dark:text-white") });
+}
+function Code({ className, ...props }) {
+  const hasLanguageClass = typeof className === "string" && className.includes("language-");
+  return /* @__PURE__ */ jsx(
+    "code",
+    {
+      ...props,
+      className: clsx13(
+        className,
+        !hasLanguageClass && "language-plaintext",
+        "text-sm sm:text-[0.8125rem]"
+      )
+    }
+  );
+}
+var PREFERRED_BACKGROUND_TONES2 = [400, 600, 200, 800, 100, 50];
+var DEFAULT_VISIBLE_FORMATS2 = ["hex", "rgb", "hsl", "oklch"];
+var DEFAULT_INITIAL_BACKGROUND_TOKEN2 = "nsw-blue-800";
+var DEFAULT_INITIAL_PAIR_ID2 = "nsw-blue-800:nsw-blue-200";
+function getToneFromToken2(token) {
+  if (!token) return null;
+  const match = token.match(/-(\d+)$/);
+  return match ? Number.parseInt(match[1], 10) : null;
+}
+function getFamilySwatchColor2(family, preferredTone = 600) {
+  const exactMatch = family.colors.find((color2) => color2.tone === preferredTone);
+  if (exactMatch) {
+    return exactMatch.hex;
+  }
+  const closestMatch = [...family.colors].sort(
+    (left, right) => Math.abs(left.tone - preferredTone) - Math.abs(right.tone - preferredTone)
+  )[0];
+  return closestMatch?.hex ?? "transparent";
+}
+function getFamilySelectorLabel2(family, themeCategory, selectionRole) {
+  if (themeCategory !== "aboriginal") {
+    return family.label;
+  }
+  const preferredTone = selectionRole === "primary colour" ? 800 : 600;
+  return family.colors.find((color2) => color2.tone === preferredTone)?.name ?? family.label;
+}
+function getPairingColorDisplayName2(color2) {
+  return color2.name ?? color2.token;
+}
+function isWhiteForegroundPair2(pair) {
+  return pair.foreground.token === "white";
+}
+function getWhiteForegroundGuidance2(pair) {
+  if (pair.passes.aaaText) {
+    return "White is approved for headings, body copy, and calls to action on this background.";
+  }
+  if (pair.passes.aaaLarge) {
+    return "Use white only for WCAG large text on this background, such as headings at 24px+ or bold text at 18.5px+. Keep sentence-case body copy at 16px+ and use a darker recommended foreground instead.";
+  }
+  return "Do not use white on this background. Choose one of the recommended foregrounds below instead.";
+}
+function getPreviewGuidance2(pair, isRecommended) {
+  if (!isWhiteForegroundPair2(pair)) {
+    return "Use only AAA-recommended combinations across your selected primary, accent, and grey families.";
+  }
+  if (isRecommended) {
+    return "Use white text on dark colour only when it meets AAA for headings, body copy, and calls to action.";
+  }
+  return getWhiteForegroundGuidance2(pair);
+}
+function getReadableTextColor(tone) {
+  return tone >= 600 ? "#ffffff" : "#002664";
+}
+function getPreferredPairForBackground2(pairs, preferredPairId) {
+  if (preferredPairId) {
+    const preferredPair = pairs.find((pair) => pair.id === preferredPairId);
+    if (preferredPair) {
+      return preferredPair;
+    }
+  }
+  return pairs.find((pair) => !isWhiteForegroundPair2(pair)) ?? pairs[0] ?? null;
+}
+function getDefaultBackgroundToken2(context) {
+  for (const tone of PREFERRED_BACKGROUND_TONES2) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find(
+        (background) => background.tone === tone && (context.pairsByBackground[background.token]?.length ?? 0) > 0
+      );
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  for (const tone of PREFERRED_BACKGROUND_TONES2) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find((background) => background.tone === tone);
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  return context.backgrounds[0]?.token ?? "";
+}
+function resolveBackgroundToken2(context, preferredToken, preferredTone) {
+  if (preferredToken && context.backgrounds.some((background) => background.token === preferredToken)) {
+    return preferredToken;
+  }
+  if (preferredTone !== null && preferredTone !== void 0) {
+    for (const group of context.backgroundGroups) {
+      const match = group.backgrounds.find((background) => background.tone === preferredTone);
+      if (match) {
+        return match.token;
+      }
+    }
+  }
+  return getDefaultBackgroundToken2(context);
+}
+function getInitialPairingState2(searchParams) {
+  const paletteParam = searchParams.get("palette");
+  const primaryParam = searchParams.get("primary");
+  const accentParam = searchParams.get("accent");
+  const pairParam = searchParams.get("pair");
+  const backgroundParam = searchParams.get("background");
+  const themeCategory = paletteParam === "brand" || paletteParam === "aboriginal" ? paletteParam : "brand";
+  const context = getPairingContext(themeCategory, primaryParam, accentParam);
+  const shouldUseDefaultBrandExample = !backgroundParam && !pairParam && themeCategory === "brand" && context.primary.key === "blue" && context.accent.key === "red";
+  const defaultBackgroundToken = shouldUseDefaultBrandExample ? context.backgrounds.some(
+    (background) => background.token === DEFAULT_INITIAL_BACKGROUND_TOKEN2
+  ) ? DEFAULT_INITIAL_BACKGROUND_TOKEN2 : null : null;
+  const defaultPairId = shouldUseDefaultBrandExample && defaultBackgroundToken && context.pairsByBackground[defaultBackgroundToken]?.some(
+    (pair) => pair.id === DEFAULT_INITIAL_PAIR_ID2
+  ) ? DEFAULT_INITIAL_PAIR_ID2 : null;
+  const pairBackgroundToken = context.recommendedPairs.find((pair) => pair.id === pairParam)?.background.token ?? null;
+  const selectedBackgroundToken = resolveBackgroundToken2(
+    context,
+    backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken,
+    getToneFromToken2(backgroundParam ?? pairBackgroundToken ?? defaultBackgroundToken)
+  );
+  const selectedPairId = getPreferredPairForBackground2(
+    context.pairsByBackground[selectedBackgroundToken] ?? [],
+    pairParam ?? defaultPairId
+  )?.id ?? "";
+  return {
+    accentKey: context.accent.key,
+    primaryKey: context.primary.key,
+    selectedBackgroundToken,
+    selectedPairId,
+    themeCategory
+  };
+}
+function ColorPairingToolV2Loading() {
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-8 lg:grid-cols-[18rem_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6 bg-grey-50/70 p-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-10 rounded-sm bg-grey-100" }),
+      /* @__PURE__ */ jsx("div", { className: "h-40 rounded-sm bg-grey-100" }),
+      /* @__PURE__ */ jsx("div", { className: "h-52 rounded-sm bg-grey-100" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-12 rounded-sm bg-grey-100" }),
+      /* @__PURE__ */ jsx("div", { className: "h-64 rounded-sm bg-grey-100" }),
+      /* @__PURE__ */ jsx("div", { className: "h-40 rounded-sm bg-grey-100" }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-44 rounded-sm bg-grey-100" }),
+        /* @__PURE__ */ jsx("div", { className: "h-44 rounded-sm bg-grey-100" }),
+        /* @__PURE__ */ jsx("div", { className: "h-44 rounded-sm bg-grey-100" })
+      ] })
+    ] })
+  ] });
+}
+function SidebarStep({
+  children,
+  description,
+  step,
+  title
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-[0.72rem] font-semibold tracking-[0.12em] text-muted-foreground uppercase", children: [
+        "Step ",
+        step
+      ] }),
+      /* @__PURE__ */ jsx(Heading, { level: 3, size: 6, className: "text-foreground", trim: "normal", children: title }),
+      description ? /* @__PURE__ */ jsx("p", { className: "text-sm/6 text-muted-foreground", children: description }) : null
+    ] }),
+    children
+  ] });
+}
+function PreviewHeroCard({
+  familySummary,
+  isRecommended,
+  pair
+}) {
+  const whiteForeground = isWhiteForegroundPair2(pair);
+  const statusLabel = isRecommended ? "Pass" : pair.passes.aaaLarge ? "Large text only" : "Example only";
+  const StatusIcon = isRecommended ? Icons.check : Icons.info;
+  const fauxButtonStyle = {
+    "--btn-bg": pair.foreground.hex,
+    "--btn-border": pair.foreground.hex,
+    "--btn-text": pair.background.hex,
+    "--btn-icon": pair.background.hex,
+    "--btn-hover-overlay": pair.background.hex
+  };
+  return /* @__PURE__ */ jsx(Card, { className: "gap-0 overflow-hidden py-0", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "p-6 sm:min-h-[26rem] sm:p-8",
+      style: {
+        backgroundColor: pair.background.hex,
+        color: pair.foreground.hex
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-[22rem] flex-col justify-between gap-8", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[0.72rem] font-semibold tracking-[0.16em] uppercase",
+              style: {
+                borderColor: pair.foreground.hex,
+                backgroundColor: pair.foreground.hex,
+                color: pair.background.hex
+              },
+              children: [
+                /* @__PURE__ */ jsx(Icons.palette, { "data-slot": "icon", className: "size-4" }),
+                familySummary
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex rounded-full border px-3 py-1 text-[0.72rem] font-semibold tracking-[0.16em] uppercase",
+              style: {
+                borderColor: pair.foreground.hex
+              },
+              children: [
+                pair.rating,
+                " ",
+                pair.contrastRatio.toFixed(2),
+                ":1"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "max-w-xl space-y-4 pb-12 sm:pb-16", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-[0.22em] uppercase", children: whiteForeground && !isRecommended ? "White on colour example" : whiteForeground ? "White on colour" : "Colour on colour" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsx("h3", { className: "max-w-lg text-4xl leading-none font-bold text-current sm:text-5xl", children: "Pair colour with confidence." }),
+            /* @__PURE__ */ jsx("p", { className: "max-w-md text-base/6 sm:text-base/7", children: getPreviewGuidance2(pair, isRecommended) }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                "data-variant": "solid",
+                className: cn(
+                  buttonVariants({ variant: "solid", size: "default" }),
+                  "pointer-events-none cursor-default px-6 text-[16px] font-[700] select-none sm:px-6 sm:text-[16px] sm:font-[700]"
+                ),
+                style: fauxButtonStyle,
+                children: "Get started"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold",
+              style: {
+                backgroundColor: pair.foreground.hex,
+                color: pair.background.hex
+              },
+              children: [
+                statusLabel,
+                /* @__PURE__ */ jsx(StatusIcon, { "data-slot": "icon", className: "size-4" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex rounded-full border px-4 py-2 text-sm",
+              style: {
+                borderColor: pair.foreground.hex
+              },
+              children: [
+                pair.background.token,
+                " / ",
+                pair.foreground.token
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  ) });
+}
+function PreviewFallbackCard2({ background }) {
+  return /* @__PURE__ */ jsx(Card, { className: "gap-0 overflow-hidden py-0", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "space-y-6 px-6 py-7 sm:px-8 sm:py-8",
+      style: {
+        backgroundColor: background.hex,
+        color: getReadableTextColor(background.tone)
+      },
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Hero preview" }),
+        /* @__PURE__ */ jsxs("div", { className: "max-w-xl space-y-4", children: [
+          /* @__PURE__ */ jsx("h3", { className: "max-w-lg text-3xl leading-tight font-bold sm:text-4xl", children: "No AAA combination available." }),
+          /* @__PURE__ */ jsx("p", { className: "max-w-lg text-base/7", children: "This background tone is approved, but there are no recommended AAA foreground pairings available for it in the current tool." })
+        ] })
+      ]
+    }
+  ) });
+}
+function PairDetailCard2({
+  color: color2,
+  role,
+  visibleFormats
+}) {
+  const [, copyToClipboardRaw] = useCopyToClipboard();
+  const [copiedField, setCopiedField] = useState(null);
+  const copiedFieldTimeoutRef = useRef(null);
+  const hasDisplayTone = color2.token !== "white";
+  const formatRows = visibleFormats.map((format) => ({
+    key: format,
+    label: format.toUpperCase(),
+    value: color2[format],
+    mono: true,
+    copyable: true
+  }));
+  const valueRows = [
+    { key: "token", label: "Token", value: color2.token, mono: true, copyable: true },
+    {
+      key: "tone",
+      label: "Tone",
+      value: hasDisplayTone ? String(color2.tone) : "Not applicable",
+      mono: false,
+      copyable: hasDisplayTone
+    },
+    ...formatRows
+  ];
+  useEffect(() => {
+    return () => {
+      if (copiedFieldTimeoutRef.current) {
+        clearTimeout(copiedFieldTimeoutRef.current);
+      }
+    };
+  }, []);
+  const copyField = (field) => {
+    if (field === "tone" && !hasDisplayTone) {
+      return;
+    }
+    const fieldValue = valueRows.find((row) => row.key === field)?.value;
+    if (!fieldValue) return;
+    copyToClipboardRaw(fieldValue);
+    setCopiedField(field);
+    const toastLabel = valueRows.find((row) => row.key === field)?.label ?? "Value";
+    toast(`${toastLabel} copied to clipboard`, {
+      duration: 2e3
+    });
+    if (copiedFieldTimeoutRef.current) {
+      clearTimeout(copiedFieldTimeoutRef.current);
+    }
+    copiedFieldTimeoutRef.current = setTimeout(() => {
+      setCopiedField(null);
+      copiedFieldTimeoutRef.current = null;
+    }, 2e3);
+  };
+  const renderCopyButton = (field, srLabel, className) => /* @__PURE__ */ jsxs(
+    Button2,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: cn("shrink-0", className),
+      onClick: () => copyField(field),
+      children: [
+        copiedField === field ? /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-5" }) : /* @__PURE__ */ jsx(Icons.content_copy, { "data-slot": "icon", className: "size-5" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: srLabel })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(Card, { className: "gap-0 pb-0", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "gap-4 border-b", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: role }),
+        /* @__PURE__ */ jsx(CardDescription, { children: color2.name ?? color2.token })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-14 w-full rounded-sm border border-grey-200 shadow-sm dark:border-grey-700",
+          style: { backgroundColor: color2.hex }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { className: "px-0 pb-3", children: /* @__PURE__ */ jsx("div", { className: "divide-y divide-grey-100 dark:divide-grey-800", children: valueRows.map((row) => /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 px-6 py-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: row.label }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mt-2 min-w-0 text-base text-foreground",
+              row.mono && "font-mono text-sm break-all sm:text-base"
+            ),
+            children: row.value
+          }
+        )
+      ] }),
+      row.copyable ? renderCopyButton(
+        row.key,
+        `Copy ${role.toLowerCase()} ${row.label.toLowerCase()}`,
+        "mt-0.5"
+      ) : null
+    ] }, row.key)) }) })
+  ] });
+}
+function AccessibilityScoreCard({ pair }) {
+  return /* @__PURE__ */ jsxs(Card, { className: "gap-0 py-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 px-6 py-6 sm:flex-row sm:items-end sm:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Accessibility score" }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-5xl leading-none font-bold text-foreground", children: pair ? `${pair.contrastRatio.toFixed(2)}:1` : "N/A" }),
+          /* @__PURE__ */ jsx("p", { className: "text-base text-muted-foreground", children: "Contrast ratio" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "inline-flex items-center gap-2 rounded-full px-4 py-2 text-base font-semibold",
+            pair ? "bg-success-700 text-white" : "border border-grey-300 bg-background text-foreground"
+          ),
+          children: pair ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            "Pass AAA",
+            /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-5" })
+          ] }) : "No AAA result"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "border-t border-grey-200 px-6 py-4 dark:border-grey-700", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: pair ? "Meets WCAG 2.1 AAA standards for large and normal text." : "Choose a different approved background tone to review recommended AAA pairings." }) })
+  ] });
+}
+function RecommendedPairCard({
+  isSelected,
+  onSelect,
+  pair
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-label": `Use ${getPairingColorDisplayName2(pair.foreground)} on ${getPairingColorDisplayName2(pair.background)}`,
+      "aria-pressed": isSelected,
+      onClick: onSelect,
+      className: cn(
+        "overflow-hidden rounded-sm border bg-background text-left transition-colors",
+        isSelected ? "border-primary-700 ring-2 ring-primary-700 ring-offset-2 ring-offset-background" : "border-grey-200 hover:border-grey-400 dark:border-grey-700 dark:hover:border-grey-500"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "min-h-32 space-y-3 px-4 py-4",
+            style: {
+              backgroundColor: pair.background.hex,
+              color: pair.foreground.hex
+            },
+            children: [
+              /* @__PURE__ */ jsxs("p", { className: "text-[0.68rem] font-semibold tracking-[0.12em] uppercase opacity-90", children: [
+                pair.background.token,
+                " / ",
+                pair.foreground.token
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-2xl leading-tight font-bold", children: getPairingColorDisplayName2(pair.foreground) }),
+                /* @__PURE__ */ jsxs("p", { className: "text-sm/6 opacity-90", children: [
+                  pair.foreground.familyLabel,
+                  " on ",
+                  pair.background.familyLabel
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 px-4 py-3", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold text-foreground", children: [
+            pair.contrastRatio.toFixed(2),
+            ":1"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1 rounded-full bg-success-50 px-2.5 py-1 text-xs font-semibold text-success-800 dark:bg-success-950/30 dark:text-success-200", children: "AAA" })
+        ] })
+      ]
+    }
+  );
+}
+function ColorPairingToolV2Content({ visibleFormats }) {
+  const searchParams = useSearchParams();
+  const [initialState] = useState(() => getInitialPairingState2(searchParams));
+  const [themeCategory, setThemeCategory] = useState(initialState.themeCategory);
+  const [primaryFamilyKey, setPrimaryFamilyKey] = useState(initialState.primaryKey);
+  const [accentFamilyKey, setAccentFamilyKey] = useState(initialState.accentKey);
+  const [selectedBackgroundToken, setSelectedBackgroundToken] = useState(
+    initialState.selectedBackgroundToken
+  );
+  const [selectedPairId, setSelectedPairId] = useState(initialState.selectedPairId);
+  const themeFamilies = getPairingFamilies(themeCategory);
+  const context = getPairingContext(themeCategory, primaryFamilyKey, accentFamilyKey);
+  const selectableFamilies = themeFamilies.filter((family) => family.key !== context.grey.key);
+  const selectableAccentFamilies = selectableFamilies.filter(
+    (family) => family.key !== context.primary.key
+  );
+  const selectedBackground = context.backgrounds.find((background) => background.token === selectedBackgroundToken) ?? context.backgrounds[0] ?? null;
+  const selectedBackgroundPairs = selectedBackground ? context.pairsByBackground[selectedBackground.token] ?? [] : [];
+  const selectedPair = getPreferredPairForBackground2(selectedBackgroundPairs, selectedPairId);
+  const detailForeground = selectedPair?.foreground ?? null;
+  const familySummary = [context.primary.label, context.accent.label, context.grey.label].join(
+    " + "
+  );
+  const updateUrlParams = (nextThemeCategory, nextPrimaryKey, nextAccentKey, nextSelectedBackgroundToken, nextSelectedPairId) => {
+    const params = new URLSearchParams(window.location.search);
+    params.delete("family");
+    params.set("palette", nextThemeCategory);
+    params.set("primary", nextPrimaryKey);
+    params.set("accent", nextAccentKey);
+    params.set("background", nextSelectedBackgroundToken);
+    if (nextSelectedPairId) {
+      params.set("pair", nextSelectedPairId);
+    } else {
+      params.delete("pair");
+    }
+    window.history.replaceState(
+      null,
+      "",
+      `${window.location.pathname}?${params.toString()}${window.location.hash}`
+    );
+  };
+  const syncSelection = (nextThemeCategory, nextPrimaryKey, nextAccentKey, preferredBackgroundToken, preferredPairId) => {
+    const nextContext = getPairingContext(nextThemeCategory, nextPrimaryKey, nextAccentKey);
+    const nextSelectedBackgroundToken = resolveBackgroundToken2(
+      nextContext,
+      preferredBackgroundToken,
+      getToneFromToken2(preferredBackgroundToken)
+    );
+    const nextSelectedPairId = getPreferredPairForBackground2(
+      nextContext.pairsByBackground[nextSelectedBackgroundToken] ?? [],
+      preferredPairId
+    )?.id ?? "";
+    setThemeCategory(nextThemeCategory);
+    setPrimaryFamilyKey(nextContext.primary.key);
+    setAccentFamilyKey(nextContext.accent.key);
+    setSelectedBackgroundToken(nextSelectedBackgroundToken);
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams(
+      nextThemeCategory,
+      nextContext.primary.key,
+      nextContext.accent.key,
+      nextSelectedBackgroundToken,
+      nextSelectedPairId
+    );
+  };
+  const handleThemeCategoryChange = (nextThemeCategory) => {
+    syncSelection(
+      nextThemeCategory,
+      primaryFamilyKey,
+      accentFamilyKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+  };
+  const handlePrimaryColorChange = (nextPrimaryKey) => {
+    const nextAccentKey = nextPrimaryKey === accentFamilyKey ? getDefaultAccentFamilyKey(themeCategory, nextPrimaryKey) : accentFamilyKey;
+    syncSelection(
+      themeCategory,
+      nextPrimaryKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+  };
+  const handleAccentColorChange = (nextAccentKey) => {
+    if (nextAccentKey === primaryFamilyKey) return;
+    syncSelection(
+      themeCategory,
+      primaryFamilyKey,
+      nextAccentKey,
+      selectedBackgroundToken,
+      selectedPairId
+    );
+  };
+  const handleBackgroundChange = (nextSelectedBackgroundToken) => {
+    const nextSelectedPairId = getPreferredPairForBackground2(
+      context.pairsByBackground[nextSelectedBackgroundToken] ?? [],
+      selectedPairId
+    )?.id ?? "";
+    setSelectedBackgroundToken(nextSelectedBackgroundToken);
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams(
+      themeCategory,
+      context.primary.key,
+      context.accent.key,
+      nextSelectedBackgroundToken,
+      nextSelectedPairId
+    );
+  };
+  const handlePairChange = (nextSelectedPairId) => {
+    if (!selectedBackground) return;
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams(
+      themeCategory,
+      context.primary.key,
+      context.accent.key,
+      selectedBackground.token,
+      nextSelectedPairId
+    );
+  };
+  if (!selectedBackground) {
+    return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("div", { className: "px-6", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "No approved background tones available" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-3 text-base text-muted-foreground", children: "No approved tones are available for the current palette." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-8 lg:grid-cols-[18rem_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsx("aside", { className: "bg-grey-50/60 p-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "Configuration" }),
+        /* @__PURE__ */ jsx(Text, { size: 2, children: "Choose a palette, set your primary and accent families, then select an approved background." })
+      ] }),
+      /* @__PURE__ */ jsx(SidebarStep, { step: 1, title: "Select your palette", children: /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: ["brand", "aboriginal"].map((palette) => {
+        const isSelected = themeCategory === palette;
+        const label = palette === "brand" ? "Brand palette" : "Aboriginal palette";
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Select ${label}`,
+            "aria-pressed": isSelected,
+            onClick: () => handleThemeCategoryChange(palette),
+            className: cn(
+              "rounded-sm border px-3 py-2.5 text-left text-sm font-semibold transition-colors",
+              isSelected ? "border-primary-800 bg-primary-800 text-white" : "border-grey-300 bg-background text-foreground hover:border-primary-800 hover:bg-primary-50"
+            ),
+            children: label
+          },
+          palette
+        );
+      }) }) }),
+      /* @__PURE__ */ jsx(
+        SidebarStep,
+        {
+          step: 2,
+          title: "Choose your colours",
+          description: "Grey is added automatically from the selected palette.",
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Primary colour" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: selectableFamilies.map((family) => {
+                const swatchTone = 800;
+                const isSelected = family.key === context.primary.key;
+                const label = getFamilySelectorLabel2(family, themeCategory, "primary colour");
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Select ${label} as primary colour`,
+                    "aria-pressed": isSelected,
+                    onClick: () => handlePrimaryColorChange(family.key),
+                    className: cn(
+                      "min-h-11 rounded-sm border px-2 py-2 text-center text-[0.8rem] leading-5 font-semibold transition-transform",
+                      isSelected ? "ring-2 ring-primary-700 ring-offset-2 ring-offset-grey-50/60" : "hover:-translate-y-px"
+                    ),
+                    style: {
+                      backgroundColor: getFamilySwatchColor2(family, swatchTone),
+                      color: getReadableTextColor(swatchTone),
+                      borderColor: "rgba(0, 0, 0, 0.12)"
+                    },
+                    title: label,
+                    children: label
+                  },
+                  family.key
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Accent colour" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: selectableAccentFamilies.map((family) => {
+                const swatchTone = 600;
+                const isSelected = family.key === context.accent.key;
+                const label = getFamilySelectorLabel2(family, themeCategory, "accent colour");
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Select ${label} as accent colour`,
+                    "aria-pressed": isSelected,
+                    onClick: () => handleAccentColorChange(family.key),
+                    className: cn(
+                      "min-h-11 rounded-sm border px-2 py-2 text-center text-[0.8rem] leading-5 font-semibold transition-transform",
+                      isSelected ? "ring-2 ring-primary-700 ring-offset-2 ring-offset-grey-50/60" : "hover:-translate-y-px"
+                    ),
+                    style: {
+                      backgroundColor: getFamilySwatchColor2(family, swatchTone),
+                      color: getReadableTextColor(swatchTone),
+                      borderColor: "rgba(0, 0, 0, 0.12)"
+                    },
+                    title: label,
+                    children: label
+                  },
+                  family.key
+                );
+              }) })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(SidebarStep, { step: 3, title: "Pick a background", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+          "Selected:",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: selectedBackground.token })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-2", children: context.backgrounds.map((background) => {
+          const hasPairs = (context.pairsByBackground[background.token]?.length ?? 0) > 0;
+          const isSelected = selectedBackground.token === background.token;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": hasPairs ? `Select ${background.token} background` : `Select ${background.token} background with no AAA pairings`,
+              "aria-pressed": isSelected,
+              onClick: () => handleBackgroundChange(background.token),
+              className: cn(
+                "relative aspect-square rounded-sm border transition-transform",
+                isSelected ? "ring-2 ring-primary-700 ring-offset-2 ring-offset-grey-50/60" : "hover:-translate-y-px",
+                !hasPairs && "opacity-80"
+              ),
+              style: {
+                backgroundColor: background.hex,
+                borderColor: "rgba(0, 0, 0, 0.14)"
+              },
+              title: background.token,
+              children: !hasPairs ? /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-1/2 h-0.5 w-5 -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-full bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.28)]" }) : null
+            },
+            background.token
+          );
+        }) })
+      ] }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("main", { className: "space-y-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "Live Preview & Results" }),
+        /* @__PURE__ */ jsx(Text, { size: 2, children: "Review the selected pairing in context, then compare the available AAA combinations for your chosen background." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+        selectedPair ? /* @__PURE__ */ jsx(
+          PreviewHeroCard,
+          {
+            familySummary,
+            isRecommended: Boolean(selectedPair),
+            pair: selectedPair
+          }
+        ) : /* @__PURE__ */ jsx(PreviewFallbackCard2, { background: selectedBackground }),
+        /* @__PURE__ */ jsx(AccessibilityScoreCard, { pair: selectedPair })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 3, size: 5, className: "text-foreground", trim: "normal", children: "Recommended Combinations" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-base text-muted-foreground", children: [
+            "AAA-recommended foregrounds for",
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: selectedBackground.token }),
+            "."
+          ] })
+        ] }),
+        selectedBackgroundPairs.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3", children: selectedBackgroundPairs.map((pair) => /* @__PURE__ */ jsx(
+          RecommendedPairCard,
+          {
+            pair,
+            isSelected: selectedPair?.id === pair.id,
+            onSelect: () => handlePairChange(pair.id)
+          },
+          pair.id
+        )) }) : /* @__PURE__ */ jsx(Card, { className: "gap-0 py-0", children: /* @__PURE__ */ jsxs("div", { className: "px-6 py-6", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 4, size: 6, className: "text-foreground", trim: "normal", children: "No recommended combinations" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-3 text-base text-muted-foreground", children: "Choose another approved background tone to review available AAA pairings." })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsx(
+          PairDetailCard2,
+          {
+            color: selectedBackground,
+            role: "Background",
+            visibleFormats
+          }
+        ),
+        detailForeground ? /* @__PURE__ */ jsx(
+          PairDetailCard2,
+          {
+            color: detailForeground,
+            role: "Foreground",
+            visibleFormats
+          }
+        ) : /* @__PURE__ */ jsxs(Card, { className: "gap-4", children: [
+          /* @__PURE__ */ jsx(CardHeader, { className: "gap-3 border-b", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx(CardTitle, { children: "Foreground" }),
+            /* @__PURE__ */ jsx(CardDescription, { children: "No recommended foreground available" })
+          ] }) }),
+          /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Choose another approved tone or review the recommended foregrounds for the same background." }) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ColorPairingToolV2({
+  visibleFormats = DEFAULT_VISIBLE_FORMATS2
+} = {}) {
+  const normalizedVisibleFormats = [...new Set(visibleFormats)];
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ColorPairingToolV2Loading, {}), children: /* @__PURE__ */ jsx(ColorPairingToolV2Content, { visibleFormats: normalizedVisibleFormats }) });
+}
 function ColorSwatches({ theme: theme2, format, viewMode }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -18078,7 +18949,7 @@ function DescriptionList({ className, ...props }) {
     "dl",
     {
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         "grid grid-cols-1 text-base/6 sm:grid-cols-[min(50%,--spacing(80))_auto] sm:text-sm/6"
       )
@@ -18090,7 +18961,7 @@ function DescriptionTerm({ className, ...props }) {
     "dt",
     {
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         "col-start-1 border-t border-grey-950/5 pt-3 text-grey-600 first:border-none sm:border-t sm:border-grey-950/5 sm:py-3 dark:border-white/5 dark:text-grey-400 sm:dark:border-white/5"
       )
@@ -18102,7 +18973,7 @@ function DescriptionDetails({ className, ...props }) {
     "dd",
     {
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         "pt-1 pb-3 text-grey-950 sm:border-t sm:border-grey-950/5 sm:py-3 sm:nth-2:border-none dark:text-white dark:sm:border-white/5"
       )
@@ -18516,7 +19387,7 @@ function Fieldset2({
     Headless4.Fieldset,
     {
       ...props,
-      className: clsx12(className, "*:data-[slot=text]:mt-1 [&>*+[data-slot=control]]:mt-6")
+      className: clsx13(className, "*:data-[slot=text]:mt-1 [&>*+[data-slot=control]]:mt-6")
     }
   );
 }
@@ -18529,7 +19400,7 @@ function Legend6({
     {
       "data-slot": "legend",
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         "text-base/6 font-semibold text-zinc-950 data-disabled:opacity-50 sm:text-sm/6 dark:text-white"
       )
@@ -18537,7 +19408,7 @@ function Legend6({
   );
 }
 function FieldGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "control", ...props, className: clsx12(className, "space-y-8") });
+  return /* @__PURE__ */ jsx("div", { "data-slot": "control", ...props, className: clsx13(className, "space-y-8") });
 }
 function Field2({
   className,
@@ -18547,7 +19418,7 @@ function Field2({
     Headless4.Field,
     {
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         "[&>[data-slot=label]+[data-slot=control]]:mt-3",
         "[&>[data-slot=label]+[data-slot=description]]:mt-1",
@@ -18568,7 +19439,7 @@ function FieldLabel({
     {
       "data-slot": "label",
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         "text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6 dark:text-white"
       )
@@ -18584,7 +19455,7 @@ function Description4({
     {
       "data-slot": "description",
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         "text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6 dark:text-zinc-400"
       )
@@ -18600,7 +19471,7 @@ function ErrorMessage({
     {
       "data-slot": "error",
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         "text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6 dark:text-red-500"
       )
@@ -18824,7 +19695,7 @@ var toggleVariants = cva(styles3.base, {
   variants: {
     variant: {
       ghost: "",
-      outline: clsx12(styles3.outline)
+      outline: clsx13(styles3.outline)
     },
     size: {
       default: "h-9 px-2 min-w-9",
@@ -18927,7 +19798,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.101.0"};
+  version: "1.102.0"};
 function Logo(props) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: "sr-only", children: "NSW Government" }),
@@ -19077,7 +19948,7 @@ function Header2({
       "data-slot": "header",
       "data-scrolled": isScrolled,
       id: "nsw-header",
-      className: clsx12(
+      className: clsx13(
         "sticky top-0 z-50 hidden bg-white px-4 py-5 transition duration-500 sm:px-6 lg:flex lg:flex-none lg:flex-wrap lg:items-center lg:justify-between lg:px-12",
         !hideShadow && "shadow-md shadow-slate-900/5 dark:shadow-none",
         isScrolled ? "dark:bg-slate-900/95 dark:backdrop-blur-sm dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75" : "dark:bg-transparent"
@@ -19993,7 +20864,7 @@ function Listbox2({
         autoFocus,
         "data-slot": "control",
         "aria-label": ariaLabel,
-        className: clsx12([
+        className: clsx13([
           className,
           // Basic layout
           "group relative block w-full",
@@ -20017,7 +20888,7 @@ function Listbox2({
               as: "span",
               options,
               placeholder: placeholder && /* @__PURE__ */ jsx("span", { className: "block truncate text-grey-500", children: placeholder }),
-              className: clsx12([
+              className: clsx13([
                 "cursor-pointer",
                 // Basic layout
                 "relative block w-full appearance-none rounded-sm py-[calc(--spacing(4.5)-1px)] sm:py-[calc(--spacing(3.5)-1px)]",
@@ -20047,7 +20918,7 @@ function Listbox2({
       {
         transition: true,
         anchor: "selection start",
-        className: clsx12(
+        className: clsx13(
           // Anchor positioning
           "[--anchor-offset:-1.625rem] [--anchor-padding:--spacing(4)] sm:[--anchor-offset:-1.375rem]",
           // Base styles
@@ -20073,7 +20944,7 @@ function ListboxOption2({
   className,
   ...props
 }) {
-  const sharedClasses = clsx12(
+  const sharedClasses = clsx13(
     // Base
     "flex min-w-0 items-center",
     // Icons
@@ -20085,12 +20956,12 @@ function ListboxOption2({
   );
   return /* @__PURE__ */ jsx(Headless4.ListboxOption, { as: Fragment$1, ...props, children: ({ selectedOption }) => {
     if (selectedOption) {
-      return /* @__PURE__ */ jsx("div", { className: clsx12(className, sharedClasses), children });
+      return /* @__PURE__ */ jsx("div", { className: clsx13(className, sharedClasses), children });
     }
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: clsx12(
+        className: clsx13(
           // Basic layout
           "group/option grid cursor-pointer grid-cols-[--spacing(5)_1fr] items-baseline gap-x-2 rounded-sm py-2.5 pr-3.5 pl-2 sm:grid-cols-[--spacing(4)_1fr] sm:py-1.5 sm:pr-3 sm:pl-1.5",
           // Typography
@@ -20121,7 +20992,7 @@ function ListboxOption2({
               )
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: clsx12(className, sharedClasses, "col-start-2"), children })
+          /* @__PURE__ */ jsx("span", { className: clsx13(className, sharedClasses, "col-start-2"), children })
         ]
       }
     );
@@ -20132,7 +21003,7 @@ function ListboxLabel({ className, ...props }) {
     "span",
     {
       ...props,
-      className: clsx12(className, "ml-2.5 truncate first:ml-0 sm:ml-2 sm:first:ml-0")
+      className: clsx13(className, "ml-2.5 truncate first:ml-0 sm:ml-2 sm:first:ml-0")
     }
   );
 }
@@ -20145,7 +21016,7 @@ function ListboxDescription({
     "span",
     {
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         "flex flex-1 overflow-hidden text-grey-500 group-data-focus/option:text-white before:w-2 before:min-w-0 before:shrink dark:text-grey-400"
       ),
@@ -20193,74 +21064,6 @@ function Spinner({ className, size = "md", ...props }) {
     }
   ) });
 }
-function Text({ className, trim = "normal", size = 2, label = false, ...props }) {
-  const textSizeClasses = {
-    1: "text-[length:var(--font-size-1)] leading-[var(--line-height-28)] tracking-[var(--letter-spacing-0)]",
-    2: "text-[length:var(--font-size-2)] leading-[var(--line-height-24)] tracking-[var(--letter-spacing-0)]",
-    3: "text-[length:var(--font-size-3)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]",
-    4: "text-[length:var(--font-size-4)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]"
-  };
-  const labelSizeClasses = {
-    1: "text-[length:var(--font-size-1)] leading-[var(--line-height-24)] tracking-[var(--letter-spacing-0)]",
-    2: "text-[length:var(--font-size-2)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]",
-    3: "text-[length:var(--font-size-3)] leading-[var(--line-height-16)] tracking-[var(--letter-spacing-0)]",
-    4: "text-[length:var(--font-size-4)] leading-[var(--line-height-16)] tracking-[var(--letter-spacing-0)]"
-  };
-  const sizeClass = label ? labelSizeClasses[size] : textSizeClasses[size];
-  const trimClasses = {
-    normal: ["before:content-none after:content-none"],
-    start: [
-      'before:content-[""] before:table after:content-none',
-      "before:mb-[calc(var(--leading-trim-start,var(--default-leading-trim-start))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
-    ],
-    end: [
-      'before:content-none after:content-[""] after:table',
-      "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
-    ],
-    both: [
-      'before:content-[""] before:table after:content-[""] after:table',
-      "before:mb-[calc(var(--leading-trim-start,var(--default-leading-trim-start))-var(--line-height,calc(1em*var(--default-line-height)))/2)]",
-      "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
-    ]
-  };
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      "data-slot": "text",
-      ...props,
-      className: clsx12(className, trimClasses[trim], "text-grey-800 dark:text-grey-400", sizeClass)
-    }
-  );
-}
-function TextLink({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Link,
-    {
-      ...props,
-      className: clsx12(
-        className,
-        "text-primary-800 underline decoration-primary-800/50 data-hover:decoration-primary-800 dark:text-white dark:decoration-white/50 dark:data-hover:decoration-white"
-      )
-    }
-  );
-}
-function Strong({ className, ...props }) {
-  return /* @__PURE__ */ jsx("strong", { ...props, className: clsx12(className, "font-medium text-grey-950 dark:text-white") });
-}
-function Code({ className, ...props }) {
-  const hasLanguageClass = typeof className === "string" && className.includes("language-");
-  return /* @__PURE__ */ jsx(
-    "code",
-    {
-      ...props,
-      className: clsx12(
-        className,
-        !hasLanguageClass && "language-plaintext",
-        "text-sm sm:text-[0.8125rem]"
-      )
-    }
-  );
-}
 function Loading() {
   return /* @__PURE__ */ jsxs("div", { className: "flex min-h-screen items-center justify-center gap-4 bg-grey-50 dark:bg-grey-900", children: [
     /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading...", size: "lg" }),
@@ -20820,7 +21623,7 @@ function MultiLevelPushMenu({
                 {
                   href: item.href,
                   onClick: (e) => handleItemClick(item, e),
-                  className: clsx12(
+                  className: clsx13(
                     "relative flex w-full cursor-pointer items-center justify-between gap-x-6 border-l p-4 transition-colors hover:border-primary-800 hover:bg-primary-800/10",
                     pathname === item.href ? "border-primary-800 bg-primary-800/10 font-semibold text-primary-800" : "border-transparent text-grey-800",
                     isAnimating && "pointer-events-none"
@@ -20832,7 +21635,7 @@ function MultiLevelPushMenu({
                 {
                   onClick: (e) => handleItemClick(item, e),
                   disabled: isAnimating,
-                  className: clsx12(
+                  className: clsx13(
                     "relative flex w-full cursor-pointer items-center justify-between gap-x-6 border-l p-4 transition-colors hover:border-primary-800 hover:bg-primary-800/10",
                     pathname === item.href ? "border-primary-800 bg-primary-800/10 font-semibold text-primary-800" : "border-transparent text-grey-800",
                     isAnimating && "pointer-events-none"
@@ -20899,7 +21702,7 @@ function MobileHeader({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: clsx12(
+        className: clsx13(
           "relative flex w-full items-center py-4",
           menu && !search && "justify-start",
           search && "justify-between",
@@ -20915,7 +21718,7 @@ function MobileHeader({
             {
               href: "/",
               "aria-label": "Home page",
-              className: clsx12(
+              className: clsx13(
                 "flex items-center",
                 menu && !search && "justify-start",
                 search && !menu && "flex-row justify-between",
@@ -20926,7 +21729,7 @@ function MobileHeader({
                 /* @__PURE__ */ jsxs(
                   "div",
                   {
-                    className: clsx12(
+                    className: clsx13(
                       "flex flex-wrap items-center",
                       menu && !search && "justify-center text-left",
                       search && !menu && "justify-center text-left",
@@ -28937,7 +29740,7 @@ var featureBundle = {
 // node_modules/framer-motion/dist/es/render/components/motion/proxy.mjs
 var motion = /* @__PURE__ */ createMotionProxy(featureBundle, createDomVisualElement);
 function Navbar({ className, ...props }) {
-  return /* @__PURE__ */ jsx("nav", { ...props, className: clsx12(className, "flex flex-1 items-center gap-4 py-2.5") });
+  return /* @__PURE__ */ jsx("nav", { ...props, className: clsx13(className, "flex flex-1 items-center gap-4 py-2.5") });
 }
 function NavbarDivider({ className, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -28945,16 +29748,16 @@ function NavbarDivider({ className, ...props }) {
     {
       "aria-hidden": "true",
       ...props,
-      className: clsx12(className, "h-6 w-px bg-zinc-950/10 dark:bg-white/10")
+      className: clsx13(className, "h-6 w-px bg-zinc-950/10 dark:bg-white/10")
     }
   );
 }
 function NavbarSection({ className, ...props }) {
   const id3 = useId();
-  return /* @__PURE__ */ jsx(LayoutGroup, { id: id3, children: /* @__PURE__ */ jsx("div", { ...props, className: clsx12(className, "flex items-center gap-3") }) });
+  return /* @__PURE__ */ jsx(LayoutGroup, { id: id3, children: /* @__PURE__ */ jsx("div", { ...props, className: clsx13(className, "flex items-center gap-3") }) });
 }
 function NavbarSpacer({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", ...props, className: clsx12(className, "-ml-4 flex-1") });
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", ...props, className: clsx13(className, "-ml-4 flex-1") });
 }
 var NavbarItem = forwardRef(function NavbarItem2({
   current,
@@ -28962,7 +29765,7 @@ var NavbarItem = forwardRef(function NavbarItem2({
   children,
   ...props
 }, ref) {
-  const classes = clsx12(
+  const classes = clsx13(
     // Base
     "relative flex min-w-0 items-center gap-3 rounded-lg p-2 text-left text-base/6 font-medium text-zinc-950 sm:text-sm/5",
     // Leading icon/icon-only
@@ -28980,7 +29783,7 @@ var NavbarItem = forwardRef(function NavbarItem2({
     "dark:data-hover:bg-white/5 dark:data-hover:*:data-[slot=icon]:fill-white",
     "dark:data-active:bg-white/5 dark:data-active:*:data-[slot=icon]:fill-white"
   );
-  return /* @__PURE__ */ jsxs("span", { className: clsx12(className, "relative"), children: [
+  return /* @__PURE__ */ jsxs("span", { className: clsx13(className, "relative"), children: [
     current && /* @__PURE__ */ jsx(
       motion.span,
       {
@@ -29001,7 +29804,7 @@ var NavbarItem = forwardRef(function NavbarItem2({
       Headless4.Button,
       {
         ...props,
-        className: clsx12("cursor-default", classes),
+        className: clsx13("cursor-default", classes),
         "data-current": current ? "true" : void 0,
         ref,
         children: /* @__PURE__ */ jsx(TouchTarget, { children })
@@ -29010,14 +29813,14 @@ var NavbarItem = forwardRef(function NavbarItem2({
   ] });
 });
 function NavbarLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx("span", { ...props, className: clsx12(className, "truncate") });
+  return /* @__PURE__ */ jsx("span", { ...props, className: clsx13(className, "truncate") });
 }
 function Navigation({
   className,
   onLinkClick,
   navigation
 }) {
-  return /* @__PURE__ */ jsx("nav", { className: clsx12("text-base lg:text-sm", className), children: /* @__PURE__ */ jsx("ul", { role: "list", className: "flex flex-col gap-9", children: navigation.map((section, index) => /* @__PURE__ */ jsxs("li", { children: [
+  return /* @__PURE__ */ jsx("nav", { className: clsx13("text-base lg:text-sm", className), children: /* @__PURE__ */ jsx("ul", { role: "list", className: "flex flex-col gap-9", children: navigation.map((section, index) => /* @__PURE__ */ jsxs("li", { children: [
     section.links ? /* @__PURE__ */ jsx("h2", { className: "font-display font-medium text-grey-800 dark:text-white", children: section.title }) : /* @__PURE__ */ jsx("ul", { role: "list", className: "mt-2 flex flex-col gap-2 border-l lg:mt-4", children: /* @__PURE__ */ jsx("li", { className: "-ml-px flex flex-col items-start gap-2", children: /* @__PURE__ */ jsx(
       NavigationLink,
       {
@@ -29040,7 +29843,7 @@ function NavigationLink({
     {
       href,
       onClick,
-      className: clsx12(
+      className: clsx13(
         "inline-block w-full cursor-pointer rounded-r-sm border-l py-1 pr-2 pl-4 text-left text-base/8 sm:text-sm/6",
         "hover:border-grey-950 hover:bg-primary-800/10 hover:font-semibold hover:text-grey-950",
         "dark:text-grey-400 dark:hover:border-grey-400 dark:hover:text-white",
@@ -29513,7 +30316,7 @@ function Wrapper({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx12("max-w-8xl mx-auto space-y-8 px-4 py-6 sm:px-6 lg:px-12", className),
+      className: clsx13("max-w-8xl mx-auto space-y-8 px-4 py-6 sm:px-6 lg:px-12", className),
       ...props,
       children
     }
@@ -29527,7 +30330,7 @@ function PageHeading({
   return /* @__PURE__ */ jsx(
     "header",
     {
-      className: clsx12(
+      className: clsx13(
         "border-b border-grey-300 bg-white dark:border-grey-700 dark:bg-grey-900",
         className
       ),
@@ -29554,7 +30357,7 @@ function Pagination({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: clsx12(containerStyles[variant], className), ...props, children: /* @__PURE__ */ jsx(PaginationVariantContext.Provider, { value: variant, children }) });
+  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: clsx13(containerStyles[variant], className), ...props, children: /* @__PURE__ */ jsx(PaginationVariantContext.Provider, { value: variant, children }) });
 }
 function PaginationPrevious({ href = null, className, children = "Previous" }) {
   const variant = React5.useContext(PaginationVariantContext);
@@ -29577,7 +30380,7 @@ function PaginationPrevious({ href = null, className, children = "Previous" }) {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx("span", { className: clsx12(className, "grow basis-0"), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("span", { className: clsx13(className, "grow basis-0"), children: /* @__PURE__ */ jsxs(
     Button2,
     {
       ...href === null ? { disabled: true } : { href },
@@ -29611,7 +30414,7 @@ function PaginationNext({ href = null, className, children = "Next" }) {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx("span", { className: clsx12(className, "flex grow basis-0 justify-end"), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("span", { className: clsx13(className, "flex grow basis-0 justify-end"), children: /* @__PURE__ */ jsxs(
     Button2,
     {
       ...href === null ? { disabled: true } : { href },
@@ -29627,9 +30430,9 @@ function PaginationNext({ href = null, className, children = "Next" }) {
 function PaginationList({ className, ...props }) {
   const variant = React5.useContext(PaginationVariantContext);
   if (variant === "line") {
-    return /* @__PURE__ */ jsx("div", { className: clsx12(listStyles.line, className), ...props });
+    return /* @__PURE__ */ jsx("div", { className: clsx13(listStyles.line, className), ...props });
   }
-  return /* @__PURE__ */ jsx("span", { className: clsx12(listStyles.default, className), ...props });
+  return /* @__PURE__ */ jsx("span", { className: clsx13(listStyles.default, className), ...props });
 }
 function PaginationPage({
   href,
@@ -29661,7 +30464,7 @@ function PaginationPage({
       "aria-current": current ? "page" : void 0,
       variant: current ? "solid" : "ghost",
       color: current ? "accent" : "light",
-      className: clsx12(
+      className: clsx13(
         className,
         "leading-none before:absolute before:-inset-px before:rounded-sm",
         "min-h-8 min-w-8 sm:px-[calc(--spacing(4))] sm:py-[calc(--spacing(3))]",
@@ -29682,7 +30485,7 @@ function PaginationGap({
       "span",
       {
         "aria-hidden": "true",
-        className: clsx12(
+        className: clsx13(
           "inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-grey-800 select-none",
           className
         ),
@@ -29696,7 +30499,7 @@ function PaginationGap({
     {
       "aria-hidden": "true",
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         "w-9 text-center text-sm/6 font-semibold text-grey-950 select-none dark:text-white"
       ),
@@ -29716,7 +30519,7 @@ function PrevNextLinksPageLink({
       Link13,
       {
         href,
-        className: clsx12(
+        className: clsx13(
           "flex items-center gap-x-1 text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300",
           dir === "previous" && "flex-row-reverse"
         ),
@@ -29725,7 +30528,7 @@ function PrevNextLinksPageLink({
           /* @__PURE__ */ jsx(
             Icons.east,
             {
-              className: clsx12("size-5 flex-none fill-current", dir === "previous" && "-scale-x-100")
+              className: clsx13("size-5 flex-none fill-current", dir === "previous" && "-scale-x-100")
             }
           )
         ]
@@ -29999,7 +30802,7 @@ function Prose({
   return /* @__PURE__ */ jsx(
     Component2,
     {
-      className: clsx12(
+      className: clsx13(
         className,
         "prose max-w-none dark:!prose-invert",
         // headings
@@ -30771,7 +31574,7 @@ function SidebarNavigation({
   navigation
 }) {
   const pathname = usePathname();
-  return /* @__PURE__ */ jsx("nav", { className: clsx12("text-base lg:text-sm", className), children: /* @__PURE__ */ jsx("ul", { role: "list", className: "flex flex-col gap-9", children: navigation.map((section, sectionIndex) => /* @__PURE__ */ jsxs("li", { children: [
+  return /* @__PURE__ */ jsx("nav", { className: clsx13("text-base lg:text-sm", className), children: /* @__PURE__ */ jsx("ul", { role: "list", className: "flex flex-col gap-9", children: navigation.map((section, sectionIndex) => /* @__PURE__ */ jsxs("li", { children: [
     section.links ? /* @__PURE__ */ jsx("h2", { className: "font-display font-medium text-foreground dark:text-white", children: section.title }) : /* @__PURE__ */ jsx(
       "ul",
       {
@@ -30806,7 +31609,7 @@ function SidebarLink({ link, pathname, onLinkClick, depth }) {
   const hasChildren = Array.isArray(link.links) && link.links.length > 0;
   const isActive = pathname === link.href;
   const isActiveOrHasActiveDescendant = isLinkOrDescendantActive(link, pathname);
-  const baseLinkClasses = clsx12(
+  const baseLinkClasses = clsx13(
     "w-full cursor-pointer rounded-r-sm border-l py-1 pr-2 pl-4 text-left text-base/8 sm:text-sm/6",
     "hover:border-grey-950 hover:bg-primary-800/10 hover:font-semibold hover:text-grey-950",
     "dark:text-grey-400 dark:hover:border-grey-400 dark:hover:text-white",
@@ -30816,13 +31619,13 @@ function SidebarLink({ link, pathname, onLinkClick, depth }) {
     /* @__PURE__ */ jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
-        className: clsx12(baseLinkClasses, "group flex items-center justify-between gap-1"),
+        className: clsx13(baseLinkClasses, "group flex items-center justify-between gap-1"),
         children: [
           /* @__PURE__ */ jsx("span", { children: link.title }),
           /* @__PURE__ */ jsx(
             Icons.chevron_right,
             {
-              className: clsx12(
+              className: clsx13(
                 "ml-2 size-5 transition-transform duration-200",
                 "group-data-[state=open]:rotate-90"
               )
@@ -30831,7 +31634,7 @@ function SidebarLink({ link, pathname, onLinkClick, depth }) {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsx("ul", { className: clsx12("mt-2 ml-5 flex flex-col gap-1 border-l pl-0"), children: link.links && link.links.map((childLink) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsx("ul", { className: clsx13("mt-2 ml-5 flex flex-col gap-1 border-l pl-0"), children: link.links && link.links.map((childLink) => /* @__PURE__ */ jsx(
       SidebarLink,
       {
         link: childLink,
@@ -31160,7 +31963,7 @@ var StepIndicator = React5.forwardRef(
     return /* @__PURE__ */ jsx("ul", { role: "list", ref, className: cn("w-full", className), ...props, children: array.map((step, stepIdx) => /* @__PURE__ */ jsx(
       "li",
       {
-        className: clsx12(stepIdx !== array.length - 1 ? "pb-3" : "", "relative"),
+        className: clsx13(stepIdx !== array.length - 1 ? "pb-3" : "", "relative"),
         children: step.href === pathname && !(step.status === "completed" || step.status === "error" || step.status === "saved" || step.status === "cannot-start") ? /* @__PURE__ */ jsx(Fragment, { children: step.status === "in-progress" ? /* @__PURE__ */ jsxs(Fragment, { children: [
           stepIdx !== array.length - 1 ? /* @__PURE__ */ jsx(
             "div",
@@ -31406,7 +32209,7 @@ function StepNavigation({
     })),
     [navigation, formStatus, getStatus]
   );
-  return /* @__PURE__ */ jsx("nav", { className: clsx12("text-base lg:text-sm", className), children: /* @__PURE__ */ jsx("ul", { role: "list", className: "space-y-9", children: navigationWithStatus.map((section) => /* @__PURE__ */ jsxs("li", { children: [
+  return /* @__PURE__ */ jsx("nav", { className: clsx13("text-base lg:text-sm", className), children: /* @__PURE__ */ jsx("ul", { role: "list", className: "space-y-9", children: navigationWithStatus.map((section) => /* @__PURE__ */ jsxs("li", { children: [
     /* @__PURE__ */ jsx("h2", { className: "font-display font-medium text-slate-900 dark:text-white", children: section.title }),
     /* @__PURE__ */ jsx(StepIndicator, { className: "mt-2 lg:mt-4", array: section.links })
   ] }, section.title)) }) });
@@ -31434,7 +32237,7 @@ function SwitchGroup({ className, ...props }) {
     {
       "data-slot": "control",
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         // Basic groups
         "space-y-3 **:data-[slot=label]:font-normal",
@@ -31453,7 +32256,7 @@ function SwitchField({
     {
       "data-slot": "field",
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         // Base layout
         "grid grid-cols-[1fr_auto] gap-x-8 gap-y-1 sm:grid-cols-[1fr_auto]",
@@ -31517,7 +32320,7 @@ function Switch2({
     {
       "data-slot": "control",
       ...props,
-      className: clsx12(
+      className: clsx13(
         className,
         // Base styles
         "group relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8",
@@ -31544,7 +32347,7 @@ function Switch2({
         "span",
         {
           "aria-hidden": "true",
-          className: clsx12(
+          className: clsx13(
             // Basic layout
             "pointer-events-none relative inline-block size-4.5 rounded-full sm:size-3.5",
             // Transition
@@ -31653,7 +32456,7 @@ function TableOfContents({ tableOfContents }) {
       "ol",
       {
         role: "list",
-        className: clsx12(
+        className: clsx13(
           "mt-3 flex flex-col gap-2",
           "border-l border-grey-900/10 dark:border-white/10",
           "text-sm/6 text-grey-700 dark:text-grey-400"
@@ -31664,7 +32467,7 @@ function TableOfContents({ tableOfContents }) {
             {
               href: `#${section.id}`,
               prefetch: false,
-              className: clsx12(
+              className: clsx13(
                 "-ml-px inline-block border-l pl-4",
                 "hover:border-primary-800 dark:hover:border-white",
                 isActive(section) ? "border-primary-800 font-semibold text-primary-800 dark:border-white dark:text-white" : "border-transparent"
@@ -31677,7 +32480,7 @@ function TableOfContents({ tableOfContents }) {
             {
               href: `#${subSection.id}`,
               prefetch: false,
-              className: clsx12(
+              className: clsx13(
                 "-ml-px inline-block border-l pl-8",
                 "hover:border-primary-800 dark:hover:border-white",
                 isActive(subSection) ? "border-primary-800 font-semibold text-primary-800 dark:border-white dark:text-white" : "border-transparent"
@@ -34993,6 +35796,6 @@ var languages = [
   "html"
 ];
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Action2 as Action, Actions, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, Artifact, ArtifactAction, ArtifactActions, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactTitle, AspectRatio, AuthLayout, AvailableChartColors, Avatar, AvatarFallback, AvatarImage, Badge, BadgeButton, BarChart, BarList, BaseColorSwatches, Branch, BranchMessages, BranchNext, BranchPage, BranchPrevious, BranchSelector, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, Button2 as Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CategoryBar, ChainOfThought, ChainOfThoughtContent, ChainOfThoughtHeader, ChainOfThoughtImage, ChainOfThoughtSearchResult, ChainOfThoughtSearchResults, ChainOfThoughtStep, ChartContainer, ChartLegend3 as ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip3 as ChartTooltip, ChartTooltipContent, Checkbox, CheckboxSmall, Code, CodeBlock, CodeBlockCopyButton, CodeDemo, CodeHighlight, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorCard, ColorPairingTool, ColorSwatches, ColourScale, ComboChart, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Context, ContextCacheUsage, ContextContent, ContextContentBody, ContextContentFooter, ContextContentHeader, ContextInputUsage, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ContextOutputUsage, ContextReasoningUsage, ContextTrigger, Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, DataTableToolbar, DataTableViewOptions, Description4 as Description, DescriptionDetails, DescriptionList, DescriptionTerm, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChart, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicFavicon, ErrorMessage, ExpandableSearch, ExpandableSearchField, Field2 as Field, FieldGroup, FieldLabel, Fieldset2 as Fieldset, Footer, FooterAcknowledgement, FooterLegalLinks, FooterSmallPrint, FooterSocialLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormatToggle, GenerateInterpolatedColors, Header2 as Header, Heading, HeroBannerSupportingImage, HoverCard, HoverCardContent, HoverCardTrigger, Icons, Image4 as Image, InlineCitation, InlineCitationCard, InlineCitationCardBody, InlineCitationCardTrigger, InlineCitationCarousel, InlineCitationCarouselContent, InlineCitationCarouselHeader, InlineCitationCarouselIndex, InlineCitationCarouselItem, InlineCitationSource, InlineCitationText, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label5 as Label, Legend6 as Legend, LineChart, Link, _List as List, Listbox2 as Listbox, ListboxDescription, ListboxLabel, ListboxOption2 as ListboxOption, Loader, Loading, Logo, MainNavigation, Masthead, MegaMenu, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageContent, MobileHeader, MobileSearch, MultiLevelPushMenu, NSWCard, NSWCardArrow, NSWCardDescription, NSWCardIcon, NSWCardImg, NSWCardTitle, Navbar, NavbarDivider, NavbarItem, NavbarLabel, NavbarSection, NavbarSpacer, Navigation, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotFound, OpenIn, OpenInChatGPT, OpenInClaude, OpenInContent, OpenInScira, OpenInT3, OpenInTrigger, OpenInv0, PageHeading, Pagination, PaginationGap, PaginationList, PaginationNext, PaginationPage, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PreWithCopy, PrevNextLinks, PrevNextLinksPageLink, Progress, ProgressBar, ProgressCircle, PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputSubmit, PromptInputTextarea, PromptInputToolbar, PromptInputTools, Prose, RadioGroup2 as RadioGroup, RadioGroupItem, Reasoning, ReasoningContent, ReasoningTrigger, ResizableHandle, ResizablePanel, ResizablePanelGroup, Response, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator4 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLink, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNavigation, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiteSearch, Skeleton, Slider, Social, Source, Sources, SourcesContent, SourcesTrigger, SparkAreaChart, SparkBarChart, SparkLineChart, Spinner, StepIndicator, StepNavigation, Strong, SubmitButton, Suggestion, Suggestions, Switch2 as Switch, SwitchField, SwitchGroup, TabNavigation, TabNavigationLink, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, Tabs2 as Tabs, TabsContent, TabsList, TabsTrigger, Task, TaskContent, TaskItem, TaskItemFile, TaskTrigger, Text, TextLink, Textarea, ThemeColorPalette, ThemeProvider, ThemeSelector, ThemeSwitcher, Toaster, TocContext, TocProvider, Toggle, ToggleGroup, ToggleGroupItem, Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, Tooltip5 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopLevel, TouchTarget, Tracker, Tooltip3 as TremorTooltip, ViewToggle, WebPreview, WebPreviewBody, WebPreviewNavigation, WebPreviewUrl, Wrapper, aboriginal, addStartStopToColorArray, allPalettes, badgeVariants, brand, buttonVariants, camelCase, chartColors, cn, colorDataArray, colorThemes, colors, constructCategoryColors, createColorArray, createColorData, createFormStore, darkenColor, diverging, domToSimple, focusInput, focusRing, generateColorThemes, generateDataVisColors, getColorClassName, getColorValue, getHeadings, getNodeText, getSurroundingColors, getYAxisDomain, hasErrorInput, hasOnlyOneValueForKey, humaniseVariant, interpolateColors, isLightColor, kebabCase, languages, lightenColor, navigationMenuTriggerStyle, oklchConverter, progressBarVariants, renderColorOutput, renderColorOutputToDTFM, semantic, sequential, shades, themeIndices, themeTokens, toggleVariants, truncate, useActiveSectionObserver, useDisableToc, useFormField, useIsMobile, useOnWindowResize, usePageHeadings, usePromptInputAttachments, useSelectorHeight, useSidebar, useStickyOffset, useToc };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Action2 as Action, Actions, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, Artifact, ArtifactAction, ArtifactActions, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactTitle, AspectRatio, AuthLayout, AvailableChartColors, Avatar, AvatarFallback, AvatarImage, Badge, BadgeButton, BarChart, BarList, BaseColorSwatches, Branch, BranchMessages, BranchNext, BranchPage, BranchPrevious, BranchSelector, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, Button2 as Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CategoryBar, ChainOfThought, ChainOfThoughtContent, ChainOfThoughtHeader, ChainOfThoughtImage, ChainOfThoughtSearchResult, ChainOfThoughtSearchResults, ChainOfThoughtStep, ChartContainer, ChartLegend3 as ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip3 as ChartTooltip, ChartTooltipContent, Checkbox, CheckboxSmall, Code, CodeBlock, CodeBlockCopyButton, CodeDemo, CodeHighlight, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorCard, ColorPairingTool, ColorPairingToolV2, ColorSwatches, ColourScale, ComboChart, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Context, ContextCacheUsage, ContextContent, ContextContentBody, ContextContentFooter, ContextContentHeader, ContextInputUsage, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ContextOutputUsage, ContextReasoningUsage, ContextTrigger, Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, DataTableToolbar, DataTableViewOptions, Description4 as Description, DescriptionDetails, DescriptionList, DescriptionTerm, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChart, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicFavicon, ErrorMessage, ExpandableSearch, ExpandableSearchField, Field2 as Field, FieldGroup, FieldLabel, Fieldset2 as Fieldset, Footer, FooterAcknowledgement, FooterLegalLinks, FooterSmallPrint, FooterSocialLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormatToggle, GenerateInterpolatedColors, Header2 as Header, Heading, HeroBannerSupportingImage, HoverCard, HoverCardContent, HoverCardTrigger, Icons, Image4 as Image, InlineCitation, InlineCitationCard, InlineCitationCardBody, InlineCitationCardTrigger, InlineCitationCarousel, InlineCitationCarouselContent, InlineCitationCarouselHeader, InlineCitationCarouselIndex, InlineCitationCarouselItem, InlineCitationSource, InlineCitationText, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label5 as Label, Legend6 as Legend, LineChart, Link, _List as List, Listbox2 as Listbox, ListboxDescription, ListboxLabel, ListboxOption2 as ListboxOption, Loader, Loading, Logo, MainNavigation, Masthead, MegaMenu, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageContent, MobileHeader, MobileSearch, MultiLevelPushMenu, NSWCard, NSWCardArrow, NSWCardDescription, NSWCardIcon, NSWCardImg, NSWCardTitle, Navbar, NavbarDivider, NavbarItem, NavbarLabel, NavbarSection, NavbarSpacer, Navigation, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotFound, OpenIn, OpenInChatGPT, OpenInClaude, OpenInContent, OpenInScira, OpenInT3, OpenInTrigger, OpenInv0, PageHeading, Pagination, PaginationGap, PaginationList, PaginationNext, PaginationPage, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PreWithCopy, PrevNextLinks, PrevNextLinksPageLink, Progress, ProgressBar, ProgressCircle, PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputSubmit, PromptInputTextarea, PromptInputToolbar, PromptInputTools, Prose, RadioGroup2 as RadioGroup, RadioGroupItem, Reasoning, ReasoningContent, ReasoningTrigger, ResizableHandle, ResizablePanel, ResizablePanelGroup, Response, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator4 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLink, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNavigation, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiteSearch, Skeleton, Slider, Social, Source, Sources, SourcesContent, SourcesTrigger, SparkAreaChart, SparkBarChart, SparkLineChart, Spinner, StepIndicator, StepNavigation, Strong, SubmitButton, Suggestion, Suggestions, Switch2 as Switch, SwitchField, SwitchGroup, TabNavigation, TabNavigationLink, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, Tabs2 as Tabs, TabsContent, TabsList, TabsTrigger, Task, TaskContent, TaskItem, TaskItemFile, TaskTrigger, Text, TextLink, Textarea, ThemeColorPalette, ThemeProvider, ThemeSelector, ThemeSwitcher, Toaster, TocContext, TocProvider, Toggle, ToggleGroup, ToggleGroupItem, Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, Tooltip5 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopLevel, TouchTarget, Tracker, Tooltip3 as TremorTooltip, ViewToggle, WebPreview, WebPreviewBody, WebPreviewNavigation, WebPreviewUrl, Wrapper, aboriginal, addStartStopToColorArray, allPalettes, badgeVariants, brand, buttonVariants, camelCase, chartColors, cn, colorDataArray, colorThemes, colors, constructCategoryColors, createColorArray, createColorData, createFormStore, darkenColor, diverging, domToSimple, focusInput, focusRing, generateColorThemes, generateDataVisColors, getColorClassName, getColorValue, getHeadings, getNodeText, getSurroundingColors, getYAxisDomain, hasErrorInput, hasOnlyOneValueForKey, humaniseVariant, interpolateColors, isLightColor, kebabCase, languages, lightenColor, navigationMenuTriggerStyle, oklchConverter, progressBarVariants, renderColorOutput, renderColorOutputToDTFM, semantic, sequential, shades, themeIndices, themeTokens, toggleVariants, truncate, useActiveSectionObserver, useDisableToc, useFormField, useIsMobile, useOnWindowResize, usePageHeadings, usePromptInputAttachments, useSelectorHeight, useSidebar, useStickyOffset, useToc };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map