@oxide/design-system 2.2.6 → 2.2.7--canary.f2f7829.0

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

@@ -1,3 +1,10 @@
+import {
+  Checkmark12Icon_default,
+  DirectionRightIcon_default,
+  Link16Icon_default,
+  SelectArrows6Icon_default
+} from "../../chunk-ML7NK3OF.js";
+
 // components/src/asciidoc/index.tsx
 import asciidoctor2 from "@asciidoctor/core";
 import { Content as Content4 } from "@oxide/react-asciidoc";
@@ -110,150 +117,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 { 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: "ml-2 hidden text-accent-secondary group-hover:inline-block" })
+      /* @__PURE__ */ jsx2(Link16Icon_default, { className: "ml-2 hidden text-accent-secondary 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: cn2("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: [
+    return /* @__PURE__ */ jsxs2("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 }) })
+      /* @__PURE__ */ jsx2("div", { className: "sectionbody", children: /* @__PURE__ */ jsx2(Content2, { blocks: node.blocks }) })
     ] });
   }
 };
@@ -261,8 +151,8 @@ 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
@@ -270,7 +160,7 @@ import { parse as parse3 } from "@oxide/react-asciidoc";
 import * as Accordion from "@radix-ui/react-accordion";
 import cn3 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 +289,7 @@ function useActiveSectionTracking(initialSections, onSectionChange, debug = fals
         return "0px";
       }
     });
-    debugNode = /* @__PURE__ */ jsx8(
+    debugNode = /* @__PURE__ */ jsx4(
       "div",
       {
         style: {
@@ -427,13 +317,13 @@ 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("mb-0 list-none text-sans-sm", item.level > 2 && "hidden"),
-          children: /* @__PURE__ */ jsx8(
+          children: /* @__PURE__ */ jsx4(
             "a",
             {
               href: `#${item.id}`,
@@ -453,7 +343,7 @@ var DesktopOutline = ({
     ] }, item.id));
   };
   if (toc && toc.length > 0) {
-    return /* @__PURE__ */ jsx8("ul", { className: cn3("toc", className), children: renderToc(toc) });
+    return /* @__PURE__ */ jsx4("ul", { className: cn3("toc", className), children: renderToc(toc) });
   }
   return null;
 };
@@ -464,13 +354,13 @@ 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("list-none text-sans-sm", item.level > 2 && "hidden"),
-          children: /* @__PURE__ */ jsx8(
+          children: /* @__PURE__ */ jsx4(
             "a",
             {
               href: `#${item.id}`,
@@ -491,7 +381,7 @@ var SmallScreenOutline = ({
     ] }, item.id));
   };
   if (toc && toc.length > 0) {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx4(
       Accordion.Root,
       {
         type: "single",
@@ -502,13 +392,13 @@ var SmallScreenOutline = ({
         collapsible: true,
         value,
         onValueChange: setValue,
-        children: /* @__PURE__ */ jsxs7(Accordion.Item, { value: "toc", children: [
-          /* @__PURE__ */ jsx8(Accordion.Header, { children: /* @__PURE__ */ jsxs7(Accordion.Trigger, { className: "flex h-12 w-full items-center justify-between text-sans-md text-default hover:bg-hover px-5 600:px-10 [&>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: "flex h-12 w-full items-center justify-between text-sans-md text-default hover:bg-hover px-5 600:px-10 [&>svg]:data-[state=open]:rotate-90", children: [
             "Table of Contents",
             " ",
-            /* @__PURE__ */ jsx8(DirectionRightIcon_default, { className: "transition-all text-tertiary" })
+            /* @__PURE__ */ jsx4(DirectionRightIcon_default, { className: "transition-all text-tertiary" })
           ] }) }),
-          /* @__PURE__ */ jsx8(Accordion.Content, { className: "animated-accordion hydrated max-h-[60vh] overflow-y-scroll w-full border-t border-secondary px-5 600:px-10", children: /* @__PURE__ */ jsx8("div", { className: "py-4", children: renderToc(toc) }) })
+          /* @__PURE__ */ jsx4(Accordion.Content, { className: "animated-accordion hydrated max-h-[60vh] overflow-y-scroll w-full border-t border-secondary px-5 600:px-10", children: /* @__PURE__ */ jsx4("div", { className: "py-4", children: renderToc(toc) }) })
         ] })
       }
     );
@@ -2096,8 +1986,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,
@@ -2175,7 +2065,7 @@ var InlineConverter = class {
 
 // components/src/ui/badge/Badge.tsx
 import cn4 from "classnames";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx6 } 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)]`,
@@ -2200,7 +2090,7 @@ var Badge = ({
   color = "default",
   variant = "default"
 }) => {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx6(
     "span",
     {
       className: cn4(
@@ -2210,7 +2100,7 @@ var Badge = ({
         badgeColors[variant][color],
         className
       ),
-      children: /* @__PURE__ */ jsx10("span", { children })
+      children: /* @__PURE__ */ jsx6("span", { children })
     }
   );
 };
@@ -2218,7 +2108,7 @@ var Badge = ({
 // 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";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var buttonSizes = ["sm", "icon", "base"];
 var variants = ["primary", "secondary", "ghost", "danger"];
 var sizeStyle = {
@@ -2258,7 +2148,7 @@ var Button = forwardRef(
     ...rest
   }, ref) => {
     const isDisabled = disabled || loading;
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs4(
       "button",
       {
         className: cn5(buttonStyle({ size: size2, variant }), className, {
@@ -2271,8 +2161,8 @@ var Button = forwardRef(
         "aria-disabled": isDisabled,
         ...rest,
         children: [
-          loading && /* @__PURE__ */ jsx11(Spinner, { className: "absolute", variant }),
-          /* @__PURE__ */ jsx11("span", { className: cn5("flex items-center", innerClassName, { invisible: loading }), children })
+          loading && /* @__PURE__ */ jsx7(Spinner, { className: "absolute", variant }),
+          /* @__PURE__ */ jsx7("span", { className: cn5("flex items-center", innerClassName, { invisible: loading }), children })
         ]
       }
     );
@@ -2282,7 +2172,7 @@ var Button = forwardRef(
 // 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";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var spinnerSizes = ["base", "lg"];
 var spinnerVariants = ["primary", "secondary", "ghost", "danger"];
 var Spinner = ({
@@ -2294,7 +2184,7 @@ var Spinner = ({
   const center = size2 === "lg" ? 18 : 6;
   const radius = size2 === "lg" ? 16 : 5;
   const strokeWidth = size2 === "lg" ? 3 : 2;
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs5(
     "svg",
     {
       width: frameSize,
@@ -2305,7 +2195,7 @@ var Spinner = ({
       "aria-labelledby": "Spinner",
       className: cn6("spinner", `spinner-${variant}`, `spinner-${size2}`, className),
       children: [
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx8(
           "circle",
           {
             fill: "none",
@@ -2318,7 +2208,7 @@ var Spinner = ({
             strokeOpacity: 0.2
           }
         ),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx8(
           "circle",
           {
             className: "path",
@@ -2357,24 +2247,24 @@ var SpinnerLoader = ({ isLoading, children = null, minTime = 500 }) => {
       if (hideTimeout.current) clearTimeout(hideTimeout.current);
     };
   }, [isLoading, minTime]);
-  return isVisible ? /* @__PURE__ */ jsx12(Spinner, {}) : /* @__PURE__ */ jsx12(Fragment3, { children });
+  return isVisible ? /* @__PURE__ */ jsx8(Spinner, {}) : /* @__PURE__ */ jsx8(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";
+import { jsx as jsx9 } 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) })
+  Root: ({ className, ...props }) => /* @__PURE__ */ jsx9(Root2, { ...props, className: cn7("ox-tabs", className) }),
+  Trigger: ({ children, className, ...props }) => /* @__PURE__ */ jsx9(Trigger2, { ...props, className: cn7("ox-tab", className), children: /* @__PURE__ */ jsx9("div", { children }) }),
+  List: ({ className, ...props }) => /* @__PURE__ */ jsx9(List, { ...props, className: cn7("ox-tabs-list", className) }),
+  Content: ({ className, ...props }) => /* @__PURE__ */ jsx9(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: "pointer-events-none absolute left-0.5 top-0.5 h-3 w-3 fill-current text-accent" });
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var Check = () => /* @__PURE__ */ jsx10(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
@@ -2388,9 +2278,9 @@ var Checkbox = ({
   children,
   className,
   ...inputProps
-}) => /* @__PURE__ */ jsxs10("label", { className: "inline-flex items-center", children: [
-  /* @__PURE__ */ jsxs10("span", { className: "relative h-4 w-4", children: [
-    /* @__PURE__ */ jsx14(
+}) => /* @__PURE__ */ jsxs6("label", { className: "inline-flex items-center", children: [
+  /* @__PURE__ */ jsxs6("span", { className: "relative h-4 w-4", children: [
+    /* @__PURE__ */ jsx10(
       "input",
       {
         className: cn8(inputStyle, className),
@@ -2401,17 +2291,17 @@ var Checkbox = ({
         ...inputProps
       }
     ),
-    inputProps.checked && !indeterminate && /* @__PURE__ */ jsx14(Check, {}),
-    indeterminate && /* @__PURE__ */ jsx14(Indeterminate, {})
+    inputProps.checked && !indeterminate && /* @__PURE__ */ jsx10(Check, {}),
+    indeterminate && /* @__PURE__ */ jsx10(Indeterminate, {})
   ] }),
-  children && /* @__PURE__ */ jsx14("span", { className: "ml-2.5 text-sans-md text-secondary", children })
+  children && /* @__PURE__ */ jsx10("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 Fragment4, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var Listbox = ({
   name,
   selected,
@@ -2440,14 +2330,14 @@ var Listbox = ({
   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(
+  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__ */ jsxs11(Fragment4, { children: [
-        /* @__PURE__ */ jsxs11(
+      children: ({ open }) => /* @__PURE__ */ jsxs7(Fragment4, { children: [
+        /* @__PURE__ */ jsxs7(
           Select.Button,
           {
             name,
@@ -2463,34 +2353,34 @@ var Listbox = ({
             ),
             ...props,
             children: [
-              /* @__PURE__ */ jsx15("div", { className: "w-full px-3 text-left", children: selectedItem ? (
+              /* @__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__ */ jsx15("span", { className: "text-quaternary", children: noItems ? "No items" : placeholder }) }),
-              !isDisabled && /* @__PURE__ */ jsx15(SpinnerLoader, { isLoading }),
-              /* @__PURE__ */ jsx15(
+              ) : /* @__PURE__ */ jsx11("span", { className: "text-quaternary", children: noItems ? "No items" : placeholder }) }),
+              !isDisabled && /* @__PURE__ */ jsx11(SpinnerLoader, { isLoading }),
+              /* @__PURE__ */ jsx11(
                 "div",
                 {
                   className: "ml-3 flex h-[calc(100%-12px)] items-center border-l px-3 border-secondary",
                   "aria-hidden": true,
-                  children: /* @__PURE__ */ jsx15(SelectArrows6Icon_default, { className: "h-[14px] w-2 text-tertiary" })
+                  children: /* @__PURE__ */ jsx11(SelectArrows6Icon_default, { className: "h-[14px] w-2 text-tertiary" })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx15(FloatingPortal, { children: /* @__PURE__ */ jsx15(
+        /* @__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__ */ jsx15(
+            children: items.map((item) => /* @__PURE__ */ jsx11(
               Select.Option,
               {
                 value: item.value,
                 className: "relative border-b border-secondary last:border-0",
-                children: ({ active, selected: selected2 }) => /* @__PURE__ */ jsx15(
+                children: ({ active, selected: selected2 }) => /* @__PURE__ */ jsx11(
                   "div",
                   {
                     className: cn9(