@nswds/app 1.6.0 → 1.8.0

package/dist/index.cjs

@@ -2,25 +2,55 @@
 
 var reactSlot = require('@radix-ui/react-slot')
 var classVarianceAuthority = require('class-variance-authority')
-var clsx2 = require('clsx')
+var clsx5 = require('clsx')
 var tailwindMerge = require('tailwind-merge')
 var jsxRuntime = require('react/jsx-runtime')
 var react = require('react')
-var Link3 = require('next/link')
+var Link4 = require('next/link')
 var navigation = require('next/navigation')
-var slugify = require('@sindresorhus/slugify')
 var nextThemes = require('next-themes')
+var CollapsiblePrimitive = require('@radix-ui/react-collapsible')
+var TabsPrimitive = require('@radix-ui/react-tabs')
+var slugify = require('@sindresorhus/slugify')
 
 function _interopDefault(e) {
   return e && e.__esModule ? e : { default: e }
 }
 
-var clsx2__default = /*#__PURE__*/ _interopDefault(clsx2)
-var Link3__default = /*#__PURE__*/ _interopDefault(Link3)
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e
+  var n = Object.create(null)
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k)
+        Object.defineProperty(
+          n,
+          k,
+          d.get
+            ? d
+            : {
+                enumerable: true,
+                get: function () {
+                  return e[k]
+                },
+              },
+        )
+      }
+    })
+  }
+  n.default = e
+  return Object.freeze(n)
+}
+
+var clsx5__default = /*#__PURE__*/ _interopDefault(clsx5)
+var Link4__default = /*#__PURE__*/ _interopDefault(Link4)
+var CollapsiblePrimitive__namespace = /*#__PURE__*/ _interopNamespace(CollapsiblePrimitive)
+var TabsPrimitive__namespace = /*#__PURE__*/ _interopNamespace(TabsPrimitive)
 
 // src/components/Button.tsx
 function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx2.clsx(inputs))
+  return tailwindMerge.twMerge(clsx5.clsx(inputs))
 }
 function truncate(text, maxLength) {
   if (text.length <= maxLength) {
@@ -38,21 +68,18 @@ function camelCase(str) {
   return str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_, chr) => chr.toUpperCase())
 }
 var buttonVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-zinc-950 focus-visible:ring-zinc-950/50 focus-visible:ring-[3px] aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 dark:focus-visible:border-zinc-300 dark:focus-visible:ring-zinc-300/50 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default:
-          'bg-zinc-900 text-zinc-50 shadow-xs hover:bg-zinc-900/90 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/90',
+        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
         destructive:
-          'bg-red-500 text-white shadow-xs hover:bg-red-500/90 focus-visible:ring-red-500/20 dark:focus-visible:ring-red-500/40 dark:bg-red-500/60 dark:bg-red-900 dark:hover:bg-red-900/90 dark:focus-visible:ring-red-900/20 dark:dark:focus-visible:ring-red-900/40 dark:dark:bg-red-900/60',
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
         outline:
-          'border bg-white shadow-xs hover:bg-zinc-100 hover:text-zinc-900 dark:bg-zinc-200/30 dark:border-zinc-200 dark:hover:bg-zinc-200/50 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:dark:bg-zinc-800/30 dark:dark:border-zinc-800 dark:dark:hover:bg-zinc-800/50',
-        secondary:
-          'bg-zinc-100 text-zinc-900 shadow-xs hover:bg-zinc-100/80 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80',
-        ghost:
-          'hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-100/50 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:dark:hover:bg-zinc-800/50',
-        link: 'text-zinc-900 underline-offset-4 hover:underline dark:text-zinc-50',
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',
@@ -612,7 +639,7 @@ var Icons = {
     }),
 }
 function SocialLink({ href, icon: Icon, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Link3__default.default, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Link4__default.default, {
     href,
     className: 'group',
     children: [
@@ -654,66 +681,13 @@ function Footer() {
     children: /* @__PURE__ */ jsxRuntime.jsx(SmallPrint, {}),
   })
 }
-function getNodeText(node) {
-  let text = ''
-  for (const child of node.children ?? []) {
-    if ('type' in child && child.type === 'text') {
-      text += child.attributes?.content ?? ''
-    } else if (child instanceof HTMLElement) {
-      text += getNodeText(child)
-    }
-  }
-  return text
-}
-function domToSimple(node) {
-  if (node.nodeType === Node.TEXT_NODE) {
-    return {
-      type: 'text',
-      attributes: {
-        content: node.textContent ?? void 0,
-      },
-    }
-  }
-  if (node.nodeType === Node.ELEMENT_NODE) {
-    return {
-      type: node.nodeName.toLowerCase(),
-      attributes: {},
-      children: Array.from(node.childNodes).map(domToSimple),
-    }
-  }
-  throw new Error('Unsupported node type')
-}
-function getHeadings(slugify$1 = slugify.slugifyWithCounter()) {
-  const content = document.querySelector('article')
-  if (!content) {
-    return []
-  }
-  const headings = Array.from(content.querySelectorAll('h2, h3, h4, h5, h6'))
-  const result = []
-  const stack = []
-  headings.forEach((el) => {
-    const simplifiedNode = domToSimple(el)
-    const title = getNodeText(simplifiedNode).trim()
-    const slugifiedTitle = slugify$1(title)
-    const id = el.id || slugifiedTitle
-    const level = parseInt(el.tagName[1])
-    const node = { level, id, title, children: [] }
-    if (!el.id) el.id = id
-    if (level === 2) {
-      result.push(node)
-      stack.length = 0
-      stack.push(node)
-    } else {
-      while (stack.length && stack[stack.length - 1].level >= level) {
-        stack.pop()
-      }
-      if (stack.length) {
-        stack[stack.length - 1].children.push(node)
-      }
-      stack.push(node)
-    }
+function Logo(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx('span', { className: 'sr-only', children: 'NSW Government' }),
+      /* @__PURE__ */ jsxRuntime.jsx(Icons.logo, { ...props }),
+    ],
   })
-  return result
 }
 function Masthead() {
   return /* @__PURE__ */ jsxRuntime.jsx('div', {
@@ -730,18 +704,10 @@ function Masthead() {
     }),
   })
 }
-function Logo(props) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx('span', { className: 'sr-only', children: 'NSW Government' }),
-      /* @__PURE__ */ jsxRuntime.jsx(Icons.logo, { ...props }),
-    ],
-  })
-}
 function Navigation({ className, onLinkClick, navigation: navigation$1 }) {
   const pathname = navigation.usePathname()
   return /* @__PURE__ */ jsxRuntime.jsx('nav', {
-    className: clsx2__default.default('text-base lg:text-sm', className),
+    className: clsx5__default.default('text-base lg:text-sm', className),
     children: /* @__PURE__ */ jsxRuntime.jsx('ul', {
       role: 'list',
       className: 'flex flex-col gap-9',
@@ -763,10 +729,10 @@ function Navigation({ className, onLinkClick, navigation: navigation$1 }) {
                     'li',
                     {
                       className: '-ml-px flex flex-col items-start gap-2',
-                      children: /* @__PURE__ */ jsxRuntime.jsx(Link3__default.default, {
+                      children: /* @__PURE__ */ jsxRuntime.jsx(Link4__default.default, {
                         href: link.href,
                         onClick: onLinkClick,
-                        className: clsx2__default.default(
+                        className: clsx5__default.default(
                           'text-foreground inline-block border-l 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',
@@ -789,39 +755,65 @@ function Navigation({ className, onLinkClick, navigation: navigation$1 }) {
     }),
   })
 }
-function ThemeSwitcher() {
-  const { resolvedTheme, setTheme } = nextThemes.useTheme()
-  const [mounted, setMounted] = react.useState(false)
-  const classes = 'fill-nsw-grey-600 dark:fill-nsw-grey-100 size-6'
-  react.useEffect(() => {
-    setMounted(true)
-  }, [])
-  if (!mounted) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Button, {
-      variant: 'ghost',
-      size: 'icon',
-      className: 'h-10 w-10',
-      disabled: true,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Icons.light_mode, { className: classes }),
-    })
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Button, {
-    variant: 'outline',
-    size: 'icon',
-    className: 'h-10 w-10 cursor-pointer',
-    onClick: () => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark'),
-    'aria-label': `Switch to ${resolvedTheme === 'dark' ? 'light' : 'dark'} theme`,
+function ArrowIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx('svg', {
+    viewBox: '0 0 16 16',
+    'aria-hidden': 'true',
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx('path', {
+      d: 'm9.182 13.423-1.17-1.16 3.505-3.505H3V7.065h8.517l-3.506-3.5L9.181 2.4l5.512 5.511-5.511 5.512Z',
+    }),
+  })
+}
+function PageLink({ title, href, dir = 'next', ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs('div', {
+    ...props,
     children: [
-      resolvedTheme === 'dark'
-        ? /* @__PURE__ */ jsxRuntime.jsx(Icons.light_mode, { className: classes })
-        : /* @__PURE__ */ jsxRuntime.jsx(Icons.dark_mode, { className: classes }),
-      /* @__PURE__ */ jsxRuntime.jsx('span', {
-        className: 'sr-only',
-        children: resolvedTheme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme',
+      /* @__PURE__ */ jsxRuntime.jsx('dt', {
+        className: 'font-display text-sm font-medium text-slate-900 dark:text-white',
+        children: dir === 'next' ? 'Next' : 'Previous',
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx('dd', {
+        className: 'mt-1',
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Link4__default.default, {
+          href,
+          className: clsx5__default.default(
+            'flex items-center gap-x-1 text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300',
+            dir === 'previous' && 'flex-row-reverse',
+          ),
+          children: [
+            title,
+            /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, {
+              className: clsx5__default.default(
+                'h-4 w-4 flex-none fill-current',
+                dir === 'previous' && '-scale-x-100',
+              ),
+            }),
+          ],
+        }),
       }),
     ],
   })
 }
+function PrevNextLinks({ navigation: navigation$1 }) {
+  const pathname = navigation.usePathname()
+  const allLinks = navigation$1.flatMap((section) => section.links)
+  const linkIndex = allLinks.findIndex((link) => link.href === pathname)
+  const previousPage = linkIndex > -1 ? allLinks[linkIndex - 1] : null
+  const nextPage = linkIndex > -1 ? allLinks[linkIndex + 1] : null
+  if (!nextPage && !previousPage) {
+    return null
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs('dl', {
+    className: 'mt-12 flex border-t border-slate-200 pt-6 dark:border-slate-800',
+    children: [
+      previousPage &&
+        /* @__PURE__ */ jsxRuntime.jsx(PageLink, { dir: 'previous', ...previousPage }),
+      nextPage &&
+        /* @__PURE__ */ jsxRuntime.jsx(PageLink, { className: 'ml-auto text-right', ...nextPage }),
+    ],
+  })
+}
 function TableOfContents({ tableOfContents }) {
   const [currentSection, setCurrentSection] = react.useState(tableOfContents[0]?.id)
   const getHeadings2 = react.useCallback((tableOfContents2) => {
@@ -891,9 +883,9 @@ function TableOfContents({ tableOfContents }) {
                   {
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx('h3', {
-                        children: /* @__PURE__ */ jsxRuntime.jsx(Link3__default.default, {
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Link4__default.default, {
                           href: `#${section.id}`,
-                          className: clsx2__default.default(
+                          className: clsx5__default.default(
                             isActive(section)
                               ? 'text-primary font-semibold'
                               : 'font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300',
@@ -909,7 +901,7 @@ function TableOfContents({ tableOfContents }) {
                             /* @__PURE__ */ jsxRuntime.jsx(
                               'li',
                               {
-                                children: /* @__PURE__ */ jsxRuntime.jsx(Link3__default.default, {
+                                children: /* @__PURE__ */ jsxRuntime.jsx(Link4__default.default, {
                                   href: `#${subSection.id}`,
                                   className: isActive(subSection)
                                     ? 'text-primary-light font-semibold'
@@ -932,225 +924,297 @@ function TableOfContents({ tableOfContents }) {
     }),
   })
 }
-function ArrowIcon(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx('svg', {
-    viewBox: '0 0 16 16',
-    'aria-hidden': 'true',
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx('path', {
-      d: 'm9.182 13.423-1.17-1.16 3.505-3.505H3V7.065h8.517l-3.506-3.5L9.181 2.4l5.512 5.511-5.511 5.512Z',
-    }),
-  })
-}
-function PageLink({ title, href, dir = 'next', ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs('div', {
-    ...props,
+function ThemeSwitcher() {
+  const { resolvedTheme, setTheme } = nextThemes.useTheme()
+  const [mounted, setMounted] = react.useState(false)
+  const classes = 'fill-nsw-grey-600 dark:fill-nsw-grey-100 size-6'
+  react.useEffect(() => {
+    setMounted(true)
+  }, [])
+  if (!mounted) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Button, {
+      variant: 'ghost',
+      size: 'icon',
+      className: 'h-10 w-10',
+      disabled: true,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icons.light_mode, { className: classes }),
+    })
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Button, {
+    variant: 'outline',
+    size: 'icon',
+    className: 'h-10 w-10 cursor-pointer',
+    onClick: () => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark'),
+    'aria-label': `Switch to ${resolvedTheme === 'dark' ? 'light' : 'dark'} theme`,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx('dt', {
-        className: 'font-display text-sm font-medium text-slate-900 dark:text-white',
-        children: dir === 'next' ? 'Next' : 'Previous',
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx('dd', {
-        className: 'mt-1',
-        children: /* @__PURE__ */ jsxRuntime.jsxs(Link3__default.default, {
-          href,
-          className: clsx2__default.default(
-            'flex items-center gap-x-1 text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300',
-            dir === 'previous' && 'flex-row-reverse',
-          ),
-          children: [
-            title,
-            /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, {
-              className: clsx2__default.default(
-                'h-4 w-4 flex-none fill-current',
-                dir === 'previous' && '-scale-x-100',
-              ),
-            }),
-          ],
-        }),
+      resolvedTheme === 'dark'
+        ? /* @__PURE__ */ jsxRuntime.jsx(Icons.light_mode, { className: classes })
+        : /* @__PURE__ */ jsxRuntime.jsx(Icons.dark_mode, { className: classes }),
+      /* @__PURE__ */ jsxRuntime.jsx('span', {
+        className: 'sr-only',
+        children: resolvedTheme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme',
       }),
     ],
   })
 }
-function PrevNextLinks({ navigation: navigation$1 }) {
-  const pathname = navigation.usePathname()
-  const allLinks = navigation$1.flatMap((section) => section.links)
-  const linkIndex = allLinks.findIndex((link) => link.href === pathname)
-  const previousPage = linkIndex > -1 ? allLinks[linkIndex - 1] : null
-  const nextPage = linkIndex > -1 ? allLinks[linkIndex + 1] : null
-  if (!nextPage && !previousPage) {
-    return null
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs('dl', {
-    className: 'mt-12 flex border-t border-slate-200 pt-6 dark:border-slate-800',
-    children: [
-      previousPage &&
-        /* @__PURE__ */ jsxRuntime.jsx(PageLink, { dir: 'previous', ...previousPage }),
-      nextPage &&
-        /* @__PURE__ */ jsxRuntime.jsx(PageLink, { className: 'ml-auto text-right', ...nextPage }),
-    ],
+function Collapsible({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.Root, {
+    'data-slot': 'collapsible',
+    ...props,
   })
 }
-var defaultNavigation = [
-  {
-    title: 'Getting Started',
-    links: [
-      { title: 'Introduction', href: '/' },
-      { title: 'Installation', href: '/installation' },
-    ],
-  },
-  {
-    title: 'Components',
-    links: [
-      { title: 'Button', href: '/components/button' },
-      { title: 'Layout', href: '/components/layout' },
-      { title: 'Navigation', href: '/components/navigation' },
-    ],
-  },
-]
-function usePageHeadings() {
-  const [headings, setHeadings] = react.useState([])
-  react.useEffect(() => {
-    const result = getHeadings()
-    setHeadings(result)
-  }, [])
-  return headings
+function CollapsibleTrigger2({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.CollapsibleTrigger, {
+    'data-slot': 'collapsible-trigger',
+    ...props,
+  })
 }
-function Header({ sitename } = {}) {
-  const [isScrolled, setIsScrolled] = react.useState(false)
-  react.useEffect(() => {
-    function onScroll() {
-      setIsScrolled(window.scrollY > 0)
-    }
-    onScroll()
-    window.addEventListener('scroll', onScroll, { passive: true })
-    return () => {
-      window.removeEventListener('scroll', onScroll)
-    }
-  }, [])
-  return /* @__PURE__ */ jsxRuntime.jsxs('header', {
-    className: clsx2__default.default(
-      'sticky top-0 z-50 flex flex-none flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 sm:px-6 lg:px-8 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',
-    ),
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx('div', { className: 'mr-6 flex lg:hidden' }),
-      /* @__PURE__ */ jsxRuntime.jsx('div', {
-        className: 'relative flex grow basis-0 items-center',
-        children: /* @__PURE__ */ jsxRuntime.jsxs(Link3__default.default, {
-          href: '/',
-          'aria-label': 'Home page',
-          className: 'flex items-center justify-between',
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Logo, { className: 'h-12 w-auto lg:h-14' }),
-            /* @__PURE__ */ jsxRuntime.jsx('h2', {
-              className: 'text-primary ml-6 text-2xl font-semibold dark:text-white',
-              children: sitename,
-            }),
-          ],
-        }),
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx('div', { className: '-my-5 mr-6 sm:mr-8 md:mr-0' }),
-      /* @__PURE__ */ jsxRuntime.jsxs('div', {
-        className: 'relative flex basis-0 justify-end gap-2 sm:gap-4 md:grow',
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ThemeSwitcher, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(Button, {
-            variant: 'outline',
-            size: 'icon',
-            className: 'h-10 w-10',
-            asChild: true,
-            children: /* @__PURE__ */ jsxRuntime.jsx(Link3__default.default, {
-              href: 'https://github.com',
-              className: 'group',
-              'aria-label': 'GitHub',
-              children: /* @__PURE__ */ jsxRuntime.jsx(Icons.github, {
-                className: 'fill-nsw-grey-600 dark:fill-nsw-grey-100 size-6',
-              }),
-            }),
-          }),
-        ],
-      }),
-    ],
+function CollapsibleContent2({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.CollapsibleContent, {
+    'data-slot': 'collapsible-content',
+    ...props,
   })
 }
-function Layout({ children, sitename, navigation: navigation$1 = defaultNavigation }) {
+function SidebarNavigation({ className, onLinkClick, navigation: navigation$1 }) {
   const pathname = navigation.usePathname()
-  const isHomePage = pathname === '/'
-  const tableOfContents = usePageHeadings()
-  return /* @__PURE__ */ jsxRuntime.jsxs('div', {
-    className: 'flex w-full flex-col',
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Masthead, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(Header, { sitename }),
-      isHomePage && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs('div', {
-        className:
-          'max-w-8xl relative mx-auto flex w-full flex-auto justify-center sm:px-2 lg:px-8 xl:px-12',
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs('div', {
-            className: 'hidden lg:relative lg:block lg:flex-none',
+  return /* @__PURE__ */ jsxRuntime.jsx('nav', {
+    className: clsx5__default.default('text-base lg:text-sm', className),
+    children: /* @__PURE__ */ jsxRuntime.jsx('ul', {
+      role: 'list',
+      className: 'flex flex-col gap-9',
+      children: navigation$1.map((section, sectionIndex) =>
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          'li',
+          {
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx('div', {
-                className: 'bg-nsw-grey-50 absolute inset-y-0 right-0 w-[50vw] dark:hidden',
-              }),
-              /* @__PURE__ */ jsxRuntime.jsx('div', {
-                className:
-                  'from-nsw-grey-600 absolute top-16 right-0 bottom-0 hidden h-12 w-px bg-linear-to-t dark:block',
-              }),
-              /* @__PURE__ */ jsxRuntime.jsx('div', {
-                className:
-                  'bg-nsw-grey-600 absolute top-28 right-0 bottom-0 hidden w-px dark:block',
+              /* @__PURE__ */ jsxRuntime.jsx('h2', {
+                className: 'font-display text-foreground font-medium dark:text-white',
+                children: section.title,
               }),
-              /* @__PURE__ */ jsxRuntime.jsx('div', {
+              /* @__PURE__ */ jsxRuntime.jsx('ul', {
+                role: 'list',
                 className:
-                  'sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-4.75rem)] w-64 overflow-x-hidden overflow-y-auto py-16 pr-8 pl-0.5 xl:w-72 xl:pr-16',
-                children: /* @__PURE__ */ jsxRuntime.jsx(Navigation, { navigation: navigation$1 }),
+                  'border-nsw-grey-400 dark:border-nsw-grey-200/15 mt-2 flex flex-col gap-2 border-l lg:mt-4',
+                children: section.links.map((link) =>
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    SidebarLink,
+                    {
+                      link,
+                      pathname,
+                      onLinkClick: onLinkClick || (() => {}),
+                      depth: 1,
+                    },
+                    link.href,
+                  ),
+                ),
               }),
             ],
-          }),
-          /* @__PURE__ */ jsxRuntime.jsxs('div', {
-            className: 'flex flex-1 flex-col',
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs('div', {
-                className: 'flex flex-1',
+          },
+          sectionIndex,
+        ),
+      ),
+    }),
+  })
+}
+function SidebarLink({ link, pathname, onLinkClick, depth }) {
+  const hasChildren = Array.isArray(link.links) && link.links.length > 0
+  const isActive = pathname === link.href
+  const baseLinkClasses = clsx5__default.default(
+    'border-l 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/10',
+    'dark:text-nsw-grey-400 dark:hover:border-nsw-grey-400 dark:hover:text-white',
+    isActive &&
+      'border-primary text-primary font-bold dark:border-white bg-nsw-sky-100 dark:bg-nsw-sky-900/20',
+  )
+  return /* @__PURE__ */ jsxRuntime.jsx('li', {
+    className: '-ml-px flex flex-col items-start gap-1',
+    children: hasChildren
+      ? /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, {
+          className: 'w-full',
+          defaultOpen: isActive,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CollapsibleTrigger2, {
+              asChild: true,
+              children: /* @__PURE__ */ jsxRuntime.jsxs('button', {
+                className: clsx5__default.default(
+                  baseLinkClasses,
+                  'group flex items-center justify-between gap-1',
+                ),
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs('div', {
-                    className:
-                      'max-w-2xl min-w-0 flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16',
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx('article', { children }),
-                      /* @__PURE__ */ jsxRuntime.jsx(PrevNextLinks, { navigation: navigation$1 }),
-                    ],
+                  /* @__PURE__ */ jsxRuntime.jsx('span', { children: link.title }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Icons.chevron_right, {
+                    className: clsx5__default.default(
+                      'ml-2 size-5 transition-transform duration-200',
+                      'group-data-[state=open]:rotate-90',
+                    ),
                   }),
-                  /* @__PURE__ */ jsxRuntime.jsx(TableOfContents, { tableOfContents }),
                 ],
               }),
-              /* @__PURE__ */ jsxRuntime.jsx(Footer, {}),
-            ],
-          }),
-        ],
-      }),
-    ],
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent2, {
+              children: /* @__PURE__ */ jsxRuntime.jsx('ul', {
+                className: clsx5__default.default(
+                  '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__ */ jsxRuntime.jsx(
+                      SidebarLink,
+                      {
+                        link: childLink,
+                        pathname,
+                        onLinkClick,
+                        depth: depth + 1,
+                      },
+                      childLink.href,
+                    ),
+                  ),
+              }),
+            }),
+          ],
+        })
+      : /* @__PURE__ */ jsxRuntime.jsx(Link4__default.default, {
+          href: link.href,
+          onClick: onLinkClick,
+          className: baseLinkClasses,
+          children: link.title,
+        }),
+  })
+}
+function Tabs({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, {
+    'data-slot': 'tabs',
+    className: cn('flex flex-col gap-2', className),
+    ...props,
+  })
+}
+function TabsList({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.List, {
+    'data-slot': 'tabs-list',
+    className: cn(
+      'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+      className,
+    ),
+    ...props,
+  })
+}
+function TabsTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, {
+    'data-slot': 'tabs-trigger',
+    className: cn(
+      "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      className,
+    ),
+    ...props,
+  })
+}
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Content, {
+    'data-slot': 'tabs-content',
+    className: cn('flex-1 outline-none', className),
+    ...props,
+  })
+}
+function ThemeProvider({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(nextThemes.ThemeProvider, { ...props, children })
+}
+var TocContext = react.createContext({
+  toc: true,
+  setToc: () => {},
+})
+function TocProvider({ children }) {
+  const [toc, setToc] = react.useState(true)
+  return /* @__PURE__ */ jsxRuntime.jsx(TocContext.Provider, { value: { toc, setToc }, children })
+}
+function getNodeText(node) {
+  let text = ''
+  for (const child of node.children ?? []) {
+    if ('type' in child && child.type === 'text') {
+      text += child.attributes?.content ?? ''
+    } else if (child instanceof HTMLElement) {
+      text += getNodeText(child)
+    }
+  }
+  return text
+}
+function domToSimple(node) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return {
+      type: 'text',
+      attributes: {
+        content: node.textContent ?? void 0,
+      },
+    }
+  }
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    return {
+      type: node.nodeName.toLowerCase(),
+      attributes: {},
+      children: Array.from(node.childNodes).map(domToSimple),
+    }
+  }
+  if (node.nodeType === Node.COMMENT_NODE) {
+    return {
+      type: 'comment',
+      attributes: {},
+    }
+  }
+  throw new Error('Unsupported node type')
+}
+function getHeadings(slugify$1 = slugify.slugifyWithCounter()) {
+  const content = document.querySelector('article')
+  if (!content) {
+    return []
+  }
+  const headings = Array.from(content.querySelectorAll('h2, h3, h4, h5, h6'))
+  const result = []
+  const stack = []
+  headings.forEach((el) => {
+    const simplifiedNode = domToSimple(el)
+    const title = getNodeText(simplifiedNode).trim()
+    const slugifiedTitle = slugify$1(title)
+    const id = el.id || slugifiedTitle
+    const level = parseInt(el.tagName[1])
+    const node = { level, id, title, children: [] }
+    if (!el.id) el.id = id
+    if (level === 2) {
+      result.push(node)
+      stack.length = 0
+      stack.push(node)
+    } else {
+      while (stack.length && stack[stack.length - 1].level >= level) {
+        stack.pop()
+      }
+      if (stack.length) {
+        stack[stack.length - 1].children.push(node)
+      }
+      stack.push(node)
+    }
   })
+  return result
 }
 
 exports.Button = Button
+exports.Collapsible = Collapsible
 exports.DynamicFavicon = DynamicFavicon
 exports.Footer = Footer
 exports.Icons = Icons
-exports.Layout = Layout
 exports.Logo = Logo
 exports.Masthead = Masthead
 exports.Navigation = Navigation
 exports.PrevNextLinks = PrevNextLinks
+exports.SidebarNavigation = SidebarNavigation
 exports.TableOfContents = TableOfContents
+exports.Tabs = Tabs
+exports.TabsContent = TabsContent
+exports.TabsList = TabsList
+exports.TabsTrigger = TabsTrigger
+exports.ThemeProvider = ThemeProvider
 exports.ThemeSwitcher = ThemeSwitcher
+exports.TocProvider = TocProvider
 exports.camelCase = camelCase
 exports.cn = cn
-exports.defaultNavigation = defaultNavigation
 exports.domToSimple = domToSimple
 exports.getHeadings = getHeadings
 exports.getNodeText = getNodeText