@oxide/design-system 1.7.7--canary.87d60df.0 → 1.7.7--canary.c74e439.0

package/components/dist/index.d.ts

@@ -1,10 +1,10 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _oxide_react_asciidoc from '@oxide/react-asciidoc';
 import { DocumentSection, Block, DocumentBlock } from '@oxide/react-asciidoc';
 import * as _asciidoctor_core from '@asciidoctor/core';
 import { Registry, Document, Html5Converter, Block as Block$1 } from '@asciidoctor/core';
+import * as react from 'react';
+import { ReactNode } from 'react';
 import { TabsProps, TabsTriggerProps, TabsListProps, TabsContentProps } from '@radix-ui/react-tabs';
 import { SetRequired } from 'type-fest';
 
@@ -44,9 +44,9 @@ declare const AsciiDocBlocks: {
     Section: ({ node }: {
         node: _oxide_react_asciidoc.SectionBlock;
     }) => react_jsx_runtime.JSX.Element;
-    Mermaid: react.NamedExoticComponent<{
-        content: string;
-    }>;
+    Listing: ({ node }: {
+        node: _oxide_react_asciidoc.LiteralBlock;
+    }) => react_jsx_runtime.JSX.Element;
     MinimalDocument: ({ document }: {
         document: DocumentBlock;
     }) => react_jsx_runtime.JSX.Element;

package/components/dist/index.js

@@ -177,6 +177,10 @@ var Warning12 = ({ className }) => /* @__PURE__ */ jsx(
 );
 var Admonition_default = Admonition;
 
+// components/src/asciidoc/Listing.tsx
+import { Title as Title2, useConverterContext } from "@oxide/react-asciidoc";
+import cn2 from "classnames";
+
 // node_modules/stylis/src/Enum.js
 var COMMENT = "comm";
 var RULESET = "rule";
@@ -1704,9 +1708,61 @@ var Mermaid = memo(function Mermaid2({ content }) {
 });
 var Mermaid_default = Mermaid;
 
-// icons/react/Link16Icon.tsx
+// components/src/asciidoc/Listing.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var Link16Icon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs3(
+var Listing = ({ node: node2 }) => {
+  const { document: document2 } = useConverterContext();
+  const docAttrs = document2.attributes || {};
+  const nowrap = node2.attributes.nowrap || docAttrs["prewrap"] === void 0;
+  if (node2.style === "source") {
+    const lang = node2.language;
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: "listingblock",
+        ...node2.lineNumber ? { "data-lineno": node2.lineNumber } : {},
+        children: [
+          /* @__PURE__ */ jsx3(Title2, { text: node2.title }),
+          /* @__PURE__ */ jsx3("div", { className: "content", children: /* @__PURE__ */ jsx3("pre", { className: cn2("highlight", nowrap ? " nowrap" : ""), children: lang && lang === "mermaid" ? /* @__PURE__ */ jsx3(Mermaid_default, { content: node2.content || "" }) : /* @__PURE__ */ jsx3(
+            "code",
+            {
+              className: lang && `language-${lang}`,
+              "data-lang": lang || void 0,
+              dangerouslySetInnerHTML: {
+                __html: node2.content || ""
+              }
+            }
+          ) }) })
+        ]
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: "listingblock",
+        ...node2.lineNumber ? { "data-lineno": node2.lineNumber } : {},
+        children: [
+          /* @__PURE__ */ jsx3(Title2, { text: node2.title }),
+          /* @__PURE__ */ jsx3("div", { className: "content", children: /* @__PURE__ */ jsx3(
+            "pre",
+            {
+              className: cn2("highlight !block", nowrap ? "nowrap" : ""),
+              dangerouslySetInnerHTML: {
+                __html: node2.content || ""
+              }
+            }
+          ) })
+        ]
+      }
+    );
+  }
+};
+var Listing_default = Listing;
+
+// icons/react/Link16Icon.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var Link16Icon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs4(
   "svg",
   {
     width: 16,
@@ -1717,10 +1773,10 @@ var Link16Icon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs3(
     "aria-labelledby": titleId,
     ...props,
     children: [
-      title ? /* @__PURE__ */ jsx3("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsxs3("g", { fill: "currentColor", children: [
-        /* @__PURE__ */ jsx3("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.829ZM12.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 8l-1.591 1.591Z" }),
-        /* @__PURE__ */ jsx3("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.06l-.353-.354Z" })
+      title ? /* @__PURE__ */ jsx4("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsxs4("g", { fill: "currentColor", children: [
+        /* @__PURE__ */ jsx4("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.829ZM12.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 8l-1.591 1.591Z" }),
+        /* @__PURE__ */ jsx4("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.06l-.353-.354Z" })
       ] })
     ]
   }
@@ -1728,12 +1784,12 @@ var Link16Icon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs3(
 var Link16Icon_default = Link16Icon;
 
 // icons/react/Checkmark12Icon.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var Checkmark12Icon = ({
   title,
   titleId,
   ...props
-}) => /* @__PURE__ */ jsxs4(
+}) => /* @__PURE__ */ jsxs5(
   "svg",
   {
     width: 12,
@@ -1744,8 +1800,8 @@ var Checkmark12Icon = ({
     "aria-labelledby": titleId,
     ...props,
     children: [
-      title ? /* @__PURE__ */ jsx4("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsx4(
+      title ? /* @__PURE__ */ jsx5("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx5(
         "path",
         {
           fillRule: "evenodd",
@@ -1760,12 +1816,12 @@ var Checkmark12Icon = ({
 var Checkmark12Icon_default = Checkmark12Icon;
 
 // icons/react/DirectionRightIcon.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var DirectionRightIcon = ({
   title,
   titleId,
   ...props
-}) => /* @__PURE__ */ jsxs5(
+}) => /* @__PURE__ */ jsxs6(
   "svg",
   {
     width: 12,
@@ -1776,8 +1832,8 @@ var DirectionRightIcon = ({
     "aria-labelledby": titleId,
     ...props,
     children: [
-      title ? /* @__PURE__ */ jsx5("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsx5(
+      title ? /* @__PURE__ */ jsx6("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx6(
         "path",
         {
           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.596l5.842-2.92Z",
@@ -1790,12 +1846,12 @@ var DirectionRightIcon = ({
 var DirectionRightIcon_default = DirectionRightIcon;
 
 // icons/react/SelectArrows6Icon.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var SelectArrows6Icon = ({
   title,
   titleId,
   ...props
-}) => /* @__PURE__ */ jsxs6(
+}) => /* @__PURE__ */ jsxs7(
   "svg",
   {
     width: 6,
@@ -1806,8 +1862,8 @@ var SelectArrows6Icon = ({
     "aria-labelledby": titleId,
     ...props,
     children: [
-      title ? /* @__PURE__ */ jsx6("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsx6(
+      title ? /* @__PURE__ */ jsx7("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx7(
         "path",
         {
           fillRule: "evenodd",
@@ -1823,31 +1879,31 @@ var SelectArrows6Icon_default = SelectArrows6Icon;
 
 // components/src/asciidoc/Section.tsx
 import { Content as Content2, parse as parse4 } from "@oxide/react-asciidoc";
-import cn2 from "classnames";
+import cn3 from "classnames";
 import { createElement as createElement2 } from "react";
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var stripAnchors = (str) => str.replace(/<a[^>]*>(.*?)<\/a>/gi, "$1");
 var Section = ({ node: node2 }) => {
   const level = node2.level;
   let title = "";
   let sectNum = node2.num;
   sectNum = sectNum === "." ? "" : sectNum;
-  title = /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx7("span", { className: "anchor", id: node2.id || "", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs7("a", { className: "link group", href: `#${node2.id}`, children: [
+  title = /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx8("span", { className: "anchor", id: node2.id || "", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs8("a", { className: "link group", href: `#${node2.id}`, children: [
       parse4(stripAnchors(node2.title)),
-      /* @__PURE__ */ jsx7(Link16Icon_default, { className: "ml-2 hidden text-accent-secondary group-hover:inline-block" })
+      /* @__PURE__ */ jsx8(Link16Icon_default, { className: "ml-2 hidden text-accent-secondary group-hover:inline-block" })
     ] })
   ] });
   if (level === 0) {
-    return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-      /* @__PURE__ */ jsx7("h1", { className: cn2("sect0", node2.role), "data-sectnum": sectNum, children: title }),
-      /* @__PURE__ */ jsx7(Content2, { blocks: node2.blocks })
+    return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+      /* @__PURE__ */ jsx8("h1", { className: cn3("sect0", node2.role), "data-sectnum": sectNum, children: title }),
+      /* @__PURE__ */ jsx8(Content2, { blocks: node2.blocks })
     ] });
   } else {
-    return /* @__PURE__ */ jsxs7("div", { className: cn2(`sect${level}`, node2.role), children: [
+    return /* @__PURE__ */ jsxs8("div", { className: cn3(`sect${level}`, node2.role), children: [
       createElement2(`h${level + 1}`, { "data-sectnum": sectNum }, title),
-      /* @__PURE__ */ jsx7("div", { className: "sectionbody", children: /* @__PURE__ */ jsx7(Content2, { blocks: node2.blocks }) })
+      /* @__PURE__ */ jsx8("div", { className: "sectionbody", children: /* @__PURE__ */ jsx8(Content2, { blocks: node2.blocks }) })
     ] });
   }
 };
@@ -1855,16 +1911,16 @@ 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: node2 }) => /* @__PURE__ */ jsx8("div", { className: "table-wrapper", children: /* @__PURE__ */ jsx8(InnerTable, { node: node2 }) });
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Table = ({ node: node2 }) => /* @__PURE__ */ jsx9("div", { className: "table-wrapper", children: /* @__PURE__ */ jsx9(InnerTable, { node: node2 }) });
 var Table_default = Table;
 
 // components/src/asciidoc/TableOfContents.tsx
 import * as Accordion from "@radix-ui/react-accordion";
 import { Link } from "@remix-run/react";
-import cn3 from "classnames";
+import cn4 from "classnames";
 import { Fragment as Fragment3, useCallback, useEffect, useMemo, useRef, useState as useState2 } from "react";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function useIntersectionObserver(elements, callback, options) {
   const [observer, setObserver] = useState2(null);
   useEffect(() => {
@@ -1993,7 +2049,7 @@ function useActiveSectionTracking(initialSections, onSectionChange, debug = fals
         return "0px";
       }
     });
-    debugNode = /* @__PURE__ */ jsx9(
+    debugNode = /* @__PURE__ */ jsx10(
       "div",
       {
         style: {
@@ -2020,24 +2076,24 @@ var DesktopOutline = ({
   activeItem
 }) => {
   const renderToc = (sections) => {
-    return sections.map((item) => /* @__PURE__ */ jsxs8(Fragment3, { children: [
-      /* @__PURE__ */ jsx9(
+    return sections.map((item) => /* @__PURE__ */ jsxs9(Fragment3, { children: [
+      /* @__PURE__ */ jsx10(
         "li",
         {
           "data-level": item.level,
-          className: cn3("mb-0 list-none text-sans-sm", item.level > 2 && "hidden"),
-          children: /* @__PURE__ */ jsx9(
+          className: cn4("mb-0 list-none text-sans-sm", item.level > 2 && "hidden"),
+          children: /* @__PURE__ */ jsx10(
             Link,
             {
               to: `#${item.id}`,
-              className: cn3(
+              className: cn4(
                 "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"
               ),
               style: {
                 paddingLeft: `${0.5 + item.level * 0.5}rem`
               },
-              children: /* @__PURE__ */ jsx9("span", { dangerouslySetInnerHTML: { __html: item.title } })
+              children: /* @__PURE__ */ jsx10("span", { dangerouslySetInnerHTML: { __html: item.title } })
             }
           )
         }
@@ -2046,7 +2102,7 @@ var DesktopOutline = ({
     ] }, item.id));
   };
   if (toc && toc.length > 0) {
-    return /* @__PURE__ */ jsx9("ul", { className: "toc", children: renderToc(toc) });
+    return /* @__PURE__ */ jsx10("ul", { className: "toc", children: renderToc(toc) });
   }
   return null;
 };
@@ -2056,27 +2112,27 @@ var SmallScreenOutline = ({
   title
 }) => {
   const renderToc = (sections) => {
-    return sections.map((item) => /* @__PURE__ */ jsxs8(Fragment3, { children: [
-      /* @__PURE__ */ jsx9(
+    return sections.map((item) => /* @__PURE__ */ jsxs9(Fragment3, { children: [
+      /* @__PURE__ */ jsx10(
         "li",
         {
           "data-level": item.level,
-          className: cn3(
+          className: cn4(
             "AccordionContent hydrated list-none text-sans-sm",
             item.level > 2 && "hidden"
           ),
-          children: /* @__PURE__ */ jsx9(
+          children: /* @__PURE__ */ jsx10(
             Link,
             {
               to: `#${item.id}`,
-              className: cn3(
+              className: cn4(
                 "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"
               ),
               style: {
                 paddingLeft: `${0.5 + item.level * 0.5}rem`
               },
-              children: /* @__PURE__ */ jsx9("span", { dangerouslySetInnerHTML: { __html: item.title } })
+              children: /* @__PURE__ */ jsx10("span", { dangerouslySetInnerHTML: { __html: item.title } })
             }
           )
         }
@@ -2085,19 +2141,19 @@ var SmallScreenOutline = ({
     ] }, item.id));
   };
   if (toc && toc.length > 0) {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx10(
       Accordion.Root,
       {
         type: "single",
         className: "sticky top-[calc(var(--header-height)-1px)] z-10 -mt-px mb-10 block max-h-[calc(100vh-var(--header-height)+1px)] w-full overflow-y-scroll border-b border-t bg-default border-secondary 1200:hidden print:hidden",
         collapsible: true,
-        children: /* @__PURE__ */ jsxs8(Accordion.Item, { value: `small-toc-${title}`, children: [
-          /* @__PURE__ */ jsx9(Accordion.Header, { children: /* @__PURE__ */ jsxs8(Accordion.Trigger, { className: "flex h-[--toc-header-height] w-full items-center justify-between px-4 text-sans-md text-default hover:bg-hover 400:px-6 600:px-8 [&>svg]:data-[state=open]:rotate-90", children: [
+        children: /* @__PURE__ */ jsxs9(Accordion.Item, { value: `small-toc-${title}`, children: [
+          /* @__PURE__ */ jsx10(Accordion.Header, { children: /* @__PURE__ */ jsxs9(Accordion.Trigger, { className: "flex h-[--toc-header-height] w-full items-center justify-between px-4 text-sans-md text-default hover:bg-hover 400:px-6 600:px-8 [&>svg]:data-[state=open]:rotate-90", children: [
             "Table of Contents",
             " ",
-            /* @__PURE__ */ jsx9(DirectionRightIcon_default, { className: "transition-all text-tertiary" })
+            /* @__PURE__ */ jsx10(DirectionRightIcon_default, { className: "transition-all text-tertiary" })
           ] }) }),
-          /* @__PURE__ */ jsx9(Accordion.Content, { className: "AccordionContent hydrated w-full border-t px-4 border-secondary 400:px-6 600:px-8", children: /* @__PURE__ */ jsx9("div", { className: "py-4", children: renderToc(toc) }) })
+          /* @__PURE__ */ jsx10(Accordion.Content, { className: "AccordionContent hydrated w-full border-t px-4 border-secondary 400:px-6 600:px-8", children: /* @__PURE__ */ jsx10("div", { className: "py-4", children: renderToc(toc) }) })
         ] })
       }
     );
@@ -3656,13 +3712,13 @@ var handleDocument = async (document2) => {
 };
 
 // components/src/asciidoc/index.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-var MinimalDocument = ({ document: document2 }) => /* @__PURE__ */ jsx10("div", { id: "content", className: "asciidoc-body w-full", children: /* @__PURE__ */ jsx10(Content4, { blocks: document2.blocks }) });
+import { jsx as jsx11 } from "react/jsx-runtime";
+var MinimalDocument = ({ document: document2 }) => /* @__PURE__ */ jsx11("div", { id: "content", className: "asciidoc-body w-full", children: /* @__PURE__ */ jsx11(Content4, { blocks: document2.blocks }) });
 var AsciiDocBlocks = {
   Admonition: Admonition_default,
   Table: Table_default,
   Section: Section_default,
-  Mermaid: Mermaid_default,
+  Listing: Listing_default,
   MinimalDocument
 };
 var renderWithBreaks = (text) => {
@@ -3733,8 +3789,8 @@ var InlineConverter = class {
 };
 
 // components/src/ui/badge/Badge.tsx
-import cn4 from "classnames";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import cn5 from "classnames";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var badgeColors = {
   default: {
     default: `ring-1 ring-inset bg-accent-secondary text-accent ring-[rgba(var(--base-green-800-rgb),0.15)]`,
@@ -3759,25 +3815,25 @@ var Badge = ({
   color = "default",
   variant = "default"
 }) => {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "span",
     {
-      className: cn4(
+      className: cn5(
         "ox-badge",
         `variant-${variant}`,
         "inline-flex h-4 items-center whitespace-nowrap rounded-sm px-[3px] py-[1px] uppercase text-mono-sm",
         badgeColors[variant][color],
         className
       ),
-      children: /* @__PURE__ */ jsx11("span", { children })
+      children: /* @__PURE__ */ jsx12("span", { children })
     }
   );
 };
 
 // components/src/ui/button/Button.tsx
-import cn5 from "classnames";
+import cn6 from "classnames";
 import { forwardRef } from "react";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var buttonSizes = ["sm", "icon", "base"];
 var variants = ["primary", "secondary", "ghost", "danger"];
 var sizeStyle = {
@@ -3790,7 +3846,7 @@ var buttonStyle = ({
   size: size2 = "base",
   variant = "primary"
 } = {}) => {
-  return cn5(
+  return cn6(
     "ox-button inline-flex items-center justify-center rounded align-top elevation-1 disabled:cursor-not-allowed",
     `btn-${variant}`,
     sizeStyle[size2],
@@ -3817,10 +3873,10 @@ var Button = forwardRef(
     ...rest
   }, ref) => {
     const isDisabled = disabled || loading;
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs10(
       "button",
       {
-        className: cn5(buttonStyle({ size: size2, variant }), className, {
+        className: cn6(buttonStyle({ size: size2, variant }), className, {
           "visually-disabled": isDisabled
         }),
         ref,
@@ -3830,8 +3886,8 @@ var Button = forwardRef(
         "aria-disabled": isDisabled,
         ...rest,
         children: [
-          loading && /* @__PURE__ */ jsx12(Spinner, { className: "absolute", variant }),
-          /* @__PURE__ */ jsx12("span", { className: cn5("flex items-center", innerClassName, { invisible: loading }), children })
+          loading && /* @__PURE__ */ jsx13(Spinner, { className: "absolute", variant }),
+          /* @__PURE__ */ jsx13("span", { className: cn6("flex items-center", innerClassName, { invisible: loading }), children })
         ]
       }
     );
@@ -3839,9 +3895,9 @@ var Button = forwardRef(
 );
 
 // components/src/ui/spinner/Spinner.tsx
-import cn6 from "classnames";
+import cn7 from "classnames";
 import { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
-import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var spinnerSizes = ["base", "lg"];
 var spinnerVariants = ["primary", "secondary", "ghost", "danger"];
 var Spinner = ({
@@ -3853,7 +3909,7 @@ var Spinner = ({
   const center = size2 === "lg" ? 18 : 6;
   const radius = size2 === "lg" ? 16 : 5;
   const strokeWidth = size2 === "lg" ? 3 : 2;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "svg",
     {
       width: frameSize,
@@ -3862,9 +3918,9 @@ var Spinner = ({
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-labelledby": "Spinner",
-      className: cn6("spinner", `spinner-${variant}`, `spinner-${size2}`, className),
+      className: cn7("spinner", `spinner-${variant}`, `spinner-${size2}`, className),
       children: [
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           "circle",
           {
             fill: "none",
@@ -3877,7 +3933,7 @@ var Spinner = ({
             strokeOpacity: 0.2
           }
         ),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           "circle",
           {
             className: "path",
@@ -3918,24 +3974,24 @@ var SpinnerLoader = ({ isLoading, children = null, minTime = 500 }) => {
         clearTimeout(hideTimeout.current);
     };
   }, [isLoading, minTime]);
-  return isVisible ? /* @__PURE__ */ jsx13(Spinner, {}) : /* @__PURE__ */ jsx13(Fragment4, { children });
+  return isVisible ? /* @__PURE__ */ jsx14(Spinner, {}) : /* @__PURE__ */ jsx14(Fragment4, { 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 jsx14 } from "react/jsx-runtime";
+import cn8 from "classnames";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var Tabs = {
-  Root: ({ className, ...props }) => /* @__PURE__ */ jsx14(Root2, { ...props, className: cn7("ox-tabs", className) }),
-  Trigger: ({ children, className, ...props }) => /* @__PURE__ */ jsx14(Trigger2, { ...props, className: cn7("ox-tab", className), children: /* @__PURE__ */ jsx14("div", { children }) }),
-  List: ({ className, ...props }) => /* @__PURE__ */ jsx14(List, { ...props, className: cn7("ox-tabs-list", className) }),
-  Content: ({ className, ...props }) => /* @__PURE__ */ jsx14(Content5, { ...props, className: cn7("ox-tabs-panel", className) })
+  Root: ({ className, ...props }) => /* @__PURE__ */ jsx15(Root2, { ...props, className: cn8("ox-tabs", className) }),
+  Trigger: ({ children, className, ...props }) => /* @__PURE__ */ jsx15(Trigger2, { ...props, className: cn8("ox-tab", className), children: /* @__PURE__ */ jsx15("div", { children }) }),
+  List: ({ className, ...props }) => /* @__PURE__ */ jsx15(List, { ...props, className: cn8("ox-tabs-list", className) }),
+  Content: ({ className, ...props }) => /* @__PURE__ */ jsx15(Content5, { ...props, className: cn8("ox-tabs-panel", className) })
 };
 
 // components/src/ui/checkbox/Checkbox.tsx
-import cn8 from "classnames";
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
-var Check = () => /* @__PURE__ */ jsx15(Checkmark12Icon_default, { className: "pointer-events-none absolute left-0.5 top-0.5 h-3 w-3 fill-current text-accent" });
+import cn9 from "classnames";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var Check = () => /* @__PURE__ */ jsx16(Checkmark12Icon_default, { className: "pointer-events-none absolute left-0.5 top-0.5 h-3 w-3 fill-current text-accent" });
 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
@@ -3949,28 +4005,28 @@ var Checkbox = ({
   children,
   className,
   ...inputProps
-}) => /* @__PURE__ */ jsxs11("label", { className: "inline-flex items-center", children: [
-  /* @__PURE__ */ jsxs11("span", { className: "relative h-4 w-4", children: [
-    /* @__PURE__ */ jsx15(
+}) => /* @__PURE__ */ jsxs12("label", { className: "inline-flex items-center", children: [
+  /* @__PURE__ */ jsxs12("span", { className: "relative h-4 w-4", children: [
+    /* @__PURE__ */ jsx16(
       "input",
       {
-        className: cn8(inputStyle, className),
+        className: cn9(inputStyle, className),
         type: "checkbox",
         ref: (el) => el && (el.indeterminate = !!indeterminate),
         ...inputProps
       }
     ),
-    inputProps.checked && !indeterminate && /* @__PURE__ */ jsx15(Check, {}),
-    indeterminate && /* @__PURE__ */ jsx15(Indeterminate, {})
+    inputProps.checked && !indeterminate && /* @__PURE__ */ jsx16(Check, {}),
+    indeterminate && /* @__PURE__ */ jsx16(Indeterminate, {})
   ] }),
-  children && /* @__PURE__ */ jsx15("span", { className: "ml-2.5 text-sans-md text-secondary", children })
+  children && /* @__PURE__ */ jsx16("span", { className: "ml-2.5 text-sans-md text-secondary", children })
 ] });
 
 // components/src/ui/listbox/Listbox.tsx
 import { FloatingPortal, flip, offset, size, useFloating } from "@floating-ui/react";
 import { Listbox as Select } from "@headlessui/react";
-import cn9 from "classnames";
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import cn10 from "classnames";
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var Listbox = ({
   name,
   selected,
@@ -3999,19 +4055,19 @@ var Listbox = ({
   const selectedItem = selected && items.find((i) => i.value === selected);
   const noItems = !isLoading && items.length === 0;
   const isDisabled = disabled || noItems;
-  return /* @__PURE__ */ jsx16("div", { className: cn9("relative", className), children: /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17("div", { className: cn10("relative", className), children: /* @__PURE__ */ jsx17(
     Select,
     {
       value: selected,
       onChange: (val) => val !== null && onChange(val),
       disabled: isDisabled || isLoading,
-      children: ({ open }) => /* @__PURE__ */ jsxs12(Fragment5, { children: [
-        /* @__PURE__ */ jsxs12(
+      children: ({ open }) => /* @__PURE__ */ jsxs13(Fragment5, { children: [
+        /* @__PURE__ */ jsxs13(
           Select.Button,
           {
             name,
             ref: refs.setReference,
-            className: cn9(
+            className: cn10(
               `flex h-10 w-full items-center justify-between
                     rounded border text-sans-md`,
               hasError ? "focus-error border-error-secondary hover:border-error" : "border-default hover:border-hover",
@@ -4022,37 +4078,37 @@ var Listbox = ({
             ),
             ...props,
             children: [
-              /* @__PURE__ */ jsx16("div", { className: "w-full px-3 text-left", children: selectedItem ? (
+              /* @__PURE__ */ jsx17("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__ */ jsx16("span", { className: "text-quaternary", children: noItems ? "No items" : placeholder }) }),
-              !isDisabled && /* @__PURE__ */ jsx16(SpinnerLoader, { isLoading }),
-              /* @__PURE__ */ jsx16(
+              ) : /* @__PURE__ */ jsx17("span", { className: "text-quaternary", children: noItems ? "No items" : placeholder }) }),
+              !isDisabled && /* @__PURE__ */ jsx17(SpinnerLoader, { isLoading }),
+              /* @__PURE__ */ jsx17(
                 "div",
                 {
                   className: "ml-3 flex h-[calc(100%-12px)] items-center border-l px-3 border-secondary",
                   "aria-hidden": true,
-                  children: /* @__PURE__ */ jsx16(SelectArrows6Icon_default, { className: "h-[14px] w-2 text-tertiary" })
+                  children: /* @__PURE__ */ jsx17(SelectArrows6Icon_default, { className: "h-[14px] w-2 text-tertiary" })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx16(FloatingPortal, { children: /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(FloatingPortal, { children: /* @__PURE__ */ jsx17(
           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__ */ jsx16(
+            children: items.map((item) => /* @__PURE__ */ jsx17(
               Select.Option,
               {
                 value: item.value,
                 className: "relative border-b border-secondary last:border-0",
-                children: ({ active, selected: selected2 }) => /* @__PURE__ */ jsx16(
+                children: ({ active, selected: selected2 }) => /* @__PURE__ */ jsx17(
                   "div",
                   {
-                    className: cn9(
+                    className: cn10(
                       "ox-menu-item text-secondary",
                       selected2 && "is-selected",
                       active && "is-highlighted"