@krds.ui/vue 0.0.9 → 0.0.10

package/dist/krds-vue.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as B, computed as y, h as v, ref as K, onMounted as le, onBeforeUnmount as Ke, createElementBlock as S, openBlock as b, createElementVNode as r, normalizeClass as I, withDirectives as Q, unref as P, toDisplayString as L, Fragment as F, renderList as N, vShow as te, createBlock as oe, withCtx as ie, createTextVNode as A, watch as ue, provide as De, inject as Ve, createCommentVNode as Y, onUnmounted as X, resolveDirective as ze, resolveDynamicComponent as ye, renderSlot as J, normalizeStyle as ae, nextTick as Le, withModifiers as re } from "vue";
-const Se = B({
+import { defineComponent as B, computed as g, h as c, ref as K, onMounted as le, onBeforeUnmount as Se, createElementBlock as w, openBlock as k, createElementVNode as d, normalizeClass as I, withDirectives as Q, unref as P, toDisplayString as E, Fragment as F, renderList as N, vShow as te, createBlock as ie, withCtx as re, createTextVNode as A, watch as ae, provide as Ve, inject as ze, createCommentVNode as Y, onUnmounted as X, resolveDirective as Ee, resolveDynamicComponent as ye, renderSlot as J, normalizeStyle as ne, nextTick as we, withModifiers as de, getCurrentInstance as Ie, Teleport as Le } from "vue";
+const Ce = B({
   name: "KrdsButton",
   props: {
     type: {
@@ -41,13 +41,13 @@ const Se = B({
   },
   emits: ["click"],
   setup(e, { emit: o, slots: s }) {
-    const n = y(() => {
+    const n = g(() => {
       const a = ["krds-btn"];
       return e.icon && a.push("icon"), e.border && a.push("border"), e.pure && a.push("pure"), e.text && a.push("text"), e.variant && !e.icon && a.push(e.variant), e.size && a.push(e.size), e.class && a.push(e.class), a;
     }), t = (a) => {
       e.disabled || o("click", a);
     };
-    return () => v(
+    return () => c(
       "button",
       {
         type: e.type,
@@ -58,11 +58,11 @@ const Se = B({
       s.default?.()
     );
   }
-}), Ie = B({
+}), Me = B({
   name: "KrdsButtonGroup",
   props: {},
   setup(e, { slots: o }) {
-    return () => v(
+    return () => c(
       "div",
       {
         class: "btn-group"
@@ -70,7 +70,7 @@ const Se = B({
       o.default?.()
     );
   }
-}), Ee = B({
+}), Re = B({
   name: "KrdsIcon",
   props: {
     name: {
@@ -83,11 +83,11 @@ const Se = B({
     }
   },
   setup(e) {
-    return () => v("i", {
+    return () => c("i", {
       class: ["svg-icon", e.name, e.class].filter(Boolean).join(" ")
     });
   }
-}), Me = B({
+}), Te = B({
   name: "KrdsLink",
   props: {
     href: {
@@ -125,19 +125,19 @@ const Se = B({
   },
   emits: ["click"],
   setup(e, { emit: o, slots: s }) {
-    const n = y(() => {
-      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 = y(() => {
-      const i = {
+    const n = g(() => {
+      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 = g(() => {
+      const r = {
         href: e.href,
         class: n.value
       };
-      return e.target && (i.target = e.target), e.title && (i.title = e.title), e.target === "_blank" && (i.rel = "noopener noreferrer"), i;
-    }), a = (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;
+    }), a = (r) => {
+      o("click", r);
     };
-    return () => v(
+    return () => c(
       "a",
       {
         ...t.value,
@@ -146,7 +146,7 @@ const Se = B({
       s.default?.()
     );
   }
-}), we = B({
+}), xe = B({
   name: "KrdsSpinner",
   props: {
     label: {
@@ -155,10 +155,10 @@ const Se = B({
     }
   },
   render() {
-    const e = [v("span", { class: "sr-only" }, "로딩 중")];
-    return this.label && e.push(v("span", this.label)), v("div", { class: "krds-spinner", role: "status" }, e);
+    const e = [c("span", { class: "sr-only" }, "로딩 중")];
+    return this.label && e.push(c("span", this.label)), c("div", { class: "krds-spinner", role: "status" }, e);
   }
-}), Re = B({
+}), Pe = B({
   name: "KrdsInput",
   props: {
     modelValue: {
@@ -248,24 +248,24 @@ const Se = B({
   },
   emits: ["update:modelValue", "input", "change", "focus", "blur", "keydown", "keyup"],
   setup(e, { emit: o, slots: s }) {
-    const n = y(() => {
-      const k = ["krds-input"];
-      return e.size && k.push(e.size), e.class && k.push(e.class), k;
-    }), t = (k) => {
-      const D = k.target, p = e.type === "number" ? Number(D.value) : D.value;
-      o("update:modelValue", p), o("input", k);
-    }, a = (k) => {
-      o("change", k);
-    }, i = (k) => {
-      o("focus", k);
-    }, d = (k) => {
-      o("blur", k);
-    }, c = (k) => {
-      o("keydown", k);
-    }, m = (k) => {
-      o("keyup", k);
-    }, g = y(() => {
-      const k = {
+    const n = g(() => {
+      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);
+    }, a = (b) => {
+      o("change", b);
+    }, r = (b) => {
+      o("focus", b);
+    }, v = (b) => {
+      o("blur", b);
+    }, p = (b) => {
+      o("keydown", b);
+    }, h = (b) => {
+      o("keyup", b);
+    }, y = g(() => {
+      const b = {
         type: e.type,
         class: n.value,
         value: e.modelValue,
@@ -279,22 +279,22 @@ const Se = B({
         autofocus: e.autofocus,
         onInput: t,
         onChange: a,
-        onFocus: i,
-        onBlur: d,
-        onKeydown: c,
-        onKeyup: m
+        onFocus: r,
+        onBlur: v,
+        onKeydown: p,
+        onKeyup: h
       };
-      return e.maxlength !== void 0 && (k.maxlength = e.maxlength), e.minlength !== void 0 && (k.minlength = e.minlength), e.type === "number" && (e.max !== void 0 && (k.max = e.max), e.min !== void 0 && (k.min = e.min), e.step !== void 0 && (k.step = e.step)), k;
-    }), x = y(() => {
-      const k = ["form-conts"];
-      return e.state !== "default" && k.push(`is-${e.state}`), e.icon && k.push("btn-ico-wrap"), k;
+      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;
+    }), S = g(() => {
+      const b = ["form-conts"];
+      return e.state !== "default" && b.push(`is-${e.state}`), e.icon && b.push("btn-ico-wrap"), b;
     });
     return () => {
-      const k = [v("input", g.value)];
-      return e.loading ? v("div", { class: x.value }, [v("div", { class: "form-spinner" }, [...k, v(we)])]) : (s.default && k.push(...s.default()), v("div", { class: x.value }, k));
+      const b = [c("input", y.value)];
+      return e.loading ? c("div", { class: S.value }, [c("div", { class: "form-spinner" }, [...b, c(xe)])]) : (s.default && b.push(...s.default()), c("div", { class: S.value }, b));
     };
   }
-}), Te = B({
+}), Ae = B({
   name: "KrdsFormLabel",
   props: {
     for: {
@@ -319,8 +319,8 @@ const Se = B({
     const n = (t) => {
       o("click", t);
     };
-    return () => v("div", { class: "form-tit" }, [
-      v(
+    return () => c("div", { class: "form-tit" }, [
+      c(
         "label",
         {
           for: e.for,
@@ -333,7 +333,7 @@ const Se = B({
       )
     ]);
   }
-}), Pe = B({
+}), Fe = B({
   name: "KrdsFormHint",
   props: {
     type: {
@@ -375,7 +375,7 @@ const Se = B({
       }
       return e.class ? `${a} ${e.class}` : a;
     };
-    return () => v(
+    return () => c(
       "p",
       {
         id: e.id,
@@ -386,7 +386,7 @@ const Se = B({
       s.default?.()
     );
   }
-}), Ae = B({
+}), Oe = B({
   name: "KrdsFormGroup",
   props: {
     class: {
@@ -403,11 +403,11 @@ const Se = B({
     }
   },
   setup(e, { slots: o }) {
-    const s = y(() => {
+    const s = g(() => {
       const n = ["form-group"];
       return e.class && n.push(e.class), n;
     });
-    return () => v(
+    return () => c(
       "div",
       {
         id: e.id,
@@ -418,26 +418,26 @@ const Se = B({
     );
   }
 });
-function Fe(e, o) {
-  const s = /* @__PURE__ */ new Date(), n = K(e || s.getFullYear()), t = K(o || s.getMonth() + 1), a = K(null), i = K(null), d = K(null), c = y(() => {
-    const h = s.getFullYear(), u = [];
-    for (let f = h - 10; f <= h + 10; f++)
-      u.push(f);
-    return u;
-  }), m = y(() => Array.from({ length: 12 }, (h, u) => u + 1)), g = () => {
-    a.value = null, i.value = null;
-  }, x = () => {
+function qe(e, o) {
+  const s = /* @__PURE__ */ new Date(), n = K(e || s.getFullYear()), t = K(o || s.getMonth() + 1), a = K(null), r = K(null), v = K(null), p = g(() => {
+    const u = s.getFullYear(), i = [];
+    for (let f = u - 10; f <= u + 10; f++)
+      i.push(f);
+    return i;
+  }), h = g(() => Array.from({ length: 12 }, (u, i) => i + 1)), y = () => {
+    a.value = null, r.value = null;
+  }, S = () => {
     t.value === 1 ? (t.value = 12, n.value -= 1) : t.value -= 1;
-  }, k = () => {
+  }, b = () => {
     t.value === 12 ? (t.value = 1, n.value += 1) : t.value += 1;
-  }, D = (h, u = !1) => {
-    if (u)
-      a.value = h, i.value = h;
-    else if (!a.value || a.value && i.value)
-      a.value = h, i.value = null;
+  }, D = (u, i = !1) => {
+    if (i)
+      a.value = u, r.value = u;
+    else if (!a.value || a.value && r.value)
+      a.value = u, r.value = null;
     else {
       const f = new Date(a.value.replace(/\./g, "-"));
-      new Date(h.replace(/\./g, "-")) < f ? (a.value = h, i.value = null) : i.value = h;
+      new Date(u.replace(/\./g, "-")) < f ? (a.value = u, r.value = null) : r.value = u;
     }
   };
   return {
@@ -445,51 +445,51 @@ function Fe(e, o) {
     currentYear: n,
     currentMonth: t,
     selectedStartDate: a,
-    selectedEndDate: i,
-    activeDateSelector: d,
+    selectedEndDate: r,
+    activeDateSelector: v,
     // Computed
-    yearOptions: c,
-    monthOptions: m,
+    yearOptions: p,
+    monthOptions: h,
     // Methods
-    clearDateSelection: g,
-    prevMonth: x,
-    nextMonth: k,
+    clearDateSelection: y,
+    prevMonth: S,
+    nextMonth: b,
     handleDateSelection: D,
     selectToday: () => {
-      const h = `${s.getFullYear()}.${String(s.getMonth() + 1).padStart(2, "0")}.${String(s.getDate()).padStart(2, "0")}`;
-      D(h, !0);
+      const u = `${s.getFullYear()}.${String(s.getMonth() + 1).padStart(2, "0")}.${String(s.getDate()).padStart(2, "0")}`;
+      D(u, !0);
     },
-    isDateInSelectedRange: (h) => {
-      if (!a.value || !i.value)
+    isDateInSelectedRange: (u) => {
+      if (!a.value || !r.value)
         return { isInRange: !1, isStart: !1, isEnd: !1 };
-      const u = new Date(h.replace(/\./g, "-")), f = new Date(a.value.replace(/\./g, "-")), _ = new Date(i.value.replace(/\./g, "-")), R = h === a.value, E = h === i.value;
-      return { isInRange: u >= f && u <= _, isStart: R, isEnd: E };
+      const i = new Date(u.replace(/\./g, "-")), f = new Date(a.value.replace(/\./g, "-")), x = new Date(r.value.replace(/\./g, "-")), R = u === a.value, L = u === r.value;
+      return { isInRange: i >= f && i <= x, isStart: R, isEnd: L };
     }
   };
 }
-function Oe(e, o, s = {}) {
+function Ne(e, o, s = {}) {
   let n = null;
-  const t = typeof s == "string" ? { ignore: s } : s, { ignore: a, event: i = "click" } = t, d = () => {
-    n = (m) => {
-      const g = m.target;
-      e.value?.contains(g) || a && g.closest(a) || o();
-    }, document.addEventListener(i, n);
-  }, c = () => {
+  const t = typeof s == "string" ? { ignore: s } : s, { ignore: a, event: r = "click" } = t, v = () => {
+    n = (h) => {
+      const y = h.target;
+      e.value?.contains(y) || a && y.closest(a) || o();
+    }, document.addEventListener(r, n);
+  }, p = () => {
     if (n) {
-      const m = typeof s == "string" ? "click" : s.event || "click";
-      document.removeEventListener(m, n), n = null;
+      const h = typeof s == "string" ? "click" : s.event || "click";
+      document.removeEventListener(h, n), n = null;
     }
   };
   return le(() => {
-    d();
-  }), Ke(() => {
-    c();
+    v();
+  }), Se(() => {
+    p();
   }), {
-    setupGlobalListeners: d,
-    removeGlobalListeners: c
+    setupGlobalListeners: v,
+    removeGlobalListeners: p
   };
 }
-const qe = { class: "form-conts" }, Ne = { class: "calendar-input" }, He = ["id", "name", "placeholder", "value", "readonly", "disabled", "required", "autofocus"], je = ["disabled", "aria-expanded"], We = { class: "calendar-head" }, Ye = { class: "calendar-switch-wrap" }, Ge = { class: "calendar-drop-down" }, Ue = ["aria-expanded"], Xe = { class: "calendar-select calendar-year-wrap" }, Je = { class: "sel year" }, Qe = ["onClick"], Ze = { class: "calendar-drop-down" }, et = ["aria-expanded"], tt = { class: "calendar-select calendar-mon-wrap" }, lt = { class: "sel month" }, at = ["onClick"], nt = { class: "calendar-body" }, st = { class: "calendar-table-wrap" }, ot = { class: "calendar-tbl" }, it = ["data-date"], rt = ["aria-pressed", "onClick"], ut = { class: "calendar-footer" }, dt = { class: "calendar-btn-wrap" }, ct = /* @__PURE__ */ B({
+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" }, rt = { class: "calendar-tbl" }, dt = ["data-date"], ut = ["aria-pressed", "onClick"], ct = { class: "calendar-footer" }, ft = { class: "calendar-btn-wrap" }, vt = /* @__PURE__ */ B({
   __name: "KrdsDateInput",
   props: {
     modelValue: { default: void 0 },
@@ -510,65 +510,65 @@ const qe = { class: "form-conts" }, Ne = { class: "calendar-input" }, He = ["id"
   },
   emits: ["update:modelValue", "input", "change", "focus", "blur"],
   setup(e, { emit: o }) {
-    const s = e, n = o, t = K(), a = K(), i = K(!1), d = K(null), {
-      currentYear: c,
-      currentMonth: m,
-      selectedStartDate: g,
-      selectedEndDate: x,
-      yearOptions: k,
+    const s = e, n = o, t = K(), a = K(), r = K(!1), v = K(null), {
+      currentYear: p,
+      currentMonth: h,
+      selectedStartDate: y,
+      selectedEndDate: S,
+      yearOptions: b,
       monthOptions: D,
-      prevMonth: p,
+      prevMonth: m,
       nextMonth: l,
-      handleDateSelection: h,
-      selectToday: u,
+      handleDateSelection: u,
+      selectToday: i,
       isDateInSelectedRange: f
-    } = Fe(s.initialYear, s.initialMonth), _ = () => {
-      i.value && a.value?.focus(), i.value = !1, d.value = null;
+    } = qe(s.initialYear, s.initialMonth), x = () => {
+      r.value && a.value?.focus(), r.value = !1, v.value = null;
     };
-    Oe(t, _, ".calendar-conts");
-    const R = y(() => {
-      const w = ["krds-input", "datepicker", "cal"];
-      return s.size && w.push(s.size), s.class && w.push(s.class), w;
-    }), E = y(() => ["form-conts", "calendar-conts"]), M = y(() => ({
+    Ne(t, x, ".calendar-conts");
+    const R = g(() => {
+      const C = ["krds-input", "datepicker", "cal"];
+      return s.size && C.push(s.size), s.class && C.push(s.class), C;
+    }), L = g(() => ["form-conts", "calendar-conts"]), M = g(() => ({
       "krds-calendar-area": !0,
-      active: i.value
-    })), z = y(() => {
-      const w = c.value, C = m.value, $ = new Date(w, C - 1, 1), G = new Date($);
+      active: r.value
+    })), z = g(() => {
+      const C = p.value, _ = h.value, $ = new Date(C, _ - 1, 1), G = new Date($);
       G.setDate(G.getDate() - $.getDay());
       const W = [], T = new Date(G);
-      for (let se = 0; se < 6; se++) {
+      for (let oe = 0; oe < 6; oe++) {
         const pe = [];
-        for (let he = 0; he < 7; he++) {
-          const $e = `${T.getFullYear()}.${String(T.getMonth() + 1).padStart(2, "0")}.${String(T.getDate()).padStart(2, "0")}`, me = T.getDay();
+        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(),
-            dateString: $e,
-            isCurrentMonth: T.getMonth() === C - 1,
+            dateString: De,
+            isCurrentMonth: T.getMonth() === _ - 1,
             isToday: T.toDateString() === (/* @__PURE__ */ new Date()).toDateString(),
-            isPrevMonth: T.getMonth() < C - 1 || T.getMonth() === 11 && C === 1,
-            isNextMonth: T.getMonth() > C - 1 || T.getMonth() === 0 && C === 12,
-            isSunday: me === 0,
-            isSaturday: me === 6
+            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);
         }
         W.push(pe);
       }
       return W;
-    }), H = (w) => {
-      const C = [];
-      if (w.isPrevMonth && C.push("old"), w.isNextMonth && C.push("new"), w.isToday && C.push("today"), w.isSunday && C.push("day-off"), s.holidays?.includes(w.dateString) && C.push("day-off"), s.eventDates?.includes(w.dateString) && C.push("day-event"), w.isCurrentMonth) {
-        const $ = f(w.dateString);
-        $.isInRange && (C.push("period"), $.isStart && C.push("start"), $.isEnd && C.push("end"));
+    }), H = (C) => {
+      const _ = [];
+      if (C.isPrevMonth && _.push("old"), C.isNextMonth && _.push("new"), C.isToday && _.push("today"), C.isSunday && _.push("day-off"), s.holidays?.includes(C.dateString) && _.push("day-off"), s.eventDates?.includes(C.dateString) && _.push("day-event"), C.isCurrentMonth) {
+        const $ = f(C.dateString);
+        $.isInRange && (_.push("period"), $.isStart && _.push("start"), $.isEnd && _.push("end"));
       }
-      return C;
-    }, V = y(() => [
+      return _;
+    }, V = g(() => [
       {
         id: "get-today",
         label: "오늘",
         class: "text",
         variant: void 0,
         size: "small",
-        handler: u
+        handler: i
       },
       {
         id: "cancel-btn",
@@ -576,7 +576,7 @@ const qe = { class: "form-conts" }, Ne = { class: "calendar-input" }, He = ["id"
         class: void 0,
         variant: "tertiary",
         size: "small",
-        handler: _
+        handler: x
       },
       {
         id: "confirm-btn",
@@ -586,45 +586,45 @@ const qe = { class: "form-conts" }, Ne = { class: "calendar-input" }, He = ["id"
         size: "small",
         handler: U
       }
-    ]), j = (w) => {
-      d.value === w ? d.value = null : d.value = w;
-    }, Z = (w) => {
-      c.value = w, d.value = null;
-    }, ne = (w) => {
-      m.value = w, d.value = null;
+    ]), j = (C) => {
+      v.value === C ? v.value = null : v.value = C;
+    }, Z = (C) => {
+      p.value = C, v.value = null;
+    }, se = (C) => {
+      h.value = C, v.value = null;
     }, U = () => {
-      if (g.value) {
-        if (x.value && g.value !== x.value) {
-          const w = `${g.value} ~ ${x.value}`;
-          n("update:modelValue", w);
+      if (y.value) {
+        if (S.value && y.value !== S.value) {
+          const C = `${y.value} ~ ${S.value}`;
+          n("update:modelValue", C);
         } else
-          n("update:modelValue", g.value);
-        _();
+          n("update:modelValue", y.value);
+        x();
       }
     }, O = () => {
-      i.value = !0, d.value = null, setTimeout(() => {
+      r.value = !0, v.value = null, setTimeout(() => {
         t.value?.querySelector(".calendar-wrap")?.focus();
       }, 50);
     }, q = () => {
-      i.value ? _() : O();
-    }, ve = (w) => {
-      w.code === "Escape" && (d.value ? d.value = null : i.value && _());
-    }, ee = (w) => {
-      const C = w.target;
-      n("update:modelValue", C.value), n("input", w);
-    }, xe = (w) => {
-      n("change", w);
-    }, _e = (w) => {
-      n("focus", w);
-    }, Be = (w) => {
-      n("blur", w);
+      r.value ? x() : O();
+    }, ve = (C) => {
+      C.code === "Escape" && (v.value ? v.value = null : r.value && x());
+    }, ee = (C) => {
+      const _ = C.target;
+      n("update:modelValue", _.value), n("input", C);
+    }, Be = (C) => {
+      n("change", C);
+    }, Ke = (C) => {
+      n("focus", C);
+    }, $e = (C) => {
+      n("blur", C);
     };
-    return (w, C) => (b(), S("div", qe, [
-      r("div", {
-        class: I(E.value)
+    return (C, _) => (k(), w("div", He, [
+      d("div", {
+        class: I(L.value)
       }, [
-        r("div", Ne, [
-          r("input", {
+        d("div", je, [
+          d("input", {
             id: e.id,
             name: e.name,
             class: I(R.value),
@@ -636,137 +636,137 @@ const qe = { class: "form-conts" }, Ne = { class: "calendar-input" }, He = ["id"
             autofocus: e.autofocus,
             type: "text",
             onInput: ee,
-            onChange: xe,
-            onFocus: _e,
-            onBlur: Be
-          }, null, 42, He),
-          r("button", {
+            onChange: Be,
+            onFocus: Ke,
+            onBlur: $e
+          }, null, 42, We),
+          d("button", {
             ref_key: "datePickerButtonRef",
             ref: a,
             class: I(`krds-btn ${e.size || "medium"} icon form-btn-datepicker`),
             disabled: e.disabled,
-            "aria-expanded": i.value,
+            "aria-expanded": r.value,
             type: "button",
             onClick: q
-          }, [...C[4] || (C[4] = [
-            r("span", { class: "sr-only" }, "달력 열기", -1),
-            r("i", { class: "svg-icon ico-calendar" }, null, -1)
-          ])], 10, je)
+          }, [..._[4] || (_[4] = [
+            d("span", { class: "sr-only" }, "달력 열기", -1),
+            d("i", { class: "svg-icon ico-calendar" }, null, -1)
+          ])], 10, Ye)
         ]),
-        r("div", {
+        d("div", {
           ref_key: "datePickerAreaRef",
           ref: t,
           class: I(M.value)
         }, [
-          Q(r("div", {
+          Q(d("div", {
             class: "calendar-wrap bottom",
             "aria-label": "달력",
             tabindex: "0",
             onKeydown: ve
           }, [
-            r("div", We, [
-              r("button", {
+            d("div", Ge, [
+              d("button", {
                 type: "button",
                 class: "btn-cal-move prev",
-                onClick: C[0] || (C[0] = //@ts-ignore
-                (...$) => P(p) && P(p)(...$))
-              }, [...C[5] || (C[5] = [
-                r("span", { class: "sr-only" }, "이전 달", -1)
+                onClick: _[0] || (_[0] = //@ts-ignore
+                (...$) => P(m) && P(m)(...$))
+              }, [..._[5] || (_[5] = [
+                d("span", { class: "sr-only" }, "이전 달", -1)
               ])]),
-              r("div", Ye, [
-                r("div", Ge, [
-                  r("button", {
+              d("div", Ue, [
+                d("div", Xe, [
+                  d("button", {
                     type: "button",
                     class: "btn-cal-switch year",
                     "aria-label": "연도 선택",
-                    "aria-expanded": d.value === "year",
-                    onClick: C[1] || (C[1] = ($) => j("year"))
-                  }, L(P(c)) + "년 ", 9, Ue),
-                  Q(r("div", Xe, [
-                    r("ul", Je, [
-                      (b(!0), S(F, null, N(P(k), ($) => (b(), S("li", { key: $ }, [
-                        r("button", {
+                    "aria-expanded": v.value === "year",
+                    onClick: _[1] || (_[1] = ($) => j("year"))
+                  }, E(P(p)) + "년 ", 9, Je),
+                  Q(d("div", Qe, [
+                    d("ul", Ze, [
+                      (k(!0), w(F, null, N(P(b), ($) => (k(), w("li", { key: $ }, [
+                        d("button", {
                           type: "button",
-                          class: I({ active: $ === P(c) }),
+                          class: I({ active: $ === P(p) }),
                           onClick: (G) => Z($)
-                        }, L($) + "년", 11, Qe)
+                        }, E($) + "년", 11, et)
                       ]))), 128))
                     ])
                   ], 512), [
-                    [te, d.value === "year"]
+                    [te, v.value === "year"]
                   ])
                 ]),
-                r("div", Ze, [
-                  r("button", {
+                d("div", tt, [
+                  d("button", {
                     type: "button",
                     class: "btn-cal-switch month",
                     "aria-label": "월 선택",
-                    "aria-expanded": d.value === "month",
-                    onClick: C[2] || (C[2] = ($) => j("month"))
-                  }, L(P(m).toString().padStart(2, "0")) + "월 ", 9, et),
-                  Q(r("div", tt, [
-                    r("ul", lt, [
-                      (b(!0), S(F, null, N(P(D), ($) => (b(), S("li", { key: $ }, [
-                        r("button", {
+                    "aria-expanded": v.value === "month",
+                    onClick: _[2] || (_[2] = ($) => j("month"))
+                  }, E(P(h).toString().padStart(2, "0")) + "월 ", 9, lt),
+                  Q(d("div", at, [
+                    d("ul", nt, [
+                      (k(!0), w(F, null, N(P(D), ($) => (k(), w("li", { key: $ }, [
+                        d("button", {
                           type: "button",
-                          class: I({ active: $ === P(m) }),
-                          onClick: (G) => ne($)
-                        }, L($.toString().padStart(2, "0")) + "월 ", 11, at)
+                          class: I({ active: $ === P(h) }),
+                          onClick: (G) => se($)
+                        }, E($.toString().padStart(2, "0")) + "월 ", 11, st)
                       ]))), 128))
                     ])
                   ], 512), [
-                    [te, d.value === "month"]
+                    [te, v.value === "month"]
                   ])
                 ])
               ]),
-              r("button", {
+              d("button", {
                 type: "button",
                 class: "btn-cal-move next",
-                onClick: C[3] || (C[3] = //@ts-ignore
+                onClick: _[3] || (_[3] = //@ts-ignore
                 (...$) => P(l) && P(l)(...$))
-              }, [...C[6] || (C[6] = [
-                r("span", { class: "sr-only" }, "다음 달", -1)
+              }, [..._[6] || (_[6] = [
+                d("span", { class: "sr-only" }, "다음 달", -1)
               ])])
             ]),
-            r("div", nt, [
-              r("div", st, [
-                r("table", ot, [
-                  r("caption", null, L(P(c)) + "년 " + L(P(m).toString().padStart(2, "0")) + "월", 1),
-                  C[7] || (C[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, "토")
+            d("div", ot, [
+              d("div", it, [
+                d("table", rt, [
+                  d("caption", null, E(P(p)) + "년 " + E(P(h).toString().padStart(2, "0")) + "월", 1),
+                  _[7] || (_[7] = d("thead", null, [
+                    d("tr", null, [
+                      d("th", null, "일"),
+                      d("th", null, "월"),
+                      d("th", null, "화"),
+                      d("th", null, "수"),
+                      d("th", null, "목"),
+                      d("th", null, "금"),
+                      d("th", null, "토")
                     ])
                   ], -1)),
-                  r("tbody", null, [
-                    (b(!0), S(F, null, N(z.value, ($, G) => (b(), S("tr", { key: G }, [
-                      (b(!0), S(F, null, N($, (W, T) => (b(), S("td", {
+                  d("tbody", null, [
+                    (k(!0), w(F, null, N(z.value, ($, G) => (k(), w("tr", { key: G }, [
+                      (k(!0), w(F, null, N($, (W, T) => (k(), w("td", {
                         key: T,
                         class: I(H(W)),
                         "data-date": W.dateString
                       }, [
-                        r("button", {
+                        d("button", {
                           type: "button",
                           class: "btn-set-date",
                           "aria-pressed": P(f)(W.dateString).isInRange ? "true" : "false",
-                          onClick: (se) => P(h)(W.dateString)
+                          onClick: (oe) => P(u)(W.dateString)
                         }, [
-                          r("span", null, L(W.day), 1)
-                        ], 8, rt)
-                      ], 10, it))), 128))
+                          d("span", null, E(W.day), 1)
+                        ], 8, ut)
+                      ], 10, dt))), 128))
                     ]))), 128))
                   ])
                 ])
               ])
             ]),
-            r("div", ut, [
-              r("div", dt, [
-                (b(!0), S(F, null, N(V.value, ($) => (b(), oe(P(Se), {
+            d("div", ct, [
+              d("div", ft, [
+                (k(!0), w(F, null, N(V.value, ($) => (k(), ie(P(Ce), {
                   id: $.id,
                   key: $.id,
                   class: I($.class),
@@ -774,21 +774,21 @@ const qe = { class: "form-conts" }, Ne = { class: "calendar-input" }, He = ["id"
                   size: $.size,
                   onClick: $.handler
                 }, {
-                  default: ie(() => [
-                    A(L($.label), 1)
+                  default: re(() => [
+                    A(E($.label), 1)
                   ]),
                   _: 2
                 }, 1032, ["id", "class", "variant", "size", "onClick"]))), 128))
               ])
             ])
           ], 544), [
-            [te, i.value]
+            [te, r.value]
           ])
         ], 2)
       ], 2)
     ]));
   }
-}), ft = B({
+}), pt = B({
   name: "KrdsTextarea",
   props: {
     modelValue: {
@@ -864,33 +864,33 @@ const qe = { class: "form-conts" }, Ne = { class: "calendar-input" }, He = ["id"
   emits: ["update:modelValue", "input", "change", "focus", "blur", "keydown", "keyup"],
   setup(e, { emit: o }) {
     const s = K(0);
-    ue(
+    ae(
       () => e.modelValue,
       (l) => {
         s.value = (l || "").length;
       },
       { immediate: !0 }
     );
-    const n = y(() => {
+    const n = g(() => {
       const l = ["krds-input"];
       return e.size && l.push(e.size), e.class && l.push(e.class), l;
-    }), t = y(() => {
+    }), t = g(() => {
       const l = {};
       return e.resize && (l.resize = e.resize), l;
     }), a = (l) => {
-      const u = l.target.value;
-      s.value = u.length, o("update:modelValue", u), o("input", l);
-    }, i = (l) => {
+      const i = l.target.value;
+      s.value = i.length, o("update:modelValue", i), o("input", l);
+    }, r = (l) => {
       o("change", l);
-    }, d = (l) => {
+    }, v = (l) => {
       o("focus", l);
-    }, c = (l) => {
+    }, p = (l) => {
       o("blur", l);
-    }, m = (l) => {
+    }, h = (l) => {
       o("keydown", l);
-    }, g = (l) => {
+    }, y = (l) => {
       o("keyup", l);
-    }, x = y(() => {
+    }, S = g(() => {
       const l = {
         class: n.value,
         style: t.value,
@@ -905,32 +905,32 @@ const qe = { class: "form-conts" }, Ne = { class: "calendar-input" }, He = ["id"
         rows: e.rows,
         cols: e.cols,
         onInput: a,
-        onChange: i,
-        onFocus: d,
-        onBlur: c,
-        onKeydown: m,
-        onKeyup: g
+        onChange: r,
+        onFocus: v,
+        onBlur: p,
+        onKeydown: h,
+        onKeyup: y
       };
       return e.maxlength !== void 0 && (l.maxlength = e.maxlength), e.minlength !== void 0 && (l.minlength = e.minlength), l;
-    }), k = y(() => ["form-conts"]), D = y(() => ["textarea-wrap"]), p = y(() => {
+    }), b = g(() => ["form-conts"]), D = g(() => ["textarea-wrap"]), m = g(() => {
       if (!e.showCount) return null;
-      const l = s.value, h = e.maxlength;
+      const l = s.value, u = e.maxlength;
       return {
         current: l,
-        max: h || ""
+        max: u || ""
       };
     });
     return () => {
-      const l = [v("textarea", x.value)];
-      return p.value && l.push(
-        v("p", { class: "textarea-count" }, [
-          v("span", { class: "count-now" }, p.value.current),
-          v("span", { class: "count-total" }, p.value.max ? `/${p.value.max}` : "")
+      const l = [c("textarea", S.value)];
+      return m.value && l.push(
+        c("p", { class: "textarea-count" }, [
+          c("span", { class: "count-now" }, m.value.current),
+          c("span", { class: "count-total" }, m.value.max ? `/${m.value.max}` : "")
         ])
-      ), v("div", { class: k.value }, [v("div", { class: D.value }, l)]);
+      ), c("div", { class: b.value }, [c("div", { class: D.value }, l)]);
     };
   }
-}), vt = B({
+}), mt = B({
   name: "KrdsSelect",
   props: {
     modelValue: {
@@ -980,17 +980,17 @@ const qe = { class: "form-conts" }, Ne = { class: "calendar-input" }, He = ["id"
   },
   emits: ["update:modelValue", "focus", "blur"],
   setup(e, { emit: o, slots: s }) {
-    const n = y(() => {
-      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 x = g.target, k = x.value === "" ? null : x.value;
-      o("update:modelValue", k);
-    }, a = (g) => {
-      o("focus", g);
-    }, i = (g) => {
-      o("blur", g);
-    }, d = y(() => ({
+    const n = g(() => {
+      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 S = y.target, b = S.value === "" ? null : S.value;
+      o("update:modelValue", b);
+    }, a = (y) => {
+      o("focus", y);
+    }, r = (y) => {
+      o("blur", y);
+    }, v = g(() => ({
       class: n.value,
       value: e.modelValue ?? "",
       title: e.title || e.placeholder,
@@ -999,32 +999,32 @@ const qe = { class: "form-conts" }, Ne = { class: "calendar-input" }, He = ["id"
       disabled: e.disabled || e.readonly,
       onChange: t,
       onFocus: a,
-      onBlur: i
-    })), c = y(() => {
-      const g = ["form-conts"];
-      return e.state !== "default" && g.push(`is-${e.state}`), g;
-    }), m = () => {
-      const g = [];
-      return e.placeholder && !e.modelValue && g.push(v("option", { value: "", disabled: !0, selected: !0 }, e.placeholder)), e.options && e.options.length > 0 && e.options.forEach((x) => {
-        g.push(
-          v(
+      onBlur: r
+    })), p = g(() => {
+      const y = ["form-conts"];
+      return e.state !== "default" && y.push(`is-${e.state}`), y;
+    }), h = () => {
+      const y = [];
+      return e.placeholder && !e.modelValue && y.push(c("option", { value: "", disabled: !0, selected: !0 }, e.placeholder)), e.options && e.options.length > 0 && e.options.forEach((S) => {
+        y.push(
+          c(
             "option",
             {
-              value: x.value,
-              disabled: x.disabled,
-              selected: x.value === e.modelValue
+              value: S.value,
+              disabled: S.disabled,
+              selected: S.value === e.modelValue
             },
-            x.label
+            S.label
           )
         );
-      }), s.default && g.push(...s.default()), g;
+      }), s.default && y.push(...s.default()), y;
     };
     return () => {
-      const g = v("select", d.value, m());
-      return e.sort ? g : v("div", { class: c.value }, [g]);
+      const y = c("select", v.value, h());
+      return e.sort ? y : c("div", { class: p.value }, [y]);
     };
   }
-}), pt = B({
+}), ht = B({
   name: "KrdsFileUpload",
   props: {
     modelValue: {
@@ -1128,14 +1128,14 @@ const qe = { class: "form-conts" }, Ne = { class: "calendar-input" }, He = ["id"
     "preview"
   ],
   setup(e, { emit: o }) {
-    K(!1), y(() => {
+    K(!1), g(() => {
       const n = ["krds-file-upload", "line"];
       return e.class && n.push(e.class), n;
     });
-    const s = y(() => e.modelValue?.length || 0);
-    return y(() => !e.disabled && s.value < e.maxFiles), () => null;
+    const s = g(() => e.modelValue?.length || 0);
+    return g(() => !e.disabled && s.value < e.maxFiles), () => null;
   }
-}), ht = B({
+}), yt = B({
   name: "KrdsBadge",
   props: {
     type: {
@@ -1161,13 +1161,13 @@ const qe = { class: "form-conts" }, Ne = { class: "calendar-input" }, He = ["id"
   },
   emits: ["click"],
   setup(e, { emit: o, slots: s }) {
-    const n = y(() => {
+    const n = g(() => {
       const a = ["krds-badge"];
       return a.push(`${e.type}-${e.color}`), e.size && a.push(e.size), e.number && a.push("number"), e.class && a.push(e.class), a;
     }), t = (a) => {
       o("click", a);
     };
-    return () => v(
+    return () => c(
       "span",
       {
         type: e.type,
@@ -1180,7 +1180,7 @@ const qe = { class: "form-conts" }, Ne = { class: "calendar-input" }, He = ["id"
       s.default?.()
     );
   }
-}), mt = B({
+}), gt = B({
   name: "KrdsTag",
   props: {
     link: {
@@ -1206,39 +1206,39 @@ const qe = { class: "form-conts" }, Ne = { class: "calendar-input" }, He = ["id"
   },
   emits: ["remove"],
   setup(e, { emit: o, slots: s }) {
-    const n = y(() => {
-      const i = ["krds-btn-tag"];
-      return e.link && i.push("link"), e.class && i.push(e.class), i;
-    }), t = (i) => {
-      o("remove", i);
-    }, a = () => v(
+    const n = g(() => {
+      const r = ["krds-btn-tag"];
+      return e.link && r.push("link"), e.class && r.push(e.class), r;
+    }), t = (r) => {
+      o("remove", r);
+    }, a = () => c(
       "button",
       {
         type: "button",
         class: "btn-delete",
         onClick: t
       },
-      [v("span", { class: "sr-only" }, "삭제")]
+      [c("span", { class: "sr-only" }, "삭제")]
     );
     return () => {
-      const i = [], d = s.default?.();
-      if (d && i.push(d), e.link || i.push(a()), e.link) {
-        const c = {
+      const r = [], v = s.default?.();
+      if (v && r.push(v), e.link || r.push(a()), e.link) {
+        const p = {
           href: e.href,
           class: n.value
         };
-        return e.target && (c.target = e.target), e.rel && (c.rel = e.rel), v("a", c, i);
+        return e.target && (p.target = e.target), e.rel && (p.rel = e.rel), c("a", p, r);
       }
-      return v(
+      return c(
         "span",
         {
           class: n.value
         },
-        i
+        r
       );
     };
   }
-}), yt = B({
+}), bt = B({
   name: "KrdsTagGroup",
   props: {
     size: {
@@ -1251,11 +1251,11 @@ const qe = { class: "form-conts" }, Ne = { class: "calendar-input" }, He = ["id"
     }
   },
   setup(e, { slots: o }) {
-    const s = y(() => {
+    const s = g(() => {
       const n = ["krds-tag-wrap"];
       return e.size && n.push(e.size), e.class && n.push(e.class), n;
     });
-    return () => v(
+    return () => c(
       "div",
       {
         class: s.value
@@ -1263,7 +1263,7 @@ const qe = { class: "form-conts" }, Ne = { class: "calendar-input" }, He = ["id"
       o.default?.()
     );
   }
-}), gt = B({
+}), kt = B({
   name: "KrdsMasthead",
   props: {
     class: {
@@ -1273,13 +1273,13 @@ const qe = { class: "form-conts" }, Ne = { class: "calendar-input" }, He = ["id"
   },
   emits: ["click"],
   setup(e, { emit: o, slots: s }) {
-    const n = y(() => {
+    const n = g(() => {
       const a = [""];
       return e.class && a.push(e.class), a;
     }), t = (a) => {
       o("click", a);
     };
-    return () => v(
+    return () => c(
       "div",
       {
         id: "krds-masthead",
@@ -1287,25 +1287,25 @@ const qe = { class: "form-conts" }, Ne = { class: "calendar-input" }, He = ["id"
         onClick: t
       },
       [
-        v("div", { class: "toggle-wrap" }, [
-          v("div", { class: "toggle-head" }, [v("div", { class: "inner" }, [v("span", { class: "nuri-txt" }, s.default?.())])])
+        c("div", { class: "toggle-wrap" }, [
+          c("div", { class: "toggle-head" }, [c("div", { class: "inner" }, [c("span", { class: "nuri-txt" }, s.default?.())])])
         ])
       ]
     );
   }
 });
-let kt = 0;
-function de(e = "krds") {
-  return `${e}-${++kt}`;
+let St = 0;
+function ue(e = "krds") {
+  return `${e}-${++St}`;
 }
-function Sl() {
+function xl() {
   const e = Date.now().toString(36).slice(-4), o = Math.random().toString(36).substring(2, 5);
   return `${e}${o}`;
 }
 function ce(...e) {
   return e.filter(Boolean).join(" ");
 }
-const bt = B({
+const wt = B({
   name: "KrdsToggleSwitch",
   props: {
     modelValue: {
@@ -1348,39 +1348,39 @@ const bt = B({
   },
   emits: ["update:modelValue", "change"],
   setup(e, { emit: o, attrs: s }) {
-    const n = y(() => e.modelValue), t = y(() => ce("krds-form-toggle-switch", e.size, e.class)), a = (d) => {
+    const n = g(() => e.modelValue), t = g(() => ce("krds-form-toggle-switch", e.size, e.class)), a = (v) => {
       if (e.disabled)
         return;
-      const m = d.target.checked;
-      o("update:modelValue", m), o("change", m);
-    }, i = y(() => e.id || de("toggle-switch"));
-    return () => v(
+      const h = v.target.checked;
+      o("update:modelValue", h), o("change", h);
+    }, r = g(() => e.id || ue("toggle-switch"));
+    return () => c(
       "div",
       {
         class: t.value
       },
       [
-        v("input", {
+        c("input", {
           type: "checkbox",
-          id: i.value,
+          id: r.value,
           name: e.name,
           checked: n.value,
           disabled: e.disabled,
           onChange: a,
           ...s
         }),
-        v(
+        c(
           "label",
           {
-            for: i.value
+            for: r.value
           },
           [
-            v(
+            c(
               "span",
               {
                 class: "switch-toggle"
               },
-              [v("i")]
+              [c("i")]
             ),
             e.label || ""
           ]
@@ -1388,7 +1388,7 @@ const bt = B({
       ]
     );
   }
-}), St = B({
+}), Ct = B({
   name: "KrdsCheckArea",
   props: {
     class: {
@@ -1403,7 +1403,7 @@ const bt = B({
   setup(e, { slots: o }) {
     return () => {
       const s = ["krds-check-area"];
-      return e.column && s.push("chk-column"), e.class && s.push(e.class), v(
+      return e.column && s.push("chk-column"), e.class && s.push(e.class), c(
         "div",
         {
           class: s
@@ -1412,7 +1412,7 @@ const bt = B({
       );
     };
   }
-}), wt = B({
+}), xt = B({
   name: "KrdsCheckbox",
   props: {
     modelValue: {
@@ -1444,43 +1444,43 @@ const bt = B({
   emits: ["update:modelValue"],
   slots: Object,
   setup(e, { emit: o, attrs: s, slots: n }) {
-    const t = y(() => e.modelValue), a = y(() => {
-      const c = e.chip ? "krds-form-chip" : "krds-form-check";
-      return ce(c, e.size, e.class);
-    }), i = (c) => {
+    const t = g(() => e.modelValue), a = g(() => {
+      const p = e.chip ? "krds-form-chip" : "krds-form-check";
+      return ce(p, e.size, e.class);
+    }), r = (p) => {
       if (e.disabled)
         return;
-      const g = c.target.checked;
-      o("update:modelValue", g);
-    }, d = y(() => e.id || de("checkbox"));
+      const y = p.target.checked;
+      o("update:modelValue", y);
+    }, v = g(() => e.id || ue("checkbox"));
     return () => {
-      const c = [
-        v("input", {
+      const p = [
+        c("input", {
           type: "checkbox",
-          id: d.value,
+          id: v.value,
           checked: t.value,
           disabled: e.disabled,
-          onChange: i,
+          onChange: r,
           ...s
         }),
-        v(
+        c(
           "label",
           {
-            for: d.value
+            for: v.value
           },
           n.default?.()
         )
       ];
-      return n.description && !e.chip && c.push(v("div", { class: "krds-form-check-cnt" }, v("p", { class: "krds-form-check-p" }, n.description()))), v(
+      return n.description && !e.chip && p.push(c("div", { class: "krds-form-check-cnt" }, c("p", { class: "krds-form-check-p" }, n.description()))), c(
         "div",
         {
           class: a.value
         },
-        c
+        p
       );
     };
   }
-}), Ct = B({
+}), _t = B({
   name: "KrdsRadio",
   props: {
     modelValue: {
@@ -1520,44 +1520,44 @@ const bt = B({
   emits: ["update:modelValue"],
   slots: Object,
   setup(e, { emit: o, attrs: s, slots: n }) {
-    const t = y(() => e.modelValue === e.value), a = y(() => {
-      const m = e.chip ? "krds-form-chip" : "krds-form-check";
-      return ce(m, e.size, e.class);
-    }), i = (m) => {
+    const t = g(() => e.modelValue === e.value), a = g(() => {
+      const h = e.chip ? "krds-form-chip" : "krds-form-check";
+      return ce(h, e.size, e.class);
+    }), r = (h) => {
       if (e.disabled)
         return;
-      m.target.checked && o("update:modelValue", e.value);
-    }, d = y(() => e.id || de("radio")), c = y(() => e.name);
+      h.target.checked && o("update:modelValue", e.value);
+    }, v = g(() => e.id || ue("radio")), p = g(() => e.name);
     return () => {
-      const m = [
-        v("input", {
+      const h = [
+        c("input", {
           type: "radio",
-          id: d.value,
-          name: c.value,
+          id: v.value,
+          name: p.value,
           value: String(e.value),
           checked: t.value,
           disabled: e.disabled,
-          onChange: i,
+          onChange: r,
           ...s
         }),
-        v(
+        c(
           "label",
           {
-            for: d.value
+            for: v.value
           },
           n.default?.()
         )
       ];
-      return n.description && !e.chip && m.push(v("div", { class: "krds-form-check-cnt" }, v("p", { class: "krds-form-check-p" }, n.description()))), v(
+      return n.description && !e.chip && h.push(c("div", { class: "krds-form-check-cnt" }, c("p", { class: "krds-form-check-p" }, n.description()))), c(
         "div",
         {
           class: a.value
         },
-        m
+        h
       );
     };
   }
-}), xt = B({
+}), Bt = B({
   name: "KrdsStepIndicator",
   props: {
     modelValue: {
@@ -1571,21 +1571,21 @@ const bt = B({
   },
   emits: ["update:modelValue"],
   setup(e, { slots: o }) {
-    const s = y(() => {
-      const d = ["krds-step-wrap"];
-      return e.class && d.push(e.class), d;
-    }), n = (d) => {
-      const c = e.modelValue || 0;
-      return d < c ? "done" : d === c ? "active" : "pending";
+    const s = g(() => {
+      const v = ["krds-step-wrap"];
+      return e.class && v.push(e.class), v;
+    }), n = (v) => {
+      const p = e.modelValue || 0;
+      return v < p ? "done" : v === p ? "active" : "pending";
     }, t = K(0), a = () => {
       t.value = 0;
-    }, i = () => t.value++;
-    return De("stepIndicator", {
-      activeStep: y(() => e.modelValue || 0),
+    }, r = () => t.value++;
+    return Ve("stepIndicator", {
+      activeStep: g(() => e.modelValue || 0),
       getStepStatus: n,
-      getNextStepIndex: i,
+      getNextStepIndex: r,
       resetStepIndex: a
-    }), () => (a(), v(
+    }), () => (a(), c(
       "ol",
       {
         class: s.value
@@ -1593,7 +1593,7 @@ const bt = B({
       o.default?.()
     ));
   }
-}), _t = B({
+}), Kt = B({
   name: "KrdsStep",
   props: {
     step: {
@@ -1615,28 +1615,28 @@ const bt = B({
   },
   emits: ["click"],
   setup(e, { emit: o, slots: s }) {
-    const n = Ve("stepIndicator"), t = n ? n.getNextStepIndex() : -1, a = y(() => e.status ? e.status : n && t >= 0 ? n.getStepStatus(t) : "pending"), i = y(() => {
-      const c = [a.value];
-      return e.class && c.push(e.class), c;
-    }), d = (c) => {
-      o("click", c, e.step);
+    const n = ze("stepIndicator"), t = n ? n.getNextStepIndex() : -1, a = g(() => e.status ? e.status : n && t >= 0 ? n.getStepStatus(t) : "pending"), r = g(() => {
+      const p = [a.value];
+      return e.class && p.push(e.class), p;
+    }), v = (p) => {
+      o("click", p, e.step);
     };
     return () => {
-      const c = a.value === "active";
-      return v(
+      const p = a.value === "active";
+      return c(
         "li",
         {
-          class: i.value,
-          onClick: d
+          class: r.value,
+          onClick: v
         },
         [
-          v("span", [
+          c("span", [
             // 현재 단계 표시 (활성 상태일 때만)
-            c && v("em", { class: "sr-only" }, "현재단계"),
+            p && c("em", { class: "sr-only" }, "현재단계"),
             // 단계 번호
-            v("i", { class: "step" }, e.step),
+            c("i", { class: "step" }, e.step),
             // 단계 제목
-            v("span", { class: "step-tit" }, e.title),
+            c("span", { class: "step-tit" }, e.title),
             // 슬롯 내용 (추가 콘텐츠가 있는 경우)
             s.default?.()
           ])
@@ -1644,7 +1644,7 @@ const bt = B({
       );
     };
   }
-}), Bt = B({
+}), $t = B({
   name: "KrdsSkipLink",
   props: {
     /**
@@ -1672,14 +1672,14 @@ const bt = B({
     }
   },
   setup(e, { slots: o }) {
-    return () => v(
+    return () => c(
       "div",
       {
         id: e.id,
         class: e.class
       },
       [
-        v(
+        c(
           "a",
           {
             href: e.href
@@ -1689,7 +1689,7 @@ const bt = B({
       ]
     );
   }
-}), $t = ["id", "aria-label"], Kt = { class: "breadcrumb" }, Dt = ["href", "aria-current", "onClick"], Vt = { key: 0 }, zt = /* @__PURE__ */ B({
+}), Dt = ["id", "aria-label"], Vt = { class: "breadcrumb" }, zt = ["href", "aria-current", "onClick"], Et = { key: 0 }, It = /* @__PURE__ */ B({
   __name: "KrdsBreadcrumb",
   props: {
     items: {},
@@ -1699,30 +1699,30 @@ const bt = B({
   },
   emits: ["item-click"],
   setup(e, { emit: o }) {
-    const s = e, n = o, t = (i) => i === s.items.length - 1, a = (i, d) => {
-      i.onClick && i.onClick(d), n("item-click", i, d);
+    const s = e, n = o, t = (r) => r === s.items.length - 1, a = (r, v) => {
+      r.onClick && r.onClick(v), n("item-click", r, v);
     };
-    return (i, d) => (b(), S("nav", {
+    return (r, v) => (k(), w("nav", {
       id: e.id,
       class: "krds-breadcrumb-wrap",
       "aria-label": e.ariaLabel
     }, [
-      r("ol", Kt, [
-        (b(!0), S(F, null, N(e.items, (c, m) => (b(), S("li", {
-          key: `breadcrumb-${m}`,
-          class: I({ home: m === 0 && e.showHomeIcon })
+      d("ol", Vt, [
+        (k(!0), w(F, null, N(e.items, (p, h) => (k(), w("li", {
+          key: `breadcrumb-${h}`,
+          class: I({ home: h === 0 && e.showHomeIcon })
         }, [
-          r("a", {
-            href: c.href || "#",
+          d("a", {
+            href: p.href || "#",
             class: "txt",
-            "aria-current": t(m) ? "page" : void 0,
-            onClick: (g) => a(c, g)
+            "aria-current": t(h) ? "page" : void 0,
+            onClick: (y) => a(p, y)
           }, [
-            m === 0 && e.showHomeIcon ? Y("", !0) : (b(), S("span", Vt, L(c.text), 1))
-          ], 8, Dt)
+            h === 0 && e.showHomeIcon ? Y("", !0) : (k(), w("span", Et, E(p.text), 1))
+          ], 8, zt)
         ], 2))), 128))
       ])
-    ], 8, $t));
+    ], 8, Dt));
   }
 }), Lt = B({
   name: "KrdsInPageNavigation",
@@ -1759,47 +1759,47 @@ const bt = B({
   emits: ["itemClick"],
   slots: Object,
   setup(e, { emit: o, slots: s }) {
-    const n = K(""), t = K(/* @__PURE__ */ new Map()), a = y(() => {
-      const p = ["krds-in-page-navigation-type"];
-      return e.class && p.push(e.class), p;
-    }), i = () => {
-      const p = e.headerTopSelector, l = e.headerInnerSelector, h = document.querySelector(p)?.clientHeight || 0, u = document.querySelector(l)?.clientHeight || 0;
-      return h + u;
-    }, d = (p, l) => {
-      if (o("itemClick", p, l), p.href.startsWith("#")) {
+    const n = K(""), t = K(/* @__PURE__ */ new Map()), a = g(() => {
+      const m = ["krds-in-page-navigation-type"];
+      return e.class && m.push(e.class), m;
+    }), r = () => {
+      const m = e.headerTopSelector, l = e.headerInnerSelector, u = document.querySelector(m)?.clientHeight || 0, i = document.querySelector(l)?.clientHeight || 0;
+      return u + i;
+    }, v = (m, l) => {
+      if (o("itemClick", m, l), m.href.startsWith("#")) {
         l.preventDefault();
-        const h = document.querySelector(p.href);
-        if (h) {
-          const u = i();
+        const u = document.querySelector(m.href);
+        if (u) {
+          const i = r();
           if (window.scrollTo({
             left: 0,
-            top: h.getBoundingClientRect().top + window.scrollY - u,
+            top: u.getBoundingClientRect().top + window.scrollY - i,
             behavior: "smooth"
-          }), n.value = p.href, l instanceof KeyboardEvent) {
-            const f = h.querySelector(".sec-tit, h1, h2, h3, h4, h5, h6");
+          }), n.value = m.href, l instanceof KeyboardEvent) {
+            const f = u.querySelector(".sec-tit, h1, h2, h3, h4, h5, h6");
             f && f instanceof HTMLElement && (f.setAttribute("tabindex", "-1"), f.focus({ preventScroll: !0 }));
           }
         }
       }
-    }, c = () => {
-      t.value.clear(), e.items && e.items.filter((p) => p.href.startsWith("#")).forEach((p) => {
-        const l = document.querySelector(p.href);
-        l && t.value.set(p.href, l);
+    }, p = () => {
+      t.value.clear(), e.items && e.items.filter((m) => m.href.startsWith("#")).forEach((m) => {
+        const l = document.querySelector(m.href);
+        l && t.value.set(m.href, l);
       });
-    }, m = () => {
+    }, h = () => {
       if (!e.autoActive || !e.items || t.value.size === 0) return;
-      const p = window.innerHeight, l = Math.ceil(p / 5), h = window.scrollY + p, u = document.body.scrollHeight, f = e.items.filter((z) => z.href.startsWith("#") && t.value.has(z.href)).map((z) => ({
+      const m = window.innerHeight, l = Math.ceil(m / 5), u = window.scrollY + m, i = 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
       }));
       if (f.length === 0) return;
-      const _ = f[0], R = f[f.length - 1], E = _.element.offsetTop;
+      const x = f[0], R = f[f.length - 1], L = x.element.offsetTop;
       let M = "";
-      if (h >= u)
+      if (u >= i)
         M = R.href;
-      else if (window.scrollY <= E)
-        M = _.href;
+      else if (window.scrollY <= L)
+        M = x.href;
       else
         for (const z of f) {
           const H = z.element.offsetHeight, V = z.element.offsetTop - l;
@@ -1809,56 +1809,56 @@ const bt = B({
           }
         }
       M && M !== n.value && (n.value = M);
-    }, g = () => {
+    }, y = () => {
       if (!e.items) return;
-      const p = e.items.find((l) => l.active);
-      p ? n.value = p.href : e.items.length > 0 && (n.value = e.items[0].href);
+      const m = e.items.find((l) => l.active);
+      m ? n.value = m.href : e.items.length > 0 && (n.value = e.items[0].href);
     };
     le(() => {
-      if (g(), e.autoActive) {
-        c(), m(), window.addEventListener("scroll", m, { passive: !0 });
-        const p = new MutationObserver(() => {
-          c();
+      if (y(), e.autoActive) {
+        p(), h(), window.addEventListener("scroll", h, { passive: !0 });
+        const m = new MutationObserver(() => {
+          p();
         });
-        p.observe(document.body, {
+        m.observe(document.body, {
           childList: !0,
           subtree: !0
         }), X(() => {
-          p.disconnect();
+          m.disconnect();
         });
       }
     }), X(() => {
-      e.autoActive && (window.removeEventListener("scroll", m), t.value.clear());
+      e.autoActive && (window.removeEventListener("scroll", h), t.value.clear());
     });
-    const x = () => !e.caption && !e.title ? null : v("div", { class: "in-page-navigation-header" }, [
-      e.caption && v("p", { class: "quick-caption" }, e.caption),
-      e.title && v("p", { class: "quick-title" }, e.title)
-    ]), k = () => {
+    const S = () => !e.caption && !e.title ? null : c("div", { class: "in-page-navigation-header" }, [
+      e.caption && c("p", { class: "quick-caption" }, e.caption),
+      e.title && c("p", { class: "quick-title" }, e.title)
+    ]), b = () => {
       if (!e.items) return null;
-      const p = e.items.map((l) => {
-        const h = n.value === l.href || !e.autoActive && l.active;
-        return v("li", { key: l.href }, [
-          v(
+      const m = e.items.map((l) => {
+        const u = n.value === l.href || !e.autoActive && l.active;
+        return c("li", { key: l.href }, [
+          c(
             "a",
             {
               href: l.href,
-              class: h ? "active" : "",
-              onClick: (u) => d(l, u),
-              onKeydown: (u) => {
-                (u.key === "Enter" || u.key === " ") && (u.preventDefault(), d(l, u));
+              class: u ? "active" : "",
+              onClick: (i) => v(l, i),
+              onKeydown: (i) => {
+                (i.key === "Enter" || i.key === " ") && (i.preventDefault(), v(l, i));
               }
             },
             l.text
           )
         ]);
       });
-      return v("nav", { class: "in-page-navigation-list" }, [v("ul", {}, p)]);
-    }, D = () => s.action ? v("div", { class: "in-page-navigation-action" }, [s.action()]) : null;
-    return () => v("div", { class: a.value }, [
-      v("div", { class: "krds-in-page-navigation-area" }, [x(), k(), D()].filter(Boolean))
+      return c("nav", { class: "in-page-navigation-list" }, [c("ul", {}, m)]);
+    }, D = () => s.action ? c("div", { class: "in-page-navigation-action" }, [s.action()]) : null;
+    return () => c("div", { class: a.value }, [
+      c("div", { class: "krds-in-page-navigation-area" }, [S(), b(), D()].filter(Boolean))
     ]);
   }
-}), It = ["id"], Et = { class: "page-links" }, Mt = ["href", "aria-current", "onClick"], Rt = { key: 0 }, Tt = ["aria-label"], Pt = /* @__PURE__ */ B({
+}), Mt = ["id"], Rt = { class: "page-links" }, Tt = ["href", "aria-current", "onClick"], Pt = { key: 0 }, At = ["aria-label"], Ft = /* @__PURE__ */ B({
   __name: "KrdsPagination",
   props: {
     modelValue: { default: 1 },
@@ -1870,183 +1870,183 @@ const bt = B({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: o }) {
-    const s = e, n = o, t = y(() => Math.max(1, s.min)), a = y(() => s.modelValue ?? t.value), i = y(() => a.value <= t.value), d = y(() => a.value >= s.max), c = y(() => {
-      if (!i.value)
+    const s = e, n = o, t = g(() => Math.max(1, s.min)), a = g(() => s.modelValue ?? t.value), r = g(() => a.value <= t.value), v = g(() => a.value >= s.max), p = g(() => {
+      if (!r.value)
         return "#";
-    }), m = y(() => {
-      if (!d.value)
+    }), h = g(() => {
+      if (!v.value)
         return "#";
-    }), g = y(() => {
-      const { pageRange: p, max: l } = s, h = 1, u = [];
-      if (l <= p + 2 * h)
+    }), y = g(() => {
+      const { pageRange: m, max: l } = s, u = 1, i = [];
+      if (l <= m + 2 * u)
         for (let f = t.value; f <= l; f++)
-          u.push({
+          i.push({
             type: "page",
             key: `page-${f}`,
             page: f,
             href: "#"
           });
       else {
-        const f = Math.min(h, l), _ = Math.max(l - h + 1, 1), R = Math.max(t.value, a.value - Math.floor(p / 2)), E = Math.min(l, R + p - 1), M = Math.max(t.value, E - p + 1);
+        const f = Math.min(u, l), x = Math.max(l - u + 1, 1), R = Math.max(t.value, a.value - Math.floor(m / 2)), L = Math.min(l, R + m - 1), M = Math.max(t.value, L - m + 1);
         for (let V = t.value; V <= f; V++)
-          u.push({
+          i.push({
             type: "page",
             key: `page-${V}`,
             page: V,
             href: "#"
           });
-        M > f + 1 && u.push({
+        M > f + 1 && i.push({
           type: "ellipsis",
           key: "ellipsis-left",
           ariaLabel: "페이지 생략"
         });
-        const z = Math.max(M, f + 1), H = Math.min(E, _ - 1);
+        const z = Math.max(M, f + 1), H = Math.min(L, x - 1);
         for (let V = z; V <= H; V++)
-          u.push({
+          i.push({
             type: "page",
             key: `page-${V}`,
             page: V,
             href: "#"
           });
-        E < _ - 1 && u.push({
+        L < x - 1 && i.push({
           type: "ellipsis",
           key: "ellipsis-right",
           ariaLabel: "페이지 생략"
         });
-        for (let V = _; V <= l; V++)
-          u.push({
+        for (let V = x; V <= l; V++)
+          i.push({
             type: "page",
             key: `page-${V}`,
             page: V,
             href: "#"
           });
       }
-      return u;
-    }), x = (p, l) => {
-      if (p === a.value) {
+      return i;
+    }), S = (m, l) => {
+      if (m === a.value) {
         l.preventDefault();
         return;
       }
-      n("update:modelValue", p);
-    }, k = (p) => {
-      if (i.value) {
-        p.preventDefault();
+      n("update:modelValue", m);
+    }, b = (m) => {
+      if (r.value) {
+        m.preventDefault();
         return;
       }
       const l = a.value - 1;
       n("update:modelValue", l);
-    }, D = (p) => {
-      if (d.value) {
-        p.preventDefault();
+    }, D = (m) => {
+      if (v.value) {
+        m.preventDefault();
         return;
       }
       const l = a.value + 1;
       n("update:modelValue", l);
     };
-    return (p, l) => {
-      const h = ze("sr-only");
-      return b(), S("div", {
+    return (m, l) => {
+      const u = Ee("sr-only");
+      return k(), w("div", {
         id: e.id,
         class: "krds-pagination"
       }, [
-        (b(), oe(ye(i.value ? "span" : "a"), {
-          href: i.value ? void 0 : c.value,
-          class: I(["page-navi", "prev", { disabled: i.value }]),
-          onClick: k
+        (k(), ie(ye(r.value ? "span" : "a"), {
+          href: r.value ? void 0 : p.value,
+          class: I(["page-navi", "prev", { disabled: r.value }]),
+          onClick: b
         }, {
-          default: ie(() => [...l[0] || (l[0] = [
+          default: re(() => [...l[0] || (l[0] = [
             A(" 이전 ", -1)
           ])]),
           _: 1
         }, 8, ["href", "class"])),
-        r("div", Et, [
-          (b(!0), S(F, null, N(g.value, (u) => (b(), S(F, {
-            key: u.key
+        d("div", Rt, [
+          (k(!0), w(F, null, N(y.value, (i) => (k(), w(F, {
+            key: i.key
           }, [
-            u.type === "page" ? (b(), S("a", {
+            i.type === "page" ? (k(), w("a", {
               key: 0,
-              href: u.href || "#",
-              class: I(["page-link", { active: u.page === a.value }]),
-              "aria-current": u.page === a.value ? "page" : void 0,
-              onClick: (f) => x(u.page, f)
+              href: i.href || "#",
+              class: I(["page-link", { active: i.page === a.value }]),
+              "aria-current": i.page === a.value ? "page" : void 0,
+              onClick: (f) => S(i.page, f)
             }, [
-              u.page === a.value ? Q((b(), S("span", Rt, [...l[1] || (l[1] = [
+              i.page === a.value ? Q((k(), w("span", Pt, [...l[1] || (l[1] = [
                 A("현재페이지", -1)
               ])])), [
-                [h]
+                [u]
               ]) : Y("", !0),
-              A(" " + L(u.page), 1)
-            ], 10, Mt)) : u.type === "ellipsis" ? (b(), S("span", {
+              A(" " + E(i.page), 1)
+            ], 10, Tt)) : i.type === "ellipsis" ? (k(), w("span", {
               key: 1,
               class: "page-link link-dot",
-              "aria-label": u.ariaLabel
-            }, null, 8, Tt)) : Y("", !0)
+              "aria-label": i.ariaLabel
+            }, null, 8, At)) : Y("", !0)
           ], 64))), 128))
         ]),
-        (b(), oe(ye(d.value ? "span" : "a"), {
-          href: d.value ? void 0 : m.value,
-          class: I(["page-navi", "next", { disabled: d.value }]),
+        (k(), ie(ye(v.value ? "span" : "a"), {
+          href: v.value ? void 0 : h.value,
+          class: I(["page-navi", "next", { disabled: v.value }]),
           onClick: D
         }, {
-          default: ie(() => [...l[2] || (l[2] = [
+          default: re(() => [...l[2] || (l[2] = [
             A(" 다음 ", -1)
           ])]),
           _: 1
         }, 8, ["href", "class"]))
-      ], 8, It);
+      ], 8, Mt);
     };
   }
-}), At = { class: "inner help-panel-flexible" }, Ft = { class: "help-panel-wrap" }, Ot = { class: "help-conts-area" }, qt = /* @__PURE__ */ B({
+}), Ot = { class: "inner help-panel-flexible" }, qt = { class: "help-panel-wrap" }, Nt = { class: "help-conts-area" }, Ht = /* @__PURE__ */ B({
   __name: "KrdsPanel",
   props: {
     modelValue: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
   setup(e, { emit: o }) {
-    const s = e, n = o, t = y({
+    const s = e, n = o, t = g({
       get: () => s.modelValue,
-      set: (d) => n("update:modelValue", d)
+      set: (v) => n("update:modelValue", v)
     }), a = () => {
       t.value = !0;
-    }, i = () => {
+    }, r = () => {
       t.value = !1;
     };
-    return (d, c) => (b(), S("div", At, [
-      r("button", {
+    return (v, p) => (k(), w("div", Ot, [
+      d("button", {
         type: "button",
         class: "krds-btn small tertiary btn-help-panel expand btn-help-exec",
         onClick: a
-      }, [...c[0] || (c[0] = [
-        r("i", { class: "svg-icon ico-fold" }, null, -1),
+      }, [...p[0] || (p[0] = [
+        d("i", { class: "svg-icon ico-fold" }, null, -1),
         A(" 도움말 ", -1)
       ])]),
-      r("div", {
+      d("div", {
         class: I(["krds-help-panel", { expand: t.value }])
       }, [
-        r("div", Ft, [
-          r("div", Ot, [
-            J(d.$slots, "default"),
-            r("button", {
+        d("div", qt, [
+          d("div", Nt, [
+            J(v.$slots, "default"),
+            d("button", {
               type: "button",
               class: "krds-btn small tertiary btn-help-panel fold",
-              onClick: i
-            }, [...c[1] || (c[1] = [
-              r("span", { class: "sr-only" }, "도움말", -1),
+              onClick: r
+            }, [...p[1] || (p[1] = [
+              d("span", { class: "sr-only" }, "도움말", -1),
               A(" 접어두기 ", -1),
-              r("i", { class: "svg-icon ico-angle right" }, null, -1)
+              d("i", { class: "svg-icon ico-angle right" }, null, -1)
             ])])
           ])
         ])
       ], 2)
     ]));
   }
-}), Nt = { class: "tooltip-action" }, Ht = {
+}), jt = { class: "tooltip-action" }, Wt = {
   key: 0,
   class: "svg-icon ico-help"
-}, jt = {
+}, Yt = {
   key: 1,
   class: "svg-icon ico-tooltip"
-}, Wt = { class: "tooltip-title" }, Yt = { class: "tooltip-contents" }, Gt = /* @__PURE__ */ B({
+}, Gt = { class: "tooltip-title" }, Ut = { class: "tooltip-contents" }, Xt = /* @__PURE__ */ B({
   __name: "KrdsContextualHelp",
   props: {
     tooltipTitle: { default: "도움말 제목" },
@@ -2054,84 +2054,84 @@ const bt = B({
     position: { default: "top left" }
   },
   setup(e) {
-    const o = e, s = K(), n = K(), t = K(), a = K(), i = K(!1), d = () => {
-      const l = i.value;
-      g(), l || c();
-    }, c = () => {
+    const o = e, s = K(), n = K(), t = K(), a = K(), r = K(!1), v = () => {
+      const l = r.value;
+      y(), l || p();
+    }, p = () => {
       if (!t.value || !n.value) return;
-      i.value = !0, t.value.style.display = "block", n.value.setAttribute("aria-expanded", "true"), t.value.querySelector('a, button, [tabindex="0"], input, textarea, select')?.focus(), x();
-    }, m = () => {
-      !t.value || !n.value || (i.value = !1, t.value.style.display = "none", n.value.setAttribute("aria-expanded", "false"));
-    }, g = () => {
-      const l = document.querySelectorAll(".krds-contextual-help .tooltip-popover"), h = document.querySelectorAll(".krds-contextual-help .tooltip-btn");
-      l.forEach((u) => {
-        u.style.display = "none";
-      }), h.forEach((u) => {
-        u.setAttribute("aria-expanded", "false");
-      }), i.value = !1;
-    }, x = () => {
+      r.value = !0, t.value.style.display = "block", n.value.setAttribute("aria-expanded", "true"), t.value.querySelector('a, button, [tabindex="0"], input, textarea, select')?.focus(), S();
+    }, h = () => {
+      !t.value || !n.value || (r.value = !1, t.value.style.display = "none", n.value.setAttribute("aria-expanded", "false"));
+    }, y = () => {
+      const l = document.querySelectorAll(".krds-contextual-help .tooltip-popover"), u = document.querySelectorAll(".krds-contextual-help .tooltip-btn");
+      l.forEach((i) => {
+        i.style.display = "none";
+      }), u.forEach((i) => {
+        i.setAttribute("aria-expanded", "false");
+      }), r.value = !1;
+    }, S = () => {
       if (!s.value || !t.value) return;
-      const l = window.innerWidth <= 768, h = s.value.querySelector(".tooltip-action");
+      const l = window.innerWidth <= 768, u = s.value.querySelector(".tooltip-action");
       if (l) {
-        const f = getComputedStyle(document.querySelector(":root")).getPropertyValue("--krds-contents-padding-x").trim().split("px")[0], R = h.getBoundingClientRect().left - parseInt(f), E = document.body.clientWidth - parseInt(f) * 2;
-        t.value.style.left = `-${R}px`, t.value.style.width = `${E}px`;
+        const f = getComputedStyle(document.querySelector(":root")).getPropertyValue("--krds-contents-padding-x").trim().split("px")[0], R = u.getBoundingClientRect().left - parseInt(f), L = document.body.clientWidth - parseInt(f) * 2;
+        t.value.style.left = `-${R}px`, t.value.style.width = `${L}px`;
       } else
         t.value.style.left = "", t.value.style.right = "", t.value.style.width = "360px";
-    }, k = (l) => {
-      (l.key === "Escape" || l.key === "Esc") && g();
+    }, b = (l) => {
+      (l.key === "Escape" || l.key === "Esc") && y();
     }, D = (l) => {
-      l.target.closest(".tooltip-action") || g();
-    }, p = () => {
-      i.value && x();
+      l.target.closest(".tooltip-action") || y();
+    }, m = () => {
+      r.value && S();
     };
     return le(() => {
-      s.value && (n.value && n.value.setAttribute("aria-expanded", "false"), t.value && t.value.setAttribute("role", "tooltip"), document.addEventListener("keydown", k), document.addEventListener("click", D), window.addEventListener("resize", p));
+      s.value && (n.value && n.value.setAttribute("aria-expanded", "false"), t.value && t.value.setAttribute("role", "tooltip"), document.addEventListener("keydown", b), document.addEventListener("click", D), window.addEventListener("resize", m));
     }), X(() => {
-      document.removeEventListener("keydown", k), document.removeEventListener("click", D), window.removeEventListener("resize", p);
-    }), (l, h) => (b(), S("div", {
+      document.removeEventListener("keydown", b), document.removeEventListener("click", D), window.removeEventListener("resize", m);
+    }), (l, u) => (k(), w("div", {
       ref_key: "containerRef",
       ref: s,
       class: I(["krds-contextual-help", o.position])
     }, [
-      r("div", Nt, [
-        r("button", {
+      d("div", jt, [
+        d("button", {
           ref_key: "tooltipBtnRef",
           ref: n,
           type: "button",
           class: "krds-btn medium icon tooltip-btn",
-          onClick: d
+          onClick: v
         }, [
-          h[0] || (h[0] = r("span", { class: "sr-only" }, "도움말", -1)),
-          o.helpIcon ? (b(), S("i", Ht)) : (b(), S("i", jt))
+          u[0] || (u[0] = d("span", { class: "sr-only" }, "도움말", -1)),
+          o.helpIcon ? (k(), w("i", Wt)) : (k(), w("i", Yt))
         ], 512),
-        r("div", {
+        d("div", {
           ref_key: "tooltipPopoverRef",
           ref: t,
           class: "tooltip-popover",
           role: "tooltip"
         }, [
-          r("h4", Wt, L(o.tooltipTitle), 1),
-          r("div", Yt, [
+          d("h4", Gt, E(o.tooltipTitle), 1),
+          d("div", Ut, [
             J(l.$slots, "default")
           ]),
-          r("button", {
+          d("button", {
             ref_key: "closeBtnRef",
             ref: a,
             type: "button",
             class: "krds-btn xsmall icon tooltip-close",
-            onClick: m
-          }, [...h[1] || (h[1] = [
-            r("span", { class: "sr-only" }, "닫기", -1),
-            r("i", { class: "svg-icon ico-modal-close" }, null, -1)
+            onClick: h
+          }, [...u[1] || (u[1] = [
+            d("span", { class: "sr-only" }, "닫기", -1),
+            d("i", { class: "svg-icon ico-modal-close" }, null, -1)
           ])], 512)
         ], 512)
       ])
     ], 2));
   }
-}), Ut = {
+}), Jt = {
   key: 0,
   class: "coach-balloon"
-}, Xt = { class: "coach-tit" }, Jt = { class: "desc" }, Qt = { class: "coach-controls" }, Zt = { class: "num" }, el = { class: "btn-wrap" }, tl = /* @__PURE__ */ B({
+}, Qt = { class: "coach-tit" }, Zt = { class: "desc" }, el = { class: "coach-controls" }, tl = { class: "num" }, ll = { class: "btn-wrap" }, al = /* @__PURE__ */ B({
   __name: "KrdsCoachMark",
   props: {
     coachMarkClass: { default: "" },
@@ -2144,56 +2144,56 @@ const bt = B({
   },
   emits: ["update:modelValue", "close"],
   setup(e, { emit: o }) {
-    const s = e, n = y(() => {
-      const c = s.activeStep - 1;
-      return s.stepsData && c >= 0 && c < s.stepsData.length ? s.stepsData[c] : null;
+    const s = e, n = g(() => {
+      const p = s.activeStep - 1;
+      return s.stepsData && p >= 0 && p < s.stepsData.length ? s.stepsData[p] : null;
     }), t = o, a = () => {
       s.activeStep > 1 && t("update:modelValue", s.activeStep - 1);
-    }, i = () => {
+    }, r = () => {
       s.activeStep < s.stepsData.length && t("update:modelValue", s.activeStep + 1);
-    }, d = () => {
+    }, v = () => {
       t("close");
     };
-    return (c, m) => (b(), S("div", {
+    return (p, h) => (k(), w("div", {
       class: I(["krds-coach-mark", e.coachMarkClass]),
-      style: ae(e.style)
+      style: ne(e.style)
     }, [
-      e.modelValue === e.activeStep && n.value ? (b(), S("div", Ut, [
-        m[2] || (m[2] = r("h5", { class: "sr-only" }, "따라하기 가이드", -1)),
-        r("h6", Xt, L(e.activeStep) + "단계 : " + L(n.value.title), 1),
-        r("p", Jt, L(n.value.description), 1),
-        r("div", Qt, [
-          r("div", Zt, [
-            m[0] || (m[0] = r("span", { class: "sr-only" }, "현재 단계", -1)),
-            r("strong", null, L(e.activeStep), 1),
-            m[1] || (m[1] = r("span", { class: "sr-only" }, "총 단계", -1)),
-            r("span", null, L(e.stepsData.length), 1)
+      e.modelValue === e.activeStep && n.value ? (k(), w("div", Jt, [
+        h[2] || (h[2] = d("h5", { class: "sr-only" }, "따라하기 가이드", -1)),
+        d("h6", Qt, E(e.activeStep) + "단계 : " + E(n.value.title), 1),
+        d("p", Zt, E(n.value.description), 1),
+        d("div", el, [
+          d("div", tl, [
+            h[0] || (h[0] = d("span", { class: "sr-only" }, "현재 단계", -1)),
+            d("strong", null, E(e.activeStep), 1),
+            h[1] || (h[1] = d("span", { class: "sr-only" }, "총 단계", -1)),
+            d("span", null, E(e.stepsData.length), 1)
           ]),
-          r("div", el, [
-            r("button", {
+          d("div", ll, [
+            d("button", {
               type: "button",
               class: "krds-btn small text",
-              onClick: d
+              onClick: v
             }, "그만보기"),
-            e.activeStep !== 1 ? (b(), S("button", {
+            e.activeStep !== 1 ? (k(), w("button", {
               key: 0,
               type: "button",
               class: "krds-btn small text",
               onClick: a
             }, "이전으로")) : Y("", !0),
-            e.activeStep !== e.stepsData.length ? (b(), S("button", {
+            e.activeStep !== e.stepsData.length ? (k(), w("button", {
               key: 1,
               type: "button",
               class: "krds-btn small tertiary",
-              onClick: i
+              onClick: r
             }, "다음으로")) : Y("", !0)
           ])
         ])
       ])) : Y("", !0),
-      J(c.$slots, "coach-mark-content")
+      J(p.$slots, "coach-mark-content")
     ], 6));
   }
-}), ll = ["disabled", "aria-labelledby"], al = ["id", "aria-hidden"], nl = { class: "sr-only" }, sl = /* @__PURE__ */ B({
+}), nl = ["disabled", "aria-labelledby"], sl = ["id", "aria-hidden"], ol = { class: "sr-only" }, il = /* @__PURE__ */ B({
   __name: "KrdsTooltip",
   props: {
     type: { default: "default" },
@@ -2206,83 +2206,83 @@ const bt = B({
     id: {}
   },
   setup(e) {
-    const o = e, s = K(null), n = K(null), t = K(!1), a = K({}), i = K(`tooltip-popover-${Math.random().toString(36).substring(2, 9)}`), d = K(!1), c = y(() => {
+    const o = e, s = K(null), n = K(null), t = K(!1), a = K({}), r = K(`tooltip-popover-${Math.random().toString(36).substring(2, 9)}`), v = K(!1), p = g(() => {
       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(" ");
-    }), m = y(() => {
+    }), h = g(() => {
       const f = [];
       return o.box && f.push("tooltip-box"), o.vertical && f.push("tooltip-vertical"), t.value && f.push("active"), f;
-    }), g = y(() => s.value?.querySelector("button")?.textContent?.trim() || ""), x = () => window.innerWidth <= 768, k = () => {
+    }), y = g(() => s.value?.querySelector("button")?.textContent?.trim() || ""), S = () => window.innerWidth <= 768, b = () => {
       if (!s.value || !n.value) return;
       const f = s.value.querySelector("button");
       if (!f) return;
-      const _ = 12, { clientHeight: R, clientWidth: E } = n.value, { top: M, left: z, right: H, height: V, width: j } = f.getBoundingClientRect(), Z = window.innerWidth / 2, ne = window.innerHeight / 2;
+      const x = 12, { clientHeight: R, clientWidth: L } = n.value, { top: M, left: z, right: H, height: V, width: j } = f.getBoundingClientRect(), Z = window.innerWidth / 2, se = window.innerHeight / 2;
       let U, O;
       const q = [];
-      d.value || o.box || o.vertical ? (M + V > ne ? (U = M - R - _, q.push("top")) : (U = M + V + _, q.push("bottom")), z + j > Z ? (O = H - E, q.push("right"), window.innerWidth - (z + j) > E / 2 && (O = z + (j - E) / 2, q.splice(q.indexOf("right"), 1))) : (O = z + (j - E) / 2, O < 0 && (O = z, q.push("left")))) : (U = M + (V - R) / 2, z + j > Z ? (O = z - E - _, q.push("right")) : O = H + _);
+      v.value || o.box || o.vertical ? (M + V > se ? (U = M - R - x, q.push("top")) : (U = M + V + 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")))) : (U = M + (V - R) / 2, z + j > Z ? (O = z - L - x, q.push("right")) : O = H + x);
       const ee = window.innerWidth <= 420;
       a.value = {
         top: `${U}px`,
         left: ee ? "50%" : `${O}px`,
         transform: ee ? "translateX(-50%)" : "none"
-      }, n.value && (n.value.className = `krds-tooltip-popover ${q.join(" ")} ${m.value.join(" ")}`);
+      }, n.value && (n.value.className = `krds-tooltip-popover ${q.join(" ")} ${h.value.join(" ")}`);
     }, D = async () => {
-      o.disabled || !o.tooltipContent || (t.value = !0, await Le(), k());
-    }, p = () => {
+      o.disabled || !o.tooltipContent || (t.value = !0, await we(), b());
+    }, m = () => {
       t.value = !1, a.value = {};
     }, l = (f) => {
-      (f.key === "Escape" || f.key === "Esc") && t.value && p();
-    }, h = () => {
-      d.value = x(), t.value && p();
+      (f.key === "Escape" || f.key === "Esc") && t.value && m();
     }, u = () => {
-      t.value && p();
+      v.value = S(), t.value && m();
+    }, i = () => {
+      t.value && m();
     };
     return le(() => {
-      d.value = x(), document.addEventListener("keydown", l), window.addEventListener("scroll", u), window.addEventListener("resize", h);
+      v.value = S(), document.addEventListener("keydown", l), window.addEventListener("scroll", i), window.addEventListener("resize", u);
     }), X(() => {
-      document.removeEventListener("keydown", l), window.removeEventListener("scroll", u), window.removeEventListener("resize", h);
-    }), (f, _) => (b(), S("div", {
+      document.removeEventListener("keydown", l), window.removeEventListener("scroll", i), window.removeEventListener("resize", u);
+    }), (f, x) => (k(), w("div", {
       ref_key: "containerRef",
       ref: s
     }, [
-      r("button", {
+      d("button", {
         type: "button",
-        class: I(c.value),
+        class: I(p.value),
         disabled: e.disabled,
-        "aria-labelledby": i.value,
+        "aria-labelledby": r.value,
         onMouseover: D,
-        onMouseout: p,
+        onMouseout: m,
         onFocusin: D,
-        onFocusout: p
+        onFocusout: m
       }, [
         J(f.$slots, "default")
-      ], 42, ll),
-      Q(r("div", {
-        id: i.value,
+      ], 42, nl),
+      Q(d("div", {
+        id: r.value,
         ref_key: "popoverRef",
         ref: n,
-        class: I(["krds-tooltip-popover", m.value]),
-        style: ae(a.value),
+        class: I(["krds-tooltip-popover", h.value]),
+        style: ne(a.value),
         "aria-hidden": !t.value,
         role: "tooltip"
       }, [
-        r("span", nl, L(g.value), 1),
-        A(" " + L(e.tooltipContent), 1)
-      ], 14, al), [
+        d("span", ol, E(y.value), 1),
+        A(" " + E(e.tooltipContent), 1)
+      ], 14, sl), [
         [te, t.value]
       ])
     ], 512));
   }
-}), ol = ["aria-expanded"], il = { class: "drop-in" }, rl = {
+}), rl = ["aria-expanded"], dl = { class: "drop-in" }, ul = {
   key: 0,
   class: "drop-top"
-}, ul = {
+}, cl = {
   key: 1,
   class: "drop-list"
-}, dl = ["lang", "aria-selected", "onClick"], cl = { class: "sr-only" }, fl = {
+}, fl = ["lang", "aria-selected", "onClick"], vl = { class: "sr-only" }, pl = {
   key: 2,
   class: "drop-list"
-}, vl = ["href", "lang"], pl = /* @__PURE__ */ B({
+}, ml = ["href", "lang"], hl = /* @__PURE__ */ B({
   __name: "KrdsLanguageSwitcher",
   props: {
     languageList: {},
@@ -2295,37 +2295,37 @@ const bt = B({
   },
   emits: ["update:modelValue", "close"],
   setup(e, { emit: o }) {
-    const s = e, n = o, t = K(!1), a = K(), i = K(), d = () => {
-      t.value = !t.value, t.value && a.value && g();
-    }, c = () => {
+    const s = e, n = o, t = K(!1), a = K(), r = K(), v = () => {
+      t.value = !t.value, t.value && a.value && y();
+    }, p = () => {
       t.value = !1;
-    }, m = (l) => {
-      n("update:modelValue", l), c(), n("close"), i.value?.focus();
-    }, g = () => {
+    }, h = (l) => {
+      n("update:modelValue", l), p(), n("close"), r.value?.focus();
+    }, y = () => {
       if (!a.value) return;
       const l = a.value.querySelector(".drop-menu");
       if (!l) return;
-      const h = l.getBoundingClientRect(), u = window.innerWidth;
-      a.value.classList.remove("drop-left", "drop-right"), h.left < 0 ? a.value.classList.add("drop-left") : u < h.left + h.width && a.value.classList.add("drop-right");
-    }, x = (l) => {
-      l.key === "Escape" && (c(), i.value?.focus());
-    }, k = (l) => {
-      a.value?.contains(l.target) || c();
+      const u = l.getBoundingClientRect(), i = window.innerWidth;
+      a.value.classList.remove("drop-left", "drop-right"), u.left < 0 ? a.value.classList.add("drop-left") : i < u.left + u.width && a.value.classList.add("drop-right");
+    }, S = (l) => {
+      l.key === "Escape" && (p(), r.value?.focus());
+    }, b = (l) => {
+      a.value?.contains(l.target) || p();
     }, D = (l) => {
-      a.value?.contains(l.relatedTarget) || c();
-    }, p = (l) => {
+      a.value?.contains(l.relatedTarget) || p();
+    }, m = (l) => {
       if (!a.value) return;
       a.value.querySelectorAll(".drop-list .item-link").forEach((f) => {
         f.style.position = "relative", f.style.zIndex = "0";
       });
-      const u = l.target;
-      u.style.zIndex = "1";
+      const i = l.target;
+      i.style.zIndex = "1";
     };
-    return ue(t, (l) => {
-      l ? (document.addEventListener("keydown", x), document.addEventListener("click", k)) : (document.removeEventListener("keydown", x), document.removeEventListener("click", k));
+    return ae(t, (l) => {
+      l ? (document.addEventListener("keydown", S), document.addEventListener("click", b)) : (document.removeEventListener("keydown", S), document.removeEventListener("click", b));
     }), X(() => {
-      document.removeEventListener("keydown", x), document.removeEventListener("click", k);
-    }), (l, h) => (b(), S("div", {
+      document.removeEventListener("keydown", S), document.removeEventListener("click", b);
+    }), (l, u) => (k(), w("div", {
       ref_key: "dropdownRef",
       ref: a,
       class: I(["krds-drop-wrap krds-language", {
@@ -2335,150 +2335,150 @@ const bt = B({
       }]),
       onFocusout: D
     }, [
-      r("button", {
+      d("button", {
         ref_key: "buttonRef",
-        ref: i,
+        ref: r,
         type: "button",
         class: I(["krds-btn small text drop-btn", { active: t.value }]),
         "aria-expanded": t.value,
-        onClick: d
+        onClick: v
       }, [
-        h[0] || (h[0] = r("i", { class: "svg-icon ico-global" }, null, -1)),
+        u[0] || (u[0] = d("i", { class: "svg-icon ico-global" }, null, -1)),
         J(l.$slots, "default"),
-        h[1] || (h[1] = r("i", { class: "svg-icon ico-toggle" }, null, -1))
-      ], 10, ol),
-      r("div", {
+        u[1] || (u[1] = d("i", { class: "svg-icon ico-toggle" }, null, -1))
+      ], 10, rl),
+      d("div", {
         class: "drop-menu",
-        style: ae({ display: t.value ? "block" : "none" })
+        style: ne({ display: t.value ? "block" : "none" })
       }, [
-        r("div", il, [
-          l.$slots["prev-item"] ? (b(), S("div", rl, [
+        d("div", dl, [
+          l.$slots["prev-item"] ? (k(), w("div", ul, [
             J(l.$slots, "prev-item")
           ])) : Y("", !0),
-          s.type === "default" ? (b(), S("ul", ul, [
-            (b(!0), S(F, null, N(e.languageList, (u) => (b(), S("li", {
-              key: u.code
+          s.type === "default" ? (k(), w("ul", cl, [
+            (k(!0), w(F, null, N(e.languageList, (i) => (k(), w("li", {
+              key: i.code
             }, [
-              r("a", {
+              d("a", {
                 href: "#",
-                class: I(["item-link", { active: s.modelValue === u.code }]),
-                lang: u.code,
-                "aria-selected": s.modelValue === u.code,
-                onClick: re((f) => m(u.code), ["prevent"]),
-                onFocus: p
+                class: I(["item-link", { active: s.modelValue === i.code }]),
+                lang: i.code,
+                "aria-selected": s.modelValue === i.code,
+                onClick: de((f) => h(i.code), ["prevent"]),
+                onFocus: m
               }, [
-                A(L(u.name) + " ", 1),
-                r("span", cl, L(s.modelValue === u.code ? "선택됨" : ""), 1)
-              ], 42, dl)
+                A(E(i.name) + " ", 1),
+                d("span", vl, E(s.modelValue === i.code ? "선택됨" : ""), 1)
+              ], 42, fl)
             ]))), 128))
-          ])) : s.type === "external" ? (b(), S("ul", fl, [
-            (b(!0), S(F, null, N(e.languageList, (u) => (b(), S("li", {
-              key: u.code
+          ])) : s.type === "external" ? (k(), w("ul", pl, [
+            (k(!0), w(F, null, N(e.languageList, (i) => (k(), w("li", {
+              key: i.code
             }, [
-              r("a", {
-                href: u.url || "#",
+              d("a", {
+                href: i.url || "#",
                 class: "item-link",
-                lang: u.code,
+                lang: i.code,
                 target: "_blank",
                 title: "새 창 열림",
-                onFocus: p
+                onFocus: m
               }, [
-                A(L(u.name) + " ", 1),
-                h[2] || (h[2] = r("i", { class: "svg-icon ico-go" }, null, -1))
-              ], 40, vl)
+                A(E(i.name) + " ", 1),
+                u[2] || (u[2] = d("i", { class: "svg-icon ico-go" }, null, -1))
+              ], 40, ml)
             ]))), 128))
           ])) : Y("", !0)
         ])
       ], 4)
     ], 34));
   }
-}), hl = { class: "drop-in" }, ml = { class: "drop-list" }, yl = ["data-adjust-scale", "onClick"], gl = { class: "drop-bottom" }, kl = /* @__PURE__ */ B({
+}), yl = { class: "drop-in" }, gl = { class: "drop-list" }, bl = ["data-adjust-scale", "onClick"], kl = { class: "drop-bottom" }, Sl = /* @__PURE__ */ B({
   __name: "KrdsResize",
   emits: ["update:modelValue", "close"],
   setup(e, { emit: o }) {
-    const s = o, n = K(!1), t = K(), a = K(), i = K("md"), d = [
+    const s = o, n = K(!1), t = K(), a = K(), r = K("md"), v = [
       { 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" }
-    ], c = () => {
-      n.value = !n.value, n.value && t.value && k();
-    }, m = () => {
+    ], p = () => {
+      n.value = !n.value, n.value && t.value && b();
+    }, h = () => {
       n.value = !1;
-    }, g = (u) => {
-      m(), s("close"), a.value?.focus(), i.value = u.key, document.body.style.zoom = u?.zoom;
-    }, x = () => {
-      const u = d.find((f) => f.key === "md");
-      u && g(u);
-    }, k = () => {
+    }, y = (i) => {
+      h(), s("close"), a.value?.focus(), r.value = i.key, document.body.style.zoom = i?.zoom;
+    }, S = () => {
+      const i = v.find((f) => f.key === "md");
+      i && y(i);
+    }, b = () => {
       if (!t.value) return;
-      const u = t.value.querySelector(".drop-menu");
-      if (!u) return;
-      const f = u.getBoundingClientRect(), _ = window.innerWidth;
-      t.value.classList.remove("drop-left", "drop-right"), f.left < 0 ? t.value.classList.add("drop-left") : _ < f.left + f.width && t.value.classList.add("drop-right");
-    }, D = (u) => {
-      u.key === "Escape" && (m(), a.value?.focus());
-    }, p = (u) => {
-      t.value?.contains(u.target) || m();
-    }, l = (u) => {
-      t.value?.contains(u.relatedTarget) || m();
-    }, h = (u) => {
+      const i = t.value.querySelector(".drop-menu");
+      if (!i) return;
+      const f = i.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 = (i) => {
+      i.key === "Escape" && (h(), a.value?.focus());
+    }, m = (i) => {
+      t.value?.contains(i.target) || h();
+    }, l = (i) => {
+      t.value?.contains(i.relatedTarget) || h();
+    }, u = (i) => {
       if (!t.value) return;
       t.value.querySelectorAll(".drop-list .item-link").forEach((R) => {
         R.style.position = "relative", R.style.zIndex = "0";
       });
-      const _ = u.target;
-      _.style.zIndex = "1";
+      const x = i.target;
+      x.style.zIndex = "1";
     };
-    return ue(n, (u) => {
-      u ? (document.addEventListener("keydown", D), document.addEventListener("click", p)) : (document.removeEventListener("keydown", D), document.removeEventListener("click", p));
+    return ae(n, (i) => {
+      i ? (document.addEventListener("keydown", D), document.addEventListener("click", m)) : (document.removeEventListener("keydown", D), document.removeEventListener("click", m));
     }), X(() => {
-      document.removeEventListener("keydown", D), document.removeEventListener("click", p);
-    }), (u, f) => (b(), S("div", {
+      document.removeEventListener("keydown", D), document.removeEventListener("click", m);
+    }), (i, f) => (k(), w("div", {
       ref_key: "dropdownRef",
       ref: t,
       class: "krds-drop-wrap krds-resize",
       "data-adjust": "scale",
       onFocusout: l
     }, [
-      r("button", {
+      d("button", {
         ref_key: "buttonRef",
         ref: a,
         type: "button",
         class: "krds-btn small text drop-btn",
-        onClick: c
+        onClick: p
       }, [...f[0] || (f[0] = [
         A(" 화면크기 ", -1),
-        r("i", { class: "svg-icon ico-toggle" }, null, -1)
+        d("i", { class: "svg-icon ico-toggle" }, null, -1)
       ])], 512),
-      r("div", {
+      d("div", {
         class: "drop-menu",
-        style: ae({ display: n.value ? "block" : "none" })
+        style: ne({ display: n.value ? "block" : "none" })
       }, [
-        r("div", hl, [
-          r("ul", ml, [
-            (b(), S(F, null, N(d, (_) => r("li", {
-              key: _.key
+        d("div", yl, [
+          d("ul", gl, [
+            (k(), w(F, null, N(v, (x) => d("li", {
+              key: x.key
             }, [
-              r("button", {
+              d("button", {
                 type: "button",
-                class: I(["item-link", [_.key, _.key === i.value ? "active" : ""]]),
-                "data-adjust-scale": _.key,
-                onClick: re((R) => g(_), ["prevent"]),
-                onFocus: h
-              }, L(_.label), 43, yl)
+                class: I(["item-link", [x.key, x.key === r.value ? "active" : ""]]),
+                "data-adjust-scale": x.key,
+                onClick: de((R) => y(x), ["prevent"]),
+                onFocus: u
+              }, E(x.label), 43, bl)
             ])), 64))
           ]),
-          r("div", gl, [
-            r("button", {
+          d("div", kl, [
+            d("button", {
               type: "button",
               class: "krds-btn medium text",
               "data-adjust-scale": "md",
-              onClick: re(x, ["prevent"]),
-              onFocus: h
+              onClick: de(S, ["prevent"]),
+              onFocus: u
             }, [...f[1] || (f[1] = [
-              r("i", { class: "svg-icon ico-reset" }, null, -1),
+              d("i", { class: "svg-icon ico-reset" }, null, -1),
               A(" 초기화 ", -1)
             ])], 32)
           ])
@@ -2486,41 +2486,166 @@ const bt = B({
       ], 4)
     ], 544));
   }
+}), wl = B({
+  name: "KrdsModal",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    modalId: {
+      type: String,
+      default: void 0
+    },
+    backdrop: {
+      type: Boolean,
+      default: !0
+    },
+    size: {
+      type: String,
+      default: "medium"
+    },
+    full: {
+      type: Boolean,
+      default: !1
+    },
+    bottomSheet: {
+      type: Boolean,
+      default: !1
+    },
+    persistent: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue"],
+  slots: Object,
+  setup(e, { slots: o, emit: s }) {
+    const n = Ie()?.uid, t = g(() => e.modalId ?? `krds-modal-${n}`), a = g({
+      get: () => e.modelValue,
+      set: (u) => s("update:modelValue", u)
+    }), r = g(() => `tit_${t.value}`), v = g(() => ({
+      small: "modal-sm",
+      medium: "modal-md",
+      large: "modal-lg"
+    })[e.size]), p = () => {
+      a.value = !1;
+    };
+    let h = "", y = null;
+    const S = K(null), b = (u) => Array.from(u.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter(
+      (f) => !f.hasAttribute("disabled") && f.getAttribute("tabindex") !== "-1"
+    ), D = (u) => {
+      if (!S.value || u.key !== "Tab") return;
+      const i = b(S.value);
+      if (i.length === 0) {
+        u.preventDefault();
+        return;
+      }
+      const f = i[0], x = i[i.length - 1];
+      u.shiftKey && document.activeElement === f ? (u.preventDefault(), x.focus()) : !u.shiftKey && document.activeElement === x && (u.preventDefault(), f.focus());
+    }, m = (u) => {
+      u.key === "Escape" && !e.persistent && p();
+    }, l = () => {
+      document.body.style.overflow = h, document.removeEventListener("keydown", D), document.removeEventListener("keydown", m), y && (y.focus(), y = null), S.value = null;
+    };
+    return ae(
+      () => e.modelValue,
+      async (u) => {
+        if (u) {
+          h = document.body.style.overflow, document.body.style.overflow = "hidden", y = document.activeElement, await we();
+          const i = document.getElementById(t.value);
+          if (i) {
+            S.value = i;
+            const f = i.querySelector(".modal-conts");
+            f && (f.setAttribute("tabindex", "-1"), f.focus()), document.addEventListener("keydown", D), document.addEventListener("keydown", m);
+          }
+        } else
+          l();
+      },
+      { immediate: !0 }
+    ), Se(() => {
+      e.modelValue && l();
+    }), () => {
+      if (!a.value) return null;
+      const u = {
+        id: t.value,
+        class: "krds-modal fade in shown",
+        role: "dialog",
+        "aria-modal": !0,
+        "aria-labelledby": r.value
+      };
+      return e.full ? u["data-type"] = "full" : e.bottomSheet && (u["data-type"] = "bottom-sheet"), c(
+        Le,
+        { to: "body" },
+        c("section", u, [
+          c("div", { class: `modal-dialog ${v.value}` }, [
+            c(
+              "div",
+              { class: "modal-content" },
+              [
+                // modal title
+                o.title ? c("div", { class: "modal-header" }, [c("h2", { id: r.value, class: "modal-title" }, o.title())]) : null,
+                // modal contents
+                c("div", { class: "modal-conts" }, [c("div", { class: "conts-area" }, o.default?.())]),
+                // modal btn
+                o.footer ? c("div", { class: "modal-btn btn-wrap" }, o.footer()) : null,
+                // close button
+                c(
+                  "button",
+                  {
+                    type: "button",
+                    class: "krds-btn medium icon btn-close close-modal",
+                    onClick: p
+                  },
+                  [c("span", { class: "sr-only" }, "닫기"), c("i", { class: "svg-icon ico-popup-close" })]
+                )
+              ].filter(Boolean)
+            )
+          ]),
+          c("div", {
+            class: e.backdrop ? "modal-back in" : "modal-back",
+            onClick: e.persistent ? void 0 : p
+          })
+        ])
+      );
+    };
+  }
 }), ge = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  KrdsBadge: ht,
-  KrdsBreadcrumb: zt,
-  KrdsButton: Se,
-  KrdsButtonGroup: Ie,
-  KrdsCheckArea: St,
-  KrdsCheckbox: wt,
-  KrdsCoachMark: tl,
-  KrdsContextualHelp: Gt,
-  KrdsDateInput: ct,
-  KrdsFileUpload: pt,
-  KrdsFormGroup: Ae,
-  KrdsFormHint: Pe,
-  KrdsFormLabel: Te,
-  KrdsIcon: Ee,
+  KrdsBadge: yt,
+  KrdsBreadcrumb: It,
+  KrdsButton: Ce,
+  KrdsButtonGroup: Me,
+  KrdsCheckArea: Ct,
+  KrdsCheckbox: xt,
+  KrdsCoachMark: al,
+  KrdsContextualHelp: Xt,
+  KrdsDateInput: vt,
+  KrdsFileUpload: ht,
+  KrdsFormGroup: Oe,
+  KrdsFormHint: Fe,
+  KrdsFormLabel: Ae,
+  KrdsIcon: Re,
   KrdsInPageNavigation: Lt,
-  KrdsInput: Re,
-  KrdsLanguageSwitcher: pl,
-  KrdsLink: Me,
-  KrdsMasthead: gt,
-  KrdsPagination: Pt,
-  KrdsPanel: qt,
-  KrdsRadio: Ct,
-  KrdsResize: kl,
-  KrdsSelect: vt,
-  KrdsSkipLink: Bt,
-  KrdsSpinner: we,
-  KrdsStep: _t,
-  KrdsStepIndicator: xt,
-  KrdsTag: mt,
-  KrdsTagGroup: yt,
-  KrdsTextarea: ft,
-  KrdsToggleSwitch: bt,
-  KrdsTooltip: sl
+  KrdsInput: Pe,
+  KrdsLanguageSwitcher: hl,
+  KrdsLink: Te,
+  KrdsMasthead: kt,
+  KrdsModal: wl,
+  KrdsPagination: Ft,
+  KrdsPanel: Ht,
+  KrdsRadio: _t,
+  KrdsResize: Sl,
+  KrdsSelect: mt,
+  KrdsSkipLink: $t,
+  KrdsSpinner: xe,
+  KrdsStep: Kt,
+  KrdsStepIndicator: Bt,
+  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");
@@ -2531,66 +2656,67 @@ const bt = B({
   unmounted(e) {
     e.classList.remove("sr-only");
   }
-}, ke = {
+}, be = {
   "sr-only": fe
-}, Ce = (e) => {
+}, _e = (e) => {
   e.directive("sr-only", fe);
-}, be = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, ke = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: ke,
-  directives: ke,
-  installDirectives: Ce,
+  default: be,
+  directives: be,
+  installDirectives: _e,
   vSrOnly: fe
-}, Symbol.toStringTag, { value: "Module" })), wl = {
+}, Symbol.toStringTag, { value: "Module" })), _l = {
   install(e, o = {}) {
     e.provide("krds:config", o);
     const s = o.components || Object.keys(ge);
     s.forEach((n) => {
       const t = ge[n];
       t && e.component(n, t);
-    }), typeof be == "object" && be !== null && Ce(e), e.config.globalProperties.$krds = {
+    }), typeof ke == "object" && ke !== null && _e(e), e.config.globalProperties.$krds = {
       version: "__VERSION__"
     }, process.env.NODE_ENV !== "production" && console.log(`[KRDS Vue] v__VERSION__ 설치 완료 - 컴포넌트: ${s.length}개`);
   }
-}, Cl = "__VERSION__";
+}, Bl = "__VERSION__";
 export {
-  ht as KrdsBadge,
-  zt as KrdsBreadcrumb,
-  Se as KrdsButton,
-  Ie as KrdsButtonGroup,
-  St as KrdsCheckArea,
-  wt as KrdsCheckbox,
-  tl as KrdsCoachMark,
-  Gt as KrdsContextualHelp,
-  ct as KrdsDateInput,
-  pt as KrdsFileUpload,
-  Ae as KrdsFormGroup,
-  Pe as KrdsFormHint,
-  Te as KrdsFormLabel,
-  Ee as KrdsIcon,
+  yt as KrdsBadge,
+  It as KrdsBreadcrumb,
+  Ce as KrdsButton,
+  Me as KrdsButtonGroup,
+  Ct as KrdsCheckArea,
+  xt as KrdsCheckbox,
+  al as KrdsCoachMark,
+  Xt as KrdsContextualHelp,
+  vt as KrdsDateInput,
+  ht as KrdsFileUpload,
+  Oe as KrdsFormGroup,
+  Fe as KrdsFormHint,
+  Ae as KrdsFormLabel,
+  Re as KrdsIcon,
   Lt as KrdsInPageNavigation,
-  Re as KrdsInput,
-  pl as KrdsLanguageSwitcher,
-  Me as KrdsLink,
-  gt as KrdsMasthead,
-  Pt as KrdsPagination,
-  qt as KrdsPanel,
-  Ct as KrdsRadio,
-  kl as KrdsResize,
-  vt as KrdsSelect,
-  Bt as KrdsSkipLink,
-  we as KrdsSpinner,
-  _t as KrdsStep,
-  xt as KrdsStepIndicator,
-  mt as KrdsTag,
-  yt as KrdsTagGroup,
-  ft as KrdsTextarea,
-  bt as KrdsToggleSwitch,
-  sl as KrdsTooltip,
+  Pe 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,
+  mt as KrdsSelect,
+  $t as KrdsSkipLink,
+  xe as KrdsSpinner,
+  Kt as KrdsStep,
+  Bt as KrdsStepIndicator,
+  gt as KrdsTag,
+  bt as KrdsTagGroup,
+  pt as KrdsTextarea,
+  wt as KrdsToggleSwitch,
+  il as KrdsTooltip,
   ce as classNames,
-  wl as default,
-  de as generateId,
-  Sl as generateUid,
-  Cl as version
+  _l as default,
+  ue as generateId,
+  xl as generateUid,
+  Bl as version
 };
 //# sourceMappingURL=krds-vue.es.js.map