@nswds/app 1.97.14 → 1.98.0

package/dist/index.js

@@ -42,6 +42,8 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as TabsPrimitives from '@radix-ui/react-tabs';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { Command as Command$1 } from 'cmdk';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
@@ -49,8 +51,6 @@ import { useReactTable, getFacetedUniqueValues, getFacetedRowModel, getSortedRow
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { Drawer as Drawer$1 } from 'vaul';
 import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import * as TogglePrimitive from '@radix-ui/react-toggle';
 import Image2 from 'next/image';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 import { OTPInput, OTPInputContext } from 'input-otp';
@@ -14918,6 +14918,734 @@ function ColorCard({ name, token, hex: hex2, rgb: rgb2, hsl, oklch: oklch2, form
     ] })
   ] }) });
 }
+var recommendedBackgroundTones = [100, 200, 400, 500, 600, 700, 800];
+var AAA_NORMAL_TEXT_RATIO = 7;
+function extractTone(token) {
+  const match = token.match(/-(\d+)$/);
+  return match ? Number.parseInt(match[1], 10) : 0;
+}
+function formatFamilyLabel(name, key) {
+  if (key === "grey") return "Grey";
+  return name.replace(/^NSW Aboriginal\s+/i, "").replace(/^NSW\s+/i, "").trim();
+}
+function toPairingColor(color2) {
+  return {
+    ...color2,
+    tone: extractTone(color2.token)
+  };
+}
+function getPreferredForegroundTone(backgroundTone) {
+  if (backgroundTone <= 200) return 800;
+  if (backgroundTone <= 500) return 700;
+  if (backgroundTone <= 650) return 250;
+  return 200;
+}
+function getPairRating(contrastRatio) {
+  if (contrastRatio >= 7) return "AAA";
+  if (contrastRatio >= 4.5) return "AA";
+  return "AA Large";
+}
+function isPreferredDirection(backgroundTone, foregroundTone, preferredForegroundTone) {
+  if (preferredForegroundTone < backgroundTone) {
+    return foregroundTone < backgroundTone;
+  }
+  return foregroundTone > backgroundTone;
+}
+function buildPair(background, foreground) {
+  const contrastRatio = culori.wcagContrast(background.hex, foreground.hex);
+  return {
+    id: `${background.token}:${foreground.token}`,
+    background,
+    foreground,
+    contrastRatio,
+    passes: {
+      aaLarge: contrastRatio >= 3,
+      aaText: contrastRatio >= 4.5,
+      aaaLarge: contrastRatio >= 4.5,
+      aaaText: contrastRatio >= 7
+    },
+    rating: getPairRating(contrastRatio)
+  };
+}
+function pickForeground(colorsToPair, background, minimumRatio) {
+  const preferredForegroundTone = getPreferredForegroundTone(background.tone);
+  const passingCandidates = colorsToPair.filter((color2) => color2.token !== background.token).map((color2) => buildPair(background, color2)).filter((pair) => pair.contrastRatio >= minimumRatio);
+  if (passingCandidates.length === 0) return null;
+  const preferredCandidates = passingCandidates.filter(
+    (pair) => isPreferredDirection(background.tone, pair.foreground.tone, preferredForegroundTone)
+  );
+  const candidates = preferredCandidates.length > 0 ? preferredCandidates : passingCandidates;
+  return candidates.sort((left, right) => {
+    const leftTargetDelta = Math.abs(left.foreground.tone - preferredForegroundTone);
+    const rightTargetDelta = Math.abs(right.foreground.tone - preferredForegroundTone);
+    if (leftTargetDelta !== rightTargetDelta) {
+      return leftTargetDelta - rightTargetDelta;
+    }
+    const leftToneGap = Math.abs(left.foreground.tone - background.tone);
+    const rightToneGap = Math.abs(right.foreground.tone - background.tone);
+    if (leftToneGap !== rightToneGap) {
+      return rightToneGap - leftToneGap;
+    }
+    return right.contrastRatio - left.contrastRatio;
+  })[0];
+}
+function buildRecommendedPairs(colorsToPair, minimumRatio) {
+  const backgrounds = recommendedBackgroundTones.map((tone) => colorsToPair.find((color2) => color2.tone === tone)).filter((color2) => Boolean(color2));
+  const recommendedPairs = [];
+  for (const background of backgrounds) {
+    const pair = pickForeground(colorsToPair, background, minimumRatio);
+    if (!pair || recommendedPairs.some((item) => item.id === pair.id)) {
+      continue;
+    }
+    recommendedPairs.push(pair);
+  }
+  return recommendedPairs;
+}
+function buildRecommendedCollections(minimumRatio) {
+  return {
+    brand: Object.entries(colors.brand).map(([key, palette]) => {
+      const scale2 = palette.colors.map(toPairingColor);
+      return {
+        key,
+        label: formatFamilyLabel(palette.name, key),
+        paletteName: palette.name,
+        colors: scale2,
+        recommendedPairs: buildRecommendedPairs(scale2, minimumRatio)
+      };
+    }),
+    aboriginal: Object.entries(colors.aboriginal).map(([key, palette]) => {
+      const scale2 = palette.colors.map(toPairingColor);
+      return {
+        key,
+        label: formatFamilyLabel(palette.name, key),
+        paletteName: palette.name,
+        colors: scale2,
+        recommendedPairs: buildRecommendedPairs(scale2, minimumRatio)
+      };
+    })
+  };
+}
+var recommendedAaaPairingCollections = buildRecommendedCollections(AAA_NORMAL_TEXT_RATIO);
+function getPairingColorValue(color2, format) {
+  return getColorValue(color2, format);
+}
+var styles3 = {
+  base: [
+    // Base
+    "inline-flex items-center justify-center gap-2 rounded-sm text-sm font-medium bg-transparent transition-all whitespace-nowrap cursor-pointer border-(--toggle-border) [--toggle-border:var(--color-grey-200)] text-grey-800",
+    // States
+    "data-[state=on]:bg-grey-100 data-[state=on]:text-grey-850",
+    // Hover
+    "hover:bg-grey-100 hover:text-grey-850",
+    // Focus
+    "focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-(--toggle-border)",
+    // Dark mode
+    "dark:text-white",
+    // Dark mode states
+    "dark:data-[state=on]:bg-white/10 dark:data-[state=on]:text-white",
+    // Dark mode hover
+    "dark:hover:bg-white/10 dark:hover:text-white",
+    // Disabled
+    "disabled:pointer-events-none disabled:opacity-50",
+    // Icon
+    '[&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 [&_svg]:shrink-0',
+    // Aria invalid
+    "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+    // Aria invalid dark mode
+    "dark:aria-invalid:ring-destructive/40"
+  ],
+  outline: [
+    // Base
+    "text-grey-800 border [--toggle-border:var(--color-grey-300)]",
+    // States
+    "hover:[--toggle-border:var(--color-grey-400)]",
+    // Dark mode
+    "dark:[--toggle-border:white]/40",
+    // Dark mode states
+    "dark:hover:[--toggle-border:white]/50",
+    // Data on
+    "data-[state=on]:bg-primary-800/10"
+  ]
+};
+var toggleVariants = cva(styles3.base, {
+  variants: {
+    variant: {
+      ghost: "",
+      outline: clsx12(styles3.outline)
+    },
+    size: {
+      default: "h-9 px-2 min-w-9",
+      sm: "h-8 px-1.5 min-w-8",
+      lg: "h-10 px-2.5 min-w-10"
+    }
+  },
+  defaultVariants: {
+    variant: "ghost",
+    size: "default"
+  }
+});
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TogglePrimitive.Root,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var ToggleGroupContext = React5.createContext({
+  size: "default",
+  variant: "ghost"
+});
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Root,
+    {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(
+        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}) {
+  const context = React5.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size,
+      className: cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        "min-w-0 shrink-0 rounded-none shadow-none first:rounded-l-sm last:rounded-r-sm focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function FormatToggle({ format, setFormat }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Format:" }),
+    /* @__PURE__ */ jsxs(
+      ToggleGroup,
+      {
+        type: "single",
+        value: format,
+        onValueChange: (value) => value && setFormat(value),
+        children: [
+          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "hex", "aria-label": "HEX format", children: "HEX" }),
+          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "rgb", "aria-label": "RGB format", children: "RGB" }),
+          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "hsl", "aria-label": "HSL format", children: "HSL" }),
+          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "oklch", "aria-label": "OKLCH format", children: "OKLCH" })
+        ]
+      }
+    )
+  ] });
+}
+function getPreferredFamilyKey(families) {
+  return families.find((family) => family.key === "green")?.key ?? families[0]?.key ?? "";
+}
+function getDefaultPair(family) {
+  if (!family || family.recommendedPairs.length === 0) return null;
+  return family.recommendedPairs.reduce((bestPair, pair) => {
+    const bestDelta = Math.abs(bestPair.background.tone - 600);
+    const currentDelta = Math.abs(pair.background.tone - 600);
+    return currentDelta < bestDelta ? pair : bestPair;
+  }, family.recommendedPairs[0]);
+}
+function getFamilySwatchColor(family) {
+  return family.colors.find((color2) => color2.tone === 500)?.hex ?? family.colors.find((color2) => color2.tone === 400)?.hex ?? family.colors[Math.min(3, family.colors.length - 1)]?.hex ?? "transparent";
+}
+function ColorPairingToolLoading() {
+  return /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-6", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-40 rounded-md border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-6 xl:grid-cols-[minmax(0,1.3fr)_minmax(20rem,0.9fr)]", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-96 rounded-md border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" }),
+      /* @__PURE__ */ jsx("div", { className: "h-96 rounded-md border border-grey-200 bg-grey-50 dark:border-grey-700 dark:bg-grey-900" })
+    ] })
+  ] });
+}
+function getInitialPairingState(searchParams) {
+  const paletteParam = searchParams.get("palette");
+  const familyParam = searchParams.get("family");
+  const pairParam = searchParams.get("pair");
+  const themeCategory = paletteParam === "brand" || paletteParam === "aboriginal" ? paletteParam : "brand";
+  const families = recommendedAaaPairingCollections[themeCategory];
+  const familyKey = families.some((family) => family.key === familyParam) ? familyParam : getPreferredFamilyKey(families);
+  const activeFamily = families.find((family) => family.key === familyKey) ?? families[0];
+  const defaultPair = getDefaultPair(activeFamily);
+  const selectedPairId = activeFamily?.recommendedPairs.some((pair) => pair.id === pairParam) ? pairParam : defaultPair?.id ?? "";
+  return { familyKey, selectedPairId, themeCategory };
+}
+function PairPreview({ family, pair }) {
+  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" }),
+                family.label
+              ]
+            }
+          ),
+          /* @__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: "Tone on tone" }),
+          /* @__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-sm/6 sm:text-base/7", children: "Use only AAA-approved tone-on-tone combinations for headings, body copy, and calls to action on colour." })
+          ] })
+        ] }),
+        /* @__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: [
+                "Pass",
+                /* @__PURE__ */ jsx(Icons.check, { "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 PairDetailCard({
+  color: color2,
+  format,
+  role
+}) {
+  const [, copyToClipboardRaw] = useCopyToClipboard();
+  const [copiedField, setCopiedField] = useState(null);
+  const valueLabel = format.toUpperCase();
+  const formattedValue = getPairingColorValue(color2, format);
+  const copyField = (field) => {
+    const fieldValue = field === "token" ? color2.token : field === "tone" ? String(color2.tone) : formattedValue;
+    copyToClipboardRaw(fieldValue);
+    setCopiedField(field);
+    const toastLabel = field === "token" ? "Token" : field === "tone" ? "Tone" : `${valueLabel} value`;
+    toast(`${toastLabel} copied to clipboard`, {
+      duration: 2e3
+    });
+    setTimeout(() => setCopiedField(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-4", children: [
+    /* @__PURE__ */ jsx(CardHeader, { className: "gap-3 border-b", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "size-14 rounded-2xl border border-grey-200 shadow-sm dark:border-grey-700",
+          style: { backgroundColor: color2.hex }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: role }),
+        /* @__PURE__ */ jsx(CardDescription, { children: color2.name ?? color2.token })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "grid gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Token" }),
+          renderCopyButton("token", `Copy ${role.toLowerCase()} token`)
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "font-mono text-base break-all", children: color2.token })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Tone" }),
+          renderCopyButton("tone", `Copy ${role.toLowerCase()} tone`)
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "font-medium", children: color2.tone })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: valueLabel }),
+          renderCopyButton("value", `Copy ${role.toLowerCase()} ${valueLabel} value`)
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "font-mono text-sm break-all", children: formattedValue })
+      ] })
+    ] })
+  ] });
+}
+function ComplianceRow({
+  label,
+  passes,
+  threshold
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 rounded-xl border border-grey-200 px-4 py-3 dark:border-grey-700", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "font-medium", children: label }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: threshold })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold",
+          passes ? "bg-success-50 text-success-800 dark:bg-success-950/30 dark:text-success-200" : "bg-danger-50 text-danger-800 dark:bg-danger-950/30 dark:text-danger-200"
+        ),
+        children: [
+          passes ? /* @__PURE__ */ jsx(Icons.check, { "data-slot": "icon", className: "size-4" }) : /* @__PURE__ */ jsx(Icons.close, { "data-slot": "icon", className: "size-4" }),
+          passes ? "Pass" : "Fail"
+        ]
+      }
+    )
+  ] });
+}
+function PairComplianceCard({ pair }) {
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "gap-2 border-b", children: [
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "AAA compliance" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: "Only pairs that pass AAA normal-text contrast are suggested here. Evaluation uses the raw contrast ratio, not the rounded display value." })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-grey-200 bg-grey-50 px-4 py-3 dark:border-grey-700 dark:bg-grey-900/60", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase", children: "Contrast ratio" }),
+        /* @__PURE__ */ jsxs("p", { className: "mt-1 text-2xl font-semibold", children: [
+          pair.contrastRatio.toFixed(2),
+          ":1"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        ComplianceRow,
+        {
+          label: "AAA normal text",
+          passes: pair.passes.aaaText,
+          threshold: "7.0:1 or higher"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ComplianceRow,
+        {
+          label: "AAA large text",
+          passes: pair.passes.aaaLarge,
+          threshold: "4.5:1 or higher"
+        }
+      )
+    ] })
+  ] });
+}
+function ColorPairingToolContent() {
+  const searchParams = useSearchParams();
+  const {
+    familyKey: initialFamilyKey,
+    selectedPairId: initialSelectedPairId,
+    themeCategory: initialThemeCategory
+  } = getInitialPairingState(searchParams);
+  const [themeCategory, setThemeCategory] = useState(initialThemeCategory);
+  const [format, setFormat] = useState("hex");
+  const [activeFamilyKey, setActiveFamilyKey] = useState(initialFamilyKey);
+  const [selectedPairId, setSelectedPairId] = useState(initialSelectedPairId);
+  const families = recommendedAaaPairingCollections[themeCategory];
+  const resolvedActiveFamilyKey = families.some((family) => family.key === activeFamilyKey) ? activeFamilyKey : getPreferredFamilyKey(families);
+  const activeFamily = families.find((family) => family.key === resolvedActiveFamilyKey) ?? families[0];
+  const selectedPair = activeFamily?.recommendedPairs.find((pair) => pair.id === selectedPairId) ?? getDefaultPair(activeFamily);
+  const updateUrlParams = (nextThemeCategory, nextFamilyKey, nextSelectedPairId) => {
+    const params = new URLSearchParams(window.location.search);
+    params.set("palette", nextThemeCategory);
+    params.set("family", nextFamilyKey);
+    if (nextSelectedPairId) {
+      params.set("pair", nextSelectedPairId);
+    } else {
+      params.delete("pair");
+    }
+    window.history.replaceState(
+      null,
+      "",
+      `${window.location.pathname}?${params.toString()}${window.location.hash}`
+    );
+  };
+  const handleThemeCategoryChange = (nextThemeCategory) => {
+    const nextFamilies = recommendedAaaPairingCollections[nextThemeCategory];
+    const nextFamilyKey = nextFamilies.some((family) => family.key === activeFamilyKey) ? activeFamilyKey : getPreferredFamilyKey(nextFamilies);
+    const nextActiveFamily = nextFamilies.find((family) => family.key === nextFamilyKey) ?? nextFamilies[0];
+    const nextSelectedPair = nextActiveFamily?.recommendedPairs.find((pair) => pair.id === selectedPairId) ?? getDefaultPair(nextActiveFamily);
+    setThemeCategory(nextThemeCategory);
+    setActiveFamilyKey(nextFamilyKey);
+    setSelectedPairId(nextSelectedPair?.id ?? "");
+    updateUrlParams(nextThemeCategory, nextFamilyKey, nextSelectedPair?.id ?? "");
+  };
+  const handleFamilyChange = (nextFamilyKey) => {
+    const nextActiveFamily = families.find((family) => family.key === nextFamilyKey);
+    const nextSelectedPair = nextActiveFamily?.recommendedPairs.find((pair) => pair.id === selectedPairId) ?? getDefaultPair(nextActiveFamily);
+    setActiveFamilyKey(nextFamilyKey);
+    setSelectedPairId(nextSelectedPair?.id ?? "");
+    updateUrlParams(themeCategory, nextFamilyKey, nextSelectedPair?.id ?? "");
+  };
+  const handlePairChange = (nextSelectedPairId) => {
+    setSelectedPairId(nextSelectedPairId);
+    updateUrlParams(themeCategory, resolvedActiveFamilyKey, nextSelectedPairId);
+  };
+  if (!activeFamily || !selectedPair) {
+    return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: "No recommended AAA pairs available" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: "No recommended pairs are available for the current palette." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Palette:" }),
+        /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            value: themeCategory,
+            onValueChange: (value) => handleThemeCategoryChange(value),
+            children: /* @__PURE__ */ jsxs(SegmentedControlList, { className: "w-full sm:w-fit", children: [
+              /* @__PURE__ */ jsx(SegmentedControlTrigger, { value: "brand", children: "Brand palette" }),
+              /* @__PURE__ */ jsx(SegmentedControlTrigger, { value: "aboriginal", children: "Aboriginal palette" })
+            ] })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(FormatToggle, { format, setFormat })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 lg:grid-cols-4 xl:grid-cols-5", children: families.map((family) => {
+      const isActive = family.key === resolvedActiveFamilyKey;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleFamilyChange(family.key),
+          className: cn(
+            "group relative flex w-full items-center gap-3 rounded-sm border px-3 py-2 text-left transition-colors",
+            "border-grey-200 bg-background hover:bg-primary-800/10 hover:text-foreground dark:hover:bg-white/10",
+            isActive && "border-grey-800 dark:border-grey-400"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "size-4 shrink-0 rounded-full",
+                style: { backgroundColor: getFamilySwatchColor(family) }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: family.label })
+          ]
+        },
+        family.key
+      );
+    }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid items-start gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(17rem,0.68fr)]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsx(PairPreview, { family: activeFamily, pair: selectedPair }),
+          /* @__PURE__ */ jsxs(Card, { children: [
+            /* @__PURE__ */ jsxs(CardHeader, { className: "gap-2 border-b", children: [
+              /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "Background tone strip" }),
+              /* @__PURE__ */ jsx(CardDescription, { children: "Filled chips have a recommended AAA foreground pair. Select one to update the preview." })
+            ] }),
+            /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-5 gap-2 sm:grid-cols-7 lg:grid-cols-10 xl:grid-cols-[repeat(19,minmax(0,1fr))]", children: activeFamily.colors.map((color2) => {
+                const pair = activeFamily.recommendedPairs.find(
+                  (item) => item.background.token === color2.token
+                );
+                const isSelected = selectedPair.background.token === color2.token;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: !pair,
+                    onClick: () => pair && handlePairChange(pair.id),
+                    className: cn(
+                      "group relative h-12 rounded-xl border transition-transform",
+                      pair ? "cursor-pointer border-grey-200 hover:scale-[1.03] dark:border-grey-700" : "cursor-not-allowed border-grey-100 dark:border-grey-800",
+                      isSelected && "ring-2 ring-primary-500 ring-offset-2 ring-offset-background"
+                    ),
+                    style: { backgroundColor: color2.hex },
+                    children: [
+                      pair && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/30 shadow-sm",
+                          style: { backgroundColor: pair.foreground.hex }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                        color2.token,
+                        pair ? ` paired with ${pair.foreground.token}` : " has no recommended pair in this tool"
+                      ] })
+                    ]
+                  },
+                  color2.token
+                );
+              }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm text-muted-foreground", children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "Selected background:",
+                  " ",
+                  /* @__PURE__ */ jsx("strong", { className: "text-foreground", children: selectedPair.background.token })
+                ] }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "Recommended foreground:",
+                  " ",
+                  /* @__PURE__ */ jsx("strong", { className: "text-foreground", children: selectedPair.foreground.token })
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(PairDetailCard, { color: selectedPair.background, format, role: "Background" }),
+            /* @__PURE__ */ jsx(PairDetailCard, { color: selectedPair.foreground, format, role: "Foreground" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxs(Card, { className: "h-fit", children: [
+          /* @__PURE__ */ jsxs(CardHeader, { className: "gap-2 border-b", children: [
+            /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "Recommended pairs" }),
+            /* @__PURE__ */ jsx(CardDescription, { children: "Recommended same-family combinations that meet AAA normal-text contrast." })
+          ] }),
+          /* @__PURE__ */ jsx(CardContent, { className: "grid gap-3", children: activeFamily.recommendedPairs.map((pair) => {
+            const isActive = selectedPair.id === pair.id;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => handlePairChange(pair.id),
+                className: cn(
+                  "rounded-2xl border p-4 text-left transition-colors",
+                  isActive ? "border-primary-500 bg-primary-50/70 dark:bg-primary-950/30" : "border-grey-200 hover:border-grey-400 hover:bg-grey-50 dark:border-grey-700 dark:hover:border-grey-500 dark:hover:bg-grey-900/70"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "size-11 rounded-2xl border border-grey-200 shadow-sm dark:border-grey-700",
+                          style: { backgroundColor: pair.background.hex }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "size-11 rounded-2xl border border-grey-200 shadow-sm dark:border-grey-700",
+                          style: { backgroundColor: pair.foreground.hex }
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-grey-200 px-2.5 py-1 text-xs font-semibold text-muted-foreground dark:border-grey-700", children: [
+                      /* @__PURE__ */ jsx(Icons.contrast, { "data-slot": "icon", className: "size-4" }),
+                      pair.rating
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-1", children: [
+                    /* @__PURE__ */ jsxs("p", { className: "font-medium text-foreground", children: [
+                      pair.background.token,
+                      " / ",
+                      pair.foreground.token
+                    ] }),
+                    /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                      pair.contrastRatio.toFixed(2),
+                      ":1 contrast ratio"
+                    ] })
+                  ] })
+                ]
+              },
+              pair.id
+            );
+          }) })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsx(PairComplianceCard, { pair: selectedPair })
+    ] })
+  ] });
+}
+function ColorPairingTool() {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ColorPairingToolLoading, {}), children: /* @__PURE__ */ jsx(ColorPairingToolContent, {}) });
+}
 function ColorSwatches({ theme: theme2, format, viewMode }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -17397,152 +18125,10 @@ function FormMessage({ className, ...props }) {
     }
   );
 }
-var styles3 = {
-  base: [
-    // Base
-    "inline-flex items-center justify-center gap-2 rounded-sm text-sm font-medium bg-transparent transition-all whitespace-nowrap cursor-pointer border-(--toggle-border) [--toggle-border:var(--color-grey-200)] text-grey-800",
-    // States
-    "data-[state=on]:bg-grey-100 data-[state=on]:text-grey-850",
-    // Hover
-    "hover:bg-grey-100 hover:text-grey-850",
-    // Focus
-    "focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-(--toggle-border)",
-    // Dark mode
-    "dark:text-white",
-    // Dark mode states
-    "dark:data-[state=on]:bg-white/10 dark:data-[state=on]:text-white",
-    // Dark mode hover
-    "dark:hover:bg-white/10 dark:hover:text-white",
-    // Disabled
-    "disabled:pointer-events-none disabled:opacity-50",
-    // Icon
-    '[&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 [&_svg]:shrink-0',
-    // Aria invalid
-    "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
-    // Aria invalid dark mode
-    "dark:aria-invalid:ring-destructive/40"
-  ],
-  outline: [
-    // Base
-    "text-grey-800 border [--toggle-border:var(--color-grey-300)]",
-    // States
-    "hover:[--toggle-border:var(--color-grey-400)]",
-    // Dark mode
-    "dark:[--toggle-border:white]/40",
-    // Dark mode states
-    "dark:hover:[--toggle-border:white]/50",
-    // Data on
-    "data-[state=on]:bg-primary-800/10"
-  ]
-};
-var toggleVariants = cva(styles3.base, {
-  variants: {
-    variant: {
-      ghost: "",
-      outline: clsx12(styles3.outline)
-    },
-    size: {
-      default: "h-9 px-2 min-w-9",
-      sm: "h-8 px-1.5 min-w-8",
-      lg: "h-10 px-2.5 min-w-10"
-    }
-  },
-  defaultVariants: {
-    variant: "ghost",
-    size: "default"
-  }
-});
-function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    TogglePrimitive.Root,
-    {
-      "data-slot": "toggle",
-      className: cn(toggleVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
-var ToggleGroupContext = React5.createContext({
-  size: "default",
-  variant: "ghost"
-});
-function ToggleGroup({
-  className,
-  variant,
-  size,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    ToggleGroupPrimitive.Root,
-    {
-      "data-slot": "toggle-group",
-      "data-variant": variant,
-      "data-size": size,
-      className: cn(
-        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
-    }
-  );
-}
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}) {
-  const context = React5.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ jsx(
-    ToggleGroupPrimitive.Item,
-    {
-      "data-slot": "toggle-group-item",
-      "data-variant": context.variant || variant,
-      "data-size": context.size || size,
-      className: cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size
-        }),
-        "min-w-0 shrink-0 rounded-none shadow-none first:rounded-l-sm last:rounded-r-sm focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-}
-function FormatToggle({ format, setFormat }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Format:" }),
-    /* @__PURE__ */ jsxs(
-      ToggleGroup,
-      {
-        type: "single",
-        value: format,
-        onValueChange: (value) => value && setFormat(value),
-        children: [
-          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "hex", "aria-label": "HEX format", children: "HEX" }),
-          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "rgb", "aria-label": "RGB format", children: "RGB" }),
-          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "hsl", "aria-label": "HSL format", children: "HSL" }),
-          /* @__PURE__ */ jsx(ToggleGroupItem, { value: "oklch", "aria-label": "OKLCH format", children: "OKLCH" })
-        ]
-      }
-    )
-  ] });
-}
 
 // package.json
 var package_default = {
-  version: "1.96.0"};
+  version: "1.97.13"};
 var SluggerContext = React5__default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";
@@ -33691,6 +34277,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, 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, 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