@nswds/app 1.35.0 → 1.37.0

package/dist/index.js

@@ -1,14 +1,14 @@
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import clsx12, { clsx } from 'clsx';
+import clsx4, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import * as Headless from '@headlessui/react';
+import * as Headless4 from '@headlessui/react';
 import { PopoverGroup, Popover as Popover$1, PopoverButton, PopoverPanel } from '@headlessui/react';
 import * as React15 from 'react';
-import React15__default, { forwardRef, useEffect, createContext, useRef, useState, useMemo, useCallback, useContext, useLayoutEffect } from 'react';
+import React15__default, { forwardRef, useEffect, createContext, useRef, useState, useMemo, useContext, useLayoutEffect } from 'react';
 import Link10 from 'next/link';
 import * as culori from 'culori';
 import { Slot } from '@radix-ui/react-slot';
@@ -27,7 +27,6 @@ import 'prismjs/components/prism-tsx';
 import 'prismjs/components/prism-typescript';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
-import * as LabelPrimitive from '@radix-ui/react-label';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { CircleIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, ArrowLeft, ArrowRight, MinusIcon } from 'lucide-react';
 import * as TabsPrimitive2 from '@radix-ui/react-tabs';
@@ -40,6 +39,7 @@ import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { Drawer as Drawer$1 } from 'vaul';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';
+import * as LabelPrimitive from '@radix-ui/react-label';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as MenubarPrimitive from '@radix-ui/react-menubar';
@@ -355,7 +355,7 @@ function AvatarFallback({
   );
 }
 var Link = forwardRef(function Link2(props, ref) {
-  return /* @__PURE__ */ jsx(Headless.DataInteractive, { children: /* @__PURE__ */ jsx(Link10, { ...props, ref }) });
+  return /* @__PURE__ */ jsx(Headless4.DataInteractive, { children: /* @__PURE__ */ jsx(Link10, { ...props, ref }) });
 });
 var styles = {
   base: [
@@ -678,11 +678,11 @@ var Button2 = forwardRef(function Button3({ className, variant, color, size, chi
       children: /* @__PURE__ */ jsx(TouchTarget, { children })
     }
   ) : /* @__PURE__ */ jsx(
-    Headless.Button,
+    Headless4.Button,
     {
       "data-variant": variant,
       ...props,
-      className: clsx12(classes, "cursor-pointer"),
+      className: clsx4(classes, "cursor-pointer"),
       ref,
       children: /* @__PURE__ */ jsx(TouchTarget, { children })
     }
@@ -1147,7 +1147,7 @@ var BadgeButton = forwardRef(function BadgeButton2({
   children,
   ...props
 }, ref) {
-  const classes = clsx12(className, focusOutline[color], [
+  const classes = clsx4(className, focusOutline[color], [
     // Base
     "group relative inline-flex rounded-sm",
     // Focus
@@ -1165,11 +1165,11 @@ var BadgeButton = forwardRef(function BadgeButton2({
       children: /* @__PURE__ */ jsx(TouchTarget, { children: /* @__PURE__ */ jsx(Badge, { variant, color, size, children }) })
     }
   ) : /* @__PURE__ */ jsx(
-    Headless.Button,
+    Headless4.Button,
     {
       "data-variant": variant,
       ...props,
-      className: clsx12(classes, "cursor-pointer"),
+      className: clsx4(classes, "cursor-pointer"),
       ref,
       children: /* @__PURE__ */ jsx(TouchTarget, { children: /* @__PURE__ */ jsx(Badge, { variant, color, size, children }) })
     }
@@ -2306,16 +2306,108 @@ function PopoverContent({
 function PopoverAnchor({ ...props }) {
   return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
 }
-function Label3({ className, ...props }) {
+function Fieldset2({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
-    LabelPrimitive.Root,
+    Headless4.Fieldset,
+    {
+      ...props,
+      className: clsx4(className, "*:data-[slot=text]:mt-1 [&>*+[data-slot=control]]:mt-6")
+    }
+  );
+}
+function Legend2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Headless4.Legend,
+    {
+      "data-slot": "legend",
+      ...props,
+      className: clsx4(
+        className,
+        "text-grey-900 text-base/6 font-semibold data-disabled:opacity-50 sm:text-sm/6 dark:text-white"
+      )
+    }
+  );
+}
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "control", ...props, className: clsx4(className, "space-y-8") });
+}
+function Field2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Headless4.Field,
+    {
+      ...props,
+      className: clsx4(
+        className,
+        "[&>[data-slot=label]+[data-slot=control]]:mt-3",
+        "[&>[data-slot=label]+[data-slot=description]]:mt-1",
+        "[&>[data-slot=description]+[data-slot=control]]:mt-3",
+        "[&>[data-slot=control]+[data-slot=description]]:mt-3",
+        "[&>[data-slot=control]+[data-slot=error]]:mt-3",
+        "*:data-[slot=label]:font-medium"
+      )
+    }
+  );
+}
+function Label4({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Headless4.Label,
     {
       "data-slot": "label",
-      className: cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+      ...props,
+      className: clsx4(
+        // Base
+        "flex items-center gap-2",
+        "text-grey-900 text-base/6 font-semibold select-none",
+        // Dark mode
+        "dark:group-data-[disabled=true]:text-grey-400 dark:text-white",
+        // Disabled state
+        "group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
         className
-      ),
-      ...props
+      )
+    }
+  );
+}
+function Description2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Headless4.Description,
+    {
+      "data-slot": "description",
+      ...props,
+      className: clsx4(
+        className,
+        "text-grey-500 dark:text-grey-400 text-base/6 data-disabled:opacity-50 sm:text-sm/6"
+      )
+    }
+  );
+}
+function ErrorMessage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Headless4.Description,
+    {
+      "data-slot": "error",
+      ...props,
+      className: clsx4(
+        className,
+        "text-danger-600 dark:text-danger-500 text-base/6 data-disabled:opacity-50 sm:text-sm/6"
+      )
     }
   );
 }
@@ -2527,7 +2619,7 @@ function ThemeSelector({
             className: "grid grid-cols-2 gap-2",
             children: Object.entries(colorThemes2[themeCategory]).map(([key, theme2]) => /* @__PURE__ */ jsxs("div", { className: cn(labelStyles.base, ""), children: [
               /* @__PURE__ */ jsx(RadioGroupItem, { value: key, id: `primary-${key}`, className: "peer sr-only" }),
-              /* @__PURE__ */ jsxs(Label3, { htmlFor: `primary-${key}`, className: cn(labelStyles.label, ""), children: [
+              /* @__PURE__ */ jsxs(Label4, { htmlFor: `primary-${key}`, className: cn(labelStyles.label, ""), children: [
                 /* @__PURE__ */ jsx(
                   "div",
                   {
@@ -2552,7 +2644,7 @@ function ThemeSelector({
             className: "grid grid-cols-2 gap-2",
             children: availableAccentColors.map((key) => /* @__PURE__ */ jsxs("div", { className: cn(labelStyles.base, ""), children: [
               /* @__PURE__ */ jsx(RadioGroupItem, { value: key, id: `accent-${key}`, className: "peer sr-only" }),
-              /* @__PURE__ */ jsxs(Label3, { htmlFor: `accent-${key}`, className: cn(labelStyles.label, ""), children: [
+              /* @__PURE__ */ jsxs(Label4, { htmlFor: `accent-${key}`, className: cn(labelStyles.label, ""), children: [
                 /* @__PURE__ */ jsx(
                   "div",
                   {
@@ -7172,6 +7264,25 @@ function Footer({
     /* @__PURE__ */ jsx(FooterSmallPrint, { department, socialLinks })
   ] });
 }
+function Label6({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    LabelPrimitive.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        // Base
+        "flex items-center gap-2",
+        "text-grey-900 text-base/6 font-semibold select-none",
+        // Dark mode
+        "dark:group-data-[disabled=true]:text-grey-400 dark:text-white",
+        // Disabled state
+        "group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
 var Form = FormProvider;
 var FormFieldContext = React15.createContext({});
 var FormField = ({
@@ -7206,7 +7317,7 @@ function FormItem({ className, ...props }) {
 function FormLabel({ className, ...props }) {
   const { error, formItemId } = useFormField();
   return /* @__PURE__ */ jsx(
-    Label3,
+    Label6,
     {
       "data-slot": "form-label",
       "data-error": !!error,
@@ -7300,7 +7411,7 @@ var toggleVariants = cva(styles3.base, {
   variants: {
     variant: {
       ghost: "",
-      outline: clsx12(styles3.outline)
+      outline: clsx4(styles3.outline)
     },
     size: {
       default: "h-9 px-2 min-w-9",
@@ -7444,7 +7555,7 @@ function Heading({
     Element,
     {
       ...props,
-      className: clsx12(
+      className: clsx4(
         className,
         trimClasses[trim],
         "m-0",
@@ -7459,7 +7570,7 @@ function Heading({
 
 // package.json
 var package_default = {
-  version: "1.34.0"};
+  version: "1.36.0"};
 function Logo(props) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: "sr-only", children: "NSW Government" }),
@@ -7597,7 +7708,12 @@ function Header2({
   return /* @__PURE__ */ jsxs(
     "header",
     {
-      className: clsx12(
+      "aria-label": "Header",
+      role: "banner",
+      "data-slot": "header",
+      "data-scrolled": isScrolled,
+      id: "nsw-header",
+      className: clsx4(
         "sticky top-0 z-50 flex flex-none flex-wrap items-center justify-between bg-white px-4 py-5 transition duration-500 sm:px-6 lg:px-12",
         shadow && "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"
@@ -7716,7 +7832,7 @@ ListItem.displayName = "List.Item";
 var _List = List2;
 _List.Item = ListItem;
 function Masthead() {
-  return /* @__PURE__ */ jsx("div", { className: "bg-primary-800 h-[var(--masthead-height)] w-full", children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex w-full items-center justify-between px-4 py-2 sm:px-6 lg:px-12", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-12", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-white", children: "A NSW Government website" }) }) }) });
+  return /* @__PURE__ */ jsx("div", { id: "nsw-masthead", className: "bg-primary-800 w-full", children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex w-full items-center justify-between px-4 py-2 sm:px-6 lg:px-12", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-12", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-white", children: "A NSW Government website" }) }) }) });
 }
 function Menubar({ className, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -7925,40 +8041,38 @@ function MenubarSubContent({
     }
   );
 }
-function MainNavigation({ navigation }) {
-  const [headerHeight, setHeaderHeight] = useState(88);
+function useSelectorHeight(selector = "header") {
+  const [height, setHeight] = useState(0);
+  const elementRef = useRef(null);
+  const resizeObserverRef = useRef(null);
   useEffect(() => {
-    const measureHeader = () => {
-      const header2 = document.querySelector("header");
-      if (header2) {
-        setHeaderHeight(header2.offsetHeight);
+    const element = document.querySelector(selector);
+    if (!element) return;
+    elementRef.current = element;
+    setHeight(element.offsetHeight);
+    resizeObserverRef.current = new ResizeObserver(() => {
+      if (elementRef.current) {
+        setHeight(elementRef.current.offsetHeight);
       }
-    };
-    const timeoutId = setTimeout(measureHeader, 100);
-    const header = document.querySelector("header");
-    let resizeObserver = null;
-    if (header) {
-      resizeObserver = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          setHeaderHeight(entry.contentRect.height);
-        }
-      });
-      resizeObserver.observe(header);
-    }
+    });
+    resizeObserverRef.current.observe(element);
     return () => {
-      clearTimeout(timeoutId);
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
+      resizeObserverRef.current?.disconnect();
     };
-  }, []);
+  }, [selector]);
+  return height;
+}
+function MainNavigation({ navigation }) {
+  const headerHeight = useSelectorHeight();
   return /* @__PURE__ */ jsx(
     "nav",
     {
+      "aria-label": "Main Navigation",
+      role: "navigation",
+      id: "nsw-main-navigation",
       className: "shadow-grey-900/5 sticky z-40 hidden bg-gray-100 shadow-md sm:px-6 lg:block lg:px-4 dark:shadow-none",
       style: {
         top: `${headerHeight}px`,
-        // Ensure the nav doesn't jump when header height is calculated
         transition: "top 0.2s ease-in-out"
       },
       children: /* @__PURE__ */ jsx("div", { className: "relative z-50 mx-auto flex items-center justify-between", children: /* @__PURE__ */ jsx(PopoverGroup, { className: "flex justify-start", children: navigation.map(
@@ -8051,7 +8165,7 @@ function Navigation({
   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, index) => /* @__PURE__ */ jsxs("li", { children: [
+  return /* @__PURE__ */ jsx("nav", { className: clsx4("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 text-foreground font-medium dark:text-white", children: section.title }) : /* @__PURE__ */ jsx(
       "ul",
       {
@@ -8062,7 +8176,7 @@ function Navigation({
           {
             href: section.href || "/",
             onClick: onLinkClick,
-            className: clsx12(
+            className: clsx4(
               "text-foreground inline-block border-l border-transparent pl-5 text-base/8 sm:pl-4 sm:text-sm/6",
               "hover:border-nsw-grey-950 hover:text-nsw-gray-950 hover:font-semibold",
               "dark:text-nsw-grey-400",
@@ -8084,7 +8198,7 @@ function Navigation({
           {
             href: link.href,
             onClick: onLinkClick,
-            className: clsx12(
+            className: clsx4(
               "text-foreground inline-block border-l border-transparent pl-5 text-base/8 sm:pl-4 sm:text-sm/6",
               "hover:border-nsw-grey-950 hover:text-nsw-gray-950 hover:font-semibold",
               "dark:text-nsw-grey-400",
@@ -8341,7 +8455,7 @@ function PrevNextLinksPageLink({
       Link10,
       {
         href,
-        className: clsx12(
+        className: clsx4(
           "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"
         ),
@@ -8350,7 +8464,7 @@ function PrevNextLinksPageLink({
           /* @__PURE__ */ jsx(
             Icons.east,
             {
-              className: clsx12("size-5 flex-none fill-current", dir === "previous" && "-scale-x-100")
+              className: clsx4("size-5 flex-none fill-current", dir === "previous" && "-scale-x-100")
             }
           )
         ]
@@ -8593,7 +8707,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: clsx4("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 text-foreground font-medium dark:text-white", children: section.title }) : /* @__PURE__ */ jsx(
       "ul",
       {
@@ -8634,7 +8748,7 @@ function SidebarNavigation({
 function SidebarLink({ link, pathname, onLinkClick, depth }) {
   const hasChildren = Array.isArray(link.links) && link.links.length > 0;
   const isActive = pathname === link.href;
-  const baseLinkClasses = clsx12(
+  const baseLinkClasses = clsx4(
     "border-l border-transparent pl-4 pr-2 text-base/8 sm:text-sm/6 w-full text-left py-1 rounded-r-md cursor-pointer",
     "hover:border-nsw-grey-950 hover:text-nsw-gray-950 hover:font-semibold hover:bg-primary-800/10",
     "dark:text-nsw-grey-400 dark:hover:border-nsw-grey-400 dark:hover:text-white",
@@ -8644,13 +8758,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: clsx4(baseLinkClasses, "group flex items-center justify-between gap-1"),
         children: [
           /* @__PURE__ */ jsx("span", { children: link.title }),
           /* @__PURE__ */ jsx(
             Icons.chevron_right,
             {
-              className: clsx12(
+              className: clsx4(
                 "ml-2 size-5 transition-transform duration-200",
                 "group-data-[state=open]:rotate-90"
               )
@@ -8662,7 +8776,7 @@ function SidebarLink({ link, pathname, onLinkClick, depth }) {
     /* @__PURE__ */ jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsx(
       "ul",
       {
-        className: clsx12(
+        className: clsx4(
           "border-nsw-grey-400 dark:border-nsw-grey-200/15 mt-2 ml-5 flex flex-col gap-1 border-l pl-0"
         ),
         children: link.links && link.links.map((childLink) => /* @__PURE__ */ jsx(
@@ -8685,7 +8799,7 @@ var StepIndicator = React15.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: clsx4(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",
@@ -8931,7 +9045,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: clsx4("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)) }) });
@@ -9176,91 +9290,114 @@ function TableCaption({ className, ...props }) {
     }
   );
 }
-function TableOfContents({ tableOfContents }) {
-  const [currentSection, setCurrentSection] = useState(tableOfContents[0]?.id);
-  const getHeadings2 = useCallback((tableOfContents2) => {
-    return tableOfContents2.flatMap((node) => [node.id, ...node.children.map((child) => child.id)]).map((id) => {
-      const el = document.getElementById(id);
-      if (!el) return null;
-      const style = window.getComputedStyle(el);
-      const scrollMt = parseFloat(style.scrollMarginTop);
-      const top = window.scrollY + el.getBoundingClientRect().top - scrollMt;
-      return { id, top };
-    }).filter((x) => x !== null);
-  }, []);
+function useActiveSectionObserver(tableOfContents) {
+  const headerHeight = useSelectorHeight("#nsw-header");
+  const mastheadHeight = useSelectorHeight("#nsw-masthead");
+  const navigationHeight = useSelectorHeight("#nsw-main-navigation");
+  const [currentSection, setCurrentSection] = useState(null);
   useEffect(() => {
     if (tableOfContents.length === 0) return;
-    const timer = setTimeout(() => {
-      const headings = getHeadings2(tableOfContents);
-      if (headings.length === 0) return;
-      function onScroll() {
-        const top = window.scrollY;
-        let current = headings[0].id;
-        for (const heading of headings) {
-          if (top >= heading.top - 10) {
-            current = heading.id;
-          } else {
-            break;
+    if (!headerHeight) return;
+    const totalHeight = headerHeight + mastheadHeight + navigationHeight;
+    let observer = null;
+    const initializeObserver = () => {
+      const ids = tableOfContents.flatMap((node) => [
+        node.id,
+        ...node.children.map((child) => child.id)
+      ]);
+      ids.forEach((id) => {
+        const el = document.getElementById(id);
+        if (el) {
+          el.style.scrollMarginTop = `${totalHeight + 16}px`;
+        }
+      });
+      observer = new IntersectionObserver(
+        (entries) => {
+          const visible = entries.filter((entry) => entry.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+          if (visible.length > 0) {
+            setCurrentSection(visible[0].target.id);
           }
+        },
+        {
+          rootMargin: `-${totalHeight}px 0px -70% 0px`,
+          threshold: [0, 0.25, 0.5, 0.75, 1]
         }
-        setCurrentSection(current);
-      }
-      window.addEventListener("scroll", onScroll, { passive: true });
-      onScroll();
-      return () => {
-        window.removeEventListener("scroll", onScroll);
-      };
-    }, 100);
+      );
+      ids.forEach((id) => {
+        const el = document.getElementById(id);
+        if (el) observer.observe(el);
+      });
+    };
+    const raf = requestAnimationFrame(() => {
+      initializeObserver();
+    });
     return () => {
-      clearTimeout(timer);
+      if (observer) observer.disconnect();
+      cancelAnimationFrame(raf);
+    };
+  }, [tableOfContents, headerHeight, mastheadHeight, navigationHeight]);
+  useEffect(() => {
+    const handleResize = () => {
+      setCurrentSection(null);
     };
-  }, [getHeadings2, tableOfContents]);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return currentSection;
+}
+function TableOfContents({ tableOfContents }) {
+  const currentSection = useActiveSectionObserver(tableOfContents);
   function isActive(section) {
-    if (section.id === currentSection) {
-      return true;
-    }
-    if (!section.children) {
-      return false;
-    }
-    return section.children.findIndex(isActive) > -1;
+    if (section.id === currentSection) return true;
+    return section.children?.some(isActive) ?? false;
   }
-  return /* @__PURE__ */ jsx("div", { className: "hidden xl:sticky xl:top-[4.75rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.75rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6", children: /* @__PURE__ */ jsx("nav", { "aria-labelledby": "on-this-page-title", className: "w-56", children: tableOfContents.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx("nav", { "aria-labelledby": "on-this-page-title", className: "w-56", children: tableOfContents.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "h2",
       {
         id: "on-this-page-title",
-        className: "font-display text-sm font-medium text-slate-900 dark:text-white",
+        className: "text-grey-950 text-sm/6 font-semibold dark:text-white",
         children: "On this page"
       }
     ),
-    /* @__PURE__ */ jsx("ol", { role: "list", className: "mt-4 space-y-3 text-sm", children: tableOfContents.map((section) => /* @__PURE__ */ jsxs("li", { children: [
-      /* @__PURE__ */ jsx("h3", { children: /* @__PURE__ */ jsx(
-        Link10,
-        {
-          href: `#${section.id}`,
-          className: clsx12(
-            isActive(section) ? "text-primary font-semibold" : "font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300"
+    /* @__PURE__ */ jsx(
+      "ol",
+      {
+        role: "list",
+        className: clsx4(
+          "mt-3 flex flex-col gap-2",
+          "border-grey-900/10 border-l dark:border-white/10",
+          "text-grey-700 dark:text-grey-400 text-sm/6"
+        ),
+        children: tableOfContents.map((section) => /* @__PURE__ */ jsxs("li", { children: [
+          /* @__PURE__ */ jsx(
+            Link10,
+            {
+              href: `#${section.id}`,
+              className: clsx4(
+                "-ml-px inline-block border-l pl-4",
+                "hover:border-primary-800 dark:hover:border-white",
+                isActive(section) ? "text-primary-800 border-primary-800 font-semibold dark:border-white dark:text-white" : "border-transparent"
+              ),
+              children: section.title
+            }
           ),
-          children: section.title
-        }
-      ) }),
-      section.children.length > 0 && /* @__PURE__ */ jsx(
-        "ol",
-        {
-          role: "list",
-          className: "mt-2 space-y-3 pl-5 text-slate-500 dark:text-slate-400",
-          children: section.children.map((subSection) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          section.children.length > 0 && /* @__PURE__ */ jsx("ol", { role: "list", className: "mt-3 flex flex-col gap-2", children: section.children.map((subSection) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
             Link10,
             {
               href: `#${subSection.id}`,
-              className: isActive(subSection) ? "text-primary-750 font-semibold" : "hover:text-slate-600 dark:hover:text-slate-300",
+              className: clsx4(
+                "-ml-px inline-block border-l pl-8",
+                "hover:border-primary-800 dark:hover:border-white",
+                isActive(subSection) ? "text-primary-800 border-primary-800 font-semibold dark:border-white dark:text-white" : "border-transparent"
+              ),
               children: subSection.title
             }
-          ) }, subSection.id))
-        }
-      )
-    ] }, section.id)) })
-  ] }) }) });
+          ) }, subSection.id)) })
+        ] }, section.id))
+      }
+    )
+  ] }) });
 }
 function Tabs2({ className, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -9361,7 +9498,7 @@ function Text({ className, trim = "normal", size = 2, label = false, ...props })
     {
       "data-slot": "text",
       ...props,
-      className: clsx12(className, trimClasses[trim], "text-grey-800 dark:text-grey-400", sizeClass)
+      className: clsx4(className, trimClasses[trim], "text-grey-800 dark:text-grey-400", sizeClass)
     }
   );
 }
@@ -9370,7 +9507,7 @@ function TextLink({ className, ...props }) {
     Link,
     {
       ...props,
-      className: clsx12(
+      className: clsx4(
         className,
         "text-primary-800 decoration-primary-800/50 data-hover:decoration-primary-800 underline dark:text-white dark:decoration-white/50 dark:data-hover:decoration-white"
       )
@@ -9378,14 +9515,14 @@ function TextLink({ className, ...props }) {
   );
 }
 function Strong({ className, ...props }) {
-  return /* @__PURE__ */ jsx("strong", { ...props, className: clsx12(className, "text-grey-950 font-medium dark:text-white") });
+  return /* @__PURE__ */ jsx("strong", { ...props, className: clsx4(className, "text-grey-950 font-medium dark:text-white") });
 }
 function Code({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "code",
     {
       ...props,
-      className: clsx12(
+      className: clsx4(
         className,
         "border-grey-950/10 bg-grey-950/[2.5%] text-grey-950 rounded-sm border px-0.5 text-sm font-medium sm:text-[0.8125rem] dark:border-white/20 dark:bg-white/5 dark:text-white"
       )
@@ -10014,7 +10151,7 @@ var ScrollButton = ({ icon, onClick, disabled }) => {
     }
   );
 };
-var Legend2 = React15__default.forwardRef((props, ref) => {
+var Legend4 = React15__default.forwardRef((props, ref) => {
   const {
     categories,
     colors: colors2 = AvailableChartColors,
@@ -10154,7 +10291,7 @@ var Legend2 = React15__default.forwardRef((props, ref) => {
     ) }) : null
   ] });
 });
-Legend2.displayName = "Legend";
+Legend4.displayName = "Legend";
 var ChartLegend2 = ({ payload }, categoryColors, setLegendHeight, activeLegend, onClick, enableLegendSlider, legendPosition, yAxisWidth) => {
   const legendRef = React15__default.useRef(null);
   useOnWindowResize(() => {
@@ -10175,7 +10312,7 @@ var ChartLegend2 = ({ payload }, categoryColors, setLegendHeight, activeLegend,
         { "justify-end": legendPosition === "right" }
       ),
       children: /* @__PURE__ */ jsx(
-        Legend2,
+        Legend4,
         {
           categories: legendPayload.map((entry) => entry.value),
           colors: legendPayload.map((entry) => categoryColors.get(entry.value)),
@@ -10773,7 +10910,7 @@ var ScrollButton2 = ({ icon, onClick, disabled }) => {
     }
   );
 };
-var Legend3 = React15__default.forwardRef((props, ref) => {
+var Legend5 = React15__default.forwardRef((props, ref) => {
   const {
     categories,
     colors: colors2 = AvailableChartColors,
@@ -10913,7 +11050,7 @@ var Legend3 = React15__default.forwardRef((props, ref) => {
     ) }) : null
   ] });
 });
-Legend3.displayName = "Legend";
+Legend5.displayName = "Legend";
 var ChartLegend3 = ({ payload }, categoryColors, setLegendHeight, activeLegend, onClick, enableLegendSlider, legendPosition, yAxisWidth) => {
   const legendRef = React15__default.useRef(null);
   useOnWindowResize(() => {
@@ -10936,7 +11073,7 @@ var ChartLegend3 = ({ payload }, categoryColors, setLegendHeight, activeLegend,
         { "justify-end": legendPosition === "right" }
       ),
       children: /* @__PURE__ */ jsx(
-        Legend3,
+        Legend5,
         {
           categories: filteredPayload.map((entry) => entry.value),
           colors: filteredPayload.map((entry) => categoryColors.get(entry.value)),
@@ -11773,7 +11910,7 @@ var ScrollButton3 = ({ icon, onClick, disabled }) => {
     }
   );
 };
-var Legend4 = React15__default.forwardRef((props, ref) => {
+var Legend6 = React15__default.forwardRef((props, ref) => {
   const {
     categories,
     barCategoryColors,
@@ -11915,7 +12052,7 @@ var Legend4 = React15__default.forwardRef((props, ref) => {
     ) }) : null
   ] });
 });
-Legend4.displayName = "Legend";
+Legend6.displayName = "Legend";
 var ChartLegend4 = ({ payload }, barCategoryColors, lineCategoryColors, setLegendHeight, activeLegend, onClick, enableLegendSlider, legendPosition, barYAxisWidth, lineYAxisWidth) => {
   const legendRef = React15__default.useRef(null);
   useOnWindowResize(() => {
@@ -11939,7 +12076,7 @@ var ChartLegend4 = ({ payload }, barCategoryColors, lineCategoryColors, setLegen
         { "justify-end": legendPosition === "right" }
       ),
       children: /* @__PURE__ */ jsx(
-        Legend4,
+        Legend6,
         {
           categories: filteredPayload.map((entry) => ({
             name: entry.value,
@@ -12825,7 +12962,7 @@ var ScrollButton4 = ({ icon, onClick, disabled }) => {
     }
   );
 };
-var Legend5 = React15__default.forwardRef((props, ref) => {
+var Legend7 = React15__default.forwardRef((props, ref) => {
   const {
     categories,
     colors: colors2 = AvailableChartColors,
@@ -12965,7 +13102,7 @@ var Legend5 = React15__default.forwardRef((props, ref) => {
     ) }) : null
   ] });
 });
-Legend5.displayName = "Legend";
+Legend7.displayName = "Legend";
 var ChartLegend5 = ({ payload }, categoryColors, setLegendHeight, activeLegend, onClick, enableLegendSlider, legendPosition, yAxisWidth) => {
   const legendRef = React15__default.useRef(null);
   useOnWindowResize(() => {
@@ -12986,7 +13123,7 @@ var ChartLegend5 = ({ payload }, categoryColors, setLegendHeight, activeLegend,
         { "justify-end": legendPosition === "right" }
       ),
       children: /* @__PURE__ */ jsx(
-        Legend5,
+        Legend7,
         {
           categories: legendPayload.map((entry) => entry.value),
           colors: legendPayload.map((entry) => categoryColors.get(entry.value)),
@@ -14423,6 +14560,35 @@ function InputOTPSlot({
 function InputOTPSeparator({ ...props }) {
   return /* @__PURE__ */ jsx("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: /* @__PURE__ */ jsx(MinusIcon, {}) });
 }
+function Prose({
+  as,
+  className,
+  ...props
+}) {
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: clsx4(
+        className,
+        "prose dark:!prose-invert max-w-none",
+        // headings
+        "",
+        // lead
+        "",
+        // links
+        "prose-a:font-medium prose-a:text-primary-800 prose-a:dark:text-grey-100 prose-a:hover:bg-primary-800/10 prose-a:focus-visible:bg-primary-800/10",
+        // link underline
+        "prose-a:underline prose-a:decoration-primary-800 prose-a:underline-offset-4 prose-a:hover:decoration-2",
+        // pre
+        "",
+        // hr
+        ""
+      ),
+      ...props
+    }
+  );
+}
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
   const [isMobile, setIsMobile] = React15.useState(void 0);
@@ -14578,6 +14744,6 @@ var languages = [
   "html"
 ];
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, AspectRatio, AvailableChartColors, Avatar, AvatarFallback, AvatarImage, Badge, BadgeButton, BarChart, BarList, BaseColorSwatches, 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, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Code, CodeDemo, CodeHighlight, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorCard, ColorSwatches, ColourScale, ComboChart, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, 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, ExpandableSearch, ExpandableSearchField, Footer, FooterAcknowledgement, FooterLegalLinks, FooterSmallPrint, FooterSocialLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormatToggle, GenerateInterpolatedColors, Header2 as Header, Heading, HoverCard, HoverCardContent, HoverCardTrigger, Icons, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label3 as Label, LineChart, Link, _List as List, Logo, MainNavigation, Masthead, MegaMenu, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Navigation, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PreWithCopy, PrevNextLinks, PrevNextLinksPageLink, Progress, ProgressBar, ProgressCircle, RadioGroup2 as RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator4 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarLink, SidebarNavigation, SiteSearch, Skeleton, Slider, Social, SparkAreaChart, SparkBarChart, SparkLineChart, Spinner, StepIndicator, StepNavigation, Strong, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, Tabs2 as Tabs, TabsContent, TabsList, TabsTrigger, Text, TextLink, Textarea, ThemeColorPalette, ThemeProvider, ThemeSelector, ThemeSwitcher, Toaster, TocContext, TocProvider, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopLevel, TouchTarget, Tracker, Tooltip5 as TremorTooltip, ViewToggle, aboriginal, addStartStopToColorArray, allPalettes, badgeVariants, brand, buttonVariants, camelCase, chartColors, cn, colorDataArray, colorThemes, colors, constructCategoryColors, createColorArray, createColorData, createFormStore, darkenColor, domToSimple, focusInput, focusRing, generateColorThemes, getColorClassName, getColorValue, getHeadings, getNodeText, getSurroundingColors, getYAxisDomain, hasErrorInput, hasOnlyOneValueForKey, humaniseVariant, interpolateColors, isLightColor, kebabCase, languages, lightenColor, navigationMenuTriggerStyle, oklchConverter, progressBarVariants, renderColorOutput, renderColorOutputToDTFM, semantic, shades, themeIndices, themeTokens, toggleVariants, truncate, useDisableToc, useFormField, useIsMobile, useOnWindowResize, usePageHeadings, useToc };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, AspectRatio, AvailableChartColors, Avatar, AvatarFallback, AvatarImage, Badge, BadgeButton, BarChart, BarList, BaseColorSwatches, 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, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Code, CodeDemo, CodeHighlight, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorCard, ColorSwatches, ColourScale, ComboChart, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Description2 as Description, 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, Fieldset2 as Fieldset, Footer, FooterAcknowledgement, FooterLegalLinks, FooterSmallPrint, FooterSocialLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormatToggle, GenerateInterpolatedColors, Header2 as Header, Heading, HoverCard, HoverCardContent, HoverCardTrigger, Icons, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label4 as Label, Legend2 as Legend, LineChart, Link, _List as List, Logo, MainNavigation, Masthead, MegaMenu, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Navigation, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PreWithCopy, PrevNextLinks, PrevNextLinksPageLink, Progress, ProgressBar, ProgressCircle, Prose, RadioGroup2 as RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator4 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarLink, SidebarNavigation, SiteSearch, Skeleton, Slider, Social, SparkAreaChart, SparkBarChart, SparkLineChart, Spinner, StepIndicator, StepNavigation, Strong, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, Tabs2 as Tabs, TabsContent, TabsList, TabsTrigger, Text, TextLink, Textarea, ThemeColorPalette, ThemeProvider, ThemeSelector, ThemeSwitcher, Toaster, TocContext, TocProvider, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopLevel, TouchTarget, Tracker, Tooltip5 as TremorTooltip, ViewToggle, aboriginal, addStartStopToColorArray, allPalettes, badgeVariants, brand, buttonVariants, camelCase, chartColors, cn, colorDataArray, colorThemes, colors, constructCategoryColors, createColorArray, createColorData, createFormStore, darkenColor, domToSimple, focusInput, focusRing, generateColorThemes, getColorClassName, getColorValue, getHeadings, getNodeText, getSurroundingColors, getYAxisDomain, hasErrorInput, hasOnlyOneValueForKey, humaniseVariant, interpolateColors, isLightColor, kebabCase, languages, lightenColor, navigationMenuTriggerStyle, oklchConverter, progressBarVariants, renderColorOutput, renderColorOutputToDTFM, semantic, shades, themeIndices, themeTokens, toggleVariants, truncate, useActiveSectionObserver, useDisableToc, useFormField, useIsMobile, useOnWindowResize, usePageHeadings, useSelectorHeight, useToc };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map