@oxide/design-system 3.2.0--canary.151.18510677674.0 → 4.0.0--canary.151.18511380774.0

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

@@ -1,51 +1,17 @@
+import {
+  titleCase
+} from "../../../chunk-7VKKHVZC.js";
+import {
+  DirectionRightIcon_default,
+  Link16Icon_default
+} from "../../../chunk-BTKC2KJ2.js";
+
 // components/src/asciidoc/index.tsx
 import asciidoctor2 from "@asciidoctor/core";
 import { Content as Content4 } from "@oxide/react-asciidoc";
 
 // components/src/asciidoc/Admonition.tsx
 import { Content, parse, Title } from "@oxide/react-asciidoc";
-
-// components/src/utils.ts
-import cn 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: cn(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/asciidoc/Admonition.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var Admonition = ({ node }) => {
   const attrs2 = node.attributes;
@@ -110,150 +76,33 @@ var Warning12 = ({ className }) => /* @__PURE__ */ jsx(
 );
 var Admonition_default = Admonition;
 
-// icons/react/Link16Icon.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var Link16Icon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs2(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    viewBox: "0 0 16 16",
-    role: "img",
-    "aria-labelledby": titleId,
-    ...props,
-    children: [
-      title ? /* @__PURE__ */ jsx2("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsxs2("g", { fill: "currentColor", children: [
-        /* @__PURE__ */ jsx2("path", { d: "m6.586 12.243 1.59-1.591a.75.75 0 0 1 1.061 0l.354.353a.75.75 0 0 1 0 1.06L8 13.658A4 4 0 0 1 2.343 8l1.591-1.591a.75.75 0 0 1 1.06 0l.354.354a.75.75 0 0 1 0 1.06l-1.59 1.591a2 2 0 1 0 2.828 2.829M12.066 9.591a.75.75 0 0 1-1.06 0l-.354-.354a.75.75 0 0 1 0-1.06l1.59-1.591a2 2 0 1 0-2.828-2.829l-1.59 1.591a.75.75 0 0 1-1.061 0l-.354-.353a.75.75 0 0 1 0-1.06L8 2.342A4 4 0 0 1 13.657 8z" }),
-        /* @__PURE__ */ jsx2("path", { d: "M9.945 5.702a.75.75 0 0 0-1.061 0L5.702 8.884a.75.75 0 0 0 0 1.06l.353.354a.75.75 0 0 0 1.061 0l3.182-3.182a.75.75 0 0 0 0-1.06z" })
-      ] })
-    ]
-  }
-);
-var Link16Icon_default = Link16Icon;
-
-// icons/react/Checkmark12Icon.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var Checkmark12Icon = ({
-  title,
-  titleId,
-  ...props
-}) => /* @__PURE__ */ jsxs3(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    viewBox: "0 0 12 12",
-    role: "img",
-    "aria-labelledby": titleId,
-    ...props,
-    children: [
-      title ? /* @__PURE__ */ jsx3("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsx3(
-        "path",
-        {
-          fill: "currentColor",
-          fillRule: "evenodd",
-          d: "M10.492 2.651c.28.242.31.665.067.944L5.448 9.463a.667.667 0 0 1-.974.035L1.475 6.516a.667.667 0 0 1 0-.946l.237-.235a.667.667 0 0 1 .94 0l2.24 2.226L9.3 2.501a.667.667 0 0 1 .938-.068z",
-          clipRule: "evenodd"
-        }
-      )
-    ]
-  }
-);
-var Checkmark12Icon_default = Checkmark12Icon;
-
-// icons/react/DirectionRightIcon.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var DirectionRightIcon = ({
-  title,
-  titleId,
-  ...props
-}) => /* @__PURE__ */ jsxs4(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    viewBox: "0 0 12 12",
-    role: "img",
-    "aria-labelledby": titleId,
-    ...props,
-    children: [
-      title ? /* @__PURE__ */ jsx4("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsx4(
-        "path",
-        {
-          fill: "currentColor",
-          d: "M8.807 6.597a.667.667 0 0 0 0-1.194l-5.842-2.92A.667.667 0 0 0 2 3.079v5.842c0 .496.522.818.965.596z"
-        }
-      )
-    ]
-  }
-);
-var DirectionRightIcon_default = DirectionRightIcon;
-
-// icons/react/SelectArrows6Icon.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var SelectArrows6Icon = ({
-  title,
-  titleId,
-  ...props
-}) => /* @__PURE__ */ jsxs5(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 6,
-    height: 14,
-    viewBox: "0 0 6 14",
-    role: "img",
-    "aria-labelledby": titleId,
-    ...props,
-    children: [
-      title ? /* @__PURE__ */ jsx5("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsx5(
-        "path",
-        {
-          fill: "currentColor",
-          fillRule: "evenodd",
-          d: "M3.322.536a.375.375 0 0 0-.644 0L.341 4.432C.19 4.682.37 5 .662 5h4.676a.375.375 0 0 0 .321-.568zm-.644 12.928a.375.375 0 0 0 .644 0l2.337-3.896A.375.375 0 0 0 5.338 9H.662a.375.375 0 0 0-.321.568z",
-          clipRule: "evenodd"
-        }
-      )
-    ]
-  }
-);
-var SelectArrows6Icon_default = SelectArrows6Icon;
-
 // components/src/asciidoc/Section.tsx
 import { Content as Content2, parse as parse2 } from "@oxide/react-asciidoc";
-import cn2 from "classnames";
-import { createElement as createElement2 } from "react";
-import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+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__ */ jsxs6(Fragment, { children: [
-    /* @__PURE__ */ jsx6("span", { className: "anchor", id: node.id || "", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs6("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__ */ jsx6(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__ */ jsxs6(Fragment, { children: [
-      /* @__PURE__ */ jsx6("h1", { className: cn2("sect0", node.role), "data-sectnum": sectNum, children: title }),
-      /* @__PURE__ */ jsx6(Content2, { 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__ */ jsxs6("div", { className: cn2(`sect${level}`, node.role), children: [
-      createElement2(`h${level + 1}`, { "data-sectnum": sectNum }, title),
-      /* @__PURE__ */ jsx6("div", { className: "sectionbody", children: /* @__PURE__ */ jsx6(Content2, { 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 }) })
     ] });
   }
 };
@@ -261,16 +110,16 @@ var Section_default = Section;
 
 // components/src/asciidoc/Table.tsx
 import { Table as InnerTable } from "@oxide/react-asciidoc";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var Table = ({ node }) => /* @__PURE__ */ jsx7("div", { className: "table-wrapper", children: /* @__PURE__ */ jsx7(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 cn3 from "classnames";
+import cn2 from "classnames";
 import { Fragment as Fragment2, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function useIntersectionObserver(elements, callback, options) {
   const [observer, setObserver] = useState(null);
   useEffect(() => {
@@ -399,7 +248,7 @@ function useActiveSectionTracking(initialSections, onSectionChange, debug = fals
         return "0px";
       }
     });
-    debugNode = /* @__PURE__ */ jsx8(
+    debugNode = /* @__PURE__ */ jsx4(
       "div",
       {
         style: {
@@ -427,17 +276,17 @@ var DesktopOutline = ({
   className
 }) => {
   const renderToc = (sections) => {
-    return sections.map((item) => /* @__PURE__ */ jsxs7(Fragment2, { children: [
-      /* @__PURE__ */ jsx8(
+    return sections.map((item) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      /* @__PURE__ */ jsx4(
         "li",
         {
           "data-level": item.level,
-          className: cn3("text-sans-sm mb-0 list-none", item.level > 2 && "hidden"),
-          children: /* @__PURE__ */ jsx8(
+          className: cn2("text-sans-sm mb-0 list-none", item.level > 2 && "hidden"),
+          children: /* @__PURE__ */ jsx4(
             "a",
             {
               href: `#${item.id}`,
-              className: cn3(
+              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"
               ),
@@ -453,7 +302,7 @@ var DesktopOutline = ({
     ] }, item.id));
   };
   if (toc && toc.length > 0) {
-    return /* @__PURE__ */ jsx8("ul", { className: cn3("toc w-(--toc-width)", className), children: renderToc(toc) });
+    return /* @__PURE__ */ jsx4("ul", { className: cn2("toc w-(--toc-width)", className), children: renderToc(toc) });
   }
   return null;
 };
@@ -464,18 +313,18 @@ var SmallScreenOutline = ({
 }) => {
   const [value, setValue] = useState("");
   const renderToc = (sections) => {
-    return sections.map((item) => /* @__PURE__ */ jsxs7(Fragment2, { children: [
-      /* @__PURE__ */ jsx8(
+    return sections.map((item) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      /* @__PURE__ */ jsx4(
         "li",
         {
           "data-level": item.level,
-          className: cn3("text-sans-sm list-none", item.level > 2 && "hidden"),
-          children: /* @__PURE__ */ jsx8(
+          className: cn2("text-sans-sm list-none", item.level > 2 && "hidden"),
+          children: /* @__PURE__ */ jsx4(
             "a",
             {
               href: `#${item.id}`,
               onClick: () => setValue(""),
-              className: cn3(
+              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"
               ),
@@ -491,24 +340,24 @@ var SmallScreenOutline = ({
     ] }, item.id));
   };
   if (toc && toc.length > 0) {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx4(
       Accordion.Root,
       {
         type: "single",
-        className: cn3(
+        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__ */ jsxs7(Accordion.Item, { value: "toc", children: [
-          /* @__PURE__ */ jsx8(Accordion.Header, { children: /* @__PURE__ */ jsxs7(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__ */ jsx8(DirectionRightIcon_default, { className: "text-tertiary transition-all" })
+            /* @__PURE__ */ jsx4(DirectionRightIcon_default, { className: "text-tertiary transition-all" })
           ] }) }),
-          /* @__PURE__ */ jsx8(Accordion.Content, { className: "animated-accordion hydrated border-secondary px-(--container-px) max-h-[60vh] w-full overflow-y-scroll border-t", children: /* @__PURE__ */ jsx8("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) }) })
         ] })
       }
     );
@@ -2096,8 +1945,8 @@ var handleDocument = async (document) => {
 };
 
 // components/src/asciidoc/index.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-var MinimalDocument = ({ document }) => /* @__PURE__ */ jsx9("div", { id: "content", className: "asciidoc-body w-full", children: /* @__PURE__ */ jsx9(Content4, { 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,
@@ -2172,368 +2021,18 @@ var InlineConverter = class {
     return this.baseConverter.convert(node, transform);
   }
 };
-
-// components/src/ui/badge/Badge.tsx
-import cn4 from "classnames";
-import { jsx as jsx10 } 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__ */ jsx10(
-    "span",
-    {
-      className: cn4(
-        "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__ */ jsx10("span", { children })
-    }
-  );
-};
-
-// components/src/ui/button/Button.tsx
-import cn5 from "classnames";
-import { forwardRef } from "react";
-import { jsx as jsx11, jsxs as jsxs8 } 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 cn5(
-    "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__ */ jsxs8(
-      "button",
-      {
-        className: cn5(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__ */ jsx11(Spinner, { className: "absolute", variant }),
-          /* @__PURE__ */ jsx11("span", { className: cn5("flex items-center", innerClassName, { invisible: loading }), children })
-        ]
-      }
-    );
-  }
-);
-
-// components/src/ui/spinner/Spinner.tsx
-import cn6 from "classnames";
-import { useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs9 } 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__ */ jsxs9(
-    "svg",
-    {
-      width: frameSize,
-      height: frameSize,
-      viewBox: `0 0 ${frameSize + " " + frameSize}`,
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      "aria-labelledby": "Spinner",
-      className: cn6("spinner", `spinner-${variant}`, `spinner-${size2}`, className),
-      children: [
-        /* @__PURE__ */ jsx12(
-          "circle",
-          {
-            fill: "none",
-            className: "bg",
-            strokeWidth,
-            strokeLinecap: "round",
-            cx: center,
-            cy: center,
-            r: radius,
-            strokeOpacity: 0.2
-          }
-        ),
-        /* @__PURE__ */ jsx12(
-          "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] = useState2(isLoading);
-  const hideTimeout = useRef2(null);
-  const loadingStartTime = useRef2(0);
-  useEffect3(() => {
-    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__ */ jsx12(Spinner, {}) : /* @__PURE__ */ jsx12(Fragment3, { children });
-};
-
-// components/src/ui/tabs/Tabs.tsx
-import { Content as Content5, List, Root as Root2, Trigger as Trigger2 } from "@radix-ui/react-tabs";
-import cn7 from "classnames";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var Tabs = {
-  Root: ({ className, ...props }) => /* @__PURE__ */ jsx13(Root2, { ...props, className: cn7("ox-tabs", className) }),
-  Trigger: ({ children, className, ...props }) => /* @__PURE__ */ jsx13(Trigger2, { ...props, className: cn7("ox-tab", className), children: /* @__PURE__ */ jsx13("div", { children }) }),
-  List: ({ className, ...props }) => /* @__PURE__ */ jsx13(List, { ...props, className: cn7("ox-tabs-list", className) }),
-  Content: ({ className, ...props }) => /* @__PURE__ */ jsx13(Content5, { ...props, className: cn7("ox-tabs-panel", className) })
-};
-
-// components/src/ui/checkbox/Checkbox.tsx
-import cn8 from "classnames";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
-var Check = () => /* @__PURE__ */ jsx14(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__ */ jsxs10("label", { className: "inline-flex items-center", children: [
-  /* @__PURE__ */ jsxs10("span", { className: "relative h-4 w-4", children: [
-    /* @__PURE__ */ jsx14(
-      "input",
-      {
-        className: cn8(inputStyle, className),
-        type: "checkbox",
-        ref: (el) => {
-          if (el) el.indeterminate = !!indeterminate;
-        },
-        ...inputProps
-      }
-    ),
-    inputProps.checked && !indeterminate && /* @__PURE__ */ jsx14(Check, {}),
-    indeterminate && /* @__PURE__ */ jsx14(Indeterminate, {})
-  ] }),
-  children && /* @__PURE__ */ jsx14("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";
-import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs11 } 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__ */ jsx15("div", { className: cn9("relative", className), children: /* @__PURE__ */ jsx15(
-    Select,
-    {
-      value: selected,
-      onChange: (val) => val !== null && onChange(val),
-      disabled: isDisabled || isLoading,
-      children: ({ open }) => /* @__PURE__ */ jsxs11(Fragment4, { children: [
-        /* @__PURE__ */ jsxs11(
-          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__ */ jsx15("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__ */ jsx15("span", { className: "text-quaternary", children: noItems ? "No items" : placeholder }) }),
-              !isDisabled && /* @__PURE__ */ jsx15(SpinnerLoader, { isLoading }),
-              /* @__PURE__ */ jsx15(
-                "div",
-                {
-                  className: "border-secondary ml-3 flex h-[calc(100%-12px)] items-center border-l px-3",
-                  "aria-hidden": true,
-                  children: /* @__PURE__ */ jsx15(SelectArrows6Icon_default, { className: "text-tertiary h-[14px] w-2" })
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx15(FloatingPortal, { children: /* @__PURE__ */ jsx15(
-          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__ */ jsx15(
-              Select.Option,
-              {
-                value: item.value,
-                className: "border-secondary relative border-b last:border-0",
-                children: ({ active, selected: selected2 }) => /* @__PURE__ */ jsx15(
-                  "div",
-                  {
-                    className: cn9(
-                      "ox-menu-item text-secondary",
-                      selected2 && "is-selected",
-                      active && "is-highlighted"
-                    ),
-                    children: item.label
-                  }
-                )
-              },
-              item.value
-            ))
-          }
-        ) })
-      ] })
-    }
-  ) });
-};
 export {
   AsciiDocBlocks,
-  Badge,
-  Button,
-  Checkbox,
   DesktopOutline,
   InlineConverter,
-  Listbox,
   SmallScreenOutline,
-  Spinner,
-  SpinnerLoader,
-  Tabs,
   attrs,
-  badgeColors,
-  buttonSizes,
-  buttonStyle,
   handleDocument,
   highlight,
   loadAsciidoctor,
   renderWithBreaks,
-  spinnerSizes,
-  spinnerVariants,
   useActiveSectionTracking,
   useDelegatedReactRouterLinks,
-  useIntersectionObserver,
-  variants
+  useIntersectionObserver
 };
 //# sourceMappingURL=index.js.map