@scalar/components 0.0.5 → 0.2.0

package/dist/index.js

@@ -1,22 +1,26 @@
-import { defineComponent as p, useCssVars as j, openBlock as s, createElementBlock as u, normalizeClass as i, createElementVNode as b, createCommentVNode as m, createStaticVNode as H, reactive as T, useSlots as P, computed as S, unref as l, renderSlot as x, createVNode as y, defineAsyncComponent as Z, h as W, createBlock as w, withCtx as f, normalizeStyle as V, createTextVNode as E, toDisplayString as C, useAttrs as R, ref as L, onMounted as N, resolveDynamicComponent as K, mergeProps as U, withKeys as q } from "vue";
+import { defineComponent as g, useCssVars as O, openBlock as l, createElementBlock as d, normalizeClass as s, unref as a, createElementVNode as h, createCommentVNode as v, createStaticVNode as E, reactive as V, computed as $, useAttrs as T, mergeProps as Z, renderSlot as x, createVNode as k, defineAsyncComponent as N, h as W, createBlock as C, toDisplayString as y, withCtx as _, normalizeStyle as D, createTextVNode as R, ref as B, onMounted as K, resolveDynamicComponent as U, withKeys as q } from "vue";
 import { defineConfig as G } from "cva";
 import { extendTailwindMerge as J } from "tailwind-merge";
 import { Dialog as Q, DialogPanel as X, DialogTitle as Y, DialogDescription as ee } from "@headlessui/vue";
 import { useTextareaAutosize as te } from "@vueuse/core";
-import { nanoid as ae } from "nanoid";
-const oe = J({}), { cva: B, cx: g, compose: Ue } = G({
+import { nanoid as oe } from "nanoid";
+const L = "scalar-component", re = J({
+  extend: {
+    classGroups: {
+      // Add the scalar class prefix as a custom class to be deduped by tailwind-merge
+      [L]: [L]
+    }
+  }
+}), { cva: m, cx: c, compose: et } = G({
   hooks: {
-    onComplete: (a) => oe(a)
+    onComplete: (o) => `${re(o, L)}`
   }
-}), re = {
-  key: 0,
-  class: "loader-wrapper"
-}, le = /* @__PURE__ */ H('<path class="svg-path svg-check-mark" d="m 0 60 l 30 30 l 70 -80" data-v-9483a281></path><path class="svg-path svg-x-mark" d="m 50 50 l 40 -40" data-v-9483a281></path><path class="svg-path svg-x-mark" d="m 50 50 l 40 40" data-v-9483a281></path><path class="svg-path svg-x-mark" d="m 50 50 l -40 -40" data-v-9483a281></path><path class="svg-path svg-x-mark" d="m 50 50 l -40 40" data-v-9483a281></path>', 5), ne = {
+}), ae = /* @__PURE__ */ E('<path class="svg-path svg-check-mark" d="m 0 60 l 30 30 l 70 -80" data-v-0f0b7a55></path><path class="svg-path svg-x-mark" d="m 50 50 l 40 -40" data-v-0f0b7a55></path><path class="svg-path svg-x-mark" d="m 50 50 l 40 40" data-v-0f0b7a55></path><path class="svg-path svg-x-mark" d="m 50 50 l -40 -40" data-v-0f0b7a55></path><path class="svg-path svg-x-mark" d="m 50 50 l -40 40" data-v-0f0b7a55></path>', 5), ne = {
   key: 0,
   class: "circular-loader"
 };
-function qe() {
-  return T({
+function tt() {
+  return V({
     isValid: !1,
     isInvalid: !1,
     isLoading: !1,
@@ -26,53 +30,56 @@ function qe() {
     stopLoading() {
       this.isLoading = !1;
     },
-    validate(a = 800) {
+    validate(o = 800) {
       this.isValid = !0;
-      const e = a - 300;
+      const t = o - 300;
       return new Promise(
-        (t) => setTimeout(() => this.clear().then(() => t(!0)), e)
+        (e) => setTimeout(() => this.clear().then(() => e(!0)), t)
       );
     },
-    invalidate(a = 1100) {
+    invalidate(o = 1100) {
       this.isInvalid = !0;
-      const e = a - 300;
+      const t = o - 300;
       return new Promise(
-        (t) => setTimeout(() => this.clear().then(() => t(!0)), e)
+        (e) => setTimeout(() => this.clear().then(() => e(!0)), t)
       );
     },
-    clear(a = 300) {
-      return this.isValid = !1, this.isInvalid = !1, this.isLoading = !1, new Promise((e) => {
+    clear(o = 300) {
+      return this.isValid = !1, this.isInvalid = !1, this.isLoading = !1, new Promise((t) => {
         setTimeout(() => {
-          e(!0);
-        }, a);
+          t(!0);
+        }, o);
       });
     }
   });
 }
-const se = /* @__PURE__ */ p({
+const le = /* @__PURE__ */ g({
   __name: "ScalarLoading",
   props: {
     loadingState: {},
     size: { default: "24px" }
   },
-  setup(a) {
-    return j((e) => ({
-      "68e6c412": e.size
-    })), (e, t) => e.loadingState ? (s(), u("div", re, [
-      (s(), u("svg", {
-        class: i(["svg-loader", {
-          "icon-is-valid": e.loadingState.isValid,
-          "icon-is-invalid": e.loadingState.isInvalid
+  setup(o) {
+    return O((t) => ({
+      "50aa2fee": t.size
+    })), (t, e) => t.loadingState ? (l(), d("div", {
+      key: 0,
+      class: s(a(c)("loader-wrapper"))
+    }, [
+      (l(), d("svg", {
+        class: s(["svg-loader", {
+          "icon-is-valid": t.loadingState.isValid,
+          "icon-is-invalid": t.loadingState.isInvalid
         }]),
         viewBox: "0 0 100 100",
         xmlns: "http://www.w3.org/2000/svg",
         "xmlns:xlink": "http://www.w3.org/1999/xlink"
       }, [
-        le,
-        e.loadingState.isLoading ? (s(), u("g", ne, [
-          b("circle", {
-            class: i(["loader-path", {
-              "loader-path-off": e.loadingState.isValid || e.loadingState.isInvalid
+        ae,
+        t.loadingState.isLoading ? (l(), d("g", ne, [
+          h("circle", {
+            class: s(["loader-path", {
+              "loader-path-off": t.loadingState.isValid || t.loadingState.isInvalid
             }]),
             cx: "50",
             cy: "50",
@@ -80,143 +87,141 @@ const se = /* @__PURE__ */ p({
             r: "20",
             "stroke-width": "2"
           }, null, 2)
-        ])) : m("", !0)
+        ])) : v("", !0)
       ], 2))
-    ])) : m("", !0);
+    ], 2)) : v("", !0);
   }
 });
-const z = (a, e) => {
-  const t = a.__vccOpts || a;
-  for (const [n, o] of e)
-    t[n] = o;
-  return t;
-}, $ = /* @__PURE__ */ z(se, [["__scopeId", "data-v-9483a281"]]), ie = ["aria-disabled", "aria-label", "title"], de = {
-  key: 1,
-  class: "ml-2"
-}, ce = B({
-  base: "scalar-button row items-center justify-center rounded font-medium",
+const z = (o, t) => {
+  const e = o.__vccOpts || o;
+  for (const [n, i] of t)
+    e[n] = i;
+  return e;
+}, F = /* @__PURE__ */ z(le, [["__scopeId", "data-v-0f0b7a55"]]), j = {
+  solid: [
+    "scalar-button-solid",
+    "bg-back-btn-1 text-fore-btn-1 shadow-sm active:bg-back-btn-1 active:shadow-none hocus:bg-hover-btn-1"
+  ],
+  outlined: [
+    "scalar-button-outlined",
+    "active:bg-btn-1 border border-solid border-border bg-transparent text-fore-1 hocus:bg-back-2"
+  ],
+  ghost: [
+    "scalar-button-ghost",
+    "bg-transparent text-fore-3 active:text-fore-2 hocus:text-fore-2"
+  ],
+  danger: [
+    "scalar-button-danger",
+    "bg-error text-white active:brightness-90 hocus:brightness-90"
+  ]
+}, se = m({
+  base: "scalar-button row cursor-pointer items-center justify-center rounded font-medium",
   variants: {
-    isDisabled: { true: "bg-background-2 text-color-3 shadow-none" },
-    isFullWidth: { true: "w-full" },
-    isIconOnly: { true: "scalar-button-icon" },
+    disabled: {
+      true: "bg-background-2 text-color-3 cursor-not-allowed shadow-none"
+    },
+    fullWidth: { true: "w-full" },
     size: { md: "h-10 px-6 text-sm" },
-    variant: {
-      solid: [
-        "scalar-button-solid",
-        "bg-back-btn-1 text-fore-btn-1 shadow-sm active:bg-back-btn-1 active:shadow-none hocus:bg-hover-btn-1"
-      ].join(" "),
-      outlined: [
-        "scalar-button-outlined",
-        "active:bg-btn-1 border border-border bg-transparent text-fore-1 hocus:bg-back-2"
-      ].join(" "),
-      ghost: [
-        "scalar-button-ghost",
-        "bg-transparent text-fore-3 active:text-fore-2 hocus:text-fore-2"
-      ].join(" "),
-      danger: [
-        "scalar-button-danger",
-        "bg-error text-white active:brightness-90 hocus:brightness-90"
-      ].join(" ")
-    }
+    variant: j
   },
   compoundVariants: [
     {
-      isDisabled: !0,
+      disabled: !0,
       variant: "ghost",
       class: "bg-transparent text-ghost"
-    },
-    {
-      isIconOnly: !0,
-      size: "md",
-      class: "h-10 w-10 p-2"
     }
   ]
-}), I = /* @__PURE__ */ p({
+}), ie = ["ariaDisabled"], de = {
+  key: 0,
+  class: "mr-2 h-4 w-4"
+}, ce = {
+  key: 1,
+  class: "ml-2"
+}, ue = /* @__PURE__ */ g({
+  inheritAttrs: !1,
   __name: "ScalarButton",
   props: {
-    isDisabled: { type: Boolean, default: !1 },
-    isFullWidth: { type: Boolean, default: !1 },
-    loadingState: {},
+    disabled: { type: Boolean },
+    fullWidth: { type: Boolean, default: !1 },
+    loading: {},
     size: { default: "md" },
-    variant: { default: "solid" },
-    title: {}
+    variant: { default: "solid" }
   },
-  setup(a) {
-    const e = P(), t = S(
-      () => {
-        var o, d, v, h;
-        return (h = (v = (d = (o = e.default) == null ? void 0 : o.call(e)) == null ? void 0 : d[0]) == null ? void 0 : v.children) == null ? void 0 : h.trim();
-      }
-    ), n = S(() => !!(e.icon && !e.default));
-    return (o, d) => (s(), u("button", {
-      "aria-disabled": o.isDisabled,
-      "aria-label": t.value || o.title,
-      class: i(
-        l(g)(
-          l(ce)({
-            isFullWidth: o.isFullWidth,
-            isIconOnly: n.value,
-            isDisabled: o.isDisabled,
-            size: o.size,
-            variant: o.variant
-          }),
-          { "pl-9 pr-3": o.loadingState }
-        )
+  setup(o) {
+    const t = $(() => {
+      const { class: e, ...n } = T();
+      return { className: e || "", rest: n };
+    });
+    return (e, n) => (l(), d("button", Z(t.value.rest, {
+      ariaDisabled: e.disabled || void 0,
+      class: a(c)(
+        a(se)({ fullWidth: e.fullWidth, disabled: e.disabled, size: e.size, variant: e.variant }),
+        { "pl-9 pr-3": e.loading },
+        `${t.value.className}`
       ),
-      title: o.title || t.value,
       type: "button"
-    }, [
-      o.$slots.icon ? (s(), u("div", {
-        key: 0,
-        class: i(l(g)({ "mr-2": !n.value }, "h-4 w-4"))
-      }, [
-        x(o.$slots, "icon")
-      ], 2)) : m("", !0),
-      x(o.$slots, "default"),
-      o.loadingState ? (s(), u("div", de, [
-        y(l($), {
-          loadingState: o.loadingState,
+    }), [
+      e.$slots.icon ? (l(), d("div", de, [
+        x(e.$slots, "icon")
+      ])) : v("", !0),
+      x(e.$slots, "default"),
+      e.loading ? (l(), d("div", ce, [
+        k(a(F), {
+          loadingState: e.loading,
           size: "20px"
         }, null, 8, ["loadingState"])
-      ])) : m("", !0)
-    ], 10, ie));
+      ])) : v("", !0)
+    ], 16, ie));
   }
-}), ue = (a) => Object.fromEntries(Array.from(a).map((e) => [e.name, e.value])), ve = (a) => ({ raw: e }) => {
-  const n = new a().parseFromString(e, "image/svg+xml");
+}), ve = (o) => Object.fromEntries(Array.from(o).map((t) => [t.name, t.value])), he = (o) => ({ raw: t }) => {
+  const n = new o().parseFromString(t, "image/svg+xml");
   if (n.getElementsByTagName("parsererror").length)
     return;
-  const o = n.documentElement, d = ue(o.attributes), { width: v, height: h, ..._ } = d;
-  return W("svg", { ..._, innerHTML: o.innerHTML });
-}, he = Z(async () => {
-  const a = typeof DOMParser > "u" ? (await import("@xmldom/xmldom")).DOMParser : DOMParser, e = ve(a);
-  return e.props = {
+  const i = n.documentElement, p = ve(i.attributes), { width: f, height: w, ...b } = p;
+  return W("svg", { ...b, innerHTML: i.innerHTML });
+}, ge = N(async () => {
+  const o = typeof DOMParser > "u" ? (await import("@xmldom/xmldom")).DOMParser : DOMParser, t = he(o);
+  return t.props = {
     raw: {
       type: String,
       required: !0
     }
-  }, e;
-}), me = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  }, t;
+}), pe = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
     <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.429"
         d="M24 1.714v44.572M1.714 24h44.572" />
-</svg>`, ge = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 23.5" fill="currentColor">
+</svg>`, me = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 23.5" fill="currentColor">
     <path d="M11.2 23.5 0 12.3l2.15-2.15 9.05 9.05L30.4 0l2.15 2.15z" />
-</svg>`, pe = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path d="m19.5 8.25-7.5 7.5-7.5-7.5" />
 </svg>`, fe = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+</svg>`, we = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
     <path d="M15.75 19.5 8.25 12l7.5-7.5" />
 </svg>`, be = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
     <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
-</svg>`, we = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+</svg>`, _e = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
     <path d="m4.5 15.75 7.5-7.5 7.5 7.5" />
-</svg>`, _e = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+</svg>`, xe = `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
+    <path d="M6,5h4c1.7,0,2-1.3,2-3c1.1,0,2,0.9,2,2v10c0,1.1-0.9,2-2,2H4c-1.1,0-2-0.9-2-2V4c0-1.1,0.9-2,2-2C4,3.7,4.3,5,6,5z M6,2V1
+	c0-0.6,0.5-1,1-1h2c0.5,0,1,0.4,1,1v1.3C10,2.9,9.6,3,9,3H7C6.4,3,6,2.6,6,2z" />
+</svg>`, ke = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
     <path stroke="currentColor" d="m12.5 1.5-11 11m0-11 11 11" />
-</svg>`, xe = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+</svg>`, Ce = `<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M9.557,7.243A.456.456,0,0,0,9.1,6.991C9.023,7,8.951,7,8.877,7A4,4,0,0,1,5.546.781.5.5,0,0,0,5.564.256.476.476,0,0,0,5.1,0,5,5,0,1,0,9.539,7.767.5.5,0,0,0,9.557,7.243Z"
+        fill="currentColor" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
+</svg>`, ye = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
     <path
         d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
-</svg>`, ye = `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 1024 1024">
+</svg>`, Me = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9">
+    <g fill="none" fill-rule="evenodd" transform="translate(.67 .67)">
+        <rect transform="rotate(180 4 4)" />
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"
+            d="M2.85 1.73h3.4v3.4m0-3.4L1.74 6.24" />
+    </g>
+</svg>`, Le = `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 1024 1024">
     <path
         d="M512 0a512 512 0 0 0-162 998c26 4 35-11 35-25l-1-95c-128 23-161-32-172-60-6-15-31-61-52-73-18-10-44-33-1-33 40-1 69 37 78 52 46 78 120 56 149 43 5-33 18-56 33-69-114-13-234-56-234-253 0-56 20-101 53-137-5-13-23-65 5-136 0 0 43-13 141 53a487 487 0 0 1 256 0c98-66 141-53 141-53 28 71 10 123 5 136 33 36 53 81 53 137 0 197-120 240-234 253 18 16 35 47 35 95l-1 140c0 14 9 30 35 25A512 512 0 0 0 512 0z" />
-</svg>`, ke = `<svg
+</svg>`, ze = `<svg
   height="24"
   viewBox="0 0 24 24"
   width="24"
@@ -225,63 +230,117 @@ const z = (a, e) => {
     d="M24 12a1 1 0 0 0 -1 -1h-3.91a0.51 0.51 0 0 1 -0.49 -0.4 6.83 6.83 0 0 0 -0.94 -2.28 0.5 0.5 0 0 1 0.06 -0.63l2.77 -2.76a1 1 0 1 0 -1.42 -1.42l-2.76 2.77a0.5 0.5 0 0 1 -0.63 0.06 6.83 6.83 0 0 0 -2.28 -0.94 0.5 0.5 0 0 1 -0.4 -0.49V1a1 1 0 0 0 -2 0v3.91a0.51 0.51 0 0 1 -0.4 0.49 6.83 6.83 0 0 0 -2.28 0.94 0.5 0.5 0 0 1 -0.63 -0.06L4.93 3.51a1 1 0 0 0 -1.42 1.42l2.77 2.76a0.5 0.5 0 0 1 0.06 0.63 6.83 6.83 0 0 0 -0.94 2.28 0.5 0.5 0 0 1 -0.49 0.4H1a1 1 0 0 0 0 2h3.91a0.51 0.51 0 0 1 0.49 0.4 6.83 6.83 0 0 0 0.94 2.28 0.5 0.5 0 0 1 -0.06 0.63l-2.77 2.76a1 1 0 1 0 1.42 1.42l2.76 -2.77a0.5 0.5 0 0 1 0.63 -0.06 6.83 6.83 0 0 0 2.28 0.94 0.5 0.5 0 0 1 0.4 0.49V23a1 1 0 0 0 2 0v-3.91a0.51 0.51 0 0 1 0.4 -0.49 6.83 6.83 0 0 0 2.28 -0.94 0.5 0.5 0 0 1 0.63 0.06l2.76 2.77a1 1 0 1 0 1.42 -1.42l-2.77 -2.76a0.5 0.5 0 0 1 -0.06 -0.63 6.83 6.83 0 0 0 0.94 -2.28 0.5 0.5 0 0 1 0.49 -0.4H23a1 1 0 0 0 1 -1Zm-8.74 2.5A5.76 5.76 0 0 1 9.5 8.74a5.66 5.66 0 0 1 0.16 -1.31 0.49 0.49 0 0 1 0.34 -0.36 5.36 5.36 0 0 1 1.8 -0.31 5.47 5.47 0 0 1 5.46 5.46 5.36 5.36 0 0 1 -0.31 1.8 0.49 0.49 0 0 1 -0.35 0.32 5.53 5.53 0 0 1 -1.34 0.16Z"
     fill="currentColor"
     stroke-width="1"></path>
-</svg>`, Se = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 593 593">
+</svg>`, Se = `<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.500 5.000 A1.500 1.500 0 1 0 6.500 5.000 A1.500 1.500 0 1 0 3.500 5.000 Z" fill="currentColor"
+        stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
+    <path d="M5,2.25a.625.625,0,0,1-.625-.625v-1a.625.625,0,0,1,1.25,0v1A.625.625,0,0,1,5,2.25Z" fill="currentColor"
+        stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
+    <path d="M6.945,3.055a.623.623,0,0,1,0-.883l.707-.708a.625.625,0,0,1,.884.884l-.708.707A.623.623,0,0,1,6.945,3.055Z"
+        fill="currentColor" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
+    <path d="M7.75,5a.625.625,0,0,1,.625-.625h1a.625.625,0,0,1,0,1.25h-1A.625.625,0,0,1,7.75,5Z" fill="currentColor"
+        stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
+    <path d="M6.945,6.945a.623.623,0,0,1,.883,0l.708.707a.625.625,0,0,1-.884.884l-.707-.708A.623.623,0,0,1,6.945,6.945Z"
+        fill="currentColor" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
+    <path d="M5,7.75a.625.625,0,0,1,.625.625v1a.625.625,0,0,1-1.25,0v-1A.625.625,0,0,1,5,7.75Z" fill="currentColor"
+        stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
+    <path
+        d="M3.055,6.945a.623.623,0,0,1,0,.883l-.707.708a.625.625,0,0,1-.884-.884l.708-.707A.623.623,0,0,1,3.055,6.945Z"
+        fill="currentColor" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
+    <path d="M2.25,5a.625.625,0,0,1-.625.625h-1a.625.625,0,0,1,0-1.25h1A.625.625,0,0,1,2.25,5Z" fill="currentColor"
+        stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
+    <path
+        d="M3.055,3.055a.623.623,0,0,1-.883,0l-.708-.707a.625.625,0,0,1,.884-.884l.707.708A.623.623,0,0,1,3.055,3.055Z"
+        fill="currentColor" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
+</svg>`, Be = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 593 593">
     <path fill="currentColor" fill-rule="evenodd"
         d="M347 0c6 0 12 5 12 12v134l94-95c5-5 13-5 17 0l72 72c4 4 5 12 0 16v1l-95 94h134c7 0 12 5 12 12v101c0 7-5 12-12 12H447l95 94c4 5 5 13 0 17l-72 72c-4 4-12 5-16 0h-1l-94-95v134c0 7-5 12-12 12H246c-7 0-12-5-12-12v-70c0-22 9-43 24-59l130-130c14-14 14-37 0-51L259 142a84 84 0 0 1-25-59V12c0-7 5-12 12-12h101ZM138 52h1l219 219c14 14 14 37 0 51L139 542c-4 5-12 5-17 0l-71-70c-4-5-5-12 0-17l95-96H12c-7 0-12-5-12-12V246c0-7 5-12 12-12h134l-95-94c-4-5-4-12 0-17l71-71c4-5 12-5 16 0Z" />
-</svg>`, Ce = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 662 662">
+</svg>`, Ae = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 662 662">
     <path fill-rule="evenodd" fill="currentColor"
         d="M331 0a331 331 0 1 1 0 662 331 331 0 0 1 0-662Zm148.5 109 .6.9a187 187 0 1 1-297.6-.9 267 267 0 1 0 297 0Z" />
-</svg>`, Be = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 620 620">
+</svg>`, Ve = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 620 620">
     <path fill="currentColor"
         d="M-.653 309.29c-.078 82.272 31.848 159.735 89.739 218.178l.283.283c122.379 121.247 319.824 121.184 440.16-.283 119.967-121.1 119.409-316.933-.998-437.339l-.99-.99C468.681 30.845 390.716-1.017 307.893-.67c-82.83.354-160.443 32.994-218.814 91.79C31.209 149.555-.724 227.025-.653 309.29Zm469.271-160.789.778.778c87.9 87.9 88.325 231.005.707 319.33-77.753 78.46-199.786 87.412-288.959 26.862l198.513-198.513-.007 166.361 83.68-.07v-306.22H157.11l-.008 83.6h160.584L121.994 436.323c-59.347-87.689-50.536-208.59 26.51-286.343C236.34 61.294 379.94 60.67 468.61 148.494Z" />
-</svg>`, ze = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 642 642" fill="currentColor">
+</svg>`, $e = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 642 642" fill="currentColor">
     <path
         d="M321 0a321 321 0 1 1 0 642 321 321 0 0 1 0-642Zm51.3 63L321 189.5 269.7 63l1 136.5-95.8-97.2L228 228l-125.7-53.1 97.2 95.8-136.5-1L189.5 321 63 372.3l136.5-1-97.2 95.8 125.7-53-53.1 125.6 95.8-97.2-1 136.5L321 452.5 372.3 579l-1-136.5 95.8 97.2-53-125.7 125.6 53.1-97.2-95.8 136.5 1L452.5 321 579 269.7l-136.5 1 97.2-95.8L414 228l53.1-125.7-95.8 97.2 1-136.5Z" />
-</svg>`, Me = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 620 620" fill="currentColor">
+</svg>`, Te = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 620 620" fill="currentColor">
     <path
         d="M529.2 90.8A310 310 0 1 0 90.8 529.2 310 310 0 0 0 529.2 90.8M122.4 498.2c-54.9-55-15.4-183.5 88.2-287 103.6-103.7 232.1-143.2 287-88.3 54.9 54.8 15.4 183.4-88.3 287-103.5 103.6-232 143.1-286.9 88.3m261.8-262.7A104.7 104.7 0 1 1 236 383.7a104.7 104.7 0 0 1 148.2-148.2" />
-</svg>`, Le = `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 14 14">
+</svg>`, Ze = `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 14 14">
     <path fill="none" stroke="currentColor" d="M14 3.4H0m14 7.2H0" />
+</svg>`, De = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+    <path fill="currentColor" fill-rule="evenodd"
+        d="M11.8214 0.0977942C12.1097 -0.00745677 12.4219 -0.0286524 12.7219 0.0367783C13.0248 0.102864 13.3024 0.254542 13.5216 0.47378C13.7408 0.693018 13.8925 0.970598 13.9586 1.27352C14.024 1.57344 14.0028 1.88572 13.8976 2.17395L10.3236 12.8859L10.3234 12.8866C10.2363 13.1501 10.083 13.3868 9.8781 13.574C9.6738 13.7606 9.42509 13.8918 9.15572 13.9549C8.8863 14.0206 8.60441 14.0151 8.33774 13.9389C8.07131 13.8628 7.82926 13.7187 7.63529 13.5209L5.71795 11.6124L3.70389 12.6538C3.54684 12.7351 3.35857 12.7273 3.20874 12.6334C3.05892 12.5395 2.96981 12.3735 2.9744 12.1967L3.05697 9.013L10.1019 3.8956C10.3812 3.69273 10.4432 3.30188 10.2403 3.02261C10.0374 2.74333 9.64659 2.68139 9.36731 2.88425L2.20283 8.08846L0.473125 6.35875L0.473067 6.3587L0.472941 6.35857C0.285618 6.17138 0.147716 5.9406 0.0716193 5.68694C-0.00393616 5.43509 -0.0162115 5.16853 0.0358379 4.91085C0.0879545 4.62934 0.213796 4.36664 0.400577 4.14957C0.588637 3.93101 0.83165 3.76664 1.1045 3.67345L1.10787 3.6723L1.10787 3.67231L11.8214 0.0977942Z"
+        clip-rule="evenodd"></path>
 </svg>`, Fe = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
     <path fill-rule="evenodd"
         d="M12.6 11.2h.1l3 3a1 1 0 1 1-1.4 1.5l-3-3a1 1 0 0 1-.1-.1 7 7 0 1 1 1.4-1.4zM7 12A5 5 0 1 0 7 2a5 5 0 0 0 0 10z" />
-</svg>`, F = /* @__PURE__ */ Object.assign({ "./Add.svg": me, "./CheckMark.svg": ge, "./ChevronDown.svg": pe, "./ChevronLeft.svg": fe, "./ChevronRight.svg": be, "./ChevronUp.svg": we, "./Close.svg": _e, "./Ellipses.svg": xe, "./GitHub.svg": ye, "./LightDarkModeToggle.svg": ke, "./Logo.svg": Se, "./LogoAPI.svg": Ce, "./LogoClient.svg": Be, "./LogoMarket.svg": ze, "./LogoSwagger.svg": Me, "./Menu.svg": Le, "./Search.svg": Fe }), Te = (a) => {
-  const e = `./${a}.svg`;
-  return F[e] === void 0 ? (console.warn(`Could not find icon: ${a}`), "") : F[e];
-}, D = /* @__PURE__ */ p({
+</svg>`, A = /* @__PURE__ */ Object.assign({ "./Add.svg": pe, "./CheckMark.svg": me, "./ChevronDown.svg": fe, "./ChevronLeft.svg": we, "./ChevronRight.svg": be, "./ChevronUp.svg": _e, "./Clipboard.svg": xe, "./Close.svg": ke, "./DarkMode.svg": Ce, "./Ellipses.svg": ye, "./ExternalLink.svg": Me, "./GitHub.svg": Le, "./LightDarkModeToggle.svg": ze, "./LightMode.svg": Se, "./Logo.svg": Be, "./LogoAPI.svg": Ae, "./LogoClient.svg": Ve, "./LogoMarket.svg": $e, "./LogoSwagger.svg": Te, "./Menu.svg": Ze, "./PaperAirplane.svg": De, "./Search.svg": Fe }), je = (o) => {
+  const t = `./${o}.svg`;
+  return A[t] === void 0 ? (console.warn(`Could not find icon: ${o}`), "") : A[t];
+}, I = /* @__PURE__ */ g({
   __name: "ScalarIcon",
   props: {
-    name: {}
+    icon: {},
+    size: {}
   },
-  setup(a) {
-    const e = a, t = S(() => Te(e.name));
-    return (n, o) => t.value ? (s(), w(l(he), {
+  setup(o) {
+    const t = o, e = m({
+      variants: {
+        size: {
+          xs: "h-3 w-3",
+          sm: "h-3.5 w-3.5",
+          md: "h-4 w-4",
+          lg: "h-5 w-5",
+          xl: "h-6 w-6",
+          full: "h-full w-full"
+        }
+      },
+      defaultVariants: {
+        size: "full"
+      }
+    }), n = $(() => je(t.icon));
+    return (i, p) => n.value ? (l(), C(a(ge), {
       key: 0,
-      class: "flow-icon",
-      height: "100%",
-      raw: t.value,
-      width: "100%"
-    }, null, 8, ["raw"])) : m("", !0);
+      class: s(a(c)("scalar-icon", a(e)({ size: i.size }))),
+      raw: n.value
+    }, null, 8, ["class", "raw"])) : v("", !0);
   }
-}), Ve = /* @__PURE__ */ p({
+}), Ie = ["ariaDisabled"], Pe = { class: "sr-only" }, He = /* @__PURE__ */ g({
   __name: "ScalarIconButton",
   props: {
     label: {},
     icon: {},
-    variant: { default: "ghost" }
+    disabled: { type: Boolean },
+    variant: { default: "ghost" },
+    size: { default: "md" }
   },
-  setup(a) {
-    return (e, t) => (s(), w(l(I), {
-      title: e.label,
-      variant: e.variant
-    }, {
-      icon: f(() => [
-        y(l(D), { name: e.icon }, null, 8, ["name"])
-      ]),
-      _: 1
-    }, 8, ["title", "variant"]));
+  setup(o) {
+    const t = m({
+      base: "scalar-icon-button grid aspect-square cursor-pointer rounded",
+      variants: {
+        size: {
+          xs: "h-3.5 w-3.5 p-0.5",
+          sm: "h-5 w-5 p-1",
+          md: "h-10 w-10 p-3",
+          full: "h-full w-full"
+        },
+        disabled: {
+          true: "cursor-not-allowed shadow-none"
+        },
+        variant: j
+      }
+    });
+    return (e, n) => (l(), d("button", {
+      ariaDisabled: e.disabled || void 0,
+      class: s(a(c)(a(t)({ size: e.size, variant: e.variant, disabled: e.disabled }))),
+      type: "button"
+    }, [
+      k(a(I), { icon: e.icon }, null, 8, ["icon"]),
+      h("span", Pe, y(e.label), 1)
+    ], 10, Ie));
   }
-}), $e = { class: "scalar-modal-layout fixed left-0 top-0 z-[1001] h-[100dvh] w-[100dvw] bg-backdrop p-5 opacity-0" }, Ge = () => T({
+}), ot = () => V({
   open: !1,
   show() {
     this.open = !0;
@@ -289,7 +348,7 @@ const z = (a, e) => {
   hide() {
     this.open = !1;
   }
-}), Ie = /* @__PURE__ */ p({
+}), Oe = /* @__PURE__ */ g({
   __name: "ScalarModal",
   props: {
     state: {},
@@ -299,8 +358,8 @@ const z = (a, e) => {
     size: { default: "md" },
     variant: {}
   },
-  setup(a) {
-    const e = B({
+  setup(o) {
+    const t = m({
       base: [
         "scalar-modal",
         "col relative mx-auto mb-0 mt-20 w-full rounded-lg bg-back-2 text-left leading-snug text-fore-1 opacity-0"
@@ -318,51 +377,59 @@ const z = (a, e) => {
         }
       }
     });
-    return (t, n) => (s(), w(l(Q), {
-      open: t.state.open,
-      onClose: n[0] || (n[0] = (o) => t.state.hide())
+    return (e, n) => (l(), C(a(Q), {
+      open: e.state.open,
+      onClose: n[0] || (n[0] = (i) => e.state.hide())
     }, {
-      default: f(() => [
-        b("div", $e, [
-          y(l(X), {
-            class: i(l(e)({ size: t.size, variant: t.variant })),
-            style: V({ maxWidth: t.maxWidth })
+      default: _(() => [
+        h("div", {
+          class: s(
+            a(c)(
+              "scalar-modal-layout fixed left-0 top-0",
+              "z-[1001] h-[100dvh] w-[100dvw]",
+              "bg-backdrop p-5 opacity-0"
+            )
+          )
+        }, [
+          k(a(X), {
+            class: s(a(t)({ size: e.size, variant: e.variant })),
+            style: D({ maxWidth: e.maxWidth })
           }, {
-            default: f(() => [
-              t.title ? (s(), w(l(Y), {
+            default: _(() => [
+              e.title ? (l(), C(a(Y), {
                 key: 0,
-                class: i(["scalar-modal-header font-semiBold m-0 rounded-lg px-6 py-3 text-left text-xs text-fore-1", { "pb-0 pt-6": t.variant === "history" }])
+                class: s(["scalar-modal-header font-semiBold m-0 rounded-lg px-6 py-3 text-left text-xs text-fore-1", { "pb-0 pt-6": e.variant === "history" }])
               }, {
-                default: f(() => [
-                  E(C(t.title), 1)
+                default: _(() => [
+                  R(y(e.title), 1)
                 ]),
                 _: 1
-              }, 8, ["class"])) : m("", !0),
-              y(l(ee), {
-                class: i([
-                  "scalar-modal-body relative max-h-[calc(100dvh-240px)] overflow-y-auto rounded-lg bg-back-1 py-6 pb-4 pt-3",
-                  l(g)(
-                    t.bodyClass,
-                    t.variant === "history" && "pt-3",
-                    t.variant === "search" && "col max-h-[440px] overflow-hidden p-0"
+              }, 8, ["class"])) : v("", !0),
+              k(a(ee), {
+                class: s([
+                  "scalar-modal-body relative max-h-[calc(100dvh-240px)] overflow-y-auto rounded-lg bg-back-1 px-6 pb-4 pt-6",
+                  a(c)(
+                    e.bodyClass,
+                    e.variant === "history" && "pt-3",
+                    e.variant === "search" && "col max-h-[440px] overflow-hidden p-0"
                   )
                 ])
               }, {
-                default: f(() => [
-                  x(t.$slots, "default", {}, void 0, !0)
+                default: _(() => [
+                  x(e.$slots, "default", {}, void 0, !0)
                 ]),
                 _: 3
               }, 8, ["class"])
             ]),
             _: 3
           }, 8, ["class", "style"])
-        ])
+        ], 2)
       ]),
       _: 3
     }, 8, ["open"]));
   }
 });
-const De = /* @__PURE__ */ z(Ie, [["__scopeId", "data-v-4ee157b1"]]), Oe = { class: "scalar-input-container relative" }, Ae = ["for"], je = { class: "icon-slot cursor-pointer text-ghost hover:text-fore-1 !empty:flex !empty:w-7 !empty:items-center !empty:pr-3" }, He = /* @__PURE__ */ p({
+const Ee = /* @__PURE__ */ z(Oe, [["__scopeId", "data-v-bc6a9e27"]]), Ne = { class: "scalar-input-container relative" }, We = ["for"], Re = { class: "icon-slot cursor-pointer text-ghost hover:text-fore-1 !empty:flex !empty:w-7 !empty:items-center !empty:pr-3" }, Ke = /* @__PURE__ */ g({
   __name: "ScalarTextField",
   props: {
     modelValue: {},
@@ -378,48 +445,48 @@ const De = /* @__PURE__ */ z(Ie, [["__scopeId", "data-v-4ee157b1"]]), Oe = { cla
     disableTrim: { type: Boolean, default: !1 }
   },
   emits: ["submit", "update:modelValue"],
-  setup(a, { emit: e }) {
-    const t = a, n = B({
-      base: "scalar-input-wrapper relative flex items-center rounded border border-border",
+  setup(o, { emit: t }) {
+    const e = o, n = m({
+      base: "scalar-input-wrapper relative flex items-center rounded border border-solid border-border",
       variants: {
         focus: {
           true: "scalar-input-wrapper-focus border-fore-3 has-actv-btn:border has-actv-btn:border-border"
         },
         error: { true: "scalar-input-wrapper-error border-error" }
       }
-    }), o = R(), d = o.id || `id-${ae()}`, v = L(), h = L(!1);
-    let _;
-    if (t.isMultiline) {
+    }), i = T(), p = i.id || `id-${oe()}`, f = B(), w = B(!1);
+    let b;
+    if (e.isMultiline) {
       const { triggerResize: r } = te({
-        element: v,
-        input: t.modelValue
+        element: f,
+        input: e.modelValue
       });
-      _ = r;
+      b = r;
     }
-    function O(r) {
-      const c = r.target.value;
-      t.isMultiline && _(), t.handleFieldChange ? t.handleFieldChange(c) : e("update:modelValue", c);
+    function P(r) {
+      const u = r.target.value;
+      e.isMultiline && b(), e.handleFieldChange ? e.handleFieldChange(u) : t("update:modelValue", u);
     }
-    function M(r) {
-      const c = r.target, k = t.disableTrim || t.isMultiline ? c.value : c.value.trim();
-      t.handleFieldSubmit ? t.handleFieldSubmit(k) : e("submit", k);
+    function S(r) {
+      const u = r.target, M = e.disableTrim || e.isMultiline ? u.value : u.value.trim();
+      e.handleFieldSubmit ? e.handleFieldSubmit(M) : t("submit", M);
     }
-    function A(r) {
-      h.value = !1, t.emitOnBlur && t.modelValue && M(r);
+    function H(r) {
+      w.value = !1, e.emitOnBlur && e.modelValue && S(r);
     }
-    return N(() => {
+    return K(() => {
       var r;
-      Object.prototype.hasOwnProperty.call(o, "autofocus") && ((r = v.value) == null || r.focus());
-    }), (r, c) => (s(), u("div", Oe, [
-      b("div", {
-        class: i(l(n)({ error: r.error, focus: h.value }))
+      Object.prototype.hasOwnProperty.call(i, "autofocus") && ((r = f.value) == null || r.focus());
+    }), (r, u) => (l(), d("div", Ne, [
+      h("div", {
+        class: s(a(n)({ error: r.error, focus: w.value }))
       }, [
-        (s(), w(K(r.isMultiline ? "textarea" : "input"), U({ id: l(d) }, r.$attrs, {
+        (l(), C(U(r.isMultiline ? "textarea" : "input"), Z({ id: a(p) }, r.$attrs, {
           ref_key: "input",
-          ref: v,
+          ref: f,
           class: [
             "scalar-input",
-            l(g)(
+            a(c)(
               { "min-h-[77px]": r.isMultiline },
               "z-10 w-full resize-none appearance-none border-0 bg-transparent p-3 text-sm text-fore-1",
               "outline-none transition-opacity"
@@ -427,43 +494,43 @@ const De = /* @__PURE__ */ z(Ie, [["__scopeId", "data-v-4ee157b1"]]), Oe = { cla
           ],
           placeholder: r.placeholder,
           value: r.modelValue,
-          onBlur: A,
-          onFocus: c[0] || (c[0] = (k) => h.value = !0),
-          onInput: O,
-          onKeyup: q(M, ["enter"])
+          onBlur: H,
+          onFocus: u[0] || (u[0] = (M) => w.value = !0),
+          onInput: P,
+          onKeyup: q(S, ["enter"])
         }), null, 16, ["id", "class", "placeholder", "value", "onKeyup"])),
-        r.label ? (s(), u("label", {
+        r.label ? (l(), d("label", {
           key: 0,
-          class: i(
-            l(g)(
+          class: s(
+            a(c)(
               "scalar-input-label pointer-events-none absolute left-0 top-0 mx-2 my-3 px-1 text-xs",
               "shadow-current z-10 origin-top-left rounded text-fore-3 transition-transform"
             )
           ),
-          for: l(d),
-          style: V({
+          for: a(p),
+          style: D({
             "box-shadow": `0 0 4px 4px ${r.labelShadowColor}`,
             "background-color": r.labelShadowColor
           })
-        }, C(r.label), 15, Ae)) : m("", !0),
-        b("div", je, [
+        }, y(r.label), 15, We)) : v("", !0),
+        h("div", Re, [
           x(r.$slots, "default", {}, void 0, !0)
         ])
       ], 2),
-      b("span", {
-        class: i(
-          l(g)(
+      h("span", {
+        class: s(
+          a(c)(
             "helper-text mt-1.5 flex items-center text-xs text-error before:rounded-full before:font-black",
             "before:mr-1.5 before:block before:h-4 before:w-4 before:text-center before:text-xxs before:leading-4",
             "before:bg-error before:text-white before:content-['!'] empty:hidden"
           )
         )
-      }, C(r.helperText), 3)
+      }, y(r.helperText), 3)
     ]));
   }
 });
-const Pe = /* @__PURE__ */ z(He, [["__scopeId", "data-v-8e18f760"]]);
-const Je = {
+const Ue = /* @__PURE__ */ z(Ke, [["__scopeId", "data-v-c047336e"]]);
+const rt = {
   boxShadow: {
     DEFAULT: "var(--theme-shadow-1, var(--default-theme-shadow-1))",
     md: "var(--theme-shadow-2, var(--default-theme-shadow-2))",
@@ -495,7 +562,7 @@ const Je = {
     ghost: "var(--theme-color-ghost, var(--default-theme-color-ghost))",
     transparent: "transparent"
   }
-}, Qe = {
+}, at = {
   borderRadius: {
     DEFAULT: "var(--theme-radius, var(--default-theme-radius))",
     md: "var(--theme-radius, var(--default-theme-radius))",
@@ -519,21 +586,21 @@ const Je = {
     "screen-md": "640px",
     "screen-lg": "800px"
   }
-}, Xe = {
-  install: (a) => {
-    a.component("ScalarButton", I), a.component("ScalarIcon", D), a.component("ScalarIconButton", Ve), a.component("ScalarLoading", $), a.component("ScalarModal", De), a.component("ScalarTextField", Pe);
+}, nt = {
+  install: (o) => {
+    o.component("ScalarButton", ue), o.component("ScalarIcon", I), o.component("ScalarIconButton", He), o.component("ScalarLoading", F), o.component("ScalarModal", Ee), o.component("ScalarTextField", Ue);
   }
 };
 export {
-  I as ScalarButton,
-  D as ScalarIcon,
-  Ve as ScalarIconButton,
-  $ as ScalarLoading,
-  De as ScalarModal,
-  Pe as ScalarTextField,
-  Xe as default,
-  Qe as extend,
-  Je as theme,
-  qe as useLoadingState,
-  Ge as useModal
+  ue as ScalarButton,
+  I as ScalarIcon,
+  He as ScalarIconButton,
+  F as ScalarLoading,
+  Ee as ScalarModal,
+  Ue as ScalarTextField,
+  nt as default,
+  at as extend,
+  rt as theme,
+  tt as useLoadingState,
+  ot as useModal
 };