@krds.ui/vue 0.0.6 → 0.0.8

package/dist/krds-vue.es.js

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