@krds.ui/react 0.1.0 → 0.1.1

package/dist/index.js

@@ -197,13 +197,13 @@ var N = i(({ as: e, children: t, variant: n = "primary", size: r = "large", clas
 	});
 });
 N.displayName = "Button";
-var P = N, F = i(({ mode: e = "single", position: t = "bottom", value: n, defaultValue: r = "", startDate: i, endDate: a, defaultStartDate: s = "", defaultEndDate: l = "", disabledDates: u = [], eventDates: d = [], isOpen: h, defaultIsOpen: v = !1, onOpenChange: x, onChange: S, onRangeChange: C, onYearChange: w, onMonthChange: T, onTodayClick: E, onConfirm: D, onCancel: O, label: k = "기간선택", inputId: A = "cal", placeholder: j = "YYYY.MM.DD", startPlaceholder: M = "시작날짜", endPlaceholder: N = "종료날짜", startTitle: P = "시작날짜 입력", endTitle: F = "종료날짜 입력", openButtonLabel: I = "달력 열기", prevButtonLabel: L = "이전 달", nextButtonLabel: R = "다음 달", yearSelectLabel: z = "연도 선택", monthSelectLabel: B = "월 선택", todayButtonText: ee = "오늘", cancelButtonText: V = "취소", confirmButtonText: te = "확인", disabled: ne = !1, readOnly: H = !1, className: re, ...ie }, ae) => {
-	let [oe, U] = b({
+var P = N, F = i(({ mode: e = "single", position: t = "bottom", value: n, defaultValue: r = "", startDate: i, endDate: a, defaultStartDate: s = "", defaultEndDate: l = "", disabledDates: u = [], eventDates: d = [], isOpen: h, defaultIsOpen: v = !1, onOpenChange: x, onChange: S, onRangeChange: C, onYearChange: w, onMonthChange: T, onTodayClick: E, onConfirm: D, onCancel: O, label: k = "기간선택", inputId: A = "cal", placeholder: j = "YYYY.MM.DD", startPlaceholder: M = "시작날짜", endPlaceholder: N = "종료날짜", startTitle: P = "시작날짜 입력", endTitle: F = "종료날짜 입력", openButtonLabel: I = "달력 열기", prevButtonLabel: L = "이전 달", nextButtonLabel: R = "다음 달", yearSelectLabel: z = "연도 선택", monthSelectLabel: B = "월 선택", todayButtonText: ee = "오늘", cancelButtonText: te = "취소", confirmButtonText: ne = "확인", disabled: re = !1, readOnly: V = !1, className: ie, ...ae }, oe) => {
+	let [se, H] = b({
 		value: h,
 		defaultValue: v,
 		finalValue: !1,
 		onChange: x
-	}), [se, W] = b({
+	}), [U, W] = b({
 		value: n,
 		defaultValue: r,
 		finalValue: "",
@@ -230,8 +230,8 @@ var P = N, F = i(({ mode: e = "single", position: t = "bottom", value: n, defaul
 		return isNaN(n) || isNaN(r) || isNaN(i) || r < 1 || r > 12 || i < 1 || i > 31 ? null : new Date(n, r - 1, i);
 	}, []), X = (e) => `${e.getFullYear()}.${(e.getMonth() + 1).toString().padStart(2, "0")}.${e.getDate().toString().padStart(2, "0")}`, ce = o(() => {
 		let t = /* @__PURE__ */ new Date();
-		if (e === "single" && se) {
-			let e = Y(se);
+		if (e === "single" && U) {
+			let e = Y(U);
 			if (e) return {
 				year: e.getFullYear(),
 				month: e.getMonth() + 1
@@ -249,7 +249,7 @@ var P = N, F = i(({ mode: e = "single", position: t = "bottom", value: n, defaul
 		};
 	}, [
 		e,
-		se,
+		U,
 		G,
 		Y
 	]), [Z, Q] = m(ce);
@@ -257,7 +257,7 @@ var P = N, F = i(({ mode: e = "single", position: t = "bottom", value: n, defaul
 		let e = ce();
 		Q(e);
 	}, [
-		se,
+		U,
 		G,
 		e,
 		ce
@@ -326,12 +326,12 @@ var P = N, F = i(({ mode: e = "single", position: t = "bottom", value: n, defaul
 		u,
 		d
 	]), be = () => {
-		ne || H || (U(!0), setTimeout(() => {
+		re || V || (H(!0), setTimeout(() => {
 			ge.current?.focus();
 		}, 50));
 	}, xe = o(() => {
-		U(!1), ue(!1), fe(!1);
-	}, [U]), Se = () => {
+		H(!1), ue(!1), fe(!1);
+	}, [H]), Se = () => {
 		let e = Z.month === 1 ? 12 : Z.month - 1, t = Z.month === 1 ? Z.year - 1 : Z.year;
 		Q({
 			year: t,
@@ -398,7 +398,7 @@ var P = N, F = i(({ mode: e = "single", position: t = "bottom", value: n, defaul
 		});
 	}, Ne = (t) => {
 		if (e === "single") {
-			let e = se === `${t.year}.${t.month.toString().padStart(2, "0")}.${t.day.toString().padStart(2, "0")}`;
+			let e = U === `${t.year}.${t.month.toString().padStart(2, "0")}.${t.day.toString().padStart(2, "0")}`;
 			return {
 				isPeriod: e,
 				isStart: e,
@@ -422,17 +422,17 @@ var P = N, F = i(({ mode: e = "single", position: t = "bottom", value: n, defaul
 	};
 	return c(() => {
 		let e = (e) => {
-			oe && (e.target.closest(".calendar-conts") || xe());
+			se && (e.target.closest(".calendar-conts") || xe());
 		}, t = (e) => {
-			e.key === "Escape" && oe && xe();
+			e.key === "Escape" && se && xe();
 		};
 		return document.addEventListener("keydown", t), document.addEventListener("click", e), () => {
 			document.removeEventListener("keydown", t), document.removeEventListener("click", e);
 		};
-	}, [oe]), /* @__PURE__ */ _("div", {
+	}, [se]), /* @__PURE__ */ _("div", {
 		className: "form-group",
-		ref: ae,
-		...ie,
+		ref: oe,
+		...ae,
 		children: [/* @__PURE__ */ g("div", {
 			className: "form-tit",
 			children: /* @__PURE__ */ g("label", {
@@ -448,10 +448,10 @@ var P = N, F = i(({ mode: e = "single", position: t = "bottom", value: n, defaul
 					className: "krds-input datepicker cal",
 					placeholder: j,
 					id: A,
-					value: se,
+					value: U,
 					onChange: (e) => Ae(e.target.value),
-					disabled: ne,
-					readOnly: H
+					disabled: re,
+					readOnly: V
 				}) : /* @__PURE__ */ _("ul", {
 					className: "input-group range set",
 					children: [
@@ -462,8 +462,8 @@ var P = N, F = i(({ mode: e = "single", position: t = "bottom", value: n, defaul
 							title: P,
 							value: G,
 							onChange: (e) => je(e.target.value),
-							disabled: ne,
-							readOnly: H
+							disabled: re,
+							readOnly: V
 						}) }),
 						/* @__PURE__ */ g("li", {
 							className: "mark",
@@ -476,23 +476,23 @@ var P = N, F = i(({ mode: e = "single", position: t = "bottom", value: n, defaul
 							title: F,
 							value: q,
 							onChange: (e) => Me(e.target.value),
-							disabled: ne,
-							readOnly: H
+							disabled: re,
+							readOnly: V
 						}) })
 					]
 				}), /* @__PURE__ */ _("button", {
 					type: "button",
 					className: "krds-btn medium icon form-btn-datepicker",
 					onClick: be,
-					"aria-expanded": oe,
-					disabled: ne,
+					"aria-expanded": se,
+					disabled: re,
 					children: [/* @__PURE__ */ g("span", {
 						className: "sr-only",
 						children: I
 					}), /* @__PURE__ */ g("i", { className: "svg-icon ico-calendar" })]
 				})]
 			}), /* @__PURE__ */ g("div", {
-				className: y("krds-calendar-area", { active: oe }),
+				className: y("krds-calendar-area", { active: se }),
 				children: /* @__PURE__ */ _("div", {
 					className: y("calendar-wrap", t, { single: e === "single" }),
 					"aria-label": "달력",
@@ -655,13 +655,13 @@ var P = N, F = i(({ mode: e = "single", position: t = "bottom", value: n, defaul
 										type: "button",
 										className: "krds-btn small tertiary",
 										onClick: ke,
-										children: V
+										children: te
 									}),
 									/* @__PURE__ */ g("button", {
 										type: "button",
 										className: "krds-btn small primary",
 										onClick: Oe,
-										children: te
+										children: ne
 									})
 								]
 							})
@@ -922,11 +922,11 @@ var ee = i(({ alerts: e, className: t, ...n }, r) => /* @__PURE__ */ g("div", {
 	...n,
 	children: /* @__PURE__ */ g("ul", {
 		className: "krds-critical-alerts",
-		children: e.map((e, t) => /* @__PURE__ */ g(V, { ...e }, t))
+		children: e.map((e, t) => /* @__PURE__ */ g(te, { ...e }, t))
 	})
 }));
 ee.displayName = "CriticalAlerts";
-var V = ({ variant: e, message: t, href: n, linkText: r = "자세히 보기" }) => {
+var te = ({ variant: e, message: t, href: n, linkText: r = "자세히 보기" }) => {
 	let i = {
 		danger: "긴급",
 		ok: "안전",
@@ -956,27 +956,27 @@ var V = ({ variant: e, message: t, href: n, linkText: r = "자세히 보기" })
 			})
 		]
 	}) });
-}, te = ee, ne = i(({ value: e, defaultValue: t, onChange: n, label: r, hint: i, error: a, success: o, information: s, size: u = "large", isCalendarOpen: d, defaultIsCalendarOpen: h = !1, onCalendarOpenChange: v, calendarPosition: x = "bottom", disabledDates: S = [], eventDates: C = [], onYearChange: w, onMonthChange: T, onTodayClick: E, onConfirm: D, onCancel: O, openButtonLabel: k = "달력 열기", prevButtonLabel: A = "이전 달", nextButtonLabel: j = "다음 달", yearSelectLabel: M = "연도 선택", monthSelectLabel: N = "월 선택", todayButtonText: P = "오늘", cancelButtonText: F = "취소", confirmButtonText: I = "확인", disabled: L = !1, readOnly: R = !1, className: z = "", id: B, placeholder: ee = "YYYY.MM.DD", ...V }, te) => {
-	let ne = l(), H = B || ne, [re, ie] = b({
+}, ne = ee, re = i(({ value: e, defaultValue: t, onChange: n, label: r, hint: i, error: a, success: o, information: s, size: u = "large", isCalendarOpen: d, defaultIsCalendarOpen: h = !1, onCalendarOpenChange: v, calendarPosition: x = "bottom", disabledDates: S = [], eventDates: C = [], onYearChange: w, onMonthChange: T, onTodayClick: E, onConfirm: D, onCancel: O, openButtonLabel: k = "달력 열기", prevButtonLabel: A = "이전 달", nextButtonLabel: j = "다음 달", yearSelectLabel: M = "연도 선택", monthSelectLabel: N = "월 선택", todayButtonText: P = "오늘", cancelButtonText: F = "취소", confirmButtonText: I = "확인", disabled: L = !1, readOnly: R = !1, className: z = "", id: B, placeholder: ee = "YYYY.MM.DD", ...te }, ne) => {
+	let re = l(), V = B || re, [ie, ae] = b({
 		value: e,
 		defaultValue: t,
 		onChange: n,
 		finalValue: ""
-	}), [ae, oe] = b({
+	}), [oe, se] = b({
 		value: d,
 		defaultValue: h,
 		finalValue: !1,
 		onChange: v
-	}), U = (e) => {
+	}), H = (e) => {
 		if (!e) return null;
 		let t = e.split(".");
 		if (t.length !== 3) return null;
 		let n = parseInt(t[0]), r = parseInt(t[1]), i = parseInt(t[2]);
 		return isNaN(n) || isNaN(r) || isNaN(i) || r < 1 || r > 12 || i < 1 || i > 31 ? null : new Date(n, r - 1, i);
-	}, se = (e) => `${e.getFullYear()}.${(e.getMonth() + 1).toString().padStart(2, "0")}.${e.getDate().toString().padStart(2, "0")}`, W = () => {
+	}, U = (e) => `${e.getFullYear()}.${(e.getMonth() + 1).toString().padStart(2, "0")}.${e.getDate().toString().padStart(2, "0")}`, W = () => {
 		let e = /* @__PURE__ */ new Date();
-		if (re) {
-			let e = U(re);
+		if (ie) {
+			let e = H(ie);
 			if (e) return {
 				year: e.getFullYear(),
 				month: e.getMonth() + 1
@@ -990,7 +990,7 @@ var V = ({ variant: e, message: t, href: n, linkText: r = "자세히 보기" })
 	c(() => {
 		let e = W();
 		K(e);
-	}, [re]);
+	}, [ie]);
 	let [q, J] = m(!1), [Y, X] = m(!1), ce = p(null), Z = f(() => {
 		let e = (/* @__PURE__ */ new Date()).getFullYear();
 		return Array.from({ length: 101 }, (t, n) => {
@@ -1055,11 +1055,11 @@ var V = ({ variant: e, message: t, href: n, linkText: r = "자세히 보기" })
 		S,
 		C
 	]), ue = () => {
-		L || R || (oe(!0), setTimeout(() => {
+		L || R || (se(!0), setTimeout(() => {
 			ce.current?.focus();
 		}, 50));
 	}, de = () => {
-		oe(!1), J(!1), X(!1);
+		se(!1), J(!1), X(!1);
 	}, fe = () => {
 		let e = G.month === 1 ? 12 : G.month - 1, t = G.month === 1 ? G.year - 1 : G.year;
 		K({
@@ -1085,10 +1085,10 @@ var V = ({ variant: e, message: t, href: n, linkText: r = "자세히 보기" })
 	}, he = (e) => {
 		if (e.isDisabled || e.isOld || e.isNew) return;
 		let t = `${e.year}.${e.month.toString().padStart(2, "0")}.${e.day.toString().padStart(2, "0")}`;
-		ie(t);
+		ae(t);
 	}, ge = () => {
-		let e = /* @__PURE__ */ new Date(), t = se(e);
-		ie(t), K({
+		let e = /* @__PURE__ */ new Date(), t = U(e);
+		ae(t), K({
 			year: e.getFullYear(),
 			month: e.getMonth() + 1
 		}), E?.();
@@ -1097,26 +1097,26 @@ var V = ({ variant: e, message: t, href: n, linkText: r = "자세히 보기" })
 	}, ve = () => {
 		de(), O?.();
 	}, ye = (e) => {
-		ie(e);
-		let t = U(e);
+		ae(e);
+		let t = H(e);
 		t && K({
 			year: t.getFullYear(),
 			month: t.getMonth() + 1
 		});
 	}, be = (e) => {
 		let t = `${e.year}.${e.month.toString().padStart(2, "0")}.${e.day.toString().padStart(2, "0")}`;
-		return re === t;
+		return ie === t;
 	};
 	c(() => {
 		let e = (e) => {
-			ae && (e.target.closest(".calendar-conts") || de());
+			oe && (e.target.closest(".calendar-conts") || de());
 		}, t = (e) => {
-			e.key === "Escape" && ae && de();
+			e.key === "Escape" && oe && de();
 		};
 		return document.addEventListener("keydown", t), document.addEventListener("click", e), () => {
 			document.removeEventListener("keydown", t), document.removeEventListener("click", e);
 		};
-	}, [ae]);
+	}, [oe]);
 	let xe = !!a, Se = !!o && !xe, Ce = !!s && !xe && !Se, we = y("form-group", xe && "is-error", Se && "is-success", Ce && "is-information", z), Te = () => xe ? /* @__PURE__ */ g("p", {
 		className: "form-hint-invalid",
 		children: a
@@ -1136,7 +1136,7 @@ var V = ({ variant: e, message: t, href: n, linkText: r = "자세히 보기" })
 			r && /* @__PURE__ */ g("div", {
 				className: "form-tit",
 				children: /* @__PURE__ */ g("label", {
-					htmlFor: H,
+					htmlFor: V,
 					children: r
 				})
 			}),
@@ -1147,21 +1147,21 @@ var V = ({ variant: e, message: t, href: n, linkText: r = "자세히 보기" })
 					children: [/* @__PURE__ */ _("div", {
 						className: "calendar-input",
 						children: [/* @__PURE__ */ g("input", {
-							ref: te,
+							ref: ne,
 							type: "text",
 							className: y("krds-input datepicker cal", u),
 							placeholder: ee,
-							id: H,
-							value: re,
+							id: V,
+							value: ie,
 							onChange: (e) => ye(e.target.value),
 							disabled: L,
 							readOnly: R,
-							...V
+							...te
 						}), /* @__PURE__ */ _("button", {
 							type: "button",
 							className: "krds-btn medium icon form-btn-datepicker",
 							onClick: ue,
-							"aria-expanded": ae,
+							"aria-expanded": oe,
 							disabled: L,
 							children: [/* @__PURE__ */ g("span", {
 								className: "sr-only",
@@ -1169,7 +1169,7 @@ var V = ({ variant: e, message: t, href: n, linkText: r = "자세히 보기" })
 							}), /* @__PURE__ */ g("i", { className: "svg-icon ico-calendar" })]
 						})]
 					}), /* @__PURE__ */ g("div", {
-						className: y("krds-calendar-area", { active: ae }),
+						className: y("krds-calendar-area", { active: oe }),
 						children: /* @__PURE__ */ _("div", {
 							className: y("calendar-wrap", x),
 							"aria-label": "달력",
@@ -1352,9 +1352,9 @@ var V = ({ variant: e, message: t, href: n, linkText: r = "자세히 보기" })
 		]
 	});
 });
-ne.displayName = "DateInput";
+re.displayName = "DateInput";
 // src/components/Disclosure/Disclosure.tsx
-var H = i(({ buttonText: e, children: t, defaultExpanded: n = !1, expanded: r, onToggle: i, className: a, ...o }, s) => {
+var V = i(({ buttonText: e, children: t, defaultExpanded: n = !1, expanded: r, onToggle: i, className: a, ...o }, s) => {
 	let c = "disclosure-content-" + l(), [u, d] = b({
 		value: r,
 		defaultValue: n,
@@ -1384,9 +1384,9 @@ var H = i(({ buttonText: e, children: t, defaultExpanded: n = !1, expanded: r, o
 		})]
 	});
 });
-H.displayName = "Disclosure";
+V.displayName = "Disclosure";
 // src/components/Spinner/Spinner.tsx
-var re = ({ label: e, className: t, children: n }) => {
+var ie = ({ label: e, className: t, children: n }) => {
 	let r = /* @__PURE__ */ _("div", {
 		className: y("krds-spinner", t),
 		role: "status",
@@ -1399,7 +1399,7 @@ var re = ({ label: e, className: t, children: n }) => {
 		className: "form-spinner",
 		children: [n, r]
 	}) : r;
-}, ie = i(({ title: e, description: t, uploadText: n = "첨부할 파일을 여기에 끌어다 놓거나, 파일 선택 버튼을 눌러 파일을 직접 선택해주세요.", maxFiles: r = 10, maxFileSize: i = 20971520, acceptedFileTypes: a, files: s, onFilesChange: c, onFileUpload: u, onFileDelete: d, onAllFilesDelete: f, disabled: v = !1, allowDelete: x = !0, className: S = "", children: C, ...w }, T) => {
+}, ae = i(({ title: e, description: t, uploadText: n = "첨부할 파일을 여기에 끌어다 놓거나, 파일 선택 버튼을 눌러 파일을 직접 선택해주세요.", maxFiles: r = 10, maxFileSize: i = 20971520, acceptedFileTypes: a, files: s, onFilesChange: c, onFileUpload: u, onFileDelete: d, onAllFilesDelete: f, disabled: v = !1, allowDelete: x = !0, className: S = "", children: C, ...w }, T) => {
 	let [E, D] = b({
 		value: s,
 		defaultValue: [],
@@ -1467,19 +1467,19 @@ var re = ({ label: e, className: t, children: n }) => {
 		e.preventDefault(), k(!1);
 	}, []), ee = o((e) => {
 		e.preventDefault(), k(!1), v || L(e.dataTransfer.files);
-	}, [v, L]), V = o((e) => {
+	}, [v, L]), te = o((e) => {
 		d ? d(e) : c?.(E.filter((t) => t.id !== e));
 	}, [
 		E,
 		d,
 		c
-	]), te = o(() => {
+	]), ne = o(() => {
 		f ? f() : c?.([]);
-	}, [f, c]), ne = (e) => {
+	}, [f, c]), re = (e) => {
 		switch (e.status) {
 			case "uploading": return /* @__PURE__ */ _("span", {
 				role: "status",
-				children: [/* @__PURE__ */ g(re, {}), /* @__PURE__ */ g("span", {
+				children: [/* @__PURE__ */ g(ie, {}), /* @__PURE__ */ g("span", {
 					className: "sr-only",
 					children: "업로드 중"
 				})]
@@ -1493,7 +1493,7 @@ var re = ({ label: e, className: t, children: n }) => {
 			});
 			default: return null;
 		}
-	}, H = (e) => e.status === "uploading" || !x ? null : e.onDownload || e.onPreview ? /* @__PURE__ */ _(h, { children: [
+	}, V = (e) => e.status === "uploading" || !x ? null : e.onDownload || e.onPreview ? /* @__PURE__ */ _(h, { children: [
 		e.onDownload && /* @__PURE__ */ _(P, {
 			variant: "text",
 			size: "medium",
@@ -1511,14 +1511,14 @@ var re = ({ label: e, className: t, children: n }) => {
 		e.deletable !== !1 && /* @__PURE__ */ _(P, {
 			variant: "text",
 			size: "medium",
-			onClick: () => V(e.id),
+			onClick: () => te(e.id),
 			disabled: v,
 			children: ["삭제 ", /* @__PURE__ */ g("i", { className: "svg-icon ico-delete-fill" })]
 		})
 	] }) : e.deletable === !1 ? null : /* @__PURE__ */ _(P, {
 		variant: "text",
 		size: "medium",
-		onClick: () => V(e.id),
+		onClick: () => te(e.id),
 		disabled: v,
 		children: ["삭제 ", /* @__PURE__ */ g("i", { className: "svg-icon ico-delete-fill" })]
 	});
@@ -1605,7 +1605,7 @@ var re = ({ label: e, className: t, children: n }) => {
 									]
 								}), /* @__PURE__ */ _("div", {
 									className: "btn-wrap",
-									children: [ne(e), H(e)]
+									children: [re(e), V(e)]
 								})]
 							}), e.status === "error" && e.errorMessage && /* @__PURE__ */ g("p", {
 								className: "file-hint-invalid",
@@ -1618,7 +1618,7 @@ var re = ({ label: e, className: t, children: n }) => {
 						children: /* @__PURE__ */ _(P, {
 							variant: "tertiary",
 							size: "xsmall",
-							onClick: te,
+							onClick: ne,
 							disabled: v,
 							children: ["전체 파일 삭제", /* @__PURE__ */ g("i", { className: "svg-icon ico-angle right" })]
 						})
@@ -1628,9 +1628,9 @@ var re = ({ label: e, className: t, children: n }) => {
 		]
 	});
 });
-ie.displayName = "FileUpload";
+ae.displayName = "FileUpload";
 // src/components/Identifier/Identifier.tsx
-var ae = i(({ text: e = "이 누리집은 보건복지부 산하기관 누리집입니다.", logoAlt: t = "KRDS - Korea Design System", className: n, ...r }, i) => /* @__PURE__ */ _("div", {
+var oe = i(({ text: e = "이 누리집은 보건복지부 산하기관 누리집입니다.", logoAlt: t = "KRDS - Korea Design System", className: n, ...r }, i) => /* @__PURE__ */ _("div", {
 	ref: i,
 	"aria-label": "운영기관 식별자",
 	className: y("krds-identifier", n),
@@ -1646,9 +1646,9 @@ var ae = i(({ text: e = "이 누리집은 보건복지부 산하기관 누리집
 		children: e
 	})]
 }));
-ae.displayName = "Identifier";
+oe.displayName = "Identifier";
 // src/components/Footer/Footer.tsx
-var oe = ({ quickLinks: e }) => !e || e.length === 0 ? null : /* @__PURE__ */ g("div", {
+var se = ({ quickLinks: e }) => !e || e.length === 0 ? null : /* @__PURE__ */ g("div", {
 	className: "foot-quick",
 	children: /* @__PURE__ */ g("div", {
 		className: "inner",
@@ -1660,7 +1660,7 @@ var oe = ({ quickLinks: e }) => !e || e.length === 0 ? null : /* @__PURE__ */ g(
 			children: e.title
 		}, t))
 	})
-}), U = ({ logo: e }) => {
+}), H = ({ logo: e }) => {
 	let t = e?.src ? /* @__PURE__ */ g("img", {
 		src: e.src,
 		alt: e.alt,
@@ -1684,7 +1684,7 @@ var oe = ({ quickLinks: e }) => !e || e.length === 0 ? null : /* @__PURE__ */ g(
 		rel: e.target === "_blank" ? "noopener noreferrer" : void 0,
 		children: n
 	}) : n;
-}, se = ({ logo: e, address: t, contacts: n, links: r, socialLinks: i, defaultLinkTarget: a = "_self" }) => /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(U, { logo: e }), /* @__PURE__ */ _("div", {
+}, U = ({ logo: e, address: t, contacts: n, links: r, socialLinks: i, defaultLinkTarget: a = "_self" }) => /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(H, { logo: e }), /* @__PURE__ */ _("div", {
 	className: "f-cnt",
 	children: [(t || n) && /* @__PURE__ */ _("div", {
 		className: "f-info",
@@ -1761,7 +1761,7 @@ var oe = ({ quickLinks: e }) => !e || e.length === 0 ? null : /* @__PURE__ */ g(
 				className: "f-copy",
 				children: t
 			})]
-		}), !a && /* @__PURE__ */ g(ae, {
+		}), !a && /* @__PURE__ */ g(oe, {
 			text: o.text,
 			logoAlt: o.logo?.alt || "KRDS - Korea Design System"
 		})]
@@ -1791,9 +1791,9 @@ var oe = ({ quickLinks: e }) => !e || e.length === 0 ? null : /* @__PURE__ */ g(
 	id: "krds-footer",
 	className: y(p),
 	...m,
-	children: [!d && /* @__PURE__ */ g(oe, { quickLinks: e }), /* @__PURE__ */ _("div", {
+	children: [!d && /* @__PURE__ */ g(se, { quickLinks: e }), /* @__PURE__ */ _("div", {
 		className: "inner",
-		children: [/* @__PURE__ */ g(se, {
+		children: [/* @__PURE__ */ g(U, {
 			logo: r,
 			address: t,
 			contacts: n,
@@ -1940,9 +1940,9 @@ var he = (e) => {
 		item: e,
 		key: $(e.id, `mobile-main-${t}`),
 		index: t
-	})), [i.body.mainItems]), [F, I] = m(null), [L, R] = m({}), [z, B] = m(!1), [ee, V] = m(P[0]?.key ?? null), [te, ne] = m({}), [H, re] = m(null), [ie, ae] = m(""), [oe, U] = m("idle"), se = p(z), W = p(null), G = p(z), K = p(null);
+	})), [i.body.mainItems]), [F, I] = m(null), [L, R] = m({}), [z, B] = m(!1), [ee, te] = m(P[0]?.key ?? null), [ne, re] = m({}), [V, ie] = m(null), [ae, oe] = m(""), [se, H] = m("idle"), U = p(z), W = p(null), G = p(z), K = p(null);
 	u(t, () => w.current, []), c(() => {
-		P.length ? V((e) => e ?? P[0].key) : V(null);
+		P.length ? te((e) => e ?? P[0].key) : te(null);
 	}, [P]);
 	let q = f(() => {
 		let e = /* @__PURE__ */ new Map();
@@ -2052,7 +2052,7 @@ var he = (e) => {
 		let e = T.current;
 		if (e) {
 			if (W.current &&= (clearTimeout(W.current), null), z) {
-				U((e) => e === "open" || e === "opening" ? e : "pre-opening");
+				H((e) => e === "open" || e === "opening" ? e : "pre-opening");
 				let t = e.querySelector(".gnb-main-trigger.active");
 				if (t && E.current) {
 					let e = t.getAttribute("aria-controls");
@@ -2068,14 +2068,14 @@ var he = (e) => {
 				}
 				let n = setTimeout(() => {
 					if (!G.current) return;
-					U((e) => e === "open" ? e : "opening"), document.body.classList.add("is-gnb-mobile");
+					H((e) => e === "open" ? e : "opening"), document.body.classList.add("is-gnb-mobile");
 					let t = (n) => {
 						if (n.target !== e) return;
 						if (!G.current) {
 							e.removeEventListener("transitionend", t);
 							return;
 						}
-						U("open");
+						H("open");
 						let r = e.querySelector(".gnb-wrap");
 						r instanceof HTMLElement && (r.setAttribute("tabindex", "0"), r.focus()), e.removeEventListener("transitionend", t), document.querySelector("#krds-header .header-in")?.setAttribute("inert", ""), document.getElementById("container")?.setAttribute("inert", ""), document.getElementById("footer")?.setAttribute("inert", "");
 					};
@@ -2083,14 +2083,14 @@ var he = (e) => {
 				}, 100);
 				W.current = n;
 			} else {
-				U((e) => e === "idle" ? e : "closing"), document.querySelector("#krds-header .header-in")?.removeAttribute("inert"), document.getElementById("container")?.removeAttribute("inert"), document.getElementById("footer")?.removeAttribute("inert");
+				H((e) => e === "idle" ? e : "closing"), document.querySelector("#krds-header .header-in")?.removeAttribute("inert"), document.getElementById("container")?.removeAttribute("inert"), document.getElementById("footer")?.removeAttribute("inert");
 				let t = (n) => {
 					if (n.target !== e) return;
 					if (G.current) {
 						e.removeEventListener("transitionend", t);
 						return;
 					}
-					U("idle");
+					H("idle");
 					let r = e.getAttribute("id"), i = r ? document.querySelector(`[aria-controls=${r}]`) : null;
 					i instanceof HTMLElement && i.focus(), e.removeAttribute("tabindex"), e.removeEventListener("transitionend", t);
 				};
@@ -2105,22 +2105,22 @@ var he = (e) => {
 			};
 		}
 	}, [z]), c(() => {
-		se.current !== z && (z ? l?.() : v?.(), se.current = z);
+		U.current !== z && (z ? l?.() : v?.(), U.current = z);
 	}, [
 		z,
 		v,
 		l
 	]), c(() => () => {
-		se.current && v?.();
+		U.current && v?.();
 	}, [v]), c(() => {
 		if (!z) return;
 		let e = T.current;
 		if (e) return he(e);
 	}, [z]);
 	let Te = o(() => {
-		U((e) => e === "open" || e === "opening" ? e : "pre-opening"), B(!0);
+		H((e) => e === "open" || e === "opening" ? e : "pre-opening"), B(!0);
 	}, []), Ee = o(() => {
-		U((e) => e === "idle" ? e : "closing"), B(!1), re(null);
+		H((e) => e === "idle" ? e : "closing"), B(!1), ie(null);
 	}, []), De = o((e) => {
 		let t = e.target, n = T.current?.querySelector(".gnb-wrap");
 		n && !n.contains(t) && n instanceof HTMLElement && n.focus();
@@ -2139,10 +2139,10 @@ var he = (e) => {
 	]), ke = f(() => /* @__PURE__ */ g(le, {
 		container: C,
 		children: Oe
-	}), [C, Oe]), Ae = oe !== "idle", je = oe === "opening" || oe === "open", Me = o((e, t) => {
+	}), [C, Oe]), Ae = se !== "idle", je = se === "opening" || se === "open", Me = o((e, t) => {
 		e.preventDefault();
 		let { item: n, key: r } = t;
-		V(r);
+		te(r);
 		let i = n.panels[0];
 		if (!i) return;
 		let a = $(i.id, `${r}-panel-0`), o = A.current[a], s = E.current;
@@ -2165,7 +2165,7 @@ var he = (e) => {
 				let i = A.current[e];
 				i && n >= i.offsetTop - 10 && (t = r);
 			}
-			t && V(t);
+			t && te(t);
 		};
 		return e.addEventListener("scroll", t), () => e.removeEventListener("scroll", t);
 	}, [Ne]), c(() => {
@@ -2175,12 +2175,12 @@ var he = (e) => {
 		return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
 	}, []);
 	let Pe = o((e) => {
-		ne((t) => ({
+		re((t) => ({
 			...t,
 			[e]: !t[e]
 		}));
 	}, []), Fe = o((e, t, n) => {
-		e.preventDefault(), re(n);
+		e.preventDefault(), ie(n);
 		let r = j.current[n];
 		r && (r.style.display = "block", requestAnimationFrame(() => {
 			r.classList.add("is-open"), r.querySelector(".trigger-prev")?.focus();
@@ -2189,12 +2189,12 @@ var he = (e) => {
 		let t = j.current[e], n = M.current[e];
 		t && (t.classList.remove("is-open"), setTimeout(() => {
 			t.style.display = "", n?.focus();
-		}, 250)), re((t) => t === e ? null : t);
+		}, 250)), ie((t) => t === e ? null : t);
 	}, []), Le = o((e) => {
 		e.preventDefault();
-		let t = ie.trim();
+		let t = ae.trim();
 		t && i.header?.search?.onSearch?.(t);
-	}, [i.header?.search, ie]), Re = (e, t) => {
+	}, [i.header?.search, ae]), Re = (e, t) => {
 		let n = e.some((e) => e.description);
 		return /* @__PURE__ */ g("ul", {
 			className: y(n && "type-description"),
@@ -2346,7 +2346,7 @@ var he = (e) => {
 			className: "depth3-trigger",
 			children: t.label
 		}) }, n);
-		let r = t, i = H === n, a = r.items.map((e, t) => ({
+		let r = t, i = V === n, a = r.items.map((e, t) => ({
 			link: e,
 			key: $(e.id, `${n}-depth4-${t}`)
 		}));
@@ -2405,7 +2405,7 @@ var he = (e) => {
 				children: e.label
 			}) }, n);
 		}
-		let r = t, i = n, a = te[i] ?? !1;
+		let r = t, i = n, a = ne[i] ?? !1;
 		return /* @__PURE__ */ _("li", { children: [/* @__PURE__ */ g("a", {
 			href: "#",
 			className: y("gnb-sub-trigger", "has-depth3", a && "active"),
@@ -2521,8 +2521,8 @@ var he = (e) => {
 							children: [/* @__PURE__ */ g("input", {
 								type: "text",
 								className: "krds-input",
-								value: ie,
-								onChange: (e) => ae(e.target.value),
+								value: ae,
+								onChange: (e) => oe(e.target.value),
 								placeholder: i.header.search.placeholder ?? ue,
 								title: "찾고자 하는 메뉴명 입력"
 							}), /* @__PURE__ */ _("button", {
@@ -3110,7 +3110,7 @@ var rt = i(({ title: e, isCurrent: t = !1, expandText: n, steps: r, className: i
 		children: [/* @__PURE__ */ g("h4", {
 			className: s,
 			children: e
-		}), /* @__PURE__ */ g(H, {
+		}), /* @__PURE__ */ g(V, {
 			buttonText: n,
 			className: "conts-expand-area",
 			children: /* @__PURE__ */ g(Ue, {
@@ -3535,48 +3535,53 @@ var wt = i(({ className: e = "", children: t, id: n, role: r = "dialog", ...i },
 	let { open: s, setOpen: u, size: d, variant: h, closeOnEsc: v, closeOnOverlayClick: b, usePortal: x, portalContainer: S } = yt(), C = l(), w = n || `krds-modal-${C}`, T = l(), [E, D] = m(), O = f(() => ({
 		generatedTitleId: T,
 		setTitleId: D
-	}), [T]), k = i["aria-labelledby"] ?? E, A = p(null), j = p(null), M = p(null), N = p([]), P = p(!1), F = p(null), I = p(null), L = o(() => A.current ? Array.from(A.current.querySelectorAll("a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"], iframe, object, embed, area[href], audio[controls], video[controls]")).filter((e) => {
+	}), [T]), k = i["aria-labelledby"] ?? E, A = p(null), j = p(null), [M, N] = m(null), P = p([]), F = p(!1), I = p(null), L = p(null), R = o(() => A.current ? Array.from(A.current.querySelectorAll("a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"], iframe, object, embed, area[href], audio[controls], video[controls]")).filter((e) => {
 		let t = e.getAttribute("aria-hidden");
 		return !(e.hasAttribute("disabled") || t === "true");
-	}) : [], []), R = o(() => {
-		if (P.current) return;
-		let e = L();
-		N.current = e, P.current = !0, I.current = setTimeout(() => {
+	}) : [], []), z = o(() => {
+		if (F.current) return;
+		let e = R();
+		P.current = e, F.current = !0, L.current = setTimeout(() => {
 			let t = e[0];
 			t && t.focus();
 		}, 200);
-	}, [L]), z = o((e) => {
-		if (a && (typeof a == "function" ? a(e) : a.current = e), A.current = e, e && s) {
-			let t = new MutationObserver(() => {
-				R(), t.disconnect();
-			});
-			return t.observe(e, {
-				attributes: !0,
-				attributeFilter: ["tabindex"],
-				subtree: !0,
-				childList: !0
-			}), requestAnimationFrame(() => {
-				R();
-			}), () => t.disconnect();
-		}
+	}, [R]), B = o((e) => {
+		a && (typeof a == "function" ? a(e) : a.current = e), A.current = e, N(e);
+	}, [a]);
+	c(() => {
+		if (!M || !s) return;
+		let e = new MutationObserver(() => {
+			z(), e.disconnect();
+		});
+		e.observe(M, {
+			attributes: !0,
+			attributeFilter: ["tabindex"],
+			subtree: !0,
+			childList: !0
+		});
+		let t = requestAnimationFrame(z);
+		return () => {
+			e.disconnect(), cancelAnimationFrame(t), L.current !== null && (clearTimeout(L.current), L.current = null), P.current = [], F.current = !1;
+		};
 	}, [
-		a,
+		M,
 		s,
-		R
-	]), B = o((e) => {
+		z
+	]);
+	let ee = o((e) => {
 		j.current = e;
 	}, []);
 	c(() => () => {
-		N.current = [], P.current = !1, F.current && clearTimeout(F.current), I.current && clearTimeout(I.current);
+		P.current = [], F.current = !1, I.current && clearTimeout(I.current), L.current && clearTimeout(L.current);
 	}, []), c(() => {
 		if (!s) {
-			N.current = [], P.current = !1, F.current && clearTimeout(F.current), I.current && clearTimeout(I.current);
+			P.current = [], F.current = !1, I.current && clearTimeout(I.current), L.current && clearTimeout(L.current);
 			return;
 		}
 		let e = (e) => {
 			if ((e.key === "Escape" || e.key === "Esc") && v) u(!1);
 			else if (e.key === "Tab") {
-				let t = N.current;
+				let t = P.current;
 				if (t.length === 0) {
 					e.preventDefault();
 					return;
@@ -3593,22 +3598,20 @@ var wt = i(({ className: e = "", children: t, id: n, role: r = "dialog", ...i },
 		v,
 		u
 	]), c(() => {
-		if (s) {
-			document.body.classList.add("scroll-no"), M.current = document.activeElement;
-			let e = document.getElementById("wrap");
-			e && e.setAttribute("inert", ""), F.current = setTimeout(() => {
-				j.current?.classList.add("in");
-			}, 150);
-		} else {
-			document.body.classList.remove("scroll-no"), M.current?.focus();
-			let e = document.getElementById("wrap");
-			e && e.removeAttribute("inert");
-		}
+		if (!s) return;
+		let e = document.activeElement, t = document.body.classList.contains("scroll-no"), n = document.getElementById("wrap"), r = n?.hasAttribute("inert");
+		document.body.classList.add("scroll-no"), n?.setAttribute("inert", "");
+		let i = j.current;
+		return I.current = setTimeout(() => {
+			j.current?.classList.add("in");
+		}, 150), () => {
+			I.current !== null && (clearTimeout(I.current), I.current = null), i?.classList.remove("in"), t || document.body.classList.remove("scroll-no"), r || n?.removeAttribute("inert"), e?.focus();
+		};
 	}, [s]);
-	let ee = o((e) => {
+	let te = o((e) => {
 		let t = e.target;
-		A.current?.contains(t) || (b ? u(!1) : N.current[0]?.focus());
-	}, [u, b]), V = y("krds-modal shown", s && "in", e);
+		A.current?.contains(t) || (b ? u(!1) : P.current[0]?.focus());
+	}, [u, b]), ne = y("krds-modal shown", s && "in", e);
 	return /* @__PURE__ */ g(le, {
 		enabled: x,
 		container: S,
@@ -3616,17 +3619,17 @@ var wt = i(({ className: e = "", children: t, id: n, role: r = "dialog", ...i },
 			id: w,
 			"aria-modal": "true",
 			role: r,
-			className: V,
+			className: ne,
 			"data-type": h === "default" ? void 0 : h,
-			onClick: ee,
+			onClick: te,
 			...i,
 			"aria-labelledby": k,
 			children: [/* @__PURE__ */ g("div", {
 				className: y("modal-dialog", d === "sm" && "modal-sm", d === "md" && "modal-md", d === "lg" && "modal-lg"),
-				ref: B,
+				ref: ee,
 				children: /* @__PURE__ */ _("div", {
 					className: "modal-content",
-					ref: z,
+					ref: B,
 					children: [/* @__PURE__ */ g(vt.Provider, {
 						value: O,
 						children: t
@@ -4683,11 +4686,11 @@ var Rn = i(({ value: e, defaultValue: t, onChange: n, label: r, hint: i, error:
 	c(() => {
 		M(p === "password" ? k ? "text" : "password" : p);
 	}, [p, k]);
-	let N = !!a, F = !!o && !N, I = !!s && !N && !F, L = d && p === "password", R = f && D && !h && !v, z = L || R, B = y("form-group", N && "is-error", F && "is-success", I && "is-information", x), ee = y("form-conts", z && "btn-ico-wrap"), V = () => {
+	let N = !!a, F = !!o && !N, I = !!s && !N && !F, L = d && p === "password", R = f && D && !h && !v, z = L || R, B = y("form-group", N && "is-error", F && "is-success", I && "is-information", x), ee = y("form-conts", z && "btn-ico-wrap"), te = () => {
 		O("");
-	}, te = () => {
+	}, ne = () => {
 		A((e) => !e);
-	}, ne = () => N ? /* @__PURE__ */ g("p", {
+	}, re = () => N ? /* @__PURE__ */ g("p", {
 		className: "form-hint-invalid",
 		children: a
 	}) : F ? /* @__PURE__ */ g("p", {
@@ -4729,7 +4732,7 @@ var Rn = i(({ value: e, defaultValue: t, onChange: n, label: r, hint: i, error:
 						variant: "icon",
 						size: "medium",
 						className: "pure btn-delete-input",
-						onClick: V,
+						onClick: te,
 						children: [/* @__PURE__ */ g("span", {
 							className: "sr-only",
 							children: "내용 삭제"
@@ -4737,7 +4740,7 @@ var Rn = i(({ value: e, defaultValue: t, onChange: n, label: r, hint: i, error:
 					}), L && /* @__PURE__ */ _(P, {
 						variant: "icon",
 						size: "medium",
-						onClick: te,
+						onClick: ne,
 						children: [/* @__PURE__ */ g("span", {
 							className: "sr-only",
 							children: k ? "입력한 비밀번호 가리기" : "입력한 비밀번호 보기"
@@ -4745,7 +4748,7 @@ var Rn = i(({ value: e, defaultValue: t, onChange: n, label: r, hint: i, error:
 					})]
 				})]
 			}),
-			ne()
+			re()
 		]
 	});
 });
@@ -5147,7 +5150,7 @@ var Vn = r(null), Hn = () => {
 					className: y("tit", e.current && "current"),
 					children: e.title
 				}),
-				e.steps && e.steps.length > 0 && /* @__PURE__ */ g(H, {
+				e.steps && e.steps.length > 0 && /* @__PURE__ */ g(V, {
 					buttonText: `전체 ${e.steps.length}단계`,
 					className: "conts-expand-area",
 					children: /* @__PURE__ */ g("ul", {
@@ -5203,6 +5206,6 @@ var Zn = Object.assign(Un, {
 	TutorialContent: Yn,
 	Close: Xn
 });
-export { k as Accordion, T as AccordionItem, A as Badge, M as Breadcrumb, P as Button, F as Calendar, I as Checkbox, L as CheckboxChip, R as CheckboxGroup, z as CoachMark, B as ContextualHelp, te as CriticalAlert, ne as DateInput, H as Disclosure, ie as FileUpload, q as Footer, He as Header, qe as HelpPanel, ae as Identifier, ot as InPageNavigation, mt as LanguageSwitcher, ht as Link, gt as Masthead, Mt as Modal, Nt as Pagination, Ft as Radio, It as RadioChip, Lt as RadioGroup, Bt as Resize, Vt as Select, en as SideNavigation, tn as SkipLink, re as Spinner, nn as StepIndicator, rn as StructuredList, pn as StructuredListAction, sn as StructuredListBadge, cn as StructuredListBody, gn as StructuredListButtons, ln as StructuredListContent, dn as StructuredListDescription, mn as StructuredListFooter, on as StructuredListHeader, an as StructuredListItem, fn as StructuredListMeta, hn as StructuredListTag, un as StructuredListTitle, An as Tab, Nn as TabContent, jn as TabList, Pn as TabPanel, Mn as TabTrigger, Dn as Table, Fn as Tag, Rn as TextInput, Ue as TextList, Ln as Textarea, zn as ToggleSwitch, Bn as Tooltip, Zn as TutorialPanel };
+export { k as Accordion, T as AccordionItem, A as Badge, j as BadgeWrapper, M as Breadcrumb, P as Button, F as Calendar, I as Checkbox, L as CheckboxChip, R as CheckboxGroup, z as CoachMark, B as ContextualHelp, ne as CriticalAlert, ee as CriticalAlerts, re as DateInput, V as Disclosure, ae as FileUpload, q as Footer, He as Header, nt as HelpCoachProcess, rt as HelpCoachTask, at as HelpContentArea, Ze as HelpLinkList, qe as HelpPanel, it as HelpPanelAction, Qe as HelpPanelClose, Ye as HelpPanelContent, Je as HelpPanelTrigger, $e as HelpRelatedService, Xe as HelpSection, et as HelpServiceGroup, tt as HelpTutorialTitle, oe as Identifier, ot as InPageNavigation, mt as LanguageSwitcher, ht as Link, gt as Masthead, Mt as Modal, Nt as Pagination, Ft as Radio, It as RadioChip, Lt as RadioGroup, Bt as Resize, Vt as Select, en as SideNavigation, tn as SkipLink, ie as Spinner, nn as StepIndicator, rn as StructuredList, pn as StructuredListAction, sn as StructuredListBadge, cn as StructuredListBody, gn as StructuredListButtons, ln as StructuredListContent, dn as StructuredListDescription, mn as StructuredListFooter, on as StructuredListHeader, an as StructuredListItem, fn as StructuredListMeta, hn as StructuredListTag, un as StructuredListTitle, An as Tab, Nn as TabContent, jn as TabList, Pn as TabPanel, Mn as TabTrigger, Dn as Table, Fn as Tag, In as TagWrap, Rn as TextInput, Ue as TextList, We as TextListItem, Ln as Textarea, zn as ToggleSwitch, Bn as Tooltip, Zn as TutorialPanel, Ke as useHelpPanelContext };
 
 //# sourceMappingURL=index.js.map