@oxide/design-system 3.2.0--canary.151.18510115780.0 → 3.2.0--canary.151.18510956047.0

package/dist/{chunk-XPHTG73Y.js → components/src/asciidoc/index.js}

@@ -1,322 +1,42 @@
 import {
-  Checkmark12Icon_default,
+  titleCase
+} from "../../../chunk-7VKKHVZC.js";
+import {
   DirectionRightIcon_default,
-  Link16Icon_default,
-  SelectArrows6Icon_default
-} from "./chunk-BTKC2KJ2.js";
-
-// components/src/ui/badge/Badge.tsx
-import cn from "classnames";
-import { jsx } from "react/jsx-runtime";
-var badgeColors = {
-  default: {
-    default: "bg-accent-secondary text-accent ring-accent/15",
-    destructive: "bg-destructive-secondary text-destructive ring-destructive/15",
-    notice: "bg-notice-secondary text-notice ring-notice/15",
-    blue: "bg-blue-200 text-blue-800 ring-blue-800/15",
-    purple: "bg-purple-200 text-purple-800 ring-purple-800/15",
-    neutral: "bg-secondary text-default ring-neutral-700/15"
-  },
-  solid: {
-    default: "bg-accent text-inverse",
-    destructive: "bg-destructive text-inverse",
-    notice: "bg-notice text-inverse",
-    neutral: "bg-inverse-tertiary text-inverse",
-    purple: "bg-purple-700 text-inverse",
-    blue: "bg-info text-inverse"
-  }
-};
-var Badge = ({
-  className,
-  children,
-  color = "default",
-  variant = "default"
-}) => {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        "ox-badge ring ring-inset",
-        `variant-${variant}`,
-        "text-mono-sm inline-flex h-4 items-center whitespace-nowrap rounded-sm px-[3px] py-[1px] uppercase",
-        badgeColors[variant][color],
-        className
-      ),
-      children: /* @__PURE__ */ jsx("span", { children })
-    }
-  );
-};
-
-// components/src/ui/button/Button.tsx
-import cn2 from "classnames";
-import { forwardRef } from "react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var buttonSizes = ["sm", "icon", "base"];
-var variants = ["primary", "secondary", "ghost", "danger"];
-var sizeStyle = {
-  sm: "h-8 px-3 text-mono-sm svg:w-4",
-  // meant for buttons that only contain a single icon
-  icon: "h-8 w-8 text-mono-sm svg:w-4",
-  base: "h-10 px-4 text-mono-sm svg:w-5"
-};
-var buttonStyle = ({
-  size: size2 = "base",
-  variant = "primary"
-} = {}) => {
-  return cn2(
-    "ox-button inline-flex items-center justify-center rounded align-top elevation-1 disabled:cursor-not-allowed",
-    `btn-${variant}`,
-    sizeStyle[size2],
-    variant === "danger" ? "focus:outline-destructive-secondary" : "focus:outline-accent-secondary"
-  );
-};
-var noop = (e) => {
-  e.stopPropagation();
-  e.preventDefault();
-};
-var Button = forwardRef(
-  ({
-    type = "button",
-    children,
-    size: size2,
-    variant,
-    className,
-    loading,
-    innerClassName,
-    disabled,
-    onClick,
-    // needs to be a spread because we sometimes get passed arbitrary <button>
-    // props by the parent
-    ...rest
-  }, ref) => {
-    const isDisabled = disabled || loading;
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        className: cn2(buttonStyle({ size: size2, variant }), className, {
-          "visually-disabled": isDisabled
-        }),
-        ref,
-        type,
-        onMouseDown: isDisabled ? noop : void 0,
-        onClick: isDisabled ? noop : onClick,
-        "aria-disabled": isDisabled,
-        ...rest,
-        children: [
-          loading && /* @__PURE__ */ jsx2(Spinner, { className: "absolute", variant }),
-          /* @__PURE__ */ jsx2("span", { className: cn2("flex items-center", innerClassName, { invisible: loading }), children })
-        ]
-      }
-    );
-  }
-);
-
-// components/src/ui/spinner/Spinner.tsx
-import cn3 from "classnames";
-import { useEffect, useRef, useState } from "react";
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var spinnerSizes = ["base", "lg"];
-var spinnerVariants = ["primary", "secondary", "ghost", "danger"];
-var Spinner = ({
-  className,
-  size: size2 = "base",
-  variant = "primary"
-}) => {
-  const frameSize = size2 === "lg" ? 36 : 12;
-  const center = size2 === "lg" ? 18 : 6;
-  const radius = size2 === "lg" ? 16 : 5;
-  const strokeWidth = size2 === "lg" ? 3 : 2;
-  return /* @__PURE__ */ jsxs2(
-    "svg",
-    {
-      width: frameSize,
-      height: frameSize,
-      viewBox: `0 0 ${frameSize + " " + frameSize}`,
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      "aria-labelledby": "Spinner",
-      className: cn3("spinner", `spinner-${variant}`, `spinner-${size2}`, className),
-      children: [
-        /* @__PURE__ */ jsx3(
-          "circle",
-          {
-            fill: "none",
-            className: "bg",
-            strokeWidth,
-            strokeLinecap: "round",
-            cx: center,
-            cy: center,
-            r: radius,
-            strokeOpacity: 0.2
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          "circle",
-          {
-            className: "path",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth,
-            strokeLinecap: "round",
-            cx: center,
-            cy: center,
-            r: radius
-          }
-        )
-      ]
-    }
-  );
-};
-var SpinnerLoader = ({ isLoading, children = null, minTime = 500 }) => {
-  const [isVisible, setIsVisible] = useState(isLoading);
-  const hideTimeout = useRef(null);
-  const loadingStartTime = useRef(0);
-  useEffect(() => {
-    if (isLoading) {
-      setIsVisible(true);
-      loadingStartTime.current = Date.now();
-    } else {
-      if (hideTimeout.current) clearTimeout(hideTimeout.current);
-      const elapsedTime = Date.now() - loadingStartTime.current;
-      const remainingTime = Math.max(0, minTime - elapsedTime);
-      if (remainingTime === 0) {
-        setIsVisible(false);
-      } else {
-        hideTimeout.current = setTimeout(() => setIsVisible(false), remainingTime);
-      }
-    }
-    return () => {
-      if (hideTimeout.current) clearTimeout(hideTimeout.current);
-    };
-  }, [isLoading, minTime]);
-  return isVisible ? /* @__PURE__ */ jsx3(Spinner, {}) : /* @__PURE__ */ jsx3(Fragment, { children });
-};
-
-// components/src/ui/tabs/Tabs.tsx
-import { Content, List, Root, Trigger } from "@radix-ui/react-tabs";
-import cn4 from "classnames";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Tabs = {
-  Root: ({ className, ...props }) => /* @__PURE__ */ jsx4(Root, { ...props, className: cn4("ox-tabs", className) }),
-  Trigger: ({ children, className, ...props }) => /* @__PURE__ */ jsx4(Trigger, { ...props, className: cn4("ox-tab", className), children: /* @__PURE__ */ jsx4("div", { children }) }),
-  List: ({ className, ...props }) => /* @__PURE__ */ jsx4(List, { ...props, className: cn4("ox-tabs-list", className) }),
-  Content: ({ className, ...props }) => /* @__PURE__ */ jsx4(Content, { ...props, className: cn4("ox-tabs-panel", className) })
-};
-
-// components/src/ui/checkbox/Checkbox.tsx
-import cn6 from "classnames";
-
-// components/src/utils.ts
-import cn5 from "classnames";
-import { createElement } from "react";
-var titleCase = (text) => {
-  return text.replace(
-    /\w\S*/g,
-    (text2) => text2.charAt(0).toUpperCase() + text2.substring(1).toLowerCase()
-  );
-};
-var make = (tag) => (
-  // only one argument here means string interpolations are not allowed
-  (strings) => {
-    const Comp = ({ className, children, ...rest }) => createElement(tag, { className: cn5(strings[0], className), ...rest }, children);
-    Comp.displayName = `classed.${tag}`;
-    return Comp;
-  }
-);
-var classed = {
-  button: make("button"),
-  div: make("div"),
-  h1: make("h1"),
-  h2: make("h2"),
-  h3: make("h3"),
-  h4: make("h4"),
-  hr: make("hr"),
-  header: make("header"),
-  input: make("input"),
-  label: make("label"),
-  li: make("li"),
-  main: make("main"),
-  ol: make("ol"),
-  p: make("p"),
-  span: make("span"),
-  table: make("table"),
-  tbody: make("tbody"),
-  td: make("td"),
-  th: make("th"),
-  tr: make("tr")
-};
-
-// components/src/ui/checkbox/Checkbox.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var Check = () => /* @__PURE__ */ jsx5(Checkmark12Icon_default, { className: "text-accent pointer-events-none absolute left-0.5 top-0.5 h-3 w-3 fill-current" });
-var Indeterminate = classed.div`absolute w-2 h-0.5 left-1 top-[7px] bg-accent pointer-events-none`;
-var inputStyle = `
-  appearance-none border border-default bg-default h-4 w-4 rounded-sm absolute left-0 outline-none
-  disabled:cursor-not-allowed
-  hover:border-hover hover:cursor-pointer
-  checked:bg-accent-secondary checked:border-accent-secondary checked:hover:border-accent
-  indeterminate:bg-accent-secondary indeterminate:border-accent hover:indeterminate:bg-accent-secondary-hover
-`;
-var Checkbox = ({
-  indeterminate,
-  children,
-  className,
-  ...inputProps
-}) => /* @__PURE__ */ jsxs3("label", { className: "inline-flex items-center", children: [
-  /* @__PURE__ */ jsxs3("span", { className: "relative h-4 w-4", children: [
-    /* @__PURE__ */ jsx5(
-      "input",
-      {
-        className: cn6(inputStyle, className),
-        type: "checkbox",
-        ref: (el) => {
-          if (el) el.indeterminate = !!indeterminate;
-        },
-        ...inputProps
-      }
-    ),
-    inputProps.checked && !indeterminate && /* @__PURE__ */ jsx5(Check, {}),
-    indeterminate && /* @__PURE__ */ jsx5(Indeterminate, {})
-  ] }),
-  children && /* @__PURE__ */ jsx5("span", { className: "text-sans-md text-secondary ml-2.5", children })
-] });
-
-// components/src/ui/listbox/Listbox.tsx
-import { flip, FloatingPortal, offset, size, useFloating } from "@floating-ui/react";
-import { Listbox as Select } from "@headlessui/react";
-import cn9 from "classnames";
+  Link16Icon_default
+} from "../../../chunk-BTKC2KJ2.js";
 
 // components/src/asciidoc/index.tsx
 import asciidoctor2 from "@asciidoctor/core";
-import { Content as Content5 } from "@oxide/react-asciidoc";
+import { Content as Content4 } from "@oxide/react-asciidoc";
 
 // components/src/asciidoc/Admonition.tsx
-import { Content as Content2, parse, Title } from "@oxide/react-asciidoc";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Content, parse, Title } from "@oxide/react-asciidoc";
+import { jsx, jsxs } from "react/jsx-runtime";
 var Admonition = ({ node }) => {
   const attrs2 = node.attributes;
   let icon;
   if (attrs2.name === "caution") {
-    icon = /* @__PURE__ */ jsx6(Error12, {});
+    icon = /* @__PURE__ */ jsx(Error12, {});
   } else if (attrs2.name === "warning") {
-    icon = /* @__PURE__ */ jsx6(Warning12, {});
+    icon = /* @__PURE__ */ jsx(Warning12, {});
   } else {
-    icon = /* @__PURE__ */ jsx6(Error12, { className: "rotate-180" });
+    icon = /* @__PURE__ */ jsx(Error12, { className: "rotate-180" });
   }
-  return /* @__PURE__ */ jsxs4("div", { className: `admonitionblock ${attrs2.name}`, children: [
-    /* @__PURE__ */ jsx6("div", { className: "admonition-icon", children: icon }),
-    /* @__PURE__ */ jsxs4("div", { className: "admonition-content content", children: [
-      /* @__PURE__ */ jsx6(Title, { text: node.title }),
-      /* @__PURE__ */ jsx6("div", { children: titleCase(attrs2.name.toString()) }),
-      /* @__PURE__ */ jsxs4("div", { children: [
-        /* @__PURE__ */ jsx6(Title, { text: node.title }),
+  return /* @__PURE__ */ jsxs("div", { className: `admonitionblock ${attrs2.name}`, children: [
+    /* @__PURE__ */ jsx("div", { className: "admonition-icon", children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: "admonition-content content", children: [
+      /* @__PURE__ */ jsx(Title, { text: node.title }),
+      /* @__PURE__ */ jsx("div", { children: titleCase(attrs2.name.toString()) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Title, { text: node.title }),
         node.content && parse(node.content),
-        /* @__PURE__ */ jsx6(Content2, { blocks: node.blocks })
+        /* @__PURE__ */ jsx(Content, { blocks: node.blocks })
       ] })
     ] })
   ] });
 };
-var Error12 = ({ className }) => /* @__PURE__ */ jsx6(
+var Error12 = ({ className }) => /* @__PURE__ */ jsx(
   "svg",
   {
     width: "12",
@@ -324,7 +44,7 @@ var Error12 = ({ className }) => /* @__PURE__ */ jsx6(
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     className,
-    children: /* @__PURE__ */ jsx6(
+    children: /* @__PURE__ */ jsx(
       "path",
       {
         fillRule: "evenodd",
@@ -335,7 +55,7 @@ var Error12 = ({ className }) => /* @__PURE__ */ jsx6(
     )
   }
 );
-var Warning12 = ({ className }) => /* @__PURE__ */ jsx6(
+var Warning12 = ({ className }) => /* @__PURE__ */ jsx(
   "svg",
   {
     width: "12",
@@ -343,7 +63,7 @@ var Warning12 = ({ className }) => /* @__PURE__ */ jsx6(
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     className,
-    children: /* @__PURE__ */ jsx6(
+    children: /* @__PURE__ */ jsx(
       "path",
       {
         fillRule: "evenodd",
@@ -357,32 +77,32 @@ var Warning12 = ({ className }) => /* @__PURE__ */ jsx6(
 var Admonition_default = Admonition;
 
 // components/src/asciidoc/Section.tsx
-import { Content as Content3, parse as parse2 } from "@oxide/react-asciidoc";
-import cn7 from "classnames";
-import { createElement as createElement2 } from "react";
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Content as Content2, parse as parse2 } from "@oxide/react-asciidoc";
+import cn from "classnames";
+import { createElement } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var stripAnchors = (str) => str.replace(/<a[^>]*>(.*?)<\/a>/gi, "$1");
 var Section = ({ node }) => {
   const level = node.level;
   let title = "";
   let sectNum = node.num;
   sectNum = sectNum && sectNum[0] === "." ? "" : sectNum;
-  title = /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsx7("span", { className: "anchor", id: node.id || "", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs5("a", { className: "link group", href: `#${node.id}`, children: [
+  title = /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2("span", { className: "anchor", id: node.id || "", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs2("a", { className: "link group", href: `#${node.id}`, children: [
       parse2(stripAnchors(node.title)),
-      /* @__PURE__ */ jsx7(Link16Icon_default, { className: "text-accent-secondary ml-2 hidden group-hover:inline-block" })
+      /* @__PURE__ */ jsx2(Link16Icon_default, { className: "text-accent-secondary ml-2 hidden group-hover:inline-block" })
     ] })
   ] });
   if (level === 0) {
-    return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-      /* @__PURE__ */ jsx7("h1", { className: cn7("sect0", node.role), "data-sectnum": sectNum, children: title }),
-      /* @__PURE__ */ jsx7(Content3, { blocks: node.blocks })
+    return /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2("h1", { className: cn("sect0", node.role), "data-sectnum": sectNum, children: title }),
+      /* @__PURE__ */ jsx2(Content2, { blocks: node.blocks })
     ] });
   } else {
-    return /* @__PURE__ */ jsxs5("div", { className: cn7(`sect${level}`, node.role), children: [
-      createElement2(`h${level + 1}`, { "data-sectnum": sectNum }, title),
-      /* @__PURE__ */ jsx7("div", { className: "sectionbody", children: /* @__PURE__ */ jsx7(Content3, { blocks: node.blocks }) })
+    return /* @__PURE__ */ jsxs2("div", { className: cn(`sect${level}`, node.role), children: [
+      createElement(`h${level + 1}`, { "data-sectnum": sectNum }, title),
+      /* @__PURE__ */ jsx2("div", { className: "sectionbody", children: /* @__PURE__ */ jsx2(Content2, { blocks: node.blocks }) })
     ] });
   }
 };
@@ -390,26 +110,26 @@ var Section_default = Section;
 
 // components/src/asciidoc/Table.tsx
 import { Table as InnerTable } from "@oxide/react-asciidoc";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var Table = ({ node }) => /* @__PURE__ */ jsx8("div", { className: "table-wrapper", children: /* @__PURE__ */ jsx8(InnerTable, { node }) });
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Table = ({ node }) => /* @__PURE__ */ jsx3("div", { className: "table-wrapper", children: /* @__PURE__ */ jsx3(InnerTable, { node }) });
 var Table_default = Table;
 
 // components/src/asciidoc/TableOfContents.tsx
 import { parse as parse3 } from "@oxide/react-asciidoc";
 import * as Accordion from "@radix-ui/react-accordion";
-import cn8 from "classnames";
-import { Fragment as Fragment3, useCallback, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import cn2 from "classnames";
+import { Fragment as Fragment2, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function useIntersectionObserver(elements, callback, options) {
-  const [observer, setObserver] = useState2(null);
-  useEffect2(() => {
+  const [observer, setObserver] = useState(null);
+  useEffect(() => {
     const observer2 = new IntersectionObserver(callback, options);
     setObserver(observer2);
     return () => {
       observer2.disconnect();
     };
   }, [callback, options]);
-  useEffect2(() => {
+  useEffect(() => {
     if (observer) {
       for (const element of elements) {
         observer.observe(element);
@@ -475,10 +195,10 @@ function maxIndex(nums) {
   }, void 0);
 }
 function useActiveSectionTracking(initialSections, onSectionChange, debug = false) {
-  const [sectionWrappers, setSectionWrappers] = useState2(
+  const [sectionWrappers, setSectionWrappers] = useState(
     buildSectionTree(initialSections)
   );
-  const sectionMeasurements = useRef2([]);
+  const sectionMeasurements = useRef([]);
   const setSections = useCallback(
     (sections) => {
       setSectionWrappers(buildSectionTree(sections));
@@ -528,7 +248,7 @@ function useActiveSectionTracking(initialSections, onSectionChange, debug = fals
         return "0px";
       }
     });
-    debugNode = /* @__PURE__ */ jsx9(
+    debugNode = /* @__PURE__ */ jsx4(
       "div",
       {
         style: {
@@ -556,17 +276,17 @@ var DesktopOutline = ({
   className
 }) => {
   const renderToc = (sections) => {
-    return sections.map((item) => /* @__PURE__ */ jsxs6(Fragment3, { children: [
-      /* @__PURE__ */ jsx9(
+    return sections.map((item) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      /* @__PURE__ */ jsx4(
         "li",
         {
           "data-level": item.level,
-          className: cn8("text-sans-sm mb-0 list-none", item.level > 2 && "hidden"),
-          children: /* @__PURE__ */ jsx9(
+          className: cn2("text-sans-sm mb-0 list-none", item.level > 2 && "hidden"),
+          children: /* @__PURE__ */ jsx4(
             "a",
             {
               href: `#${item.id}`,
-              className: cn8(
+              className: cn2(
                 "block border-l py-[4px] pr-4",
                 activeItem === item.id ? "active text-accent-secondary border-accent-secondary hover:text-accent" : "text-tertiary border-secondary hover:text-secondary"
               ),
@@ -582,7 +302,7 @@ var DesktopOutline = ({
     ] }, item.id));
   };
   if (toc && toc.length > 0) {
-    return /* @__PURE__ */ jsx9("ul", { className: cn8("toc w-(--toc-width)", className), children: renderToc(toc) });
+    return /* @__PURE__ */ jsx4("ul", { className: cn2("toc w-(--toc-width)", className), children: renderToc(toc) });
   }
   return null;
 };
@@ -591,20 +311,20 @@ var SmallScreenOutline = ({
   activeItem,
   className
 }) => {
-  const [value, setValue] = useState2("");
+  const [value, setValue] = useState("");
   const renderToc = (sections) => {
-    return sections.map((item) => /* @__PURE__ */ jsxs6(Fragment3, { children: [
-      /* @__PURE__ */ jsx9(
+    return sections.map((item) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      /* @__PURE__ */ jsx4(
         "li",
         {
           "data-level": item.level,
-          className: cn8("text-sans-sm list-none", item.level > 2 && "hidden"),
-          children: /* @__PURE__ */ jsx9(
+          className: cn2("text-sans-sm list-none", item.level > 2 && "hidden"),
+          children: /* @__PURE__ */ jsx4(
             "a",
             {
               href: `#${item.id}`,
               onClick: () => setValue(""),
-              className: cn8(
+              className: cn2(
                 "block border-l py-[4px]",
                 activeItem === item.id ? "active text-accent-secondary border-accent-secondary hover:text-accent" : "text-tertiary border-secondary hover:text-secondary"
               ),
@@ -620,24 +340,24 @@ var SmallScreenOutline = ({
     ] }, item.id));
   };
   if (toc && toc.length > 0) {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx4(
       Accordion.Root,
       {
         type: "single",
-        className: cn8(
+        className: cn2(
           "toc bg-default border-secondary sticky top-[calc(var(--header-height)-1px)] z-10 -mt-px mb-10 block w-full border-b border-t print:hidden",
           className
         ),
         collapsible: true,
         value,
         onValueChange: setValue,
-        children: /* @__PURE__ */ jsxs6(Accordion.Item, { value: "toc", children: [
-          /* @__PURE__ */ jsx9(Accordion.Header, { children: /* @__PURE__ */ jsxs6(Accordion.Trigger, { className: "text-sans-md text-default hover:bg-hover px-(--container-px) flex h-12 w-full items-center justify-between [&>svg]:data-[state=open]:rotate-90", children: [
+        children: /* @__PURE__ */ jsxs3(Accordion.Item, { value: "toc", children: [
+          /* @__PURE__ */ jsx4(Accordion.Header, { children: /* @__PURE__ */ jsxs3(Accordion.Trigger, { className: "text-sans-md text-default hover:bg-hover px-(--container-px) flex h-12 w-full items-center justify-between [&>svg]:data-[state=open]:rotate-90", children: [
             "Table of Contents",
             " ",
-            /* @__PURE__ */ jsx9(DirectionRightIcon_default, { className: "text-tertiary transition-all" })
+            /* @__PURE__ */ jsx4(DirectionRightIcon_default, { className: "text-tertiary transition-all" })
           ] }) }),
-          /* @__PURE__ */ jsx9(Accordion.Content, { className: "animated-accordion hydrated border-secondary px-(--container-px) max-h-[60vh] w-full overflow-y-scroll border-t", children: /* @__PURE__ */ jsx9("div", { className: "py-4", children: renderToc(toc) }) })
+          /* @__PURE__ */ jsx4(Accordion.Content, { className: "animated-accordion hydrated border-secondary px-(--container-px) max-h-[60vh] w-full overflow-y-scroll border-t", children: /* @__PURE__ */ jsx4("div", { className: "py-4", children: renderToc(toc) }) })
         ] })
       }
     );
@@ -646,9 +366,9 @@ var SmallScreenOutline = ({
 };
 
 // components/src/asciidoc/use-delegated-links.ts
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect2 } from "react";
 function useDelegatedReactRouterLinks(navigate, nodeRef, key) {
-  useEffect3(() => {
+  useEffect2(() => {
     const node = nodeRef.current;
     const handler = (event) => {
       if (!nodeRef.current) return;
@@ -2225,8 +1945,8 @@ var handleDocument = async (document) => {
 };
 
 // components/src/asciidoc/index.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-var MinimalDocument = ({ document }) => /* @__PURE__ */ jsx10("div", { id: "content", className: "asciidoc-body w-full", children: /* @__PURE__ */ jsx10(Content5, { blocks: document.blocks }) });
+import { jsx as jsx5 } from "react/jsx-runtime";
+var MinimalDocument = ({ document }) => /* @__PURE__ */ jsx5("div", { id: "content", className: "asciidoc-body w-full", children: /* @__PURE__ */ jsx5(Content4, { blocks: document.blocks }) });
 var AsciiDocBlocks = {
   Admonition: Admonition_default,
   Table: Table_default,
@@ -2301,132 +2021,18 @@ var InlineConverter = class {
     return this.baseConverter.convert(node, transform);
   }
 };
-
-// components/src/ui/listbox/Listbox.tsx
-import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-var Listbox = ({
-  name,
-  selected,
-  items,
-  placeholder = "Select an option",
-  className,
-  onChange,
-  hasError = false,
-  disabled,
-  isLoading = false,
-  ...props
-}) => {
-  const { refs, floatingStyles } = useFloating({
-    middleware: [
-      offset(12),
-      flip(),
-      size({
-        apply({ rects, elements }) {
-          Object.assign(elements.floating.style, {
-            width: `${rects.reference.width}px`
-          });
-        }
-      })
-    ]
-  });
-  const selectedItem = selected && items.find((i) => i.value === selected);
-  const noItems = !isLoading && items.length === 0;
-  const isDisabled = disabled || noItems;
-  return /* @__PURE__ */ jsx11("div", { className: cn9("relative", className), children: /* @__PURE__ */ jsx11(
-    Select,
-    {
-      value: selected,
-      onChange: (val) => val !== null && onChange(val),
-      disabled: isDisabled || isLoading,
-      children: ({ open }) => /* @__PURE__ */ jsxs7(Fragment4, { children: [
-        /* @__PURE__ */ jsxs7(
-          Select.Button,
-          {
-            name,
-            ref: refs.setReference,
-            className: cn9(
-              `text-sans-md flex h-10 w-full items-center justify-between rounded border`,
-              hasError ? "focus-error border-error-secondary hover:border-error" : "border-default hover:border-hover",
-              open && "ring-accent-secondary ring-2",
-              open && hasError && "ring-error-secondary",
-              isDisabled ? "text-disabled bg-disabled !border-default cursor-not-allowed" : "bg-default",
-              isDisabled && hasError && "!border-error-secondary"
-            ),
-            ...props,
-            children: [
-              /* @__PURE__ */ jsx11("div", { className: "w-full px-3 text-left", children: selectedItem ? (
-                // labelString is one line, which is what we need when label is a ReactNode
-                selectedItem.labelString || selectedItem.label
-              ) : /* @__PURE__ */ jsx11("span", { className: "text-quaternary", children: noItems ? "No items" : placeholder }) }),
-              !isDisabled && /* @__PURE__ */ jsx11(SpinnerLoader, { isLoading }),
-              /* @__PURE__ */ jsx11(
-                "div",
-                {
-                  className: "border-secondary ml-3 flex h-[calc(100%-12px)] items-center border-l px-3",
-                  "aria-hidden": true,
-                  children: /* @__PURE__ */ jsx11(SelectArrows6Icon_default, { className: "text-tertiary h-[14px] w-2" })
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx11(FloatingPortal, { children: /* @__PURE__ */ jsx11(
-          Select.Options,
-          {
-            ref: refs.setFloating,
-            style: floatingStyles,
-            className: "ox-menu pointer-events-auto z-50 overflow-y-auto !outline-none",
-            children: items.map((item) => /* @__PURE__ */ jsx11(
-              Select.Option,
-              {
-                value: item.value,
-                className: "border-secondary relative border-b last:border-0",
-                children: ({ active, selected: selected2 }) => /* @__PURE__ */ jsx11(
-                  "div",
-                  {
-                    className: cn9(
-                      "ox-menu-item text-secondary",
-                      selected2 && "is-selected",
-                      active && "is-highlighted"
-                    ),
-                    children: item.label
-                  }
-                )
-              },
-              item.value
-            ))
-          }
-        ) })
-      ] })
-    }
-  ) });
-};
-
 export {
-  useIntersectionObserver,
-  useActiveSectionTracking,
+  AsciiDocBlocks,
   DesktopOutline,
+  InlineConverter,
   SmallScreenOutline,
-  useDelegatedReactRouterLinks,
-  highlight,
   attrs,
-  loadAsciidoctor,
   handleDocument,
-  AsciiDocBlocks,
+  highlight,
+  loadAsciidoctor,
   renderWithBreaks,
-  InlineConverter,
-  badgeColors,
-  Badge,
-  buttonSizes,
-  variants,
-  buttonStyle,
-  Button,
-  spinnerSizes,
-  spinnerVariants,
-  Spinner,
-  SpinnerLoader,
-  Tabs,
-  Checkbox,
-  Listbox
+  useActiveSectionTracking,
+  useDelegatedReactRouterLinks,
+  useIntersectionObserver
 };
-//# sourceMappingURL=chunk-XPHTG73Y.js.map
+//# sourceMappingURL=index.js.map