@bestow-ui/react 1.6.1 → 1.8.0

package/dist/client.js

@@ -3,49 +3,103 @@ import {
   Skeleton,
   addDays,
   addMonths,
+  adornment,
   compareDays,
   cx,
+  field,
+  fieldFullWidth,
   focusField,
   getCalendarWeeks,
+  helperText,
+  input,
   isSameDay,
   isSameMonth,
   kakaoPostcodeProvider,
+  label,
   mergeThemes,
   parseISODate,
   presetRange,
+  requiredMark,
+  root,
+  systemThemeClass,
   themeClass,
   themeToStyle,
   toISODate,
   visuallyHidden
-} from "./chunk-NKLDAXUR.js";
+} from "./chunk-MP5VSIWQ.js";
 
 // src/theme/ThemeProvider.tsx
-import { createContext, forwardRef, useContext, useMemo } from "react";
+import { createContext, forwardRef, useContext, useId, useMemo } from "react";
 
 // src/theme/ThemeProvider.css.ts
 var portal = "sfyhlv0";
-var root = "sfyhlv1 sfyhlv0";
+var root2 = "sfyhlv1 sfyhlv0";
+
+// src/theme/useSystemTheme.ts
+import { useSyncExternalStore } from "react";
+var query = "(prefers-color-scheme: dark)";
+var getMediaQuery = () => typeof window !== "undefined" && window.matchMedia ? window.matchMedia(query) : void 0;
+function subscribe(onChange) {
+  const mql = getMediaQuery();
+  mql?.addEventListener("change", onChange);
+  return () => mql?.removeEventListener("change", onChange);
+}
+var noopSubscribe = () => () => {
+};
+var getSnapshot = () => getMediaQuery()?.matches ? "dark" : "light";
+var getLight = () => "light";
+var getServerSnapshot = () => null;
+function useSystemTheme(enabled) {
+  return useSyncExternalStore(
+    enabled ? subscribe : noopSubscribe,
+    enabled ? getSnapshot : getLight,
+    enabled ? getServerSnapshot : getLight
+  );
+}
 
 // src/theme/ThemeProvider.tsx
-import { jsx } from "react/jsx-runtime";
-var ThemeContext = /* @__PURE__ */ createContext({ theme: "light" });
+import { jsx, jsxs } from "react/jsx-runtime";
+var ThemeContext = /* @__PURE__ */ createContext({
+  mode: "light",
+  theme: "light",
+  pending: false
+});
+var declarations = (style) => (
+  // 값은 개발자가 준 테마지만 </style> 로 태그가 끝나지 않게 < 를 CSS 이스케이프로 바꾼다
+  Object.entries(style ?? {}).map(([name, value3]) => `${name}:${value3.replace(/</g, "\\3c ")}`).join(";")
+);
+function pendingOverridesCss(selector, theme) {
+  const light = declarations(themeToStyle(theme, "light"));
+  const dark = declarations(themeToStyle(theme, "dark"));
+  if (!light && !dark) return void 0;
+  return `${selector}{${light}}@media (prefers-color-scheme: dark){${selector}{${dark}}}`;
+}
 var ThemeProvider = /* @__PURE__ */ forwardRef(function ThemeProvider2({ theme: themeProp, overrides, className, style, children, ...rest }, ref) {
   const parent = useContext(ThemeContext);
-  const theme = themeProp ?? parent.theme;
+  const mode = themeProp ?? parent.mode;
+  const system = useSystemTheme(mode === "system");
+  const pending = mode === "system" && system === null;
+  const theme = mode === "system" ? system ?? "light" : mode;
   const merged = useMemo(() => mergeThemes(parent.overrides, overrides), [parent.overrides, overrides]);
   const value3 = useMemo(
-    () => ({ theme, overrides: merged, style: themeToStyle(merged, theme) }),
-    [theme, merged]
+    () => ({ mode, theme, pending, overrides: merged, style: pending ? void 0 : themeToStyle(merged, theme) }),
+    [mode, theme, pending, merged]
   );
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: value3, children: /* @__PURE__ */ jsx(
+  const id = useId();
+  const pendingCss = pending && pendingOverridesCss(`.${systemThemeClass}[data-bestow-theme-id="${id}"]`, merged);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: value3, children: /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
-      "data-theme": theme,
-      className: cx(themeClass[theme], root, className),
+      "data-theme": pending ? "system" : theme,
+      "data-bestow-theme-id": pendingCss ? id : void 0,
+      className: cx(pending ? systemThemeClass : themeClass[theme], root2, className),
       style: value3.style ? { ...value3.style, ...style } : style,
       ...rest,
-      children
+      children: [
+        pendingCss && /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: pendingCss } }),
+        children
+      ]
     }
   ) });
 });
@@ -53,8 +107,8 @@ function useTheme() {
   return useContext(ThemeContext).theme;
 }
 function usePortalProps() {
-  const { theme, style } = useContext(ThemeContext);
-  return { className: cx(themeClass[theme], portal), style };
+  const { theme, pending, style } = useContext(ThemeContext);
+  return { className: cx(pending ? systemThemeClass : themeClass[theme], portal), style };
 }
 
 // src/i18n/LocaleProvider.tsx
@@ -81,21 +135,21 @@ var content = "v58j0l5";
 var contentInner = "v58j0l6";
 var header = "v58j0l2";
 var item = "v58j0l1";
-var root2 = "v58j0l0";
+var root3 = "v58j0l0";
 var trigger = "v58j0l3";
 
 // src/components/Accordion/Accordion.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var Accordion = /* @__PURE__ */ forwardRef2(function Accordion2({ className, ...props }, ref) {
   const { collapsible, ...multipleProps } = props;
   const typedProps = props.type === "multiple" ? multipleProps : { ...multipleProps, collapsible };
   const rootProps = "value" in props ? { ...typedProps, value: props.value ?? (props.type === "multiple" ? [] : "") } : typedProps;
-  return /* @__PURE__ */ jsx3(RadixAccordion.Root, { ref, className: cx(root2, className), ...rootProps });
+  return /* @__PURE__ */ jsx3(RadixAccordion.Root, { ref, className: cx(root3, className), ...rootProps });
 });
 var AccordionItem = /* @__PURE__ */ forwardRef2(function AccordionItem2({ title: title6, headingLevel = 3, className, children, ...rest }, ref) {
   const Heading = `h${headingLevel}`;
-  return /* @__PURE__ */ jsxs(RadixAccordion.Item, { ref, className: cx(item, className), ...rest, children: [
-    /* @__PURE__ */ jsx3(RadixAccordion.Header, { asChild: true, children: /* @__PURE__ */ jsx3(Heading, { className: header, children: /* @__PURE__ */ jsxs(RadixAccordion.Trigger, { className: trigger, children: [
+  return /* @__PURE__ */ jsxs2(RadixAccordion.Item, { ref, className: cx(item, className), ...rest, children: [
+    /* @__PURE__ */ jsx3(RadixAccordion.Header, { asChild: true, children: /* @__PURE__ */ jsx3(Heading, { className: header, children: /* @__PURE__ */ jsxs2(RadixAccordion.Trigger, { className: trigger, children: [
       title6,
       /* @__PURE__ */ jsx3(ChevronDownIcon, { size: 18, className: chevron })
     ] }) }) }),
@@ -104,10 +158,41 @@ var AccordionItem = /* @__PURE__ */ forwardRef2(function AccordionItem2({ title:
 });
 
 // src/components/AddressInput/AddressInput.tsx
-import { forwardRef as forwardRef7, useEffect, useId as useId2, useRef as useRef2, useState } from "react";
+import { forwardRef as forwardRef7, useEffect as useEffect2, useId as useId3, useRef as useRef3, useState } from "react";
+
+// src/utils/mergeRefs.ts
+function mergeRefs(...refs) {
+  return (value3) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(value3);
+      else if (ref) ref.current = value3;
+    }
+  };
+}
+
+// src/utils/useFormReset.ts
+import { useEffect, useRef } from "react";
+function useFormReset(ref, onReset) {
+  const latest = useRef(onReset);
+  useEffect(() => {
+    latest.current = onReset;
+  });
+  useEffect(() => {
+    const form = ref.current?.closest("form");
+    if (!form) return;
+    const handleReset = () => latest.current();
+    form.addEventListener("reset", handleReset);
+    return () => form.removeEventListener("reset", handleReset);
+  }, [ref]);
+}
 
 // src/components/Button/Button.tsx
-import { forwardRef as forwardRef4 } from "react";
+import {
+  Children,
+  cloneElement,
+  forwardRef as forwardRef4,
+  version
+} from "react";
 
 // src/components/Spinner/Spinner.tsx
 import { LoaderIcon } from "@bestow-ui/icons";
@@ -118,12 +203,12 @@ import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntim
 var spinner = /* @__PURE__ */ _7a468({ defaultClassName: "_4b5tg40", variantClassNames: { color: { inherit: "_4b5tg41", primary: "_4b5tg42", neutral: "_4b5tg43", danger: "_4b5tg44" }, size: { sm: "_4b5tg45", md: "_4b5tg46", lg: "_4b5tg47" } }, defaultVariants: { color: "inherit", size: "md" }, compoundVariants: [] });
 
 // src/components/Spinner/Spinner.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var Spinner = /* @__PURE__ */ forwardRef3(function Spinner2({ size, color, label: labelProp, className, ...rest }, ref) {
   const m = useMessages();
   const label6 = labelProp ?? m.loading ?? "\uB85C\uB529 \uC911";
   const a11y = label6 ? { role: "status" } : { "aria-hidden": true };
-  return /* @__PURE__ */ jsxs2("span", { ref, className: cx(spinner({ size, color }), className), ...a11y, ...rest, children: [
+  return /* @__PURE__ */ jsxs3("span", { ref, className: cx(spinner({ size, color }), className), ...a11y, ...rest, children: [
     /* @__PURE__ */ jsx4(LoaderIcon, { size: "100%" }),
     label6 && /* @__PURE__ */ jsx4("span", { className: visuallyHidden, children: label6 })
   ] });
@@ -135,7 +220,7 @@ var button = /* @__PURE__ */ _7a4682({ defaultClassName: "xcekda6", variantClass
 var icon = "xcekdai";
 
 // src/components/Button/Button.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var Button = /* @__PURE__ */ forwardRef4(function Button2({
   variant,
   color,
@@ -144,6 +229,8 @@ var Button = /* @__PURE__ */ forwardRef4(function Button2({
   startIcon,
   endIcon,
   loading,
+  asChild,
+  disabled,
   className,
   type = "button",
   onClick,
@@ -151,51 +238,67 @@ var Button = /* @__PURE__ */ forwardRef4(function Button2({
   ...rest
 }, ref) {
   const handleClick = (event) => {
-    if (loading) {
+    if (loading || disabled) {
       event.preventDefault();
       return;
     }
     onClick?.(event);
   };
   const leading = loading ? /* @__PURE__ */ jsx5(Spinner, { size: "sm", label: "" }) : startIcon;
-  return /* @__PURE__ */ jsxs3(
+  const buttonClassName = cx(button({ variant, color, size, fullWidth }), className);
+  const content12 = (label6) => /* @__PURE__ */ jsxs4(Fragment, { children: [
+    leading && /* @__PURE__ */ jsx5("span", { className: icon, children: leading }),
+    label6,
+    endIcon && /* @__PURE__ */ jsx5("span", { className: icon, children: endIcon })
+  ] });
+  if (asChild) {
+    const child = Children.only(children);
+    const { props } = child;
+    return cloneElement(
+      child,
+      {
+        ...rest,
+        ...props,
+        className: cx(buttonClassName, props.className),
+        style: { ...rest.style, ...props.style },
+        // React 19 는 ref 가 props 에 있고, element.ref 를 읽으면 경고한다. 18 은 element.ref 에만 있다
+        ref: mergeRefs(ref, parseInt(version) >= 19 ? props.ref : child.ref),
+        tabIndex: disabled ? -1 : props.tabIndex,
+        "aria-busy": loading || void 0,
+        "aria-disabled": loading || disabled || void 0,
+        "data-disabled": disabled ? "" : void 0,
+        onClick: (event) => {
+          handleClick(event);
+          if (!loading && !disabled) props.onClick?.(event);
+        }
+      },
+      content12(props.children)
+    );
+  }
+  return /* @__PURE__ */ jsx5(
     "button",
     {
       ref,
       type,
-      className: cx(button({ variant, color, size, fullWidth }), className),
+      disabled,
+      className: buttonClassName,
       "aria-busy": loading || void 0,
       "aria-disabled": loading || void 0,
       onClick: handleClick,
       ...rest,
-      children: [
-        leading && /* @__PURE__ */ jsx5("span", { className: icon, children: leading }),
-        children,
-        endIcon && /* @__PURE__ */ jsx5("span", { className: icon, children: endIcon })
-      ]
+      children: content12(children)
     }
   );
 });
 
-// src/components/Input/Input.css.ts
-import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
-var adornment = "_19p5zvh6";
-var field = "_19p5zvh7";
-var fieldFullWidth = "_19p5zvh8";
-var helperText = /* @__PURE__ */ _7a4683({ defaultClassName: "_19p5zvhb", variantClassNames: { error: { true: "_19p5zvhc" } }, defaultVariants: {}, compoundVariants: [] });
-var input = "_19p5zvh5";
-var label = "_19p5zvh9";
-var requiredMark = "_19p5zvha";
-var root3 = /* @__PURE__ */ _7a4683({ defaultClassName: "_19p5zvh0", variantClassNames: { size: { sm: "_19p5zvh1", md: "_19p5zvh2", lg: "_19p5zvh3" }, fullWidth: { true: "_19p5zvh4" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
-
 // src/components/Input/Input.tsx
 import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var Input = /* @__PURE__ */ forwardRef5(function Input2({ size, invalid, fullWidth, startAdornment, endAdornment, rootClassName, className, disabled, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
-      className: cx(root3({ size, fullWidth }), rootClassName),
+      className: cx(root({ size, fullWidth }), rootClassName),
       "data-invalid": invalid || void 0,
       "data-disabled": disabled || void 0,
       children: [
@@ -217,14 +320,14 @@ var Input = /* @__PURE__ */ forwardRef5(function Input2({ size, invalid, fullWid
 });
 
 // src/components/Input/TextField.tsx
-import { forwardRef as forwardRef6, useId } from "react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { forwardRef as forwardRef6, useId as useId2 } from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var TextField = /* @__PURE__ */ forwardRef6(function TextField2({ label: label6, helperText: helperText3, error, required, fullWidth, id, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
-  const generatedId = useId();
+  const generatedId = useId2();
   const inputId = id ?? generatedId;
   const helperId = helperText3 ? `${inputId}-helper` : void 0;
-  return /* @__PURE__ */ jsxs5("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label6 && /* @__PURE__ */ jsxs5("label", { htmlFor: inputId, className: label, children: [
+  return /* @__PURE__ */ jsxs6("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs6("label", { htmlFor: inputId, className: label, children: [
       label6,
       required && /* @__PURE__ */ jsx7("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
@@ -249,9 +352,9 @@ import * as Dialog from "@radix-ui/react-dialog";
 import { XIcon } from "@bestow-ui/icons";
 
 // src/utils/useReturnFocus.ts
-import { useRef } from "react";
+import { useRef as useRef2 } from "react";
 function useReturnFocus(hasTrigger, onCloseAutoFocus) {
-  const returnTo = useRef(null);
+  const returnTo = useRef2(null);
   return {
     onOpenAutoFocus: () => {
       const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
@@ -272,10 +375,10 @@ function useReturnFocus(hasTrigger, onCloseAutoFocus) {
 }
 
 // src/components/Modal/Modal.css.ts
-import { createRuntimeFn as _7a4684 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
 var body = "_1pdsmv0a";
 var closeButton = "_1pdsmv09";
-var content2 = /* @__PURE__ */ _7a4684({ defaultClassName: "_1pdsmv01", variantClassNames: { size: { sm: "_1pdsmv02", md: "_1pdsmv03", lg: "_1pdsmv04" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var content2 = /* @__PURE__ */ _7a4683({ defaultClassName: "_1pdsmv01", variantClassNames: { size: { sm: "_1pdsmv02", md: "_1pdsmv03", lg: "_1pdsmv04" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 var description = "_1pdsmv08";
 var footer = "_1pdsmv0b";
 var header2 = "_1pdsmv05";
@@ -284,14 +387,14 @@ var overlay = "_1pdsmv00";
 var title = "_1pdsmv07";
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function Modal({
   open,
   defaultOpen,
   onOpenChange,
   trigger: trigger4,
   title: title6,
-  description: description7,
+  description: description8,
   children,
   footer: footer5,
   size,
@@ -303,11 +406,11 @@ function Modal({
   const portal2 = usePortalProps();
   const m = useMessages();
   const focus = useReturnFocus(Boolean(trigger4), onCloseAutoFocus);
-  return /* @__PURE__ */ jsxs6(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
+  return /* @__PURE__ */ jsxs7(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
     trigger4 && /* @__PURE__ */ jsx8(Dialog.Trigger, { asChild: true, children: trigger4 }),
-    /* @__PURE__ */ jsxs6(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsxs7(Dialog.Portal, { children: [
       /* @__PURE__ */ jsx8(Dialog.Overlay, { className: cx(portal2.className, overlay), style: portal2.style }),
-      /* @__PURE__ */ jsxs6(
+      /* @__PURE__ */ jsxs7(
         Dialog.Content,
         {
           className: cx(portal2.className, content2({ size }), className),
@@ -315,12 +418,12 @@ function Modal({
           onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
           onOpenAutoFocus: focus.onOpenAutoFocus,
           onCloseAutoFocus: focus.onCloseAutoFocus,
-          ...description7 ? {} : { "aria-describedby": void 0 },
+          ...description8 ? {} : { "aria-describedby": void 0 },
           children: [
-            /* @__PURE__ */ jsxs6("div", { className: header2, children: [
-              /* @__PURE__ */ jsxs6("div", { className: headings, children: [
+            /* @__PURE__ */ jsxs7("div", { className: header2, children: [
+              /* @__PURE__ */ jsxs7("div", { className: headings, children: [
                 /* @__PURE__ */ jsx8(Dialog.Title, { className: title, children: title6 }),
-                description7 && /* @__PURE__ */ jsx8(Dialog.Description, { className: description, children: description7 })
+                description8 && /* @__PURE__ */ jsx8(Dialog.Description, { className: description, children: description8 })
               ] }),
               !hideCloseButton && /* @__PURE__ */ jsx8(Dialog.Close, { className: closeButton, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ jsx8(XIcon, { size: 16 }) })
             ] }),
@@ -343,7 +446,7 @@ var searchStatus = "_16fi7uy5";
 var zonecode = "_16fi7uy3";
 
 // src/components/AddressInput/AddressInput.tsx
-import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var EMPTY = { zonecode: "", address: "", extraAddress: "", detail: "" };
 function SearchArea({
   provider,
@@ -351,13 +454,13 @@ function SearchArea({
   loadErrorText,
   loadingText
 }) {
-  const containerRef = useRef2(null);
+  const containerRef = useRef3(null);
   const [status, setStatus] = useState("loading");
-  const onSelectRef = useRef2(onSelect);
-  useEffect(() => {
+  const onSelectRef = useRef3(onSelect);
+  useEffect2(() => {
     onSelectRef.current = onSelect;
   });
-  useEffect(() => {
+  useEffect2(() => {
     const container2 = containerRef.current;
     if (!container2) return;
     let cleanup;
@@ -374,7 +477,7 @@ function SearchArea({
       cleanup?.();
     };
   }, [provider]);
-  return /* @__PURE__ */ jsxs7("div", { className: searchArea, children: [
+  return /* @__PURE__ */ jsxs8("div", { className: searchArea, children: [
     /* @__PURE__ */ jsx9("div", { ref: containerRef, style: { width: "100%", height: "100%" } }),
     status !== "ready" && /* @__PURE__ */ jsx9("div", { className: searchStatus, role: "status", children: status === "loading" ? /* @__PURE__ */ jsx9(Spinner, { label: loadingText }) : loadErrorText })
   ] });
@@ -402,10 +505,10 @@ var AddressInput = /* @__PURE__ */ forwardRef7(
     const searchLabel = searchLabelProp ?? m.addressSearch ?? "\uC8FC\uC18C \uAC80\uC0C9";
     const detailPlaceholder = detailPlaceholderProp ?? m.detailAddressPlaceholder ?? "\uC0C1\uC138 \uC8FC\uC18C (\uB3D9\xB7\uD638\uC218 \uB4F1)";
     const loadErrorText = loadErrorTextProp ?? m.addressLoadError ?? "\uC8FC\uC18C \uAC80\uC0C9\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC5B4\uC694. \uC7A0\uC2DC \uB4A4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694.";
-    const baseId = useId2();
+    const baseId = useId3();
     const helperId = helperText3 ? `${baseId}-helper` : void 0;
-    const detailRef = useRef2(null);
-    const selectedRef = useRef2(false);
+    const detailRef = useRef3(null);
+    const selectedRef = useRef3(false);
     const [open, setOpen] = useState(false);
     const isControlled = "value" in props;
     const [innerValue, setInnerValue] = useState(defaultValue ?? EMPTY);
@@ -414,6 +517,10 @@ var AddressInput = /* @__PURE__ */ forwardRef7(
       if (!isControlled) setInnerValue(next);
       onValueChange?.(next);
     };
+    const rootRef = useRef3(null);
+    useFormReset(rootRef, () => {
+      if (!isControlled) update(defaultValue ?? EMPTY);
+    });
     const openSearch = () => {
       if (disabled) return;
       selectedRef.current = false;
@@ -430,120 +537,119 @@ var AddressInput = /* @__PURE__ */ forwardRef7(
       setOpen(false);
     };
     const fullAddress = `${current2.address}${current2.extraAddress ?? ""}`;
-    return /* @__PURE__ */ jsxs7("fieldset", { ref, className: cx(fieldset, className), disabled, "aria-describedby": helperId, children: [
-      /* @__PURE__ */ jsxs7("legend", { className: legend, children: [
-        label6,
-        required && /* @__PURE__ */ jsx9("span", { className: requiredMark, "aria-hidden": true, children: "*" })
-      ] }),
-      /* @__PURE__ */ jsxs7("div", { className: row, children: [
-        /* @__PURE__ */ jsx9(
-          TextField,
-          {
-            "aria-label": m.postalCode ?? "\uC6B0\uD3B8\uBC88\uD638",
-            readOnly: true,
-            value: current2.zonecode,
-            placeholder: m.postalCode ?? "\uC6B0\uD3B8\uBC88\uD638",
-            error: error && !current2.zonecode,
-            "aria-required": required || void 0,
-            rootClassName: zonecode,
-            onClick: openSearch
-          }
-        ),
-        /* @__PURE__ */ jsx9(Button, { variant: "outline", color: "neutral", onClick: openSearch, disabled, children: searchLabel })
-      ] }),
-      /* @__PURE__ */ jsx9(
-        TextField,
-        {
-          "aria-label": m.baseAddress ?? "\uAE30\uBCF8 \uC8FC\uC18C",
-          readOnly: true,
-          value: fullAddress,
-          placeholder: m.baseAddressPlaceholder ?? `${searchLabel}\uC744 \uB20C\uB7EC \uC8FC\uC18C\uB97C \uACE0\uB974\uC138\uC694`,
-          error: error && !current2.address,
-          "aria-required": required || void 0,
-          fullWidth: true,
-          onClick: openSearch
-        }
-      ),
-      /* @__PURE__ */ jsx9(
-        TextField,
-        {
-          ref: detailRef,
-          "aria-label": m.detailAddress ?? "\uC0C1\uC138 \uC8FC\uC18C",
-          value: current2.detail,
-          placeholder: detailPlaceholder,
-          onChange: (event) => update({ ...current2, detail: event.target.value }),
-          autoComplete: "address-line2",
-          fullWidth: true
-        }
-      ),
-      helperText3 && /* @__PURE__ */ jsx9("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
-      name && /* @__PURE__ */ jsxs7(Fragment, { children: [
-        /* @__PURE__ */ jsx9("input", { type: "hidden", name: `${name}[zonecode]`, value: current2.zonecode }),
-        /* @__PURE__ */ jsx9("input", { type: "hidden", name: `${name}[address]`, value: fullAddress }),
-        /* @__PURE__ */ jsx9("input", { type: "hidden", name: `${name}[detail]`, value: current2.detail })
-      ] }),
-      /* @__PURE__ */ jsx9(
-        Modal,
-        {
-          open,
-          onOpenChange: setOpen,
-          title: searchLabel,
-          description: m.addressSearchDescription ?? "\uB3C4\uB85C\uBA85, \uAC74\uBB3C\uBA85, \uC9C0\uBC88\uC73C\uB85C \uAC80\uC0C9\uD560 \uC218 \uC788\uC5B4\uC694.",
-          onCloseAutoFocus: (event) => {
-            if (selectedRef.current) {
-              event.preventDefault();
-              detailRef.current?.focus();
+    return /* @__PURE__ */ jsxs8(
+      "fieldset",
+      {
+        ref: mergeRefs(ref, rootRef),
+        className: cx(fieldset, className),
+        disabled,
+        "aria-describedby": helperId,
+        children: [
+          /* @__PURE__ */ jsxs8("legend", { className: legend, children: [
+            label6,
+            required && /* @__PURE__ */ jsx9("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxs8("div", { className: row, children: [
+            /* @__PURE__ */ jsx9(
+              TextField,
+              {
+                "aria-label": m.postalCode ?? "\uC6B0\uD3B8\uBC88\uD638",
+                readOnly: true,
+                value: current2.zonecode,
+                placeholder: m.postalCode ?? "\uC6B0\uD3B8\uBC88\uD638",
+                error: error && !current2.zonecode,
+                "aria-required": required || void 0,
+                rootClassName: zonecode,
+                onClick: openSearch
+              }
+            ),
+            /* @__PURE__ */ jsx9(Button, { variant: "outline", color: "neutral", onClick: openSearch, disabled, children: searchLabel })
+          ] }),
+          /* @__PURE__ */ jsx9(
+            TextField,
+            {
+              "aria-label": m.baseAddress ?? "\uAE30\uBCF8 \uC8FC\uC18C",
+              readOnly: true,
+              value: fullAddress,
+              placeholder: m.baseAddressPlaceholder ?? `${searchLabel}\uC744 \uB20C\uB7EC \uC8FC\uC18C\uB97C \uACE0\uB974\uC138\uC694`,
+              error: error && !current2.address,
+              "aria-required": required || void 0,
+              fullWidth: true,
+              onClick: openSearch
             }
-          },
-          children: /* @__PURE__ */ jsx9(
-            SearchArea,
+          ),
+          /* @__PURE__ */ jsx9(
+            TextField,
             {
-              provider,
-              onSelect: handleSelect,
-              loadErrorText,
-              loadingText: m.addressLoading ?? "\uC8FC\uC18C \uAC80\uC0C9\uC744 \uBD88\uB7EC\uC624\uB294 \uC911"
+              ref: detailRef,
+              "aria-label": m.detailAddress ?? "\uC0C1\uC138 \uC8FC\uC18C",
+              value: current2.detail,
+              placeholder: detailPlaceholder,
+              onChange: (event) => update({ ...current2, detail: event.target.value }),
+              autoComplete: "address-line2",
+              fullWidth: true
+            }
+          ),
+          helperText3 && /* @__PURE__ */ jsx9("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
+          name && /* @__PURE__ */ jsxs8(Fragment2, { children: [
+            /* @__PURE__ */ jsx9("input", { type: "hidden", name: `${name}[zonecode]`, value: current2.zonecode }),
+            /* @__PURE__ */ jsx9("input", { type: "hidden", name: `${name}[address]`, value: fullAddress }),
+            /* @__PURE__ */ jsx9("input", { type: "hidden", name: `${name}[detail]`, value: current2.detail })
+          ] }),
+          /* @__PURE__ */ jsx9(
+            Modal,
+            {
+              open,
+              onOpenChange: setOpen,
+              title: searchLabel,
+              description: m.addressSearchDescription ?? "\uB3C4\uB85C\uBA85, \uAC74\uBB3C\uBA85, \uC9C0\uBC88\uC73C\uB85C \uAC80\uC0C9\uD560 \uC218 \uC788\uC5B4\uC694.",
+              onCloseAutoFocus: (event) => {
+                if (selectedRef.current) {
+                  event.preventDefault();
+                  detailRef.current?.focus();
+                }
+              },
+              children: /* @__PURE__ */ jsx9(
+                SearchArea,
+                {
+                  provider,
+                  onSelect: handleSelect,
+                  loadErrorText,
+                  loadingText: m.addressLoading ?? "\uC8FC\uC18C \uAC80\uC0C9\uC744 \uBD88\uB7EC\uC624\uB294 \uC911"
+                }
+              )
             }
           )
-        }
-      )
-    ] });
+        ]
+      }
+    );
   }
 );
 
 // src/components/AgreementGroup/AgreementGroup.tsx
-import { forwardRef as forwardRef9, useId as useId3, useState as useState2 } from "react";
+import { forwardRef as forwardRef9, useId as useId4, useRef as useRef5, useState as useState2 } from "react";
 import { ChevronDownIcon as ChevronDownIcon2 } from "@bestow-ui/icons";
 
 // src/components/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef8, useEffect as useEffect2, useRef as useRef3 } from "react";
-
-// src/utils/mergeRefs.ts
-function mergeRefs(...refs) {
-  return (value3) => {
-    for (const ref of refs) {
-      if (typeof ref === "function") ref(value3);
-      else if (ref) ref.current = value3;
-    }
-  };
-}
+import { forwardRef as forwardRef8, useEffect as useEffect3, useRef as useRef4 } from "react";
 
 // src/components/Checkbox/Checkbox.css.ts
-import { createRuntimeFn as _7a4685 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a4684 } from "@vanilla-extract/recipes/createRuntimeFn";
 var checkIcon = "_1y7mzsn8 _1y7mzsn7";
-var control = /* @__PURE__ */ _7a4685({ defaultClassName: "_1y7mzsn3", variantClassNames: { size: { sm: "_1y7mzsn4", md: "_1y7mzsn5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var control = /* @__PURE__ */ _7a4684({ defaultClassName: "_1y7mzsn3", variantClassNames: { size: { sm: "_1y7mzsn4", md: "_1y7mzsn5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 var indeterminateIcon = "_1y7mzsn9 _1y7mzsn7";
 var input2 = "_1y7mzsn6";
-var root4 = /* @__PURE__ */ _7a4685({ defaultClassName: "_1y7mzsn0", variantClassNames: { size: { sm: "_1y7mzsn1", md: "_1y7mzsn2" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var root4 = /* @__PURE__ */ _7a4684({ defaultClassName: "_1y7mzsn0", variantClassNames: { size: { sm: "_1y7mzsn1", md: "_1y7mzsn2" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 
 // src/components/Checkbox/Checkbox.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var Checkbox = /* @__PURE__ */ forwardRef8(function Checkbox2({ label: label6, size, indeterminate = false, invalid, disabled, onChange, onCheckedChange, className, ...rest }, ref) {
-  const innerRef = useRef3(null);
-  useEffect2(() => {
+  const innerRef = useRef4(null);
+  useEffect3(() => {
     if (innerRef.current) innerRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
-  return /* @__PURE__ */ jsxs8("label", { className: cx(root4({ size }), className), "data-disabled": disabled || void 0, children: [
-    /* @__PURE__ */ jsxs8("span", { className: control({ size }), children: [
+  return /* @__PURE__ */ jsxs9("label", { className: cx(root4({ size }), className), "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsxs9("span", { className: control({ size }), children: [
       /* @__PURE__ */ jsx10(
         "input",
         {
@@ -589,11 +695,11 @@ var tag = "j3uxdc7";
 var toggle = "j3uxdc8";
 
 // src/components/AgreementGroup/AgreementGroup.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var AgreementGroup = /* @__PURE__ */ forwardRef9(
   function AgreementGroup2(props, ref) {
     const {
-      items: items2,
+      items: items3,
       value: value3,
       defaultValue,
       onValueChange,
@@ -616,24 +722,31 @@ var AgreementGroup = /* @__PURE__ */ forwardRef9(
     const optionalText = optionalTextProp ?? m.optional ?? "\uC120\uD0DD";
     const showText = showTextProp ?? m.show ?? "\uBCF4\uAE30";
     const hideText = hideTextProp ?? m.hide ?? "\uC811\uAE30";
-    const baseId = useId3();
+    const baseId = useId4();
     const helperId = helperText3 ? `${baseId}-helper` : void 0;
     const isControlled = "value" in props;
     const [innerValue, setInnerValue] = useState2(defaultValue ?? []);
     const agreed = isControlled ? value3 ?? [] : innerValue;
     const [expanded, setExpanded] = useState2([]);
+    const rootRef = useRef5(null);
+    useFormReset(rootRef, () => {
+      if (isControlled) return;
+      const next = defaultValue ?? [];
+      setInnerValue(next);
+      if (next.join() !== agreed.join()) onValueChange?.(next);
+    });
     const update = (next) => {
       if (!isControlled) setInnerValue(next);
       onValueChange?.(next);
     };
-    const allValues = items2.map((item9) => item9.value);
+    const allValues = items3.map((item9) => item9.value);
     const agreedCount = allValues.filter((v) => agreed.includes(v)).length;
-    const allChecked = items2.length > 0 && agreedCount === items2.length;
+    const allChecked = items3.length > 0 && agreedCount === items3.length;
     const toggleItem = (itemValue, checked) => update(checked ? [...agreed.filter((v) => v !== itemValue), itemValue] : agreed.filter((v) => v !== itemValue));
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs10(
       "fieldset",
       {
-        ref,
+        ref: mergeRefs(ref, rootRef),
         id,
         className: cx(fieldset2, className),
         disabled,
@@ -641,7 +754,7 @@ var AgreementGroup = /* @__PURE__ */ forwardRef9(
         "data-invalid": error || void 0,
         children: [
           label6 && /* @__PURE__ */ jsx11("legend", { className: legend2, children: label6 }),
-          /* @__PURE__ */ jsxs9("div", { className: box, children: [
+          /* @__PURE__ */ jsxs10("div", { className: box, children: [
             /* @__PURE__ */ jsx11("div", { className: all, children: /* @__PURE__ */ jsx11(
               Checkbox,
               {
@@ -651,13 +764,13 @@ var AgreementGroup = /* @__PURE__ */ forwardRef9(
                 onChange: (event) => update(event.target.checked ? allValues : [])
               }
             ) }),
-            /* @__PURE__ */ jsx11("ul", { className: list, children: items2.map((item9) => {
+            /* @__PURE__ */ jsx11("ul", { className: list, children: items3.map((item9) => {
               const labelId = `${baseId}-${item9.value}-label`;
               const toggleTextId = `${baseId}-${item9.value}-toggle`;
               const contentId = `${baseId}-${item9.value}-content`;
               const isOpen = expanded.includes(item9.value);
-              return /* @__PURE__ */ jsxs9("li", { className: item2, children: [
-                /* @__PURE__ */ jsxs9("div", { className: row2, children: [
+              return /* @__PURE__ */ jsxs10("li", { className: item2, children: [
+                /* @__PURE__ */ jsxs10("div", { className: row2, children: [
                   /* @__PURE__ */ jsx11(
                     Checkbox,
                     {
@@ -665,14 +778,14 @@ var AgreementGroup = /* @__PURE__ */ forwardRef9(
                       checked: agreed.includes(item9.value),
                       invalid: error && item9.required && !agreed.includes(item9.value),
                       onChange: (event) => toggleItem(item9.value, event.target.checked),
-                      label: /* @__PURE__ */ jsxs9("span", { id: labelId, children: [
+                      label: /* @__PURE__ */ jsxs10("span", { id: labelId, children: [
                         /* @__PURE__ */ jsx11("span", { className: tag, "data-required": item9.required || void 0, children: item9.required ? requiredText : optionalText }),
                         " ",
                         item9.label
                       ] })
                     }
                   ),
-                  item9.content && /* @__PURE__ */ jsxs9(
+                  item9.content && /* @__PURE__ */ jsxs10(
                     "button",
                     {
                       type: "button",
@@ -707,23 +820,24 @@ import { forwardRef as forwardRef10 } from "react";
 import { CircleAlertIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, XIcon as XIcon2 } from "@bestow-ui/icons";
 
 // src/components/Alert/Alert.css.ts
-import { createRuntimeFn as _7a4686 } from "@vanilla-extract/recipes/createRuntimeFn";
-var action = "bsmpc0j";
-var alert = /* @__PURE__ */ _7a4686({ defaultClassName: "bsmpc06", variantClassNames: { variant: { soft: "bsmpc07", outline: "bsmpc08", solid: "bsmpc09" }, color: { primary: "bsmpc0a", neutral: "bsmpc0b", danger: "bsmpc0c", success: "bsmpc0d", warning: "bsmpc0e" } }, defaultVariants: { variant: "soft", color: "primary" }, compoundVariants: [] });
-var closeButton2 = "bsmpc0k";
-var content4 = "bsmpc0g";
-var description2 = "bsmpc0i";
-var icon2 = "bsmpc0f";
-var title2 = "bsmpc0h";
+import { createRuntimeFn as _7a4685 } from "@vanilla-extract/recipes/createRuntimeFn";
+var action = "bsmpc0k";
+var alert = /* @__PURE__ */ _7a4685({ defaultClassName: "bsmpc06", variantClassNames: { variant: { soft: "bsmpc07", outline: "bsmpc08", solid: "bsmpc09" }, color: { primary: "bsmpc0a", neutral: "bsmpc0b", danger: "bsmpc0c", success: "bsmpc0d", warning: "bsmpc0e", info: "bsmpc0f" } }, defaultVariants: { variant: "soft", color: "primary" }, compoundVariants: [] });
+var closeButton2 = "bsmpc0l";
+var content4 = "bsmpc0h";
+var description2 = "bsmpc0j";
+var icon2 = "bsmpc0g";
+var title2 = "bsmpc0i";
 
 // src/components/Alert/Alert.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var defaultIcons = {
   primary: InfoIcon,
   neutral: InfoIcon,
   success: CircleCheckIcon,
   warning: TriangleAlertIcon,
-  danger: CircleAlertIcon
+  danger: CircleAlertIcon,
+  info: InfoIcon
 };
 var Alert = /* @__PURE__ */ forwardRef10(function Alert2({
   variant,
@@ -741,9 +855,9 @@ var Alert = /* @__PURE__ */ forwardRef10(function Alert2({
   const closeLabel = closeLabelProp ?? m.close ?? "\uB2EB\uAE30";
   const DefaultIcon = defaultIcons[color];
   const iconNode = icon7 === void 0 ? /* @__PURE__ */ jsx12(DefaultIcon, { size: 18 }) : icon7;
-  return /* @__PURE__ */ jsxs10("div", { ref, className: cx(alert({ variant, color }), className), ...rest, children: [
+  return /* @__PURE__ */ jsxs11("div", { ref, className: cx(alert({ variant, color }), className), ...rest, children: [
     iconNode !== false && iconNode !== null && /* @__PURE__ */ jsx12("span", { className: icon2, "aria-hidden": true, children: iconNode }),
-    /* @__PURE__ */ jsxs10("div", { className: content4, children: [
+    /* @__PURE__ */ jsxs11("div", { className: content4, children: [
       title6 && /* @__PURE__ */ jsx12("div", { className: title2, children: title6 }),
       children && /* @__PURE__ */ jsx12("div", { className: description2, children })
     ] }),
@@ -753,15 +867,15 @@ var Alert = /* @__PURE__ */ forwardRef10(function Alert2({
 });
 
 // src/components/AmountInput/AmountInput.tsx
-import { forwardRef as forwardRef11, useRef as useRef5 } from "react";
+import { forwardRef as forwardRef11, useRef as useRef7 } from "react";
 import { formatKoreanAmount } from "@bestow-ui/korean-utils";
 
 // src/utils/useFormattedInput.ts
-import { useRef as useRef4, useState as useState3 } from "react";
+import { useRef as useRef6, useState as useState3 } from "react";
 
 // src/utils/useIsomorphicLayoutEffect.ts
-import { useEffect as useEffect3, useLayoutEffect } from "react";
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect3;
+import { useEffect as useEffect4, useLayoutEffect } from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect4;
 
 // src/utils/useFormattedInput.ts
 function caretAfter(display, count2, isMeaningful2) {
@@ -778,15 +892,16 @@ function useFormattedInput({
   value: value3,
   defaultValue,
   onValueChange,
-  sanitize: sanitize4,
+  sanitize: sanitize3,
   format: format2,
   isMeaningful: isMeaningful2,
-  inputRef
+  inputRef,
+  manualReset
 }) {
-  const [innerValue, setInnerValue] = useState3(() => sanitize4(defaultValue ?? ""));
-  const raw = isControlled ? sanitize4(value3 ?? "") : innerValue;
+  const [innerValue, setInnerValue] = useState3(() => sanitize3(defaultValue ?? ""));
+  const raw = isControlled ? sanitize3(value3 ?? "") : innerValue;
   const display = format2(raw);
-  const pendingCaret = useRef4(null);
+  const pendingCaret = useRef6(null);
   useIsomorphicLayoutEffect(() => {
     const input6 = inputRef.current;
     if (pendingCaret.current === null || !input6 || document.activeElement !== input6) return;
@@ -794,6 +909,12 @@ function useFormattedInput({
     input6.setSelectionRange(position, position);
     pendingCaret.current = null;
   });
+  useFormReset(inputRef, () => {
+    if (isControlled || manualReset) return;
+    const next = sanitize3(defaultValue ?? "");
+    setInnerValue(next);
+    if (next !== innerValue) onValueChange?.(next);
+  });
   const commit = (next, caretCount) => {
     pendingCaret.current = caretCount;
     if (!isControlled) setInnerValue(next);
@@ -801,8 +922,8 @@ function useFormattedInput({
   };
   const onChange = (event) => {
     const { value: typed, selectionStart } = event.target;
-    const next = sanitize4(typed);
-    const before = sanitize4(typed.slice(0, selectionStart ?? typed.length));
+    const next = sanitize3(typed);
+    const before = sanitize3(typed.slice(0, selectionStart ?? typed.length));
     commit(next, Math.min(before.length, next.length));
   };
   const onKeyDown = (event) => {
@@ -822,7 +943,7 @@ function useFormattedInput({
       commit(raw.slice(0, index) + raw.slice(index + 1), index);
     }
   };
-  const setRaw = (next) => setInnerValue(sanitize4(next));
+  const setRaw = (next) => setInnerValue(sanitize3(next));
   return { raw, display, onChange, onKeyDown, setRaw };
 }
 
@@ -830,7 +951,7 @@ function useFormattedInput({
 var input3 = "_70qkav0";
 
 // src/components/AmountInput/AmountInput.tsx
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var MAX_DIGITS = 15;
 var isDigit = (char) => /\d/.test(char);
 var AmountInput = /* @__PURE__ */ forwardRef11(
@@ -849,11 +970,11 @@ var AmountInput = /* @__PURE__ */ forwardRef11(
       className,
       ...rest
     } = props;
-    const inputRef = useRef5(null);
+    const inputRef = useRef7(null);
     const m = useMessages();
     const unit2 = unitProp ?? m.currencyUnit ?? "\uC6D0";
     const label6 = labelProp ?? m.amount ?? "\uAE08\uC561";
-    const sanitize4 = (input6) => {
+    const sanitize3 = (input6) => {
       let digits = input6.replace(/\D/g, "").replace(/^0+(?=\d)/, "").slice(0, MAX_DIGITS);
       if (max !== void 0 && digits && Number(digits) > max) digits = String(Math.floor(max));
       return digits;
@@ -864,7 +985,7 @@ var AmountInput = /* @__PURE__ */ forwardRef11(
       value: toRaw(value3),
       defaultValue: toRaw(defaultValue),
       onValueChange: (digits) => onValueChange?.(digits === "" ? null : Number(digits)),
-      sanitize: sanitize4,
+      sanitize: sanitize3,
       format: (digits) => digits === "" ? "" : Number(digits).toLocaleString("ko-KR"),
       isMeaningful: isDigit,
       inputRef
@@ -884,7 +1005,7 @@ var AmountInput = /* @__PURE__ */ forwardRef11(
           onKeyDown?.(event);
         },
         endAdornment: unit2,
-        helperText: reading && helperText3 ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
+        helperText: reading && helperText3 ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
           reading,
           /* @__PURE__ */ jsx13("br", {}),
           helperText3
@@ -902,13 +1023,13 @@ import { UserIcon } from "@bestow-ui/icons";
 import { forwardRef as forwardRef12 } from "react";
 
 // src/components/Avatar/Avatar.css.ts
-import { createRuntimeFn as _7a4687 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a4686 } from "@vanilla-extract/recipes/createRuntimeFn";
 var fallback = "_1fd2kp27";
 var image = "_1fd2kp26";
-var root5 = /* @__PURE__ */ _7a4687({ defaultClassName: "_1fd2kp20", variantClassNames: { size: { sm: "_1fd2kp21", md: "_1fd2kp22", lg: "_1fd2kp23" }, shape: { circle: "_1fd2kp24", square: "_1fd2kp25" } }, defaultVariants: { size: "md", shape: "circle" }, compoundVariants: [] });
+var root5 = /* @__PURE__ */ _7a4686({ defaultClassName: "_1fd2kp20", variantClassNames: { size: { sm: "_1fd2kp21", md: "_1fd2kp22", lg: "_1fd2kp23" }, shape: { circle: "_1fd2kp24", square: "_1fd2kp25" } }, defaultVariants: { size: "md", shape: "circle" }, compoundVariants: [] });
 
 // src/components/Avatar/Avatar.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function getInitials(name) {
   const [a = "", b = ""] = name.trim().split(/\s+/);
   const first = (word) => Array.from(word)[0] ?? "";
@@ -918,7 +1039,7 @@ var Avatar = /* @__PURE__ */ forwardRef12(function Avatar2({ src, alt, name, fal
   const label6 = alt ?? name;
   const a11y = label6 ? { role: "img", "aria-label": label6 } : { "aria-hidden": true };
   const initials = name ? getInitials(name) : "";
-  return /* @__PURE__ */ jsxs12(RadixAvatar.Root, { ref, className: cx(root5({ size, shape }), className), ...a11y, ...rest, children: [
+  return /* @__PURE__ */ jsxs13(RadixAvatar.Root, { ref, className: cx(root5({ size, shape }), className), ...a11y, ...rest, children: [
     src && /* @__PURE__ */ jsx14(RadixAvatar.Image, { src, alt: "", className: image }),
     /* @__PURE__ */ jsx14(RadixAvatar.Fallback, { className: fallback, children: fallback2 ?? (initials || /* @__PURE__ */ jsx14(UserIcon, { size: "60%" })) })
   ] });
@@ -934,12 +1055,12 @@ import { forwardRef as forwardRef13 } from "react";
 import { ExternalLinkIcon } from "@bestow-ui/icons";
 
 // src/components/Link/Link.css.ts
-import { createRuntimeFn as _7a4688 } from "@vanilla-extract/recipes/createRuntimeFn";
+import { createRuntimeFn as _7a4687 } from "@vanilla-extract/recipes/createRuntimeFn";
 var externalIcon = "_1t4hlp6";
-var link = /* @__PURE__ */ _7a4688({ defaultClassName: "_1t4hlp0", variantClassNames: { color: { primary: "_1t4hlp1", neutral: "_1t4hlp2", inherit: "_1t4hlp3" }, underline: { always: "_1t4hlp4", hover: "_1t4hlp5" } }, defaultVariants: { color: "primary", underline: "always" }, compoundVariants: [] });
+var link = /* @__PURE__ */ _7a4687({ defaultClassName: "_1t4hlp0", variantClassNames: { color: { primary: "_1t4hlp1", neutral: "_1t4hlp2", inherit: "_1t4hlp3" }, underline: { always: "_1t4hlp4", hover: "_1t4hlp5" } }, defaultVariants: { color: "primary", underline: "always" }, compoundVariants: [] });
 
 // src/components/Link/Link.tsx
-import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var Link = /* @__PURE__ */ forwardRef13(function Link2({
   as: Component = "a",
   asChild,
@@ -962,7 +1083,7 @@ var Link = /* @__PURE__ */ forwardRef13(function Link2({
       /* @__PURE__ */ jsx15(Slot, { ref, className: linkClassName, ...{ target, rel, ...rest }, children })
     );
   }
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     Component,
     {
       ref,
@@ -972,7 +1093,7 @@ var Link = /* @__PURE__ */ forwardRef13(function Link2({
       ...rest,
       children: [
         children,
-        external && /* @__PURE__ */ jsxs13(Fragment3, { children: [
+        external && /* @__PURE__ */ jsxs14(Fragment4, { children: [
           " ",
           /* @__PURE__ */ jsx15(ExternalLinkIcon, { className: externalIcon }),
           /* @__PURE__ */ jsx15("span", { className: visuallyHidden, children: externalLabel })
@@ -990,14 +1111,14 @@ var list2 = "_18t8ztt0";
 var separator = "_18t8ztt4";
 
 // src/components/Breadcrumb/Breadcrumb.tsx
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
-var Breadcrumb = /* @__PURE__ */ forwardRef14(function Breadcrumb2({ items: items2, linkAs, separator: separator4, "aria-label": ariaLabelProp, className, ...rest }, ref) {
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+var Breadcrumb = /* @__PURE__ */ forwardRef14(function Breadcrumb2({ items: items3, linkAs, separator: separator5, "aria-label": ariaLabelProp, className, ...rest }, ref) {
   const m = useMessages();
   const ariaLabel = ariaLabelProp ?? m.breadcrumb ?? "\uC774\uB3D9 \uACBD\uB85C";
-  const sep = separator4 ?? /* @__PURE__ */ jsx16(ChevronRightIcon, { size: 14 });
-  return /* @__PURE__ */ jsx16("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ jsx16("ol", { className: list2, children: items2.map((item9, index) => {
-    const isCurrent = index === items2.length - 1;
-    return /* @__PURE__ */ jsxs14("li", { className: item3, children: [
+  const sep = separator5 ?? /* @__PURE__ */ jsx16(ChevronRightIcon, { size: 14 });
+  return /* @__PURE__ */ jsx16("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ jsx16("ol", { className: list2, children: items3.map((item9, index) => {
+    const isCurrent = index === items3.length - 1;
+    return /* @__PURE__ */ jsxs15("li", { className: item3, children: [
       index > 0 && /* @__PURE__ */ jsx16("span", { className: separator, "aria-hidden": true, children: sep }),
       isCurrent || item9.href === void 0 ? /* @__PURE__ */ jsx16("span", { className: isCurrent ? current : void 0, "aria-current": isCurrent ? "page" : void 0, children: item9.label }) : /* @__PURE__ */ jsx16(Link, { as: linkAs, href: item9.href, color: "neutral", underline: "hover", className: link2, children: item9.label })
     ] }, index);
@@ -1005,15 +1126,15 @@ var Breadcrumb = /* @__PURE__ */ forwardRef14(function Breadcrumb2({ items: item
 });
 
 // src/components/BusinessNumberInput/BusinessNumberInput.tsx
-import { forwardRef as forwardRef15, useRef as useRef6, useState as useState5 } from "react";
+import { forwardRef as forwardRef15, useRef as useRef8, useState as useState5 } from "react";
 import { formatBusinessNumber, isValidBusinessNumber } from "@bestow-ui/korean-utils";
 
 // src/utils/useDelayedAnnouncement.ts
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect5, useState as useState4 } from "react";
 var ANNOUNCE_DELAY = 800;
 function useDelayedAnnouncement(message, delay = ANNOUNCE_DELAY) {
   const [announced, setAnnounced] = useState4("");
-  useEffect4(() => {
+  useEffect5(() => {
     const timer2 = setTimeout(() => setAnnounced(message), message ? delay : 0);
     return () => clearTimeout(timer2);
   }, [message, delay]);
@@ -1021,7 +1142,7 @@ function useDelayedAnnouncement(message, delay = ANNOUNCE_DELAY) {
 }
 
 // src/components/BusinessNumberInput/BusinessNumberInput.tsx
-import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 var sanitize = (input6) => input6.replace(/\D/g, "").slice(0, 10);
 var isDigit2 = (char) => /\d/.test(char);
 var BusinessNumberInput = /* @__PURE__ */ forwardRef15(
@@ -1040,12 +1161,13 @@ var BusinessNumberInput = /* @__PURE__ */ forwardRef15(
       onKeyDown,
       ...rest
     } = props;
-    const inputRef = useRef6(null);
+    const inputRef = useRef8(null);
     const m = useMessages();
     const invalidText = invalidTextProp ?? m.businessNumberInvalid ?? "\uC62C\uBC14\uB978 \uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638\uAC00 \uC544\uB2C8\uC5D0\uC694. \uBC88\uD638\uB97C \uB2E4\uC2DC \uD655\uC778\uD574 \uC8FC\uC138\uC694.";
     const label6 = labelProp ?? m.businessNumber ?? "\uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638";
     const incompleteText = m.businessNumberIncomplete ?? "10\uC790\uB9AC\uB97C \uBAA8\uB450 \uC785\uB825\uD574 \uC8FC\uC138\uC694.";
     const [touched, setTouched] = useState5(false);
+    useFormReset(inputRef, () => setTouched(false));
     const field4 = useFormattedInput({
       isControlled: "value" in props,
       value: value3,
@@ -1060,7 +1182,7 @@ var BusinessNumberInput = /* @__PURE__ */ forwardRef15(
     const autoInvalid = validate && field4.raw.length > 0 && (complete ? !isValidBusinessNumber(field4.raw) : touched);
     const showAuto = autoInvalid && error === void 0;
     const announcement = useDelayedAnnouncement(showAuto && complete ? invalidText : "");
-    return /* @__PURE__ */ jsxs15(Fragment4, { children: [
+    return /* @__PURE__ */ jsxs16(Fragment5, { children: [
       /* @__PURE__ */ jsx17(
         TextField,
         {
@@ -1089,16 +1211,16 @@ var BusinessNumberInput = /* @__PURE__ */ forwardRef15(
 );
 
 // src/components/Calendar/Calendar.tsx
-import { forwardRef as forwardRef17, useEffect as useEffect5, useId as useId4, useRef as useRef7, useState as useState6 } from "react";
+import { forwardRef as forwardRef17, useEffect as useEffect6, useId as useId5, useRef as useRef9, useState as useState6 } from "react";
 import { ChevronLeftIcon, ChevronRightIcon as ChevronRightIcon2 } from "@bestow-ui/icons";
 import { KOREAN_WEEKDAYS } from "@bestow-ui/korean-utils";
 
 // src/utils/useIsClient.ts
-import { useSyncExternalStore } from "react";
+import { useSyncExternalStore as useSyncExternalStore2 } from "react";
 var subscribeNothing = () => () => {
 };
 function useIsClient() {
-  return useSyncExternalStore(
+  return useSyncExternalStore2(
     subscribeNothing,
     () => true,
     () => false
@@ -1106,15 +1228,15 @@ function useIsClient() {
 }
 
 // src/components/IconButton/IconButton.tsx
-import { forwardRef as forwardRef16 } from "react";
+import { cloneElement as cloneElement2, forwardRef as forwardRef16 } from "react";
 
 // src/components/IconButton/IconButton.css.ts
-import { createRuntimeFn as _7a4689 } from "@vanilla-extract/recipes/createRuntimeFn";
-var iconButton = /* @__PURE__ */ _7a4689({ defaultClassName: "ip9et20", variantClassNames: { size: { sm: "ip9et21", md: "ip9et22", lg: "ip9et23" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+import { createRuntimeFn as _7a4688 } from "@vanilla-extract/recipes/createRuntimeFn";
+var iconButton = /* @__PURE__ */ _7a4688({ defaultClassName: "ip9et20", variantClassNames: { size: { sm: "ip9et21", md: "ip9et22", lg: "ip9et23" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 
 // src/components/IconButton/IconButton.tsx
 import { jsx as jsx18 } from "react/jsx-runtime";
-var IconButton = /* @__PURE__ */ forwardRef16(function IconButton2({ variant = "ghost", color = "neutral", size, loading, className, children, ...rest }, ref) {
+var IconButton = /* @__PURE__ */ forwardRef16(function IconButton2({ variant = "ghost", color = "neutral", size, loading, asChild, className, children, ...rest }, ref) {
   return /* @__PURE__ */ jsx18(
     Button,
     {
@@ -1123,9 +1245,10 @@ var IconButton = /* @__PURE__ */ forwardRef16(function IconButton2({ variant = "
       color,
       size,
       loading,
+      asChild,
       className: cx(iconButton({ size }), className),
       ...rest,
-      children: !loading && children
+      children: loading ? asChild && cloneElement2(children, void 0, null) : children
     }
   );
 });
@@ -1140,7 +1263,7 @@ var root6 = "_1qyq67b0";
 var weekday = "_1qyq67b4";
 
 // src/components/Calendar/Calendar.tsx
-import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
   const {
     value: value3,
@@ -1161,8 +1284,8 @@ var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
   const nextMonthLabel = nextMonthLabelProp ?? m.nextMonth ?? "\uB2E4\uC74C \uB2EC";
   const weekdaysShort = m.weekdaysShort ?? KOREAN_WEEKDAYS;
   const weekdaysLong = m.weekdaysLong ?? KOREAN_WEEKDAYS.map((name) => `${name}\uC694\uC77C`);
-  const headingId = useId4();
-  const gridRef = useRef7(null);
+  const headingId = useId5();
+  const gridRef = useRef9(null);
   const isControlled = "value" in props;
   const [innerValue, setInnerValue] = useState6(defaultValue ?? "");
   const selected = parseISODate(isControlled ? value3 : innerValue);
@@ -1179,13 +1302,13 @@ var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
   const [focusedState, setFocused] = useState6(null);
   const base = selected ?? today;
   const focused = focusedState ?? (base ? clamp(base) : null);
-  const moveFocus = useRef7(initialFocus ?? false);
+  const moveFocus = useRef9(initialFocus ?? false);
   const selectedIso = selected ? toISODate(selected) : "";
-  useEffect5(() => {
+  useEffect6(() => {
     const date = parseISODate(selectedIso);
     if (date) setFocused((prev) => isSameDay(prev, date) ? prev : date);
   }, [selectedIso]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!moveFocus.current || !focused) return;
     moveFocus.current = false;
     gridRef.current?.querySelector(`[data-date="${toISODate(focused)}"]`)?.focus();
@@ -1225,8 +1348,8 @@ var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
   ) : [];
   const canPrev = !!visible && (!minDate || compareDays(new Date(visible.getFullYear(), visible.getMonth(), 0), minDate) >= 0);
   const canNext = !!visible && (!maxDate || compareDays(new Date(visible.getFullYear(), visible.getMonth() + 1, 1), maxDate) <= 0);
-  return /* @__PURE__ */ jsxs16("div", { ref, className: cx(root6, className), children: [
-    /* @__PURE__ */ jsxs16("div", { className: header3, children: [
+  return /* @__PURE__ */ jsxs17("div", { ref, className: cx(root6, className), children: [
+    /* @__PURE__ */ jsxs17("div", { className: header3, children: [
       /* @__PURE__ */ jsx19(
         IconButton,
         {
@@ -1249,7 +1372,7 @@ var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs16("table", { ref: gridRef, role: "grid", "aria-labelledby": headingId, className: grid, onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsxs17("table", { ref: gridRef, role: "grid", "aria-labelledby": headingId, className: grid, onKeyDown: handleKeyDown, children: [
       /* @__PURE__ */ jsx19("thead", { children: /* @__PURE__ */ jsx19("tr", { children: weekdaysShort.map((name, index) => /* @__PURE__ */ jsx19("th", { scope: "col", abbr: weekdaysLong[index], className: weekday, "data-weekday": index, children: name }, index)) }) }),
       /* @__PURE__ */ jsx19("tbody", { children: weeks.map((week) => /* @__PURE__ */ jsx19("tr", { children: week.map((date) => {
         const iso = toISODate(date);
@@ -1287,15 +1410,118 @@ var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
   ] });
 });
 
+// src/components/CheckboxGroup/CheckboxGroup.tsx
+import { forwardRef as forwardRef18, useId as useId6, useRef as useRef10, useState as useState7 } from "react";
+
+// src/components/CheckboxGroup/CheckboxGroup.css.ts
+import { createRuntimeFn as _7a4689 } from "@vanilla-extract/recipes/createRuntimeFn";
+var description3 = /* @__PURE__ */ _7a4689({ defaultClassName: "_1z0r6xj5", variantClassNames: { size: { sm: "_1z0r6xj6", md: "_1z0r6xj7" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var groupLabel = "_1z0r6xj0";
+var items = /* @__PURE__ */ _7a4689({ defaultClassName: "_1z0r6xj1", variantClassNames: { orientation: { vertical: "_1z0r6xj2", horizontal: "_1z0r6xj3" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
+var option = "_1z0r6xj4";
+
+// src/components/CheckboxGroup/CheckboxGroup.tsx
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+var CheckboxGroup = /* @__PURE__ */ forwardRef18(
+  function CheckboxGroup2(props, ref) {
+    const {
+      options,
+      value: value3,
+      defaultValue,
+      onValueChange,
+      label: label6,
+      helperText: helperText3,
+      error,
+      orientation,
+      size,
+      disabled,
+      required,
+      name,
+      id,
+      "aria-label": ariaLabel,
+      className
+    } = props;
+    const m = useMessages();
+    const isControlled = "value" in props;
+    const [innerValue, setInnerValue] = useState7(defaultValue ?? []);
+    const current2 = isControlled ? value3 ?? [] : innerValue;
+    const generatedId = useId6();
+    const baseId = id ?? generatedId;
+    const labelId = label6 ? `${baseId}-label` : void 0;
+    const helperId = helperText3 ? `${baseId}-helper` : void 0;
+    const rootRef = useRef10(null);
+    useFormReset(rootRef, () => {
+      if (isControlled) return;
+      const next = defaultValue ?? [];
+      setInnerValue(next);
+      if (next.join() !== current2.join()) onValueChange?.(next);
+    });
+    const toggle3 = (optionValue, checked) => {
+      const next = options.map((option3) => option3.value).filter((v) => v === optionValue ? checked : current2.includes(v));
+      if (!isControlled) setInnerValue(next);
+      onValueChange?.(next);
+    };
+    return /* @__PURE__ */ jsxs18("div", { className: cx(field, className), children: [
+      label6 && /* @__PURE__ */ jsxs18("span", { id: labelId, className: cx(label, groupLabel), children: [
+        label6,
+        required && /* @__PURE__ */ jsxs18(Fragment6, { children: [
+          /* @__PURE__ */ jsx20("span", { className: requiredMark, "aria-hidden": true, children: "*" }),
+          " ",
+          /* @__PURE__ */ jsxs18("span", { className: visuallyHidden, children: [
+            "(",
+            m.required ?? "\uD544\uC218",
+            ")"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx20(
+        "div",
+        {
+          ref: mergeRefs(ref, rootRef),
+          id: baseId,
+          role: "group",
+          "aria-label": ariaLabel,
+          "aria-labelledby": labelId,
+          "aria-describedby": helperId,
+          className: items({ orientation }),
+          children: options.map((option3) => {
+            const itemId = `${baseId}-${option3.value}`;
+            const descriptionId = option3.description ? `${itemId}-description` : void 0;
+            return /* @__PURE__ */ jsxs18("div", { className: option, children: [
+              /* @__PURE__ */ jsx20(
+                Checkbox,
+                {
+                  id: itemId,
+                  name,
+                  value: option3.value,
+                  label: option3.label,
+                  size,
+                  checked: current2.includes(option3.value),
+                  onCheckedChange: (checked) => toggle3(option3.value, checked),
+                  disabled: disabled || option3.disabled,
+                  invalid: error,
+                  "aria-describedby": descriptionId
+                }
+              ),
+              option3.description && /* @__PURE__ */ jsx20("span", { id: descriptionId, className: description3({ size }), children: option3.description })
+            ] }, option3.value);
+          })
+        }
+      ),
+      helperText3 && /* @__PURE__ */ jsx20("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+    ] });
+  }
+);
+
 // src/components/Combobox/Combobox.tsx
 import * as Popover from "@radix-ui/react-popover";
 import {
-  forwardRef as forwardRef18,
-  useEffect as useEffect6,
-  useId as useId5,
+  forwardRef as forwardRef19,
+  useEffect as useEffect7,
+  useId as useId7,
   useMemo as useMemo3,
-  useRef as useRef8,
-  useState as useState7
+  useRef as useRef11,
+  useState as useState8
 } from "react";
 import { CheckIcon, ChevronDownIcon as ChevronDownIcon3, XIcon as XIcon3 } from "@bestow-ui/icons";
 
@@ -1315,9 +1541,9 @@ var empty = "c2pbq74";
 var toggle2 = "c2pbq71 c2pbq70";
 
 // src/components/Combobox/Combobox.tsx
-import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
-var defaultFilter = (option2, query) => option2.label.toLowerCase().includes(query.trim().toLowerCase());
-var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
+import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+var defaultFilter = (option3, query2) => option3.label.toLowerCase().includes(query2.trim().toLowerCase());
+var Combobox = /* @__PURE__ */ forwardRef19(function Combobox2(props, ref) {
   const {
     options,
     value: value3,
@@ -1345,24 +1571,24 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
   const emptyMessage = emptyMessageProp ?? m.noResults ?? "\uACB0\uACFC\uAC00 \uC5C6\uC5B4\uC694";
   const toggleLabel = toggleLabelProp ?? m.openList ?? "\uBAA9\uB85D \uC5F4\uAE30";
   const clearLabel = clearLabelProp ?? m.clearSelection ?? "\uC120\uD0DD \uC9C0\uC6B0\uAE30";
-  const generatedId = useId5();
+  const generatedId = useId7();
   const inputId = id ?? generatedId;
   const labelId = `${inputId}-label`;
   const listId = `${inputId}-listbox`;
   const helperId = helperText3 ? `${inputId}-helper` : void 0;
   const optionId = (index) => `${inputId}-option-${index}`;
   const portal2 = usePortalProps();
-  const inputRef = useRef8(null);
-  const anchorRef = useRef8(null);
+  const inputRef = useRef11(null);
+  const anchorRef = useRef11(null);
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = useState7(defaultValue);
+  const [innerValue, setInnerValue] = useState8(defaultValue);
   const selectedValue = isControlled ? value3 : innerValue;
   const selectedOption = options.find((o) => o.value === selectedValue);
-  const [open, setOpen] = useState7(false);
-  const [query, setQuery] = useState7(null);
-  const [activeIndex, setActiveIndex] = useState7(-1);
-  const filtered = useMemo3(() => query ? options.filter((o) => filter(o, query)) : options, [options, filter, query]);
-  const inputText = query ?? selectedOption?.label ?? "";
+  const [open, setOpen] = useState8(false);
+  const [query2, setQuery] = useState8(null);
+  const [activeIndex, setActiveIndex] = useState8(-1);
+  const filtered = useMemo3(() => query2 ? options.filter((o) => filter(o, query2)) : options, [options, filter, query2]);
+  const inputText = query2 ?? selectedOption?.label ?? "";
   const firstEnabled = (list7, from = 0, step2 = 1) => {
     for (let i = from; i >= 0 && i < list7.length; i += step2) if (!list7[i].disabled) return i;
     return -1;
@@ -1379,18 +1605,24 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
     setQuery(null);
     setActiveIndex(-1);
   };
+  useFormReset(inputRef, () => {
+    reset();
+    if (isControlled) return;
+    setInnerValue(defaultValue);
+    if (defaultValue !== selectedValue) onValueChange?.(defaultValue ?? "");
+  });
   const clearSelection = () => {
     if (!isControlled) setInnerValue(void 0);
     if (selectedValue) onValueChange?.("");
   };
   const close2 = () => {
-    if (query === "" && selectedValue) clearSelection();
+    if (query2 === "" && selectedValue) clearSelection();
     reset();
   };
-  const select2 = (option2) => {
-    if (option2.disabled) return;
-    if (!isControlled) setInnerValue(option2.value);
-    if (option2.value !== selectedValue) onValueChange?.(option2.value);
+  const select2 = (option3) => {
+    if (option3.disabled) return;
+    if (!isControlled) setInnerValue(option3.value);
+    if (option3.value !== selectedValue) onValueChange?.(option3.value);
     reset();
   };
   const move = (step2) => {
@@ -1406,6 +1638,7 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
     setActiveIndex(nextQuery ? firstEnabled(nextList) : -1);
   };
   const handleKeyDown = (event) => {
+    if (event.nativeEvent.isComposing || event.keyCode === 229) return;
     switch (event.key) {
       case "ArrowDown":
         event.preventDefault();
@@ -1420,8 +1653,8 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
       case "Enter":
         if (open) {
           event.preventDefault();
-          const option2 = filtered[activeIndex];
-          if (option2) select2(option2);
+          const option3 = filtered[activeIndex];
+          if (option3) select2(option3);
           else close2();
         }
         break;
@@ -1436,34 +1669,34 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
         break;
     }
   };
-  useEffect6(() => {
+  useEffect7(() => {
     if (!open || activeIndex < 0) return;
     document.getElementById(optionId(activeIndex))?.scrollIntoView?.({ block: "nearest" });
   }, [open, activeIndex]);
   const hasOptions = filtered.length > 0;
   const noResults = open && !disabled && !hasOptions;
-  const [announcedFor, setAnnouncedFor] = useState7(void 0);
-  useEffect6(() => {
+  const [announcedFor, setAnnouncedFor] = useState8(void 0);
+  useEffect7(() => {
     if (!noResults) return;
-    const timer2 = setTimeout(() => setAnnouncedFor(query), ANNOUNCE_DELAY);
+    const timer2 = setTimeout(() => setAnnouncedFor(query2), ANNOUNCE_DELAY);
     return () => clearTimeout(timer2);
-  }, [noResults, query]);
-  const announceNoResults = noResults && announcedFor === query;
-  return /* @__PURE__ */ jsxs17("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label6 && /* @__PURE__ */ jsxs17("label", { id: labelId, htmlFor: inputId, className: label, children: [
+  }, [noResults, query2]);
+  const announceNoResults = noResults && announcedFor === query2;
+  return /* @__PURE__ */ jsxs19("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs19("label", { id: labelId, htmlFor: inputId, className: label, children: [
       label6,
-      required && /* @__PURE__ */ jsx20("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx21("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs17(Popover.Root, { open: open && !disabled, onOpenChange: (next) => next ? openList() : close2(), children: [
-      /* @__PURE__ */ jsx20(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs17(
+    /* @__PURE__ */ jsxs19(Popover.Root, { open: open && !disabled, onOpenChange: (next) => next ? openList() : close2(), children: [
+      /* @__PURE__ */ jsx21(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs19(
         "div",
         {
           ref: anchorRef,
-          className: cx(root3({ size, fullWidth }), className),
+          className: cx(root({ size, fullWidth }), className),
           "data-invalid": error || void 0,
           "data-disabled": disabled || void 0,
           children: [
-            /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsx21(
               "input",
               {
                 ref: mergeRefs(ref, inputRef),
@@ -1490,7 +1723,7 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
                 className: input
               }
             ),
-            clearable && selectedOption && !disabled && /* @__PURE__ */ jsx20(
+            clearable && selectedOption && !disabled && /* @__PURE__ */ jsx21(
               "button",
               {
                 type: "button",
@@ -1503,10 +1736,10 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
                   reset();
                   inputRef.current?.focus();
                 },
-                children: /* @__PURE__ */ jsx20(XIcon3, { size: 16 })
+                children: /* @__PURE__ */ jsx21(XIcon3, { size: 16 })
               }
             ),
-            /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsx21(
               "button",
               {
                 type: "button",
@@ -1521,13 +1754,13 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
                   else openList(options);
                   inputRef.current?.focus();
                 },
-                children: /* @__PURE__ */ jsx20(ChevronDownIcon3, { size: 16 })
+                children: /* @__PURE__ */ jsx21(ChevronDownIcon3, { size: 16 })
               }
             )
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx20(Popover.Portal, { children: /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsx21(Popover.Portal, { children: /* @__PURE__ */ jsx21(
         Popover.Content,
         {
           role: "presentation",
@@ -1542,63 +1775,63 @@ var Combobox = /* @__PURE__ */ forwardRef18(function Combobox2(props, ref) {
           onInteractOutside: (event) => {
             if (anchorRef.current?.contains(event.target)) event.preventDefault();
           },
-          children: hasOptions ? /* @__PURE__ */ jsx20(
+          children: hasOptions ? /* @__PURE__ */ jsx21(
             "div",
             {
               id: listId,
               role: "listbox",
               "aria-labelledby": label6 ? labelId : void 0,
               "aria-label": label6 ? void 0 : ariaLabel,
-              children: filtered.map((option2, index) => {
-                const isSelected = option2.value === selectedValue;
+              children: filtered.map((option3, index) => {
+                const isSelected = option3.value === selectedValue;
                 return (
                   // aria-activedescendant 패턴: 포커스·키보드는 입력창이 맡고 항목은 포커스를 받지 않는다 (WAI-ARIA combobox)
                   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
-                  /* @__PURE__ */ jsxs17(
+                  /* @__PURE__ */ jsxs19(
                     "div",
                     {
                       id: optionId(index),
                       role: "option",
                       "aria-selected": isSelected,
-                      "aria-disabled": option2.disabled || void 0,
+                      "aria-disabled": option3.disabled || void 0,
                       "data-highlighted": index === activeIndex ? "" : void 0,
                       "data-state": isSelected ? "checked" : "unchecked",
-                      "data-disabled": option2.disabled ? "" : void 0,
+                      "data-disabled": option3.disabled ? "" : void 0,
                       className: item4,
                       onMouseDown: (event) => event.preventDefault(),
-                      onMouseMove: () => !option2.disabled && setActiveIndex(index),
-                      onClick: () => select2(option2),
+                      onMouseMove: () => !option3.disabled && setActiveIndex(index),
+                      onClick: () => select2(option3),
                       children: [
-                        option2.label,
-                        isSelected && /* @__PURE__ */ jsx20("span", { className: itemIndicator, "aria-hidden": true, children: /* @__PURE__ */ jsx20(CheckIcon, { size: 16 }) })
+                        option3.label,
+                        isSelected && /* @__PURE__ */ jsx21("span", { className: itemIndicator, "aria-hidden": true, children: /* @__PURE__ */ jsx21(CheckIcon, { size: 16 }) })
                       ]
                     },
-                    option2.value
+                    option3.value
                   )
                 );
               })
             }
           ) : (
             // 스크린리더 알림은 아래의 항상 있는 status 영역이 맡는다 (여기는 화면 표시만)
-            /* @__PURE__ */ jsx20("div", { className: empty, children: emptyMessage })
+            /* @__PURE__ */ jsx21("div", { className: empty, children: emptyMessage })
           )
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx20("span", { role: "status", className: visuallyHidden, children: announceNoResults ? emptyMessage : "" }),
-    name && /* @__PURE__ */ jsx20("input", { type: "hidden", name, value: selectedValue ?? "" }),
-    helperText3 && /* @__PURE__ */ jsx20("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+    /* @__PURE__ */ jsx21("span", { role: "status", className: visuallyHidden, children: announceNoResults ? emptyMessage : "" }),
+    name && /* @__PURE__ */ jsx21("input", { type: "hidden", name, value: selectedValue ?? "" }),
+    helperText3 && /* @__PURE__ */ jsx21("p", { id: helperId, className: helperText({ error }), children: helperText3 })
   ] });
 });
 
 // src/components/DatePicker/DatePicker.tsx
-import { forwardRef as forwardRef19, useEffect as useEffect7, useRef as useRef9, useState as useState8 } from "react";
+import { forwardRef as forwardRef20, useEffect as useEffect8, useRef as useRef12, useState as useState9 } from "react";
 import { CalendarIcon } from "@bestow-ui/icons";
 
 // src/components/Popover/Popover.tsx
 import * as RadixPopover from "@radix-ui/react-popover";
 import { XIcon as XIcon4 } from "@bestow-ui/icons";
-import { useId as useId6 } from "react";
+import { useId as useId8 } from "react";
 
 // src/components/Popover/Popover.css.ts
 var arrow = "_1j99p8x4";
@@ -1608,7 +1841,7 @@ var header4 = "_1j99p8x1";
 var title3 = "_1j99p8x2";
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function Popover2({
   content: content12,
   children,
@@ -1628,10 +1861,10 @@ function Popover2({
 }) {
   const portal2 = usePortalProps();
   const m = useMessages();
-  const titleId = useId6();
-  return /* @__PURE__ */ jsxs18(RadixPopover.Root, { open, defaultOpen, onOpenChange, modal, children: [
-    /* @__PURE__ */ jsx21(RadixPopover.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx21(RadixPopover.Portal, { children: /* @__PURE__ */ jsxs18(
+  const titleId = useId8();
+  return /* @__PURE__ */ jsxs20(RadixPopover.Root, { open, defaultOpen, onOpenChange, modal, children: [
+    /* @__PURE__ */ jsx22(RadixPopover.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx22(RadixPopover.Portal, { children: /* @__PURE__ */ jsxs20(
       RadixPopover.Content,
       {
         side,
@@ -1644,12 +1877,12 @@ function Popover2({
         className: cx(portal2.className, content7, className),
         style: { ...portal2.style, ...style },
         children: [
-          (title6 || showClose) && /* @__PURE__ */ jsxs18("div", { className: header4, children: [
-            title6 && /* @__PURE__ */ jsx21("h2", { id: titleId, className: title3, children: title6 }),
-            showClose && /* @__PURE__ */ jsx21(RadixPopover.Close, { className: closeButton3, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ jsx21(XIcon4, { size: 16 }) })
+          (title6 || showClose) && /* @__PURE__ */ jsxs20("div", { className: header4, children: [
+            title6 && /* @__PURE__ */ jsx22("h2", { id: titleId, className: title3, children: title6 }),
+            showClose && /* @__PURE__ */ jsx22(RadixPopover.Close, { className: closeButton3, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ jsx22(XIcon4, { size: 16 }) })
           ] }),
           content12,
-          showArrow && /* @__PURE__ */ jsx21(RadixPopover.Arrow, { className: arrow, width: 12, height: 6 })
+          showArrow && /* @__PURE__ */ jsx22(RadixPopover.Arrow, { className: arrow, width: 12, height: 6 })
         ]
       }
     ) })
@@ -1658,11 +1891,11 @@ function Popover2({
 var PopoverClose = RadixPopover.Close;
 
 // src/components/DatePicker/DatePicker.tsx
-import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 var sanitize2 = (input6) => input6.replace(/\D/g, "").slice(0, 8);
 var format = (digits) => digits.length <= 4 ? digits : digits.length <= 6 ? `${digits.slice(0, 4)}-${digits.slice(4)}` : `${digits.slice(0, 4)}-${digits.slice(4, 6)}-${digits.slice(6)}`;
 var isDigit3 = (char) => /\d/.test(char);
-var DatePicker = /* @__PURE__ */ forwardRef19(
+var DatePicker = /* @__PURE__ */ forwardRef20(
   function DatePicker2(props, ref) {
     const {
       value: value3,
@@ -1688,17 +1921,17 @@ var DatePicker = /* @__PURE__ */ forwardRef19(
       id,
       className
     } = props;
-    const inputRef = useRef9(null);
+    const inputRef = useRef12(null);
     const m = useMessages();
     const label6 = labelProp ?? m.date ?? "\uB0A0\uC9DC";
     const calendarLabel = calendarLabelProp ?? m.openCalendar ?? "\uB2EC\uB825 \uC5F4\uAE30";
     const invalidText = invalidTextProp ?? m.dateInvalid ?? "\uC62C\uBC14\uB978 \uB0A0\uC9DC\uAC00 \uC544\uB2C8\uC5D0\uC694.";
     const unavailableText = unavailableTextProp ?? m.dateUnavailable ?? "\uACE0\uB97C \uC218 \uC5C6\uB294 \uB0A0\uC9DC\uC608\uC694.";
     const incompleteText = incompleteTextProp ?? m.dateIncomplete ?? "\uB0A0\uC9DC\uB97C YYYY-MM-DD \uD615\uC2DD\uC73C\uB85C \uC785\uB825\uD574 \uC8FC\uC138\uC694.";
-    const [open, setOpen] = useState8(false);
-    const [touched, setTouched] = useState8(false);
+    const [open, setOpen] = useState9(false);
+    const [touched, setTouched] = useState9(false);
     const isControlled = "value" in props;
-    const lastEmitted = useRef9(isControlled ? value3 ?? "" : defaultValue ?? "");
+    const lastEmitted = useRef12(isControlled ? value3 ?? "" : defaultValue ?? "");
     const minDate = parseISODate(min);
     const maxDate = parseISODate(max);
     const toIso = (digits) => digits.length === 8 ? `${digits.slice(0, 4)}-${digits.slice(4, 6)}-${digits.slice(6)}` : "";
@@ -1719,11 +1952,12 @@ var DatePicker = /* @__PURE__ */ forwardRef19(
       sanitize: sanitize2,
       format,
       isMeaningful: isDigit3,
-      inputRef
+      inputRef,
+      manualReset: true
     });
     const textIso = toIso(field4.raw);
     const { setRaw } = field4;
-    useEffect7(() => {
+    useEffect8(() => {
       if (!isControlled) return;
       const next = value3 ?? "";
       lastEmitted.current = next;
@@ -1733,14 +1967,20 @@ var DatePicker = /* @__PURE__ */ forwardRef19(
       if (next === "" && !textIsValid) return;
       setRaw(next.replace(/\D/g, ""));
     }, [value3]);
+    useFormReset(inputRef, () => {
+      setTouched(false);
+      const next = (isControlled ? value3 : defaultValue) ?? "";
+      setRaw(next.replace(/\D/g, ""));
+      if (!isControlled) emit(next);
+    });
     const date = parseISODate(textIso);
     const complete = field4.raw.length === 8;
     const autoError = complete ? !date ? invalidText : isUnavailable(date) ? unavailableText : null : touched && field4.raw.length > 0 ? incompleteText : null;
     const showAuto = autoError !== null && error === void 0;
     const announcement = useDelayedAnnouncement(showAuto && complete ? autoError ?? "" : "");
     const selectedIso = date && !isUnavailable(date) ? textIso : "";
-    return /* @__PURE__ */ jsxs19(Fragment5, { children: [
-      /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsxs21(Fragment7, { children: [
+      /* @__PURE__ */ jsx23(
         TextField,
         {
           ref: mergeRefs(ref, inputRef),
@@ -1759,7 +1999,7 @@ var DatePicker = /* @__PURE__ */ forwardRef19(
           disabled,
           fullWidth,
           rootClassName: className,
-          endAdornment: /* @__PURE__ */ jsx22(
+          endAdornment: /* @__PURE__ */ jsx23(
             Popover2,
             {
               open,
@@ -1768,7 +2008,7 @@ var DatePicker = /* @__PURE__ */ forwardRef19(
               align: "end",
               "aria-label": m.calendar ?? "\uB2EC\uB825",
               onOpenAutoFocus: (event) => event.preventDefault(),
-              content: /* @__PURE__ */ jsx22(
+              content: /* @__PURE__ */ jsx23(
                 Calendar,
                 {
                   value: selectedIso,
@@ -1785,19 +2025,19 @@ var DatePicker = /* @__PURE__ */ forwardRef19(
                   initialFocus: true
                 }
               ),
-              children: /* @__PURE__ */ jsx22(IconButton, { "aria-label": calendarLabel, size: "sm", disabled, children: /* @__PURE__ */ jsx22(CalendarIcon, {}) })
+              children: /* @__PURE__ */ jsx23(IconButton, { "aria-label": calendarLabel, size: "sm", disabled, children: /* @__PURE__ */ jsx23(CalendarIcon, {}) })
             }
           )
         }
       ),
-      /* @__PURE__ */ jsx22("span", { role: "status", className: visuallyHidden, children: announcement }),
-      name && /* @__PURE__ */ jsx22("input", { type: "hidden", name, value: selectedIso })
+      /* @__PURE__ */ jsx23("span", { role: "status", className: visuallyHidden, children: announcement }),
+      name && /* @__PURE__ */ jsx23("input", { type: "hidden", name, value: selectedIso })
     ] });
   }
 );
 
 // src/components/DateRangePicker/DateRangePicker.tsx
-import { forwardRef as forwardRef20, useId as useId7, useState as useState9 } from "react";
+import { forwardRef as forwardRef21, useId as useId9, useRef as useRef13, useState as useState10 } from "react";
 
 // src/components/DateRangePicker/DateRangePicker.css.ts
 var field2 = "_17277dh3";
@@ -1808,8 +2048,8 @@ var presets = "_17277dh5";
 var separator2 = "_17277dh4";
 
 // src/components/DateRangePicker/DateRangePicker.tsx
-import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
-var DateRangePicker = /* @__PURE__ */ forwardRef20(
+import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+var DateRangePicker = /* @__PURE__ */ forwardRef21(
   function DateRangePicker2(props, ref) {
     const {
       value: value3,
@@ -1834,37 +2074,41 @@ var DateRangePicker = /* @__PURE__ */ forwardRef20(
       className
     } = props;
     const m = useMessages();
-    const generatedId = useId7();
+    const generatedId = useId9();
     const baseId = id ?? generatedId;
     const helperId = helperText3 ? `${baseId}-helper` : void 0;
     const isClient = useIsClient();
     const isControlled = "value" in props;
-    const [inner, setInner] = useState9(defaultValue ?? { start: "", end: "" });
+    const [inner, setInner] = useState10(defaultValue ?? { start: "", end: "" });
     const range3 = isControlled ? value3 ?? { start: "", end: "" } : inner;
     const update = (next) => {
       if (next.start === range3.start && next.end === range3.end) return;
       if (!isControlled) setInner(next);
       onValueChange?.(next);
     };
+    const rootRef = useRef13(null);
+    useFormReset(rootRef, () => {
+      if (!isControlled) update(defaultValue ?? { start: "", end: "" });
+    });
     const todayIso = () => today ?? toISODate(/* @__PURE__ */ new Date());
     const startLabel = startLabelProp ?? m.dateRangeStart ?? "\uC2DC\uC791\uC77C";
     const endLabel = endLabelProp ?? m.dateRangeEnd ?? "\uC885\uB8CC\uC77C";
     const common = { isDateDisabled, isHoliday, today, disabled, required, fullWidth: true };
-    return /* @__PURE__ */ jsxs20(
+    return /* @__PURE__ */ jsxs22(
       "fieldset",
       {
-        ref,
+        ref: mergeRefs(ref, rootRef),
         id,
         className: cx(fieldset3, className),
         "aria-describedby": helperId,
         "data-invalid": error || void 0,
         children: [
-          label6 && /* @__PURE__ */ jsxs20("legend", { className: legend3, children: [
+          label6 && /* @__PURE__ */ jsxs22("legend", { className: legend3, children: [
             label6,
-            required && /* @__PURE__ */ jsx23("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+            required && /* @__PURE__ */ jsx24("span", { className: requiredMark, "aria-hidden": true, children: "*" })
           ] }),
-          /* @__PURE__ */ jsxs20("div", { className: fields, children: [
-            /* @__PURE__ */ jsx23("div", { className: field2, children: /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsxs22("div", { className: fields, children: [
+            /* @__PURE__ */ jsx24("div", { className: field2, children: /* @__PURE__ */ jsx24(
               DatePicker,
               {
                 ...common,
@@ -1878,8 +2122,8 @@ var DateRangePicker = /* @__PURE__ */ forwardRef20(
                 error: error || void 0
               }
             ) }),
-            /* @__PURE__ */ jsx23("span", { className: separator2, "aria-hidden": true, children: "~" }),
-            /* @__PURE__ */ jsx23("div", { className: field2, children: /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx24("span", { className: separator2, "aria-hidden": true, children: "~" }),
+            /* @__PURE__ */ jsx24("div", { className: field2, children: /* @__PURE__ */ jsx24(
               DatePicker,
               {
                 ...common,
@@ -1894,10 +2138,10 @@ var DateRangePicker = /* @__PURE__ */ forwardRef20(
               }
             ) })
           ] }),
-          presets2 && presets2.length > 0 && /* @__PURE__ */ jsx23("div", { role: "group", "aria-label": m.dateRangePresets ?? "\uBE60\uB978 \uC120\uD0DD", className: presets, children: presets2.map((preset) => {
+          presets2 && presets2.length > 0 && /* @__PURE__ */ jsx24("div", { role: "group", "aria-label": m.dateRangePresets ?? "\uBE60\uB978 \uC120\uD0DD", className: presets, children: presets2.map((preset) => {
             const target = isClient ? presetRange(preset, todayIso()) : null;
             const pressed = !!target && target.start === range3.start && target.end === range3.end;
-            return /* @__PURE__ */ jsx23(
+            return /* @__PURE__ */ jsx24(
               Button,
               {
                 type: "button",
@@ -1912,7 +2156,7 @@ var DateRangePicker = /* @__PURE__ */ forwardRef20(
               preset.label
             );
           }) }),
-          helperText3 && /* @__PURE__ */ jsx23("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+          helperText3 && /* @__PURE__ */ jsx24("p", { id: helperId, className: helperText({ error }), children: helperText3 })
         ]
       }
     );
@@ -1928,7 +2172,7 @@ import { createRuntimeFn as _7a46810 } from "@vanilla-extract/recipes/createRunt
 var body2 = "nmobyvy";
 var closeButton4 = "nmobyvx";
 var content8 = /* @__PURE__ */ _7a46810({ defaultClassName: "nmobyv9", variantClassNames: { side: { right: "nmobyva", left: "nmobyvb", top: "nmobyvc", bottom: "nmobyvd" }, size: { sm: "nmobyve", md: "nmobyvf", lg: "nmobyvg" } }, defaultVariants: { side: "right", size: "md" }, compoundVariants: [[{ side: "right", size: "sm" }, "nmobyvh"], [{ side: "right", size: "md" }, "nmobyvi"], [{ side: "right", size: "lg" }, "nmobyvj"], [{ side: "left", size: "sm" }, "nmobyvk"], [{ side: "left", size: "md" }, "nmobyvl"], [{ side: "left", size: "lg" }, "nmobyvm"], [{ side: "top", size: "sm" }, "nmobyvn"], [{ side: "top", size: "md" }, "nmobyvo"], [{ side: "top", size: "lg" }, "nmobyvp"], [{ side: "bottom", size: "sm" }, "nmobyvq"], [{ side: "bottom", size: "md" }, "nmobyvr"], [{ side: "bottom", size: "lg" }, "nmobyvs"]] });
-var description3 = "nmobyvw";
+var description4 = "nmobyvw";
 var footer2 = "nmobyvz";
 var header5 = "nmobyvt";
 var headings2 = "nmobyvu";
@@ -1936,14 +2180,14 @@ var overlay2 = "nmobyv0";
 var title4 = "nmobyvv";
 
 // src/components/Drawer/Drawer.tsx
-import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
 function Drawer({
   open,
   defaultOpen,
   onOpenChange,
   trigger: trigger4,
   title: title6,
-  description: description7,
+  description: description8,
   children,
   footer: footer5,
   side,
@@ -1955,11 +2199,11 @@ function Drawer({
   const portal2 = usePortalProps();
   const m = useMessages();
   const focus = useReturnFocus(Boolean(trigger4));
-  return /* @__PURE__ */ jsxs21(Dialog2.Root, { open, defaultOpen, onOpenChange, children: [
-    trigger4 && /* @__PURE__ */ jsx24(Dialog2.Trigger, { asChild: true, children: trigger4 }),
-    /* @__PURE__ */ jsxs21(Dialog2.Portal, { children: [
-      /* @__PURE__ */ jsx24(Dialog2.Overlay, { className: cx(portal2.className, overlay2), style: portal2.style }),
-      /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs23(Dialog2.Root, { open, defaultOpen, onOpenChange, children: [
+    trigger4 && /* @__PURE__ */ jsx25(Dialog2.Trigger, { asChild: true, children: trigger4 }),
+    /* @__PURE__ */ jsxs23(Dialog2.Portal, { children: [
+      /* @__PURE__ */ jsx25(Dialog2.Overlay, { className: cx(portal2.className, overlay2), style: portal2.style }),
+      /* @__PURE__ */ jsxs23(
         Dialog2.Content,
         {
           className: cx(portal2.className, content8({ side, size }), className),
@@ -1968,17 +2212,17 @@ function Drawer({
           onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
           onOpenAutoFocus: focus.onOpenAutoFocus,
           onCloseAutoFocus: focus.onCloseAutoFocus,
-          ...description7 ? {} : { "aria-describedby": void 0 },
+          ...description8 ? {} : { "aria-describedby": void 0 },
           children: [
-            /* @__PURE__ */ jsxs21("div", { className: header5, children: [
-              /* @__PURE__ */ jsxs21("div", { className: headings2, children: [
-                /* @__PURE__ */ jsx24(Dialog2.Title, { className: title4, children: title6 }),
-                description7 && /* @__PURE__ */ jsx24(Dialog2.Description, { className: description3, children: description7 })
+            /* @__PURE__ */ jsxs23("div", { className: header5, children: [
+              /* @__PURE__ */ jsxs23("div", { className: headings2, children: [
+                /* @__PURE__ */ jsx25(Dialog2.Title, { className: title4, children: title6 }),
+                description8 && /* @__PURE__ */ jsx25(Dialog2.Description, { className: description4, children: description8 })
               ] }),
-              !hideCloseButton && /* @__PURE__ */ jsx24(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx24(IconButton, { "aria-label": m.close ?? "\uB2EB\uAE30", size: "sm", className: closeButton4, children: /* @__PURE__ */ jsx24(XIcon5, {}) }) })
+              !hideCloseButton && /* @__PURE__ */ jsx25(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx25(IconButton, { "aria-label": m.close ?? "\uB2EB\uAE30", size: "sm", className: closeButton4, children: /* @__PURE__ */ jsx25(XIcon5, {}) }) })
             ] }),
-            children && /* @__PURE__ */ jsx24("div", { className: body2, children }),
-            footer5 && /* @__PURE__ */ jsx24("div", { className: footer2, children: footer5 })
+            children && /* @__PURE__ */ jsx25("div", { className: body2, children }),
+            footer5 && /* @__PURE__ */ jsx25("div", { className: footer2, children: footer5 })
           ]
         }
       )
@@ -1988,7 +2232,7 @@ function Drawer({
 var DrawerClose = Dialog2.Close;
 
 // src/components/ErrorSummary/ErrorSummary.tsx
-import { forwardRef as forwardRef21, useEffect as useEffect8, useId as useId8, useRef as useRef10 } from "react";
+import { forwardRef as forwardRef22, useEffect as useEffect9, useId as useId10, useRef as useRef14 } from "react";
 
 // src/components/ErrorSummary/ErrorSummary.css.ts
 var link3 = "_1cdophv2";
@@ -1996,17 +2240,17 @@ var list3 = "_1cdophv1";
 var root7 = "_1cdophv0";
 
 // src/components/ErrorSummary/ErrorSummary.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
-var ErrorSummary = /* @__PURE__ */ forwardRef21(function ErrorSummary2({ errors: errors2, title: title6, focusKey, className, ...rest }, ref) {
+import { jsx as jsx26 } from "react/jsx-runtime";
+var ErrorSummary = /* @__PURE__ */ forwardRef22(function ErrorSummary2({ errors: errors2, title: title6, focusKey, className, ...rest }, ref) {
   const m = useMessages();
-  const titleId = useId8();
-  const rootRef = useRef10(null);
+  const titleId = useId10();
+  const rootRef = useRef14(null);
   const hasErrors = errors2.length > 0;
-  useEffect8(() => {
+  useEffect9(() => {
     if (hasErrors) rootRef.current?.focus();
   }, [focusKey, hasErrors]);
   if (!hasErrors) return null;
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       ref: mergeRefs(ref, rootRef),
@@ -2014,12 +2258,12 @@ var ErrorSummary = /* @__PURE__ */ forwardRef21(function ErrorSummary2({ errors:
       "aria-labelledby": titleId,
       className: cx(root7, className),
       ...rest,
-      children: /* @__PURE__ */ jsx25(
+      children: /* @__PURE__ */ jsx26(
         Alert,
         {
           color: "danger",
-          title: /* @__PURE__ */ jsx25("span", { id: titleId, children: title6 ?? m.errorSummaryTitle?.(errors2.length) ?? `\uC785\uB825\uD55C \uB0B4\uC6A9\uC5D0 \uACE0\uCE60 \uACF3\uC774 ${errors2.length}\uAC1C \uC788\uC5B4\uC694` }),
-          children: /* @__PURE__ */ jsx25("ul", { className: list3, children: errors2.map((error) => /* @__PURE__ */ jsx25("li", { children: /* @__PURE__ */ jsx25(
+          title: /* @__PURE__ */ jsx26("span", { id: titleId, children: title6 ?? m.errorSummaryTitle?.(errors2.length) ?? `\uC785\uB825\uD55C \uB0B4\uC6A9\uC5D0 \uACE0\uCE60 \uACF3\uC774 ${errors2.length}\uAC1C \uC788\uC5B4\uC694` }),
+          children: /* @__PURE__ */ jsx26("ul", { className: list3, children: errors2.map((error) => /* @__PURE__ */ jsx26("li", { children: /* @__PURE__ */ jsx26(
             "a",
             {
               href: `#${error.id}`,
@@ -2037,9 +2281,20 @@ var ErrorSummary = /* @__PURE__ */ forwardRef21(function ErrorSummary2({ errors:
 });
 
 // src/components/FileUpload/FileUpload.tsx
-import { forwardRef as forwardRef22, useEffect as useEffect9, useId as useId9, useRef as useRef11, useState as useState10 } from "react";
+import { forwardRef as forwardRef23, useEffect as useEffect10, useId as useId11, useRef as useRef15, useState as useState11 } from "react";
 import { FileIcon, UploadIcon, XIcon as XIcon6 } from "@bestow-ui/icons";
 
+// src/utils/useFieldsetDisabled.ts
+import { useSyncExternalStore as useSyncExternalStore3 } from "react";
+var noSubscribe = () => () => void 0;
+function useFieldsetDisabled(ref) {
+  return useSyncExternalStore3(
+    noSubscribe,
+    () => !!ref.current?.matches("fieldset:disabled *"),
+    () => false
+  );
+}
+
 // src/components/FileUpload/FileUpload.css.ts
 var dropHint = "r2jefr3";
 var dropIcon = "r2jefr2";
@@ -2053,7 +2308,7 @@ var list4 = "r2jefr4";
 var root8 = "r2jefr0";
 
 // src/components/FileUpload/FileUpload.tsx
-import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
 var REMOVED_ANNOUNCE_DELAY = 500;
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
@@ -2070,7 +2325,7 @@ function matchesAccept(file, accept) {
 }
 var NO_FILES = [];
 var sameFile = (a, b) => a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
-var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
+var FileUpload = /* @__PURE__ */ forwardRef23(function FileUpload2(props, ref) {
   const {
     value: value3,
     defaultValue,
@@ -2084,29 +2339,32 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
     helperText: helperText3,
     error,
     required,
-    disabled,
+    disabled: disabledProp,
     name,
     id,
     className
   } = props;
   const m = useMessages();
+  const rootRef = useRef15(null);
+  const fieldsetDisabled = useFieldsetDisabled(rootRef);
+  const disabled = disabledProp || fieldsetDisabled;
   const isControlled = "value" in props;
-  const [innerFiles, setInnerFiles] = useState10(defaultValue ?? []);
+  const [innerFiles, setInnerFiles] = useState11(defaultValue ?? []);
   const files = isControlled ? value3 ?? NO_FILES : innerFiles;
-  const [rejections, setRejections] = useState10([]);
-  const [announcement, setAnnouncement] = useState10("");
-  const [dragging, setDragging] = useState10(false);
-  const generatedId = useId9();
+  const [rejections, setRejections] = useState11([]);
+  const [announcement, setAnnouncement] = useState11("");
+  const [dragging, setDragging] = useState11(false);
+  const generatedId = useId11();
   const baseId = id ?? generatedId;
   const labelId = label6 ? `${baseId}-label` : void 0;
   const helperId = helperText3 ? `${baseId}-helper` : void 0;
   const errorsId = rejections.length > 0 ? `${baseId}-errors` : void 0;
-  const inputRef = useRef11(null);
-  const selectButtonRef = useRef11(null);
-  const removeButtonRefs = useRef11([]);
-  const focusAfterRemove = useRef11(null);
-  const announceTimer = useRef11(void 0);
-  useEffect9(() => () => clearTimeout(announceTimer.current), []);
+  const inputRef = useRef15(null);
+  const selectButtonRef = useRef15(null);
+  const removeButtonRefs = useRef15([]);
+  const focusAfterRemove = useRef15(null);
+  const announceTimer = useRef15(void 0);
+  useEffect10(() => () => clearTimeout(announceTimer.current), []);
   const selectLabel = m.fileSelect ?? "\uD30C\uC77C \uC120\uD0DD";
   const reasonText = (rejection) => {
     const fileName2 = rejection.file.name;
@@ -2154,13 +2412,13 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
     setRejections([]);
     commit(next, m.fileRemoved?.(removed.name) ?? `${removed.name} \uC0AD\uC81C\uB428`, REMOVED_ANNOUNCE_DELAY);
   };
-  useEffect9(() => {
+  useEffect10(() => {
     if (focusAfterRemove.current === null) return;
     const target = focusAfterRemove.current;
     focusAfterRemove.current = null;
     (target >= 0 ? removeButtonRefs.current[target] : selectButtonRef.current)?.focus();
   }, [files]);
-  useEffect9(() => {
+  useEffect10(() => {
     const input6 = inputRef.current;
     if (!name || !input6 || typeof DataTransfer === "undefined") return;
     try {
@@ -2170,17 +2428,25 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
     } catch {
     }
   }, [files, name]);
+  useFormReset(rootRef, () => {
+    setRejections([]);
+    announce("");
+    if (isControlled) return;
+    const next = defaultValue ?? [];
+    setInnerFiles(next);
+    if (next.length !== files.length) onValueChange?.(next);
+  });
   const onDrag = (event, over) => {
     if (disabled) return;
     event.preventDefault();
     setDragging(over);
   };
-  return /* @__PURE__ */ jsxs22("div", { ref, className: cx(field, root8, className), children: [
-    label6 && /* @__PURE__ */ jsxs22("span", { id: labelId, className: label, children: [
+  return /* @__PURE__ */ jsxs24("div", { ref: mergeRefs(ref, rootRef), className: cx(field, root8, className), children: [
+    label6 && /* @__PURE__ */ jsxs24("span", { id: labelId, className: label, children: [
       label6,
-      required && /* @__PURE__ */ jsx26("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx27("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs22(
+    /* @__PURE__ */ jsxs24(
       "div",
       {
         role: "group",
@@ -2200,8 +2466,8 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
           if (!disabled) addFiles(Array.from(event.dataTransfer.files));
         },
         children: [
-          /* @__PURE__ */ jsx26("span", { className: dropIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx26(UploadIcon, { size: 24 }) }),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27("span", { className: dropIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx27(UploadIcon, { size: 24 }) }),
+          /* @__PURE__ */ jsx27(
             Button,
             {
               ref: selectButtonRef,
@@ -2214,8 +2480,8 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
               children: selectLabel
             }
           ),
-          /* @__PURE__ */ jsx26("span", { className: dropHint, children: m.fileDropHint ?? "\uB610\uB294 \uC5EC\uAE30\uB85C \uB04C\uC5B4\uB2E4 \uB193\uC73C\uC138\uC694" }),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27("span", { className: dropHint, children: m.fileDropHint ?? "\uB610\uB294 \uC5EC\uAE30\uB85C \uB04C\uC5B4\uB2E4 \uB193\uC73C\uC138\uC694" }),
+          /* @__PURE__ */ jsx27(
             "input",
             {
               ref: inputRef,
@@ -2238,11 +2504,11 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
         ]
       }
     ),
-    files.length > 0 && /* @__PURE__ */ jsx26("ul", { "aria-label": m.fileList ?? "\uC120\uD0DD\uD55C \uD30C\uC77C", className: list4, children: files.map((file, index) => /* @__PURE__ */ jsxs22("li", { className: item5, children: [
-      /* @__PURE__ */ jsx26("span", { className: fileIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx26(FileIcon, { size: 16 }) }),
-      /* @__PURE__ */ jsx26("span", { className: fileName, children: file.name }),
-      /* @__PURE__ */ jsx26("span", { id: `${baseId}-size-${index}`, className: fileSize, children: formatSize(file.size) }),
-      /* @__PURE__ */ jsx26(
+    files.length > 0 && /* @__PURE__ */ jsx27("ul", { "aria-label": m.fileList ?? "\uC120\uD0DD\uD55C \uD30C\uC77C", className: list4, children: files.map((file, index) => /* @__PURE__ */ jsxs24("li", { className: item5, children: [
+      /* @__PURE__ */ jsx27("span", { className: fileIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx27(FileIcon, { size: 16 }) }),
+      /* @__PURE__ */ jsx27("span", { className: fileName, children: file.name }),
+      /* @__PURE__ */ jsx27("span", { id: `${baseId}-size-${index}`, className: fileSize, children: formatSize(file.size) }),
+      /* @__PURE__ */ jsx27(
         IconButton,
         {
           ref: (node) => {
@@ -2253,20 +2519,20 @@ var FileUpload = /* @__PURE__ */ forwardRef22(function FileUpload2(props, ref) {
           "aria-describedby": `${baseId}-size-${index}`,
           disabled,
           onClick: () => removeAt(index),
-          children: /* @__PURE__ */ jsx26(XIcon6, {})
+          children: /* @__PURE__ */ jsx27(XIcon6, {})
         }
       )
     ] }, `${file.name}-${file.size}-${file.lastModified}`)) }),
-    rejections.length > 0 && /* @__PURE__ */ jsx26("ul", { id: errorsId, className: errors, children: [...new Set(rejections.map(reasonText))].map((text3) => /* @__PURE__ */ jsx26("li", { children: text3 }, text3)) }),
-    helperText3 && /* @__PURE__ */ jsx26("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
-    /* @__PURE__ */ jsx26("div", { role: "status", className: visuallyHidden, children: announcement })
+    rejections.length > 0 && /* @__PURE__ */ jsx27("ul", { id: errorsId, className: errors, children: [...new Set(rejections.map(reasonText))].map((text3) => /* @__PURE__ */ jsx27("li", { children: text3 }, text3)) }),
+    helperText3 && /* @__PURE__ */ jsx27("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
+    /* @__PURE__ */ jsx27("div", { role: "status", className: visuallyHidden, children: announcement })
   ] });
 });
 
 // src/components/DropdownMenu/DropdownMenu.tsx
 import * as RadixMenu from "@radix-ui/react-dropdown-menu";
 import { CheckIcon as CheckIcon2, ChevronRightIcon as ChevronRightIcon3, MinusIcon } from "@bestow-ui/icons";
-import { forwardRef as forwardRef23 } from "react";
+import { forwardRef as forwardRef24 } from "react";
 
 // src/components/DropdownMenu/DropdownMenu.css.ts
 var content9 = "_1d7ahux0";
@@ -2283,14 +2549,14 @@ var subChevron = "_1d7ahuxb";
 var subTrigger = "_1d7ahuxa";
 
 // src/components/DropdownMenu/DropdownMenu.tsx
-import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 var DropdownMenu = RadixMenu.Root;
 var DropdownMenuTrigger = RadixMenu.Trigger;
 var DropdownMenuGroup = RadixMenu.Group;
-var DropdownMenuContent = /* @__PURE__ */ forwardRef23(
+var DropdownMenuContent = /* @__PURE__ */ forwardRef24(
   function DropdownMenuContent2({ className, style, side = "bottom", align = "start", sideOffset = 4, collisionPadding = 8, ...rest }, ref) {
     const portal2 = usePortalProps();
-    return /* @__PURE__ */ jsx27(RadixMenu.Portal, { children: /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx28(RadixMenu.Portal, { children: /* @__PURE__ */ jsx28(
       RadixMenu.Content,
       {
         ref,
@@ -2305,56 +2571,56 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef23(
     ) });
   }
 );
-var DropdownMenuItem = /* @__PURE__ */ forwardRef23(
+var DropdownMenuItem = /* @__PURE__ */ forwardRef24(
   function DropdownMenuItem2({ icon: icon7, shortcut: shortcut2, color = "neutral", className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxs23(RadixMenu.Item, { ref, className: cx(item6, color === "danger" && danger, className), ...rest, children: [
-      icon7 && /* @__PURE__ */ jsx27("span", { className: icon4, "aria-hidden": true, children: icon7 }),
+    return /* @__PURE__ */ jsxs25(RadixMenu.Item, { ref, className: cx(item6, color === "danger" && danger, className), ...rest, children: [
+      icon7 && /* @__PURE__ */ jsx28("span", { className: icon4, "aria-hidden": true, children: icon7 }),
       children,
-      shortcut2 && /* @__PURE__ */ jsx27("span", { className: shortcut, "aria-hidden": true, children: shortcut2 })
+      shortcut2 && /* @__PURE__ */ jsx28("span", { className: shortcut, "aria-hidden": true, children: shortcut2 })
     ] });
   }
 );
-var DropdownMenuLabel = /* @__PURE__ */ forwardRef23(
+var DropdownMenuLabel = /* @__PURE__ */ forwardRef24(
   function DropdownMenuLabel2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx27(RadixMenu.Label, { ref, className: cx(label2, className), ...rest });
+    return /* @__PURE__ */ jsx28(RadixMenu.Label, { ref, className: cx(label2, className), ...rest });
   }
 );
-var DropdownMenuSeparator = /* @__PURE__ */ forwardRef23(
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef24(
   function DropdownMenuSeparator2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx27(RadixMenu.Separator, { ref, className: cx(separator3, className), ...rest });
+    return /* @__PURE__ */ jsx28(RadixMenu.Separator, { ref, className: cx(separator3, className), ...rest });
   }
 );
-var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef23(
+var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef24(
   function DropdownMenuCheckboxItem2({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxs23(RadixMenu.CheckboxItem, { ref, className: cx(item6, className), ...rest, children: [
-      /* @__PURE__ */ jsx27("span", { className: indicator, "aria-hidden": true, children: /* @__PURE__ */ jsx27(RadixMenu.ItemIndicator, { className: indicatorInner, children: rest.checked === "indeterminate" ? /* @__PURE__ */ jsx27(MinusIcon, { size: 16 }) : /* @__PURE__ */ jsx27(CheckIcon2, { size: 16 }) }) }),
+    return /* @__PURE__ */ jsxs25(RadixMenu.CheckboxItem, { ref, className: cx(item6, className), ...rest, children: [
+      /* @__PURE__ */ jsx28("span", { className: indicator, "aria-hidden": true, children: /* @__PURE__ */ jsx28(RadixMenu.ItemIndicator, { className: indicatorInner, children: rest.checked === "indeterminate" ? /* @__PURE__ */ jsx28(MinusIcon, { size: 16 }) : /* @__PURE__ */ jsx28(CheckIcon2, { size: 16 }) }) }),
       children
     ] });
   }
 );
 var DropdownMenuRadioGroup = RadixMenu.RadioGroup;
-var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef23(
+var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef24(
   function DropdownMenuRadioItem2({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxs23(RadixMenu.RadioItem, { ref, className: cx(item6, className), ...rest, children: [
-      /* @__PURE__ */ jsx27("span", { className: indicator, "aria-hidden": true, children: /* @__PURE__ */ jsx27(RadixMenu.ItemIndicator, { className: indicatorInner, children: /* @__PURE__ */ jsx27("span", { className: radioDot }) }) }),
+    return /* @__PURE__ */ jsxs25(RadixMenu.RadioItem, { ref, className: cx(item6, className), ...rest, children: [
+      /* @__PURE__ */ jsx28("span", { className: indicator, "aria-hidden": true, children: /* @__PURE__ */ jsx28(RadixMenu.ItemIndicator, { className: indicatorInner, children: /* @__PURE__ */ jsx28("span", { className: radioDot }) }) }),
       children
     ] });
   }
 );
 var DropdownMenuSub = RadixMenu.Sub;
-var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef23(
+var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef24(
   function DropdownMenuSubTrigger2({ icon: icon7, className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxs23(RadixMenu.SubTrigger, { ref, className: cx(item6, subTrigger, className), ...rest, children: [
-      icon7 && /* @__PURE__ */ jsx27("span", { className: icon4, "aria-hidden": true, children: icon7 }),
+    return /* @__PURE__ */ jsxs25(RadixMenu.SubTrigger, { ref, className: cx(item6, subTrigger, className), ...rest, children: [
+      icon7 && /* @__PURE__ */ jsx28("span", { className: icon4, "aria-hidden": true, children: icon7 }),
       children,
-      /* @__PURE__ */ jsx27("span", { className: subChevron, "aria-hidden": true, children: /* @__PURE__ */ jsx27(ChevronRightIcon3, { size: 16 }) })
+      /* @__PURE__ */ jsx28("span", { className: subChevron, "aria-hidden": true, children: /* @__PURE__ */ jsx28(ChevronRightIcon3, { size: 16 }) })
     ] });
   }
 );
-var DropdownMenuSubContent = /* @__PURE__ */ forwardRef23(
+var DropdownMenuSubContent = /* @__PURE__ */ forwardRef24(
   function DropdownMenuSubContent2({ className, style, sideOffset = 4, alignOffset = -5, collisionPadding = 8, ...rest }, ref) {
     const portal2 = usePortalProps();
-    return /* @__PURE__ */ jsx27(RadixMenu.Portal, { children: /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx28(RadixMenu.Portal, { children: /* @__PURE__ */ jsx28(
       RadixMenu.SubContent,
       {
         ref,
@@ -2370,7 +2636,7 @@ var DropdownMenuSubContent = /* @__PURE__ */ forwardRef23(
 );
 
 // src/components/NumberInput/NumberInput.tsx
-import { forwardRef as forwardRef24, useEffect as useEffect10, useId as useId10, useRef as useRef12, useState as useState11 } from "react";
+import { forwardRef as forwardRef25, useEffect as useEffect11, useId as useId12, useRef as useRef16, useState as useState12 } from "react";
 import { MinusIcon as MinusIcon2, PlusIcon } from "@bestow-ui/icons";
 
 // src/components/NumberInput/NumberInput.css.ts
@@ -2381,12 +2647,12 @@ var stepper = /* @__PURE__ */ _7a46811({ defaultClassName: "_1vq2qhv3", variantC
 var unit = "_1vq2qhv2";
 
 // src/components/NumberInput/NumberInput.tsx
-import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
 var MAX_DIGITS2 = 15;
 var isMeaningful = (char) => /[\d.-]/.test(char);
 var decimalsOf = (n) => Number.isFinite(n) ? String(n).split(".")[1]?.length ?? 0 : 0;
 var parse = (raw) => /\d/.test(raw) ? Number(raw) : null;
-var NumberInput = /* @__PURE__ */ forwardRef24(
+var NumberInput = /* @__PURE__ */ forwardRef25(
   function NumberInput2(props, ref) {
     const {
       value: value3,
@@ -2412,15 +2678,15 @@ var NumberInput = /* @__PURE__ */ forwardRef24(
     } = props;
     const isControlled = "value" in props;
     const m = useMessages();
-    const inputRef = useRef12(null);
-    const generatedId = useId10();
+    const inputRef = useRef16(null);
+    const generatedId = useId12();
     const inputId = id ?? generatedId;
     const precision = Math.max(0, precisionProp ?? decimalsOf(step2));
     const allowNegative = min === void 0 || min < 0;
     const round = (n) => Number(n.toFixed(precision));
     const clamp = (n) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, round(n)));
     const toRaw = (n) => n === null || n === void 0 || !Number.isFinite(n) ? "" : String(round(n));
-    const sanitize4 = (input6) => {
+    const sanitize3 = (input6) => {
       const negative = allowNegative && input6.trimStart().startsWith("-");
       const [intPart = "", ...fracParts] = input6.replace(/[^\d.]/g, "").split(".");
       const int = intPart.replace(/^0+(?=\d)/, "").slice(0, MAX_DIGITS2);
@@ -2433,7 +2699,7 @@ var NumberInput = /* @__PURE__ */ forwardRef24(
       const [, sign = "", int = "", rest2 = ""] = raw.match(/^(-?)(\d*)(.*)$/) ?? [];
       return `${sign}${int ? Number(int).toLocaleString("ko-KR") : ""}${rest2}`;
     };
-    const lastEmitted = useRef12(parse(toRaw(isControlled ? value3 : defaultValue)));
+    const lastEmitted = useRef16(parse(toRaw(isControlled ? value3 : defaultValue)));
     const emit = (next) => {
       if (next === lastEmitted.current) return;
       lastEmitted.current = next;
@@ -2444,21 +2710,27 @@ var NumberInput = /* @__PURE__ */ forwardRef24(
       value: void 0,
       defaultValue: toRaw(isControlled ? value3 : defaultValue),
       onValueChange: (raw) => emit(parse(raw)),
-      sanitize: sanitize4,
+      sanitize: sanitize3,
       format: format2,
       isMeaningful,
-      inputRef
+      inputRef,
+      manualReset: true
     });
     const { setRaw } = field4;
-    useEffect10(() => {
+    useEffect11(() => {
       if (!isControlled) return;
       const next = value3 ?? null;
       lastEmitted.current = next;
       if (parse(field4.raw) !== next) setRaw(toRaw(next));
     }, [value3]);
+    useFormReset(inputRef, () => {
+      const next = toRaw(isControlled ? value3 : defaultValue);
+      setRaw(next);
+      if (!isControlled) emit(parse(next));
+    });
     const current2 = parse(field4.raw);
     const valueText = (n) => `${format2(toRaw(n))}${unit2 ?? ""}`;
-    const [announcement, setAnnouncement] = useState11("");
+    const [announcement, setAnnouncement] = useState12("");
     const setValue = (next, announce = true) => {
       setRaw(toRaw(next));
       emit(next);
@@ -2492,7 +2764,7 @@ var NumberInput = /* @__PURE__ */ forwardRef24(
         field4.onKeyDown(event);
       }
     };
-    const stepper2 = (direction) => /* @__PURE__ */ jsx28(
+    const stepper2 = (direction) => /* @__PURE__ */ jsx29(
       IconButton,
       {
         size: "sm",
@@ -2503,11 +2775,11 @@ var NumberInput = /* @__PURE__ */ forwardRef24(
         onMouseDown: (event) => event.preventDefault(),
         onClick: () => stepBy(direction * step2),
         className: stepper({ size }),
-        children: direction < 0 ? /* @__PURE__ */ jsx28(MinusIcon2, {}) : /* @__PURE__ */ jsx28(PlusIcon, {})
+        children: direction < 0 ? /* @__PURE__ */ jsx29(MinusIcon2, {}) : /* @__PURE__ */ jsx29(PlusIcon, {})
       }
     );
-    return /* @__PURE__ */ jsxs24(Fragment6, { children: [
-      /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsxs26(Fragment8, { children: [
+      /* @__PURE__ */ jsx29(
         TextField,
         {
           ref: mergeRefs(ref, inputRef),
@@ -2535,23 +2807,23 @@ var NumberInput = /* @__PURE__ */ forwardRef24(
           disabled,
           readOnly,
           startAdornment: hideStepper ? void 0 : stepper2(-1),
-          endAdornment: unit2 || !hideStepper ? /* @__PURE__ */ jsxs24("span", { className: end, children: [
-            unit2 && /* @__PURE__ */ jsx28("span", { className: unit, children: unit2 }),
+          endAdornment: unit2 || !hideStepper ? /* @__PURE__ */ jsxs26("span", { className: end, children: [
+            unit2 && /* @__PURE__ */ jsx29("span", { className: unit, children: unit2 }),
             !hideStepper && stepper2(1)
           ] }) : void 0,
           className: cx(input4, className),
           ...rest
         }
       ),
-      name && /* @__PURE__ */ jsx28("input", { type: "hidden", name, value: current2 === null ? "" : String(current2) }),
-      /* @__PURE__ */ jsx28("span", { "aria-live": "assertive", "aria-atomic": "true", className: visuallyHidden, children: announcement })
+      name && /* @__PURE__ */ jsx29("input", { type: "hidden", name, value: current2 === null ? "" : String(current2) }),
+      /* @__PURE__ */ jsx29("span", { "aria-live": "assertive", "aria-atomic": "true", className: visuallyHidden, children: announcement })
     ] });
   }
 );
 
 // src/components/Pagination/Pagination.tsx
 import { ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon as ChevronRightIcon4 } from "@bestow-ui/icons";
-import { forwardRef as forwardRef25, useState as useState12 } from "react";
+import { forwardRef as forwardRef26, useState as useState13 } from "react";
 
 // src/components/Pagination/getPaginationItems.ts
 var range = (start, end2) => end2 < start ? [] : Array.from({ length: end2 - start + 1 }, (_, i) => start + i);
@@ -2567,14 +2839,14 @@ function getPaginationItems(page, totalPages, siblingCount = 1, boundaryCount =
     Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),
     endPages.length > 0 ? endPages[0] - 2 : totalPages - 1
   );
-  const items2 = [...startPages];
-  if (siblingsStart > boundaryCount + 2) items2.push("ellipsis-start");
-  else if (boundaryCount + 1 < totalPages - boundaryCount) items2.push(boundaryCount + 1);
-  items2.push(...range(siblingsStart, siblingsEnd));
-  if (siblingsEnd < totalPages - boundaryCount - 1) items2.push("ellipsis-end");
-  else if (totalPages - boundaryCount > boundaryCount) items2.push(totalPages - boundaryCount);
-  items2.push(...endPages);
-  return items2;
+  const items3 = [...startPages];
+  if (siblingsStart > boundaryCount + 2) items3.push("ellipsis-start");
+  else if (boundaryCount + 1 < totalPages - boundaryCount) items3.push(boundaryCount + 1);
+  items3.push(...range(siblingsStart, siblingsEnd));
+  if (siblingsEnd < totalPages - boundaryCount - 1) items3.push("ellipsis-end");
+  else if (totalPages - boundaryCount > boundaryCount) items3.push(totalPages - boundaryCount);
+  items3.push(...endPages);
+  return items3;
 }
 
 // src/components/Pagination/Pagination.css.ts
@@ -2584,8 +2856,8 @@ var item7 = /* @__PURE__ */ _7a46812({ defaultClassName: "_1iraoak1", variantCla
 var list5 = "_1iraoak0";
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
-var Pagination = /* @__PURE__ */ forwardRef25(function Pagination2({
+import { jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
+var Pagination = /* @__PURE__ */ forwardRef26(function Pagination2({
   totalPages,
   page: pageProp,
   defaultPage = 1,
@@ -2598,7 +2870,7 @@ var Pagination = /* @__PURE__ */ forwardRef25(function Pagination2({
   "aria-label": ariaLabelProp,
   ...rest
 }, ref) {
-  const [uncontrolledPage, setUncontrolledPage] = useState12(defaultPage);
+  const [uncontrolledPage, setUncontrolledPage] = useState13(defaultPage);
   const m = useMessages();
   const ariaLabel = ariaLabelProp ?? m.pagination ?? "\uD398\uC774\uC9C0 \uD0D0\uC0C9";
   const getItemLabel = getItemLabelProp ?? ((type, n) => type === "previous" ? m.paginationPrevious ?? "\uC774\uC804 \uD398\uC774\uC9C0" : type === "next" ? m.paginationNext ?? "\uB2E4\uC74C \uD398\uC774\uC9C0" : m.paginationPage?.(n) ?? `${n} \uD398\uC774\uC9C0`);
@@ -2610,8 +2882,8 @@ var Pagination = /* @__PURE__ */ forwardRef25(function Pagination2({
     onPageChange?.(next);
   };
   const itemClass = item7({ size });
-  return /* @__PURE__ */ jsx29("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ jsxs25("ul", { className: list5, children: [
-    /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30("nav", { ref, "aria-label": ariaLabel, className, ...rest, children: /* @__PURE__ */ jsxs27("ul", { className: list5, children: [
+    /* @__PURE__ */ jsx30("li", { children: /* @__PURE__ */ jsx30(
       "button",
       {
         type: "button",
@@ -2619,11 +2891,11 @@ var Pagination = /* @__PURE__ */ forwardRef25(function Pagination2({
         "aria-label": getItemLabel("previous", page - 1),
         disabled: page <= 1,
         onClick: () => goTo(page - 1),
-        children: /* @__PURE__ */ jsx29(ChevronLeftIcon2, { size: 16 })
+        children: /* @__PURE__ */ jsx30(ChevronLeftIcon2, { size: 16 })
       }
     ) }),
     getPaginationItems(page, totalPages, siblingCount, boundaryCount).map(
-      (item9) => typeof item9 === "number" ? /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsx29(
+      (item9) => typeof item9 === "number" ? /* @__PURE__ */ jsx30("li", { children: /* @__PURE__ */ jsx30(
         "button",
         {
           type: "button",
@@ -2633,9 +2905,9 @@ var Pagination = /* @__PURE__ */ forwardRef25(function Pagination2({
           onClick: () => goTo(item9),
           children: item9
         }
-      ) }, item9) : /* @__PURE__ */ jsx29("li", { "aria-hidden": true, className: cx(itemClass, ellipsis), children: "\u2026" }, item9)
+      ) }, item9) : /* @__PURE__ */ jsx30("li", { "aria-hidden": true, className: cx(itemClass, ellipsis), children: "\u2026" }, item9)
     ),
-    /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx30("li", { children: /* @__PURE__ */ jsx30(
       "button",
       {
         type: "button",
@@ -2643,22 +2915,18 @@ var Pagination = /* @__PURE__ */ forwardRef25(function Pagination2({
         "aria-label": getItemLabel("next", page + 1),
         disabled: page >= totalPages,
         onClick: () => goTo(page + 1),
-        children: /* @__PURE__ */ jsx29(ChevronRightIcon4, { size: 16 })
+        children: /* @__PURE__ */ jsx30(ChevronRightIcon4, { size: 16 })
       }
     ) })
   ] }) });
 });
 
 // src/components/PhoneNumberInput/PhoneNumberInput.tsx
-import { forwardRef as forwardRef26, useRef as useRef13 } from "react";
-import { formatPhoneNumber, phoneNumberMaxDigits } from "@bestow-ui/korean-utils";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var sanitize3 = (input6) => {
-  const digits = input6.replace(/\D/g, "");
-  return digits.slice(0, phoneNumberMaxDigits(digits));
-};
+import { forwardRef as forwardRef27, useRef as useRef17 } from "react";
+import { formatPhoneNumber, phoneNumberDigits } from "@bestow-ui/korean-utils";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var isDigit4 = (char) => /\d/.test(char);
-var PhoneNumberInput = /* @__PURE__ */ forwardRef26(
+var PhoneNumberInput = /* @__PURE__ */ forwardRef27(
   function PhoneNumberInput2(props, ref) {
     const {
       value: value3,
@@ -2669,7 +2937,7 @@ var PhoneNumberInput = /* @__PURE__ */ forwardRef26(
       onKeyDown,
       ...rest
     } = props;
-    const inputRef = useRef13(null);
+    const inputRef = useRef17(null);
     const m = useMessages();
     const label6 = labelProp ?? m.phoneNumber ?? "\uD734\uB300\uD3F0 \uBC88\uD638";
     const field4 = useFormattedInput({
@@ -2677,12 +2945,12 @@ var PhoneNumberInput = /* @__PURE__ */ forwardRef26(
       value: value3,
       defaultValue,
       onValueChange,
-      sanitize: sanitize3,
+      sanitize: phoneNumberDigits,
       format: formatPhoneNumber,
       isMeaningful: isDigit4,
       inputRef
     });
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       TextField,
       {
         ref: mergeRefs(ref, inputRef),
@@ -2704,21 +2972,21 @@ var PhoneNumberInput = /* @__PURE__ */ forwardRef26(
 );
 
 // src/components/RadioGroup/RadioGroup.tsx
-import { forwardRef as forwardRef27, useId as useId11, useState as useState13 } from "react";
+import { forwardRef as forwardRef28, useId as useId13, useRef as useRef18, useState as useState14 } from "react";
 
 // src/components/RadioGroup/RadioGroup.css.ts
 import { createRuntimeFn as _7a46813 } from "@vanilla-extract/recipes/createRuntimeFn";
-var description4 = "_1w9iwjmc";
-var groupLabel = "_1w9iwjmd";
-var items = /* @__PURE__ */ _7a46813({ defaultClassName: "_1w9iwjm0", variantClassNames: { orientation: { vertical: "_1w9iwjm1", horizontal: "_1w9iwjm2" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
+var description5 = "_1w9iwjmc";
+var groupLabel2 = "_1w9iwjmd";
+var items2 = /* @__PURE__ */ _7a46813({ defaultClassName: "_1w9iwjm0", variantClassNames: { orientation: { vertical: "_1w9iwjm1", horizontal: "_1w9iwjm2" } }, defaultVariants: { orientation: "vertical" }, compoundVariants: [] });
 var labelText = "_1w9iwjmb";
-var option = /* @__PURE__ */ _7a46813({ defaultClassName: "_1w9iwjm3", variantClassNames: { size: { sm: "_1w9iwjm4", md: "_1w9iwjm5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var option2 = /* @__PURE__ */ _7a46813({ defaultClassName: "_1w9iwjm3", variantClassNames: { size: { sm: "_1w9iwjm4", md: "_1w9iwjm5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 var radio = /* @__PURE__ */ _7a46813({ defaultClassName: "_1w9iwjm7", variantClassNames: { size: { sm: "_1w9iwjm8", md: "_1w9iwjm9" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 var text = "_1w9iwjma";
 
 // src/components/RadioGroup/RadioGroup.tsx
-import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
-var RadioGroup2 = /* @__PURE__ */ forwardRef27(function RadioGroup3(props, ref) {
+import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
+var RadioGroup2 = /* @__PURE__ */ forwardRef28(function RadioGroup3(props, ref) {
   const {
     options,
     value: value3,
@@ -2737,28 +3005,35 @@ var RadioGroup2 = /* @__PURE__ */ forwardRef27(function RadioGroup3(props, ref)
     className
   } = props;
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = useState13(defaultValue ?? "");
+  const [innerValue, setInnerValue] = useState14(defaultValue ?? "");
   const current2 = isControlled ? value3 ?? "" : innerValue;
-  const generatedId = useId11();
+  const generatedId = useId13();
   const baseId = id ?? generatedId;
   const labelId = label6 ? `${baseId}-label` : void 0;
   const helperId = helperText3 ? `${baseId}-helper` : void 0;
   const groupName = name ?? `${baseId}-radio`;
   const detachedForm = name ? void 0 : `${baseId}-no-form`;
+  const rootRef = useRef18(null);
+  useFormReset(rootRef, () => {
+    if (isControlled) return;
+    const next = defaultValue ?? "";
+    setInnerValue(next);
+    if (next !== current2) onValueChange?.(next);
+  });
   const handleChange = (next) => {
     if (next === current2) return;
     if (!isControlled) setInnerValue(next);
     onValueChange?.(next);
   };
-  return /* @__PURE__ */ jsxs26("div", { className: cx(field, className), children: [
-    label6 && /* @__PURE__ */ jsxs26("span", { id: labelId, className: cx(label, groupLabel), children: [
+  return /* @__PURE__ */ jsxs28("div", { className: cx(field, className), children: [
+    label6 && /* @__PURE__ */ jsxs28("span", { id: labelId, className: cx(label, groupLabel2), children: [
       label6,
-      required && /* @__PURE__ */ jsx31("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx32("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx32(
       "div",
       {
-        ref,
+        ref: mergeRefs(ref, rootRef),
         id: baseId,
         role: "radiogroup",
         "aria-label": ariaLabel,
@@ -2767,23 +3042,23 @@ var RadioGroup2 = /* @__PURE__ */ forwardRef27(function RadioGroup3(props, ref)
         "aria-invalid": error || void 0,
         "aria-required": required || void 0,
         "data-disabled": disabled || void 0,
-        className: items({ orientation }),
-        children: options.map((option2) => {
-          const itemId = `${baseId}-${option2.value}`;
-          const descriptionId = option2.description ? `${itemId}-description` : void 0;
-          const itemDisabled = disabled || option2.disabled;
-          const checked = option2.value === current2;
-          return /* @__PURE__ */ jsxs26("div", { className: option({ size }), "data-disabled": itemDisabled || void 0, children: [
-            /* @__PURE__ */ jsx31(
+        className: items2({ orientation }),
+        children: options.map((option3) => {
+          const itemId = `${baseId}-${option3.value}`;
+          const descriptionId = option3.description ? `${itemId}-description` : void 0;
+          const itemDisabled = disabled || option3.disabled;
+          const checked = option3.value === current2;
+          return /* @__PURE__ */ jsxs28("div", { className: option2({ size }), "data-disabled": itemDisabled || void 0, children: [
+            /* @__PURE__ */ jsx32(
               "input",
               {
                 type: "radio",
                 id: itemId,
                 name: groupName,
                 form: detachedForm,
-                value: option2.value,
+                value: option3.value,
                 checked,
-                onChange: () => handleChange(option2.value),
+                onChange: () => handleChange(option3.value),
                 disabled: itemDisabled,
                 required,
                 "aria-describedby": descriptionId,
@@ -2791,20 +3066,172 @@ var RadioGroup2 = /* @__PURE__ */ forwardRef27(function RadioGroup3(props, ref)
                 className: radio({ size })
               }
             ),
-            /* @__PURE__ */ jsxs26("span", { className: text, children: [
-              /* @__PURE__ */ jsx31("label", { htmlFor: itemId, className: labelText, children: option2.label }),
-              option2.description && /* @__PURE__ */ jsx31("span", { id: descriptionId, className: description4, children: option2.description })
+            /* @__PURE__ */ jsxs28("span", { className: text, children: [
+              /* @__PURE__ */ jsx32("label", { htmlFor: itemId, className: labelText, children: option3.label }),
+              option3.description && /* @__PURE__ */ jsx32("span", { id: descriptionId, className: description5, children: option3.description })
             ] })
-          ] }, option2.value);
+          ] }, option3.value);
         })
       }
     ),
-    helperText3 && /* @__PURE__ */ jsx31("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+    helperText3 && /* @__PURE__ */ jsx32("p", { id: helperId, className: helperText({ error }), children: helperText3 })
   ] });
 });
 
+// src/components/ResidentNumberInput/ResidentNumberInput.tsx
+import { forwardRef as forwardRef29, useId as useId14, useRef as useRef19, useState as useState15 } from "react";
+import { isValidResidentNumber, parseResidentNumber } from "@bestow-ui/korean-utils";
+
+// src/components/ResidentNumberInput/ResidentNumberInput.css.ts
+var back = "_1llmfr72";
+var backOne = "_1llmfr73";
+var front = "_1llmfr71";
+var hiddenDigits = "_1llmfr75";
+var row3 = "_1llmfr70";
+var separator4 = "_1llmfr74";
+
+// src/components/ResidentNumberInput/ResidentNumberInput.tsx
+import { jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
+var onlyDigits = (input6) => input6.replace(/\D/g, "");
+var ResidentNumberInput = /* @__PURE__ */ forwardRef29(
+  function ResidentNumberInput2(props, ref) {
+    const {
+      value: value3,
+      defaultValue,
+      onValueChange,
+      digits = 13,
+      validate = true,
+      invalidText: invalidTextProp,
+      label: labelProp,
+      helperText: helperText3,
+      error,
+      required,
+      disabled,
+      size,
+      name,
+      id,
+      className,
+      onBlur
+    } = props;
+    const m = useMessages();
+    const label6 = labelProp ?? m.residentNumber ?? "\uC8FC\uBBFC\uB4F1\uB85D\uBC88\uD638";
+    const invalidText = invalidTextProp ?? m.residentNumberInvalid ?? "\uC62C\uBC14\uB978 \uC8FC\uBBFC\uB4F1\uB85D\uBC88\uD638\uAC00 \uC544\uB2C8\uC5D0\uC694. \uC0DD\uB144\uC6D4\uC77C\uACFC \uB4B7\uC790\uB9AC \uCCAB \uC22B\uC790\uB97C \uD655\uC778\uD574 \uC8FC\uC138\uC694.";
+    const incompleteText = m.residentNumberIncomplete?.(digits) ?? `${digits}\uC790\uB9AC\uB97C \uBAA8\uB450 \uC785\uB825\uD574 \uC8FC\uC138\uC694.`;
+    const backLength = digits - 6;
+    const isControlled = "value" in props;
+    const split = (v) => {
+      const d = onlyDigits(v).slice(0, digits);
+      return { front: d.slice(0, 6), back: d.slice(6) };
+    };
+    const [parts, setParts] = useState15(() => split((isControlled ? value3 : defaultValue) ?? ""));
+    const current2 = isControlled && (value3 ?? "") !== parts.front + parts.back ? split(value3 ?? "") : parts;
+    const raw = current2.front + current2.back;
+    const generatedId = useId14();
+    const baseId = id ?? generatedId;
+    const frontId = `${baseId}-front`;
+    const backId = `${baseId}-back`;
+    const labelId = `${baseId}-label`;
+    const frontRef = useRef19(null);
+    const backRef = useRef19(null);
+    const complete = current2.front.length === 6 && current2.back.length === backLength;
+    const isValid = (v) => digits === 13 ? isValidResidentNumber(v) : parseResidentNumber(v) !== null;
+    const update = (next) => {
+      setParts(next);
+      const nextRaw = next.front + next.back;
+      if (nextRaw === raw) return;
+      const nextComplete = next.front.length === 6 && next.back.length === backLength;
+      onValueChange?.(nextRaw, nextComplete ? isValid(nextRaw) : null);
+    };
+    const [touched, setTouched] = useState15(false);
+    useFormReset(frontRef, () => {
+      setTouched(false);
+      if (isControlled) return setParts(split(value3 ?? ""));
+      const next = split(defaultValue ?? "");
+      update(next);
+    });
+    const autoInvalid = validate && raw.length > 0 && (complete ? !isValid(raw) : touched);
+    const showAuto = autoInvalid && error === void 0;
+    const invalid = error ?? autoInvalid;
+    const helper = showAuto ? complete ? invalidText : incompleteText : helperText3;
+    const helperId = helper ? `${baseId}-helper` : void 0;
+    const announcement = useDelayedAnnouncement(showAuto && complete ? invalidText : "");
+    const common = {
+      inputMode: "numeric",
+      autoComplete: "off",
+      size,
+      disabled,
+      required,
+      invalid,
+      "aria-describedby": helperId
+    };
+    return /* @__PURE__ */ jsxs29(
+      "div",
+      {
+        className: cx(field, className),
+        onBlur: (event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) setTouched(true);
+          onBlur?.(event);
+        },
+        children: [
+          /* @__PURE__ */ jsxs29("label", { id: labelId, htmlFor: frontId, className: label, children: [
+            label6,
+            required && /* @__PURE__ */ jsx33("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxs29("div", { role: "group", id: baseId, "aria-labelledby": labelId, className: row3, children: [
+            /* @__PURE__ */ jsx33(
+              Input,
+              {
+                ...common,
+                ref: mergeRefs(ref, frontRef),
+                id: frontId,
+                "aria-label": m.residentNumberFront ?? "\uC55E 6\uC790\uB9AC",
+                placeholder: "000000",
+                rootClassName: front,
+                maxLength: 6,
+                value: current2.front,
+                onChange: (event) => update({ front: onlyDigits(event.target.value).slice(0, 6), back: current2.back }),
+                onPaste: (event) => {
+                  const pasted = onlyDigits(event.clipboardData.getData("text"));
+                  if (pasted.length <= 6) return;
+                  event.preventDefault();
+                  update(split(pasted));
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx33("span", { className: separator4, "aria-hidden": true, children: "-" }),
+            /* @__PURE__ */ jsx33(
+              Input,
+              {
+                ...common,
+                ref: backRef,
+                id: backId,
+                type: digits === 13 ? "password" : "text",
+                "aria-label": digits === 13 ? m.residentNumberBack ?? "\uB4A4 7\uC790\uB9AC" : m.residentNumberBackFirst ?? "\uB4B7\uC790\uB9AC \uCCAB \uC22B\uC790",
+                maxLength: backLength,
+                rootClassName: digits === 13 ? back : backOne,
+                value: current2.back,
+                onChange: (event) => update({ front: current2.front, back: onlyDigits(event.target.value).slice(0, backLength) }),
+                onKeyDown: (event) => {
+                  if (event.key === "Backspace" && current2.back === "") {
+                    event.preventDefault();
+                    frontRef.current?.focus();
+                  }
+                }
+              }
+            ),
+            digits === 7 && /* @__PURE__ */ jsx33("span", { className: hiddenDigits, "aria-hidden": true, children: "\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF" })
+          ] }),
+          helper && /* @__PURE__ */ jsx33("p", { id: helperId, className: helperText({ error: invalid }), children: helper }),
+          name && /* @__PURE__ */ jsx33("input", { type: "hidden", name, value: raw }),
+          /* @__PURE__ */ jsx33("span", { role: "status", className: visuallyHidden, children: announcement })
+        ]
+      }
+    );
+  }
+);
+
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { forwardRef as forwardRef28, useId as useId12, useRef as useRef14, useState as useState14 } from "react";
+import { forwardRef as forwardRef30, useId as useId15, useRef as useRef20, useState as useState16 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.css.ts
 import { createRuntimeFn as _7a46814 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -2813,9 +3240,9 @@ var item8 = /* @__PURE__ */ _7a46814({ defaultClassName: "_1h65mmo2", variantCla
 var root9 = /* @__PURE__ */ _7a46814({ defaultClassName: "_1h65mmo0", variantClassNames: { fullWidth: { true: "_1h65mmo1" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
 var NEXT_KEYS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
-var SegmentedControl = /* @__PURE__ */ forwardRef28(
+var SegmentedControl = /* @__PURE__ */ forwardRef30(
   function SegmentedControl2(props, ref) {
     const {
       options,
@@ -2832,19 +3259,26 @@ var SegmentedControl = /* @__PURE__ */ forwardRef28(
       className
     } = props;
     const isControlled = "value" in props;
-    const [innerValue, setInnerValue] = useState14(defaultValue ?? "");
+    const [innerValue, setInnerValue] = useState16(defaultValue ?? "");
     const current2 = isControlled ? value3 ?? "" : innerValue;
-    const generatedId = useId12();
+    const generatedId = useId15();
     const labelId = label6 ? `${id ?? generatedId}-label` : void 0;
-    const itemRefs = useRef14([]);
+    const itemRefs = useRef20([]);
     const isEnabled = (index) => !disabled && !options[index]?.disabled;
+    const rootRef = useRef20(null);
+    useFormReset(rootRef, () => {
+      if (isControlled) return;
+      const next = defaultValue ?? "";
+      setInnerValue(next);
+      if (next !== current2) onValueChange?.(next);
+    });
     const select2 = (index) => {
       const next = options[index].value;
       if (next === current2) return;
       if (!isControlled) setInnerValue(next);
       onValueChange?.(next);
     };
-    const checkedIndex = options.findIndex((option2) => option2.value === current2);
+    const checkedIndex = options.findIndex((option3) => option3.value === current2);
     const tabStop = checkedIndex >= 0 && isEnabled(checkedIndex) ? checkedIndex : options.findIndex((_, i) => isEnabled(i));
     const handleKeyDown = (event, index) => {
       let target = -1;
@@ -2867,10 +3301,10 @@ var SegmentedControl = /* @__PURE__ */ forwardRef28(
       itemRefs.current[target]?.focus();
       select2(target);
     };
-    const group = /* @__PURE__ */ jsxs27(
+    const group = /* @__PURE__ */ jsxs30(
       "div",
       {
-        ref,
+        ref: mergeRefs(ref, rootRef),
         id,
         role: "radiogroup",
         "aria-labelledby": labelId,
@@ -2878,9 +3312,9 @@ var SegmentedControl = /* @__PURE__ */ forwardRef28(
         "aria-disabled": disabled || void 0,
         className: cx(root9({ fullWidth }), !label6 && className),
         children: [
-          options.map((option2, index) => {
+          options.map((option3, index) => {
             const checked = index === checkedIndex;
-            return /* @__PURE__ */ jsxs27(
+            return /* @__PURE__ */ jsxs30(
               "button",
               {
                 ref: (node) => {
@@ -2897,27 +3331,27 @@ var SegmentedControl = /* @__PURE__ */ forwardRef28(
                 onClick: () => select2(index),
                 onKeyDown: (event) => handleKeyDown(event, index),
                 children: [
-                  option2.icon && /* @__PURE__ */ jsx32("span", { "aria-hidden": true, className: icon5, children: option2.icon }),
-                  option2.label
+                  option3.icon && /* @__PURE__ */ jsx34("span", { "aria-hidden": true, className: icon5, children: option3.icon }),
+                  option3.label
                 ]
               },
-              option2.value
+              option3.value
             );
           }),
-          name && /* @__PURE__ */ jsx32("input", { type: "hidden", name, value: current2 })
+          name && /* @__PURE__ */ jsx34("input", { type: "hidden", name, value: current2 })
         ]
       }
     );
     if (!label6) return group;
-    return /* @__PURE__ */ jsxs27("div", { className: cx(field, className), children: [
-      /* @__PURE__ */ jsx32("span", { id: labelId, className: label, children: label6 }),
+    return /* @__PURE__ */ jsxs30("div", { className: cx(field, className), children: [
+      /* @__PURE__ */ jsx34("span", { id: labelId, className: label, children: label6 }),
       group
     ] });
   }
 );
 
 // src/components/NativeSelect/NativeSelect.tsx
-import { forwardRef as forwardRef29, useId as useId13 } from "react";
+import { forwardRef as forwardRef31, useId as useId16 } from "react";
 import { ChevronDownIcon as ChevronDownIcon4 } from "@bestow-ui/icons";
 
 // src/components/NativeSelect/NativeSelect.css.ts
@@ -2927,8 +3361,8 @@ var select = /* @__PURE__ */ _7a46815({ defaultClassName: "_5silym1", variantCla
 var wrapper = "_5silym0";
 
 // src/components/NativeSelect/NativeSelect.tsx
-import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
-var NativeSelect = /* @__PURE__ */ forwardRef29(function NativeSelect2({
+import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
+var NativeSelect = /* @__PURE__ */ forwardRef31(function NativeSelect2({
   options,
   onValueChange,
   onChange,
@@ -2948,26 +3382,26 @@ var NativeSelect = /* @__PURE__ */ forwardRef29(function NativeSelect2({
   "aria-describedby": ariaDescribedBy,
   ...rest
 }, ref) {
-  const generatedId = useId13();
+  const generatedId = useId16();
   const selectId = id ?? generatedId;
   const helperId = helperText3 ? `${selectId}-helper` : void 0;
   const handleChange = (event) => {
     onChange?.(event);
     onValueChange?.(event.target.value);
   };
-  return /* @__PURE__ */ jsxs28("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label6 && /* @__PURE__ */ jsxs28("label", { htmlFor: selectId, className: label, children: [
+  return /* @__PURE__ */ jsxs31("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs31("label", { htmlFor: selectId, className: label, children: [
       label6,
-      required && /* @__PURE__ */ jsx33("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx35("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs28(
+    /* @__PURE__ */ jsxs31(
       "span",
       {
-        className: cx(root3({ size, fullWidth }), wrapper),
+        className: cx(root({ size, fullWidth }), wrapper),
         "data-invalid": error || void 0,
         "data-disabled": disabled || void 0,
         children: [
-          /* @__PURE__ */ jsxs28(
+          /* @__PURE__ */ jsxs31(
             "select",
             {
               ref,
@@ -2982,25 +3416,25 @@ var NativeSelect = /* @__PURE__ */ forwardRef29(function NativeSelect2({
               className: cx(select({ size }), className),
               ...rest,
               children: [
-                placeholder !== void 0 && /* @__PURE__ */ jsx33("option", { value: "", disabled: true, children: placeholder }),
-                options ? options.map((option2) => /* @__PURE__ */ jsx33("option", { value: option2.value, disabled: option2.disabled, children: option2.label }, option2.value)) : children
+                placeholder !== void 0 && /* @__PURE__ */ jsx35("option", { value: "", disabled: true, children: placeholder }),
+                options ? options.map((option3) => /* @__PURE__ */ jsx35("option", { value: option3.value, disabled: option3.disabled, children: option3.label }, option3.value)) : children
               ]
             }
           ),
-          /* @__PURE__ */ jsx33(ChevronDownIcon4, { size: 16, className: icon6({ size }) })
+          /* @__PURE__ */ jsx35(ChevronDownIcon4, { size: 16, className: icon6({ size }) })
         ]
       }
     ),
-    helperText3 && /* @__PURE__ */ jsx33("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+    helperText3 && /* @__PURE__ */ jsx35("p", { id: helperId, className: helperText({ error }), children: helperText3 })
   ] });
 });
 
 // src/components/Select/Select.tsx
 import * as RadixSelect from "@radix-ui/react-select";
-import { forwardRef as forwardRef30, useId as useId14 } from "react";
+import { forwardRef as forwardRef32, useId as useId17 } from "react";
 import { CheckIcon as CheckIcon3, ChevronDownIcon as ChevronDownIcon5 } from "@bestow-ui/icons";
-import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
-var Select = /* @__PURE__ */ forwardRef30(function Select2(props, ref) {
+import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
+var Select = /* @__PURE__ */ forwardRef32(function Select2(props, ref) {
   const {
     options,
     value: value3,
@@ -3020,16 +3454,16 @@ var Select = /* @__PURE__ */ forwardRef30(function Select2(props, ref) {
     className
   } = props;
   const isControlled = "value" in props;
-  const generatedId = useId14();
+  const generatedId = useId17();
   const triggerId = id ?? generatedId;
   const helperId = helperText3 ? `${triggerId}-helper` : void 0;
   const portal2 = usePortalProps();
-  return /* @__PURE__ */ jsxs29("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label6 && /* @__PURE__ */ jsxs29("label", { htmlFor: triggerId, className: label, children: [
+  return /* @__PURE__ */ jsxs32("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs32("label", { htmlFor: triggerId, className: label, children: [
       label6,
-      required && /* @__PURE__ */ jsx34("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx36("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs29(
+    /* @__PURE__ */ jsxs32(
       RadixSelect.Root,
       {
         value: isControlled ? value3 ?? "" : void 0,
@@ -3039,7 +3473,7 @@ var Select = /* @__PURE__ */ forwardRef30(function Select2(props, ref) {
         required,
         name,
         children: [
-          /* @__PURE__ */ jsxs29(
+          /* @__PURE__ */ jsxs32(
             RadixSelect.Trigger,
             {
               ref,
@@ -3048,14 +3482,14 @@ var Select = /* @__PURE__ */ forwardRef30(function Select2(props, ref) {
               "aria-invalid": error || void 0,
               "aria-describedby": helperId,
               "data-invalid": error || void 0,
-              className: cx(root3({ size, fullWidth }), trigger2, className),
+              className: cx(root({ size, fullWidth }), trigger2, className),
               children: [
-                /* @__PURE__ */ jsx34("span", { className: value, children: /* @__PURE__ */ jsx34(RadixSelect.Value, { placeholder }) }),
-                /* @__PURE__ */ jsx34(RadixSelect.Icon, { className: icon3, children: /* @__PURE__ */ jsx34(ChevronDownIcon5, { size: 16 }) })
+                /* @__PURE__ */ jsx36("span", { className: value, children: /* @__PURE__ */ jsx36(RadixSelect.Value, { placeholder }) }),
+                /* @__PURE__ */ jsx36(RadixSelect.Icon, { className: icon3, children: /* @__PURE__ */ jsx36(ChevronDownIcon5, { size: 16 }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx34(RadixSelect.Portal, { children: /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx36(RadixSelect.Portal, { children: /* @__PURE__ */ jsx36(
             RadixSelect.Content,
             {
               position: "popper",
@@ -3063,37 +3497,37 @@ var Select = /* @__PURE__ */ forwardRef30(function Select2(props, ref) {
               collisionPadding: 8,
               className: cx(portal2.className, content5),
               style: portal2.style,
-              children: /* @__PURE__ */ jsx34(RadixSelect.Viewport, { className: viewport, children: options.map((option2) => /* @__PURE__ */ jsxs29(
+              children: /* @__PURE__ */ jsx36(RadixSelect.Viewport, { className: viewport, children: options.map((option3) => /* @__PURE__ */ jsxs32(
                 RadixSelect.Item,
                 {
-                  value: option2.value,
-                  disabled: option2.disabled,
+                  value: option3.value,
+                  disabled: option3.disabled,
                   className: item4,
                   children: [
-                    /* @__PURE__ */ jsx34(RadixSelect.ItemText, { children: option2.label }),
-                    /* @__PURE__ */ jsx34(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx34(CheckIcon3, { size: 16 }) })
+                    /* @__PURE__ */ jsx36(RadixSelect.ItemText, { children: option3.label }),
+                    /* @__PURE__ */ jsx36(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx36(CheckIcon3, { size: 16 }) })
                   ]
                 },
-                option2.value
+                option3.value
               )) })
             }
           ) })
         ]
       }
     ),
-    helperText3 && /* @__PURE__ */ jsx34("p", { id: helperId, className: helperText({ error }), children: helperText3 })
+    helperText3 && /* @__PURE__ */ jsx36("p", { id: helperId, className: helperText({ error }), children: helperText3 })
   ] });
 });
 
 // src/components/SkipLink/SkipLink.tsx
-import { forwardRef as forwardRef31 } from "react";
+import { forwardRef as forwardRef33 } from "react";
 
 // src/components/SkipLink/SkipLink.css.ts
 var skipLink = "_1t9jaar0";
 
 // src/components/SkipLink/SkipLink.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
-var SkipLink = /* @__PURE__ */ forwardRef31(function SkipLink2({ href = "#main", className, children, onClick, ...rest }, ref) {
+import { jsx as jsx37 } from "react/jsx-runtime";
+var SkipLink = /* @__PURE__ */ forwardRef33(function SkipLink2({ href = "#main", className, children, onClick, ...rest }, ref) {
   const m = useMessages();
   const handleClick = (event) => {
     onClick?.(event);
@@ -3105,12 +3539,12 @@ var SkipLink = /* @__PURE__ */ forwardRef31(function SkipLink2({ href = "#main",
     target.focus();
     target.scrollIntoView?.({ block: "start" });
   };
-  return /* @__PURE__ */ jsx35("a", { ref, href, className: cx(skipLink, className), onClick: handleClick, ...rest, children: children ?? m.skipToContent ?? "\uBCF8\uBB38 \uBC14\uB85C\uAC00\uAE30" });
+  return /* @__PURE__ */ jsx37("a", { ref, href, className: cx(skipLink, className), onClick: handleClick, ...rest, children: children ?? m.skipToContent ?? "\uBCF8\uBB38 \uBC14\uB85C\uAC00\uAE30" });
 });
 
 // src/components/Slider/Slider.tsx
 import * as RadixSlider from "@radix-ui/react-slider";
-import { forwardRef as forwardRef32, useId as useId15, useState as useState15 } from "react";
+import { forwardRef as forwardRef34, useId as useId18, useRef as useRef21, useState as useState17 } from "react";
 
 // src/components/Slider/Slider.css.ts
 import { createRuntimeFn as _7a46816 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -3125,8 +3559,8 @@ var track = /* @__PURE__ */ _7a46816({ defaultClassName: "_126mzjm8", variantCla
 var value2 = "_126mzjm3";
 
 // src/components/Slider/Slider.tsx
-import { jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
-var Slider = /* @__PURE__ */ forwardRef32(function Slider2(props, ref) {
+import { jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
+var Slider = /* @__PURE__ */ forwardRef34(function Slider2(props, ref) {
   const {
     value: value3,
     defaultValue,
@@ -3142,33 +3576,42 @@ var Slider = /* @__PURE__ */ forwardRef32(function Slider2(props, ref) {
     size,
     id,
     className,
-    disabled,
+    disabled: disabledProp,
     ...rest
   } = props;
   const m = useMessages();
   const thumbLabels = thumbLabelsProp ?? [m.rangeStart ?? "\uCD5C\uC18C", m.rangeEnd ?? "\uCD5C\uB300"];
-  const generatedId = useId15();
+  const generatedId = useId18();
   const baseId = id ?? generatedId;
   const labelId = `${baseId}-label`;
   const helperId = `${baseId}-helper`;
   const isControlled = "value" in props;
-  const [innerValue, setInnerValue] = useState15(defaultValue ?? [min]);
+  const [innerValue, setInnerValue] = useState17(defaultValue ?? [min]);
   const current2 = isControlled ? value3 ?? [min] : innerValue;
   const isRange = current2.length > 1;
+  const rootRef = useRef21(null);
+  const fieldsetDisabled = useFieldsetDisabled(rootRef);
+  const disabled = disabledProp || fieldsetDisabled;
+  useFormReset(rootRef, () => {
+    if (isControlled) return;
+    const next = defaultValue ?? [min];
+    setInnerValue(next);
+    if (next.join() !== current2.join()) onValueChange?.(next);
+  });
   const handleChange = (next) => {
     if (!isControlled) setInnerValue(next);
     onValueChange?.(next);
   };
   const valueText = current2.map(formatValue).join(" \u2013 ");
-  return /* @__PURE__ */ jsxs30("div", { className: cx(field3, className), children: [
-    (label6 || showValue) && /* @__PURE__ */ jsxs30("div", { className: header6, children: [
-      label6 && /* @__PURE__ */ jsx36("span", { id: labelId, className: label3, children: label6 }),
-      showValue && /* @__PURE__ */ jsx36("span", { className: value2, "aria-hidden": true, children: valueText })
+  return /* @__PURE__ */ jsxs33("div", { className: cx(field3, className), children: [
+    (label6 || showValue) && /* @__PURE__ */ jsxs33("div", { className: header6, children: [
+      label6 && /* @__PURE__ */ jsx38("span", { id: labelId, className: label3, children: label6 }),
+      showValue && /* @__PURE__ */ jsx38("span", { className: value2, "aria-hidden": true, children: valueText })
     ] }),
-    /* @__PURE__ */ jsxs30(
+    /* @__PURE__ */ jsxs33(
       RadixSlider.Root,
       {
-        ref,
+        ref: mergeRefs(ref, rootRef),
         id: baseId,
         min,
         max,
@@ -3178,10 +3621,10 @@ var Slider = /* @__PURE__ */ forwardRef32(function Slider2(props, ref) {
         className: root10({ size }),
         ...rest,
         children: [
-          /* @__PURE__ */ jsx36(RadixSlider.Track, { className: track({ size }), children: /* @__PURE__ */ jsx36(RadixSlider.Range, { className: range2 }) }),
+          /* @__PURE__ */ jsx38(RadixSlider.Track, { className: track({ size }), children: /* @__PURE__ */ jsx38(RadixSlider.Range, { className: range2 }) }),
           current2.map((thumbValue, index) => {
             const thumbLabelId = `${baseId}-thumb-${index}`;
-            return /* @__PURE__ */ jsx36(
+            return /* @__PURE__ */ jsx38(
               RadixSlider.Thumb,
               {
                 className: thumb({ size }),
@@ -3196,32 +3639,33 @@ var Slider = /* @__PURE__ */ forwardRef32(function Slider2(props, ref) {
         ]
       }
     ),
-    isRange && current2.map((_, index) => /* @__PURE__ */ jsxs30("span", { id: `${baseId}-thumb-${index}`, hidden: true, children: [
+    isRange && current2.map((_, index) => /* @__PURE__ */ jsxs33("span", { id: `${baseId}-thumb-${index}`, hidden: true, children: [
       label6 ? "" : ariaLabel ? `${ariaLabel} ` : "",
       thumbLabels[index] ?? `${index + 1}`
     ] }, index)),
-    helperText3 && /* @__PURE__ */ jsx36("span", { id: helperId, className: helperText2, children: helperText3 })
+    helperText3 && /* @__PURE__ */ jsx38("span", { id: helperId, className: helperText2, children: helperText3 })
   ] });
 });
 
 // src/components/Stepper/Stepper.tsx
-import { forwardRef as forwardRef33 } from "react";
+import { forwardRef as forwardRef35 } from "react";
 import { CheckIcon as CheckIcon4 } from "@bestow-ui/icons";
 
 // src/components/Stepper/Stepper.css.ts
 import { createRuntimeFn as _7a46817 } from "@vanilla-extract/recipes/createRuntimeFn";
-var description5 = "kervhmh";
+var description6 = "kervhmi";
 var indicator2 = /* @__PURE__ */ _7a46817({ defaultClassName: "kervhm6", variantClassNames: { status: { complete: "kervhm7", current: "kervhm8", upcoming: "kervhm9" } }, defaultVariants: {}, compoundVariants: [] });
-var label4 = /* @__PURE__ */ _7a46817({ defaultClassName: "kervhmd", variantClassNames: { status: { complete: "kervhme", current: "kervhmf", upcoming: "kervhmg" } }, defaultVariants: {}, compoundVariants: [] });
+var label4 = /* @__PURE__ */ _7a46817({ defaultClassName: "kervhme", variantClassNames: { status: { complete: "kervhmf", current: "kervhmg", upcoming: "kervhmh" } }, defaultVariants: {}, compoundVariants: [] });
 var root11 = /* @__PURE__ */ _7a46817({ defaultClassName: "kervhm0", variantClassNames: { orientation: { horizontal: "kervhm1", vertical: "kervhm2" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
 var step = /* @__PURE__ */ _7a46817({ defaultClassName: "kervhm3", variantClassNames: { orientation: { horizontal: "kervhm4", vertical: "kervhm5" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] });
-var text2 = /* @__PURE__ */ _7a46817({ defaultClassName: "kervhma", variantClassNames: { orientation: { horizontal: "kervhmb", vertical: "kervhmc" } }, defaultVariants: {}, compoundVariants: [] });
+var text2 = /* @__PURE__ */ _7a46817({ defaultClassName: "kervhma", variantClassNames: { orientation: { horizontal: "kervhmb", vertical: "kervhmc" }, reserveDescription: { true: "kervhmd" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/Stepper/Stepper.tsx
-import { jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
-var Stepper = /* @__PURE__ */ forwardRef33(function Stepper2({ steps, current: current2, orientation = "horizontal", "aria-label": ariaLabel, className, ...rest }, ref) {
+import { jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
+var Stepper = /* @__PURE__ */ forwardRef35(function Stepper2({ steps, current: current2, orientation = "horizontal", loading, "aria-label": ariaLabel, className, ...rest }, ref) {
   const m = useMessages();
-  return /* @__PURE__ */ jsx37(
+  const reserveDescription = orientation === "vertical" && steps.some((step2) => step2.description);
+  return /* @__PURE__ */ jsx39(
     "ol",
     {
       ref,
@@ -3230,24 +3674,30 @@ var Stepper = /* @__PURE__ */ forwardRef33(function Stepper2({ steps, current: c
       ...rest,
       children: steps.map((step2, index) => {
         const status = index < current2 ? "complete" : index === current2 ? "current" : "upcoming";
-        return /* @__PURE__ */ jsxs31(
+        const inProgress = loading && status === "current";
+        return /* @__PURE__ */ jsxs34(
           "li",
           {
             className: step({ orientation }),
             "data-status": status,
             "aria-current": status === "current" ? "step" : void 0,
             children: [
-              /* @__PURE__ */ jsx37("span", { className: indicator2({ status }), "aria-hidden": true, children: status === "complete" ? /* @__PURE__ */ jsx37(CheckIcon4, { size: 16, strokeWidth: 2.5 }) : index + 1 }),
-              /* @__PURE__ */ jsxs31("span", { className: text2({ orientation }), children: [
-                /* @__PURE__ */ jsxs31("span", { className: label4({ status }), children: [
+              /* @__PURE__ */ jsx39("span", { className: indicator2({ status }), "aria-hidden": true, children: status === "complete" ? /* @__PURE__ */ jsx39(CheckIcon4, { size: 16, strokeWidth: 2.5 }) : inProgress ? /* @__PURE__ */ jsx39(Spinner, { size: "sm", label: "" }) : index + 1 }),
+              /* @__PURE__ */ jsxs34("span", { className: text2({ orientation, reserveDescription }), children: [
+                /* @__PURE__ */ jsxs34("span", { className: label4({ status }), children: [
                   step2.label,
-                  status === "complete" && /* @__PURE__ */ jsxs31("span", { className: visuallyHidden, children: [
+                  status === "complete" && /* @__PURE__ */ jsxs34("span", { className: visuallyHidden, children: [
                     " (",
                     m.stepCompleted ?? "\uC644\uB8CC",
                     ")"
+                  ] }),
+                  inProgress && /* @__PURE__ */ jsxs34("span", { className: visuallyHidden, children: [
+                    " (",
+                    m.stepInProgress ?? "\uC9C4\uD589 \uC911",
+                    ")"
                   ] })
                 ] }),
-                step2.description && /* @__PURE__ */ jsx37("span", { className: description5, children: step2.description })
+                step2.description && /* @__PURE__ */ jsx39("span", { className: description6, children: step2.description })
               ] })
             ]
           },
@@ -3259,7 +3709,7 @@ var Stepper = /* @__PURE__ */ forwardRef33(function Stepper2({ steps, current: c
 });
 
 // src/components/Switch/Switch.tsx
-import { forwardRef as forwardRef34, useEffect as useEffect11, useId as useId16, useRef as useRef15, useState as useState16 } from "react";
+import { forwardRef as forwardRef36, useEffect as useEffect12, useId as useId19, useRef as useRef22, useState as useState18 } from "react";
 
 // src/components/Switch/Switch.css.ts
 import { createRuntimeFn as _7a46818 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -3270,11 +3720,11 @@ var thumb2 = /* @__PURE__ */ _7a46818({ defaultClassName: "o33ul26", variantClas
 var track2 = /* @__PURE__ */ _7a46818({ defaultClassName: "o33ul23", variantClassNames: { size: { sm: "o33ul24", md: "o33ul25" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 
 // src/components/Switch/Switch.tsx
-import { jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs35 } from "react/jsx-runtime";
 function setNativeChecked(input6, checked) {
   Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "checked")?.set?.call(input6, checked);
 }
-var Switch = /* @__PURE__ */ forwardRef34(function Switch2({
+var Switch = /* @__PURE__ */ forwardRef36(function Switch2({
   label: label6,
   size,
   id,
@@ -3288,31 +3738,26 @@ var Switch = /* @__PURE__ */ forwardRef34(function Switch2({
   onCheckedChange,
   "aria-label": ariaLabel
 }, ref) {
-  const generatedId = useId16();
+  const generatedId = useId19();
   const switchId = id ?? generatedId;
-  const [uncontrolled, setUncontrolled] = useState16(defaultChecked ?? false);
+  const [uncontrolled, setUncontrolled] = useState18(defaultChecked ?? false);
   const isControlled = checkedProp !== void 0;
   const checked = isControlled ? checkedProp : uncontrolled;
-  const buttonRef = useRef15(null);
-  const inputRef = useRef15(null);
-  const [inForm, setInForm] = useState16(true);
-  const userToggled = useRef15(false);
+  const buttonRef = useRef22(null);
+  const inputRef = useRef22(null);
+  const [inForm, setInForm] = useState18(true);
+  const userToggled = useRef22(false);
   const setChecked = (next) => {
     if (!isControlled) setUncontrolled(next);
     if (next !== checked) onCheckedChange?.(next);
   };
-  const setCheckedRef = useRef15(setChecked);
-  setCheckedRef.current = setChecked;
-  useEffect11(() => {
-    const form = buttonRef.current?.form;
-    setInForm(!!form);
-    if (!form) return;
-    const initial = checked;
-    const onReset = () => setCheckedRef.current(initial);
-    form.addEventListener("reset", onReset);
-    return () => form.removeEventListener("reset", onReset);
+  useFormReset(buttonRef, () => {
+    if (!isControlled) setChecked(defaultChecked ?? false);
+  });
+  useEffect12(() => {
+    setInForm(!!buttonRef.current?.form);
   }, []);
-  useEffect11(() => {
+  useEffect12(() => {
     const input6 = inputRef.current;
     if (!input6 || input6.checked === checked) return;
     setNativeChecked(input6, checked);
@@ -3325,8 +3770,8 @@ var Switch = /* @__PURE__ */ forwardRef34(function Switch2({
     if (inForm) event.stopPropagation();
   };
   const state = checked ? "checked" : "unchecked";
-  return /* @__PURE__ */ jsxs32("span", { className: cx(root12({ size }), className), "data-disabled": disabled || void 0, children: [
-    /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs35("span", { className: cx(root12({ size }), className), "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsx40(
       "button",
       {
         ref: mergeRefs(ref, buttonRef),
@@ -3342,10 +3787,10 @@ var Switch = /* @__PURE__ */ forwardRef34(function Switch2({
         value: value3,
         className: track2({ size }),
         onClick: handleClick,
-        children: /* @__PURE__ */ jsx38("span", { className: thumb2({ size }), "data-state": state, "data-disabled": disabled ? "" : void 0 })
+        children: /* @__PURE__ */ jsx40("span", { className: thumb2({ size }), "data-state": state, "data-disabled": disabled ? "" : void 0 })
       }
     ),
-    inForm && /* @__PURE__ */ jsx38(
+    inForm && /* @__PURE__ */ jsx40(
       "input",
       {
         ref: inputRef,
@@ -3360,16 +3805,16 @@ var Switch = /* @__PURE__ */ forwardRef34(function Switch2({
         className: bubbleInput({ size })
       }
     ),
-    label6 && /* @__PURE__ */ jsx38("label", { htmlFor: switchId, className: label5, children: label6 })
+    label6 && /* @__PURE__ */ jsx40("label", { htmlFor: switchId, className: label5, children: label6 })
   ] });
 });
 
 // src/components/Table/Table.tsx
 import {
   createContext as createContext3,
-  forwardRef as forwardRef35,
+  forwardRef as forwardRef37,
   useContext as useContext3,
-  useId as useId17
+  useId as useId20
 } from "react";
 import { ArrowDownIcon, ArrowUpIcon } from "@bestow-ui/icons";
 
@@ -3385,7 +3830,7 @@ var footer3 = "l3ploy7";
 var footerCell = "l3ployg";
 var head = "l3ployf";
 var header7 = "l3ploy3";
-var row3 = "l3ploy8";
+var row4 = "l3ploy8";
 var sortButton = "l3ployh";
 var sortIcon = "l3ployi";
 var stickyHeader = "l3ploy4";
@@ -3393,10 +3838,10 @@ var striped = "l3ploy6";
 var table = "l3ploy1";
 
 // src/components/Table/Table.tsx
-import { Fragment as Fragment7, jsx as jsx39, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
 var TableSizeContext = /* @__PURE__ */ createContext3("md");
 var TableSectionContext = /* @__PURE__ */ createContext3("body");
-var Table = /* @__PURE__ */ forwardRef35(function Table2({
+var Table = /* @__PURE__ */ forwardRef37(function Table2({
   size = "md",
   striped: striped2,
   stickyHeader: stickyHeader2,
@@ -3408,8 +3853,8 @@ var Table = /* @__PURE__ */ forwardRef35(function Table2({
   children,
   ...rest
 }, ref) {
-  const captionId = useId17();
-  return /* @__PURE__ */ jsx39(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx39(
+  const captionId = useId20();
+  return /* @__PURE__ */ jsx41(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx41(
     "div",
     {
       className: cx(container, containerClassName),
@@ -3418,7 +3863,7 @@ var Table = /* @__PURE__ */ forwardRef35(function Table2({
       role: "region",
       "aria-labelledby": caption2 ? captionId : void 0,
       "aria-label": caption2 ? void 0 : ariaLabel,
-      children: /* @__PURE__ */ jsxs33(
+      children: /* @__PURE__ */ jsxs36(
         "table",
         {
           ref,
@@ -3426,7 +3871,7 @@ var Table = /* @__PURE__ */ forwardRef35(function Table2({
           "aria-label": caption2 ? void 0 : ariaLabel,
           ...rest,
           children: [
-            caption2 && /* @__PURE__ */ jsx39("caption", { id: captionId, className: caption, children: caption2 }),
+            caption2 && /* @__PURE__ */ jsx41("caption", { id: captionId, className: caption, children: caption2 }),
             children
           ]
         }
@@ -3434,31 +3879,31 @@ var Table = /* @__PURE__ */ forwardRef35(function Table2({
     }
   ) });
 });
-var TableHeader = /* @__PURE__ */ forwardRef35(
+var TableHeader = /* @__PURE__ */ forwardRef37(
   function TableHeader2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx39(TableSectionContext.Provider, { value: "header", children: /* @__PURE__ */ jsx39("thead", { ref, className: cx(header7, className), ...rest }) });
+    return /* @__PURE__ */ jsx41(TableSectionContext.Provider, { value: "header", children: /* @__PURE__ */ jsx41("thead", { ref, className: cx(header7, className), ...rest }) });
   }
 );
-var TableBody = /* @__PURE__ */ forwardRef35(
+var TableBody = /* @__PURE__ */ forwardRef37(
   function TableBody2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx39(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx39("tbody", { ref, className: cx(body3, className), ...rest }) });
+    return /* @__PURE__ */ jsx41(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx41("tbody", { ref, className: cx(body3, className), ...rest }) });
   }
 );
-var TableFooter = /* @__PURE__ */ forwardRef35(
+var TableFooter = /* @__PURE__ */ forwardRef37(
   function TableFooter2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx39(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx39("tfoot", { ref, className: cx(footer3, className), ...rest }) });
+    return /* @__PURE__ */ jsx41(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx41("tfoot", { ref, className: cx(footer3, className), ...rest }) });
   }
 );
-var TableRow = /* @__PURE__ */ forwardRef35(function TableRow2({ selected, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx39("tr", { ref, className: cx(row3, className), "data-state": selected ? "selected" : void 0, ...rest });
+var TableRow = /* @__PURE__ */ forwardRef37(function TableRow2({ selected, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx41("tr", { ref, className: cx(row4, className), "data-state": selected ? "selected" : void 0, ...rest });
 });
-var TableHead = /* @__PURE__ */ forwardRef35(function TableHead2({ align, sortDirection, onSort, scope, className, children, ...rest }, ref) {
+var TableHead = /* @__PURE__ */ forwardRef37(function TableHead2({ align, sortDirection, onSort, scope, className, children, ...rest }, ref) {
   const size = useContext3(TableSizeContext);
   const section = useContext3(TableSectionContext);
   const sortable = onSort !== void 0;
   const direction = sortDirection ?? "none";
   const SortIcon = direction === "descending" ? ArrowDownIcon : ArrowUpIcon;
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx41(
     "th",
     {
       ref,
@@ -3470,17 +3915,17 @@ var TableHead = /* @__PURE__ */ forwardRef35(function TableHead2({ align, sortDi
         className
       ),
       ...rest,
-      children: sortable ? /* @__PURE__ */ jsxs33("button", { type: "button", className: sortButton, onClick: onSort, children: [
+      children: sortable ? /* @__PURE__ */ jsxs36("button", { type: "button", className: sortButton, onClick: onSort, children: [
         children,
-        /* @__PURE__ */ jsx39(SortIcon, { size: 14, className: sortIcon, "data-active": direction !== "none", "aria-hidden": true })
+        /* @__PURE__ */ jsx41(SortIcon, { size: 14, className: sortIcon, "data-active": direction !== "none", "aria-hidden": true })
       ] }) : children
     }
   );
 });
-var TableCell = /* @__PURE__ */ forwardRef35(function TableCell2({ align, className, ...rest }, ref) {
+var TableCell = /* @__PURE__ */ forwardRef37(function TableCell2({ align, className, ...rest }, ref) {
   const size = useContext3(TableSizeContext);
   const section = useContext3(TableSectionContext);
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx41(
     "td",
     {
       ref,
@@ -3489,17 +3934,17 @@ var TableCell = /* @__PURE__ */ forwardRef35(function TableCell2({ align, classN
     }
   );
 });
-var TableEmpty = /* @__PURE__ */ forwardRef35(function TableEmpty2({ colSpan, className, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsx39(TableRow, { children: /* @__PURE__ */ jsx39(TableCell, { ref, colSpan, className: cx(emptyCell, className), ...rest, children: /* @__PURE__ */ jsx39("div", { className: emptyContent, children }) }) });
+var TableEmpty = /* @__PURE__ */ forwardRef37(function TableEmpty2({ colSpan, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx41(TableRow, { children: /* @__PURE__ */ jsx41(TableCell, { ref, colSpan, className: cx(emptyCell, className), ...rest, children: /* @__PURE__ */ jsx41("div", { className: emptyContent, children }) }) });
 });
 function TableSkeleton({ rows = 5, columns }) {
-  return /* @__PURE__ */ jsx39(Fragment7, { children: Array.from({ length: rows }, (_, row5) => /* @__PURE__ */ jsx39(TableRow, { "aria-hidden": true, children: Array.from({ length: columns }, (_2, column) => /* @__PURE__ */ jsx39(TableCell, { children: /* @__PURE__ */ jsx39(Skeleton, { width: column === 0 ? "60%" : "80%" }) }, column)) }, row5)) });
+  return /* @__PURE__ */ jsx41(Fragment9, { children: Array.from({ length: rows }, (_, row6) => /* @__PURE__ */ jsx41(TableRow, { "aria-hidden": true, children: Array.from({ length: columns }, (_2, column) => /* @__PURE__ */ jsx41(TableCell, { children: /* @__PURE__ */ jsx41(Skeleton, { width: column === 0 ? "60%" : "80%" }) }, column)) }, row6)) });
 }
 
 // src/components/Table/useTableSelection.ts
-import { useCallback, useState as useState17 } from "react";
+import { useCallback, useState as useState19 } from "react";
 function useTableSelection(initial = []) {
-  const [selected, setSelected] = useState17(initial);
+  const [selected, setSelected] = useState19(initial);
   const isSelected = useCallback((id) => selected.includes(id), [selected]);
   const toggle3 = useCallback((id, checked) => {
     setSelected((prev) => {
@@ -3529,7 +3974,7 @@ function useTableSelection(initial = []) {
 
 // src/components/Tabs/Tabs.tsx
 import * as RadixTabs from "@radix-ui/react-tabs";
-import { createContext as createContext4, forwardRef as forwardRef36, useContext as useContext4 } from "react";
+import { createContext as createContext4, forwardRef as forwardRef38, useContext as useContext4 } from "react";
 
 // src/components/Tabs/Tabs.css.ts
 import { createRuntimeFn as _7a46820 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -3539,31 +3984,31 @@ var root13 = "fvhbtd0";
 var trigger3 = /* @__PURE__ */ _7a46820({ defaultClassName: "fvhbtd4", variantClassNames: { variant: { line: "fvhbtd5", soft: "fvhbtd6" }, size: { sm: "fvhbtd7", md: "fvhbtd8" } }, defaultVariants: { variant: "line", size: "md" }, compoundVariants: [[{ variant: "soft", size: "sm" }, "fvhbtd9"], [{ variant: "soft", size: "md" }, "fvhbtda"]] });
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var TabsStyleContext = /* @__PURE__ */ createContext4({ variant: "line", size: "md" });
-var Tabs = /* @__PURE__ */ forwardRef36(function Tabs2({ variant = "line", size = "md", className, ...props }, ref) {
+var Tabs = /* @__PURE__ */ forwardRef38(function Tabs2({ variant = "line", size = "md", className, ...props }, ref) {
   const controlled = "value" in props ? { value: props.value ?? "" } : {};
-  return /* @__PURE__ */ jsx40(TabsStyleContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx40(RadixTabs.Root, { ref, className: cx(root13, className), ...props, ...controlled }) });
+  return /* @__PURE__ */ jsx42(TabsStyleContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx42(RadixTabs.Root, { ref, className: cx(root13, className), ...props, ...controlled }) });
 });
-var TabsList = /* @__PURE__ */ forwardRef36(function TabsList2({ className, ...rest }, ref) {
+var TabsList = /* @__PURE__ */ forwardRef38(function TabsList2({ className, ...rest }, ref) {
   const { variant } = useContext4(TabsStyleContext);
-  return /* @__PURE__ */ jsx40(RadixTabs.List, { ref, className: cx(list6({ variant }), className), ...rest });
+  return /* @__PURE__ */ jsx42(RadixTabs.List, { ref, className: cx(list6({ variant }), className), ...rest });
 });
-var TabsTrigger = /* @__PURE__ */ forwardRef36(function TabsTrigger2({ className, ...rest }, ref) {
+var TabsTrigger = /* @__PURE__ */ forwardRef38(function TabsTrigger2({ className, ...rest }, ref) {
   const { variant, size } = useContext4(TabsStyleContext);
-  return /* @__PURE__ */ jsx40(RadixTabs.Trigger, { ref, className: cx(trigger3({ variant, size }), className), ...rest });
+  return /* @__PURE__ */ jsx42(RadixTabs.Trigger, { ref, className: cx(trigger3({ variant, size }), className), ...rest });
 });
-var TabsContent = /* @__PURE__ */ forwardRef36(function TabsContent2({ className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx40(RadixTabs.Content, { ref, className: cx(content10, className), ...rest });
+var TabsContent = /* @__PURE__ */ forwardRef38(function TabsContent2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx42(RadixTabs.Content, { ref, className: cx(content10, className), ...rest });
 });
 
 // src/components/Textarea/Textarea.tsx
 import {
-  forwardRef as forwardRef37,
+  forwardRef as forwardRef39,
   useCallback as useCallback2,
-  useId as useId18,
-  useRef as useRef16,
-  useState as useState18
+  useId as useId21,
+  useRef as useRef23,
+  useState as useState20
 } from "react";
 
 // src/components/Textarea/Textarea.css.ts
@@ -3575,8 +4020,8 @@ var footer4 = "_1koawa8";
 var textarea = /* @__PURE__ */ _7a46821({ defaultClassName: "_1koawa0", variantClassNames: { size: { sm: "_1koawa1", md: "_1koawa2", lg: "_1koawa3" }, resize: { none: "_1koawa4", vertical: "_1koawa5", both: "_1koawa6" } }, defaultVariants: { size: "md", resize: "vertical" }, compoundVariants: [] });
 
 // src/components/Textarea/Textarea.tsx
-import { jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
-var Textarea = /* @__PURE__ */ forwardRef37(function Textarea2({
+import { jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
+var Textarea = /* @__PURE__ */ forwardRef39(function Textarea2({
   label: label6,
   helperText: helperText3,
   error,
@@ -3597,11 +4042,11 @@ var Textarea = /* @__PURE__ */ forwardRef37(function Textarea2({
   "aria-describedby": ariaDescribedBy,
   ...rest
 }, ref) {
-  const generatedId = useId18();
+  const generatedId = useId21();
   const textareaId = id ?? generatedId;
   const helperId = helperText3 ? `${textareaId}-helper` : void 0;
-  const innerRef = useRef16(null);
-  const [uncontrolledLength, setUncontrolledLength] = useState18(() => String(defaultValue ?? "").length);
+  const innerRef = useRef23(null);
+  const [uncontrolledLength, setUncontrolledLength] = useState20(() => String(defaultValue ?? "").length);
   const length = value3 !== void 0 ? String(value3).length : uncontrolledLength;
   const fitHeight = useCallback2(() => {
     const el = innerRef.current;
@@ -3611,17 +4056,21 @@ var Textarea = /* @__PURE__ */ forwardRef37(function Textarea2({
     el.style.height = `${el.scrollHeight + borders}px`;
   }, [autoResize]);
   useIsomorphicLayoutEffect(fitHeight, [fitHeight, value3]);
+  useFormReset(innerRef, () => {
+    if (value3 === void 0) setUncontrolledLength(String(defaultValue ?? "").length);
+    setTimeout(fitHeight);
+  });
   const handleChange = (event) => {
     if (value3 === void 0) setUncontrolledLength(event.target.value.length);
     fitHeight();
     onChange?.(event);
   };
-  return /* @__PURE__ */ jsxs34("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
-    label6 && /* @__PURE__ */ jsxs34("label", { htmlFor: textareaId, className: label, children: [
+  return /* @__PURE__ */ jsxs37("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label6 && /* @__PURE__ */ jsxs37("label", { htmlFor: textareaId, className: label, children: [
       label6,
-      required && /* @__PURE__ */ jsx41("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx43("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx43(
       "textarea",
       {
         ref: mergeRefs(innerRef, ref),
@@ -3643,36 +4092,36 @@ var Textarea = /* @__PURE__ */ forwardRef37(function Textarea2({
         ...rest
       }
     ),
-    (helperText3 || showCount) && /* @__PURE__ */ jsxs34("div", { className: footer4, children: [
-      helperText3 && /* @__PURE__ */ jsx41("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
-      showCount && /* @__PURE__ */ jsx41("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
+    (helperText3 || showCount) && /* @__PURE__ */ jsxs37("div", { className: footer4, children: [
+      helperText3 && /* @__PURE__ */ jsx43("p", { id: helperId, className: helperText({ error }), children: helperText3 }),
+      showCount && /* @__PURE__ */ jsx43("span", { className: cx(count, maxLength !== void 0 && length >= maxLength && countOver), children: maxLength !== void 0 ? `${length}/${maxLength}` : length })
     ] })
   ] });
 });
 
 // src/components/Toast/Toast.tsx
 import * as RadixToast from "@radix-ui/react-toast";
-import { createContext as createContext5, useCallback as useCallback3, useContext as useContext5, useMemo as useMemo4, useRef as useRef17, useState as useState19 } from "react";
+import { createContext as createContext5, useCallback as useCallback3, useContext as useContext5, useMemo as useMemo4, useRef as useRef24, useState as useState21 } from "react";
 import { XIcon as XIcon7 } from "@bestow-ui/icons";
 
 // src/components/Toast/Toast.css.ts
 import { createRuntimeFn as _7a46822 } from "@vanilla-extract/recipes/createRuntimeFn";
-var action2 = "_1g11zvx9";
-var close = "_1g11zvxa";
-var description6 = "_1g11zvx8";
-var title5 = "_1g11zvx7";
-var toast = /* @__PURE__ */ _7a46822({ defaultClassName: "_1g11zvx1", variantClassNames: { color: { primary: "_1g11zvx2", neutral: "_1g11zvx3", success: "_1g11zvx4", warning: "_1g11zvx5", danger: "_1g11zvx6" } }, defaultVariants: { color: "neutral" }, compoundVariants: [] });
+var action2 = "_1g11zvxa";
+var close = "_1g11zvxb";
+var description7 = "_1g11zvx9";
+var title5 = "_1g11zvx8";
+var toast = /* @__PURE__ */ _7a46822({ defaultClassName: "_1g11zvx1", variantClassNames: { color: { primary: "_1g11zvx2", neutral: "_1g11zvx3", success: "_1g11zvx4", warning: "_1g11zvx5", danger: "_1g11zvx6", info: "_1g11zvx7" } }, defaultVariants: { color: "neutral" }, compoundVariants: [] });
 var viewport2 = "_1g11zvx0";
 
 // src/components/Toast/Toast.tsx
-import { jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
 var REMOVE_DELAY = 500;
 var ToastContext = /* @__PURE__ */ createContext5(null);
 function ToastProvider({ children, duration = 5e3, label: labelProp }) {
   const m = useMessages();
   const label6 = labelProp ?? m.notifications ?? "\uC54C\uB9BC";
-  const [toasts, setToasts] = useState19([]);
-  const nextId = useRef17(0);
+  const [toasts, setToasts] = useState21([]);
+  const nextId = useRef24(0);
   const portal2 = usePortalProps();
   const toast2 = useCallback3((options) => {
     const id = nextId.current++;
@@ -3685,9 +4134,9 @@ function ToastProvider({ children, duration = 5e3, label: labelProp }) {
     setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
   }, []);
   const value3 = useMemo4(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
-  return /* @__PURE__ */ jsx42(ToastContext.Provider, { value: value3, children: /* @__PURE__ */ jsxs35(RadixToast.Provider, { duration, label: label6, swipeDirection: "right", children: [
+  return /* @__PURE__ */ jsx44(ToastContext.Provider, { value: value3, children: /* @__PURE__ */ jsxs38(RadixToast.Provider, { duration, label: label6, swipeDirection: "right", children: [
     children,
-    toasts.map(({ id, open, title: title6, description: description7, color, duration: itemDuration, action: action3 }) => /* @__PURE__ */ jsxs35(
+    toasts.map(({ id, open, title: title6, description: description8, color, duration: itemDuration, action: action3 }) => /* @__PURE__ */ jsxs38(
       RadixToast.Root,
       {
         open,
@@ -3697,15 +4146,15 @@ function ToastProvider({ children, duration = 5e3, label: labelProp }) {
         },
         className: toast({ color }),
         children: [
-          /* @__PURE__ */ jsx42(RadixToast.Title, { className: title5, children: title6 }),
-          description7 && /* @__PURE__ */ jsx42(RadixToast.Description, { className: description6, children: description7 }),
-          action3 && /* @__PURE__ */ jsx42(RadixToast.Action, { asChild: true, altText: action3.altText ?? action3.label, className: action2, children: /* @__PURE__ */ jsx42(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action3.onClick, children: action3.label }) }),
-          /* @__PURE__ */ jsx42(RadixToast.Close, { className: close, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ jsx42(XIcon7, { size: 16 }) })
+          /* @__PURE__ */ jsx44(RadixToast.Title, { className: title5, children: title6 }),
+          description8 && /* @__PURE__ */ jsx44(RadixToast.Description, { className: description7, children: description8 }),
+          action3 && /* @__PURE__ */ jsx44(RadixToast.Action, { asChild: true, altText: action3.altText ?? action3.label, className: action2, children: /* @__PURE__ */ jsx44(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action3.onClick, children: action3.label }) }),
+          /* @__PURE__ */ jsx44(RadixToast.Close, { className: close, "aria-label": m.close ?? "\uB2EB\uAE30", children: /* @__PURE__ */ jsx44(XIcon7, { size: 16 }) })
         ]
       },
       id
     )),
-    /* @__PURE__ */ jsx42(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
+    /* @__PURE__ */ jsx44(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
   ] }) });
 }
 function useToast() {
@@ -3722,7 +4171,7 @@ var arrow2 = "z7rufs1";
 var content11 = "z7rufs0";
 
 // src/components/Tooltip/Tooltip.tsx
-import { jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs39 } from "react/jsx-runtime";
 function Tooltip({
   content: content12,
   children,
@@ -3737,9 +4186,9 @@ function Tooltip({
 }) {
   const portal2 = usePortalProps();
   if (disabled || content12 == null || content12 === "") return children;
-  return /* @__PURE__ */ jsx43(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs36(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
-    /* @__PURE__ */ jsx43(RadixTooltip.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx43(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsx45(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs39(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx45(RadixTooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx45(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs39(
       RadixTooltip.Content,
       {
         side,
@@ -3750,7 +4199,7 @@ function Tooltip({
         style: portal2.style,
         children: [
           content12,
-          /* @__PURE__ */ jsx43(RadixTooltip.Arrow, { className: arrow2, width: 10, height: 5 })
+          /* @__PURE__ */ jsx45(RadixTooltip.Arrow, { className: arrow2, width: 10, height: 5 })
         ]
       }
     ) })
@@ -3758,19 +4207,19 @@ function Tooltip({
 }
 
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
-import { forwardRef as forwardRef38, useEffect as useEffect12, useId as useId19, useRef as useRef18, useState as useState20 } from "react";
+import { forwardRef as forwardRef40, useEffect as useEffect13, useId as useId22, useRef as useRef25, useState as useState22 } from "react";
 
 // src/components/VerificationCodeInput/VerificationCodeInput.css.ts
 var input5 = "ea01812";
-var row4 = "ea01810";
+var row5 = "ea01810";
 var slot = "ea01813";
 var slots = "ea01811";
 var timer = "ea01814";
 
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
-import { jsx as jsx44, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs40 } from "react/jsx-runtime";
 var formatTime = (seconds) => `${String(Math.floor(seconds / 60)).padStart(2, "0")}:${String(seconds % 60).padStart(2, "0")}`;
-var VerificationCodeInput = /* @__PURE__ */ forwardRef38(
+var VerificationCodeInput = /* @__PURE__ */ forwardRef40(
   function VerificationCodeInput2(props, ref) {
     const {
       length = 6,
@@ -3797,23 +4246,23 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef38(
     const label6 = labelProp ?? m.verificationCode ?? "\uC778\uC99D\uBC88\uD638";
     const resendText = resendTextProp ?? m.resend ?? "\uC7AC\uC804\uC1A1";
     const expiredText = expiredTextProp ?? m.verificationExpired ?? "\uC778\uC99D \uC2DC\uAC04\uC774 \uC9C0\uB0AC\uC5B4\uC694. \uC7AC\uC804\uC1A1\uD574 \uC8FC\uC138\uC694.";
-    const generatedId = useId19();
+    const generatedId = useId22();
     const inputId = id ?? generatedId;
     const helperId = `${inputId}-helper`;
     const statusId = `${inputId}-status`;
-    const inputRef = useRef18(null);
+    const inputRef = useRef25(null);
     const isControlled = "value" in props;
-    const [innerValue, setInnerValue] = useState20(defaultValue ?? "");
+    const [innerValue, setInnerValue] = useState22(defaultValue ?? "");
     const code = (isControlled ? value3 ?? "" : innerValue).slice(0, length);
-    const [focused, setFocused] = useState20(false);
-    const [endAt, setEndAt] = useState20(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
-    const [remaining, setRemaining] = useState20(expiresIn ?? 0);
+    const [focused, setFocused] = useState22(false);
+    const [endAt, setEndAt] = useState22(() => expiresIn ? Date.now() + expiresIn * 1e3 : null);
+    const [remaining, setRemaining] = useState22(expiresIn ?? 0);
     const expired = expiresIn !== void 0 && remaining <= 0;
-    const onExpireRef = useRef18(onExpire);
-    useEffect12(() => {
+    const onExpireRef = useRef25(onExpire);
+    useEffect13(() => {
       onExpireRef.current = onExpire;
     });
-    useEffect12(() => {
+    useEffect13(() => {
       if (endAt === null) return;
       const tick = () => {
         const left = Math.max(0, Math.ceil((endAt - Date.now()) / 1e3));
@@ -3827,6 +4276,12 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef38(
       tick();
       return () => clearInterval(timer2);
     }, [endAt]);
+    useFormReset(inputRef, () => {
+      if (isControlled) return;
+      const next = defaultValue ?? "";
+      setInnerValue(next);
+      if (next !== code) onValueChange?.(next);
+    });
     const setCode = (next) => {
       if (!isControlled) setInnerValue(next);
       onValueChange?.(next);
@@ -3846,19 +4301,19 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef38(
       }
       inputRef.current?.focus();
     };
-    const description7 = helperText3 ?? m.verificationCodeHint?.(length, type) ?? `${length}\uC790\uB9AC ${type === "numeric" ? "\uC22B\uC790" : "\uBB38\uC790"}\uB97C \uC785\uB825\uD558\uC138\uC694.`;
+    const description8 = helperText3 ?? m.verificationCodeHint?.(length, type) ?? `${length}\uC790\uB9AC ${type === "numeric" ? "\uC22B\uC790" : "\uBB38\uC790"}\uB97C \uC785\uB825\uD558\uC138\uC694.`;
     const activeIndex = Math.min(code.length, length - 1);
-    return /* @__PURE__ */ jsxs37(
+    return /* @__PURE__ */ jsxs40(
       "div",
       {
         className: cx(field, className),
         "data-invalid": error || void 0,
         "data-disabled": disabled || void 0,
         children: [
-          /* @__PURE__ */ jsx44("label", { htmlFor: inputId, className: label, children: label6 }),
-          /* @__PURE__ */ jsxs37("div", { className: row4, children: [
-            /* @__PURE__ */ jsxs37("div", { className: slots, children: [
-              /* @__PURE__ */ jsx44(
+          /* @__PURE__ */ jsx46("label", { htmlFor: inputId, className: label, children: label6 }),
+          /* @__PURE__ */ jsxs40("div", { className: row5, children: [
+            /* @__PURE__ */ jsxs40("div", { className: slots, children: [
+              /* @__PURE__ */ jsx46(
                 "input",
                 {
                   ref: mergeRefs(ref, inputRef),
@@ -3878,7 +4333,7 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef38(
                   className: input5
                 }
               ),
-              Array.from({ length }, (_, index) => /* @__PURE__ */ jsx44(
+              Array.from({ length }, (_, index) => /* @__PURE__ */ jsx46(
                 "div",
                 {
                   className: slot,
@@ -3889,12 +4344,12 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef38(
                 index
               ))
             ] }),
-            expiresIn !== void 0 && /* @__PURE__ */ jsx44("span", { role: "timer", className: timer, children: formatTime(remaining) }),
-            onResend && /* @__PURE__ */ jsx44(Button, { size: "sm", variant: "outline", color: "neutral", onClick: resend, disabled, children: resendText })
+            expiresIn !== void 0 && /* @__PURE__ */ jsx46("span", { role: "timer", className: timer, children: formatTime(remaining) }),
+            onResend && /* @__PURE__ */ jsx46(Button, { size: "sm", variant: "outline", color: "neutral", onClick: resend, disabled, children: resendText })
           ] }),
-          /* @__PURE__ */ jsx44("p", { id: helperId, className: helperText({ error }), children: description7 }),
-          /* @__PURE__ */ jsx44("p", { id: statusId, role: "status", className: helperText({ error: true }), children: expired ? expiredText : "" }),
-          name && /* @__PURE__ */ jsx44("input", { type: "hidden", name, value: code })
+          /* @__PURE__ */ jsx46("p", { id: helperId, className: helperText({ error }), children: description8 }),
+          /* @__PURE__ */ jsx46("p", { id: statusId, role: "status", className: helperText({ error: true }), children: expired ? expiredText : "" }),
+          name && /* @__PURE__ */ jsx46("input", { type: "hidden", name, value: code })
         ]
       }
     );
@@ -3913,6 +4368,7 @@ export {
   Button,
   Calendar,
   Checkbox,
+  CheckboxGroup,
   Combobox,
   DatePicker,
   DateRangePicker,
@@ -3946,6 +4402,7 @@ export {
   Popover2 as Popover,
   PopoverClose,
   RadioGroup2 as RadioGroup,
+  ResidentNumberInput,
   SegmentedControl,
   Select,
   SkipLink,