@scalar/components 0.11.5 → 0.12.0

package/dist/components/ScalarDropdown/ScalarDropdownItem.vue.js

@@ -1,20 +1,20 @@
 import { defineComponent as s, openBlock as i, createBlock as l, unref as t, withCtx as d, createElementVNode as p, normalizeClass as m, renderSlot as c } from "vue";
 import { MenuItem as b } from "@headlessui/vue";
 import { cva as u, cx as f } from "../../cva.js";
-const g = /* @__PURE__ */ s({
+const w = /* @__PURE__ */ s({
   __name: "ScalarDropdownItem",
   props: {
     disabled: { type: Boolean }
   },
   emits: ["click"],
   setup(x) {
-    const o = u({
+    const r = u({
       base: [
         // Layout
         "min-w-0 items-center gap-3 rounded px-2.5 py-1.5 text-left",
         "first-of-type:mt-0.75 last-of-type:mb-0.75",
         // Text / background style
-        "truncate bg-transparent text-xs text-c-1",
+        "truncate text-xs text-c-1",
         // Interaction
         "cursor-pointer hover:bg-b-2 hover:text-c-1"
       ],
@@ -23,12 +23,12 @@ const g = /* @__PURE__ */ s({
         active: { true: "bg-b-2 text-c-1" }
       }
     });
-    return (e, r) => (i(), l(t(b), { disabled: e.disabled }, {
+    return (e, o) => (i(), l(t(b), { disabled: e.disabled }, {
       default: d(({ active: a }) => [
         p("button", {
-          class: m(["item", t(f)("scalar-dropdown-item", t(o)({ active: a, disabled: e.disabled }))]),
+          class: m(["item", t(f)("scalar-dropdown-item", t(r)({ active: a, disabled: e.disabled }))]),
           type: "button",
-          onClick: r[0] || (r[0] = (n) => e.$emit("click", n))
+          onClick: o[0] || (o[0] = (n) => e.$emit("click", n))
         }, [
           c(e.$slots, "default")
         ], 2)
@@ -38,5 +38,5 @@ const g = /* @__PURE__ */ s({
   }
 });
 export {
-  g as default
+  w as default
 };

package/dist/components/ScalarFloating/ScalarFloating.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as w, ref as s, computed as t, openBlock as d, createElementBlock as z, Fragment as b, createElementVNode as p, normalizeClass as k, renderSlot as m, createBlock as B, Teleport as R, normalizeStyle as S, unref as f, createCommentVNode as C } from "vue";
-import { getSideAxis as c } from "@floating-ui/utils";
-import { useFloating as E, autoUpdate as F, offset as _, flip as $, shift as A } from "@floating-ui/vue";
+import { defineComponent as w, ref as d, computed as t, openBlock as p, createElementBlock as z, Fragment as b, createElementVNode as r, normalizeClass as k, renderSlot as m, createBlock as B, Teleport as R, normalizeStyle as S, unref as c, createCommentVNode as _ } from "vue";
+import { getSideAxis as f } from "@floating-ui/utils";
+import { useFloating as C, autoUpdate as E, offset as F, flip as $, shift as A } from "@floating-ui/vue";
 import { useResizeWithTarget as N } from "./useResizeWithTarget.js";
-const D = /* @__PURE__ */ w({
+const O = { class: "scalar-app" }, H = /* @__PURE__ */ w({
   inheritAttrs: !1,
   __name: "ScalarFloating",
   props: {
@@ -13,56 +13,58 @@ const D = /* @__PURE__ */ w({
     teleport: { type: Boolean }
   },
   setup(u) {
-    const o = u, r = s(null), l = s(null), n = t(
+    const o = u, n = d(null), a = d(null), i = t(
       () => {
-        var e, a;
-        return (((a = (e = l.value) == null ? void 0 : e.children) == null ? void 0 : a[0]) || l.value) ?? void 0;
+        var e, l;
+        return (((l = (e = a.value) == null ? void 0 : e.children) == null ? void 0 : l[0]) || a.value) ?? void 0;
       }
-    ), i = N(n, {
+    ), s = N(i, {
       enabled: t(() => o.resize)
     }), g = t(
-      () => c(o.placement || "bottom") === "y" ? i.width.value : void 0
+      () => f(o.placement || "bottom") === "y" ? s.width.value : void 0
     ), h = t(
-      () => c(o.placement || "bottom") === "x" ? i.height.value : void 0
-    ), { floatingStyles: v, middlewareData: y } = E(n, r, {
+      () => f(o.placement || "bottom") === "x" ? s.height.value : void 0
+    ), { floatingStyles: v, middlewareData: y } = C(i, n, {
       placement: t(() => o.placement),
-      whileElementsMounted: F,
+      whileElementsMounted: E,
       middleware: t(() => [
-        _(5),
+        F(5),
         $(),
         A(),
         ...o.middleware ?? []
       ])
     });
-    return (e, a) => (d(), z(b, null, [
-      p("div", {
+    return (e, l) => (p(), z(b, null, [
+      r("div", {
         ref_key: "wrapperRef",
-        ref: l,
+        ref: a,
         class: k({ contents: !!e.$slots.default })
       }, [
         m(e.$slots, "default")
       ], 2),
-      e.isOpen ? (d(), B(R, {
+      e.isOpen ? (p(), B(R, {
         key: 0,
         disabled: !e.teleport,
         to: "body"
       }, [
-        p("div", {
-          ref_key: "floatingRef",
-          ref: r,
-          class: "relative z-overlay",
-          style: S(f(v))
-        }, [
-          m(e.$slots, "floating", {
-            data: f(y),
-            height: h.value,
-            width: g.value
-          })
-        ], 4)
-      ], 8, ["disabled"])) : C("", !0)
+        r("div", O, [
+          r("div", {
+            ref_key: "floatingRef",
+            ref: n,
+            class: "relative z-overlay",
+            style: S(c(v))
+          }, [
+            m(e.$slots, "floating", {
+              data: c(y),
+              height: h.value,
+              width: g.value
+            })
+          ], 4)
+        ])
+      ], 8, ["disabled"])) : _("", !0)
     ], 64));
   }
 });
 export {
-  D as default
+  H as default
 };

package/dist/components/ScalarIcon/ScalarIcon.vue.js

@@ -1,14 +1,14 @@
-import { defineComponent as t, unref as e, openBlock as o, createBlock as a, resolveDynamicComponent as m, normalizeClass as p, createElementBlock as z } from "vue";
-import { cva as f, cx as k } from "../../cva.js";
-import { getIcon as n } from "./icons/index.js";
-const u = ["src"], g = /* @__PURE__ */ t({
+import { defineComponent as c, shallowRef as u, ref as m, watch as z, openBlock as i, createElementBlock as f, normalizeClass as n, unref as o, createBlock as p, resolveDynamicComponent as k } from "vue";
+import { cva as v, cx as d } from "../../cva.js";
+import { getIcon as x } from "./icons/index.js";
+const w = /* @__PURE__ */ c({
   __name: "ScalarIcon",
   props: {
     icon: {},
     size: {}
   },
-  setup(i) {
-    const r = i, c = f({
+  setup(r) {
+    const t = r, l = v({
       variants: {
         size: {
           xs: "size-3 stroke-[1.4]",
@@ -24,16 +24,22 @@ const u = ["src"], g = /* @__PURE__ */ t({
       defaultVariants: {
         size: "full"
       }
-    }), l = n(r.icon);
-    return (s, d) => e(l) ? (o(), a(m(e(n)(s.icon)), {
+    }), a = u(null), s = m(!0);
+    return z(
+      () => t.icon,
+      async (e) => {
+        s.value = !0, a.value = await x(e), s.value = !1;
+      },
+      { immediate: !0 }
+    ), (e, y) => s.value ? (i(), f("div", {
       key: 0,
-      class: p(e(k)("scalar-icon", e(c)({ size: s.size })))
-    }, null, 8, ["class"])) : (o(), z("img", {
+      class: n(o(l)({ size: e.size ? e.size : "xs" }))
+    }, null, 2)) : (i(), p(k(a.value), {
       key: 1,
-      src: s.icon
-    }, null, 8, u));
+      class: n(o(d)("scalar-icon", o(l)({ size: e.size })))
+    }, null, 8, ["class"]));
   }
 });
 export {
-  g as default
+  w as default
 };

package/dist/components/ScalarIcon/icons/index.js

@@ -1,8 +1,9 @@
 import { defineAsyncComponent as m } from "vue";
-const o = /* @__PURE__ */ Object.assign({ "./Add.svg": () => import("./Add.svg.js"), "./ArrowLeft.svg": () => import("./ArrowLeft.svg.js"), "./ArrowRight.svg": () => import("./ArrowRight.svg.js"), "./Background.svg": () => import("./Background.svg.js"), "./Brackets.svg": () => import("./Brackets.svg.js"), "./Branch.svg": () => import("./Branch.svg.js"), "./CallToAction.svg": () => import("./CallToAction.svg.js"), "./Checkmark.svg": () => import("./Checkmark.svg.js"), "./ChevronDown.svg": () => import("./ChevronDown.svg.js"), "./ChevronLeft.svg": () => import("./ChevronLeft.svg.js"), "./ChevronRight.svg": () => import("./ChevronRight.svg.js"), "./ChevronUp.svg": () => import("./ChevronUp.svg.js"), "./Clipboard.svg": () => import("./Clipboard.svg.js"), "./Close.svg": () => import("./Close.svg.js"), "./CodeFolder.svg": () => import("./CodeFolder.svg.js"), "./Cookie.svg": () => import("./Cookie.svg.js"), "./DarkMode.svg": () => import("./DarkMode.svg.js"), "./Delete.svg": () => import("./Delete.svg.js"), "./Discord.svg": () => import("./Discord.svg.js"), "./DocsPage.svg": () => import("./DocsPage.svg.js"), "./Duplicate.svg": () => import("./Duplicate.svg.js"), "./Edit.svg": () => import("./Edit.svg.js"), "./Ellipses.svg": () => import("./Ellipses.svg.js"), "./Error.svg": () => import("./Error.svg.js"), "./ExternalLink.svg": () => import("./ExternalLink.svg.js"), "./FilterList.svg": () => import("./FilterList.svg.js"), "./Folder.svg": () => import("./Folder.svg.js"), "./GitHub.svg": () => import("./GitHub.svg.js"), "./Hide.svg": () => import("./Hide.svg.js"), "./History.svg": () => import("./History.svg.js"), "./Info.svg": () => import("./Info.svg.js"), "./JsonObject.svg": () => import("./JsonObject.svg.js"), "./Key.svg": () => import("./Key.svg.js"), "./Leave.svg": () => import("./Leave.svg.js"), "./LightDarkModeToggle.svg": () => import("./LightDarkModeToggle.svg.js"), "./LightMode.svg": () => import("./LightMode.svg.js"), "./Link.svg": () => import("./Link.svg.js"), "./Lock.svg": () => import("./Lock.svg.js"), "./Logo.svg": () => import("./Logo.svg.js"), "./LogoAPI.svg": () => import("./LogoAPI.svg.js"), "./LogoClient.svg": () => import("./LogoClient.svg.js"), "./LogoMarket.svg": () => import("./LogoMarket.svg.js"), "./LogoSwagger.svg": () => import("./LogoSwagger.svg.js"), "./Magic.svg": () => import("./Magic.svg.js"), "./Menu.svg": () => import("./Menu.svg.js"), "./Page.svg": () => import("./Page.svg.js"), "./PaperAirplane.svg": () => import("./PaperAirplane.svg.js"), "./Payment.svg": () => import("./Payment.svg.js"), "./Play.svg": () => import("./Play.svg.js"), "./Refresh.svg": () => import("./Refresh.svg.js"), "./Response.svg": () => import("./Response.svg.js"), "./Search.svg": () => import("./Search.svg.js"), "./Show.svg": () => import("./Show.svg.js"), "./SideBarClosed.svg": () => import("./SideBarClosed.svg.js"), "./SideBarOpen.svg": () => import("./SideBarOpen.svg.js"), "./Sort.svg": () => import("./Sort.svg.js"), "./Terminal.svg": () => import("./Terminal.svg.js"), "./ThumbsDown.svg": () => import("./ThumbsDown.svg.js"), "./ThumbsUp.svg": () => import("./ThumbsUp.svg.js"), "./Trash.svg": () => import("./Trash.svg.js"), "./Unlock.svg": () => import("./Unlock.svg.js"), "./Upload.svg": () => import("./Upload.svg.js"), "./User.svg": () => import("./User.svg.js"), "./programming-framework-angular.svg": () => import("./programming-framework-angular.svg.js"), "./programming-framework-astro.svg": () => import("./programming-framework-astro.svg.js"), "./programming-framework-laravel.svg": () => import("./programming-framework-laravel.svg.js"), "./programming-framework-nextdotjs.svg": () => import("./programming-framework-nextdotjs.svg.js"), "./programming-framework-react.svg": () => import("./programming-framework-react.svg.js"), "./programming-framework-vuedotjs.svg": () => import("./programming-framework-vuedotjs.svg.js"), "./programming-language-c.svg": () => import("./programming-language-c.svg.js"), "./programming-language-clojure.svg": () => import("./programming-language-clojure.svg.js"), "./programming-language-csharp.svg": () => import("./programming-language-csharp.svg.js"), "./programming-language-css3.svg": () => import("./programming-language-css3.svg.js"), "./programming-language-go.svg": () => import("./programming-language-go.svg.js"), "./programming-language-html5.svg": () => import("./programming-language-html5.svg.js"), "./programming-language-http.svg": () => import("./programming-language-http.svg.js"), "./programming-language-java.svg": () => import("./programming-language-java.svg.js"), "./programming-language-javascript.svg": () => import("./programming-language-javascript.svg.js"), "./programming-language-json.svg": () => import("./programming-language-json.svg.js"), "./programming-language-kotlin.svg": () => import("./programming-language-kotlin.svg.js"), "./programming-language-node.svg": () => import("./programming-language-node.svg.js"), "./programming-language-objc.svg": () => import("./programming-language-objc.svg.js"), "./programming-language-ocaml.svg": () => import("./programming-language-ocaml.svg.js"), "./programming-language-php.svg": () => import("./programming-language-php.svg.js"), "./programming-language-powershell.svg": () => import("./programming-language-powershell.svg.js"), "./programming-language-python.svg": () => import("./programming-language-python.svg.js"), "./programming-language-r.svg": () => import("./programming-language-r.svg.js"), "./programming-language-ruby.svg": () => import("./programming-language-ruby.svg.js"), "./programming-language-scala.svg": () => import("./programming-language-scala.svg.js"), "./programming-language-shell.svg": () => import("./programming-language-shell.svg.js"), "./programming-language-swift.svg": () => import("./programming-language-swift.svg.js"), "./programming-language-typescript.svg": () => import("./programming-language-typescript.svg.js"), "./programming-script-code.svg": () => import("./programming-script-code.svg.js"), "./programming-tool-git.svg": () => import("./programming-tool-git.svg.js"), "./programming-tool-tailwindcss.svg": () => import("./programming-tool-tailwindcss.svg.js") }), p = (g) => {
+const o = /* @__PURE__ */ Object.assign({ "./Add.svg": () => import("./Add.svg.js"), "./ArrowLeft.svg": () => import("./ArrowLeft.svg.js"), "./ArrowRight.svg": () => import("./ArrowRight.svg.js"), "./Background.svg": () => import("./Background.svg.js"), "./Brackets.svg": () => import("./Brackets.svg.js"), "./Branch.svg": () => import("./Branch.svg.js"), "./CallToAction.svg": () => import("./CallToAction.svg.js"), "./Checkmark.svg": () => import("./Checkmark.svg.js"), "./ChevronDown.svg": () => import("./ChevronDown.svg.js"), "./ChevronLeft.svg": () => import("./ChevronLeft.svg.js"), "./ChevronRight.svg": () => import("./ChevronRight.svg.js"), "./ChevronUp.svg": () => import("./ChevronUp.svg.js"), "./Clipboard.svg": () => import("./Clipboard.svg.js"), "./Close.svg": () => import("./Close.svg.js"), "./CodeFolder.svg": () => import("./CodeFolder.svg.js"), "./Cookie.svg": () => import("./Cookie.svg.js"), "./DarkMode.svg": () => import("./DarkMode.svg.js"), "./Delete.svg": () => import("./Delete.svg.js"), "./Discord.svg": () => import("./Discord.svg.js"), "./DocsPage.svg": () => import("./DocsPage.svg.js"), "./Duplicate.svg": () => import("./Duplicate.svg.js"), "./Edit.svg": () => import("./Edit.svg.js"), "./Ellipses.svg": () => import("./Ellipses.svg.js"), "./Error.svg": () => import("./Error.svg.js"), "./ExternalLink.svg": () => import("./ExternalLink.svg.js"), "./FilterList.svg": () => import("./FilterList.svg.js"), "./Folder.svg": () => import("./Folder.svg.js"), "./GitHub.svg": () => import("./GitHub.svg.js"), "./Hide.svg": () => import("./Hide.svg.js"), "./History.svg": () => import("./History.svg.js"), "./Info.svg": () => import("./Info.svg.js"), "./JsonObject.svg": () => import("./JsonObject.svg.js"), "./Key.svg": () => import("./Key.svg.js"), "./Leave.svg": () => import("./Leave.svg.js"), "./LightDarkModeToggle.svg": () => import("./LightDarkModeToggle.svg.js"), "./LightMode.svg": () => import("./LightMode.svg.js"), "./Link.svg": () => import("./Link.svg.js"), "./Lock.svg": () => import("./Lock.svg.js"), "./Logo.svg": () => import("./Logo.svg.js"), "./LogoAPI.svg": () => import("./LogoAPI.svg.js"), "./LogoClient.svg": () => import("./LogoClient.svg.js"), "./LogoMarket.svg": () => import("./LogoMarket.svg.js"), "./LogoSwagger.svg": () => import("./LogoSwagger.svg.js"), "./Magic.svg": () => import("./Magic.svg.js"), "./Menu.svg": () => import("./Menu.svg.js"), "./Page.svg": () => import("./Page.svg.js"), "./PaperAirplane.svg": () => import("./PaperAirplane.svg.js"), "./Payment.svg": () => import("./Payment.svg.js"), "./Play.svg": () => import("./Play.svg.js"), "./Refresh.svg": () => import("./Refresh.svg.js"), "./Response.svg": () => import("./Response.svg.js"), "./Search.svg": () => import("./Search.svg.js"), "./Show.svg": () => import("./Show.svg.js"), "./SideBarClosed.svg": () => import("./SideBarClosed.svg.js"), "./SideBarOpen.svg": () => import("./SideBarOpen.svg.js"), "./Sort.svg": () => import("./Sort.svg.js"), "./Terminal.svg": () => import("./Terminal.svg.js"), "./ThumbsDown.svg": () => import("./ThumbsDown.svg.js"), "./ThumbsUp.svg": () => import("./ThumbsUp.svg.js"), "./Trash.svg": () => import("./Trash.svg.js"), "./Unlock.svg": () => import("./Unlock.svg.js"), "./Upload.svg": () => import("./Upload.svg.js"), "./User.svg": () => import("./User.svg.js"), "./programming-framework-angular.svg": () => import("./programming-framework-angular.svg.js"), "./programming-framework-astro.svg": () => import("./programming-framework-astro.svg.js"), "./programming-framework-laravel.svg": () => import("./programming-framework-laravel.svg.js"), "./programming-framework-nextdotjs.svg": () => import("./programming-framework-nextdotjs.svg.js"), "./programming-framework-react.svg": () => import("./programming-framework-react.svg.js"), "./programming-framework-vuedotjs.svg": () => import("./programming-framework-vuedotjs.svg.js"), "./programming-language-c.svg": () => import("./programming-language-c.svg.js"), "./programming-language-clojure.svg": () => import("./programming-language-clojure.svg.js"), "./programming-language-csharp.svg": () => import("./programming-language-csharp.svg.js"), "./programming-language-css3.svg": () => import("./programming-language-css3.svg.js"), "./programming-language-go.svg": () => import("./programming-language-go.svg.js"), "./programming-language-html5.svg": () => import("./programming-language-html5.svg.js"), "./programming-language-http.svg": () => import("./programming-language-http.svg.js"), "./programming-language-java.svg": () => import("./programming-language-java.svg.js"), "./programming-language-javascript.svg": () => import("./programming-language-javascript.svg.js"), "./programming-language-json.svg": () => import("./programming-language-json.svg.js"), "./programming-language-kotlin.svg": () => import("./programming-language-kotlin.svg.js"), "./programming-language-node.svg": () => import("./programming-language-node.svg.js"), "./programming-language-objc.svg": () => import("./programming-language-objc.svg.js"), "./programming-language-ocaml.svg": () => import("./programming-language-ocaml.svg.js"), "./programming-language-php.svg": () => import("./programming-language-php.svg.js"), "./programming-language-powershell.svg": () => import("./programming-language-powershell.svg.js"), "./programming-language-python.svg": () => import("./programming-language-python.svg.js"), "./programming-language-r.svg": () => import("./programming-language-r.svg.js"), "./programming-language-ruby.svg": () => import("./programming-language-ruby.svg.js"), "./programming-language-scala.svg": () => import("./programming-language-scala.svg.js"), "./programming-language-shell.svg": () => import("./programming-language-shell.svg.js"), "./programming-language-swift.svg": () => import("./programming-language-swift.svg.js"), "./programming-language-typescript.svg": () => import("./programming-language-typescript.svg.js"), "./programming-script-code.svg": () => import("./programming-script-code.svg.js"), "./programming-tool-git.svg": () => import("./programming-tool-git.svg.js"), "./programming-tool-tailwindcss.svg": () => import("./programming-tool-tailwindcss.svg.js") });
+async function p(g) {
   const r = `./${g}.svg`;
   return o[r] ? m(o[r]) : (console.warn(`Could not find icon: ${g}`), null);
-};
+}
 export {
   p as getIcon
 };

package/dist/components/ScalarListbox/ScalarListbox.vue.js

@@ -1,26 +1,27 @@
-import { defineComponent as b, openBlock as i, createBlock as d, unref as t, withCtx as s, createVNode as a, mergeProps as x, createElementBlock as v, Fragment as g, renderList as y, createElementVNode as o, normalizeClass as m, toDisplayString as _, renderSlot as h } from "vue";
-import { Listbox as V, ListboxOptions as k, ListboxOption as z, ListboxButton as B } from "@headlessui/vue";
+import { defineComponent as b, openBlock as i, createBlock as u, unref as t, normalizeClass as n, withCtx as l, createVNode as a, mergeProps as x, createElementBlock as v, Fragment as y, renderList as g, createElementVNode as o, toDisplayString as h, renderSlot as V } from "vue";
+import { Listbox as _, ListboxOptions as k, ListboxOption as z, ListboxButton as B } from "@headlessui/vue";
 import { cva as w, cx as L } from "../../cva.js";
 import O from "../ScalarFloating/ScalarFloating.vue.js";
 import $ from "../ScalarIcon/ScalarIcon.vue.js";
-const C = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, S = /* @__PURE__ */ o("div", { class: "absolute inset-0 -z-1 rounded bg-b-1 shadow-md brightness-lifted" }, null, -1), P = /* @__PURE__ */ b({
+const C = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, S = /* @__PURE__ */ o("div", { class: "absolute inset-0 -z-1 rounded bg-b-1 shadow-md brightness-lifted" }, null, -1), F = /* @__PURE__ */ b({
   inheritAttrs: !1,
   __name: "ScalarListbox",
   props: {
     options: {},
     modelValue: {},
+    fullWidth: { type: Boolean },
     placement: {},
     resize: { type: Boolean },
     isOpen: { type: Boolean },
     teleport: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(E) {
-    const u = w({
+  setup(j) {
+    const m = w({
       base: [
         // Layout
         "group",
-        "text-lef flex min-w-0 items-center gap-1.5 rounded px-2 py-1.5",
+        "flex min-w-0 items-center gap-1.5 rounded px-2 py-1.5 text-left",
         "first-of-type:mt-0.75 last-of-type:mb-0.75",
         // Text / background style
         "truncate bg-transparent text-c-1",
@@ -33,46 +34,46 @@ const C = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, S = /* @__
         disabled: { true: "pointer-events-none opacity-50" }
       }
     });
-    return (e, n) => (i(), d(t(V), {
+    return (e, d) => (i(), u(t(_), {
       as: "div",
-      class: "text-xs",
+      class: n([{ "w-full": e.fullWidth }, "text-xs"]),
       modelValue: e.modelValue,
-      "onUpdate:modelValue": n[0] || (n[0] = (r) => e.$emit("update:modelValue", r))
+      "onUpdate:modelValue": d[0] || (d[0] = (r) => e.$emit("update:modelValue", r))
     }, {
-      default: s(({ open: r }) => [
+      default: l(({ open: r }) => [
         a(t(O), {
           isOpen: r ?? e.isOpen,
           placement: e.placement ?? "bottom-start",
           resize: e.resize,
           teleport: e.teleport
         }, {
-          floating: s(({ width: c }) => [
+          floating: l(({ width: f }) => [
             a(t(k), x({
-              class: "relative flex w-40 flex-col p-0.75",
-              style: { width: c }
+              class: "relative flex w-40 flex-col rounded border p-0.75",
+              style: { width: f }
             }, e.$attrs), {
-              default: s(() => [
-                (i(!0), v(g, null, y(e.options, (l) => (i(), d(t(z), {
-                  key: l.id,
+              default: l(() => [
+                (i(!0), v(y, null, g(e.options, (s) => (i(), u(t(z), {
+                  key: s.id,
                   as: "template",
-                  disabled: l.disabled,
-                  value: l
+                  disabled: s.disabled,
+                  value: s
                 }, {
-                  default: s(({ active: f, selected: p }) => [
+                  default: l(({ active: c, selected: p }) => [
                     o("li", {
-                      class: m(
-                        t(L)(t(u)({ active: f, selected: p, disabled: l.disabled }))
+                      class: n(
+                        t(L)(t(m)({ active: c, selected: p, disabled: s.disabled }))
                       )
                     }, [
                       o("div", {
-                        class: m(["flex size-4 items-center justify-center rounded-full p-[3px] group-hover:shadow-border", p ? "bg-blue text-b-1" : "text-transparent"])
+                        class: n(["flex size-4 items-center justify-center rounded-full p-[3px] group-hover:shadow-border", p ? "bg-blue text-b-1" : "text-transparent"])
                       }, [
                         a(t($), {
                           class: "relative top-[0.5px] size-2.5 stroke-[1.75]",
                           icon: "Checkmark"
                         })
                       ], 2),
-                      o("span", C, _(l.label), 1)
+                      o("span", C, h(s.label), 1)
                     ], 2)
                   ]),
                   _: 2
@@ -82,10 +83,13 @@ const C = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, S = /* @__
               _: 2
             }, 1040, ["style"])
           ]),
-          default: s(() => [
-            a(t(B), { as: "template" }, {
-              default: s(() => [
-                h(e.$slots, "default")
+          default: l(() => [
+            a(t(B), {
+              as: "template",
+              class: "justify-start"
+            }, {
+              default: l(() => [
+                V(e.$slots, "default")
               ]),
               _: 3
             })
@@ -94,9 +98,9 @@ const C = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, S = /* @__
         }, 1032, ["isOpen", "placement", "resize", "teleport"])
       ]),
       _: 3
-    }, 8, ["modelValue"]));
+    }, 8, ["class", "modelValue"]));
   }
 });
 export {
-  P as default
+  F as default
 };

package/dist/components/ScalarModal/ScalarModal.vue.js

@@ -1,9 +1,9 @@
 import o from "./ScalarModal.vue2.js";
-import { useModal as e } from "./ScalarModal.vue2.js";
+import { useModal as s } from "./ScalarModal.vue2.js";
 /* empty css                 */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-03b82fd9"]]);
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-647be2f3"]]);
 export {
-  m as default,
-  e as useModal
+  f as default,
+  s as useModal
 };

package/dist/components/ScalarModal/ScalarModal.vue2.js

@@ -1,7 +1,7 @@
-import { defineComponent as c, openBlock as l, createBlock as s, unref as a, withCtx as o, createElementVNode as f, normalizeClass as t, createVNode as u, normalizeStyle as v, createTextVNode as h, toDisplayString as y, createCommentVNode as b, createElementBlock as g, renderSlot as i, reactive as x } from "vue";
+import { defineComponent as p, openBlock as l, createBlock as o, unref as a, withCtx as s, createElementVNode as f, normalizeClass as t, createVNode as u, normalizeStyle as v, createTextVNode as h, toDisplayString as y, createCommentVNode as b, createElementBlock as g, renderSlot as i, reactive as x } from "vue";
 import { Dialog as w, DialogPanel as z, DialogTitle as C, DialogDescription as k } from "@headlessui/vue";
 import { cva as d, cx as n } from "../../cva.js";
-const W = () => x({
+const j = () => x({
   open: !1,
   show() {
     this.open = !0;
@@ -9,7 +9,7 @@ const W = () => x({
   hide() {
     this.open = !1;
   }
-}), $ = /* @__PURE__ */ c({
+}), W = /* @__PURE__ */ p({
   __name: "ScalarModal",
   props: {
     state: {},
@@ -38,7 +38,7 @@ const W = () => x({
           search: "scalar-modal-search"
         }
       }
-    }), p = d({
+    }), c = d({
       base: [
         "scalar-modal-body",
         "relative max-h-[calc(100dvh-240px)] overflow-y-auto rounded-lg bg-b-1 px-6 pb-4 pt-6"
@@ -50,15 +50,15 @@ const W = () => x({
         }
       }
     });
-    return (e, r) => (l(), s(a(w), {
+    return (e, r) => (l(), o(a(w), {
       open: e.state.open,
       onClose: r[0] || (r[0] = (B) => e.state.hide())
     }, {
-      default: o(() => [
+      default: s(() => [
         f("div", {
           class: t(
             a(n)(
-              "scalar-modal-layout fixed left-0 top-0",
+              "scalar-modal-layout fixed left-0 top-0 flex items-center justify-center",
               "z-[1001] h-[100dvh] w-[100dvw]",
               "bg-backdrop opacity-0",
               e.size === "full" && "flex"
@@ -69,12 +69,12 @@ const W = () => x({
             class: t(a(m)({ size: e.size, variant: e.variant })),
             style: v({ maxWidth: e.maxWidth })
           }, {
-            default: o(() => [
-              e.title ? (l(), s(a(C), {
+            default: s(() => [
+              e.title ? (l(), o(a(C), {
                 key: 0,
                 class: t(["scalar-modal-header font-semiBold m-0 rounded-lg px-6 py-3 text-left text-xs text-c-1", { "pb-0 pt-6": e.variant === "history" }])
               }, {
-                default: o(() => [
+                default: s(() => [
                   h(y(e.title), 1)
                 ]),
                 _: 1
@@ -84,11 +84,11 @@ const W = () => x({
                 class: t(e.bodyClass)
               }, [
                 i(e.$slots, "default", {}, void 0, !0)
-              ], 2)) : (l(), s(a(k), {
+              ], 2)) : (l(), o(a(k), {
                 key: 2,
-                class: t(a(n)(e.bodyClass, a(p)({ variant: e.variant })))
+                class: t(a(n)(e.bodyClass, a(c)({ variant: e.variant })))
               }, {
-                default: o(() => [
+                default: s(() => [
                   i(e.$slots, "default", {}, void 0, !0)
                 ]),
                 _: 3
@@ -103,6 +103,6 @@ const W = () => x({
   }
 });
 export {
-  $ as default,
-  W as useModal
+  W as default,
+  j as useModal
 };

package/dist/components/ScalarSearchInput/ScalarSearchInput.vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as d, computed as m, useAttrs as i, openBlock as a, createElementBlock as p, mergeProps as f, unref as l, createElementVNode as n, renderSlot as g, createTextVNode as h, createBlock as s, createCommentVNode as V } from "vue";
-import { cx as b } from "../../cva.js";
+import { defineComponent as d, computed as m, useAttrs as i, openBlock as o, createElementBlock as p, mergeProps as f, unref as a, createElementVNode as n, renderSlot as g, createTextVNode as h, createBlock as s, createCommentVNode as b } from "vue";
+import { cx as V } from "../../cva.js";
 import S from "../ScalarLoading/ScalarLoading.vue.js";
 import k from "../ScalarIconButton/ScalarIconButton.vue.js";
 const v = { class: "sr-only" }, N = ["value"], E = /* @__PURE__ */ d({
@@ -11,16 +11,16 @@ const v = { class: "sr-only" }, N = ["value"], E = /* @__PURE__ */ d({
   },
   emits: ["update:modelValue"],
   setup(_, { emit: c }) {
-    const o = c;
+    const l = c;
     function u(e) {
-      o("update:modelValue", e.target.value);
+      l("update:modelValue", e.target.value);
     }
     const r = m(() => {
       const { class: e, ...t } = i();
       return { className: e || "", rest: t };
     });
-    return (e, t) => (a(), p("label", f(r.value.rest, {
-      class: l(b)(
+    return (e, t) => (o(), p("label", f(r.value.rest, {
+      class: a(V)(
         "flex rounded border bg-b-1 text-sm font-medium focus-within:border-c-1",
         r.value.className
       )
@@ -34,26 +34,26 @@ const v = { class: "sr-only" }, N = ["value"], E = /* @__PURE__ */ d({
         autocapitalize: "off",
         autocomplete: "off",
         autocorrect: "off",
-        class: "flex-1 rounded bg-transparent p-3 outline-none",
+        class: "flex-1 rounded border-none bg-transparent p-3 outline-none",
         placeholder: "Search...",
         spellcheck: "false",
         type: "text",
         value: e.modelValue,
         onInput: u
       }, null, 40, N),
-      e.loading && e.loading.isLoading ? (a(), s(l(S), {
+      e.loading && e.loading.isLoading ? (o(), s(a(S), {
         key: 0,
         class: "mr-3 self-center",
         loadingState: e.loading,
         size: "20px"
-      }, null, 8, ["loadingState"])) : e.modelValue ? (a(), s(l(k), {
+      }, null, 8, ["loadingState"])) : e.modelValue ? (o(), s(a(k), {
         key: 1,
         class: "self-center",
         icon: "Close",
         label: "Clear Search",
         size: "md",
-        onClick: t[0] || (t[0] = (C) => o("update:modelValue", ""))
-      })) : V("", !0)
+        onClick: t[0] || (t[0] = (C) => l("update:modelValue", ""))
+      })) : b("", !0)
     ], 16));
   }
 });

package/dist/components/ScalarTooltip/ScalarTooltip.vue.js

@@ -0,0 +1,57 @@
+import { defineComponent as r, openBlock as n, createBlock as c, unref as l, withCtx as t, createVNode as o, renderSlot as a, normalizeClass as d } from "vue";
+import { TooltipProvider as p, TooltipRoot as f, TooltipTrigger as u, TooltipPortal as k, TooltipContent as m } from "radix-vue";
+const T = /* @__PURE__ */ r({
+  __name: "ScalarTooltip",
+  props: {
+    click: {},
+    delay: {},
+    skipDelay: { default: 1e3 },
+    side: { default: "top" },
+    sideOffset: {},
+    class: {}
+  },
+  emits: ["click"],
+  setup(i) {
+    const e = i;
+    return (s, _) => (n(), c(l(p), {
+      delayDuration: e.delay,
+      skipDelayDuration: e.skipDelay
+    }, {
+      default: t(() => [
+        o(l(f), null, {
+          default: t(() => [
+            o(l(u), {
+              class: "w-full",
+              onClick: e.click
+            }, {
+              default: t(() => [
+                a(s.$slots, "trigger")
+              ]),
+              _: 3
+            }, 8, ["onClick"]),
+            o(l(k), null, {
+              default: t(() => [
+                o(l(m), {
+                  class: d(["scalar-app", e.class]),
+                  side: e.side,
+                  sideOffset: e.sideOffset
+                }, {
+                  default: t(() => [
+                    a(s.$slots, "content")
+                  ]),
+                  _: 3
+                }, 8, ["class", "side", "sideOffset"])
+              ]),
+              _: 3
+            })
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }, 8, ["delayDuration", "skipDelayDuration"]));
+  }
+});
+export {
+  T as default
+};

package/dist/components/ScalarTooltip/ScalarTooltip.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ScalarTooltip.vue.js";
+export {
+  f as default
+};

package/dist/index.d.ts

@@ -24,6 +24,8 @@ declare type __VLS_NonUndefinedable_15<T> = T extends undefined ? never : T;
 
 declare type __VLS_NonUndefinedable_16<T> = T extends undefined ? never : T;
 
+declare type __VLS_NonUndefinedable_17<T> = T extends undefined ? never : T;
+
 declare type __VLS_NonUndefinedable_2<T> = T extends undefined ? never : T;
 
 declare type __VLS_NonUndefinedable_3<T> = T extends undefined ? never : T;
@@ -68,6 +70,10 @@ declare type __VLS_Prettify_7<T> = {
     [K in keyof T]: T[K];
 } & {};
 
+declare type __VLS_Prettify_8<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
 declare type __VLS_TypePropsToRuntimeProps<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: PropType<__VLS_NonUndefinedable<T[K]>>;
@@ -140,6 +146,15 @@ declare type __VLS_TypePropsToRuntimeProps_16<T> = {
     };
 };
 
+declare type __VLS_TypePropsToRuntimeProps_17<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable_17<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
 declare type __VLS_TypePropsToRuntimeProps_2<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: PropType<__VLS_NonUndefinedable_2<T[K]>>;
@@ -254,6 +269,12 @@ declare type __VLS_WithDefaults_7<P, D> = {
     }> : P[K];
 };
 
+declare type __VLS_WithDefaults_8<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify_8<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -272,6 +293,12 @@ declare type __VLS_WithTemplateSlots_11<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_12<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare type __VLS_WithTemplateSlots_2<T, S> = T & {
     new (): {
         $slots: S;
@@ -568,11 +595,13 @@ variant: string;
 export declare const ScalarListbox: __VLS_WithTemplateSlots_5<DefineComponent<__VLS_TypePropsToRuntimeProps_9<{
 options: ScalarListboxOption[];
 modelValue?: ScalarListboxOption | undefined;
+fullWidth?: boolean | undefined;
 } & Omit<FloatingOptions, "middleware" | "offset">>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (v: ScalarListboxOption) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_9<{
 options: ScalarListboxOption[];
 modelValue?: ScalarListboxOption | undefined;
+fullWidth?: boolean | undefined;
 } & Omit<FloatingOptions, "middleware" | "offset">>>> & {
 "onUpdate:modelValue"?: ((v: ScalarListboxOption) => any) | undefined;
 }, {}, {}>, {
@@ -747,6 +776,38 @@ disableTrim: boolean;
     default?(_: {}): any;
 }>;
 
+export declare const ScalarTooltip: __VLS_WithTemplateSlots_12<DefineComponent<__VLS_WithDefaults_8<__VLS_TypePropsToRuntimeProps_17<{
+click?: (() => void) | undefined;
+delay?: number | undefined;
+skipDelay?: number | undefined;
+side?: "bottom" | "left" | "right" | "top" | undefined;
+sideOffset?: number | undefined;
+class?: string | undefined;
+}>, {
+skipDelay: number;
+side: string;
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+click: () => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_8<__VLS_TypePropsToRuntimeProps_17<{
+click?: (() => void) | undefined;
+delay?: number | undefined;
+skipDelay?: number | undefined;
+side?: "bottom" | "left" | "right" | "top" | undefined;
+sideOffset?: number | undefined;
+class?: string | undefined;
+}>, {
+skipDelay: number;
+side: string;
+}>>> & {
+onClick?: (() => any) | undefined;
+}, {
+skipDelay: number;
+side: "bottom" | "left" | "right" | "top";
+}, {}>, {
+    trigger?(_: {}): any;
+    content?(_: {}): any;
+}>;
+
 /**
  * Handles isLoading spinner for the FlowLoader Component
  * - stateIsLoading will trigger the spinner

package/dist/index.js

@@ -13,12 +13,13 @@ import { default as h } from "./components/ScalarIconButton/ScalarIconButton.vue
 import { default as M } from "./components/ScalarListbox/ScalarListbox.vue.js";
 import { default as v } from "./components/ScalarLoading/ScalarLoading.vue.js";
 import { default as R } from "./components/ScalarPopover/ScalarPopover.vue.js";
-import { default as C } from "./components/ScalarSearchInput/ScalarSearchInput.vue.js";
-import { default as T } from "./components/ScalarSearchResults/ScalarSearchResultItem.vue.js";
+import { default as b } from "./components/ScalarSearchInput/ScalarSearchInput.vue.js";
+import { default as P } from "./components/ScalarSearchResults/ScalarSearchResultItem.vue.js";
 import { default as q } from "./components/ScalarSearchResults/ScalarSearchResultList.vue.js";
 import { default as z } from "./components/ScalarTextField/ScalarTextField.vue.js";
-import { useLoadingState as E } from "./components/ScalarLoading/ScalarLoading.vue2.js";
-import { useModal as H } from "./components/ScalarModal/ScalarModal.vue2.js";
+import { default as E } from "./components/ScalarTooltip/ScalarTooltip.vue.js";
+import { useLoadingState as H } from "./components/ScalarLoading/ScalarLoading.vue2.js";
+import { useModal as K } from "./components/ScalarModal/ScalarModal.vue2.js";
 export {
   f as ScalarButton,
   p as ScalarCodeBlock,
@@ -33,10 +34,11 @@ export {
   c as ScalarMarkdown,
   e as ScalarModal,
   R as ScalarPopover,
-  C as ScalarSearchInput,
-  T as ScalarSearchResultItem,
+  b as ScalarSearchInput,
+  P as ScalarSearchResultItem,
   q as ScalarSearchResultList,
   z as ScalarTextField,
-  E as useLoadingState,
-  H as useModal
+  E as ScalarTooltip,
+  H as useLoadingState,
+  K as useModal
 };

package/dist/style.css

@@ -1 +1 @@
-.scalar-modal-layout[data-v-03b82fd9]{animation:modal-fade-03b82fd9 .2s forwards}.scalar-modal[data-v-03b82fd9]{animation:modal-pop-03b82fd9 .15s .15s forwards;height:calc(100% - 120px);width:calc(100% - 8px);max-width:1390px;position:fixed;left:0;top:0;bottom:0;right:0;margin:auto}.scalar-modal.scalar-modal-search[data-v-03b82fd9]{max-width:540px;background-color:transparent}.modal-content-search .modal-body[data-v-03b82fd9]{padding:0;overflow:hidden;display:flex;flex-direction:column;max-height:440px}@media (max-width: 1280px){.scalar-modal[data-v-03b82fd9]{height:calc(100% - 56px);top:46px}}@keyframes modal-fade-03b82fd9{0%{opacity:0}to{opacity:1}}@keyframes modal-pop-03b82fd9{0%{opacity:0}to{opacity:1}}@layer scalar-base{*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }}@layer scalar-components;@layer scalar-utilities{.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.left-0{left:0}.top-0{top:0}.top-\[0\.5px\]{top:.5px}.-z-1{z-index:-1}.z-\[1001\]{z-index:1001}.z-overlay{z-index:10000}.m-0{margin:0}.-mx-0{margin-left:-0px;margin-right:-0px}.-mx-0\.75{margin-left:-3px;margin-right:-3px}.mx-2{margin-left:8px;margin-right:8px}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-top:0;margin-bottom:0}.my-0\.75{margin-top:3px;margin-bottom:3px}.my-3{margin-top:12px;margin-bottom:12px}.mb-0{margin-bottom:0}.ml-1{margin-left:4px}.ml-2{margin-left:8px}.mr-2{margin-right:8px}.mr-3{margin-right:12px}.mt-0{margin-top:0}.mt-1{margin-top:4px}.mt-1\.5{margin-top:6px}.mt-20{margin-top:80px}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-square{aspect-ratio:1 / 1}.size-10{width:40px;height:40px}.size-2{width:8px;height:8px}.size-2\.5{width:10px;height:10px}.size-3{width:12px;height:12px}.size-3\.5{width:14px;height:14px}.size-4{width:16px;height:16px}.size-5{width:20px;height:20px}.size-6{width:24px;height:24px}.size-8{width:32px;height:32px}.size-full{width:100%;height:100%}.h-10{height:40px}.h-4{height:16px}.h-\[100dvh\]{height:100dvh}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-\[440px\]{max-height:440px}.max-h-\[calc\(100dvh-240px\)\]{max-height:calc(100dvh - 240px)}.min-h-\[77px\]{min-height:77px}.w-4{width:16px}.w-40{width:160px}.w-48{width:192px}.w-56{width:224px}.w-\[100dvw\]{width:100dvw}.w-full{width:100%}.min-w-0{min-width:0px}.max-w-screen-lg{max-width:800px}.max-w-screen-md{max-width:640px}.max-w-screen-sm{max-width:540px}.max-w-screen-xs{max-width:480px}.flex-1{flex:1 1 0%}.origin-top-left{transform-origin:top left}.rotate-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.resize{resize:both}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0px}.gap-0\.75{gap:3px}.gap-1{gap:4px}.gap-1\.5{gap:6px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(var(--scalar-border-width) * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(var(--scalar-border-width) * var(--tw-divide-y-reverse))}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-wrap{text-wrap:wrap}.rounded{border-radius:var(--scalar-radius)}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:var(--scalar-radius-lg)}.border{border-width:var(--scalar-border-width)}.border-0{border-width:0}.border-solid{border-style:solid}.border-border{border-color:var(--scalar-border-color)}.border-c-3{border-color:var(--scalar-color-3)}.border-error{border-color:var(--scalar-error-color)}.bg-b-1{background-color:var(--scalar-background-1)}.bg-b-2{background-color:var(--scalar-background-2)}.bg-b-btn{background-color:var(--scalar-button-1)}.bg-backdrop{background-color:#00000070}.bg-blue{background-color:var(--scalar-color-blue)}.bg-border{background-color:var(--scalar-border-color)}.bg-error{background-color:var(--scalar-error-color)}.bg-transparent{background-color:transparent}.stroke-\[0\.92\]{stroke-width:.92}.stroke-\[0\.96\]{stroke-width:.96}.stroke-\[0\.9\]{stroke-width:.9}.stroke-\[1\.1\]{stroke-width:1.1}.stroke-\[1\.2\]{stroke-width:1.2}.stroke-\[1\.4\]{stroke-width:1.4}.stroke-\[1\.75\]{stroke-width:1.75}.p-0{padding:0}.p-0\.5{padding:2px}.p-0\.75{padding:3px}.p-1{padding:4px}.p-2{padding:8px}.p-3{padding:12px}.p-\[3px\]{padding:3px}.px-1{padding-left:4px;padding-right:4px}.px-2{padding-left:8px;padding-right:8px}.px-2\.5{padding-left:10px;padding-right:10px}.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}.px-6{padding-left:24px;padding-right:24px}.px-9{padding-left:36px;padding-right:36px}.py-1{padding-top:4px;padding-bottom:4px}.py-1\.5{padding-top:6px;padding-bottom:6px}.py-3{padding-top:12px;padding-bottom:12px}.py-4{padding-top:16px;padding-bottom:16px}.pb-0{padding-bottom:0}.pb-4{padding-bottom:16px}.pl-9{padding-left:36px}.pr-3{padding-right:12px}.pt-3{padding-top:12px}.pt-6{padding-top:24px}.text-left{text-align:left}.font-code{font-family:var(--scalar-font-code)}.text-lg{font-size:var(--scalar-font-size-2)}.text-sm{font-size:var(--scalar-font-size-4)}.text-xs{font-size:var(--scalar-font-size-5)}.text-xxs{font-size:var(--scalar-font-size-6)}.font-bold{font-weight:var(--scalar-bold)}.font-medium{font-weight:var(--scalar-semibold)}.leading-snug{line-height:1.375}.text-b-1{color:var(--scalar-background-1)}.text-c-1{color:var(--scalar-color-1)}.text-c-2{color:var(--scalar-color-2)}.text-c-3{color:var(--scalar-color-3)}.text-c-btn{color:var(--scalar-button-1-color)}.text-c-ghost{color:var(--scalar-color-ghost)}.text-error{color:var(--scalar-error-color)}.text-transparent{color:transparent}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.no-underline{text-decoration-line:none}.opacity-0{opacity:0}.opacity-50{opacity:.5}.shadow{--tw-shadow: var(--scalar-shadow-1);--tw-shadow-colored: var(--scalar-shadow-1);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: var(--scalar-shadow-2);--tw-shadow-colored: var(--scalar-shadow-2);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: var(--scalar-shadow-1);--tw-shadow-colored: var(--scalar-shadow-1);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: rgba(0, 0, 0, .09) 0px 1px 4px;--tw-shadow-colored: 0px 1px 4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-current{--tw-shadow-color: currentColor;--tw-shadow: var(--tw-shadow-colored)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.brightness-lifted{--tw-brightness: brightness(var(--scalar-lifted-brightness));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.bg-b-1{--tw-bg-base: var(--scalar-background-1)}.bg-b-2{--tw-bg-base: var(--scalar-background-2)}.bg-b-btn{--tw-bg-base: var(--scalar-button-1)}.bg-backdrop{--tw-bg-base: rgba(0, 0, 0, .44)}.bg-blue{--tw-bg-base: var(--scalar-color-blue)}.bg-border{--tw-bg-base: var(--scalar-border-color)}.bg-error{--tw-bg-base: var(--scalar-error-color)}.bg-transparent{--tw-bg-base: transparent}}@layer scalar-base{*{box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--scalar-border-color);font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:unset;font-weight:inherit;line-height:inherit;color:inherit;margin:unset;padding:unset}}@layer scalar-utilities{.row{display:flex;flex-direction:row}.col{display:flex;flex-direction:column}}.before\:mr-1:before{content:var(--tw-content);margin-right:4px}.before\:mr-1\.5:before{content:var(--tw-content);margin-right:6px}.before\:block:before{content:var(--tw-content);display:block}.before\:h-4:before{content:var(--tw-content);height:16px}.before\:w-4:before{content:var(--tw-content);width:16px}.before\:rounded-full:before{content:var(--tw-content);border-radius:9999px}.before\:bg-error:before{content:var(--tw-content);background-color:var(--scalar-error-color)}.before\:text-center:before{content:var(--tw-content);text-align:center}.before\:text-xxs:before{content:var(--tw-content);font-size:var(--scalar-font-size-6)}.before\:leading-4:before{content:var(--tw-content);line-height:var(--scalar-line-height-4)}.before\:text-white:before{content:var(--tw-content);--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.before\:content-\[\'\!\'\]:before{--tw-content: "!";content:var(--tw-content)}.before\:bg-error:before{content:var(--tw-content);--tw-bg-base: var(--scalar-error-color)}.first-of-type\:mt-0:first-of-type{margin-top:0}.first-of-type\:mt-0\.75:first-of-type{margin-top:3px}.last-of-type\:mb-0:last-of-type{margin-bottom:0}.last-of-type\:mb-0\.75:last-of-type{margin-bottom:3px}.empty\:hidden:empty{display:none}.focus-within\:border-c-1:focus-within{border-color:var(--scalar-color-1)}.hover\:bg-b-2:hover{background-color:var(--scalar-background-2)}.hover\:text-c-1:hover{color:var(--scalar-color-1)}.hover\:bg-b-2:hover{--tw-bg-base: var(--scalar-background-2)}.active\:bg-b-btn:active{background-color:var(--scalar-button-1)}.active\:text-c-1:active{color:var(--scalar-color-1)}.active\:shadow-none:active{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.active\:brightness-90:active{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.active\:bg-b-btn:active{--tw-bg-base: var(--scalar-button-1)}.group:hover .group-hover\:text-c-1{color:var(--scalar-color-1)}.group:hover .group-hover\:shadow-border{--tw-shadow: inset 0 0 0 1px var(--scalar-border-color);--tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-shadow-color: var(--scalar-border-color);--tw-shadow: var(--tw-shadow-colored)}.ui-open\:rotate-180[data-headlessui-state~=open]{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:where([data-headlessui-state~=open]) .ui-open\:rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.has-actv-btn\:border:has(button:active){border-width:var(--scalar-border-width)}.has-actv-btn\:border-border:has(button:active){border-color:var(--scalar-border-color)}.\!empty\:flex:not(:empty){display:flex}.\!empty\:w-7:not(:empty){width:28px}.\!empty\:items-center:not(:empty){align-items:center}.\!empty\:pr-3:not(:empty){padding-right:12px}.hocus\:bg-border:hover{background-color:var(--scalar-border-color)}.hocus\:bg-h-btn:hover{background-color:var(--scalar-button-1-hover)}.hocus\:text-c-1:hover{color:var(--scalar-color-1)}.hocus\:brightness-90:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hocus\:bg-border:hover{--tw-bg-base: var(--scalar-border-color)}.hocus\:bg-h-btn:hover{--tw-bg-base: var(--scalar-button-1-hover)}.hocus\:bg-border:focus-visible{background-color:var(--scalar-border-color)}.hocus\:bg-h-btn:focus-visible{background-color:var(--scalar-button-1-hover)}.hocus\:text-c-1:focus-visible{color:var(--scalar-color-1)}.hocus\:brightness-90:focus-visible{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hocus\:bg-border:focus-visible{--tw-bg-base: var(--scalar-border-color)}.hocus\:bg-h-btn:focus-visible{--tw-bg-base: var(--scalar-button-1-hover)}.loader-wrapper[data-v-47faceda]{position:relative;height:var(--d6cae758);width:var(--d6cae758);display:flex;align-items:center;justify-content:center;--loader-size: 50%}.svg-loader[data-v-47faceda]{width:var(--loader-size);height:var(--loader-size);top:1rem;right:.9rem;overflow:visible;fill:none;background-color:transparent;stroke:currentColor}.svg-path[data-v-47faceda]{stroke-width:14;fill:none;transition:.3s}.svg-x-mark[data-v-47faceda]{stroke-dasharray:57;stroke-dashoffset:57;transition-delay:0s}.svg-check-mark[data-v-47faceda]{stroke-dasharray:149;stroke-dashoffset:149;transition-delay:0s}.icon-is-invalid .svg-x-mark[data-v-47faceda],.icon-is-valid .svg-check-mark[data-v-47faceda]{stroke-dashoffset:0;transition-delay:.3s}.circular-loader[data-v-47faceda]{animation:rotate-47faceda .7s linear infinite,fade-in-47faceda .4s;transform-origin:center center;transform:scale(5);background:transparent}.loader-path[data-v-47faceda]{stroke-dasharray:50,200;stroke-dashoffset:-100;stroke-linecap:round}.loader-path-off[data-v-47faceda]{stroke-dasharray:50,200;stroke-dashoffset:-100;transition:opacity .3s;opacity:0}@keyframes fade-in-47faceda{0%{opacity:0}70%{opacity:0}to{opacity:1}}@keyframes rotate-47faceda{0%{transform:scale(5) rotate(0)}to{transform:scale(5) rotate(360deg)}}.scalar-codeblock-pre{margin:0;padding:.5rem;overflow:auto;background:transparent;text-wrap:nowrap;white-space-collapse:preserve;border-radius:0}.scalar-input-wrapper-focus .scalar-input-label[data-v-94574cc9]{color:var(--scalar-color-1)}.scalar-input-wrapper-error .scalar-input-label[data-v-94574cc9]{color:var(--scalar-color-error-color)}.scalar-input[data-v-94574cc9]::-moz-selection{color:var(--scalar-color-1);background:#ffa55859}.scalar-input[data-v-94574cc9]::selection{color:var(--scalar-color-1);background:#ffa55859}.scalar-input[data-v-94574cc9]:has(+.scalar-input-label){opacity:0}.scalar-input[data-v-94574cc9]:not(:-moz-placeholder-shown){opacity:1;-moz-transition:opacity .2s ease-in-out .15s;transition:opacity .2s ease-in-out .15s}.scalar-input[data-v-94574cc9]:not(:placeholder-shown),.scalar-input-wrapper-focus .scalar-input[data-v-94574cc9]{opacity:1;transition:opacity .2s ease-in-out .15s}.scalar-input[data-v-94574cc9]:-webkit-autofill,.scalar-input[data-v-94574cc9]:-webkit-autofill:hover,.scalar-input[data-v-94574cc9]:-webkit-autofill:focus,.scalar-input[data-v-94574cc9]:-webkit-autofill:active,.scalar-input[data-v-94574cc9]:focus-within:-webkit-autofill,.scalar-input[data-v-94574cc9]:focus-within:-webkit-autofill:hover,.scalar-input[data-v-94574cc9]:focus-within:-webkit-autofill:focus,.scalar-input[data-v-94574cc9]:focus-within:-webkit-autofill:active{-webkit-box-shadow:0 0 0px 1000px var(--scalar-background-1) inset!important;-webkit-text-fill-color:var(--scalar-color-1);color:var(--scalar-color-1);border-radius:var(--scalar-radius)}.scalar-input:not(:-moz-placeholder-shown)+.scalar-input-label[data-v-94574cc9]{transform:translate3d(0,-20px,0) scale(.8);transform-origin:top left}.scalar-input-wrapper-focus .scalar-input-label[data-v-94574cc9],.scalar-input:not(:placeholder-shown)+.scalar-input-label[data-v-94574cc9]{transform:translate3d(0,-20px,0) scale(.8);transform-origin:top left}.scalar-input-wrapper-focus:has(button:active) .scalar-input-label[data-v-94574cc9]{color:var(--scalar-color-3)!important}
+.scalar-modal-layout[data-v-647be2f3]{animation:modal-fade-647be2f3 .2s forwards}.scalar-modal[data-v-647be2f3]{animation:modal-pop-647be2f3 .15s .15s forwards;height:calc(100% - 120px);width:calc(100% - 8px);max-width:1390px;position:fixed;left:0;top:0;bottom:0;right:0;margin:auto}.scalar-modal.scalar-modal-search[data-v-647be2f3]{max-width:540px;background-color:transparent}.modal-content-search .modal-body[data-v-647be2f3]{padding:0;overflow:hidden;display:flex;flex-direction:column;max-height:440px}@media (max-width: 1280px){.scalar-modal[data-v-647be2f3]{height:calc(100% - 56px);top:46px}}@keyframes modal-fade-647be2f3{0%{opacity:0}to{opacity:1}}@keyframes modal-pop-647be2f3{0%{opacity:0}to{opacity:1}}@layer scalar-base,scalar-theme;:where(.scalar-app){font-family:var(--scalar-font);line-height:1.15;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4}:where(.scalar-app) *,:where(.scalar-app) *:before,:where(.scalar-app) *:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--scalar-border-color);font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:unset;font-weight:inherit;line-height:inherit;color:inherit;margin:unset;padding:unset;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:where(.scalar-app) button,:where(.scalar-app) input,:where(.scalar-app) optgroup,:where(.scalar-app) select,:where(.scalar-app) textarea,:where(.scalar-app) ::file-selector-button{background:transparent}:where(.scalar-app) input:where(:not([type=button],[type=reset],[type=submit])),:where(.scalar-app) select,:where(.scalar-app) textarea{border-radius:var(--scalar-radius);border-width:1px}:where(.scalar-app) input::placeholder,:where(.scalar-app) input:-ms-input-placeholder,:where(.scalar-app) input::-webkit-input-placeholder{color:var(--scalar-color-3);font-family:var(--scalar-font)}:where(.scalar-app) input:-webkit-autofill{-webkit-background-clip:text!important;background-clip:text!important}.scalar-app .cm-scroller,.scalar-app .custom-scroll{overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.scalar-app .custom-scroll-self-contain-overflow{overscroll-behavior:contain}@supports (-moz-appearance: none){.scalar-app .cm-scroller,.scalar-app .custom-scroll{padding-right:12px}}.scalar-app .cm-scroller:hover,.scalar-app .custom-scroll:hover{scrollbar-color:var(--scalar-scrollbar-color, transparent)}.scalar-app .cm-scroller:hover::-webkit-scrollbar-thumb,.scalar-app .custom-scroll:hover::-webkit-scrollbar-thumb{background:var(--scalar-scrollbar-color);background-clip:content-box;border:3px solid transparent}.scalar-app .cm-scroller::-webkit-scrollbar-thumb:active,.scalar-app .custom-scroll::-webkit-scrollbar-thumb:active{background:var(--scalar-scrollbar-color-active);background-clip:content-box;border:3px solid transparent}.scalar-app .cm-scroller::-webkit-scrollbar-corner,.scalar-app .custom-scroll::-webkit-scrollbar-corner{background:transparent}.scalar-app .cm-scroller::-webkit-scrollbar,.scalar-app .custom-scroll::-webkit-scrollbar{height:12px;width:12px}.scalar-app .cm-scroller::-webkit-scrollbar-track,.scalar-app .custom-scroll::-webkit-scrollbar-track{background:transparent}.scalar-app .cm-scroller::-webkit-scrollbar-thumb,.scalar-app .custom-scroll::-webkit-scrollbar-thumb{border-radius:20px;background:transparent;background-clip:content-box;border:3px solid transparent}@media (pointer: coarse){.scalar-app .cm-scroller,.scalar-app .custom-scroll{padding-right:12px}}@layer scalar-base{:root{--scalar-border-width: 1px;--scalar-radius: 3px;--scalar-radius-lg: 6px;--scalar-radius-xl: 8px;--scalar-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--scalar-font-code: "JetBrains Mono", ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;--scalar-heading-1: 40px;--scalar-page-description: 24px;--scalar-heading-2: 24px;--scalar-heading-3: 20px;--scalar-heading-4: 16px;--scalar-heading-5: 16px;--scalar-heading-6: 16px;--scalar-paragraph: 16px;--scalar-small: 14px;--scalar-mini: 13px;--scalar-micro: 12px;--scalar-bold: 600;--scalar-semibold: 500;--scalar-regular: 400;--scalar-font-size-1: 24px;--scalar-font-size-2: 16px;--scalar-font-size-3: 14px;--scalar-font-size-4: 13px;--scalar-font-size-5: 12px;--scalar-font-size-6: 12px;--scalar-font-size-7: 10px;--scalar-line-height-1: 32px;--scalar-line-height-2: 24px;--scalar-line-height-3: 20px;--scalar-line-height-4: 18px;--scalar-line-height-5: 16px;--scalar-font-medium: 500;--scalar-font-bold: 700;--scalar-text-decoration: none;--scalar-text-decoration-hover: underline}.dark-mode{color-scheme:dark;--scalar-scrollbar-color: rgba(255, 255, 255, .18);--scalar-scrollbar-color-active: rgba(255, 255, 255, .36);--scalar-button-1: rgba(255, 255, 255, 1);--scalar-button-1-hover: rgba(255, 255, 255, .9);--scalar-button-1-color: black;--scalar-shadow-1: 0 1px 3px 0 rgb(0, 0, 0, .1);--scalar-shadow-2: rgba(15, 15, 15, .2) 0px 3px 6px, rgba(15, 15, 15, .4) 0px 9px 24px, 0 0 0 1px rgba(255, 255, 255, .1);--scalar-sidebar-indent-border: transparent;--scalar-sidebar-indent-border-hover: transparent;--scalar-sidebar-indent-border-active: transparent}.light-mode{color-scheme:light;--scalar-scrollbar-color-active: rgba(0, 0, 0, .36);--scalar-scrollbar-color: rgba(0, 0, 0, .18);--scalar-button-1: rgba(0, 0, 0, 1);--scalar-button-1-hover: rgba(0, 0, 0, .8);--scalar-button-1-color: rgba(255, 255, 255, .9);--scalar-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, .11);--scalar-shadow-2: rgba(0, 0, 0, .08) 0px 13px 20px 0px, rgba(0, 0, 0, .08) 0px 3px 8px 0px, #eeeeed 0px 0 0 1px;--scalar-sidebar-indent-border: transparent;--scalar-sidebar-indent-border-hover: transparent;--scalar-sidebar-indent-border-active: transparent}.light-mode .dark-mode{color-scheme:dark!important}@media (max-width: 460px){:root{--scalar-font-size-1: 22px;--scalar-font-size-2: 14px;--scalar-font-size-3: 12px}}@media (max-width: 720px){:root{--scalar-heading-1: 24px;--scalar-page-description: 20px}}.light-mode{--scalar-background-1: #fff;--scalar-background-2: #f6f6f6;--scalar-background-3: #e7e7e7;--scalar-background-accent: #8ab4f81f;--scalar-color-1: #2a2f45;--scalar-color-2: #757575;--scalar-color-3: #8e8e8e;--scalar-color-accent: #0099ff;--scalar-border-color: rgba(0, 0, 0, .1)}.dark-mode{--scalar-background-1: #0f0f0f;--scalar-background-2: #1a1a1a;--scalar-background-3: #272727;--scalar-color-1: rgba(255, 255, 255, .9);--scalar-color-2: rgba(255, 255, 255, .62);--scalar-color-3: rgba(255, 255, 255, .44);--scalar-color-accent: #3ea6ff;--scalar-background-accent: #3ea6ff1f;--scalar-border-color: rgba(255, 255, 255, .1)}.light-mode .t-doc__sidebar,.dark-mode .t-doc__sidebar{--scalar-sidebar-background-1: var(--scalar-background-1);--scalar-sidebar-color-1: var(--scalar-color-1);--scalar-sidebar-color-2: var(--scalar-color-2);--scalar-sidebar-border-color: var(--scalar-border-color);--scalar-sidebar-item-hover-background: var(--scalar-background-2);--scalar-sidebar-item-hover-color: currentColor;--scalar-sidebar-item-active-background: var(--scalar-background-2);--scalar-sidebar-color-active: var(--scalar-color-1);--scalar-sidebar-search-background: transparent;--scalar-sidebar-search-color: var(--scalar-color-3);--scalar-sidebar-search-border-color: var(--scalar-border-color)}.light-mode{--scalar-color-green: #069061;--scalar-color-red: #ef0006;--scalar-color-yellow: #edbe20;--scalar-color-blue: #0082d0;--scalar-color-orange: #fb892c;--scalar-color-purple: #5203d1;--scalar-button-1: rgba(0, 0, 0, 1);--scalar-button-1-hover: rgba(0, 0, 0, .8);--scalar-button-1-color: rgba(255, 255, 255, .9)}.dark-mode{--scalar-color-green: #00b648;--scalar-color-red: #dc1b19;--scalar-color-yellow: #ffc90d;--scalar-color-blue: #4eb3ec;--scalar-color-orange: #ff8d4d;--scalar-color-purple: #b191f9;--scalar-button-1: rgba(255, 255, 255, 1);--scalar-button-1-hover: rgba(255, 255, 255, .9);--scalar-button-1-color: black}*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }}:where(.scalar-app) .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:where(.scalar-app) .pointer-events-none{pointer-events:none}:where(.scalar-app) .visible{visibility:visible}:where(.scalar-app) .fixed{position:fixed}:where(.scalar-app) .absolute{position:absolute}:where(.scalar-app) .relative{position:relative}:where(.scalar-app) .inset-0{top:0;right:0;bottom:0;left:0}:where(.scalar-app) .left-0{left:0}:where(.scalar-app) .top-0{top:0}:where(.scalar-app) .top-\[0\.5px\]{top:.5px}:where(.scalar-app) .-z-1{z-index:-1}:where(.scalar-app) .z-\[1001\]{z-index:1001}:where(.scalar-app) .z-overlay{z-index:10000}:where(.scalar-app) .m-0{margin:0}:where(.scalar-app) .-mx-0{margin-left:-0px;margin-right:-0px}:where(.scalar-app) .-mx-0\.75{margin-left:-3px;margin-right:-3px}:where(.scalar-app) .mx-2{margin-left:8px;margin-right:8px}:where(.scalar-app) .mx-auto{margin-left:auto;margin-right:auto}:where(.scalar-app) .my-0{margin-top:0;margin-bottom:0}:where(.scalar-app) .my-0\.75{margin-top:3px;margin-bottom:3px}:where(.scalar-app) .my-3{margin-top:12px;margin-bottom:12px}:where(.scalar-app) .mb-0{margin-bottom:0}:where(.scalar-app) .ml-1{margin-left:4px}:where(.scalar-app) .ml-2{margin-left:8px}:where(.scalar-app) .mr-2{margin-right:8px}:where(.scalar-app) .mr-3{margin-right:12px}:where(.scalar-app) .mt-0{margin-top:0}:where(.scalar-app) .mt-1{margin-top:4px}:where(.scalar-app) .mt-1\.5{margin-top:6px}:where(.scalar-app) .mt-20{margin-top:80px}:where(.scalar-app) .block{display:block}:where(.scalar-app) .inline-block{display:inline-block}:where(.scalar-app) .flex{display:flex}:where(.scalar-app) .grid{display:grid}:where(.scalar-app) .contents{display:contents}:where(.scalar-app) .hidden{display:none}:where(.scalar-app) .aspect-square{aspect-ratio:1 / 1}:where(.scalar-app) .size-10{width:40px;height:40px}:where(.scalar-app) .size-2{width:8px;height:8px}:where(.scalar-app) .size-2\.5{width:10px;height:10px}:where(.scalar-app) .size-3{width:12px;height:12px}:where(.scalar-app) .size-3\.5{width:14px;height:14px}:where(.scalar-app) .size-4{width:16px;height:16px}:where(.scalar-app) .size-5{width:20px;height:20px}:where(.scalar-app) .size-6{width:24px;height:24px}:where(.scalar-app) .size-8{width:32px;height:32px}:where(.scalar-app) .size-full{width:100%;height:100%}:where(.scalar-app) .h-10{height:40px}:where(.scalar-app) .h-4{height:16px}:where(.scalar-app) .h-\[100dvh\]{height:100dvh}:where(.scalar-app) .h-full{height:100%}:where(.scalar-app) .h-px{height:1px}:where(.scalar-app) .h-screen{height:100vh}:where(.scalar-app) .max-h-\[440px\]{max-height:440px}:where(.scalar-app) .max-h-\[calc\(100dvh-240px\)\]{max-height:calc(100dvh - 240px)}:where(.scalar-app) .min-h-\[77px\]{min-height:77px}:where(.scalar-app) .w-4{width:16px}:where(.scalar-app) .w-40{width:160px}:where(.scalar-app) .w-48{width:192px}:where(.scalar-app) .w-56{width:224px}:where(.scalar-app) .w-\[100dvw\]{width:100dvw}:where(.scalar-app) .w-full{width:100%}:where(.scalar-app) .min-w-0{min-width:0px}:where(.scalar-app) .max-w-screen-lg{max-width:800px}:where(.scalar-app) .max-w-screen-md{max-width:640px}:where(.scalar-app) .max-w-screen-sm{max-width:540px}:where(.scalar-app) .max-w-screen-xs{max-width:480px}:where(.scalar-app) .flex-1{flex:1 1 0%}:where(.scalar-app) .origin-top-left{transform-origin:top left}:where(.scalar-app) .rotate-90{--tw-rotate:90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:where(.scalar-app) .transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:where(.scalar-app) .cursor-not-allowed{cursor:not-allowed}:where(.scalar-app) .cursor-pointer{cursor:pointer}:where(.scalar-app) .resize-none{resize:none}:where(.scalar-app) .resize{resize:both}:where(.scalar-app) .appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}:where(.scalar-app) .flex-col{flex-direction:column}:where(.scalar-app) .flex-wrap{flex-wrap:wrap}:where(.scalar-app) .items-start{align-items:flex-start}:where(.scalar-app) .items-center{align-items:center}:where(.scalar-app) .justify-start{justify-content:flex-start}:where(.scalar-app) .justify-center{justify-content:center}:where(.scalar-app) .justify-between{justify-content:space-between}:where(.scalar-app) .gap-0{gap:0px}:where(.scalar-app) .gap-0\.75{gap:3px}:where(.scalar-app) .gap-1{gap:4px}:where(.scalar-app) .gap-1\.5{gap:6px}:where(.scalar-app) .gap-2{gap:8px}:where(.scalar-app) .gap-3{gap:12px}:where(.scalar-app) .gap-4{gap:16px}:where(.scalar-app) .divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(var(--scalar-border-width) * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(var(--scalar-border-width) * var(--tw-divide-y-reverse))}:where(.scalar-app) .self-center{align-self:center}:where(.scalar-app) .overflow-hidden{overflow:hidden}:where(.scalar-app) .overflow-y-auto{overflow-y:auto}:where(.scalar-app) .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where(.scalar-app) .text-wrap{text-wrap:wrap}:where(.scalar-app) .rounded{border-radius:var(--scalar-radius)}:where(.scalar-app) .rounded-full{border-radius:9999px}:where(.scalar-app) .rounded-lg{border-radius:var(--scalar-radius-lg)}:where(.scalar-app) .border{border-width:var(--scalar-border-width)}:where(.scalar-app) .border-0{border-width:0}:where(.scalar-app) .border-solid{border-style:solid}:where(.scalar-app) .border-none{border-style:none}:where(.scalar-app) .border-border{border-color:var(--scalar-border-color)}:where(.scalar-app) .border-c-3{border-color:var(--scalar-color-3)}:where(.scalar-app) .border-error{border-color:var(--scalar-error-color)}:where(.scalar-app) .bg-b-1{background-color:var(--scalar-background-1)}:where(.scalar-app) .bg-b-2{background-color:var(--scalar-background-2)}:where(.scalar-app) .bg-b-btn{background-color:var(--scalar-button-1)}:where(.scalar-app) .bg-backdrop{background-color:#00000070}:where(.scalar-app) .bg-blue{background-color:var(--scalar-color-blue)}:where(.scalar-app) .bg-border{background-color:var(--scalar-border-color)}:where(.scalar-app) .bg-error{background-color:var(--scalar-error-color)}:where(.scalar-app) .bg-transparent{background-color:transparent}:where(.scalar-app) .stroke-\[0\.92\]{stroke-width:.92}:where(.scalar-app) .stroke-\[0\.96\]{stroke-width:.96}:where(.scalar-app) .stroke-\[0\.9\]{stroke-width:.9}:where(.scalar-app) .stroke-\[1\.1\]{stroke-width:1.1}:where(.scalar-app) .stroke-\[1\.2\]{stroke-width:1.2}:where(.scalar-app) .stroke-\[1\.4\]{stroke-width:1.4}:where(.scalar-app) .stroke-\[1\.75\]{stroke-width:1.75}:where(.scalar-app) .p-0{padding:0}:where(.scalar-app) .p-0\.5{padding:2px}:where(.scalar-app) .p-0\.75{padding:3px}:where(.scalar-app) .p-1{padding:4px}:where(.scalar-app) .p-2{padding:8px}:where(.scalar-app) .p-3{padding:12px}:where(.scalar-app) .p-\[3px\]{padding:3px}:where(.scalar-app) .px-1{padding-left:4px;padding-right:4px}:where(.scalar-app) .px-2{padding-left:8px;padding-right:8px}:where(.scalar-app) .px-2\.5{padding-left:10px;padding-right:10px}:where(.scalar-app) .px-3{padding-left:12px;padding-right:12px}:where(.scalar-app) .px-4{padding-left:16px;padding-right:16px}:where(.scalar-app) .px-6{padding-left:24px;padding-right:24px}:where(.scalar-app) .px-9{padding-left:36px;padding-right:36px}:where(.scalar-app) .py-1{padding-top:4px;padding-bottom:4px}:where(.scalar-app) .py-1\.5{padding-top:6px;padding-bottom:6px}:where(.scalar-app) .py-3{padding-top:12px;padding-bottom:12px}:where(.scalar-app) .py-4{padding-top:16px;padding-bottom:16px}:where(.scalar-app) .pb-0{padding-bottom:0}:where(.scalar-app) .pb-4{padding-bottom:16px}:where(.scalar-app) .pl-9{padding-left:36px}:where(.scalar-app) .pr-3{padding-right:12px}:where(.scalar-app) .pt-3{padding-top:12px}:where(.scalar-app) .pt-6{padding-top:24px}:where(.scalar-app) .text-left{text-align:left}:where(.scalar-app) .font-code{font-family:var(--scalar-font-code)}:where(.scalar-app) .text-lg{font-size:var(--scalar-font-size-2)}:where(.scalar-app) .text-sm{font-size:var(--scalar-font-size-4)}:where(.scalar-app) .text-xs{font-size:var(--scalar-font-size-5)}:where(.scalar-app) .text-xxs{font-size:var(--scalar-font-size-6)}:where(.scalar-app) .font-bold{font-weight:var(--scalar-bold)}:where(.scalar-app) .font-medium{font-weight:var(--scalar-semibold)}:where(.scalar-app) .leading-snug{line-height:1.375}:where(.scalar-app) .text-b-1{color:var(--scalar-background-1)}:where(.scalar-app) .text-c-1{color:var(--scalar-color-1)}:where(.scalar-app) .text-c-2{color:var(--scalar-color-2)}:where(.scalar-app) .text-c-3{color:var(--scalar-color-3)}:where(.scalar-app) .text-c-btn{color:var(--scalar-button-1-color)}:where(.scalar-app) .text-c-ghost{color:var(--scalar-color-ghost)}:where(.scalar-app) .text-error{color:var(--scalar-error-color)}:where(.scalar-app) .text-transparent{color:transparent}:where(.scalar-app) .text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}:where(.scalar-app) .no-underline{text-decoration-line:none}:where(.scalar-app) .opacity-0{opacity:0}:where(.scalar-app) .opacity-50{opacity:.5}:where(.scalar-app) .shadow{--tw-shadow:var(--scalar-shadow-1);--tw-shadow-colored:var(--scalar-shadow-1);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:where(.scalar-app) .shadow-lg{--tw-shadow:var(--scalar-shadow-2);--tw-shadow-colored:var(--scalar-shadow-2);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:where(.scalar-app) .shadow-md{--tw-shadow:var(--scalar-shadow-1);--tw-shadow-colored:var(--scalar-shadow-1);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:where(.scalar-app) .shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:where(.scalar-app) .shadow-sm{--tw-shadow:rgba(0, 0, 0, .09) 0px 1px 4px;--tw-shadow-colored:0px 1px 4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:where(.scalar-app) .shadow-current{--tw-shadow-color:currentColor;--tw-shadow:var(--tw-shadow-colored)}:where(.scalar-app) .outline-none{outline:2px solid transparent;outline-offset:2px}:where(.scalar-app) .outline{outline-style:solid}:where(.scalar-app) .blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}:where(.scalar-app) .brightness-lifted{--tw-brightness:brightness(var(--scalar-lifted-brightness));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}:where(.scalar-app) .filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}:where(.scalar-app) .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:where(.scalar-app) .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:where(.scalar-app) .transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:where(.scalar-app) .transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:where(.scalar-app) .ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}:where(.scalar-app) .bg-b-1{--tw-bg-base:var(--scalar-background-1)}:where(.scalar-app) .bg-b-2{--tw-bg-base:var(--scalar-background-2)}:where(.scalar-app) .bg-b-btn{--tw-bg-base:var(--scalar-button-1)}:where(.scalar-app) .bg-backdrop{--tw-bg-base:rgba(0, 0, 0, .44)}:where(.scalar-app) .bg-blue{--tw-bg-base:var(--scalar-color-blue)}:where(.scalar-app) .bg-border{--tw-bg-base:var(--scalar-border-color)}:where(.scalar-app) .bg-error{--tw-bg-base:var(--scalar-error-color)}:where(.scalar-app) .bg-transparent{--tw-bg-base:transparent}:where(.scalar-app) .row{display:flex;flex-direction:row}:where(.scalar-app) .col{display:flex;flex-direction:column}:where(.scalar-app) .centered{left:50%;--tw-translate-x: -50%;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:where(.scalar-app) .before\:mr-1:before{content:var(--tw-content);margin-right:4px}:where(.scalar-app) .before\:mr-1\.5:before{content:var(--tw-content);margin-right:6px}:where(.scalar-app) .before\:block:before{content:var(--tw-content);display:block}:where(.scalar-app) .before\:h-4:before{content:var(--tw-content);height:16px}:where(.scalar-app) .before\:w-4:before{content:var(--tw-content);width:16px}:where(.scalar-app) .before\:rounded-full:before{content:var(--tw-content);border-radius:9999px}:where(.scalar-app) .before\:bg-error:before{content:var(--tw-content);background-color:var(--scalar-error-color)}:where(.scalar-app) .before\:text-center:before{content:var(--tw-content);text-align:center}:where(.scalar-app) .before\:text-xxs:before{content:var(--tw-content);font-size:var(--scalar-font-size-6)}:where(.scalar-app) .before\:leading-4:before{content:var(--tw-content);line-height:var(--scalar-line-height-4)}:where(.scalar-app) .before\:text-white:before{content:var(--tw-content);--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}:where(.scalar-app) .before\:content-\[\'\!\'\]:before{--tw-content:"!";content:var(--tw-content)}:where(.scalar-app) .before\:bg-error:before{content:var(--tw-content);--tw-bg-base:var(--scalar-error-color)}:where(.scalar-app) .first-of-type\:mt-0:first-of-type{margin-top:0}:where(.scalar-app) .first-of-type\:mt-0\.75:first-of-type{margin-top:3px}:where(.scalar-app) .last-of-type\:mb-0:last-of-type{margin-bottom:0}:where(.scalar-app) .last-of-type\:mb-0\.75:last-of-type{margin-bottom:3px}:where(.scalar-app) .empty\:hidden:empty{display:none}:where(.scalar-app) .focus-within\:border-c-1:focus-within{border-color:var(--scalar-color-1)}:where(.scalar-app) .hover\:bg-b-2:hover{background-color:var(--scalar-background-2)}:where(.scalar-app) .hover\:text-c-1:hover{color:var(--scalar-color-1)}:where(.scalar-app) .hover\:bg-b-2:hover{--tw-bg-base:var(--scalar-background-2)}:where(.scalar-app) .active\:bg-b-btn:active{background-color:var(--scalar-button-1)}:where(.scalar-app) .active\:text-c-1:active{color:var(--scalar-color-1)}:where(.scalar-app) .active\:shadow-none:active{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:where(.scalar-app) .active\:brightness-90:active{--tw-brightness:brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}:where(.scalar-app) .active\:bg-b-btn:active{--tw-bg-base:var(--scalar-button-1)}:where(.scalar-app) .group:hover .group-hover\:text-c-1{color:var(--scalar-color-1)}:where(.scalar-app) .group:hover .group-hover\:shadow-border{--tw-shadow:inset 0 0 0 1px var(--scalar-border-color);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:where(.scalar-app) .group:hover .group-hover\:shadow-border{--tw-shadow-color:var(--scalar-border-color);--tw-shadow:var(--tw-shadow-colored)}:where(.scalar-app) .ui-open\:rotate-180[data-headlessui-state~=open]{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:where(.scalar-app) :where([data-headlessui-state~=open]) .ui-open\:rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:where(.scalar-app) .has-actv-btn\:border:has(button:active){border-width:var(--scalar-border-width)}:where(.scalar-app) .has-actv-btn\:border-border:has(button:active){border-color:var(--scalar-border-color)}:where(.scalar-app) .\!empty\:flex:not(:empty){display:flex}:where(.scalar-app) .\!empty\:w-7:not(:empty){width:28px}:where(.scalar-app) .\!empty\:items-center:not(:empty){align-items:center}:where(.scalar-app) .\!empty\:pr-3:not(:empty){padding-right:12px}:where(.scalar-app) .hocus\:bg-border:hover{background-color:var(--scalar-border-color)}:where(.scalar-app) .hocus\:bg-h-btn:hover{background-color:var(--scalar-button-1-hover)}:where(.scalar-app) .hocus\:text-c-1:hover{color:var(--scalar-color-1)}:where(.scalar-app) .hocus\:brightness-90:hover{--tw-brightness:brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}:where(.scalar-app) .hocus\:bg-border:hover{--tw-bg-base:var(--scalar-border-color)}:where(.scalar-app) .hocus\:bg-h-btn:hover{--tw-bg-base:var(--scalar-button-1-hover)}:where(.scalar-app) .hocus\:bg-border:focus-visible{background-color:var(--scalar-border-color)}:where(.scalar-app) .hocus\:bg-h-btn:focus-visible{background-color:var(--scalar-button-1-hover)}:where(.scalar-app) .hocus\:text-c-1:focus-visible{color:var(--scalar-color-1)}:where(.scalar-app) .hocus\:brightness-90:focus-visible{--tw-brightness:brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}:where(.scalar-app) .hocus\:bg-border:focus-visible{--tw-bg-base:var(--scalar-border-color)}:where(.scalar-app) .hocus\:bg-h-btn:focus-visible{--tw-bg-base:var(--scalar-button-1-hover)}@media (min-width: 800px){:where(.scalar-app) .md\:row{display:flex;flex-direction:row}}.loader-wrapper[data-v-47faceda]{position:relative;height:var(--d6cae758);width:var(--d6cae758);display:flex;align-items:center;justify-content:center;--loader-size: 50%}.svg-loader[data-v-47faceda]{width:var(--loader-size);height:var(--loader-size);top:1rem;right:.9rem;overflow:visible;fill:none;background-color:transparent;stroke:currentColor}.svg-path[data-v-47faceda]{stroke-width:14;fill:none;transition:.3s}.svg-x-mark[data-v-47faceda]{stroke-dasharray:57;stroke-dashoffset:57;transition-delay:0s}.svg-check-mark[data-v-47faceda]{stroke-dasharray:149;stroke-dashoffset:149;transition-delay:0s}.icon-is-invalid .svg-x-mark[data-v-47faceda],.icon-is-valid .svg-check-mark[data-v-47faceda]{stroke-dashoffset:0;transition-delay:.3s}.circular-loader[data-v-47faceda]{animation:rotate-47faceda .7s linear infinite,fade-in-47faceda .4s;transform-origin:center center;transform:scale(5);background:transparent}.loader-path[data-v-47faceda]{stroke-dasharray:50,200;stroke-dashoffset:-100;stroke-linecap:round}.loader-path-off[data-v-47faceda]{stroke-dasharray:50,200;stroke-dashoffset:-100;transition:opacity .3s;opacity:0}@keyframes fade-in-47faceda{0%{opacity:0}70%{opacity:0}to{opacity:1}}@keyframes rotate-47faceda{0%{transform:scale(5) rotate(0)}to{transform:scale(5) rotate(360deg)}}.scalar-codeblock-pre{margin:0;padding:.5rem;overflow:auto;background:transparent;text-wrap:nowrap;white-space-collapse:preserve;border-radius:0}.scalar-input-wrapper-focus .scalar-input-label[data-v-94574cc9]{color:var(--scalar-color-1)}.scalar-input-wrapper-error .scalar-input-label[data-v-94574cc9]{color:var(--scalar-color-error-color)}.scalar-input[data-v-94574cc9]::-moz-selection{color:var(--scalar-color-1);background:#ffa55859}.scalar-input[data-v-94574cc9]::selection{color:var(--scalar-color-1);background:#ffa55859}.scalar-input[data-v-94574cc9]:has(+.scalar-input-label){opacity:0}.scalar-input[data-v-94574cc9]:not(:-moz-placeholder-shown){opacity:1;-moz-transition:opacity .2s ease-in-out .15s;transition:opacity .2s ease-in-out .15s}.scalar-input[data-v-94574cc9]:not(:placeholder-shown),.scalar-input-wrapper-focus .scalar-input[data-v-94574cc9]{opacity:1;transition:opacity .2s ease-in-out .15s}.scalar-input[data-v-94574cc9]:-webkit-autofill,.scalar-input[data-v-94574cc9]:-webkit-autofill:hover,.scalar-input[data-v-94574cc9]:-webkit-autofill:focus,.scalar-input[data-v-94574cc9]:-webkit-autofill:active,.scalar-input[data-v-94574cc9]:focus-within:-webkit-autofill,.scalar-input[data-v-94574cc9]:focus-within:-webkit-autofill:hover,.scalar-input[data-v-94574cc9]:focus-within:-webkit-autofill:focus,.scalar-input[data-v-94574cc9]:focus-within:-webkit-autofill:active{-webkit-box-shadow:0 0 0px 1000px var(--scalar-background-1) inset!important;-webkit-text-fill-color:var(--scalar-color-1);color:var(--scalar-color-1);border-radius:var(--scalar-radius)}.scalar-input:not(:-moz-placeholder-shown)+.scalar-input-label[data-v-94574cc9]{transform:translate3d(0,-20px,0) scale(.8);transform-origin:top left}.scalar-input-wrapper-focus .scalar-input-label[data-v-94574cc9],.scalar-input:not(:placeholder-shown)+.scalar-input-label[data-v-94574cc9]{transform:translate3d(0,-20px,0) scale(.8);transform-origin:top left}.scalar-input-wrapper-focus:has(button:active) .scalar-input-label[data-v-94574cc9]{color:var(--scalar-color-3)!important}

package/package.json

@@ -10,7 +10,7 @@
     "url": "https://github.com/scalar/scalar.git",
     "directory": "packages/components"
   },
-  "version": "0.11.5",
+  "version": "0.12.0",
   "engines": {
     "node": ">=18"
   },
@@ -36,10 +36,11 @@
     "@vueuse/core": "^10.10.0",
     "cva": "1.0.0-beta.1",
     "nanoid": "^5.0.7",
+    "radix-vue": "^1.8.4",
     "tailwind-merge": "^2.3.0",
     "vue": "^3.4.22",
-    "@scalar/code-highlight": "0.0.3",
-    "@scalar/oas-utils": "0.2.3"
+    "@scalar/oas-utils": "0.2.3",
+    "@scalar/code-highlight": "0.0.4"
   },
   "devDependencies": {
     "@headlessui/tailwindcss": "^0.2.0",
@@ -64,7 +65,7 @@
     "storybook": "^8.0.8",
     "storybook-dark-mode": "^4.0.1",
     "svglint": "^2.7.1",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.4",
     "tailwindcss-color-mix": "^0.0.8",
     "ts-node": "^10.9.1",
     "typescript": "^5.4.3",
@@ -73,8 +74,8 @@
     "vite-svg-loader": "^5.1.0",
     "vitest": "^1.6.0",
     "vue-tsc": "^2.0.13",
-    "@scalar/themes": "0.9.4",
-    "@scalar/build-tooling": "0.1.6"
+    "@scalar/build-tooling": "0.1.6",
+    "@scalar/themes": "0.9.5"
   },
   "scripts": {
     "build": "run-p typegen:icons types:check \"build-only {@}\" --",