@oxide/design-system 1.4.7--canary.9b5b7a2.0 → 1.4.7--canary.3a50b9d.0

package/components/dist/index.js

@@ -6257,7 +6257,7 @@ var require_dom_to_react = __commonJS({
       options = options || {};
       var library = options.library || React2;
       var cloneElement = library.cloneElement;
-      var createElement2 = library.createElement;
+      var createElement = library.createElement;
       var isValidElement = library.isValidElement;
       var result = [];
       var node;
@@ -6322,7 +6322,7 @@ var require_dom_to_react = __commonJS({
         if (len > 1) {
           props.key = i;
         }
-        result.push(transform(createElement2(node.name, props, children), node, i));
+        result.push(transform(createElement(node.name, props, children), node, i));
       }
       return result.length === 1 ? result[0] : result;
     }
@@ -6558,423 +6558,615 @@ var Warning12 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
 );
 var Admonition_default = Admonition;
 
-// icons/react/Access24Icon.tsx
+// components/src/asciidoc/Table.tsx
+var import_react_asciidoc2 = require("@oxide/react-asciidoc");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var Table = ({ node }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "table-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_asciidoc2.Table, { node }) });
+var Table_default = Table;
 
-// icons/react/Action24Icon.tsx
+// components/src/asciidoc/index.ts
+var AsciiDocBlocks = {
+  Admonition: Admonition_default,
+  Table: Table_default
+};
+
+// components/src/ui/badge/Badge.tsx
+var import_classnames = __toESM(require_classnames());
 var import_jsx_runtime3 = require("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)]`,
+    destructive: `ring-1 ring-inset bg-destructive-secondary text-destructive ring-[rgba(var(--base-red-800-rgb),0.15)]`,
+    notice: `ring-1 ring-inset bg-notice-secondary text-notice ring-[rgba(var(--base-yellow-800-rgb),0.15)]`,
+    neutral: `ring-1 ring-inset bg-secondary text-secondary ring-[rgba(var(--base-neutral-700-rgb),0.15)]`,
+    purple: `ring-1 ring-inset bg-[var(--base-purple-200)] text-[var(--base-purple-700)] ring-[rgba(var(--base-purple-800-rgb),0.15)]`,
+    blue: `ring-1 ring-inset bg-info-secondary text-info ring-[rgba(var(--base-blue-800-rgb),0.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-[var(--base-purple-700)] text-inverse",
+    blue: "bg-info text-inverse"
+  }
+};
+var Badge = ({
+  className,
+  children,
+  color = "default",
+  variant = "default"
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "span",
+    {
+      className: (0, import_classnames.default)(
+        "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__ */ (0, import_jsx_runtime3.jsx)("span", { children })
+    }
+  );
+};
 
-// icons/react/AddRoundel24Icon.tsx
+// components/src/ui/button/Button.tsx
+var import_classnames2 = __toESM(require_classnames());
+var import_react = require("react");
 var import_jsx_runtime4 = require("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 (0, import_classnames2.default)(
+    "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 = (0, import_react.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__ */ (0, import_jsx_runtime4.jsxs)(
+      "button",
+      {
+        className: (0, import_classnames2.default)(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__ */ (0, import_jsx_runtime4.jsx)(Spinner, { className: "absolute", variant }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: (0, import_classnames2.default)("flex items-center", innerClassName, { invisible: loading }), children })
+        ]
+      }
+    );
+  }
+);
 
-// icons/react/Calendar24Icon.tsx
+// components/src/ui/spinner/Spinner.tsx
+var import_classnames3 = __toESM(require_classnames());
+var import_react2 = require("react");
 var import_jsx_runtime5 = require("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__ */ (0, import_jsx_runtime5.jsxs)(
+    "svg",
+    {
+      width: frameSize,
+      height: frameSize,
+      viewBox: `0 0 ${frameSize + " " + frameSize}`,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-labelledby": "Spinner",
+      className: (0, import_classnames3.default)("spinner", `spinner-${variant}`, `spinner-${size2}`, className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "circle",
+          {
+            fill: "none",
+            className: "bg",
+            strokeWidth,
+            strokeLinecap: "round",
+            cx: center,
+            cy: center,
+            r: radius,
+            strokeOpacity: 0.2
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "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] = (0, import_react2.useState)(isLoading);
+  const hideTimeout = (0, import_react2.useRef)(null);
+  const loadingStartTime = (0, import_react2.useRef)(0);
+  (0, import_react2.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__ */ (0, import_jsx_runtime5.jsx)(Spinner, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children });
+};
 
-// icons/react/Chat24Icon.tsx
+// components/src/ui/tabs/Tabs.tsx
+var import_react_tabs = require("@radix-ui/react-tabs");
+var import_classnames4 = __toESM(require_classnames());
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var Tabs = {
+  Root: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_tabs.Root, { ...props, className: (0, import_classnames4.default)("ox-tabs", className) }),
+  Trigger: ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_tabs.Trigger, { ...props, className: (0, import_classnames4.default)("ox-tab", className), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children }) }),
+  List: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_tabs.List, { ...props, className: (0, import_classnames4.default)("ox-tabs-list", className) }),
+  Content: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_tabs.Content, { ...props, className: (0, import_classnames4.default)("ox-tabs-panel", className) })
+};
 
-// icons/react/Clipboard24Icon.tsx
+// icons/react/Access24Icon.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 
-// icons/react/Cloud24Icon.tsx
+// icons/react/Action24Icon.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 
-// icons/react/Compatibility24Icon.tsx
+// icons/react/AddRoundel24Icon.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 
-// icons/react/Contrast24Icon.tsx
+// icons/react/Calendar24Icon.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 
-// icons/react/Cpu24Icon.tsx
+// icons/react/Chat24Icon.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 
-// icons/react/Delete24Icon.tsx
+// icons/react/Clipboard24Icon.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 
-// icons/react/Dislike24Icon.tsx
+// icons/react/Cloud24Icon.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
 
-// icons/react/Document24Icon.tsx
+// icons/react/Compatibility24Icon.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 
-// icons/react/Dots24Icon.tsx
+// icons/react/Contrast24Icon.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
 
-// icons/react/Download24Icon.tsx
+// icons/react/Cpu24Icon.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 
-// icons/react/Email24Icon.tsx
+// icons/react/Delete24Icon.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 
-// icons/react/Error24Icon.tsx
+// icons/react/Dislike24Icon.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
 
-// icons/react/Firewall24Icon.tsx
+// icons/react/Document24Icon.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 
-// icons/react/Folder24Icon.tsx
+// icons/react/Dots24Icon.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 
-// icons/react/Gateway24Icon.tsx
+// icons/react/Download24Icon.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
 
-// icons/react/Heart24Icon.tsx
+// icons/react/Email24Icon.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
 
-// icons/react/Hide24Icon.tsx
+// icons/react/Error24Icon.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 
-// icons/react/Hourglass24Icon.tsx
+// icons/react/Firewall24Icon.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
 
-// icons/react/Images24Icon.tsx
+// icons/react/Folder24Icon.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
 
-// icons/react/Info24Icon.tsx
+// icons/react/Gateway24Icon.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
 
-// icons/react/Instances24Icon.tsx
+// icons/react/Heart24Icon.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 
-// icons/react/IpGlobal24Icon.tsx
+// icons/react/Hide24Icon.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
 
-// icons/react/IpLocal24Icon.tsx
+// icons/react/Hourglass24Icon.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
 
-// icons/react/Issues24Icon.tsx
+// icons/react/Images24Icon.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
 
-// icons/react/Key24Icon.tsx
+// icons/react/Info24Icon.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
 
-// icons/react/Like24Icon.tsx
+// icons/react/Instances24Icon.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
 
-// icons/react/LoadBalancer24Icon.tsx
+// icons/react/IpGlobal24Icon.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
 
-// icons/react/Location24Icon.tsx
+// icons/react/IpLocal24Icon.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
 
-// icons/react/Logs24Icon.tsx
+// icons/react/Issues24Icon.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
 
-// icons/react/Metrics24Icon.tsx
+// icons/react/Key24Icon.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
 
-// icons/react/Monitoring24Icon.tsx
+// icons/react/Like24Icon.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
 
-// icons/react/Networking24Icon.tsx
+// icons/react/LoadBalancer24Icon.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
 
-// icons/react/Organization24Icon.tsx
+// icons/react/Location24Icon.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
 
-// icons/react/Overview24Icon.tsx
+// icons/react/Logs24Icon.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
 
-// icons/react/Person24Icon.tsx
+// icons/react/Metrics24Icon.tsx
 var import_jsx_runtime41 = require("react/jsx-runtime");
 
-// icons/react/PersonGroup24Icon.tsx
+// icons/react/Monitoring24Icon.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
 
-// icons/react/Progress24Icon.tsx
+// icons/react/Networking24Icon.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
 
-// icons/react/Prohibited24Icon.tsx
+// icons/react/Organization24Icon.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
 
-// icons/react/Router24Icon.tsx
+// icons/react/Overview24Icon.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
 
-// icons/react/Safety24Icon.tsx
+// icons/react/Person24Icon.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
 
-// icons/react/Security24Icon.tsx
+// icons/react/PersonGroup24Icon.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
 
-// icons/react/Servers24Icon.tsx
+// icons/react/Progress24Icon.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
 
-// icons/react/Settings24Icon.tsx
+// icons/react/Prohibited24Icon.tsx
 var import_jsx_runtime49 = require("react/jsx-runtime");
 
-// icons/react/Snapshots24Icon.tsx
+// icons/react/Router24Icon.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");
 
-// icons/react/SoftwareUpdate24Icon.tsx
+// icons/react/Safety24Icon.tsx
 var import_jsx_runtime51 = require("react/jsx-runtime");
 
-// icons/react/Speaker24Icon.tsx
+// icons/react/Security24Icon.tsx
 var import_jsx_runtime52 = require("react/jsx-runtime");
 
-// icons/react/Storage24Icon.tsx
+// icons/react/Servers24Icon.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
 
-// icons/react/Subnet24Icon.tsx
+// icons/react/Settings24Icon.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
 
-// icons/react/Resize24Icon.tsx
+// icons/react/Snapshots24Icon.tsx
 var import_jsx_runtime55 = require("react/jsx-runtime");
 
-// icons/react/Terminal24Icon.tsx
+// icons/react/SoftwareUpdate24Icon.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
 
-// icons/react/Transmit24Icon.tsx
+// icons/react/Speaker24Icon.tsx
 var import_jsx_runtime57 = require("react/jsx-runtime");
 
-// icons/react/Wireless24Icon.tsx
+// icons/react/Storage24Icon.tsx
 var import_jsx_runtime58 = require("react/jsx-runtime");
 
-// icons/react/Question24Icon.tsx
+// icons/react/Subnet24Icon.tsx
 var import_jsx_runtime59 = require("react/jsx-runtime");
 
-// icons/react/Access16Icon.tsx
+// icons/react/Resize24Icon.tsx
 var import_jsx_runtime60 = require("react/jsx-runtime");
 
-// icons/react/Action16Icon.tsx
+// icons/react/Terminal24Icon.tsx
 var import_jsx_runtime61 = require("react/jsx-runtime");
 
-// icons/react/AddRoundel16Icon.tsx
+// icons/react/Transmit24Icon.tsx
 var import_jsx_runtime62 = require("react/jsx-runtime");
 
-// icons/react/Calendar16Icon.tsx
+// icons/react/Wireless24Icon.tsx
 var import_jsx_runtime63 = require("react/jsx-runtime");
 
-// icons/react/Chat16Icon.tsx
+// icons/react/Question24Icon.tsx
 var import_jsx_runtime64 = require("react/jsx-runtime");
 
-// icons/react/Clipboard16Icon.tsx
+// icons/react/Access16Icon.tsx
 var import_jsx_runtime65 = require("react/jsx-runtime");
 
-// icons/react/Cloud16Icon.tsx
+// icons/react/Action16Icon.tsx
 var import_jsx_runtime66 = require("react/jsx-runtime");
 
-// icons/react/Close16Icon.tsx
+// icons/react/AddRoundel16Icon.tsx
 var import_jsx_runtime67 = require("react/jsx-runtime");
 
-// icons/react/Compability16Icon.tsx
+// icons/react/Calendar16Icon.tsx
 var import_jsx_runtime68 = require("react/jsx-runtime");
 
-// icons/react/Contrast16Icon.tsx
+// icons/react/Chat16Icon.tsx
 var import_jsx_runtime69 = require("react/jsx-runtime");
 
-// icons/react/Cpu16Icon.tsx
+// icons/react/Clipboard16Icon.tsx
 var import_jsx_runtime70 = require("react/jsx-runtime");
 
-// icons/react/Delete16Icon.tsx
+// icons/react/Cloud16Icon.tsx
 var import_jsx_runtime71 = require("react/jsx-runtime");
 
-// icons/react/Dislike16Icon.tsx
+// icons/react/Close16Icon.tsx
 var import_jsx_runtime72 = require("react/jsx-runtime");
 
-// icons/react/Document16Icon.tsx
+// icons/react/Compability16Icon.tsx
 var import_jsx_runtime73 = require("react/jsx-runtime");
 
-// icons/react/Dots16Icon.tsx
+// icons/react/Contrast16Icon.tsx
 var import_jsx_runtime74 = require("react/jsx-runtime");
 
-// icons/react/DownloadRoundel16Icon.tsx
+// icons/react/Cpu16Icon.tsx
 var import_jsx_runtime75 = require("react/jsx-runtime");
 
-// icons/react/Edit16Icon.tsx
+// icons/react/Delete16Icon.tsx
 var import_jsx_runtime76 = require("react/jsx-runtime");
 
-// icons/react/Email16Icon.tsx
+// icons/react/Dislike16Icon.tsx
 var import_jsx_runtime77 = require("react/jsx-runtime");
 
-// icons/react/Error16Icon.tsx
+// icons/react/Document16Icon.tsx
 var import_jsx_runtime78 = require("react/jsx-runtime");
 
-// icons/react/Filter16Icon.tsx
+// icons/react/Dots16Icon.tsx
 var import_jsx_runtime79 = require("react/jsx-runtime");
 
-// icons/react/Firewall16Icon.tsx
+// icons/react/DownloadRoundel16Icon.tsx
 var import_jsx_runtime80 = require("react/jsx-runtime");
 
-// icons/react/Folder16Icon.tsx
+// icons/react/Edit16Icon.tsx
 var import_jsx_runtime81 = require("react/jsx-runtime");
 
-// icons/react/Gateway16Icon.tsx
+// icons/react/Email16Icon.tsx
 var import_jsx_runtime82 = require("react/jsx-runtime");
 
-// icons/react/Heart16Icon.tsx
+// icons/react/Error16Icon.tsx
 var import_jsx_runtime83 = require("react/jsx-runtime");
 
-// icons/react/Hide16Icon.tsx
+// icons/react/Filter16Icon.tsx
 var import_jsx_runtime84 = require("react/jsx-runtime");
 
-// icons/react/Hourglass16Icon.tsx
+// icons/react/Firewall16Icon.tsx
 var import_jsx_runtime85 = require("react/jsx-runtime");
 
-// icons/react/Images16Icon.tsx
+// icons/react/Folder16Icon.tsx
 var import_jsx_runtime86 = require("react/jsx-runtime");
 
-// icons/react/Info16Icon.tsx
+// icons/react/Gateway16Icon.tsx
 var import_jsx_runtime87 = require("react/jsx-runtime");
 
-// icons/react/Instances16Icon.tsx
+// icons/react/Heart16Icon.tsx
 var import_jsx_runtime88 = require("react/jsx-runtime");
 
-// icons/react/Integration16Icon.tsx
+// icons/react/Hide16Icon.tsx
 var import_jsx_runtime89 = require("react/jsx-runtime");
 
-// icons/react/IpGlobal16Icon.tsx
+// icons/react/Hourglass16Icon.tsx
 var import_jsx_runtime90 = require("react/jsx-runtime");
 
-// icons/react/IpLocal16Icon.tsx
+// icons/react/Images16Icon.tsx
 var import_jsx_runtime91 = require("react/jsx-runtime");
 
-// icons/react/Issues16Icon.tsx
+// icons/react/Info16Icon.tsx
 var import_jsx_runtime92 = require("react/jsx-runtime");
 
-// icons/react/Key16Icon.tsx
+// icons/react/Instances16Icon.tsx
 var import_jsx_runtime93 = require("react/jsx-runtime");
 
-// icons/react/Like16Icon.tsx
+// icons/react/Integration16Icon.tsx
 var import_jsx_runtime94 = require("react/jsx-runtime");
 
-// icons/react/Link16Icon.tsx
+// icons/react/IpGlobal16Icon.tsx
 var import_jsx_runtime95 = require("react/jsx-runtime");
-var Link16Icon = ({ title, titleId, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
-  "svg",
-  {
-    width: 16,
-    height: 16,
-    viewBox: "0 0 16 16",
-    xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
-    "aria-labelledby": titleId,
-    ...props,
-    children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("g", { fill: "currentColor", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("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__ */ (0, import_jsx_runtime95.jsx)("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" })
-      ] })
-    ]
-  }
-);
-var Link16Icon_default = Link16Icon;
 
-// icons/react/LoadBalancer16Icon.tsx
+// icons/react/IpLocal16Icon.tsx
 var import_jsx_runtime96 = require("react/jsx-runtime");
 
-// icons/react/Logs16Icon.tsx
+// icons/react/Issues16Icon.tsx
 var import_jsx_runtime97 = require("react/jsx-runtime");
 
-// icons/react/Metrics16Icon.tsx
+// icons/react/Key16Icon.tsx
 var import_jsx_runtime98 = require("react/jsx-runtime");
 
-// icons/react/Monitoring16Icon.tsx
+// icons/react/Like16Icon.tsx
 var import_jsx_runtime99 = require("react/jsx-runtime");
 
-// icons/react/Networking16Icon.tsx
+// icons/react/Link16Icon.tsx
 var import_jsx_runtime100 = require("react/jsx-runtime");
 
-// icons/react/NewWindow16Icon.tsx
+// icons/react/LoadBalancer16Icon.tsx
 var import_jsx_runtime101 = require("react/jsx-runtime");
 
-// icons/react/Notifications16Icon.tsx
+// icons/react/Logs16Icon.tsx
 var import_jsx_runtime102 = require("react/jsx-runtime");
 
-// icons/react/Organization16Icon.tsx
+// icons/react/Metrics16Icon.tsx
 var import_jsx_runtime103 = require("react/jsx-runtime");
 
-// icons/react/Overview16Icon.tsx
+// icons/react/Monitoring16Icon.tsx
 var import_jsx_runtime104 = require("react/jsx-runtime");
 
-// icons/react/Person16Icon.tsx
+// icons/react/Networking16Icon.tsx
 var import_jsx_runtime105 = require("react/jsx-runtime");
 
-// icons/react/PersonGroup16Icon.tsx
+// icons/react/NewWindow16Icon.tsx
 var import_jsx_runtime106 = require("react/jsx-runtime");
 
-// icons/react/Profile16Icon.tsx
+// icons/react/Notifications16Icon.tsx
 var import_jsx_runtime107 = require("react/jsx-runtime");
 
-// icons/react/Refresh16Icon.tsx
+// icons/react/Organization16Icon.tsx
 var import_jsx_runtime108 = require("react/jsx-runtime");
 
-// icons/react/Ram16Icon.tsx
+// icons/react/Overview16Icon.tsx
 var import_jsx_runtime109 = require("react/jsx-runtime");
 
-// icons/react/Repair16Icon.tsx
+// icons/react/Person16Icon.tsx
 var import_jsx_runtime110 = require("react/jsx-runtime");
 
-// icons/react/Resize16Icon.tsx
+// icons/react/PersonGroup16Icon.tsx
 var import_jsx_runtime111 = require("react/jsx-runtime");
 
-// icons/react/Router16Icon.tsx
+// icons/react/Profile16Icon.tsx
 var import_jsx_runtime112 = require("react/jsx-runtime");
 
-// icons/react/Sort16Icon.tsx
+// icons/react/Refresh16Icon.tsx
 var import_jsx_runtime113 = require("react/jsx-runtime");
 
-// icons/react/Search16Icon.tsx
+// icons/react/Ram16Icon.tsx
 var import_jsx_runtime114 = require("react/jsx-runtime");
 
-// icons/react/Security16Icon.tsx
+// icons/react/Repair16Icon.tsx
 var import_jsx_runtime115 = require("react/jsx-runtime");
 
-// icons/react/Servers16Icon.tsx
+// icons/react/Resize16Icon.tsx
 var import_jsx_runtime116 = require("react/jsx-runtime");
 
-// icons/react/Settings16Icon.tsx
+// icons/react/Router16Icon.tsx
 var import_jsx_runtime117 = require("react/jsx-runtime");
 
-// icons/react/Show16Icon.tsx
+// icons/react/Sort16Icon.tsx
 var import_jsx_runtime118 = require("react/jsx-runtime");
 
-// icons/react/SignOut16Icon.tsx
+// icons/react/Search16Icon.tsx
 var import_jsx_runtime119 = require("react/jsx-runtime");
 
-// icons/react/Snapshots16Icon.tsx
+// icons/react/Security16Icon.tsx
 var import_jsx_runtime120 = require("react/jsx-runtime");
 
-// icons/react/SoftwareUpdate16Icon.tsx
+// icons/react/Servers16Icon.tsx
 var import_jsx_runtime121 = require("react/jsx-runtime");
 
-// icons/react/Ssd16Icon.tsx
+// icons/react/Settings16Icon.tsx
 var import_jsx_runtime122 = require("react/jsx-runtime");
 
-// icons/react/Storage16Icon.tsx
+// icons/react/Show16Icon.tsx
 var import_jsx_runtime123 = require("react/jsx-runtime");
 
-// icons/react/Subnet16Icon.tsx
+// icons/react/SignOut16Icon.tsx
 var import_jsx_runtime124 = require("react/jsx-runtime");
 
-// icons/react/Tags16Icon.tsx
+// icons/react/Snapshots16Icon.tsx
 var import_jsx_runtime125 = require("react/jsx-runtime");
 
-// icons/react/Terminal16Icon.tsx
+// icons/react/SoftwareUpdate16Icon.tsx
 var import_jsx_runtime126 = require("react/jsx-runtime");
 
-// icons/react/Time16Icon.tsx
+// icons/react/Ssd16Icon.tsx
 var import_jsx_runtime127 = require("react/jsx-runtime");
 
-// icons/react/Transmit16Icon.tsx
+// icons/react/Storage16Icon.tsx
 var import_jsx_runtime128 = require("react/jsx-runtime");
 
-// icons/react/Question16Icon.tsx
+// icons/react/Subnet16Icon.tsx
 var import_jsx_runtime129 = require("react/jsx-runtime");
 
-// icons/react/Add12Icon.tsx
+// icons/react/Tags16Icon.tsx
 var import_jsx_runtime130 = require("react/jsx-runtime");
 
-// icons/react/AddRoundel12Icon.tsx
+// icons/react/Terminal16Icon.tsx
 var import_jsx_runtime131 = require("react/jsx-runtime");
 
-// icons/react/Checkmark12Icon.tsx
+// icons/react/Time16Icon.tsx
 var import_jsx_runtime132 = require("react/jsx-runtime");
+
+// icons/react/Transmit16Icon.tsx
+var import_jsx_runtime133 = require("react/jsx-runtime");
+
+// icons/react/Question16Icon.tsx
+var import_jsx_runtime134 = require("react/jsx-runtime");
+
+// icons/react/Add12Icon.tsx
+var import_jsx_runtime135 = require("react/jsx-runtime");
+
+// icons/react/AddRoundel12Icon.tsx
+var import_jsx_runtime136 = require("react/jsx-runtime");
+
+// icons/react/Checkmark12Icon.tsx
+var import_jsx_runtime137 = require("react/jsx-runtime");
 var Checkmark12Icon = ({
   title,
   titleId,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
   "svg",
   {
     width: 12,
@@ -6985,8 +7177,8 @@ var Checkmark12Icon = ({
     "aria-labelledby": titleId,
     ...props,
     children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+      title ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -7001,90 +7193,90 @@ var Checkmark12Icon = ({
 var Checkmark12Icon_default = Checkmark12Icon;
 
 // icons/react/Close12Icon.tsx
-var import_jsx_runtime133 = require("react/jsx-runtime");
+var import_jsx_runtime138 = require("react/jsx-runtime");
 
 // icons/react/DirectionRightIcon.tsx
-var import_jsx_runtime134 = require("react/jsx-runtime");
+var import_jsx_runtime139 = require("react/jsx-runtime");
 
 // icons/react/DirectionUpIcon.tsx
-var import_jsx_runtime135 = require("react/jsx-runtime");
+var import_jsx_runtime140 = require("react/jsx-runtime");
 
 // icons/react/DirectionDownIcon.tsx
-var import_jsx_runtime136 = require("react/jsx-runtime");
+var import_jsx_runtime141 = require("react/jsx-runtime");
 
 // icons/react/DirectionLeftIcon.tsx
-var import_jsx_runtime137 = require("react/jsx-runtime");
+var import_jsx_runtime142 = require("react/jsx-runtime");
 
 // icons/react/Clipboard12Icon.tsx
-var import_jsx_runtime138 = require("react/jsx-runtime");
+var import_jsx_runtime143 = require("react/jsx-runtime");
 
 // icons/react/Copy12Icon.tsx
-var import_jsx_runtime139 = require("react/jsx-runtime");
+var import_jsx_runtime144 = require("react/jsx-runtime");
 
 // icons/react/Disabled12Icon.tsx
-var import_jsx_runtime140 = require("react/jsx-runtime");
+var import_jsx_runtime145 = require("react/jsx-runtime");
 
 // icons/react/Error12Icon.tsx
-var import_jsx_runtime141 = require("react/jsx-runtime");
+var import_jsx_runtime146 = require("react/jsx-runtime");
 
 // icons/react/Info12Icon.tsx
-var import_jsx_runtime142 = require("react/jsx-runtime");
+var import_jsx_runtime147 = require("react/jsx-runtime");
 
 // icons/react/Filter12Icon.tsx
-var import_jsx_runtime143 = require("react/jsx-runtime");
+var import_jsx_runtime148 = require("react/jsx-runtime");
 
 // icons/react/Key12Icon.tsx
-var import_jsx_runtime144 = require("react/jsx-runtime");
+var import_jsx_runtime149 = require("react/jsx-runtime");
 
 // icons/react/Loader12Icon.tsx
-var import_jsx_runtime145 = require("react/jsx-runtime");
+var import_jsx_runtime150 = require("react/jsx-runtime");
 
 // icons/react/MenuOpen12Icon.tsx
-var import_jsx_runtime146 = require("react/jsx-runtime");
+var import_jsx_runtime151 = require("react/jsx-runtime");
 
 // icons/react/MenuClose12Icon.tsx
-var import_jsx_runtime147 = require("react/jsx-runtime");
+var import_jsx_runtime152 = require("react/jsx-runtime");
 
 // icons/react/More12Icon.tsx
-var import_jsx_runtime148 = require("react/jsx-runtime");
+var import_jsx_runtime153 = require("react/jsx-runtime");
 
 // icons/react/NextArrow12Icon.tsx
-var import_jsx_runtime149 = require("react/jsx-runtime");
+var import_jsx_runtime154 = require("react/jsx-runtime");
 
 // icons/react/PrevArrow12Icon.tsx
-var import_jsx_runtime150 = require("react/jsx-runtime");
+var import_jsx_runtime155 = require("react/jsx-runtime");
 
 // icons/react/OpenLink12Icon.tsx
-var import_jsx_runtime151 = require("react/jsx-runtime");
+var import_jsx_runtime156 = require("react/jsx-runtime");
 
 // icons/react/Repair12Icon.tsx
-var import_jsx_runtime152 = require("react/jsx-runtime");
+var import_jsx_runtime157 = require("react/jsx-runtime");
 
 // icons/react/Security12Icon.tsx
-var import_jsx_runtime153 = require("react/jsx-runtime");
+var import_jsx_runtime158 = require("react/jsx-runtime");
 
 // icons/react/Success12Icon.tsx
-var import_jsx_runtime154 = require("react/jsx-runtime");
+var import_jsx_runtime159 = require("react/jsx-runtime");
 
 // icons/react/Unauthorized12Icon.tsx
-var import_jsx_runtime155 = require("react/jsx-runtime");
+var import_jsx_runtime160 = require("react/jsx-runtime");
 
 // icons/react/Warning12Icon.tsx
-var import_jsx_runtime156 = require("react/jsx-runtime");
+var import_jsx_runtime161 = require("react/jsx-runtime");
 
 // icons/react/Question12Icon.tsx
-var import_jsx_runtime157 = require("react/jsx-runtime");
+var import_jsx_runtime162 = require("react/jsx-runtime");
 
 // icons/react/Hide12Icon.tsx
-var import_jsx_runtime158 = require("react/jsx-runtime");
+var import_jsx_runtime163 = require("react/jsx-runtime");
 
 // icons/react/SelectArrows6Icon.tsx
-var import_jsx_runtime159 = require("react/jsx-runtime");
+var import_jsx_runtime164 = require("react/jsx-runtime");
 var SelectArrows6Icon = ({
   title,
   titleId,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)(
   "svg",
   {
     width: 6,
@@ -7095,8 +7287,8 @@ var SelectArrows6Icon = ({
     "aria-labelledby": titleId,
     ...props,
     children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
+      title ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -7111,257 +7303,12 @@ var SelectArrows6Icon = ({
 var SelectArrows6Icon_default = SelectArrows6Icon;
 
 // icons/react/Close8Icon.tsx
-var import_jsx_runtime160 = require("react/jsx-runtime");
-
-// components/src/asciidoc/Section.tsx
-var import_react_asciidoc2 = require("@oxide/react-asciidoc");
-var import_classnames = __toESM(require_classnames());
-var import_react2 = require("react");
-var import_jsx_runtime161 = require("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;
-  title = /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(import_jsx_runtime161.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { className: "anchor", id: node.id || "", "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("a", { className: "section-link", href: `#${node.id}`, children: [
-      html_react_parser_default(stripAnchors(node.title)),
-      /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(Link16Icon_default, { className: "section-link-icon" })
-    ] })
-  ] });
-  if (level === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(import_jsx_runtime161.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("h1", { className: (0, import_classnames.default)("sect0", node.role), "data-sectnum": sectNum, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(import_react_asciidoc2.Content, { blocks: node.blocks })
-    ] });
-  } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { className: (0, import_classnames.default)(`sect${level}`, node.role), children: [
-      (0, import_react2.createElement)(`h${level + 1}`, { "data-sectnum": sectNum }, title),
-      /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { className: "sectionbody", children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(import_react_asciidoc2.Content, { blocks: node.blocks }) })
-    ] });
-  }
-};
-var Section_default = Section;
-
-// components/src/asciidoc/Table.tsx
-var import_react_asciidoc3 = require("@oxide/react-asciidoc");
-var import_jsx_runtime162 = require("react/jsx-runtime");
-var Table = ({ node }) => /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { className: "table-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(import_react_asciidoc3.Table, { node }) });
-var Table_default = Table;
-
-// components/src/asciidoc/index.ts
-var AsciiDocBlocks = {
-  Admonition: Admonition_default,
-  Table: Table_default,
-  Section: Section_default
-};
-
-// components/src/ui/badge/Badge.tsx
-var import_classnames2 = __toESM(require_classnames());
-var import_jsx_runtime163 = require("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)]`,
-    destructive: `ring-1 ring-inset bg-destructive-secondary text-destructive ring-[rgba(var(--base-red-800-rgb),0.15)]`,
-    notice: `ring-1 ring-inset bg-notice-secondary text-notice ring-[rgba(var(--base-yellow-800-rgb),0.15)]`,
-    neutral: `ring-1 ring-inset bg-secondary text-secondary ring-[rgba(var(--base-neutral-700-rgb),0.15)]`,
-    purple: `ring-1 ring-inset bg-[var(--base-purple-200)] text-[var(--base-purple-700)] ring-[rgba(var(--base-purple-800-rgb),0.15)]`,
-    blue: `ring-1 ring-inset bg-info-secondary text-info ring-[rgba(var(--base-blue-800-rgb),0.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-[var(--base-purple-700)] text-inverse",
-    blue: "bg-info text-inverse"
-  }
-};
-var Badge = ({
-  className,
-  children,
-  color = "default",
-  variant = "default"
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
-    "span",
-    {
-      className: (0, import_classnames2.default)(
-        "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__ */ (0, import_jsx_runtime163.jsx)("span", { children })
-    }
-  );
-};
-
-// components/src/ui/button/Button.tsx
-var import_classnames3 = __toESM(require_classnames());
-var import_react3 = require("react");
-var import_jsx_runtime164 = require("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 (0, import_classnames3.default)(
-    "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 = (0, import_react3.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__ */ (0, import_jsx_runtime164.jsxs)(
-      "button",
-      {
-        className: (0, import_classnames3.default)(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__ */ (0, import_jsx_runtime164.jsx)(Spinner, { className: "absolute", variant }),
-          /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("span", { className: (0, import_classnames3.default)("flex items-center", innerClassName, { invisible: loading }), children })
-        ]
-      }
-    );
-  }
-);
-
-// components/src/ui/spinner/Spinner.tsx
-var import_classnames4 = __toESM(require_classnames());
-var import_react4 = require("react");
 var import_jsx_runtime165 = require("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__ */ (0, import_jsx_runtime165.jsxs)(
-    "svg",
-    {
-      width: frameSize,
-      height: frameSize,
-      viewBox: `0 0 ${frameSize + " " + frameSize}`,
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      "aria-labelledby": "Spinner",
-      className: (0, import_classnames4.default)("spinner", `spinner-${variant}`, `spinner-${size2}`, className),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
-          "circle",
-          {
-            fill: "none",
-            className: "bg",
-            strokeWidth,
-            strokeLinecap: "round",
-            cx: center,
-            cy: center,
-            r: radius,
-            strokeOpacity: 0.2
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
-          "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] = (0, import_react4.useState)(isLoading);
-  const hideTimeout = (0, import_react4.useRef)(null);
-  const loadingStartTime = (0, import_react4.useRef)(0);
-  (0, import_react4.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__ */ (0, import_jsx_runtime165.jsx)(Spinner, {}) : /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(import_jsx_runtime165.Fragment, { children });
-};
 
-// components/src/ui/tabs/Tabs.tsx
-var import_react_tabs = require("@radix-ui/react-tabs");
+// components/src/ui/checkbox/Checkbox.tsx
 var import_classnames5 = __toESM(require_classnames());
 var import_jsx_runtime166 = require("react/jsx-runtime");
-var Tabs = {
-  Root: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(import_react_tabs.Root, { ...props, className: (0, import_classnames5.default)("ox-tabs", className) }),
-  Trigger: ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(import_react_tabs.Trigger, { ...props, className: (0, import_classnames5.default)("ox-tab", className), children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("div", { children }) }),
-  List: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(import_react_tabs.List, { ...props, className: (0, import_classnames5.default)("ox-tabs-list", className) }),
-  Content: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(import_react_tabs.Content, { ...props, className: (0, import_classnames5.default)("ox-tabs-panel", className) })
-};
-
-// components/src/ui/checkbox/Checkbox.tsx
-var import_classnames6 = __toESM(require_classnames());
-var import_jsx_runtime167 = require("react/jsx-runtime");
-var Check = () => /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(Checkmark12Icon_default, { className: "pointer-events-none absolute left-0.5 top-0.5 h-3 w-3 fill-current text-accent" });
+var Check = () => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(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
@@ -7375,48 +7322,48 @@ var Checkbox = ({
   children,
   className,
   ...inputProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("label", { className: "inline-flex items-center", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("span", { className: "relative h-4 w-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)("label", { className: "inline-flex items-center", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)("span", { className: "relative h-4 w-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
       "input",
       {
-        className: (0, import_classnames6.default)(inputStyle, className),
+        className: (0, import_classnames5.default)(inputStyle, className),
         type: "checkbox",
         ref: (el) => el && (el.indeterminate = !!indeterminate),
         ...inputProps
       }
     ),
-    inputProps.checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(Check, {}),
-    indeterminate && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(Indeterminate, {})
+    inputProps.checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(Check, {}),
+    indeterminate && /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(Indeterminate, {})
   ] }),
-  children && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "ml-2.5 text-sans-md text-secondary", children })
+  children && /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { className: "ml-2.5 text-sans-md text-secondary", children })
 ] });
 
 // components/src/ui/empty-message/EmptyMessage.tsx
-var import_classnames7 = __toESM(require_classnames());
+var import_classnames6 = __toESM(require_classnames());
 var import_react_router_dom = require("react-router-dom");
-var import_jsx_runtime168 = require("react/jsx-runtime");
+var import_jsx_runtime167 = require("react/jsx-runtime");
 var buttonStyleProps = { variant: "ghost", size: "sm", color: "secondary" };
 function EmptyMessage(props) {
   let button = null;
   if (props.buttonText && "buttonTo" in props) {
-    button = /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(import_react_router_dom.Link, { className: (0, import_classnames7.default)("mt-6", buttonStyle(buttonStyleProps)), to: props.buttonTo, children: props.buttonText });
+    button = /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_react_router_dom.Link, { className: (0, import_classnames6.default)("mt-6", buttonStyle(buttonStyleProps)), to: props.buttonTo, children: props.buttonText });
   } else if (props.buttonText && "onClick" in props) {
-    button = /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(Button, { ...buttonStyleProps, className: "mt-6", onClick: props.onClick, children: props.buttonText });
+    button = /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(Button, { ...buttonStyleProps, className: "mt-6", onClick: props.onClick, children: props.buttonText });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)("div", { className: "m-4 flex max-w-[14rem] flex-col items-center text-center", children: [
-    props.icon && /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("div", { className: "mb-4 rounded p-1 leading-[0] text-accent bg-accent-secondary", children: props.icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("h3", { className: "text-sans-semi-lg", children: props.title }),
-    props.body && /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("p", { className: "mt-1 text-sans-md text-secondary", children: props.body }),
+  return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { className: "m-4 flex max-w-[14rem] flex-col items-center text-center", children: [
+    props.icon && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { className: "mb-4 rounded p-1 leading-[0] text-accent bg-accent-secondary", children: props.icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("h3", { className: "text-sans-semi-lg", children: props.title }),
+    props.body && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("p", { className: "mt-1 text-sans-md text-secondary", children: props.body }),
     button
   ] });
 }
 
 // components/src/ui/listbox/Listbox.tsx
-var import_react7 = require("@floating-ui/react");
-var import_react8 = require("@headlessui/react");
-var import_classnames8 = __toESM(require_classnames());
-var import_jsx_runtime169 = require("react/jsx-runtime");
+var import_react5 = require("@floating-ui/react");
+var import_react6 = require("@headlessui/react");
+var import_classnames7 = __toESM(require_classnames());
+var import_jsx_runtime168 = require("react/jsx-runtime");
 var Listbox = ({
   name,
   selected,
@@ -7429,11 +7376,11 @@ var Listbox = ({
   isLoading = false,
   ...props
 }) => {
-  const { refs, floatingStyles } = (0, import_react7.useFloating)({
+  const { refs, floatingStyles } = (0, import_react5.useFloating)({
     middleware: [
-      (0, import_react7.offset)(12),
-      (0, import_react7.flip)(),
-      (0, import_react7.size)({
+      (0, import_react5.offset)(12),
+      (0, import_react5.flip)(),
+      (0, import_react5.size)({
         apply({ rects, elements }) {
           Object.assign(elements.floating.style, {
             width: `${rects.reference.width}px`
@@ -7445,19 +7392,19 @@ var Listbox = ({
   const selectedItem = selected && items.find((i) => i.value === selected);
   const noItems = !isLoading && items.length === 0;
   const isDisabled = disabled || noItems;
-  return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("div", { className: (0, import_classnames8.default)("relative", className), children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
-    import_react8.Listbox,
+  return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("div", { className: (0, import_classnames7.default)("relative", className), children: /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
+    import_react6.Listbox,
     {
       value: selected,
       onChange: (val) => val !== null && onChange(val),
       disabled: isDisabled || isLoading,
-      children: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(import_jsx_runtime169.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
-          import_react8.Listbox.Button,
+      children: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)(import_jsx_runtime168.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)(
+          import_react6.Listbox.Button,
           {
             name,
             ref: refs.setReference,
-            className: (0, import_classnames8.default)(
+            className: (0, import_classnames7.default)(
               `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",
@@ -7468,37 +7415,37 @@ var Listbox = ({
             ),
             ...props,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("div", { className: "w-full px-3 text-left", children: selectedItem ? (
+              /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("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__ */ (0, import_jsx_runtime169.jsx)("span", { className: "text-quaternary", children: noItems ? "No items" : placeholder }) }),
-              !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(SpinnerLoader, { isLoading }),
-              /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { className: "text-quaternary", children: noItems ? "No items" : placeholder }) }),
+              !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(SpinnerLoader, { isLoading }),
+              /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
                 "div",
                 {
                   className: "ml-3 flex h-[calc(100%-12px)] items-center border-l px-3 border-secondary",
                   "aria-hidden": true,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(SelectArrows6Icon_default, { className: "h-[14px] w-2 text-tertiary" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(SelectArrows6Icon_default, { className: "h-[14px] w-2 text-tertiary" })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_react7.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
-          import_react8.Listbox.Options,
+        /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(import_react5.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
+          import_react6.Listbox.Options,
           {
             ref: refs.setFloating,
             style: floatingStyles,
             className: "ox-menu pointer-events-auto z-50 overflow-y-auto !outline-none",
-            children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
-              import_react8.Listbox.Option,
+            children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
+              import_react6.Listbox.Option,
               {
                 value: item.value,
                 className: "relative border-b border-secondary last:border-0",
-                children: ({ active, selected: selected2 }) => /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+                children: ({ active, selected: selected2 }) => /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
                   "div",
                   {
-                    className: (0, import_classnames8.default)(
+                    className: (0, import_classnames7.default)(
                       "ox-menu-item text-secondary",
                       selected2 && "is-selected",
                       active && "is-highlighted"