@krds.ui/vue 0.0.12 → 0.0.13

package/dist/krds-vue.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as _, computed as h, h as u, ref as B, onMounted as le, onBeforeUnmount as Se, createElementBlock as S, openBlock as k, createElementVNode as r, normalizeClass as E, withDirectives as Q, unref as A, toDisplayString as V, Fragment as F, renderList as N, vShow as te, createBlock as ie, withCtx as de, createTextVNode as P, watch as ae, provide as Ve, inject as Ie, createCommentVNode as Y, onUnmounted as J, resolveDirective as ze, resolveDynamicComponent as ye, renderSlot as G, normalizeStyle as ne, nextTick as we, withModifiers as re, getCurrentInstance as Ee, Teleport as Le } from "vue";
-const Ce = _({
+import { defineComponent as K, computed as b, h as s, ref as D, onMounted as ae, onBeforeUnmount as ce, createElementBlock as x, openBlock as w, createElementVNode as c, normalizeClass as M, withDirectives as ee, unref as q, toDisplayString as E, Fragment as j, renderList as G, vShow as le, createBlock as ie, withCtx as re, createTextVNode as H, watch as ne, provide as ze, inject as Ve, createCommentVNode as X, onUnmounted as Z, resolveDirective as Ie, resolveDynamicComponent as ge, renderSlot as J, normalizeStyle as se, nextTick as we, withModifiers as de, getCurrentInstance as Ee, Teleport as Le } from "vue";
+const Ce = K({
   name: "KrdsButton",
   props: {
     type: {
@@ -40,14 +40,14 @@ const Ce = _({
     }
   },
   emits: ["click"],
-  setup(e, { emit: o, slots: a }) {
-    const l = h(() => {
-      const n = ["krds-btn"];
-      return e.icon && n.push("icon"), e.border && n.push("border"), e.pure && n.push("pure"), e.text && n.push("text"), e.variant && !e.icon && n.push(e.variant), e.size && n.push(e.size), e.class && n.push(e.class), n;
-    }), t = (n) => {
-      e.disabled || o("click", n);
+  setup(e, { emit: n, slots: a }) {
+    const l = b(() => {
+      const o = ["krds-btn"];
+      return e.icon && o.push("icon"), e.border && o.push("border"), e.pure && o.push("pure"), e.text && o.push("text"), e.variant && !e.icon && o.push(e.variant), e.size && o.push(e.size), e.class && o.push(e.class), o;
+    }), t = (o) => {
+      e.disabled || n("click", o);
     };
-    return () => u(
+    return () => s(
       "button",
       {
         type: e.type,
@@ -58,19 +58,19 @@ const Ce = _({
       a.default?.()
     );
   }
-}), Me = _({
+}), Me = K({
   name: "KrdsButtonGroup",
   props: {},
-  setup(e, { slots: o }) {
-    return () => u(
+  setup(e, { slots: n }) {
+    return () => s(
       "div",
       {
         class: "btn-group"
       },
-      o.default?.()
+      n.default?.()
     );
   }
-}), Re = _({
+}), Te = K({
   name: "KrdsIcon",
   props: {
     name: {
@@ -83,11 +83,11 @@ const Ce = _({
     }
   },
   setup(e) {
-    return () => u("i", {
+    return () => s("i", {
       class: ["svg-icon", e.name, e.class].filter(Boolean).join(" ")
     });
   }
-}), Te = _({
+}), Re = K({
   name: "KrdsLink",
   props: {
     href: {
@@ -124,29 +124,29 @@ const Ce = _({
     }
   },
   emits: ["click"],
-  setup(e, { emit: o, slots: a }) {
-    const l = h(() => {
-      const i = ["krds-btn"];
-      return e.size && i.push(e.size), e.link && i.push("link"), e.basic && i.push("basic"), e.pure && i.push("pure"), e.class && i.push(e.class), i;
-    }), t = h(() => {
-      const i = {
+  setup(e, { emit: n, slots: a }) {
+    const l = b(() => {
+      const r = ["krds-btn"];
+      return e.size && r.push(e.size), e.link && r.push("link"), e.basic && r.push("basic"), e.pure && r.push("pure"), e.class && r.push(e.class), r;
+    }), t = b(() => {
+      const r = {
         href: e.href,
         class: l.value
       };
-      return e.target && (i.target = e.target), e.title && (i.title = e.title), e.target === "_blank" && (i.rel = "noopener noreferrer"), i;
-    }), n = (i) => {
-      o("click", i);
+      return e.target && (r.target = e.target), e.title && (r.title = e.title), e.target === "_blank" && (r.rel = "noopener noreferrer"), r;
+    }), o = (r) => {
+      n("click", r);
     };
-    return () => u(
+    return () => s(
       "a",
       {
         ...t.value,
-        onClick: n
+        onClick: o
       },
       a.default?.()
     );
   }
-}), xe = _({
+}), xe = K({
   name: "KrdsSpinner",
   props: {
     label: {
@@ -155,10 +155,10 @@ const Ce = _({
     }
   },
   render() {
-    const e = [u("span", { class: "sr-only" }, "로딩 중")];
-    return this.label && e.push(u("span", this.label)), u("div", { class: "krds-spinner", role: "status" }, e);
+    const e = [s("span", { class: "sr-only" }, "로딩 중")];
+    return this.label && e.push(s("span", this.label)), s("div", { class: "krds-spinner", role: "status" }, e);
   }
-}), Ae = _({
+}), Ae = K({
   name: "KrdsInput",
   props: {
     modelValue: {
@@ -247,25 +247,25 @@ const Ce = _({
     }
   },
   emits: ["update:modelValue", "input", "change", "focus", "blur", "keydown", "keyup"],
-  setup(e, { emit: o, slots: a }) {
-    const l = h(() => {
-      const b = ["krds-input"];
-      return e.size && b.push(e.size), e.class && b.push(e.class), b;
-    }), t = (b) => {
-      const D = b.target, m = e.type === "number" ? Number(D.value) : D.value;
-      o("update:modelValue", m), o("input", b);
-    }, n = (b) => {
-      o("change", b);
-    }, i = (b) => {
-      o("focus", b);
-    }, v = (b) => {
-      o("blur", b);
-    }, p = (b) => {
-      o("keydown", b);
-    }, y = (b) => {
-      o("keyup", b);
-    }, g = h(() => {
-      const b = {
+  setup(e, { emit: n, slots: a }) {
+    const l = b(() => {
+      const S = ["krds-input"];
+      return e.size && S.push(e.size), e.class && S.push(e.class), S;
+    }), t = (S) => {
+      const V = S.target, m = e.type === "number" ? Number(V.value) : V.value;
+      n("update:modelValue", m), n("input", S);
+    }, o = (S) => {
+      n("change", S);
+    }, r = (S) => {
+      n("focus", S);
+    }, h = (S) => {
+      n("blur", S);
+    }, u = (S) => {
+      n("keydown", S);
+    }, g = (S) => {
+      n("keyup", S);
+    }, y = b(() => {
+      const S = {
         type: e.type,
         class: l.value,
         value: e.modelValue,
@@ -278,23 +278,23 @@ const Ce = _({
         autocomplete: e.autocomplete,
         autofocus: e.autofocus,
         onInput: t,
-        onChange: n,
-        onFocus: i,
-        onBlur: v,
-        onKeydown: p,
-        onKeyup: y
+        onChange: o,
+        onFocus: r,
+        onBlur: h,
+        onKeydown: u,
+        onKeyup: g
       };
-      return e.maxlength !== void 0 && (b.maxlength = e.maxlength), e.minlength !== void 0 && (b.minlength = e.minlength), e.type === "number" && (e.max !== void 0 && (b.max = e.max), e.min !== void 0 && (b.min = e.min), e.step !== void 0 && (b.step = e.step)), b;
-    }), w = h(() => {
-      const b = ["form-conts"];
-      return e.state !== "default" && b.push(`is-${e.state}`), e.icon && b.push("btn-ico-wrap"), b;
+      return e.maxlength !== void 0 && (S.maxlength = e.maxlength), e.minlength !== void 0 && (S.minlength = e.minlength), e.type === "number" && (e.max !== void 0 && (S.max = e.max), e.min !== void 0 && (S.min = e.min), e.step !== void 0 && (S.step = e.step)), S;
+    }), C = b(() => {
+      const S = ["form-conts"];
+      return e.state !== "default" && S.push(`is-${e.state}`), e.icon && S.push("btn-ico-wrap"), S;
     });
     return () => {
-      const b = [u("input", g.value)];
-      return e.loading ? u("div", { class: w.value }, [u("div", { class: "form-spinner" }, [...b, u(xe)])]) : (a.default && b.push(...a.default()), u("div", { class: w.value }, b));
+      const S = [s("input", y.value)];
+      return e.loading ? s("div", { class: C.value }, [s("div", { class: "form-spinner" }, [...S, s(xe)])]) : (a.default && S.push(...a.default()), s("div", { class: C.value }, S));
     };
   }
-}), Pe = _({
+}), Fe = K({
   name: "KrdsFormLabel",
   props: {
     for: {
@@ -315,12 +315,12 @@ const Ce = _({
     }
   },
   emits: ["click"],
-  setup(e, { emit: o, slots: a }) {
+  setup(e, { emit: n, slots: a }) {
     const l = (t) => {
-      o("click", t);
+      n("click", t);
     };
-    return () => u("div", { class: "form-tit" }, [
-      u(
+    return () => s("div", { class: "form-tit" }, [
+      s(
         "label",
         {
           for: e.for,
@@ -333,7 +333,7 @@ const Ce = _({
       )
     ]);
   }
-}), Fe = _({
+}), Pe = K({
   name: "KrdsFormHint",
   props: {
     type: {
@@ -354,28 +354,28 @@ const Ce = _({
     }
   },
   emits: ["click"],
-  setup(e, { emit: o, slots: a }) {
-    const l = (n) => {
-      o("click", n);
+  setup(e, { emit: n, slots: a }) {
+    const l = (o) => {
+      n("click", o);
     }, t = () => {
-      let n;
+      let o;
       switch (e.type) {
         case "error":
-          n = "form-hint-invalid";
+          o = "form-hint-invalid";
           break;
         case "success":
-          n = "form-hint-success";
+          o = "form-hint-success";
           break;
         case "information":
-          n = "form-hint-information";
+          o = "form-hint-information";
           break;
         default:
-          n = "form-hint";
+          o = "form-hint";
           break;
       }
-      return e.class ? `${n} ${e.class}` : n;
+      return e.class ? `${o} ${e.class}` : o;
     };
-    return () => u(
+    return () => s(
       "p",
       {
         id: e.id,
@@ -386,7 +386,7 @@ const Ce = _({
       a.default?.()
     );
   }
-}), Oe = _({
+}), Oe = K({
   name: "KrdsFormGroup",
   props: {
     class: {
@@ -402,94 +402,94 @@ const Ce = _({
       default: void 0
     }
   },
-  setup(e, { slots: o }) {
-    const a = h(() => {
+  setup(e, { slots: n }) {
+    const a = b(() => {
       const l = ["form-group"];
       return e.class && l.push(e.class), l;
     });
-    return () => u(
+    return () => s(
       "div",
       {
         id: e.id,
         class: a.value,
         style: e.style
       },
-      o.default?.()
+      n.default?.()
     );
   }
 });
-function qe(e, o) {
-  const a = /* @__PURE__ */ new Date(), l = B(e || a.getFullYear()), t = B(o || a.getMonth() + 1), n = B(null), i = B(null), v = B(null), p = h(() => {
-    const c = a.getFullYear(), d = [];
-    for (let f = c - 10; f <= c + 10; f++)
-      d.push(f);
+function qe(e, n) {
+  const a = /* @__PURE__ */ new Date(), l = D(e || a.getFullYear()), t = D(n || a.getMonth() + 1), o = D(null), r = D(null), h = D(null), u = b(() => {
+    const f = a.getFullYear(), d = [];
+    for (let v = f - 10; v <= f + 10; v++)
+      d.push(v);
     return d;
-  }), y = h(() => Array.from({ length: 12 }, (c, d) => d + 1)), g = () => {
-    n.value = null, i.value = null;
-  }, w = () => {
+  }), g = b(() => Array.from({ length: 12 }, (f, d) => d + 1)), y = () => {
+    o.value = null, r.value = null;
+  }, C = () => {
     t.value === 1 ? (t.value = 12, l.value -= 1) : t.value -= 1;
-  }, b = () => {
+  }, S = () => {
     t.value === 12 ? (t.value = 1, l.value += 1) : t.value += 1;
-  }, D = (c, d = !1) => {
+  }, V = (f, d = !1) => {
     if (d)
-      n.value = c, i.value = c;
-    else if (!n.value || n.value && i.value)
-      n.value = c, i.value = null;
+      o.value = f, r.value = f;
+    else if (!o.value || o.value && r.value)
+      o.value = f, r.value = null;
     else {
-      const f = new Date(n.value.replace(/\./g, "-"));
-      new Date(c.replace(/\./g, "-")) < f ? (n.value = c, i.value = null) : i.value = c;
+      const v = new Date(o.value.replace(/\./g, "-"));
+      new Date(f.replace(/\./g, "-")) < v ? (o.value = f, r.value = null) : r.value = f;
     }
   };
   return {
     // State
     currentYear: l,
     currentMonth: t,
-    selectedStartDate: n,
-    selectedEndDate: i,
-    activeDateSelector: v,
+    selectedStartDate: o,
+    selectedEndDate: r,
+    activeDateSelector: h,
     // Computed
-    yearOptions: p,
-    monthOptions: y,
+    yearOptions: u,
+    monthOptions: g,
     // Methods
-    clearDateSelection: g,
-    prevMonth: w,
-    nextMonth: b,
-    handleDateSelection: D,
+    clearDateSelection: y,
+    prevMonth: C,
+    nextMonth: S,
+    handleDateSelection: V,
     selectToday: () => {
-      const c = `${a.getFullYear()}.${String(a.getMonth() + 1).padStart(2, "0")}.${String(a.getDate()).padStart(2, "0")}`;
-      D(c, !0);
+      const f = `${a.getFullYear()}.${String(a.getMonth() + 1).padStart(2, "0")}.${String(a.getDate()).padStart(2, "0")}`;
+      V(f, !0);
     },
-    isDateInSelectedRange: (c) => {
-      if (!n.value || !i.value)
+    isDateInSelectedRange: (f) => {
+      if (!o.value || !r.value)
         return { isInRange: !1, isStart: !1, isEnd: !1 };
-      const d = new Date(c.replace(/\./g, "-")), f = new Date(n.value.replace(/\./g, "-")), x = new Date(i.value.replace(/\./g, "-")), R = c === n.value, L = c === i.value;
-      return { isInRange: d >= f && d <= x, isStart: R, isEnd: L };
+      const d = new Date(f.replace(/\./g, "-")), v = new Date(o.value.replace(/\./g, "-")), $ = new Date(r.value.replace(/\./g, "-")), F = f === o.value, T = f === r.value;
+      return { isInRange: d >= v && d <= $, isStart: F, isEnd: T };
     }
   };
 }
-function Ne(e, o, a = {}) {
+function Ne(e, n, a = {}) {
   let l = null;
-  const t = typeof a == "string" ? { ignore: a } : a, { ignore: n, event: i = "click" } = t, v = () => {
-    l = (y) => {
-      const g = y.target;
-      e.value?.contains(g) || n && g.closest(n) || o();
-    }, document.addEventListener(i, l);
-  }, p = () => {
+  const t = typeof a == "string" ? { ignore: a } : a, { ignore: o, event: r = "click" } = t, h = () => {
+    l = (g) => {
+      const y = g.target;
+      e.value?.contains(y) || o && y.closest(o) || n();
+    }, document.addEventListener(r, l);
+  }, u = () => {
     if (l) {
-      const y = typeof a == "string" ? "click" : a.event || "click";
-      document.removeEventListener(y, l), l = null;
+      const g = typeof a == "string" ? "click" : a.event || "click";
+      document.removeEventListener(g, l), l = null;
     }
   };
-  return le(() => {
-    v();
-  }), Se(() => {
-    p();
+  return ae(() => {
+    h();
+  }), ce(() => {
+    u();
   }), {
-    setupGlobalListeners: v,
-    removeGlobalListeners: p
+    setupGlobalListeners: h,
+    removeGlobalListeners: u
   };
 }
-const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id", "name", "placeholder", "value", "readonly", "disabled", "required", "autofocus"], Ye = ["disabled", "aria-expanded"], Ge = { class: "calendar-head" }, Ue = { class: "calendar-switch-wrap" }, Xe = { class: "calendar-drop-down" }, Je = ["aria-expanded"], Qe = { class: "calendar-select calendar-year-wrap" }, Ze = { class: "sel year" }, et = ["onClick"], tt = { class: "calendar-drop-down" }, lt = ["aria-expanded"], at = { class: "calendar-select calendar-mon-wrap" }, nt = { class: "sel month" }, st = ["onClick"], ot = { class: "calendar-body" }, it = { class: "calendar-table-wrap" }, dt = { class: "calendar-tbl" }, rt = ["data-date"], ct = ["aria-pressed", "onClick"], ut = { class: "calendar-footer" }, ft = { class: "calendar-btn-wrap" }, vt = /* @__PURE__ */ _({
+const He = { class: "form-conts" }, We = { class: "calendar-input" }, je = ["id", "name", "placeholder", "value", "readonly", "disabled", "required", "autofocus"], Ye = ["disabled", "aria-expanded"], Ge = { class: "calendar-head" }, Ue = { class: "calendar-switch-wrap" }, Xe = { class: "calendar-drop-down" }, Je = ["aria-expanded"], Qe = { class: "calendar-select calendar-year-wrap" }, Ze = { class: "sel year" }, et = ["onClick"], tt = { class: "calendar-drop-down" }, lt = ["aria-expanded"], at = { class: "calendar-select calendar-mon-wrap" }, nt = { class: "sel month" }, st = ["onClick"], ot = { class: "calendar-body" }, it = { class: "calendar-table-wrap" }, rt = { class: "calendar-tbl" }, dt = ["data-date"], ct = ["aria-pressed", "onClick"], ut = { class: "calendar-footer" }, ft = { class: "calendar-btn-wrap" }, vt = /* @__PURE__ */ K({
   __name: "KrdsDateInput",
   props: {
     modelValue: { default: void 0 },
@@ -509,59 +509,59 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
     id: { default: void 0 }
   },
   emits: ["update:modelValue", "input", "change", "focus", "blur"],
-  setup(e, { emit: o }) {
-    const a = e, l = o, t = B(), n = B(), i = B(!1), v = B(null), {
-      currentYear: p,
-      currentMonth: y,
-      selectedStartDate: g,
-      selectedEndDate: w,
-      yearOptions: b,
-      monthOptions: D,
+  setup(e, { emit: n }) {
+    const a = e, l = n, t = D(), o = D(), r = D(!1), h = D(null), {
+      currentYear: u,
+      currentMonth: g,
+      selectedStartDate: y,
+      selectedEndDate: C,
+      yearOptions: S,
+      monthOptions: V,
       prevMonth: m,
-      nextMonth: s,
-      handleDateSelection: c,
+      nextMonth: i,
+      handleDateSelection: f,
       selectToday: d,
-      isDateInSelectedRange: f
-    } = qe(a.initialYear, a.initialMonth), x = () => {
-      i.value && n.value?.focus(), i.value = !1, v.value = null;
+      isDateInSelectedRange: v
+    } = qe(a.initialYear, a.initialMonth), $ = () => {
+      r.value && o.value?.focus(), r.value = !1, h.value = null;
     };
-    Ne(t, x, ".calendar-conts");
-    const R = h(() => {
-      const C = ["krds-input", "datepicker", "cal"];
-      return a.size && C.push(a.size), a.class && C.push(a.class), C;
-    }), L = h(() => ["form-conts", "calendar-conts"]), M = h(() => ({
+    Ne(t, $, ".calendar-conts");
+    const F = b(() => {
+      const B = ["krds-input", "datepicker", "cal"];
+      return a.size && B.push(a.size), a.class && B.push(a.class), B;
+    }), T = b(() => ["form-conts", "calendar-conts"]), R = b(() => ({
       "krds-calendar-area": !0,
-      active: i.value
-    })), z = h(() => {
-      const C = p.value, $ = y.value, K = new Date(C, $ - 1, 1), U = new Date(K);
-      U.setDate(U.getDate() - K.getDay());
-      const W = [], T = new Date(U);
+      active: r.value
+    })), I = b(() => {
+      const B = u.value, _ = g.value, z = new Date(B, _ - 1, 1), Q = new Date(z);
+      Q.setDate(Q.getDate() - z.getDay());
+      const U = [], O = new Date(Q);
       for (let oe = 0; oe < 6; oe++) {
-        const pe = [];
-        for (let me = 0; me < 7; me++) {
-          const De = `${T.getFullYear()}.${String(T.getMonth() + 1).padStart(2, "0")}.${String(T.getDate()).padStart(2, "0")}`, he = T.getDay();
-          pe.push({
-            day: T.getDate(),
+        const me = [];
+        for (let pe = 0; pe < 7; pe++) {
+          const De = `${O.getFullYear()}.${String(O.getMonth() + 1).padStart(2, "0")}.${String(O.getDate()).padStart(2, "0")}`, ye = O.getDay();
+          me.push({
+            day: O.getDate(),
             dateString: De,
-            isCurrentMonth: T.getMonth() === $ - 1,
-            isToday: T.toDateString() === (/* @__PURE__ */ new Date()).toDateString(),
-            isPrevMonth: T.getMonth() < $ - 1 || T.getMonth() === 11 && $ === 1,
-            isNextMonth: T.getMonth() > $ - 1 || T.getMonth() === 0 && $ === 12,
-            isSunday: he === 0,
-            isSaturday: he === 6
-          }), T.setDate(T.getDate() + 1);
+            isCurrentMonth: O.getMonth() === _ - 1,
+            isToday: O.toDateString() === (/* @__PURE__ */ new Date()).toDateString(),
+            isPrevMonth: O.getMonth() < _ - 1 || O.getMonth() === 11 && _ === 1,
+            isNextMonth: O.getMonth() > _ - 1 || O.getMonth() === 0 && _ === 12,
+            isSunday: ye === 0,
+            isSaturday: ye === 6
+          }), O.setDate(O.getDate() + 1);
         }
-        W.push(pe);
+        U.push(me);
       }
-      return W;
-    }), H = (C) => {
-      const $ = [];
-      if (C.isPrevMonth && $.push("old"), C.isNextMonth && $.push("new"), C.isToday && $.push("today"), C.isSunday && $.push("day-off"), a.holidays?.includes(C.dateString) && $.push("day-off"), a.eventDates?.includes(C.dateString) && $.push("day-event"), C.isCurrentMonth) {
-        const K = f(C.dateString);
-        K.isInRange && ($.push("period"), K.isStart && $.push("start"), K.isEnd && $.push("end"));
+      return U;
+    }), p = (B) => {
+      const _ = [];
+      if (B.isPrevMonth && _.push("old"), B.isNextMonth && _.push("new"), B.isToday && _.push("today"), B.isSunday && _.push("day-off"), a.holidays?.includes(B.dateString) && _.push("day-off"), a.eventDates?.includes(B.dateString) && _.push("day-event"), B.isCurrentMonth) {
+        const z = v(B.dateString);
+        z.isInRange && (_.push("period"), z.isStart && _.push("start"), z.isEnd && _.push("end"));
       }
-      return $;
-    }, I = h(() => [
+      return _;
+    }, k = b(() => [
       {
         id: "get-today",
         label: "오늘",
@@ -576,7 +576,7 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
         class: void 0,
         variant: "tertiary",
         size: "small",
-        handler: x
+        handler: $
       },
       {
         id: "confirm-btn",
@@ -584,50 +584,50 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
         class: void 0,
         variant: "primary",
         size: "small",
-        handler: X
+        handler: W
       }
-    ]), j = (C) => {
-      v.value === C ? v.value = null : v.value = C;
-    }, Z = (C) => {
-      p.value = C, v.value = null;
-    }, se = (C) => {
-      y.value = C, v.value = null;
-    }, X = () => {
-      if (g.value) {
-        if (w.value && g.value !== w.value) {
-          const C = `${g.value} ~ ${w.value}`;
-          l("update:modelValue", C);
+    ]), L = (B) => {
+      h.value === B ? h.value = null : h.value = B;
+    }, P = (B) => {
+      u.value = B, h.value = null;
+    }, A = (B) => {
+      g.value = B, h.value = null;
+    }, W = () => {
+      if (y.value) {
+        if (C.value && y.value !== C.value) {
+          const B = `${y.value} ~ ${C.value}`;
+          l("update:modelValue", B);
         } else
-          l("update:modelValue", g.value);
-        x();
+          l("update:modelValue", y.value);
+        $();
       }
-    }, O = () => {
-      i.value = !0, v.value = null, setTimeout(() => {
+    }, N = () => {
+      r.value = !0, h.value = null, setTimeout(() => {
         t.value?.querySelector(".calendar-wrap")?.focus();
       }, 50);
-    }, q = () => {
-      i.value ? x() : O();
-    }, ve = (C) => {
-      C.code === "Escape" && (v.value ? v.value = null : i.value && x());
-    }, ee = (C) => {
-      const $ = C.target;
-      l("update:modelValue", $.value), l("input", C);
-    }, _e = (C) => {
-      l("change", C);
-    }, Be = (C) => {
-      l("focus", C);
-    }, Ke = (C) => {
-      l("blur", C);
+    }, Y = () => {
+      r.value ? $() : N();
+    }, he = (B) => {
+      B.code === "Escape" && (h.value ? h.value = null : r.value && $());
+    }, te = (B) => {
+      const _ = B.target;
+      l("update:modelValue", _.value), l("input", B);
+    }, Be = (B) => {
+      l("change", B);
+    }, Ke = (B) => {
+      l("focus", B);
+    }, _e = (B) => {
+      l("blur", B);
     };
-    return (C, $) => (k(), S("div", He, [
-      r("div", {
-        class: E(L.value)
+    return (B, _) => (w(), x("div", He, [
+      c("div", {
+        class: M(T.value)
       }, [
-        r("div", je, [
-          r("input", {
+        c("div", We, [
+          c("input", {
             id: e.id,
             name: e.name,
-            class: E(R.value),
+            class: M(F.value),
             placeholder: e.placeholder,
             value: e.modelValue,
             readonly: e.readonly,
@@ -635,160 +635,160 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
             required: e.required,
             autofocus: e.autofocus,
             type: "text",
-            onInput: ee,
-            onChange: _e,
-            onFocus: Be,
-            onBlur: Ke
-          }, null, 42, We),
-          r("button", {
+            onInput: te,
+            onChange: Be,
+            onFocus: Ke,
+            onBlur: _e
+          }, null, 42, je),
+          c("button", {
             ref_key: "datePickerButtonRef",
-            ref: n,
-            class: E(`krds-btn ${e.size || "medium"} icon form-btn-datepicker`),
+            ref: o,
+            class: M(`krds-btn ${e.size || "medium"} icon form-btn-datepicker`),
             disabled: e.disabled,
-            "aria-expanded": i.value,
+            "aria-expanded": r.value,
             type: "button",
-            onClick: q
-          }, [...$[4] || ($[4] = [
-            r("span", { class: "sr-only" }, "달력 열기", -1),
-            r("i", { class: "svg-icon ico-calendar" }, null, -1)
+            onClick: Y
+          }, [..._[4] || (_[4] = [
+            c("span", { class: "sr-only" }, "달력 열기", -1),
+            c("i", { class: "svg-icon ico-calendar" }, null, -1)
           ])], 10, Ye)
         ]),
-        r("div", {
+        c("div", {
           ref_key: "datePickerAreaRef",
           ref: t,
-          class: E(M.value)
+          class: M(R.value)
         }, [
-          Q(r("div", {
+          ee(c("div", {
             class: "calendar-wrap bottom",
             "aria-label": "달력",
             tabindex: "0",
-            onKeydown: ve
+            onKeydown: he
           }, [
-            r("div", Ge, [
-              r("button", {
+            c("div", Ge, [
+              c("button", {
                 type: "button",
                 class: "btn-cal-move prev",
-                onClick: $[0] || ($[0] = //@ts-ignore
-                (...K) => A(m) && A(m)(...K))
-              }, [...$[5] || ($[5] = [
-                r("span", { class: "sr-only" }, "이전 달", -1)
+                onClick: _[0] || (_[0] = //@ts-ignore
+                (...z) => q(m) && q(m)(...z))
+              }, [..._[5] || (_[5] = [
+                c("span", { class: "sr-only" }, "이전 달", -1)
               ])]),
-              r("div", Ue, [
-                r("div", Xe, [
-                  r("button", {
+              c("div", Ue, [
+                c("div", Xe, [
+                  c("button", {
                     type: "button",
                     class: "btn-cal-switch year",
                     "aria-label": "연도 선택",
-                    "aria-expanded": v.value === "year",
-                    onClick: $[1] || ($[1] = (K) => j("year"))
-                  }, V(A(p)) + "년 ", 9, Je),
-                  Q(r("div", Qe, [
-                    r("ul", Ze, [
-                      (k(!0), S(F, null, N(A(b), (K) => (k(), S("li", { key: K }, [
-                        r("button", {
+                    "aria-expanded": h.value === "year",
+                    onClick: _[1] || (_[1] = (z) => L("year"))
+                  }, E(q(u)) + "년 ", 9, Je),
+                  ee(c("div", Qe, [
+                    c("ul", Ze, [
+                      (w(!0), x(j, null, G(q(S), (z) => (w(), x("li", { key: z }, [
+                        c("button", {
                           type: "button",
-                          class: E({ active: K === A(p) }),
-                          onClick: (U) => Z(K)
-                        }, V(K) + "년", 11, et)
+                          class: M({ active: z === q(u) }),
+                          onClick: (Q) => P(z)
+                        }, E(z) + "년", 11, et)
                       ]))), 128))
                     ])
                   ], 512), [
-                    [te, v.value === "year"]
+                    [le, h.value === "year"]
                   ])
                 ]),
-                r("div", tt, [
-                  r("button", {
+                c("div", tt, [
+                  c("button", {
                     type: "button",
                     class: "btn-cal-switch month",
                     "aria-label": "월 선택",
-                    "aria-expanded": v.value === "month",
-                    onClick: $[2] || ($[2] = (K) => j("month"))
-                  }, V(A(y).toString().padStart(2, "0")) + "월 ", 9, lt),
-                  Q(r("div", at, [
-                    r("ul", nt, [
-                      (k(!0), S(F, null, N(A(D), (K) => (k(), S("li", { key: K }, [
-                        r("button", {
+                    "aria-expanded": h.value === "month",
+                    onClick: _[2] || (_[2] = (z) => L("month"))
+                  }, E(q(g).toString().padStart(2, "0")) + "월 ", 9, lt),
+                  ee(c("div", at, [
+                    c("ul", nt, [
+                      (w(!0), x(j, null, G(q(V), (z) => (w(), x("li", { key: z }, [
+                        c("button", {
                           type: "button",
-                          class: E({ active: K === A(y) }),
-                          onClick: (U) => se(K)
-                        }, V(K.toString().padStart(2, "0")) + "월 ", 11, st)
+                          class: M({ active: z === q(g) }),
+                          onClick: (Q) => A(z)
+                        }, E(z.toString().padStart(2, "0")) + "월 ", 11, st)
                       ]))), 128))
                     ])
                   ], 512), [
-                    [te, v.value === "month"]
+                    [le, h.value === "month"]
                   ])
                 ])
               ]),
-              r("button", {
+              c("button", {
                 type: "button",
                 class: "btn-cal-move next",
-                onClick: $[3] || ($[3] = //@ts-ignore
-                (...K) => A(s) && A(s)(...K))
-              }, [...$[6] || ($[6] = [
-                r("span", { class: "sr-only" }, "다음 달", -1)
+                onClick: _[3] || (_[3] = //@ts-ignore
+                (...z) => q(i) && q(i)(...z))
+              }, [..._[6] || (_[6] = [
+                c("span", { class: "sr-only" }, "다음 달", -1)
               ])])
             ]),
-            r("div", ot, [
-              r("div", it, [
-                r("table", dt, [
-                  r("caption", null, V(A(p)) + "년 " + V(A(y).toString().padStart(2, "0")) + "월", 1),
-                  $[7] || ($[7] = r("thead", null, [
-                    r("tr", null, [
-                      r("th", null, "일"),
-                      r("th", null, "월"),
-                      r("th", null, "화"),
-                      r("th", null, "수"),
-                      r("th", null, "목"),
-                      r("th", null, "금"),
-                      r("th", null, "토")
+            c("div", ot, [
+              c("div", it, [
+                c("table", rt, [
+                  c("caption", null, E(q(u)) + "년 " + E(q(g).toString().padStart(2, "0")) + "월", 1),
+                  _[7] || (_[7] = c("thead", null, [
+                    c("tr", null, [
+                      c("th", null, "일"),
+                      c("th", null, "월"),
+                      c("th", null, "화"),
+                      c("th", null, "수"),
+                      c("th", null, "목"),
+                      c("th", null, "금"),
+                      c("th", null, "토")
                     ])
                   ], -1)),
-                  r("tbody", null, [
-                    (k(!0), S(F, null, N(z.value, (K, U) => (k(), S("tr", { key: U }, [
-                      (k(!0), S(F, null, N(K, (W, T) => (k(), S("td", {
-                        key: T,
-                        class: E(H(W)),
-                        "data-date": W.dateString
+                  c("tbody", null, [
+                    (w(!0), x(j, null, G(I.value, (z, Q) => (w(), x("tr", { key: Q }, [
+                      (w(!0), x(j, null, G(z, (U, O) => (w(), x("td", {
+                        key: O,
+                        class: M(p(U)),
+                        "data-date": U.dateString
                       }, [
-                        r("button", {
+                        c("button", {
                           type: "button",
                           class: "btn-set-date",
-                          "aria-pressed": A(f)(W.dateString).isInRange ? "true" : "false",
-                          onClick: (oe) => A(c)(W.dateString)
+                          "aria-pressed": q(v)(U.dateString).isInRange ? "true" : "false",
+                          onClick: (oe) => q(f)(U.dateString)
                         }, [
-                          r("span", null, V(W.day), 1)
+                          c("span", null, E(U.day), 1)
                         ], 8, ct)
-                      ], 10, rt))), 128))
+                      ], 10, dt))), 128))
                     ]))), 128))
                   ])
                 ])
               ])
             ]),
-            r("div", ut, [
-              r("div", ft, [
-                (k(!0), S(F, null, N(I.value, (K) => (k(), ie(A(Ce), {
-                  id: K.id,
-                  key: K.id,
-                  class: E(K.class),
-                  variant: K.variant,
-                  size: K.size,
-                  onClick: K.handler
+            c("div", ut, [
+              c("div", ft, [
+                (w(!0), x(j, null, G(k.value, (z) => (w(), ie(q(Ce), {
+                  id: z.id,
+                  key: z.id,
+                  class: M(z.class),
+                  variant: z.variant,
+                  size: z.size,
+                  onClick: z.handler
                 }, {
-                  default: de(() => [
-                    P(V(K.label), 1)
+                  default: re(() => [
+                    H(E(z.label), 1)
                   ]),
                   _: 2
                 }, 1032, ["id", "class", "variant", "size", "onClick"]))), 128))
               ])
             ])
           ], 544), [
-            [te, i.value]
+            [le, r.value]
           ])
         ], 2)
       ], 2)
     ]));
   }
-}), pt = _({
+}), ht = K({
   name: "KrdsTextarea",
   props: {
     modelValue: {
@@ -862,36 +862,36 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
     }
   },
   emits: ["update:modelValue", "input", "change", "focus", "blur", "keydown", "keyup"],
-  setup(e, { emit: o }) {
-    const a = B(0);
-    ae(
+  setup(e, { emit: n }) {
+    const a = D(0);
+    ne(
       () => e.modelValue,
-      (s) => {
-        a.value = (s || "").length;
+      (i) => {
+        a.value = (i || "").length;
       },
       { immediate: !0 }
     );
-    const l = h(() => {
-      const s = ["krds-input"];
-      return e.size && s.push(e.size), e.class && s.push(e.class), s;
-    }), t = h(() => {
-      const s = {};
-      return e.resize && (s.resize = e.resize), s;
-    }), n = (s) => {
-      const d = s.target.value;
-      a.value = d.length, o("update:modelValue", d), o("input", s);
-    }, i = (s) => {
-      o("change", s);
-    }, v = (s) => {
-      o("focus", s);
-    }, p = (s) => {
-      o("blur", s);
-    }, y = (s) => {
-      o("keydown", s);
-    }, g = (s) => {
-      o("keyup", s);
-    }, w = h(() => {
-      const s = {
+    const l = b(() => {
+      const i = ["krds-input"];
+      return e.size && i.push(e.size), e.class && i.push(e.class), i;
+    }), t = b(() => {
+      const i = {};
+      return e.resize && (i.resize = e.resize), i;
+    }), o = (i) => {
+      const d = i.target.value;
+      a.value = d.length, n("update:modelValue", d), n("input", i);
+    }, r = (i) => {
+      n("change", i);
+    }, h = (i) => {
+      n("focus", i);
+    }, u = (i) => {
+      n("blur", i);
+    }, g = (i) => {
+      n("keydown", i);
+    }, y = (i) => {
+      n("keyup", i);
+    }, C = b(() => {
+      const i = {
         class: l.value,
         style: t.value,
         value: e.modelValue,
@@ -904,33 +904,33 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
         autofocus: e.autofocus,
         rows: e.rows,
         cols: e.cols,
-        onInput: n,
-        onChange: i,
-        onFocus: v,
-        onBlur: p,
-        onKeydown: y,
-        onKeyup: g
+        onInput: o,
+        onChange: r,
+        onFocus: h,
+        onBlur: u,
+        onKeydown: g,
+        onKeyup: y
       };
-      return e.maxlength !== void 0 && (s.maxlength = e.maxlength), e.minlength !== void 0 && (s.minlength = e.minlength), s;
-    }), b = h(() => ["form-conts"]), D = h(() => ["textarea-wrap"]), m = h(() => {
+      return e.maxlength !== void 0 && (i.maxlength = e.maxlength), e.minlength !== void 0 && (i.minlength = e.minlength), i;
+    }), S = b(() => ["form-conts"]), V = b(() => ["textarea-wrap"]), m = b(() => {
       if (!e.showCount) return null;
-      const s = a.value, c = e.maxlength;
+      const i = a.value, f = e.maxlength;
       return {
-        current: s,
-        max: c || ""
+        current: i,
+        max: f || ""
       };
     });
     return () => {
-      const s = [u("textarea", w.value)];
-      return m.value && s.push(
-        u("p", { class: "textarea-count" }, [
-          u("span", { class: "count-now" }, m.value.current),
-          u("span", { class: "count-total" }, m.value.max ? `/${m.value.max}` : "")
+      const i = [s("textarea", C.value)];
+      return m.value && i.push(
+        s("p", { class: "textarea-count" }, [
+          s("span", { class: "count-now" }, m.value.current),
+          s("span", { class: "count-total" }, m.value.max ? `/${m.value.max}` : "")
         ])
-      ), u("div", { class: b.value }, [u("div", { class: D.value }, s)]);
+      ), s("div", { class: S.value }, [s("div", { class: V.value }, i)]);
     };
   }
-}), mt = _({
+}), mt = K({
   name: "KrdsSelect",
   props: {
     modelValue: {
@@ -979,18 +979,18 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
     }
   },
   emits: ["update:modelValue", "focus", "blur"],
-  setup(e, { emit: o, slots: a }) {
-    const l = h(() => {
-      const g = [];
-      return e.sort ? g.push("krds-form-select-sort") : g.push("krds-form-select"), e.size && g.push(e.size), e.class && g.push(e.class), g;
-    }), t = (g) => {
-      const w = g.target, b = w.value === "" ? null : w.value;
-      o("update:modelValue", b);
-    }, n = (g) => {
-      o("focus", g);
-    }, i = (g) => {
-      o("blur", g);
-    }, v = h(() => ({
+  setup(e, { emit: n, slots: a }) {
+    const l = b(() => {
+      const y = [];
+      return e.sort ? y.push("krds-form-select-sort") : y.push("krds-form-select"), e.size && y.push(e.size), e.class && y.push(e.class), y;
+    }), t = (y) => {
+      const C = y.target, S = C.value === "" ? null : C.value;
+      n("update:modelValue", S);
+    }, o = (y) => {
+      n("focus", y);
+    }, r = (y) => {
+      n("blur", y);
+    }, h = b(() => ({
       class: l.value,
       value: e.modelValue ?? "",
       title: e.title || e.placeholder,
@@ -998,33 +998,35 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
       id: e.id,
       disabled: e.disabled || e.readonly,
       onChange: t,
-      onFocus: n,
-      onBlur: i
-    })), p = h(() => {
-      const g = ["form-conts"];
-      return e.state !== "default" && g.push(`is-${e.state}`), g;
-    }), y = () => {
-      const g = [];
-      return e.placeholder && !e.modelValue && g.push(u("option", { value: "", disabled: !0, selected: !0 }, e.placeholder)), e.options && e.options.length > 0 && e.options.forEach((w) => {
-        g.push(
-          u(
+      onFocus: o,
+      onBlur: r
+    })), u = b(() => {
+      const y = ["form-conts"];
+      return e.state !== "default" && y.push(`is-${e.state}`), y;
+    }), g = () => {
+      const y = [];
+      return e.placeholder && !e.modelValue && y.push(s("option", { value: "", disabled: !0, selected: !0 }, e.placeholder)), e.options && e.options.length > 0 && e.options.forEach((C) => {
+        y.push(
+          s(
             "option",
             {
-              value: w.value,
-              disabled: w.disabled,
-              selected: w.value === e.modelValue
+              value: C.value,
+              disabled: C.disabled,
+              selected: C.value === e.modelValue
             },
-            w.label
+            C.label
           )
         );
-      }), a.default && g.push(...a.default()), g;
+      }), a.default && y.push(...a.default()), y;
     };
     return () => {
-      const g = u("select", v.value, y());
-      return e.sort ? g : u("div", { class: p.value }, [g]);
+      const y = s("select", h.value, g());
+      return e.sort ? y : s("div", { class: u.value }, [y]);
     };
   }
-}), ht = _({
+});
+let pt = 0;
+const yt = K({
   name: "KrdsFileUpload",
   props: {
     modelValue: {
@@ -1127,15 +1129,191 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
     "download",
     "preview"
   ],
-  setup(e, { emit: o }) {
-    B(!1), h(() => {
-      const l = ["krds-file-upload", "line"];
-      return e.class && l.push(e.class), l;
-    });
-    const a = h(() => e.modelValue?.length || 0);
-    return h(() => !e.disabled && a.value < e.maxFiles), () => null;
+  setup(e, { emit: n }) {
+    const a = D(!1), l = D(null), t = e.id ? `${e.id}-input` : `krds-file-upload-${++pt}`, o = (p) => p < 1024 ? `${p}B` : p < 1024 * 1024 ? `${Math.round(p / 1024)}KB` : `${(p / (1024 * 1024)).toFixed(1)}MB`, r = (p) => {
+      const k = p.split(".");
+      return k.length > 1 ? k.pop().toLowerCase() : "";
+    }, h = (p) => {
+      const k = r(p.name), L = k ? p.name.slice(0, -(k.length + 1)) : p.name;
+      return k ? `${L} [${k}, ${o(p.size)}]` : `${p.name} [${o(p.size)}]`;
+    }, u = () => `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, g = (p) => {
+      if (e.maxFileSize && p.size > e.maxFileSize)
+        return `등록 가능한 파일 용량을 초과하였습니다.
+${o(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
+      if (e.accept) {
+        const k = e.accept.split(",").map((A) => A.trim().toLowerCase()), L = `.${r(p.name)}`, P = p.type;
+        if (!k.some((A) => A.startsWith(".") ? L === A : A.endsWith("/*") ? P.startsWith(A.replace("/*", "/")) : P === A))
+          return "허용되지 않는 파일 형식입니다.";
+      }
+      return null;
+    }, y = (p) => {
+      if (e.disabled || e.readonly) return;
+      let k = [...e.modelValue || []];
+      !e.multiple && k.length > 0 && (k = []);
+      const L = [];
+      for (let P = 0; P < p.length && !(k.length + L.length >= e.maxFiles); P++) {
+        const A = p[P], W = g(A), N = {
+          id: u(),
+          file: A,
+          name: A.name,
+          size: A.size,
+          type: A.type,
+          status: W ? "error" : "pending",
+          errorMessage: W || void 0
+        };
+        L.push(N), W ? n("file-error", N, W) : n("file-added", N);
+      }
+      L.length > 0 && n("update:modelValue", [...k, ...L]);
+    }, C = (p) => {
+      const k = p.target;
+      k.files?.length && (y(k.files), k.value = "");
+    }, S = (p) => {
+      e.disabled || e.readonly || !e.dragAndDrop || (p.preventDefault(), a.value = !0);
+    }, V = () => {
+      a.value = !1;
+    }, m = (p) => {
+      p.preventDefault(), a.value = !1, !(e.disabled || e.readonly || !e.dragAndDrop) && p.dataTransfer?.files && y(p.dataTransfer.files);
+    }, i = () => {
+      e.disabled || e.readonly || l.value?.click();
+    }, f = (p) => {
+      e.disabled || e.readonly || (n(
+        "update:modelValue",
+        (e.modelValue || []).filter((k) => k.id !== p)
+      ), n("file-removed", p));
+    }, d = () => {
+      e.disabled || e.readonly || (n("update:modelValue", []), n("clear-all"));
+    }, v = b(() => {
+      const p = ["krds-file-upload", "line"];
+      return e.class && p.push(e.class), p;
+    }), $ = () => s("div", { class: "file-head" }, [s("h3", { class: "tit" }, e.title), s("div", null, [s("p", null, e.description)])]), F = () => s(
+      "div",
+      {
+        class: "file-upload",
+        onDragover: S,
+        onDragleave: V,
+        onDrop: m
+      },
+      [
+        s("p", { class: "txt" }, e.placeholder),
+        s("div", { class: "file-upload-btn-wrap" }, [
+          s("input", {
+            ref: l,
+            type: "file",
+            name: e.name || "myFile",
+            id: t,
+            hidden: !0,
+            accept: e.accept || void 0,
+            multiple: e.multiple,
+            onChange: C
+          }),
+          s("label", { for: t }, [
+            s(
+              "button",
+              {
+                type: "button",
+                class: ["krds-btn", e.size],
+                disabled: e.disabled || void 0,
+                onClick: i
+              },
+              [s("i", { class: "svg-icon ico-upload" }), "파일선택"]
+            )
+          ])
+        ])
+      ]
+    ), T = (p) => {
+      const k = [];
+      return p.status === "uploading" ? k.push(s("span", { class: "krds-spinner", role: "status" }, [s("span", { class: "sr-only" }, "업로드 중")])) : p.downloadUrl ? (e.showDownload && k.push(
+        s(
+          "button",
+          {
+            type: "button",
+            class: "krds-btn medium text",
+            onClick: () => n("download", p)
+          },
+          ["다운로드 ", s("i", { class: "svg-icon ico-down" })]
+        )
+      ), e.showPreviewButton && k.push(
+        s(
+          "button",
+          {
+            type: "button",
+            class: "krds-btn medium text",
+            onClick: () => n("preview", p)
+          },
+          ["바로보기 ", s("i", { class: "svg-icon ico-angle right" })]
+        )
+      )) : p.status === "completed" ? k.push(s("span", { class: "ico-invalid complete" }, [s("em", { class: "sr-only" }, "업로드 완료")])) : e.readonly || k.push(
+        s(
+          "button",
+          {
+            type: "button",
+            class: "krds-btn medium text",
+            disabled: e.disabled || void 0,
+            onClick: () => f(p.id)
+          },
+          ["삭제 ", s("i", { class: "svg-icon ico-delete-fill" })]
+        )
+      ), k;
+    }, R = (p) => {
+      const k = [
+        s(
+          "div",
+          {
+            class: p.downloadUrl ? "file-info m-column" : "file-info"
+          },
+          [s("div", { class: "file-name" }, h(p)), s("div", { class: "btn-wrap" }, T(p))]
+        )
+      ];
+      if (p.status === "error" && p.errorMessage) {
+        const L = p.errorMessage.split(`
+`), P = [];
+        L.forEach((A, W) => {
+          W > 0 && P.push(s("br")), P.push(A);
+        }), k.push(s("p", { class: "file-hint-invalid" }, P));
+      }
+      return s(
+        "li",
+        {
+          key: p.id,
+          class: p.status === "error" ? "is-error" : void 0
+        },
+        k
+      );
+    }, I = (p) => {
+      const k = p.filter((P) => P.status !== "error").length, L = [
+        s("div", { class: "total" }, [s("span", { class: "current" }, `${k}개`), ` / ${e.maxFiles}개`]),
+        s("ul", { class: "upload-list" }, p.map(R))
+      ];
+      return e.showClearAll && !e.readonly && L.push(
+        s("div", { class: "upload-delete-btn" }, [
+          s(
+            "button",
+            {
+              type: "button",
+              class: "krds-btn xsmall tertiary",
+              disabled: e.disabled || void 0,
+              onClick: d
+            },
+            ["전체 파일 삭제", s("i", { class: "svg-icon ico-angle right" })]
+          )
+        ])
+      ), s("div", { class: "file-list" }, L);
+    };
+    return () => {
+      const p = [$()];
+      e.readonly || p.push(F());
+      const k = e.modelValue || [];
+      return k.length > 0 && p.push(I(k)), s(
+        "div",
+        {
+          class: v.value,
+          style: e.style || void 0
+        },
+        p
+      );
+    };
   }
-}), yt = _({
+}), gt = K({
   name: "KrdsBadge",
   props: {
     type: {
@@ -1160,14 +1338,14 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
     }
   },
   emits: ["click"],
-  setup(e, { emit: o, slots: a }) {
-    const l = h(() => {
-      const n = ["krds-badge"];
-      return n.push(`${e.type}-${e.color}`), e.size && n.push(e.size), e.number && n.push("number"), e.class && n.push(e.class), n;
-    }), t = (n) => {
-      o("click", n);
+  setup(e, { emit: n, slots: a }) {
+    const l = b(() => {
+      const o = ["krds-badge"];
+      return o.push(`${e.type}-${e.color}`), e.size && o.push(e.size), e.number && o.push("number"), e.class && o.push(e.class), o;
+    }), t = (o) => {
+      n("click", o);
     };
-    return () => u(
+    return () => s(
       "span",
       {
         type: e.type,
@@ -1180,7 +1358,7 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
       a.default?.()
     );
   }
-}), gt = _({
+}), bt = K({
   name: "KrdsTag",
   props: {
     link: {
@@ -1205,40 +1383,40 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
     }
   },
   emits: ["remove"],
-  setup(e, { emit: o, slots: a }) {
-    const l = h(() => {
-      const i = ["krds-btn-tag"];
-      return e.link && i.push("link"), e.class && i.push(e.class), i;
-    }), t = (i) => {
-      o("remove", i);
-    }, n = () => u(
+  setup(e, { emit: n, slots: a }) {
+    const l = b(() => {
+      const r = ["krds-btn-tag"];
+      return e.link && r.push("link"), e.class && r.push(e.class), r;
+    }), t = (r) => {
+      n("remove", r);
+    }, o = () => s(
       "button",
       {
         type: "button",
         class: "btn-delete",
         onClick: t
       },
-      [u("span", { class: "sr-only" }, "삭제")]
+      [s("span", { class: "sr-only" }, "삭제")]
     );
     return () => {
-      const i = [], v = a.default?.();
-      if (v && i.push(v), e.link || i.push(n()), e.link) {
-        const p = {
+      const r = [], h = a.default?.();
+      if (h && r.push(h), e.link || r.push(o()), e.link) {
+        const u = {
           href: e.href,
           class: l.value
         };
-        return e.target && (p.target = e.target), e.rel && (p.rel = e.rel), u("a", p, i);
+        return e.target && (u.target = e.target), e.rel && (u.rel = e.rel), s("a", u, r);
       }
-      return u(
+      return s(
         "span",
         {
           class: l.value
         },
-        i
+        r
       );
     };
   }
-}), bt = _({
+}), kt = K({
   name: "KrdsTagGroup",
   props: {
     size: {
@@ -1250,20 +1428,20 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
       default: void 0
     }
   },
-  setup(e, { slots: o }) {
-    const a = h(() => {
+  setup(e, { slots: n }) {
+    const a = b(() => {
       const l = ["krds-tag-wrap"];
       return e.size && l.push(e.size), e.class && l.push(e.class), l;
     });
-    return () => u(
+    return () => s(
       "div",
       {
         class: a.value
       },
-      o.default?.()
+      n.default?.()
     );
   }
-}), kt = _({
+}), St = K({
   name: "KrdsMasthead",
   props: {
     class: {
@@ -1272,14 +1450,14 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
     }
   },
   emits: ["click"],
-  setup(e, { emit: o, slots: a }) {
-    const l = h(() => {
-      const n = [""];
-      return e.class && n.push(e.class), n;
-    }), t = (n) => {
-      o("click", n);
+  setup(e, { emit: n, slots: a }) {
+    const l = b(() => {
+      const o = [""];
+      return e.class && o.push(e.class), o;
+    }), t = (o) => {
+      n("click", o);
     };
-    return () => u(
+    return () => s(
       "div",
       {
         id: "krds-masthead",
@@ -1287,25 +1465,25 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
         onClick: t
       },
       [
-        u("div", { class: "toggle-wrap" }, [
-          u("div", { class: "toggle-head" }, [u("div", { class: "inner" }, [u("span", { class: "nuri-txt" }, a.default?.())])])
+        s("div", { class: "toggle-wrap" }, [
+          s("div", { class: "toggle-head" }, [s("div", { class: "inner" }, [s("span", { class: "nuri-txt" }, a.default?.())])])
         ])
       ]
     );
   }
 });
-let St = 0;
-function ce(e = "krds") {
-  return `${e}-${++St}`;
+let wt = 0;
+function ue(e = "krds") {
+  return `${e}-${++wt}`;
 }
-function Il() {
-  const e = Date.now().toString(36).slice(-4), o = Math.random().toString(36).substring(2, 5);
-  return `${e}${o}`;
+function El() {
+  const e = Date.now().toString(36).slice(-4), n = Math.random().toString(36).substring(2, 5);
+  return `${e}${n}`;
 }
-function ue(...e) {
+function fe(...e) {
   return e.filter(Boolean).join(" ");
 }
-const wt = _({
+const Ct = K({
   name: "KrdsToggleSwitch",
   props: {
     modelValue: {
@@ -1347,40 +1525,40 @@ const wt = _({
     }
   },
   emits: ["update:modelValue", "change"],
-  setup(e, { emit: o, attrs: a }) {
-    const l = h(() => e.modelValue), t = h(() => ue("krds-form-toggle-switch", e.size, e.class)), n = (v) => {
+  setup(e, { emit: n, attrs: a }) {
+    const l = b(() => e.modelValue), t = b(() => fe("krds-form-toggle-switch", e.size, e.class)), o = (h) => {
       if (e.disabled)
         return;
-      const y = v.target.checked;
-      o("update:modelValue", y), o("change", y);
-    }, i = h(() => e.id || ce("toggle-switch"));
-    return () => u(
+      const g = h.target.checked;
+      n("update:modelValue", g), n("change", g);
+    }, r = b(() => e.id || ue("toggle-switch"));
+    return () => s(
       "div",
       {
         class: t.value
       },
       [
-        u("input", {
+        s("input", {
           type: "checkbox",
-          id: i.value,
+          id: r.value,
           name: e.name,
           checked: l.value,
           disabled: e.disabled,
-          onChange: n,
+          onChange: o,
           ...a
         }),
-        u(
+        s(
           "label",
           {
-            for: i.value
+            for: r.value
           },
           [
-            u(
+            s(
               "span",
               {
                 class: "switch-toggle"
               },
-              [u("i")]
+              [s("i")]
             ),
             e.label || ""
           ]
@@ -1388,7 +1566,7 @@ const wt = _({
       ]
     );
   }
-}), Ct = _({
+}), xt = K({
   name: "KrdsCheckArea",
   props: {
     class: {
@@ -1400,19 +1578,19 @@ const wt = _({
       default: !1
     }
   },
-  setup(e, { slots: o }) {
+  setup(e, { slots: n }) {
     return () => {
       const a = ["krds-check-area"];
-      return e.column && a.push("chk-column"), e.class && a.push(e.class), u(
+      return e.column && a.push("chk-column"), e.class && a.push(e.class), s(
         "div",
         {
           class: a
         },
-        o.default?.()
+        n.default?.()
       );
     };
   }
-}), xt = _({
+}), $t = K({
   name: "KrdsCheckbox",
   props: {
     modelValue: {
@@ -1443,44 +1621,44 @@ const wt = _({
   },
   emits: ["update:modelValue"],
   slots: Object,
-  setup(e, { emit: o, attrs: a, slots: l }) {
-    const t = h(() => e.modelValue), n = h(() => {
-      const p = e.chip ? "krds-form-chip" : "krds-form-check";
-      return ue(p, e.size, e.class);
-    }), i = (p) => {
+  setup(e, { emit: n, attrs: a, slots: l }) {
+    const t = b(() => e.modelValue), o = b(() => {
+      const u = e.chip ? "krds-form-chip" : "krds-form-check";
+      return fe(u, e.size, e.class);
+    }), r = (u) => {
       if (e.disabled)
         return;
-      const g = p.target.checked;
-      o("update:modelValue", g);
-    }, v = h(() => e.id || ce("checkbox"));
+      const y = u.target.checked;
+      n("update:modelValue", y);
+    }, h = b(() => e.id || ue("checkbox"));
     return () => {
-      const p = [
-        u("input", {
+      const u = [
+        s("input", {
           type: "checkbox",
-          id: v.value,
+          id: h.value,
           checked: t.value,
           disabled: e.disabled,
-          onChange: i,
+          onChange: r,
           ...a
         }),
-        u(
+        s(
           "label",
           {
-            for: v.value
+            for: h.value
           },
           l.default?.()
         )
       ];
-      return l.description && !e.chip && p.push(u("div", { class: "krds-form-check-cnt" }, u("p", { class: "krds-form-check-p" }, l.description()))), u(
+      return l.description && !e.chip && u.push(s("div", { class: "krds-form-check-cnt" }, s("p", { class: "krds-form-check-p" }, l.description()))), s(
         "div",
         {
-          class: n.value
+          class: o.value
         },
-        p
+        u
       );
     };
   }
-}), $t = _({
+}), Bt = K({
   name: "KrdsRadio",
   props: {
     modelValue: {
@@ -1519,45 +1697,45 @@ const wt = _({
   },
   emits: ["update:modelValue"],
   slots: Object,
-  setup(e, { emit: o, attrs: a, slots: l }) {
-    const t = h(() => e.modelValue === e.value), n = h(() => {
-      const y = e.chip ? "krds-form-chip" : "krds-form-check";
-      return ue(y, e.size, e.class);
-    }), i = (y) => {
+  setup(e, { emit: n, attrs: a, slots: l }) {
+    const t = b(() => e.modelValue === e.value), o = b(() => {
+      const g = e.chip ? "krds-form-chip" : "krds-form-check";
+      return fe(g, e.size, e.class);
+    }), r = (g) => {
       if (e.disabled)
         return;
-      y.target.checked && o("update:modelValue", e.value);
-    }, v = h(() => e.id || ce("radio")), p = h(() => e.name);
+      g.target.checked && n("update:modelValue", e.value);
+    }, h = b(() => e.id || ue("radio")), u = b(() => e.name);
     return () => {
-      const y = [
-        u("input", {
+      const g = [
+        s("input", {
           type: "radio",
-          id: v.value,
-          name: p.value,
+          id: h.value,
+          name: u.value,
           value: String(e.value),
           checked: t.value,
           disabled: e.disabled,
-          onChange: i,
+          onChange: r,
           ...a
         }),
-        u(
+        s(
           "label",
           {
-            for: v.value
+            for: h.value
           },
           l.default?.()
         )
       ];
-      return l.description && !e.chip && y.push(u("div", { class: "krds-form-check-cnt" }, u("p", { class: "krds-form-check-p" }, l.description()))), u(
+      return l.description && !e.chip && g.push(s("div", { class: "krds-form-check-cnt" }, s("p", { class: "krds-form-check-p" }, l.description()))), s(
         "div",
         {
-          class: n.value
+          class: o.value
         },
-        y
+        g
       );
     };
   }
-}), _t = _({
+}), Kt = K({
   name: "KrdsStepIndicator",
   props: {
     modelValue: {
@@ -1570,30 +1748,30 @@ const wt = _({
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { slots: o }) {
-    const a = h(() => {
-      const v = ["krds-step-wrap"];
-      return e.class && v.push(e.class), v;
-    }), l = (v) => {
-      const p = e.modelValue || 0;
-      return v < p ? "done" : v === p ? "active" : "pending";
-    }, t = B(0), n = () => {
+  setup(e, { slots: n }) {
+    const a = b(() => {
+      const h = ["krds-step-wrap"];
+      return e.class && h.push(e.class), h;
+    }), l = (h) => {
+      const u = e.modelValue || 0;
+      return h < u ? "done" : h === u ? "active" : "pending";
+    }, t = D(0), o = () => {
       t.value = 0;
-    }, i = () => t.value++;
-    return Ve("stepIndicator", {
-      activeStep: h(() => e.modelValue || 0),
+    }, r = () => t.value++;
+    return ze("stepIndicator", {
+      activeStep: b(() => e.modelValue || 0),
       getStepStatus: l,
-      getNextStepIndex: i,
-      resetStepIndex: n
-    }), () => (n(), u(
+      getNextStepIndex: r,
+      resetStepIndex: o
+    }), () => (o(), s(
       "ol",
       {
         class: a.value
       },
-      o.default?.()
+      n.default?.()
     ));
   }
-}), Bt = _({
+}), _t = K({
   name: "KrdsStep",
   props: {
     step: {
@@ -1614,29 +1792,29 @@ const wt = _({
     }
   },
   emits: ["click"],
-  setup(e, { emit: o, slots: a }) {
-    const l = Ie("stepIndicator"), t = l ? l.getNextStepIndex() : -1, n = h(() => e.status ? e.status : l && t >= 0 ? l.getStepStatus(t) : "pending"), i = h(() => {
-      const p = [n.value];
-      return e.class && p.push(e.class), p;
-    }), v = (p) => {
-      o("click", p, e.step);
+  setup(e, { emit: n, slots: a }) {
+    const l = Ve("stepIndicator"), t = l ? l.getNextStepIndex() : -1, o = b(() => e.status ? e.status : l && t >= 0 ? l.getStepStatus(t) : "pending"), r = b(() => {
+      const u = [o.value];
+      return e.class && u.push(e.class), u;
+    }), h = (u) => {
+      n("click", u, e.step);
     };
     return () => {
-      const p = n.value === "active";
-      return u(
+      const u = o.value === "active";
+      return s(
         "li",
         {
-          class: i.value,
-          onClick: v
+          class: r.value,
+          onClick: h
         },
         [
-          u("span", [
+          s("span", [
             // 현재 단계 표시 (활성 상태일 때만)
-            p && u("em", { class: "sr-only" }, "현재단계"),
+            u && s("em", { class: "sr-only" }, "현재단계"),
             // 단계 번호
-            u("i", { class: "step" }, e.step),
+            s("i", { class: "step" }, e.step),
             // 단계 제목
-            u("span", { class: "step-tit" }, e.title),
+            s("span", { class: "step-tit" }, e.title),
             // 슬롯 내용 (추가 콘텐츠가 있는 경우)
             a.default?.()
           ])
@@ -1644,7 +1822,7 @@ const wt = _({
       );
     };
   }
-}), Kt = _({
+}), Dt = K({
   name: "KrdsSkipLink",
   props: {
     /**
@@ -1671,25 +1849,25 @@ const wt = _({
       default: "krds-skip-link"
     }
   },
-  setup(e, { slots: o }) {
-    return () => u(
+  setup(e, { slots: n }) {
+    return () => s(
       "div",
       {
         id: e.id,
         class: e.class
       },
       [
-        u(
+        s(
           "a",
           {
             href: e.href
           },
-          o.default?.()
+          n.default?.()
         )
       ]
     );
   }
-}), Dt = ["id", "aria-label"], Vt = { class: "breadcrumb" }, It = ["href", "aria-current", "onClick"], zt = { key: 0 }, Et = /* @__PURE__ */ _({
+}), zt = ["id", "aria-label"], Vt = { class: "breadcrumb" }, It = ["href", "aria-current", "onClick"], Et = { key: 0 }, Lt = /* @__PURE__ */ K({
   __name: "KrdsBreadcrumb",
   props: {
     items: {},
@@ -1698,33 +1876,33 @@ const wt = _({
     showHomeIcon: { type: Boolean, default: !0 }
   },
   emits: ["item-click"],
-  setup(e, { emit: o }) {
-    const a = e, l = o, t = (i) => i === a.items.length - 1, n = (i, v) => {
-      i.onClick && i.onClick(v), l("item-click", i, v);
+  setup(e, { emit: n }) {
+    const a = e, l = n, t = (r) => r === a.items.length - 1, o = (r, h) => {
+      r.onClick && r.onClick(h), l("item-click", r, h);
     };
-    return (i, v) => (k(), S("nav", {
+    return (r, h) => (w(), x("nav", {
       id: e.id,
       class: "krds-breadcrumb-wrap",
       "aria-label": e.ariaLabel
     }, [
-      r("ol", Vt, [
-        (k(!0), S(F, null, N(e.items, (p, y) => (k(), S("li", {
-          key: `breadcrumb-${y}`,
-          class: E({ home: y === 0 && e.showHomeIcon })
+      c("ol", Vt, [
+        (w(!0), x(j, null, G(e.items, (u, g) => (w(), x("li", {
+          key: `breadcrumb-${g}`,
+          class: M({ home: g === 0 && e.showHomeIcon })
         }, [
-          r("a", {
-            href: p.href || "#",
+          c("a", {
+            href: u.href || "#",
             class: "txt",
-            "aria-current": t(y) ? "page" : void 0,
-            onClick: (g) => n(p, g)
+            "aria-current": t(g) ? "page" : void 0,
+            onClick: (y) => o(u, y)
           }, [
-            y === 0 && e.showHomeIcon ? Y("", !0) : (k(), S("span", zt, V(p.text), 1))
+            g === 0 && e.showHomeIcon ? X("", !0) : (w(), x("span", Et, E(u.text), 1))
           ], 8, It)
         ], 2))), 128))
       ])
-    ], 8, Dt));
+    ], 8, zt));
   }
-}), Lt = _({
+}), Mt = K({
   name: "KrdsInPageNavigation",
   props: {
     title: {
@@ -1758,107 +1936,107 @@ const wt = _({
   },
   emits: ["itemClick"],
   slots: Object,
-  setup(e, { emit: o, slots: a }) {
-    const l = B(""), t = B(/* @__PURE__ */ new Map()), n = h(() => {
+  setup(e, { emit: n, slots: a }) {
+    const l = D(""), t = D(/* @__PURE__ */ new Map()), o = b(() => {
       const m = ["krds-in-page-navigation-type"];
       return e.class && m.push(e.class), m;
-    }), i = () => {
-      const m = e.headerTopSelector, s = e.headerInnerSelector, c = document.querySelector(m)?.clientHeight || 0, d = document.querySelector(s)?.clientHeight || 0;
-      return c + d;
-    }, v = (m, s) => {
-      if (o("itemClick", m, s), m.href.startsWith("#")) {
-        s.preventDefault();
-        const c = document.querySelector(m.href);
-        if (c) {
-          const d = i();
+    }), r = () => {
+      const m = e.headerTopSelector, i = e.headerInnerSelector, f = document.querySelector(m)?.clientHeight || 0, d = document.querySelector(i)?.clientHeight || 0;
+      return f + d;
+    }, h = (m, i) => {
+      if (n("itemClick", m, i), m.href.startsWith("#")) {
+        i.preventDefault();
+        const f = document.querySelector(m.href);
+        if (f) {
+          const d = r();
           if (window.scrollTo({
             left: 0,
-            top: c.getBoundingClientRect().top + window.scrollY - d,
+            top: f.getBoundingClientRect().top + window.scrollY - d,
             behavior: "smooth"
-          }), l.value = m.href, s instanceof KeyboardEvent) {
-            const f = c.querySelector(".sec-tit, h1, h2, h3, h4, h5, h6");
-            f && f instanceof HTMLElement && (f.setAttribute("tabindex", "-1"), f.focus({ preventScroll: !0 }));
+          }), l.value = m.href, i instanceof KeyboardEvent) {
+            const v = f.querySelector(".sec-tit, h1, h2, h3, h4, h5, h6");
+            v && v instanceof HTMLElement && (v.setAttribute("tabindex", "-1"), v.focus({ preventScroll: !0 }));
           }
         }
       }
-    }, p = () => {
+    }, u = () => {
       t.value.clear(), e.items && e.items.filter((m) => m.href.startsWith("#")).forEach((m) => {
-        const s = document.querySelector(m.href);
-        s && t.value.set(m.href, s);
+        const i = document.querySelector(m.href);
+        i && t.value.set(m.href, i);
       });
-    }, y = () => {
+    }, g = () => {
       if (!e.autoActive || !e.items || t.value.size === 0) return;
-      const m = window.innerHeight, s = Math.ceil(m / 5), c = window.scrollY + m, d = document.body.scrollHeight, f = e.items.filter((z) => z.href.startsWith("#") && t.value.has(z.href)).map((z) => ({
-        href: z.href,
-        element: t.value.get(z.href),
-        item: z
+      const m = window.innerHeight, i = Math.ceil(m / 5), f = window.scrollY + m, d = document.body.scrollHeight, v = e.items.filter((I) => I.href.startsWith("#") && t.value.has(I.href)).map((I) => ({
+        href: I.href,
+        element: t.value.get(I.href),
+        item: I
       }));
-      if (f.length === 0) return;
-      const x = f[0], R = f[f.length - 1], L = x.element.offsetTop;
-      let M = "";
-      if (c >= d)
-        M = R.href;
-      else if (window.scrollY <= L)
-        M = x.href;
+      if (v.length === 0) return;
+      const $ = v[0], F = v[v.length - 1], T = $.element.offsetTop;
+      let R = "";
+      if (f >= d)
+        R = F.href;
+      else if (window.scrollY <= T)
+        R = $.href;
       else
-        for (const z of f) {
-          const H = z.element.offsetHeight, I = z.element.offsetTop - s;
-          if (window.scrollY > I && window.scrollY <= I + H) {
-            M = z.href;
+        for (const I of v) {
+          const p = I.element.offsetHeight, k = I.element.offsetTop - i;
+          if (window.scrollY > k && window.scrollY <= k + p) {
+            R = I.href;
             break;
           }
         }
-      M && M !== l.value && (l.value = M);
-    }, g = () => {
+      R && R !== l.value && (l.value = R);
+    }, y = () => {
       if (!e.items) return;
-      const m = e.items.find((s) => s.active);
+      const m = e.items.find((i) => i.active);
       m ? l.value = m.href : e.items.length > 0 && (l.value = e.items[0].href);
     };
-    le(() => {
-      if (g(), e.autoActive) {
-        p(), y(), window.addEventListener("scroll", y, { passive: !0 });
+    ae(() => {
+      if (y(), e.autoActive) {
+        u(), g(), window.addEventListener("scroll", g, { passive: !0 });
         const m = new MutationObserver(() => {
-          p();
+          u();
         });
         m.observe(document.body, {
           childList: !0,
           subtree: !0
-        }), J(() => {
+        }), Z(() => {
           m.disconnect();
         });
       }
-    }), J(() => {
-      e.autoActive && (window.removeEventListener("scroll", y), t.value.clear());
+    }), Z(() => {
+      e.autoActive && (window.removeEventListener("scroll", g), t.value.clear());
     });
-    const w = () => !e.caption && !e.title ? null : u("div", { class: "in-page-navigation-header" }, [
-      e.caption && u("p", { class: "quick-caption" }, e.caption),
-      e.title && u("p", { class: "quick-title" }, e.title)
-    ]), b = () => {
+    const C = () => !e.caption && !e.title ? null : s("div", { class: "in-page-navigation-header" }, [
+      e.caption && s("p", { class: "quick-caption" }, e.caption),
+      e.title && s("p", { class: "quick-title" }, e.title)
+    ]), S = () => {
       if (!e.items) return null;
-      const m = e.items.map((s) => {
-        const c = l.value === s.href || !e.autoActive && s.active;
-        return u("li", { key: s.href }, [
-          u(
+      const m = e.items.map((i) => {
+        const f = l.value === i.href || !e.autoActive && i.active;
+        return s("li", { key: i.href }, [
+          s(
             "a",
             {
-              href: s.href,
-              class: c ? "active" : "",
-              onClick: (d) => v(s, d),
+              href: i.href,
+              class: f ? "active" : "",
+              onClick: (d) => h(i, d),
               onKeydown: (d) => {
-                (d.key === "Enter" || d.key === " ") && (d.preventDefault(), v(s, d));
+                (d.key === "Enter" || d.key === " ") && (d.preventDefault(), h(i, d));
               }
             },
-            s.text
+            i.text
           )
         ]);
       });
-      return u("nav", { class: "in-page-navigation-list" }, [u("ul", {}, m)]);
-    }, D = () => a.action ? u("div", { class: "in-page-navigation-action" }, [a.action()]) : null;
-    return () => u("div", { class: n.value }, [
-      u("div", { class: "krds-in-page-navigation-area" }, [w(), b(), D()].filter(Boolean))
+      return s("nav", { class: "in-page-navigation-list" }, [s("ul", {}, m)]);
+    }, V = () => a.action ? s("div", { class: "in-page-navigation-action" }, [a.action()]) : null;
+    return () => s("div", { class: o.value }, [
+      s("div", { class: "krds-in-page-navigation-area" }, [C(), S(), V()].filter(Boolean))
     ]);
   }
-}), Mt = ["id"], Rt = { class: "page-links" }, Tt = ["href", "aria-current", "onClick"], At = { key: 0 }, Pt = ["aria-label"], Ft = /* @__PURE__ */ _({
+}), Tt = ["id"], Rt = { class: "page-links" }, At = ["href", "aria-current", "onClick"], Ft = { key: 0 }, Pt = ["aria-label"], Ot = /* @__PURE__ */ K({
   __name: "KrdsPagination",
   props: {
     modelValue: { default: 1 },
@@ -1869,184 +2047,184 @@ const wt = _({
     pageRange: { default: 8 }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: o }) {
-    const a = e, l = o, t = h(() => Math.max(1, a.min)), n = h(() => a.modelValue ?? t.value), i = h(() => n.value <= t.value), v = h(() => n.value >= a.max), p = h(() => {
-      if (!i.value)
+  setup(e, { emit: n }) {
+    const a = e, l = n, t = b(() => Math.max(1, a.min)), o = b(() => a.modelValue ?? t.value), r = b(() => o.value <= t.value), h = b(() => o.value >= a.max), u = b(() => {
+      if (!r.value)
         return "#";
-    }), y = h(() => {
-      if (!v.value)
+    }), g = b(() => {
+      if (!h.value)
         return "#";
-    }), g = h(() => {
-      const { pageRange: m, max: s } = a, c = 1, d = [];
-      if (s <= m + 2 * c)
-        for (let f = t.value; f <= s; f++)
+    }), y = b(() => {
+      const { pageRange: m, max: i } = a, f = 1, d = [];
+      if (i <= m + 2 * f)
+        for (let v = t.value; v <= i; v++)
           d.push({
             type: "page",
-            key: `page-${f}`,
-            page: f,
+            key: `page-${v}`,
+            page: v,
             href: "#"
           });
       else {
-        const f = Math.min(c, s), x = Math.max(s - c + 1, 1), R = Math.max(t.value, n.value - Math.floor(m / 2)), L = Math.min(s, R + m - 1), M = Math.max(t.value, L - m + 1);
-        for (let I = t.value; I <= f; I++)
+        const v = Math.min(f, i), $ = Math.max(i - f + 1, 1), F = Math.max(t.value, o.value - Math.floor(m / 2)), T = Math.min(i, F + m - 1), R = Math.max(t.value, T - m + 1);
+        for (let k = t.value; k <= v; k++)
           d.push({
             type: "page",
-            key: `page-${I}`,
-            page: I,
+            key: `page-${k}`,
+            page: k,
             href: "#"
           });
-        M > f + 1 && d.push({
+        R > v + 1 && d.push({
           type: "ellipsis",
           key: "ellipsis-left",
           ariaLabel: "페이지 생략"
         });
-        const z = Math.max(M, f + 1), H = Math.min(L, x - 1);
-        for (let I = z; I <= H; I++)
+        const I = Math.max(R, v + 1), p = Math.min(T, $ - 1);
+        for (let k = I; k <= p; k++)
           d.push({
             type: "page",
-            key: `page-${I}`,
-            page: I,
+            key: `page-${k}`,
+            page: k,
             href: "#"
           });
-        L < x - 1 && d.push({
+        T < $ - 1 && d.push({
           type: "ellipsis",
           key: "ellipsis-right",
           ariaLabel: "페이지 생략"
         });
-        for (let I = x; I <= s; I++)
+        for (let k = $; k <= i; k++)
           d.push({
             type: "page",
-            key: `page-${I}`,
-            page: I,
+            key: `page-${k}`,
+            page: k,
             href: "#"
           });
       }
       return d;
-    }), w = (m, s) => {
-      if (m === n.value) {
-        s.preventDefault();
+    }), C = (m, i) => {
+      if (m === o.value) {
+        i.preventDefault();
         return;
       }
       l("update:modelValue", m);
-    }, b = (m) => {
-      if (i.value) {
+    }, S = (m) => {
+      if (r.value) {
         m.preventDefault();
         return;
       }
-      const s = n.value - 1;
-      l("update:modelValue", s);
-    }, D = (m) => {
-      if (v.value) {
+      const i = o.value - 1;
+      l("update:modelValue", i);
+    }, V = (m) => {
+      if (h.value) {
         m.preventDefault();
         return;
       }
-      const s = n.value + 1;
-      l("update:modelValue", s);
+      const i = o.value + 1;
+      l("update:modelValue", i);
     };
-    return (m, s) => {
-      const c = ze("sr-only");
-      return k(), S("div", {
+    return (m, i) => {
+      const f = Ie("sr-only");
+      return w(), x("div", {
         id: e.id,
         class: "krds-pagination"
       }, [
-        (k(), ie(ye(i.value ? "span" : "a"), {
-          href: i.value ? void 0 : p.value,
-          class: E(["page-navi", "prev", { disabled: i.value }]),
-          onClick: b
+        (w(), ie(ge(r.value ? "span" : "a"), {
+          href: r.value ? void 0 : u.value,
+          class: M(["page-navi", "prev", { disabled: r.value }]),
+          onClick: S
         }, {
-          default: de(() => [...s[0] || (s[0] = [
-            P(" 이전 ", -1)
+          default: re(() => [...i[0] || (i[0] = [
+            H(" 이전 ", -1)
           ])]),
           _: 1
         }, 8, ["href", "class"])),
-        r("div", Rt, [
-          (k(!0), S(F, null, N(g.value, (d) => (k(), S(F, {
+        c("div", Rt, [
+          (w(!0), x(j, null, G(y.value, (d) => (w(), x(j, {
             key: d.key
           }, [
-            d.type === "page" ? (k(), S("a", {
+            d.type === "page" ? (w(), x("a", {
               key: 0,
               href: d.href || "#",
-              class: E(["page-link", { active: d.page === n.value }]),
-              "aria-current": d.page === n.value ? "page" : void 0,
-              onClick: (f) => w(d.page, f)
+              class: M(["page-link", { active: d.page === o.value }]),
+              "aria-current": d.page === o.value ? "page" : void 0,
+              onClick: (v) => C(d.page, v)
             }, [
-              d.page === n.value ? Q((k(), S("span", At, [...s[1] || (s[1] = [
-                P("현재페이지", -1)
+              d.page === o.value ? ee((w(), x("span", Ft, [...i[1] || (i[1] = [
+                H("현재페이지", -1)
               ])])), [
-                [c]
-              ]) : Y("", !0),
-              P(" " + V(d.page), 1)
-            ], 10, Tt)) : d.type === "ellipsis" ? (k(), S("span", {
+                [f]
+              ]) : X("", !0),
+              H(" " + E(d.page), 1)
+            ], 10, At)) : d.type === "ellipsis" ? (w(), x("span", {
               key: 1,
               class: "page-link link-dot",
               "aria-label": d.ariaLabel
-            }, null, 8, Pt)) : Y("", !0)
+            }, null, 8, Pt)) : X("", !0)
           ], 64))), 128))
         ]),
-        (k(), ie(ye(v.value ? "span" : "a"), {
-          href: v.value ? void 0 : y.value,
-          class: E(["page-navi", "next", { disabled: v.value }]),
-          onClick: D
+        (w(), ie(ge(h.value ? "span" : "a"), {
+          href: h.value ? void 0 : g.value,
+          class: M(["page-navi", "next", { disabled: h.value }]),
+          onClick: V
         }, {
-          default: de(() => [...s[2] || (s[2] = [
-            P(" 다음 ", -1)
+          default: re(() => [...i[2] || (i[2] = [
+            H(" 다음 ", -1)
           ])]),
           _: 1
         }, 8, ["href", "class"]))
-      ], 8, Mt);
+      ], 8, Tt);
     };
   }
-}), Ot = { class: "inner help-panel-flexible" }, qt = { class: "help-panel-wrap" }, Nt = { class: "help-conts-area" }, Ht = /* @__PURE__ */ _({
+}), qt = { class: "inner help-panel-flexible" }, Nt = { class: "help-panel-wrap" }, Ht = { class: "help-conts-area" }, Wt = /* @__PURE__ */ K({
   __name: "KrdsPanel",
   props: {
     modelValue: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: o }) {
-    const a = e, l = o, t = h({
+  setup(e, { emit: n }) {
+    const a = e, l = n, t = b({
       get: () => a.modelValue,
-      set: (v) => l("update:modelValue", v)
-    }), n = () => {
+      set: (h) => l("update:modelValue", h)
+    }), o = () => {
       t.value = !0;
-    }, i = () => {
+    }, r = () => {
       t.value = !1;
     };
-    return (v, p) => (k(), S("div", Ot, [
-      r("button", {
+    return (h, u) => (w(), x("div", qt, [
+      c("button", {
         type: "button",
         class: "krds-btn small tertiary btn-help-panel expand btn-help-exec",
-        onClick: n
-      }, [...p[0] || (p[0] = [
-        r("i", { class: "svg-icon ico-fold" }, null, -1),
-        P(" 도움말 ", -1)
+        onClick: o
+      }, [...u[0] || (u[0] = [
+        c("i", { class: "svg-icon ico-fold" }, null, -1),
+        H(" 도움말 ", -1)
       ])]),
-      r("div", {
-        class: E(["krds-help-panel", { expand: t.value }])
+      c("div", {
+        class: M(["krds-help-panel", { expand: t.value }])
       }, [
-        r("div", qt, [
-          r("div", Nt, [
-            G(v.$slots, "default"),
-            r("button", {
+        c("div", Nt, [
+          c("div", Ht, [
+            J(h.$slots, "default"),
+            c("button", {
               type: "button",
               class: "krds-btn small tertiary btn-help-panel fold",
-              onClick: i
-            }, [...p[1] || (p[1] = [
-              r("span", { class: "sr-only" }, "도움말", -1),
-              P(" 접어두기 ", -1),
-              r("i", { class: "svg-icon ico-angle right" }, null, -1)
+              onClick: r
+            }, [...u[1] || (u[1] = [
+              c("span", { class: "sr-only" }, "도움말", -1),
+              H(" 접어두기 ", -1),
+              c("i", { class: "svg-icon ico-angle right" }, null, -1)
             ])])
           ])
         ])
       ], 2)
     ]));
   }
-}), jt = { class: "tooltip-action" }, Wt = {
+}), jt = { class: "tooltip-action" }, Yt = {
   key: 0,
   class: "svg-icon ico-help"
-}, Yt = {
+}, Gt = {
   key: 1,
   class: "svg-icon ico-tooltip"
-}, Gt = { class: "tooltip-title" }, Ut = { class: "tooltip-contents" }, Xt = /* @__PURE__ */ _({
+}, Ut = { class: "tooltip-title" }, Xt = { class: "tooltip-contents" }, Jt = /* @__PURE__ */ K({
   __name: "KrdsContextualHelp",
   props: {
     tooltipTitle: { default: "도움말 제목" },
@@ -2054,84 +2232,84 @@ const wt = _({
     position: { default: "top left" }
   },
   setup(e) {
-    const o = e, a = B(), l = B(), t = B(), n = B(), i = B(!1), v = () => {
-      const s = i.value;
-      g(), s || p();
-    }, p = () => {
+    const n = e, a = D(), l = D(), t = D(), o = D(), r = D(!1), h = () => {
+      const i = r.value;
+      y(), i || u();
+    }, u = () => {
       if (!t.value || !l.value) return;
-      i.value = !0, t.value.style.display = "block", l.value.setAttribute("aria-expanded", "true"), t.value.querySelector('a, button, [tabindex="0"], input, textarea, select')?.focus(), w();
-    }, y = () => {
-      !t.value || !l.value || (i.value = !1, t.value.style.display = "none", l.value.setAttribute("aria-expanded", "false"));
+      r.value = !0, t.value.style.display = "block", l.value.setAttribute("aria-expanded", "true"), t.value.querySelector('a, button, [tabindex="0"], input, textarea, select')?.focus(), C();
     }, g = () => {
-      const s = document.querySelectorAll(".krds-contextual-help .tooltip-popover"), c = document.querySelectorAll(".krds-contextual-help .tooltip-btn");
-      s.forEach((d) => {
+      !t.value || !l.value || (r.value = !1, t.value.style.display = "none", l.value.setAttribute("aria-expanded", "false"));
+    }, y = () => {
+      const i = document.querySelectorAll(".krds-contextual-help .tooltip-popover"), f = document.querySelectorAll(".krds-contextual-help .tooltip-btn");
+      i.forEach((d) => {
         d.style.display = "none";
-      }), c.forEach((d) => {
+      }), f.forEach((d) => {
         d.setAttribute("aria-expanded", "false");
-      }), i.value = !1;
-    }, w = () => {
+      }), r.value = !1;
+    }, C = () => {
       if (!a.value || !t.value) return;
-      const s = window.innerWidth <= 768, c = a.value.querySelector(".tooltip-action");
-      if (s) {
-        const f = getComputedStyle(document.querySelector(":root")).getPropertyValue("--krds-contents-padding-x").trim().split("px")[0], R = c.getBoundingClientRect().left - parseInt(f), L = document.body.clientWidth - parseInt(f) * 2;
-        t.value.style.left = `-${R}px`, t.value.style.width = `${L}px`;
+      const i = window.innerWidth <= 768, f = a.value.querySelector(".tooltip-action");
+      if (i) {
+        const v = getComputedStyle(document.querySelector(":root")).getPropertyValue("--krds-contents-padding-x").trim().split("px")[0], F = f.getBoundingClientRect().left - parseInt(v), T = document.body.clientWidth - parseInt(v) * 2;
+        t.value.style.left = `-${F}px`, t.value.style.width = `${T}px`;
       } else
         t.value.style.left = "", t.value.style.right = "", t.value.style.width = "360px";
-    }, b = (s) => {
-      (s.key === "Escape" || s.key === "Esc") && g();
-    }, D = (s) => {
-      s.target.closest(".tooltip-action") || g();
+    }, S = (i) => {
+      (i.key === "Escape" || i.key === "Esc") && y();
+    }, V = (i) => {
+      i.target.closest(".tooltip-action") || y();
     }, m = () => {
-      i.value && w();
+      r.value && C();
     };
-    return le(() => {
-      a.value && (l.value && l.value.setAttribute("aria-expanded", "false"), t.value && t.value.setAttribute("role", "tooltip"), document.addEventListener("keydown", b), document.addEventListener("click", D), window.addEventListener("resize", m));
-    }), J(() => {
-      document.removeEventListener("keydown", b), document.removeEventListener("click", D), window.removeEventListener("resize", m);
-    }), (s, c) => (k(), S("div", {
+    return ae(() => {
+      a.value && (l.value && l.value.setAttribute("aria-expanded", "false"), t.value && t.value.setAttribute("role", "tooltip"), document.addEventListener("keydown", S), document.addEventListener("click", V), window.addEventListener("resize", m));
+    }), Z(() => {
+      document.removeEventListener("keydown", S), document.removeEventListener("click", V), window.removeEventListener("resize", m);
+    }), (i, f) => (w(), x("div", {
       ref_key: "containerRef",
       ref: a,
-      class: E(["krds-contextual-help", o.position])
+      class: M(["krds-contextual-help", n.position])
     }, [
-      r("div", jt, [
-        r("button", {
+      c("div", jt, [
+        c("button", {
           ref_key: "tooltipBtnRef",
           ref: l,
           type: "button",
           class: "krds-btn medium icon tooltip-btn",
-          onClick: v
+          onClick: h
         }, [
-          c[0] || (c[0] = r("span", { class: "sr-only" }, "도움말", -1)),
-          o.helpIcon ? (k(), S("i", Wt)) : (k(), S("i", Yt))
+          f[0] || (f[0] = c("span", { class: "sr-only" }, "도움말", -1)),
+          n.helpIcon ? (w(), x("i", Yt)) : (w(), x("i", Gt))
         ], 512),
-        r("div", {
+        c("div", {
           ref_key: "tooltipPopoverRef",
           ref: t,
           class: "tooltip-popover",
           role: "tooltip"
         }, [
-          r("h4", Gt, V(o.tooltipTitle), 1),
-          r("div", Ut, [
-            G(s.$slots, "default")
+          c("h4", Ut, E(n.tooltipTitle), 1),
+          c("div", Xt, [
+            J(i.$slots, "default")
           ]),
-          r("button", {
+          c("button", {
             ref_key: "closeBtnRef",
-            ref: n,
+            ref: o,
             type: "button",
             class: "krds-btn xsmall icon tooltip-close",
-            onClick: y
-          }, [...c[1] || (c[1] = [
-            r("span", { class: "sr-only" }, "닫기", -1),
-            r("i", { class: "svg-icon ico-modal-close" }, null, -1)
+            onClick: g
+          }, [...f[1] || (f[1] = [
+            c("span", { class: "sr-only" }, "닫기", -1),
+            c("i", { class: "svg-icon ico-modal-close" }, null, -1)
           ])], 512)
         ], 512)
       ])
     ], 2));
   }
-}), Jt = {
+}), Qt = {
   key: 0,
   class: "coach-balloon"
-}, Qt = { class: "coach-tit" }, Zt = { class: "desc" }, el = { class: "coach-controls" }, tl = { class: "num" }, ll = { class: "btn-wrap" }, al = /* @__PURE__ */ _({
+}, Zt = { class: "coach-tit" }, el = { class: "desc" }, tl = { class: "coach-controls" }, ll = { class: "num" }, al = { class: "btn-wrap" }, nl = /* @__PURE__ */ K({
   __name: "KrdsCoachMark",
   props: {
     coachMarkClass: { default: "" },
@@ -2143,57 +2321,57 @@ const wt = _({
     id: {}
   },
   emits: ["update:modelValue", "close"],
-  setup(e, { emit: o }) {
-    const a = e, l = h(() => {
-      const p = a.activeStep - 1;
-      return a.stepsData && p >= 0 && p < a.stepsData.length ? a.stepsData[p] : null;
-    }), t = o, n = () => {
+  setup(e, { emit: n }) {
+    const a = e, l = b(() => {
+      const u = a.activeStep - 1;
+      return a.stepsData && u >= 0 && u < a.stepsData.length ? a.stepsData[u] : null;
+    }), t = n, o = () => {
       a.activeStep > 1 && t("update:modelValue", a.activeStep - 1);
-    }, i = () => {
+    }, r = () => {
       a.activeStep < a.stepsData.length && t("update:modelValue", a.activeStep + 1);
-    }, v = () => {
+    }, h = () => {
       t("close");
     };
-    return (p, y) => (k(), S("div", {
-      class: E(["krds-coach-mark", e.coachMarkClass]),
-      style: ne(e.style)
+    return (u, g) => (w(), x("div", {
+      class: M(["krds-coach-mark", e.coachMarkClass]),
+      style: se(e.style)
     }, [
-      e.modelValue === e.activeStep && l.value ? (k(), S("div", Jt, [
-        y[2] || (y[2] = r("h5", { class: "sr-only" }, "따라하기 가이드", -1)),
-        r("h6", Qt, V(e.activeStep) + "단계 : " + V(l.value.title), 1),
-        r("p", Zt, V(l.value.description), 1),
-        r("div", el, [
-          r("div", tl, [
-            y[0] || (y[0] = r("span", { class: "sr-only" }, "현재 단계", -1)),
-            r("strong", null, V(e.activeStep), 1),
-            y[1] || (y[1] = r("span", { class: "sr-only" }, "총 단계", -1)),
-            r("span", null, V(e.stepsData.length), 1)
+      e.modelValue === e.activeStep && l.value ? (w(), x("div", Qt, [
+        g[2] || (g[2] = c("h5", { class: "sr-only" }, "따라하기 가이드", -1)),
+        c("h6", Zt, E(e.activeStep) + "단계 : " + E(l.value.title), 1),
+        c("p", el, E(l.value.description), 1),
+        c("div", tl, [
+          c("div", ll, [
+            g[0] || (g[0] = c("span", { class: "sr-only" }, "현재 단계", -1)),
+            c("strong", null, E(e.activeStep), 1),
+            g[1] || (g[1] = c("span", { class: "sr-only" }, "총 단계", -1)),
+            c("span", null, E(e.stepsData.length), 1)
           ]),
-          r("div", ll, [
-            r("button", {
+          c("div", al, [
+            c("button", {
               type: "button",
               class: "krds-btn small text",
-              onClick: v
+              onClick: h
             }, "그만보기"),
-            e.activeStep !== 1 ? (k(), S("button", {
+            e.activeStep !== 1 ? (w(), x("button", {
               key: 0,
               type: "button",
               class: "krds-btn small text",
-              onClick: n
-            }, "이전으로")) : Y("", !0),
-            e.activeStep !== e.stepsData.length ? (k(), S("button", {
+              onClick: o
+            }, "이전으로")) : X("", !0),
+            e.activeStep !== e.stepsData.length ? (w(), x("button", {
               key: 1,
               type: "button",
               class: "krds-btn small tertiary",
-              onClick: i
-            }, "다음으로")) : Y("", !0)
+              onClick: r
+            }, "다음으로")) : X("", !0)
           ])
         ])
-      ])) : Y("", !0),
-      G(p.$slots, "coach-mark-content")
+      ])) : X("", !0),
+      J(u.$slots, "coach-mark-content")
     ], 6));
   }
-}), nl = ["disabled", "aria-labelledby"], sl = ["id", "aria-hidden"], ol = { class: "sr-only" }, il = /* @__PURE__ */ _({
+}), sl = ["disabled", "aria-labelledby"], ol = ["id", "aria-hidden"], il = { class: "sr-only" }, rl = /* @__PURE__ */ K({
   __name: "KrdsTooltip",
   props: {
     type: { default: "default" },
@@ -2206,83 +2384,83 @@ const wt = _({
     id: {}
   },
   setup(e) {
-    const o = e, a = B(null), l = B(null), t = B(!1), n = B({}), i = B(`tooltip-popover-${Math.random().toString(36).substring(2, 9)}`), v = B(!1), p = h(() => {
-      const f = ["krds-btn", "krds-tooltip"];
-      return o.type === "default" ? f.push("small", "text") : o.type === "icon" ? f.push("icon") : o.type === "button" && f.push(""), !o.box && o.vertical && f.push("tooltip-vertical"), o.box && !o.vertical && f.push("tooltip-box"), f.join(" ");
-    }), y = h(() => {
-      const f = [];
-      return o.box && f.push("tooltip-box"), o.vertical && f.push("tooltip-vertical"), t.value && f.push("active"), f;
-    }), g = h(() => a.value?.querySelector("button")?.textContent?.trim() || ""), w = () => window.innerWidth <= 768, b = () => {
+    const n = e, a = D(null), l = D(null), t = D(!1), o = D({}), r = D(`tooltip-popover-${Math.random().toString(36).substring(2, 9)}`), h = D(!1), u = b(() => {
+      const v = ["krds-btn", "krds-tooltip"];
+      return n.type === "default" ? v.push("small", "text") : n.type === "icon" ? v.push("icon") : n.type === "button" && v.push(""), !n.box && n.vertical && v.push("tooltip-vertical"), n.box && !n.vertical && v.push("tooltip-box"), v.join(" ");
+    }), g = b(() => {
+      const v = [];
+      return n.box && v.push("tooltip-box"), n.vertical && v.push("tooltip-vertical"), t.value && v.push("active"), v;
+    }), y = b(() => a.value?.querySelector("button")?.textContent?.trim() || ""), C = () => window.innerWidth <= 768, S = () => {
       if (!a.value || !l.value) return;
-      const f = a.value.querySelector("button");
-      if (!f) return;
-      const x = 12, { clientHeight: R, clientWidth: L } = l.value, { top: M, left: z, right: H, height: I, width: j } = f.getBoundingClientRect(), Z = window.innerWidth / 2, se = window.innerHeight / 2;
-      let X, O;
-      const q = [];
-      v.value || o.box || o.vertical ? (M + I > se ? (X = M - R - x, q.push("top")) : (X = M + I + x, q.push("bottom")), z + j > Z ? (O = H - L, q.push("right"), window.innerWidth - (z + j) > L / 2 && (O = z + (j - L) / 2, q.splice(q.indexOf("right"), 1))) : (O = z + (j - L) / 2, O < 0 && (O = z, q.push("left")))) : (X = M + (I - R) / 2, z + j > Z ? (O = z - L - x, q.push("right")) : O = H + x);
-      const ee = window.innerWidth <= 420;
-      n.value = {
-        top: `${X}px`,
-        left: ee ? "50%" : `${O}px`,
-        transform: ee ? "translateX(-50%)" : "none"
-      }, l.value && (l.value.className = `krds-tooltip-popover ${q.join(" ")} ${y.value.join(" ")}`);
-    }, D = async () => {
-      o.disabled || !o.tooltipContent || (t.value = !0, await we(), b());
+      const v = a.value.querySelector("button");
+      if (!v) return;
+      const $ = 12, { clientHeight: F, clientWidth: T } = l.value, { top: R, left: I, right: p, height: k, width: L } = v.getBoundingClientRect(), P = window.innerWidth / 2, A = window.innerHeight / 2;
+      let W, N;
+      const Y = [];
+      h.value || n.box || n.vertical ? (R + k > A ? (W = R - F - $, Y.push("top")) : (W = R + k + $, Y.push("bottom")), I + L > P ? (N = p - T, Y.push("right"), window.innerWidth - (I + L) > T / 2 && (N = I + (L - T) / 2, Y.splice(Y.indexOf("right"), 1))) : (N = I + (L - T) / 2, N < 0 && (N = I, Y.push("left")))) : (W = R + (k - F) / 2, I + L > P ? (N = I - T - $, Y.push("right")) : N = p + $);
+      const te = window.innerWidth <= 420;
+      o.value = {
+        top: `${W}px`,
+        left: te ? "50%" : `${N}px`,
+        transform: te ? "translateX(-50%)" : "none"
+      }, l.value && (l.value.className = `krds-tooltip-popover ${Y.join(" ")} ${g.value.join(" ")}`);
+    }, V = async () => {
+      n.disabled || !n.tooltipContent || (t.value = !0, await we(), S());
     }, m = () => {
-      t.value = !1, n.value = {};
-    }, s = (f) => {
-      (f.key === "Escape" || f.key === "Esc") && t.value && m();
-    }, c = () => {
-      v.value = w(), t.value && m();
+      t.value = !1, o.value = {};
+    }, i = (v) => {
+      (v.key === "Escape" || v.key === "Esc") && t.value && m();
+    }, f = () => {
+      h.value = C(), t.value && m();
     }, d = () => {
       t.value && m();
     };
-    return le(() => {
-      v.value = w(), document.addEventListener("keydown", s), window.addEventListener("scroll", d), window.addEventListener("resize", c);
-    }), J(() => {
-      document.removeEventListener("keydown", s), window.removeEventListener("scroll", d), window.removeEventListener("resize", c);
-    }), (f, x) => (k(), S("div", {
+    return ae(() => {
+      h.value = C(), document.addEventListener("keydown", i), window.addEventListener("scroll", d), window.addEventListener("resize", f);
+    }), Z(() => {
+      document.removeEventListener("keydown", i), window.removeEventListener("scroll", d), window.removeEventListener("resize", f);
+    }), (v, $) => (w(), x("div", {
       ref_key: "containerRef",
       ref: a
     }, [
-      r("button", {
+      c("button", {
         type: "button",
-        class: E(p.value),
+        class: M(u.value),
         disabled: e.disabled,
-        "aria-labelledby": i.value,
-        onMouseover: D,
+        "aria-labelledby": r.value,
+        onMouseover: V,
         onMouseout: m,
-        onFocusin: D,
+        onFocusin: V,
         onFocusout: m
       }, [
-        G(f.$slots, "default")
-      ], 42, nl),
-      Q(r("div", {
-        id: i.value,
+        J(v.$slots, "default")
+      ], 42, sl),
+      ee(c("div", {
+        id: r.value,
         ref_key: "popoverRef",
         ref: l,
-        class: E(["krds-tooltip-popover", y.value]),
-        style: ne(n.value),
+        class: M(["krds-tooltip-popover", g.value]),
+        style: se(o.value),
         "aria-hidden": !t.value,
         role: "tooltip"
       }, [
-        r("span", ol, V(g.value), 1),
-        P(" " + V(e.tooltipContent), 1)
-      ], 14, sl), [
-        [te, t.value]
+        c("span", il, E(y.value), 1),
+        H(" " + E(e.tooltipContent), 1)
+      ], 14, ol), [
+        [le, t.value]
       ])
     ], 512));
   }
-}), dl = ["aria-expanded"], rl = { class: "drop-in" }, cl = {
+}), dl = ["aria-expanded"], cl = { class: "drop-in" }, ul = {
   key: 0,
   class: "drop-top"
-}, ul = {
+}, fl = {
   key: 1,
   class: "drop-list"
-}, fl = ["lang", "aria-selected", "onClick"], vl = { class: "sr-only" }, pl = {
+}, vl = ["lang", "aria-selected", "onClick"], hl = { class: "sr-only" }, ml = {
   key: 2,
   class: "drop-list"
-}, ml = ["href", "lang"], hl = /* @__PURE__ */ _({
+}, pl = ["href", "lang"], yl = /* @__PURE__ */ K({
   __name: "KrdsLanguageSwitcher",
   props: {
     languageList: {},
@@ -2294,88 +2472,88 @@ const wt = _({
     id: {}
   },
   emits: ["update:modelValue", "close"],
-  setup(e, { emit: o }) {
-    const a = e, l = o, t = B(!1), n = B(), i = B(), v = () => {
-      t.value = !t.value, t.value && n.value && g();
-    }, p = () => {
+  setup(e, { emit: n }) {
+    const a = e, l = n, t = D(!1), o = D(), r = D(), h = () => {
+      t.value = !t.value, t.value && o.value && y();
+    }, u = () => {
       t.value = !1;
-    }, y = (s) => {
-      l("update:modelValue", s), p(), l("close"), i.value?.focus();
-    }, g = () => {
-      if (!n.value) return;
-      const s = n.value.querySelector(".drop-menu");
-      if (!s) return;
-      const c = s.getBoundingClientRect(), d = window.innerWidth;
-      n.value.classList.remove("drop-left", "drop-right"), c.left < 0 ? n.value.classList.add("drop-left") : d < c.left + c.width && n.value.classList.add("drop-right");
-    }, w = (s) => {
-      s.key === "Escape" && (p(), i.value?.focus());
-    }, b = (s) => {
-      n.value?.contains(s.target) || p();
-    }, D = (s) => {
-      n.value?.contains(s.relatedTarget) || p();
-    }, m = (s) => {
-      if (!n.value) return;
-      n.value.querySelectorAll(".drop-list .item-link").forEach((f) => {
-        f.style.position = "relative", f.style.zIndex = "0";
+    }, g = (i) => {
+      l("update:modelValue", i), u(), l("close"), r.value?.focus();
+    }, y = () => {
+      if (!o.value) return;
+      const i = o.value.querySelector(".drop-menu");
+      if (!i) return;
+      const f = i.getBoundingClientRect(), d = window.innerWidth;
+      o.value.classList.remove("drop-left", "drop-right"), f.left < 0 ? o.value.classList.add("drop-left") : d < f.left + f.width && o.value.classList.add("drop-right");
+    }, C = (i) => {
+      i.key === "Escape" && (u(), r.value?.focus());
+    }, S = (i) => {
+      o.value?.contains(i.target) || u();
+    }, V = (i) => {
+      o.value?.contains(i.relatedTarget) || u();
+    }, m = (i) => {
+      if (!o.value) return;
+      o.value.querySelectorAll(".drop-list .item-link").forEach((v) => {
+        v.style.position = "relative", v.style.zIndex = "0";
       });
-      const d = s.target;
+      const d = i.target;
       d.style.zIndex = "1";
     };
-    return ae(t, (s) => {
-      s ? (document.addEventListener("keydown", w), document.addEventListener("click", b)) : (document.removeEventListener("keydown", w), document.removeEventListener("click", b));
-    }), J(() => {
-      document.removeEventListener("keydown", w), document.removeEventListener("click", b);
-    }), (s, c) => (k(), S("div", {
+    return ne(t, (i) => {
+      i ? (document.addEventListener("keydown", C), document.addEventListener("click", S)) : (document.removeEventListener("keydown", C), document.removeEventListener("click", S));
+    }), Z(() => {
+      document.removeEventListener("keydown", C), document.removeEventListener("click", S);
+    }), (i, f) => (w(), x("div", {
       ref_key: "dropdownRef",
-      ref: n,
-      class: E(["krds-drop-wrap krds-language", {
+      ref: o,
+      class: M(["krds-drop-wrap krds-language", {
         active: t.value,
         "drop-left": a.dropPosition === "left",
         "drop-right": a.dropPosition === "right"
       }]),
-      onFocusout: D
+      onFocusout: V
     }, [
-      r("button", {
+      c("button", {
         ref_key: "buttonRef",
-        ref: i,
+        ref: r,
         type: "button",
-        class: E(["krds-btn small text drop-btn", { active: t.value }]),
+        class: M(["krds-btn small text drop-btn", { active: t.value }]),
         "aria-expanded": t.value,
-        onClick: v
+        onClick: h
       }, [
-        c[0] || (c[0] = r("i", { class: "svg-icon ico-global" }, null, -1)),
-        G(s.$slots, "default"),
-        c[1] || (c[1] = r("i", { class: "svg-icon ico-toggle" }, null, -1))
+        f[0] || (f[0] = c("i", { class: "svg-icon ico-global" }, null, -1)),
+        J(i.$slots, "default"),
+        f[1] || (f[1] = c("i", { class: "svg-icon ico-toggle" }, null, -1))
       ], 10, dl),
-      r("div", {
+      c("div", {
         class: "drop-menu",
-        style: ne({ display: t.value ? "block" : "none" })
+        style: se({ display: t.value ? "block" : "none" })
       }, [
-        r("div", rl, [
-          s.$slots["prev-item"] ? (k(), S("div", cl, [
-            G(s.$slots, "prev-item")
-          ])) : Y("", !0),
-          a.type === "default" ? (k(), S("ul", ul, [
-            (k(!0), S(F, null, N(e.languageList, (d) => (k(), S("li", {
+        c("div", cl, [
+          i.$slots["prev-item"] ? (w(), x("div", ul, [
+            J(i.$slots, "prev-item")
+          ])) : X("", !0),
+          a.type === "default" ? (w(), x("ul", fl, [
+            (w(!0), x(j, null, G(e.languageList, (d) => (w(), x("li", {
               key: d.code
             }, [
-              r("a", {
+              c("a", {
                 href: "#",
-                class: E(["item-link", { active: a.modelValue === d.code }]),
+                class: M(["item-link", { active: a.modelValue === d.code }]),
                 lang: d.code,
                 "aria-selected": a.modelValue === d.code,
-                onClick: re((f) => y(d.code), ["prevent"]),
+                onClick: de((v) => g(d.code), ["prevent"]),
                 onFocus: m
               }, [
-                P(V(d.name) + " ", 1),
-                r("span", vl, V(a.modelValue === d.code ? "선택됨" : ""), 1)
-              ], 42, fl)
+                H(E(d.name) + " ", 1),
+                c("span", hl, E(a.modelValue === d.code ? "선택됨" : ""), 1)
+              ], 42, vl)
             ]))), 128))
-          ])) : a.type === "external" ? (k(), S("ul", pl, [
-            (k(!0), S(F, null, N(e.languageList, (d) => (k(), S("li", {
+          ])) : a.type === "external" ? (w(), x("ul", ml, [
+            (w(!0), x(j, null, G(e.languageList, (d) => (w(), x("li", {
               key: d.code
             }, [
-              r("a", {
+              c("a", {
                 href: d.url || "#",
                 class: "item-link",
                 lang: d.code,
@@ -2383,110 +2561,110 @@ const wt = _({
                 title: "새 창 열림",
                 onFocus: m
               }, [
-                P(V(d.name) + " ", 1),
-                c[2] || (c[2] = r("i", { class: "svg-icon ico-go" }, null, -1))
-              ], 40, ml)
+                H(E(d.name) + " ", 1),
+                f[2] || (f[2] = c("i", { class: "svg-icon ico-go" }, null, -1))
+              ], 40, pl)
             ]))), 128))
-          ])) : Y("", !0)
+          ])) : X("", !0)
         ])
       ], 4)
     ], 34));
   }
-}), yl = { class: "drop-in" }, gl = { class: "drop-list" }, bl = ["data-adjust-scale", "onClick"], kl = { class: "drop-bottom" }, Sl = /* @__PURE__ */ _({
+}), gl = { class: "drop-in" }, bl = { class: "drop-list" }, kl = ["data-adjust-scale", "onClick"], Sl = { class: "drop-bottom" }, wl = /* @__PURE__ */ K({
   __name: "KrdsResize",
   emits: ["update:modelValue", "close"],
-  setup(e, { emit: o }) {
-    const a = o, l = B(!1), t = B(), n = B(), i = B("md"), v = [
+  setup(e, { emit: n }) {
+    const a = n, l = D(!1), t = D(), o = D(), r = D("md"), h = [
       { key: "sm", label: "작게", zoom: "0.9" },
       { key: "md", label: "보통", zoom: "1" },
       { key: "lg", label: "조금 크게", zoom: "1.1" },
       { key: "xlg", label: "크게", zoom: "1.3" },
       { key: "xxlg", label: "가장 크게", zoom: "1.5" }
-    ], p = () => {
-      l.value = !l.value, l.value && t.value && b();
-    }, y = () => {
+    ], u = () => {
+      l.value = !l.value, l.value && t.value && S();
+    }, g = () => {
       l.value = !1;
-    }, g = (d) => {
-      y(), a("close"), n.value?.focus(), i.value = d.key, document.body.style.zoom = d?.zoom;
-    }, w = () => {
-      const d = v.find((f) => f.key === "md");
-      d && g(d);
-    }, b = () => {
+    }, y = (d) => {
+      g(), a("close"), o.value?.focus(), r.value = d.key, document.body.style.zoom = d?.zoom;
+    }, C = () => {
+      const d = h.find((v) => v.key === "md");
+      d && y(d);
+    }, S = () => {
       if (!t.value) return;
       const d = t.value.querySelector(".drop-menu");
       if (!d) return;
-      const f = d.getBoundingClientRect(), x = window.innerWidth;
-      t.value.classList.remove("drop-left", "drop-right"), f.left < 0 ? t.value.classList.add("drop-left") : x < f.left + f.width && t.value.classList.add("drop-right");
-    }, D = (d) => {
-      d.key === "Escape" && (y(), n.value?.focus());
+      const v = d.getBoundingClientRect(), $ = window.innerWidth;
+      t.value.classList.remove("drop-left", "drop-right"), v.left < 0 ? t.value.classList.add("drop-left") : $ < v.left + v.width && t.value.classList.add("drop-right");
+    }, V = (d) => {
+      d.key === "Escape" && (g(), o.value?.focus());
     }, m = (d) => {
-      t.value?.contains(d.target) || y();
-    }, s = (d) => {
-      t.value?.contains(d.relatedTarget) || y();
-    }, c = (d) => {
+      t.value?.contains(d.target) || g();
+    }, i = (d) => {
+      t.value?.contains(d.relatedTarget) || g();
+    }, f = (d) => {
       if (!t.value) return;
-      t.value.querySelectorAll(".drop-list .item-link").forEach((R) => {
-        R.style.position = "relative", R.style.zIndex = "0";
+      t.value.querySelectorAll(".drop-list .item-link").forEach((F) => {
+        F.style.position = "relative", F.style.zIndex = "0";
       });
-      const x = d.target;
-      x.style.zIndex = "1";
+      const $ = d.target;
+      $.style.zIndex = "1";
     };
-    return ae(l, (d) => {
-      d ? (document.addEventListener("keydown", D), document.addEventListener("click", m)) : (document.removeEventListener("keydown", D), document.removeEventListener("click", m));
-    }), J(() => {
-      document.removeEventListener("keydown", D), document.removeEventListener("click", m);
-    }), (d, f) => (k(), S("div", {
+    return ne(l, (d) => {
+      d ? (document.addEventListener("keydown", V), document.addEventListener("click", m)) : (document.removeEventListener("keydown", V), document.removeEventListener("click", m));
+    }), Z(() => {
+      document.removeEventListener("keydown", V), document.removeEventListener("click", m);
+    }), (d, v) => (w(), x("div", {
       ref_key: "dropdownRef",
       ref: t,
       class: "krds-drop-wrap krds-resize",
       "data-adjust": "scale",
-      onFocusout: s
+      onFocusout: i
     }, [
-      r("button", {
+      c("button", {
         ref_key: "buttonRef",
-        ref: n,
+        ref: o,
         type: "button",
         class: "krds-btn small text drop-btn",
-        onClick: p
-      }, [...f[0] || (f[0] = [
-        P(" 화면크기 ", -1),
-        r("i", { class: "svg-icon ico-toggle" }, null, -1)
+        onClick: u
+      }, [...v[0] || (v[0] = [
+        H(" 화면크기 ", -1),
+        c("i", { class: "svg-icon ico-toggle" }, null, -1)
       ])], 512),
-      r("div", {
+      c("div", {
         class: "drop-menu",
-        style: ne({ display: l.value ? "block" : "none" })
+        style: se({ display: l.value ? "block" : "none" })
       }, [
-        r("div", yl, [
-          r("ul", gl, [
-            (k(), S(F, null, N(v, (x) => r("li", {
-              key: x.key
+        c("div", gl, [
+          c("ul", bl, [
+            (w(), x(j, null, G(h, ($) => c("li", {
+              key: $.key
             }, [
-              r("button", {
+              c("button", {
                 type: "button",
-                class: E(["item-link", [x.key, x.key === i.value ? "active" : ""]]),
-                "data-adjust-scale": x.key,
-                onClick: re((R) => g(x), ["prevent"]),
-                onFocus: c
-              }, V(x.label), 43, bl)
+                class: M(["item-link", [$.key, $.key === r.value ? "active" : ""]]),
+                "data-adjust-scale": $.key,
+                onClick: de((F) => y($), ["prevent"]),
+                onFocus: f
+              }, E($.label), 43, kl)
             ])), 64))
           ]),
-          r("div", kl, [
-            r("button", {
+          c("div", Sl, [
+            c("button", {
               type: "button",
               class: "krds-btn medium text",
               "data-adjust-scale": "md",
-              onClick: re(w, ["prevent"]),
-              onFocus: c
-            }, [...f[1] || (f[1] = [
-              r("i", { class: "svg-icon ico-reset" }, null, -1),
-              P(" 초기화 ", -1)
+              onClick: de(C, ["prevent"]),
+              onFocus: f
+            }, [...v[1] || (v[1] = [
+              c("i", { class: "svg-icon ico-reset" }, null, -1),
+              H(" 초기화 ", -1)
             ])], 32)
           ])
         ])
       ], 4)
     ], 544));
   }
-}), wl = _({
+}), Cl = K({
   name: "KrdsModal",
   props: {
     modelValue: {
@@ -2519,98 +2697,100 @@ const wt = _({
     }
   },
   emits: ["update:modelValue"],
+  /* eslint-disable @typescript-eslint/no-explicit-any -- Vue SlotsType requires `any` for h() children compatibility */
   slots: Object,
-  setup(e, { slots: o, emit: a }) {
-    const l = Ee()?.uid, t = h(() => e.modalId ?? `krds-modal-${l}`), n = h({
+  /* eslint-enable @typescript-eslint/no-explicit-any */
+  setup(e, { slots: n, emit: a }) {
+    const l = Ee()?.uid, t = b(() => e.modalId ?? `krds-modal-${l}`), o = b({
       get: () => e.modelValue,
-      set: (c) => a("update:modelValue", c)
-    }), i = h(() => `tit_${t.value}`), v = h(() => ({
+      set: (f) => a("update:modelValue", f)
+    }), r = b(() => `tit_${t.value}`), h = b(() => ({
       small: "modal-sm",
       medium: "modal-md",
       large: "modal-lg"
-    })[e.size]), p = () => {
-      n.value = !1;
+    })[e.size]), u = () => {
+      o.value = !1;
     };
-    let y = "", g = null;
-    const w = B(null), b = (c) => Array.from(c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter(
-      (f) => !f.hasAttribute("disabled") && f.getAttribute("tabindex") !== "-1"
-    ), D = (c) => {
-      if (!w.value || c.key !== "Tab") return;
-      const d = b(w.value);
+    let g = "", y = null;
+    const C = D(null), S = (f) => Array.from(f.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter(
+      (v) => !v.hasAttribute("disabled") && v.getAttribute("tabindex") !== "-1"
+    ), V = (f) => {
+      if (!C.value || f.key !== "Tab") return;
+      const d = S(C.value);
       if (d.length === 0) {
-        c.preventDefault();
+        f.preventDefault();
         return;
       }
-      const f = d[0], x = d[d.length - 1];
-      c.shiftKey && document.activeElement === f ? (c.preventDefault(), x.focus()) : !c.shiftKey && document.activeElement === x && (c.preventDefault(), f.focus());
-    }, m = (c) => {
-      c.key === "Escape" && !e.persistent && p();
-    }, s = () => {
-      document.body.style.overflow = y, document.removeEventListener("keydown", D), document.removeEventListener("keydown", m), g && (g.focus(), g = null), w.value = null;
+      const v = d[0], $ = d[d.length - 1];
+      f.shiftKey && document.activeElement === v ? (f.preventDefault(), $.focus()) : !f.shiftKey && document.activeElement === $ && (f.preventDefault(), v.focus());
+    }, m = (f) => {
+      f.key === "Escape" && !e.persistent && u();
+    }, i = () => {
+      document.body.style.overflow = g, document.removeEventListener("keydown", V), document.removeEventListener("keydown", m), y && (y.focus(), y = null), C.value = null;
     };
-    return ae(
+    return ne(
       () => e.modelValue,
-      async (c) => {
-        if (c) {
-          y = document.body.style.overflow, document.body.style.overflow = "hidden", g = document.activeElement, await we();
+      async (f) => {
+        if (f) {
+          g = document.body.style.overflow, document.body.style.overflow = "hidden", y = document.activeElement, await we();
           const d = document.getElementById(t.value);
           if (d) {
-            w.value = d;
-            const f = d.querySelector(".modal-conts");
-            f && (f.setAttribute("tabindex", "-1"), f.focus()), document.addEventListener("keydown", D), document.addEventListener("keydown", m);
+            C.value = d;
+            const v = d.querySelector(".modal-conts");
+            v && (v.setAttribute("tabindex", "-1"), v.focus()), document.addEventListener("keydown", V), document.addEventListener("keydown", m);
           }
         } else
-          s();
+          i();
       },
       { immediate: !0 }
-    ), Se(() => {
-      e.modelValue && s();
+    ), ce(() => {
+      e.modelValue && i();
     }), () => {
-      if (!n.value) return null;
-      const c = {
+      if (!o.value) return null;
+      const f = {
         id: t.value,
         class: "krds-modal fade in shown",
         role: "dialog",
         "aria-modal": !0,
-        "aria-labelledby": i.value
+        "aria-labelledby": r.value
       };
-      return e.full ? c["data-type"] = "full" : e.bottomSheet && (c["data-type"] = "bottom-sheet"), u(
+      return e.full ? f["data-type"] = "full" : e.bottomSheet && (f["data-type"] = "bottom-sheet"), s(
         Le,
         { to: "body" },
-        u("section", c, [
-          u("div", { class: `modal-dialog ${v.value}` }, [
-            u(
+        s("section", f, [
+          s("div", { class: `modal-dialog ${h.value}` }, [
+            s(
               "div",
               { class: "modal-content" },
               [
                 // modal title
-                o.title ? u("div", { class: "modal-header" }, [u("h2", { id: i.value, class: "modal-title" }, o.title())]) : null,
+                n.title ? s("div", { class: "modal-header" }, [s("h2", { id: r.value, class: "modal-title" }, n.title())]) : null,
                 // modal contents
-                u("div", { class: "modal-conts" }, [u("div", { class: "conts-area" }, o.default?.())]),
+                s("div", { class: "modal-conts" }, [s("div", { class: "conts-area" }, n.default?.())]),
                 // modal btn
-                o.footer ? u("div", { class: "modal-btn btn-wrap" }, o.footer()) : null,
+                n.footer ? s("div", { class: "modal-btn btn-wrap" }, n.footer()) : null,
                 // close button
-                u(
+                s(
                   "button",
                   {
                     type: "button",
                     class: "krds-btn medium icon btn-close close-modal",
-                    onClick: p
+                    onClick: u
                   },
-                  [u("span", { class: "sr-only" }, "닫기"), u("i", { class: "svg-icon ico-popup-close" })]
+                  [s("span", { class: "sr-only" }, "닫기"), s("i", { class: "svg-icon ico-popup-close" })]
                 )
               ].filter(Boolean)
             )
           ]),
-          u("div", {
+          s("div", {
             class: e.backdrop ? "modal-back in" : "modal-back",
-            onClick: e.persistent ? void 0 : p
+            onClick: e.persistent ? void 0 : u
           })
         ])
       );
     };
   }
-}), Cl = _({
+}), xl = K({
   name: "KrdsAccordionGroup",
   props: {
     typeLine: {
@@ -2622,20 +2802,20 @@ const wt = _({
       default: void 0
     }
   },
-  setup(e, { slots: o }) {
-    const a = h(() => {
+  setup(e, { slots: n }) {
+    const a = b(() => {
       const l = ["krds-accordion"];
       return e.typeLine && l.push("type-line"), e.class && l.push(e.class), l;
     });
-    return () => u(
+    return () => s(
       "div",
       {
         class: a.value
       },
-      o.default?.()
+      n.default?.()
     );
   }
-}), xl = ["id"], $l = { class: "accordion-header" }, _l = ["id", "aria-expanded", "aria-controls"], Bl = ["id", "aria-labelledby"], Kl = { class: "accordion-body" }, Dl = /* @__PURE__ */ _({
+}), $l = ["id"], Bl = { class: "accordion-header" }, Kl = ["id", "aria-expanded", "aria-controls"], _l = ["id", "aria-labelledby"], Dl = { class: "accordion-body" }, zl = /* @__PURE__ */ K({
   __name: "KrdsAccordionItem",
   props: {
     id: {},
@@ -2644,152 +2824,226 @@ const wt = _({
     content: {}
   },
   emits: ["toggle"],
-  setup(e, { emit: o }) {
-    const a = e, l = o, t = h(() => a.openItem === a.id), n = () => {
+  setup(e, { emit: n }) {
+    const a = e, l = n, t = b(() => a.openItem === a.id), o = () => {
       l("toggle", a.id);
     };
-    return (i, v) => (k(), S("div", {
+    return (r, h) => (w(), x("div", {
       id: e.id,
-      class: E(["accordion-item", { active: t.value }])
+      class: M(["accordion-item", { active: t.value }])
     }, [
-      r("h5", $l, [
-        r("button", {
+      c("h5", Bl, [
+        c("button", {
           id: `accordion-header-${e.id}`,
           type: "button",
           class: "btn-accordion",
           "aria-expanded": t.value,
           "aria-controls": `accordion-collapse-${e.id}`,
-          onClick: v[0] || (v[0] = (p) => n())
+          onClick: h[0] || (h[0] = (u) => o())
         }, [
-          G(i.$slots, "title", {}, () => [
-            P(V(e.title), 1)
+          J(r.$slots, "title", {}, () => [
+            H(E(e.title), 1)
           ])
-        ], 8, _l)
+        ], 8, Kl)
       ]),
-      r("div", {
+      c("div", {
         id: `accordion-collapse-${e.id}`,
         class: "accordion-collapse collapse",
         "aria-labelledby": `accordion-header-${e.id}`
       }, [
-        r("div", Kl, [
-          G(i.$slots, "content", {}, () => [
-            P(V(e.content), 1)
+        c("div", Dl, [
+          J(r.$slots, "content", {}, () => [
+            H(E(e.content), 1)
           ])
         ])
-      ], 8, Bl)
-    ], 10, xl));
+      ], 8, _l)
+    ], 10, $l));
+  }
+}), Vl = K({
+  name: "KrdsTts",
+  props: {
+    text: {
+      type: String,
+      required: !0
+    },
+    label: {
+      type: String,
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: "medium"
+    },
+    icon: {
+      type: String,
+      default: "volume"
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["play", "pause", "end", "error"],
+  setup(e, { emit: n }) {
+    const a = D(!1);
+    let l = null;
+    const t = () => {
+      typeof window < "u" && window.speechSynthesis && window.speechSynthesis.cancel(), a.value = !1, l = null;
+    }, o = () => {
+      if (!e.disabled) {
+        if (a.value) {
+          t(), n("pause");
+          return;
+        }
+        if (typeof window > "u" || !window.speechSynthesis) {
+          n("error", new Error("SpeechSynthesis API is not supported"));
+          return;
+        }
+        window.speechSynthesis.cancel(), l = new SpeechSynthesisUtterance(e.text), l.lang = "ko-KR", l.onstart = () => {
+          a.value = !0;
+        }, l.onend = () => {
+          a.value = !1, l = null, n("end");
+        }, l.onerror = (u) => {
+          a.value = !1, l = null, u.error !== "canceled" && n("error", new Error(u.error));
+        }, window.speechSynthesis.speak(l), n("play", e.text);
+      }
+    }, r = b(() => {
+      const u = ["krds-tts"];
+      return e.size && u.push(e.size), a.value ? u.push("pause") : e.icon === "play" && u.push("play"), e.class && u.push(e.class), u;
+    }), h = b(() => a.value ? "ico-stop" : e.icon === "play" ? "ico-play" : "ico-volume");
+    return ce(() => {
+      t();
+    }), () => {
+      const u = [s("span", { class: "krds-tts-icon", "aria-hidden": "true" }, [s("i", { class: `svg-icon ${h.value}` })])];
+      return e.label && u.push(s("span", { class: "krds-tts-text" }, e.label)), s(
+        "button",
+        {
+          type: "button",
+          class: r.value,
+          disabled: e.disabled || void 0,
+          onClick: o
+        },
+        u
+      );
+    };
   }
-}), ge = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), be = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  KrdsAccordionGroup: Cl,
-  KrdsAccordionItem: Dl,
-  KrdsBadge: yt,
-  KrdsBreadcrumb: Et,
+  KrdsAccordionGroup: xl,
+  KrdsAccordionItem: zl,
+  KrdsBadge: gt,
+  KrdsBreadcrumb: Lt,
   KrdsButton: Ce,
   KrdsButtonGroup: Me,
-  KrdsCheckArea: Ct,
-  KrdsCheckbox: xt,
-  KrdsCoachMark: al,
-  KrdsContextualHelp: Xt,
+  KrdsCheckArea: xt,
+  KrdsCheckbox: $t,
+  KrdsCoachMark: nl,
+  KrdsContextualHelp: Jt,
   KrdsDateInput: vt,
-  KrdsFileUpload: ht,
+  KrdsFileUpload: yt,
   KrdsFormGroup: Oe,
-  KrdsFormHint: Fe,
-  KrdsFormLabel: Pe,
-  KrdsIcon: Re,
-  KrdsInPageNavigation: Lt,
+  KrdsFormHint: Pe,
+  KrdsFormLabel: Fe,
+  KrdsIcon: Te,
+  KrdsInPageNavigation: Mt,
   KrdsInput: Ae,
-  KrdsLanguageSwitcher: hl,
-  KrdsLink: Te,
-  KrdsMasthead: kt,
-  KrdsModal: wl,
-  KrdsPagination: Ft,
-  KrdsPanel: Ht,
-  KrdsRadio: $t,
-  KrdsResize: Sl,
+  KrdsLanguageSwitcher: yl,
+  KrdsLink: Re,
+  KrdsMasthead: St,
+  KrdsModal: Cl,
+  KrdsPagination: Ot,
+  KrdsPanel: Wt,
+  KrdsRadio: Bt,
+  KrdsResize: wl,
   KrdsSelect: mt,
-  KrdsSkipLink: Kt,
+  KrdsSkipLink: Dt,
   KrdsSpinner: xe,
-  KrdsStep: Bt,
-  KrdsStepIndicator: _t,
-  KrdsTag: gt,
-  KrdsTagGroup: bt,
-  KrdsTextarea: pt,
-  KrdsToggleSwitch: wt,
-  KrdsTooltip: il
-}, Symbol.toStringTag, { value: "Module" })), fe = {
-  mounted(e, o) {
-    o.value !== !1 && e.classList.add("sr-only");
+  KrdsStep: _t,
+  KrdsStepIndicator: Kt,
+  KrdsTag: bt,
+  KrdsTagGroup: kt,
+  KrdsTextarea: ht,
+  KrdsToggleSwitch: Ct,
+  KrdsTooltip: rl,
+  KrdsTts: Vl
+}, Symbol.toStringTag, { value: "Module" })), ve = {
+  mounted(e, n) {
+    n.value !== !1 && e.classList.add("sr-only");
   },
-  updated(e, o) {
-    o.value === !1 ? e.classList.remove("sr-only") : e.classList.add("sr-only");
+  updated(e, n) {
+    n.value === !1 ? e.classList.remove("sr-only") : e.classList.add("sr-only");
   },
   unmounted(e) {
     e.classList.remove("sr-only");
   }
-}, be = {
-  "sr-only": fe
+}, ke = {
+  "sr-only": ve
 }, $e = (e) => {
-  e.directive("sr-only", fe);
-}, ke = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  e.directive("sr-only", ve);
+}, Se = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: be,
-  directives: be,
+  default: ke,
+  directives: ke,
   installDirectives: $e,
-  vSrOnly: fe
-}, Symbol.toStringTag, { value: "Module" })), zl = {
-  install(e, o = {}) {
-    e.provide("krds:config", o);
-    const a = o.components || Object.keys(ge);
+  vSrOnly: ve
+}, Symbol.toStringTag, { value: "Module" })), Ll = {
+  install(e, n = {}) {
+    e.provide("krds:config", n);
+    const a = n.components || Object.keys(be);
     a.forEach((l) => {
-      const t = ge[l];
+      const t = be[l];
       t && e.component(l, t);
-    }), typeof ke == "object" && ke !== null && $e(e), e.config.globalProperties.$krds = {
+    }), typeof Se == "object" && Se !== null && $e(e), e.config.globalProperties.$krds = {
       version: "__VERSION__"
     }, process.env.NODE_ENV !== "production" && console.log(`[KRDS Vue] v__VERSION__ 설치 완료 - 컴포넌트: ${a.length}개`);
   }
-}, El = "__VERSION__";
+}, Ml = "__VERSION__";
 export {
-  Cl as KrdsAccordionGroup,
-  Dl as KrdsAccordionItem,
-  yt as KrdsBadge,
-  Et as KrdsBreadcrumb,
+  xl as KrdsAccordionGroup,
+  zl as KrdsAccordionItem,
+  gt as KrdsBadge,
+  Lt as KrdsBreadcrumb,
   Ce as KrdsButton,
   Me as KrdsButtonGroup,
-  Ct as KrdsCheckArea,
-  xt as KrdsCheckbox,
-  al as KrdsCoachMark,
-  Xt as KrdsContextualHelp,
+  xt as KrdsCheckArea,
+  $t as KrdsCheckbox,
+  nl as KrdsCoachMark,
+  Jt as KrdsContextualHelp,
   vt as KrdsDateInput,
-  ht as KrdsFileUpload,
+  yt as KrdsFileUpload,
   Oe as KrdsFormGroup,
-  Fe as KrdsFormHint,
-  Pe as KrdsFormLabel,
-  Re as KrdsIcon,
-  Lt as KrdsInPageNavigation,
+  Pe as KrdsFormHint,
+  Fe as KrdsFormLabel,
+  Te as KrdsIcon,
+  Mt as KrdsInPageNavigation,
   Ae as KrdsInput,
-  hl as KrdsLanguageSwitcher,
-  Te as KrdsLink,
-  kt as KrdsMasthead,
-  wl as KrdsModal,
-  Ft as KrdsPagination,
-  Ht as KrdsPanel,
-  $t as KrdsRadio,
-  Sl as KrdsResize,
+  yl as KrdsLanguageSwitcher,
+  Re as KrdsLink,
+  St as KrdsMasthead,
+  Cl as KrdsModal,
+  Ot as KrdsPagination,
+  Wt as KrdsPanel,
+  Bt as KrdsRadio,
+  wl as KrdsResize,
   mt as KrdsSelect,
-  Kt as KrdsSkipLink,
+  Dt as KrdsSkipLink,
   xe as KrdsSpinner,
-  Bt as KrdsStep,
-  _t as KrdsStepIndicator,
-  gt as KrdsTag,
-  bt as KrdsTagGroup,
-  pt as KrdsTextarea,
-  wt as KrdsToggleSwitch,
-  il as KrdsTooltip,
-  ue as classNames,
-  zl as default,
-  ce as generateId,
-  Il as generateUid,
-  El as version
+  _t as KrdsStep,
+  Kt as KrdsStepIndicator,
+  bt as KrdsTag,
+  kt as KrdsTagGroup,
+  ht as KrdsTextarea,
+  Ct as KrdsToggleSwitch,
+  rl as KrdsTooltip,
+  Vl as KrdsTts,
+  fe as classNames,
+  Ll as default,
+  ue as generateId,
+  El as generateUid,
+  Ml as version
 };
 //# sourceMappingURL=krds-vue.es.js.map