@krds.ui/vue 0.0.9 → 0.0.11

package/dist/krds-vue.es.js

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