@prosync_solutions/ui 0.1.0

package/dist/chunks/ProSpinner.vue_vue_type_script_setup_true_lang-C3WfTGch.js

@@ -0,0 +1,661 @@
+import { defineComponent as m, computed as c, openBlock as s, createElementBlock as o, normalizeClass as u, createElementVNode as d, createCommentVNode as n, renderSlot as b, createBlock as x, resolveDynamicComponent as k, toDisplayString as g, createTextVNode as $, createVNode as v, unref as h, withCtx as w, mergeProps as V, Fragment as T, renderList as A, watch as j, onUnmounted as I, Transition as z, withModifiers as E } from "vue";
+import { PhQuestion as S, PhSparkle as L, PhCaretDown as M, PhInfo as O, PhCheckCircle as D, PhWarning as R, PhX as C } from "@phosphor-icons/vue";
+const N = ["disabled"], F = {
+  key: 0,
+  class: "inline-flex items-center mr-2"
+}, H = {
+  key: 1,
+  class: "inline-flex items-center mr-2"
+}, U = {
+  key: 2,
+  class: "inline-flex items-center ml-2"
+}, $e = /* @__PURE__ */ m({
+  __name: "ProButton",
+  props: {
+    variant: { default: "primary" },
+    size: { default: "md" },
+    disabled: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(e) {
+    const a = e, l = c(() => {
+      const r = "rounded-button font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 inline-flex items-center justify-center cursor-pointer", t = {
+        sm: "px-3 py-1.5 text-body-sm",
+        md: "px-4 py-2 text-body-sm",
+        lg: "px-6 py-3 text-body"
+      }, i = {
+        primary: "bg-brand-primary text-text-on-primary hover:bg-brand-primary-strong focus:ring-brand-primary disabled:bg-surface-disabled disabled:text-text-disabled disabled:cursor-not-allowed",
+        secondary: "bg-surface-gray-bg text-text-body hover:bg-surface-gray-bg-strong border border-border-border focus:ring-brand-primary disabled:bg-surface-disabled disabled:text-text-disabled disabled:cursor-not-allowed",
+        plain: "bg-transparent text-text-body hover:bg-surface-gray-bg border border-border-border focus:ring-brand-primary disabled:text-text-disabled disabled:cursor-not-allowed disabled:border-border-border",
+        danger: "bg-surface-error text-text-error hover:opacity-90 border border-border-error focus:ring-brand-primary disabled:bg-surface-disabled disabled:text-text-disabled disabled:cursor-not-allowed",
+        ghost: "bg-transparent text-brand-primary hover:bg-surface-gray-bg focus:ring-brand-primary disabled:text-text-disabled disabled:cursor-not-allowed"
+      };
+      return `${r} ${t[a.size]} ${i[a.variant]}`;
+    });
+    return (r, t) => (s(), o("button", {
+      class: u(l.value),
+      disabled: e.disabled || e.loading,
+      onClick: t[0] || (t[0] = (i) => r.$emit("click", i))
+    }, [
+      e.loading ? (s(), o("span", F, [...t[1] || (t[1] = [
+        d("svg", {
+          class: "animate-spin h-4 w-4 text-current",
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24"
+        }, [
+          d("circle", {
+            class: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            "stroke-width": "4"
+          }),
+          d("path", {
+            class: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          })
+        ], -1)
+      ])])) : n("", !0),
+      r.$slots.iconLeft && !e.loading ? (s(), o("span", H, [
+        b(r.$slots, "iconLeft")
+      ])) : n("", !0),
+      b(r.$slots, "default"),
+      r.$slots.iconRight ? (s(), o("span", U, [
+        b(r.$slots, "iconRight")
+      ])) : n("", !0)
+    ], 10, N));
+  }
+}), Q = {
+  key: 0,
+  class: "flex items-center justify-between border-b border-border-border px-6 py-4"
+}, W = {
+  key: 0,
+  class: "flex items-center space-x-2"
+}, X = {
+  key: 1,
+  class: "text-body-bold text-text-heading"
+}, ke = /* @__PURE__ */ m({
+  __name: "ProCard",
+  props: {
+    title: {},
+    iconComponent: {},
+    padding: { default: "md" },
+    shadow: { type: Boolean, default: !0 }
+  },
+  setup(e) {
+    const a = e, l = c(() => {
+      const t = "bg-surface-sub-bg border border-border-border rounded-card flex flex-col", i = a.shadow ? "shadow-xs" : "";
+      return `${t} ${i}`;
+    }), r = c(() => ({
+      none: "",
+      sm: "p-3",
+      md: "p-6",
+      lg: "p-8"
+    })[a.padding]);
+    return (t, i) => (s(), o("div", {
+      class: u(l.value)
+    }, [
+      e.title || e.iconComponent || t.$slots.header ? (s(), o("div", Q, [
+        e.title || e.iconComponent ? (s(), o("div", W, [
+          e.iconComponent ? (s(), x(k(e.iconComponent), {
+            key: 0,
+            size: 24,
+            class: "text-icon-default-soft"
+          })) : n("", !0),
+          e.title ? (s(), o("p", X, g(e.title), 1)) : n("", !0)
+        ])) : n("", !0),
+        b(t.$slots, "header")
+      ])) : n("", !0),
+      d("div", {
+        class: u(r.value)
+      }, [
+        b(t.$slots, "default")
+      ], 2)
+    ], 2));
+  }
+}), G = { class: "flex flex-col gap-1.5" }, J = {
+  key: 0,
+  class: "flex items-center gap-1"
+}, K = ["for"], Y = {
+  key: 0,
+  class: "text-text-error"
+}, Z = {
+  key: 0,
+  class: "group relative flex items-center"
+}, _ = { class: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-surface-dark-bg text-text-inverse text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10" }, ee = {
+  key: 1,
+  class: "flex items-center",
+  title: "Extracted by AI"
+}, q = /* @__PURE__ */ m({
+  __name: "ProFormField",
+  props: {
+    label: {},
+    required: { type: Boolean },
+    infoText: {},
+    isAiExtracted: { type: Boolean },
+    inputId: {}
+  },
+  setup(e) {
+    return (a, l) => (s(), o("div", G, [
+      e.label ? (s(), o("div", J, [
+        d("label", {
+          for: e.inputId,
+          class: "text-caption text-text-body font-medium"
+        }, [
+          $(g(e.label) + " ", 1),
+          e.required ? (s(), o("span", Y, "*")) : n("", !0)
+        ], 8, K),
+        e.infoText ? (s(), o("div", Z, [
+          v(h(S), {
+            size: 14,
+            class: "text-icon-default-soft cursor-help"
+          }),
+          d("div", _, [
+            $(g(e.infoText) + " ", 1),
+            l[0] || (l[0] = d("div", { class: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-surface-dark-bg" }, null, -1))
+          ])
+        ])) : n("", !0),
+        e.isAiExtracted ? (s(), o("div", ee, [
+          v(h(L), {
+            size: 14,
+            class: "text-icon-info",
+            weight: "fill"
+          })
+        ])) : n("", !0)
+      ])) : n("", !0),
+      b(a.$slots, "default")
+    ]));
+  }
+}), te = { class: "relative" }, se = ["id", "type", "value", "placeholder", "required"], re = {
+  key: 0,
+  class: "absolute left-3 top-1/2 -translate-y-1/2 text-icon-default-soft"
+}, ze = /* @__PURE__ */ m({
+  inheritAttrs: !1,
+  __name: "ProInput",
+  props: {
+    modelValue: { default: "" },
+    label: {},
+    placeholder: {},
+    type: { default: "text" },
+    required: { type: Boolean, default: !1 },
+    infoText: {},
+    isAiExtracted: { type: Boolean, default: !1 },
+    id: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e) {
+    const a = e, l = c(() => a.id || `input-${Math.random().toString(36).substr(2, 9)}`);
+    return (r, t) => (s(), x(q, {
+      label: e.label,
+      required: e.required,
+      "info-text": e.infoText,
+      "is-ai-extracted": e.isAiExtracted,
+      "input-id": l.value
+    }, {
+      default: w(() => [
+        d("div", te, [
+          d("input", V(r.$attrs, {
+            id: l.value,
+            type: e.type,
+            value: e.modelValue,
+            onInput: t[0] || (t[0] = (i) => r.$emit("update:modelValue", i.target.value)),
+            placeholder: e.placeholder,
+            required: e.required,
+            class: ["w-full px-3 py-1.5 border border-border-border rounded-lg bg-surface-sub-bg text-body text-text-body placeholder:text-text-disabled focus:ring-2 focus:ring-brand-primary focus:border-transparent outline-none transition-all disabled:bg-surface-gray-bg disabled:text-text-disabled disabled:cursor-not-allowed", [
+              { "pl-9": r.$slots.prefix },
+              r.$attrs.readonly !== void 0 && r.$attrs.readonly !== !1 && e.modelValue ? "!bg-surface-disabled" : ""
+            ]]
+          }), null, 16, se),
+          r.$slots.prefix ? (s(), o("div", re, [
+            b(r.$slots, "prefix")
+          ])) : n("", !0)
+        ])
+      ]),
+      _: 3
+    }, 8, ["label", "required", "info-text", "is-ai-extracted", "input-id"]));
+  }
+}), ae = { class: "relative" }, le = ["id", "value", "required"], oe = {
+  key: 0,
+  value: "",
+  disabled: "",
+  selected: ""
+}, ne = ["value"], ie = { class: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-icon-default-soft" }, Ce = /* @__PURE__ */ m({
+  inheritAttrs: !1,
+  __name: "ProSelect",
+  props: {
+    modelValue: { default: "" },
+    options: { default: () => [] },
+    label: {},
+    placeholder: {},
+    required: { type: Boolean, default: !1 },
+    infoText: {},
+    isAiExtracted: { type: Boolean, default: !1 },
+    id: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e) {
+    const a = e, l = c(() => a.id || `select-${Math.random().toString(36).substr(2, 9)}`), r = c(() => a.options.map((t) => typeof t == "string" ? { label: t, value: t } : t));
+    return (t, i) => (s(), x(q, {
+      label: e.label,
+      required: e.required,
+      "info-text": e.infoText,
+      "is-ai-extracted": e.isAiExtracted,
+      "input-id": l.value
+    }, {
+      default: w(() => [
+        d("div", ae, [
+          d("select", V(t.$attrs, {
+            id: l.value,
+            value: e.modelValue,
+            onChange: i[0] || (i[0] = (f) => t.$emit("update:modelValue", f.target.value)),
+            required: e.required,
+            class: ["w-full px-3 py-1.5 border border-border-border rounded-lg bg-surface-sub-bg text-body focus:ring-2 focus:ring-brand-primary focus:border-transparent outline-none transition-all appearance-none disabled:bg-surface-gray-bg disabled:text-text-disabled disabled:cursor-not-allowed", [
+              e.modelValue ? "text-text-body" : "text-text-placeholder"
+            ]]
+          }), [
+            e.placeholder ? (s(), o("option", oe, g(e.placeholder), 1)) : n("", !0),
+            (s(!0), o(T, null, A(r.value, (f) => (s(), o("option", {
+              key: f.value,
+              value: f.value
+            }, g(f.label), 9, ne))), 128))
+          ], 16, le),
+          d("div", ie, [
+            v(h(M), { size: 16 })
+          ])
+        ])
+      ]),
+      _: 1
+    }, 8, ["label", "required", "info-text", "is-ai-extracted", "input-id"]));
+  }
+}), de = { class: "whitespace-nowrap" }, Ve = /* @__PURE__ */ m({
+  __name: "ProTag",
+  props: {
+    variant: { default: "secondary" },
+    label: { default: "" },
+    iconLeft: { default: null },
+    iconRight: { default: null }
+  },
+  setup(e) {
+    const a = e, l = c(() => ({
+      secondary: "bg-surface-gray-bg border-border-secondary text-text-body",
+      success: "bg-surface-success border-border-success text-text-success",
+      info: "bg-surface-info border-border-info text-text-info",
+      warn: "bg-surface-warn border-border-warn text-text-warn",
+      error: "bg-surface-error border-border-error text-text-error",
+      attention: "bg-surface-attention border-border-attention text-text-attention"
+    })[a.variant]);
+    return (r, t) => (s(), o("div", {
+      class: u([
+        "inline-flex items-center justify-center gap-1 border border-solid px-1.5 py-0.5 rounded-[6px] text-tag transition-colors",
+        l.value
+      ])
+    }, [
+      b(r.$slots, "icon-left", {}, () => [
+        e.iconLeft ? (s(), x(k(e.iconLeft), {
+          key: 0,
+          size: 12,
+          class: "shrink-0"
+        })) : n("", !0)
+      ]),
+      d("span", de, [
+        b(r.$slots, "default", {}, () => [
+          $(g(e.label), 1)
+        ])
+      ]),
+      b(r.$slots, "icon-right", {}, () => [
+        e.iconRight ? (s(), x(k(e.iconRight), {
+          key: 0,
+          size: 12,
+          class: "shrink-0"
+        })) : n("", !0)
+      ])
+    ], 2));
+  }
+}), ue = /* @__PURE__ */ m({
+  __name: "ProToast",
+  props: {
+    type: { default: "information" },
+    message: {},
+    modelValue: { type: Boolean },
+    autoDismiss: { type: Boolean, default: !0 },
+    duration: { default: 3e3 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: a }) {
+    const l = e, r = a;
+    let t = null;
+    const i = c(() => ({
+      information: "border-border-info",
+      success: "border-border-success",
+      warn: "border-border-warn",
+      error: "border-border-error"
+    })[l.type]), f = c(() => ({
+      information: "bg-surface-info",
+      success: "bg-surface-success",
+      warn: "bg-surface-warn",
+      error: "bg-surface-error"
+    })[l.type]), y = c(() => ({
+      information: "text-icon-info",
+      success: "text-icon-success",
+      warn: "text-icon-warn",
+      error: "text-icon-error"
+    })[l.type]), B = c(() => ({
+      information: "text-text-info",
+      success: "text-text-success",
+      warn: "text-text-warn",
+      error: "text-text-error"
+    })[l.type]), P = () => {
+      t && (clearTimeout(t), t = null), r("update:modelValue", !1);
+    };
+    return j(() => l.modelValue, (p) => {
+      p && l.autoDismiss && (t && clearTimeout(t), t = setTimeout(() => {
+        r("update:modelValue", !1), t = null;
+      }, l.duration));
+    }, { immediate: !0 }), I(() => {
+      t && clearTimeout(t);
+    }), (p, pe) => (s(), x(z, { name: "slide-fade" }, {
+      default: w(() => [
+        e.modelValue ? (s(), o("div", {
+          key: 0,
+          class: u([i.value, "fixed top-4 right-4 z-[100] w-[320px] backdrop-blur-md bg-white/50 border rounded-xl p-4 flex items-center gap-2.5 shadow-xl"])
+        }, [
+          d("div", {
+            class: u([f.value, "w-9 h-9 rounded-lg flex items-center justify-center shrink-0"])
+          }, [
+            e.type === "information" ? (s(), x(h(O), {
+              key: 0,
+              size: 20,
+              weight: "regular",
+              class: u(y.value)
+            }, null, 8, ["class"])) : e.type === "success" ? (s(), x(h(D), {
+              key: 1,
+              size: 20,
+              weight: "light",
+              class: u(y.value)
+            }, null, 8, ["class"])) : e.type === "warn" ? (s(), x(h(R), {
+              key: 2,
+              size: 20,
+              weight: "light",
+              class: u(y.value)
+            }, null, 8, ["class"])) : e.type === "error" ? (s(), x(h(C), {
+              key: 3,
+              size: 20,
+              weight: "light",
+              class: u(y.value)
+            }, null, 8, ["class"])) : n("", !0)
+          ], 2),
+          d("p", {
+            class: u([B.value, "flex-1 text-body-sm-bold text-left break-words"])
+          }, g(e.message), 3),
+          d("button", {
+            onClick: P,
+            class: "w-8 h-8 rounded-md flex items-center justify-center shrink-0 hover:bg-black/5 transition-colors",
+            "aria-label": "Close notification"
+          }, [
+            v(h(C), {
+              size: 16,
+              class: "text-icon-default"
+            })
+          ])
+        ], 2)) : n("", !0)
+      ]),
+      _: 1
+    }));
+  }
+}), ce = (e, a) => {
+  const l = e.__vccOpts || e;
+  for (const [r, t] of a)
+    l[r] = t;
+  return l;
+}, qe = /* @__PURE__ */ ce(ue, [["__scopeId", "data-v-9b57d7a3"]]), fe = {
+  key: 0,
+  class: "flex items-center justify-between border-b border-border-border px-6 py-4"
+}, be = { class: "text-body-bold text-text-heading" }, xe = { class: "flex-1 overflow-y-auto px-6 py-4" }, me = {
+  key: 1,
+  class: "border-t border-border-border px-6 py-4"
+}, Be = /* @__PURE__ */ m({
+  __name: "ProModal",
+  props: {
+    modelValue: { type: Boolean },
+    title: { default: "" },
+    size: { default: "md" },
+    showClose: { type: Boolean, default: !0 },
+    closeOnOverlay: { type: Boolean, default: !0 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: a }) {
+    const l = e, r = a, t = {
+      sm: "w-full max-w-sm max-h-[80vh]",
+      md: "w-full max-w-lg max-h-[80vh]",
+      lg: "w-full max-w-2xl max-h-[85vh]",
+      xl: "w-full max-w-4xl max-h-[90vh]",
+      full: "w-[95vw] h-[95vh]"
+    };
+    function i() {
+      r("update:modelValue", !1);
+    }
+    function f() {
+      l.closeOnOverlay && i();
+    }
+    return (y, B) => (s(), x(z, { name: "modal" }, {
+      default: w(() => [
+        e.modelValue ? (s(), o("div", {
+          key: 0,
+          class: "fixed inset-0 bg-surface-dark-bg/60 flex items-center justify-center z-50",
+          onClick: E(f, ["self"])
+        }, [
+          v(z, { name: "modal-panel" }, {
+            default: w(() => [
+              e.modelValue ? (s(), o("div", {
+                key: 0,
+                class: u(["bg-surface-sub-bg rounded-card shadow-xl relative flex flex-col", t])
+              }, [
+                e.title || y.$slots.header || e.showClose ? (s(), o("div", fe, [
+                  b(y.$slots, "header", {}, () => [
+                    d("p", be, g(e.title), 1)
+                  ]),
+                  e.showClose ? (s(), o("button", {
+                    key: 0,
+                    onClick: i,
+                    class: "text-icon-default-soft hover:text-icon-default transition-colors p-1 rounded-md hover:bg-surface-gray-bg",
+                    "aria-label": "Close"
+                  }, [
+                    v(h(C), { size: 20 })
+                  ])) : n("", !0)
+                ])) : n("", !0),
+                d("div", xe, [
+                  b(y.$slots, "default")
+                ]),
+                y.$slots.footer ? (s(), o("div", me, [
+                  b(y.$slots, "footer")
+                ])) : n("", !0)
+              ], 2)) : n("", !0)
+            ]),
+            _: 3
+          })
+        ])) : n("", !0)
+      ]),
+      _: 3
+    }));
+  }
+}), ye = ["id", "value", "placeholder", "required", "rows"], Pe = /* @__PURE__ */ m({
+  inheritAttrs: !1,
+  __name: "ProTextarea",
+  props: {
+    modelValue: { default: "" },
+    label: {},
+    placeholder: {},
+    required: { type: Boolean, default: !1 },
+    infoText: {},
+    isAiExtracted: { type: Boolean, default: !1 },
+    id: {},
+    rows: { default: 4 }
+  },
+  emits: ["update:modelValue"],
+  setup(e) {
+    const a = e, l = c(() => a.id || `textarea-${Math.random().toString(36).substr(2, 9)}`);
+    return (r, t) => (s(), x(q, {
+      label: e.label,
+      required: e.required,
+      "info-text": e.infoText,
+      "is-ai-extracted": e.isAiExtracted,
+      "input-id": l.value
+    }, {
+      default: w(() => [
+        d("textarea", V(r.$attrs, {
+          id: l.value,
+          value: e.modelValue,
+          onInput: t[0] || (t[0] = (i) => r.$emit("update:modelValue", i.target.value)),
+          placeholder: e.placeholder,
+          required: e.required,
+          rows: e.rows,
+          class: ["w-full px-3 py-2 border border-border-border rounded-lg bg-surface-sub-bg text-body text-text-body placeholder:text-text-disabled focus:ring-2 focus:ring-brand-primary focus:border-transparent outline-none transition-all resize-y disabled:bg-surface-gray-bg disabled:text-text-disabled disabled:cursor-not-allowed", [
+            r.$attrs.readonly !== void 0 && r.$attrs.readonly !== !1 && e.modelValue ? "!bg-surface-disabled" : ""
+          ]]
+        }), null, 16, ye)
+      ]),
+      _: 1
+    }, 8, ["label", "required", "info-text", "is-ai-extracted", "input-id"]));
+  }
+}), ge = ["src", "alt"], Te = /* @__PURE__ */ m({
+  __name: "ProAvatar",
+  props: {
+    src: { default: "" },
+    alt: { default: "Avatar" },
+    name: { default: "" },
+    size: { default: "md" }
+  },
+  setup(e) {
+    const a = e, l = c(() => a.name ? a.name.split(" ").map((f) => f.charAt(0)).join("").toUpperCase().slice(0, 2) : "?"), r = c(() => ({
+      xs: "w-6 h-6",
+      sm: "w-8 h-8",
+      md: "w-10 h-10",
+      lg: "w-12 h-12",
+      xl: "w-16 h-16"
+    })[a.size]), t = c(() => ({
+      xs: "text-[10px]",
+      sm: "text-caption",
+      md: "text-body-sm",
+      lg: "text-body",
+      xl: "text-h3"
+    })[a.size]), i = c(() => a.src ? "bg-surface-gray-bg" : "bg-brand-primary");
+    return (f, y) => (s(), o("div", {
+      class: u(["rounded-full overflow-hidden inline-flex items-center justify-center shrink-0 border border-border-border", r.value, i.value])
+    }, [
+      e.src ? (s(), o("img", {
+        key: 0,
+        src: e.src,
+        alt: e.alt,
+        class: "w-full h-full object-cover"
+      }, null, 8, ge)) : (s(), o("span", {
+        key: 1,
+        class: u(["font-semibold text-text-on-primary", t.value])
+      }, g(l.value), 3))
+    ], 2));
+  }
+}), Ae = /* @__PURE__ */ m({
+  __name: "ProDivider",
+  props: {
+    direction: { default: "horizontal" },
+    text: { default: "" }
+  },
+  setup(e) {
+    return (a, l) => (s(), o("div", {
+      class: u([
+        e.direction === "horizontal" ? "flex items-center w-full my-4" : "inline-flex flex-col items-center h-full mx-4"
+      ]),
+      role: "separator"
+    }, [
+      d("div", {
+        class: u([
+          "bg-border-border",
+          e.direction === "horizontal" ? "flex-1 h-px" : "flex-1 w-px"
+        ])
+      }, null, 2),
+      a.$slots.default || e.text ? (s(), o("span", {
+        key: 0,
+        class: u([
+          "text-caption text-text-disabled",
+          e.direction === "horizontal" ? "px-3" : "py-2"
+        ])
+      }, [
+        b(a.$slots, "default", {}, () => [
+          $(g(e.text), 1)
+        ])
+      ], 2)) : n("", !0),
+      a.$slots.default || e.text ? (s(), o("div", {
+        key: 1,
+        class: u([
+          "bg-border-border",
+          e.direction === "horizontal" ? "flex-1 h-px" : "flex-1 w-px"
+        ])
+      }, null, 2)) : n("", !0)
+    ], 2));
+  }
+}), he = {
+  key: 0,
+  class: "ml-2 text-body-sm text-text-subtitle"
+}, je = /* @__PURE__ */ m({
+  __name: "ProSpinner",
+  props: {
+    size: { default: "md" },
+    text: { default: "" }
+  },
+  setup(e) {
+    const a = e, l = c(() => ({
+      sm: "",
+      md: "",
+      lg: ""
+    })[a.size]), r = c(() => ({
+      sm: "h-4 w-4",
+      md: "h-6 w-6",
+      lg: "h-8 w-8"
+    })[a.size]);
+    return (t, i) => (s(), o("div", {
+      class: u(["inline-flex items-center justify-center", l.value]),
+      role: "status",
+      "aria-label": "Loading"
+    }, [
+      (s(), o("svg", {
+        class: u(["animate-spin text-brand-primary", r.value]),
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24"
+      }, [...i[0] || (i[0] = [
+        d("circle", {
+          class: "opacity-25",
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          "stroke-width": "4"
+        }, null, -1),
+        d("path", {
+          class: "opacity-75",
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        }, null, -1)
+      ])], 2)),
+      e.text ? (s(), o("span", he, g(e.text), 1)) : n("", !0)
+    ], 2));
+  }
+});
+export {
+  qe as P,
+  $e as _,
+  ce as a,
+  Ve as b,
+  Te as c,
+  ke as d,
+  Ae as e,
+  q as f,
+  ze as g,
+  Be as h,
+  Ce as i,
+  je as j,
+  Pe as k
+};