yuyeon 0.0.3 → 0.0.6

package/dist/yuyeon.mjs

@@ -1,25 +1,25 @@
-import { defineComponent as $, h as _, getCurrentInstance as he, createVNode as l, withDirectives as pe, resolveDirective as dt, ref as C, toRef as ie, computed as w, watch as I, nextTick as ve, withKeys as Xt, createTextVNode as ae, watchEffect as Ne, withModifiers as Re, Transition as Me, reactive as re, Teleport as Zt, mergeProps as oe, vShow as Jt, Fragment as P, onScopeDispose as Qt, effectScope as ft, toRaw as ht, inject as en, provide as tn, onBeforeUnmount as nn, readonly as an } from "vue";
-const rn = $({
+import { defineComponent as $, h as x, getCurrentInstance as ye, createVNode as l, withDirectives as ge, resolveDirective as pt, ref as k, toRef as se, computed as S, watch as P, nextTick as be, withKeys as Qt, createTextVNode as le, watchEffect as Fe, withModifiers as je, Transition as He, reactive as ue, Teleport as en, mergeProps as ce, vShow as tn, Fragment as I, onScopeDispose as nn, effectScope as mt, toRaw as yt, inject as an, provide as rn, onBeforeUnmount as on, readonly as sn, onBeforeUpdate as ln, shallowRef as un } from "vue";
+const cn = $({
   name: "YApp",
   setup(e, { slots: t }) {
-    return () => _(
+    return () => x(
       "y-app",
       { class: "y-app" },
-      _("div", { class: "y-app__container" }, t)
+      x("div", { class: "y-app__container" }, t)
     );
   }
 });
-const pt = "y-plate-wave__animation";
-function vt(e) {
+const gt = "y-plate-wave__animation";
+function bt(e) {
   if (!e)
     return;
   const t = document.createElement("span");
-  t.className = pt, e.appendChild(t), t.dataset.activated = String(performance.now());
+  t.className = gt, e.appendChild(t), t.dataset.activated = String(performance.now());
 }
-function Fe(e) {
+function ze(e) {
   if (!e)
     return;
-  const t = e.getElementsByClassName(pt);
+  const t = e.getElementsByClassName(gt);
   if (t.length === 0)
     return;
   const n = t[t.length - 1];
@@ -31,47 +31,47 @@ function Fe(e) {
     n && e.removeChild(n);
   }, a + 300);
 }
-let _e = !1;
-function mt(e) {
-  vt(e.currentTarget);
+let ke = !1;
+function _t(e) {
+  bt(e.currentTarget);
 }
-function X(e) {
-  Fe(e.currentTarget);
+function J(e) {
+  ze(e.currentTarget);
 }
-function on(e) {
+function dn(e) {
 }
-function yt(e) {
-  !_e && (e.key === "Enter" || e.key === "Space") && (_e = !0, vt(e.currentTarget));
+function wt(e) {
+  !ke && (e.key === "Enter" || e.key === "Space") && (ke = !0, bt(e.currentTarget));
 }
-function gt(e) {
-  _e = !1, Fe(e.currentTarget);
+function Ct(e) {
+  ke = !1, ze(e.currentTarget);
 }
-function bt(e) {
-  e.removeEventListener("mousedown", mt), e.removeEventListener("mouseup", X), e.removeEventListener("mouseleave", X), e.removeEventListener("keydown", yt), e.removeEventListener("keyup", gt);
+function St(e) {
+  e.removeEventListener("mousedown", _t), e.removeEventListener("mouseup", J), e.removeEventListener("mouseleave", J), e.removeEventListener("keydown", wt), e.removeEventListener("keyup", Ct);
 }
-function Ge(e, t, n = !1) {
+function Qe(e, t, n = !1) {
   const { value: i, modifiers: a } = t, r = !!i;
-  if (r || Fe(e), r && n) {
+  if (r || ze(e), r && n) {
     if (a.stop) {
-      e.addEventListener("mousedown", on);
+      e.addEventListener("mousedown", dn);
       return;
     }
-    e.addEventListener("mousedown", mt), e.addEventListener("mouseup", X), e.addEventListener("mouseleave", X), e.addEventListener("keydown", yt), e.addEventListener("keyup", gt), e.addEventListener("blur", X);
+    e.addEventListener("mousedown", _t), e.addEventListener("mouseup", J), e.addEventListener("mouseleave", J), e.addEventListener("keydown", wt), e.addEventListener("keyup", Ct), e.addEventListener("blur", J);
   } else
-    !r && !n && bt(e);
+    !r && !n && St(e);
 }
-const Ce = {
+const $e = {
   mounted(e, t) {
-    Ge(e, t, !0);
+    Qe(e, t, !0);
   },
   updated(e, t) {
-    t.value !== t.oldValue && Ge(e, t);
+    t.value !== t.oldValue && Qe(e, t);
   },
   unmount(e) {
-    bt(e);
+    St(e);
   }
 };
-function sn(e) {
+function fn(e) {
   if (e && e[0] === "#") {
     const t = e.substring(1, e.length), n = t.length, i = [];
     if (n === 3 || n === 6) {
@@ -87,21 +87,21 @@ function sn(e) {
     }
   }
 }
-const ln = /rgb(a?)\((?<v>.*)\)/, un = /#([0-9a-fA-F]{3,6,8})/;
-function cn(e) {
-  return ln.test(e) || un.test(e);
+const hn = /rgb(a?)\((?<v>.*)\)/, vn = /#([0-9a-fA-F]{3,6,8})/;
+function pn(e) {
+  return hn.test(e) || vn.test(e);
 }
-function wt(e, t = "px") {
+function Ke(e, t = "px") {
   if (e === "" || e === null || e === void 0)
     return;
   let n = Number(e);
   if (!(isNaN(n) || !isFinite(n)))
     return `${n}${t}`;
 }
-function H(e, t) {
+function z(e, t) {
   return e ? Object.prototype.hasOwnProperty.call(e, t) : !1;
 }
-function dn(e, t, n) {
+function mn(e, t, n) {
   const i = t.length - 1;
   let a = e;
   if (i < 0)
@@ -113,7 +113,7 @@ function dn(e, t, n) {
   }
   return a == null || a[t[i]] === void 0 ? n : a[t[i]];
 }
-function Se(e = {}, t = {}, n) {
+function Ee(e = {}, t = {}, n) {
   const i = { ...e };
   for (const a in t) {
     const r = i[a], s = t[a];
@@ -122,16 +122,19 @@ function Se(e = {}, t = {}, n) {
       continue;
     }
     if (typeof r == "object" && typeof s == "object") {
-      i[a] = Se(r, s, n);
+      i[a] = Ee(r, s, n);
       continue;
     }
     i[a] = s;
   }
   return i;
 }
-function Z(e, t, n) {
+function Q(e, t, n) {
   let i = t;
-  return e == null || !i || typeof i != "string" ? n : e[i] !== void 0 ? e[i] : (i = i.replace(/\[(\w+)\]/g, ".$1"), i = i.replace(/^\./, ""), dn(e, i.split("."), n));
+  return e == null || !i || typeof i != "string" ? n : e[i] !== void 0 ? e[i] : (i = i.replace(/\[(\w+)\]/g, ".$1"), i = i.replace(/^\./, ""), mn(e, i.split("."), n));
+}
+function ie(e, t = 0) {
+  return Array.from({ length: e }, (n, i) => t + i);
 }
 function F(e, t = "default", n, i = !1) {
   var a;
@@ -141,18 +144,18 @@ function F(e, t = "default", n, i = !1) {
       return ((o = s.el) == null ? void 0 : o.nodeType) !== 8;
     });
 }
-function fn() {
-  const e = he();
+function yn() {
+  const e = ye();
   return e == null ? void 0 : e.uid;
 }
-function W(e) {
+function q(e) {
   const t = {};
   return typeof e == "string" ? t[e] = !0 : Array.isArray(e) ? e.reduce((n, i) => (n[i] = !0, n), t) : typeof e == "object" && Object.keys(e).reduce((n, i) => (n[i] = !!e[i], n), t), t;
 }
-function hn(e) {
-  return e && H(e, "$el") ? e.$el : e;
+function gn(e) {
+  return e && z(e, "$el") ? e.$el : e;
 }
-function ee(e, t) {
+function ne(e, t) {
   return (n) => Object.keys(e).reduce((i, a) => {
     const r = e[a], o = typeof r == "object" && r != null && !Array.isArray(r) ? r : { type: r };
     return n && a in n ? i[a] = {
@@ -161,8 +164,8 @@ function ee(e, t) {
     } : i[a] = o, t && !i[a].source && (i[a].source = t), i;
   }, {});
 }
-const pn = "YSpinnerRing", _t = /* @__PURE__ */ $({
-  name: pn,
+const bn = "YSpinnerRing", xt = /* @__PURE__ */ $({
+  name: bn,
   render() {
     return l("svg", {
       class: "y-spinner-ring",
@@ -181,7 +184,7 @@ const pn = "YSpinnerRing", _t = /* @__PURE__ */ $({
     }, null)]);
   }
 });
-const R = "y-button", Ct = {
+const R = "y-button", kt = {
   loading: Boolean,
   outlined: {
     type: Boolean,
@@ -211,13 +214,13 @@ const R = "y-button", Ct = {
   variation: {
     type: String
   }
-}, $e = $({
+}, j = $({
   name: "YButton",
   directives: {
-    PlateWave: Ce
+    PlateWave: $e
   },
   props: {
-    ...Ct
+    ...kt
   },
   computed: {
     variations() {
@@ -230,23 +233,26 @@ const R = "y-button", Ct = {
     icon() {
       return this.variations.includes("icon");
     },
+    variOutlined() {
+      return this.variations.includes("outlined");
+    },
     //
     classes() {
       return {
         [`${R}--outlined`]: this.outlined,
-        [`${R}--loading`]: this.loading,
         [`${R}--rounded`]: this.rounded,
         [`${R}--filled`]: this.filled,
-        [`${R}--disabled`]: this.disabled,
         [`${R}--text`]: this.text,
         [`${R}--small`]: this.small,
         [`${R}--icon`]: this.icon,
-        [`${R}--color`]: this.color
+        [`${R}--color`]: this.color,
+        [`${R}--loading`]: this.loading,
+        [`${R}--disabled`]: this.disabled
       };
     },
     styles() {
       let { color: e } = this;
-      return e && !cn(e) && (e = `rgba(var(--y-theme--${e}), 1)`), {
+      return e && !pn(e) && (e = `rgba(var(--y-theme--${e}), 1)`), {
         ["--y-button__color"]: e
       };
     }
@@ -254,7 +260,7 @@ const R = "y-button", Ct = {
   methods: {
     createContent() {
       const e = F(this, "default"), t = [];
-      return this.loading && t.push(_(_t, { width: "24", height: "24" })), t.push(e), _("span", { class: "y-button__content" }, t);
+      return this.loading && t.push(x(xt, { width: "24", height: "24" })), t.push(e), x("span", { class: "y-button__content" }, t);
     },
     getClasses() {
       return this.classes;
@@ -266,8 +272,8 @@ const R = "y-button", Ct = {
   },
   render() {
     const { onClick: e, styles: t, noWave: n, loading: i } = this;
-    return pe(
-      _(
+    return ge(
+      x(
         "button",
         {
           class: {
@@ -280,10 +286,10 @@ const R = "y-button", Ct = {
         },
         this.createContent()
       ),
-      [[Ce, !n && !i]]
+      [[$e, !n && !i]]
     );
   }
-}), vn = $({
+}), _n = $({
   name: "DiMixin",
   inject: {
     theme: {
@@ -303,8 +309,8 @@ const R = "y-button", Ct = {
   }
 });
 const M = "y-input";
-let Xe = 0;
-const se = {
+let et = 0;
+const de = {
   name: String,
   width: {
     type: [String, Number]
@@ -338,14 +344,14 @@ const se = {
     }
   },
   validators: Array
-}, xe = $({
+}, Te = $({
   name: M,
-  mixins: [vn],
-  props: se,
+  mixins: [_n],
+  props: de,
   emits: ["error", "click", "mousedown", "mouseup", "focus", "blur", "click:prepend", "update:modelValue"],
   data() {
-    const e = Xe.toString();
-    return Xe += 1, {
+    const e = et.toString();
+    return et += 1, {
       isFocused: !1,
       iid: e,
       lazyValue: void 0,
@@ -396,11 +402,11 @@ const se = {
   methods: {
     createPrependOuter() {
       const e = F(this, "prepend-outer");
-      return e ? _("div", { class: `${M}__prepend-outer` }, e) : void 0;
+      return e ? x("div", { class: `${M}__prepend-outer` }, e) : void 0;
     },
     createAppendOuter() {
       const e = F(this, "append-outer");
-      return e ? _("div", { class: `${M}__append-outer` }, e) : void 0;
+      return e ? x("div", { class: `${M}__append-outer` }, e) : void 0;
     },
     createLabelSlot() {
       const e = F(this, "label");
@@ -414,7 +420,7 @@ const se = {
     },
     createLabel() {
       if (this.label || F(this, "label"))
-        return _(
+        return x(
           "label",
           {
             class: {
@@ -432,7 +438,7 @@ const se = {
     },
     createDefault() {
       const { modelValue: e, formLoading: t, attrId: n } = this;
-      return F(this, "default", { value: e, formLoading: t, attrId: n }) ?? _(
+      return F(this, "default", { value: e, formLoading: t, attrId: n }) ?? x(
         "div",
         {
           [`.${M}__value`]: !0,
@@ -446,7 +452,7 @@ const se = {
     },
     createPrepend() {
       const e = F(this, "prepend", { error: this.isError });
-      return e ? _(
+      return e ? x(
         "div",
         {
           class: "y-input__prepend",
@@ -463,7 +469,7 @@ const se = {
       return isNaN(Number(e)) ? e : `${e}px`;
     },
     createDisplay() {
-      return _(
+      return x(
         "div",
         {
           class: {
@@ -478,7 +484,7 @@ const se = {
           }
         },
         [
-          _("div", { class: `${M}__plate` }),
+          x("div", { class: `${M}__plate` }),
           this.createPrepend(),
           this.createDefault(),
           this.createAppend()
@@ -490,13 +496,13 @@ const se = {
         error: this.status === "error" || this.inError,
         errorResult: this.errorResult
       }), t = [];
-      return e ? t.push(_("span", {}, e)) : t.push(this.errorResult), _("div", { class: `${M}__helper-text` }, t);
+      return e ? t.push(x("span", {}, e)) : t.push(this.errorResult), x("div", { class: `${M}__helper-text` }, t);
     },
     createStackChildren() {
       return [this.createDisplay(), this.createHelperText()];
     },
     createStack() {
-      return _(
+      return x(
         "div",
         {
           class: `${M}__stack`,
@@ -571,8 +577,8 @@ const se = {
   },
   render() {
     var e;
-    return pe(
-      _(
+    return ge(
+      x(
         "div",
         {
           class: { ...this.getClasses(), [`${M}`]: !0 }
@@ -581,13 +587,13 @@ const se = {
       ),
       [
         [
-          dt("theme"),
+          pt("theme"),
           (e = this == null ? void 0 : this.theme) != null && e.dark ? "dark" : "light"
         ]
       ]
     );
   }
-}), St = /* @__PURE__ */ $({
+}), $t = /* @__PURE__ */ $({
   name: "YIconClear",
   setup() {
     return () => l("svg", {
@@ -600,10 +606,10 @@ const se = {
     }, null)]);
   }
 });
-const ye = "y-field-input", ke = $({
+const _e = "y-field-input", Ae = $({
   name: "YFieldInput",
   props: {
-    ...se,
+    ...de,
     clearable: Boolean,
     inputAlign: String,
     displayText: [String, Function],
@@ -630,134 +636,134 @@ const ye = "y-field-input", ke = $({
     "blur"
   ],
   setup(e, { attrs: t, expose: n, emit: i, slots: a }) {
-    const r = C(), s = C(), o = C(!1), c = C(""), p = C(""), h = ie(e, "type"), u = w(() => {
-      var f;
+    const r = k(), s = k(), o = k(!1), c = k(""), v = k(""), d = se(e, "type"), u = S(() => {
+      var p;
       return {
-        ...((f = r.value) == null ? void 0 : f.classes) || {},
+        ...((p = r.value) == null ? void 0 : p.classes) || {},
         "y-input--focused": o.value,
-        [ye]: !0
+        [_e]: !0
       };
     });
-    function d(f) {
-      var S;
-      (S = s.value) == null || S.focus(), i("click", f);
+    function f(p) {
+      var T;
+      (T = s.value) == null || T.focus(), i("click", p);
     }
-    function g(f) {
-      o.value = !0, p.value = c.value, i("focus", f);
+    function C(p) {
+      o.value = !0, v.value = c.value, i("focus", p);
     }
-    function v(f) {
-      o.value = !1, i("blur", f), m();
+    function m(p) {
+      o.value = !1, i("blur", p), y();
     }
-    function y(f) {
-      i("input", f);
-      const S = f.target;
-      c.value = S == null ? void 0 : S.value, p.value = S == null ? void 0 : S.value, e.whenInputValid;
+    function g(p) {
+      i("input", p);
+      const T = p.target;
+      c.value = T == null ? void 0 : T.value, v.value = T == null ? void 0 : T.value, e.whenInputValid;
     }
-    function x(f) {
+    function E(p) {
       i("change", c.value);
     }
-    function A(f) {
-      i("keydown", f);
+    function _(p) {
+      i("keydown", p);
     }
-    function b(f) {
-      i("keyup", f);
+    function h(p) {
+      i("keyup", p);
     }
-    function k(f) {
-      V();
+    function w(p) {
+      B();
     }
-    function T(f) {
-      (f.code === "Space" || f.code === "Enter") && V();
+    function b(p) {
+      (p.code === "Space" || p.code === "Enter") && B();
     }
-    function Y() {
-      var f;
-      (f = s.value) == null || f.focus();
+    function V() {
+      var p;
+      (p = s.value) == null || p.focus();
     }
-    function O() {
-      var f;
-      (f = s.value) == null || f.select();
+    function Y() {
+      var p;
+      (p = s.value) == null || p.select();
     }
-    function V() {
-      c.value = "", p.value = "", i("update:modelValue", c.value);
+    function B() {
+      c.value = "", v.value = "", i("update:modelValue", c.value);
     }
-    function m() {
-      const f = he(), { displayText: S } = e;
-      if (S !== void 0) {
+    function y() {
+      const p = ye(), { displayText: T } = e;
+      if (T !== void 0) {
         let D = c.value;
-        typeof S == "string" && (D = S), S && typeof S == "function" && (D = S.call(f, D)), ve(() => {
-          p.value = D;
+        typeof T == "string" && (D = T), T && typeof T == "function" && (D = T.call(p, D)), be(() => {
+          v.value = D;
         });
       }
     }
-    I(
+    P(
       () => e.modelValue,
-      (f) => {
-        c.value = f, p.value = f;
+      (p) => {
+        c.value = p, v.value = p;
       },
       {
         immediate: !0
       }
-    ), I(c, (f) => {
-      o.value ? p.value = f : m();
+    ), P(c, (p) => {
+      o.value ? v.value = p : y();
     }), n({
-      focus: Y,
-      select: O,
-      clear: V,
+      focus: V,
+      select: Y,
+      clear: B,
       inputRef: s
     });
-    const B = () => {
-      const f = {};
-      for (const S in se)
-        f[S] = e[S];
-      return f;
+    const O = () => {
+      const p = {};
+      for (const T in de)
+        p[T] = e[T];
+      return p;
     };
-    function E(f) {
-      i("update:modelValue", f);
+    function A(p) {
+      i("update:modelValue", p);
     }
-    return () => _(
-      xe,
+    return () => x(
+      Te,
       {
         class: u.value,
         ref: r,
-        ...B(),
+        ...O(),
         modelValue: c.value,
-        "onUpdate:modelValue": E,
-        onClick: d
+        "onUpdate:modelValue": A,
+        onClick: f
       },
       {
-        prepend: a.prepend ? (...f) => {
-          var qe;
-          const S = [], D = (qe = a.prepend) == null ? void 0 : qe.call(a, ...f);
+        prepend: a.prepend ? (...p) => {
+          var Je;
+          const T = [], D = (Je = a.prepend) == null ? void 0 : Je.call(a, ...p);
           if (D)
-            S.push(D);
+            T.push(D);
           else
             return;
-          return S;
+          return T;
         } : void 0,
-        default: (f) => _(
+        default: (p) => x(
           "div",
           {
-            class: `${ye}__field`,
-            "data-id": f.attrId,
+            class: `${_e}__field`,
+            "data-id": p.attrId,
             ref: "field"
           },
           [
-            xe.methods.createLabel.call(r),
-            _("input", {
-              ".value": p.value,
-              ".id": f.attrId,
-              "^type": h.value,
-              readonly: e.readonly || e.loading || f.formLoading,
+            Te.methods.createLabel.call(r),
+            x("input", {
+              ".value": v.value,
+              ".id": p.attrId,
+              "^type": d.value,
+              readonly: e.readonly || e.loading || p.formLoading,
               ".placeholder": e.placeholder,
               ".disabled": e.disabled,
               "^tabindex": e.tabindex || "0",
               autocomplete: t.autocomplete,
               maxlength: t.maxlength,
-              onInput: y,
-              onFocus: g,
-              onBlur: v,
-              onChange: x,
-              onKeydown: A,
-              onKeyup: b,
+              onInput: g,
+              onFocus: C,
+              onBlur: m,
+              onChange: E,
+              onKeydown: _,
+              onKeyup: h,
               style: {
                 textAlign: e.inputAlign
               },
@@ -766,32 +772,32 @@ const ye = "y-field-input", ke = $({
           ]
         ),
         append: () => {
-          const f = [];
-          e.clearable && c.value && f.push(
-            _("div", { class: "y-input__append y-input__append--clear" }, [
-              _(
+          const p = [];
+          e.clearable && c.value && p.push(
+            x("div", { class: "y-input__append y-input__append--clear" }, [
+              x(
                 "button",
                 {
-                  class: `${ye}__clear`,
-                  onClick: k,
-                  onKeydown: T,
+                  class: `${_e}__clear`,
+                  onClick: w,
+                  onKeydown: b,
                   "^tabindex": "2"
                 },
-                [_(St)]
+                [x($t)]
               )
             ])
           );
-          const S = a.append;
-          return S && f.push(_("div", { class: "y-input__append" }, S())), f;
+          const T = a.append;
+          return T && p.push(x("div", { class: "y-input__append" }, T())), p;
         },
         "helper-text": () => {
-          var f;
-          return (f = a["helper-text"]) == null ? void 0 : f.call(a);
+          var p;
+          return (p = a["helper-text"]) == null ? void 0 : p.call(a);
         }
       }
     );
   }
-}), mn = $({
+}), wn = $({
   data: () => ({
     attrs_$: {},
     listeners_$: {}
@@ -814,10 +820,10 @@ const ye = "y-field-input", ke = $({
       immediate: !0
     }
   }
-}), Ze = "y-form", yn = ["form", "div", "section", "article"], gn = $({
-  name: Ze,
+}), tt = "y-form", Cn = ["form", "div", "section", "article"], Sn = $({
+  name: tt,
   inheritAttrs: !1,
-  mixins: [mn],
+  mixins: [wn],
   provide() {
     return {
       form$: this
@@ -828,7 +834,7 @@ const ye = "y-field-input", ke = $({
       type: String,
       default: "form",
       validator(e) {
-        return yn.includes(e);
+        return Cn.includes(e);
       }
     },
     loading: Boolean
@@ -865,15 +871,15 @@ const ye = "y-field-input", ke = $({
   render() {
     var t, n;
     const { tag: e } = this;
-    return _(
+    return x(
       e,
       {
-        class: Ze,
+        class: tt,
         ".novalidate": !0,
         onSubmit: (i) => {
           i.preventDefault(), this.$emit("submit", i, this.formData);
         },
-        onKeydown: Xt(
+        onKeydown: Qt(
           (i) => {
             i.preventDefault(), i.stopImmediatePropagation(), this.$emit("keydown.enter", i);
           },
@@ -884,15 +890,15 @@ const ye = "y-field-input", ke = $({
     );
   }
 });
-function bn(e) {
+function xn(e) {
   return {
-    numValue: w(() => {
+    numValue: S(() => {
       const { value: n } = e, i = Number(n);
       return Number.isNaN(i) || i < 0 ? 0 : i > 100 ? 100 : i;
     })
   };
 }
-const wn = /* @__PURE__ */ $({
+const kn = /* @__PURE__ */ $({
   name: "YProgressBar",
   props: {
     value: {
@@ -923,7 +929,7 @@ const wn = /* @__PURE__ */ $({
   setup(e) {
     const {
       numValue: t
-    } = bn(e);
+    } = xn(e);
     return {
       numValue: t
     };
@@ -988,24 +994,24 @@ const wn = /* @__PURE__ */ $({
       style: {
         color: a
       }
-    }, [l("span", null, [t, ae(" %")])])])])]);
+    }, [l("span", null, [t, le(" %")])])])])]);
   }
-}), $t = (e, t, n) => {
+}), Et = (e, t, n) => {
   function i(a) {
     e.classList.forEach((r) => {
       r.startsWith("theme--") && r !== a && e.classList.remove(r);
     }), e.classList.add(a);
   }
-  Ne(() => {
-    var o, c, p, h, u;
-    const a = ((c = (o = t.instance) == null ? void 0 : o.$yuyeon) == null ? void 0 : c.theme) ?? ((u = (h = (p = n == null ? void 0 : n.ctx) == null ? void 0 : p.root.appContext.config.globalProperties) == null ? void 0 : h.$yuyeon) == null ? void 0 : u.theme), r = t.value ?? a.name ?? "";
+  Fe(() => {
+    var o, c, v, d, u;
+    const a = ((c = (o = t.instance) == null ? void 0 : o.$yuyeon) == null ? void 0 : c.theme) ?? ((u = (d = (v = n == null ? void 0 : n.ctx) == null ? void 0 : v.root.appContext.config.globalProperties) == null ? void 0 : d.$yuyeon) == null ? void 0 : u.theme), r = t.value ?? a.name ?? "";
     if (!r)
       return;
     const s = `theme--${r}`;
     i(s);
   }, { flush: "post" });
 };
-const xt = $({
+const Tt = $({
   name: "y-card",
   props: {
     outline: {
@@ -1014,9 +1020,9 @@ const xt = $({
   },
   render() {
     var t;
-    const e = $t;
-    return pe(
-      _(
+    const e = Et;
+    return ge(
+      x(
         "div",
         {
           class: ["y-card"]
@@ -1026,26 +1032,26 @@ const xt = $({
       [[e]]
     );
   }
-}), _n = $({
+}), $n = $({
   name: "y-card-body",
   render() {
     var e, t;
-    return _("div", { class: "y-card__body" }, (t = (e = this.$slots).default) == null ? void 0 : t.call(e));
+    return x("div", { class: "y-card__body" }, (t = (e = this.$slots).default) == null ? void 0 : t.call(e));
   }
-}), Cn = $({
+}), En = $({
   name: "y-card-footer",
   render() {
     var e, t;
-    return _("div", { class: "y-card__footer" }, (t = (e = this.$slots).default) == null ? void 0 : t.call(e));
+    return x("div", { class: "y-card__footer" }, (t = (e = this.$slots).default) == null ? void 0 : t.call(e));
   }
-}), Sn = $({
+}), Tn = $({
   name: "y-card-header",
   render() {
     var e, t;
-    return _("div", { class: "y-card__header" }, (t = (e = this.$slots).default) == null ? void 0 : t.call(e));
+    return x("div", { class: "y-card__header" }, (t = (e = this.$slots).default) == null ? void 0 : t.call(e));
   }
 });
-const $n = /* @__PURE__ */ $({
+const An = /* @__PURE__ */ $({
   name: "y-chip",
   props: {
     color: String,
@@ -1058,7 +1064,7 @@ const $n = /* @__PURE__ */ $({
   },
   computed: {
     clickable() {
-      return H(this.$attrs, "onClick");
+      return z(this.$attrs, "onClick");
     },
     classes() {
       return {
@@ -1081,7 +1087,7 @@ const $n = /* @__PURE__ */ $({
     colorRgb(e) {
       var n, i;
       if (e != null && e.startsWith("#"))
-        return ((n = sn(e)) == null ? void 0 : n.join(",")) || "";
+        return ((n = fn(e)) == null ? void 0 : n.join(",")) || "";
       const t = /rgb(a?)\((?<v>.*)\)/;
       if (t.test(e)) {
         const a = ((i = t.exec(e)) == null ? void 0 : i[2]) || "";
@@ -1107,8 +1113,8 @@ const $n = /* @__PURE__ */ $({
     }, [(i = (n = this.$slots).default) == null ? void 0 : i.call(n)])]);
   }
 });
-let Je = 0;
-const xn = /* @__PURE__ */ $({
+let nt = 0;
+const Vn = /* @__PURE__ */ $({
   name: "YSwitch",
   model: {
     prop: "input",
@@ -1157,8 +1163,8 @@ const xn = /* @__PURE__ */ $({
     };
   },
   created() {
-    const e = Je.toString();
-    Je += 1, this.counterId = e, Array.isArray(this.input) ? this.inputByValue() : this.innerValue = this.input;
+    const e = nt.toString();
+    nt += 1, this.counterId = e, Array.isArray(this.input) ? this.inputByValue() : this.innerValue = this.input;
   },
   computed: {
     isMultipleInput() {
@@ -1241,11 +1247,11 @@ const xn = /* @__PURE__ */ $({
       inputId: s,
       innerValue: o,
       disabled: c,
-      trackStyles: p,
-      stateLabel: h,
+      trackStyles: v,
+      stateLabel: d,
       labelOn: u,
-      labelOff: d,
-      loading: g
+      labelOff: f,
+      loading: C
     } = this;
     return l("div", {
       class: {
@@ -1256,7 +1262,7 @@ const xn = /* @__PURE__ */ $({
       class: "y-switch__slot"
     }, [l("div", {
       class: "y-switch__input",
-      onClick: Re(t, ["capture"]),
+      onClick: je(t, ["capture"]),
       onKeydown: n
     }, [l("input", {
       id: s,
@@ -1271,8 +1277,8 @@ const xn = /* @__PURE__ */ $({
       ref: "checkbox"
     }, null), l("div", {
       class: "y-switch__track",
-      style: p
-    }, [h && l("div", {
+      style: v
+    }, [d && l("div", {
       class: "y-switch__state"
     }, [l("span", {
       class: "y-switch__state-label y-switch__state-label--on"
@@ -1281,10 +1287,10 @@ const xn = /* @__PURE__ */ $({
     }), l("span", {
       class: "y-switch__state-label y-switch__state-label--off"
     }, {
-      labelOff: d
+      labelOff: f
     })])]), l("div", {
       class: "y-switch__thumb"
-    }, [g && l("div", {
+    }, [C && l("div", {
       class: "y-switch__spinner"
     }, null)])]), l("label", {
       for: s,
@@ -1297,12 +1303,12 @@ const xn = /* @__PURE__ */ $({
   }
 });
 function L(e) {
-  const t = he();
+  const t = ye();
   t && (t.render = e);
 }
-const Qe = "y-layer-group";
-function kn(e) {
-  return { layerGroup: w(() => {
+const it = "y-layer-group";
+function Bn(e) {
+  return { layerGroup: S(() => {
     const n = e == null ? void 0 : e.value;
     let i = document.body;
     if (typeof n == "string") {
@@ -1310,15 +1316,15 @@ function kn(e) {
       r && (i = r);
     }
     n && n.nodeType === 1 && (i = n);
-    let a = i.querySelector(`.${Qe}`);
-    return a || (a = document.createElement("div"), a.className = Qe, i.appendChild(a)), a;
+    let a = i.querySelector(`.${it}`);
+    return a || (a = document.createElement("div"), a.className = it, i.appendChild(a)), a;
   }) };
 }
-function Tn(e, t) {
-  const n = C(!1), i = C();
+function Yn(e, t) {
+  const n = k(!1), i = k();
   i.value = t.value;
-  const a = w(() => e ? t.value : i.value);
-  I(t, () => {
+  const a = S(() => e ? t.value : i.value);
+  P(t, () => {
     n.value || (i.value = t.value), e || (n.value = !0);
   });
   function r() {
@@ -1330,45 +1336,45 @@ function Tn(e, t) {
     onAfterUpdate: r
   };
 }
-function En(e, t = 1e3, n) {
+function On(e, t = 1e3, n) {
   const { tickDuration: i } = n ?? {};
   let a = i ?? 100, r = -1;
-  const s = C(0), o = C(t), c = C(!1);
-  function p() {
-    const g = Date.now(), v = g - s.value;
-    if (o.value = o.value - v, o.value < 1)
+  const s = k(0), o = k(t), c = k(!1);
+  function v() {
+    const C = Date.now(), m = C - s.value;
+    if (o.value = o.value - m, o.value < 1)
       e();
     else {
-      const y = g - s.value + a, x = y >= 1 ? y : a;
-      s.value = g, r = window.setTimeout(p, x);
+      const g = C - s.value + a, E = g >= 1 ? g : a;
+      s.value = C, r = window.setTimeout(v, E);
     }
   }
-  function h() {
-    c.value || (c.value = !0, s.value = Date.now(), r = window.setTimeout(p, a));
+  function d() {
+    c.value || (c.value = !0, s.value = Date.now(), r = window.setTimeout(v, a));
   }
   function u() {
     window.clearTimeout(r), r = -1, c.value = !1;
   }
-  function d() {
+  function f() {
     u(), o.value = t;
   }
   return {
-    start: h,
+    start: d,
     stop: u,
-    reset: d,
+    reset: f,
     drift: o,
     isWork: c
   };
 }
-const je = {
+const Ue = {
   transition: {
     type: [String, Object],
     default: "slide-fade"
   }
 };
-function Vn(e) {
+function Ln(e) {
   return {
-    polyTransitionBindProps: w(() => {
+    polyTransitionBindProps: S(() => {
       const { is: n, ...i } = typeof e.transition == "object" ? e.transition : { is: e.transition, name: e.transition };
       return {
         is: n,
@@ -1377,50 +1383,50 @@ function Vn(e) {
     })
   };
 }
-const et = (e, { slots: t }) => {
-  const { is: n, transitionProps: i, ...a } = e, { component: r = Me, ...s } = typeof n == "object" ? { component: n, ...i } : { name: n };
-  return _(r, { ...s, ...i, ...a }, t);
+const at = (e, { slots: t }) => {
+  const { is: n, transitionProps: i, ...a } = e, { component: r = He, ...s } = typeof n == "object" ? { component: n, ...i } : { name: n };
+  return x(r, { ...s, ...i, ...a }, t);
 };
-function kt(e) {
+function At(e) {
   const t = e.getRootNode();
   return t !== document && t.getRootNode({ composed: !0 }) !== document ? null : t;
 }
-function An() {
+function In() {
   return !0;
 }
-function Bn(e, t, n) {
+function Pn(e, t, n) {
   const { value: i } = n, a = typeof i == "function" ? i : i.handler;
-  t._complementClick.lastMousedownWasOutside && Tt(e, t, n) && setTimeout(() => {
-    Et(e, n) && a && a(e);
+  t._complementClick.lastMousedownWasOutside && Vt(e, t, n) && setTimeout(() => {
+    Bt(e, n) && a && a(e);
   }, 0);
 }
-function Tt(e, t, n) {
-  if (!e || Et(e, n) === !1)
+function Vt(e, t, n) {
+  if (!e || Bt(e, n) === !1)
     return !1;
-  const i = kt(t);
+  const i = At(t);
   if (typeof ShadowRoot < "u" && i instanceof ShadowRoot && i.host === e.target)
     return !1;
   const a = (typeof n.value == "object" && n.value.include || (() => []))();
   return a.push(t), !a.some((r) => r == null ? void 0 : r.contains(e.target));
 }
-function Et(e, t) {
-  const { value: n } = t, i = typeof n == "object" && n.determine || An;
+function Bt(e, t) {
+  const { value: n } = t, i = typeof n == "object" && n.determine || In;
   return i && (i == null ? void 0 : i(e));
 }
-function tt(e, t) {
-  const n = kt(e);
+function rt(e, t) {
+  const n = At(e);
   t(document), typeof ShadowRoot < "u" && n instanceof ShadowRoot && t(n);
 }
-const Yn = {
+const Dn = {
   mounted(e, t) {
-    const n = (r) => Bn(r, e, t), i = (r) => {
-      e._complementClick.lastMousedownWasOutside = Tt(
+    const n = (r) => Pn(r, e, t), i = (r) => {
+      e._complementClick.lastMousedownWasOutside = Vt(
         r,
         e,
         t
       );
     };
-    tt(e, (r) => {
+    rt(e, (r) => {
       r == null || r.addEventListener("click", n, !0), r == null || r.addEventListener("mousedown", i, !0);
     }), e._complementClick || (e._complementClick = {
       lastMousedownWasOutside: !0
@@ -1435,7 +1441,7 @@ const Yn = {
     if (!e._complementClick)
       return;
     const n = t.instance.$.uid;
-    tt(e, (i) => {
+    rt(e, (i) => {
       var r;
       const a = (r = e._complementClick) == null ? void 0 : r[n];
       if (a) {
@@ -1449,10 +1455,10 @@ const K = /* @__PURE__ */ $({
   name: "YLayer",
   inheritAttrs: !1,
   components: {
-    PolyTransition: et
+    PolyTransition: at
   },
   directives: {
-    ComplementClick: Yn
+    ComplementClick: Dn
   },
   props: {
     modelValue: {
@@ -1483,7 +1489,7 @@ const K = /* @__PURE__ */ $({
       type: Boolean,
       default: !1
     },
-    ...je
+    ...Ue
   },
   emits: {
     "update:modelValue": (e) => !0,
@@ -1497,114 +1503,114 @@ const K = /* @__PURE__ */ $({
   }) {
     const {
       layerGroup: r
-    } = kn(), {
+    } = Bn(), {
       polyTransitionBindProps: s
-    } = Vn(e), o = w({
+    } = Ln(e), o = S({
       get: () => !!e.modelValue,
-      set: (V) => {
-        t("update:modelValue", V);
+      set: (B) => {
+        t("update:modelValue", B);
       }
-    }), c = ie(e, "disabled"), {
-      lazyValue: p,
-      onAfterUpdate: h
-    } = Tn(!!e.eager, o), u = w(() => !c.value && (p.value || o.value)), d = C(), g = C();
-    function v(V) {
-      t("click:complement", V), e.persistent || d.value !== null && d.value === V.target && e.closeClickScrim && (o.value = !1);
-    }
-    function y() {
+    }), c = se(e, "disabled"), {
+      lazyValue: v,
+      onAfterUpdate: d
+    } = Yn(!!e.eager, o), u = S(() => !c.value && (v.value || o.value)), f = k(), C = k();
+    function m(B) {
+      t("click:complement", B), e.persistent || f.value !== null && f.value === B.target && e.closeClickScrim && (o.value = !1);
+    }
+    function g() {
       return o.value;
     }
-    const x = re({
-      handler: v,
-      determine: y,
+    const E = ue({
+      handler: m,
+      determine: g,
       include: () => [
         // activatorEl.value
       ]
     });
     n({
-      scrim$: d,
-      content$: g,
+      scrim$: f,
+      content$: C,
       active: o,
-      onAfterUpdate: h
+      onAfterUpdate: d
     });
-    function A() {
+    function _() {
     }
-    function b() {
-      h();
+    function h() {
+      d();
     }
-    function k() {
+    function w() {
       e.closeClickScrim && (o.value = !1);
     }
-    const T = w(() => ({
+    const b = S(() => ({
       zIndex: "2000"
-    })), Y = w(() => {
+    })), V = S(() => {
       const {
-        classes: V
+        classes: B
       } = e;
       return {
-        ...W(V),
+        ...q(B),
         "y-layer--active": !!o.value
       };
-    }), O = w(() => ({
-      ...W(e.contentClasses)
+    }), Y = S(() => ({
+      ...q(e.contentClasses)
     }));
-    return L(() => l(Zt, {
+    return L(() => l(en, {
       disabled: !r.value,
       to: r.value
     }, {
-      default: () => [u.value && l("div", oe({
+      default: () => [u.value && l("div", ce({
         class: {
           "y-layer": !0,
-          ...Y.value
+          ...V.value
         },
-        style: T.value
-      }, i), [l(Me, {
+        style: b.value
+      }, i), [l(He, {
         name: "fade",
         appear: !0
       }, {
         default: () => [o.value && e.scrim && l("div", {
           class: "y-layer__scrim",
-          onClick: k,
+          onClick: w,
           ref: "scrim$"
         }, null)]
-      }), l(et, oe({
-        onAfterEnter: A,
-        onAfterLeave: b,
+      }), l(at, ce({
+        onAfterEnter: _,
+        onAfterLeave: h,
         appear: !0
       }, s.value), {
         default: () => {
-          var V;
-          return [pe(l("div", {
+          var B;
+          return [ge(l("div", {
             class: {
               "y-layer__content": !0,
-              ...O.value
+              ...Y.value
             },
             style: e.contentStyles,
             ref: "content$"
-          }, [(V = a.default) == null ? void 0 : V.call(a, {
+          }, [(B = a.default) == null ? void 0 : B.call(a, {
             active: o.value
-          })]), [[Jt, o.value], [dt("complement-click"), {
-            ...x
+          })]), [[tn, o.value], [pt("complement-click"), {
+            ...E
           }]])];
         }
       })])]
     })), {
-      complementClickOption: x,
+      complementClickOption: E,
       layerGroup: r,
       active: o,
       rendered: u,
-      onAfterUpdate: h,
-      scrim$: d,
-      content$: g,
+      onAfterUpdate: d,
+      scrim$: f,
+      content$: C,
       polyTransitionBindProps: s
     };
   }
 });
-const On = /* @__PURE__ */ $({
+const Nn = /* @__PURE__ */ $({
   name: "YDialog",
   components: {
     YLayer: K,
-    YCard: xt
+    YCard: Tt
   },
   props: {
     modelValue: {
@@ -1612,6 +1618,9 @@ const On = /* @__PURE__ */ $({
     },
     dialogClasses: {
       type: [Array, String, Object]
+    },
+    persistent: {
+      type: Boolean
     }
   },
   emits: ["update:modelValue"],
@@ -1619,24 +1628,24 @@ const On = /* @__PURE__ */ $({
     emit: t,
     slots: n
   }) {
-    const i = w({
+    const i = S({
       get: () => !!e.modelValue,
-      set: (h) => {
-        t("update:modelValue", h);
+      set: (d) => {
+        t("update:modelValue", d);
       }
-    }), a = w(() => ({
-      ...W(e.dialogClasses),
+    }), a = S(() => ({
+      ...q(e.dialogClasses),
       "y-dialog": !0
-    })), r = C();
-    function s(h) {
-      var g, v, y;
-      const u = h.relatedTarget, d = h.target;
-      if (u !== d && ((g = r.value) != null && g.content$) && ![document, (v = r.value) == null ? void 0 : v.content$].includes(d) && !((y = r.value) != null && y.content$.contains(d))) {
-        const x = 'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])', A = [...r.value.content$.querySelectorAll(x)].filter((T) => !T.hasAttribute("disabled") && !T.matches('[tabindex="-1"]'));
-        if (!A.length)
+    })), r = k();
+    function s(d) {
+      var C, m, g;
+      const u = d.relatedTarget, f = d.target;
+      if (u !== f && ((C = r.value) != null && C.content$) && ![document, (m = r.value) == null ? void 0 : m.content$].includes(f) && !((g = r.value) != null && g.content$.contains(f))) {
+        const E = 'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])', _ = [...r.value.content$.querySelectorAll(E)].filter((b) => !b.hasAttribute("disabled") && !b.matches('[tabindex="-1"]'));
+        if (!_.length)
           return;
-        const b = A[0], k = A[A.length - 1];
-        b === k ? k.focus() : b.focus();
+        const h = _[0], w = _[_.length - 1];
+        h === w ? w.focus() : h.focus();
       }
     }
     function o() {
@@ -1645,25 +1654,26 @@ const On = /* @__PURE__ */ $({
     function c() {
       document.removeEventListener("focusin", s);
     }
-    function p(h) {
-      i.value = h;
+    function v(d) {
+      i.value = d;
     }
-    return I(() => i.value, (h) => {
-      h ? o() : c();
+    return P(() => i.value, (d) => {
+      d ? o() : c();
     }, {
       immediate: !0
     }), L(() => {
-      var h;
-      return l(P, null, [(h = n.base) == null ? void 0 : h.call(n), l(K, {
+      var d;
+      return l(I, null, [(d = n.base) == null ? void 0 : d.call(n), l(K, {
         "model-value": i.value,
-        "onUpdate:modelValue": p,
+        "onUpdate:modelValue": v,
         scrim: !0,
         classes: a.value,
+        persistent: e.persistent,
         ref: r
       }, {
         default: (...u) => {
-          var d;
-          return (d = n.default) == null ? void 0 : d.call(n, ...u);
+          var f;
+          return (f = n.default) == null ? void 0 : f.call(n, ...u);
         }
       })]);
     }), {
@@ -1673,110 +1683,110 @@ const On = /* @__PURE__ */ $({
     };
   }
 });
-function Ln(e, t) {
+function Rn(e, t) {
   e.indexOf(t) === -1 && e.push(t);
 }
-const Vt = (e, t, n) => Math.min(Math.max(n, e), t), N = {
+const Yt = (e, t, n) => Math.min(Math.max(n, e), t), N = {
   duration: 0.3,
   delay: 0,
   endDelay: 0,
   repeat: 0,
   easing: "ease"
-}, le = (e) => typeof e == "number", z = (e) => Array.isArray(e) && !le(e[0]), In = (e, t, n) => {
+}, fe = (e) => typeof e == "number", W = (e) => Array.isArray(e) && !fe(e[0]), Mn = (e, t, n) => {
   const i = t - e;
   return ((n - e) % i + i) % i + e;
 };
-function Pn(e, t) {
-  return z(e) ? e[In(0, e.length, t)] : e;
+function Fn(e, t) {
+  return W(e) ? e[Mn(0, e.length, t)] : e;
 }
-const At = (e, t, n) => -n * e + n * t + e, Bt = () => {
-}, j = (e) => e, He = (e, t, n) => t - e === 0 ? 1 : (n - e) / (t - e);
-function Yt(e, t) {
+const Ot = (e, t, n) => -n * e + n * t + e, Lt = () => {
+}, H = (e) => e, We = (e, t, n) => t - e === 0 ? 1 : (n - e) / (t - e);
+function It(e, t) {
   const n = e[e.length - 1];
   for (let i = 1; i <= t; i++) {
-    const a = He(0, t, i);
-    e.push(At(n, 1, a));
+    const a = We(0, t, i);
+    e.push(Ot(n, 1, a));
   }
 }
-function Dn(e) {
+function jn(e) {
   const t = [0];
-  return Yt(t, e - 1), t;
+  return It(t, e - 1), t;
 }
-function Nn(e, t = Dn(e.length), n = j) {
+function Hn(e, t = jn(e.length), n = H) {
   const i = e.length, a = i - t.length;
-  return a > 0 && Yt(t, a), (r) => {
+  return a > 0 && It(t, a), (r) => {
     let s = 0;
     for (; s < i - 2 && !(r < t[s + 1]); s++)
       ;
-    let o = Vt(0, 1, He(t[s], t[s + 1], r));
-    return o = Pn(n, s)(o), At(e[s], e[s + 1], o);
+    let o = Yt(0, 1, We(t[s], t[s + 1], r));
+    return o = Fn(n, s)(o), Ot(e[s], e[s + 1], o);
   };
 }
-const Ot = (e) => Array.isArray(e) && le(e[0]), Te = (e) => typeof e == "object" && !!e.createAnimation, q = (e) => typeof e == "function", Rn = (e) => typeof e == "string", J = {
+const Pt = (e) => Array.isArray(e) && fe(e[0]), Ve = (e) => typeof e == "object" && !!e.createAnimation, G = (e) => typeof e == "function", zn = (e) => typeof e == "string", ee = {
   ms: (e) => e * 1e3,
   s: (e) => e / 1e3
-}, Lt = (e, t, n) => (((1 - 3 * n + 3 * t) * e + (3 * n - 6 * t)) * e + 3 * t) * e, Mn = 1e-7, Fn = 12;
-function jn(e, t, n, i, a) {
+}, Dt = (e, t, n) => (((1 - 3 * n + 3 * t) * e + (3 * n - 6 * t)) * e + 3 * t) * e, Kn = 1e-7, Un = 12;
+function Wn(e, t, n, i, a) {
   let r, s, o = 0;
   do
-    s = t + (n - t) / 2, r = Lt(s, i, a) - e, r > 0 ? n = s : t = s;
-  while (Math.abs(r) > Mn && ++o < Fn);
+    s = t + (n - t) / 2, r = Dt(s, i, a) - e, r > 0 ? n = s : t = s;
+  while (Math.abs(r) > Kn && ++o < Un);
   return s;
 }
-function G(e, t, n, i) {
+function Z(e, t, n, i) {
   if (e === t && n === i)
-    return j;
-  const a = (r) => jn(r, 0, 1, e, n);
-  return (r) => r === 0 || r === 1 ? r : Lt(a(r), t, i);
+    return H;
+  const a = (r) => Wn(r, 0, 1, e, n);
+  return (r) => r === 0 || r === 1 ? r : Dt(a(r), t, i);
 }
-const Hn = (e, t = "end") => (n) => {
+const qn = (e, t = "end") => (n) => {
   n = t === "end" ? Math.min(n, 0.999) : Math.max(n, 1e-3);
   const i = n * e, a = t === "end" ? Math.floor(i) : Math.ceil(i);
-  return Vt(0, 1, a / e);
-}, nt = {
-  ease: G(0.25, 0.1, 0.25, 1),
-  "ease-in": G(0.42, 0, 1, 1),
-  "ease-in-out": G(0.42, 0, 0.58, 1),
-  "ease-out": G(0, 0, 0.58, 1)
-}, Kn = /\((.*?)\)/;
-function it(e) {
-  if (q(e))
+  return Yt(0, 1, a / e);
+}, ot = {
+  ease: Z(0.25, 0.1, 0.25, 1),
+  "ease-in": Z(0.42, 0, 1, 1),
+  "ease-in-out": Z(0.42, 0, 0.58, 1),
+  "ease-out": Z(0, 0, 0.58, 1)
+}, Gn = /\((.*?)\)/;
+function st(e) {
+  if (G(e))
     return e;
-  if (Ot(e))
-    return G(...e);
-  if (nt[e])
-    return nt[e];
+  if (Pt(e))
+    return Z(...e);
+  if (ot[e])
+    return ot[e];
   if (e.startsWith("steps")) {
-    const t = Kn.exec(e);
+    const t = Gn.exec(e);
     if (t) {
       const n = t[1].split(",");
-      return Hn(parseFloat(n[0]), n[1].trim());
+      return qn(parseFloat(n[0]), n[1].trim());
     }
   }
-  return j;
+  return H;
 }
-class It {
-  constructor(t, n = [0, 1], { easing: i, duration: a = N.duration, delay: r = N.delay, endDelay: s = N.endDelay, repeat: o = N.repeat, offset: c, direction: p = "normal" } = {}) {
-    if (this.startTime = null, this.rate = 1, this.t = 0, this.cancelTimestamp = null, this.easing = j, this.duration = 0, this.totalDuration = 0, this.repeat = 0, this.playState = "idle", this.finished = new Promise((u, d) => {
-      this.resolve = u, this.reject = d;
-    }), i = i || N.easing, Te(i)) {
+class Nt {
+  constructor(t, n = [0, 1], { easing: i, duration: a = N.duration, delay: r = N.delay, endDelay: s = N.endDelay, repeat: o = N.repeat, offset: c, direction: v = "normal" } = {}) {
+    if (this.startTime = null, this.rate = 1, this.t = 0, this.cancelTimestamp = null, this.easing = H, this.duration = 0, this.totalDuration = 0, this.repeat = 0, this.playState = "idle", this.finished = new Promise((u, f) => {
+      this.resolve = u, this.reject = f;
+    }), i = i || N.easing, Ve(i)) {
       const u = i.createAnimation(n);
       i = u.easing, n = u.keyframes || n, a = u.duration || a;
     }
-    this.repeat = o, this.easing = z(i) ? j : it(i), this.updateDuration(a);
-    const h = Nn(n, c, z(i) ? i.map(it) : j);
+    this.repeat = o, this.easing = W(i) ? H : st(i), this.updateDuration(a);
+    const d = Hn(n, c, W(i) ? i.map(st) : H);
     this.tick = (u) => {
-      var d;
+      var f;
       r = r;
-      let g = 0;
-      this.pauseTime !== void 0 ? g = this.pauseTime : g = (u - this.startTime) * this.rate, this.t = g, g /= 1e3, g = Math.max(g - r, 0), this.playState === "finished" && this.pauseTime === void 0 && (g = this.totalDuration);
-      const v = g / this.duration;
-      let y = Math.floor(v), x = v % 1;
-      !x && v >= 1 && (x = 1), x === 1 && y--;
-      const A = y % 2;
-      (p === "reverse" || p === "alternate" && A || p === "alternate-reverse" && !A) && (x = 1 - x);
-      const b = g >= this.totalDuration ? 1 : Math.min(x, 1), k = h(this.easing(b));
-      t(k), this.pauseTime === void 0 && (this.playState === "finished" || g >= this.totalDuration + s) ? (this.playState = "finished", (d = this.resolve) === null || d === void 0 || d.call(this, k)) : this.playState !== "idle" && (this.frameRequestId = requestAnimationFrame(this.tick));
+      let C = 0;
+      this.pauseTime !== void 0 ? C = this.pauseTime : C = (u - this.startTime) * this.rate, this.t = C, C /= 1e3, C = Math.max(C - r, 0), this.playState === "finished" && this.pauseTime === void 0 && (C = this.totalDuration);
+      const m = C / this.duration;
+      let g = Math.floor(m), E = m % 1;
+      !E && m >= 1 && (E = 1), E === 1 && g--;
+      const _ = g % 2;
+      (v === "reverse" || v === "alternate" && _ || v === "alternate-reverse" && !_) && (E = 1 - E);
+      const h = C >= this.totalDuration ? 1 : Math.min(E, 1), w = d(this.easing(h));
+      t(w), this.pauseTime === void 0 && (this.playState === "finished" || C >= this.totalDuration + s) ? (this.playState = "finished", (f = this.resolve) === null || f === void 0 || f.call(this, w)) : this.playState !== "idle" && (this.frameRequestId = requestAnimationFrame(this.tick));
     }, this.play();
   }
   play() {
@@ -1817,13 +1827,13 @@ class It {
     this.rate = t;
   }
 }
-var Ee = function() {
+var Be = function() {
 };
-process.env.NODE_ENV !== "production" && (Ee = function(e, t) {
+process.env.NODE_ENV !== "production" && (Be = function(e, t) {
   if (!e)
     throw new Error(t);
 });
-class Un {
+class Xn {
   setAnimation(t) {
     this.animation = t, t == null || t.finished.then(() => this.clearAnimation()).catch(() => {
     });
@@ -1832,53 +1842,53 @@ class Un {
     this.animation = this.generator = void 0;
   }
 }
-const ge = /* @__PURE__ */ new WeakMap();
-function Pt(e) {
-  return ge.has(e) || ge.set(e, {
+const we = /* @__PURE__ */ new WeakMap();
+function Rt(e) {
+  return we.has(e) || we.set(e, {
     transforms: [],
     values: /* @__PURE__ */ new Map()
-  }), ge.get(e);
+  }), we.get(e);
 }
-function zn(e, t) {
-  return e.has(t) || e.set(t, new Un()), e.get(t);
+function Zn(e, t) {
+  return e.has(t) || e.set(t, new Xn()), e.get(t);
 }
-const Wn = ["", "X", "Y", "Z"], qn = ["translate", "scale", "rotate", "skew"], ue = {
+const Jn = ["", "X", "Y", "Z"], Qn = ["translate", "scale", "rotate", "skew"], he = {
   x: "translateX",
   y: "translateY",
   z: "translateZ"
-}, at = {
+}, lt = {
   syntax: "<angle>",
   initialValue: "0deg",
   toDefaultUnit: (e) => e + "deg"
-}, Gn = {
+}, ei = {
   translate: {
     syntax: "<length-percentage>",
     initialValue: "0px",
     toDefaultUnit: (e) => e + "px"
   },
-  rotate: at,
+  rotate: lt,
   scale: {
     syntax: "<number>",
     initialValue: 1,
-    toDefaultUnit: j
+    toDefaultUnit: H
   },
-  skew: at
-}, Q = /* @__PURE__ */ new Map(), Ke = (e) => `--motion-${e}`, ce = ["x", "y", "z"];
-qn.forEach((e) => {
-  Wn.forEach((t) => {
-    ce.push(e + t), Q.set(Ke(e + t), Gn[e]);
+  skew: lt
+}, te = /* @__PURE__ */ new Map(), qe = (e) => `--motion-${e}`, ve = ["x", "y", "z"];
+Qn.forEach((e) => {
+  Jn.forEach((t) => {
+    ve.push(e + t), te.set(qe(e + t), ei[e]);
   });
 });
-const Xn = (e, t) => ce.indexOf(e) - ce.indexOf(t), Zn = new Set(ce), Dt = (e) => Zn.has(e), Jn = (e, t) => {
-  ue[t] && (t = ue[t]);
-  const { transforms: n } = Pt(e);
-  Ln(n, t), e.style.transform = Qn(n);
-}, Qn = (e) => e.sort(Xn).reduce(ei, "").trim(), ei = (e, t) => `${e} ${t}(var(${Ke(t)}))`, Ve = (e) => e.startsWith("--"), rt = /* @__PURE__ */ new Set();
-function ti(e) {
-  if (!rt.has(e)) {
-    rt.add(e);
+const ti = (e, t) => ve.indexOf(e) - ve.indexOf(t), ni = new Set(ve), Mt = (e) => ni.has(e), ii = (e, t) => {
+  he[t] && (t = he[t]);
+  const { transforms: n } = Rt(e);
+  Rn(n, t), e.style.transform = ai(n);
+}, ai = (e) => e.sort(ti).reduce(ri, "").trim(), ri = (e, t) => `${e} ${t}(var(${qe(t)}))`, Ye = (e) => e.startsWith("--"), ut = /* @__PURE__ */ new Set();
+function oi(e) {
+  if (!ut.has(e)) {
+    ut.add(e);
     try {
-      const { syntax: t, initialValue: n } = Q.has(e) ? Q.get(e) : {};
+      const { syntax: t, initialValue: n } = te.has(e) ? te.get(e) : {};
       CSS.registerProperty({
         name: e,
         inherits: !1,
@@ -1889,140 +1899,140 @@ function ti(e) {
     }
   }
 }
-const be = (e, t) => document.createElement("div").animate(e, t), ot = {
+const Ce = (e, t) => document.createElement("div").animate(e, t), ct = {
   cssRegisterProperty: () => typeof CSS < "u" && Object.hasOwnProperty.call(CSS, "registerProperty"),
   waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
   partialKeyframes: () => {
     try {
-      be({ opacity: [1] });
+      Ce({ opacity: [1] });
     } catch {
       return !1;
     }
     return !0;
   },
-  finished: () => !!be({ opacity: [0, 1] }, { duration: 1e-3 }).finished,
+  finished: () => !!Ce({ opacity: [0, 1] }, { duration: 1e-3 }).finished,
   linearEasing: () => {
     try {
-      be({ opacity: 0 }, { easing: "linear(0, 1)" });
+      Ce({ opacity: 0 }, { easing: "linear(0, 1)" });
     } catch {
       return !1;
     }
     return !0;
   }
-}, we = {}, U = {};
-for (const e in ot)
-  U[e] = () => (we[e] === void 0 && (we[e] = ot[e]()), we[e]);
-const ni = 0.015, ii = (e, t) => {
+}, Se = {}, U = {};
+for (const e in ct)
+  U[e] = () => (Se[e] === void 0 && (Se[e] = ct[e]()), Se[e]);
+const si = 0.015, li = (e, t) => {
   let n = "";
-  const i = Math.round(t / ni);
+  const i = Math.round(t / si);
   for (let a = 0; a < i; a++)
-    n += e(He(0, i - 1, a)) + ", ";
+    n += e(We(0, i - 1, a)) + ", ";
   return n.substring(0, n.length - 2);
-}, st = (e, t) => q(e) ? U.linearEasing() ? `linear(${ii(e, t)})` : N.easing : Ot(e) ? ai(e) : e, ai = ([e, t, n, i]) => `cubic-bezier(${e}, ${t}, ${n}, ${i})`;
-function ri(e, t) {
+}, dt = (e, t) => G(e) ? U.linearEasing() ? `linear(${li(e, t)})` : N.easing : Pt(e) ? ui(e) : e, ui = ([e, t, n, i]) => `cubic-bezier(${e}, ${t}, ${n}, ${i})`;
+function ci(e, t) {
   for (let n = 0; n < e.length; n++)
     e[n] === null && (e[n] = n ? e[n - 1] : t());
   return e;
 }
-const oi = (e) => Array.isArray(e) ? e : [e];
-function Ae(e) {
-  return ue[e] && (e = ue[e]), Dt(e) ? Ke(e) : e;
+const di = (e) => Array.isArray(e) ? e : [e];
+function Oe(e) {
+  return he[e] && (e = he[e]), Mt(e) ? qe(e) : e;
 }
-const te = {
+const ae = {
   get: (e, t) => {
-    t = Ae(t);
-    let n = Ve(t) ? e.style.getPropertyValue(t) : getComputedStyle(e)[t];
+    t = Oe(t);
+    let n = Ye(t) ? e.style.getPropertyValue(t) : getComputedStyle(e)[t];
     if (!n && n !== 0) {
-      const i = Q.get(t);
+      const i = te.get(t);
       i && (n = i.initialValue);
     }
     return n;
   },
   set: (e, t, n) => {
-    t = Ae(t), Ve(t) ? e.style.setProperty(t, n) : e.style[t] = n;
+    t = Oe(t), Ye(t) ? e.style.setProperty(t, n) : e.style[t] = n;
   }
 };
-function Nt(e, t = !0) {
+function Ft(e, t = !0) {
   if (!(!e || e.playState === "finished"))
     try {
       e.stop ? e.stop() : (t && e.commitStyles(), e.cancel());
     } catch {
     }
 }
-function si(e, t) {
+function fi(e, t) {
   var n;
-  let i = (t == null ? void 0 : t.toDefaultUnit) || j;
+  let i = (t == null ? void 0 : t.toDefaultUnit) || H;
   const a = e[e.length - 1];
-  if (Rn(a)) {
+  if (zn(a)) {
     const r = ((n = a.match(/(-?[\d.]+)([a-z%]*)/)) === null || n === void 0 ? void 0 : n[2]) || "";
     r && (i = (s) => s + r);
   }
   return i;
 }
-function li() {
+function hi() {
   return window.__MOTION_DEV_TOOLS_RECORD;
 }
-function ui(e, t, n, i = {}, a) {
-  const r = li(), s = i.record !== !1 && r;
-  let o, { duration: c = N.duration, delay: p = N.delay, endDelay: h = N.endDelay, repeat: u = N.repeat, easing: d = N.easing, persist: g = !1, direction: v, offset: y, allowWebkitAcceleration: x = !1 } = i;
-  const A = Pt(e), b = Dt(t);
-  let k = U.waapi();
-  b && Jn(e, t);
-  const T = Ae(t), Y = zn(A.values, T), O = Q.get(T);
-  return Nt(Y.animation, !(Te(d) && Y.generator) && i.record !== !1), () => {
-    const V = () => {
-      var E, f;
-      return (f = (E = te.get(e, T)) !== null && E !== void 0 ? E : O == null ? void 0 : O.initialValue) !== null && f !== void 0 ? f : 0;
+function vi(e, t, n, i = {}, a) {
+  const r = hi(), s = i.record !== !1 && r;
+  let o, { duration: c = N.duration, delay: v = N.delay, endDelay: d = N.endDelay, repeat: u = N.repeat, easing: f = N.easing, persist: C = !1, direction: m, offset: g, allowWebkitAcceleration: E = !1 } = i;
+  const _ = Rt(e), h = Mt(t);
+  let w = U.waapi();
+  h && ii(e, t);
+  const b = Oe(t), V = Zn(_.values, b), Y = te.get(b);
+  return Ft(V.animation, !(Ve(f) && V.generator) && i.record !== !1), () => {
+    const B = () => {
+      var A, p;
+      return (p = (A = ae.get(e, b)) !== null && A !== void 0 ? A : Y == null ? void 0 : Y.initialValue) !== null && p !== void 0 ? p : 0;
     };
-    let m = ri(oi(n), V);
-    const B = si(m, O);
-    if (Te(d)) {
-      const E = d.createAnimation(m, t !== "opacity", V, T, Y);
-      d = E.easing, m = E.keyframes || m, c = E.duration || c;
-    }
-    if (Ve(T) && (U.cssRegisterProperty() ? ti(T) : k = !1), b && !U.linearEasing() && (q(d) || z(d) && d.some(q)) && (k = !1), k) {
-      O && (m = m.map((S) => le(S) ? O.toDefaultUnit(S) : S)), m.length === 1 && (!U.partialKeyframes() || s) && m.unshift(V());
-      const E = {
-        delay: J.ms(p),
-        duration: J.ms(c),
-        endDelay: J.ms(h),
-        easing: z(d) ? void 0 : st(d, c),
-        direction: v,
+    let y = ci(di(n), B);
+    const O = fi(y, Y);
+    if (Ve(f)) {
+      const A = f.createAnimation(y, t !== "opacity", B, b, V);
+      f = A.easing, y = A.keyframes || y, c = A.duration || c;
+    }
+    if (Ye(b) && (U.cssRegisterProperty() ? oi(b) : w = !1), h && !U.linearEasing() && (G(f) || W(f) && f.some(G)) && (w = !1), w) {
+      Y && (y = y.map((T) => fe(T) ? Y.toDefaultUnit(T) : T)), y.length === 1 && (!U.partialKeyframes() || s) && y.unshift(B());
+      const A = {
+        delay: ee.ms(v),
+        duration: ee.ms(c),
+        endDelay: ee.ms(d),
+        easing: W(f) ? void 0 : dt(f, c),
+        direction: m,
         iterations: u + 1,
         fill: "both"
       };
       o = e.animate({
-        [T]: m,
-        offset: y,
-        easing: z(d) ? d.map((S) => st(S, c)) : void 0
-      }, E), o.finished || (o.finished = new Promise((S, D) => {
-        o.onfinish = S, o.oncancel = D;
+        [b]: y,
+        offset: g,
+        easing: W(f) ? f.map((T) => dt(T, c)) : void 0
+      }, A), o.finished || (o.finished = new Promise((T, D) => {
+        o.onfinish = T, o.oncancel = D;
       }));
-      const f = m[m.length - 1];
+      const p = y[y.length - 1];
       o.finished.then(() => {
-        g || (te.set(e, T, f), o.cancel());
-      }).catch(Bt), x || (o.playbackRate = 1.000001);
-    } else if (a && b)
-      m = m.map((E) => typeof E == "string" ? parseFloat(E) : E), m.length === 1 && m.unshift(parseFloat(V())), o = new a((E) => {
-        te.set(e, T, B ? B(E) : E);
-      }, m, Object.assign(Object.assign({}, i), {
+        C || (ae.set(e, b, p), o.cancel());
+      }).catch(Lt), E || (o.playbackRate = 1.000001);
+    } else if (a && h)
+      y = y.map((A) => typeof A == "string" ? parseFloat(A) : A), y.length === 1 && y.unshift(parseFloat(B())), o = new a((A) => {
+        ae.set(e, b, O ? O(A) : A);
+      }, y, Object.assign(Object.assign({}, i), {
         duration: c,
-        easing: d
+        easing: f
       }));
     else {
-      const E = m[m.length - 1];
-      te.set(e, T, O && le(E) ? O.toDefaultUnit(E) : E);
+      const A = y[y.length - 1];
+      ae.set(e, b, Y && fe(A) ? Y.toDefaultUnit(A) : A);
     }
-    return s && r(e, t, m, {
+    return s && r(e, t, y, {
       duration: c,
-      delay: p,
-      easing: d,
+      delay: v,
+      easing: f,
       repeat: u,
-      offset: y
-    }, "motion-one"), Y.setAnimation(o), o;
+      offset: g
+    }, "motion-one"), V.setAnimation(o), o;
   };
 }
-const ci = (e, t) => (
+const pi = (e, t) => (
   /**
    * TODO: Make test for this
    * Always return a new object otherwise delay is overwritten by results of stagger
@@ -2030,30 +2040,30 @@ const ci = (e, t) => (
    */
   e[t] ? Object.assign(Object.assign({}, e), e[t]) : Object.assign({}, e)
 );
-function di(e, t) {
+function mi(e, t) {
   var n;
   return typeof e == "string" ? t ? ((n = t[e]) !== null && n !== void 0 || (t[e] = document.querySelectorAll(e)), e = t[e]) : e = document.querySelectorAll(e) : e instanceof Element && (e = [e]), Array.from(e || []);
 }
-const fi = (e) => e(), Rt = (e, t, n = N.duration) => new Proxy({
-  animations: e.map(fi).filter(Boolean),
+const yi = (e) => e(), jt = (e, t, n = N.duration) => new Proxy({
+  animations: e.map(yi).filter(Boolean),
   duration: n,
   options: t
-}, pi), hi = (e) => e.animations[0], pi = {
+}, bi), gi = (e) => e.animations[0], bi = {
   get: (e, t) => {
-    const n = hi(e);
+    const n = gi(e);
     switch (t) {
       case "duration":
         return e.duration;
       case "currentTime":
-        return J.s((n == null ? void 0 : n[t]) || 0);
+        return ee.s((n == null ? void 0 : n[t]) || 0);
       case "playbackRate":
       case "playState":
         return n == null ? void 0 : n[t];
       case "finished":
-        return e.finished || (e.finished = Promise.all(e.animations.map(vi)).catch(Bt)), e.finished;
+        return e.finished || (e.finished = Promise.all(e.animations.map(_i)).catch(Lt)), e.finished;
       case "stop":
         return () => {
-          e.animations.forEach((i) => Nt(i));
+          e.animations.forEach((i) => Ft(i));
         };
       case "forEachNative":
         return (i) => {
@@ -2066,7 +2076,7 @@ const fi = (e) => e(), Rt = (e, t, n = N.duration) => new Proxy({
   set: (e, t, n) => {
     switch (t) {
       case "currentTime":
-        n = J.ms(n);
+        n = ee.ms(n);
       case "currentTime":
       case "playbackRate":
         for (let i = 0; i < e.animations.length; i++)
@@ -2075,26 +2085,26 @@ const fi = (e) => e(), Rt = (e, t, n = N.duration) => new Proxy({
     }
     return !1;
   }
-}, vi = (e) => e.finished;
-function mi(e, t, n) {
-  return q(e) ? e(t, n) : e;
+}, _i = (e) => e.finished;
+function wi(e, t, n) {
+  return G(e) ? e(t, n) : e;
 }
-function yi(e) {
+function Ci(e) {
   return function(n, i, a = {}) {
-    n = di(n);
+    n = mi(n);
     const r = n.length;
-    Ee(!!r, "No valid element provided."), Ee(!!i, "No keyframes defined.");
+    Be(!!r, "No valid element provided."), Be(!!i, "No keyframes defined.");
     const s = [];
     for (let o = 0; o < r; o++) {
       const c = n[o];
-      for (const p in i) {
-        const h = ci(a, p);
-        h.delay = mi(h.delay, o, r);
-        const u = ui(c, p, i[p], h, e);
+      for (const v in i) {
+        const d = pi(a, v);
+        d.delay = wi(d.delay, o, r);
+        const u = vi(c, v, i[v], d, e);
         s.push(u);
       }
     }
-    return Rt(
+    return jt(
       s,
       a,
       /**
@@ -2110,20 +2120,20 @@ function yi(e) {
     );
   };
 }
-const gi = yi(It);
-function bi(e, t = {}) {
-  return Rt([
+const Si = Ci(Nt);
+function xi(e, t = {}) {
+  return jt([
     () => {
-      const n = new It(e, [0, 1], t);
+      const n = new Nt(e, [0, 1], t);
       return n.finished.catch(() => {
       }), n;
     }
   ], t, t.duration);
 }
-function wi(e, t, n) {
-  return (q(e) ? bi : gi)(e, t, n);
+function ki(e, t, n) {
+  return (G(e) ? xi : Si)(e, t, n);
 }
-function Ue(e, t = "camel") {
+function Ge(e, t = "camel") {
   let n = "";
   for (let i = 0; i < e.length; i += 1) {
     const a = e[i], r = a.charCodeAt(0);
@@ -2131,7 +2141,7 @@ function Ue(e, t = "camel") {
   }
   return n;
 }
-function Mt(e) {
+function Ht(e) {
   let t = "", n = 0;
   for (; n < e.length; ) {
     const i = e[n];
@@ -2139,68 +2149,68 @@ function Mt(e) {
   }
   return t;
 }
-function _i(e, t) {
+function $i(e, t) {
   let n;
   function i() {
-    n = ft(), n.run(
+    n = mt(), n.run(
       () => t.length ? t(() => {
         n == null || n.stop(), i();
       }) : t()
     );
   }
-  I(
+  P(
     e,
     (a) => {
       a && !n ? i() : a || (n == null || n.stop(), n = void 0);
     },
     { immediate: !0 }
-  ), Qt(() => {
+  ), nn(() => {
     n == null || n.stop();
   });
 }
-function me(e, t = "modelValue", n, i = (r) => r, a = (r) => r) {
-  const r = he(), s = Ue(t), o = s === t ? Mt(t) : t, c = C(
+function X(e, t = "modelValue", n, i = (r) => r, a = (r) => r) {
+  const r = ye(), s = Ge(t), o = s === t ? Ht(t) : t, c = k(
     e[o] !== void 0 ? e[o] : n
   );
-  function p() {
+  function v() {
     return e[o];
   }
-  const h = w(() => {
-    p();
-    const d = r.vnode.props;
-    return (H(d, s) || H(d, o)) && (H(d, `onUpdate:${s}`) || H(d, `onUpdate:${o}`));
+  const d = S(() => {
+    v();
+    const f = r.vnode.props;
+    return (z(f, s) || z(f, o)) && (z(f, `onUpdate:${s}`) || z(f, `onUpdate:${o}`));
   });
-  _i(
-    () => !h.value,
+  $i(
+    () => !d.value,
     () => {
-      I(
-        () => p(),
-        (d) => {
-          c.value = d;
+      P(
+        () => v(),
+        (f) => {
+          c.value = f;
         }
       );
     }
   );
-  const u = w({
+  const u = S({
     get() {
-      return i(h.value ? p() : c.value);
+      return i(d.value ? v() : c.value);
     },
-    set(d) {
-      const g = a(d), v = ht(h.value ? p() : c.value);
-      v === g || a(v) === d || (c.value = g, r == null || r.emit(`update:${o}`, g));
+    set(f) {
+      const C = a(f), m = yt(d.value ? v() : c.value);
+      m === C || a(m) === f || (c.value = C, r == null || r.emit(`update:${o}`, C));
     }
   });
   return Object.defineProperty(u, "rxValue", {
-    get: () => h.value ? p() : c.value
+    get: () => d.value ? v() : c.value
   }), u;
 }
-const Be = /* @__PURE__ */ $({
+const Le = /* @__PURE__ */ $({
   name: "YPlate",
   props: {
     variation: Object
   },
   setup() {
-    const e = w(() => ({
+    const e = S(() => ({
       "y-plate": !0
     }));
     L(() => l("div", {
@@ -2208,7 +2218,7 @@ const Be = /* @__PURE__ */ $({
     }, null));
   }
 });
-const lt = {
+const ft = {
   name: "y-snackbar",
   onBeforeEnter: (e) => (t) => {
     if (!t.getAttribute("data-transform")) {
@@ -2218,7 +2228,7 @@ const lt = {
   },
   onEnter(e, t) {
     const n = e.getAttribute("data-transform");
-    e.getAttribute("data-motion") || !n || (e.setAttribute("data-motion", "true"), wi(e, {
+    e.getAttribute("data-motion") || !n || (e.setAttribute("data-motion", "true"), ki(e, {
       transform: `${n.replace(/translateY(.+)/, "translateY(0)")}`
     }, {
       duration: 0.1
@@ -2226,10 +2236,10 @@ const lt = {
       e.removeAttribute("data-transform"), e.removeAttribute("data-motion"), t();
     }));
   }
-}, Ci = /* @__PURE__ */ $({
+}, Ei = /* @__PURE__ */ $({
   name: "YSnackbar",
   components: {
-    YPlate: Be,
+    YPlate: Le,
     YLayer: K
   },
   emits: ["update:modelValue", "click"],
@@ -2247,7 +2257,7 @@ const lt = {
     transition: {
       type: [String, Object],
       default: () => ({
-        ...lt
+        ...ft
       })
     },
     /**
@@ -2265,70 +2275,70 @@ const lt = {
     emit: t,
     slots: n
   }) {
-    const i = me(e), a = C(!1), r = w(() => ({
+    const i = X(e), a = k(!1), r = S(() => ({
       "y-snackbar": !0
-    })), s = w(() => ({
-      ...W(e.contentClasses),
+    })), s = S(() => ({
+      ...q(e.contentClasses),
       "y-snackbar__display": !0
-    })), o = w(() => {
-      var T;
-      const [y, x] = (T = e.position) == null ? void 0 : T.split(" ");
-      let A = "top", b = "left";
-      x ? (b = x, A = y) : b = y;
-      const k = {
-        [b === "center" ? "left" : b]: b === "center" ? "50%" : 0,
-        [A]: 0
+    })), o = S(() => {
+      var b;
+      const [g, E] = (b = e.position) == null ? void 0 : b.split(" ");
+      let _ = "top", h = "left";
+      E ? (h = E, _ = g) : h = g;
+      const w = {
+        [h === "center" ? "left" : h]: h === "center" ? "50%" : 0,
+        [_]: 0
       };
-      return b === "center" && (k.transform = "translateX(-50%)"), k;
+      return h === "center" && (w.transform = "translateX(-50%)"), w;
     });
     function c() {
       i.value = !1;
     }
     const {
-      start: p,
-      stop: h,
+      start: v,
+      stop: d,
       reset: u
-    } = En(c, e.duration);
-    function d() {
-      e.duration > 0 && p();
-    }
-    I(a, (y) => {
-      y ? h() : d();
-    }), I(i, (y) => {
-      y ? d() : u();
+    } = On(c, e.duration);
+    function f() {
+      e.duration > 0 && v();
+    }
+    P(a, (g) => {
+      g ? d() : f();
+    }), P(i, (g) => {
+      g ? f() : u();
     }, {
       immediate: !0
     });
-    function g(y) {
-      t("click", y), i.value = !1;
+    function C(g) {
+      t("click", g), i.value = !1;
     }
-    const v = w(() => {
+    const m = S(() => {
       const {
-        transition: y,
-        position: x
+        transition: g,
+        position: E
       } = e;
-      return (y == null ? void 0 : y.name) === "y-snackbar" ? (y.onBeforeEnter = lt.onBeforeEnter(x.includes("top") ? "top" : "bottom"), {
-        ...y
+      return (g == null ? void 0 : g.name) === "y-snackbar" ? (g.onBeforeEnter = ft.onBeforeEnter(E.includes("top") ? "top" : "bottom"), {
+        ...g
       }) : e.transition;
     });
     return L(() => l(K, {
       modelValue: i.value,
-      "onUpdate:modelValue": (y) => i.value = y,
+      "onUpdate:modelValue": (g) => i.value = g,
       classes: r.value,
       "content-classes": s.value,
       scrim: !1,
       "content-styles": o.value,
-      transition: v.value,
+      transition: m.value,
       ref: "layer"
     }, {
       default: () => {
-        var y;
-        return l(P, null, [l(Be, null, null), l("div", {
+        var g;
+        return l(I, null, [l(Le, null, null), l("div", {
           class: "y-snackbar__content",
-          onClick: Re(g, ["capture"]),
+          onClick: je(C, ["capture"]),
           onMouseenter: () => a.value = !0,
           onMouseleave: () => a.value = !1
-        }, [(y = n.default) == null ? void 0 : y.call(n)])]);
+        }, [(g = n.default) == null ? void 0 : g.call(n)])]);
       }
     })), {
       active: i,
@@ -2336,14 +2346,14 @@ const lt = {
       classes: r,
       computedContentClasses: s,
       computedInset: o,
-      proxyTransition: v,
-      onClickContent: g
+      proxyTransition: m,
+      onClickContent: C
     };
   }
 });
-const Ft = "YTooltip";
-Ue(Ft);
-const Si = {
+const zt = "YTooltip";
+Ge(zt);
+const Ti = {
   modelValue: {
     type: Boolean,
     default: !1
@@ -2371,12 +2381,12 @@ const Si = {
     type: Boolean,
     default: !0
   }
-}, $i = /* @__PURE__ */ $({
-  name: Ft,
+}, Ai = /* @__PURE__ */ $({
+  name: zt,
   props: {
-    ...Si,
+    ...Ti,
     transition: {
-      ...je.transition,
+      ...Ue.transition,
       default: "fade"
     }
   },
@@ -2386,93 +2396,100 @@ const Si = {
     emit: n,
     expose: i
   }) {
-    const a = C(), r = C(), s = C(), o = C(), c = C(), p = w(() => ({
-      ...W(e.tooltipClasses),
+    const a = k(), r = k(), s = k(), o = k(), c = k(), v = S(() => ({
+      ...q(e.tooltipClasses),
       "y-tooltip": !0
-    })), h = me(e), u = w({
-      get: () => !!h.value,
-      set: (b) => {
-        b && e.disabled || (h.value = b);
+    })), d = X(e), u = S({
+      get: () => !!d.value,
+      set: (h) => {
+        h && e.disabled || (d.value = h);
       }
-    }), d = w(() => {
-      const b = o.value;
-      if (b) {
+    }), f = S(() => {
+      const h = o.value;
+      if (h) {
         const {
-          position: k,
-          align: T
-        } = e, Y = c.value, O = b.getBoundingClientRect();
-        let V = O.top, m = O.left + O.width / 2;
-        return Y && (k === "top" || k === "bottom") && (k === "top" && (V -= Y.clientHeight, V -= 8), k === "bottom" && (V += O.height, V += 8), T === "center" ? m -= Y.clientWidth / 2 : T === "end" && (m = O.right, m -= Y.clientWidth)), {
-          top: `${V}px`,
-          left: `${m}px`
+          position: w,
+          align: b
+        } = e, V = c.value, Y = h.getBoundingClientRect();
+        let B = Y.top, y = Y.left + Y.width / 2;
+        return V && (w === "top" || w === "bottom") && (w === "top" && (B -= V.clientHeight, B -= 8), w === "bottom" && (B += Y.height, B += 8), b === "center" ? y -= V.clientWidth / 2 : b === "end" && (y = Y.right, y -= V.clientWidth)), {
+          top: `${B}px`,
+          left: `${y}px`
         };
       }
       return {};
-    }), g = w(() => {
-      var b, k;
-      return (k = (b = s.value) == null ? void 0 : b[0]) == null ? void 0 : k.el;
+    }), C = S(() => {
+      var h, w;
+      return (w = (h = s.value) == null ? void 0 : h[0]) == null ? void 0 : w.el;
     });
-    Ne(() => {
-      var k, T, Y;
+    Fe(() => {
+      var w, b, V;
       if (!r.value) {
-        ((k = g.value) == null ? void 0 : k.nodeType) !== 3 && (o.value = g.value);
+        ((w = C.value) == null ? void 0 : w.nodeType) !== 3 && (o.value = C.value);
         return;
       }
-      const b = r.value;
-      o.value = (T = r.value) != null && T.$el ? (Y = r.value) == null ? void 0 : Y.$el : b;
-    }), I(u, (b) => {
-      b && ve(() => {
-        var T;
-        const k = (T = a.value) == null ? void 0 : T.content$;
-        c.value = k;
+      const h = r.value;
+      o.value = (b = r.value) != null && b.$el ? (V = r.value) == null ? void 0 : V.$el : h;
+    }), P(u, (h) => {
+      h && be(() => {
+        var b;
+        const w = (b = a.value) == null ? void 0 : b.content$;
+        c.value = w;
       });
     });
-    function v(b) {
+    function m(h) {
       e.openOnHover && (u.value = !0);
     }
-    function y(b) {
+    function g(h) {
       e.openOnHover && (u.value = !1);
     }
-    function x(b) {
-      b.addEventListener("mouseenter", v), b.addEventListener("mouseleave", y);
+    function E(h) {
+      h.addEventListener("mouseenter", m), h.addEventListener("mouseleave", g);
     }
-    function A(b) {
-      b.removeEventListener("mouseenter", v), b.removeEventListener("mouseleave", y);
+    function _(h) {
+      h.removeEventListener("mouseenter", m), h.removeEventListener("mouseleave", g);
     }
-    I(o, (b, k) => {
-      b ? x(b) : k && A(k);
+    return P(o, (h, w) => {
+      h ? E(h) : w && _(w);
     }), L(() => {
-      var k;
-      const b = (k = t.base) == null ? void 0 : k.call(t, {
+      var w;
+      const h = (w = t.base) == null ? void 0 : w.call(t, {
         active: u.value,
-        props: oe({
+        props: ce({
           ref: r
         })
       });
-      return s.value = b, l(P, null, [b, l(K, {
+      return s.value = h, l(I, null, [h, l(K, {
         modelValue: u.value,
-        "onUpdate:modelValue": (T) => u.value = T,
+        "onUpdate:modelValue": (b) => u.value = b,
         ref: a,
-        classes: p.value,
+        classes: v.value,
         scrim: !1,
         disabled: e.disabled,
         "content-styles": {
-          ...d.value
+          ...f.value
         },
         transition: e.transition
       }, {
-        default: (...T) => {
-          var Y;
-          return l(P, null, [l(Be, null, null), l("div", {
+        default: (...b) => {
+          var V;
+          return l(I, null, [l(Le, null, null), l("div", {
             class: "y-tooltip__content"
-          }, [((Y = t.default) == null ? void 0 : Y.call(t, ...T)) ?? ""])]);
+          }, [((V = t.default) == null ? void 0 : V.call(t, ...b)) ?? ""])]);
         }
       })]);
-    });
+    }), {
+      base$: r,
+      el$: a,
+      baseEl: o,
+      coordinatesStyles: f,
+      baseSlot: s,
+      active: u
+    };
   }
 });
-function jt(e = !1) {
-  const n = `expand-${e ? "h" : "v"}-transition`, i = e ? "width" : "height", a = Mt(`offset-${i}`);
+function Kt(e = !1) {
+  const n = `expand-${e ? "h" : "v"}-transition`, i = e ? "width" : "height", a = Ht(`offset-${i}`);
   function r() {
     function s(o) {
       if (o._originStyle) {
@@ -2493,9 +2510,9 @@ function jt(e = !1) {
       onEnter(o) {
         const c = o._originStyle;
         o.style.setProperty("transition", "none", "important"), o.style.overflow = "hidden";
-        const p = `${o[a]}px`;
+        const v = `${o[a]}px`;
         o.style[i] = "0", o.getBoundingClientRect(), o.style.transition = (c == null ? void 0 : c.transition) ?? "", requestAnimationFrame(() => {
-          o.style[i] = p;
+          o.style[i] = v;
         });
       },
       onAfterEnter(o) {
@@ -2530,66 +2547,66 @@ function jt(e = !1) {
       }
     },
     setup(s, { slots: o }) {
-      return () => _(
-        Me,
+      return () => x(
+        He,
         { name: s.disabled ? "" : n, css: !s.disabled, ...s.disabled ? {} : r() },
         o.default
       );
     }
   });
 }
-const xi = jt(!1), ki = jt(!0);
-const Ti = /* @__PURE__ */ $({
+const Vi = Kt(!1), Bi = Kt(!0);
+const Yi = /* @__PURE__ */ $({
   setup(e, {
     slots: t
   }) {
-    const n = C(50), i = C(!1), a = C(), r = C(!1), s = C();
-    I(a, (v) => {
-      r.value = !!v;
+    const n = k(50), i = k(!1), a = k(), r = k(!1), s = k();
+    P(a, (m) => {
+      r.value = !!m;
     });
-    const o = w(() => {
-      let v = "0 0";
-      return r.value && (v = `0 0 ${100 - n.value}% 0`), {
+    const o = S(() => {
+      let m = "0 0";
+      return r.value && (m = `0 0 ${100 - n.value}% 0`), {
         position: "absolute",
-        inset: v
+        inset: m
       };
-    }), c = w(() => ({
+    }), c = S(() => ({
       "y-divide-panel": !0,
       "y-divide-panel--resizing": i.value
     }));
-    function p(v) {
-      const y = v, x = s.value.getBoundingClientRect();
+    function v(m) {
+      const g = m, E = s.value.getBoundingClientRect();
       requestAnimationFrame(() => {
-        n.value = Math.min(Math.max(10, (y.clientY - x.y) / x.height * 100), 90);
+        n.value = Math.min(Math.max(10, (g.clientY - E.y) / E.height * 100), 90);
       });
     }
-    function h() {
-      i.value = !1, s.value.removeEventListener("mousemove", p), s.value.removeEventListener("mouseup", u), s.value.removeEventListener("mouseleave", d);
+    function d() {
+      i.value = !1, s.value.removeEventListener("mousemove", v), s.value.removeEventListener("mouseup", u), s.value.removeEventListener("mouseleave", f);
     }
-    function u(v) {
-      h();
+    function u(m) {
+      d();
     }
-    function d(v) {
-      h();
+    function f(m) {
+      d();
     }
-    function g(v) {
-      v.preventDefault(), i.value = !0, s.value.addEventListener("mousemove", p), s.value.addEventListener("mouseup", u), s.value.addEventListener("mouseleave", d);
+    function C(m) {
+      m.preventDefault(), i.value = !0, s.value.addEventListener("mousemove", v), s.value.addEventListener("mouseup", u), s.value.addEventListener("mouseleave", f);
     }
     return L(() => {
-      var v, y;
-      return l(P, null, [l("div", {
+      var m, g;
+      return l(I, null, [l("div", {
         class: c.value,
         ref: s
       }, [l("div", {
         class: "y-divide-panel__top-container",
         style: o.value
-      }, [(v = t.default) == null ? void 0 : v.call(t)]), a.value = t.secondary && l(P, null, [l("div", {
+      }, [(m = t.default) == null ? void 0 : m.call(t)]), a.value = t.secondary && l(I, null, [l("div", {
         class: "y-divide-panel__divider",
         style: {
           position: "absolute",
           inset: `${n.value}% 0 0 0`
         },
-        onMousedown: g
+        onMousedown: C
       }, [l("div", {
         class: "y-divide-panel__divider-line"
       }, null)]), l("div", {
@@ -2598,12 +2615,12 @@ const Ti = /* @__PURE__ */ $({
           position: "absolute",
           inset: `${n.value}% 0 0 0`
         }
-      }, [(y = t.secondary) == null ? void 0 : y.call(t)])])])]);
+      }, [(g = t.secondary) == null ? void 0 : g.call(t)])])])]);
     }), {
       activeSecondary: r
     };
   }
-}), de = /* @__PURE__ */ $({
+}), pe = /* @__PURE__ */ $({
   name: "YIconExpand",
   setup() {
     return () => l("svg", {
@@ -2619,7 +2636,7 @@ const Ti = /* @__PURE__ */ $({
       "stroke-width": "4.1024"
     }, null)]);
   }
-}), ne = /* @__PURE__ */ $({
+}), oe = /* @__PURE__ */ $({
   name: "YIconCheckbox",
   render() {
     return l("svg", {
@@ -2636,7 +2653,7 @@ const Ti = /* @__PURE__ */ $({
       d: "M5.73,11.91 11.1,16.28 17.79,7.59"
     }, null)]);
   }
-}), ze = $({
+}), Xe = $({
   name: "YTreeNode",
   props: {
     item: {
@@ -2660,30 +2677,30 @@ const Ti = /* @__PURE__ */ $({
     }
   },
   setup(e, { slots: t }) {
-    const n = en("tree-view"), i = w(() => {
-      var h;
-      return ((h = e.item) == null ? void 0 : h[e.childrenKey]) ?? [];
-    }), a = w(() => i.value.length < 1), r = w(() => ({
+    const n = an("tree-view"), i = S(() => {
+      var d;
+      return ((d = e.item) == null ? void 0 : d[e.childrenKey]) ?? [];
+    }), a = S(() => i.value.length < 1), r = S(() => ({
       "y-tree-view-node": !0,
       "y-tree-view-node--leaf": a.value
-    })), s = w(() => ({
+    })), s = S(() => ({
       "--tree-view-node--level": e.level
-    })), o = w(() => Z(e.item, e.textKey) ?? ""), c = w(() => ({
+    })), o = S(() => Q(e.item, e.textKey) ?? ""), c = S(() => ({
       level: e.level,
       imLeaf: a.value
     }));
     L(() => {
-      var d;
-      const h = i.value.map((g) => _(
-        ze,
-        { ...e, level: (e.level ?? 0) + 1, item: g },
+      var f;
+      const d = i.value.map((C) => x(
+        Xe,
+        { ...e, level: (e.level ?? 0) + 1, item: C },
         t
       )), u = [];
-      for (let g = 0; g < e.level; g += 1)
+      for (let C = 0; C < e.level; C += 1)
         u.push(
-          _("div", { class: "y-tree-view-node__indent-spacer" })
+          x("div", { class: "y-tree-view-node__indent-spacer" })
         );
-      return _(
+      return x(
         "div",
         {
           class: r.value,
@@ -2692,30 +2709,30 @@ const Ti = /* @__PURE__ */ $({
           "data-level": e.level
         },
         [
-          _("div", { class: "y-tree-view-node__container" }, [
-            _("div", { class: "y-tree-view-node__indents" }, u),
+          x("div", { class: "y-tree-view-node__container" }, [
+            x("div", { class: "y-tree-view-node__indents" }, u),
             /* EXPAND */
-            a.value ? _("i", { class: "y-tree-view-node__no-expand-icon" }) : _("i", { class: "y-tree-view-node__expand-icon" }, [
-              t["expand-icon"] ? t["expand-icon"]() : _(de, {
+            a.value ? x("i", { class: "y-tree-view-node__no-expand-icon" }) : x("i", { class: "y-tree-view-node__expand-icon" }, [
+              t["expand-icon"] ? t["expand-icon"]() : x(pe, {
                 style: { width: "12px", height: "12px" }
               })
             ]),
             /* CONTENT */
-            _("div", { class: "y-tree-view-node__content" }, [
-              t.leading && _(
+            x("div", { class: "y-tree-view-node__content" }, [
+              t.leading && x(
                 "div",
                 { class: "y-tree-view-node__leading" },
                 t.leading(c.value)
               ),
-              _(
+              x(
                 "div",
                 { class: "y-tree-view-node__text" },
-                t.default ? (d = t.default) == null ? void 0 : d.call(t, {
+                t.default ? (f = t.default) == null ? void 0 : f.call(t, {
                   text: o.value,
                   item: e.item
                 }) : o.value
               ),
-              t.trailing && _(
+              t.trailing && x(
                 "div",
                 { class: "y-tree-view-node__trailing" },
                 t.trailing()
@@ -2723,18 +2740,18 @@ const Ti = /* @__PURE__ */ $({
             ])
           ]),
           /* CHILDREN */
-          i.value.length > 0 ? _(
+          i.value.length > 0 ? x(
             "div",
             { class: { "y-tree-view-node__leaves": !0 }, role: "tree" },
-            h
+            d
           ) : void 0
         ]
       );
     });
-    const p = w(() => Z(e.item, e.itemKey));
+    const v = S(() => Q(e.item, e.itemKey));
     return {
       treeView: n,
-      myKey: p
+      myKey: v
     };
   },
   created() {
@@ -2742,7 +2759,7 @@ const Ti = /* @__PURE__ */ $({
     (t = (e = this.treeView) == null ? void 0 : e.register) == null || t.call(e, this.myKey, this);
   }
 });
-const Ei = /* @__PURE__ */ $({
+const Oi = /* @__PURE__ */ $({
   name: "YTreeView",
   props: {
     items: {
@@ -2761,28 +2778,28 @@ const Ei = /* @__PURE__ */ $({
   setup(e, {
     slots: t
   }) {
-    const n = w(() => ({
+    const n = S(() => ({
       "y-tree-view": !0
-    })), i = C({});
-    C([]);
+    })), i = k({});
+    k([]);
     function a(o, c = null) {
-      for (const p of o) {
-        const h = Z(p, e.itemKey), u = Z(p, e.childrenKey) ?? [], v = {
-          vnode: (H(i.value, h) ? i.value[h] : {
+      for (const v of o) {
+        const d = Q(v, e.itemKey), u = Q(v, e.childrenKey) ?? [], m = {
+          vnode: (z(i.value, d) ? i.value[d] : {
             selected: !1,
             indeterminate: !1,
             active: !1,
             opened: !1,
             vnode: null
           }).vnode,
-          item: p,
+          item: v,
           parentKey: c,
-          childKeys: u.map((y) => Z(y, e.itemKey))
+          childKeys: u.map((g) => Q(g, e.itemKey))
         };
-        a(u, h), i.value[h] = v;
+        a(u, d), i.value[d] = m;
       }
     }
-    a(e.items), I(() => e.items, (o) => {
+    a(e.items), P(() => e.items, (o) => {
       a(o);
     }, {
       deep: !0
@@ -2790,32 +2807,32 @@ const Ei = /* @__PURE__ */ $({
     function r(o, c) {
       i.value[o] && (i.value[o].vnode = c);
     }
-    tn("tree-view", {
+    rn("tree-view", {
       register: r
     });
-    const s = w(() => e.items);
-    return L(() => l(P, null, [l("div", {
+    const s = S(() => e.items);
+    return L(() => l(I, null, [l("div", {
       class: n.value,
       role: "tree"
-    }, [s.value.length > 0 ? s.value.map((o) => l(ze, {
+    }, [s.value.length > 0 ? s.value.map((o) => l(Xe, {
       item: o,
       level: 0
     }, t)) : l("div", {
       class: "y-tree-view__no-data"
-    }, [t["no-data"] ? t["no-data"]() : l("span", null, [ae("No Data")])])])])), {
+    }, [t["no-data"] ? t["no-data"]() : l("span", null, [le("No Data")])])])])), {
       nodes: i
     };
   }
 });
-const Ht = ee({
+const Ut = ne({
   tag: {
     type: String,
     default: "div"
   }
-}, "y-list-item"), Vi = /* @__PURE__ */ $({
+}, "y-list-item"), Li = /* @__PURE__ */ $({
   name: "YListItem",
   props: {
-    ...Ht()
+    ...Ut()
   },
   setup(e, {
     slots: t
@@ -2839,41 +2856,41 @@ const Ht = ee({
     });
   }
 });
-const Ai = /* @__PURE__ */ $({
+const Ii = /* @__PURE__ */ $({
   name: "YList",
   setup(e, {
     slots: t
   }) {
     L(() => {
       var n;
-      return l(P, null, [l("div", {
+      return l(I, null, [l("div", {
         class: "y-list"
       }, [(n = t.default) == null ? void 0 : n.call(t)])]);
     });
   }
 });
-function Kt(e) {
-  const t = C(), n = C();
+function Wt(e) {
+  const t = k(), n = k();
   if (window) {
     const i = new ResizeObserver((a, r) => {
       e == null || e(a, r), a.length && (n.value = a[0].contentRect);
     });
-    nn(() => {
+    on(() => {
       i.disconnect();
-    }), I(
+    }), P(
       t,
       (a, r) => {
-        r && (i.unobserve(r), n.value = void 0), a && i.observe(hn(a));
+        r && (i.unobserve(r), n.value = void 0), a && i.observe(gn(a));
       },
       { flush: "post" }
     );
   }
   return {
     resizeObservedRef: t,
-    contentRect: an(n)
+    contentRect: sn(n)
   };
 }
-const fe = /* @__PURE__ */ $({
+const me = /* @__PURE__ */ $({
   name: "YTable",
   props: {
     tag: {
@@ -2896,7 +2913,7 @@ const fe = /* @__PURE__ */ $({
     const {
       resizeObservedRef: n,
       contentRect: i
-    } = Kt();
+    } = Wt();
     L(() => {
       var s;
       const a = e.tag ?? "div", r = e.flexHeight ? ((s = i.value) == null ? void 0 : s.height) ?? e.height : e.height;
@@ -2908,62 +2925,82 @@ const fe = /* @__PURE__ */ $({
         }]
       }, {
         default: () => {
-          var o, c, p, h, u;
+          var o, c, v, d, u;
           return [(o = t.top) == null ? void 0 : o.call(t), t.default ? l("div", {
             class: ["y-table__container"],
             ref: n,
             style: {
-              height: wt(r)
+              height: Ke(r)
             }
-          }, [(c = t.leading) == null ? void 0 : c.call(t), l("table", null, [t.default()]), (p = t.trailing) == null ? void 0 : p.call(t)]) : (h = t.container) == null ? void 0 : h.call(t, n, i), (u = t.bottom) == null ? void 0 : u.call(t)];
+          }, [(c = t.leading) == null ? void 0 : c.call(t), l("table", null, [t.default()]), (v = t.trailing) == null ? void 0 : v.call(t)]) : (d = t.container) == null ? void 0 : d.call(t, n, i), (u = t.bottom) == null ? void 0 : u.call(t)];
         }
       });
     });
   }
-}), Ye = /* @__PURE__ */ $({
+}), Ie = /* @__PURE__ */ $({
   name: "YDataTableBody",
-  setup() {
-    L(() => l("div", null, null));
+  props: {
+    headers: {
+      type: [Array]
+    }
+  },
+  setup(e, {
+    slots: t
+  }) {
+    L(() => {
+      var n;
+      return l(I, null, [t.body ? (n = t.body) == null ? void 0 : n.call(t, e) : l("tr", null, null)]);
+    });
   }
 });
-const Oe = /* @__PURE__ */ $({
+const Pe = /* @__PURE__ */ $({
   name: "YDataTableControl",
   components: {
-    YButton: $e,
-    YIconExpand: de,
-    YFieldInput: ke
+    YButton: j,
+    YIconExpand: pe,
+    YFieldInput: Ae
   },
   setup(e, {
     slots: t
   }) {
     L(() => l("footer", {
       class: ["y-data-table-control"]
-    }, [t.default ? t.default() : l(P, null, [l($e, {
+    }, [t.default ? t.default() : l(I, null, [l(j, {
       outlined: !0
     }, {
-      default: () => [ae("20"), l(de, {
+      default: () => [le("20"), l(pe, {
         style: {
           width: "16px",
           height: "16px"
         }
       }, null)]
-    }), ae("페이지"), l("div", null, [l(ke, {
+    }), le("페이지"), l("div", null, [l(Ae, {
       outlined: !0
     }, null)])])]));
   }
-}), Le = /* @__PURE__ */ $({
+}), De = /* @__PURE__ */ $({
   name: "YDataTableHead",
-  setup() {
-    L(() => l("tr", null, null));
+  props: {
+    headers: {
+      type: [Array]
+    }
+  },
+  setup(e, {
+    slots: t
+  }) {
+    L(() => {
+      var n;
+      return l(I, null, [t.head ? (n = t.head) == null ? void 0 : n.call(t, e) : l("tr", null, null)]);
+    });
   }
-}), Ie = /* @__PURE__ */ $({
+}), Ne = /* @__PURE__ */ $({
   name: "YDataTableLayer",
   setup() {
     L(() => l("div", {
       class: ["y-data-table-layer"]
     }, null));
   }
-}), Ut = ee(
+}), qt = ne(
   {
     page: {
       type: [Number, String],
@@ -2975,91 +3012,126 @@ const Oe = /* @__PURE__ */ $({
     }
   },
   "YDataTable__pagination"
-), We = ee({
+);
+function Pi(e) {
+  const t = X(
+    e,
+    "page",
+    void 0,
+    (i) => +(i ?? 0)
+  ), n = X(
+    e,
+    "pageSize",
+    void 0,
+    (i) => +(i ?? 10)
+  );
+  return { page: t, pageSize: n };
+}
+const Ze = ne({
   width: [String, Number],
   search: String,
-  ...Ut()
-}, "YDataTable"), Bi = /* @__PURE__ */ $({
+  ...qt()
+}, "YDataTable"), Di = /* @__PURE__ */ $({
   name: "YDataTable",
   props: {
-    ...We()
+    ...Ze()
+  },
+  emits: {
+    "update:modelValue": (e) => !0,
+    "update:page": (e) => !0,
+    "update:pageSize": (e) => !0,
+    "update:sortBy": (e) => !0,
+    "update:options": (e) => !0
   },
   setup(e, {
     slots: t
   }) {
-    const n = w(() => ({}));
-    L(() => l(fe, {
+    const {
+      page: n,
+      pageSize: i
+    } = Pi(e), a = S(() => ({
+      page: n.value,
+      pageSize: i.value
+    }));
+    L(() => l(me, {
       class: ["y-data-table"]
     }, {
       default: () => [{
         top: () => {
-          var i;
-          return (i = t.top) == null ? void 0 : i.call(t, n.value);
+          var r;
+          return (r = t.top) == null ? void 0 : r.call(t, a.value);
         },
-        leading: () => t.leading ? t.leading(n.value) : l(P, null, [l(Ie, null, t)]),
+        leading: () => t.leading ? t.leading(a.value) : l(I, null, [l(Ne, null, t)]),
         default: () => {
-          var i, a, r;
-          return t.default ? t.default(n.value) : l(P, null, [l("thead", null, [l(Le, null, t)]), (i = t.thead) == null ? void 0 : i.call(t, n.value), l("tbody", null, [l(Ye, null, t)]), (a = t.tbody) == null ? void 0 : a.call(t, n.value), (r = t.tfoot) == null ? void 0 : r.call(t, n.value)]);
+          var r, s, o;
+          return t.default ? t.default(a.value) : l(I, null, [l("thead", null, [l(De, null, t)]), (r = t.thead) == null ? void 0 : r.call(t, a.value), l("tbody", null, [l(Ie, null, t)]), (s = t.tbody) == null ? void 0 : s.call(t, a.value), (o = t.tfoot) == null ? void 0 : o.call(t, a.value)]);
         },
         trailing: () => {
-          var i;
-          return (i = t.trailing) == null ? void 0 : i.call(t, n.value);
+          var r;
+          return (r = t.trailing) == null ? void 0 : r.call(t, a.value);
         },
-        bottom: () => t.bottom ? t.bottom(n.value) : l(Oe, null, {
+        bottom: () => t.bottom ? t.bottom(a.value) : l(Pe, null, {
           prepend: t["control.prepend"]
         })
       }],
       ...t
     }));
   }
-}), zt = ee({
+}), Gt = ne({
   total: {
     type: [Number, String],
     required: !0
   },
-  ...Ut(),
-  ...We()
-}, "YDataTableServer"), Yi = /* @__PURE__ */ $({
+  headers: {
+    type: [Array]
+  },
+  ...qt(),
+  ...Ze()
+}, "YDataTableServer"), Ni = /* @__PURE__ */ $({
   name: "YDataTableServer",
   components: {
-    YTable: fe,
-    YDataTableLayer: Ie,
-    YDataTableHead: Le,
-    YDataTableBody: Ye,
-    YDataTableControl: Oe
+    YTable: me,
+    YDataTableLayer: Ne,
+    YDataTableHead: De,
+    YDataTableBody: Ie,
+    YDataTableControl: Pe
   },
   props: {
-    ...zt()
+    ...Gt()
   },
   setup(e, {
     slots: t
   }) {
-    const n = w(() => ({}));
-    L(() => l(fe, {
+    const n = S(() => ({}));
+    L(() => l(me, {
       class: ["y-data-table"]
     }, {
       top: () => {
         var i;
         return (i = t.top) == null ? void 0 : i.call(t, n.value);
       },
-      leading: () => t.leading ? t.leading(n.value) : l(P, null, [l(Ie, null, t)]),
+      leading: () => t.leading ? t.leading(n.value) : l(I, null, [l(Ne, null, t)]),
       default: () => {
         var i, a, r;
-        return t.default ? t.default(n.value) : l(P, null, [l("thead", null, [l(Le, null, t)]), (i = t.thead) == null ? void 0 : i.call(t, n.value), l("tbody", null, [l(Ye, null, t)]), (a = t.tbody) == null ? void 0 : a.call(t, n.value), (r = t.tfoot) == null ? void 0 : r.call(t, n.value)]);
+        return t.default ? t.default(n.value) : l(I, null, [l("thead", null, [l(De, {
+          headers: e.headers
+        }, t)]), (i = t.thead) == null ? void 0 : i.call(t, n.value), l("tbody", null, [l(Ie, {
+          headers: e.headers
+        }, t)]), (a = t.tbody) == null ? void 0 : a.call(t, n.value), (r = t.tfoot) == null ? void 0 : r.call(t, n.value)]);
       },
       trailing: () => {
         var i;
         return (i = t.trailing) == null ? void 0 : i.call(t, n.value);
       },
-      bottom: () => t.bottom ? t.bottom(n.value) : l(Oe, null, {
+      bottom: () => t.bottom ? t.bottom(n.value) : l(Pe, null, {
         prepend: t["control.prepend"]
       })
     }));
   }
 });
-const Wt = "YMenu";
-Ue(Wt);
-const qt = {
+const Xt = "YMenu";
+Ge(Xt);
+const Zt = {
   modelValue: {
     type: Boolean,
     default: !1
@@ -3093,12 +3165,12 @@ const qt = {
   offsetY: {
     type: [Number, String]
   }
-}, Oi = /* @__PURE__ */ $({
-  name: Wt,
+}, Ri = /* @__PURE__ */ $({
+  name: Xt,
   props: {
-    ...qt,
+    ...Zt,
     transition: {
-      ...je.transition,
+      ...Ue.transition,
       default: "fade"
     }
   },
@@ -3108,73 +3180,73 @@ const qt = {
     emit: n,
     expose: i
   }) {
-    const a = C(), r = C(), s = C(), o = C(), c = C(), p = w(() => ({
-      ...W(e.menuClasses),
+    const a = k(), r = k(), s = k(), o = k(), c = k(), v = S(() => ({
+      ...q(e.menuClasses),
       "y-menu": !0
-    })), h = me(e), u = w({
-      get: () => !!h.value,
-      set: (m) => {
-        m && e.disabled || (h.value = m);
+    })), d = X(e), u = S({
+      get: () => !!d.value,
+      set: (y) => {
+        y && e.disabled || (d.value = y);
       }
-    }), d = ie(e, "position"), g = ie(e, "align"), v = C(), y = w(() => v.value ?? {});
-    function x() {
-      const m = o.value, B = u.value;
-      if (m && B) {
-        const E = c.value, f = m.getBoundingClientRect();
-        let S = f.top, D = f.left + f.width / 2;
-        return E && ((d.value === "top" || d.value === "bottom") && (d.value === "top" && (S -= E.clientHeight, S -= 8), d.value === "bottom" && (S += f.height, S += 8)), g.value === "center" ? D -= E.clientWidth / 2 : g.value === "start" ? D = f.left : g.value === "end" && (D = f.right, D -= E.clientWidth)), e.offsetY && (S += +e.offsetY), {
-          top: `${S}px`,
+    }), f = se(e, "position"), C = se(e, "align"), m = k(), g = S(() => m.value ?? {});
+    function E() {
+      const y = o.value, O = u.value;
+      if (y && O) {
+        const A = c.value, p = y.getBoundingClientRect();
+        let T = p.top, D = p.left + p.width / 2;
+        return A && ((f.value === "top" || f.value === "bottom") && (f.value === "top" && (T -= A.clientHeight, T -= 8), f.value === "bottom" && (T += p.height, T += 8)), C.value === "center" ? D -= A.clientWidth / 2 : C.value === "start" ? D = p.left : C.value === "end" && (D = p.right, D -= A.clientWidth)), e.offsetY && (T += +e.offsetY), {
+          top: `${T}px`,
           left: `${D}px`,
-          minWidth: wt(f.width)
+          minWidth: Ke(p.width)
         };
       }
       return {};
     }
-    const A = w(() => {
-      var m, B;
-      return (B = (m = s.value) == null ? void 0 : m[0]) == null ? void 0 : B.el;
+    const _ = S(() => {
+      var y, O;
+      return (O = (y = s.value) == null ? void 0 : y[0]) == null ? void 0 : O.el;
     });
-    Ne(() => {
-      var B, E;
+    Fe(() => {
+      var O, A;
       if (!r.value) {
-        o.value = A.value;
+        o.value = _.value;
         return;
       }
-      const m = r.value;
-      o.value = (B = r.value) != null && B.$el ? (E = r.value) == null ? void 0 : E.$el : m;
-    }), I(u, (m) => {
-      m && ve(() => {
-        var E;
-        const B = (E = a.value) == null ? void 0 : E.content$;
-        c.value = B, v.value = x();
+      const y = r.value;
+      o.value = (O = r.value) != null && O.$el ? (A = r.value) == null ? void 0 : A.$el : y;
+    }), P(u, (y) => {
+      y && be(() => {
+        var A;
+        const O = (A = a.value) == null ? void 0 : A.content$;
+        c.value = O, m.value = E();
       });
     });
-    function b(m) {
+    function h(y) {
       e.openOnHover && (u.value = !0);
     }
-    function k(m) {
+    function w(y) {
       e.openOnHover && (u.value = !1);
     }
-    function T(m) {
-      const B = u.value;
-      e.disabled || (u.value = !B);
+    function b(y) {
+      const O = u.value;
+      e.disabled || (u.value = !O);
     }
-    function Y(m) {
+    function V(y) {
       u.value && (u.value = !1);
     }
-    function O(m) {
-      m.addEventListener("mouseenter", b), m.addEventListener("mouseleave", k);
+    function Y(y) {
+      y.addEventListener("mouseenter", h), y.addEventListener("mouseleave", w);
     }
-    function V(m) {
-      m.removeEventListener("mouseenter", b), m.removeEventListener("mouseleave", k);
+    function B(y) {
+      y.removeEventListener("mouseenter", h), y.removeEventListener("mouseleave", w);
     }
-    I(o, (m, B) => {
-      m ? (O(m), m.addEventListener("click", T)) : B && (V(B), B.removeEventListener("click", T));
+    return P(o, (y, O) => {
+      y ? (Y(y), y.addEventListener("click", b)) : O && (B(O), O.removeEventListener("click", b));
     }), L(() => {
-      var B;
-      const m = (B = t.base) == null ? void 0 : B.call(t, {
+      var O;
+      const y = (O = t.base) == null ? void 0 : O.call(t, {
         active: u.value,
-        props: oe({
+        props: ce({
           ref: r,
           class: {
             "y-menu-base": !0,
@@ -3182,32 +3254,38 @@ const qt = {
           }
         })
       });
-      return s.value = m, l(P, null, [m, l(K, {
+      return s.value = y, l(I, null, [y, l(K, {
         modelValue: u.value,
-        "onUpdate:modelValue": (E) => u.value = E,
+        "onUpdate:modelValue": (A) => u.value = A,
         ref: a,
-        classes: p.value,
+        classes: v.value,
         scrim: !1,
         disabled: e.disabled,
         "content-styles": {
-          ...y.value
+          ...g.value
         },
         "content-classes": ["y-menu__content"],
         transition: e.transition,
-        "onClick:complement": Y
+        "onClick:complement": V
       }, {
-        default: (...E) => {
-          var f;
-          return l(P, null, [((f = t.default) == null ? void 0 : f.call(t, ...E)) ?? ""]);
+        default: (...A) => {
+          var p;
+          return l(I, null, [((p = t.default) == null ? void 0 : p.call(t, ...A)) ?? ""]);
         }
       })]);
-    });
+    }), {
+      base$: r,
+      el$: a,
+      baseEl: o,
+      coordinatesStyles: g,
+      baseSlot: s
+    };
   }
 });
-const Pe = /* @__PURE__ */ $({
+const Re = /* @__PURE__ */ $({
   name: "YInputCheckbox",
   components: {
-    YIconCheckbox: ne
+    YIconCheckbox: oe
   },
   props: {
     id: String,
@@ -3247,7 +3325,7 @@ const Pe = /* @__PURE__ */ $({
       return this.id && (e = this.id), `input-${e}`;
     },
     iconComponent() {
-      return this.icon ? null : ne;
+      return this.icon ? null : oe;
     }
   },
   methods: {
@@ -3281,7 +3359,7 @@ const Pe = /* @__PURE__ */ $({
       readonly: o,
       iconComponent: c
     } = this;
-    return l(P, null, [l("div", {
+    return l(I, null, [l("div", {
       onClick: e,
       class: t
     }, [l("input", {
@@ -3296,12 +3374,12 @@ const Pe = /* @__PURE__ */ $({
       readonly: o
     }, null), this.$slots.icon ? this.$slots.icon({
       checked: i
-    }) : c ? _(c) : l(ne, null, null)])]);
+    }) : c ? x(c) : l(oe, null, null)])]);
   }
-}), Li = /* @__PURE__ */ $({
+}), Mi = /* @__PURE__ */ $({
   name: "YCheckbox",
   components: {
-    YInputCheckbox: Pe
+    YInputCheckbox: Re
   },
   model: {
     prop: "inputValue",
@@ -3327,73 +3405,73 @@ const Pe = /* @__PURE__ */ $({
     emit: t,
     slots: n
   }) {
-    const i = C(!1), a = C(!1), s = `input-${(fn() ?? "").toString()}`;
-    function o(v) {
-      i.value = !0, t("focus", v);
+    const i = k(!1), a = k(!1), s = `input-${(yn() ?? "").toString()}`;
+    function o(m) {
+      i.value = !0, t("focus", m);
     }
-    function c(v) {
-      i.value = !1, t("blur", v);
+    function c(m) {
+      i.value = !1, t("blur", m);
     }
-    function p(v, ...y) {
-      e.disabled || e.readonly || (a.value = !a.value, t("change", a.value, v));
+    function v(m, ...g) {
+      e.disabled || e.readonly || (a.value = !a.value, t("change", a.value, m));
     }
-    function h() {
-      var v;
-      Array.isArray(e.inputValue) ? ((v = e.inputValue) == null ? void 0 : v.find((x) => x === e.value)) !== void 0 ? a.value = !0 : a.value = !1 : typeof e.inputValue == "boolean" && (a.value = e.inputValue);
+    function d() {
+      var m;
+      Array.isArray(e.inputValue) ? ((m = e.inputValue) == null ? void 0 : m.find((E) => E === e.value)) !== void 0 ? a.value = !0 : a.value = !1 : typeof e.inputValue == "boolean" && (a.value = e.inputValue);
     }
-    const u = w(() => {
+    const u = S(() => {
       const {
-        reverse: v,
-        disabled: y,
-        readonly: x
+        reverse: m,
+        disabled: g,
+        readonly: E
       } = e;
       return {
         "y-checkbox": !0,
-        "y-checkbox--reverse": !!v,
+        "y-checkbox--reverse": !!m,
         "y-checkbox--focused": i.value,
-        "y-checkbox--disabled": !!y,
-        "y-checkbox--readonly": !!x
+        "y-checkbox--disabled": !!g,
+        "y-checkbox--readonly": !!E
       };
-    }), d = w(() => {
+    }), f = S(() => {
       if (typeof e.icon == "string")
         return e.icon;
-    }), g = w(() => Array.isArray(e.inputValue));
-    return w(() => g.value ? e.inputValue.findIndex((v) => v === e.value) : -1), L(() => {
-      var v, y;
+    }), C = S(() => Array.isArray(e.inputValue));
+    return S(() => C.value ? e.inputValue.findIndex((m) => m === e.value) : -1), L(() => {
+      var m, g;
       return l("div", {
         class: u
       }, [l("slot", {
         name: "prepend"
       }, null), l("div", {
         class: "y-checkbox__slot"
-      }, [l(Pe, {
-        onClick: (x, ...A) => {
-          x.stopPropagation(), p(x, ...A);
+      }, [l(Re, {
+        onClick: (E, ..._) => {
+          E.stopPropagation(), v(E, ..._);
         },
         onFocus: o,
         onBlur: c,
         id: "counterId",
         value: a.value,
-        icon: d.value,
+        icon: f.value,
         color: e.color,
         disabled: e.disabled,
         readonly: e.readonly
       }, {
         default: () => [n.icon && {
-          icon: (...x) => {
-            var A;
-            return (A = n.icon) == null ? void 0 : A.call(n, ...x);
+          icon: (...E) => {
+            var _;
+            return (_ = n.icon) == null ? void 0 : _.call(n, ...E);
           }
         }]
       }), l("label", {
-        onClick: Re(() => {
+        onClick: je(() => {
         }, ["stop"]),
         class: "y-checkbox__label",
         for: s
-      }, [n.label ? (v = n.label) == null ? void 0 : v.call(n) : e.label])]), (y = n.append) == null ? void 0 : y.call(n)]);
+      }, [n.label ? (m = n.label) == null ? void 0 : m.call(n) : e.label])]), (g = n.append) == null ? void 0 : g.call(n)]);
     }), {
       innerValue: a,
-      inputByValue: h
+      inputByValue: d
     };
   },
   created() {
@@ -3408,7 +3486,43 @@ const Pe = /* @__PURE__ */ $({
     }
   }
 });
-const Gt = ee({
+function Fi() {
+  const e = k([]);
+  ln(() => e.value = []);
+  function t(n, i) {
+    e.value[i] = n;
+  }
+  return { refs: e, updateRef: t };
+}
+const xe = {
+  next: "m12.392 26.896 7.2156-10.843-7.0545-10.948",
+  prev: "m19.608 26.896-7.2156-10.843 7.0545-10.948",
+  last: "m10.696 26.936 7.2156-10.843-7.0545-10.948m0 0zm10.447-0.105v21.921",
+  first: "m21.304 26.936-7.2156-10.843 7.0545-10.948m0 0zm-10.447-0.105v21.921"
+}, re = /* @__PURE__ */ $({
+  name: "YIconPageControl",
+  props: {
+    type: {
+      type: String,
+      default: "next"
+    }
+  },
+  render() {
+    return l("svg", {
+      version: "1.1",
+      viewBox: "0 0 32 32",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, [l("path", {
+      d: this.$props.type in xe ? xe[this.$props.type] : xe.next,
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "3"
+    }, null)]);
+  }
+});
+const Jt = ne({
   start: {
     type: [Number, String],
     default: 1
@@ -3424,85 +3538,241 @@ const Gt = ee({
     validator: (e) => e % 1 === 0
   },
   totalVisible: [Number, String],
-  showEndButton: Boolean
-}, "y-pagination"), Ii = /* @__PURE__ */ $({
+  showEndButton: Boolean,
+  gap: {
+    type: [String, Number],
+    default: 4
+  },
+  color: String,
+  activeColor: String
+}, "y-pagination"), ji = /* @__PURE__ */ $({
   name: "YPagination",
+  components: {
+    YButton: j
+  },
   props: {
-    ...Gt()
+    ...Jt()
   },
   emits: {
     "update:modelValue": (e) => !0,
-    first: (e) => !0,
-    last: (e) => !0,
-    prev: (e) => !0,
-    next: (e) => !0
+    change: (e, t) => !0
   },
   setup(e, {
-    slots: t
+    slots: t,
+    emit: n
   }) {
-    me(e), w(() => parseInt(e.length, 10)), w(() => parseInt(e.start, 10));
-    const {
-      resizeObservedRef: n
-    } = Kt((i) => {
-      1 > i.length;
+    const i = X(e), a = S(() => parseInt(e.length, 10)), r = S(() => parseInt(e.start, 10)), s = un(-1), {
+      resizeObservedRef: o
+    } = Wt((_) => {
+      if (1 > _.length)
+        return;
+      const {
+        target: h,
+        contentRect: w
+      } = _[0], b = h.querySelector(".y-pagination__list > *");
+      if (b) {
+        const V = w.width, Y = b.offsetWidth + parseFloat(getComputedStyle(b).marginRight) * 2;
+        s.value = c(V, Y);
+      }
     });
-    L(() => l("div", {
+    function c(_, h) {
+      const w = e.showEndButton ? 5 : 3, b = h * w, V = +(e.gap ?? 4);
+      return Math.max(0, Math.floor(+((_ - b - V) / (h + V)).toFixed(2)));
+    }
+    const v = S(() => e.totalVisible ? parseInt(e.totalVisible, 10) : s.value >= 0 ? s.value : c(innerWidth, 58)), d = S(() => {
+      const _ = !!e.disabled || i.value <= r.value, h = !!e.disabled || i.value >= r.value + a.value - 1;
+      return {
+        first: {
+          disabled: _,
+          onClick: (w) => {
+            w.preventDefault(), i.value = 1, n("change", 1, "first");
+          }
+        },
+        prev: {
+          disabled: _,
+          onClick: (w) => {
+            w.preventDefault();
+            const b = Math.max(1, i.value - 1);
+            i.value = b, n("change", b, "prev");
+          }
+        },
+        next: {
+          disabled: h,
+          onClick: (w) => {
+            w.preventDefault();
+            const b = Math.min(+a.value, i.value + 1);
+            i.value = b, n("change", b, "next");
+          }
+        },
+        last: {
+          disabled: h,
+          onClick: (w) => {
+            w.preventDefault();
+            const b = +a.value;
+            i.value = +a.value, n("change", b, "last");
+          }
+        }
+      };
+    }), u = S(() => {
+      if (a.value <= 0 || isNaN(a.value) || a.value > Number.MAX_SAFE_INTEGER)
+        return [];
+      if (v.value <= 1)
+        return [i.value];
+      if (a.value <= v.value)
+        return ie(a.value, r.value);
+      const _ = v.value % 2 === 0, h = _ ? v.value / 2 : Math.floor(v.value / 2), w = _ ? h : h + 1, b = a.value - h;
+      if (w - i.value >= 0)
+        return [...ie(Math.max(1, v.value - 1), r.value), "ellipsis", a.value];
+      if (i.value - b >= (_ ? 1 : 0)) {
+        const V = v.value - 1, Y = a.value - V + r.value;
+        return [r.value, "ellipsis", ...ie(V, Y)];
+      } else {
+        const V = Math.max(1, v.value - 3), Y = V === 1 ? i.value : i.value - Math.ceil(V / 2) + r.value;
+        return [r.value, "ellipsis", ...ie(V, Y), "ellipsis", a.value];
+      }
+    }), {
+      refs: f,
+      updateRef: C
+    } = Fi();
+    function m(_, h = 1) {
+      _.preventDefault(), i.value = h, n("change", h);
+    }
+    const g = S(() => u.value.map((_, h) => {
+      const w = (b) => C(b, h);
+      if (_ === "ellipsis")
+        return {
+          active: !1,
+          key: `ellipsis-${h}`,
+          page: _,
+          props: {
+            ref: w,
+            ellipsis: !0,
+            disabled: !0
+            // TODO: skipper
+          }
+        };
+      {
+        const b = _ === i.value;
+        return {
+          active: b,
+          key: `item-${_}`,
+          page: _,
+          props: {
+            ref: w,
+            ellipsis: !1,
+            disabled: !!e.disabled || +e.length < 2,
+            color: b ? e.activeColor : e.color,
+            onClick: (V) => m(V, _)
+          }
+        };
+      }
+    })), E = S(() => {
+      let _;
+      if (e.gap) {
+        const h = +e.gap;
+        isNaN(h) ? typeof e.gap == "string" && (_ = e.gap) : _ = Ke(h);
+      }
+      return {
+        "--y-pagination__gap": _
+      };
+    });
+    return L(() => l("div", {
       class: ["y-pagination"],
       role: "navigation",
-      ref: n
+      style: E.value,
+      ref: o
     }, [l("ul", {
       class: ["y-pagination__list"]
-    }, [l("li", null, null)])]));
+    }, [e.showEndButton && l("li", {
+      key: "first",
+      class: "y-pagination__first"
+    }, [t.first ? t.first(d.value.first) : l(j, d.value.first, {
+      default: () => [l(re, {
+        type: "first"
+      }, null)]
+    })]), l("li", {
+      key: "prev",
+      class: "y-pagination__prev"
+    }, [t.prev ? t.prev(d.value.prev) : l(j, d.value.prev, {
+      default: () => [l(re, {
+        type: "prev"
+      }, null)]
+    })]), g.value.map((_, h) => l("li", {
+      key: _.key,
+      class: ["y-pagination__item", {
+        "y-pagination__item--active": _.active
+      }]
+    }, [l(j, _.props, {
+      default: () => [_.props.ellipsis ? "..." : _.page]
+    })])), l("li", {
+      key: "next",
+      class: "y-pagination__next"
+    }, [t.next ? t.next(d.value.next) : l(j, d.value.next, {
+      default: () => [l(re, {
+        type: "next"
+      }, null)]
+    })]), e.showEndButton && l("li", {
+      key: "last",
+      class: "y-pagination__last"
+    }, [t.last ? t.last(d.value.last) : l(j, d.value.last, {
+      default: () => [l(re, {
+        type: "last"
+      }, null)]
+    })])])])), {
+      itemCount: s,
+      page: i,
+      refs: f
+    };
   }
-}), ut = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), ht = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  YApp: rn,
-  YButton: $e,
-  YCard: xt,
-  YCardBody: _n,
-  YCardFooter: Cn,
-  YCardHeader: Sn,
-  YCheckbox: Li,
-  YChip: $n,
-  YDataTable: Bi,
-  YDataTableServer: Yi,
-  YDialog: On,
-  YDividePanel: Ti,
-  YExpandHTransition: ki,
-  YExpandVTransition: xi,
-  YFieldInput: ke,
-  YForm: gn,
-  YIconCheckbox: ne,
-  YIconClear: St,
-  YIconExpand: de,
-  YInput: xe,
-  YInputCheckbox: Pe,
-  YInputProps: se,
+  YApp: cn,
+  YButton: j,
+  YCard: Tt,
+  YCardBody: $n,
+  YCardFooter: En,
+  YCardHeader: Tn,
+  YCheckbox: Mi,
+  YChip: An,
+  YDataTable: Di,
+  YDataTableServer: Ni,
+  YDialog: Nn,
+  YDividePanel: Yi,
+  YExpandHTransition: Bi,
+  YExpandVTransition: Vi,
+  YFieldInput: Ae,
+  YForm: Sn,
+  YIconCheckbox: oe,
+  YIconClear: $t,
+  YIconExpand: pe,
+  YInput: Te,
+  YInputCheckbox: Re,
+  YInputProps: de,
   YLayer: K,
-  YList: Ai,
-  YListItem: Vi,
-  YMenu: Oi,
-  YMenuPropOptions: qt,
-  YPagination: Ii,
-  YProgressBar: wn,
-  YSnackbar: Ci,
-  YSpinnerRing: _t,
-  YSwitch: xn,
-  YTable: fe,
-  YTooltip: $i,
-  YTreeView: Ei,
-  YTreeViewNode: ze,
-  buttonProps: Ct,
-  pressDataTableProps: We,
-  pressDataTableServerProps: zt,
-  pressYListItemProps: Ht,
-  pressYPaginationProps: Gt
-}, Symbol.toStringTag, { value: "Module" })), De = {
+  YList: Ii,
+  YListItem: Li,
+  YMenu: Ri,
+  YMenuPropOptions: Zt,
+  YPagination: ji,
+  YProgressBar: kn,
+  YSnackbar: Ei,
+  YSpinnerRing: xt,
+  YSwitch: Vn,
+  YTable: me,
+  YTooltip: Ai,
+  YTreeView: Oi,
+  YTreeViewNode: Xe,
+  buttonProps: kt,
+  pressDataTableProps: Ze,
+  pressDataTableServerProps: Gt,
+  pressYListItemProps: Ut,
+  pressYPaginationProps: Jt
+}, Symbol.toStringTag, { value: "Module" })), Me = {
   light: "light",
   dark: "dark"
-}, ct = {
+}, vt = {
   light: {
-    scheme: De.light,
+    scheme: Me.light,
     colors: {
       "app-background": "#ffffff",
       "base-font": "#141414"
@@ -3512,7 +3782,7 @@ const Gt = ee({
     }
   },
   dark: {
-    scheme: De.dark,
+    scheme: Me.dark,
     colors: {
       "app-background": "#1e1e1e",
       "base-font": "#fff"
@@ -3522,78 +3792,78 @@ const Gt = ee({
     }
   }
 };
-function Pi(e) {
+function Hi(e) {
   return e ? {
-    scheme: De.light,
+    scheme: Me.light,
     theme: ["light", "dark"],
-    themes: { ...Se(ct, e.themes) }
+    themes: { ...Ee(vt, e.themes) }
   } : {
     scheme: "normal",
     theme: ["light", "dark"],
-    themes: { ...Se(ct) }
+    themes: { ...Ee(vt) }
   };
 }
-function Di(e) {
-  const t = ft(), n = re(Pi(e)), i = C(n.scheme), a = C(n.mode), r = C(n.theme), s = C(n.themes), o = re({
+function zi(e) {
+  const t = mt(), n = ue(Hi(e)), i = k(n.scheme), a = k(n.mode), r = k(n.theme), s = k(n.themes), o = ue({
     scheme: i,
     theme: r,
     themes: s,
     mode: a
   });
   function c(u) {
-    u.directive("theme", $t);
+    u.directive("theme", Et);
   }
-  function p(u) {
-    console.log(ht(u.theme)), I(
+  function v(u) {
+    console.log(yt(u.theme)), P(
       r,
-      (d) => {
-        const [g, v] = d;
-        u.root.dataset.lightTheme = g, u.root.dataset.darkTheme = v;
+      (f) => {
+        const [C, m] = f;
+        u.root.dataset.lightTheme = C, u.root.dataset.darkTheme = m;
       },
       { immediate: !0 }
-    ), I(
+    ), P(
       i,
-      (d) => {
-        u.root.setAttribute("data-theme-scheme", d);
+      (f) => {
+        u.root.setAttribute("data-theme-scheme", f);
       },
       { immediate: !0 }
     );
   }
-  function h(u) {
+  function d(u) {
     t.run(() => {
-      p(u);
+      v(u);
     });
   }
   return {
     install: c,
-    init: h,
+    init: d,
     scope: t,
     instance: o
   };
 }
-const Ni = ",--. ,--.,--.,--.,--. ,--.,---.  ,---. ,--,--,  \n \\  '  / |  ||  | \\  '  /| .-. :| .-. ||      \\ \n  \\   '  '  ''  '  \\   ' \\   --.' '-' '|  ||  | \n.-'  /    `----' .-'  /   `----' `---' `--''--' \n`---'            `---'                          ";
-const Ri = {
+const Ki = ",--. ,--.,--.,--.,--. ,--.,---.  ,---. ,--,--,  \n \\  '  / |  ||  | \\  '  /| .-. :| .-. ||      \\ \n  \\   '  '  ''  '  \\   ' \\   --.' '-' '|  ||  | \n.-'  /    `----' .-'  /   `----' `---' `--''--' \n`---'            `---'                          ";
+const Ui = {
   credit: !0
 };
-function Fi(e = Ri) {
-  const t = Di(e == null ? void 0 : e.theme);
+function qi(e = Ui) {
+  const t = zi(e == null ? void 0 : e.theme);
   return {
     install: (i) => {
       t.install(i);
-      const a = re({
+      const a = ue({
         app: null,
         root: null,
         theme: t.instance
       });
-      Object.keys(ut).forEach((s) => {
-        const o = ut[s];
+      Object.keys(ht).forEach((s) => {
+        const o = ht[s];
         i.component(s, o);
-      }), i.directive("plate-wave", Ce), i.provide("theme", a.theme), i.config.globalProperties.$yuyeon = a, ve(() => {
+      }), i.directive("plate-wave", $e), i.provide("theme", a.theme), i.config.globalProperties.$yuyeon = a, be(() => {
         if (a.app = i._instance, a.root = i._container, !a.root)
           throw new Error("yuyeon: Can't found instance");
         const s = a.root;
         s.classList.add("y-root"), s.setAttribute("data-y-root", ""), t.init(a);
-      }), e != null && e.credit && console.log(Ni);
+      }), e != null && e.credit && console.log(Ki);
       const { unmount: r } = i;
       i.unmount = () => {
         r(), t.scope.stop(), i.unmount = r;
@@ -3603,5 +3873,5 @@ function Fi(e = Ri) {
   };
 }
 export {
-  Fi as init
+  qi as init
 };