@bestow-ui/react 1.7.0 → 2.0.0

package/dist/client.js

@@ -26,7 +26,7 @@ import {
   themeToStyle,
   toISODate,
   visuallyHidden
-} from "./chunk-YYLDXZWR.js";
+} from "./chunk-BDQ5IJIS.js";
 
 // src/theme/ThemeProvider.tsx
 import { createContext, forwardRef, useContext, useId, useMemo } from "react";
@@ -158,10 +158,41 @@ var AccordionItem = /* @__PURE__ */ forwardRef2(function AccordionItem2({ title:
 });
 
 // src/components/AddressInput/AddressInput.tsx
-import { forwardRef as forwardRef7, useEffect, useId as useId3, 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";
@@ -189,7 +220,7 @@ var button = /* @__PURE__ */ _7a4682({ defaultClassName: "xcekda6", variantClass
 var icon = "xcekdai";
 
 // src/components/Button/Button.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var Button = /* @__PURE__ */ forwardRef4(function Button2({
   variant,
   color,
@@ -198,6 +229,8 @@ var Button = /* @__PURE__ */ forwardRef4(function Button2({
   startIcon,
   endIcon,
   loading,
+  asChild,
+  disabled,
   className,
   type = "button",
   onClick,
@@ -205,28 +238,55 @@ 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__ */ jsxs4(
+  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)
     }
   );
 });
@@ -292,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;
@@ -386,7 +446,7 @@ var searchStatus = "_16fi7uy5";
 var zonecode = "_16fi7uy3";
 
 // src/components/AddressInput/AddressInput.tsx
-import { Fragment, jsx as jsx9, jsxs as jsxs8 } 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,
@@ -394,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;
@@ -447,8 +507,8 @@ var AddressInput = /* @__PURE__ */ forwardRef7(
     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 = 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);
@@ -457,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;
@@ -473,102 +537,101 @@ var AddressInput = /* @__PURE__ */ forwardRef7(
       setOpen(false);
     };
     const fullAddress = `${current2.address}${current2.extraAddress ?? ""}`;
-    return /* @__PURE__ */ jsxs8("fieldset", { ref, 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
-        }
-      ),
-      /* @__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__ */ jsxs8(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 useId4, 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 _7a4684 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -581,8 +644,8 @@ var root4 = /* @__PURE__ */ _7a4684({ defaultClassName: "_1y7mzsn0", variantClas
 // src/components/Checkbox/Checkbox.tsx
 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__ */ jsxs9("label", { className: cx(root4({ size }), className), "data-disabled": disabled || void 0, children: [
@@ -665,6 +728,13 @@ var AgreementGroup = /* @__PURE__ */ forwardRef9(
     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);
@@ -676,7 +746,7 @@ var AgreementGroup = /* @__PURE__ */ forwardRef9(
     return /* @__PURE__ */ jsxs10(
       "fieldset",
       {
-        ref,
+        ref: mergeRefs(ref, rootRef),
         id,
         className: cx(fieldset2, className),
         disabled,
@@ -797,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) {
@@ -822,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;
@@ -838,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);
@@ -845,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) => {
@@ -866,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 };
 }
 
@@ -874,7 +951,7 @@ function useFormattedInput({
 var input3 = "_70qkav0";
 
 // src/components/AmountInput/AmountInput.tsx
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs12 } 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(
@@ -893,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;
@@ -908,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
@@ -928,7 +1005,7 @@ var AmountInput = /* @__PURE__ */ forwardRef11(
           onKeyDown?.(event);
         },
         endAdornment: unit2,
-        helperText: reading && helperText3 ? /* @__PURE__ */ jsxs12(Fragment2, { children: [
+        helperText: reading && helperText3 ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
           reading,
           /* @__PURE__ */ jsx13("br", {}),
           helperText3
@@ -983,7 +1060,7 @@ var externalIcon = "_1t4hlp6";
 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 jsxs14 } 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,
@@ -1016,7 +1093,7 @@ var Link = /* @__PURE__ */ forwardRef13(function Link2({
       ...rest,
       children: [
         children,
-        external && /* @__PURE__ */ jsxs14(Fragment3, { children: [
+        external && /* @__PURE__ */ jsxs14(Fragment4, { children: [
           " ",
           /* @__PURE__ */ jsx15(ExternalLinkIcon, { className: externalIcon }),
           /* @__PURE__ */ jsx15("span", { className: visuallyHidden, children: externalLabel })
@@ -1049,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]);
@@ -1065,7 +1142,7 @@ function useDelayedAnnouncement(message, delay = ANNOUNCE_DELAY) {
 }
 
 // src/components/BusinessNumberInput/BusinessNumberInput.tsx
-import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs16 } 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(
@@ -1084,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,
@@ -1104,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__ */ jsxs16(Fragment4, { children: [
+    return /* @__PURE__ */ jsxs16(Fragment5, { children: [
       /* @__PURE__ */ jsx17(
         TextField,
         {
@@ -1133,7 +1211,7 @@ var BusinessNumberInput = /* @__PURE__ */ forwardRef15(
 );
 
 // src/components/Calendar/Calendar.tsx
-import { forwardRef as forwardRef17, useEffect as useEffect5, useId as useId5, 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";
 
@@ -1150,7 +1228,7 @@ 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 _7a4688 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -1158,7 +1236,7 @@ var iconButton = /* @__PURE__ */ _7a4688({ defaultClassName: "ip9et20", variantC
 
 // 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,
     {
@@ -1167,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
     }
   );
 });
@@ -1206,7 +1285,7 @@ var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
   const weekdaysShort = m.weekdaysShort ?? KOREAN_WEEKDAYS;
   const weekdaysLong = m.weekdaysLong ?? KOREAN_WEEKDAYS.map((name) => `${name}\uC694\uC77C`);
   const headingId = useId5();
-  const gridRef = useRef7(null);
+  const gridRef = useRef9(null);
   const isControlled = "value" in props;
   const [innerValue, setInnerValue] = useState6(defaultValue ?? "");
   const selected = parseISODate(isControlled ? value3 : innerValue);
@@ -1223,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();
@@ -1332,7 +1411,7 @@ var Calendar = /* @__PURE__ */ forwardRef17(function Calendar2(props, ref) {
 });
 
 // src/components/CheckboxGroup/CheckboxGroup.tsx
-import { forwardRef as forwardRef18, useId as useId6, useState as useState7 } from "react";
+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";
@@ -1342,7 +1421,7 @@ var items = /* @__PURE__ */ _7a4689({ defaultClassName: "_1z0r6xj1", variantClas
 var option = "_1z0r6xj4";
 
 // src/components/CheckboxGroup/CheckboxGroup.tsx
-import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 var CheckboxGroup = /* @__PURE__ */ forwardRef18(
   function CheckboxGroup2(props, ref) {
     const {
@@ -1370,6 +1449,13 @@ var CheckboxGroup = /* @__PURE__ */ forwardRef18(
     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);
@@ -1378,7 +1464,7 @@ var CheckboxGroup = /* @__PURE__ */ forwardRef18(
     return /* @__PURE__ */ jsxs18("div", { className: cx(field, className), children: [
       label6 && /* @__PURE__ */ jsxs18("span", { id: labelId, className: cx(label, groupLabel), children: [
         label6,
-        required && /* @__PURE__ */ jsxs18(Fragment5, { children: [
+        required && /* @__PURE__ */ jsxs18(Fragment6, { children: [
           /* @__PURE__ */ jsx20("span", { className: requiredMark, "aria-hidden": true, children: "*" }),
           " ",
           /* @__PURE__ */ jsxs18("span", { className: visuallyHidden, children: [
@@ -1391,7 +1477,7 @@ var CheckboxGroup = /* @__PURE__ */ forwardRef18(
       /* @__PURE__ */ jsx20(
         "div",
         {
-          ref,
+          ref: mergeRefs(ref, rootRef),
           id: baseId,
           role: "group",
           "aria-label": ariaLabel,
@@ -1431,10 +1517,10 @@ var CheckboxGroup = /* @__PURE__ */ forwardRef18(
 import * as Popover from "@radix-ui/react-popover";
 import {
   forwardRef as forwardRef19,
-  useEffect as useEffect6,
+  useEffect as useEffect7,
   useId as useId7,
   useMemo as useMemo3,
-  useRef as useRef8,
+  useRef as useRef11,
   useState as useState8
 } from "react";
 import { CheckIcon, ChevronDownIcon as ChevronDownIcon3, XIcon as XIcon3 } from "@bestow-ui/icons";
@@ -1492,8 +1578,8 @@ var Combobox = /* @__PURE__ */ forwardRef19(function Combobox2(props, ref) {
   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] = useState8(defaultValue);
   const selectedValue = isControlled ? value3 : innerValue;
@@ -1519,6 +1605,12 @@ var Combobox = /* @__PURE__ */ forwardRef19(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?.("");
@@ -1546,6 +1638,7 @@ var Combobox = /* @__PURE__ */ forwardRef19(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();
@@ -1576,14 +1669,14 @@ var Combobox = /* @__PURE__ */ forwardRef19(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] = useState8(void 0);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!noResults) return;
     const timer2 = setTimeout(() => setAnnouncedFor(query2), ANNOUNCE_DELAY);
     return () => clearTimeout(timer2);
@@ -1732,7 +1825,7 @@ var Combobox = /* @__PURE__ */ forwardRef19(function Combobox2(props, ref) {
 });
 
 // src/components/DatePicker/DatePicker.tsx
-import { forwardRef as forwardRef20, useEffect as useEffect7, useRef as useRef9, useState as useState9 } 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
@@ -1798,7 +1891,7 @@ function Popover2({
 var PopoverClose = RadixPopover.Close;
 
 // src/components/DatePicker/DatePicker.tsx
-import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs21 } 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);
@@ -1828,7 +1921,7 @@ var DatePicker = /* @__PURE__ */ forwardRef20(
       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";
@@ -1838,7 +1931,7 @@ var DatePicker = /* @__PURE__ */ forwardRef20(
     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)}` : "";
@@ -1859,11 +1952,12 @@ var DatePicker = /* @__PURE__ */ forwardRef20(
       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;
@@ -1873,13 +1967,19 @@ var DatePicker = /* @__PURE__ */ forwardRef20(
       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__ */ jsxs21(Fragment6, { children: [
+    return /* @__PURE__ */ jsxs21(Fragment7, { children: [
       /* @__PURE__ */ jsx23(
         TextField,
         {
@@ -1937,7 +2037,7 @@ var DatePicker = /* @__PURE__ */ forwardRef20(
 );
 
 // src/components/DateRangePicker/DateRangePicker.tsx
-import { forwardRef as forwardRef21, useId as useId9, useState as useState10 } 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";
@@ -1986,6 +2086,10 @@ var DateRangePicker = /* @__PURE__ */ forwardRef21(
       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";
@@ -1993,7 +2097,7 @@ var DateRangePicker = /* @__PURE__ */ forwardRef21(
     return /* @__PURE__ */ jsxs22(
       "fieldset",
       {
-        ref,
+        ref: mergeRefs(ref, rootRef),
         id,
         className: cx(fieldset3, className),
         "aria-describedby": helperId,
@@ -2128,7 +2232,7 @@ function Drawer({
 var DrawerClose = Dialog2.Close;
 
 // src/components/ErrorSummary/ErrorSummary.tsx
-import { forwardRef as forwardRef22, useEffect as useEffect8, useId as useId10, 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";
@@ -2140,9 +2244,9 @@ 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 = useId10();
-  const rootRef = useRef10(null);
+  const rootRef = useRef14(null);
   const hasErrors = errors2.length > 0;
-  useEffect8(() => {
+  useEffect9(() => {
     if (hasErrors) rootRef.current?.focus();
   }, [focusKey, hasErrors]);
   if (!hasErrors) return null;
@@ -2177,9 +2281,20 @@ var ErrorSummary = /* @__PURE__ */ forwardRef22(function ErrorSummary2({ errors:
 });
 
 // src/components/FileUpload/FileUpload.tsx
-import { forwardRef as forwardRef23, useEffect as useEffect9, useId as useId11, useRef as useRef11, useState as useState11 } 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";
@@ -2224,12 +2339,15 @@ var FileUpload = /* @__PURE__ */ forwardRef23(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] = useState11(defaultValue ?? []);
   const files = isControlled ? value3 ?? NO_FILES : innerFiles;
@@ -2241,12 +2359,12 @@ var FileUpload = /* @__PURE__ */ forwardRef23(function FileUpload2(props, ref) {
   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;
@@ -2294,13 +2412,13 @@ var FileUpload = /* @__PURE__ */ forwardRef23(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 {
@@ -2310,12 +2428,20 @@ var FileUpload = /* @__PURE__ */ forwardRef23(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__ */ jsxs24("div", { ref, className: cx(field, root8, className), 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__ */ jsx27("span", { className: requiredMark, "aria-hidden": true, children: "*" })
@@ -2510,7 +2636,7 @@ var DropdownMenuSubContent = /* @__PURE__ */ forwardRef24(
 );
 
 // src/components/NumberInput/NumberInput.tsx
-import { forwardRef as forwardRef25, useEffect as useEffect10, useId as useId12, useRef as useRef12, useState as useState12 } 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
@@ -2521,7 +2647,7 @@ var stepper = /* @__PURE__ */ _7a46811({ defaultClassName: "_1vq2qhv3", variantC
 var unit = "_1vq2qhv2";
 
 // src/components/NumberInput/NumberInput.tsx
-import { Fragment as Fragment7, jsx as jsx29, jsxs as jsxs26 } 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;
@@ -2552,7 +2678,7 @@ var NumberInput = /* @__PURE__ */ forwardRef25(
     } = props;
     const isControlled = "value" in props;
     const m = useMessages();
-    const inputRef = useRef12(null);
+    const inputRef = useRef16(null);
     const generatedId = useId12();
     const inputId = id ?? generatedId;
     const precision = Math.max(0, precisionProp ?? decimalsOf(step2));
@@ -2560,7 +2686,7 @@ var NumberInput = /* @__PURE__ */ forwardRef25(
     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);
@@ -2573,7 +2699,7 @@ var NumberInput = /* @__PURE__ */ forwardRef25(
       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;
@@ -2584,18 +2710,24 @@ var NumberInput = /* @__PURE__ */ forwardRef25(
       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] = useState12("");
@@ -2646,7 +2778,7 @@ var NumberInput = /* @__PURE__ */ forwardRef25(
         children: direction < 0 ? /* @__PURE__ */ jsx29(MinusIcon2, {}) : /* @__PURE__ */ jsx29(PlusIcon, {})
       }
     );
-    return /* @__PURE__ */ jsxs26(Fragment7, { children: [
+    return /* @__PURE__ */ jsxs26(Fragment8, { children: [
       /* @__PURE__ */ jsx29(
         TextField,
         {
@@ -2790,13 +2922,9 @@ var Pagination = /* @__PURE__ */ forwardRef26(function Pagination2({
 });
 
 // src/components/PhoneNumberInput/PhoneNumberInput.tsx
-import { forwardRef as forwardRef27, useRef as useRef13 } from "react";
-import { formatPhoneNumber, phoneNumberMaxDigits } from "@bestow-ui/korean-utils";
+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 sanitize3 = (input6) => {
-  const digits = input6.replace(/\D/g, "");
-  return digits.slice(0, phoneNumberMaxDigits(digits));
-};
 var isDigit4 = (char) => /\d/.test(char);
 var PhoneNumberInput = /* @__PURE__ */ forwardRef27(
   function PhoneNumberInput2(props, ref) {
@@ -2809,7 +2937,7 @@ var PhoneNumberInput = /* @__PURE__ */ forwardRef27(
       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({
@@ -2817,7 +2945,7 @@ var PhoneNumberInput = /* @__PURE__ */ forwardRef27(
       value: value3,
       defaultValue,
       onValueChange,
-      sanitize: sanitize3,
+      sanitize: phoneNumberDigits,
       format: formatPhoneNumber,
       isMeaningful: isDigit4,
       inputRef
@@ -2844,7 +2972,7 @@ var PhoneNumberInput = /* @__PURE__ */ forwardRef27(
 );
 
 // src/components/RadioGroup/RadioGroup.tsx
-import { forwardRef as forwardRef28, useId as useId13, useState as useState14 } 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";
@@ -2885,6 +3013,13 @@ var RadioGroup2 = /* @__PURE__ */ forwardRef28(function RadioGroup3(props, ref)
   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);
@@ -2898,7 +3033,7 @@ var RadioGroup2 = /* @__PURE__ */ forwardRef28(function RadioGroup3(props, ref)
     /* @__PURE__ */ jsx32(
       "div",
       {
-        ref,
+        ref: mergeRefs(ref, rootRef),
         id: baseId,
         role: "radiogroup",
         "aria-label": ariaLabel,
@@ -2944,7 +3079,7 @@ var RadioGroup2 = /* @__PURE__ */ forwardRef28(function RadioGroup3(props, ref)
 });
 
 // src/components/ResidentNumberInput/ResidentNumberInput.tsx
-import { forwardRef as forwardRef29, useId as useId14, useRef as useRef14, useState as useState15 } from "react";
+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
@@ -2996,8 +3131,8 @@ var ResidentNumberInput = /* @__PURE__ */ forwardRef29(
     const frontId = `${baseId}-front`;
     const backId = `${baseId}-back`;
     const labelId = `${baseId}-label`;
-    const frontRef = useRef14(null);
-    const backRef = useRef14(null);
+    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) => {
@@ -3008,6 +3143,12 @@ var ResidentNumberInput = /* @__PURE__ */ forwardRef29(
       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;
@@ -3090,7 +3231,7 @@ var ResidentNumberInput = /* @__PURE__ */ forwardRef29(
 );
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { forwardRef as forwardRef30, useId as useId15, useRef as useRef15, useState as useState16 } 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";
@@ -3122,8 +3263,15 @@ var SegmentedControl = /* @__PURE__ */ forwardRef30(
     const current2 = isControlled ? value3 ?? "" : innerValue;
     const generatedId = useId15();
     const labelId = label6 ? `${id ?? generatedId}-label` : void 0;
-    const itemRefs = useRef15([]);
+    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;
@@ -3156,7 +3304,7 @@ var SegmentedControl = /* @__PURE__ */ forwardRef30(
     const group = /* @__PURE__ */ jsxs30(
       "div",
       {
-        ref,
+        ref: mergeRefs(ref, rootRef),
         id,
         role: "radiogroup",
         "aria-labelledby": labelId,
@@ -3396,7 +3544,7 @@ var SkipLink = /* @__PURE__ */ forwardRef33(function SkipLink2({ href = "#main",
 
 // src/components/Slider/Slider.tsx
 import * as RadixSlider from "@radix-ui/react-slider";
-import { forwardRef as forwardRef34, useId as useId18, useState as useState17 } 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";
@@ -3428,7 +3576,7 @@ var Slider = /* @__PURE__ */ forwardRef34(function Slider2(props, ref) {
     size,
     id,
     className,
-    disabled,
+    disabled: disabledProp,
     ...rest
   } = props;
   const m = useMessages();
@@ -3441,6 +3589,15 @@ var Slider = /* @__PURE__ */ forwardRef34(function Slider2(props, ref) {
   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);
@@ -3454,7 +3611,7 @@ var Slider = /* @__PURE__ */ forwardRef34(function Slider2(props, ref) {
     /* @__PURE__ */ jsxs33(
       RadixSlider.Root,
       {
-        ref,
+        ref: mergeRefs(ref, rootRef),
         id: baseId,
         min,
         max,
@@ -3496,17 +3653,18 @@ import { CheckIcon as CheckIcon4 } from "@bestow-ui/icons";
 
 // src/components/Stepper/Stepper.css.ts
 import { createRuntimeFn as _7a46817 } from "@vanilla-extract/recipes/createRuntimeFn";
-var description6 = "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 jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
-var Stepper = /* @__PURE__ */ forwardRef35(function Stepper2({ steps, current: current2, orientation = "horizontal", "aria-label": ariaLabel, className, ...rest }, ref) {
+var Stepper = /* @__PURE__ */ forwardRef35(function Stepper2({ steps, current: current2, orientation = "horizontal", loading, "aria-label": ariaLabel, className, ...rest }, ref) {
   const m = useMessages();
+  const reserveDescription = orientation === "vertical" && steps.some((step2) => step2.description);
   return /* @__PURE__ */ jsx39(
     "ol",
     {
@@ -3516,6 +3674,7 @@ var Stepper = /* @__PURE__ */ forwardRef35(function Stepper2({ steps, current: c
       ...rest,
       children: steps.map((step2, index) => {
         const status = index < current2 ? "complete" : index === current2 ? "current" : "upcoming";
+        const inProgress = loading && status === "current";
         return /* @__PURE__ */ jsxs34(
           "li",
           {
@@ -3523,14 +3682,19 @@ var Stepper = /* @__PURE__ */ forwardRef35(function Stepper2({ steps, current: c
             "data-status": status,
             "aria-current": status === "current" ? "step" : void 0,
             children: [
-              /* @__PURE__ */ jsx39("span", { className: indicator2({ status }), "aria-hidden": true, children: status === "complete" ? /* @__PURE__ */ jsx39(CheckIcon4, { size: 16, strokeWidth: 2.5 }) : index + 1 }),
-              /* @__PURE__ */ jsxs34("span", { className: text2({ orientation }), 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__ */ jsxs34("span", { className: visuallyHidden, children: [
                     " (",
                     m.stepCompleted ?? "\uC644\uB8CC",
                     ")"
+                  ] }),
+                  inProgress && /* @__PURE__ */ jsxs34("span", { className: visuallyHidden, children: [
+                    " (",
+                    m.stepInProgress ?? "\uC9C4\uD589 \uC911",
+                    ")"
                   ] })
                 ] }),
                 step2.description && /* @__PURE__ */ jsx39("span", { className: description6, children: step2.description })
@@ -3545,7 +3709,7 @@ var Stepper = /* @__PURE__ */ forwardRef35(function Stepper2({ steps, current: c
 });
 
 // src/components/Switch/Switch.tsx
-import { forwardRef as forwardRef36, useEffect as useEffect11, useId as useId19, useRef as useRef16, useState as useState18 } 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";
@@ -3579,26 +3743,21 @@ var Switch = /* @__PURE__ */ forwardRef36(function Switch2({
   const [uncontrolled, setUncontrolled] = useState18(defaultChecked ?? false);
   const isControlled = checkedProp !== void 0;
   const checked = isControlled ? checkedProp : uncontrolled;
-  const buttonRef = useRef16(null);
-  const inputRef = useRef16(null);
+  const buttonRef = useRef22(null);
+  const inputRef = useRef22(null);
   const [inForm, setInForm] = useState18(true);
-  const userToggled = useRef16(false);
+  const userToggled = useRef22(false);
   const setChecked = (next) => {
     if (!isControlled) setUncontrolled(next);
     if (next !== checked) onCheckedChange?.(next);
   };
-  const setCheckedRef = useRef16(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);
@@ -3679,7 +3838,7 @@ var striped = "l3ploy6";
 var table = "l3ploy1";
 
 // src/components/Table/Table.tsx
-import { Fragment as Fragment8, jsx as jsx41, jsxs as jsxs36 } 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__ */ forwardRef37(function Table2({
@@ -3779,7 +3938,7 @@ var TableEmpty = /* @__PURE__ */ forwardRef37(function TableEmpty2({ colSpan, cl
   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__ */ jsx41(Fragment8, { 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)) });
+  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
@@ -3848,7 +4007,7 @@ import {
   forwardRef as forwardRef39,
   useCallback as useCallback2,
   useId as useId21,
-  useRef as useRef17,
+  useRef as useRef23,
   useState as useState20
 } from "react";
 
@@ -3886,7 +4045,7 @@ var Textarea = /* @__PURE__ */ forwardRef39(function Textarea2({
   const generatedId = useId21();
   const textareaId = id ?? generatedId;
   const helperId = helperText3 ? `${textareaId}-helper` : void 0;
-  const innerRef = useRef17(null);
+  const innerRef = useRef23(null);
   const [uncontrolledLength, setUncontrolledLength] = useState20(() => String(defaultValue ?? "").length);
   const length = value3 !== void 0 ? String(value3).length : uncontrolledLength;
   const fitHeight = useCallback2(() => {
@@ -3897,6 +4056,10 @@ var Textarea = /* @__PURE__ */ forwardRef39(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();
@@ -3938,7 +4101,7 @@ var Textarea = /* @__PURE__ */ forwardRef39(function Textarea2({
 
 // 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 useRef18, useState as useState21 } 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
@@ -3958,7 +4121,7 @@ function ToastProvider({ children, duration = 5e3, label: labelProp }) {
   const m = useMessages();
   const label6 = labelProp ?? m.notifications ?? "\uC54C\uB9BC";
   const [toasts, setToasts] = useState21([]);
-  const nextId = useRef18(0);
+  const nextId = useRef24(0);
   const portal2 = usePortalProps();
   const toast2 = useCallback3((options) => {
     const id = nextId.current++;
@@ -4044,7 +4207,7 @@ function Tooltip({
 }
 
 // src/components/VerificationCodeInput/VerificationCodeInput.tsx
-import { forwardRef as forwardRef40, useEffect as useEffect12, useId as useId22, useRef as useRef19, useState as useState22 } 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";
@@ -4087,7 +4250,7 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef40(
     const inputId = id ?? generatedId;
     const helperId = `${inputId}-helper`;
     const statusId = `${inputId}-status`;
-    const inputRef = useRef19(null);
+    const inputRef = useRef25(null);
     const isControlled = "value" in props;
     const [innerValue, setInnerValue] = useState22(defaultValue ?? "");
     const code = (isControlled ? value3 ?? "" : innerValue).slice(0, length);
@@ -4095,11 +4258,11 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef40(
     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 = useRef19(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));
@@ -4113,6 +4276,12 @@ var VerificationCodeInput = /* @__PURE__ */ forwardRef40(
       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);